Thầy Cải - Quốc Thái

BÀI 10 - TẠO LIÊN KẾT (KNTT - CS & ICT)

Bài 10 - Tạo liên kết (kntt) Đây là bài soạn lý thuyết tin học 12 - sách Kết nối tri thức. Bài học này là kiến thức cốt lõi chung cho cả hai định hướng: Khoa học máy tính (cs) và Tin học ứng dụng (ict). Quý Thầy Cô và các em học sinh truy cập để làm tài liệu tham khảo nhé. Chúc Thầy Cô dạy tốt, chúc các em học sinh học giỏi.

TÓM TẮT NỘI DUNG:
1. Siêu văn bản và đường dẫn
2. Các cách liên kết tới một trang web
a) Liên kết tới một trang web khác
b) Liên kết đến một vị trí khác trong cùng website
3. Thực hành tạo liên kết

1. SIÊU VĂN BẢN VÀ ĐƯỜNG DẪN

Siêu văn bản (hypertext) là loại văn bản mà nội dung của nó không chỉ chứa văn bản mà còn có thể chứa nhiều dạng dữ liệu khác như âm thanh, hình ảnh,… và đặc biệt là chứa các siêu liên kết (hyperlink) tới siêu văn bản khác. Khi xem siêu văn bản, không cần xem tuần tự từ đầu đến cuối mà có thể nhờ các siêu liên kết để truy cập vị trí tương ứng không theo trình tự nào.
Siêu liên kết (còn gọi tắt là liên kết), là một tham chiếu để liên kết tới siêu văn bản khác. Người dùng có thể dễ dàng truy cập đến văn bản liên kết bằng cách nháy chuột vào vị trí đặt liên kết trong văn bản ban đầu.
Trong HTML, người ta sử dụng thẻ <a> cho các liên kết. Cấu trúc chung của thẻ <a> có dạng:

Trong đó URL là địa chỉ (đường dẫn) tham chiếu tới tài liệu được liên kết. Thuộc tính href dùng để cung cấp địa chỉ của trang web hay tài nguyên được liên kết (URL) tới. Đường dẫn URL phải được nằm trong cặp dấu nháy kép " ". Phần lớn các liên kết trỏ tới một tài liệu HTML khác, nhưng ta cũng có thể trỏ tới một hình ảnh, một tệp âm thanh hoặc video.

Có hai loại URL chính là đường dẫn tuyệt đối và đường dẫn tương đối.
• Đường dẫn tuyệt đối: Cung cấp một địa chỉ đầy đủ bao gồm cả giao thức (http:// hoặc https://), tên miền (doman name) là tên đường dẫn chi tiết nếu cần. Khi sử dụng liên kết trên mạng Internet (mà tài liệu không nằm trên máy chủ của mình), ta cần phải sử dụng đường dẫn tuyệt đối. Ví dụ: href=”https://www.nxbgd.vn/”. Đôi khi đường dẫn tuyệt đối rất dài và khó nhìn, ta vẫn cần để một cách chính xác.
• Đường dẫn tương đối: Mô tả cách truy cập tài liệu được liên kết từ vị trí của tài liệu hiện tại. Đường dẫn tương đối được sử dụng khi liên kết tới một tài liệu khác trên cùng trang web (cùng máy chủ hoặc máy tính cài đặt trang web), nó không yêu cầu giao thức hay tên miền, mà chỉ cần tên đường dẫn. Ví dụ: Với cấu trúc website như Hình 10.1, nếu ta đang ở trang index.html thì liên kết href=”BT/bai_tap_1.html” là đường dẫn tương đối tới tệp tin bai_tap_1.html trong thư mục BT, thư mục BT nằm trong cùng thư mục cha với index.html.

2. CÁC LIÊN KẾT TỚI MỘT TRANG WEB

a) Liên kết tới một trang web khác

Liên kết từ một trang web tới một trang web khác trên Internet được gọi là liên kết ngoài. Để tạo liên kết ngoài, ta sử dụng thẻ <a> và truyền đường dẫn tuyệt đối cho thuộc tính href.
Ví dụ, để đặt liên kết tới mục Sách điện tử của bộ sách Kết nối tri thức với cuộc sống trên website của Nhà xuất bản Giáo dục Việt Nam trên trang web của mình, em sử dụng đoạn mã:

Kết quả có được là đoạn văn bản đã được liên kết đến trang web Sách điện tử của bộ sách Kết nối tri thức với cuộc sống. Khi nháy chuột vào liên kết, trình duyệt sẽ gọi tới trang web Sách điện tử và hiển thị nội dung trang web.

b) Liên kết đến một vị trí khác trong cùng website

