Home Home » Kiến thức HTML

Hình ảnh trong HTML


Hình ảnh là rất quan trọng trong diễn tả và làm đẹp các khái niệm phức tạp theo một cách đơn giản nhất trên trang Web của bạn. Chương này sẽ đưa bạn qua các bước để sử dụng hình ảnh trong trang của mình.

Chèn hình ảnh trong HTML - Thẻ img trong HTML

Bạn có thể chèn bất cứ hình ảnh nào vào trang Web của bạn bằng cách sử dụng thẻ <img>. Dưới đây là cú pháp đơn giản để sử dụng thẻ này.
<img src="đường dẫn url tới nơi chứa hình ảnh" ... danh-sách-thuộc-tính/>
Thẻ <img> này là một thẻ trống, nghĩa là nó chỉ có thể chứa danh sách các thuộc tính và không có thẻ đóng.

Ví dụ

Bạn thử ví dụ sau:

<!DOCTYPE html>



<html>



<head>



<title>Hinh anh trong HTML</title>



</head>



<body>



<p>Vi du the img trong HTML.</p>



<img src="./images/logo3.png" alt="Hình ảnh trong HTML" />



</body>



</html>
Kết quả hiển thị:
Vi du the img trong HTML.
Hình ảnh trong HTML
Bạn có thể sử dụng file hình ảnh PNG, JPEG hoặc GIF trên cơ sở sở thích của mình nhưng chắc chắn rằng bạn xác định rõ tên file ảnh trong thuộc tính src. Tên file là phân biệt chữ hoa và thường.
Thuộc tính alt là một thuộc tính ủy quyền, nếu hình ảnh không hiển thị, nó sẽ xác định một văn bản thay thế cho hình ảnh đó.

Thiết lập vị trí của hình ảnh trong HTML

Chúng ta thường giữ tất cả hình ảnh trong một thư mục riêng. Vì thế hãy lưu các file HTML (test.htm) trong thư mục chính và tạo thư mục phụ imagetrong thư mục chính để lưu file hình ảnh (test.png).

Ví dụ

Giả sử vị trí tệp hình ảnh của chúng ta là "image/test.png", bạn thử ví dụ sau:

<!DOCTYPE html>



<html>



<head>



<title>Hinh anh trong HTML</title>



</head>



<body>



<p>Vi  du the img trong HTML.</p>



<img src="./images/logo3.png" alt="Hình ảnh trong HTML" />



</body>



</html>
Nó sẽ tạo ra kết quả là:
Vi du the img trong HTML.
Hình ảnh trong HTML

Thiết lập chiều cao/độ rộng hình ảnh trong HTML

Bạn có thể thiết lập chiều cao/độ rộng của hình ảnh trên cơ sở sử dụng thuộc tính width vàheight. Bạn có thể xác định chiều độ rộng, chiều cao của hình sử dụng mối quan hệ hoặc là với Pixel hoặc là với kích thước thật của hình đó.

Ví dụ


<!DOCTYPE html>



<html>



<head>



<title>Thiet lap chieu cao va do rong hinh anh</title>



</head>



<body>



<p>Vi du xac dinh do rong va chieu cao cho hinh anh</p>



<img src="./images/logo3.png" alt="Hình ảnh trong HTML" width="150" height="100"/>



</body>



</html>
Kết quả hiển thị là:
Vi du xac dinh do rong va chieu cao cho hinh anh
Hình ảnh trong HTML

Thiết lập Border cho hình ảnh trong HTML

Theo mặc định thì sẽ có một Border quanh hình ảnh, bạn có thể xác định độ dày của viền bằng Pixel sử dụng thuộc tính border. Nếu độ dày bằng 0, nghĩa là sẽ không có Border quanh hình ảnh.

Ví dụ


<!DOCTYPE html>



<html>



<head>



<title>Thiet lap border cho hinh anh trong HTML</title>



</head>



<body>



<p>Vi du thiet lap border cho hinh anh</p>



<img src="./images/logo3.png" alt="Hình ảnh trong HTML" border="3"/>



</body>



</html>
Chạy đoạn mã trên sẽ tạo ra kết quả sau:
Vi du thiet lap border cho hinh anh
Hình ảnh trong HTML

