Hình ảnh trong HTML

Với HTML bạn có thể thể hiện hình ảnh trong tài liệu.

Ví dụ

Chèn hỉnh ảnh

Cách cho hiển thị một tấm hình trên trang web. <html>

<body> <p> An image:

<p>

A moving image:

<p>

Note that the syntax of inserting a moving image is no different from a non-moving image.

</p> </body> </html>

A moving image:

Note that the syntax of inserting a moving image is no different from a non-moving image.

Chèn hình ảnh từ những vị trí khác

Cách hiện một hoặc nhiều tấm hình từ một thư mục khác hoặc từ một server khác trên trang web của bạn.

<p>An image from another folder:</p>

<img src="/images/chrome.gif" alt="Google Chrome" width="33" height="32" /> <p>An image from W3Schools:</p>

</body> </html>

An image from another folder:

An image from W3Schools:

Thẻ Image và thuộc tính src

Trong HTML, hình ảnh được xác định bởi thẻ <img>. Để hiển thị một hình trên trang web, bạn cần phải sử dụng thuộc tính src. Src là chữ viết tắt của source. Giá trị của thuộc tính src là địa chỉ URL của hình ảnh mà bạn muốn hiển thị trên trang web. Cú pháp để xác định một tấm hình

Địa chỉ URL chỉ đến điểm mà hình ảnh được lưu trữ. Một file hình có tên là "boat.gif" được đặt ở thư mục images trên www.bantayden.com có địa chỉ URL là:

http://www.bantayden.com/images/boat.gif

Trình duyệt sẽ hiển thị hình ảnh nơi mà có thẻ image được chèn trong tài liệu. Nếu bạn muốn thêm thẻ image vào giữa một đoạn văn, trình duyệt sẽ hiển thị đoạn văn thứ nhất trước, sau đó đến hình và sau cùng là đoạn văn thứ hai.

Thuộc tính Alt

Thuộc tính alt được sử dụng để xác định chữ thay cho hình. Bởi vì nếu hình đó không hiện được thì một dòng chữ sẽ xuất hiện để báo cho người đọc biết. Gía trị của thuộc tính alt là một dòng chữ như sau:

Thuộc tính alt báo cho người đọc biết họ không xem được hình gì khi mà trình duyệt không load được hình đó. Trình duyệt sau đó sẽ hiển thị dòng chữ thay vì hình ảnh. Bạn nên tạo cho mình thói quen thêm thuộc tính "alt" vào mỗi tấm hình trên một trang, để tăng khả năng hiển thị và giúp những người lướt web mà không dùng hình ảnh.

Một vài ví dụ Hình nền

<html>

<body background="background.jpg"> <h3>Look: A background image!</h3>

<p>Both gif and jpg files can be used as HTML backgrounds.</p>

<p>If the image is smaller than the page, the image will repeat itself.</p> </body> </html> Căn chỉnh hình ảnh <html> <body> <p>An image

<img src="smiley.gif" alt="Smiley face" align="bottom" width="32" height="32" /> with align="bottom".</p>

<p>An image

<img src="smiley.gif" alt="Smiley face" align="middle" width="32" height="32" /> with align="middle".</p>

<p>An image

<img src="smiley.gif" alt="Smiley face" align="top" width="32" height="32" /> with align="top".</p>

<p><b>Tip:</b> align="bottom" is default!</p>

<p><img src="smiley.gif" alt="Smiley face" width="32" height="32" /> An image before the text.</p>

<p>An image after the text.

</html>

An image with align="bottom". An image with align="middle". An image with align="top".

Tip: align="bottom" is default! An image before the text. An image after the text.

Để hình ảnh "bơi lội" tự do

<img src="smiley.gif" alt="Smiley face" align="left" width="32" height="32" /> A paragraph with an image. The align attribute of the image is set to "left". The image will float to the left of this text.

</p> <p>

<img src="smiley.gif" alt="Smiley face" align="right" width="32" height="32" /> A paragraph with an image. The align attribute of the image is set to "right". The image will float to the right of this text.

</p> </body> </html>

Điều chỉnh hình với kích cỡ khác nhau

<p>

<p>

