8687
3
Xem cách thực hành luyện tập tạo mã ở đây: [Code Cơ Bản] Hướng Dẫn Cách Thực Hành Code Trên Máy Tính Bằng Notepad
Mục Lục: HTML là gì? #1 ([HTML] Học HTML Cơ Bản) #2 ([HTML] Học HTML Cơ Bản)
Tài liệu HTML#3 ( [HTML] Học HTML Cơ Bản)
Note #4 ([HTML] Học HTML Cơ Bản)
Chào mừng đến với thế giới của mã!
HTML là bộ xương của tất cả các trang web. Nó là ngôn ngữ lập trình đầu tiên được các nhà thiết kế và các nhà tiếp thị và là cốt lõi trong công việc phát triển front-end.HTML cung cấp cấu trúc cho nội dung xuất hiện trên một trang web, chẳng hạn như hình ảnh, văn bản hoặc video. Nhấp chuột phải vào bất kì trang web nào trên internet, chọn Inspect, trực tiếp và bạn sẽ thấy HTML trong bảng điều khiển màn hình của bạn.
HTML là viết tắt cho cụm từ HyperText Markup Language (ngôn ngữ đánh dấu siêu văn bản)
HTML là bộ xương của tất cả các trang web. Nó là ngôn ngữ lập trình đầu tiên được các nhà thiết kế và các nhà tiếp thị và là cốt lõi trong công việc phát triển front-end.HTML cung cấp cấu trúc cho nội dung xuất hiện trên một trang web, chẳng hạn như hình ảnh, văn bản hoặc video. Nhấp chuột phải vào bất kì trang web nào trên internet, chọn Inspect, trực tiếp và bạn sẽ thấy HTML trong bảng điều khiển màn hình của bạn.
HTML là viết tắt cho cụm từ HyperText Markup Language (ngôn ngữ đánh dấu siêu văn bản)
- Một ngôn ngữ đánh dấu là một ngôn ngữ máy tính xác định cấu trúc và trình bày văn bản thô
- Trong HTML, máy tính có thể diễn giải văn bản thô được gói gọn trong các phần tử HTML
- Siêu văn bản (Hypertext) là văn bản được hiển thị trên máy tính hoặc thiết bị cung cấp quyền truy cập vào văn bản khác thông qua các liên kết, còn được gọi là Siêu liên kết. Bạn có thể nhấp vào một vài siêu liên kết khi truy cập vào 1 trang web bất kì (hoặc là chính Việt Nam Overnight này)
MỔ XẺ HTML
HTML bao gồm các yếu tố(elements) .Các yếu tố này cấu tạo nên trang web và xác định nội dung của nó. Chúng ta hãy xem cách họ viết.
Sơ đồ dưới đây hiển thị một phần tử đoạn HTML.
Như chúng ta có thể thấy, phần tử đoạn văn được tạo thành từ một thẻ mở(opening tag) ( <p>), nội dung (content) (Hello World!) và một thẻ đóng (closing tag) ( </p>). Một thẻ và các nội dung giữa nó được gọi là một phần tử HTML. Có nhiều thẻ mà chúng ta có thể sử dụng để sắp xếp và hiển thị văn bản và các loại nội dung khác, như hình ảnh.
Hãy nhanh chóng xem xét từng phần của yếu tố trong hình:
Sơ đồ dưới đây hiển thị một phần tử đoạn HTML.
Như chúng ta có thể thấy, phần tử đoạn văn được tạo thành từ một thẻ mở(opening tag) ( <p>), nội dung (content) (Hello World!) và một thẻ đóng (closing tag) ( </p>). Một thẻ và các nội dung giữa nó được gọi là một phần tử HTML. Có nhiều thẻ mà chúng ta có thể sử dụng để sắp xếp và hiển thị văn bản và các loại nội dung khác, như hình ảnh.
Hãy nhanh chóng xem xét từng phần của yếu tố trong hình:
- Phần tử HTML (hoặc đơn giản là phần tử - element) - một đơn vị nội dung trong tài liệu HTML được hình thành bởi các thẻ HTML và văn bản hoặc phương tiện chứa trong đó.
- Thẻ HTML - tên thành phần, được bao quanh bởi dấu ngoặc góc mở ( <) và đóng ( >).
- Thẻ mở - thẻ HTML đầu tiên được sử dụng để bắt đầu phần tử HTML. Loại thẻ được bao quanh bởi dấu ngoặc mở và đóng. <...>
- Nội dung - Thông tin (văn bản hoặc các yếu tố khác) có giữa các thẻ mở và đóng của một thành phần HTML.
- Thẻ đóng - thẻ HTML thứ hai được sử dụng để kết thúc phần tử HTML. Các thẻ đóng có một dấu gạch chéo ( /) bên trong chúng, ngay sau dấu ngoặc góc bên trái.</...>
PHẦN THÂN (Body)
Một trong những yếu tố HTML chính mà chúng tôi sử dụng để xây dựng trang web là yếu tố phần thân . Chỉ nội dung bên trong các thẻ body mở và đóng mới có thể được hiển thị trên màn hình. Chúng trông như thế này:
Khi tệp có phần thân, nhiều loại nội dung khác nhau - bao gồm văn bản, hình ảnh và nút - có thể được thêm vào phần thân.
CẤU TRÚC HTML
HTML được tổ chức như một bộ sưu tập các mối quan hệ cây gia đình. Như bạn đã thấy trong phần trước, chúng ta đã đặt các thẻ <p>trong các thẻ<body>. Khi một phần tử được chứa bên trong một phần tử khác, nó được coi là con của phần tử đó. Phần tử con được cho là được lồng bên trong phần tử cha .
Trong ví dụ trên,phần tử <p> được lồng bên trong phần tử<body>. Phần tử <p> được coi là con của phần tử <body> và phần tử <body> được coi là phần tử mẹ. Bạn cũng có thể thấy rằng chúng tôi đã thêm hai khoảng cách thụt lề (sử dụng khoảng trống) để dễ đọc hơn.
Vì có thể có nhiều cấp độ làm tổ, sự tương tự này có thể được mở rộng cho các cháu, chắt và hơn thế nữa. Mối quan hệ giữa các yếu tố với các yếu tố tổ tiên và hậu duệ của chúng được gọi là hệ thống phân cấp .
Hãy xem xét một ví dụ phức tạp hơn sử dụng một số thẻ mới:
Trong ví dụ này,phần tử <body> là cha mẹ của phần tử <div>. Cả hai phần tử <h1>và <p> là con của <div>. Bởi vì <h1>và <p>các yếu tố ở cùng cấp độ, chúng được coi là anh em ruột và đều là cháu của <body> này.
Hiểu hệ thống phân cấp HTML rất quan trọng vì các phần tử con có thể kế thừa hành vi và kiểu dáng từ phần tử cha của chúng. Bạn sẽ tìm hiểu thêm về phân cấp trang web khi bạn bắt đầu đào sâu vào CSS.
HTML:
<body>
</body>Khi tệp có phần thân, nhiều loại nội dung khác nhau - bao gồm văn bản, hình ảnh và nút - có thể được thêm vào phần thân.
HTML:
< body >
< p > Tôi là một con cún bị lạc.</ p >
</body >CẤU TRÚC HTML
HTML được tổ chức như một bộ sưu tập các mối quan hệ cây gia đình. Như bạn đã thấy trong phần trước, chúng ta đã đặt các thẻ <p>trong các thẻ<body>. Khi một phần tử được chứa bên trong một phần tử khác, nó được coi là con của phần tử đó. Phần tử con được cho là được lồng bên trong phần tử cha .
HTML:
< body >
< p > Đoạn này là con của body</ p >
</ body >Trong ví dụ trên,phần tử <p> được lồng bên trong phần tử<body>. Phần tử <p> được coi là con của phần tử <body> và phần tử <body> được coi là phần tử mẹ. Bạn cũng có thể thấy rằng chúng tôi đã thêm hai khoảng cách thụt lề (sử dụng khoảng trống) để dễ đọc hơn.
Vì có thể có nhiều cấp độ làm tổ, sự tương tự này có thể được mở rộng cho các cháu, chắt và hơn thế nữa. Mối quan hệ giữa các yếu tố với các yếu tố tổ tiên và hậu duệ của chúng được gọi là hệ thống phân cấp .
Hãy xem xét một ví dụ phức tạp hơn sử dụng một số thẻ mới:
HTML:
< body >
< div >
< h1 > Anh chị em với p, nhưng cũng là cháu của body</ h1 >
< p > Anh chị em với h1, nhưng cũng là cháu của body </ p >
</ div >
</ body >Trong ví dụ này,phần tử <body> là cha mẹ của phần tử <div>. Cả hai phần tử <h1>và <p> là con của <div>. Bởi vì <h1>và <p>các yếu tố ở cùng cấp độ, chúng được coi là anh em ruột và đều là cháu của <body> này.
Hiểu hệ thống phân cấp HTML rất quan trọng vì các phần tử con có thể kế thừa hành vi và kiểu dáng từ phần tử cha của chúng. Bạn sẽ tìm hiểu thêm về phân cấp trang web khi bạn bắt đầu đào sâu vào CSS.
TIÊU ĐỀ (HEADING)
Các tiêu đề trong HTML tương tự như các tiêu đề trong các loại phương tiện khác (truyền thông). Ví dụ, trên báo, các tiêu đề lớn thường được sử dụng để thu hút sự chú ý của người đọc. Những lần khác, các tiêu đề được sử dụng để mô tả nội dung, như tiêu đề của một bộ phim hoặc một bài báo giáo dục.
HTML theo một mô hình tương tự. Trong HTML, có sáu tiêu đề hoặc các yếu tố tiêu đề khác nhau . Các tiêu đề có thể được sử dụng cho nhiều mục đích khác nhau, như tiêu đề, bài viết hoặc các dạng nội dung khác.
Sau đây là danh sách các yếu tố tiêu đề có sẵn trong HTML. Chúng được đặt hàng từ kích thước lớn nhất đến nhỏ nhất.
- <h1>- được sử dụng cho các tiêu đề chính. Tất cả các tiêu đề nhỏ hơn khác được sử dụng cho các tiêu đề phụ.
- <h2>
- <h3>
- <h4>
- <h5>
- <h6>
HTML:
< h1 > HOT </h1>DIV - BỘ PHẬN (division)
Một trong những yếu tố phổ biến nhất trong HTML là <div>. <div>là viết tắt của bộ phận phân chia cấp độ nghiêm trọng hoặc một bộ chia trang thành các phần. Các phần này rất hữu ích để nhóm các thành phần trong HTML của bạn lại với nhau.
<div> có thể chứa bất kỳ văn bản hoặc các yếu tố HTML khác, chẳng hạn như liên kết, hình ảnh hoặc video.Hãy nhớ luôn luôn thêm hai khoảng cách thụt lề khi bạn lồng các phần tử bên trong <div> để dễ đọc hơn.
HTML:
< body >
< div >
< h1 > Tại sao nên sử dụng div? </ h1 >
< p > Tuyệt vời để phân nhóm các yếu tố! </ p >
</ div >
</ body ><div> có thể chứa bất kỳ văn bản hoặc các yếu tố HTML khác, chẳng hạn như liên kết, hình ảnh hoặc video.Hãy nhớ luôn luôn thêm hai khoảng cách thụt lề khi bạn lồng các phần tử bên trong <div> để dễ đọc hơn.
THUỘC TÍNH (Attributes)
Nếu chúng ta muốn mở rộng thẻ của một phần tử, chúng ta có thể sử dụng một thuộc tính . Các thuộc tính là nội dung được thêm vào thẻ mở của một yếu tố và có thể được sử dụng theo nhiều cách khác nhau, từ cung cấp thông tin đến thay đổi kiểu dáng. Các thuộc tính được tạo thành từ hai phần sau:
Khi chúng ta thêm một id vào một <div>, chúng ta đặt nó vào thẻ mở:
- Các tên của thuộc tính
- Các giá trị của thuộc tính
Khi chúng ta thêm một id vào một <div>, chúng ta đặt nó vào thẻ mở:
HTML:
< div id = "giới thiệu" >
< h1 > Giới thiệu </ h1 >
</ div >
Chỉnh sửa cuối:
