Nhảy đến nội dung
hoclamweb.dev

Trang web đầu tiên

Trăm nghe không bằng mắt thấy, hãy cùng xây dựng một trang web đơn giản trong vòng ba nốt nhạc 🎶.

Bài viết này sẽ hướng dẫn bạn:

  • Viết những dòng HTML đầu tiên
  • Tìm hiểu HTML là gì và thẻ <p>

Cùng làm thôi 💪

Trang web đầu tiên

  1. Trong VS Code, bạn click chuột phải vào thanh Sidebar ở bên phải, chọn New File…

  2. Đặt tên cho tập tin mới là index.html, sau đó nhập vào:

    index.html
    <p>Xin chào!</p>

    Nhấn Ctrl + S để lưu lại.

  3. Mở trình duyệt, ví dụ như Firefox hay Chrome, vào menu File - Open File…, hoặc nhấn Ctrl + O.

    Chọn đến tập tin index.html vừa tạo. Bạn sẽ thấy trình duyệt hiển thị như bên dưới.

  4. Chúc mừng bạn 🥳 Bạn vừa khởi tạo một trang web rồi đó.

HTML là gì?

Mặc dù chúng ta gõ vào <p>Xin chào!</p> nhưng trình duyệt chỉ hiển thị câu “Xin chào!”, vậy <p></p> đi đâu rồi?

Lý do đến từ tên của HTML, là viết tắt của HyperText Markup Language hay Ngôn ngữ đánh dấu siêu văn bản. Một tài liệu viết bằng HTML sẽ bao gồm nhiều thẻ đánh dấu (markup), và <p></p> là một trong số đó. Trong trường hợp của chúng ta, <p></p> đánh dấu phần nội dung được hiển thị là một đoạn văn (paragraph).

Mỗi thẻ đánh dấu sẽ có từng công dụng riêng và trình duyệt sẽ hiển thị chúng khác nhau. Chúng ta sẽ thấy rõ điều này trong các bài học sau.

Nhìn chung, cú pháp để viết HTML sẽ là:

Xin chào! <p> </p> Mở thẻ Đóng thẻ Nội dung
  1. Mở thẻ, ví dụ <p>
  2. Viết nội dung, ví dụ Xin chào!
  3. Đóng thẻ, ví dụ </p>

Thêm nội dung

Hãy viết thêm một câu giới thiệu vào index.html.

<p>
  Xin chào!
  <!--xx-->
  Tui tên là Cún.
</p>

Kết quả:

Mặc dù chúng ta viết ở hai dòng khác nhau nhưng trình duyệt lại chỉ hiển thị trên một dòng. Có nghĩa là: HTML sẽ bỏ qua khoảng trắng hay ký tự xuống dòng trong mã nguồn.

Do đó, nếu bạn viết:

<p>
  Xin chào! Tui tên
  <!--xx-->
  là Cún.
</p>

hay

<p>
  Xin
  <!--xx-->
  chào!
  <!--xx-->
  Tui
  <!--xx-->
  tên
  <!--xx-->
  là
  <!--xx-->
  Cún.
</p>

thì kết quả hiển thị đều như nhau.

Nhưng nếu bạn muốn mỗi câu một dòng thì sao? Rất đơn giản, chúng ta sẽ sử dụng hai thẻ <p>:

<p>Xin chào!</p>
<p>Tui tên là Cún.</p>

Bài tập

Viết những câu thơ sau bằng HTML:

Trăm năm trong cõi người ta,

Chữ tài chữ mệnh khéo là ghét nhau.

Trải qua một cuộc bể dâu,

Những điều trông thấy mà đau đớn lòng.

Mỗi câu thơ phải hiển thị trên một dòng riêng biệt.

Click để xem lời giải
<p>Trăm năm trong cõi người ta,</p>
<p>Chữ tài chữ mệnh khéo là ghét nhau.</p>
<p>Trải qua một cuộc bể dâu,</p>
<p>Những điều trông thấy mà đau đớn lòng.</p>