<p>You can make an image smaller or larger by changing the values of the "height" and "width" attributes.</p>

</body> </html>

You can make an image smaller or larger by changing the values of the "height" and "width" attributes.

Hiển thị chữ thay thế cho tấm hình

<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142" /> <p>The alt attribute is meant to be used as an alternative text if the image is not available. Text-only browsers cannot display images and will only display the text specified in the alt attribute. Here, the alt text is "W3Schools.com".</p>

</body> </html>

The alt attribute is meant to be used as an alternative text if the image is not available. Text-only browsers cannot display images and will only display the text specified in the alt attribute. Here, the alt text is "W3Schools.com".

Tạo siêu liên kết cho tấm hình

<p>Create a link of an image: <a href="default.asp">

<p>No border around the image, but still a link: <a href="default.asp">

</body> </html>

Create a link of an image:

No border around the image, but still a link:

Tạo image map

Cách tạo một image map, với những vùng có thể click được. Mỗi một vùng của hình là một đường liên kết.

<p>Click on the sun or on one of the planets to watch it closer:</p> <img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" />

</body> </html>

Biến tấm hình thành image map

Cách biến một tấm hình thành một image map. Bạn sẽ thấy nếu bạn di chuyển con chuột lên trên tấm hình, góc phần tư sẽ xuất hiện trên thanh trạng thái.

Move the mouse over the image, and look at the status bar to see how the coordinates change.

</p> <p>

<a href="tryhtml_ismap.htm"> <img src="planets.gif"

ismap width="146" height="126"> </a>

</p> </body> </html>

Move the mouse over the image, and look at the status bar to see how the coordinates change.

Thẻ Image

Tag Mô Tả

<img> Hình ành

<map> Định nghĩa map ( sơ đồ trên 1 hình)

12. HTML Background

Một background đẹp có thể làm cho trang của bạn nhìn đẹp mắt hơn.

Ví dụ

Hình nền đẹp và màu chữ

<html>

This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.

</p> <p>

This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. </p> </body> </html> Hình nền đẹp <html> <body background="background.jpg"> <h3>Image Background</h3>

<p>Both gif and jpg files can be used as HTML backgrounds.</p>

<p>If the image is smaller than the page, the image will repeat itself.</p> </body>

</html>

<html>

<body background="paper.gif"> <h3>Image Background</h3>

<p>Both gif and jpg files can be used as HTML backgrounds.</p>

<p>If the image is smaller than the page, the image will repeat itself.</p> </body> </html> Hình nền xấu <html> <body background="rock.jpg"> <h3>Image Background</h3>

<p>Both gif and jpg files can be used as HTML backgrounds.</p>

<p>If the image is smaller than the page, the image will repeat itself.</p> </body>

</html>

Backgrounds

Thẻ <body> có hái thuộc tính nơi mà bạn có thể chọn loại background cho mình. Background có thể là một màu hoặc là một tấm hình.

Bgcolor

Thuộc tính bgcolor thiết lập hình nền là một màu. Giá trị của thuộc tính này là hệ số hexadecimal, một giá trị màu RGB hoặc một tên màu

Dòng code trên cùng thiết lập hình nền thành màu đen.

Background

Thuộc tính background thiết lập một tấm hình làm hình nền. Giá trị của thuộc tính này là địa chỉ URL của tấm hình bạn muốn sử dụng. Nếu một tấm hình nhở hơn so với cửa sổ trình duyệt, tấm hình đó sẽ tự nhân lên đến khi nào nó che phủ hết cửa sổ trình duyệt. <body background="clouds.gif">

Địa chỉ URL có thể là tương đối như là ở dòng code thứ nhất hoặc tuyệt đối như là ở dòng thứ 2.

Chú ý: nếu bạn muốn sử dụng hình nền, bạn nên nhớ rằng:

Hình nền đó có làm giảm tốc độ load của trang nhiều không? thường thì hình được chọn làm hình nền không nên vượt quá 10K.

Hình nền đó có hợp với các hình khác trên trang không? Hình nền đó có hợp với chữ không?

Hình nền đó nhìn có đẹp không nếu nó chỉ có một mình Hình nền đó có làm cho người đọc mất tập trung không?