Căn chỉnh hình ảnh trong HTML

Theo mặc định thì hình ảnh sẽ được căn chỉnh theo cạnh trái của trang web, nhưng bạn có thể sử dụng thuộc tính align để thiết lập lại sự căn chỉnh này: trung tâm hoặc bên phải.

Ví dụ


<!DOCTYPE html>



<html>



<head>



<title>Can chinh hinh anh trong HTML</title>



</head>



<body>



<p>Vi du can chinh hinh anh</p>



<img src="./images/logo3.png" alt="Hình ảnh trong HTML" border="3" align="right"/>



</body>



</html>
Nó sẽ tạo ra kết quả sau:
Vi du can chinh hinh anh
Hình ảnh trong HTML

Comment trong HTML

Comment trong HTML

 Comment là một phần của code mà được bỏ qua bởi bất kỳ trình duyệt nào. Thêm comment vào code của bạn là một sự luyện tập tốt, đặc biệt trong các tài liệu phức tạp, để chỉ dẫn các khu vực của tài liệu, và bất kỳ ghi chú nào khác cho ai đó tiện theo dõi code. Comment giúp bạn và người khác hiểu đoạn code của bạn để làm cho nó dễ đọc hơn.
Comment trong HTML được đặt trong thẻ <!-- ... -->. Vì vậy bất kỳ nội dung nào đặt trong thẻ này đều được coi như là comment và sẽ được bỏ qua bởi trình duyệt.

Ví dụ


<!DOCTYPE html>



<html>



<head>  <!-- Vi du comment 1 -->



<title>Tieu de tai lieu</title>



</head> <!-- Vi du comment 2 -->



<body>



<p>Phan noi dung chinh cua tai lieu.....</p>



</body>



</html>
Nó sẽ hiển thị kết quả sau và bỏ qua nội dung trong comment:
Phan noi dung chinh cua tai lieu.....

Comment hợp lệ và không hợp lệ trong HTML

Các comment không được lồng vào nhau nghĩa là một comment không thể được đặt trong một comment khác. Dãy dấu gạch ngang thứ hai "--"có thể không xuất hiện bên trong một bình luận ngoại trừ như là một phần của thẻ đóng --> tag. Bạn phải chắc chắn rằng không có dấu cách trong chuỗi khởi đầu.

Ví dụ

Dưới đây là một ví dụ về một comment hợp lệ và sẽ được bỏ qua bởi trình duyệt.

<!DOCTYPE html>



<html>



<head>



<title>Vi du comment hop le</title>



</head>



<body>



<!--   Day la mot comment hop le -->



<p>Phan noi dung chinh cua tai lieu.....</p>



</body>



</html>
Ví dụ dưới đây lại là một comment không hợp lệ và được trình duyệt hiển thị. Đây là bởi vì có một dấu cách giữa dấu ngoặc nhọn và dấu chấm than.

<!DOCTYPE html>



<html>



<head>  



<title>Vi du comment khong hop le</title>



</head> 



<body>



< !--   Vi du comment khong hop le -->



<p>Phan noi dung chinh cua tai lieu.....</p>



</body>



</html>
Kết quả hiển thị:
< !-- Vi du comment khong hop le -->
Phan noi dung chinh cua tai lieu.....

Comment có nhiều dòng trong HTML

Bạn đã thấy comment có một dòng, nhưng HTML cũng hỗ trợ một comment có nhiều dòng.
Bạn có thể tạo một comment nhiều dòng bằng cách sử dụng thẻ mở <!-- và thẻ đóng --> đặt trước dòng đầu tiên và dòng cuối cùng như ví dụ bên dưới

Ví dụ
<!DOCTYPE html><html>




<head>  



<title>Comment có nhiều dòng trong HTML</title>



</head> 



<body>



<!--   



Vi du mot comment co nhieu dong. Phan comment nay

co the trai rong tren nhieu dong.


-->



<p>Phan noi dung chinh cua tai lieu.....</p>



</body>



</html>
Nó sẽ tạo ra kết quả sau:
Phan noi dung chinh cua tai lieu.....

Comment có điều kiện trong HTML