Trong lập trình web, phần lớn các liên kết được sử dụng là liên kết trỏ tới các trang trong website của mình. Ví dụ, từ trang chủ đi tới các trang nội dung chi tiết. Trường hợp này gọi là liên kết trong. Ta sử dụng đường dẫn tương đối cho thuộc tính href. Khi đường dẫn không có giao thức ở đầu (http:// hoặc https://), trình duyệt kiểm tra địa chỉ đó trên máy chủ hiện tại để tìm tài liệu và liên kết. Tên đường dẫn được sử dụng để xác định tệp được liên kết.
Để hiểu rõ về cách viết đường dẫn tương đối, xét website có cấu trúc đơn giản như Hình 10.1.

Các trường hợp liên kết trong website có thể là:
• Liên kết tới trang web cùng thư mục
Để liên kết tới một tệp trong cùng thư mục, ta chỉ cần cung cấp tên của tệp liên kết tới. Ví dụ tạo liên kết từ trang index.html tới trang thong_tin.html như sau:

• Liên kết tới trang web thuộc thư mục khác, dưới một cấp.
Đường dẫn đến trang web khác thư mục, dưới một cấp gồm tên thư mục và tên tệp được phân cách bằng dấu “/”. Ví dụ: tạo liên kết từ trang index.html tới trang bai_tap_1.html như sau:

• Liên kết tới trang web thuộc thư mục khác dưới hai (hay nhiều) cấp.
Tương tự, đường dẫn gồm tên các thư mục và tên tệp cần được liên kết theo thứ tự từ trên xuống. Mỗi cấp thư mục hoặc tệp tin được phân cấp bởi dấu “/”. Ví dụ: tạo liên kết từ trang index.html tới trang bai_tap_on_tap.html như sau:

Trong trường hợp trang web liên kết tới nằm ở thư mục cấp trên, ta sử dụng các ký tự “../”. Khi sử dụng “../” trong đường dẫn, tức là chỉ định “trở lại thư mục trên một mức” của thư mục chứa tệp có liên kết. Số cụm “../” trong đường dẫn tương ứng với số mức quay trở lại thư mục ở mức trên.
Ví dụ, đoạn mã html sau chỉ dẫn địa chỉ từ trang bai_tap_1.html trong thư mục bai_tap quay lại trang index.html trong thư mục web, là thư mục mẹ của thư mục bai_tap:

• Liên kết tới vị trí khác trong cùng trang web.
Ngoài việc liên kết tới trang web, hay tài liệu khác, ta có thể tạo liên kết tới một vị trí cụ thể trong cùng trang web. Ví dụ như khi ta đọc tới cuối trang mà muốn chuyển nhanh về đầu trang. Để tạo liên kết trong cùng trang ta thực hiện hai bước:
Bước 1. Tạo phần tử HTML có thuộc tính id nằm tại vị trí được liên kết đến.
Bước 2. Tạo liên kết tới phần tử trên.

Việc thiết lập thuộc tính id cho thẻ HTML tại vị trí cần liên kết giống như việc cắm cờ trong tài liệu để có thể quay lại dễ dàng. Để là vị trí đích, thuộc tính id cần được đặt tên duy nhất (chỉ xuất hiện duy nhất một lần trong toàn bộ trang web) và được gọi là mã định danh đoạn.
Để liên kết tới phần tử vừa tạo, ta thiết lập thuộc tính href="#mã_định_danh_đoạn”.
Ví dụ: Hai câu lệnh dưới đây sẽ tạo một bản với id là Thong_tin và đặt liên kết tới bảng đó:

• Tạo liên kết cho hình ảnh.
Để tạo liên kết tới hình ảnh, ta cần hiển thị ảnh trong trang web với thẻ <img>:

Trong đó đường dẫn tới tệp ảnh cũng sử dụng đường dẫn tuyệt đối hoặc đường dẫn tương đối như trên.
Với website có cấu trúc như Hình 10.1, trong trang index.html ta đặt hình ảnh Mặt Trời được lưu trong tệp có địa chỉ images/sun.png và tạo đường liên kết từ ảnh tới trang thong_tin.html thì đoạn mã có dạng như sau:

3. THỰC HÀNH TẠO LIÊN KẾT

---The End!---

Nếu bạn không muốn học, không ai có thể giúp bạn. Nếu bạn quyết tâm học, không ai có thể ngăn cản bạn dừng lại.

CÙNG CHUYÊN MỤC:

PHẦN I. KIẾN THỨC CỐT LÕI CHUNG CHO CẢ HAI ĐỊNH HƯỚNG (CS) VÀ (ICT) - 21 bài.

CHỦ ĐỀ 1. MÁY TÍNH VÀ XÃ HỘI TRI THỨC

Bài 1. Làm quen với Trí tuệ nhân tạo
Bài 2. Trí tuệ nhân tạo trong khoa học và đời sống

CHỦ ĐỀ 2. MẠNG MÁY TÍNH VÀ INTERNET

Bài 3. Một số thiết bị mạng thông dụng
Bài 4. Giao thức mạng
Bài 5. Thực hành chia sẻ tài nguyên trên mạng

CHỦ ĐỀ 3. ĐẠO ĐỨC, PHÁP LUẬT VÀ VĂN HÓA TRONG MÔI TRƯỜNG SỐ

Bài 6. Giao tiếp và ứng xử trong không gian mạng

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

Bài 7. HTML và cấu trúc trang web
Bài 8. Định dạng văn bản
Bài 9. Tạo danh sách, bảng
Bài 10. Tạo liên kết
Bài 11. Chèn tệp tin đa phương tiện và khung nội tuyến vào trang web
Bài 12. Tạo biểu mẫu
Bài 13. Khái niệm, vai trò của CSS
Bài 14. Định dạng văn bản bằng CSS
Bài 15. Tạo màu cho chữ và nền
Bài 16. Định dạng khung
Bài 17. Các mức ưu tiên của bộ chọn
Bài 18. Thực hành tổng hợp thiết kế trang web

CHỦ ĐỀ 5. HƯỚNG NGHIỆP VỚI TIN HỌC

Bài 19. Dịch vụ sửa chữa và bảo trì máy tính
Bài 20. Nhóm nghề quản trị thuộc ngành Công nghệ thông tin
Bài 21. Hội thảo hướng nghiệp

PHẦN II. ĐỊNH HƯỚNG KHOA HỌC MÁY TÍNH (CS) - 9 bài.

CHỦ ĐỀ 6. MẠNG MÁY TÍNH VÀ INTERNET

Bài 22. Tìm hiểu thiết bị mạng
Bài 23. Đường truyền mạng và ứng dụng
Bài 24. Sơ bộ về thiết kế mạng

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

Bài 25. Làm quen với Học máy
Bài 26. Làm quen với Khoa học dữ liệu
Bài 27. Máy tính và Khoa học dữ liệu
Bài 28. Thực hành trải nghiệm trích rút thông tin và tri thức
Bài 29. Mô phỏng trong giải quyết vấn đề
Bài 30. Ứng dụng mô phỏng trong giáo dục

PHẦN III. ĐỊNH HƯỚNG TIN HỌC ỨNG DỤNG (ICT) - 7 bài.

CHỦ ĐỀ 6. MÁY TÍNH VÀ XÃ HỘI TRI THỨC

Bài 22. Thực hành kết nối các thiết bị số

CHỦ ĐỀ 7. ỨNG DỤNG TIN HỌC

Bài 23. Chuẩn bị xây dựng trang web
Bài 24. Xây dựng phần đầu trang web
Bài 25. Xây dựng phần thân và chân trang web
Bài 26. Liên kết và thanh điều hướng
Bài 27. Biểu mẫu trên trang web
Bài 28. Thực hành tổng hợp

CÁC CHUYÊN MỤC LIÊN QUAN:

☞ Kiểm tra tin học 12 - Kết nối tri thức
☞ Lý thuyết tin học 12 - Kết nối tri thức
☞ Thực hành tin học 12 - Kết nối tri thức
☞ Gợi ý trả lời tin học 12 - Kết nối tri thức
☞ Trắc nghiệm tin học 12 - Kết nối tri thức
☞ Bài giảng điện tử tin học 12 - Kết nối tri thức

BÀI 9 - TẠO DANH SÁCH, BẢNG (KNTT - CS & ICT)

Bài 9 - Tạo danh sách, bảng (kntt) Đây là bài soạn lý thuyết tin học 12 - sách Kết nối tri thức. Bài học này là kiến thức cốt lõi chung cho cả hai định hướng: Khoa học máy tính (cs) và Tin học ứng dụng (ict). Quý Thầy Cô và các em học sinh truy cập để làm tài liệu tham khảo nhé. Chúc Thầy Cô dạy tốt, chúc các em học sinh học giỏi.

TÓM TẮT NỘI DUNG:
1. Tạo danh sách
a) Danh sách có hoặc không có thứ tự
b) Danh sách mô tả
2. Thiết lập bảng
3. Thực hành tạo danh sách và bảng

1. TẠO DANH SÁCH

Danh sách trong html cho phép nhóm và liệt kê tập hợp các mục tương tự nhau thành một danh sách để hiển thị. Các dạng danh sách trong html cơ bản gồm: danh sách không có thứ tự, danh sách có thứ tự và danh sách mô tả. Có thể tạo danh sách lồng nhau.

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

Trong danh sách các mục được hiển thị tuần tự, kí tự đầu dòng có thể là một số, chữ, dấu, ký hiệu hoặc hình ảnh. Cấu trúc của đoạn mã html tạo danh sách như sau:

• Để tạo danh sách có thứ tự, dùng cặp thẻ <ol></ol>. Để chọn kiểu đánh thứ tự và giá trị bắt đầu, dùng thuộc tính type và start (Hình 9.12):
- type: xác định kiểu đánh số. Các kiểu đánh số là: “1”,”A”,”a”,”I” và “i”.
- start: xác định giá trị bắt đầu đánh số, nhận giá trị là các số thực.

• Để tạo danh sách không có thứ tự, dùng cặp thẻ <ul></ul>. Để chọn ký tự đầu dòng, ta thiết lập giá trị của đặc tính list-style-type trong thuộc tính style bằng một trong 4 giá trị disc, circle, square và none. Hình 9.2 mô tả ví dụ một danh sách dùng hình vuông làm ký tự đầu dòng và kết quả.

b) Danh sách mô tả

Danh sách mô tả dùng để liệt kê các mục kèm với mô tả cho từng mục. Cấu trúc của đoạn mã tạo danh sách mô tả khác cấu trúc của đoạn mã tạo danh sách có hoặc không có thứ tự. Để tạo danh sách mô tả em dùng ba thẻ <dl<, <dt> và >dd>:

Lưu ý: Ta có thể tạo ra các danh sách lồng nhau bằng cách để một danh sách là một mục của một danh sách khác (bằng cách đặt danh sách đó bên trong cụm thẻ <li></li> của mục tương ứng).

2. THIẾT LẬP BẢNG

