Ý nghĩa các thẻ HTML thông dụng dễ hiểu nhất
HTML được sử dụng để cấu trúc một trang web, bao gồm các thẻ để bao bọc các phần khác nhau của nội dung để cho nó xuất hiện theo một cách nhất định.
Khái niệm cơ bản về HTML
HTML (viết tắt của Hyper Text Markup Language) là mã được sử dụng để cấu trúc một trang web và nội dung của nó. HTML bao gồm một loạt các phần tử, mà bạn sử dụng để bao bọc hoặc bọc các phần khác nhau của nội dung để làm cho nội dung xuất hiện theo một cách nhất định hoặc hoạt động theo một cách nhất định. Các thẻ bao quanh có thể tạo siêu liên kết từ hoặc hình ảnh đến một nơi khác, có thể in nghiêng các từ, có thể làm cho phông chữ lớn hơn hoặc nhỏ hơn, v.v.
Để hiểu rõ hơn về HTML, cấu trúc HTML để tạo trang website. Mời bạn tham khảo bài viết tại đây.
Cấu trúc một thẻ trong HTML mà bạn nên biết:
Thẻ <p> trong HTML:
<p>Nội dung</p>
Các phần chính của phần tử của chúng tôi như sau:
Thẻ mở: Thẻ này bao gồm tên của phần tử (trong trường hợp này là p), được bao bọc trong dấu ngoặc nhọn mở và đóng . Điều này cho biết nơi phần tử bắt đầu có hiệu lực - trong trường hợp này là nơi bắt đầu đoạn văn.
Thẻ đóng: Đây cũng giống như thẻ mở, ngoại trừ việc nó bao gồm dấu gạch chéo trước tên phần tử. Điều này cho biết phần tử kết thúc ở đâu - trong trường hợp này là nơi kết thúc đoạn văn. Không thêm thẻ đóng là một trong những lỗi dễ gặp dành cho người mới bắt đầu và có thể dẫn đến kết quả lạ kỳ.
Nội dung: Đây là nội dung của phần tử, trong trường hợp này, chỉ là văn bản.
Phần tử: Thẻ mở, thẻ đóng và nội dung cùng nhau tạo thành phần tử.
Ngoài ra sau này các bạn học thêm thì sẽ thấy có một số thẻ người ta gọi là thẻ tự đóng
<img src="" alt=""/>
Những thẻ có cấu trúc như trên gọi là thẻ tự đóng nghĩa là chúng ta không thể truyền nội dung vào giữa như thẻ đóng mở ở chỗ thẻ p ở trên.
Các phần tử cũng có thể có các thuộc tính giống như sau:
<p class=”gt lớp”>Content </p>
Các thuộc tính chứa thông tin bổ sung về phần tử mà bạn không muốn xuất hiện trong nội dung thực tế. Đây, class là tên thuộc tính và “gt lớp” là giá trị thuộc tính . Thuộc tính class cho phép bạn cung cấp cho phần tử một số nhận dạng không phải duy nhất có thể được sử dụng để nhắm mục tiêu nó (và bất kỳ phần tử nào khác có cùng lớp giá trị) với thông tin kiểu và những thứ khác.
Các phần tử lồng vào nhau
Bạn cũng có thể đặt các phần tử bên trong các phần tử khác - điều này được gọi là lồng nhau. Nếu chúng ta muốn nói rằng “con mèo của tôi rất đáng yêu”, chúng ta có thể bọc từ "rất" trong một yếu tố <strong>, có nghĩa là từ này cần được nhấn mạnh:
<p>Con mèo của tôi <strong>rất</strong> đáng yêu. </p>
Tuy nhiên, bạn cần đảm bảo rằng các phần tử của bạn được lồng đúng cách. Trong ví dụ trên, chúng ta đã mở phần tử <p> trước, sau đó đến phần tử <strong>. Do đó, chúng ta phải đóng phần tử <strong> trước, sau đó mới đóng đến phần tử
Các phần tử phải mở và đóng một cách chính xác để chúng rõ ràng bên trong hoặc bên ngoài nhau. Nếu chúng trùng lặp như được hiển thị ở trên, thì trình duyệt web của bạn sẽ cố gắng đoán tốt nhất những gì bạn đang cố gắng nói, điều này có thể dẫn đến kết quả không mong muốn. Vì vậy, đừng làm điều đó!
Các phần tử trống
Một số phần tử không có nội dung và được gọi là phần tử rỗng . Lấy phần tử <img> mà chúng tôi đã có trong trang HTML của mình:
<img src=" images/my-web-icon.png" alt="My site image"/>
Điều này chứa hai thuộc tính, nhưng không có thẻ đóng </img> và không có nội dung bên trong. Điều này là do một phần tử hình ảnh không bao bọc nội dung để ảnh hưởng đến nó. Mục đích của nó là nhúng một hình ảnh vào trang HTML ở nơi nó xuất hiện.
Thẻ <div> trong HTML:
Phần tử <div> là một phần tử khối, mặc định thì phần tử khối này không có bất kỳ một định dạng gì, cho nên nó thường được dùng để nhóm nhiều phần tử HTML lại với nhau.
Ý nghĩa và tác dụng của thẻ div:
● Thẻ div được sử dụng để tiện lợi cho việc định dạng
Ví dụ:
<div style="front-size:14px; color:blue">
<u> Thẻ div là gì ? </u>
<i> Ý nghĩa thẻ div trong HTML là gì </i>
<p> Đây là ví dụ cách sử dụng thẻ div trong HTML </p>
</div>
Trong ví dụ trên, nguyên cụm văn bản gồm 3 dòng được nhóm lại với nhau. Chúng có chung định dạng cỡ chữ là 14pt và màu chữ là xanh da trời. Dòng đầu tiên của cụm văn bản có định dạng chữ gạch chân, dòng thứ 2 chữ nghiêng và dòng 3 chữ bình thường.
● Thẻ div được sử dụng để thiết kế bố cục cho trang web
Ví dụ:
Để tạo ba khối riêng biệt chúng ta cần phải sử dụng ba phần tử div
<div class="Tieu de">
<h3>VU GIANG BLOG</h3>
<p>TRANG WEB CHIA SẺ TÀI LIỆU MIỄN PHÍ</p>
</div>
<div class ="Noi dung">
<h4> <i>ĐÂY LÀ NỘI DUNG WEBSITE CỦA TÔI>/i> </h4>
<p> Đoạn văn bản</p>
<p> Đoạn văn tiếp theo</p>
</div>
<div class ="Chan trang">Thông tin liên hệ tác giả</div>
Thẻ <span> trong HTML
Thẻ <span> được dùng để nhóm các phần tử nội tuyến (chủ yếu là văn bản) lại với nhau, tiện cho việc định dạng
Ví dụ:
<p>Tài liệu <span style="font-size:28px;color:red;" >quản lý nhà nước</span> tải miễn phí.</p>
Thẻ <span> nhóm đoạn văn bản “quản lý nhà nước” với định dạng về cỡ chữ là 28 và chữ màu đỏ.
Thẻ hình ảnh <img> trong HTML
Hãy chuyển sự chú ý của chúng ta sang thẻ <img>
<img src="images/My-web-icon.png" alt="My web image" style=”width:500pt;height:600pt” >
Thẻ <img> nhúng một hình ảnh vào trang web của chúng ta ở vị trí mà nó xuất hiện. Nó thực hiện điều này thông qua thuộc tính src (source), chứa đường dẫn đến tệp hình ảnh của chúng ta.
●Thuộc tính src: Đây là thuộc tính bắt buộc phải có. Nó là thuộc tính khai báo đường dẫn file ảnh. Các loại tập tin hình ảnh được hỗ trợ gồm png, jpg, gif,… Giá trị của URL hình ảnh có thể để ở dạng đường dẫn tuyệt đối hoặc tương đối.
Ví dụ:
Đường dẫn tuyệt đối:
<img src="https://www.vugiangblog.com/uploads/logo-web.png" alt="My web image" >
Đường dẫn tương đối:
<img src="images/My-web-icon.png" alt="My web image" style=”width:500pt;height:600pt” >
●Thuộc tính Alt: chỉ định văn bản thay thế cho hình ảnh trong trường hợp nếu hình ảnh không hiển thị và người dùng không thể nhìn thấy hình ảnh, có thể vì những lý do sau:
- Do kết nối chậm
- Người dùng bị khiếm thị đáng kể thường sử dụng các công cụ được gọi là trình đọc màn hình để đọc văn bản thay thế cho họ.
- Đã xảy ra sự cố khiến hình ảnh không hiển thị. Ví dụ: cố tình thay đổi đường dẫn bên trong thuộc tính src của bạn để làm cho nó không chính xác.
Các từ khóa cho văn bản thay thế là "văn bản mô tả". Văn bản thay thế mà bạn viết phải cung cấp cho người đọc đủ thông tin để có một ý tưởng tốt về những gì hình ảnh truyền tải.
● Sử dụng thuộc tính Style để chỉ định chiều rộng và chiều cao của hình ảnh trong HTML
Đánh dấu văn bản
Phần này sẽ bao gồm một số phần tử HTML cần thiết mà bạn sẽ sử dụng để đánh dấu văn bản.
Đề mục <h1> - <h6>
Phần tử tiêu đề cho phép bạn chỉ định rằng một số phần nhất định trong nội dung của bạn là tiêu đề - hoặc tiêu đề phụ. Tương tự như cách một cuốn sách có tiêu đề chính, tiêu đề chương và phụ đề, tài liệu HTML cũng tương tự như vậy. HTML chứa 6 cấp tiêu đề, <h1> - <h6>, mặc dù bạn thường chỉ sử dụng tối đa 3 đến 4:
<h1>Tiêu đề chính trên web của tôi</h1>
<h2> Tiêu đề cấp cao nhất trên web của tôi </h2>
<h3> Tiêu đề phụ của tôi trên web của tôi </h3>
<h4> Tiêu đề con trong tiêu đề phụ trên web của tôi </h4>
Lưu ý:
● Bất kỳ thứ gì trong HTML giữa là một nhận xét HTML . Trình duyệt bỏ qua các nhận xét khi nó hiển thị mã. Nói cách khác, chúng không hiển thị trên trang - chỉ trong mã. Nhận xét HTML là một cách để bạn viết các ghi chú hữu ích về mã hoặc logic của bạn.
● Bạn sẽ thấy rằng tiêu đề cấp 1 của mình có một phong cách ngầm định. Không sử dụng các phần tử tiêu đề để làm cho văn bản lớn hơn hoặc in đậm, vì chúng được sử dụng cho khả năng truy cập và các lý do khác như SEO . Cố gắng tạo một chuỗi tiêu đề có ý nghĩa trên các trang của bạn mà không bỏ qua các cấp.
Đoạn văn <p>
Như đã giải thích ở trên, <p> các phần tử dùng để chứa các đoạn văn bản; bạn sẽ sử dụng những điều này thường xuyên khi đánh dấu nội dung văn bản thông thường:
<p> Đây là một đoạn văn giản đơn </p>
Thêm văn bản mẫu của bạn (bạn nên có văn bản từ Trang web của bạn sẽ trông như thế nào? ) Vào một hoặc một vài đoạn văn, đặt ngay bên dưới phần tử <img> của bạn.
Danh sách trong HTML, thẻ <ol> và <ul> , phần tử <li>
Nhiều nội dung của web là danh sách và HTML có các yếu tố đặc biệt cho những thứ này. Đánh dấu danh sách luôn bao gồm ít nhất 2 yếu tố. Các loại danh sách phổ biến nhất là danh sách có thứ tự và không có thứ tự:
Danh sách không có thứ tự dành cho danh sách mà thứ tự của các mục không quan trọng, chẳng hạn như danh sách mua sắm. Chúng được bao bọc trong một phần tử <ul>
Danh sách có thứ tự dành cho danh sách mà thứ tự của các mục có ý nghĩa quan trọng, chẳng hạn như công thức nấu ăn. Chúng được bao bọc trong một phần tử <ol>
Danh sách là một tập hợp các phần tử (ví dụ danh sách các học sinh, các món ăn, các môn học ...). Mỗi mục bên trong danh sách được đặt bên trong một phần tử <li> (mục danh sách).
Ví dụ: về danh sách có thứ tự:
<ol>
<li>HTML là gì? </li>
<li>CSS là gì? </li>
<li>Ngôn ngữ Javascript là gì? </li>
<li>Ngôn ngữ lập trình C# là gì? </li>
</ol>
Ví dụ: Nếu chúng ta muốn biến một phần của đoạn đoạn văn sau thành một danh sách
<p> Tại Công ty của chúng tôi, chúng tôi là sự kết hợp gồm các nhà công nghệ, luật sư, nhà kinh tế và nhà xây dựng đang làm việc cùng nhau…</p>
Chúng ta có thể sửa đổi đánh dấu này.
<p> Tại Công ty của chúng tôi, chúng tôi là sự kết hợp gồm </p>
<ul>
<li> nhà công nghệ </li>
<li> luật sư </li>
<li> nhà kinh tế </li>
<li> nhà xây dựng </li>
</ul>
<p> đang làm việc cùng nhau…</p>
Liên kết trong HTML
Các liên kết trong HTML được gọi là những siêu liên kết. Siêu liên kết là một đoạn văn bản hoặc một hình ảnh mà khi bạn nhấn vào đó thì sẽ chuyển tới một trang web khác.
Các liên kết rất quan trọng - chúng là những gì làm cho web trở nên tuyệt vời hơn. Để thêm một liên kết, chúng ta cần sử dụng một phần tử đơn giản - <a>- "a" là dạng viết tắt của "anchor". Để biến văn bản trong đoạn văn của bạn thành một liên kết, hãy làm theo các bước sau:
Chọn một số văn bản, chẳng hạn chúng tôi đã chọn văn bản "Chuyển đến website của tôi".
Gói văn bản trong một phần tử <a>, như được hiển thị bên dưới:
<a> Chuyển đến website của tôi </a>
Cung cấp cho phần tử <a> một thuộc tính href. Thuộc tính href chứa địa chỉ của liên kết, như được hiển thị bên dưới:
<a href=""> Chuyển đến website của tôi </a>
Điền vào giá trị của thuộc tính này với địa chỉ web mà bạn muốn liên kết đến:
<a href="https://www.vugiangblog.com"> Chuyển đến website của tôi </a>
Lưu ý: href thoạt đầu có thể xuất hiện như một lựa chọn khá khó hiểu cho tên thuộc tính. Nếu bạn gặp khó khăn khi nhớ nó, hãy nhớ rằng nó là viết tắt của hypertext reference.