Comment này chỉ làm việc trên Internet Explorer trên Windows nhưng chúng được bỏ qua bởi các trình duyệt khác. Chúng được hỗ trợ cho các phiên bản IE 5 về trước, và bạn có thể sử dụng chúng để đưa các chỉ thị có điều kiện cho các phiên bản khác nhau của IE.

Ví dụ


<!DOCTYPE html><html>



<head>  



<title>Comment có điều kiện trong HTML</title>






<!--[if IE 6]>


Phan comment cho IE 6



<![endif]-->






</head> 


<body>



<p>Phan noi dung chinh cua tai lieu.....</p>



</body>



</html>
Bạn sẽ tìm hiểu một tình huống mà bạn sẽ cần áp dụng một Style Sheet khác dựa trên các phiên bản khác nhau của IE, trong tình huống đó thì Comment có điều kiện sẽ rất hữu dụng.

Sử dụng thẻ comment trong HTML

Có một vài trình duyệt hỗ trợ thẻ <comment> để ghi comment cho code trong HTML.

Ví dụ


<!DOCTYPE html><html>



<head>



<title>Vi du the comment trong HTML</title>



</head>



<body>



<p>Trinh duyet cua ban la <comment>khong phai</comment> Internet Explorer.</p>



</body>



</html>
Nếu bạn đang sử dụng trình duyệt IE, nó sẽ hiển thị nội dung:
Trinh duyet cua ban la Internet Explorer.
Nếu bạn đang sử dụng trình duyệt khác, nó hiển thị:
Trinh duyet cua ban la khong phai Internet Explorer.

Comment cho Script code

Nếu bạn đang sử dụng JavaSript hoặc VB Scrip trong code HTML của bạn thì nó sẽ gợi ý đặt đoạn Script code đó trong một comment HTML thích hợp để các trình duyệt cũ làm việc đúng cách.

Ví dụ


<!DOCTYPE html><html>



<head>



<title>Comment cho Script code</title>



<script>



<!-- 



   document.write("Hello World!")



//-->



</script>



</head>



<body>



<p>Hello , World!</p>



</body>



</html>
Nó sẽ tạo ra kết quả sau:
Hello World!
Hello , World!

Comment cho Style Sheet

Nếu bạn sử dụng Casecading Style Sheet trong mã hóa HTML của bạn thì nó sẽ gợi ý đặt mã hóa Style Sheet vào trong một comment thích hợp để các trình duyệt cũ có thể làm việc đúng cách.

Ví dụ


<!DOCTYPE html><html>



<head>



<title>Comment cho Style Sheet</title>



<style>



<!--



.example {



border:1px solid #4a7d49;

}


//-->



</style>



</head>



<body>



<div class="example">Hello , World!</div>



</body>



</html>
Kết quả hiển thị là:
Hello , World!

Các thẻ Meta trong HTML

HTML cho phép bạn chỉ định các siêu dữ liệu-thông tin quan trọng được thêm vào về một tài liệu trong các cách khác nhau. Các phần tử META có thể được sử dụng bao gồm các cặp tên/giá trị miêu tả đặc tính quyền sở hữu trong HTML, như tên tác giả, hạn sử dụng, danh sách các từ khóa….
Thẻ <meta> được sử dụng để cung cấp các thông tin thêm như vậy. Thẻ này là một phần tử trống và không có thẻ đóng nhưng nó lại mang thông tin trong thuộc tính của nó.
Với các trang Web mang tính thương mại thì thẻ meta là một trong các nhân tố quan trọng cho SEO. Việc tối ưu hóa thẻ meta càng tốt sẽ giúp cho trang Web của bạn càng nhanh lên top khi được tìm kiếm bởi Google. Bạn cũng có thể tham khảo thêm Loạt bài hướng dẫn về SEO ngay tại VietJack.
Bạn có thể sử dụng một hay nhiều thẻ meta trong tài liệu của bạn trên cơ sở những thông tin gì bạn muốn giữ trong tài liệu, nhưng một cách tổng quát thì thẻ meta không ảnh hưởng đến sự xuất hiện vật lý của tài liệu. Do đó, bạn có thể sử dụng hoặc không sử dụng các thẻmeta.

Thêm các thẻ Meta vào tài liệu

