Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Sử dụng hình ảnh và liên kết

Sử dụng hình ảnh và liên kết


Ngày 23 Tháng 12 Năm 2019

HTML Bài 5

Xin chào các bạn quay lại blog của mình. Trong bài này mình sẽ giới thiệu các bạn về thẻ <img> và thẻ <a>.Sau này làm web thì các bạn sẽ tiếp xúc rất nhiều về hai thẻ này. Bây giờ hãy cùng nhau tìm hiểu nhé!

1) Thẻ Hình ảnh :

Hình ảnh được xem như là nội dung phổ biến trong web nó xuất hiện hầu như ở mọi trang web. Các bạn hãy hình dung một trang web toàn chữ thì thật không bắt mắt và cũng như không có gì minh họa cho những nội dung của chúng ta. Theo mình được biết thì ngày nay các trang web hầu như sử dụng hình ảnh để làm nội dung và chữ thì sẽ càng ít càng tốt do cuộc sống ngày nay bận rộn nên hầu như mọi người xem web chỉ chú ý những ý chính và thường không xem chữ nhiều.
Thẻ hình ảnh được tạo bởi thẻ <img>. Đây là thẻ không có thẻ đóng nhé các bạn. Để mà hiển thị được hình ảnh thì chúng ta bắt buộc phải gán thuộc tính src và cộng thêm thuộc tính alt cho thẻ.

Như các bạn thấy thì thẻ hình ảnh có thuộc tính src để xác định nơi mà chúng ta chứa hình ảnh (Có thể là trên web hoặc có thể trên máy tính của mình). Thuộc tính alt thì xác định thêm thông tin về hình ảnh (Nếu như hình ảnh không hiện thị thì những dòng chữ trong thuộc tính này sẽ xuất hiện). Bây giờ hãy xem ví dụ để hiểu rõ hơn nhé:

Đầu tiên các bạn tạo cho mình 1 thư mục có cấu trúc như sau:

Ở đây thì các bạn có thể lấy bất cứ hình ảnh nào cũng được nhưng quan trọng là phải đúng đường dẫn thì trình duyệt mới hiện thị hình ảnh được nhé.

Bước tiếp theo là mình tạo cấu trúc cho file HTML bài 5:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML bài 5</title>
</head>
<body>
<h4>Thẻ Hình Ảnh</h4>
</body>
</html>

Sau đó các bạn tạo chèn thẻ <img> vào trong file bai5.html:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML bài 5</title>
</head>
<body>
<h4>Thẻ Hình Ảnh</h4>
<img src="nui.jpg" alt="Đồi núi tuyết" />
</body>
</html>

Cuối cùng chúng ta sẽ có kết quả như sau:

Ngoài 2 thuộc tính srcalt của thẻ <img> thì mình sẽ giới thiệu thêm một số thuộc tính khác của thẻ hình ảnh. Đó là thuộc tính heightwidth giúp chúng ta điều chỉnh độ cao và độ dài của hình ảnh sao cho phù hợp với nội dung của trang web. Các bạn xem ví dụ để nắm rõ hơn nhé!

See the Pen Thẻ hình ảnh với chiều cao va chieu dài by haycuoilennao19 (@haycuoilennao19) on CodePen.

Có một chú ý nhỏ là không nhất thiết các bạn phải lưu hình ảnh vào máy tính rồi sau đó mới có thể sử dụng. Ví dụ dưới đây giúp các bạn hiểu rõ hơn cách lấy hình ảnh từ đường dẫn trên trang web để chèn vào file HTML của mình :

Mã Code HTML
<img src="https://www.dl.dropboxusercontent.com/s/tsy249ore8fnjzm/lake-4697441_1280.jpg?dl=0 />
Hiện thị trên Web

