<h2 style="text-align: justify;">Kh&oacute;a học n&agrave;y d&agrave;nh cho ai?</h2>
Kh&oacute;a học X&acirc;y dựng giao diện với HTML &amp; CSS n&agrave;y d&agrave;nh cho:
<ul style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1">Những bạn mới bắt đầu bước v&agrave;o học lập tr&igrave;nh web. Kh&oacute;a học n&agrave;y l&agrave; cơ sở để tạo ra những trang web chuy&ecirc;n nghiệp, đẹp mắt v&agrave; tương th&iacute;ch tr&ecirc;n nhiều loại thiết bị v&agrave; m&ocirc;i trường kh&aacute;c nhau.</li>
<li style="font-weight: 400;" aria-level="1">C&aacute;c bạn học vi&ecirc;n đ&atilde; c&oacute; những kiến thức cơ bản về HTML v&agrave; CSS nhưng vẫn bất lực trong việc sử dụng kết hợp ch&uacute;ng với nhau để tạo ra một trang web chuy&ecirc;n nghiệp, hiện đại v&agrave; đẹp mắt.</li>
<li style="font-weight: 400;" aria-level="1">C&aacute;c bạn học thiết kế nhưng muốn mở rộng kỹ năng của m&igrave;nh với những hiểu biết sơ lược về x&acirc;y dựng giao diện web th&ocirc;ng qua HTML5 v&agrave; CSS3</li>
</ul>
Đơn giản, dễ hiểu, thực tế, v&agrave; thực h&agrave;nh trực tiếp ngay sau khi học với nhiều ứng dụng, gi&uacute;p bạn nhanh ch&oacute;ng tiếp cận v&agrave; triển khai ngay được ứng dụng thực tế. 
<h2 style="text-align: justify;">Để bắt đầu kh&oacute;a học, bạn cần g&igrave;?</h2>
Kh&oacute;a học n&agrave;y được thiết kế d&agrave;nh cho người mới bắt đầu, v&igrave; vậy bạn sẽ kh&ocirc;ng cần phải c&oacute; bất cứ kinh nghiệm n&agrave;o về lập tr&igrave;nh trước khi bắt tay v&agrave;o học. Kh&oacute;a học n&agrave;y:
<ul style="text-align: justify;">
<li style="font-weight: 400; text-align: justify;" aria-level="1">KH&Ocirc;NG đ&ograve;i hỏi bạn phải c&oacute; kiến thức trước về lập tr&igrave;nh hay thiết kế</li>
<li style="font-weight: 400; text-align: justify;" aria-level="1">KH&Ocirc;NG nhất thiết phải c&agrave;i đặt c&ocirc;ng cụ nặng với dung lượng lớn. Bạn kh&ocirc;ng cần mua bất cứ phần mềm n&agrave;o - ch&uacute;ng ta sẽ sử dụng tr&igrave;nh editor miễn ph&iacute;, nhẹ v&agrave; tốt nhất với chi ph&iacute; bằng 0.</li>
</ul>
Tất cả những g&igrave; bạn cần l&agrave;:
<ul style="text-align: justify;">
<li style="font-weight: 400; text-align: justify;" aria-level="1">Một thiết bị m&aacute;y t&iacute;nh (Windows, Mac hoặc Linux) hoặc thậm ch&iacute; l&agrave; một chiếc m&aacute;y t&iacute;nh bảng.</li>
<li style="font-weight: 400; text-align: justify;" aria-level="1">T&acirc;m thế sẵn s&agrave;ng chăm chỉ, nỗ lực v&agrave; thực hiện theo đ&uacute;ng lộ tr&igrave;nh đ&atilde; đề ra trong kh&oacute;a học.</li>
</ul>
<h2 style="text-align: justify;">Giới thiệu&nbsp;</h2>
HTML l&agrave; viết tắt của HyperText Markup Language (ng&ocirc;n ngữ sử dụng thẻ đ&aacute;nh dấu văn bản) d&ugrave;ng để m&ocirc; tả cấu tr&uacute;c của c&aacute;c trang Web v&agrave; tạo ra c&aacute;c loại t&agrave;i liệu c&oacute; thể xem được tr&ecirc;n tr&igrave;nh duyệt.
CSS (viết tắt của Cascading Style Sheets) l&agrave; ng&ocirc;n ngữ định dạng được sử dụng để m&ocirc; tả c&aacute;ch tr&igrave;nh b&agrave;y trang Web, bao gồm m&agrave;u sắc, bố cục v&agrave; ph&ocirc;ng chữ. N&oacute; cho ph&eacute;p hiển thị nội dung tương th&iacute;ch tr&ecirc;n c&aacute;c loại thiết bị c&oacute; k&iacute;ch thước m&agrave;n h&igrave;nh kh&aacute;c nhau như m&agrave;n h&igrave;nh lớn, m&agrave;n h&igrave;nh nhỏ hay m&aacute;y in.
CSS độc lập với HTML v&agrave; c&oacute; thể được sử dụng với bất kỳ ng&ocirc;n ngữ đ&aacute;nh dấu dựa tr&ecirc;n XML n&agrave;o. 
Về cơ bản c&oacute; thể n&oacute;i HTML c&oacute; vai tr&ograve; tạo khung xương cho website c&ograve;n CSS c&oacute; vai tr&ograve; trang điểm v&agrave; đắp da thịt cho website đ&oacute;. Đ&acirc;y l&agrave; hai th&agrave;nh phần kh&ocirc;ng thể thiếu để tạo l&ecirc;n một website mượt m&agrave; v&agrave; đẹp đẽ.
Kh&oacute;a học n&agrave;y sẽ cung cấp cho người học những kiến ​​thức từ cơ bản đến những kh&aacute;i niệm n&acirc;ng cao tổng hợp về HTML v&agrave; CSS. Đ&acirc;y l&agrave; kh&oacute;a học với rất nhiều b&agrave;i tập v&agrave; v&iacute; dụ gi&uacute;p người học chủ động v&agrave; hiểu c&aacute;ch x&acirc;y dựng giao diện website tĩnh khi sử dụng HTML v&agrave; CSS. Mục ti&ecirc;u của kh&oacute;a học n&agrave;y l&agrave; gi&uacute;p bạn th&agrave;nh thạo lập tr&igrave;nh HTML v&agrave; CSS từ số 0. Kh&oacute;a học sẽ cung cấp cho bạn c&aacute;c kh&aacute;i niệm về thẻ HTML, thuộc t&iacute;nh, thuộc t&iacute;nh của HTML, CSS. C&aacute;ch tạo ra một trang web từ HTML v&agrave; CSS, c&aacute;ch cắt giao diện website từ c&aacute;c file thiết kế dạng figma hoặc Photoshop. 
Sau kh&oacute;a học n&agrave;y, bạn ho&agrave;n to&agrave;n c&oacute; thể n&acirc;ng cao kỹ năng của m&igrave;nh hơn nữa với c&aacute;c kh&oacute;a học n&acirc;ng cao của TEK4.VN như: lập tr&igrave;nh PHP, lập tr&igrave;nh NodeJS, lập tr&igrave;nh JavaScript,... để c&oacute; thể x&acirc;y dựng website một c&aacute;ch ho&agrave;n thiện với đầy đủ t&iacute;nh năng v&agrave; th&agrave;nh phần.
...
Với kh&oacute;a học n&agrave;y bạn ho&agrave;n to&agrave;n c&oacute; thể thiết kế v&agrave; x&acirc;y dựng bất kỳ trang web n&agrave;o m&agrave; bạn c&oacute; thể nghĩ ra, chứ kh&ocirc;ng chỉ sao ch&eacute;p dự &aacute;n kh&oacute;a học.
V&igrave; vậy, để trở th&agrave;nh một lập tr&igrave;nh vi&ecirc;n tự tin v&agrave; độc lập, c&oacute; khả năng x&acirc;y dựng trang web của ri&ecirc;ng bạn trong tương lai, bạn sẽ học:
<ol>
<li>C&aacute;c nguy&ecirc;n tắc cơ bản của HTML, CSS. Bao gồm flexbox hiện đại v&agrave; CSS Grid!</li>
<li style="text-align: justify;">C&aacute;ch thiết kế c&aacute;c trang web đẹp, bằng c&aacute;ch học một khung thiết kế web m&agrave; ch&uacute;ng t&ocirc;i đ&atilde; tạo chỉ d&agrave;nh cho kh&oacute;a học n&agrave;y. N&oacute; bao gồm c&aacute;c hướng dẫn dễ sử dụng cho c&aacute;c kh&iacute;a cạnh thiết kế như kiểu chữ, m&agrave;u sắc, h&igrave;nh ảnh, khoảng c&aacute;ch,...</li>
<li style="text-align: justify;">C&aacute;ch sử dụng c&aacute;c th&agrave;nh phần trang web v&agrave; mẫu bố cục đ&atilde; được thiết lập để tạo ra c&aacute;c thiết kế chuy&ecirc;n nghiệp.</li>
<li style="text-align: justify;">C&aacute;ch l&agrave;m cho bất kỳ trang web n&agrave;o hoạt động tr&ecirc;n mọi thiết bị di động, bất kể thiết kế v&agrave; bố cục như thế n&agrave;o.</li>
<li style="text-align: justify;">C&aacute;ch vận dụng 7 bước x&acirc;y dựng website chuy&ecirc;n nghiệp v&agrave;o thực tế: lập kế hoạch, ph&aacute;c thảo, thiết kế, x&acirc;y dựng, kiểm thử, tối ưu v&agrave; khởi chạy.</li>
<li style="text-align: justify;">C&aacute;ch t&igrave;m v&agrave; sử dụng c&aacute;c nội dung thiết kế miễn ph&iacute; như h&igrave;nh ảnh, ph&ocirc;ng chữ v&agrave; biểu tượng</li>
<li style="text-align: justify;">C&aacute;c kỹ năng quan trọng của lập tr&igrave;nh vi&ecirc;n như đọc t&agrave;i liệu, tự sửa lỗi v&agrave; sử dụng c&aacute;c c&ocirc;ng cụ ph&aacute;t triển web chuy&ecirc;n nghiệp.</li>
</ol>
<h2 style="text-align: justify;">Tại sao bạn n&ecirc;n học HTML v&agrave; CSS ngay từ b&acirc;y giờ?</h2>
Ở Việt Nam hiện nay, c&aacute;c c&ocirc;ng việc li&ecirc;n quan đến lập tr&igrave;nh n&oacute;i ri&ecirc;ng v&agrave; c&ocirc;ng nghệ n&oacute;i chung đều được rất nhiều c&aacute;c nh&agrave; tuyển dụng săn đ&oacute;n v&agrave; trọng dụng. C&ocirc;ng việc thiết kế v&agrave; x&acirc;y dựng một website l&agrave; một c&ocirc;ng việc th&uacute; vị. Đ&acirc;y l&agrave; một trong những ng&agrave;nh c&oacute; tương lai ổn định v&agrave; được trả lương cao nhất tr&ecirc;n thế giới. HTML v&agrave; CSS l&agrave; điểm v&agrave;o nếu bạn chọn đi con đường n&agrave;y.
Đ&acirc;y l&agrave; kh&oacute;a học tốt nhất v&agrave; đầy đủ nhất để bắt đầu h&agrave;nh tr&igrave;nh ph&aacute;t triển web của bạn. Gi&uacute;p bạn từ chỗ kh&ocirc;ng biết g&igrave; về HTML v&agrave; CSS, đến việc x&acirc;y dựng c&aacute;c trang web tuyệt đẹp bằng c&aacute;ch sử dụng c&aacute;c c&ocirc;ng cụ v&agrave; c&ocirc;ng nghệ m&agrave; c&aacute;c lập tr&igrave;nh vi&ecirc;n sử dụng h&agrave;ng ng&agrave;y.
H&atilde;y c&ugrave;ng TEK4.VN bắt đầu x&acirc;y dựng trang web ngay h&ocirc;m nay!

