HTML [Ngôn ngữ đánh dấu siêu văn bản] là mã được sử dụng để cấu trúc một trang web và nội dung của nó. Ví dụ: nội dung có thể được cấu trúc trong một tập hợp các đoạn văn, danh sách các dấu đầu dòng hoặc sử dụng hình ảnh và bảng dữ liệu. Như tiêu đề đã gợi ý, bài viết này sẽ cung cấp cho bạn những hiểu biết cơ bản về HTML và các chức năng của nó
Vậy HTML là gì?
HTML là ngôn ngữ đánh dấu xác định cấu trúc nội dung của bạn. HTML bao gồm một loạt các phần tử mà bạn sử dụng để bao bọc hoặc bọc các phần khác nhau của nội dung để làm cho nội dung xuất hiện theo một cách nhất định hoặc hoạt động theo một cách nhất định. Các thẻ kèm theo có thể tạo một siêu liên kết từ hoặc hình ảnh đến một nơi khác, có thể in nghiêng các từ, có thể làm cho phông chữ lớn hơn hoặc nhỏ hơn, v.v. Ví dụ: lấy dòng nội dung sau
My cat is very grumpy
Nếu chúng tôi muốn dòng đứng một mình, chúng tôi có thể chỉ định rằng đó là một đoạn văn bằng cách đặt nó trong các thẻ đoạn văn
My cat is very grumpy
Cấu tạo của một phần tử HTML
Hãy khám phá yếu tố đoạn văn này hơn nữa
Các phần chính của phần tử của chúng tôi như sau
- thẻ mở đầu. Điều này bao gồm tên của phần tử [trong trường hợp này là p], được đặt trong dấu ngoặc nhọn mở và đóng. Điều này cho biết nơi phần tử bắt đầu hoặc bắt đầu có hiệu lực — trong trường hợp này là nơi đoạn văn bắt đầu
- Thẻ đóng. Điều này giống như thẻ mở, ngoại trừ việc nó bao gồm dấu gạch chéo lên trước tên phần tử. Trạng thái này cho biết phần tử kết thúc — trong trường hợp này là đoạn văn kết thúc. Không thêm thẻ đóng là một trong những lỗi tiêu chuẩn dành cho người mới bắt đầu và có thể dẫn đến kết quả lạ
- Nội dung. Đây là nội dung của phần tử, trong trường hợp này, chỉ là văn bản
- Phần tử. Thẻ mở, thẻ đóng và nội dung cùng nhau tạo thành phần tử
Các phần tử cũng có thể có các thuộc tính giống như sau
Các thuộc tính chứa thông tin bổ sung về phần tử mà bạn không muốn xuất hiện trong nội dung thực tế. Ở đây,
My cat is very grumpy
4 là tên thuộc tính và My cat is very grumpy
5 là giá trị thuộc tính. Thuộc tính My cat is very grumpy
4 cho phép bạn cung cấp cho phần tử một mã định danh không duy nhất có thể được sử dụng để nhắm mục tiêu nó [và bất kỳ phần tử nào khác có cùng giá trị My cat is very grumpy
4] với thông tin kiểu dáng và những thứ khác. Một số thuộc tính không có giá trị, chẳng hạn như My cat is very grumpy
8Các thuộc tính đặt giá trị luôn có
- Khoảng cách giữa nó và tên phần tử [hoặc thuộc tính trước đó, nếu phần tử đã có một hoặc nhiều thuộc tính]
- Tên thuộc tính theo sau bởi một dấu bằng
- Giá trị thuộc tính được bao bọc bởi dấu ngoặc kép mở và đóng
Ghi chú. Các giá trị thuộc tính đơn giản không chứa khoảng trắng ASCII [hoặc bất kỳ ký tự nào trong số các ký tự
My cat is very grumpy
9 My cat is very grumpy.
0 My cat is very grumpy.
1 My cat is very grumpy.
2 My cat is very grumpy.
3 My cat is very grumpy.
4] có thể không được trích dẫn, nhưng bạn nên trích dẫn tất cả các giá trị thuộc tính vì nó làm cho mã nhất quán và dễ hiểu hơncác phần tử lồng nhau
Bạn cũng có thể đặt các phần tử bên trong các phần tử khác — điều này được gọi là lồng nhau. Nếu chúng ta muốn nói rằng con mèo của chúng ta rất gắt gỏng, chúng ta có thể bọc từ "rất" trong phần tử
My cat is very grumpy.
5, có nghĩa là từ này sẽ được nhấn mạnh________số 8
Tuy nhiên, bạn cần đảm bảo rằng các phần tử của bạn được lồng vào nhau đúng cách. Trong ví dụ trên, chúng tôi đã mở phần tử
My cat is very grumpy.
6 trước, sau đó là phần tử My cat is very grumpy.
5; . Điều sau đây là không chính xácMy cat is very grumpy
9Các yếu tố phải mở và đóng chính xác để chúng rõ ràng bên trong hoặc bên ngoài nhau. Nếu chúng chồng lên nhau như minh họa ở trên, thì trình duyệt web của bạn sẽ cố gắng đoán đúng nhất những gì bạn đang cố nói, điều này có thể dẫn đến kết quả không mong muốn. Vì vậy, đừng làm điều đó
yếu tố trống
Một số phần tử không có nội dung và được gọi là phần tử void. Lấy phần tử
My cat is very grumpy
90 mà chúng tôi đã có trong trang HTML của mìnhMy cat is very grumpy
1Thuộc tính này chứa hai thuộc tính, nhưng không có thẻ đóng
My cat is very grumpy
91 và không có nội dung bên trong. Điều này là do một phần tử hình ảnh không bao bọc nội dung để ảnh hưởng đến nó. Mục đích của nó là nhúng một hình ảnh vào trang HTML ở vị trí nó xuất hiệnCấu tạo của một tài liệu HTML
Điều đó kết thúc những điều cơ bản của các thành phần HTML riêng lẻ, nhưng chúng không tiện dụng khi sử dụng riêng lẻ. Bây giờ chúng ta sẽ xem cách các phần tử riêng lẻ được kết hợp để tạo thành toàn bộ trang HTML. Hãy xem lại mã mà chúng ta đã đưa vào ví dụ
My cat is very grumpy
92 [lần đầu tiên chúng ta gặp trong bài viết Xử lý tệp]My cat is very grumpy
4Ở đây, chúng tôi có những điều sau đây
93 — loại tài liệu. Đó là một lời mở đầu bắt buộc. Trong một thời gian dài, khi HTML còn non trẻ [khoảng năm 1991/92], các loại tài liệu được dùng như các liên kết đến một bộ quy tắc mà trang HTML phải tuân theo để được coi là HTML tốt, điều này có thể có nghĩa là tự động kiểm tra lỗi và các quy tắc khác. . Tuy nhiên, ngày nay, chúng không làm được gì nhiều và về cơ bản chỉ cần thiết để đảm bảo tài liệu của bạn hoạt động bình thường. Đó là tất cả những gì bạn cần biết lúc nàyMy cat is very grumpy
94 — phần tửMy cat is very grumpy
95. Phần tử này bao bọc tất cả nội dung trên toàn bộ trang và đôi khi được gọi là phần tử gốc. Nó cũng bao gồm thuộc tínhMy cat is very grumpy
96, đặt ngôn ngữ chính của tài liệuMy cat is very grumpy
97 — phần tửMy cat is very grumpy
98. Phần tử này hoạt động như một vùng chứa cho tất cả nội dung bạn muốn đưa vào trang HTML không phải là nội dung bạn đang hiển thị cho người xem trang của mình. Điều này bao gồm những thứ như từ khóa và mô tả trang mà bạn muốn xuất hiện trong kết quả tìm kiếm, CSS để tạo kiểu cho nội dung của chúng tôi, khai báo bộ ký tự, v.v.My cat is very grumpy
99 — Phần tử này đặt bộ ký tự mà tài liệu của bạn sẽ sử dụng thành UTF-8 bao gồm hầu hết các ký tự từ phần lớn các ngôn ngữ viết. Về cơ bản, giờ đây nó có thể xử lý bất kỳ nội dung văn bản nào bạn có thể đặt trên đó. Không có lý do gì để không thiết lập điều này và nó có thể giúp tránh một số vấn đề sau nàyMy cat is very grumpy
10 — Phần tử khung nhìn này đảm bảo trang hiển thị ở độ rộng của khung nhìn, ngăn trình duyệt trên thiết bị di động hiển thị các trang rộng hơn khung nhìn rồi thu nhỏ chúng xuốngMy cat is very grumpy
11 — phần tửMy cat is very grumpy
12. Cái này đặt tiêu đề cho trang của bạn, là tiêu đề xuất hiện trong tab trình duyệt mà trang được tải vào. Nó cũng được sử dụng để mô tả trang khi bạn đánh dấu/yêu thích nóMy cat is very grumpy
13 — phần tửMy cat is very grumpy
14. Phần này chứa tất cả nội dung mà bạn muốn hiển thị cho người dùng web khi họ truy cập trang của bạn, cho dù đó là văn bản, hình ảnh, video, trò chơi, bản âm thanh có thể phát được hay bất kỳ nội dung nào khácMy cat is very grumpy
Hình ảnh
Hãy chuyển sự chú ý của chúng ta sang phần tử
My cat is very grumpy
90 một lần nữaMy cat is very grumpy
1Như chúng tôi đã nói trước đây, nó nhúng một hình ảnh vào trang của chúng tôi ở vị trí mà nó xuất hiện. Nó thực hiện điều này thông qua thuộc tính
My cat is very grumpy
16 [nguồn], chứa đường dẫn đến tệp hình ảnh của chúng tôiChúng tôi cũng đã bao gồm thuộc tính
My cat is very grumpy
17 [thay thế]. Trong thuộc tính My cat is very grumpy
17, bạn chỉ định văn bản mô tả cho người dùng không xem được hình ảnh, có thể do các nguyên nhân sau- Họ bị khiếm thị. Người dùng bị suy giảm thị lực nghiêm trọng thường sử dụng các công cụ được gọi là trình đọc màn hình để đọc văn bản thay thế cho họ nghe
- Đã xảy ra lỗi khiến hình ảnh không hiển thị. Ví dụ: cố tình thay đổi đường dẫn bên trong thuộc tính
16 của bạn để làm cho nó không chính xác. Nếu bạn lưu và tải lại trang, bạn sẽ thấy một cái gì đó như thế này thay cho hình ảnhMy cat is very grumpy
Các từ khóa cho văn bản thay thế là "văn bản mô tả". Văn bản thay thế bạn viết phải cung cấp cho người đọc đủ thông tin để hiểu rõ những gì hình ảnh truyền tải. Trong ví dụ này, văn bản hiện tại của chúng tôi về "Hình ảnh thử nghiệm của tôi" không tốt chút nào. Một sự thay thế tốt hơn nhiều cho logo Firefox của chúng tôi sẽ là "The Firefox logo. một con cáo lửa bao quanh trái đất. "
Thử nghĩ ra một số văn bản thay thế tốt hơn cho hình ảnh của bạn ngay bây giờ
Ghi chú. Tìm hiểu thêm về khả năng tiếp cận trong mô-đun tìm hiểu về khả năng tiếp cận của chúng tôi
Đánh dấu văn bản
Phần này sẽ đề cập đến một số phần tử HTML cần thiết mà bạn sẽ sử dụng để đánh dấu văn bản
tiêu đề
Heading elements allow you to specify that certain parts of your content are headings — or subheadings. In the same way that a book has the main title, chapter titles, and subtitles, an HTML document can too. HTML contains 6 heading levels,
- , although you'll commonly only use 3 to 4 at most:
My cat is very grumpy
3Ghi chú. Bất kỳ thứ gì trong HTML giữa
My cat is very grumpy
40 và My cat is very grumpy
41 đều là nhận xét HTML. Trình duyệt bỏ qua các nhận xét khi nó hiển thị mã. Nói cách khác, chúng không hiển thị trên trang - chỉ trong mã. Nhận xét HTML là một cách để bạn viết các ghi chú hữu ích về mã hoặc logic của mìnhBây giờ hãy thử thêm một tiêu đề phù hợp vào trang HTML của bạn ngay phía trên phần tử
My cat is very grumpy
90 của bạnGhi chú. Bạn sẽ thấy rằng tiêu đề cấp 1 của bạn có kiểu ngầm định. Không sử dụng các phần tử tiêu đề để làm cho văn bản lớn hơn hoặc in đậm, vì chúng được sử dụng cho khả năng truy cập và các lý do khác như SEO. Cố gắng tạo một chuỗi tiêu đề có ý nghĩa trên các trang của bạn mà không bỏ qua các cấp độ
đoạn văn
Như đã giải thích ở trên, các phần tử
My cat is very grumpy.
6 dùng để chứa các đoạn văn bản; My cat is very grumpy
8Thêm văn bản mẫu của bạn [bạn nên có nó từ Trang web của bạn sẽ trông như thế nào?] vào một hoặc một vài đoạn văn, được đặt ngay bên dưới phần tử
My cat is very grumpy
90 của bạndanh sách
Rất nhiều nội dung của trang web là danh sách và HTML có các thành phần đặc biệt cho những danh sách này. Đánh dấu danh sách luôn bao gồm ít nhất 2 yếu tố. Các loại danh sách phổ biến nhất là danh sách có thứ tự và không có thứ tự
- Danh sách không có thứ tự dành cho danh sách mà thứ tự của các mục không quan trọng, chẳng hạn như danh sách mua sắm. Chúng được bọc trong một phần tử
45My cat is very grumpy
- Danh sách có thứ tự dành cho danh sách mà thứ tự của các mục không quan trọng, chẳng hạn như công thức. Chúng được bọc trong một phần tử
46My cat is very grumpy
Mỗi mục bên trong danh sách được đặt bên trong phần tử
My cat is very grumpy
47 [mục danh sách]Ví dụ: nếu chúng ta muốn biến một phần của đoạn văn sau thành một danh sách
My cat is very grumpy
3Chúng tôi có thể sửa đổi đánh dấu này
My cat is very grumpy
0Hãy thử thêm một danh sách có thứ tự hoặc không có thứ tự vào trang ví dụ của bạn
liên kết
Các liên kết rất quan trọng — chúng là thứ làm cho trang web trở thành trang web. Để thêm một liên kết, chúng ta cần sử dụng một yếu tố đơn giản —
My cat is very grumpy
48 — "a" là dạng viết tắt của "anchor". Để biến văn bản trong đoạn văn của bạn thành một liên kết, hãy làm theo các bước sau- Chọn một số văn bản. Chúng tôi đã chọn văn bản "Tuyên ngôn Mozilla"
- Bọc văn bản trong phần tử
48, như hình bên dướiMy cat is very grumpy
1My cat is very grumpy
- Cung cấp cho phần tử
48 một thuộc tínhMy cat is very grumpy
11, như hình bên dướiMy cat is very grumpy
2My cat is very grumpy
- Điền vào giá trị của thuộc tính này địa chỉ trang web mà bạn muốn liên kết đến
3My cat is very grumpy
Bạn có thể nhận được kết quả không mong muốn nếu bỏ qua phần
My cat is very grumpy
12 hoặc My cat is very grumpy
13, được gọi là giao thức, ở đầu địa chỉ web. Sau khi tạo một liên kết, hãy nhấp vào liên kết đó để đảm bảo rằng nó đang gửi cho bạn đến nơi bạn muốnGhi chú. Lúc đầu,
My cat is very grumpy
11 có thể giống như một lựa chọn khá khó hiểu cho tên thuộc tính. Nếu bạn gặp khó khăn trong việc ghi nhớ nó, hãy nhớ rằng nó là viết tắt của tham chiếu siêu văn bảnThêm một liên kết đến trang của bạn ngay bây giờ, nếu bạn chưa làm như vậy
Phần kết luận
Nếu bạn đã làm theo tất cả các hướng dẫn trong bài viết này, bạn sẽ nhận được một trang giống như bên dưới [bạn cũng có thể xem nó ở đây]
Nếu bạn gặp khó khăn, bạn luôn có thể so sánh công việc của mình với mã mẫu đã hoàn thành của chúng tôi trên GitHub
Ở đây, chúng ta mới chỉ thực sự tìm hiểu sơ qua về HTML. Để tìm hiểu thêm, hãy chuyển đến chủ đề Học HTML của chúng tôi
10 thẻ HTML cơ bản là gì?
…
— A section heading. .. .…
— A paragraph. .. .12 điều cơ bản của HTML là gì?
,
,
5 phần cơ bản của HTML là gì?
9 thẻ cơ bản trong HTML là gì?
để giải lao