Bài đầu tiên: thực hành để học

Biểu tượng HTML5

VÌ mục đích giúp các bạn thực hiện được một trang web theo kiểu dân ngoại đạo CNTT nên chúng tôi – Khó Ăn Cát Bê Tông sẽ hướng dẫn một cách rất “tà đạo”. Nghĩa là sao? Nghĩa là bạn không bị sa đà vào những cái mà khiến cho bạn cảm thấy “Ủa, CNTT khô khan, khó khăn kiểu này mà vẫn được nhiều người thích sao?”.

Làm ngay một trang web

Mở trình soạn thảo code của bạn lên, nhập nội dung:

Hình 1. Ảnh đoạn mã HTML
Hình 1. Hình ảnh đoạn mã HTML của trang web đầu tay

Save file lại với tên là index.html đặt vào thư mục như là D:\hocweb

Mở trình duyệt web thường dùng của bạn lên, bấm Ctrl + O rồi browse đến file index.html vừa tạo ra. Bạn thấy:

Hình 2. Thể hiện hình hài trang web khi xem bằng trình duyệt

Xong! Vậy đó, bạn đã có ngay một trang web “made bở tui”. Cảm thấy phấn khích chứ?

Giải thích đoạn mã trên

Chưa cần dài dòng, lúc này bạn cần “học vẹt” một chút. Từ nay về sau, cứ mỗi lần tạo một file mới để làm web, bạn luôn nhập nội dung:

  • Giống Hình 1 từ dòng 1 đến dòng 7.
  • Sửa dòng 5 cụm “Vùng đất thực hành web” thành dòng chữ khác phản ánh chủ đề của trang web mà bạn làm ngày hôm đó.
  • Các dòng 8 đến 11 ta xóa đi, chỉ để lại dòng trắng ở dòng 8.
  • Dòng 12, 13 lúc này đã trở thành dòng 9, 10.

Bạn chưa hiểu đoạn trên, đây là kết quả:

Mẫu đơn giản nhất để tạo 1 trang web bất kỳ

Giải thích chi tiết hơn

File index.html mà ta ngồi gõ lọc cọc và hiển thị như trên, được gọi là file HTML (HyperText Markup Language). Nó chính là “quả tim và khối óc” của mọi trang web trên thế giới này.

Từ nay trở đi, chúng tôi thường viết kèm từ tiếng Anh bên cạnh hoặc dùng tiếng Anh vì không biết chuyển ngữ sang tiếng Việt thế nào. Có thể một số bạn khó chịu điều này, nhưng sự thật là công nghệ Web do một người Anh sáng tạo ra, và nó dùng tiếng Anh cho nên chúng ta nên học mà thôi, chứ cứ đòi “thuần Việt” thì khó khăn, không dịch ra được.

Cách viết các cụm từ tiếng Anh có hai mục đích: giúp bạn tra cứu Google dễ dàng hơn, và cũng giúp cho bạn quen với việc hiểu thuật ngữ tiếng Anh, dẹp bỏ được việc ngại đọc tiếng Anh.

Cần phân biệt: chúng tôi dùng từ thẻ như là tên gọi ngắn của thẻ HTML, tức là mọi thẻ được dùng khi làm trang web. Còn khi nói “tạo một thẻ HTML” khi đề cập đến việc soạn nội dung HTML thì nó có nghĩa là một thẻ như bao thẻ P, DIV, IMG khác, chỉ có điều nó vô tình có tên là HTML. Vậy, hiểu là trong văn bản/ tài liệu/ file HTML

Đọc Quy ước viết từ/ ngữ trong các bài viết.

Dòng 1: gọi là dòng DOCTYPE (Document Type Declaration) báo cho trình duyệt biết nó nên phân giải tài liệu (tức là file đang chứa dòng này, ta đang đề cập) dưới dạng tài liệu như thế nào, phiên bản mấy. Hiện tại, ngôn ngữ HTML đang ở phiên bản 5 (HTML version 5), hay được đề cập như là HTML5 (số 5 thường hay được viết dính liền, bạn viết rời cũng không sao nhưng thông tục trên mạng người ta viết dính liền HTML5).