Xây dựng giao diện với HTML & CSS

Để thực hiện việc th&ecirc;m ảnh v&agrave;o trong trang Web, ta sẽ sử dụng thẻ &lt;img&gt;. Thẻ n&agrave;y bao gồm hai thuộc t&iacute;nh l&agrave; src v&agrave; alt. Thuộc t&iacute;nh src để x&aacute;c định đường dẫn cho việc tải ảnh về v&agrave; thuộc t&iacute;nh alt để x&aacute;c định nội dung hiển thị thay cho ảnh khi ảnh kh&ocirc;ng hiển thị được tr&ecirc;n trang Web.
V&iacute; dụ:
<pre class="language-markup"><code>&lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;HTML with tek4&lt;/title&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;a href="https://unsplash.com/"&gt;
 &lt;img src="https://images.unsplash.com/photo-1495539406979-bf61750d38ad?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1650&amp;q=80" alt="This is a picture"&gt;
 &lt;/a&gt;
 &lt;/body&gt;
&lt;/html&gt;</code></pre>
Ngo&agrave;i ra, ta c&oacute; thể chỉnh sửa k&iacute;ch thước của h&igrave;nh ảnh th&ocirc;ng qua c&aacute;c thuộc t&iacute;nh CSS height v&agrave; width, trong đ&oacute; height sẽ x&aacute;c định chiều cao v&agrave; width x&aacute;c định chiều rộng của ảnh.
V&iacute; dụ:
<pre class="language-markup"><code>&lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;Học HTML c&ugrave;ng với TEK4.VN&lt;/title&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;a href="https://unsplash.com/"&gt;
 &lt;img src="https://images.unsplash.com/photo-1495539406979-bf61750d38ad?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1650&amp;q=80" alt="This is a picture" style="height: 600px;width: 800px;"&gt;
 &lt;/a&gt;
 &lt;/body&gt;
