Học HTML bằng cách tạo website siêu đơn giản này

Muốn biết cách tạo website nhưng không biết dùng code HTML nào? Theo dõi hướng dẫn này để tạo website cơ bản đầu tiên bằng HTML, kèm ví dụ source code!

Sẽ đi qua 3 nội dung:

1. HTML là gì
2. Cú pháp HTML cơ bản
3. Cách tạo website local trên máy tính

Lưu ý: bài viết dành cho người hoàn toàn mới, chưa từng làm việc với HTML.

Không có CSS hay JavaScript, nên webpage tạo ra sẽ không đẹp lắm. Chỉ tập trung vào HTML và chức năng cơ bản.

HTML là gì?

HTML viết tắt của HyperText Markup Language (Ngôn ngữ đánh dấu siêu văn bản).

Là cách hiển thị thông tin trên trang web trong trình duyệt.

Điều quan trọng: HTML không phải ngôn ngữ lập trình. Là ngôn ngữ đánh dấu (markup language). Ngôn ngữ lập trình như PHP, Java dùng logic, điều kiện để điều khiển nội dung.

HTML không làm những điều đó, nhưng vẫn cực kỳ quan trọng – nó cấu thành mọi website hiện hữu!

Nạp file HTML trong trình duyệt

Bạn có thể tạo file HTML trên máy, nạp vào trình duyệt. Nó không trên internet, chỉ máy local xem được.

Website thật trên internet: file HTML lưu trên server. Nhưng quy trình cơ bản tương tự.

Tạo file HTML:

1. Đến Desktop hoặc thư mục muốn chứa file.
2. Chuột phải → "New" → "Text Document". Đảm bảo tên file là index.html, không phải .txt.
   (Nếu không thấy đuôi file, tab "View" → tích "File name extensions".)
3. Mở file trong trình duyệt.
4. Nếu có icon Chrome/trình duyệt khác bên trái, double-click để mở. Không thì chuột phải → "Open with" → chọn trình duyệt.
5. Trình duyệt hiển thị trắng – bình thường vì file chưa có nội dung.

Chỉnh sửa file

File đã sẵn sàng, bắt đầu code!

Mở file HTML trong code editor. Chuột phải file → "Open with" chọn editor, hoặc editor có quick link menu.

Tôi dùng Visual Studio Code, nhưng có thể dùng:

• Notepad++
• Sublime
• Atom
• Brackets

File index mở ở cả trình duyệt và editor – bắt đầu viết code!

Thẻ HTML (HTML Tags)

Xem các tính năng cơ bản HTML.

HTML cấu thành từ các thẻ (tag).

Thẻ là văn bản đặc biệt dùng để đánh dấu, phân biệt các phần trang web. Do đó gọi là "markup language".

Thẻ báo cho trình duyệt hiển thị nội dung bên trong theo cách cụ thể.

Ví dụ thẻ hoạt động:

This is my very first website and I'm <b>extremely excited!!!!!</b>

Từ "extremely excited" nằm trong thẻ <b> – "b" là bold (in đậm).

Lưu file, reload trình duyệt. Text trông như sau:

Đã viết được HTML! Cảm thấy hào hứng chưa? 🙂

Cấu trúc một thẻ HTML

Xem lại thẻ trên.

Thẻ trước cụm từ: opening tag (thẻ mở) – <b>

Thẻ sau cụm từ: closing tag (thẻ đóng) – </b>. Thẻ đóng có dấu gạch chéo trước "b".

Hai thẻ này báo trình duyệt in đậm text giữa chúng. Đúng như đã thấy.

Khi trình duyệt nạp HTML, chính các thẻ là vô hình – không hiển thị trên trang.

Hay phải không? Một lý do tôi thích làm web: giống phép màu, làm thứ hiện ra trên trình duyệt.

Cấu trúc cơ bản tài liệu HTML

Dòng text trước hoạt động vì lưu file .html trình duyệt nhận diện.

Nhưng HTML thật trên internet cần thêm thẻ để mọi thứ hoạt động đúng.

Doctype và thẻ HTML

Thẻ đầu tiên cần: doctype tag. Không chính xác là HTML tag, nhưng báo trình duyệt đây là tài liệu HTML5.

