Học HTML và CSS: Handbook toàn diện về HTML và CSS

Một cuốn sổ tay toàn diện để tìm hiểu các nguyên tắc cơ bản của HTML và CSS, hai ngôn ngữ cơ bản của phát triển web. Mục đích của hướng dẫn này là dạy các kiến ​​thức cơ bản về HTML và CSS mà bạn sẽ sử dụng trong quá trình phát triển web.

Xin chào và chào mừng bạn đến với sổ tay toàn diện về HTML và CSS này. Mục tiêu của tôi là dạy cho bạn mọi thứ bạn cần biết về cách xây dựng các trang web nhanh và đẹp, trông tuyệt vời trên mọi thiết bị.

Tôi cho rằng bạn không có kiến ​​thức về HTML hoặc CSS và muốn học mọi thứ từ đầu. Vì vậy, cuốn sổ tay này thân thiện với người mới bắt đầu.

Bây giờ, hãy nhảy vào và bắt đầu!

Mục lục

1. Những gì bạn cần
2. Nguyên tắc cơ bản của phát triển web
3. Bạn sẽ học gì
4. Ngôn ngữ và công cụ phát triển web
5. HTML là gì?
6. CSS là gì?
7. JavaScript là gì?
8. Một ví dụ thực tế
9. Con đường học tập phát triển Frontend
10. Khung phát triển Frontend
11. Tìm hiểu một hệ thống kiểm soát phiên bản
12. Cách thức hoạt động của web
13. Cách kiểm tra các yêu cầu và phản hồi HTTP
14. Khái niệm cơ bản về HTML – Cách tạo tài liệu HTML
15. Khái niệm cơ bản về CSS
16. Cách định dạng mã của bạn
17. Cách kiểm tra trang bằng DevTools
18. Cách xác thực các trang web
19. Phần đầu
20. Bộ ký tự là gì?
21. Các yếu tố để làm việc với văn bản
22. tiêu đề
23. Thực thể HTML
24. Cách tạo siêu liên kết
25. Cách nhúng hình ảnh
26. Phần kết luận

Những gì bạn cần

Bây giờ, chúng ta hãy xem các công cụ bạn cần để làm theo.

Để bắt đầu, bạn sẽ cần một trình soạn thảo mã. Có rất nhiều trình chỉnh sửa mã ngoài kia, như Visual Studio Code (VS Code), Sublime Text, Atom, v.v.

Trang chủ trang web Visual Studio Code

Trong hướng dẫn này, tôi sẽ sử dụng Mã VS, cùng với một số tiện ích mở rộng để khởi động máy chủ web và định dạng mã của chúng tôi.

Bạn có thể sử dụng trình chỉnh sửa mã yêu thích của mình nếu có, nhưng nếu không, hãy truy cập code.visualstudio.com và tải xuống phiên bản VS Code mới nhất.

Trang chủ trang web Visual Studio Code

Bây giờ, ở đây bên trong Mã VS, chúng tôi sẽ cài đặt một số tiện ích mở rộng.

Trình chỉnh sửa mã Visual Studio

Vì vậy, hãy mở bảng tiện ích mở rộng và tìm kiếm Prettier.

Tìm kiếm Tiện ích mở rộng cho Mã VS

Đây là tiện ích mở rộng mà chúng ta sẽ cài đặt - Trình định dạng mã đẹp hơn.

Tiện ích mở rộng đẹp hơn chúng tôi sẽ cài đặt

Với tiện ích mở rộng này, chúng tôi có thể định dạng mã của mình và làm cho mã nhất quán và đẹp mắt. Đây là một tiện ích mở rộng rất phổ biến và như bạn có thể thấy trong hình ảnh, nó đã được tải xuống hơn 30 triệu lần.

Vì vậy, bạn có thể thấy nút cài đặt mà tôi đã đánh dấu màu đỏ. Chỉ cần nhấp vào nó, và bạn đã hoàn tất.

Tiếp theo, chúng ta sẽ cài đặt một tiện ích mở rộng khác có tên Live Server. Với điều này, chúng tôi có thể khởi chạy trang web của mình bên trong Máy chủ web phát triển.

Máy chủ trực tiếp VS Phần mở rộng mã

Một lần nữa, đây là một phần mở rộng rất phổ biến. Nó đã được tải xuống hơn 32 triệu lần.

Bây giờ, ngoài những thứ này, chúng tôi sẽ sử dụng Trình duyệt để xem và kiểm tra các trang web của mình. Một lần nữa, bạn có thể sử dụng trình duyệt yêu thích của mình, nhưng trong sổ tay này, tôi sẽ sử dụng Google Chrome. Tôi khuyến khích bạn sử dụng cùng một trình duyệt để có thể dễ dàng theo dõi khóa học.

Nguyên tắc cơ bản của phát triển web

Chúng ta sẽ bắt đầu hành trình phát triển web của mình tại đây. Trong mỗi phần, bạn sẽ học được điều gì đó mới về phát triển web và khi kết thúc hướng dẫn này, bạn sẽ kết hợp tất cả những điều đó lại với nhau để xây dựng một trang web đẹp.

Bạn sẽ học gì

1. Các ngôn ngữ và công cụ phát triển web
2. Các khái niệm chính (ví dụ: URL là gì, HTTP là gì, DOM là gì, v.v.)
3. Làm thế nào các trang web hoạt động. Vì vậy, bạn sẽ hiểu chính xác điều gì sẽ xảy ra khi bạn sử dụng trình duyệt của mình để truy cập một trang web.
4. Cách kiểm tra lưu lượng mạng bằng DevTools. Đây là một công cụ rất mạnh được sử dụng bởi các nhà phát triển frontend.
5. Khái niệm cơ bản về HTML và CSS
6. Làm thế nào để xác nhận các trang web. Đây là điều mà rất nhiều nhà phát triển bỏ lỡ.

Đây sẽ là một hành trình tuyệt vời, vì vậy hãy tham gia và bắt đầu!

Ngôn ngữ và công cụ phát triển web

Cuốn sổ tay này là bước đầu tiên của bạn để trở thành nhà phát triển web.

cầu thang chu kỳ

Bây giờ, hãy để tôi cung cấp cho bạn một lộ trình đơn giản để biết bạn đang ở đâu và bạn nên đi đâu tiếp theo.

Các trang web có hai phần: frontend và backend.

Frontend VS Backend

Giao diện người dùng là phần bạn nhìn thấy trong trình duyệt của mình và tương tác với. Tất cả các khía cạnh trực quan.

Phần phụ trợ là phần cung cấp năng lượng cho giao diện người dùng. Nó nằm sau hậu trường và chủ yếu là lưu trữ dữ liệu trong cơ sở dữ liệu và cung cấp dữ liệu đó cho giao diện người dùng.

Meme Frontend vs Backend

Vì vậy, các công việc phát triển web được chia thành ba loại chính:

1. Phát triển Front-End
2. Phát triển Back-End
3. Phát triển Full-Stack (bao gồm cả Phát triển Front-End và Phát triển Back-End)

Nhà phát triển Front-End sử dụng HTML, CSS và JavaScript để xây dựng giao diện người dùng.

Nhà phát triển Back-End có sẵn nhiều công cụ khác nhau, nằm ngoài phạm vi của hướng dẫn này. Bạn có thể đọc thêm về sự khác biệt ở đây .

Vì vậy, bây giờ hãy nói về HTML, CSS và JavaScript.

HTML là gì?

HTML là viết tắt của Ngôn ngữ đánh dấu siêu văn bản. Tôi biết đó là một câu nói hay nhưng về cơ bản, chúng tôi sử dụng HTML để xác định cấu trúc hoặc các khối xây dựng của các trang web của chúng tôi.

CSS là gì?

CSS là viết tắt của Cascading Style Sheets. Chúng tôi sử dụng nó để tạo kiểu cho các trang web và làm cho chúng đẹp mắt.

JavaScript là gì?

JavaScript được sử dụng để thêm chức năng vào các trang web. Hãy để tôi cung cấp cho bạn một sự tương tự.

Hãy nghĩ về một tòa nhà.

Tòa nhà đang được xây dựng

Một tòa nhà trong thế giới thực giống như một trang web trên internet. Nó có khung hoặc cấu trúc – khung và nền tảng của tòa nhà (HTML).

Nó có thể có những bức tường, cửa sổ và gạch đẹp mắt để hoàn thiện và làm cho nó trông đẹp mắt (CSS).

gạch lát nền nhà

Và nó có thể có chức năng nhất định, chẳng hạn như nhà ở, bệnh viện hoặc siêu thị (JavaScript).

Thang máy của một ngôi nhà

Ví dụ, khi chúng ta nhấn nút thang máy, nó sẽ đến đón chúng ta. JavaScript sẽ kích hoạt điều này theo cách tương tự của chúng tôi.

Một ví dụ thực tế

Đây là một ví dụ thực tế. Giả sử bạn muốn xây dựng một trang web như Twitter. Đối với hồ sơ, bạn muốn có một bố cục như thế này:

Ảnh chụp màn hình hồ sơ Twitter của Karlgusta Annoh

Đầu tiên, chúng tôi sử dụng HTML để xác định các khối xây dựng của bố cục này. Những khối xây dựng này ở đây là gì?

1. Một tấm ảnh.
2. Một số văn bản cho biết địa chỉ Twitter của người dùng (ví dụ: @KarlgustaAnnoh).
3. Một khối văn bản khác chứa thông điệp (Dạy viết mã thông qua các câu chuyện...).
4. Các nút/biểu tượng để chỉnh sửa hồ sơ, Vị trí, liên kết và ngày tháng.
5. Số lượng người theo dõi.

Chúng tôi sử dụng HTML để thêm các khối xây dựng này vào trang web của chúng tôi.

Sau đó, chúng tôi sử dụng CSS để tạo sự hấp dẫn trực quan cho nó. Ví dụ: với CSS, chúng ta có thể làm cho văn bản được in đậm (như tên), chúng ta có thể làm tròn hình ảnh của chúng ta. Chúng tôi cũng có thể thay đổi màu của các biểu tượng vị trí, liên kết và ngày tháng cũng như xác định giao diện của chúng khi chúng tôi di chuột qua chúng.

Vì vậy, CSS là tất cả về hiệu ứng hình ảnh. Với CSS, chúng ta cũng có thể tạo ra những hình ảnh động đẹp mắt.

Bây giờ, hầu hết các trang web ngày nay đều có tính tương tác. Chúng phản hồi các hành động của chúng tôi như nhấp chuột và cuộn. Đây là lúc JavaScript xuất hiện. Với JavaScript, chúng ta có thể thêm chức năng hoặc hành vi vào các trang web của mình. Ví dụ: chúng ta có thể nhấp vào nút để theo dõi một người.

Vì vậy, JavaScript là ngôn ngữ lập trình, trong khi HTML (Ngôn ngữ đánh dấu) và CSS (Ngôn ngữ tạo kiểu) về mặt kỹ thuật thì không. Điều này có nghĩa là chúng ta không thể sử dụng chúng để ra lệnh cho máy tính phải làm gì. Chúng tôi sử dụng chúng để xác định các khối xây dựng của các trang web của chúng tôi và tạo kiểu cho chúng.

Mọi trang web mà bạn đã xem trên internet đều được xây dựng bằng ba ngôn ngữ này. Vì vậy, bạn càng học và hiểu rõ về chúng cũng như các tính năng của chúng, bạn càng phát triển giao diện người dùng tốt hơn.

Con đường học tập phát triển Frontend

Vì vậy, hành trình phát triển giao diện người dùng của bạn sẽ bắt đầu với HTML và CSS. Tôi có thể nói, nếu bạn dành 3-5 giờ mỗi ngày để học và viết mã, bạn sẽ có hiểu biết hợp lý về hai ngôn ngữ này trong một khoảng thời gian tương đối ngắn - có thể là một hoặc hai tháng (nhưng tất nhiên mọi người học ở một tốc độ khác nhau). , và điều đó tốt).

Khi bạn học những ngôn ngữ này, thì bạn cần học JavaScript. Tôi có một khóa học riêng để học JavaScript. Vì vậy, sau khi hoàn thành hướng dẫn này, bạn có thể muốn đăng ký khóa học đó.

Bạn cũng có thể xem chương trình dạy JavaScript của freeCodeCamp (cùng với HTML và CSS, trong số các công nghệ khác).

Tôi muốn nói rằng việc học JavaScript có thể mất thêm vài tháng nữa. Tất nhiên, bạn sẽ không trở thành chuyên gia JavaScript trong một thời gian ngắn như vậy, nhưng bạn có thể hiểu rõ hơn về nó. Bạn cũng sẽ học được nhiều hơn khi bạn làm việc trên các dự án khác nhau.

Vì vậy, vài tháng đầu tiên (hoặc lâu hơn) của việc học viết mã là về các nguyên tắc cơ bản.

Khung phát triển Frontend

Giờ đây, việc xây dựng trang web thường bao gồm một loạt các nhiệm vụ lặp đi lặp lại. Đây là nơi mà các framework và thư viện front-end xuất hiện.

Một khung hoặc thư viện đi kèm với rất nhiều mã mà chúng tôi có thể sử dụng lại trong các trang web của mình. Vì vậy, họ giúp chúng tôi hoàn thành công việc nhanh hơn. Đó là lý do tại sao ngày nay rất nhiều công ty sử dụng một trong những thư viện hoặc framework phổ biến này như React, Angular hoặc Vue.

Về mặt kỹ thuật, React là một thư viện, trong khi Vue và Angular là các framework. Nó là một thư viện. Tuy nhiên, bỏ qua những khác biệt nhỏ , tất cả các công cụ này đều phục vụ cùng một mục đích: chúng giúp chúng tôi xây dựng ứng dụng nhanh hơn.

Bây giờ, bạn không cần phải học tất cả những điều này để bắt đầu. Các công ty khác nhau sử dụng các công cụ khác nhau cho các dự án khác nhau.

Vì vậy, khi bạn chuyển từ dự án này sang dự án khác, bạn có thể muốn tìm hiểu về các công cụ khác. Nếu bạn mới bắt đầu, chỉ cần tập trung vào React vì đây là công cụ phổ biến nhất trong lĩnh vực này.

Biểu đồ hiển thị tất cả các công cụ khác để tìm hiểu, đó là HTML và CSS, JavaScript, React và Git

Khi bạn học React, bạn luôn có thể học các công cụ khác nếu cần.

Để tìm hiểu những kiến ​​thức cơ bản về React, có thể bạn sẽ cần vài tháng.

Một lần nữa, tôi có một khóa học toàn diện về React nếu bạn quan tâm đến điều đó.

Bây giờ, bước tiếp theo là gì?

Tìm hiểu một hệ thống kiểm soát phiên bản

Chúng tôi sử dụng Hệ thống kiểm soát phiên bản để theo dõi lịch sử dự án của mình và cộng tác làm việc với những người khác.

Có rất nhiều Hệ thống kiểm soát phiên bản ngoài kia, như:

• Git
• Lật đổ (SVN)
• Không kiên định

và như thế. Nhưng Git là công cụ phổ biến nhất trong không gian này và nó được sử dụng trong hơn 70% công ty phần mềm. Bạn sẽ thấy rằng Git xuất hiện trong hầu hết các mô tả/yêu cầu công việc.

