Nội dung chính Khoa học máy tính 12 Chân trời bài F2: Tạo và định dạng trang web với các thẻ HTML

CHỦ ĐỀ F: GIẢI QUYẾT VẤN ĐỀ VỚI SỰ TRỢ GIÚP CỦA MÁY TÍNH 

BÀI F2: TẠO VÀ ĐỊNH DẠNG TRANG WEB VỚI CÁC THỂ HTML

1. Các thẻ định dạng cơ bản

a) Định dạng đề mục

- HTML sử dụng các thẻ <h1>, <h2>, <h3>, <h4>, <h5> và <h6> để định nghĩa các đề mục của trang web theo từng cấp độ, trong đó:

+ <h1> là đề mục cấp cao nhất.

+ <h6> là đề mục cấp thấp nhất. 

+ Đề mục cấp cao hơn sẽ có kích thước chữ lớn hơn.

Ví dụ 1: Đoạn mã HTML sau minh hoạ các thẻ từ <h1> đến <h6>. Kết quả hiển thị như Hình 2.

Hình 2. Trình bày các cấp đề mục 
trong HTML

b) Định dạng phông chữ

- HTML sử dụng thẻ <font> để định dạng kích thước, màu sắc và kiểu chữ. 

Ví dụ 2: Mã lệnh HTML sau định dạng nội dung “Đây là văn bản” với phông chữ Arial, cỡ chữ 3 và màu đỏ. Kết quả hiển thị như Hình 3.

Hình 3. Nội dung sau khi định dạng phông chữ

Lưu ý: Từ phiên bản HTML5, thẻ <font> không còn được hỗ trợ. Vì vậy, để định dạng phông chữ em sẽ sử dụng CSS (Cascading Style Sheets). Nội dung về CSS sẽ được đề cập trong Bài F7

c) Định dạng văn bản

- HTML có nhiều thẻ định dạng văn bản.

Bảng 1. Một số thẻ HTML dùng để định dạng văn bản thông dụng

Ví dụ 3: Đoạn mã HTML dưới đây có kết quả như Hình 4.

Hình 4. Văn bản được định dạng

Lưu ý: Để thêm các kí tự đặc biệt như <, >, khoảng trắng,… em dùng các mã HTML tương ứng như: 

• &lt; thay cho kí tự <.

• &gt; thay cho kí tự >.

• &nbsp; thay cho khoảng trắng.

…

2. Thẻ tạo siêu liên kết

- Siêu liên kết giúp truy cập nhanh đến nguồn tài nguyên bên ngoài như trang web,

email, tệp đa phương tiện hoặc truy cập nhanh đến một vị trí khác trong cùng trang web hiện tại.

- HTML sử dụng thẻ <a> và những thuộc tính liên quan như href và target để tạo siêu liên kết.

- Khi người dùng nháy chuột vào siêu liên kết, trình duyệt sẽ chuyển hướng đến địa chỉ được chỉ định trong thuộc tính href của thẻ <a>.

- Cú pháp thẻ <a>:

Trong đó:

+ Thuộc tính href chỉ định địa chỉ sẽ liên kết đến.

+ Thuộc tính target chỉ định nơi sẽ mở tài liệu đó, cụ thể:

• _self: Tài liệu được mở ngay trên cửa sổ hiện tại.

• _blank: Tài liệu được mở trên cửa sổ mới.

Ví dụ 4: Đoạn mã HTML sau minh hoạ cách tạo siêu liên kết. Kết quả tạo các liên kết trong trang web như Hình 5.

Hình 5. Các liên kết trong trang web

+ Thẻ <a> tại dòng (1) không có thuộc tính href nên không tạo liên kết.

+ Tại dòng (2), thẻ <a> không có thuộc tính target nên giá trị mặc định cho thuộc tính này sẽ là _self. 

 Khi người dùng nháy chuột vào liên kết, trình duyệt sẽ chuyển đến trang web https://abc.xyz ngay trong cửa sổ trình duyệt hiện tại.

+ Tại dòng (3), thuộc tính target có giá trị là _blank. 

 Khi người dùng nháy chuột vào liên kết, trình duyệt sẽ chuyển đến trang web https://internet.com trong cửa sổ mới.

+ Liên kết tại dòng (4) dẫn đến tệp baihoc.pdf trong thư mục tailieu được lưu cùng vị trí với tệp HTML của trang web này. 

 Để liên kết đến tệp dữ liệu tại trang web khác, em có thể nhập đầy đủ đường dẫn đến tệp dữ liệu đó.

+ Dòng (5) tạo liên kết đến địa chỉ email abc@gmail.com. Khi người dùng nháy chuột vào liên kết, trình duyệt sẽ mở ứng dụng gửi nhận email của máy tính để người dùng soạn nội dung cần gửi đến địa chỉ email trên.

+ Với liên kết có giá trị của thuộc tính href là # như dòng (6), khi người dùng nháy chuột vào liên kết, trình duyệt sẽ không chuyển hướng đến một liên kết nào.

+ Tại dòng (7), khi người dùng nháy chuột vào liên kết, trình duyệt sẽ chuyển đến vị trí có thuộc tính id là dautrang như ở dòng (1) trong trang web. 

Các thành phần trong trang web đều có thể gán thêm thuộc tính id. Thuộc tính id dùng để định danh một phần tử HTML duy nhất trong trang web.

3. Thẻ tạo danh sách

Trong HTML, có hai loại danh sách: 

- Không có thứ tự.

- Có thứ tự.

a) Danh sách không có thứ tự

- Danh sách không có thứ tự:

+ Dùng để đánh dấu đầu dòng cho nội dung bằng kí hiệu.

+ Áp dụng cho những nội dung không theo trình tự cụ thể. 

- HTML sử dụng các thẻ <ul> và <li>: 

+ Thẻ <ul> dùng để tạo danh sách.

+ Thẻ <li> dùng để đánh dấu từng mục trong danh sách. 

Ví dụ 5: Đoạn mã HTML sau minh hoạ danh sách các siêu liên kết không có thứ tự trong trang web. Kết quả hiển thị như Hình 6.

Hình 6. Danh sách các siêu liên kết không có thứ tự trong trang web

b) Danh sách có thứ tự

- Danh sách có thứ tự:

+ Dùng để đánh dấu đầu dòng cho nội dung bằng số hoặc chữ cái.

+ Áp dụng cho những nội dung có trình tự cụ thể.

- HTML sử dụng các thẻ <ol> và <li> để tạo danh sách có thứ tự:

+ Thẻ <ol> dùng để tạo danh sách.

+ Thẻ <li> dùng để đánh dấu từng mục trong danh sách.

Ví dụ 6: Đoạn mã HTML sau minh hoạ danh sách các siêu liên kết có thứ tự trong trang web. Kết quả hiển thị như Hình 7.

Hình 7. Danh sách các siêu liên kết có thứ tự trong trang web

+ Thuộc tính type của thẻ <ol> tại dòng (1): 

• Dùng để khai báo dấu đầu dòng là số thứ tự. 

• Thuộc tính này có thể nhận các giá trị như: 1, A, a, I, i để hiển thị dấu đầu dòng theo dạng số, dạng chữ cái hoặc số La Mã.

+ Thuộc tính start dùng để khai báo thứ tự bắt đầu. 

+ Nếu không có thuộc tính type và start, dấu đầu dòng sẽ hiển thị theo dạng số và bắt đầu bằng 1.

- Có thể tạo danh sách lồng nhau bằng cách đặt một danh sách trong một mục của danh

sách khác.