Dạng: <!DOCTYPE html>

Thẻ này không cần thẻ đóng vì không bao quanh text, chỉ khai báo HTML.

Doctype cũ: HTML 4 hoặc XHTML. Hiện nay HTML5 là doctype duy nhất dùng.

Sau doctype, có thẻ HTML. Báo trình duyệt mọi thứ bên trong là HTML:

<!DOCTYPE html> <html> </html>

Hơi thừa vì đã có doctype. Nhưng thẻ này đảm bảo mọi thứ bên trong kế thừa đặc tính HTML cần thiết.

Phần Head và Body

Bên trong thẻ HTML chính, nội dung thường tách 2 phần: Head và Body.

Code trông như sau:

<!DOCTYPE html> <html> <head> </head> <body> </body> </html>

Thẻ head chứa thông tin về website, cũng nơi nạp file CSS và JavaScript. Hôm nay không nói đến đó, chỉ để bạn biết.

Thẻ body là nội dung chính trang web. Mọi thứ thấy trên trang thường nằm trong body. Cần đưa câu đầu tiên vào body.

<body> This is my very first website and I'm <b>extremely excited!!!!!!</b> </body>

Reload trang – giao diện y hệt như trước.

Giờ xem các thẻ cơ bản thường dùng trong head và body.

Không đi qua tất cả thẻ (hơn 100 thẻ, mất mãi). Chỉ xem thẻ thường dùng nhất để hiểu trang HTML cấu tạo ra sao.

Các thẻ Head cơ bản

Thẻ Meta

Thẻ meta đầu tiên nên có trong head: thiết lập encoding ký tự.

<meta charset="utf-8">

UTF-8 là encoding Unicode dùng cho hầu như mọi website thế giới. Cần encoding để dịch chữ, số, ký tự sang byte máy tính hiểu.

Giống từ điển dịch ngôn ngữ người sang ngôn ngữ máy.

Thẻ meta tiếp theo bắt buộc trên mọi web: viewport tag:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Quan trọng cho website responsive. Responsive = hiển thị đúng trên mọi thiết bị – máy tính, tablet, điện thoại.

Nội dung tag: chiều rộng website = chiều rộng thiết bị xem.

Ví dụ: điện thoại độ phân giải nhỏ hơn laptop. Tag này cho web tự resize theo thiết bị.

Initial-scale thiết lập zoom mặc định. Trên trình duyệt hiện nay có zoom in/out. Muốn mặc định = 1 (không zoom).

Thẻ Title

Ngoài meta tag, thẻ quan trọng nhất là title:

<title>My First Website</title>

Như đoán được: đặt tiêu đề trang web. Website nhiều trang, mỗi trang có title riêng.

Sau khi thêm các tag trên, head trông như sau:

<head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My First Website</title> </head>

Tab trình duyệt sẽ hiển thị nội dung title tag:

Các thẻ Body cơ bản

Giờ đến phần thú vị – thẻ body kiểm soát nội dung thực sự thấy.

Đa số thẻ body cơ bản dựa trên việc làm trong Word: tạo tiêu đề, in đậm, list, thậm chí table.

Trước khi có CSS, các thẻ này giúp tổ chức và style nội dung để người đọc hiểu dễ hơn.

Không phải thẻ nào cũng dùng nhiều như xưa. Một số không cần nữa vì CSS làm được điều tương tự.

Nhưng tôi nghĩ biết các thẻ cơ bản này vẫn hữu ích.

Thẻ tiêu đề (Header Tags)

Xem thẻ tiêu đề/heading, ký hiệu chữ H. Mỗi thẻ H có số sau H. Từ <h1> đến <h6>.

<h1> ưu tiên cao nhất. Thường dùng cho tiêu đề trang.

Thêm <h1> vào web. Nội dung: "My First Website".

Thêm subtitle với <h2>: "An HTML Playground".

Thử thêm hết các thẻ H đến <h6>.

Body sẽ trông như:

<body> <h1>My First Website</h1> <h2>An HTML Playground</h2> <h3>An HTML Playground</h3> <h4>An HTML Playground</h4> <h5>An HTML Playground</h5> <h6>An HTML Playground</h6> </body>

