<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

Trong b&agrave;i trước, ch&uacute;ng ta đ&atilde; t&igrave;m hiểu sơ bộ về một tệp HTML v&agrave; c&aacute;ch thức hoạt động của một trang web. Trong b&agrave;i n&agrave;y, ch&uacute;ng ta sẽ tiếp tục đi chi tiết v&agrave;o cấu tr&uacute;c v&agrave; th&agrave;nh phần của một tệp HTML.
<h2 style="text-align: justify;">HTML l&agrave; g&igrave;?</h2>
HTML l&agrave; một ng&ocirc;n ngữ đ&aacute;nh dấu. N&oacute; kh&ocirc;ng chứa c&aacute;c cấu tr&uacute;c logic trong lập tr&igrave;nh như if...else hay v&ograve;ng lặp. Mục ti&ecirc;u của n&oacute; l&agrave; gắn nh&atilde;n nội dung để mang lại cho ch&uacute;ng &yacute; nghĩa v&agrave; cấu tr&uacute;c bổ sung khi hiển thị trong tr&igrave;nh duyệt. Điều n&agrave;y giống hệt như bạn thực hiện việc format t&agrave;i liệu tr&ecirc;n c&aacute;c c&ocirc;ng cụ soạn thảo văn bản như Google Docs, Apple Pages, Microsoft Office,... Bạn viết c&aacute;c đoạn văn, c&aacute;c c&acirc;u, ch&egrave;n v&agrave;o c&aacute;c h&igrave;nh ảnh sau đ&oacute;, bạn chọn một số c&acirc;u hoặc một số đoạn v&agrave; đặt n&oacute; l&agrave;m ti&ecirc;u đề của trang. Đ&acirc;y l&agrave; việc bạn thực hiện đ&aacute;nh dấu c&aacute;c th&agrave;nh phần trong t&agrave;i liệu.
HTML cho ph&eacute;p bạn đ&aacute;nh dấu t&agrave;i liệu của m&igrave;nh. Để l&agrave;m được điều đ&oacute;, ch&uacute;ng ta sẽ sử dụng c&aacute;c phần tử HTML với c&aacute;c &yacute; nghĩa kh&aacute;c nhau sẽ được học ở c&aacute;c b&agrave;i tiếp theo.
<h2 style="text-align: justify;">Cấu tr&uacute;c tệp HTML</h2>
Một tr&igrave;nh duyệt kh&ocirc;ng hiển thị c&aacute;c thẻ HTML, m&agrave; sử dụng ch&uacute;ng để x&aacute;c định c&aacute;ch hiển thị t&agrave;i liệu theo c&aacute;ch đ&atilde; được đ&aacute;nh dấu trong t&agrave;i liệu HTML. X&eacute;t đoạn m&atilde; HTML sau:
<pre class="language-html"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Page Title&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;h1&gt;My First Heading&lt;/h1&gt;
&lt;p&gt;My first paragraph.&lt;/p&gt;