Phần tử bảng được dùng khi ta cần thêm dữ liệu có thể sắp xếp dưới dạng hàng và cột vào trang web. Dữ liệu trong bảng có thể là bất kỳ loại thông tin nào, không nhất thiết là dạng số. Bảng là công cụ để tạo ra các bố cục nhiều cột hoặc phân bố nội dung và các khoảng trắng. Chính vì vậy, độ phức tạp của bảng từng là thước đo giá trị thiết kế trang web. Tuy nhiên, sử dụng bảng tạo bố cục tương đối phức tạp nên người ta thường sử dụng CSS để tạo bố cục, nội dung này được trình bày ở các bài sau.
Bảng được tạo từ các hàng, mỗi hàng gồm các ô dữ liệu. Hàng đầu tiên có thể là hàng tiêu đề. Ngôn ngữ HTML xây dựng bảng từ các thành phần tương ứng như trên. Các thành phần lần lượt được định nghĩa bởi các thẻ <table>- tạo bảng, <tr>- tạo hàng, <td>- tạo các ô dữ liệu và <th>- tạo ô tiêu đề.
Hình 9.4 mô tả đoạn mã html tạo một bảng bằng các thẻ trên (theo thứ tự từ trên xuống dưới, từ trái sang phải) và bảng kết quả thu được.

Bảng trong Hình 9.4 có thể được định dạng thêm để đẹp và dễ đọc hơn bằng cách chỉnh các thuộc tính của bảng. Các định dạng cơ bản bao gồm: thêm tiêu đề cho bảng, tạo khung bảng, điều chỉnh kích thước hàng/ cột/ ô và gộp ô.

• Thêm tiêu đề: sử dụng thẻ <caption>, ngay sau thẻ <table> và trước thẻ <tr> đầu tiên.

• Tạo khung bảng: Trong HTML5, độ dày khung được thiết lập cho viền khung bảng hoặc khung của từng ô bằng thuộc tính con border của thuộc tính style có giá trị là một bộ ba thuộc tính nhỏ hơn sau:

trong đó, ba thuộc tính cách nhau bởi dấu cách, hai thuộc tính đầu là bắt buộc; thuộc tính kiểu_viền có thể nhận một trong bốn giá trị (solid, dotted, double, none), còn thuộc tính màu_viền mặc định là màu đen và có thể bỏ qua.

• Điều chỉnh kích thước: Sử dụng đặc tính con width và height của thuộc tính style. Kích thước được đặt có thể là theo tỷ lệ với khối bao ngoài đối tượng (%) hoặc theo số điểm ảnh (px).

Lưu ý: Không nên sử dụng kích thước theo px do các thiết bị hiển thị có sự khác nhau về kích thước và số điểm ảnh có thể dẫn đến bảng không hiển thị đúng như mong đợi.

• Gộp ô: Sử dụng thuộc tính rowspan (cho hàng) và colspan (cho cột). Bản chất của việc gộp ô là mở rộng một ô bằng cách thêm một số hàng hoặc một số cột lân cận có cùng nội dung. Việc này giúp tạo ra được bảng có cấu trúc phức tạp nhưng cũng làm cho việc đánh dấu, theo dõi và kiểm soát số lượng ô trở nên khó khăn hơn. Việc gộp ô trên hàng được thực hiện như sau (tương tự đối với cột, sử dụng thuộc tính colspan):
- Thêm rowspan= "số_hàng_muốn_ghép" cho phần tử <th> hoặc <td> thuộc hàng đầu tiên cần ghép.
- Đối với các hàng tiếp theo: Bỏ qua cặp thẻ <th> hoặc <td> tại vị trí tương ứng (nếu bước trên đặt rowspan= "3" thì bỏ qua hai hàng tiếp theo).

Ví dụ như Hình 9.6.

3. THỰC HÀNH TẠO DANH SÁCH VÀ BẢNG

---The End!---

Nếu bạn không muốn học, không ai có thể giúp bạn. Nếu bạn quyết tâm học, không ai có thể ngăn cản bạn dừng lại.

CÙNG CHUYÊN MỤC:

PHẦN I. KIẾN THỨC CỐT LÕI CHUNG CHO CẢ HAI ĐỊNH HƯỚNG (CS) VÀ (ICT) - 21 bài.

CHỦ ĐỀ 1. MÁY TÍNH VÀ XÃ HỘI TRI THỨC

Bài 1. Làm quen với Trí tuệ nhân tạo
Bài 2. Trí tuệ nhân tạo trong khoa học và đời sống

CHỦ ĐỀ 2. MẠNG MÁY TÍNH VÀ INTERNET

Bài 3. Một số thiết bị mạng thông dụng
Bài 4. Giao thức mạng
Bài 5. Thực hành chia sẻ tài nguyên trên mạng

CHỦ ĐỀ 3. ĐẠO ĐỨC, PHÁP LUẬT VÀ VĂN HÓA TRONG MÔI TRƯỜNG SỐ

Bài 6. Giao tiếp và ứng xử trong không gian mạng

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

CHỦ ĐỀ 5. HƯỚNG NGHIỆP VỚI TIN HỌC

Bài 19. Dịch vụ sửa chữa và bảo trì máy tính
Bài 20. Nhóm nghề quản trị thuộc ngành Công nghệ thông tin
Bài 21. Hội thảo hướng nghiệp