Bạn có thể thêm các siêu dữ liệu vào trong các trang Web bằng cách đặt các thẻ <meta> trong đầu trang của tài liệu mà được thể hiện bởi thẻ <head> và </head>. Một thẻ meta có thể có các thuộc tính sau:
Thuộc tínhMiêu tả
nameĐặt tên cho đặc tính. Ví dụ như từ khóa, sự mô tả, tên tác giả,… bất cứ thứ gì.
contentXác định giá trị của đặc tính
schemeXác định một giản đồ để giải thích giá trị của đặc tính (như là công khai trong thuộc tính content).
http-equivĐược sử dụng cho các Header thông báo phản hồi HTTP. Ví dụ: thiết lập các Cookie...

Xác định các từ khóa - Sử dụng thẻ meta keywords trong HTML

Bạn có thể sử dụng thẻ <meta> để chỉ rõ các từ khóa quan trọng liên quan đến tài liệu và sau đó những từ khóa này được sử dụng trong các công cụ tìm kiếm (ví dụ: Google) trong khi lập chỉ mục trang Web của bạn cho mục đích tìm kiếm.

Ví dụ

Ví dụ dưới đây thêm HTML, các thẻ Meta, Siêu dữ liệu (Metadata) như những từ khóa quan trọng về tài liệu.

<!DOCTYPE html>



<html>



<head>



<title>Vi du the meta trong HTML</title>



<meta name="keywords" content="HTML, the meta trong HTML, hoc HTML co ban va nang cao" />



</head>



<body>



<p>Hoc HTML tai VietJack!</p>



</body>



</html>
Nó sẽ tạo ra kết quả sau:
Hoc HTML tai VietJack!

Miêu tả tài liệu - Sử dụng thẻ meta description trong HTML

Bạn có thể sử dụng thẻ <meta> để đưa ra một miêu tả ngắn gọn về tài liệu. Điều này giúp cho các công cụ tìm kiếm trong khi lập chỉ mục trang Web của bạn cho mục đích tìm kiếm.

Ví dụ


<!DOCTYPE html>



<html>



<head>



<title>Vi du the meta trong HTML</title>



<meta name="keywords" content="HTML, the meta trong HTML, hoc HTML co ban va nang cao" />



<meta name="description" content="The meta trong HTML." />



</head>



<body>



<p>Hoc HTML tai VietJack!</p>



</body>



</html>

Ngày sửa cuối cùng của tài liệu - Sử dụng thẻ meta revised trong HTML

Bạn có thể sử dụng thẻ <meta> để cung cấp thông tin về thời điểm cuối cùng mà tài liệu của bạn được cập nhật. Thông tin này có thể được sử dụng bởi các trình duyệt khác nhau trong khi refresh trang của bạn.

Ví dụ


<!DOCTYPE html>



<html>



<head>



<title>Vi du the meta trong HTML</title>



<meta name="keywords" content="HTML, the meta trong HTML, hoc HTML co ban va nang cao" />



<meta name="description" content="The meta trong HTML." />



<meta name="revised" content="VietJack Team, 06/16/2016" />



</head>



<body>



<p>Hoc HTML tai VietJack!</p>



</body>



</html>

Refresh tài liệu - Sử dụng http-equiv="refresh"

Một thẻ <meta> có thể được sử dụng để xác định khoảng thời gian mà sau đó trang Web của bạn sẽ refresh một cách tự động (như khi bạn nhấn F5).

Ví dụ

Ví dụ như nếu bạn muốn cho trang của bạn cứ 5s được refresh một lần, bạn sử dụng cú pháp sau:

<!DOCTYPE html>



<html>



<head>



<title>Vi du the meta trong HTML</title>



<meta name="keywords" content="HTML, the meta trong HTML, hoc HTML co ban va nang cao" />



<meta name="description" content="The meta trong HTML." />



<meta name="revised" content="VietJack Team, 06/16/2016" />



<meta http-equiv="refresh" content="5" />



</head>



<body>



<p>Hoc HTML tai VietJack!</p>



</body>



</html>

Chuyển hướng trang - Xác định url

