Bài 1: Tạo các trang HTML tĩnh

Bài trước Bài tiếp theo

Nội dung bài học

Tạo và thực thi trang web HTML tĩnh
Địa chỉ tương đối và tuyệt đối
Thẻ HTML
Cấu trúc trang web HTML tĩnh
Định dạng văn bản
Các thẻ định dạng tiêu đề (heading)
Liên kết
Thành phần đa phương tiện
Danh sách
Bảng biểu
Biểu mẫu

Tham khảo: Bài giảng Một nhập môn về ngôn ngữ HTML.

1. Tạo và thực thi trang web HTML tĩnh

1.1. Một số quy ước đặt tên cho tập tin HTML

Các trang web được tạo từ ngôn ngữ HTML (viết tắt của Hyper Text Markup Language – Ngôn ngữ đánh dấu siêu văn bản);
Nội dung HTML được soạn thảo và lưu lại thành một tập tin;
Đặt tên cho tập tin HTML tuân theo quy ước đặt tên cho tập tin nói chung;
Phần mở rộng cho một tập tin HTML là htm hay html.

1.2. Tạo và mở trang HTML

Tạo trang HTML

Chúng ta có thể soạn thảo tài liệu HTML bằng các trình soạn thảo chuyên nghiệp như Visual Studio Code, Microsoft WebMatrix hay Sublime Text; tuy nhiên, trong quá trình học thiết kế trang web bằng ngôn ngữ HTML, chúng ta nên dùng những trình soạn thảo văn bản đơn giản như Notepad hay Notepad++ (trong hệ điều hành Windows) hay TextEdit (trong hệ điều hành Mac) vì tính đơn giản và đồng thời rèn luyện cho chúng ta tính cẩn thận, tỉ mỉ, kiên nhẫn – là những thái độ quan trọng trong quá trình học thiết kế web. Các đoạn mã minh hoạ trong giáo trình này sẽ được soạn thảo bằng Notepad++.

Để tạo một trang HTML, chúng ta tuân theo 3 bước sau:

Bước 1: Mở Notepad++ (nếu chưa có phần mềm này trên máy tính, có thể download miễn phí tại https://notepad-plus-plus.org/).
Bước 2: Viết mã HTML.
Bước 3: Lưu đoạn mã HTML vừa soạn thảo thành tập tin HTML (chú ý phần tên tập tin và phần mở rộng) bằng cách vào mục File > Save As (hay chọn Save nếu chưa lưu trước đó). Trong hộp thoại Save As, gõ tên tập tin (ví dụ như myfirstpage) với phần mở rộng là html hay htm trong mục File name; chọn All types (*.*) trong mục Save as type; chọn vị trí lưu tập tin trong mục Save in và cuối cùng là nhấn nút Save.

Mở trang HTML

Mở trang HTML đầu tiên bằng trình duyệt web (web browser) như Firefox, Chrome hay Edge như sau:

Nhấp chuột phải vào tập tin HTML vừa tạo.
Chọn mục Open with và chọn trình duyệt web dùng để hiển thị trang HTML.

☛ Có thể xem kết quả khi mở trang web bằng cách nhấn nút Chạy thử

☛ Bài tập:

Thử thay đổi nội dung của các thẻ h1 và p từ khung chứa mã HTML ở trên. Nhấn nút Chạy thử để xem kết quả.

2. Địa chỉ tương đối và tuyệt đối

2.1. Địa chỉ tuyệt đối

Là địa chỉ được tạo ra với đầy đủ các yếu tố sau:

Giao thức. Ví dụ: http://
Tên miền. Ví dụ: www.thuvien-it.org
Tên tập tin. Ví dụ: index.html

Ví dụ địa chỉ tuyệt đối: http://thuvien-it.org/index.html

2.2. Địa chỉ tương đối

Là những địa chỉ có điểm xuất phát là thư mục hiện tại (current dircetory), là thư mục chứa tập tin html đang thực thi (ví dụ tập tin myfirstpage.html ở trên chứa trong thư mục My website).

Một số kí hiệu dùng trong địa chỉ tương đối:

../ sẽ di chuyển đến thư mục chứa thư mục hiện tại (thư mục cha).
./ là thư mục hiện tại (thư mục hiện tại).

Ví dụ địa chỉ tương đối có thể như sau: ../index.html

3. Thẻ HTML

3.1. Khái niệm và cú pháp trình bày về thẻ HTML

Thẻ HTML

Các thẻ (tags) dùng để báo cho trình duyệt cách thức trình bày văn bản trên màn hình hoặc dùng để chỉ một mối liên kết đến các trang khác, một đoạn chương trình khác...

Mỗi thẻ gồm một từ khoá hay tên thẻ (tag name) bao bọc bởi hai dấu bé hơn (<) và lớn hơn (>). Hầu hết các lệnh thể hiện bằng một cặp hai thẻ: thẻ mở (<TAGNAME>) và thẻ đóng (</TAGNAME>). Dấu gạch chéo ("/") kí hiệu thẻ đóng. Lệnh sẽ tác động vào nội dung (văn bản, hình ảnh, v.v.) nằm giữa hai thẻ. Cấu trúc đầy đủ gồm thẻ mở, nội dung và thẻ đóng còn được gọi là phần tử HTML (element). Cú pháp phần tử HTML:

Một số thẻ không có cặp (thẻ mở và đóng), chỉ có thẻ mở. Chúng được gọi là các thẻ rỗng hay thẻ đơn. Ví dụ: <meta> hay <img> không có </meta> hay </img>.

Chú ý

Cần phân biệt khai niệm thẻ (tag) và phần tử (element):

Khi chỉ viết <tagname> ví dụ <p>, <a>,...thì ta gọi là thẻ.
Gọi là phần tử khi chỉ cấu trúc <tagname> Nội dung </tagname>.
Để đơn giản người ta hay gọi là thẻ, ví dụ thẻ <p>, thẻ <a>,...

3.2. Thuộc tính của thẻ HTML

Nhiều thẻ có kèm các thuộc tính (attributes), cung cấp thêm các tham số chi tiết hơn cho việc thực hiện lệnh. Các thuộc tính được chia làm hai loại: thuộc tính bắt buộc và thuộc tính không bắt buộc hay tuỳ chọn. Một thuộc tính là bắt buộc nếu như phải có nó thì thẻ lệnh mới thực hiện được. Ví dụ, để chèn một hình ảnh vào trang tài liệu ta dùng thẻ <img> (Image). Tuy nhiên, cần chỉ rõ ảnh nào sẽ được hiển thị. Điều này được thiết lập bằng thuộc tính SRC = "địa chỉ của tệp ảnh". Thuộc tính SRC là bắt buộc phải có đối với thẻ <img>.

4. Cấu trúc trang web HTML tĩnh

Cấu trúc cơ bản của một tài liệu HTML như sau:

<!DOCTYPE html>
<html>
  <head>
    Chứa các khai báo như tiêu đề, mã kí tự,...
  </head>
  <body>
    Nội dung trang web
  </body>
</html>

4.1. DOCTYPE và HTML

Thẻ DOCTYPE

<!DOCTYPE> phải được đặt đầu tiên trong HTML, nó đứng trước thẻ <html>. Khai báo <!DOCTYPE> không phải là 1 thẻ HTML, nó là chỉ dẫn cho trình duyệt biết phiên bản HTML được sử dụng. Trong HTML4.01, <!DOCTYPE> đề cập đến DTD, bởi vì HTML 4.01 dựa trên SGML. DTD xác định các quy tắc cho các ngôn ngữ đánh dấu để trình duyệt hiển thị một các chính xác. HTML5 không dựa trên SGML, do đó nó không yêu cầu tham chiếu tới DTD.

Thẻ html

Xác định một văn bản dạng HTML. Bắt đầu bằng <html > và kết thúc bằng </html >

4.2. HEAD

Thẻ head

Bên trong phần tử <head> chứa siêu dữ liệu (metadata) - là dữ liệu mô tả dữ liệu.
Các phần tử trong <head> dùng để mô tả siêu dữ liệu gồm : <title>, <style>, <meta>, <link>, <script>, <noscript>, <base>.
<head>là phần đầu trong cấu trúc tài liệu HTML.

Thẻ title

Nằm trong <head>.
Định nghĩa tiêu đề của trang web. Thẻ <title> là cần thiết trong tất cả các trang "HTML/XHTML".

Tác dụng:

Xác định tiêu đề trên thanh công cụ của trình duyệt
Cung cấp tiêu đề cho trang khi nó được bổ sung vào mục yêu thích
Hiển thị tiêu đề cho trang web trong kết quả của công cụ tìm kiếm

Ví dụ:

<!DOCTYPE html>
<html>
  <head>
    <title>Tiêu đề...</title>
  </head>
  <body>
    Nội dung trang web
  </body>
</html>

Thẻ meta

Thường được sử dụng để mô tả trang, từ khóa, tác giả của tài liệu, sửa đổi lần cuối...
Có thể được sử dụng bởi các trình duyệt (cách để hiển thị nội dung hoặc tải lại trang), các công cụ tìm kiếm (từ khóa), hoặc những dịch vụ web khác.
Luôn nằm trong <head>
Nội dung thẻ này không được hiển thị trên trang.

Ví dụ:

Định nghĩa từ khoá cho các công cụ tìm kiếm

Định nghĩa một mô tả cho trang web

Định nghĩa tập kí tự được dùng

Định nghĩa tác giả của trang web

Thẻ link

Xác định mối quan hệ giữa trang web với các tệp tin bên ngoài.
Thường được sử dụng để liên kết đến tập tin CSS.
Luôn nằm trong <head>

Ví dụ: liên kết trang web hiện tại với tập tin CSS tên mystyle.css

<!DOCTYPE html>
<html>
  <head>
    <title>Tiêu đề...</title>
    <link rel="stylesheet" href="mystyle.css">
  </head>
  <body>
    Nội dung trang web
  </body>
</html>

Thẻ style

Được sử dụng để định nghĩa CSS kiểu inline (sẽ tìm hiểu kĩ hơn trong bài 3) cho trang web.
Luôn nằm trong <head>

Ví dụ:

<!DOCTYPE html>
<html>
  <head>
    <title>Tiêu đề...</title>
    <link rel="stylesheet" href="mystyle.css">
    <style>
        body {background-color:yellow;}
        p {color:blue;}
    </style>
  </head>
  <body>
    Nội dung trang web
  </body>
</html>

☛ Có thể xem kết quả khi mở trang web bằng cách nhấn nút Chạy thử

☛ Bài tập:

Thử thay đổi các giá trị màu của các thuộc tính background-color và color từ khung chứa mã HTML ở trên. Nhấn nút Chạy thử để xem kết quả.

Thẻ script

Dùng để định nghĩa ngôn ngữ hướng client Javascript (chi tiết về javascript sẽ học ở bài 4).

Ví dụ:

<head>
  <script>
      function myFunction() {
        document.getElementById("demo").innerHTML = "Hello JavaScript!";
      }
  </script>
</head>

☛ Có thể xem kết quả khi mở trang web bằng cách nhấn nút Chạy thử

☛ Bài tập:

Thử thay đổi "Hello JavaScript!" thành một dòng chữ bất kỳ từ khung chứa mã HTML ở trên. Nhấn nút Chạy thử để xem kết quả.

4.3. BODY

Định nghĩa nội dung chính của trang web.
Bao gồm tất cả các thành phần của trang HTML, như text, liên kết, hình ảnh, bảng, danh sách,...

5. Định dạng văn bản

5.1. Văn bản

Là văn bản chưa được định dạng (plain text).
Thẻ <p> định nghĩa một đoạn văn bản.
Thẻ <p> tự động tạo một khoảng trắng trước và sau nó, khoảng trắng này tùy trình duyệt sẽ khác nhau.
Bên trong thẻ <p> có thể chứa các thẻ như <a>, <span>, <img>

Cấu trúc phần tử p:

☛ Xem ví dụ về các đoạn văn bản. Có thể xem kết quả khi mở trang web bằng cách nhấn nút Chạy thử

5.2. Các thẻ định dạng văn bản

Thẻ	Mô tả
<b>	Tô đậm văn bản
<i>	In nghiêng văn bản
<em>	Xác định đoạn văn bản được nhấn mạnh
<small>	Tạo chữ nhỏ
<strong>	Tạo chữ đậm
<sub>	Tạo văn bản lệch dưới phải, ví dụ H₂
<sup>	Tạo văn bản lệch trên phải, ví dụ X²
<ins>	Gạch chân văn bản
<del>	Gạch ngang qua văn bản

☛ Xem ví dụ về các đoạn văn bản. Có thể xem kết quả khi mở trang web bằng cách nhấn nút Chạy thử

6. Các thẻ định dạng tiêu đề (heading)

Trong HTML, các thẻ <h1> đến <h6> được sử dụng để làm tiêu đề. <h1> đến <h6> xác định tiêu đề theo mức độ quan trọng giảm dần.

☛ Xem ví dụ về các tiêu đề. Có thể xem kết quả khi mở trang web bằng cách nhấn nút Chạy thử

7. Liên kết

Thẻ <a> định nghĩa một liên kết (link), được sử dụng để liên kết từ trang này đến trang khác.
Một liên kết (link) là 1 từ, 1 câu hoặc 1 hình ảnh mà ta có thể click vào để chuyển đến một trang khác.
Khi di chuyển con trỏ đến liên kết (link), con trỏ chuột sẽ biến thành bàn tay.
Thuộc tính quan trong nhất trong thẻ <a> là thuôc tính "href", nó chỉ ra liên kết tới trang cần chuyển hay một vị trí cùng trang (điểm neo).

☛ Xem ví dụ về liên kết. Có thể xem kết quả khi mở trang web bằng cách nhấn nút Chạy thử

8. Thành phần đa phương tiện

8.1. Hình ảnh

Sử dụng thẻ img
Thẻ img là rỗng, chỉ chứa thuộc tính và không có thẻ đóng.
Các thuộc tính cơ bản đi kèm với img:
- src - Xác định đường dẫn (url) của hình ảnh.
- alt - Cung cấp thông tin về hình ảnh cho người xem nếu vì một lý do nào đó mà hình ảnh không được hiển thị.
- width - Xác định chiều rộng của ảnh.
- height - XXác định chiều cao của ảnh.

☛ Xem ví dụ về đánh dấu hình ảnh. Có thể xem kết quả khi mở trang web bằng cách nhấn nút Chạy thử

8.2. Âm thanh

Sử dụng thẻ audio.
Tập tin âm thanh có một số định dạng phổ biến hiện nay là mp3, ogg và wav.
Các thuộc tính cơ bản đi kèm với audio:
- source gồm hai thuộc tính cơ bản:
  - src - Xác định đường dẫn (url) của tập tin âm thanh.
  - type -Kiểu âm thanh mp3, ogg hay wav.
- controls - Các thành phần điều chỉnh âm thanh play, pause, seeking và volume.

Video

Sử dụng thẻ video với các thuộc tính kèm theo tương tự thẻ audio.

☛ Xem ví dụ về chèn âm thanh và video. Có thể xem kết quả khi mở trang web bằng cách nhấn nút Chạy thử

9. Danh sách

9.1. Danh sách không thứ tự

Danh sách không thứ tự trong HTML được định nghĩa bằng thẻ <ul>; mỗi mục của danh sách bắt đầu bằng thẻ <li>. Măc định, các mục trong danh sách không thứ tự được đánh dấu bởi các dấu chấm tròn đen (bullets).

Chúng ta có thể định nghĩa lại các kí hiệu cho các mục trong danh sách với thuộc tính style, cụ thể như sau:

Style	Mô tả
list-style-type:disc	Các mục trong danh sách được đánh dấu bằng các dấu chấm đen tròn.
list-style-type:circle	Các mục trong danh sách được đánh dấu bằng các dấu tròn.
list-style-type:square	Các mục trong danh sách được đánh dấu bằng các dấu vuông.
list-style-type:none	Các mục trong danh sách không được đánh dấu.

9.2. Danh sách có thứ tự

Danh sách có thứ tự trong HTML được định nghĩa bằng thẻ <ol>; mỗi mục của danh sách bắt đầu bằng thẻ <li>. Măc định, các mục trong danh sách có thứ tự được đánh dấu bởi 1., 2., 3.,...

Chúng ta có thể định nghĩa lại các kí hiệu cho các mục trong danh sách với thuộc tính type, cụ thể như sau:

Type	Mô tả
type="1"	Các mục trong danh sách được đánh dấu bằng số (mặc định).
type="A"	Các mục trong danh sách được đánh dấu bằng chữ cái in hoa.
type="a"	Các mục trong danh sách được đánh dấu bằng chữ cái in thường.
type="I"	Các mục trong danh sách được đánh dấu bằng số La Mã in hoa.
type="i"	Các mục trong danh sách được đánh dấu bằng số La Mã in thường.

9.3. Danh sách định nghĩa

Danh sách định nghĩa bắt đầu bằng các thẻ <dl>, <dt> và <dd>, với:

<dl> viết tắt của chữ "definition list" có nghĩa là sự xác định (hay định nghĩa) danh sách.
<dt> viết tắt của chữ "defines an item" có nghĩa là xác định (hay định nghĩa) một mục.
<dd> viết tắt của chữ "defines describe an item" có nghĩa là xác định (hay định nghĩa) một mô tả của một mục.

☛ Xem ví dụ về danh sách có và không có thứ tự. Có thể xem kết quả khi mở trang web bằng cách nhấn nút Chạy thử

10. Bảng biểu

Thẻ <table> được dùng để tạo một bảng HTML. Các thẻ đi kèm <table> để tạo nên hàng và cột cho một bảng biểu gồm:

Thẻ <tr>: Đánh dấu một hàng cho bảng.
Thẻ <th>: Đánh dấu một ô tiêu đề cho bảng.
Thẻ <td>: Đánh dấu một ô dữ liệu cho bảng.

☛ Xem ví dụ về bảng biểu. Có thể xem kết quả khi mở trang web bằng cách nhấn nút Chạy thử

Dùng thuộc tính border và style để tạo viền và độ rộng cho bảng.

☛ Xem ví dụ về tạo viền và độ rộng cho bảng. Có thể xem kết quả khi mở trang web bằng cách nhấn nút Chạy thử

Chú ý:

Định dạng bảng biểu chuyên nghiệp hơn và sử dụng thuộc tính style như ví dụ trên là một dạng của CSS sẽ được đề cập kĩ hơn trong bài 3.

11. Biểu mẫu

11.1. Tạo biểu mẫu

Thẻ <form> được dùng để tạo một "biểu mẫu" HTML cho người dùng.
Thẻ <form> được dùng để truyền dữ liệu lên máy chủ.
Thẻ<form> không nên dùng để điều khiển layout.

11.2. Các thành phần của biểu mẫu

Nhập dữ liệu qua thẻ <textarea>

Thẻ <textarea> dùng để nhập nhiều dòng văn bản.
Thẻ <textarea> có thể chứa được nhiều ký tự và làm cho văn bản có một chiều rộng cố định (thường là font Courier).
Kích thước của vùng văn bản có thể được xác định bởi các thuộc tính rows và cols, và cũng có thể điều chỉnh thông qua width và height trong CSS sẽ được tìm hiểu qua Bài 2.

Nhập dữ liệu qua thẻ <input>

Phụ thuộc vào giá trị thuộc tính type:

Type	Mô tả
type="text"	Sử dụng để nhập các văn bản ngắn và chỉ một hàng.
type="checkbox"	Sử dụng cho nhiều lựa chọn khác nhau.
type="radio"	Sử dụng cho một chọn lựa duy nhất.
type="password"	Các mục trong danh sách được đánh dấu bằng số La Mã in hoa.

Nhập dữ liệu qua thẻ <select>

Thẻ <select> được dùng để tạo một danh sách chọn lựa (danh sách thả xuống).
Thẻ <option> bên trong thành phần select, định nghĩa giá trị tùy chọn trong danh sách.
Thẻ <select> và <option> được thường được đặt trong <form> cho người dùng lựa chọn danh sách.

Các loại nút nhấn (button)

Phụ thuộc vào giá trị thuộc tính type:

Type	Mô tả
type="submit"	Dùng để gửi dữ liệu lên máy chủ, dữ liệu được gửi thông qua thuộc tính action trong <form>.
type="reset"	Dùng để reset lại giá trị trong <form>.
type="button"	Sử dụng như một nút nhấn thông thường.

☛ Xem ví dụ về tạo biểu mẫu (form) và các thành phần biểu mẫu. Có thể xem kết quả khi mở trang web bằng cách nhấn nút Chạy thử

Tham khảo: Bài giảng Phân vùng trong HTML.

Bài trước Bài tiếp theo