File HTML đầu tiên

Sau khi đã có những khái niệm cơ bản về ngôn ngữ HTML. Hôm nay, chúng ta sẽ kết hợp các phần tử HTML trong một file HTML hoàn chỉnh.

File HTML đầu tiên

Cấu trúc một file HTML

Chúng ta cùng xem một ví dụ bên dưới

Bây giờ chúng ta sẽ tìm hiểu về file HTML này:

Khai báo doctype

Ở dòng đầu tiên các bạn thấy cú pháp khai bái: <!DOCTYPE html>. Quay ngược lại dòng thời gian, khi HTML mới ra đời, để khai báo các chuẩn, quy ước của HTML người ta cần khai báo như sau ở đầu mỗi file HTML

Tuy nhiên, tới ngày hôm nay, chúng ta đang được sử dụng HTML5, các tiêu chuẩn về ngôn ngữ đã được thống nhất và quy định một cách rõ ràng sau hơn 30 năm phát triển. Việc khai báo các chuẩn của một tài liệu HTML là không cần thiết. Nhưng người ta vẫn giữ lại một đoạn mã ngắn để khai báo đây là một tài liệu HTML. Bạn nhớ luôn thêm nó vào đầu các file HTML của mình.

Phần tử html

Kế đến, chúng ta dễ dàng nhận thấy: nếu bỏ đoạn mã khai báo ở dòng đầu tiên. Toàn bộ file HTML của chúng ta là một phần tử html (nó được bao bởi tag html). Đôi lúc bạn còn được nghe nhắc đến phần tử html với tên gọi khác là phần tử gốc (root element).

Phần tử head

Bên trong phần tử html chúng ta thấy có 2 phần tử con là head và body. Theo thứ tự chúng ta hãy phân tích phần tử head trước. Phần tử head hoạt động như một phần tử dùng để chứa (container) rất nhiều thứ quan trọng mà bạn muốn thêm vào trang web và đặc biệt những thứ đó không phải là nội dung mà người dùng có thể nhìn thấy một cách trực tiếp. Nhưng những thứ được thêm vào ở thẻ head lại giúp trang web của bạn hoạt động một cách hiệu quả hơn. Ví dụ: chúng ta sẽ thêm những file tài nguyên bên ngoài như CSS, JavaScript, Font và các phần tử meta…vv Ở  ví dụ trên chúng ta chỉ sử dụng 2 phần tử con trong phần tử head.

    • Phần tử meta: Thông thường các phần tử meta dùng để đặc tả một thông tin nào đó, giúp trình duyệt web hoặc search engine có thể hiểu và tương tác với trang web của bạn một cách hiệu quả. Trong trường hợp này, phần tử meta của chúng ta mô tả về charset của trang web là utf-8 thông qua nó, trình duyệt sẽ biết cách hiển thị nội dung trang web một cách chính xác hơn.
    • Phần tử title: Mô tả tiêu đề của trang web, phần tiêu đề này sẽ được hiển thị ở thanh tiêu đề của tab (trên trình duyệt) đang mở trang web. Ngoài ra nó còn dùng để mô tả trang web của bạn khi người dùng sử dụng các tính năng như bookmark/favorite.

Phần tử body

Kế đến là phần tử body. Phần tử này hoạt động như một phần tử dùng để chứa toàn bộ nội dung của trang web (Những nội dung mà người dùng có thể nhìn thấy được) như văn bản, hình ảnh, video …

Thực hành nào!

Nào, chúng ta cùng tạo 1 file HTML đầu tiên của bạn.

  • Bước đầu tiên chúng ta cần một phần mềm hỗ trợ việc biên tập văn bản. Để tìm hiểu và làm việc với HTML chúng ta không cần một phần mềm quá khủng, chỉ cần 1 trình biên tập văn bản là đủ. Nếu bạn chưa có, bạn hãy tham khảo các text editors và tìm một phần mềm phù hợp.
  • Bước 2: bạn cần mở text editor lên và tạo 1 file mới
  • Bước 3: copy/paste toàn bộ ví dụ ở phía trên vào file của bạn
  • Bước 4: lưu file lại với tên “index.html”
  • Bước 5: mở file index.html của bạn lên bằng trình duyệt web. Xem thử trang web của bạn có giống trang web của của mình không?
  • Bước 6: Bạn thử mở file index.html lên bằng text editor, sau đó thay đổi nội dung của phần tử title và h1 bằng tên của bạn. Sau đó lưu lại, trở lại trình duyệt web và tải lại trang. Nội dung trên trang web của bạn có thay đổi không?

Chúc mừng bạn đã tạo được file HTML đầu tiên.

Khoảng trắng trong file HTML

Ở ví dụ phía trên của mình, các bạn thấy giữa các phần tử mình để khá nhiều khoảng trắng. Rất dễ dàng các bạn cũng đoán ra vì sao mình làm vậy đúng không? Rất dễ đọc, dễ quản lý các phần tử lồng nhau. Tránh việc thừa, thiếu hay đóng mở sai thứ tự các tag. Tuy nhiên, khi hiển thị, chúng ta hoàn toàn không thấy những khoảng trắng đó?

Câu trả lời là do trình duyệt. Dù bạn có sử dụng bao nhiêu khoảng trắng giữa các phần tử, trong nội dung các phần tử đi nữa, trình duyệt web của chúng ta trước khi hiển thị cũng sẽ loại bỏ hết. Chúng sẽ giảm tất cả khoảng trắng xuống chỉ còn một. Do đó, chúng ta có thể tự do sử dụng các khoảng trắng, tab, để kiến mã nguồn của chúng ta trở nên sạch hơn mà không ngại việc ảnh hưởng đến nội dung.

Entity references

Trong ngôn ngữ HTML các bạn có thể thấy các ký tự như <, >, /, “, ‘ là các ký tự đặc biệt, chúng là một phần của ngôn ngữ. Trong một số trường hợp, chúng ta vẫn cần sử dụng chúng như nội dung của trang web. Tuy nhiên, nếu sử dụng không cẩn thận, chúng có thể làm sai lệch cấu trúc của tài liệu HTML.

Để an toàn hơn, chúng ta sẽ sử dụng các ký tự thay thế. Các ký tự này được bắt đầu bằng dấu ‘&’ và kết thúc bằng dấu chấm phẩy (;). Một vài ví dụ đơn giản

Ký tự Mã thay thế tương ứng
< &lt;
> &gt;
&quote;
&apos;
& &amp;

Thao khảo thêm danh sách các ký tự đặc biệt trong tài liệu HTML.

HTML comments

Các bạn đã làm việc với các ngôn ngữ lập trình chắc không xa lạ gì về khái niệm “comment”. Đôi lúc chúng ta cần ghi chú hay tạm thời bỏ qua một vài đoạn code nhỏ. HTML cũng hỗ trợ chúng ta chức năng này.

Để comment một đoạn code, chúng ta sẽ sử dụng cú pháp <!– và –> để bao phần nội dung cần comment lại.

Cũng giống với những ngôn ngữ lập trình khác. Các đoạn mã trong comment sẽ bị bỏ qua và không được xử lý. Các bạn có thể xem chi tiết tại đây. Dòng thứ 2 sẽ không được hiển thị nhưng khi các bạn sử dụng chức năng “view page  source” các bạn vẫn sẽ thấy nó.