Bạn có thể sử dụng thẻ <meta> để chuyển hướng trang Web của bạn cho bất kỳ trang Web nào khác. Bạn cũng có thể chỉ định một khoảng thời gian nếu bạn muốn chuyển hướng trang sau một khoảng thời gian nhất định.

Ví dụ

Ví dụ dưới là chuyển hướng trang hiện tại sang trang khác sau khoảng thời gian 5s. Nếu bạn muốn chuyển hướng ngay lập tức, bạn không xác định thuộc tính content của nó.

<!DOCTYPE html>



<html>



<head>



<title>Vi du the meta trong HTML</title>



<meta name="keywords" content="HTML, the meta trong HTML, hoc HTML co ban va nang cao" />



<meta name="description" content="The meta trong HTML." />



<meta name="revised" content="VietJack Team, 06/16/2016" />



<meta http-equiv="refresh" content="5; url=http://vietjack.com" />



</head>



<body>



<p>Hoc HTML tai VietJack!</p>



</body>



</html>

Thiết lập các Cookie - Sử dụng http-equiv="cookie"

Cookie là dữ liệu, được lưu giữ trong các file văn bản nhỏ trên máy tính và nó được trao đổi giữa các trình duyệt Web và Sever để theo dõi các khu vực của thông tin dựa trên ứng dụng của bạn.
Bạn có thể sử dụng thẻ <meta> để bảo quản các cookie trên Client và sau đó thông tin này có thể được sử dụng bởi các Server để theo dõi khách truy cập.

Ví dụ

Ví dụ sau về thiết lập các Cookie.

<!DOCTYPE html>



<html>



<head>



<title>Vi du the meta trong HTML</title>



<meta name="keywords" content="HTML, the meta trong HTML, hoc HTML co ban va nang cao" />



<meta name="description" content="The meta trong HTML." />



<meta name="revised" content="VietJack Team, 06/16/2016" />



<meta http-equiv="cookie" content="userid=xyz; expires=Wednesday, 08-Aug-16 23:59:59 GMT;" />



</head>



<body>



<p>Hoc HTML tai VietJack!</p>



</body>



</html>
Nếu bạn không tính đến ngày hết hạn, Cookie sẽ được coi là một session (phiên) và sẽ bị xóa khi người dùng thoát trình duyệt.

Thiết lập tên tác giả - Sử dụng name="author"

Bạn có thể thiết lập tên tác giả của một trang Web bằng cách sử dụng thẻ meta. Ví dụ:

Ví dụ


<!DOCTYPE html>



<html>



<head>



<title>Vi du the meta trong HTML</title>



<meta name="keywords" content="HTML, the meta trong HTML, hoc HTML co ban va nang cao" />



<meta name="description" content="The meta trong HTML." />



<meta name="author" content="VietJack Team" />



</head>



<body>



<p>Hoc HTML tai VietJack!</p>



</body>



</html>

Xác định Bộ ký tự

Bạn có thể sử dụng thẻ <meta> để xác định Bộ ký tự sử dụng trong trang Web.

Ví dụ

Theo mặc định, trình duyệt và Server sử dụng mã hóa ISO-8859-1 (Latin1) để xử lý các trang Web. Ví dụ dưới là sự thiết lập mã hóa UTF-8.

<!DOCTYPE html>



<html>



<head>



<title>Vi du the meta trong HTML</title>



<meta name="keywords" content="HTML, the meta trong HTML, hoc HTML co ban va nang cao" />



<meta name="description" content="The meta trong HTML." />



<meta ame="author" content="VietJack Team" />



<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />



</head>



<body>



<p>Hoc HTML tai VietJack!</p>



</body>



</html>
Để đáp ứng các trang tĩnh với các ký tự Trung Quốc truyền thống, trang Web phải chứa một thẻ <meta> để thiết lập mã hóa Big5:

<!DOCTYPE html>



<html>



<head>



<title>Vi du the meta trong HTML</title>



<meta name="keywords" content="HTML, the meta trong HTML, hoc HTML co ban va nang cao" />



<meta name="description" content="The meta trong HTML." />



<meta ame="author" content="VietJack Team" />



<meta http-equiv="Content-Type" content="text/html; charset=Big5" />



</head>



<body>



<p>Hoc HTML tai VietJack!</p>



</body>



</html>