Một số lưu ý khi sử dụng hình ảnh cho trang web:

  • Đa số những web thông dụng thì thường lưu hình ảnh dưới dạng là jpeg , gif, png và svg. Các bạn cũng thể chọn những định dạng khác nhưng như vậy nhiều khi sẽ làm kích thước hình ảnh của chúng ta lớn làm ảnh hưởng đến quá trình tải trang.
  • Dùng thuộc tính alt trong thẻ hình ảnh sẽ giúp cho trang web của các bạn được Goole dễ tìm thấy hơn. Nhưng đừng vì vậy mà ghi dài dòng nhằm để SEO tốt hơn. Hình ảnh với miêu tả như vậy sẽ bị cho là đánh giá không tốt. Các bạn cứ nhớ khi dùng thẻ <img> thì luôn kèm theo thuộc tính alt với miêu tả ngắn gọn xúc tích.
  • Khi sử dụng hình ảnh các bạn nên cân nhắc bản quyền. Nhiều hình ảnh phải có quyền thì mình mới sử dụng được, nên mình sẽ giới thiệu các bạn một số trang giúp sử dụng hình ảnh chất lượng cao miễn phí như là:
    • Pexels: cung cấp kho ảnh chất lượng cao và hoàn toàn miễn phí có giấy phép Pexels.
    • Pixabay: Cung cấp những hình ảnh chất lượng với nhiều dạng định dạng khác nhau.
    • Unsplash: Cung cấp nhiều hình ảnh miễn phí chất lượng tốt.
    • Freepik: Cung cấp những hình ảnh định svg chất lượng cao. (Các bạn có thể dùng miễn phí hoặc trả phí)
  • Các bạn nên giảm kích thước hình ảnh để giúp trang web có thể tải và chạy nhanh hơn với một số trang web sau đây:

Mình đã giới thiệu sơ lược qua cách đưa hình ảnh vào trang web. Khi học CSS mình sẽ giới thiệu chi tiết hơn về cách dùng hình ảnh cho nội dung của trang. Tiếp theo chúng ta sẽ tiếp tục tìm hiểu về thẻ đường dẫn được sử dụng đa số trong các trang web.

2) Thẻ đường dẫn :

Chúng ta có thể viết những đường dẫn tới những trang web khác hoặc một phần nội dung trong trang web bằng thẻ <a>. Thẻ này cũng có những thuộc tính bắt buộc như thẻ hình ảnh (src). Đó là thuộc tính href với giá trị thuộc tính dùng để xác định đường dẫn mà chúng ta muốn hướng tới. Chữ nội dung nằm giữa thẻ <a> là nơi mà người dùng nhấp vào để chuyển tiếp đến trang web khác. Để dễ hình dung hơn thì mình sẽ có hình ảnh minh họa cấu trúc như sau:

Với thuộc tính href thì chúng ta có thể chèn nhiều loại đường dẫn khác nhau (Cái này mình sẽ nói rõ hơn ở phần sau). Chữ đại diện cho đường dẫn có thể là chữ hoặc hình ảnh . Để làm rõ hơn chúng ta cùng đi vào ví dụ nhé:

Mã Code HTML

Đại diện đường dẫn là chữ:

<a href="https://www.google.com.vn/">Google</a>

Đại diện đường dẫn là hình ảnh:

<a href="https://www.google.com.vn/"><img src="https://res.cloudinary.com/dn4nxz7f0/image/upload/v1576991629/B%C3%A0i%205/search_1_li5c4h.svg" /></a>
Hiện thị trên Web

Đại diện đường dẫn là chữ:

Google

Đại diện đường dẫn là hình ảnh:

image google icon

Tiếp theo mình sẽ cùng nhau tìm hiểu về cách tạo đường dẫn liên kết với các trang HTML trong thư mục.

Chúng ta sẽ tạo một thư mục chứa hai file HTML là trangchinh.html và gioithieu.html.

Sau đó chúng ta thêm đường dẫn từ trang trangchinh.html đến trang gioithieu.html bằng cách chèn đoạn code sau đây:

trangchinh.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML bài 5</title>
</head>
<body>
<h4>Đường dẫn đến trang giới thiệu</h4>
<a href="gioithieu.html">Giới thiệu</a>
</body>
</html>

gioithieu.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML bài 5</title>
</head>
<body>
<p>Xin chào các bạn đến với trang web của mình. Chúc các bạn học tập thật tốt nhé!</p>
</body>
</html>

Khi các bạn nhấn vào đường dẫn liên kết Giới thiệutrangchinh.html thì trình duyệt sẽ tự động chuyển sang trang gioithieu.html như hình ở dưới đây:

Một số thuộc tính của thẻ đường dẫn:
Thuộc tính target trong thẻ đường dẫn:

Thuộc tính này có tác dụng khi người dùng nhấp vào đường dẫn liên kết của chúng ta thì trình duyệt sẽ hiển thị trang web được liên kết bằng một cửa sổ hoặc một thẻ mới.

Mã Code HTML
<a href="https://www.google.com.vn/" target="_blank">Mở cửa sổ mới tới trang Google</a>

Giá trị mailto: trong thuộc tính href:

Khi người dùng nhấp vào liên kết có giá trị thuộc tính này thì nó sẽ khởi động chương trình email có sẵn trong trong máy và tự động điền địa chỉ gửi mail được lấy trong giá trị thuộc tính. Các bạn xem ví dụ để nắm rõ hơn nhé:

Mã Code HTML
<a href="mailto:[email protected]" >Gửi mail tới niềm vui lập trình</a>
Giá trị tel: trong thuộc tính href:

Khi người dùng nhấp vào liên kết có giá trị thuộc tính này thì nó sẽ tự động gọi đến số mà chúng ta đã chèn vào liên kết. Cái này thì mình thấy thường sử dụng trên điện thoại là chủ yếu. Các bạn xem ví dụ để nắm rõ hơn nhé:

Mã Code HTML
<a href="tel:+84.123.456789" >Gửi mail tới niềm vui lập trình</a>
Thuộc tính download :

Khi chúng ta có những hình ảnh, văn bản, pdf... cho phép người dùng tải xuống để sử dụng thì thuộc tính này có tác dụng là khi người dùng nhấp vào đường dẫn vào thì nó sẽ tự động tải xuống máy của họ. Các bạn xem ví dụ để nắm rõ hơn nhé:

Mã Code HTML
<a href="https://res.cloudinary.com/dn4nxz7f0/image/upload/v1576917325/B%C3%A0i%205/nui_aeo3ec.jpg" download>Gửi mail tới niềm vui lập trình</a>

Bài tập HTML:

Sau đây mình sẽ có bài tập nhỏ giúp các bạn nhớ những gì mà mình đã học trong ngày hôm nay.

  1. Đầu tiên là các bạn tạo cho mình một thư mục như sau nhé:

  2. Bước tiếp theo mình sẽ đưa đường dẫn để các bạn tải hình biển xuống máy (Các bạn có thể lấy tùy ý hình không nhất thiết phải giống mình nhé)

    Hình ảnh biển
    Các bạn sau đó lưu hình ảnh về máy theo hình ảnh dưới này nha:

  3. Sau đó thì mình sẽ hiển trang bien.html lên trình duyệt. Các bạn nhìn vào đó để chèn những đoạn code phù hợp nhé:
  4. Sau đó thì mình sẽ hiển trang gioithieu.html lên trình duyệt. Các bạn nhìn vào đó để chèn những đoạn code phù hợp nhé:

Đây là file lời giải của bài tập các bạn tham khảo. Nhưng trước khi xem hãy cố gắng hoàn thành bài tập để mình nhớ lâu hơn nhé!