Mẹo nhỏ giúp bạn

Một số ít những trang web có sử dụng hình nền bằng hình ảnh Hầu hết các site sử dụng hình nền là màu trắng, đen hoặc xám.

13. HTML layout

Rất nhiều trang web bạn có thể thấy rằng trang của họ được thiết kế dạng cột giống như tờ báo vậy, đó là họ sử dụng cột của HTML.

Việc thông dụng nhất khi dùng HTML là sử dụng bảng HTML để định dạng một giao diện của một trang HTML.

Một phần của trang bạn đang đọc này được định dạng bởi hai cột như dạng cột của báo.

Bạn có thể nhận ra rằng nhưng gì bạn đang đọc được chia ra làm hai cột bên trái và bên phải.

Dòng chữ bên này ở cột bên trái

Code HTML <table> được sử dụng để chia một phần của trang thành hai cột.

Tôi cố tình để đường viền cho bạn dễ nhận thấy đây là cấu trúc bảng.

Dù cho bạn có viết bao nhiêu chữ đi chăng nữa, thì nõ vẫn ngoan ngoãn nằm trong cấu trúc bảng bạn tạo ra nó.

Vẫn layout cũ nhưng với màu được thêm vào Việc thông dụng nhất khi dùng HTML là sử dụng bảng HTML để định dạng một giao diện của một trang HTML.

Một phần của trang bạn đang đọc này được định dạng bởi hai cột như dạng cột của báo.

Bạn có thể nhận ra rằng nhưng gì bạn đang đọc được chia ra làm hai cột bên trái và bên phải.

Dòng chữ bên này ở cột bên trái

Code HTML <table> được sử dụng để chia một phần của trang thành hai cột.

Tôi cố tình để đường viền cho bạn dễ nhận thấy đây là cấu trúc bảng.

Dù cho bạn có viết bao nhiêu chữ đi chăng nữa, thì nõ vẫn ngoan ngoãn nằm trong cấu trúc bảng bạn tạo ra nó.

Ví dụ

Chia đôi một trang HTML thành cột và hàng là việc làm khá đơn giản. Để cho bạn thực hành với nó, tôi đã tạo ra ví dụ này cho bạn.

<tr>

This is some text. This is some text. This is some text. This is some text. This is some text.

</td>

Another text. Another text. Another text. Another text. Another text. Another text. Another text. </td> </tr> </table> </body> </html> 14. HTML Fonts

Việc sử dụng thẻ <font> trong HTML không được tán thành và sẽ bị loại bỏ ở những phiên bản HTML mới hơn. Dù cho rất nhiều người dùng nó, nhưng bạn nên cố gắng tránh dùng nó và dùng style để thay thế.

Thẻ HTML <font>

Với một dòng code HTML như sau, bạn có thể cụ thể kích cỡ và loại font cho trình duyệt

<p>

<font size="2" face="Verdana"> This is a paragraph.

</font> </p><p>

<font size="3" face="Times"> This is another paragraph. </font>

Xem ví dụ

<h1><font face="verdana">A heading</font></h1>

<p><font size="5" face="arial" color="red">A paragraph.</font></p> </body>

</html>

A heading

A paragraph.

Thuộc tính của font

Thuộc tính Ví dụ Mục đích

size="number" size="2" Xác định kích cỡ size="+number" size="+1" Tăng kích cỡ font size="-number" size="-1" Giảm kích cỡ font face="face-

name" face="Times" Xác định tên font color="color-

value"

color="#eeff0

0" Xác định màu chữ color="color-

15. Cách làm đúng nhất là sử dụng Style Chọn font cho chữ <html> <body> <h1 style="font-family:verdana">A heading</h1> <p style="font-family:courier">A paragraph</p> </body> </html> A heading A paragraph Chọn kích cỡ cho chữ <html> <body> <h1 style="font-size:150%">A heading</h1> <p style="font-size:80%">A paragraph</p> </body> </html> A heading A paragraph Chọn màu cho chữ <html> <body> <h1 style="color:blue">A heading</h1> <p style="color:red">A paragraph</p> </body> </html> A heading A paragraph

Chọn font, kích cỡ và màu cho chữ