&lt;/body&gt;
&lt;/html&gt; </code></pre>
Đ&acirc;y l&agrave; một đoạn m&atilde; HTML thể hiện cơ bản nhất nội dung v&agrave; cấu tr&uacute;c của một tệp HTML. Đối với đoạn m&atilde; n&agrave;y ch&uacute;ng ta sẽ thấy một số phần tử cơ bản như sau:
<ul style="text-align: justify;">
<li style="text-align: justify;">Khai b&aacute;o <code class="w3-codespan">&lt;!DOCTYPE html&gt;</code> định nghĩa đ&acirc;y l&agrave; một tệp văn bản dạng HTML5</li>
<li style="text-align: justify;">Phần tử <code class="w3-codespan">&lt;html&gt;</code> l&agrave; phần tử gốc của một trang HTML. N&oacute; c&oacute; t&aacute;c dụng chỉ định c&aacute;c th&agrave;nh phần b&ecirc;n trong l&agrave; nằm trong m&atilde; HTML.</li>
<li style="text-align: justify;">Phần tử <code class="w3-codespan">&lt;head&gt;</code> chứa c&aacute;c th&ocirc;ng tin bổ sung, bổ trợ cho việc hiển thị cũng như tối ưu h&oacute;a c&ocirc;ng cụ t&igrave;m kiếm.</li>
<li style="text-align: justify;">Phần tử <code class="w3-codespan">&lt;title&gt;</code> quy định ti&ecirc;u đề của trang (sẽ hiển thị tr&ecirc;n thanh ti&ecirc;u đề tr&ecirc;n c&ugrave;ng của c&aacute;c tr&igrave;nh duyệt)</li>
<li style="text-align: justify;">Phần tử <code class="w3-codespan">&lt;body&gt;</code> định nghĩa phần th&acirc;n của tệp HTML, v&agrave; l&agrave; nơi chứa to&agrave;n bộ c&aacute;c nội dung hiển thị được, như c&aacute;c ti&ecirc;u đề, đoạn văn bản, ảnh, đường dẫn li&ecirc;n kết, bảng, danh s&aacute;ch,...</li>
<li style="text-align: justify;">Phần tử <code class="w3-codespan">&lt;h1&gt;</code> định nghĩa một ti&ecirc;u đề văn bản với k&iacute;ch thước lớn tr&ecirc;n tr&igrave;nh duyệt.</li>
<li style="text-align: justify;">Phần tử <code>&lt;p&gt;</code> định nghĩa một đoạn văn bản.</li>
</ul>
Một c&aacute;ch tự nhi&ecirc;n, ch&uacute;ng ta sẽ thấy rất nhiều từ mới lạ nếu học lần đầu. Tuy nhi&ecirc;n, đừng lo lắng, bạn c&oacute; thể bỏ qua c&aacute;c kh&aacute;i niệm tr&ecirc;n, ch&uacute;ng sẽ được lần lượt m&ocirc; tả r&otilde; hơn ở c&aacute;c nội dung ph&iacute;a sau của kh&oacute;a học.
B&acirc;y giờ bạn chỉ cần biết rằng tệp HTML c&oacute; cấu tr&uacute;c gồm c&aacute;c th&agrave;nh phần l&agrave; c&aacute;c phần tử như tr&ecirc;n (v&agrave; nhiều phần tử kh&aacute;c). Một văn bản dạng HTML sẽ được cấu tạo từ c&aacute;c th&agrave;nh phần l&agrave; c&aacute;c phần tử HTML, đ&acirc;y l&agrave; th&agrave;nh phần cơ bản cấu th&agrave;nh tệp HTML v&agrave; gi&uacute;p định vị h&igrave;nh th&aacute;i, khung hiển thị của t&agrave;i liệu l&ecirc;n c&aacute;c tr&igrave;nh duyệt.
Khi hiển thị tr&ecirc;n tr&igrave;nh duyệt, c&aacute;c thẻ <code>&lt;h1&gt;</code>,<code>&lt;p&gt;</code>,...sẽ kh&ocirc;ng hiển thị ra m&agrave; sẽ được d&ugrave;ng để định kiểu hiển thị tương ứng cho văn bản nằm trong n&oacute;.
<img style="width: 100%; display: block; margin-left: auto; margin-right: auto;" src="https://tek4.vn/public_files/21a0e432-c30c-4ac4-9daf-31f6a583a6e3" alt="cấu tr&uacute;c tệp html" />
Sơ đồ dưới đ&acirc;y biểu diễn cấu tr&uacute;c của một tệp HTML cơ bản:
<img style="width: 100%;" src="https://tek4.vn/public_files/18c304f8-7c2b-474b-9508-93a73f284bca" alt="Screenshot 2022-12-02 at 21-16-42 Introduction to HTML" />
T&agrave;i liệu HTML tu&acirc;n theo một cấu tr&uacute;c cụ thể v&agrave; cần một số thẻ bắt buộc để hoạt động b&igrave;nh thường.
<h4 style="text-align: justify;">Thẻ <code>&lt;HTML&gt;</code></h4>
Mọi thứ trong t&agrave;i liệu HTML được bao quanh bởi thẻ <code>&lt;HTML&gt;</code>, như được l&agrave;m nổi bật ở d&ograve;ng 1 v&agrave; 8 trong code b&ecirc;n dưới.
<pre class="language-html" data-content="%3Chtml%3E%0A%C2%A0%3Chead%3E%0A%C2%A0%C2%A0%C2%A0Content%20in%20the%20head%20tag.%0A%C2%A0%3C%2Fhead%3E%0A%C2%A0%3Cbody%3E%0A%C2%A0%C2%A0%C2%A0Content%20in%20the%20body%20tag.%0A%C2%A0%3C%2Fbody%3E%0A%3C%2Fhtml%3E" data-language="html" data-ace-language="html" data-name-language="HTML" data-main-file="index.html"><code>&lt;html&gt;
 &lt;head&gt;
 Content in the head tag.
 &lt;/head&gt;
 &lt;body&gt;
 Content in the body tag.
 &lt;/body&gt;