Lưu và reload:

Kích thước font giảm dần từ <h1> đến <h6>.

Hầu hết web không dùng hết thẻ H. Thường: <h1> cho title, <h2> subtitle, <h3> đôi khi cho tiêu đề section. Hiếm dùng <h4> đến <h6>.

Đoạn văn (Paragraph)

Thẻ tiếp theo: paragraph, hay <p>. Giống Word, dùng paragraph tách nội dung thành khối. Tạo paragraph bằng cách bọc nội dung với thẻ <p>.

Tạo paragraph với placeholder text.

Cách dễ tìm placeholder: Google "lorem ipsum". Trang tôi hay dùng.

Lorem ipsum là chữ Latin vô nghĩa, dùng trong xuất bản/design để lấp đầy text khi làm layout.

Copy paragraph này vào code, trong thẻ <p>. Tạo paragraph thứ 2 nữa. Copy thêm text vào <p> thứ 2.

<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam facilisis arcu vel mollis finibus. Nunc facilisis vel nisl lacinia cursus. Cras suscipit augue sed volutpat tincidunt. Aenean dictum tincidunt urna, quis eleifend quam mattis eu. Integer sollicitudin, nisl faucibus aliquam ullamcorper, metus sapien scelerisque lorem, at ornare dui orci non orci. Integer tempus consectetur metus, vitae blandit nibh aliquam nec. Pellentesque vestibulum arcu eget ante sollicitudin, id accumsan dui molestie. Suspendisse vehicula semper dui id congue. Suspendisse sed velit sit amet velit luctus varius. Ut condimentum tincidunt consequat. Sed eu ligula non magna scelerisque auctor. </p> <p> Maecenas feugiat iaculis imperdiet. Duis vitae pellentesque nunc, eget elementum metus. Nulla sollicitudin bibendum nibh, sit amet semper tortor. Nunc rhoncus non arcu in scelerisque. Donec magna mauris, congue ac dignissim rutrum, tincidunt quis leo. Maecenas dictum orci in magna iaculis, in elementum felis viverra. Aenean sit amet sapien odio. Donec molestie est et nisl mattis dictum. Nullam at nibh aliquet, tincidunt lorem et, facilisis enim. Praesent id felis sit amet quam dignissim volutpat. Nam nec cursus mi, quis tincidunt justo. </p>

Trên trình duyệt:

Trình duyệt tự thêm khoảng cách giữa paragraph và content khác.

Ngắt dòng (Line Break)

Muốn tách nội dung thành nhiều dòng nhưng không muốn khoảng cách kèm paragraph, dùng line break – thẻ <br>.

Lấy thêm lorem ipsum cho editor.

Lưu ý: HTML không tự ngắt dòng.

Bấm Enter vài lần trong content – không thay đổi gì trên trang. Bấm Spacebar nhiều lần – trình duyệt chỉ cho 1 space. Muốn ngắt dòng, phải thêm thẻ <br>.

Thậm chí thêm nhiều <br> để tạo nhiều khoảng trống.

Fusce sit amet rutrum lacus.<br><br><br><br><br/> Sed efficitur laoreet nisl,ac faucibus velit hendrerit sit amet. Phasellus ac orci eget nisi porta accumsan a eget ex. Nam lacinia dolor at mi tristique rhoncus.Maecenas nisl est, rhoncus id cursus non, tempor a neque.

Void element không cần thẻ đóng

Chú ý: không có thẻ đóng </br> – không cần vì không bao quanh text.

Loại thẻ không có thẻ đóng gọi là void element (rỗng – không có nội dung).

Đôi khi thấy line break viết <br/> có dấu gạch chéo. Đây là yêu cầu XHTML, nhưng HTML5 không cần dấu gạch chéo.

Trình duyệt vẫn đọc đúng, nhưng khuyến nghị viết void element không có dấu gạch chéo.

Thẻ style (Style tags)

Tập thẻ tiếp theo: style tag – thêm style cho text.

Có bold (như đầu bài), italic, underline, emphasized, strong.

Như đã nói, thẻ style này không dùng nhiều nữa vì CSS style được mọi thứ.

Đi qua từng thẻ style:

