Bạn có muốn biết cách tạo một trang web nhưng không biết sử dụng mã HTML nào? Làm theo hướng dẫn này để tạo trang web cơ bản đầu tiên của bạn bằng HTML, với các ví dụ về mã nguồn!
Chúng ta sẽ xem xét 3 điều:
- HTML là gì
- một số cú pháp HTML cơ bản,
- và cách tạo một trang web địa phương trên máy tính của bạn.
Chỉ cần một lưu ý, bài đăng này hướng đến những người mới bắt đầu hoàn thành, những người chưa từng làm việc với HTML trước đây.
Sẽ không có bất kỳ CSS hoặc JavaScript nào liên quan, vì vậy hãy nhớ rằng trang web chúng tôi sẽ tạo này sẽ không hoàn toàn đẹp đẽ. Nó chỉ tập trung vào việc hiển thị cho bạn HTML và chức năng cơ bản của nó.
HTML là gì?
Bây giờ, HTML là gì? HTML là viết tắt của Ngôn ngữ đánh dấu siêu văn bản.
Đó là một cách hiển thị thông tin trên các trang web trong trình duyệt của bạn.
Một điều cần nhớ là bản thân HTML không phải là một ngôn ngữ lập trình. Đó là một ngôn ngữ đánh dấu. Các ngôn ngữ lập trình như PHP hoặc Java sử dụng những thứ như logic và điều kiện để kiểm soát nội dung.
HTML không làm được những điều đó, nhưng nó vẫn cực kỳ quan trọng. Rốt cuộc, nó tạo nên mọi trang web tồn tại!
Đang tải tệp HTML trong trình duyệt của bạn
Bạn thực sự có thể tạo một tệp HTML trên máy tính của mình và tải nó trong trình duyệt của bạn. Nó sẽ không có trên internet, vì vậy chỉ máy tính cục bộ của bạn mới có thể xem nó.
Đối với các trang web thực mà bất kỳ ai cũng có thể truy cập trên internet, các tệp HTML được lưu trữ trên các máy tính được gọi là máy chủ. Nhưng quy trình cơ bản khá giống nhau.
Để tạo tệp HTML của bạn:
- Truy cập màn hình của bạn hoặc bất cứ nơi nào bạn muốn đặt tệp.
- Sau đó, nhấp chuột phải và chọn “Mới” và “Tài liệu Văn bản”. Đảm bảo rằng tên tệp đọc “index.html” và không kết thúc bằng “.txt.”
(Nếu vì lý do nào đó bạn không thể thấy phần mở rộng tệp, hãy nhấp vào tab “Xem” và đảm bảo rằng hộp kiểm “Phần mở rộng tên tệp” được chọn.) - Khi bạn đã thiết lập xong tệp, bạn sẽ muốn mở tệp đó trong trình duyệt của mình.
- Nếu nó có biểu tượng Chrome hoặc trình duyệt khác ở bên trái, điều đó có nghĩa là bạn có thể nhấp đúp để tự động mở nó. Nếu không, hãy nhấp chuột phải, sau đó chọn “Mở bằng” và chọn trình duyệt yêu thích của bạn.
- Trong trình duyệt, mọi thứ sẽ trống, điều này không sao cả vì tệp chưa có bất kỳ thứ gì trong đó.
Chỉnh sửa tệp
Bây giờ bạn đã thiết lập xong tệp của mình, bạn đã sẵn sàng để bắt đầu viết mã!
Để chỉnh sửa tệp HTML, bạn sẽ muốn mở tệp đó trong trình chỉnh sửa mã. Nhấp chuột phải vào tệp và chọn “Mở bằng” và trình chỉnh sửa hoặc một số trình chỉnh sửa sẽ có liên kết nhanh từ menu.
Tôi đang sử dụng Visual Studio Code, nhưng bạn có thể sử dụng các chương trình khác như:
- Notepad ++
- Tuyệt vời
- Atom
- Dấu ngoặc nhọn
Bây giờ bạn đã mở tệp chỉ mục trong cả trình duyệt và trình chỉnh sửa của mình, chúng tôi sẽ bắt đầu viết một số mã!
Thẻ HTML
Hãy xem xét một số tính năng cơ bản của HTML.
HTML được tạo thành từ các thẻ.
Thẻ là văn bản đặc biệt mà bạn sử dụng để đánh dấu hoặc phân biệt, các phần của trang web của bạn. Do đó, ngôn ngữ “đánh dấu” siêu văn bản.
Các thẻ này yêu cầu trình duyệt hiển thị bất cứ thứ gì bên trong thẻ theo một cách cụ thể.
Dưới đây là một ví dụ về thẻ đang hoạt động:
This is my very first website and I’m <b>extremely excited!!!!!</b>
Bạn có thể thấy rằng các từ “cực kỳ phấn khích” trong <b> này các thẻ– “b” là chữ in đậm.
Bây giờ, hãy lưu tệp và tải lại trình duyệt của bạn. Văn bản sẽ giống như sau:
Được rồi! Bạn vừa viết một số HTML. Cảm thấy hào hứng chưa? 🙂
Giải phẫu thẻ HTML
Hãy xem lại thẻ.
Thẻ trước cụm từ được gọi là thẻ mở - <b>
Và thẻ sau cụm từ là thẻ đóng - </b> . Bạn có thể thấy rằng thẻ đóng có dấu gạch chéo trước “b.”
Kết hợp với nhau, hai thẻ này yêu cầu trình duyệt làm cho bất kỳ văn bản nào ở giữa chúng được in đậm. Và đó chính xác là những gì đã xảy ra.
Bây giờ có thể điều này là hiển nhiên, nhưng khi trình duyệt tải HTML, bản thân các thẻ sẽ ẩn - chúng không hiển thị trên trang.
Khá tuyệt phải không? Một lý do khiến tôi rất thích tạo trang web là nó gần giống như một phép thuật, có thể làm cho mọi thứ xuất hiện trong trình duyệt của bạn.
Cấu trúc cơ bản của tài liệu HTML
Bây giờ, dòng văn bản mà chúng tôi đã viết đang hoạt động vì chúng tôi đã lưu tệp dưới dạng tệp HTML mà trình duyệt của bạn có thể nhận ra.
Nhưng đối với HTML thực trên internet, chúng ta cần thêm một số thẻ khác vào tệp để mọi thứ hoạt động bình thường.
Doctype và thẻ HTML
Thẻ đầu tiên bạn cần là thẻ loại tài liệu. Nó không chính xác là một thẻ HTML, nhưng nó cho trình duyệt biết rằng đây là một tài liệu HTML5.
Đây là giao diện của nó:<!DOCTYPE html>
Thẻ này không yêu cầu thẻ đóng vì nó không bao quanh bất kỳ văn bản nào, nó chỉ khai báo rằng đây là HTML.
Các loại tài liệu khác đã được sử dụng trước đây là HTML 4 hoặc XHTML. Nhưng hiện tại, HTML 5 thực sự là loại tài liệu duy nhất được sử dụng.
Sau loại tài liệu, bạn có một thẻ HTML. Cái này cho trình duyệt web biết rằng mọi thứ bên trong nó đều là HTML:
<!DOCTYPE html>
<html>
</html>Tôi biết, nó có vẻ hơi thừa vì bạn đã sử dụng thẻ loại tài liệu HTML. Nhưng thẻ này đảm bảo rằng mọi thứ bên trong nó sẽ kế thừa một số đặc điểm cần thiết của HTML.
Phần đầu và phần thân
Bên trong thẻ HTML chính, nội dung của bạn thường sẽ được tách thành hai phần:Phần đầu và Phần nội dung.
Dưới đây là những gì sẽ giống như trong mã:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>Thẻ head chứa thông tin về trang web và đó cũng là nơi bạn tải các tệp CSS và JavaScript. Hôm nay chúng tôi sẽ không đề cập đến những vấn đề đó, nhưng mong bạn biết.
Thẻ nội dung là nội dung chính trong trang web. Mọi thứ bạn thấy trên trang thường sẽ nằm trong thẻ body. Vì vậy, chúng ta cần chuyển câu mà chúng ta đã nói ở phần đầu vào phần nội dung.
Đây là những gì sẽ trông như thế nào:
<body>
This is my very first website and I'm <b>extremely excited!!!!!!</b>
</body>Khi bạn tải lại trang trong trình duyệt của mình, mọi thứ sẽ giống hệt như trước.
Bây giờ chúng ta hãy đi vào một số thẻ cơ bản thường được sử dụng trong phần đầu và phần thân.
Tôi sẽ không xem qua từng thẻ có thể tồn tại, bởi vì có hơn một trăm thẻ. Và điều đó sẽ mất mãi mãi.
Chúng tôi sẽ chỉ xem xét những trang được sử dụng thường xuyên nhất để bạn có thể hiểu rõ hơn về cách một trang HTML được kết hợp với nhau.
Thẻ Head cơ bản
Thẻ meta
Thẻ đầu tiên nên có trong đầu bạn là thẻ meta này. Điều này đặt mã hóa ký tự.
<meta charset="utf-8">UTF-8 là một loại mã hóa Unicode được sử dụng trong hầu như tất cả các trang web trên thế giới. Chúng tôi cần mã hóa vì chúng tôi cần dịch các chữ cái, số và ký hiệu mà chúng tôi sử dụng thành byte được sử dụng bởi máy tính.
Bạn có thể coi nó như một loại từ điển, dịch ngôn ngữ của con người sang tiếng máy tính.
Thẻ meta tiếp theo nên có trên tất cả các trang web là thẻ chế độ xem này:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">Điều này rất quan trọng đối với các trang web đáp ứng. Đáp ứng có nghĩa là trang web có thể hiển thị chính xác trên tất cả các thiết bị - máy tính, máy tính bảng và điện thoại di động.
Nội dung trong thẻ này nói rằng nó phải làm cho chiều rộng của trang web có cùng chiều rộng với bất kỳ thiết bị nào đang xem nó.
Ví dụ:điện thoại di động có độ phân giải hoặc kích thước màn hình nhỏ hơn nhiều như một máy tính xách tay. Điều này sẽ cho phép trang web tự thay đổi kích thước theo những gì người dùng đang sử dụng.
Quy mô ban đầu đặt độ phóng đại của trang web. Trên các trình duyệt hiện nay, bạn có thể phóng to và thu nhỏ, làm cho trang web trông lớn hơn hoặc nhỏ hơn. Chúng tôi muốn nó được đặt ở mức 1 theo mặc định, nghĩa là không được phóng to hoặc thu nhỏ.
Thẻ tiêu đề
Ngoài các thẻ meta, một trong những thẻ quan trọng nhất là thẻ tiêu đề:
<title>My First Website</title>Như bạn có thể đoán, điều này đặt tiêu đề của trang web. Nếu một trang web có các trang khác nhau, mỗi trang có thể có tiêu đề riêng.
Khi bạn đã thêm tất cả các thẻ này vào mã của mình, thẻ head sẽ trông như thế này:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My First Website</title>
</head>Và bạn sẽ thấy trong trình duyệt của mình rằng tab sẽ có những gì bạn đặt trong thẻ tiêu đề:
Thẻ nội dung cơ bản
Bây giờ chúng ta hãy xem xét những điều thú vị — các thẻ body kiểm soát nội dung mà bạn thực sự có thể xem.
Hầu hết các thẻ body cơ bản đều dựa trên những thứ bạn có thể làm trong tài liệu Word. Bạn có thể tạo dòng tiêu đề, văn bản in đậm, tạo danh sách và thậm chí cả bảng.
Trong những ngày trước CSS, việc sử dụng các thẻ này đã giúp sắp xếp và cách điệu nội dung của bạn để người đọc của bạn dễ hiểu hơn.
Không phải tất cả các thẻ này vẫn được sử dụng nhiều như trước đây. Một số trong số chúng không còn cần thiết nữa vì giờ đây chúng tôi có thể sử dụng CSS để đạt được cùng một phong cách.
Nhưng tôi nghĩ sẽ vẫn hữu ích nếu ít nhất biết những thẻ cơ bản này là gì.
Thẻ tiêu đề
Trước tiên, chúng ta hãy xem xét các thẻ tiêu đề hoặc tiêu đề, được chỉ định bằng chữ H. Mỗi thẻ H cũng có một số sau chữ H. Chúng nằm trong khoảng từ <h1> thành <h6> .
<h1> thẻ có mức độ ưu tiên cao nhất. Nó thường được sử dụng cho tiêu đề của trang.
Chúng tôi sẽ thêm một <h1> vào trang web của chúng tôi. Bên trong thẻ, chúng tôi sẽ đặt tiêu đề của trang web, Trang web đầu tiên của tôi.
Chúng tôi cũng sẽ thêm phụ đề bằng <h2> , với nội dung:“Một sân chơi HTML.”
Và chỉ dành cho các cú đá, hãy thêm phần còn lại của các thẻ H, tối đa <h6> .
Vì vậy, thẻ body của bạn sẽ trông giống như sau:
<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>Nếu bạn lưu và tải lại trang web của mình, nó sẽ trông giống như sau:
Bạn có thể thấy cách kích thước phông chữ nhỏ dần từ <h1> thành <h6> .
Hầu hết các trang web không sử dụng tất cả các thẻ H. Thông thường họ sẽ sử dụng <h1> cho tiêu đề, <h2> cho phụ đề và <h3> đôi khi cho tiêu đề phần. Khá hiếm khi sử dụng <h4> thông qua <h6> .
Đoạn văn
Thẻ tiếp theo mà chúng ta sẽ xem xét là đoạn văn, hoặc <p> nhãn. Cũng giống như trong Word, bạn có thể sử dụng các đoạn văn để tách nội dung của mình thành các khối. Bạn có thể tạo một đoạn văn bằng cách bao quanh nội dung của mình bằng <p> các thẻ.
Chúng tôi sẽ tạo một đoạn văn với một số văn bản giữ chỗ.
Một trong những cách dễ nhất để tìm văn bản giữ chỗ là truy cập Google cho “ lorem ipsum . ”Đây là một trang web mà tôi sử dụng khá thường xuyên.
Lorem ipsum text là những từ vô nghĩa trong tiếng Latinh được sử dụng trong xuất bản và thiết kế để điền vào văn bản nhằm chỉnh sửa bố cục.
Vì vậy, chúng tôi sẽ sao chép đoạn văn này ở đây và đặt nó vào mã của chúng tôi, bên trong <p> nhãn. Chúng ta hãy làm một đoạn văn thứ hai nữa. Chúng tôi sẽ sao chép thêm một số văn bản và đưa nó vào một <p> thứ hai thẻ.
<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>Trong trình duyệt, nó sẽ giống như sau:
Và chúng tôi đã có nó. Trình duyệt tự động thêm một số khoảng trống giữa các đoạn văn và nội dung khác:
Ngắt dòng
Bây giờ, nếu bạn muốn tách nội dung của mình thành nhiều dòng, nhưng bạn không muốn khoảng trống đi kèm với một đoạn văn, bạn có thể sử dụng dấu ngắt dòng hoặc <br> thẻ.
Hãy tìm thêm một số lorem ipsum văn bản và đưa nó vào trình soạn thảo của chúng tôi.
Bây giờ một điều cần lưu ý về HTML là nó sẽ không tự động ngắt dòng.
Nếu bạn nhấn enter một vài lần vào nội dung của mình, sẽ không có gì khác biệt xảy ra trên trang. Tương tự với việc nhấn phím cách nhiều lần.
Trình duyệt sẽ chỉ cung cấp một không gian và thế là xong. Để tạo ngắt dòng, Bạn cần thêm <br> thẻ.
Bạn thậm chí có thể thêm nhiều ngắt dòng để thêm không gian trong nội dung của mình.
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.
Phần tử trống không yêu cầu thẻ đóng
Bạn sẽ nhận thấy rằng không có <br> đang đóng - nó không cần thẻ đóng vì nó không được sử dụng để bao quanh văn bản.
Những loại thẻ không có thẻ đóng này được gọi là phần tử trống. Void nghĩa là trống vì chúng không có nội dung.
Một lưu ý khác về điều này là đôi khi bạn có thể thấy dấu ngắt dòng được viết là <br/> với dấu gạch chéo đóng. Đây là một yêu cầu đối với XHTML, nhưng trong HTML 5, nó không cần dấu gạch chéo.
Trình duyệt sẽ vẫn đọc thẻ một cách chính xác, nhưng tôi vẫn khuyên bạn nên viết các phần tử void mà không có dấu gạch chéo đó.
Thẻ kiểu
Bộ thẻ tiếp theo mà chúng ta sẽ xem xét là thẻ kiểu– những thẻ này thêm kiểu vào văn bản.
Chúng có thể được in đậm, giống như chúng ta đã làm lúc ban đầu, sau đó cũng có các thẻ in nghiêng, gạch chân, nhấn mạnh và mạnh.
Như chúng tôi đã nói trước đây, các thẻ định kiểu này không được sử dụng nhiều vì giờ đây bạn có thể sử dụng CSS để tạo kiểu cho mọi thứ.
Hãy xem qua từng thẻ kiểu:
-
<b>thẻ làm cho văn bản in đậm . -
<i>thẻ tạo văn bản in nghiêng . -
<u>thẻ làm cho văn bản được gạch chân. -
<em>(nhấn mạnh) thẻ thường được hiểu là in nghiêng trong các trình duyệt. - Và
<strong>thẻ thường sẽ in đậm văn bản.
Đây là mã demo cho mỗi mã sẽ trông như thế nào:
<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>Và đây là mã đó sẽ trông như thế nào trong trình duyệt:
Quy tắc ngang
Thẻ quy tắc ngang sẽ tạo ra một đường ngang trên trang web của bạn.
Bạn viết nó theo cách này:<hr>
Giống như thẻ ngắt dòng, quy tắc ngang là một phần tử void và chỉ cần một thẻ duy nhất, không cần 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> thẻ sẽ ở trên dòng và nội dung bên dưới nó sẽ nằm dưới dòng như sau:
Liên kết neo
Liên kết là một trong những cách chính mà chúng ta sử dụng Internet.
Thẻ liên kết được viết dưới dạng <a> nhãn. Chữ A đó là viết tắt của "mỏ neo", vì liên kết kết nối hai trang web giống như một mỏ neo kết nối con thuyền với bất cứ thứ gì nó đang neo đậu.
Để tạo liên kết, trước tiên bạn đặt <a> xung quanh văn bản liên kết mà bạn muốn có thể nhấp được.
Ngoài bản thân thẻ, <a> thẻ yêu cầu một thuộc tính, có nghĩa là thông tin bổ sung bên trong thẻ mở.
Thuộc tính
Thuộc tính nó sử dụng là href thuộc tính. Đây là viết tắt của tham chiếu siêu văn bản . Và giá trị là URL của trang web đích.
Ví dụ:nếu bạn muốn liên kết đến trang chủ Google, bạn sẽ sử dụng URL, https://www.google.com.vn/.
URL là viết tắt của Universal Resource Locator và nó hoạt động như một địa chỉ cung cấp cho bạn vị trí của trang web hoặc tệp mà bạn muốn tải.
Một thuộc tính thường được sử dụng khác trong <a> là "mục tiêu". Điều này kiểm soát xem liên kết mà bạn nhấp vào sẽ mở trong cùng một trang hay mở trong một trang hoặc tab mới trong trình duyệt của bạn.
Theo mặc định, nó sẽ mở liên kết trong cùng một trang. Nếu bạn muốn liên kết mở trong một trang mới, hãy đặt mục tiêu thành “_blank.”
Đây là bản trình diễn về một liên kết cố định:
<a href="https://www.google.com/" target="_blank">Sed in lacus a augue rutrum</a>Hình ảnh
Điều tiếp theo chúng ta sẽ xem xét là hình ảnh. Để đưa hình ảnh lên trang web của bạn, bạn có thể sử dụng thẻ hình ảnh, được viết dưới dạng <img> .
Thẻ hình ảnh là một phần tử trống khác không yêu cầu thẻ đóng.
Tương tự như thẻ liên kết, thẻ hình ảnh cần có URL. Thay vì sử dụng liên kết href như liên kết, thẻ hình ảnh có thuộc tính là src , nghĩa là nguồn của hình ảnh.
Hãy tìm một hình ảnh trên internet để sử dụng cho ví dụ này– một nơi thực sự hữu ích mà tôi đến để kiểm tra hình ảnh là https://placeholder.com/.
Chúng tôi sẽ lấy URL của một hình ảnh từ Placeholder.com và đưa nó vào nguồn hình ảnh của hình ảnh mà chúng tôi đang tạo:
<img src="https://via.placeholder.com/600x300.jpg">Ngoài ra, bạn có thể tải xuống chính hình ảnh đó và đặt nó vào cùng thư mục với tệp index.html của bạn và tham chiếu nó theo cách này:
<img src="600x300.jpg">
Một thuộc tính mà <img> thẻ sử dụng là đường viền , mà bạn có thể đặt thành một số pixel:
<img src="https://via.placeholder.com/600x300.jpg" border="10">Nó sẽ trông như thế này:
Danh sách
Điều tiếp theo chúng ta sẽ xem xét các danh sách. HTML có thể tạo danh sách được đánh dấu đầu dòng hoặc đánh số khá dễ dàng.
Danh sách có dấu đầu dòng được gọi là không có thứ tự danh sách, trái ngược với có thứ tự danh sách sử dụng số.
Để tạo danh sách, bạn sẽ sử dụng thẻ danh sách– <ol> hoặc <ul> tùy thuộc vào việc bạn đang tạo một danh sách có thứ tự hay không có thứ tự.
Chúng tôi sẽ lập một danh sách không theo thứ tự gồm các loại trái cây khác nhau.
Chúng tôi sẽ tạo <ul> của chúng tôi cho danh sách.
Bên trong thẻ danh sách, bạn sẽ đặt các mục danh sách của mình. Mỗi mục sẽ đi vào bên trong thẻ mục danh sách của chính nó, được viết là <li> .
Chúng tôi sẽ thêm táo, cam, dứa, xoài và thanh long:
<ul>
<li>apples</li>
<li>oranges</li>
<li>pineapples</li>
<li>mangoes</li>
<li>dragonfruit</li>
</ul>Và đây là những gì trông như thế nào.
Bây giờ, nếu chúng ta thay đổi danh sách của mình thành danh sách có thứ tự, sử dụng <ol> , đây là giao diện của nó.
Danh sách lồng nhau
Bạn thậm chí có thể lồng các danh sách vào bên trong một danh sách khác. Giả sử tôi muốn thêm các loại táo khác nhau bên dưới quả táo. Chúng tôi sẽ tạo một thẻ danh sách mới bên trong mục danh sách được đề cập, với các mục danh sách của riêng nó.
Vì vậy, trong apple <li> , tôi sẽ thêm một thẻ <ul> mới dưới dòng chữ “apple”.
Sau đó, chúng tôi sẽ cho vào một số loại táo khác nhau - vàng ngon, dạ tiệc, thợ rèn bà già.
<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>Khi chúng tôi tải lại trang của mình, bạn có thể thấy rằng danh sách các loại táo lồng nhau được thụt vào thậm chí còn nhiều hơn danh sách chính.
Lồng và thụt lề
Điều này đưa tôi đến một khía cạnh quan trọng của việc viết HTML tốt. Nếu bạn đặt một thẻ HTML bên trong một thẻ khác, thẻ đó được gọi là lồng nhau.
Phần tử con và phần tử mẹ
Một phần tử bên trong một phần tử khác được gọi là phần tử con và phần tử bên ngoài được gọi là phần tử mẹ .
Để tổ chức các phần tử cha và con, chúng tôi thụt lề phần tử con. Điều này giúp phân biệt nó với phụ huynh.
Bạn có thể thấy với danh sách trái cây, tôi đã thụt lề các mục trong danh sách chính (táo, cam và xoài). Và sau đó đối với các loại quả táo, tôi thậm chí còn thụt lề nhiều hơn.
Thụt lề giúp con người có thể đọc được mã
Điều này giúp giữ cho mã sạch. Bạn và những người khác có thể nhanh chóng hiểu nó đang làm gì.
Nếu tất cả các phần tử HTML hoàn toàn không được thụt vào và ở cùng một mức, mọi thứ sẽ trông khó hiểu hơn. Hãy tưởng tượng không chỉ có một phần tử, mà có rất nhiều phần tử và thẻ khác nhau, tất cả được lồng vào nhau. Sẽ mất mãi mãi để phân tích cú pháp mã đang nói gì.
Thực hành thụt lề này được coi là thực tiễn tốt không chỉ đối với HTML mà còn đối với CSS, JavaScript và ngôn ngữ lập trình cơ bản đang tồn tại.
Nó không cần thiết đối với máy tính, nhưng con người cần đọc mã. Ở công việc đầu tiên của tôi, thụt lề là điều đầu tiên tôi được dạy trong quá trình đào tạo của mình.
Nó khá quan trọng. Không có gì tệ hơn việc phải làm việc trên mã của người khác và khiến nó hoàn toàn là một mớ hỗn độn. Vì vậy, thụt lề là một cách dễ dàng để đảm bảo rằng bạn đang viết mã mà người khác (và chính bạn) có thể quay lại và đọc.
Bảng
Và nói về các phần tử thụt lề và lồng nhau, thẻ HTML cuối cùng mà chúng ta sẽ xem qua sử dụng rất nhiều điều đó. Đó là cái bàn.
Bảng ban đầu được sử dụng như một cách hiệu quả để tổ chức dữ liệu thành các hàng và cột. Để chứng minh, hãy lập một bảng cho ngân sách hàng tháng giả định của một hộ gia đình.
Xây dựng bảng
Để bắt đầu, trước tiên chúng ta cần một <table> nhãn. Mọi thứ khác trong bảng sẽ nằm trong thẻ này.
Bên trong bảng, chúng ta sẽ có các hàng trong bảng, ô bảng và tiêu đề bảng cho tiêu đề cột.
Sau đó, chúng tôi sẽ thêm vào hàng đầu tiên của bảng, sử dụng <tr> thẻ.
<table>
<tr></tr>
</table>
Bên trong hàng này, chúng tôi sẽ đặt các tiêu đề cột. Chúng ta có thể làm điều này bằng cách sử dụng <th> - tiêu đề bảng - các thẻ. Theo mặc định, tiêu đề bảng là văn bản in đậm và cũng được căn giữa trong ô.
Sau đó, chúng tôi sẽ chỉ thêm vào một số danh mục ngân sách ở đây để xây dựng bảng này. Chúng tôi sẽ bắt đầu với tháng, sau đó là tiền thuê nhà, điện nước, cửa hàng tạp hóa, ăn uống và giải trí. Tôi chắc chắn rằng có những danh mục khác mà tôi đang quên, nhưng chúng tôi chỉ đơn giản hóa ở đây.
<table>
<tr>
<th>Month</th>
<th>Rent</th>
<th>Utilities</th>
<th>Groceries</th>
<th>Eating Out</th>
<th>Entertainment</th>
</tr>
</table>
Sau đó, trong hàng tiếp theo, chúng tôi sẽ thêm một số dữ liệu cho tháng 8. Vì đây không phải là tiêu đề, chúng tôi sẽ sử dụng <td> cho dữ liệu bảng.
Được rồi. Giả sử tiền thuê mỗi tháng của chúng tôi là bao nhiêu, $ 1500? Sau đó, chúng tôi nhận được 150 đô la cho các tiện ích, 350 đô la cho cửa hàng tạp hóa, 100 đô la cho việc ăn uống ở ngoài và 50 đô la cho giải trí.
<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>Hãy xem nó trông như thế nào. Và đây là bảng của chúng tôi:
Tạo kiểu cho bảng
Nó trông khá cơ bản, phải không? Chúng ta có thể tạo kiểu cho bảng một chút với một số thuộc tính bảng tích hợp sẵn.
Trước tiên, chúng ta có thể thêm các dòng vào bảng bằng cách đặt đường viền thuộc tính cho thẻ bảng. Chúng tôi sẽ đặt đường viền thành độ dày 1 pixel. Nếu bạn sử dụng một số lớn hơn, đường viền xung quanh bảng sẽ rộng hơn. Tuy nhiên, đường viền giữa các ô trong bảng theo mặc định luôn rộng 1 pixel.
Bạn cũng có thể sử dụng cellpadding , kiểm soát lượng không gian thừa bên trong mỗi ô, từ văn bản đến đường viền. Vì vậy, chúng ta hãy thử một cellpadding là 10. Và điều đó mang lại không gian thở rộng hơn một chút để nó không có vẻ chật chội.
Thuộc tính khác mà bạn có thể thay đổi là cellspacing . Điều này kiểm soát lượng không gian giữa các ô. Cá nhân tôi không muốn có khoảng trống giữa các ô nên chúng tôi sẽ giữ nó ở mức 0.
<table border="1" cellpadding="10" cellspacing="0">Đây là bảng trông như thế nào với các thuộc tính kiểu đó:
Các phương pháp hay nhất cho bảng
Khi tạo bảng HTML, một điều bạn cần đảm bảo là có cùng số cột ở mọi hàng trong bảng.
Nếu không mọi thứ sẽ rối tung lên. Tôi có thể cho bạn thấy điều này trông như thế nào nếu tôi xóa ô Cửa hàng tạp hóa.
<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>
Nếu bạn nhìn vào bảng trong trình duyệt, bạn có thể thấy cách các tiêu đề hiện đã chuyển qua một và có một khoảng trống kỳ lạ ở cuối vì không có ô trong bảng ở đó. Vì vậy, chúng ta hãy rút lại điều đó.
Các ô trong bảng có thể kéo dài nhiều cột / hàng
Tuy nhiên, bạn có thể tạo một ô trong bảng kéo dài nhiều cột. Giả sử chúng tôi muốn đột phá Tiện ích để có hai loại dữ liệu, một cho nước và một cho điện. Vì vậy, chúng tôi sẽ nói rằng điện là 100 đô la và nước là 50 đô la.
Để làm điều này, chúng tôi thực sự sẽ tạo thêm một ô trong dữ liệu và điều chỉnh số lượng Tiện ích. Chúng tôi có điện đầu tiên với giá 100 đô la và nước thứ hai với giá 50 đô la.
<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>Nếu chúng tôi chỉ tải bảng tại thời điểm này, bạn sẽ thấy rằng nó có vẻ lộn xộn một lần nữa vì ô thừa đó ở hàng thứ hai. Thuộc tính tiếp theo này sẽ khắc phục điều đó.
Thuộc tính Colspan
Chúng tôi muốn ô tiêu đề Tiện ích nằm trên cả ô $ 100 và ô $ 50.
Để thực hiện việc này, chúng tôi sẽ thêm một thuộc tính có tên là colspan , tức là khoảng cột, đến ô tiêu đề Tiện ích. Và đặt nó thành 2.
<th colspan="2">Utilities</th>Điều này sẽ làm cho ô Tiện ích mở rộng trên 2 cột thay vì chỉ một cột.
Và chúng tôi đây! Trông rất có tổ chức, phải không?
Thuộc tính Rowspan
Ngoài colspan, bạn cũng có thể sử dụng thuộc tính rowspan để tạo một ô kéo dài nhiều hàng.
Giả sử chúng tôi đã có dữ liệu cho tháng 6, tháng 7 và tháng 8 và chúng tôi muốn chỉ định chúng là "Mùa thu".
Tôi sẽ chỉ sao chép và dán lại, đồng thời sử dụng dữ liệu tháng 8 để tạo dữ liệu tháng 6 và tháng 7.
Để tạo ô cho mùa Thu, tôi muốn nó ở bên trái các tháng, bắt đầu từ tháng Sáu. Vì vậy, trong hàng tháng 6, tôi sẽ tạo một ô mới trước tháng 6 và đặt "Fall" vào đó. Sau đó, tôi sẽ đặt sải hàng của ô đó thành 3, để ô đó sẽ kéo dài từ tháng 6, tháng 7 và tháng 8.
Và chúng ta cần thêm một ô đệm ở hàng đầu tiên để có tổng cộng 4 hàng được kéo dài với cột đầu tiên đó.
<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>Here’s what the final table looks like!
Tables were used for website layouts
A bit of historical context about tables. Aside from containing data, web developers also used to use tables to layout web designs.
So for example if you have a website design with a header, main content, and a footer, you can create one big table with three rows. And you can then put all your content in those table cells. Table cells can contain any kind of HTML– images, links, text, you name it.
It was very handy back in the day. Nowadays tables aren’t really used very often. The only common exception that I can think of is for HTML emails, because some older email systems can’t use a lot of CSS, so coding like it’s 1999 is unfortunately the only option.
Đang kết thúc
And there you have it– you’ve made a basic website in HTML.
If you’re interested in learning HTML and web development, I’d recommend using some of the following resources to get started:
- freeCodeCamp — a free online coding bootcamp run by a non-profit. Many graduates have gone on to land full-time web development jobs.
-
The Web Developer Bootcamp by Colt Steele — complete front and back-end online bootcamp on Udemy, taught by a former coding bootcamp instructor.
If you enjoyed this post, please leave a comment below, or share it with your friends!