Tốt rồi, vậy là bây giờ chúng ta đã có 1 trang web …trống trơn. Thật buồn là nếu các bạn cứ để mặc nó như thế, có khả năng là sẽ không ai thèm quan tâm đến nó cả.
Vì thế, trong phần trình bày dưới đây, chúng ta sẽ cùng tìm hiểu :
- Cách tạo ra các khổ văn bản
- Cách sắp xếp trang với các đề mục
- Cách in đậm và nhấn mạnh 1 đoạn văn bản
- Cách trình bày thông tin dưới dạng danh sách
Trong bài học này, chúng ta cũng sẽ cùng nhau thảo luận về nhiều loại thẻ HTML khác nhau. 1 trong số chúng đã tồn tại từ thời “tiền sử” của ký nguyên web, 1 số khác lại hoàn toàn mới được xuất hiện từ phiên bản HTML5.
Phần lớn thời gian khi chúng ta viết 1đoạn văn bản trong 1 trang web, chúng ta sẽ sắp xếp chúng thành các khổ riêng biệt. Ngôn ngữ HTML sử dụng thẻ <p> để xác định giới hạn của các khổ văn bản này.
<p>Chào mừng đến thế giới của chúng tôi !</p>
<p>dùng để mở đầu khổ văn bản</p>dùng để đánh dấu kết thúc khổ văn bản
Như tôi đã nói trong bài học trước, nội dung trang web của chúng ta sẽ nằm giữa thẻ <body></body>. Chúng ta chỉ cần đặt khổ văn bản vừa viết vào đó và chúng ta sẽ tạo ra trang web với những dòng văn bản đầu tiên.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Khổ văn bản</title> </head> <body> <p>Chào mừng đến thế giới của chúng tôi !</p> </body> </html>
Các bạn có thể thử để thấy ngay kết quả. Không phải quá lộng lẫy nhưng đấy đã là 1 khởi đầu không tệ rồi.
Chắc chắn là sẽ không dùng lại ở đấy ! Tiếp theo, chúng ta sẽ cùng xem làm cách nào chúng ta có thể sử dụng HTML để thể hiện “sự xuống dòng”. Khái niệm này nghe thì có vẻ đơn giản, thế nhưng các bạn sẽ thấy là nó không hoàn toàn giống như cách các bạn vẫn hay làm với các trình soạn thảo thông dụng.
Khi chúng ta làm việc với HTML, để xuống dòng và bắt đầu 1 đoạn mới không đơn giản chỉ là nhấn nút Enter như các bạn hay làm trong các trình soạn thảo văn bản.
Hãy cùng chạy chạy thử đoạn mã dưới đây :
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Xuống dòng</title> </head> <body> <p>Chào mừng Tân binh ! Chúng ta hãy cùng học cách tạo ra 1 trang web từ A-Z. Đây là 1 dòng hoàn toàn mới sau khi tôi đã ấn nút Enter</p> </body> </html>
Toàn bộ văn bản vẫn hiển thị trên cùng 1 dòng bên trong trinh duyệt dù cho trước đó tôi đã 2 lần xuống dòng trong trình soạn thảo. Vậy nên tôi có thể cam đoan với các bạn là dù có ấn Enter bao nhiêu lần thì cũng hoàn toàn không có tác dụng gì cả.
Trong HTML, chúng ta có thể sử dụng các phương pháp khác để thể hiện sự xuống dòng.
Ví dụ, khi cần xuống dòng để chuyển sang 1 khổ văn bản mới, đơn giản là chúng ta sẽ sử dụng 1 thẻ <p> mới.
Trong thực tế, đến cuối cùng thì nội dung văn bản của 1 trang HTML chính là tập hợp của vô số thẻ <p> khác nhau.
<html> <head> <meta charset="utf-8" /> <title>Khổ văn bản</title> </head> <body> <p>Chào mừng Tân binh ! Chúng ta hãy cùng học cách tạo ra 1 trang web từ A-Z.</p> <p>Đây là 1 dòng hoàn toàn mới sau khi tôi đã ấn nút Enter</p> </body> </html>
Kết quả nhận được trong trình duyệt sẽ như sau :
Nếu các bạn chỉ đơn thuần là muốn xuống dòng nhưng không chuyển sang khổ mới, HTML còn có 1 giải pháp cho chúng ta : sử dụng thẻ “xuống dòng” !
Thẻ mà tôi vừa nhắc đến là 1 thẻ đơn : <br/>. Nếu muốn sử dụng, các bạn bắt buộc phải đặt nó bên trong 1 khổ văn bản.
<html> <head> <meta charset="utf-8" /> <title>Khổ văn bản</title> </head> <body> <p>Chào mừng Tân binh !<br/> Chúng ta hãy cùng học cách tạo ra 1 trang web từ A-Z.</p> <p>Đây là 1 dòng hoàn toàn mới sau khi tôi đã ấn nút Enter</p> </body> </html>
! Về lý thuyết thì các bạn có thể sử dụng nhiều thẻ <br/> liên tiếp để thực hiện nhiều lần xuống dòng liền nhau. Tuy nhiên, các lập trình viên web coi đây là 1 thói quen không tốt vì dẫn đến đoạn mã viết ra trở nên khó được bảo dưỡng. Nếu mục đích của bạn chỉ đơn giản là tăng khoảng cách giữa 2 dòng, sử dụng CSS sẽ là cách làm đúng đắn và cho phép thực hiện với độ chính xác cao hơn. Chúng ta sẽ cùng tìm hiểu về ngôn ngữ này trong chương sau.
Tóm lại, chúng ta có :
<p><p/>: để sắp xếp văn bản thành các khổ.<br/>: để xuống dòng.
Sau khi đã tạo ra các khổ văn bản, phần tiếp theo chúng ta sẽ tạo ra cho chúng các đề mục.
Trong 1 trang web mà nội dung trải dài trên vô số khổ khác nhau, người đọc sẽ rất khó định hướng thông tin muốn tìm và đây là lúc các đề mục trở nên hữu dụng.
Trong HTML, chúng ta có 6 cấp đề mục khác nhau thay đổi tùy vào mức độ quan trọng cần diễn đạt. Có tổng cộng 6 thẻ thể hiện sự quan trọng của đề mục từ cao nhất tới thấp nhất :
<h1><h1/>: đề mục cấp cực kỳ quan trọng, thường dùng cho tiêu đề đặt ở đầu trang. Mỗi trang không nên có quá 1 thẻ<h1><h2><h2/>: đề mục cấp rất quan trọng.<h3><h3/>: đề mục cấp quan trọng, hay dùng cho các thể loại tiêu đề phụ của các đoạn.<h4><h4/>: đề mục cấp thường, kém quan trọng.<h5><h5/>: đề mục cấp không quan trọng.<h6><h6/>: đề mục cấp hoàn toàn, hoàn toàn không quan trọng. Chúng ta rất ít khi sử dụng nó do tính thiết thực thấp.
! Chú ý, không nên nhầm lẫn các thẻ này với thẻ <title> ! Thẻ <title> dùng để hiển thị tên của trang ở phần khung trên đầu của trình duyệt trong khi các thẻ mà chúng ta vừa đề cập tới dùng để tạo ra các đề mục bên trong nội dung trang.
Dù trông có vẻ là nhiều, trong thực tế thì đa số trường hợp, chúng ta chỉ sử dụng đến <h1>, <h2> và <h3> mà hiếm khi động đến những thẻ còn lại.
Về phần trình duyệt, thẻ đề mục càng quan trọng thì kích thước chữ mà nó hiển thị sẽ càng lớn và ngược lại.
! Đừng sử dụng các đề mục chỉ để hay đổi cỡ chữ trong trang web ! Chúng ta cần phải xác định rõ cấu trúc của văn bản và sử dụng các đề mục với độ quan trong khác nhau cho phù hợp, không nên xuất hiện trường hợp có nhiều tiêu đề phụ nhưng lại thiếu đi tiêu đề chính. Nếu chỉ đơn thuần là bạn muốn thay đổi cỡ chữ, hãy tiếp tục kiên nhẫn chờ tới lúc chúng ta học CSS.
Chúng ta cùng xem ví dụ sử dụng các đề mục.
<html> <head> <meta charset="utf-8" /> <title>Đề mục</title> </head> <body> <h1>Đề mục cực kỳ quan trọng</h1> <h2>Đề mục rất quan trọng</h2> <h3>Đề mục quan trọng</h3> <h4>Đề mục kém quan trọng</h4> <h5>Đề mục không quan trọng</h5> <h6>Đề mục vô dụng</h6> </body> </html>
Trong thực tế thì trường hợp dưới đây hay xảy ra hơn.
<html>
<head>
<meta charset="utf-8" />
<title>Lập trình Tân binh</title>
</head>
<body>
<h1>Chào mừng các bạn đến với Lập trình Tân binh !</h1>
<p>Chào mừng đến với nền tảng lớp học mở dành cho Tân binh<br />
Mục đích của Lập trình Tân binh là gì ?</p>
<h2>Lớp học dành cho người mới</h2>
<p>Trang web cung cấp những lớp học tìm hiểu kiến thức dành cho những người mới ham hiểu biết !</p>
<p>Các bạn có thể tham gia các lớp học mà không cần biết về kiến thức trước đó!</p>
<h2>Cộng đồng mở</h2>
<p>Các bạn có thắc mắc, câu hỏi ? <br />
Đừng ngại đưa ra để mọi người cùng thảo luận và cùng tiến bộ !</p>
</body>
</html>
Vậy là chúng ta đã có 1 trang web với văn bản được bố cục tốt.
Tất cả những trang trí mà các bạn đang nghĩ tới trong đầu như thay đổi kích thước chữ, màu sắc, căn lề, vv…, hãy cùng chờ tới lúc chúng ta tìm hiểu về CSS. Trước hết, chúng hết hãy cứ nắm vững cách cấu trúc văn bản với HTML đã !
Trong 1 đoạn văn bản, đôi khi chúng ta muốn nhấn mạnh vào 1 số từ và làm chúng trở nên nối bật hơn. HTML cung cấp cho chúng ta 1 số thẻ để thực hiện điều này.
Để hơi nhấn mạnh vào 1 cụm từ, chúng ta có thể sử dụng thẻ <em></em>. Chúng ta chỉ cần dùng thẻ bao quanh cụm từ mục tiêu là đủ. Hãy cùng xem đoạn mã ví dụ dưới đây.
<html>
<head>
<meta charset="utf-8" />
<title>Nhấn mạnh ít</title>
</head>
<body>
<p>Chào mừng đến với nền tảng lớp học mở dành cho Tân binh !<br />
Có 1 vài cụm từ mà tôi muốn <em>nhấn mạnh</em> hơn so với những từ khác.</p>
</body>
</html>
Như các bạn có thể thấy, cụm từ nằm giữa thẻ <em> đã bị in nghiêng.
Trong thực tế thì thay đổi trên đến từ phía trình duyệt của các bạn. Khi chúng ta dùng thẻ để thông báo là chúng ta muốn nhấn mạnh vào cụm từ, trình duyệt tự đông thay đổi hình thức của cụm từ đó thành in nghiêng để nó trở nên nổi bật trước những từ khác.
Để nhấn mạnh hơn nữa, chúng ta có thể thay thế thẻ <em> bằng thẻ <strong>. Cách dùng chúng hoàn toàn tương tự nhau. Cụm từ được nhấn mạnh sẽ được in đậm để trở nên nối bật.
<html>
<head>
<meta charset="utf-8" />
<title>Nhấn mạnh</title>
</head>
<body>
<p>Chào mừng đến với nền tảng lớp học mở dành cho Tân binh !<br />
Có 1 vài cụm từ mà tôi muốn <strong>nhấn mạnh</strong> hơn so với những từ khác.</p>
</body>
</html>
Chúng ta đều thấy là cụm từ đã được in đậm. Tuy nhiên, hãy chú ý là hành động in đậm này chỉ là 1 hệ quả. Trình duyệt chọn in đậm cụm từ để nó trở nên nổi bật trong đoạn văn.
Vậy nên các bạn cần ghi nhớ là là thẻ <strong> mang ý nghĩa là “quan trọng” chứ không phải là “in đậm”. Trong chương sau, chúng ta có thể dùng CSS để hiển thị những từ “quan trọng” này dưới dạng khác chứ không nhất thiết là in đậm.
Thẻ <mark> cho phép chúng ta đánh dấu 1 cụm từ trong đoạn như cách chúng ta sử dụng bút nhớ dòng. Hành động này không mang ý nghĩa nhấn mạnh mà chỉ đơn giản để dễ dàng tìm lại cụm từ trong cả đoạn văn bản dài. Chúng ta rất hay gặp tính năng này được sử dụng khi thực hiện việc tìm kiếm trong các trang web.
<html>
<head>
<meta charset="utf-8" />
<title>Đánh dấu</title>
</head>
<body>
<p>Chào mừng đến với nền tảng lớp học mở dành cho Tân binh !<br />
Có 1 vài cụm từ mà tôi muốn <mark>nhấn mạnh</mark> hơn so với những từ khác.</p>
</body>
</html>
Vẫn như 2 thẻ trên, thẻ này chỉ ra ý nghĩa của cụm từ chứ không phải cách nó được thể hiện trong trang web. Chúng ta hoàn toàn có thể thay đổi cách thể hiện mặc định nếu muốn.
Có thể các bạn sẽ phàn nàn là tôi nói nhiều nhưng tôi muốn đảm bảo là mọi người đều nhớ rõ chú ý này vì những người mới bắt đầu rất hay bị lầm tưởng.
Nhiều bạn mới sử dụng các thẻ <em>, <strong> và <mark> lại tự nhủ rằng mình đã biết cách để in nghiêng, in đậm hay đánh dấu, vv… nói chung là thay đổi hình thức của văn bản. Trong thực tế thì đó hoàn toàn không phải nhiệm vụ của các thẻ này dù cho đúng là chúng thay đổi hình thức của văn bản.
Nhiệm vụ thực tế của các thẻ đơn giản là chỉ ra cho máy tính ý nghĩa của các cụm từ trong văn bản : cụm từ này “quan trọng”, cụm từ kia “cần nổi bật”, vv… Và bởi chúng mang những ý nghĩa như vậy nên trình duyệt quyết định là sẽ thay đổi hình thức hiển thị của các văn bản được bao bên trong để chỉ ra ý nghĩa đó chứ không phải là bắt buộc.
? Tại sao lại cần chỉ ra cho máy tính là 1 cụm từ là “quan trọng”, máy tính đâu cần phải biết điều này ?
Đương nhiên là máy tính cần phải biết điều này bởi hằng ngày, có hàng loạt các chương trình cần sử dụng đến nó khi phân tích mã nguồn của trang web. Ví dụ hay gặp nhất là các robot tự động của các bộ máy tìm kiếm như Google hay Bing. Chúng “đọc” mã HTML của trang web và những từ “quan trọng” này dưới mắt chúng sẽ cần được chú ý hơn. Điều này giúp cho khi ai đó tìm kiếm 1 từ khóa là những từ này, bộ máy tím kiếm sẽ nâng cao khả năng trả về kết quả là trang web của bạn.
Điều này không có nghĩa là sử dụng các thẻ trên sẽ chắc chắn cải thiện thứ hạng của bạn khi được tìm kiếm mà chỉ đơn giản là những thông tin trong các thẻ này có những ảnh hưởng nhất định chứ không phải là vô dụng.
? Vậy làm sao để in đậm, đổi màu, vv… ?
Tôi vẫn chỉ có 1 câu trả lời : CSS. Hãy luôn luôn ghi nhớ :
- HTML để định nghĩa nội dung, cấu trúc, quan hệ các đoạn văn bản.
- CSS để định nghĩa hình thức, màu sắc, trình bày.
Đừng vội vàng, trong chương này thì chúng ta cứ tập trung vào HTML trước đã.
Các danh sách cho phép chúng ta sắp xếp và bố cục văn bản có trình tự hơn. Trong phần này, chúng ta sẽ cùng tìm hiểu 2 loại danh sách :
- Danh sách không thứ tự
- Danh sách thứ tự hay danh sách đánh số
Dưới đây là 1 ví dụ về danh sách không có thứ tự.
- Ôtô
- Xe máy
- Xe đạp
Đây là 1 hệ thống cho phép chúng ta tạo ra danh sách các phần tử không sắp xếp thứ tự (nghĩa là không có phần tử “đầu tiên” hay “cuối cùng”). Để tạo ra danh sách này, chúng ta sẽ sử dụng thẻ kép <ul>.
<ul></ul>
Tiếp đó, để chèn thêm các phần tử vào danh sách, chúng ta sẽ đặt chúng bên trong thẻ kép <li></li>. Tất cả các thẻ <li> này đều phải nằm bên trong thẻ <ul> được nhắc tới bên trên.
<ul> <li>Ôtô</li> <li>Xe máy</li> <li>Xe đạp</li> </ul>
Và đây là kết quả chúng ta sẽ nhận được.
Chú ý là toàn bộ danh sách đều nằm bên trong thẻ <body>. Bắt đầu từ bây giờ, tôi sẽ không viết toàn bộ đoạn mã ra để tránh rối mắt và mất tập trung.
Tóm lại, trong phần này, chúng ta cần ghi nhớ 2 loại thẻ :
<ul></ul>bao quanh toàn bộ danh sách<li></li>bao quanh từng phần tử của danh sách
Các bạn có thể thêm bao nhiêu phần tử vào danh sách cũng được vì không có giới hạn cho số phần tử tối đa. Mọi việc trở nên đơn giản khi chúng ta hiểu được cách sử dụng đúng các thẻ.
! Dành cho bạn nào muốn tạo ra các danh sách phức tạp với nhiều cấp độ, chúng ta hoàn toàn có thể thực hiện được bằng cách sử dụng thẻ <ul> bên trong 1 thẻ <li> của thẻ <ul> khác. Tuy nhiên hãy chú ý về thứ tự các thẻ đóng nếu không chúng ta có thể không nhận được kết quả như ý.
Danh sách có thứ tự cũng hoạt động tương tự như trên, chỉ khác là chúng ta thay thế thẻ <ul></ul> bằng thẻ <ol></ol>. Bên trong danh sách thì không có gì thay đổi cả, các phần tử vẫn được bao quanh bởi thẻ <li></li>.
! Thứ tự các phần tử bên trong loại danh sách này rất quan trọng vì chúng sẽ đều được đánh số từ trên xuống dưới.
Các bạn có thể tự tìm hiểu qua đoạn mã ví dụ dưới đây.
<h1>Thời khóa biểu</h1> <ol> <li>Thức dậy</li> <li>Đánh răng, rửa mặt</li> <li>Ăn sáng</li> </ol>
So với đoạn mã phía trên, chúng ta chỉ thay đổi mỗi thẻ <ol>.
! Dành cho ai muốn hiểu biết thêm thì ngoài 2 loại danh sách bên trên, chúng ta còn 1 loại thứ 3 hiếm gặp hơn, đó là danh sách định nghĩa. Danh sách này nằm trong thẻ <dl>. Mỗi phần từ của danh sách được chia làm 2 phần : từ cần định nghĩa nằm trong thẻ <dt> và phần định nghĩa nằm trong thẻ <dd>.
- HTML cung cấp nhiều loại thẻ khác nhau cho phép chúng ta cấu trúc bố cục văn bản. Các thẻ này đưa ra các chỉ dẫn cho trình duyệt dưới dạng « Đây là khổ văn bản », « Đây là đề mục », vv…
- Các khổ văn bản nằm bên trong thẻ
<p></p>. Thẻ<br/>dùng để xuống dòng. - Có 6 loại thẻ đề mục từ
<h1></h1>tới<h6></h6>dành cho các cấp độ quan trọng khác nhau. - Chúng ta có thể sử dụng các thẻ
<strong>,<em>,<mark>để nhấn mạnh 1 số cụm từ. - Để tạo ra các danh sách, chúng ta dùng thẻ
<ul>(danh sách không thứ tự) và<ol>(danh sách có thứ tự). Bên trong danh sách, mỗi phần tử được bao quanh bởi thẻ<li>.