PHẦN II. ĐỊNH HƯỚNG KHOA HỌC MÁY TÍNH (CS) - 9 bài.

CHỦ ĐỀ 6. MẠNG MÁY TÍNH VÀ INTERNET

Bài 22. Tìm hiểu thiết bị mạng
Bài 23. Đường truyền mạng và ứng dụng
Bài 24. Sơ bộ về thiết kế mạng

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

PHẦN III. ĐỊNH HƯỚNG TIN HỌC ỨNG DỤNG (ICT) - 7 bài.

CHỦ ĐỀ 6. MÁY TÍNH VÀ XÃ HỘI TRI THỨC

Bài 22. Thực hành kết nối các thiết bị số

CHỦ ĐỀ 7. ỨNG DỤNG TIN HỌC

CÁC CHUYÊN MỤC LIÊN QUAN:

BÀI 8 - ĐỊNH DẠNG VĂN BẢN (KNTT - CS & ICT)

Bài 8 - Định dạng văn bản (kntt) Đây là bài soạn lý thuyết tin học 12 - sách Kết nối tri thức. Bài học này là kiến thức cốt lõi chung cho cả hai định hướng: Khoa học máy tính (cs) và Tin học ứng dụng (ict). Quý Thầy Cô và các em học sinh truy cập để làm tài liệu tham khảo nhé. Chúc Thầy Cô dạy tốt, chúc các em học sinh học giỏi.

TÓM TẮT NỘI DUNG:
1. Thuộc tính thẻ
2. Các định dạng trình bày văn bản
a) Định dạng tiêu đề
b) Định dạng đoạn văn bản
3. Các thẻ định dạng phông chữ
a) Định dạng kiểu chữ
b) Định dạng phông chữ
4. Thực hành định dạng văn bản và phông chữ

1. THUỘC TÍNH THẺ

Mọi phần tử HTML đều có thể có thuộc tính. Thuộc tính của thẻ có tác dụng bổ sung thông tin, làm rõ các điều khiển được thẻ chỉ định.
Cú pháp để xác định thuộc tính: tên_thuộc_tính = "giá_trị", trừ các trường hợp đặc biệt chỉ cần tên thuộc tính để xác định giá trị Có hoặc Không.
Thuộc tính nằm trong thẻ bắt đầu (không nằm trong thẻ kết thúc), sau tên thẻ. Trong trường hợp thẻ có nhiều hơn một thuộc tính thì các thuộc tính được ngăn cách bởi dấu cách.
Ví dụ: Với thẻ có hai thuộc tính là thuộc_tính_1 nhận giá_trị_1 và thuộc_tính_2 nhận giá_trị_2, ta viết lệnh như sau:

Một trong những thuộc tính được sử dụng thường xuyên nhất là thuộc tính style, dùng để thiết lập định dạng văn bản như chọn màu sắc, phông chữ, cỡ chữ, kiểu chữ, căn lề, tạo khung,... cho một phần tử HTML ngay tại vị trí được viết.

2. CÁC ĐỊNH DẠNG TRÌNH BÀY VĂN BẢN

a) Định dạng tiêu đề

Để định dạng tiêu đề và các tiêu đề con xuất hiện trong văn bản ta sử dụng các thẻ <hx> trong đó x nhận một trong các giá trị từ 1 đến 6, thể hiện độ quan trọng giảm dần của nội dung. Thẻ <h1> nên được sử dụng cho tiêu đề chính hay tiêu đề chung của cả văn bản. Các tiêu đề ở mức thấp hơn dùng thẻ <h2> và tiếp tục với các mức tiếp theo,...
Khi sử dụng thẻ <hx> trình duyệt sẽ sử dụng chúng để hiển thị trang web và định dạng văn bản giúp người dùng đọc lướt trang web theo tiêu đề. Ngoài ra, các công cụ tìm kiếm sử dụng thẻ này để xác định cấu trúc và nội dung trang web.
Ví dụ 1: Đoạn mã html dưới đây minh họa một văn bản có 4 mức tiêu đề:

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

Một văn bản thường gồm nhiều đoạn văn bản tách rời nhau. Các đoạn có thể được định dạng giống hoặc khác nhau tùy vào vị trí, nội dung và cách trang trí.
Cách đơn giản nhất để xác định đoạn là đặt nội dung đoạn trong cặp thẻ <p>Nội dung</p>. Khi gặp cặp thẻ <p>...</p> trình duyệt sẽ hiển thị nội dung đoạn trên dòng mới kèm với khoảng trống nhỏ trước và sau đoạn. Nội dung đoạn có thể chứa văn bản, hình ảnh và cả các phần tử khác nhưng không được chứa tiêu đề, danh sách, phần tử phân đoạn hoặc các phần tử dạng khối khác. Các đoạn được định dạng bằng thẻ <p> phù hợp với văn bản chứa nhiều chữ.
Khi cần thao tác với nhiều loại nội dung ta có thể sử dụng phần tử <div> và thẻ <span>. Cặp thẻ <div>...</div> hay <span>...</span> tạo một khối chứa nội dung bất kỳ đặt ở giữa hai thẻ. Phần tử <div> là một khối bắt đầu trên dòng mới, trong khi phần tử <span> có tác dụng tương tự nhưng sử dụng cho quy mô nhỏ hơn; nội dung khối hiển thị trên cùng dòng đang viết.
Để thêm các định dạng như khung, lề,... cho đoạn ta sử dụng thuộc tính style. Thuộc tính này sẽ được giới thiệu chi tiết trong các bài sau.
Lưu ý: Ngoài các thẻ định dạng đoạn và khối kể trên, còn có hai thẻ <br> và <hr> để xuống dòng hoặc tạo ra một đường kẻ ngang trên trang web.