&lt;/html&gt;</code></pre>
<h2> Tạo bản đồ ảnh</h2>
Ta sẽ sử dụng thẻ &lt;map&gt; để tạo một bản đồ ảnh. Bản đồ ảnh l&agrave; một v&ugrave;ng tr&ecirc;n ảnh m&agrave; bạn ch&egrave;n v&agrave;o v&agrave; bạn c&oacute; click v&agrave;o v&ugrave;ng đ&oacute;. C&aacute;c v&ugrave;ng n&agrave;y c&oacute; thể được x&aacute;c định bằng thẻ &lt;area&gt;.
V&iacute; dụ:
<pre class="language-markup"><code>&lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;Học HTML c&ugrave;ng với TEK4.VN&lt;/title&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;img src="https://images.unsplash.com/photo-1519419166318-4f5c601b8e6c?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=667&amp;q=80" alt="Workplace" usemap="#workmap"&gt;
 &lt;map name="workmap"&gt;
 &lt;area shape="poly" coords="305,130,181,213,66,297,108,341,222,262,336,189" alt="Eyeglass" href="https://images.unsplash.com/photo-1475312775467-159e03aaa7cd?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80"&gt;
 &lt;area shape="rect" coords="531,357,544,499" alt="Pencil" href="https://images.unsplash.com/photo-1574974783854-ed3316bb7c78?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80"&gt;
 &lt;/map&gt;
 &lt;/body&gt;
