GIẢI KHOA HỌC MÁY TÍNH 12 CHÂN TRỜI CHỦ ĐỀ A: MÁY TÍNH VÀ XÃ HỘI TRI THỨC

Giải Khoa học máy tính 12 Chân trời bài A1: Giới thiệu Trí tuệ nhân tạo
Giải Khoa học máy tính 12 Chân trời bài A2: Trí tuệ nhân tạo và cuộc sống

GIẢI KHOA HỌC MÁY TÍNH 12 CHÂN TRỜI CHỦ ĐỀ B: MẠNG MÁY TÍNH VÀ INTERNET

Giải Khoa học máy tính 12 Chân trời bài B1: Thiết bị và giao thức mạng
Giải Khoa học máy tính 12 Chân trời bài B2: Các chức năng mạng của hệ điều hành
Giải Khoa học máy tính 12 Chân trời bài B3: Thực hành kết nối và sử dụng mạng trên thiết bị thông minh
Giải Khoa học máy tính 12 Chân trời bài B4: Vai trò của các thiết bị mạng
Giải Khoa học máy tính 12 Chân trời bài B5: Đường truyền hữu tuyến và vô tuyến
Giải Khoa học máy tính 12 Chân trời bài B6: Thiết kế mạng nội bộ
Giải Khoa học máy tính 12 Chân trời bài B7: Thực hành thiết kế mạng nội bộ

GIẢI KHOA HỌC MÁY TÍNH 12 CHÂN TRỜI CHỦ ĐỀ D: ĐẠO ĐỨC, PHÁP LUẬT VÀ VĂN HÓA TRONG MÔI TRƯỜNG

Giải Khoa học máy tính 12 Chân trời bài D1: Giao tiếp trong không gian mạng
Giải Khoa học máy tính 12 Chân trời bài D2: Gìn giữ tính nhân văn trong không gian mạng

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

GIẢI KHOA HỌC MÁY TÍNH 12 CHÂN TRỜI CHỦ ĐỀ G: HƯỚNG NGHIỆP VỚI TIN HỌC

Giải Khoa học máy tính 12 Chân trời bài G1: Nhóm nghề dịch vụ thuộc ngành Công nghệ thông tin
Giải Khoa học máy tính 12 Chân trời bài G2: Nhóm nghề quản trị thuộc ngành Công nghệ thông tin
Giải Khoa học máy tính 12 Chân trời bài G3: Một số nghề ứng dụng tin học và một số ngành thuộc lĩnh vực Công nghệ thông tin

Lý thuyết trọng tâm Khoa học máy tính 12 Chân trời bài F1: HTML và trang web

Tổng hợp kiến thức trọng tâm Khoa học máy tính 12 Chân trời sáng tạo bài F1: HTML và trang web. Tài liệu nhằm củng cố, ôn tập lại nội dung kiến thức bài học cho học sinh dễ nhớ, dễ ôn luyện. Kéo xuống để tham khảo

Nếu chưa hiểu - hãy xem: => Lời giải chi tiết ở đây

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

BÀI F1: HTML VÀ TRANG WEB

I - MỤC TIÊU BÀI HỌC

• Hiểu và giải thích được cấu trúc của một trang web dưới dạng HTML.

II - KIẾN THỨC CẦN GHI NHỚ

1. GIỚI THIỆU NGÔN NGỮ HTML

- Siêu văn bản (Hypertext) là tài liệu điện tử đa phương tiện chứa văn bản, hình ảnh, âm thanh, video và siêu liên kết. Trong đó, siêu liên kết giúp người đọc dễ dàng truy cập đến nội dung khác hoặc siêu văn bản khác.

- Mỗi trang web là một siêu văn bản được tạo ra bằng ngôn ngữ HTML (HyperText Markup Language).

- HTML là ngôn ngữ đánh dấu được phát triển bởi Tim Berners-Lee, Robert Cailliau và các cộng sự vào năm 1989, dùng để trình bày cấu trúc, nội dung và hình thức của trang web.

- Hiện nay, HTML5 là phiên bản thông dụng, giúp tạo ra trang web có tính tương tác cao và giúp hiển thị trang web trên các thiết bị thông minh.

- Thành phần của một trang web bao gồm văn bản, hình ảnh, âm thanh, video và các nội dung khác đều được định dạng bằng các phần tử HTML tương ứng.

- Mỗi phần tử HTML được thể hiện bằng một thẻ (tag) và có thể đính kèm các thuộc tính (attribute).

- Khi người dùng truy cập trang web, trình duyệt sẽ tải xuống mã HTML tương ứng và sử dụng mã này để kết xuất nội dung, hình thức của trang web.

- Các trình duyệt phổ biến hiện nay như Microsoft Edge, Google Chrome, Mozilla Firefox, Safari,... đều có hỗ trợ ngôn ngữ HTML.

2. CẤU TRÚC, NỘI DUNG TRANG WEB VÀ CÁC PHẦN TỬ HTML

