Bắt đầu với HTML5

Trong hướng dẫn này, bạn sẽ học cách tạo một tài liệu HTML5 hoặc một trang web dễ dàng như thế nào. Để bắt đầu viết mã HTML5, bạn chỉ cần hai thứ: một trình soạn thảo văn bản đơn giản và một trình duyệt web.

Vâng, hãy bắt đầu với việc tạo trang HTML đầu tiên của bạn.

Tạo tài liệu HTML đầu tiên của bạn

Chúng ta hãy đi qua các bước sau đây. Ở phần cuối của hướng dẫn này, bạn sẽ tạo một tệp HTML hiển thị thông báo "Hello world" trong trình duyệt web của bạn.

Bước 1: Tạo file HTML

Mở trình soạn thảo văn bản thuần túy trên máy tính của bạn và tạo một file mới.

Mẹo: Chúng tôi khuyên bạn nên sử dụng các trình soạn thảo đơn giản như Notepad (trên Windows), TextEdit (trên Mac) hoặc một số trình soạn thảo văn bản chuyên nghiệp như Visual Studio Code, Notepad++ để thực hiện việc này. Không nên sử dụng Word hoặc WordPad! Khi bạn hiểu các nguyên tắc cơ bản, bạn có thể chuyển sang các công cụ nâng cao hơn như Adobe Dreamweaver.

Bước 2: Nhập một số mã HTML

Bắt đầu với một cửa sổ trống và nhập mã sau:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>A simple HTML document</title>
</head>
<body>
    <p>Hello World!<p>
</body>
</html>

Bước 3: Lưu file

Bây giờ hãy lưu file của bạn với tên "myfirstpage.html".

Lưu ý: Điều quan trọng là phần mở rộng phải được chỉ định là .html - một số trình soạn thảo văn bản, chẳng hạn như Notepad, sẽ tự động lưu file dưới định dạng .txt nếu bạn không chỉ định phần mở rộng.

Để mở file bạn vừa tạo trong trình duyệt. Di chuyển đến file của bạn sau đó nhấp đúp vào file đó. Nó sẽ mở trong trình duyệt Web mặc định của bạn. Nếu không, hãy mở trình duyệt của bạn và kéo file vào đó.

Giải thích mã

Bạn có thể nghĩ mã ở trên là gì. Vâng, chúng ta hãy tìm hiểu.

  • Dòng đầu tiên <!DOCTYPE html> là khai báo kiểu tài liệu. Nó hướng dẫn trình duyệt web rằng tài liệu này là tài liệu HTML5. Nó không phân biệt chữ hoa chữ thường.
  • Phần tử <head> là vùng chứa cho các thẻ cung cấp thông tin về tài liệu, ví dụ: thẻ <title> xác định tiêu đề của tài liệu.
  • Phần tử <body> chứa nội dung thực của tài liệu (đoạn văn, liên kết, hình ảnh, bảng, v.v.) được hiển thị trong trình duyệt web và hiển thị cho người dùng.

Bạn sẽ tìm hiểu chi tiết về các phần tử HTML5 khác nhau trong các chương sắp tới. Hiện tại, hãy chỉ tập trung vào cấu trúc cơ bản của tài liệu HTML.

Lưu ý: Khai báo DOCTYPE xuất hiện ở đầu trang web trước tất cả các phần tử khác; tuy nhiên, bản thân khai báo loại tài liệu không phải là thẻ HTML. Mọi tài liệu HTML đều yêu cầu khai báo loại tài liệu để đảm bảo rằng các trang của bạn được hiển thị chính xác.
Mẹo: Thẻ <html>, <head><body> tạo nên khung cơ bản của mọi trang web. Nội dung bên trong thẻ <head></head> không hiển thị với người dùng ngoại trừ một ngoại lệ: văn bản giữa thẻ <title></title> xuất hiện dưới dạng tiêu đề trên tab trình duyệt.

Thẻ và phần tử HTML

HTML được viết dưới dạng các phần tử HTML bao gồm các thẻ đánh dấu (markup tag). Các thẻ đánh dấu này là đặc điểm cơ bản của HTML. Mỗi thẻ đánh dấu bao gồm một từ khóa, bao quanh bởi dấu ngoặc, chẳng hạn như <html>, <head>, <body>, <title>, <p> .v.v.

Các thẻ HTML thường có các cặp như <html></html>. Thẻ đầu tiên trong một cặp thường được gọi là thẻ mở (hoặc thẻ bắt đầu) và thẻ thứ hai được gọi là thẻ đóng (hoặc thẻ kết thúc).

Thẻ mở và thẻ đóng giống hệt nhau, ngoại trừ dấu gạch chéo (/) sau dấu ngoặc mở của thẻ đóng, để cho trình duyệt biết rằng phần tử đã được hoàn thành.

Ở giữa thẻ bắt đầu và thẻ kết thúc, bạn có thể đặt nội dung thích hợp. Ví dụ, một đoạn văn, được đại diện bởi phần tử p, sẽ được viết là:

<p>This is a paragraph.</p>
<!-- Paragraph with nested element -->
<p>
    This is <b>another</b> paragraph.
</p>

Trong chương sắp tới, bạn sẽ tìm hiểu về các phần tử HTML.

HTMLHTML5
Bài Viết Liên Quan:
iframe trong HTML5
Trung Nguyen 04/08/2021
iframe trong HTML5

Trong hướng dẫn này, bạn sẽ học cách sử dụng iframe để hiển thị một trang web trong một trang web khác.

Biểu mẫu trong HTML5
Trung Nguyen 03/08/2021
Biểu mẫu trong HTML5

Trong hướng dẫn này, bạn sẽ học cách tạo biểu mẫu trong HTML5 để thu thập thông tin đầu vào của người dùng.

Danh sách trong HTML5
Trung Nguyen 02/08/2021
Danh sách trong HTML5

Trong hướng dẫn này, bạn sẽ học cách tạo các loại danh sách khác nhau trong HTML5.

Bảng trong HTML5
Trung Nguyen 01/08/2021
Bảng trong HTML5

Trong hướng dẫn này, bạn sẽ học cách hiển thị dữ liệu dạng bảng bằng cách sử dụng bảng trong HTML5.