Ngôn ngữ HTML và cấu trúc trang web

Cấu trúc và thẻ HTML cơ bản

HTML dùng thẻ (tag) để đánh dấu nội dung. Phần lớn thẻ có dạng mở <tên> và đóng </tên>, nội dung nằm giữa hai thẻ. Trang HTML có khung chung gồm <html> bao ngoài, bên trong có <head> (chứa thông tin và khai báo, không hiển thị trực tiếp) và <body> (chứa nội dung hiển thị trên trình duyệt). Phần tử <html> là phần tử gốc, bao quanh tất cả các phần tử còn lại.

Thẻ <style> chứa quy tắc CSS và thường đặt trong <head>. Bộ chọn lớp viết bằng dấu chấm, ví dụ .canh, áp dụng cho mọi phần tử có thuộc tính class chứa đúng tên đó. Bộ chọn id viết bằng dấu thăng, ví dụ #canh, chỉ áp dụng cho phần tử có id đúng tên đó. Vì vậy một đoạn <p class='canh'> chịu tác động của quy tắc .canh, còn quy tắc #canh không tác động đến nó.

Thẻ <img> dùng để chèn hình ảnh vào trang. Đây là thẻ không có thẻ đóng, địa chỉ tệp ảnh được ghi trong thuộc tính src. Thẻ <p> tạo đoạn văn bản, còn thẻ <i> chỉ định dạng chữ nghiêng, không chèn ảnh.

Biểu mẫu được tạo bằng <form action='...'>, trong đó action ghi địa chỉ trang nhận dữ liệu khi người dùng nhấn nút gửi. Thẻ <input type='text'> tạo ô nhập chữ, <input type='email'> tạo ô nhập địa chỉ thư điện tử, <input type='submit'> tạo nút gửi. Thuộc tính value có thể để trống; nếu muốn bắt buộc nhập thì dùng thuộc tính required. Các nút radio chỉ cùng một nhóm khi có cùng giá trị name; nếu name khác nhau thì người dùng có thể chọn đồng thời cả hai.

Danh sách và bảng HTML

Bảng được tạo bằng thẻ <table>. Mỗi dòng của bảng là một cặp <tr>, trong dòng ô tiêu đề dùng <th> và ô dữ liệu dùng <td>. Số hàng bằng số thẻ <tr>, còn số cột bằng số ô trong một hàng (khi các hàng có cùng số ô). Thuộc tính border quy định độ dày đường viền, còn width và height quy định kích thước bảng theo pixel hoặc theo phần trăm.

Danh sách có thứ tự dùng thẻ <ol>, danh sách không có thứ tự dùng thẻ <ul>. Thuộc tính type của <ol> quyết định kiểu đánh số: '1' là số thường, 'A' là chữ cái in hoa, 'a' là chữ cái thường, 'I' là số La Mã in hoa, 'i' là số La Mã thường. Thuộc tính start quy định số bắt đầu và phải là số nguyên, ví dụ start='5'; không viết chữ số La Mã vào start. Thuộc tính style không dùng để đổi kiểu đánh số của danh sách.

Mỗi mục của danh sách được đặt trong thẻ <li> và thẻ này phải nằm bên trong <ol> hoặc <ul>. Thẻ <td> chỉ tạo ô dữ liệu trong bảng, không dùng để tạo mục của danh sách.

Thuộc tính và bộ chọn CSS

Thuộc tính HTML cung cấp thông tin bổ sung cho phần tử. Thuộc tính id đặt tên duy nhất cho một phần tử trong trang, và có thể dùng làm đích của liên kết nội bộ: liên kết <a href='#ten'> sẽ nhảy đến phần tử có id='ten' trên cùng trang. Thuộc tính name không tạo được đích neo như vậy. Với thẻ <textarea>, rows quy định số dòng và cols quy định số cột; rows=10 nghĩa là 10 dòng, cols=8 nghĩa là 8 cột.

Trong CSS, các thuộc tính về chữ được phân biệt rõ: font-family khai báo họ phông chữ (tên phông của văn bản), font-size quy định cỡ chữ, font-style quy định chữ nghiêng hay thường, còn font-weight quy định độ đậm nhạt của nét chữ. Ví dụ p { font-family: Arial; } đặt phông chữ Arial cho mọi thẻ p.

Danh sách và bảng HTML

Bảng trong HTML được tạo bằng thẻ <table>. Mỗi hàng là một cặp <tr>...</tr>, mỗi ô dữ liệu là <td>...</td>, còn ô tiêu đề là <th>...</th>. Số hàng của bảng bằng số thẻ <tr>, và số ô dữ liệu bằng tổng số thẻ <td> trong các hàng. Ví dụ, bảng có 5 hàng và mỗi hàng có 3 thẻ <td> thì có 5 \times 3 = 15 ô dữ liệu.