Vì vậy, đây là những kỹ năng cần thiết mà mọi nhà phát triển giao diện người dùng phải có. Bạn sẽ thấy những điều này được liệt kê trong hầu hết các bản mô tả công việc.

Bây giờ, các công việc khác nhau đòi hỏi những kỹ năng khác, nhưng những kỹ năng này thay đổi từ công ty này sang công ty khác. Vì vậy, bạn có thể học những điều bổ sung này trong tương lai hoặc trong công việc.

Hiện tại, chỉ cần tập trung vào bốn kỹ năng này.

Biểu đồ hiển thị tất cả các công cụ để tìm hiểu, đó là HTML và CSS, JavaScript, React, Git

Hãy nhớ rằng, ít hơn là nhiều hơn.

Đừng cố gắng học quá nhiều thứ một cách nhanh chóng. Bạn sẽ không thực sự giữ lại được nhiều và cuối cùng sẽ lãng phí thời gian của bạn.

ĐƯỢC RỒI. Đó là lộ trình của bạn. Tiếp theo, chúng ta sẽ nói về cách thức hoạt động của web.

Cách thức hoạt động của web

Bạn đã bao giờ tự hỏi làm thế nào các trang web hoạt động? Trong phần này, tôi sẽ cho bạn biết chính xác điều gì sẽ xảy ra khi bạn nhập địa chỉ của một trang web vào trình duyệt của mình và nhấn ENTER.

Là một phần của điều này, chúng ta sẽ nói về một số khái niệm và thuật ngữ quan trọng mà bạn cần biết với tư cách là nhà phát triển web.

Vì vậy, giả sử chúng tôi khởi chạy trình duyệt của mình và truy cập một trang web như https://www.microsoft.com.

Bây giờ địa chỉ mà chúng ta có trong thanh địa chỉ được gọi là URL, viết tắt của Bộ định vị tài nguyên thống nhất. Về cơ bản, đó là một cách để xác định vị trí tài nguyên trên internet.

Tài nguyên có thể là:

• Trang web (Tài liệu HTML)
• Hình ảnh
• Tập video
• Phông chữ

và như thế.

địa chỉ Google

Vì vậy, chúng tôi nhập URL và nhấn ENTER. Điều gì xảy ra bây giờ?

Vâng, có hai phần liên quan ở đây:

Máy khách và Máy chủ

• Trình duyệt (còn gọi là Máy khách)
• Máy chủ (máy tính hoặc máy tính lưu trữ trang web mục tiêu của chúng tôi). Chúng tôi gọi tắt là Máy chủ Web hoặc Máy chủ.

Đây là những gì chúng tôi gọi là mô hình máy khách-máy chủ. Khách hàng yêu cầu một dịch vụ, máy chủ cung cấp dịch vụ.

Mô hình máy khách-máy chủ

Vì vậy, trình duyệt của chúng tôi sẽ gửi một tin nhắn đến máy chủ và nói: "Này! Hãy cho tôi trang chủ của trang web này."

Người đàn ông đang gõ trên trình duyệt

Điều này tương tự như cách bạn gửi tin nhắn văn bản cho bạn bè của mình. Bạn có thể coi điện thoại của mình là máy khách gửi tin nhắn và điện thoại của bạn bè là máy chủ nhận tin nhắn.

Người đàn ông và người phụ nữ gõ với người đàn ông đại diện cho khách hàng và máy chủ đại diện cho máy chủ

Bây giờ đến ví dụ của chúng tôi. Thông báo này được định dạng dựa trên giao thức có tên HTTP (Giao thức truyền siêu văn bản).

Bạn có thể đã nhận thấy nó trước đây, nhưng chưa bao giờ biết nó là gì.

Trỏ tới https trong URL của Google

Nói một cách đơn giản, HTTP là một giao thức mà máy khách và máy chủ sử dụng để giao tiếp với nhau. Nó không phải là một ngôn ngữ lập trình. Nó chỉ là một ngôn ngữ văn bản đơn giản để giao tiếp qua internet.

Chúng tôi cũng có HTTPS, đó là Mã hóa HTTP +. Vì vậy, các tin nhắn trao đổi giữa máy khách và máy chủ được mã hóa trong trường hợp này.

Đây là một ví dụ đơn giản về một thông báo HTTP:

GET /index.html HTTP/1.1
Host: www.microsoft.com
Accept-Language:en-us

Với thông báo này, trình duyệt cho máy chủ biết nó đang tìm gì.

Vì vậy, trên dòng đầu tiên, nó nói rằng nó muốn GETmột trang hoặc một tệp có tên index.htmlbằng cách sử dụng HTTP version 1.1. Index.htmlthường đại diện cho trang chủ của các trang web.

Trên dòng thứ hai, chúng ta có thể thấy máy chủ lưu trữ, đó là www.microsoft.com.

Ở dòng thứ ba, chúng ta có thể thấy ngôn ngữ en-usmà khách hàng có thể chấp nhận. Trong trường hợp này, nó là tiếng Anh.

Bây giờ, đừng lo lắng về việc ghi nhớ bất kỳ điều này. Tất cả những gì tôi muốn bạn hiểu ở đây là thông báo này được cấu trúc dựa trên HTTPgiao thức mà máy khách và máy chủ hiểu được.

Vì vậy, máy chủ nhận được thông báo này và tìm ra những gì khách hàng đang yêu cầu. Sau đó, nó sẽ gửi một tin nhắn trở lại cho khách hàng.

Máy khách và máy chủ giao tiếp qua lại

Thông báo đầu tiên được gọi là yêu cầu HTTP.

Máy khách gửi yêu cầu HTTP đến Máy chủ

Thông báo thứ hai được gọi là phản hồi HTTP.

Máy khách gửi yêu cầu đến máy chủ và máy chủ gửi phản hồi

Mọi trao đổi dữ liệu bằng giao thức HTTP bao gồm hai thông báo: yêu cầu và phản hồi.

Bây giờ, những gì là trong phản ứng? Đây là một ví dụ đơn giản:

HTTP/1.1 200 OK
Date: 6th April 2023
Content-Type: text/html


<!DOCTYPE html>
<html>
...
</html>

Ở dòng đầu tiên, chúng ta thấy phiên bản của giao thức HTTP được sử dụng, theo sau là một số (200), là mã trạng thái. 200 có nghĩa là thành công hoặc OK.

Ngay bên dưới, chúng ta có thể thấy ngày và thời gian phản hồi.

Tiếp theo, chúng ta có thể thấy loại nội dung mà máy chủ đang gửi lại cho máy khách. Trong này text/html.

Sau đó, chúng ta có thể thấy mã HTML hoặc Tài liệu HTML đại diện cho trang chủ của www.microsoft.com. Tất nhiên, mã HTML thực tế dài hơn nhiều.

Bây giờ, khi trình duyệt đọc tài liệu HTML này, nó sẽ xây dựng cái mà chúng tôi gọi là DOM (Mô hình đối tượng tài liệu) . Đừng để cái tên ưa thích này làm bạn sợ. Đây là mô hình đại diện cho các đối tượng hoặc thành phần trong tài liệu HTML của chúng tôi.

Những yếu tố này là gì? Tất cả các khối xây dựng của trang của chúng tôi như đoạn văn bản, hình ảnh, liên kết và các nội dung khác. Bạn sẽ thấy chúng hoạt động trong phần tiếp theo.

Bây giờ, khi trình duyệt đang đọc tài liệu HTML này được trả về từ máy chủ, nó sẽ phát hiện ra các tham chiếu đến các tài nguyên khác trong tài liệu này như hình ảnh, phông chữ và những thứ khác.

Mỗi tài nguyên này có một địa chỉ hoặc một URL. Vì vậy, đối với mỗi tài nguyên, trình duyệt sẽ gửi một yêu cầu HTTP riêng đến máy chủ để tìm nạp tài nguyên đó.

Trình duyệt gửi yêu cầu HTTP đến máy chủ để lấy tài nguyên đó

Nhiều yêu cầu HTTP trong số này được gửi song song, vì vậy chúng tôi có thể xem trang nhanh nhất có thể.

Khi trình duyệt có tất cả các tài nguyên cần thiết, nó sẽ hiển thị tài liệu HTML.

Trình duyệt hiển thị tài liệu HTML

Kết xuất một tài liệu HTML có nghĩa là hiển thị nó. Đó là một thuật ngữ kỹ thuật ưa thích mà chúng tôi sử dụng thường xuyên.

Vì vậy, tóm lại, trình duyệt của chúng tôi gửi yêu cầu HTTP đến máy chủ và nhận được phản hồi HTTP. Phản hồi HTTP này chứa một tài liệu HTML.

Máy khách gửi yêu cầu HTTP đến máy chủ và nhận được phản hồi HTTP chứa tài liệu HTML

Trình duyệt đọc tài liệu HTML đó để xây dựng DOM (Mô hình đối tượng tài liệu) và hiển thị trang.

Trình duyệt đọc tài liệu HTML để xây dựng DOM

Trong phần tiếp theo, tôi sẽ chỉ cho bạn tất cả các bước này trong thực tế.

Cách kiểm tra các yêu cầu và phản hồi HTTP

Bây giờ, hãy xem hoạt động của các yêu cầu và phản hồi HTTP.

Vì vậy, hãy mở Chrome và truy cập google.com.

Trang chủ Google

Bây giờ, chúng ta cần truy cập Chrome DevTools. Đây là một công cụ rất mạnh mà các lập trình viên frontend hay sử dụng.

Nhấp chuột phải, sau đó chọn Kiểm tra phần tử.

Nhấp chuột phải vào trang chủ Google để có tùy chọn thả xuống kiểm tra phần tử

Bây giờ, đây là các công cụ dành cho nhà phát triển. Lần đầu tiên bạn nhìn thấy nó, nó có vẻ hơi đáng sợ. Nhưng tin tôi đi, những công cụ này dễ sử dụng hơn nhiều so với bạn nghĩ.

Thông qua sổ tay này, bạn sẽ tìm hiểu thêm về DevTools.

Vì vậy, ở đây chúng tôi có một vài tab khác nhau:

• yếu tố
• Bảng điều khiển
• nguồn
• Mạng
• Hiệu suất

Trong bản trình diễn này, chúng tôi sẽ chuyển đến Networktab để có thể kiểm tra lưu lượng truy cập Mạng đến và từ google.com.

Bây giờ, theo mặc định, Công cụ dành cho nhà phát triển được cố định ở cuối màn hình. Chúng ta có thể gắn nó ở bên trái, bên phải hoặc bỏ gắn nó dưới dạng một cửa sổ riêng biệt.

Vì vậy, ở đây chúng ta có thể gắn nó vào phía bên trái như thế này:

Docking Dev Tools ở phía bên trái

Rất nhiều nhà phát triển giao diện người dùng thích cách bố trí này.

DevTools neo ở bên trái

Vì vậy, bạn có thể muốn đặt DevTools ở bên trái và đặt trang web ở bên phải.

Trong bản trình diễn này, tôi sẽ đặt nó dưới dạng một cửa sổ riêng biệt để chúng ta có nhiều không gian hơn để làm việc.

Vì vậy, hãy mở khóa nó:

Gỡ bỏ DevTools

Bây giờ, chúng ta cần làm mới trang web của mình.

DevTools đang hiển thị tab Thành phần

Bây giờ, quay lại DevTools.

DevTools hiển thị tab Mạng

Đây là các yêu cầu HTTP được gửi từ trình duyệt của chúng tôi đến google.com.

Như bạn có thể thấy, có tổng số 45yêu cầu. Đây là lượng dữ liệu được truyền qua mạng.

DevTools hiển thị tổng số yêu cầu

Vì vậy, trong trường hợp này, chỉ hơn 94kb.

Bây giờ, hãy xem mục đầu tiên trong danh sách này.

Mục đầu tiên trong danh sách Mạng trong DevTools

Đây là yêu cầu HTTP đầu tiên mà Chrome gửi tới google.com. Như bạn có thể thấy, với yêu cầu này, trình duyệt muốn một GETvà documentyêu statuscầu này 200có nghĩa là OK.

Ở đây, chúng ta có thể thấy lượng dữ liệu được truyền qua mạng cho yêu cầu này và thời gian để nhận được phản hồi.

Lượng dữ liệu được truyền qua mạng cho một yêu cầu được hiển thị trong DevTools

Nếu chúng tôi nhấp vào yêu cầu này, chúng tôi có thể xem thêm chi tiết về nó.

Thêm chi tiết về yêu cầu hiển thị Tiêu đề

Vì vậy, ở đây trên tab tiêu đề, chúng ta có thể thấy tất cả các tiêu đề của yêu cầu và phản hồi của mình.

Tất cả các tiêu đề của yêu cầu của chúng tôi

Dưới đây là một số tiêu đề chung, như:

• URL yêu cầu
• Phương thức yêu cầu đó làGET
• Mã trạng thái là 200
• Địa chỉ từ xa. Đây là biểu diễn số củagoogle.com

Các tiêu đề chung được hiển thị như URL yêu cầu, Phương thức yêu cầu, Mã trạng thái và Địa chỉ từ xa

Xuống bên dưới, chúng ta có thể thấy Tiêu đề phản hồi. Có nhiều tiêu đề ở đây, nhưng nhìn chung bạn không phải lo lắng về chúng. Ví dụ, hãy xem content-type. Chúng ta đã nói về điều này trong phần trước.

Tiêu đề phản hồi - Loại nội dung

Loại phản hồi này là text/html. Bên dưới đó, chúng tôi có ngày và thời gian trả lời.

Bây giờ, nếu bạn nhấp vào tab Xem trước, bạn có thể xem bản xem trước của tài liệu HTML được trả về từ máy chủ.

Tab xem trước hiển thị trang chủ của Google

Đây là trang chủ của Google.

Tab xem trước hiển thị trang chủ của Google

Bây giờ, trong tài liệu HTML này, chúng tôi có các tham chiếu đến các tài nguyên khác như Hình ảnh, Phông chữ, v.v.

Vì vậy, tất cả các yêu cầu tiếp theo này được gửi để tải xuống các tài nguyên đó.

Yêu cầu trong tab mạng

Ngay bên dưới yêu cầu đầu tiên, chúng tôi có yêu cầu tải xuống tệp png hoặc tệp hình ảnh.

Một yêu cầu trong tab mạng để tải xuống png

Chúng ta có thể dễ dàng lọc danh sách này. Vì vậy, hãy nhấp vào biểu tượng bộ lọc ở đây:

Biểu tượng bộ lọc trên tab mạng

Theo mặc định, bạn sẽ thấy tất cả các yêu cầu. Nhưng chúng tôi có thể lọc theo loại yêu cầu.

Ví dụ: chúng tôi có thể chọn Docđể xem các yêu cầu tải xuống tài liệu HTML. Hoặc fontsđể xem các yêu cầu đã được gửi để tải xuống phông chữ.

Thanh menu để lọc theo Img, Doc, Phông chữ, v.v. để xem các yêu cầu đã được gửi để tải xuống phông chữ

Tiếp theo, tôi sẽ chỉ cho bạn cách tạo tài liệu HTML đầu tiên của mình.

Khái niệm cơ bản về HTML – Cách tạo tài liệu HTML

Trên màn hình của bạn, nhấp chuột phải và tạo một thư mục mới.

Thư mục mới trên Desktop