&lt;/html&gt;</code></pre>
<h4 style="text-align: justify;">Thẻ <code>&lt;head&gt;</code> v&agrave; <code>&lt;body&gt;</code></h4>
Ngo&agrave;i ra, t&agrave;i liệu HTML hợp lệ y&ecirc;u cầu thẻ <code>&lt;head&gt;</code> v&agrave; <code>&lt;body&gt;</code> như được l&agrave;m nổi bật ở d&ograve;ng 2, 4, 6 v&agrave; 8 dưới đ&acirc;y. Ngo&agrave;i ra, c&aacute;c thẻ head v&agrave; body kh&ocirc;ng li&ecirc;n quan đến vị tr&iacute; của nội dung tr&ecirc;n tr&igrave;nh duyệt - ch&uacute;ng được sử dụng để ph&acirc;n v&ugrave;ng t&agrave;i liệu.
Thẻ <code>&lt;head&gt;</code> chứa si&ecirc;u dữ liệu như ti&ecirc;u đề trang, li&ecirc;n kết đến c&aacute;c file CSS v&agrave; JS v&agrave; từ kh&oacute;a được sử dụng bởi c&ocirc;ng cụ t&igrave;m kiếm như Google. Si&ecirc;u dữ liệu kh&ocirc;ng được hiển thị trong tr&igrave;nh duyệt.
Ngược lại, thẻ <code>&lt;body&gt;</code> chứa c&aacute;c phần tử được hiển thị trong tr&igrave;nh duyệt như đoạn văn, h&igrave;nh ảnh v&agrave; bảng dữ liệu.
<pre class="language-html" data-content="%3Chtml%3E%0A%C2%A0%3Chead%3E%0A%C2%A0%C2%A0%C2%A0Content%20in%20the%20head%20tag.%0A%C2%A0%3C%2Fhead%3E%0A%C2%A0%0A%C2%A0%3Cbody%3E%0A%C2%A0%C2%A0%C2%A0Content%20in%20the%20body%20tag.%0A%C2%A0%3C%2Fbody%3E%0A%3C%2Fhtml%3E" data-language="html" data-ace-language="html" data-name-language="HTML" data-main-file="index.html"><code>&lt;html&gt;
 &lt;head&gt;
 Content in the head tag.
 &lt;/head&gt;
 
 &lt;body&gt;
 Content in the body tag.
 &lt;/body&gt;