• <b> – làm text in đậm.
• <i> – làm text in nghiêng.
• <u> – làm text gạch chân.
• <em> (emphasized) – trình duyệt thường hiểu là in nghiêng.
• <strong> – thường là text in đậm.

Code demo:

<b>Sed efficitur laoreet nisl,</b><br> <i>ac faucibus velit hendrerit sit amet.</i><br> <u>Phasellus ac orci eget nisi porta accumsan a eget ex.</u><br> <em>Nam lacinia dolor at mi tristique rhoncus.</em><br> <strong>Maecenas nisl est, rhoncus id cursus non, tempor a neque.</strong>

Kết quả trên trình duyệt:

Đường kẻ ngang (Horizontal Rule)

Thẻ horizontal rule tạo đường kẻ ngang chạy ngang trang web.

Viết: <hr>

Giống <br>, horizontal rule là void element, chỉ cần 1 tag đơn, không thẻ đóng.

... <strong>Maecenas nisl est, rhoncus id cursus non, tempor a neque.</strong> <hr> Phasellus venenatis dapibus laoreet. Sed in lacus a augue rutrum ultricies. Donec eget lacinia elit. Suspendisse commodo justo at lorem molestie, vitae tempus enim laoreet. ...

Nội dung trước <hr> ở trên đường kẻ, sau nó ở dưới:

Link neo (Anchor Link)

Link là cách chính di chuyển trên internet.

Thẻ link viết là <a>. "A" là "anchor" (neo), vì link kết nối 2 website như neo tàu kết nối tàu với điểm neo.

Tạo link: bọc text muốn click được trong thẻ <a>.

Ngoài thẻ, <a> cần attribute (thuộc tính) – thông tin bổ sung trong thẻ mở.

Thuộc tính (Attributes)

Thuộc tính dùng: href – viết tắt hypertext reference. Giá trị là URL trang đích.

Ví dụ: link đến Google homepage, dùng URL https://www.google.com/.

URL = Universal Resource Locator – địa chỉ cho vị trí trang web/file muốn tải.

Thuộc tính thường dùng khác trong <a>: "target". Kiểm soát link mở cùng trang hay tab/mới.

Mặc định mở cùng trang. Muốn mở tab mới: set target = "_blank".

Demo anchor link:

<a href="https://www.google.com/" target="_blank">Sed in lacus a augue rutrum</a>

Hình ảnh (Images)

Đặt ảnh lên web: dùng thẻ image, viết <img>.

<img> là void element, không cần thẻ đóng.

Giống link, thẻ image cần URL. Thay vì href, image dùng attribute src (source – nguồn ảnh).

Tìm ảnh test trên net – nơi hay dùng: https://placeholder.com/.

Lấy URL ảnh từ Placeholder.com đưa vào src:

<img src="https://via.placeholder.com/600x300.jpg">

Hoặc tải ảnh về, đặt cùng folder index.html, tham chiếu:

<img src="600x300.jpg">

Attribute khác của <img>: border, set số pixel:

<img src="https://via.placeholder.com/600x300.jpg" border="10">

Kết quả:

Danh sách (Lists)

HTML tạo danh sách chấm (bulleted) hoặc số (numbered) dễ dàng.

Danh sách chấm = unordered list, danh sách số = ordered list.

Tạo list: dùng thẻ list – <ol> hoặc <ul> tùy ordered/unordered.

Tạo unordered list các loại trái cây.

Thẻ <ul> cho list.

Bên trong list: các list item. Mỗi item trong thẻ <li>.

Thêm: táo, cam, dứa, xoài, thanh long:

<ul> <li>apples</li> <li>oranges</li> <li>pineapples</li> <li>mangoes</li> <li>dragonfruit</li> </ul>

Kết quả:

Đổi thành ordered list (<ol>):

Danh sách lồng nhau (Nested lists)

Có thể lồng list trong list. Ví dụ: thêm loại táo dưới "apples". Tạo thẻ list mới trong list item tương ứng, với list item riêng.

Trong thẻ <li> "apples", thêm <ul> mới dưới text "apple".

Thêm loại táo: golden delicious, gala, granny smith.