Tôi sẽ gọi nó là HTML, nhưng bạn có thể gọi nó là gì cũng được.

Đã đổi tên thư mục mới thành HTML

Bây giờ, hãy quay lại VS Code và mở bảng Explorer. Sau đó, chúng tôi đi đến Mở thư mục và mở thư mục mà bạn vừa tạo.

Mở thư mục HTML trong Mã VS

Bây giờ, thư mục này hiện đang trống, vì vậy hãy thêm một tệp mới vào đây có tên index.html:

Thêm tệp index.html vào thư mục HTML trong Mã VS

Như tôi đã nói với bạn trước đây, index.htmlthường đại diện cho trang chủ của các trang web. Vì vậy, chúng ta hãy đi với điều đó.

Index.html trống trên Mã VS

Điều đầu tiên chúng ta cần làm ở đây là nói với trình duyệt rằng đây là một HTML5tài liệu. Vì vậy, chúng tôi gõ

<!DOCTYPE html>

Nhập DOCTYPE html trong tệp index.html

Với dòng mã này, bạn đang nói với trình duyệt rằng đây là tài liệu HTML5. Dòng mã này ở đây được gọi là Tuyên bố DocType. Trong các phiên bản trước của HTML, Tuyên bố DocType của chúng tôi thực sự dài và lộn xộn, nhưng HTML5 đã giải quyết được vấn đề này.

Bây giờ, tất cả những gì chúng ta cần gõ là <!DOCTYPE html>.

Nhân tiện, HTML không phải là ngôn ngữ phân biệt chữ hoa chữ thường. Điều này có nghĩa là nó không nhạy cảm với chữ hoa hoặc chữ thường.

Nhưng nói một cách thông thường, chúng tôi gõ mọi thứ bằng chữ thường, ngoại trừ <!DOCTYPE html>. Đây chỉ là một quy ước. Chúng tôi có thể nhập nó dưới dạng <!doctype html>và nó sẽ hoạt động hoàn toàn tốt, nhưng cách tốt nhất là nhập <!DOCTYPE html>.

Ngay sau đó, chúng ta cần sử dụng các phần tử HTML của mình để xác định cấu trúc của trang web này. Phần tử đầu tiên chúng ta sẽ sử dụng là phần tử html.

Vì vậy, chúng tôi gõ htmlvà nhấn TAB hoặc ENTER.

Đã thêm thẻ mở và đóng html

<!DOCTYPE html>
<html></html>

Một lần nữa, Mã VS đã tạo đoạn mã này cho chúng tôi.

Vì vậy, những gì chúng ta có ở bên trái là thẻ mở, <html>và những gì chúng ta có ở bên phải là thẻ đóng </html>. Vì vậy, hầu hết các phần tử HTML đều có thẻ mở và thẻ đóng. Nhưng có những trường hợp ngoại lệ mà tôi sẽ chỉ cho bạn sau trong hướng dẫn này.

Bây giờ, bên trong phần tử này, chúng ta sẽ thêm các phần tử bổ sung. Vì tôi không muốn gõ mọi thứ trong một dòng nên tôi sẽ nhấn ENTER.

<!DOCTYPE html>
<html>

</html>

Đã thêm một dòng mới giữa các thẻ html

Bây giờ ở đây, chúng ta sẽ thêm hai yếu tố: HEAD và BODY.

Vì vậy, một lần nữa chúng tôi gõ <head>và nhấn TAB:

<!DOCTYPE html>
<html>
    <head></head>
</html>

Đã thêm các thẻ đầu

Và sau đó CƠ THỂ:

<!DOCTYPE html>
<html>
    <head></head>
    <body>

    </body>
</html>

Đã thêm các thẻ cơ thể

Chúng tôi sử dụng phần tử HEAD để cung cấp cho trình duyệt thông tin về trang này. Ví dụ, ở đây chúng ta có thể sử dụng titlephần tử để chỉ định tiêu đề của trang này xuất hiện trên trình duyệt.

Phần tử tiêu đề chỉ định tiêu đề của một trang trên trình duyệt

Bây giờ, hãy gõ My First Web Page.

<!DOCTYPE html>
<html>
    <head>
        <title>My First Web Page</title>
    </head>
    <body>

    </body>
</html>

Đã thêm tiêu đề Trang web đầu tiên của tôi

Lưu các thay đổi bằng cách nhấn CTRL + Strên Windows hoặc Command + Strên Mac.

Trước khi tiếp tục, hãy nhấp chuột phải vào một nơi nào đó và truy cập open with live server.

Nhấp chuột phải và chọn Mở bằng Máy chủ Trực tiếp trên Mã VS

Vì vậy, chúng tôi sẽ mở trang này bằng Máy chủ phát triển mà chúng tôi vừa cài đặt.

Trang trống trên trình duyệt có tiêu đề Trang web đầu tiên của tôi

Hãy xem. Trang của chúng tôi hiện đang trống vì chúng tôi chưa thêm bất kỳ phần tử nào bên trong trang này.

Ở đây, chúng ta có thể thấy tiêu đề mà chúng ta vừa gõ, My First Web Page:

Tiêu đề trang web đầu tiên của tôi trên trình duyệt

Bây giờ hãy nhìn vào URL hoặc địa chỉ của trang này:

URL cục bộ của trang

Chúng tôi có 127.0.0.1. Số này hoặc địa chỉ IP này đại diện cho máy tính cục bộ. Nó được biết đến trên toàn cầu. Vì vậy, mọi người đều biết 127.0.0.1tài liệu tham khảo máy tính hiện tại.

Sau đó, chúng ta có dấu hai chấm :và sau đó chúng ta có 5500. Đây là Số cổng mà máy chủ web của chúng tôi đang lắng nghe.

Vì vậy, máy chủ web của chúng tôi đang chờ các yêu cầu HTTP trên cổng này.

URL cục bộ 127.0.0.1:5500/index.html hiển thị cổng 5500

Sau đó, chúng tôi có dấu gạch chéo lên /, theo sau là tên tệp của chúng tôi, index.html.

Bây giờ, quay lại Mã VS.

<!DOCTYPE html>
<html>
    <head>
        <title>My First Web Page</title>
    </head>
    <body>


    </body>
</html>

Tệp index.html có thẻ nội dung trống và tiêu đề Trang web đầu tiên của tôi

Bên trong bodyphần tử, chúng tôi sẽ thêm các phần tử sẽ xuất hiện trên trang của chúng tôi. Vì vậy, giả sử bạn muốn hiển thị một tweet. Bạn cần những yếu tố nào ở đây? Một hình ảnh và một số yếu tố văn bản.

Vì vậy, chúng tôi gõ img(viết tắt của hình ảnh) và sau đó nhấn TAB.

Đây là yếu tố hình ảnh của chúng tôi:

<!DOCTYPE html>
<html>
    <head>
        <title>My First Web Page</title>
    </head>
    <body>
        <img src="" alt="">
    </body>
</html>

Thẻ body với thẻ hình ảnh bên trong

Bây giờ, phần tử hình ảnh này khác với các phần tử khác mà chúng ta đã tạo cho đến nay. Bạn có thể cho biết sự khác biệt?

<img src="" alt="">

Có hai sự khác biệt ở đây. Điểm khác biệt đầu tiên là chúng ta không có thẻ đóng. Chúng tôi chỉ có một thẻ mở, bởi vì phần tử hình ảnh không thể có bất kỳ phần tử con nào.

Bây giờ, trong các phiên bản HTML trước đây, chúng tôi thường thêm dấu gạch chéo lên phía trước.

<img src="" alt="" />

Điều này đại diện cho một thẻ tự đóng. Tuy nhiên, chúng tôi không phải làm điều này trong HTML5, vì vậy tôi sẽ giữ mã đơn giản hơn.

<img src="" alt="">

Bây giờ, ở đây chúng ta có hai thuộc tính, nguồn srcvà văn bản thay thế alt. Với thuộc tính này, chúng tôi có thể cung cấp thông tin bổ sung về một phần tử. Vì vậy, chúng tôi sử dụng srcphần tử nguồn để chỉ định đường dẫn đến hình ảnh của chúng tôi.

Hãy mở bảng thám hiểm một lần nữa bằng cách nhấn command + Btrên Mac hoặc Control + Btrên Windows.

Bảng thám hiểm của Mã VS

Ở đây, tôi sẽ tạo một thư mục mới có tên là images.

Tạo một thư mục hình ảnh trên bảng Explorer

Đối với bản demo này, tôi sẽ sử dụng hình ảnh của riêng mình mà tôi đã tải xuống từ www.unsplash.com. Nhưng bạn có thể sử dụng bất kỳ hình ảnh nào bạn muốn.

Bây giờ, đây là hình ảnh của tôi. Tôi sẽ kéo và thả nó vào thư mục hình ảnh.

Hình ảnh của tôi từ Bapt được kéo và thả vào thư mục hình ảnh

Trong srcindex.html, chúng ta sẽ gõimage/unsplash-image.jpg

<img src="image/unsplash-image.jpg" alt="">

altlà viết tắt của văn bản thay thế. Chúng ta sử dụng thuộc tính này để cung cấp cho trình duyệt một số văn bản để hiển thị trong trường hợp không hiển thị được hình ảnh. Chúng ta sẽ nói về điều này chi tiết hơn sau này.

Vì vậy, bây giờ, tôi sẽ xóa thuộc tính này.

<!DOCTYPE html>
<html>
    <head>
        <title>My First Web Page</title>
    </head>
    <body>
        <img src="Images/altumcode.jpg">
    </body>
</html>

Thẻ hình ảnh có thuộc tính alt đã bị xóa

Bây giờ, sau hình ảnh, chúng ta sẽ thêm một số thành phần văn bản. Chúng tôi nhập p, viết tắt của đoạn văn và tại đây bạn có thể nhập mã điều khiển Twitter(X) của tôi.

<!DOCTYPE html>
<html>
    <head>
        <title>My First Web Page</title>
    </head>
    <body>
        <img src="Images/altumcode.jpg">
        <p>@KarlgustaAnnoh</p>
    </body>
</html>

Thẻ đoạn có xử lý Twitter của tôi

Sau đó, chúng ta sẽ thêm một thành phần văn bản khác. Tại đây, chúng ta có thể nhập nội dung tweet của mình.

<!DOCTYPE html>
<html>
    <head>
        <title>My First Web Page</title>
    </head>
    <body>
        <img src="Images/altumcode.jpg">
        <p>@KarlgustaAnnoh</p>
        <p>I love to teach you HTML!</p>
    </body>
</html>

Thẻ đoạn chứa nội dung Tweet của tôi

Hoàn hảo! Lưu các thay đổi.

Quay lại trình duyệt, trang của chúng tôi được làm mới tự động.

Một bức ảnh của hình ảnh máy tính của tôi trên trình duyệt

Đây là một trong những nét đẹp của tiện ích mở rộng máy chủ trực tiếp. Chúng tôi không phải làm mới trang theo cách thủ công mỗi khi thực hiện thay đổi.

Bây giờ, nhìn vào những gì chúng ta có ở đây. Chúng tôi có hình ảnh của tôi và ngay bên dưới chúng tôi có hai thành phần văn bản. Hãy xem. Thật không may, chúng không được nhìn thấy rõ ràng.

Hình ảnh của tôi và các yếu tố văn bản của tôi trên trình duyệt

Điều này không giống như một Tweet vì chúng tôi chưa áp dụng CSS. Như tôi đã nói với bạn trước đây, chúng tôi sử dụng HTML để xác định cấu trúc hoặc các khối xây dựng của các trang web của chúng tôi.

Trong phần tiếp theo, tôi sẽ chỉ cho bạn cách áp dụng CSS để trang của chúng ta trông giống như một tweet thực sự.

Khái niệm cơ bản về CSS

Bây giờ, hãy xem cách chúng ta có thể sử dụng CSS để cải thiện giao diện của trang này.

Nhìn vào yếu tố đầu của chúng tôi:

<head>
    <title>My First Web Page</title>
</head>

Thẻ đầu của tôi chỉ có tiêu đề Trang web đầu tiên của tôi

Hiện tại, chúng tôi có một phần tử duy nhất bên trong phần tử đầu. Đó là yếu tố tiêu đề của chúng tôi.

Bây giờ, sau tiêu đề, chúng ta sẽ thêm một thành phần khác có tên là style. Đây là nơi chúng ta sẽ viết mã CSS của mình.

Vì vậy, ở giữa các thẻ kiểu, chúng ta sẽ viết một loạt các quy tắc CSS.

<!DOCTYPE html>
<html>
    <head>
        <title>My First Web Page</title>
    </head>
    <body>
        <img src="Images/altumcode.jpg">
        <p>@KarlgustaAnnoh</p>
        <p>I love to teach you HTML!</p>
    </body>
</html>

Thẻ hình ảnh của chúng tôi với nguồn hình ảnh của chúng tôi trong Mã VS

Đầu tiên, chúng ta sẽ làm việc với hình ảnh này. Hình ảnh của chúng ta hiện nay quá lớn.

Hình ảnh của chúng tôi trên trình duyệt quá lớn

Vì vậy, hãy làm cho nó nhỏ hơn một chút.

Quay lại Mã VS. Bên trong các thẻ phong cách, chúng ta sẽ gõ như sau:

<style>
    img {
    
    }
</style>

imgtham chiếu yếu tố hình ảnh của chúng tôi. Sau đó, chúng tôi nhập một cặp dấu ngoặc nhọn {}và bên trong chúng tôi viết một hoặc nhiều khai báo CSS. Mỗi khai báo chứa một thuộc tính và một giá trị.

Ở đây, chúng ta có thể đặt thuộc tính chiều rộng thành 100px.

<style>
    img {
        width: 100px;
    }
</style>

Vì vậy, chúng tôi nhập thuộc tính, thêm dấu chấm phẩy và sau đó nhập giá trị. Sau đó, chúng tôi kết thúc dòng này bằng dấu chấm phẩy để chúng tôi có thể viết nhiều khai báo CSS.

width: 100px;

Đây là giao diện của Mã VS:

<!DOCTYPE html>
<html>
    <head>
        <title>My First Web Page</title>
        <style>
            img {
                width: 100px;
            }
        </style>
    </head>
    <body>
        <img src="Images/altumcode.jpg">
        <p>@KarlgustaAnnoh</p>
        <p>I love to teach you HTML!</p>
    </body>
<html>

Thẻ phong cách của chúng tôi với phong cách hình ảnh

Bây giờ, hãy lưu các thay đổi.

Quay lại trình duyệt, hình ảnh của chúng tôi trông nhỏ hơn. Nó tốt hơn rất nhiều.

Hình ảnh của chúng tôi trên trình duyệt trông nhỏ hơn

Nhưng nhìn vào các cạnh. Các cạnh rất sắc nét. Tôi muốn làm cho chúng tròn một chút để chúng có vẻ mềm mại hơn.

Quay lại quy tắc của chúng tôi - ở đây chúng tôi sẽ đặt bán kính đường viền thành 10px.

<style>
    img {
        width: 100px;
        border-radius: 10px;
    }
</style>

Đừng lo lắng về việc ghi nhớ bất kỳ thuộc tính nào trong số này. Chúng ta sẽ xem xét chúng nhiều lần trong suốt hướng dẫn. Trong phần này, tôi chỉ muốn bạn hiểu được việc sử dụng CSS là như thế nào.

