Code Tu Tam

HTML cơ bản (phần 2)

Nguyễn Quang Anh
Rate this post

Liên kết HTML

Khái niệm

Các liên kết được tìm thấy trong gần như tất cả các trang web. Liên kết cho phép người dùng nhấp theo cách của họ từ trang này sang trang khác.

Liên kết HTML – Siêu liên kết

Các liên kết HTML là các siêu liên kết.

Bạn có thể nhấp vào một liên kết và chuyển đến một tài liệu khác

Khi bạn di chuyển chuột qua một liên kết, mũi tên chuột sẽ biến thành một bàn tay nhỏ.

Cú phápThẻ HTML <a>xác định một siêu liên kết. Nó có cú pháp sau:

<a href="url">link text</a>
Thuộc tính mục tiêu

Theo mặc định, trang được liên kết sẽ được hiển thị trong cửa sổ trình duyệt hiện tại. Để thay đổi điều này, bạn phải chỉ định một mục tiêu khác cho liên kết.

Thuộc targettính chỉ định nơi để mở tài liệu được liên kết.

Thuộc targettính có thể có một trong các giá trị sau:

<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>

Link color

Khái niệm
Theo mặc định, một liên kết sẽ xuất hiện như thế này (trong tất cả các trình duyệt):
Một liên kết không được truy cập được gạch chân và có màu xanh lam

Một liên kết đã truy cập được gạch chân và có màu tím

Một liên kết đang hoạt động được gạch chân và có màu đỏ

Bạn có thể thay đổi màu trạng thái liên kết bằng cách sử dụng CSS

Cú pháp

<style>
a:link {
  color: green;
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: pink;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: red;
  background-color: transparent;
  text-decoration: underline;
}

a:active {
  color: yellow;
  background-color: transparent;
  text-decoration: underline;
}
</style>

Link Bookmarks

Khái niệm

Dấu trang có thể hữu ích nếu một trang web rất dài.

Để tạo dấu trang – trước tiên hãy tạo dấu trang, sau đó thêm liên kết vào đó.

Khi liên kết được nhấp vào, trang sẽ cuộn xuống hoặc lên đến vị trí có dấu trang.

Cú pháp


<h2 id="C4">Chapter 4</h2>

Sau đó, thêm một liên kết đến dấu trang (“Chuyển đến Chương 4”), từ trong cùng một trang:

<a href="#C4">Jump to Chapter 4</a>

Bạn cũng có thể thêm liên kết đến dấu trang trên một trang khác:

<a href="html_demo.html#C4">Jump to Chapter 4</a>

HTML Image

Giới thiệu

Hình ảnh có thể cải thiện thiết kế và giao diện của một trang web.

Cú pháp

Thẻ HTML <img>được sử dụng để nhúng một hình ảnh vào một trang web.

Hình ảnh không được chèn vào một trang web về mặt kỹ thuật; hình ảnh được liên kết với các trang web. Thẻ <img>tạo không gian lưu giữ cho hình ảnh được tham chiếu.

Thẻ <img>trống, nó chỉ chứa các thuộc tính và không có thẻ đóng.

HTML Favicon

Khái niệm

Biểu tượng yêu thích là một hình ảnh nhỏ được hiển thị bên cạnh tiêu đề trang trong tab trình duyệt.

Cú pháp

Để thêm biểu tượng yêu thích vào trang web của bạn, hãy lưu hình ảnh biểu tượng yêu thích của bạn vào thư mục gốc của máy chủ web hoặc tạo một thư mục trong thư mục gốc được gọi là hình ảnh và lưu hình ảnh biểu tượng yêu thích của bạn trong thư mục này. Tên phổ biến cho hình ảnh favicon là “favicon.ico”.

Tiếp theo, thêm một <link>phần tử vào tệp “index.html” của bạn, sau <title>phần tử, như sau:

<!DOCTYPE html>
<html>
<head>
  <title>My Page Title</title>
  <link rel="icon" type="image/x-icon" href="/images/favicon.ico">
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

 

HTML Tablet

Khái niệm

Bảng HTML cho phép các nhà phát triển web sắp xếp dữ liệu thành các hàng và cột.

Ô và bảng

Mỗi ô trong bảng được xác định bởi một <td>và một </td>thẻ.

td là viết tắt của dữ liệu bảng.

Mọi thứ giữa <td>và </td>là nội dung của ô trong bảng.

<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
</table>

 

HTML Block & Inline


Khái niệm

Mọi phần tử HTML đều có giá trị hiển thị mặc định, tùy thuộc vào loại phần tử đó là gì.

Có hai giá trị hiển thị: khối và nội tuyến.

Phần tử cấp khối

Phần tử cấp khối luôn bắt đầu trên một dòng mới và trình duyệt sẽ tự động thêm một số khoảng trắng (lề) trước và sau phần tử.

Một phần tử cấp khối luôn chiếm toàn bộ chiều rộng có sẵn (trải dài sang trái và phải hết mức có thể).

Hai phần tử khối thường được sử dụng là: <p> và <div>.

Phần <p>tử xác định một đoạn văn trong tài liệu HTML.

Phần <div>tử xác định một bộ phận hoặc một phần trong tài liệu HTML.

 

Phần tử nội tuyến

Một phần tử nội tuyến không bắt đầu trên một dòng mới.

Một phần tử nội tuyến chỉ chiếm nhiều chiều rộng khi cần thiết.

Đây là một phần tử <span> bên trong một đoạn văn.

Phần tử div

Phần <div>tử thường được sử dụng làm vùng chứa cho các phần tử HTML khác.

Phần <div>tử không có thuộc tính bắt buộc, nhưng style, classvà idlà thông dụng.

Khi được sử dụng cùng với CSS, <div>phần tử có thể được sử dụng để tạo kiểu cho các khối nội dung:

<div style="background-color:black;color:white;padding:20px;">
  <h2>London</h2>
  <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>

 

Exit mobile version