&lt;/html&gt;</code></pre>
<img style="width: 100%;" src="../../../public_files/2135efd4-8c7c-467a-9a68-3ea56b39f772" alt="the-anh-HTML-1" />
Khi bạn thực hiện đoạn m&atilde; tr&ecirc;n, một h&igrave;nh ảnh như tr&ecirc;n sẽ xuất hiện tr&ecirc;n m&agrave;nh h&igrave;nh v&agrave; bạn c&oacute; thể click v&agrave;o c&aacute;i k&iacute;nh hoặc c&aacute;i b&uacute;t ch&igrave; đầu ti&ecirc;n để điều hướng tới một trang Web kh&aacute;c.
C&aacute;c bạn h&atilde;y thử xem nh&eacute;!
Sau đ&acirc;y l&agrave; lời giải cho đoạn m&atilde; b&ecirc;n tr&ecirc;n:
Đầu ti&ecirc;n, để tạo một bản đồ h&igrave;nh ảnh, th&igrave; bạn cần phải c&oacute; thẻ &lt;img&gt; để ch&egrave;n h&igrave;nh ảnh v&agrave;o trang Web.
<pre class="language-markup"><code>&lt;img src="https://images.unsplash.com/photo-1519419166318-4f5c601b8e6c?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=667&amp;q=80" alt="Workplace" usemap="#workmap"&gt;</code></pre>
Tuy nhi&ecirc;n, ta sẽ th&ecirc;m một thuộc t&iacute;nh kh&aacute;c trong ảnh l&agrave; usemap. Gi&aacute; trị của thuộc t&iacute;nh n&agrave;y sẽ bắt đầu bằng dấu thăng # v&agrave; theo sau l&agrave; t&ecirc;n của bản đồ h&igrave;nh ảnh, điều n&agrave;y nhằm tạo mối quan hệ giữa h&igrave;nh ảnh v&agrave; bản đồ h&igrave;nh ảnh.
Tiếp theo, ta sẽ tạo bản đồ h&igrave;nh ảnh bằng thẻ &lt;map&gt; với thuộc t&iacute;nh name để x&aacute;c định t&ecirc;n của bản đồ h&igrave;nh ảnh.
<pre class="language-markup"><code>&lt;map name="workmap"&gt;</code></pre>
C&aacute;c bạn lưu &yacute; rằng gi&aacute; trị của thuộc t&iacute;nh name trong thẻ &lt;map&gt; phải giống với gi&aacute; trị của thuộc t&iacute;nh usemap trong thẻ &lt;img&gt;, chỉ kh&aacute;c l&agrave; n&oacute; kh&ocirc;ng c&oacute; dấu thăng.
Tiếp theo, ta sẽ x&aacute;c định c&aacute;c v&ugrave;ng tr&ecirc;n h&igrave;nh ảnh m&agrave; c&oacute; thể click v&agrave;o được bằng thẻ &lt;area&gt;, v&agrave; để x&aacute;c định được v&ugrave;ng nhất định th&igrave; ta cần x&aacute;c định tọa độ của v&ugrave;ng đ&oacute; tr&ecirc;n h&igrave;nh ảnh.
V&iacute; dụ:
<pre class="language-markup"><code>&lt;area shape="poly" coords="305,130,181,213,66,297,108,341,222,262,336,189" alt="Eyeglass" href="https://images.unsplash.com/photo-1475312775467-159e03aaa7cd?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80"&gt;</code></pre>
Trong thẻ &lt;area&gt; của đoạn m&atilde; b&ecirc;n tr&ecirc;n, ta c&oacute; thuộc t&iacute;nh shape, thuộc t&iacute;nh coords, thuộc t&iacute;nh alt v&agrave; thuộc t&iacute;nh href.
Trong đ&oacute;, thuộc t&iacute;nh shape c&oacute; 4 gi&aacute; trị:
<ul>
<li>rect: để x&aacute;c định v&ugrave;ng h&igrave;nh chữ nhật.</li>
<li>Circle: x&aacute;c định v&ugrave;ng h&igrave;nh tr&ograve;n.</li>
<li>Poly: x&aacute;c định v&ugrave;ng c&oacute; h&igrave;nh dạng bất kỳ.</li>
<li>Default: x&aacute;c định v&ugrave;ng cho to&agrave;n bộ.</li>
</ul>
Trong h&igrave;nh ảnh b&ecirc;n tr&ecirc;n, ta c&oacute; thể thấy rằng v&ugrave;ng chứa cặp k&iacute;nh c&oacute; dạng h&igrave;nh chữ nhật, tuy nhi&ecirc;n th&igrave; n&oacute; lại nằm ch&eacute;o, do đ&oacute;, ta sẽ x&aacute;c định v&ugrave;ng chứa cặp k&iacute;nh c&oacute; h&igrave;nh dạng l&agrave; bất kỳ (sử dụng gi&aacute; trị poly cho thuộc t&iacute;nh shape)
Tiếp theo, ta sẽ x&aacute;c định tọa độ của v&ugrave;ng chứa cặp k&iacute;nh. Trong b&agrave;i viết n&agrave;y, m&igrave;nh sử dụng ứng dụng paint c&oacute; sẵn tr&ecirc;n Windows để x&aacute;c định tọa độ của n&oacute;.
C&aacute;c bạn chỉ cần đưa con trỏ chuột v&agrave;o một điểm nằm tr&ecirc;n cặp k&iacute;nh, th&igrave; tọa độ tại điểm đ&oacute; sẽ được hiển thị ở tr&ecirc;n m&agrave;n h&igrave;nh của paint (như trong h&igrave;nh b&ecirc;n tr&ecirc;n). V&iacute; dụ trong h&igrave;nh tr&ecirc;n, ta c&oacute; (299,190) l&agrave; tọa độ v&agrave; trong đ&oacute; 299 l&agrave; tọa độ x v&agrave; 190 l&agrave; tọa độ y. V&agrave; thuộc t&iacute;nh coords sẽ nhận v&agrave;o c&aacute;c cặp gi&aacute; trị tọa độ n&agrave;y. Với v&ugrave;ng c&oacute; chứa cặp k&iacute;nh, ta sẽ x&aacute;c định 6 điểm tọa độ để định vị được v&ugrave;ng n&agrave;y như sau:
Như vậy, bạn chỉ cần đưa con trỏ chuột v&agrave;o 6 vị tr&iacute; tr&ecirc;n, v&agrave; bạn nhập c&aacute;c cặp gi&aacute; trị tọa độ tương ứng của 6 vị tr&iacute; n&agrave;y v&agrave;o trong thuộc t&iacute;nh coords của thẻ &lt;area&gt; l&agrave; ta c&oacute; thể x&aacute;c định được v&ugrave;ng chứa cặp k&iacute;nh.
Tiếp theo l&agrave; thuộc t&iacute;nh alt được sử dụng để hiển thị nội dung của v&ugrave;ng chứa cặp k&iacute;nh trong trường hợp v&ugrave;ng n&agrave;y kh&ocirc;ng được hiển thị.
Cuối c&ugrave;ng l&agrave; thuộc t&iacute;nh href để x&aacute;c định đường dẫn URL m&agrave; sẽ điều hướng người d&ugrave;ng cuối khi họ thực hiện click v&agrave;o v&ugrave;ng n&agrave;y.
Đối với h&igrave;nh c&acirc;y b&uacute;t ch&igrave; đầu ti&ecirc;n, ta c&oacute; đoạn m&atilde;:
<pre class="language-markup"><code>&lt;area shape="rect" coords="531,357,544,499" alt="Pencil" href="https://images.unsplash.com/photo-1574974783854-ed3316bb7c78?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80"&gt;</code></pre>
Tương tự như v&ugrave;ng chứa cặp k&iacute;nh b&ecirc;n tr&ecirc;n, ta cũng sẽ x&aacute;c định tương tự. C&oacute; điều kh&aacute;c l&agrave; đối với thuộc t&iacute;nh coords với shape=&ldquo;rect&rdquo;, ta chỉ cần 2 cặp gi&aacute; trị độ như sau để x&aacute;c định được v&ugrave;ng chứa h&igrave;nh b&uacute;t ch&igrave; n&agrave;y:
Bởi v&igrave; n&oacute; l&agrave; h&igrave;nh chữ nhật, n&ecirc;n ta chỉ cần tọa độ của điểm b&ecirc;n tr&aacute;i tr&ecirc;n c&ugrave;ng v&agrave; điểm dưới c&ugrave;ng b&ecirc;n phải l&agrave; c&oacute; thể x&aacute;c định v&ugrave;ng h&igrave;nh chữ nhật chứa c&acirc;y b&uacute;t ch&igrave; n&agrave;y. Như vậy l&agrave; ta đ&atilde; ho&agrave;n thiện tạo bản đồ h&igrave;nh ảnh theo &yacute; của m&igrave;nh.

Thẻ ảnh trong HTML