<!DOCTYPE html>
<html>
    <head>
        <title>My First Web Page</title>
        <style>
            img {
                width: 100px;
                border-radius: 10px;
            }
        </style>
    </head>
    <body>
        <img src="Images/altumcode.jpg">
        <p>@KarlgustaAnnoh</p>
        <p>I love to teach you HTML!</p>
    </body>
</html>

Bán kính đường viền 10px được thêm vào kiểu dáng của chúng tôi trên Mã VS

Bây giờ hãy lưu các thay đổi.

Nhìn kìa – các cạnh tròn và trông mềm mại hơn. Bây giờ, hãy để tôi chỉ cho bạn một thủ thuật.

<!DOCTYPE html>
<html>
    <head>
        <title>My First Web Page</title>
        <style>
            img {
                width: 100px;
                border-radius: 50px;
            }
        </style>
    </head>
    <body>
        <img src="Images/altumcode.jpg">
        <p>@KarlgustaAnnoh</p>
        <p>I love to teach you HTML!</p>
    </body>
</html>

Đã thêm bán kính đường viền 50px vào kiểu dáng của chúng tôi

Nếu với bán kính đường viền, thêm một giá trị bằng một nửa chiều rộng, chúng ta sẽ có được một hình ảnh tròn. Vì vậy, tôi sẽ đặt bán kính đường viền thành 50px bằng một nửa chiều rộng của chúng ta.

<style>
    img {
        width: 100px;
        border-radius: 50px;
    }
</style>

Đây là giao diện của Mã VS:

<!DOCTYPE html>
<html>
    <head>
        <title>My First Web Page</title>
        <style>
            img {
                width: 100px;
                border-radius: 50px;
            }
        </style>
    </head>
    <body>
        <img src="Images/altumcode.jpg">
        <p>@KarlgustaAnnoh</p>
        <p>I love to teach you HTML!</p>
    </body>
</html>

Kiểu dáng hình ảnh trên Mã VS

Và đây là kết quả:

Hình ảnh sau khi được tạo kiểu trên trình duyệt

Điều đó tốt hơn rất nhiều.

Bây giờ các yếu tố của chúng tôi được xếp chồng lên nhau theo chiều dọc. Nhưng tôi muốn hình ảnh được đẩy sang bên trái.

Vì vậy, hãy đặt thuộc tính float thành left.

<style>
    img {
        width: 100px;
        border-radius: 50px;
        float: left;
    }
</style>

Thao tác này sẽ đẩy phần tử hình ảnh sang bên trái phần tử văn bản của chúng ta. Hãy xem:

Hình ảnh khi nó được thả nổi bên trái trên trình duyệt

Điều đó tốt hơn rất nhiều, nhưng hình ảnh của chúng tôi rất gần với văn bản. Tôi muốn thêm một số không gian sau hình ảnh. Ở đây chúng ta sẽ sử dụng một thuộc tính khác gọi là margin-right. Chúng ta có thể đặt nó thành 10px.

<style>
    img {
        width: 100px;
        border-radius: 50px;
        float: left;
        margin-right: 10px;
    }
</style>

Đây là giao diện của Mã VS:

<!DOCTYPE html>
<html>
    <head>
        <title>My First Web Page</title>
        <style>
            img {
                width: 100px;
                border-radius: 50px;
                float: left;
                margin-right: 10px;
            }
        </style>
    </head>
    <body>
        <img src="Images/altumcode.jpg">
        <p>@KarlgustaAnnoh</p>
        <p>I love to teach you HTML!</p>
    </body>
</html>

Mã trong Mã VS với kiểu dáng

Lưu các thay đổi.

Hình ảnh trong trình duyệt với kiểu dáng được áp dụng

Điều đó tốt hơn rất nhiều. Bây giờ, hãy in đậm tên người dùng. Chúng tôi sẽ lặp lại quá trình này một lần nữa.

Lần này, chúng ta sẽ áp dụng một quy tắc cho thành phần đoạn văn của mình. Đặt thuộc font-weighttính thành in đậm.

<style>
    img {
        width: 100px;
        border-radius: 50px;
        float: left;
        margin-right: 10px;
    }

    p {
        font-weight: bold;
    }
</style>

Đây là mã trong Mã VS:

<!DOCTYPE html>
<html>
    <head>
        <title>My First Web Page</title>
        <style>
            img {
                width: 100px;
                border-radius: 50px;
                float:left;
                margin-right: 10px;
            }
            
            p {
                font-weight: bold;
            }
        </style>
    </head>
    <body>
        <img src="Images/altumcode.jpg">
        <p>@KarlgustaAnnoh</p>
        <p>I love to teach you HTML!</p>
    </body>
<html>

Mã trên Mã VS với kiểu dáng đoạn văn được in đậm

Hãy xem.

Trình duyệt đang hiển thị kiểu được áp dụng với văn bản được in đậm

Xem những gì đã xảy ra? Cả hai yếu tố văn bản của chúng tôi đều được in đậm. Nhưng, nếu bạn chỉ muốn áp dụng kiểu này cho tên người dùng thì sao?

Vâng, chúng ta phải tách hai yếu tố đoạn này.

<body>
    <p>@KarlgustaAnnoh</p>
    <p>I love to teach you HTML!</p>
</body>

Vì vậy, tôi sẽ cung cấp cho phần tử đầu tiên một thuộc tính có tên classnhư sau:

<body>
    <p class="">@KarlgustaAnnoh</p>
    <p>I love to teach you HTML!</p>
</body>

Lớp là viết tắt của từ phân loại và chúng ta có thể sử dụng thuộc tính này để đặt phần tử này vào trong một lớp khác hoặc một danh mục khác. Cũng giống như các sản phẩm trong siêu thị.

Trong một siêu thị, chúng tôi có các sản phẩm trong các danh mục khác nhau, phải không?

Vì vậy, tôi sẽ đặt phần tử đoạn văn này bên trong một lớp hoặc bên trong một danh mục có tên là username:

<body>
    <p class="username">@KarlgustaAnnoh</p>
    <p>I love to teach you HTML!</p>
</body>

Và sau đó tôi sẽ thay đổi quy tắc này:

<style>
    p {
        font-weight: bold;
    }
</style>

hiện được áp dụng cho tất cả các thành phần đoạn văn – nhưng tôi muốn nó chỉ được áp dụng cho các thành phần đoạn văn có usernamelớp.

Vì vậy, ngay sau khi pchúng tôi gõ p.username:

    p.username {
        font-weight: bold;
    }

Bây giờ, chúng ta cũng có thể loại bỏ pvà quy tắc này sẽ áp dụng cho tất cả các phần tử có usernamelớp, cho dù chúng là phần tử đoạn văn hay các loại phần tử khác.

    .username {
        font-weight: bold;
    }

Bây giờ, lưu các thay đổi.

Đây là giao diện của Mã VS:

<!DOCTYPE html>
<html>
    <head>
        <title>My First Web Page</title>
        <style>
            img{
                width: 100px;
                border-radius: 50px;
                float: left;
                margin-right: 10px;
            }

            .username{
                font-weight: bold;
            }
        </style>
    </head>
    <body>
        <img src="Images/altumcode.jpg">
        <p class="username">@KarlgustaAnnoh</p>
        <p>I love to teach you HTML!</p>
    </body>
</html>

Kiểu dáng tên người dùng in đậm trên Mã VS

Bây giờ, hãy xem.

Tên đăng nhập in đậm trên trình duyệt

Điều đó tốt hơn rất nhiều.

Đây là CSS đang hoạt động. Như bạn thấy, CSS có cú pháp khác với HTML.

Trong suốt phần còn lại của hướng dẫn, bạn sẽ học các ngôn ngữ này một cách chi tiết.

Tiếp theo, tôi sẽ chỉ cho bạn cách định dạng mã của bạn bằng Prettier.

Cách định dạng mã của bạn

Một điều bạn cần biết về các trình duyệt là chúng bỏ qua các khoảng trắng trong mã HTML và CSS.

Ví dụ: tôi có thể đặt tất cả các thành phần này trên một dòng và mọi thứ vẫn hoạt động.

Tôi se cho bạn xem.

<!DOCTYPE html><html><head><title>My First Web Page</title><style>img{width: 100px;border-radius: 50px;float: left;margin-right: 10px;}.username{font-weight: bold;}</style></head><body><img src="Images/altumcode.jpg"><p class="username">@KarlgustaAnnoh</p><p>I love to teach you HTML!</p></body></html>

Tất cả các yếu tố trong một dòng trong Mã VS

Bây giờ, lưu các thay đổi.

Quay lại trình duyệt, chúng tôi có kết quả như trước:

Trình duyệt hiển thị kết quả tương tự

Bởi vì các trình duyệt không quan tâm đến cách chúng tôi định dạng mã của mình. Tuy nhiên, định dạng là rất quan trọng khi đọc và duy trì mã. Chúng tôi muốn mã của mình đẹp và được định dạng hoàn hảo giống như một bài báo.

Đây là nơi chúng tôi có thể sử dụng plugin Prettier để giúp chúng tôi.

Với Prettier, chúng ta có thể định dạng mã của mình một cách nhất quán. Điều này cực kỳ quan trọng khi bạn là thành viên của một nhóm, bởi vì những người khác nhau có những cách định dạng mã khác nhau. Nhưng nếu mọi người trong nhóm sử dụng plugin Prettier, thì mã sẽ được định dạng nhất quán.

Vì vậy, hãy để tôi chỉ cho bạn cách sử dụng Prettier.

Ở trên cùng, bạn vào menu xem và nhấp vào phím tắt cho bảng lệnh. Trên máy Mac, đó là Shift + Command + PTrên Windows, đó là Shift + Control + P.

Shift + Control + P để mở Bảng lệnh trên Mã VS

Hãy mở bảng lệnh. Ở đó chúng tôi tìm kiếm format document. Bấm phím Enter.

Trên bảng lệnh, chúng tôi tìm kiếm tài liệu định dạng

ĐƯỢC RỒI. Bây giờ, Prettier đã định dạng mã của tôi, vì vậy không có phần tử nào trong số đó nằm trên cùng một dòng.

<!DOCTYPE html>
<html>
    <head>
        <title>My First Web Page</title>
        <style>
            img {
                width: 100px;
                border-radius: 50px;
                float: left;
                margin-right: 10px;
            }
            .username {
                font-weight: bold;
            }
        </style>
    </head>
    <body>
        <img src="Images/altumcode.jpg"/>
        <p class="username">@KarlgustaAnnoh</p>
        <p>I love to teach you HTML!</p>
    </body>
</html>

Prettier đã format code trên VS Code

Điều này là tốt hơn rất nhiều. Nhưng, hãy để tôi chỉ cho bạn một mẹo!

Chúng tôi không muốn định dạng mã của mình mỗi khi thực hiện thay đổi. Vì vậy, chúng tôi có thể định cấu hình Mã VS để tự động định dạng mã ngay khi chúng tôi lưu các thay đổi.

Vì vậy, ở trên cùng, hãy chuyển đến menu mã, sau đó là Tùy chọn, rồi Cài đặt.

Cài đặt mã VS

Ở đây, tìm kiếm format on save.

Trên trang cài đặt, chúng tôi tìm kiếm định dạng khi lưu

Đây là cài đặt:

Định dạng trên Lưu cài đặt

Hãy kích hoạt cài đặt này.

Kích hoạt cài đặt Định dạng khi Lưu

Bây giờ, mỗi khi chúng tôi lưu các thay đổi, Mã VS sẽ tự động định dạng mã của chúng tôi, sử dụng Prettier.

Cách kiểm tra trang bằng DevTools

Trước đó, chúng ta đã nói về DOM (Mô hình đối tượng tài liệu).

Mô hình đối tượng tài liệu

Tôi đã nói với bạn rằng khi trình duyệt đọc tài liệu HTML được trả về từ máy chủ, nó sẽ xây dựng Mô hình Đối tượng Tài liệu. Bây giờ, hãy để tôi chỉ cho bạn Mô hình Đối tượng Tài liệu này đang hoạt động.

Trang index.html đã mở trên trình duyệt

Một lần nữa, chúng ta sẽ sử dụng Chrome DevTools.

Vì vậy, hãy mở DevTools.

Nhấp chuột phải vào trang sau đó nhấp vào kiểm tra các yếu tố trên Chrome

Trong phần này, chúng ta sẽ xem xét tab elements.

Những gì chúng tôi có ở đây ở phía bên trái là Mô hình đối tượng tài liệu của chúng tôi.

Ở phía bên trái của tab thành phần, chúng ta có Mô hình đối tượng tài liệu

Đây là những phần tử giống như chúng ta đã tạo trước đó trong hướng dẫn.

Chúng ta có phần tử HTML, HEAD, BODY, v.v. Tuy nhiên, chúng tôi có một số yếu tố bổ sung được đưa vào bởi Live Server:

Các phần tử bổ sung được Live Server đưa vào trong tab phần tử

Đừng lo lắng về những điều này. Chúng hoàn toàn được sử dụng bởi Live Server, vì vậy nó sẽ tự động tải lại trang của chúng tôi.

Bây giờ, chúng ta có thể di chuột qua bất kỳ phần tử nào trong số này và bạn có thể thấy các phần tử được đánh dấu trên màn hình.

Đã di chuột và nhấp vào thành phần hình ảnh trên tab thành phần

Chúng ta có thể nhấp vào một phần tử và ở bên phải, chúng ta có thể thấy các kiểu được áp dụng cho phần tử này.

Ở phía bên phải, các kiểu được áp dụng cho phần tử

Vì vậy, chúng tôi nhận được các kiểu này được xác định cho thành phần hình ảnh. CHIỀU RỘNG, BÁN KÍNH BIÊN GIỚI, v.v.

Chúng tôi có thể bật hoặc tắt các kiểu này.

Các kiểu được xác định cho phần tử hình ảnh

Ví dụ: chúng ta có thể vô hiệu hóa thuộc tính WIDTH và bây giờ, hình ảnh của chúng ta lớn.

Vô hiệu hóa thuộc tính chiều rộng trên tab kiểu

Sau đó chúng ta có thể mang nó trở lại.

Bật lại phần tử chiều rộng

Chúng ta cũng có thể thay đổi giá trị của nó. Vì vậy, chúng ta có thể đặt nó thành, giả sử, 50px. Bây giờ, hình ảnh của chúng tôi nhỏ hơn.

Thay đổi kích thước của hình ảnh thành 50px trên Chrome DevTools

Rất nhiều nhà phát triển giao diện người dùng sử dụng các phong cách này để có được giao diện cụ thể mà họ muốn. Sau khi họ tìm ra các kiểu chính xác và giá trị của chúng, thì họ sẽ áp dụng chúng vào mã.

Bây giờ, một điều nữa.

Ở bên phải, chúng ta có thể thấy nơi các kiểu đã được áp dụng và số dòng

Ở đây, chúng ta có thể thấy những phong cách này đã được áp dụng ở đâu.

Vì vậy, trong index.html trên dòng 6, chúng ta có thể nhấp vào liên kết này để đưa chúng ta đến dòng mã chính xác mà chúng ta đã viết kiểu đó.

Khi chúng tôi nhấp vào nó, index.html, nó sẽ đưa chúng tôi đến dòng mã chính xác mà chúng tôi đã viết kiểu đó trên DevTools

Bây giờ, chúng tôi hiện đang ở trên Sourcestab.

Trên tab Nguồn

ElementsChúng tôi cũng có thể quay lại tab và kiểm tra các yếu tố khác.

Tab Thành phần để kiểm tra các thành phần khác

Vì vậy, đây là điều cơ bản để kiểm tra các phần tử bằng DevTools. Chúng ta sẽ nói về điều này chi tiết hơn trong tương lai.

Cách xác thực các trang web

Điều cuối cùng chúng ta sẽ đề cập trong phần này là xác thực.

Vì vậy, khi chúng tôi viết mã, chúng tôi có thể gặp sự cố. Nếu chúng tôi có lỗi đánh máy trong mã hoặc không sử dụng đúng cú pháp hoặc ngữ pháp, các trang web của chúng tôi có thể trông không như mong đợi.

Trong những tình huống này, chúng tôi có thể sử dụng trình xác thực để xác định các lỗi tiềm ẩn trong mã của mình.

Hiện tại, chúng tôi không gặp sự cố trên trang web này.

Trang index.html trên Chrome

Tôi thấy nó hoàn toàn ổn – nhưng hãy chạy nó bằng trình xác thực HTML tiêu chuẩn.

Vì vậy, chúng tôi đi đến validator.w3.org.

validator.w3.org

Đây là Dịch vụ xác thực đánh dấu tiêu chuẩn.

validator.w3.org

Chúng tôi có ba phương pháp để xác thực đánh dấu HTML của chúng tôi.

Chúng tôi có thể xác thực bằng một địa chỉ nếu trang web của chúng tôi trực tuyến trên internet, nhưng điều này không hiệu quả với chúng tôi vì trang web của chúng tôi hiện được lưu trữ cục bộ trong máy chủ phát triển của chúng tôi.

Xác thực theo tab địa chỉ

Vì vậy, địa chỉ IP mà chúng ta có ở đây 127.0.0.1là địa chỉ IP cục bộ. Điều này có nghĩa là không ai khác có thể truy cập trang web của chúng tôi.

Địa chỉ IP 127.0.0.1 của trang index.html của chúng tôi được đánh dấu

Chúng tôi có hai phương pháp khác. Chúng ta có thể Validate by File Uploadhoặc by Direct Input.

Hai phương thức còn lại, xác thực bằng Tải lên tệp và bằng Nhập trực tiếp được tô sáng

Trong trường hợp này, tôi sẽ sử dụng Tải lên tệp.

Chọn tùy chọn Xác thực bằng tab Tải lên tệp

Vì vậy, hãy tải index.htmltệp của chúng tôi lên và KIỂM TRA.

Tải lên tệp index.html của chúng tôi và kiểm tra nó

Hãy nhìn xem, chúng tôi có 1 cảnh báo và 2 lỗi.

Kết quả hiển thị 1 cảnh báo và 2 lỗi

Cảnh báo đang nói We haven't added a lang attribute to the html start tag.

Đây là thực hành tốt nhất phổ biến. Nó cho phép chúng tôi cho các công cụ tìm kiếm biết ngôn ngữ của trang web này là gì để chúng có thể hiển thị kết quả tốt hơn.

Điều này là rất dễ dàng để sửa chữa.

Vì vậy, đây là thẻ HTML của chúng tôi trong Mã VS:

<!DOCTYPE html>
<html>
    <head>
        <title>My First Web Page</title>
        <style>
            img {
                width: 100px;
                border-radius: 50px;
                float: left;
                margin-right:10px;
            }
            .username {
                font-weight: bold;
            }
        </style>
    </head>
    <body>
        <img src="Images/altumcode.jpg"/>
        <p class="username">@KarlgustaAnnoh</p>
        <p>I love to teach you HTML!</p>
    </body>
</html>

Thẻ bắt đầu html của chúng tôi không có thuộc tính lang

Chúng tôi sẽ thêm langthuộc tính và đặt nó thành enviết tắt của tiếng Anh.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>My First Web Page</title>
        <style>
            img {
                width: 100px;
                border-radius: 50px;
                float: left;
                margin-right: 10px;
            }
            .username {
                font-weight: bold;
            }
        </style>
    </head>
    <body>
        <img src="Images/altumcode.jpg" />
        <p class="username">@KarlgustaAnnoh</p>
        <p>I love to teach you HTML!</p>
    </body>
</html>

Thẻ bắt đầu html của chúng tôi với thuộc tính lang="en"

Cái gì tiếp theo? Chúng tôi có một lỗi cho biết The character encoding was not declared.

Lỗi trong trình xác thực hiển thị mã hóa ký tự không được khai báo

Đừng lo lắng về điều này. Chúng ta sẽ nói về nó trong phần tiếp theo.

Vì vậy, hãy xem xét lỗi thứ hai.

Lỗi thứ hai cho biết phần tử hình ảnh phải có thuộc tính alt

Nó đang nói rằng An image element must have an alt attribute.

Trước đó, chúng tôi đã có altthuộc tính này. Tôi đã nói với bạn rằng chúng tôi sử dụng thuộc tính alt để cung cấp mô tả cho hình ảnh của mình.

Vì vậy, nếu hình ảnh không thể hiển thị, văn bản thay thế sẽ được hiển thị thay thế.

Một lần nữa, chúng ta sẽ nói về altthuộc tính chi tiết hơn trong tương lai.

Bây giờ, hãy quay lại mã của chúng tôi - và hãy sửa lỗi này.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>My First Web Page</title>
        <style>
        img {
            width: 100px;
            border-radius: 50px;
            float: left;
            margin-right: 10px;
        }
        .username{
            font-weight: bold;
        }
        </style>
    </head>
    <body>
        <img src="Images/altumcode.jpg" />
        <p class="username">@KarlgustaAnnoh</p>
        <p>I love to teach you HTML!</p>
    </body>
</html>

Phần tử hình ảnh của chúng tôi không có thuộc tính alt

Đây là thẻ hình ảnh của chúng tôi. Hãy thêm thuộc alttính. Đối với mô tả, tôi sẽ nói A laptop image.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>My First Web Page</title>
        <style>
            img {
                width: 100px;
                border-radius: 50px;
                float: left;
                margin-right: 10px;
            }
            .username {
            font-weight: bold;
            }
        </style>
    </head>
    <body>
        <img src="Images/altumcode.jpg" alt="A Laptop Image" />
        <p class="username">@KarlgustaAnnoh</p>
        <p>I love to teach you HTML!</p>
    </body>
</html>

Thuộc tính alt trong phần tử hình ảnh của chúng tôi có nội dung là hình ảnh máy tính xách tay

Bây giờ, lưu các thay đổi.

Hãy tải lên lại tập tin.

Tải lên lại tệp index.html trên trình xác thực

và xác nhận nó một lần nữa.

Lỗi hiển thị bảng mã ký tự không được khai báo

Lần này, chúng tôi chỉ có một lỗi duy nhất và một thông báo không thực sự là vấn đề. Điều đó liên quan đến mã hóa ký tự mà chúng ta sẽ nói trong phần tiếp theo. Vì vậy, đây là tất cả về xác thực HTML.

Bây giờ, đối với CSS, chúng tôi có một trình xác thực khác. Vì vậy, chúng tôi đi đến jigsaw.w3.org/css-validator.

Trình xác thực CSS

Bạn không cần phải ghi nhớ điều này. Chỉ cần vào Google và tìm kiếm css validator:

Tìm kiếm trên Trình xác thực CSS của Google

Đây là liên kết đầu tiên:

Liên kết đầu tiên từ kết quả của Google

Vì vậy, chúng tôi có cùng một giao diện.

Dịch vụ xác thực CSS có cùng giao diện với trình xác thực trước đó

Chúng tôi có thể xác thực Mã CSS của mình bằng địa chỉ, bằng cách tải tệp lên hoặc bằng cách nhập trực tiếp.

Bây giờ, trong trường hợp này, chúng tôi đã nhúng tất cả mã CSS vào bên trong phần đánh dấu HTML của mình.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>My First Web Page</title>
        <style>
            img {
                width: 100px;
                border-radius: 50px;
                float: left;
                margin-right: 10px;
            }
            .username {
                font-weight: bold;
            }
        </style>
    </head>
    <body>
        <img src="Images/altumcode.jpg" alt="A laptop image" />
        <p class="username">@KarlgustaAnnoh</p>
        <p>I love to teach you HTML!</p>
    </body>
</html>

CSS của chúng tôi bên trong HTML

Khi các trang web của chúng tôi trở nên phức tạp hơn, chúng tôi muốn tách mã CSS của mình thành các tệp riêng biệt để mã của chúng tôi được tổ chức tốt hơn. Chúng ta sẽ nói về điều này chi tiết hơn trong tương lai.

Hiện tại, tôi sẽ sao chép tất cả mã CSS của chúng ta, sau đó chuyển đến tab thứ ba:

<style>
    img {
        width: 100px;
        border-radius: 50px;
        float: left;
        margin-right: 10px;
    }
    .username {
        font-weight: bold;
    }
</style>

Sao chép CSS bên trong HTML

Dán nó ở đây và xác nhận nó.

Dán nó vào trình xác thực CSS bằng cách sử dụng đầu vào trực tiếp

Chúng tôi không có bất kỳ lỗi nào. Mọi thứ đều hoàn hảo.

Không có lỗi sau khi kiểm tra bằng trình xác thực CSS

Đây là tất cả về xác nhận. Xác nhận là rất quan trọng. Nếu các trang web của bạn không được hiển thị như mong đợi, hãy luôn bắt đầu bằng việc xác thực nhanh, vì điều này thường có thể chỉ cho bạn đi đúng hướng.

Bây giờ, điều đó đưa chúng ta đến cuối phần này. Trong phần tiếp theo, chúng ta sẽ khám phá HTML chi tiết hơn.

Phần đầu

Trước đó trong khóa học, tôi đã nói với bạn rằng chúng tôi sử dụng phần đầu để cung cấp cho các trình duyệt và công cụ tìm kiếm thông tin về một trang web. Vì vậy, hãy khám phá nó chi tiết hơn một chút.

Tôi sẽ bắt đầu với một tài liệu trống:

Làm trống index.html trên Mã VS

Bây giờ, hãy để tôi chỉ cho bạn một thủ thuật hay. Nếu chúng ta nhập một dấu chấm than, rồi nhấn tab, chúng ta sẽ nhận được bản soạn sẵn HTML cơ bản, có nghĩa là một mẫu HTML cơ bản.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE-edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
    
    </body>
</html>

Bản soạn thảo HTML cơ bản trên Mã VS

Ở trên cùng, chúng tôi có khai báo DocType. Bên dưới, chúng ta có phần tử HTML với thuộc tính lang (đây là một phương pháp hay nhất phổ biến). Tiếp theo, chúng ta có phần đầu với một loạt các yếu tố mà chúng ta sẽ nói đến trong giây lát. Tiếp theo là phần cơ thể.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

Đây là một bản tóm tắt HTML rất cơ bản.

Bây giờ, chúng ta có gì trong phần đầu? Chà, chúng tôi có một vài yếu tố meta để cung cấp thông tin về trang web này.

Phần tử meta đầu tiên, <meta charset="UTF-8>", dùng để xác định bộ ký tự.

Bộ ký tự là gì?

Máy tính không hiểu các ký tự như A, B, C, v.v. Họ chỉ hiểu các số được biểu diễn ở định dạng nhị phân: 0 và 1.

Vì vậy, bằng cách sử dụng Bộ ký tự, chúng ta có thể ánh xạ một ký tự thành một giá trị số.

Ký tự được ánh xạ tới một giá trị số

Bộ ký tự đầu tiên được thiết kế là bộ ASCII, viết tắt của Mã tiêu chuẩn Mỹ để trao đổi thông tin.

ASCII chỉ có thể đại diện cho các ký tự bằng tiếng Anh. Vì vậy, nó rất hạn chế.

Bộ ký tự mà chúng ta sử dụng nhiều nhất hiện nay là UTF-8, có thể đại diện cho hầu hết các ký tự trên thế giới.

Vì vậy, quay lại mã của chúng tôi.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
    
    </body>
</html>

Sử dụng bộ ký tự UTF-8

Với phần tử meta này, <meta charset="UTF-8">, chúng tôi đang xác định bộ ký tự được sử dụng trong tài liệu HTML này.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Bên dưới đó, chúng tôi có một phần tử meta <meta name="viewport content="width=device-width, initial-scale=1.0">để định cấu hình chế độ xem. Khung nhìn là khu vực hiển thị của một trang web.

Một trang index.html trống trên trình duyệt

Trên điện thoại hoặc máy tính bảng, khung nhìn nhỏ hơn. Trong khi ở đây trên máy tính để bàn, chúng tôi có thể thay đổi kích thước của cổng xem bằng cách thay đổi kích thước trình duyệt.

Thay đổi kích thước cửa sổ trình duyệt

Vì vậy, bây giờ khung nhìn của chúng tôi nhỏ hơn.

Quay lại mã của chúng tôi:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
    
    
    </body>
</html>

Bản soạn sẵn HTML của index.html trên Mã VS

Trong phần tử meta này, chúng tôi đang xác định chiều rộng ban đầu và hệ số thu phóng cho chế độ xem. Chúng ta sẽ nói về điều này chi tiết hơn sau. Hiện tại, tất cả những gì tôi cần bạn biết là chúng tôi cần yếu tố này để trang web của chúng tôi hiển thị tốt trên tất cả các thiết bị: điện thoại di động, máy tính bảng và máy tính để bàn.

Vì vậy, cách tốt nhất là mỗi trang web nên có ít nhất hai phần tử meta này. Nhưng chúng tôi có các yếu tố meta bổ sung. Hãy để tôi chỉ cho bạn một số:

Vì vậy, nếu bạn gõ meta:

meta:compact
meta:desc
meta:edge
meta:redirect
meta:refresh
meta:utf

Tất cả các meta được hiển thị trên Mã VS

Trong danh sách này, chúng ta có thể thấy tất cả các loại phần tử meta. Ví dụ: chúng tôi có một phần tử để xác định từ khóa trên trang web. Hãy chọn nó:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML,CSS" />
        <title>Document</title>
    </head>
    <body></body>
</html>

Meta cho các từ khóa được đánh dấu trên Mã VS

Tại đây, chúng ta có thể gõ nhiều từ khóa như HTML, CSS, v.v.

<meta name="keywords" content="HTML, CSS">

Trước đây, những từ khóa này được sử dụng nhiều cho Công cụ Tìm kiếm Tối ưu hóa. Nhưng ngày nay, hầu hết các công cụ tìm kiếm không đặt nặng những từ khóa này. Tuy nhiên, chúng tôi có thể sử dụng chúng để xác định các từ khóa đại diện cho trang này.

Chúng tôi có một phần tử meta khác để xác định mô tả cho trang này.

Vì vậy, nếu bạn gõ <meta name="description" content="">:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project." />
        <title>Document</title>
    </head>
    <body></body>
</html>

Meta cho mô tả được đánh dấu trên Mã VS

Trong phần nội dung, chúng ta có thể gõ mô tả cho trang này. Những gì chúng tôi nhập ở đây sẽ xuất hiện trên Google hoặc các công cụ tìm kiếm khác khi ai đó tìm kiếm trang web của chúng tôi.

Ví dụ: nếu bạn tìm kiếm Windows thì đây là những gì chúng tôi nhận được:

Tìm kiếm từ apple trên Google

Bây giờ, hãy nhìn vào văn bản này:

Mô tả meta được hiển thị trên trình duyệt cho trang web của Apple

Những gì bạn thấy ở đây đến từ yếu tố này ở đây:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
    </head>
    <body></body>
</html>

Mô tả meta được đánh dấu trên Mã VS

Vì vậy, đây là mục đích của các phần tử meta. Với các phần tử meta, chúng ta có thể lấy thông tin về một trang web.

Tiếp theo, chúng ta sẽ nói về các yếu tố bạn cần biết khi làm việc với văn bản.

Các yếu tố để làm việc với văn bản

Bây giờ, hãy nói về các yếu tố phổ biến nhất để làm việc với văn bản. Đầu tiên, bạn sẽ tìm hiểu về phần tử đoạn văn <p></p>được sử dụng để hiển thị văn bản.

<p>I love to teach you HTML!</p>

Đôi khi, bạn có thể muốn nhấn mạnh một phần của văn bản. Giả sử, từ HTML ở đây. Để làm điều đó, chúng ta có thể bọc nó bên trong một yếu tố nhấn mạnh<em></em>

Vì vậy, ở đây tôi gõ như sau:

<p> I love to teach you <em>HTML</em>!</p>

Bất cứ khi nào chúng ta muốn nhấn mạnh nội dung nào đó, chúng ta có thể bọc nội dung đó bên trong một <em></em>phần tử.

Đây là giao diện của Mã VS:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
    </head>
    <body>
        <p>I love to teach you <em>HTML</em>!</p>
    </body>
</html>

Phần tử đoạn nhấn mạnh vào từ HTML

Bây giờ, hãy lưu các thay đổi.

Đây là những gì chúng tôi nhận được:

Đoạn hiển thị trên trình duyệt có HTML được nhấn mạnh

Theo mặc định, các trình duyệt hiển thị nội dung được nhấn mạnh bằng chữ nghiêng. Nhưng, đừng cho rằng khi bạn muốn hiển thị nội dung in nghiêng, bạn nên sử dụng <em></em>phần tử. Bởi vì, mục đích của <em></em>phần tử là để nhấn mạnh nội dung trong tài liệu HTML của chúng ta. Điều này giúp các công cụ tìm kiếm trích xuất nội dung quan trọng trong tài liệu của chúng tôi.

Bất cứ điều gì liên quan đến kiểu dáng nên được thực hiện trong CSS.

Ví dụ: ở đây chúng ta có thể thay đổi kiểu mặc định của các phần tử được nhấn mạnh và xóa phần in nghiêng. Hãy để tôi chỉ cho bạn cách nó hoạt động.

Vì vậy, trong phần đầu, chúng tôi thêm phần tử được tạo kiểu như thế này:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <style>
        
        </style>
        <title>Document</title>
    </head>
    <body>
        <p>I love to teach you <em>HTML</em>!</p>
    </body>
</html>

Phần tử kiểu trống trong index.html trên Mã VS

Ở đây, chúng tôi xác định quy tắc cho nội dung được nhấn mạnh:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <style>
            em {
            
            }
        </style>
        <title>Document</title>
    </head>
    <body>
        <p>I love to teach you <em>HTML</em>!</p>
    </body>
</html>

Thẻ kiểu có quy tắc nhấn mạnh trống trong Mã VS

Chúng ta có thể thiết lập màu đỏ.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <style>
            em{
                color: red;
            }
        </style>
        <title>Document</title>
    </head>
    <body>
        <p>I love to teach you <em>HTML</em>!</p>
    </body>
</html>

Em trong các thẻ kiểu có màu được đặt thành màu đỏ

Và kiểu chữ để bình thường.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <style>
            em {
                color: red;
                font-style: normal;
            }
        </style>
        <title>Document</title>
    </head>
    <body>
        <p>I love to teach you <em>HTML</em>!</p>
    </body>
</html>

Cái em với font-style set normal trong thẻ style trên VS Code

Bây giờ, đừng lo lắng về việc ghi nhớ bất kỳ thuộc tính CSS nào trong số này. Chúng ta sẽ xem xét chúng nhiều lần trong suốt phần còn lại của hướng dẫn này.

Nhưng hãy xem điều gì sẽ xảy ra khi chúng ta áp dụng những phong cách này.

Đoạn trên trình duyệt có chữ HTML được tô đỏ

Vì vậy, nội dung nhấn mạnh của chúng tôi được hiển thị bằng màu đỏ và nó không còn in nghiêng nữa.

Bây giờ, trong quá khứ, chúng ta có một phần tử được gọi <i></i>là viết tắt của chữ nghiêng.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <style>
            em {
                color: red;
                font-style: normal;
            }
        </style>
        <title>Document</title>
    </head>
    <body>
        <p>I love to teach you <i>HTML</i>!</p>
    </body>
</html>

Từ HTML trong thẻ Italic trên Mã VS

Nếu chúng ta sử dụng phần tử này, chúng ta sẽ nhận được kết quả như trước. Nội dung của chúng tôi được hiển thị in nghiêng. Tuy nhiên, phần tử này được coi là không dùng nữa vì HTML không dành cho việc tạo kiểu. Nó chỉ nên được sử dụng để cấu trúc nội dung.

Vì vậy, không sử dụng <i></i>phần tử để hiển thị nội dung dưới dạng in nghiêng.

Bây giờ, chúng ta có một phần tử tương tự trong HTML được gọi là <strong></strong>Phần tử mạnh thể hiện tầm quan trọng, mức độ nghiêm trọng hoặc tính khẩn cấp mạnh mẽ đối với nội dung của nó. Về mặt khái niệm, nó tương tự như yếu tố nhấn mạnh, vì vậy bạn nên sử dụng nó ở đâu thực sự phụ thuộc vào ngữ cảnh của bạn.

Hãy lưu các thay đổi và xem những gì chúng tôi nhận được.

Đoạn có chữ HTML in đậm

Vì vậy, theo mặc định, các phần tử mạnh được hiển thị dưới dạng in đậm. Nhưng, một lần nữa, chúng ta luôn có thể thay đổi kiểu dáng.

Bây giờ, trong quá khứ, chúng ta có một phần tử khác được gọi <b></b>là viết tắt của chữ đậm. Vì vậy, bất cứ khi nào chúng tôi muốn tạo ra thứ gì đó táo bạo, chúng tôi đều sử dụng yếu tố này.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <style>
            em {
                color: red;
                font-style: normal;
            }
        </style>
        <title>Document</title>
    </head>
    <body>
        <p>I love to teach you <b>HTML</b>!</p>
    </body>
</html>

Đoạn có từ HTML in đậm

Tuy nhiên, một lần nữa, yếu tố này được coi là không được dùng nữa vì việc tạo kiểu phải được thực hiện bằng CSS chứ không phải bằng HTML. Vì vậy, không sử dụng <b></b>hoặc <i></i>các yếu tố.

Bây giờ, đây là tất cả về văn bản, bây giờ hãy nói về các tiêu đề.

tiêu đề

Vì vậy, trong HTML, chúng ta có 6 phần tử tiêu đề. Đó là:

<h1>This is heading one</h1>
<h2>This is heading two</h2>
<h3>This is heading three</h3>
<h4>This is heading four</h4>
<h5>This is heading five</h5>
<h6>This is heading six</h6>

Đây là mã trên Mã VS:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
    </head>
    <body>
        <h1>Heading 1</h1>
        <h2>Heading 2</h2>
        <h3>Heading 3</h3>
        <h4>Heading 4</h4>
        <h5>Heading 5</h5>
        <h6>Heading 6</h6>
    </body>
</html>

Tất cả 6 tiêu đề trong index.html trên Mã VS

Vì vậy, hãy xem những gì chúng ta có khi chạy mã.

Tất cả các tiêu đề trên một trang trong trình duyệt

Bây giờ, tiêu đề một đại diện cho tiêu đề quan trọng nhất và tiêu đề 6 đại diện cho tiêu đề ít quan trọng nhất.

Bây giờ, một sai lầm phổ biến mà tôi thấy ở rất nhiều người là họ chọn tiêu đề này dựa trên kích thước của chúng. Họ chọn, giả sử, nhóm bốn vì kích thước. Đó không phải là cách bạn phải sử dụng các tiêu đề vì kích thước luôn có thể được thay đổi bằng CSS. Đó là một vấn đề của phong cách.

Chúng ta nên sử dụng các phần tử tiêu đề này để tạo một hệ thống phân cấp.

Tiêu đề 1 được tô sáng

Mỗi trang web nên có một và chỉ một <h1></h1>phần tử tiêu đề ( ).

Tiêu đề này đại diện cho nội dung của trang này. Chà, không có gì xảy ra nếu chúng ta có nhiều <h1></h1>phần tử.

Ví dụ: tôi có thể lặp lại điều này để nói heading one +:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
    </head>
    <body>
        <h1>Heading 1</h1>
        <h1>Heading 1+</h1>
        <h2>Heading 2</h2>
        <h3>Heading 3</h3>
        <h4>Heading 4</h4>
        <h5>Heading 5</h5>
        <h6>Heading 6</h6>
    </body>
</html>

Tiêu đề 1 trùng lặp trong Mã VS

Bây giờ, nhìn chúng ta có hai <h1></h1>yếu tố. Tuy nhiên, điều này sẽ gây nhầm lẫn cho các công cụ tìm kiếm. Họ sẽ không hiểu trang này nói về cái gì.

Vì vậy, mỗi trang nên có một <h1></h1>yếu tố duy nhất.

Bây giờ, sau khi chúng ta sử dụng <h1></h1>now, chúng ta nên sử dụng <h2></h2>We should not jump to <h4></h4>.

Vì vậy, giả sử trên trang này chúng ta sẽ có hai phần. Một cho HTML, một cho CSS. Bây giờ, tiêu đề tiếp theo của tôi sẽ là <h2></h2>:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
    </head>
    <body>
        <h1>Heading 1</h1>
        <h2>HTML</h2>
        <h2>Heading 2</h2>
        <h3>Heading 3</h3>
        <h4>Heading 4</h4>
        <h5>Heading 5</h5>
        <h6>Heading 6</h6>
    </body>
</html>

Tiêu đề 2 có chữ HTML

và ở đây, chúng ta có thể gõ HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
    </head>
    <body>
        <h1>Heading 1</h1>
        <h2>HTML</h2>
        <h2>Heading 2</h2>
        <h3>Heading 3</h3>
        <h4>Heading 4</h4>
        <h5>Heading 5</h5>
        <h6>Heading 6</h6>
    </body>
</html>

Tiêu đề 2 có chữ HTML

Sau đó, bên dưới tiêu đề này, chúng ta có thể có một số văn bản. Vì vậy, tôi sẽ nói HTML Tutorial:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
    </head>
    <body>
        <h1>Heading 1</h1>
        <h2>HTML</h2>
        <p>HTML Tutorial</p>
        <h2>Heading 2</h2>
        <h3>Heading 3</h3>
        <h4>Heading 4</h4>
        <h5>Heading 5</h5>
        <h6>Heading 6</h6>
    </body>
</html>

Một đoạn mã có từ Hướng dẫn HTML

Tiêu đề tiếp theo của chúng ta nên là <h2></h2>.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
    </head>
    <body>
        <h1>Heading 1</h1>
        <h2>HTML</h2>
        <p>HTML Tutorial</p>
        <h2>CSS</h2>
        <h3>Heading 3</h3>
        <h4>Heading 4</h4>
        <h5>Heading 5</h5>
        <h6>Heading 6</h6>
    </body>
</html>

Heading 2 có chữ CSS trong VS Code

Đây là phần CSS. Trong phần này, chúng tôi có thể có một số văn bản bổ sung, giả sử CSS Tutorial:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
    </head>
    <body>
        <h1>Heading 1</h1>
        <h2>HTML</h2>
        <p>HTML Tutorial</p>
        <h2>CSS</h2>
        <p>CSS Tutorial</p>
        <h3>Heading 3</h3>
        <h4>Heading 4</h4>
        <h5>Heading 5</h5>
        <h6>Heading 6</h6>
    </body>
</html>

Một đoạn có từ CSS Tutorial

Bây giờ, tôi sẽ xóa bốn tiêu đề dưới đây.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
    </head>
    <body>
        <h1>Heading 1</h1>
        <h2>HTML</h2>
        <p>HTML Tutorial</p>
        <h2>CSS</h2>
        <p>CSS Tutorial</p>
        <h3>Heading 3</h3>
        <h4>Heading 4</h4>
        <h5>Heading 5</h5>
        <h6>Heading 6</h6>
    </body>
</html>

Bốn tiêu đề bị xóa trên Mã VS

Bây giờ chúng đã bị xóa.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
    </head>
    <body>
        <h1>Heading 1</h1>
        <h2>HTML</h2>
        <p>HTML Tutorial</p>
        <h2>CSS</h2>
        <p>CSS Tutorial</p>
    </body>
</html>

Bốn tiêu đề đã bị xóa trên Mã VS

Hãy xem ngay bây giờ.

Trang trên trình duyệt không có bốn hình ảnh bị xóa

Chúng tôi có một hệ thống phân cấp. Ở trên cùng, chúng ta có một <h1></h1>phần tử. Dưới đó, chúng tôi có hai <h2></h2>yếu tố.

Trang trên trình duyệt có một phần tử tiêu đề và hai phần tử tiêu đề hai phần tử

Bây giờ, giả sử trong phần HTML, chúng ta sẽ có hai phần phụ. Ở đó, chúng ta nên sử dụng <h3></h3>các phần tử.

Vì vậy, đây là phần HTML của chúng tôi:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
    </head>
    <body>
        <h1>Heading 1</h1>
        <h2>HTML</h2>
        <p>HTML Tutorial</p>
        <h2>CSS</h2>
        <p>CSS Tutorial</p>
    </body>
</html>

Các phần tử tiêu đề một và hai tiêu đề hai trên Mã VS

Trong phần này, chúng ta sẽ có hai <h3></h3>yếu tố Codevà Exercise:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
    </head>
    <body>
        <h1>Heading 1</h1>
        <h2>HTML</h2>
        <p>HTML Tutorial</p>
        <h3>Code</h3>
        <h3>Exercise</h3>
        <h2>CSS</h2>
        <p>CSS Tutorial</p>
    </body>
</html>

Hai phần tử tiêu đề 3 với mã từ và bài tập trên VS Code

Bây giờ, hãy xem.

Trang trên trình duyệt với từ mã và bài tập

Vì vậy, chúng tôi có một hệ thống phân cấp thích hợp! Đây là cách chúng ta nên sử dụng các phần tử tiêu đề này. Chúng ta có thể trình bày cấu trúc bằng HTML càng tốt thì các công cụ tìm kiếm càng có thể đọc và hiểu nội dung của chúng ta tốt hơn.

Vì vậy, đó là tất cả về văn bản.

Tiếp theo, chúng ta sẽ nói về việc hiển thị các ký tự đặc biệt trong HTML.

Thực thể HTML

Một số ký tự được dành riêng trong HTML và để hiển thị chúng, chúng ta phải sử dụng một ký hiệu đặc biệt. Ví dụ: giả sử chúng ta muốn ngắt từ HTML bằng dấu ngoặc nhọn. Hãy xem điều gì sẽ xảy ra.

Vì vậy, tôi gõ khung góc trái và góc phải, VS Code nghĩ rằng chúng tôi đang thêm một phần tử HTML, vì vậy nó sẽ tự động tạo thẻ đóng.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
    </head>
    <body>
        <p>I love to teach you <HTML>!</HTML></p>
    </body>
</html>

Tự động hoàn thành thẻ HTML trong Mã VS

Chúng tôi không muốn điều này, vì vậy hãy xóa nó.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
    </head>
    <body>
        <p>I love to teach you<HTML>!</p>
    </body>
</html>

Đã xóa thẻ HTML cuối cùng trong Mã VS

Bây giờ, quay lại trình duyệt, nhìn. Từ HTML của chúng ta ở đâu?

Từ HTML không hiển thị trong trang trình duyệt

Nó không có ở đây vì trình duyệt hiểu đây là một thẻ HTML.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
    </head>
    <body>
        <p>I love to teach you<HTML>!</p>
    </body>
</html>

Thẻ mở HTML không bao giờ được hiển thị

Đây không phải là những gì chúng tôi muốn. Chúng tôi muốn hiển thị chính xác như thế này. Vì vậy, để giải quyết vấn đề này, chúng ta sẽ sử dụng các thực thể HTML. Tất cả các thực thể này bắt đầu bằng dấu và và kết thúc bằng dấu chấm phẩy&;

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
    </head>
    <body>
        <p>I love to teach you &; <HTML>!</p>
    </body>
</html>

Thực thể HTML &; trong Mã VS

Vì vậy, chúng ta có một thực thể để hiển thị dấu nhỏ hơn, viết &lt;tắt của less than. Tương tự, chúng ta có một thực thể HTML khác để hiển thị dấu lớn hơn. Vì vậy, chúng tôi nhập viết &gt;tắt của lớn hơn, theo sau là dấu chấm phẩy.

<p>I love to teach you &lt;HTML&gt;!</p>

Đây là mã trên Mã VS:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
    </head>
    <body>
        <p>I love to teach you &lt;HTML&gt;!</p>
    </body>
</html>

Dấu nhỏ hơn và lớn hơn trong Mã VS

Bây giờ, quay lại trình duyệt, đó chính xác là những gì chúng tôi muốn.

Từ HTML được bao quanh bởi các dấu hiệu nhỏ hơn và lớn hơn trong Mã VS

Một thực thể HTML phổ biến khác là biểu tượng bản quyền. Vì vậy, cuối cùng, tôi sẽ gõ&copy;

<p>I love to teach you &lt;HTML&gt;! &copy;</p>

Đây là mã trên Mã VS:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
    </head>
    <body>
        <p>I love to teach you &lt;HTML&gt;! &copy;</p>
    </body>
</html>

Bản sao chép; thực thể

Bây giờ hãy xem.

Dấu hiệu sao chép hiển thị trong trang trình duyệt sau dấu chấm than

Có biểu tượng bản quyền của chúng tôi. Nó trông đẹp.

Bây giờ, chúng ta có rất nhiều thực thể trong HTML và thật lòng mà nói, bạn không cần phải ghi nhớ chúng. Trên thực tế, bạn có thể sẽ không sử dụng 99% trong số chúng. Nhưng trong trường hợp bạn tò mò, hãy để tôi cho bạn xem danh sách đầy đủ.

Vì vậy, trên Google, hãy tìm kiếm các thực thể HTML.

Google tìm kiếm các thực thể HTML

Đây là những gì tôi tìm thấy:

Kết quả đầu tiên của Thực thể HTML từ Google

Đây là một số thực thể. Tôi chỉ sử dụng một vài trong số họ.

Một số Thực thể ký tự HTML hữu ích từ w3schools sau khi tìm kiếm trên Google

Bây giờ, đây là tất cả về các thực thể HTML. Tiếp theo, chúng ta sẽ nói về các liên kết.

Cách tạo siêu liên kết

Hầu như mọi trang web trên internet đều có liên kết đến các trang hoặc trang web khác. Để tạo các liên kết này, chúng tôi sử dụng phần tử neo.

<a href=""></a>

Mỗi phần tử neo phải có thuộc tính href. hreflà viết tắt của tham chiếu siêu văn bản. Về cơ bản, nó có nghĩa là một URL hoặc một liên kết.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
    </head>
    <body>
        <a href=""></a>
    </body>
</html>

Làm trống href trên Mã VS

Trong bản trình diễn này, tôi sẽ tạo một trang thứ hai có tên about.html và sau đó liên kết với nó ở đây.

Vì vậy, ở đây trong bảng thám hiểm, hãy thêm một trang mới có tên about.html:

About.html trong Mã VS

Ở đây, chúng ta sẽ tạo một bản tóm tắt HTML cơ bản.

Làm trống about.html trong Mã VS

Bây giờ, hãy tạo nó.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>

    </body>
</html>

Bản soạn sẵn HTML trong about.html trên Mã VS

Quay lại index.html:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
    </head>
    <body>
        <a href=""></a>
    </body>
</html>

Mã index.html trên Mã VS

Ở đây, chúng ta có thể sử dụng URL tương đối hoặc tuyệt đối. Ý tôi là gì? Chà, một URL tương đối bắt đầu từ trang hiện tại. Vì vậy, hiện tại, chúng tôi đang sử dụng index.htmlvà chúng tôi muốn chuyển sang about.html.

Hiện tại, cả hai trang này đều nằm trong cùng một thư mục.

About.html và index.html trên cùng một thư mục như được hiển thị trên tab VS Code Explorer

Chúng tôi có thể nhập một URL tuyệt đối để about.htmlthích điều này.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
    </head>
    <body>
        <a href="about.html"></a>
    </body>
</html>

Đã thêm URL tuyệt đối about.html

Đó là một URL tuyệt đối.

Bây giờ, nếu nó about.htmlnằm trong một thư mục khác thì sao?

Vì vậy, hãy thêm một thư mục mới vào dự án của chúng tôi có tên company:

Đã thêm thư mục công ty vào dự án của chúng tôi trên Mã VS

Sau đó, chúng tôi di chuyển đến thư mục này bằng cách kéo và thả.

Di chuyển about.html vào thư mục company trên VS Code

Đâu là about.htmlliên quan đến trang này? Nó nằm trong thư mục công ty.

About.html hiện nằm trong thư mục công ty

Vì vậy, ở đây chúng tôi gõ company/about.html:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
    </head>
    <body>
        <a href="company/about.html"></a>
    </body>
</html>

Nhập công ty/about.html trong href trên Mã VS

Đây là một URL tương đối.

Bây giờ, hãy cung cấp cho liên kết này một số văn bản. Tôi sẽ gọi nó About Melà Vì vậy, chúng tôi nhập văn bản của mình bên trong phần tử neo.

<a href="company/about.html">About Me</a>

Đây là giao diện của Mã VS:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
    </head>
    <body>
        <a href="company/about.html">About Me</a>
    </body>
</html>

company/about.html trong href trên thẻ neo của Giới thiệu về tôi trên Mã VS

Quay lại trình duyệt. Đây là liên kết của chúng tôi:

Liên kết Giới thiệu về tôi trên trang trình duyệt

Khi bạn nhấp vào nó, nó sẽ đưa bạn đến trang giới thiệu trống.

Trang about.html trên trình duyệt trống

Thay vì văn bản, chúng ta có thể sử dụng một yếu tố hình ảnh.

Tôi sẽ xóa About Me:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
    </head>
    <body>
        <a href="company/about.html">
        
        </a>
    </body>
</html>

Đã xóa văn bản Giới thiệu về tôi trong các thẻ neo trên Mã VS

và thêm một yếu tố hình ảnh thay thế:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
    </head>
    <body>
        <a href="company/about.html">
            <img src="" alt="">
        </a>
    </body>
</html>

Đã thêm phần tử hình ảnh bên trong thẻ neo trong Mã VS

Một lần nữa, ở đây chúng ta có thể nhập một URL tương đối cho hình ảnh mục tiêu của mình.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
    </head>
    <body>
        <a href="company/about.html">
            <img src="Images/altumcode.jpg" alt="">
        </a>
    </body>
</html>

Một URL tương đối với hình ảnh mục tiêu của chúng tôi trên Mã VS

Đây là giao diện của nó:

Hình ảnh trên trang trình duyệt

Chà, hình ảnh này quá lớn. Chúng tôi luôn có thể sử dụng CSS để thay đổi kích thước nó. Tuy nhiên, bỏ qua vấn đề đó, chúng ta có biểu tượng con chuột khi di chuột qua hình ảnh này. Nó thay đổi thành một bàn tay để cho biết rằng hình ảnh này có thể nhấp được.

Bây giờ, quay lại mã của chúng tôi. Để đơn giản hóa mọi thứ, tôi sẽ loại bỏ hình ảnh này và quay lại bài viết của chúng ta.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
    </head>
    <body>
        <a href="company/about.html">About Me</a>
    </body>
</html>

Đã xóa hình ảnh và thêm lại văn bản của chúng tôi vào thẻ neo trong Mã VS

Hãy đi đến trang giới thiệu và thêm một liên kết trở lại trang chủ.

Vì vậy, ở đây:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>

    </body>
</html>

Bản soạn sẵn HTML trên trang about.html trên Mã VS

Chúng tôi sẽ thêm một yếu tố neo:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <a href=""></a>
    </body>
</html>

Đã thêm thẻ neo vào phần thân trên Mã VS

Chúng ta nên nhập gì cho thuộc tính href? Chà, hiện tại, chúng tôi đang ở trong thư mục công ty. Chúng ta phải lên một cấp để có thể truy cậpindex.html

Để làm điều đó, chúng ta gõ ../With this, we can go one level up.

<a href="../"></a>

Sau đó, chúng tôi có thể tham khảo index.htmlvà đối với văn bản, chúng tôi sẽ nói trang chủ.

<a href="../index.html">Home Page</a>

Một lần nữa, đây là một ví dụ khác về URL tương đối, bởi vì nó bắt đầu từ trang hiện tại và đi đến một nơi khác.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <a href="../index.html">Home Page</a>
    </body>
</html>

Đã thêm một URL tương đối trong thẻ liên kết trỏ đến trang index.html

Nếu bạn đang ở trong cấu trúc thư mục được lồng sâu, chúng tôi có thể phải tăng nhiều cấp độ. Vì thế,

<a href="../../../index.html">Home Page</a>

Với điều này, chúng ta có thể tăng ba cấp độ.

Như bạn có thể thấy, các URL như thế này trông rất lộn xộn. Họ trông khó đọc. Trong những trường hợp đó, chúng tôi có thể sử dụng một URL tuyệt đối.

Vì vậy, chúng tôi bắt đầu với một /và điều này đại diện cho thư mục gốc của trang web của chúng tôi.

<a href="/"></a>

Ở cấp độ này, chúng tôi có quyền truy cập vào index.html.

<a href="/index.html"></a>

Vì vậy, đây là một URL tuyệt đối.

Bây giờ, quay lại index.html:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
    </head>
    <body>
        <a href="company/about.html">About Me</a>
    </body>
</html>

Thẻ neo trong index.html trỏ đến trang about.html trên Mã VS

Ở đây chúng tôi đang liên kết đến một tài liệu HTML. Nhưng chúng ta cũng có thể liên kết đến các tài liệu không phải HTML như hình ảnh, PDF, PowerPoint, v.v.

Vì vậy, hãy thêm một liên kết đến hình ảnh của tôi.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
    </head>
    <body>
        <a href="company/about.html">About Me</a>
        <a href="Images/altumcode.jpg">My Computer Photo</a>
    </body>
</html>

Đã thêm một liên kết đến hình ảnh của tôi trên Mã VS

Hãy xem.

Các liên kết trên trang trình duyệt

Vì vậy, đây là liên kết thứ hai của chúng tôi. Chúng ta có thể nhấp vào nó.

Nhấp vào liên kết, Ảnh máy tính của tôi, sẽ đưa chúng ta đến một trang mới có ảnh trên trình duyệt

Hình ảnh của tôi được hiển thị trong trình duyệt.

Nhưng, nếu tôi muốn nhắc người dùng tải xuống thì sao? Điều đó rất dễ dàng. Chúng tôi sẽ thêm thuộc tính tải xuống vào phần tử neo của chúng tôi.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
    </head>
    <body>
        <a href="company/about.html">About Me</a>
        <a href="Images/altumcode.jpg" download>My Computer Photo</a>
    </body>
</html>

Đã thêm thuộc tính tải xuống trong thẻ neo của hình ảnh của chúng tôi trên Mã VS

Nhớ lưu lại nhé.

Bây giờ, trở lại trình duyệt. Chúng tôi quay lại và làm mới trang. (Chúng tôi phải làm mới trang theo cách thủ công vì máy chủ trực tiếp chỉ làm mới trang hiện tại).

Trang trình duyệt với các liên kết của chúng tôi

Bây giờ khi tôi nhấp vào liên kết này, thay vì nhìn thấy hình ảnh của mình, tôi sẽ thấy hình ảnh của mình được tải xuống.

Hình ảnh tải về trên trình duyệt

Chúng tôi cũng có thể liên kết đến các phần khác của trang này.

Vì vậy, hãy tạo hai phần với nhiều văn bản. Tôi sẽ thêm một yếu tố H2 HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
    </head>
    <body>
        <a href="company/about.html">About Me</a>
        <a href="Images/altumcode.jpg">My Computer Photo</a>
        <h2>HTML</h2>
    </body>
</html>

Đã thêm phần tử tiêu đề hai với văn bản HTML trên Mã VS

Dưới đây, chúng tôi sẽ thêm một số văn bản giả với 200 từ.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
    </head>
    <body>
        <a href="company/about.html">About Me</a>
        <a href="Images/altumcode.jpg">My Computer Photo</a>
        <h2>HTML</h2>
        <p>Lorem, ipsum, sit amet consetieu millpiscing ellit, Qiaus nesciant dietns quisquet ael, doule, eit maigures</p>
    </body>
</html>

Đã thêm phần tử đoạn văn với một số văn bản giả trên Mã VS

Ngay sau đó, chúng ta sẽ thêm một H2 khác cho phần CSS với một số văn bản khác.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
    </head>
    <body>
        <a href="company/about.html">About Me</a>
        <a href="Images/altumcode.jpg">My Computer Photo</a>
        <h2>HTML</h2>
        <p>Lorem, ipsum, sit amet consetieu millpiscing ellit, Qiaus nesciant dietns quisquet ael, doule, eit maigures</p>
        <h2>CSS</h2>
        <p>Lorem, ipsum, sit amet consetieu millpiscing ellit, Qiaus nesciant dietns quisquet ael, doule, eit maigures</p>
    </body>
</html>

Đã thêm tiêu đề CSS và đoạn văn với một số văn bản giả trên Mã VS

Hãy lưu các thay đổi.

Hãy xem.

Trang trình duyệt có văn bản giả

Ở trên cùng, chúng ta có thể thêm một liên kết đến phần CSS để chúng ta không phải cuộn. Khi người dùng nhấp vào đó, họ sẽ ngay lập tức chuyển đến phần CSS.

Vì vậy, ở đây trong phần CSS, đầu tiên chúng ta sẽ cung cấp cho phần tử này một mã định danh duy nhất. Giống như mọi người trong thế giới thực có thể có một mã định danh duy nhất như bằng lái xe hoặc hộ chiếu, mọi thành phần trên trang cũng có thể có một mã định danh duy nhất.

Ở đây, tôi sẽ đặt thuộc tính id thànhsection-css

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
    </head>
    <body>
        <a href="company/about.html">About Me</a>
        <a href="Images/altumcode.jpg">My Computer Photo</a>
        <h2>HTML</h2>
        <p>Lorem, ipsum, sit amet consetieu millpiscing ellit, Qiaus nesciant dietns quisquet ael, doule, eit maigures</p>
        <h2 id="section-css">CSS</h2>
        <p>Lorem, ipsum, sit amet consetieu millpiscing ellit, Qiaus nesciant dietns quisquet ael, doule, eit maigures</p>
    </body>
</html>

Đặt thuộc tính id thành section-css trong Mã VS

Tên không thực sự quan trọng ở đây. Điều quan trọng là chúng tôi đang xác định cái mà chúng tôi gọi là một đoạn hoặc một vị trí trên trang này. Bây giờ, chúng ta sẽ thêm một liên kết đến đoạn này. Vì vậy, trên cùng:

<a href="#section-css">CSS</a>

Đây là giao diện của Mã VS:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
    </head>
    <body>
        <a href="company/about.html">About Me</a>
        <a href="Images/altumcode.jpg">My Computer Photo</a>
        <a href="#section-css">CSS</a>
        <h2>HTML</h2>
        <p>Lorem, ipsum, sit amet consetieu millpiscing ellit, Qiaus nesciant dietns quisquet ael, doule, eit maigures</p>
        <h2 id="section-css">CSS</h2>
        <p>Lorem, ipsum, sit amet consetieu millpiscing ellit, Qiaus nesciant dietns quisquet ael, doule, eit maigures</p>
    </body>
</html>

Đã thêm một liên kết đến Phần CSS trên Mã VS

Bây giờ, trở lại trình duyệt.

Liên kết CSS trên trang trình duyệt

Khi tôi nhấp vào liên kết CSS, nó sẽ đưa tôi đến phần CSS mà không cần cuộn.

Phần CSS trên trang trình duyệt

Bây giờ, rất nhiều trang web như thế này có một liên kết giúp bạn nhảy lên đầu trang. Hãy xem làm thế nào chúng ta có thể tạo ra điều đó.

Sau phần CSS, tôi sẽ thêm một phần tử neo khác.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
    </head>
    <body>
        <a href="company/about.html">About Me</a>
        <a href="Images/altumcode.jpg">My Computer Photo</a>
        <a href="#section-css">CSS</a>
        <h2>HTML</h2>
        <p>Lorem, ipsum, sit amet consetieu millpiscing ellit, Qiaus nesciant dietns quisquet ael, doule, eit maigures</p>
        <h2 id="section-css">CSS</h2>
        <p>Lorem, ipsum, sit amet consetieu millpiscing ellit, Qiaus nesciant dietns quisquet ael, doule, eit maigures</p>
        <a href="#"></a>
    </body>
</html>

Một phần tử neo trống trên Mã VS

Đối với hreftôi sẽ sử dụng một đoạn trống. Vì vậy, chúng tôi chỉ cần gõ một dấu thăng mà không cần định danh.

<a href="#">Jump to Top</a>

Đây là giao diện của Mã VS:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
    </head>
    <body>
        <a href="company/about.html">About Me</a>
        <a href="Images/altumcode.jpg">My Computer Photo</a>
        <a href="#section-css">CSS</a>
        <h2>HTML</h2>
        <p>Lorem, ipsum, sit amet consetieu millpiscing ellit, Qiaus nesciant dietns quisquet ael, doule, eit maigures</p>
        <h2 id="section-css">CSS</h2>
        <p>Lorem, ipsum, sit amet consetieu millpiscing ellit, Qiaus nesciant dietns quisquet ael, doule, eit maigures</p>
        <a href="#">Jump to Top</a>
    </body>
</html>

Đã thêm văn bản Nhảy lên đầu trên phần tử neo trên Mã VS

Hãy xem qua.

Liên kết Jump to Top trên trang trình duyệt

Đây là liên kết của chúng tôi. Khi bạn nhấp vào nó, nó sẽ đưa bạn lên trên cùng.

Bây giờ, hãy xem cách chúng tôi có thể liên kết với các trang web bên ngoài.

Vì vậy, hãy thêm một yếu tố neo khác để liên kết với Google.

Ở đây, chúng tôi phải sử dụng một URL tuyệt đối vì Google là một trang web bên ngoài. Chúng tôi đang đi đến một trang web khác. Vì vậy, làm thế nào chúng ta có thể làm điều đó? Chà, chúng ta phải bắt đầu với một giao thức.

<a href="https://google.com">Google</a>

Đây là giao diện của Mã VS:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
    </head>
    <body>
        <a href="company/about.html">About Me</a>
        <a href="Images/altumcode.jpg">My Computer Photo</a>
        <a href="#section-css">CSS</a>
        <a href="https://google.com">Google</a>
        <h2>HTML</h2>
        <p>Lorem, ipsum, sit amet consetieu millpiscing ellit, Qiaus nesciant dietns quisquet ael, doule, eit maigures</p>
        <h2 id="section-css">CSS</h2>
        <p>Lorem, ipsum, sit amet consetieu millpiscing ellit, Qiaus nesciant dietns quisquet ael, doule, eit maigures</p>
        <a href="#">Jump to Top</a>
    </body>
</html>

Một liên kết đến trang chủ Google trên VS Code

Hãy xem qua.

Liên kết Google trên trang trình duyệt

Khi chúng tôi nhấp vào liên kết Google, nó sẽ đưa chúng tôi đến Google.

Trang chủ Google

Bây giờ, đôi khi khi liên kết đến các trang web bên ngoài, chúng tôi muốn liên kết đó mở trong một tab mới. Hãy để tôi chỉ cho bạn cách làm điều đó.

<a href="https://google.com" target="_blank">Google</a>

Đây là giao diện của nó trên Mã VS.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
    </head>
    <body>
        <a href="company/about.html">About Me</a>
        <a href="Images/altumcode.jpg">My Computer Photo</a>
        <a href="#section-css">CSS</a>
        <a href="https://google.com" target="_blank">Google</a>
        <h2>HTML</h2>
        <p>Lorem, ipsum, sit amet consetieu millpiscing ellit, Qiaus nesciant dietns quisquet ael, doule, eit maigures</p>
        <h2 id="section-css">CSS</h2>
        <p>Lorem, ipsum, sit amet consetieu millpiscing ellit, Qiaus nesciant dietns quisquet ael, doule, eit maigures</p>
        <a href="#">Jump to Top</a>
    </body>
</html>

Đã thêm mục tiêu trống vào thẻ neo của Google trên Mã VS

Bây giờ, trở lại trang chủ.

Trang index.html trên trình duyệt

Một lần nữa, chúng tôi phải làm mới thủ công để nhận những thay đổi mới nhất.

Bây giờ, khi tôi nhấp vào Google, chúng tôi thấy một tab mới.

Một tab trình duyệt mới khi tôi nhấp vào liên kết Google

Đây là tất cả về các liên kết.

Bây giờ, một điểm khác biệt chính trước khi chúng ta kết thúc bài học này. Sự khác biệt giữa một liên kết và một siêu liên kết là gì?

Chà, một liên kết chỉ là một địa chỉ, một URL, một vị trí của trang đích.

Siêu liên kết là thành phần mà người dùng có thể nhấp vào để điều hướng đến trang mục tiêu đó. Đó là sự khác biệt giữa một liên kết và một siêu liên kết. Tuy nhiên, khá thường xuyên, thuật ngữ này được sử dụng thay thế cho nhau.

Được rồi, chúng ta đã hoàn thành bài học này. Điều tiếp theo chúng ta sẽ nói về là hình ảnh.

Cách nhúng hình ảnh

Bây giờ, hãy nói về việc nhúng hình ảnh chi tiết hơn một chút.

Đối với bài học này, tôi sẽ lấy một hình ảnh từ unsplash.comđó chúng ta có thể tìm thấy rất nhiều hình ảnh đẹp và có sẵn miễn phí.

Trang chủ Unsplash

Vì vậy, chúng ta hãy tìm kiếm cà phê.

Tìm kiếm từ cà phê trên thanh tìm kiếm Bapt

Có rất nhiều hình ảnh cà phê ở đây. Tôi sẽ lấy một cái.

Tải xuống hình ảnh cà phê từ Bapt

Bạn có thể tải về miễn phí.

Hình ảnh có nhiều kích cỡ khác nhau. Kích thước nhỏ, trung bình và ban đầu, lớn.

Các kích thước khác nhau của hình ảnh đi kèm trong

Hiện tại, chúng tôi sẽ lấy hình ảnh này ở kích thước nhỏ.

Bây giờ, hãy tải nó xuống.

Tôi sẽ kéo và thả nó vào thư mục hình ảnh.

Kéo và thả hình ảnh vào thư mục hình ảnh trên Mã VS

Và sau đó đổi tên nó thành cà phê.

Đổi tên ảnh thành coffee trên VS Code

Bạn muốn đặt cho nó một cái tên mô tả. Đây là một mẹo tối ưu hóa công cụ tìm kiếm. Khi chúng tôi cung cấp tên mô tả cho hình ảnh của mình, các công cụ tìm kiếm có thể hiểu rõ hơn và lập chỉ mục các trang của chúng tôi.

Bây giờ, hãy thêm một yếu tố hình ảnh.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
    </head>
    <body>
        <img src="" alt="">
    </body>
</html>

Đã thêm phần tử hình ảnh trống trong index.html trên Mã VS

Chúng tôi đặt nguồn thành:

<img src="Images/coffee.jpg" alt="">

Đây là giao diện của Mã VS:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
    </head>
    <body>
        <img src="Images/coffee.jpg" alt="">
    </body>
</html>

Đã thêm nguồn hình ảnh

Bây giờ, còn thuộc tính thì sao alt? Chà, tôi đã đề cập ngắn gọn rằng chúng tôi sử dụng thuộc tính này để cung cấp mô tả bằng văn bản của hình ảnh. Nó không bắt buộc nhưng nó rất được khuyến khích vì một số lý do.

Lý do đầu tiên là làm cho trang của chúng tôi có thể truy cập được đối với những người khiếm thị. Một số người cần sử dụng trình đọc màn hình để đọc trang web cho họ xem. Vì vậy, với văn bản thay thế này, chúng tôi có thể cho họ biết những gì chúng tôi đang hiển thị trên trang.

Điều đó có nghĩa là, chúng ta nên viết một mô tả có ý nghĩa tốt nhưA coffee mug on a table

<img src="images/coffee.jpg" alt="A coffee mug on a table">

Đừng viết một cái gì đó như Imagehoặc Image one. Điều đó là vô nghĩa.

Bây giờ, lợi ích thứ hai của việc cung cấp một văn bản thay thế là nó giúp các công cụ tìm kiếm đọc văn bản này và hiểu những gì chúng tôi đang cung cấp ở đây.

Một lợi ích khác là nếu hình ảnh này không tải được vì lý do nào đó, văn bản thay thế sẽ được hiển thị.

Hãy để tôi chỉ cho bạn những gì tôi có ý nghĩa.

Bây giờ tôi sẽ thêm một lỗi đánh máy ở đây.

<img src="fdImages/coffee.jpg" alt="A coffee mug on a table">

Đây là giao diện của Mã VS:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
    </head>
    <body>
        <img src="fdImages/coffee.jpg" alt="A coffee mug on a table">
    </body>
</html>

Phần tử hình ảnh có lỗi đánh máy trong nguồn

Quay lại trình duyệt.

Trang trình duyệt không hiển thị hình ảnh. Tuy nhiên, nó hiển thị văn bản thay thế

Hãy nhìn xem, hình ảnh không được tải, nhưng chúng tôi thấy văn bản thay thế. Điều này cũng có thể xảy ra nếu có sự cố kết nối mạng. Nếu người dùng bị ngắt kết nối, họ vẫn có thể xem văn bản thay thế.

Vì vậy, hãy loại bỏ lỗi đánh máy.

<img src="images/coffee.jpg" alt="A coffee mug on a table">

Đây là giao diện của Mã VS:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
    </head>
    <body>
        <img src="Images/coffee.jpg" alt="A coffee mug on a table">
    </body>
</html>

Đã xóa lỗi đánh máy khỏi nguồn hình ảnh

Bây giờ, hãy nói về việc thay đổi kích thước hình ảnh.

Như tôi đã nói với bạn trước đây, chúng ta có thể sử dụng CSS để thay đổi kích thước hình ảnh của mình.

Ở đây trong phần đầu, hãy thêm một thành phần kiểu dáng và áp dụng một quy tắc cho hình ảnh của chúng ta.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
        <style>
            img {
            
            }
        </style>
    </head>
    <body>
        <img src="Images/coffee.jpg" alt="A coffee mug on a table">
    </body>
</html>

Thẻ kiểu có quy tắc img trống trên Mã VS

Bây giờ, quy tắc này được áp dụng cho tất cả các hình ảnh trên trang. Đây có lẽ không phải là điều chúng tôi muốn làm trong một kịch bản trong thế giới thực.

Trong một kịch bản trong thế giới thực, bạn muốn áp dụng một lớp cho phần tử này, sau đó xác định các quy tắc cho lớp đó.

Hãy cung cấp cho hình ảnh này một số phong cách.

<style>
    img {
        width: 200px;
        height: 200px;
    }
</style>

Đây là giao diện của Mã VS:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE-edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="keywords" content="HTML, CSS" />
        <meta name="description" content="This is a simple HTML and CSS project" />
        <title>Document</title>
        <style>
            img {
                width: 200px;
                height: 200px;
            }
        </style>
    </head>
    <body>
        <img src="Images/coffee.jpg" alt="A coffee mug on a table">
    </body>
</html>

Quy tắc hình ảnh với kiểu dáng chiều rộng và chiều cao trên Mã VS

Bây giờ, có một vấn đề nhỏ trong hình ảnh của chúng ta: nó hơi bị bẹp. Lý do là chúng tôi đang xử lý một hình ảnh hình chữ nhật, nhưng chúng tôi đang chuyển đổi nó thành một hình ảnh vuông.

Vì vậy, làm thế nào chúng ta có thể giải quyết vấn đề này? Chà, chúng tôi có một thuộc tính trong CSS được gọi là Object Fit. Nó trông như thế này:

<style>
    img {
        width: 200px;
        height: 200px;
        object-fit: cover;
    }
</style>

Chúng ta có thể sử dụng coverđể đối tượng bao phủ hộp chứa nó.

Hộp đựng là gì? Về mặt khái niệm, có một hộp xung quanh mọi tài liệu HTML. Chúng tôi không nhìn thấy hộp này, nhưng trình duyệt sử dụng hộp đó để tìm ra cách hiển thị trang đó.

Phần kết luận

Tôi hy vọng bạn đã học được một vài điều về HTML và CSS. Hẹn sớm gặp lại! 

Chúc mừng mã hóa!

Nguồn: https://www.freecodecamp.org

#html #css