Bài 1: Làm quen với HTML CSS

lam quen voi html css
Rate this post

Chào mừng bạn đến tìm hiểu HTML, cách dễ nhất để tìm hiểu HTML & CSS là trực tuyến, tương tác.

Học HTML & CSS là cần thiết cho bất kỳ nhà thiết kế web nào.

Trước khi bạn bắt đầu, tôi đề nghị bạn bắt đầu bằng cách tải một HTML & CSS IDE. Hiện tại tôi đang sử dụng Dreamweaver, ngoài ra bạn có thể tải một số công cụ hỗ trợ lập trình sau đây.

  1. Dreamweaver
  2. Notapad ++
  3. Atom
  4. Sublime Text
  5. Brackets

Trong hướng dẫn này bạn sẽ không thực sự cần một IDE, bởi vì tất cả code được thực hiện trực tuyến.

Giới thiệu

HTML (HyperText Markup Language) là một tiêu chuẩn được phát triển trong những năm qua để truyền đạt thông tin qua internet bằng cách sử dụng “siêu liên kết” – hay chỉ là liên kết như chúng ta biết ngày nay. Trái ngược với một PDF, một trang HTML là năng động hơn trong tự nhiên, cho phép bạn duyệt web bằng cách nhấp vào liên kết và tương tác với trang. Liên kết có thể đưa bạn hoặc đến một vị trí khác nhau trong trang hiện tại, hoặc đến một trang khác qua internet.

Phiên bản cuối cùng của HTML là HTML 5.0, trong đó có khả năng nhiều hơn so với những gì các trang web ban đầu. HTML 5 là một nền tảng cực kỳ toàn diện cho phép tạo ra một giao diện người dùng cao cấp cùng với sức mạnh của CSS và JavaScript. HTML 5 mạnh mẽ đến nỗi nó đã quản lý việc không dùng Adobe Flash, Silverlight của Microsoft và chỉ về tất cả các plugin HTML như trình phát video, ứng dụng Java và hơn thế nữa.

Vì vậy, sự khác biệt giữa HTML, CSS, và JavaScript là gì? Trước hết, họ có thể tất cả được gói gọn trong một trang HTML, có nghĩa là trình duyệt bắt đầu bằng cách tải một trang HTML, và chỉ khi đó nó biết những gì để nạp từ đó.

  • Một trang HTML là một tài liệu HTML được xác định nội dung của trang bằng cách sử dụng một đánh dấu đặc biệt tương tự như XML.
  • Một stylesheet CSS xác định kiểu của các phần tử HTML trong trang.
  • JavaScript là ngôn ngữ lập trình sử dụng để tương tác với các trang HTML thông qua một API gọi là DOM (Document Object Model) Bindings. Nói cách khác, các Bindings DOM là keo giữa các ngôn ngữ lập trình và các trang HTML mà ban đầu đã được nạp vào trình duyệt.

Chúng tôi sẽ sử dụng một khung CSS được gọi là Bootstrap bởi Twitter, thư viện CSS phổ biến nhất hiện nay. Các nguyên tắc cơ bản của một thư viện CSS khá giống nhau – tất cả đều dựa trên “hệ thống lưới”, một cách dễ dàng để xác định bố cục của trang HTML – một phương pháp được phát triển qua nhiều năm phát triển web.

HTML đầu tiên trang của bạn

Hãy bắt đầu bằng cách tạo ra một trang HTML đơn giản.

<!DOCTYPE html>
<html>
    <head>
        <!-- head definitions go here -->
    </head>
    <body>
        <!-- the content goes here -->
    </body>
</html>

Hãy bắt đầu bằng cách tạo một trang đơn giản có chứa cụm từ “Hello, World!” trong cơ thể. Trang cũng sẽ có tiêu đề – thứ xuất hiện trong tiêu đề của tab trong trình duyệt của bạn. Phần tử xác định tiêu đề của trang HTML. <title>

Phần tử định nghĩa một “đoạn văn”, một khối văn bản có một khoảng cách nhỏ giữa phần trên và dưới của nó. <p>

Lưu ý cách các thẻ có thẻ bắt đầu và thẻ kết thúc được biểu thị bằng dấu gạch chéo ( ). Mọi thứ ở giữa là nội dung của thẻ. Nội dung của một thẻ thường có thể có thêm các thẻ HTML bên trong chúng. </p>

<!DOCTYPE html>
<html>
    <head>
        <title>Ví dụ</title>
    </head>
    <body>
        <p>Dây là một ví dụ về một trang HTML đơn giản với một đoạn
</p>
    </body>
</html>

Bạn cũng có thể sao chép và dán mã này vào một file mới trong trình soạn thảo văn bản của bạn hoặc IDE, và lưu các tập tin như “index.html”. Các tập tin “index.html” là file mặc định mà một máy chủ web sẽ tìm kiếm khi truy cập vào một trang web. Sau khi lưu các tập tin, bạn có thể click đúp vào nó để mở nó bằng trình duyệt của bạn.

 

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *