KHOAN ĐÃ! Trước khi đọc bài viết bạn có đang tò mò cách học html + css nhanh hiệu quả nhất mà mình từng trải qua?
Bạn đang tự tìm hiểu về html và css nhưng kiến thức rời rạc, bạn học cảm thấy không được bài bản, việc học nhàm chán và kém hiệu quả? Mình cũng từng tự học như bạn. Mình không bảo tự học là không tốt nhưng nó làm mình mất rất nhiều thời gian hơn so với việc tham gia một khóa học theo cách bài bản. Vào một ngày Mình quyết định đầu tư cho bản thân bằng cách bỏ ít tiền tham gia khóa học html và css của thầy Nguyễn Đức Việt . Kết quả mình học html và css nhanh và hiệu quả hơn rất nhiều. Thầy dạy dễ hiểu , kiến thức thực tiễn cho việc đi làm chứ không có lý thuyết suông. Các bạn có điều kiện nên đầu tư ít tiền cho bản thân để quá trình học html và css nói riêng , lập trình web nói chung để tiến nhanh và hiệu quả nhất trên con đường học lập trình web của mình nhé! Chúc bạn học tốt!
>>>> Tham khảo khóa học đã giúp mình tại:
unica.vn
Description
Khóa học HTML5/CSS3 BOOTSTRAP 4 và cắt Web từ file thiết kế giúp nắm vững kiến thức về CSS HTML hiểu rõ Bootstrap và kỹ năng cắt Web với Illustrate Pix
Chương trình hợp tác với Unica Mã giảm giá lên đến 40% chỉ dành riêng cho độc giả của webaffiliatevn.com: WA40
Còn bây giờ thì vào bài viết thôi!
1. Thẻ <a> trong HTML
Thẻ <a> trong html được sử dụng để tạo siêu liên kết đến một tài liệu khác hoặc một nơi nào đó trong tài liệu hiện tại. (Khi người dùng bấm vào liên kết thì sẽ được chuyển đến tài liệu đó)
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<title>Ví dụ về thẻ a trong HTML</title>
</head>
<body>
<p>Đây là link của Webaffiliatevn <a href = "https://webaffiliatevn.com/">Affiliatevn.com</a></p>
</body>
</html>
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”NWNWQYJ” default_tab=”html,result” user=”davidkhai”]See the Pen <a href=’https://codepen.io/davidkhai/pen/NWNWQYJ’>NWNWQYJ</a> by DavidKhai (<a href=’https://codepen.io/davidkhai’>@davidkhai</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]
2. Các thuộc tính của thẻ <a>
Thẻ <a> HTML cũng hỗ trợ các thuộc tính bổ sung sau:
| Thuộc tính | Giá trị | Sự miêu tả |
|---|---|---|
| charset
(bảng chữ cái) |
character_encoding
(mã hóa ký tự) |
Xác định mã hóa ký tự của tài liệu được liên kết. |
| coords | if shape = “rect” then coords = “left, top, right, bottom”
if shape = “circ” then coords = “centerx,centery,radius” if shape = “poly” then coords = “x1, y1, x2, y2,..,xn,yn” |
Chỉ định các tọa độ thích hợp với thuộc tính shape để xác định một vùng của hình ảnh cho bản đồ hình ảnh. |
| download
(tải xuống) |
filename
(tên tệp) |
Điều này tải xuống mục tiêu khi người dùng nhấp vào siêu liên kết. |
| href | URL | Chỉ định URL của một trang mà liên kết muốn đi đến. |
| hreflang | language_code
(ngôn ngữ của url) |
Mã ngôn ngữ của URL đích. |
| media
(phương tiện truyền thông) |
media_query
(phương tiện truyền thông) |
Nó chỉ định phương tiện nào tài liệu được liên kết được tối ưu hóa cho |
| name | tên phần | Đánh dấu một khu vực của trang mà một liên kết nhảy tới. |
| rel | alternate designates stylesheet start next prev contents index glossary copyright chapter section subsection appendix help bookmark |
Mô tả mối quan hệ giữa tài liệu hiện tại và URL đích. |
| rev | alternate designates stylesheet start next prev contents index glossary copyright chapter section subsection appendix help bookmark |
Chỉ định mối quan hệ giữa URL mục tiêu và tài liệu hiện tại. |
| shape
(hình dạng) |
rect rectangle circ circle poly polygon |
Chỉ định hình dạng của bản đồ hình ảnh |
| target | _blank _parent _elf _top |
Nơi mở URL mục tiêu.
_blank – URL mục tiêu sẽ mở trong một cửa sổ mới. _self – URL mục tiêu sẽ mở trong cùng một khung khi nó được nhấp vào. _parent – URL mục tiêu sẽ mở trong bộ khung chính. _top – URL mục tiêu sẽ mở trong toàn bộ cửa sổ. |
| type | mime_type | Chỉ định loại MIME (Tiện ích mở rộng thư Internet đa năng) của URL mục tiêu |
Nhưng trong đó có 3 thuộc tính cơ bản được sử dụng nhiều nhất.
Dưới đây là bảng mô tả sơ lược về ba thuộc tính đó: href, download, target
2.1 Thuộc tính href
Thuộc tính href dùng để xác định đường dẫn đến tài liệu mà bạn muốn chuyển tới.
(Đường dẫn ở đây có thể là đường dẫn tương đối hoặc đường dẫn tuyệt đối)
Ví dụ:
<!DOCTYPE html>
<html>
<body>
<p>- Liên kết bên dưới được xác định bởi đường dẫn tuyệt đối</p>
<a href="https://webaffiliatevn.com/css/css.html">Tài liệu học CSS</a>
<p>- Liên kết bên dưới được xác định bởi đường dẫn tương đối</p>
<a href="../javascript/javascript.html">Tài liệu học JavaScript</a>
</body>
</html>
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”oNxNKJo” default_tab=”html,result” user=”davidkhai”]See the Pen <a href=’https://codepen.io/davidkhai/pen/oNxNKJo’>oNxNKJo</a> by DavidKhai (<a href=’https://codepen.io/davidkhai’>@davidkhai</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]
Ngoài ra, thuộc tính href cũng có thể dùng để xác định một vị trí bên trong trang web mà bạn muốn di chuyển tới (vị trí của phần tử được xác định dựa giá trị thuộc tính id của phần tử)
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%20%20%20%20%20%20%20%20h1%7Bfont-size%3A25px%3B%7D%0A%20%20%20%20%20%20%20%20p%7Bfont-size%3A15px%3B%7D%0A%20%20%20%20%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<style>" title="<style>" />
</head>
<body>
<a href="#javascript">Di chuyển đến phần tử có thuộc tính id với giá trị là "javascript"</a>
<h1 id="html">1. Tài liệu học HTML</h1>
...
<h1 id="css">2. Tài liệu học CSS</h1>
...
<h1 id="javascript">3. Tài liệu học JavaScript</h1>
...
</body>
</html>
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”oNxNKVp” default_tab=”html,result” user=”davidkhai”]See the Pen <a href=’https://codepen.io/davidkhai/pen/oNxNKVp’>oNxNKVp</a> by DavidKhai (<a href=’https://codepen.io/davidkhai’>@davidkhai</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]
2.3 Thuộc tính download
Thuộc tính download xác định việc khi người dùng bấm vào liên kết thì tài liệu của liên kết đó sẽ tự động được tải về.
Ví dụ:
<!DOCTYPE html>
<html>
<body>
<a href="https://webaffiliatevn.com/wp-content/uploads/2020/07/Microsite-la-gi-2.png" download>Nhấn vào đây !!!</a>
</body>
</html>
[codepen_embed height=”265″ theme_id=”dark” slug_hash=”jOqOgoO” default_tab=”html,result” user=”davidkhai”]See the Pen <a href=’https://codepen.io/davidkhai/pen/jOqOgoO’>jOqOgoO</a> by DavidKhai (<a href=’https://codepen.io/davidkhai’>@davidkhai</a>) on <a href=’https://codepen.io’>CodePen</a>.[/codepen_embed]
Lưu ý: Ta không cần phải xác định phần đuôi của tập tin vì hệ thống sẽ tự động làm việc đó.
2.3 Thuộc tính target
Thuộc tính target dùng để xác định nơi mà tài liệu sẽ được mở.
Thuộc tính target có bốn giá trị cơ bản:
| _blank | Mở tài liệu trong một tab mới | |
| _self | Mở tài liệu trong khung hiện tại | |
| _parent | Mở tài liệu trong khung cha của khung hiện tại | |
| _top | Mở tài liệu trong tab hiện tại |
3. Định dạng CSS mặc định
Hầu hết các trình duyệt sẽ hiển thị phần tử <a> với định dạng CSS như sau:
a:link, a:visited {
color: (internal value);
text-decoration: underline;
cursor: auto;
}
a:link:active, a:visited:active {
color: (internal value);
}
>>> Xem thêm:
