I. Mục tiêu:
- Nắm được khái niệm HTML.
- Biết sử dụng các thẻ HTML và các thuộc tính HTML cơ bản.
- Xây dựng được một trang web đơn giản.
II. Nội dung:
1. Giới thiệu:
- HTML (HyperText Markup Language) là một ngôn ngữ đánh dấu siêu văn bản dùng để mô tả các tài liệu web (trang web).
- Các tài liệu HTML được mô tả bởi các thẻ HTML.
- Mỗi thẻ HTML mô tả nội dung văn bản khác nhau.
- HTML có thể được viết bằng các công cụ chỉnh sửa HTML chuyên nghiệp như Microsoft WebMatrix, Sublime Text,… hoặc ta có thể sử dụng các công cụ chỉnh sửa văn bản đơn giản như Notepad (trong Windows) hay TextEdit (trong MacOS).
- Mã nguồn HTML được lưu trữ thành tệp với định dạng “.html”
- Để hiển thị một tập tin HTML ta cần sử dụng một trình duyệt web.
Ví dụ:
Ví dụ mã nguồn HTML đơn giản:
Kết quả hiển thị trên trình duyệt:
2. Các thẻ HTML:
Trong phần giới thiệu về HTML ta đã nói đến việc tài liệu HTML được mô tả bằng các thẻ HTML. Vậy cụ thể các thẻ HTML là gì? Và chúng được sử dụng như thế nào?
Để có thể trả lời các câu hỏi trên, ta sẽ tiếp tục tìm hiểu phần tiếp theo.
2.1. Khái niệm thẻ HTML:
Thẻ HTML là những từ khóa (tên thẻ) được bọc bởi cặp dấu ngoặc nhọn “< >”:
<tên_thẻ>nội_dung</tên_thẻ>
- Các thẻ HTML thường đi thành cặp, ví dụ: <p> và </p>.
- Thẻ đầu tiên trong cặp thẻ gọi là thẻ mở (opening tag) và thẻ thứ hai gọi là thẻ đóng (closing tag) (Một số thẻ không có thẻ đóng).
- Thẻ đóng được viết giống thẻ mở tuy nhiên có dấu “/” trước tên thẻ.
- Một thẻ HTML có thể chứa các thẻ khác.
- HTML không phân biệt hoa thường trong tên thẻ nhưng để tiện viết bài và để thống nhất, toàn bộ thẻ HTML sẽ được viết thường trong bài hướng dẫn này.
2.2. Các thẻ HTML cơ bản:
2.2.1. Khai báo <!doctype>:
Mọi tài liệu HTML được khai báo với thẻ <!doctype html>.
Là thẻ khai báo loại tài liệu (document type) và phiên bản sử dụng để trình duyệt hiển thị đúng trang web.
<!doctype> không có thẻ đóng.
Khai báo loại tài liệu không phân biệt hoa thường nên có thể sử dụng thẻ như bên dưới:
2.2.2. <html></html>:
Tài liệu HTML bắt đầu bằng thẻ <html> và kết thúc với thẻ </html>. Dữ liệu và nội dung của tài liệu HTML phải được định nghĩa trong cặp thẻ này.
2.2.3. <head></head>:
Cặp thẻ này là một container chứa metadata. HTML metadata là dữ liệu về tài liệu HTML. Metadata không được hiển thị trên trình duyệt. Metadata thường định nghĩa title, link, script, và các siêu thông tin khác của tài liệu.
Các thẻ mô tả metadata cơ bản:
2.2.3.1. <title></title>:
Cặp thẻ này định nghĩa tiêu đề của tài liệu. Tiêu đề trang xuất hiện ở:
- Trên tab của trình duyệt.
- Cung cấp tiêu đề của trang khi nó được thêm vào danh sách yêu thích.
- Trong kết quả tìm kiếm của các công cụ tìm kiếm.
2.2.3.2. <link>:
Liên kết trang đến các tài nguyên bên ngoài được sử dụng, thường là liên kết đến các style sheet (các file CSS quy định cách hiển thị, sẽ được nói rõ hơn trong phần CSS).
<link rel="stylesheet" href="style.css"> //Không có thẻ đóng.
2.2.3.3. <meta>:
Thẻ <meta> được sử dụng để chỉ rõ mô tả, từ khóa, tác giả hoặc các metadata khác của trang. Metadata được sử dụng bởi trình duyệt (quy định cách hiển thị nội dung), bởi công cụ tìm kiếm (từ khóa), và bởi các dịch web khác.
Ví dụ một số thẻ <meta> định nghĩa mô tả, từ khóa, tác giả, làm mới trang mỗi 30s và bộ ký tự được sử dụng:
<meta name="description" content="Some description"> <meta name="keywords" content="HTML, CSS, XML, Javascript"> <meta name="author" content="Author Name"> <meta http-equiv="refresh" content="30"> <meta charset="UTF-8">
Tham khảo thêm một số bộ ký tự khác ngoài “UTF-8” tại đây.
2.2.3.4.
Cặp thẻ <script> được sử dụng để định nghĩa Java Script phía máy khách (client-side). Phần này sẽ được nói chi tiết hơn ở bài hướng dẫn về Java Script.
2.2.3.5. <style></style>:
Thẻ <style> được dùng để quy định thông tin về kiểu hiển thị cho thành phần của HTML. Đây là một cách để thêm CSS cho HTML (sẽ nói rõ hơn ở phần CSS).
2.2.4. <body></body>:
Phần nhìn thấy được của tài liệu HTML được mô tả trong cặp thẻ <body>. Sau đây mình sẽ liệt kê các thẻ HTML thường dùng để hỗ trợ mô tả nội dung tài liệu trong <body>:
2.2.4.1. Headings:
HTML heading được định nghĩa với các thẻ từ <h1> </h1> đến <h6> </h6>. Số heading càng cao thì nội dung của nó càng ít quan trọng hơn.
Thông thường, người ta sử dụng thẻ <h1> để thể hiện tiêu đề trang /tên công ty, <h2> thể hiện chủ đề chính của trang, <h3> đến <h6> dùng để gom nhóm các thành phần khác trong nội dung của trang.
2.2.4.2. Paragraphs:
Để định nghĩa các đoạn văn trong HTML, ta sử dụng thẻ <p> </p>. Trình duyệt thường tự động thêm khoảng trắng trước và sau một đoạn văn. Giữa các ký tự có bao nhiêu khoảng trắng hay ngắt dòng thì trình duyệt chỉ xem như chỉ có một khoảng trắng giữa các ký tự.
Để hiển thị một đoạn văn bản được định dạng trước (preformatted text) thì ta sử dụng thẻ <pre> </pre>.
Văn bản trong thẻ <pre> được hiển thị dưới một font có độ rộng cố định (thường là font Courier), và nó bảo toàn được cả số khoảng trắng và ngắt dòng.
2.2.4.3. Formating Tags:
Các thẻ định dạng được sử dụng để hiển thị các loại chữ đặc biệt:
- <b></b>: Bold text
- <strong></strong>: Important text
- <i></i>: Italic text
- <em></em>: Emphasized text
- <small></small>: Small text
- <mark></mark>: Marked text
- <del></del>: Deleted text
- <ins></ins>: Inserted text
- <sub></sub>: Subscripts
- <sup></sup>: Superscripts
2.2.4.4. Lists:
- Unordered List:
Danh sách không thứ tự bắt đầu với thẻ <ul>. Mỗi thành phần (list item) bắt đầu bằng thẻ <li>. Danh sách các thành phần sẽ được đánh dấu với các bullet (vòng tròn nhỏ màu đen).
- Ordered List:
Danh sách có thứ tự bắt đầu với thẻ <ol>. Mỗi thành phần bắt đầu bằng thẻ <li>. Danh sách các thành phần sẽ được đánh dấu bằng số.
Lưu ý:
Thẻ HTML chứa thẻ khác được gọi là thẻ cha, ngược lại, thẻ được chứa được gọi là thẻ con.
Các thẻ con khi viết nên được thụt vào trong một chút và xuống dòng ở từng thẻ con (như 2 ví dụ trên) để dễ đọc và chỉnh sửa sau này.
2.2.4.5. Anchor:
HTML sử dụng thẻ <a> </a> để mô tả một siêu liên kết (hình ảnh hoặc đoạn văn), khi bạn nhấn vào đó thì trình duyệt sẽ nhảy đến một trang khác, hoặc trong chính trang đó.
Đích đến của liên kết được chỉ định bằng thuộc tính href (Hypertext Reference).
<a href=””>link text</a>
Liên kết được sử dụng trong trình duyệt được chia làm 3 phần: Giao thức (protocol), máy chủ (server) và đường dẫn đến tập tin (path to file).
Liên kết được mô tả trong href chia làm hai loại:
- Liên kết ngoài: sử dụng URL tuyệt đối (luôn bao gồm giao thức và địa chỉ máy chủ), thường được dùng để liên kết đến một máy chủ cụ thể khác với máy chủ hiện tại.
- Liên kết cục bộ: sử dụng URL tương đối (không bao gồm giao thức và địa chỉ máy chủ), liên kết đến trang ở máy chủ hiện tại.
2.2.4.6. Images:
HTML định nghĩa hình ảnh bằng thẻ <img>.
Thẻ <img> có các thuộc tính cơ bản để mô tả hình ảnh như sau:
Thuộc tính xác định file nguồn (source) “src”, thuộc tính quy định kích thước chiều rộng “width” và chiều cao “height”.
Trong ảnh ví dụ trên ta có thể thấy liên kết đến tập tin ảnh sử dụng đường dẫn tuyệt đối, vì ảnh này được lấy từ máy chủ khác với máy chủ hiện tại.
Nếu ta để tập tin ảnh tại thư mục chính của máy chủ thì ta có thể sử dụng đường dẫn tương đối (đã nói trong phần anchor) để liên kết đến nó.
Nếu ta có nhiều tập tin ảnh và muốn gom chúng lại cùng một chỗ để dễ quản lý thì ta có thể tạo một thư mục chứa các tập tin ảnh này và liên kết đến chúng như hình sau:
2.2.4.7. Table:
HTML còn hỗ trợ định dạng tài liệu dạng bảng bằng thẻ <table> </table>.
Ta khai báo dòng trong bảng bằng thẻ <tr> </tr> (table row), trong mỗi dòng lại chứa nhiều ô, khai báo bằng các thẻ <th> </th> (table heading) nếu ô đó chứa nội dung dạng tiêu đề và thẻ <td> </td> (table data) cho dữ liệu thường.
Ta sử dụng thuộc tính border để quy định hiển thị viền của bảng bằng hai giá trị sau:
- 0: Không hiển thị viền.
- 1: Hiển thị viền.
Để thêm phụ đề cho bảng bằng thẻ <caption> </caption>.
Ta còn có thể cho một ô trong bảng giãn ra nhiều dòng bằng thuộc tính rowspan hay chiếm nhiều cột bằng thuộc tính colspan (column span) với giá trị là số dòng/cột nó sẽ chiếm.
Để tìm hiểu thêm về việc quy định cách hiển thị của bảng ngoài thuộc tính attribute, bạn có thể tham khảo thêm ở bài CSS sau hoặc tìm hiểu tại đây.
2.2.4.8. Form:
Thẻ <form> </form> được sử dụng để thu thập dữ liệu mà người dùng nhập vào.
Bản thân form không hiển thị mà chỉ có các thành phần bên trong form hiển thị.
Các thẻ thường dùng để hỗ trợ người dùng nhập biểu mẫu gồm có:
Thẻ <label> </label> để hiển thị tên trường cần nhập giúp người dùng biết nội dung mình cần nhập.
Thẻ <input> định nghĩa nơi người dùng sẽ nhập. Thẻ <input> không có thẻ đóng.
Thẻ <input> có nhiều loại, được định nghĩa bằng thuộc tính type.
Có 2 loại thẻ nhập thường dùng là:
- “text”: Trường nhập kiểu văn bản. (Độ dài trường văn bản hiển thị trên trình duyệt mặc định là 20 ký tự)
- Thuộc tính name chứa giá trị là tên của trường nhập đó. Những trường nhập không có tên sẽ không được gửi đi khi ta gửi biểu mẫu.
- “submit”: Trường nhập hiển thị dạng nút nhấn. Xác nhận việc gửi biểu mẫu.
Thuộc tính value xác định giá trị của trường nhập và sẽ hiển thị trên màn hình.
Một số thuộc tính khác của thẻ input có thể tham khảo tại đây.
Trong phần này có sử dụng một thẻ đặc biệt là thẻ <br/> để định nghĩa việc xuống một dòng mới khi tài liệu HTML được hiển thị trên màn hình.
Thẻ <br/> là thẻ tự đóng (thêm dấu “/” cuối tên thẻ ngay tại thẻ mở).
Thẻ <form> sử dụng hai thuộc tính sau để định nghĩa thêm thông tin của biểu mẫu:
- Thuộc tính action để xác nhận đích đến của biểu mẫu khi người dùng gửi biểu mẫu. Thường thì biểu mẫu sẽ được gửi đến một trang web trên máy chủ. Nếu lược bỏ thuộc tính này thì action sẽ được hiểu mặc định là trang hiện tại.
- Thuộc tính method để xác định phương thức HTTP (GET hoặc POST) được sử dụng để gửi biểu mẫu.
“get”: khi sử dụng phương thức GET, dữ liệu của biểu mẫu sẽ hiển thị trên thanh địa chỉ trong trình duyệt. Vì dữ liệu sẽ hiển thị trên thanh địa chỉ nên kích thước của nó cũng bị giới hạn (quy định bởi trình duyệt). Phương thức GET thích hợp để gửi những dữ liệu ít nhạy cảm và bị động (như truy vấn bởi công cụ tìm kiếm).
“post”: Phương thức POST có độ bảo mật cao hơn vì không hiển thị dữ liệu của biểu mẫu trên thanh địa chỉ. Thích hợp để gửi các dữ liệu cập nhật, hay chứa các dữ liệu nhạy cảm (như mật khẩu, thông tin cá nhân, …).
Để tìm hiểu thêm về form cùng với các loại thẻ <input> khác của nó thì bạn có thể tham khảo tại đây.
2.2.4.9. Division:
Thẻ <div> (division) là một thẻ đặc biệt, không dùng để định nghĩa nội dung bên trong mà được sử dụng để gom nhóm, phân đoạn các phần, các đoạn trong một tài liệu HTML.
Thẻ <div> thường được sử dụng để gom nhóm các khối thẻ lại và định dạng hiển thị cho chúng bằng CSS.
3. Các thuộc tính HTML:
3.1. Khái niệm thuộc tính HTML:
- Các thẻ HTML có thể có thuộc tính.
- Thuộc tính cung cấp thêm thông tin cho một thẻ HTML.
- Thuộc tính luôn được xác định trong thẻ mở.
- Thuộc tính có dạng một cặp tên/giá trị như sau: tên=”giá_trị”.
3.2. Một số thuộc tính HTML cơ bản:
3.2.1. Thuộc tính ngôn ngữ:
Ngôn ngữ của tài liệu (language) được khai báo trong thẻ <html> bằng thuộc tính lang.
Khai báo ngôn ngữ giúp cho các công cụ tìm kiếm và trình duyệt biết được ngôn ngữ được sử dụng trong tài liệu HTML.
Từ viết tắt cho ngôn ngữ sử dụng được viết theo chuẩn ISO 639-1.
Tham khảo danh sách ngôn ngữ và từ viết tắt tại đây.
Hai ký tự đầu tiên (ví dụ: “en”) để xác định ngôn ngữ. Nếu có phương ngữ thì sử dụng thêm hai ký tự sau để xác định (ví dụ: “US”).
3.2.2. Thuộc tính tiêu đề:
Thẻ HTML có thuộc tính title thì trong trình duyệt, khi ta di chuyển chuột lên đối tượng được định nghĩa bởi thẻ trên, tiêu đề sẽ hiển thị dưới dạng chú thích.
3.2.3. Thuộc tính href:
Thuộc tính href đã mô tả trong phần thẻ liên kết <a>.
3.2.4. Thuộc tính kích thước:
Thuộc tính kích thước gồm hai thuộc tính quy định chiều rộng width và chiều cao height như đã nói trong phần thẻ hình ảnh <img>.
3.2.5. Thuộc tính alt:
Thuộc tính alt (alternative text) xác định một đoạn văn thay thế để sử dụng khi mà nội dung được định nghĩa bởi thẻ HTML không thể hiển thị.
3.2.6. Thuộc tính id và class:
Thuộc tính id (identity) để xác định một id duy nhất cho một thành phần HTML
Thuộc tính class dùng để gom lớp các thành phần HTML có liên quan hoặc tương đồng với nhau.
<h1 id="uniqueHeader">This is a heading</h1> <p class="paragrap-1">This is a paragraph</p>
3.2.7. Thuộc tính style:
Thẻ HTML có thể quy định cách nội dung mà nó định nghĩa được hiển thị trên trình duyệt như thế nào bằng cách sử dụng thuộc tính style.
Đây là một cách để thêm CSS cho HTML (sẽ nói rõ hơn ở phần CSS).