3. CÁC THẺ ĐỊNH DẠNG PHÔNG CHỮ

a) Định dạng kiểu chữ

Một số kiểu chữ thường dùng bao gồm đậm, nghiêng, gạch chân, đánh dấu (highlight),... Các đoạn chữ cần được thiết lập kiểu chữ và được đặt trong cặp thẻ tương ứng, cụ thể như trong Bảng 8.1.

Lưu ý:
- HTML5 không hỗ trợ thẻ <big> và <u>, để điều khiển em nên thay bằng giá trị font-size và text-decoration trong thuộc tính style.
- Các thẻ <strong>, <em> có cùng tác dụng định dạng chữ đậm, nghiêng giống các thẻ <b>, <i> nhưng các thẻ này có ý nghĩa nhấn mạnh vào ngữ nghĩa của nội dung và được khuyến khích sử dụng nhiều hơn trong định dạng văn bản.

Ví dụ 2: Trong đoạn mã html sau, đoạn thứ nhất nhấn mạnh vào môn học hay là “Tin học”, đoạn thứ hai nhấn mạnh vào mức độ “rất” hay của môn Tin học.

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

Để định dạng phông chữ ta sử dụng thuộc tính style. Các thuộc tính màu sắc, phông chữ, cỡ chữ được xác định như sau:

• Màu sắc: <p style = "color:màu”>Nội dung.</p>.
• Phông chữ: <p style = "font-family:tên phông”>Nội dung.</p>.
• Cỡ chữ: <p style = "font-size:cỡ”>Nội dung.</p>. Có nhiều cách xác định cỡ chữ, phổ biến là dùng số kèm đơn vị (px-pixel, mm, cm,...) hoặc cỡ chữ thông dụng (small, medium, large,...).

Lưu ý:
- Giá trị màu sắc được sử dụng theo tiếng Anh: red, green, blue, grey, yellow, black, brown,... hoặc giá trị màu trong hệ RGB.
- Khi muốn thực hiện nhiều định dạng phông đồng thời ta đặt các cặp tên:giá trị trong phần giá trị của thuộc tính, ngăn cách nhau bởi dấu “;”.

4. THỰC HÀNH ĐỊNH DẠNG VĂN BẢN VÀ PHÔNG CHỮ

---The End!---

Nếu bạn không muốn học, không ai có thể giúp bạn. Nếu bạn quyết tâm học, không ai có thể ngăn cản bạn dừng lại.

CÙNG CHUYÊN MỤC:

PHẦN I. KIẾN THỨC CỐT LÕI CHUNG CHO CẢ HAI ĐỊNH HƯỚNG (CS) VÀ (ICT) - 21 bài.

CHỦ ĐỀ 1. MÁY TÍNH VÀ XÃ HỘI TRI THỨC

Bài 1. Làm quen với Trí tuệ nhân tạo
Bài 2. Trí tuệ nhân tạo trong khoa học và đời sống

CHỦ ĐỀ 2. MẠNG MÁY TÍNH VÀ INTERNET

Bài 3. Một số thiết bị mạng thông dụng
Bài 4. Giao thức mạng
Bài 5. Thực hành chia sẻ tài nguyên trên mạng

CHỦ ĐỀ 3. ĐẠO ĐỨC, PHÁP LUẬT VÀ VĂN HÓA TRONG MÔI TRƯỜNG SỐ

Bài 6. Giao tiếp và ứng xử trong không gian mạng

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

CHỦ ĐỀ 5. HƯỚNG NGHIỆP VỚI TIN HỌC

Bài 19. Dịch vụ sửa chữa và bảo trì máy tính
Bài 20. Nhóm nghề quản trị thuộc ngành Công nghệ thông tin
Bài 21. Hội thảo hướng nghiệp

PHẦN II. ĐỊNH HƯỚNG KHOA HỌC MÁY TÍNH (CS) - 9 bài.

CHỦ ĐỀ 6. MẠNG MÁY TÍNH VÀ INTERNET

Bài 22. Tìm hiểu thiết bị mạng
Bài 23. Đường truyền mạng và ứng dụng
Bài 24. Sơ bộ về thiết kế mạng

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

PHẦN III. ĐỊNH HƯỚNG TIN HỌC ỨNG DỤNG (ICT) - 7 bài.

CHỦ ĐỀ 6. MÁY TÍNH VÀ XÃ HỘI TRI THỨC

Bài 22. Thực hành kết nối các thiết bị số

CHỦ ĐỀ 7. ỨNG DỤNG TIN HỌC

CÁC CHUYÊN MỤC LIÊN QUAN:

BÀI 7 - HTML VÀ CẤU TRÚC TRANG WEB (KNTT - CS & ICT)