<ul> <li>apples <ul> <li>golden delicious</li> <li>granny smith</li> <li>gala</li> </ul> </li> <li>oranges</li> <li>pineapples</li> <li>mangoes</li> <li>dragonfruit</li> </ul>

Reload: nested list các loại táo thụt lề sâu hơn list chính.

Lồng nhau và Thụt lề (Nesting and Indentation)

Đây là khía cạnh quan trọng viết HTML tốt. Đặt thẻ HTML trong thẻ khác = nesting (lồng nhau).

Element con và element cha

Element bên trong element khác = child element (element con), element ngoài = parent element (element cha).

Để tổ chức parent/child, thụt lề child element. Giúp phân biệt với parent.

Với list trái cây: thụt lề item chính (apples, oranges, mangoes). Loại táo thụt lề sâu hơn.

Thụt lề giúp code dễ đọc cho con người

Giữ code sạch. Bạn và người khác hiểu nhanh code làm gì.

Nếu không thụt lề, mọi element cùng cấp – rất rối. Hãy tưởng tượng hàng chục element lồng nhau, không thụt lề. Mất mãi để hiểu code.

Thói quen thụt lề là good practice không chỉ HTML, mà CSS, JavaScript, và hầu như mọi ngôn ngữ lập trình.

Không bắt buộc cho máy tính, nhưng bắt buộc cho con người đọc code. Việc đầu tiên tôi được dạy ở công ty đầu tiên là thụt lề.

Rất quan trọng. Không gì tệ hơn làm việc trên code người khác mà code lộn xộn. Thụt lề là cách dễ dàng đảm bảo code bạn viết, người khác (và chính bạn sau này) đọc được.

Bảng (Table)

Về thụt lề và element lồng nhau, thẻ HTML cuối cùng dùng nhiều lồng nhau là table.

Table ban đầu dùng tổ chức dữ liệu thành hàng và cột hiệu quả. Demo: tạo bảng ngân sách hàng tháng gia đình giả định.

Xây dựng bảng

Đầu tiên: thẻ <table>. Mọi thứ trong table nằm trong thẻ này.

Trong table: table row (hàng), table cell (ô), table header (tiêu đề cột).

Thêm hàng đầu tiên với <tr>:

<table> <tr></tr> </table>

Trong hàng này: tiêu đề cột. Dùng thẻ <th> (table header). Mặc định header in đậm và căn giữa ô.

Thêm category ngân sách: tháng, thuê nhà, điện nước, thực phẩm, ăn ngoài, giải trí. (Chắc còn category khác nhưng giữ đơn giản.)

<table> <tr> <th>Month</th> <th>Rent</th> <th>Utilities</th> <th>Groceries</th> <th>Eating Out</th> <th>Entertainment</th> </tr> </table>

Hàng tiếp theo: data tháng 8. Không phải header → dùng <td> (table data).

Giả sử: thuê $1500, điện nước $150, thực phẩm $350, ăn ngoài $100, giải trí $50.

<table> <tr> <th>Month</th> <th>Rent</th> <th>Utilities</th> <th>Groceries</th> <th>Eating Out</th> <th>Entertainment</th> </tr> <tr> <td>August</td> <td>$1500</td> <td>$150</td> <td>$350</td> <td>$100</td> <td>$50</td> </tr> </table>

Kết quả:

Style cho bảng

Hơi đơn giản. Style một chút với attribute built-in của table.

Thêm đường viền: set attribute border cho table tag = 1 pixel. Số lớn hơn → viền bảng rộng hơn. Tuy nhiên viền giữa các ô mặc định luôn 1 pixel.

Dùng cellpadding: khoảng trống thêm trong mỗi ô, từ text đến viền. Thử cellpadding 10 – thoáng hơn, không chật.

Attribute cellspacing: khoảng cách giữa các ô. Tôi thích không khoảng cách → giữ 0.

<table border="1" cellpadding="10" cellspacing="0">

Kết quả:

Best practice cho table

Xây bảng HTML: đảm bảo mọi hàng có cùng số cột.

Khác sẽ bị lỗi. Demo: xóa ô Groceries.