This is a paragraph with some text in it. This is a paragraph with some text in it. This is a paragraph with some text in it. This is a paragraph with some text in it. </p>

</body> </html>

This is a paragraph with some text in it. This is a paragraph with some text in it. This is a paragraph with some text in it. This is a paragraph with some text in it.

Học thêm về Style Sheet

Đầu tiên bạn hãy kiên trì học cho xong hết các chương về HTML!!! ở những chương sau chúng tôi sẽ giải thích tại sao một vài thẻ như <font> lại bị loại bỏ từ HTML và làm cách nào để chèn một style Sheet vào một tài liệu HTML. Để học thêm về style sheet bạn học ở đây: CSS Tutorials

HTML Style

Với HTML 4.0 tất cả định dạng có thể được di chuyển ra khỏi tài liệu HTML và cho vào một file riêng biệt là Style Sheet.

Xem những ví dụ sau

Styles trong HTML

Ví dụ này hướng dẫn bạn cách định dạng một tài liệu HTML với thông tin style được thêm vào phần <head>.

<html> <head> <style type="text/css"> h1 {color:red;} h2 {color:blue;} p {color:green;} </style> </head> <body>

<h1>All header 1 elements will be red</h1> <h2>All header 2 elements will be blue</h2>

<p>All text in paragraphs will be green.</p> </body>

</html>

All header 1 elements will be red

All header 2 elements will be blue

All text in paragraphs will be green.

Đường liên kết không có gạch chân

Sử dụng thuộc tính style để tạo ra hiệu ứng đường link không có gạch chân. <html>

<body>

<a href="http://www.w3schools.com" style="text-decoration:none">Visit W3Schools.com!</a>

</body> </html>

Visit W3Schools.com!

Liên kết đến một style sheet "ngoại"

Cách sử dụng thẻ <link> để liên kết đến một style sheet "ngoại vi". <html>

<head>

<body>

<h1>I am formatted with an external style sheet</h1> <p>Me too!</p>

</body> </html>

Khi trình duyệt đọc thông tin của Style Sheet, nó sẽ định dạng tài liệu theo style đó. Có 3 cách để chèn style sheet vào tài liệu HTML.

Style Sheet "ngoại"

Khi bạn có nhiều trang cần áp dụng style thì style sheet ngoại vi là hợp lý nhất. Với style sheet ngoại vi bạn có thể thay đổi diện mạo của toàn bộ trang web bằng cách thay đổi một file. Mỗi trang phải liên kết đến style sheet bằng cách sử dụng thẻ <link>. Thẻ <link> được đặt ở phần head của mỗi trang.

<head>

body {background-color: red} p {margin-left: 20px}

</style> </head>

Style sheet "nội"

Nếu một tài liệu nào đó chỉ cần duy nhất một style thì Style Sheet nội nên được sử dụng. Bạn có thể xác định style nội trong phần head với thẻ <style>

<head>

body {background-color: red} p {margin-left: 20px}

</style> </head>

Style "địa phương"

Style "địa phương" nên được sử dụng nếu bạn muốn dùng một style duy nhất cho một thành phần nào đó của trang.

Để sử dụng style "địa phương" bạn sử dụng thuộc tính style với những thẻ tương thích. Thuộc tính của style có thể bao gồm nhiều tính nắng CSS. Ví dụ sau đây sẽ chỉ cho bạn cách thay đổi màu và canh lề trái của đoạn văn.

<p style="color: red; margin-left: 20px"> This is a paragraph

</p>

Thẻ style

Thẻ Miêu tả đặc tính

<div> Xác định phần vùng trong tài liệu

<span> Xác định phần vùng trong tài liệu

<font> Không được ưa chuộng, dùng Style

<basefont>Không được ưa chuộng, dùng Style

<center> Không được ưa chuộng, dùng Style

16. HTML head Xem ví dụ

Tiêu đề của tài liệu

Thông tin tiêu đề ở trong phần head thì không được hiển thị trong cửa sổ trình duyệt. <html>

<head>

<title>My first HTML page</title> </head>

<body>

<p>The content of the body element is displayed in the browser.</p>

HTML form và trường nhập liệu