Bài 7 - HTML và cấu trúc trang web (kntt) Đây là bài soạn lý thuyết tin học 12 - sách Kết nối tri thức. Bài học này là kiến thức cốt lõi chung cho cả hai định hướng: Khoa học máy tính (cs) và Tin học ứng dụng (ict). Quý Thầy Cô và các em học sinh truy cập để làm tài liệu tham khảo nhé. Chúc Thầy Cô dạy tốt, chúc các em học sinh học giỏi.

TÓM TẮT NỘI DUNG:
1. Trang web và HTML
a) Thẻ đánh dấu HTML
b) Phần tử HTML
2. Cấu trúc cơ bản của một tệp HTML
3. Phần mềm soạn thảo HTML
a) Phần mềm Notepade
b) Phần mềm soạn thảo HTML chuyên nghiệp nguồn mở
c) Sử dụng trang web hỗ trợ soạn thảo HTML trực tuyến

1. TRANG WEB VÀ HTML

HTML là viết tắt của cụm từ Hypertext Markup Language (ngôn ngữ đánh dấu siêu văn bản), là một bộ quy tắc dùng để thiết lập cấu trúc và hiển thị nội dung trang web.
Trang web được thiết lập từ các tệp văn bản thường có phần mở rộng là .html hoặc .htm được gọi là trang html. Trên trang html, ta có thể thấy nội dung bao gồm phần văn bản (text) và các ký tự đánh dấu đặc biệt nằm trong hai dấu “<”, “>”. Các ký tự này, được gọi là thẻ đánh dấu HTML (còn gọi là thẻ HTML hay tag). Trong ví dụ ở Hình 7.1b chúng ta thấy các thẻ HTML như <head>, <title>, <body>, <h1>, <p>, <div>,...
Các thẻ HTML được sử dụng để xác định phần tử HTML tương ứng. Các phần tử HTML định dạng thông tin trong trang web. Để hiển thị thông tin trong trang web cần phần mềm trình duyệt web.

a) Thẻ đánh dấu HTML

Thẻ đánh dấu HTML (tag) là các thành phần chính tạo thành ngôn ngữ đánh dấu siêu văn bản. Mỗi loại thẻ có một tên riêng và có ý nghĩa nhất định trong định dạng nội dung của trang web. Các thẻ được viết trong cặp dấu “<”, “>”. Thông thường mỗi thẻ sẽ bao gồm thẻ bắt đầu và thẻ kết thúc, chỉ ra phạm vi tác dụng của thẻ.

Lưu ý:

- Tên thẻ HTML không phân biệt chữ hoa, chữ thường nhưng mặc định tên thẻ được viết chữ thường.
- Các thẻ có thể lồng nhau. Ví dụ sau là thẻ <em> được lồng bên trong thẻ <p>:

- Mỗi thẻ có thể đi kèm các thông tin thuộc tính của thẻ. Ví dụ sau mô tả thuộc tính màu được gắn thêm cho thẻ <p>, do đó toàn bộ đoạn văn bản này có màu đỏ khi hiển thị trên trình duyệt.

- Phần lớn các thẻ đều là thẻ đôi, tức là có thể bắt đầu (opening tag) và thẻ kết thúc (closing tag). Vị trí kết thúc thẻ có dấu “/” chẳng hạn </p>.
- Tuy nhiên có một số loại thẻ đơn, tức là chỉ có thẻ bắt đầu. Các thẻ đơn thường có dạng <tên thẻ> hoặc <tên thẻ/>, ví dụ <hr> (dòng kẻ ngang) <br/> (ngắt xuống dòng),...
- HTML và trình duyệt không nhận biết được nhiều dấu cách. Nếu gõ nhiều dấu cách máy sẽ hiểu là chỉ có một dấu cách. Trình duyệt cũng không nhận biết dấu xuống dòng khi người dùng nhấn phím Enter trong quá trình soạn thảo. Cần chú ý điều này Khi soạn thảo HTML.

b) Phần tử HTML

Phần tử HTML (element) là khái niệm cơ bản của trang html. Thông thường một phần tử được định nghĩa bởi thẻ bắt đầu, thẻ kết thúc và phần nội dung nằm giữa cặp thẻ này.

Lưu ý: Các thẻ đơn cùng với nội dung của nó cũng được gọi là phần tử HTML. Vậy phần tử HTML có thể hiểu là toàn bộ phần thẻ và nội dung của thẻ. Mỗi tệp HTML là tập hợp các phần tử HTML. Các phần tử HTML đóng vai trò quan trọng tạo nên cấu trúc và nội dung của trang web. Các phần tử HTML có thể độc lập, rời nhau hoặc lồng nhau.
Trong ví dụ ở Hình 7.1, em thấy hai phần tử HTML rời nhau là <head> và <body> trong khi đó phần tử <div> chứa bên trong 4 phần tử HTML khác.

Lưu ý:
- Dòng đầu tiên của mỗi tệp HTML có dạng <!DOCTYPE html> có vai trò thông báo kiểu của tệp là html và không được xem là phần tử HTML.
- Phần tử HTML đặc biệt có ý nghĩa chú thích trong tệp HTML có dạng:

2. CẤU TRÚC CƠ BẢN CỦA MỘT TỆP HTML