<table border="1" cellpadding="10" cellspacing="0"> <tr> <th></th> <th>Month</th> <th>Rent</th> <th>Utilities</th> <!-- Groceries removed--> <th>Eating Out</th> <th>Entertainment</th> </tr> <tr> <td>August</td> <td>$1500</td> <td>$150</td> <td>$350</td> <td>$100</td> <td>$50</td> </tr> </table>

Header bị dịch sang một, khoảng trống lạ ở cuối vì thiếu ô. Đặt lại.

Ô bảng có thể trải nhiều cột/hàng

Có thể làm ô trải nhiều cột. Ví dụ: tách Utilities thành 2 data: nước và điện. Điện $100, nước $50.

Tạo ô thêm trong hàng data, điều chỉnh số Utilities. Điện trước $100, nước sau $50.

<table border="1" cellpadding="10" cellspacing="0"> <tr> <th>Month</th> <th>Rent</th> <th>Utilities</th> <th>Groceries</th> <th>Eating Out</th> <th>Entertainment</th> </tr> <tr> <td>August</td> <td>$1500</td> <td>$100</td><!-- $150 changed to $100--> <td>$50</td><!-- extra cell added for $50 --> <td>$350</td> <td>$100</td> <td>$50</td> </tr> </table>

Load lúc này vẫn lỗi vì ô thừa hàng 2. Attribute sau sửa điều đó.

Thuộc tính Colspan

Muốn ô header Utilities nằm trên cả $100 và $50.

Thêm attribute colspan (column span) cho ô header Utilities, set = 2.

<th colspan="2">Utilities</th>

Ô Utilities trải 2 cột thay vì 1.

Kết quả: rất gọn gàng!

Thuộc tính Rowspan

Ngoài colspan, có rowspan làm ô trải nhiều hàng.

Ví dụ: data tháng 6, 7, 8, muốn gom thành "Fall" (Mùa thu).

Copy data tháng 8 tạo tháng 6, 7.

Ô "Fall" bên trái các tháng, bắt đầu từ tháng 6. Trong hàng tháng 6, tạo ô mới trước "June", nội dung "Fall". Set rowspan = 3 → trải 3 hàng (6, 7, 8).

Cần ô spacer hàng 1 để cột đầu trải 4 hàng.

<table border="1" cellpadding="10" cellspacing="0"> <tr> <th></th> <th>Month</th> <th>Rent</th> <th colspan="2">Utilities</th><!-- This cell will span 2 columns in the row below it --> <th>Groceries</th> <th>Eating Out</th> <th>Entertainment</th> </tr> <tr> <td rowspan="3">Fall</td><!-- this cell will span 3 rows, June, July, & August --> <td>June</td> <td>$1500</td> <td>$100</td><!-- The $100 and $50 cells will be under the Utilities cell--> <td>$50</td> <td>$350</td> <td>$100</td> <td>$50</td> </tr> <tr> <td>July</td> <td>$1500</td> <td>$100</td> <td>$50</td> <td>$350</td> <td>$100</td> <td>$50</td> </tr> <tr> <td>August</td> <td>$1500</td> <td>$100</td> <td>$50</td> <td>$350</td> <td>$100</td> <td>$50</td> </tr> </table>

Bảng cuối cùng:

Table từng dùng cho layout website

Bối cảnh lịch sử: ngoài chứa dữ liệu, developer xưa dùng table để layout web.

Ví dụ: web có header, main content, footer → tạo 1 table lớn 3 hàng. Đưa content vào ô table. Ô table chứa bất kỳ HTML: ảnh, link, text...

Rất tiện lúc bấy giờ. Giờ table hiếm dùng cho layout. Ngoại lệ phổ biến: email HTML, vì hệ thống email cũ không hỗ trợ nhiều CSS, buộc code như năm 1999.

Kết thúc

Đã xong – bạn đã tạo website cơ bản bằng HTML.

Muốn học HTML và web dev, khuyến nghị tài nguyên:

• freeCodeCamp – bootcamp coding online miễn phí do phi lợi nhuận vận hành. Nhiều毕业生获全职web dev工作。
• The Web Developer Bootcamp by Colt Steele – bootcamp full front/back-end trên Udemy, giảng bởi cựu instructor bootcamp.

Nếu thích bài viết, hãy comment bên dưới hoặc share cho bạn bè!