Bắt đầu với HTML

Cập nhật mới nhất ngày 24/06/2020

Trang HTML chỉ đơn giản là một file text được lưu với phần đuôi mở rộng .html hoặc .htm.

Bắt đầu

Trong phần hướng dẫn này, bạn sẽ tìm hiểu cách tạo một tài liệu HTML hoặc một trang web. Để bắt đầu tạo HTML, bạn chỉ cần hai thứ: trình soạn thảo văn bản (Editor) đơn giản và trình duyệt web (Ở đây bạn có thể sử dụng Notepad++ và trình duyệt Chrome Google).

Nào, hãy bắt đầu tiến hành tạo trang HTML đầu tiên của bạn thôi!

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

Hãy đi theo từng bước hướng dẫn sau. Và mục đích phần hướng dẫn này là, bạn sẽ tạo một trang 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 đơn giản (Editor) trên máy tính của bạn và tạo một file mới.

Tips

ThegioiPhp khuyên bạn nên sử dụng Notepad++ (trên Windows), TextEdit (trên Mac) hoặc một số trình soạn thảo văn bản đơn giản khác để thực hiện việc này; không sử dụng Microsoft Word nhé! 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ư Visual Studio Code, PhpStorm...

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 đây:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<title>A simple HTML document</title> 
</head> 
<body> 
<p>Hello World!<p> 
</body> 
</html><!DOCTYPE html>
Bước 3: Lưu lại file

Bây giờ hãy lưu file trên máy tính để bàn của bạn dưới dạng "index.html".

Note

Điều quan trọng là lưu ở dạng file .html. Vì 1 số trình soạn thảo văn bản, chẳng hạn như Notepad++, sẽ tự động lưu nó thành file .txt.

Để mở file này trong trình duyệt. Ta vào đúng thư mục chứa file này và double click vào nó. 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 đã nghĩ những gì về những mã HMTL đó? Thôi, chúng ta hãy tìm hiểu nào!

  • Dòng đầu tiên <!DOCTYPE html> là khai báo loại tài liệu . Nó chỉ thị cho trình duyệt web rằng tài liệu này là tài liệu HTML5.

  • Phần tử <head> là một nơi chứa các thẻ cung cấp thông tin về website, ví dụ: <title> là thẻ xác định tiêu đề của web đó.
  • Phần tử <body> chứa nội dung thực tế của website (đoạn văn, liên kết url, hình ảnh, Table, v.v.) được hiển thị trong trình duyệt web cho người dùng xem.

Bạn sẽ tìm hiểu về các yếu tố HTML khác nhau một cách chi tiết hơn trong các bài tiếp theo. Hiện tại, chỉ nên tập trung vào cấu trúc cơ bản của tài liệu HTML thôi.

Tips

Các thẻ <html>, <head> và <body> tạo nên khung xương cơ bản của mỗi trang web. Nội dung bên trong <head> và </head> là không hiển thị trên màn hình cho người dùng xem. Còn đoạn text nằm trong thẻ <body> và </body> xuất hiện dưới dạng tiêu đề trên tab trình duyệt.

Thẻ và thành phần HTML

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

Các thẻ HTML thường đi theo cặp như <html> và </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 lệnh đã được hoàn thành.

Ở giữa thẻ bắt đầu và kết thúc, bạn có thể đặt nội dung phù hợp. Ví dụ: một đoạn text thì được đặt trong cặp thể <p>, vì P viết tắt của chữ Paragraph,  và sẽ được trình bày như sau:

<p>This is a paragraph.</p>
<!-- Paragraph with nested element --> 
<p> This is <b>another</b> paragraph. </p>
Bạn sẽ tìm hiểu về các HTML Elements trong bài viết sắp tới.