Mỗi tệp HTML bao gồm nhiều phần tử HTML, các phần tử HTML có thể lồng nhau. Ví dụ trong Hình 7.2, phần tử với thẻ <div> chứa phần tử với thẻ <h1>. Quan hệ lồng nhau giữa các phần tử HTML có thể hình dung như quan hệ cha - con hay quan hệ giữa các nút của một sơ đồ hình cây.

1. Dòng đầu tiên <!DOCTYPE html>, không được coi là phần tử HTML và mang ý nghĩa đặc biệt, thông báo cho trình duyệt biết đây là tệp có định dạng html. Có thể coi là dòng khai báo html của tệp văn bản.
2. Phần tử <html> là bắt buộc, là phần tử gốc và chứa tất cả các phần tử HTML còn lại của trang web. Trong sơ đồ hình cây HTML, đây là phần tử gốc (root). Phần tử <html> thường chứa hai phần tử con <head> và <body>.
3. Phần tử <head> chứa các phần tử có liên quan chung đến toàn bộ trang web. Trong <head> thường có phần tử <title>. Một số phần tử khác thường có trong <head> bao gồm <meta>, <style> và <script>.
4. Phần tử <body> chứa tất cả các phần tử còn lại là thông tin của trang web. Các phần tử này sẽ được tìm hiểu trong các bài học sau.
5. Phần tử <meta> được dùng để mô tả các thông tin bổ sung của trang web như cách mã hóa Unicode, từ khóa dùng để tìm kiếm trang, tên tác giả trang web. Phần tử này nằm trong phần tử <head>. Trong Hình 7.3, phần tử <meta charset = “utf-8”> mô tả cách mã hóa văn bản trên trang web theo mã UTF-8.
6. Phần tử <title> nằm trong <head>. Thẻ <title> mô tả tên của trang web hiện thời. Tên của trang web sẽ xuất hiện trong danh sách kết quả tìm kiếm. Phần tử <title> phải là văn bản thường và không được phép chứa các phần tử con.
7. Nhóm các thẻ định dạng văn bản thường dùng là các thẻ tiêu đề theo thứ tự giảm cấp dần là <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. Thẻ <p> mô tả một đoạn văn bản hoàn chỉnh.

Lưu ý: Văn bản HTML không nhận biết ký tự xuống dòng (nhấn phím Enter) để kết thúc đoạn văn bản (paragraph) như các phần mềm soạn thảo văn bản thông thường.
Như vậy, cấu trúc chung của một trang web có thể hình dung như một cây thông tin các phần tử HTML có quan hệ cha con (lồng nhau) nút gốc (root) là phần tử <html>. Cấu trúc cây HTML này sẽ được giới thiệu trong các phần sau. Ví dụ, trang web ở Hình 7.2 có cây thông tin như Hình 7.4.

3. PHẦN MỀM SOẠN THẢO HTML

Có nhiều cách để tạo tệp nguồn HTML. Ví dụ sử dụng các phần mềm soạn thảo như Notepad, Notepad++ hay Sublime Text. Ta cũng có thể soạn thảo trên các trang hỗ trợ tạo tệp HTML trực tuyến.

a) Phần mềm Notepade

Đây là phần mềm soạn thảo văn bản đơn giản không định dạng, cung cấp một số chức năng chỉnh sửa cơ bản. Notepad có sẵn trên hệ điều hành Windows. Trên MacOS cũng có phần mềm tương tự Notepad là TextEdit.

b) Phần mềm soạn thảo HTML chuyên nghiệp nguồn mở

• Phần mềm Notepad++
Notepad++ là phần mềm soạn thảo chương trình đa năng, hỗ trợ soạn thảo chương trình với nhiều ngôn ngữ khác nhau, trong đó có ngôn ngữ HTML. Đây là phần mềm miễn phí, mã nguồn mở và có thể tải về từ địa chỉ https://notepad-plus-plus.org/. Giao diện có thể như Hình 7.5.
Lưu ý: Để phần mềm hiển thị và hỗ trợ soạn thảo đúng HTML cần thực hiện lệnh Language → H → HTML để chọn ngôn ngữ HTML.

• Phần mềm Sublime Text
Sublime Text là phần mềm soạn thảo chương trình với nhiều ngôn ngữ khác nhau tương tự như Notepad++. Phần mềm này có phiên bản cơ bản miễn phí địa chỉ tải phần mềm: https://www.sublimetext.com/.
Lưu ý: Để phần mềm hiển thị và hỗ trợ soạn thảo đúng theo ngôn ngữ HTML cần thực hiện lệnh View → Syntax → HTML để chọn ngôn ngữ HTML.

c) Sử dụng trang web hỗ trợ soạn thảo HTML trực tuyến

Một cách phổ biến để soạn thảo HTML là sử dụng các trang hỗ trợ soạn thảo HTML trực tuyến. Để thực hiện theo cách này yêu cầu máy tính có kết nối Internet và cài đặt trình duyệt chuẩn, ví dụ như Cốc cốc, Firefox, Chrome hay Microsoft Edge.
Ví dụ Hình 7.6 là giao diện soạn thảo HTML trực tuyến. Khi đó có thể quan sát ngay kết quả hiển thị trang web trên trình duyệt. Việc soạn thảo HTML được thực hiện tại khung bên trái, nháy nút Run để kiểm tra kết quả tại không bên phải.