&lt;/html&gt;</code></pre>
<h4 style="text-align: justify;">Doctype</h4>
Doctype l&agrave; một khai b&aacute;o cho tr&igrave;nh duyệt biết phi&ecirc;n bản HTML m&agrave; t&agrave;i liệu được viết. N&oacute; n&ecirc;n được viết ở đầu t&agrave;i liệu HTML. Dưới đ&acirc;y l&agrave; một số doctype phổ biến.
<table>
<tbody>
<tr>
<td>
Khai b&aacute;o
</td>
<td>
Kiểu
</td>
</tr>
<tr>
<td>
HTML5
</td>
<td>
<pre class="language-html" data-content="%3C!DOCTYPE%20html%3E" data-language="html" data-ace-language="html" data-name-language="HTML" data-main-file="index.html"><code>&lt;!DOCTYPE html&gt;</code></pre>
</td>
</tr>
<tr>
<td>
HTML 4.01 Strict
</td>
<td>
<pre class="language-html" data-content="%3C!DOCTYPE%20HTML%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20HTML%204.01%2F%2FEN%22%20%22http%3A%2F%2Fwww.w3.org%2FTR%2Fhtml4%2Fstrict.dtd%22%3E" data-language="html" data-ace-language="html" data-name-language="HTML" data-main-file="index.html"><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;</code></pre>
</td>
</tr>
<tr>
<td>
XHTML 1.0. Strict
</td>
<td>
<pre class="language-html" data-content="%3C!DOCTYPE%20html%20PUBLIC%20%22-%2F%2FW3C%2F%2FDTD%20XHTML%201.0%20Strict%2F%2FEN%22%22http%3A%2F%2Fwww.w3.org%2FTR%2Fxhtml1%2FDTD%2Fxhtml1-strict.dtd%22%3E" data-language="html" data-ace-language="html" data-name-language="HTML" data-main-file="index.html"><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;</code></pre>
</td>
</tr>
</tbody>
</table>
<h4 style="text-align: justify;">HTML Comment</h4>
HTML Comment c&oacute; dạng <code>&lt;!-- Comment --&gt;</code> v&agrave; tr&igrave;nh duyệt bỏ qua ch&uacute;ng; bạn sử dụng comment để giải th&iacute;ch code HTML cho bản th&acirc;n hoặc những người kh&aacute;c xem t&agrave;i liệu HTML!
<h2 style="text-align: justify;">Phần tử HTML</h2>
HTML đ&aacute;nh dấu nội dung với c&aacute;c thẻ (tag) HTML. Thẻ HTML l&agrave; c&aacute;c khối x&acirc;y dựng cơ bản của trang web. Về cơ bản, ch&uacute;ng định dạng c&aacute;ch dữ liệu v&agrave; văn bản được hiển thị. Ch&uacute;ng ph&acirc;n loại nội dung th&agrave;nh c&aacute;c loại (gọi l&agrave; phần tử) Như &lsquo;ti&ecirc;u đề&rsquo;, &lsquo;đoạn văn&rsquo;, v&agrave; &lsquo;bảng&rsquo;. Một thẻ HTML chứa t&ecirc;n đặt trong cặp &lsquo;dấu ngoặc g&oacute;c&rsquo;, đ&oacute; l&agrave; dấu nhỏ hơn <code>&lt;</code> v&agrave; lớn hơn <code>&gt;</code>. Ngo&agrave;i ra, những thẻ n&agrave;y thường đi k&egrave;m với cặp thẻ mở v&agrave; đ&oacute;ng. Thẻ đ&oacute;ng tương tự như thẻ mở trừ việc thẻ đ&oacute;ng c&oacute; th&ecirc;m một dấu gạch ch&eacute;o sau dấu nhỏ hơn. H&atilde;y xem v&iacute; dụ b&ecirc;n dưới.
<pre class="language-html" data-content="%3Ctagname%3E%20content%20%3C%2Ftagname%3E" data-language="html" data-ace-language="html" data-name-language="HTML" data-main-file="index.html"><code>&lt;tagname&gt; content &lt;/tagname&gt;</code></pre>
C&aacute;c phần tử HTML l&agrave; th&agrave;nh phần cơ bản của t&agrave;i liệu HTML hay n&oacute;i c&aacute;ch kh&aacute;c, t&agrave;i liệu HTML được cấu tạo l&ecirc;n từ c&aacute;c phần tử HTML. Trong đ&oacute; mỗi phần tử HTML sẽ được cấu tạo từ c&aacute;c th&agrave;nh phần sau:
<ul>
<li>Thẻ mở</li>
</ul>
<pre class="language-html"><code>&lt;tagname&gt;</code></pre>
<ul>
<li>Thẻ đ&oacute;ng</li>
</ul>
<pre class="language-html" data-content="%3C%2Ftagname%3E" data-language="html" data-ace-language="html" data-name-language="HTML" data-main-file="index.html"><code>&lt;/tagname&gt;</code></pre>
<ul>
<li style="text-align: justify;">Nội dung của thẻ <code>content</code>: l&agrave; phần văn bản, h&igrave;nh ảnh, đường dẫn,...nằm trong thẻ v&agrave; được định dạng bởi thẻ.</li>
</ul>
Một số thẻ l&agrave; thẻ &lsquo;tự đ&oacute;ng&rsquo;, tức l&agrave; ch&uacute;ng kh&ocirc;ng cần một thẻ đ&oacute;ng. V&iacute; dụ:
<pre class="language-html" data-content="%3Cselfclosing%2F%3E%20content" data-language="html" data-ace-language="html" data-name-language="HTML" data-main-file="index.html"><code>&lt;selfclosing/&gt; content</code></pre>
Biểu đồ b&ecirc;n dưới minh họa một v&iacute; dụ về phần tử HTML được g&aacute;n nh&atilde;n.
<img style="width: 600px; display: block; margin-left: auto; margin-right: auto;" src="https://tek4.vn/public_files/9a33e6b5-ee89-4a9c-8fc7-c534b22d5c05" alt="HTML Element" />
Một phần tử HTML
Ngo&agrave;i ra, mỗi thẻ c&ograve;n được đặc trưng bởi c&aacute;c thuộc t&iacute;nh.
<h3 style="text-align: justify;">Thuộc t&iacute;nh thẻ</h3>
Tất cả c&aacute;c thẻ HTML c&oacute; thể c&oacute; 'thuộc t&iacute;nh' cung cấp th&ocirc;ng tin th&ecirc;m về một phần tử cụ thể. Thuộc t&iacute;nh lu&ocirc;n được đặt trong thẻ mở của một phần tử v&agrave; tồn tại dưới dạng cặp kh&oacute;a/gi&aacute; trị. C&aacute;c gi&aacute; trị lu&ocirc;n được đặt trong dấu ngoặc k&eacute;p (c&oacute; thể l&agrave; dấu nh&aacute;y đơn hoặc k&eacute;p, nhưng thường l&agrave; dấu nh&aacute;y k&eacute;p). V&iacute; dụ:
<pre class="language-html" data-content="%3Ctagname%20attribute%20%3D%20%22value%22%3E%20content%20%3C%2Ftagname%3E" data-language="html" data-ace-language="html" data-name-language="HTML" data-main-file="index.html"><code>&lt;tagname attribute = "value"&gt; content &lt;/tagname&gt;</code></pre>
Như vậy, trong b&agrave;i n&agrave;y ch&uacute;ng ta đ&atilde; biết bằng, một tệp HTML được cấu tạo từ nhiều phần tử v&agrave; mỗi phần tử lại được cấu tạo từ c&aacute;c thẻ hoặc cặp thẻ đ&oacute;ng mở v&agrave; nội dung của n&oacute;. C&aacute;c phần tử n&agrave;y quy ước khung hiển thị để hiển thị nội dung của c&aacute;c văn bản v&agrave; đối tượng trong văn bản ra tr&igrave;nh duyệt.
[___TIP_Chi tiết về c&aacute;c phần tử, c&aacute;c thẻ v&agrave; thuộc t&iacute;nh của c&aacute;c phần tử sẽ được học chi tiết trong c&aacute;c b&agrave;i sau._TIP___]
Trước khi đi chi tiết hơn v&agrave;o c&aacute;c phần tử HTML cụ thể, ch&uacute;ng ta h&atilde;y cũng luyện tập một b&agrave;i tập đơn giản đầu ti&ecirc;n để nắm r&otilde; hơn về cấu tr&uacute;c của một t&agrave;i liệu HTML.
<div class="ddict_btn" style="top: 5008.67px; left: 1469.57px;">&nbsp;</div>