Vậy, dòng 1 này ta cứ viết y chang như vậy ở mọi file HTML mà không cần suy nghĩ gì. Những trang web mà bạn mở ra thấy không giống vậy nghĩa là nó ở phiên bản cũ hơn, đã được là ra cách đây 5-7 năm gì đó.

Dòng 2: thẻ HTML mở, thẻ (tag) này là thẻ dùng bao quát cho mọi tài liệu/ file HTML.

Dòng 3: thẻ HEAD mở, dùng để khai báo liên quan đến phần Header trong giao thức HTTP truyền trang web. Những gì viết trong các tag trong phần HEAD này thường không xuất hiện trên màn hình hiển trị trang web, ngoại trừ thẻ TITLE tạo ra tiêu đề tab của sổ trình duyệt.

Dòng 4: thẻ META, báo cho trình duyệt biết tài liệu HTML được mã hóa dươi dạng Unicode UTF-8. Nếu file của bạn có nội dung thứ tiếng khác, không phải tiếng Anh, luôn có dòng này để font chữ hiển đúng. Thẻ này là thẻ rỗng (empty tag) nên không có thẻ đóng.

Dòng 5: phần tử (element) Title để đặt tiêu đề cửa sổ tab của trình duyệt, thẻ này cũng giúp cho việc người ta tìm thấy trang web trên Internet. Title nên luôn phản ánh chủ đề chính của nội dung trang web.

Dòng 6: thẻ HEAD đóng của thẻ HEAD mở ở dòng 3.

Dòng 7: thẻ BODY, tức là phần thân của tài liệu HTML, nó cũng chính là phần mở đầu cho phần nội dung chính của trang web. Các bố cục, văn bản, hình ảnh hiển thị trên trang web đều là các thẻ khác nằm bên trong body.

Dòng 8: phần tử H1, thể hiện dòng chữ to, đại diện cho tiêu đề cấp 1 của tài liệu. Ta cứ hình dung một tài liệu có cấu trúc thì H1 là cấp nội dung lớn nhất, bao quát nhất.

Dòng 9: phần tử P, tạo ra một đoạn văn (paragraph) trên trang web.

Dòng 10, 11: phần tử P, tạo ra một đoan văn khác trên trang web.

Dòng 12: thẻ BODY đóng cho thẻ BODY mở dòng 7.

Dòng 13: thẻ HTML đóng, đóng cho thẻ mở dòng 2, đóng lại tài liệu HTML.

Những điểm cần nắm vững, học thuộc lòng

Thẻ (tag) và phần tử (element) giống/ khác nhau thế nào? Xem giải thích.

Xét theo kía cạnh cấu trúc mở/ đóng thì thẻ được chia làm hai nhóm:

  • Nhóm thẻ có nội dung (container tag): phần lớn các thẻ thuộc nhóm này. Tức là có thẻ mở, rồi đến nội dung của thẻ, sau đó thẻ đóng.
  • Nhóm thẻ không có nội dung/ thẻ rỗng (empty tag): ít thẻ, bạn có thể nhớ danh sách thẻ sau: AREA, BASE, BR, COL, EMBED, HR, IMG, INPUT, LINK, META, PARAM, SOURCE, TRACK, WBR

Từ đặc tính trên, dễ dàng nhận thấy thẻ có nội dung có thể chứa một/ nhiều thẻ có nội dung khác và/ hoặc thẻ không có nội dung bên trong nó. Trong khi đó, thẻ không có nội dung thì không thể chứa bất cứ cái gì trong nó.

Đứng ở góc độ xây dựng bố cục các khối cấu trúc giao diện trên trang web, các phần tử (element) sẽ được chia làm 2 nhóm:

  1. Phần tử khối (block-level element): mỗi phần tử tạo ra một khối hình chữ nhật, mặc định chiếm trọn chiều ngang của màn hình mà không cho phép phần tử nào khác nằm cạnh nó bên trái hoặc bên phải.
  2. Phần tử trong dòng (inline-level element):

kkkkk

Trả lời