- Mỗi phần tử HTML có hai thành phần cơ bản là thẻ và thuộc tính:

- Phần lớn các phần tử được đánh dấu bằng một cặp thẻ gồm:

+ Thẻ mở (< >).

+ Thẻ đóng (</ >).

- Một số ít khác chỉ đánh dấu bằng thẻ mở.

- Để viết mã lệnh HTML, em có thể sử dụng các trình soạn thảo văn bản phổ biến như Visual Studio Code, Sublime Text, Atom,... Các ví dụ minh hoạ trong chủ đề này được viết bằng chương trình Visual Studio Code:

Tải và cài đặt phần mềm từ địa chỉ https://code.visualstudio.com/

- Cách tạo tệp mới trong phần mềm Visual Studio Code:

+ Trên thanh công cụ, chọn File New Text File.

+ Gõ tổ hợp phím Ctrl + N.

- Trước khi gõ mã lệnh, lưu tệp với tên portfolio.html, trong đó:

+ portfolio là phần tên chính.

+ .html là phần tên mở rộng.

- Cấu trúc của một trang web cơ bản:

+ <!DOCTYPE html>: khai báo với trình duyệt rằng trang web sử dụng HTML5.

+ Cặp thẻ <html></html>:

Chứa toàn bộ nội dung trang web.
Giúp trình duyệt nhận biết đây là một tài liệu được viết bằng ngôn ngữ HTML.
Tất cả thẻ khác đều nằm bên trong cặp thẻ này.

+ Cặp thẻ <head></head>: chứa các phần mở đầu của trang web nhằm cung cấp thông tin của trang web cho trình duyệt và các công cụ tìm kiếm trên Internet.

Ví dụ:

Thẻ <meta charset="utf-8">: giúp trình duyệt nhận biết trang web sử dụng utf-8, là bảng mã Unicode được dùng phổ biến dành cho các trang web.
Cặp thẻ <title></title>: định nghĩa tiêu đề của trang web, hiển thị trên thanh tiêu đề hoặc cửa sổ của trình duyệt.

+ Cặp thẻ <body></body>: định nghĩa phần nội dung chính của trang web. Trong Hình 3, phần nội dung chính gồm:

Cặp thẻ <h1></h1>: định nghĩa đề mục có cấp độ lớn nhất trong trang web.
Cặp thẻ <p></p>: định nghĩa một đoạn văn bản.

+ Nội dung đặt trong cặp kí hiệu  là phần ghi chú, trình duyệt sẽ không hiển thị lên trang web.

- Lưu ý: Khi sử dụng nhiều thẻ HTML lồng nhau, phải đóng thẻ bên trong trước, đóng thẻ bên ngoài sau.

- Một số phần tử chỉ có thẻ mở: <br>, <hr>, <img>,…

Ví dụ:

+ Thẻ <hr> dùng để tạo ra đường ngăn cách nằm ngang, phân tách các nội dung trong trang web.

+ Thẻ <br> dùng để ngắt xuống dòng.

+ Thẻ <img> dùng để chèn hình ảnh vào trang web.

- Thuộc tính thẻ:

+ Mỗi thẻ HTML có thể có một hoặc nhiều thuộc tính hoặc không có thuộc tính để định dạng nội dung.

+ Thuộc tính được đặt trong thẻ mở với cú pháp như sau:

Thuộc tính bgcolor thiết lập màu nền của trang web.
Thẻ <input> có hai thuộc tính là type và name, dùng để tạo một khung nhập dữ liệu trên trang web.

Nếu chưa hiểu - hãy xem: => Lời giải chi tiết ở đây

Nội dung quan tâm khác

Thêm kiến thức môn học

Giáo án khoa học máy tính 12 chân trời sáng tạo

Bài giảng điện tử khoa học máy tính 12 Chân trời sáng tạo

Giải tin học 12 định hướng Khoa học máy tính chân trời sáng tạo

Trắc nghiệm Tin học KHMT 12 chân trời sáng tạo

Siêu nhanh giải tin học khoa học máy tính 12 chân trời sáng tạo

5 phút giải tin học khmt 12 chân trời sáng tạo

Giải chuyên đề Khoa học máy tính 12 Chân trời sáng tạo

Slide bài giảng tin học máy tính 12 chân trời sáng tạo

Đáp án tin học máy tính 12 chân trời sáng tạo

Dễ hiểu giải tin học máy tính 12 chân trời sáng tạo

Video bài giảng tin học máy tính 12 chân trời sáng tạo

Game khởi động Tin học 12 Khoa học máy tính Chân trời sáng tạo

Từ khóa tìm kiếm:

Tóm tắt kiến thức Khoa học máy tính 12 CTST bài F1: HTML và trang web, kiến thức trọng tâm Khoa học máy tính 12 Chân trời sáng tạo bài F1: HTML và trang web, Ôn tập Khoa học máy tính 12 Chân trời sáng tạo bài F1: HTML và trang web