Trang bien.html:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML bài 5</title>
</head>
<body>
<h4>Vẻ đẹp của biển(Tiêu đề h4)</h4>
<p>Ai đã một lần được ngắm cảnh mặt trời lên trên biển thì sẽ chẳng bao giờ quên được, đó là những khoảnh khắc vô cùng hùng vĩ của thiên nhiên ban tặng cho con người. Thiên nhiên vốn có nhiều cảnh đẹp, nhưng có lẽ hình ảnh mặt trời mọc trên biển ở đảo Cô Tô để lại trong tôi những ấn tượng sâu sắc khó quên.</p>
<img src="bien.jpeg" alt="Cảnh biển" width="400" height="400">
<p>Màu nước biển thay đổi nhanh chóng, dường như có bàn tay của người thợ nhuộm đang pha màu cho nước, đang từ màu xanh xỉn bàng bạc, nước biển bỗng nhiên rực lên một màu xanh tươi rói. Từng góc, nước biển đổi màu theo ánh sáng mặt trời. Ngay cả vài ba con tàu bé xíu đang buông trôi trên mặt biển cũng được tắm đẫm trong làn ánh sáng sớm mai ấy, mọi thứ như đang được tẩy trần trở nên trong veo, mát mẻ. Sau ánh sáng hình rẻ quạt, mặt trời hiện ra tròn trịa, vàng cam rực rỡ rồi từ từ lên cao dần, như thể đang được thổi bay lên vậy. </p>
<p><a href="gioithieu.html">Giới thiệu định nghĩa về biển</a></p>
<p><a href="https://toplist.vn/top-list/bai-van-ta-canh-bien-hay-nhat-19055.htm">Đường dẫn liên kết đến bài viết</a></p>
</body>
<html>

Trang gioithieu.html:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML bài 5</title>
</head>
<body>
<h4>Giới thiệu biển </h4>
<p>Biển nói chung là một vùng nước mặn rộng lớn nối liền với các đại dương, hoặc là các hồ lớn chứa nước mặn mà không có đường thông ra đại dương một cách tự nhiên như biển Caspi, biển Chết. Thuật ngữ này đôi khi cũng được sử dụng với một số hồ nước ngọt khép kín hoặc có đường thông tự nhiên ra biển cả như biển Galilee ở Israel là một hồ nước ngọt nhỏ không có đường thông tự nhiên ra đại dương hay Biển Hồ ở Campuchia. Thuật ngữ này được sử dụng trong đời sống thông thường như một từ đồng nghĩa với đại dương, như trong các câu biển nhiệt đới hay đi ra bờ biển, hoặc cụm từ nước biển là chỉ một cách rõ nét tới các vùng nước của đại dương nói chung. </p>
<p>Các ion phong phú nhất trong nước biển là clo và natri. Nước biển còn có magiê, sulfat, canxi, kali, và nhiều thành phần khác, một số có hàm lượng rất nhỏ. Độ mặn của nước biển thay đổi rất lớn. Biển có độ mặn thấp ở những lớp nước gần bề mặt và các cửa sông lớn, và cao hơn theo chiều sâu của đại dương, tuy nhiên, tỷ lệ tương đối của các muối hòa tan thay đổi nhỏ trên khắp các đại dương. Carbon dioxit từ không khí hiện đang được hấp thụ bởi biển với số lượng tăng dần, làm giảm độ pH nước biển trong một quá trình được gọi là axít hóa đại dương, quá trình này có khả năng gây thiệt hại cho các hệ sinh thái biển trong tương lai gần.</p>
</body>
<html>

Còn điều này mình quên nói là khi các bạn làm xong và lưu vào HTML5baitap.html. Thì để mở mình vào thư mục đã lưu file và nhấn trực tiếp vào thì trình duyệt sẽ tự động chạy file đó nhé.

Tổng kết:

Qua bài này chúng mình đã hiểu và nắm được thẻ hình ảnh và thẻ đường dẫn trong HTML. Bài tiếp theo mình sẽ hướng dẫn các bạn học về bảng trong HTML. Nếu các bạn có gì thì cứ liên hệ mình sẽ liên lạc với các bạn sớm nhất có thể!