Sau khi tự mình xây dựng được một website đơn giản, nhưng hoàn chỉnh bằng HTML/CSS ở các bài học trước. Đến lúc chúng ta đào sâu hơn một chút về HTML, để hiểu hơn về các thành phần khác nhau tạo nên ngôn ngữ này ha :).
Để bắt đầu xây dựng trang web, bạn cần hiểu một chút về việc nên dùng các phần tử nào để thể hiện các loại nội dung khác nhau trong HTML. Và mỗi phần tử như vậy nó có ý nghĩa nghư thế nào về mặt ngữ nghĩa.
Chú ý: Trước khi tiếp tục bài này, bạn hãy ôn lại các thuật ngữ phổ biến trong HTML ở bài 2 nhé. Gồm có Elements (Phần tử), Tags (Thẻ), Attributes (Thuộc tính). Và trong bài này mình có sử dụng một số thuộc tính (Properties) của CSS mà mình đã giới thiệu ở bài 3 để làm ví dụ, vậy nên các cũng nên xem lại bài 3 nếu đã quên nhé.
1. (Semantics) Ngữ nghĩa trong HTML là gì?.
Ngữ nghĩa trong HTML, là việc chúng ta tạo ra cấu trúc nội dung của trang web, bằng cách sử dụng các phần tử thích hợp. Mỗi phần tử trong HTML mang một ý nghĩa riêng, nên chúng ta muốn tạo ra cấu trúc nội dung gì, thì nên dùng phần tử có ý nghĩa phù hợp. Ví dụ: bạn muốn tạo ra một đoạn văn bản thì dùng phần tử <p>, nếu muốn tạo một tiêu đề lớn thì dùng phần tử <h1>, tiêu đề thấp hơn thì dùng phần tử <h2>,...
Thực ra trong HTML, bạn thích dùng phần tử gì cho nội dung nào đó mà bạn muốn đều được cả, nó không hề cấm được các bạn làm việc đó. Ví dụ bạn hoàn toàn có thể tạo một tiêu đề cho bài viết bằng phần tử <p> thay vì dùng phần tử <h1>. Bởi vì điều cuối cùng mà các bạn muốn đó là giao diện, mà giao diện thì được quyết định bằng CSS chứ không phải là HTML. Có điều bạn hãy nhớ rằng. Giá trị nội dung của một trang web không nằm ở giao diện của nó, mà nằm ở ngữ nghĩa trong cấu trúc HTML.
Chắc là bạn biết công cụ tìm kiếm Google đúng không nhỉ?. Nếu bạn muốn website của bạn được tối ưu, để có thứ hạng tốt trong kết quả tìm kiếm của Google, thì các bạn cần phải viết mã theo ngữ nghĩa. Bởi vì nó sẽ giúp cho Robot của Google đọc, và hiểu được nội dung website của bạn một cách tốt nhất và đẩy đủ nhất. Ngoài ra, ngữ nghĩa trong HTML giúp cho bạn dễ quản lý, và làm việc với mã HTML dễ dàng hơn, vì nó cho bạn thấy rõ từng phần nội dung đó có ý nghĩa gì.
Ở bài trước mình đã giới thiệu đến bạn 2 phần tử được tạo từ thẻ p và thẻ h1, và nói về ý nghĩa của chúng rồi đúng không nào. Trong HTML có rất nhiều phần tử được dùng vào nhiều mục đích khác nhau như vậy. Nhưng bạn cứ yên tâm, mình sẽ từ từ giới thiệu đến bạn từng cái một ha.
2. Các cách khai báo CSS trong HTML.
Ở bài trước, mình đã hướng dẫn các bạn khai báo CSS bằng cách tạo ra một file style.css, sau đó gọi nó vào file HTML bằng Phần tử <link> như dưới đúng không nào?.
<link rel="stylesheet" type="text/css" href="style.css">Cách khai báo như này gọi là External: Dịch sang tiếng việt là bên ngoài, có nghĩa là mình khai báo một file CSS bên ngoài file HTML. Bây giờ mình giới thiêu bạn thê 2 cách nữa:
1. Internal (Nội bộ): Cách này chúng ta khai báo các mã CSS ngay trong file HTML, bằng cách tạo phần tử <style> bên trong phần tử <head>.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Trang web giới thiệu về Hoàng Phi IT</title>
<style type="text/css">
h1{
background-color: DodgerBlue;
text-align: center;
color: white;
font-size: 24px;
padding: 10px;
}
p{
color:Brown;
font-size: 20px;
}
</style>
</head>
<body>
<h1>Chào mừng bạn đến với Hoàng Phi IT's Blog</h1>
<p>Cảm ơn mọi người đã ghé thăm website của mình, chúng ta kết bạn với nhau trên facebook nhé. Facebook của mình là <a href="https://www.facebook.com/phi.hx">Hoàng Xuân Phi</a></p>
</body>
</html>2. Inline (Nội tuyến): Cách này chúng ta khai báo CSS ngay tại phần tử mà bạn muốn tạo kiểu, bằng cách thiết lập thuộc tính style cho phần tử đó. Với cách này, thì kiểu mà chúng ta khai báo chỉ ảnh hưởng đến phần tử đó và các phần tử con của nó mà thôi.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Trang web giới thiệu về Hoàng Phi IT</title>
</head>
<body>
<h1 style="background-color: DodgerBlue;text-align: center;color: white;font-size: 24px;padding: 10px;">Chào mừng bạn đến với Hoàng Phi IT's Blog</h1>
<p style="color:Brown;font-size: 20px;">Cảm ơn mọi người đã ghé thăm website của mình, chúng ta kết bạn với nhau trên facebook nhé. Facebook của mình là <a href="https://www.facebook.com/phi.hx">Hoàng Xuân Phi</a></p>
</body>
</html>3. Phần tử <div> và <span> trong HTML.
Mình muốn giới thiệu đến bạn 2 phần tử này đầu tiên, vì chúng khá đặc biệt. Chúng được sinh ra mà không đi kèm với một giá trị ngữ nghĩa nào cả, đơn giản chúng được sử dụng để làm vùng chứa nội dung cho mục đích tạo kiểu mà thôi.
Phần tử <div>: Phần tử này thường được sử dụng để làm vùng chứa cho các phần tử HTML khác. Với mục đích có thể là bạn muốn tạo kiểu cho vùng chứa đó, hoặc có thể là bạn muốn chia nhỏ các vùng nội dung ra.
Để hiểu hơn, các bạn xem ví dụ dưới đay nhé. Mình đã thêm một vùng chứa cho hai phần tử <h1> và <p>. Và mình tạo kiểu cho vùng chứa có màu nền (background-color) là màu đen, khoảng trống xung quanh (padding) là 20px, và màu (color) cho văn bản trong nó là màu trắng.
<div style="background-color:black;color:white;padding:20px;">
<h1>Chào mừng bạn đến với Hoàng Phi IT's Blog</h1>
<p>Cảm ơn mọi người đã ghé thăm website của mình, chúng ta kết bạn với nhau trên facebook nhé. Facebook của mình là <a href="https://www.facebook.com/phi.hx">Hoàng Xuân Phi</a></p>
</div>Phần tử <span>: Phần tử này thường dùng để làm vùng chứa cho một đoạn văn bản nhỏ ở trong một đoạn văn bản dài, mục đích là để tạo kiểu cho văn bản trong đoạn nhỏ đó khác với các văn bản còn lại nếu bạn muốn.
Để hiểu hơn, các bạn xem ví dụ bên dưới nha. Các bạn thấy mình khai báo một phần từ <h1>, tạo kiểu cho nó có màu văn bản (color) là màu đen. Nhưng trong đoạn văn bản này, mình muốn chữ "Hoàng Phi IT's" có màu đỏ để nổi bật lên, nên mình dùng phần tử <span> tạo vùng chứa để tạo kiểu riêng cho nó.
<h1 style="color:black;">Chào mừng bạn đến với <span style="color:red;">Hoàng Phi IT's</span> Blog</h1>4. (Comments) Ghi chú trong HTML.
HTML cung cấp cho chúng ta một loại thẻ ghi chú, mục đích, là cho chúng ta có thể để lại các chú thích khi cần thiết. Và những chú thích này không được hiển thị trên trang web, mà chỉ để các lập trình viên quản lý code của mình hiệu quả hơn mà thôi.
Để thêm ghi chú vào mã HTML của mình, bạn hãy sử dụng cú pháp như sau:
<!-- Viết ghi chú của bạn vào đây -->Các bạn chú ý là có một dấu chấm than (!) trong thẻ mở, nhưng không có trong thẻ đóng nha, nhiều bạn nhìn miết mà vẫn bị nhầm đó :D.
Mình thử đưa ra 2 ví dụ để bạn hiểu về lợi ích của nó ha.
1. Giả sử bạn đang làm việc trên một trang web nào đó, nhưng hết giờ làm việc rồi mà vẫn làm chưa xong. Bạn sợ đến ngày mai thì sẽ quên đi một ý tưởng nào đó, thì bạn có thể dùng thẻ ghi chú để ghi lại một lời nhắc.
2. Có thể sau này bạn làm trong một dự án lớn nào đó có nhiều người cùng làm trên một file HTML. Khi bạn thêm một khối phần tử nào đó, mà sợ người khác không hiểu mục đích của việc thêm nó là gì, thì bạn có thể dùng thẻ ghi chú để ghi lại một chú thích.
Để hiểu hơn về ghi chú, các bạn hãy xem ví dụ dưới đây nha:
<!-- Khối này dùng để giới thiệu về Hoàng Phi IT -->
<div>
<h1>Hoàng Phi IT là ai?</h1>
<!-- Ngày mai sẽ thêm thông tin giới thiệu về Hoàng Phi IT ở đây. -->
</div>5. (Headings) Tiêu đề trong HTML.
Ở bài 1 mình có giới thiệu đến bạn thẻ tiêu đề <h1> rồi đúng không nào?. Nhưng đó mình chỉ giới thiệu sơ bộ trong ví dụ thôi, ở đây mình sẽ đề cập rõ hơn về ý nghĩa của nó ha.
HTML cung cấp cho chúng ta đến tận 6 thẻ tiêu đề, được phân cấp thứ hạng giảm dần từ <h1> cho đến <h6>. Và nó được sử dụng cho việc phân cấp nội dung của trang web. Để các bạn dễ hiểu hơn, mình lấy sách giáo khoa các bạn đang học ra làm ví dụ đi nha. Một bài học trong sách giáo khoa nó được soạn theo cấu trúc như sau: Đầu tiên, bạn thấy tiêu đề lớn nhất chính là tên bài học, sau đó được phân tiếp nhiều cấp độ thấp hơn, từ mục một lớn (I), hai lớn (II),... rồi đến một nhỏ (1), hai nhỏ (2),... tiếp theo là a, b, c,... đúng không nào. Thì trong HTML cũng tương tự thế, chúng ta dùng thẻ <h1> cho tiêu đề chính, tiếp theo sẽ dùng các thẻ <h2>, <h3>,... cho các tiêu đề cấp thấp hơn.
Việc phân cấp nội dung theo tiêu đề này rất quan trọng. Thứ nhất, là giúp người đọc dễ hiểu được nội dung mà bạn thể hiện trên trang web, thứ 2 là giúp cho các công cụ tiềm kiếm như Google lập chỉ mục, và xác định nội dung trên trang web của bạn. Vậy nên nếu bạn muốn website của bạn có thứ hạng tốt trên các công cụ tìm kiếm, thì việc tối ưu hoá sử dụng các thẻ tiêu đề này cũng là một phần rất quan trọng.
Các bạn thử xem ví dụ dưới đây, để hiểu các cấp độ tiêu đề sẽ hiển thị như thế nào trên trình duyệt nha:
<h1>Heading Level 1</h1>
<h2>Heading Level 2</h2>
<h3>Heading Level 3</h3>
<h4>Heading Level 4</h4>
<h5>Heading Level 5</h5>
<h6>Heading Level 6</h6>Mỗi cấp độ tiêu đề trong HTML sẽ được thiết lập một kích thước mặc định, và kích thước giảm dần từ <h1> đến <h6>. Nhưng bạn hoàn toàn có thể thay đổi kích thước của nó theo mong muốn của mình bằng CSS.
Lưu ý: Chỉ sử dụng các thẻ tiêu đề HTML cho các tiêu đề của nội dung. Không sử dụng cho việc in đậm hay làm lớn văn bản.
5. (Paragraphs) Đoạn văn trong HTML.
Một đoạn văn bản trong HTML được xác định bằng phần tử <p>, cái này mình cũng đã giới thiệu ở bài trước rồi, đơn giản đúng không nào. Trong một trang web, bạn cần bao nhiêu đoạn văn, thì cứ thêm từng ấy phần tử <p> thôi.
Nhân tiện mình giới thiệu đến bạn thẻ <br>. Thẻ này dùng để xác định xuống dòng trong văn bản. Trong một đoạn văn bản, bạn muốn xuống dòng ở vị trí nào đó mà không muốn tạo một đoạn văn bản mới, thì bạn có thể dùng <br>. Thẻ này có cái đặc biệt ở chổ, nó là một thẻ trống và không có thẻ đóng, và trong HTML có nhiều thẻ không cần thẻ đóng như vậy, từ từ mình giới thiệu tiếp ở các bài sau :).
Để hiểu hơn về Paragraphs và cách xuống dòng trong văn bản, hãy xem ví dụ dưới đây:
<p>Chào mừng bạn đến với Hoàng Phi IT's Blog</ p>
<p>Cảm ơn mọi người đã ghé thăm website của mình.<br> Bạn hãy like fanpage của mình để theo dõi các bài viết mới nhé :)</p>6. Định dạng văn bản trong HTML.
Thực ra định dạng văn bản, nó cũng là một phần trong việc tạo kiểu, và chúng ta hoàn toàn xử lý bằng CSS. Có điều ở đây mình muốn giới thiệu đến bạn một số thẻ HTML thường được sử dụng nhất, mà mục đích của nó không đơn thuần chỉ là tạo kiểu mà còn mang ý nghĩa về mặt ngữ nghĩa nữa.
1. Tạo chữ in đậm bằng phần tử <b> và <strong>.
Để hiểu cách sử dụng phần tử <b> và <strong> các bạn xem ví dụ sau nhé:
<p>Chào mừng bạn đến với <strong>Hoàng Phi IT's Blog</strong></ p>
<p>Cảm ơn mọi người đã ghé thăm <b>Website</b> của mình. Bạn hãy like fanpage của mình để theo dõi các bài viết mới nhé :)</p>Bạn có thấy mình đã in đậm chữ "Hoàng Phi IT's Blog" và "Website" bằng cách dùng phần tử <strong> hoặc phần tử <b> đúng không nào?. Nhưng chúng không hoàn toàn giống nhau đâu nhé. HTML không làm điều thừa thãi như vậy đâu :).
Phần tử <strong> được sử dụng về mặt ngữ nghĩa, dùng để xác định tầm quan trọng của đoạn văn bản nào đó trong nội dung HTML của bạn. Như vậy khi các công cụ tìm kiếm vào đọc nội dung trang web bạn, và thấy có một số văn bản được nằm trong <strong>, thì nó sẽ ưu tiên xem xét để lập chỉ mục từ khoá theo văn bản đó chẳng hạn.
Phần tử <b> chỉ dùng để tạo kiểu thôi, nó đơn giản là để in đậm cho một đoạn văn bình thường nào đó mà bạn muốn, chứ không xác định sự quan trọng của văn bản nằm trong nó.
Vậy nên các bạn cần phải biết đánh giá tầm quan trọng của các văn bản mà bạn muốn in đậm, đoạn nào cần dùng để làm từ khoá quan trọng thì dùng <strong>, đoạn nào không cần thì chỉ cần dùng <b> là được rồi.
2. Tạo chữ in nghiên bằng phần tử <i> và < em>.
Để hiểu cách sử dụng phần tử <i> và <em>, bạn hãy xem ví dụ sau nhé:
<p>Chào mừng bạn đến với <em>Hoàng Phi IT's Blog</em></ p>
<p>Cảm ơn mọi người đã ghé thăm <i>Website</i> của mình. Bạn hãy like fanpage của mình để theo dõi các bài viết mới nhé :)</p>Các bạn thấy mình đã in nghiêng chữ "Hoàng Phi IT's Blog" và "Website" bằng cách dùng phần tử <em> hoặc phần tử < i>. mục đích của mỗi cái nó cũng tương tự như <strong> và <b> nhé :). <em> không chỉ dùng để làm in nghiêng, mà còn sử dụng về mặt ngữ nghĩa, xác định tầm quan trọng của đoạn văn. còn <i> chỉ dùng để in nghiêng các văn bản bình thường thôi.
OK, bài học hôm nay cũng quá dài rồi, hẹn các bạn ở các bài học tiếp theo nha :). Và xong buổi học hôm nay, mình cần các bạn làm một bài tập nho nhỏ, đó là hãy vận dụng các kiến thức học được trong bài học này, để cập nhật lại trang web đầu tiên mà mình đã giới thiệu ở bài trước. Hãy sử dụng hết toàn bộ các thứ, mà mình đã hướng dẫn trong bài học này cho trang web của bạn luôn nhé, để giúp cho bạn dễ nhớ và hiểu sâu hơn. Cập nhật xong rồi thì hãy upload lên Hosting mà mình đã hướng dẫn các bạn đăng ký ở bài 4 luôn nhé ^^.
Tags:
website
web developer
lập trình web
lập trình viên
để trở thành lập trình viên
để trở thành web developer
website là gì
web development
Hãy Like nếu bạn thấy thích bài viết này nhé :)
Hoàng Phi IT.
Tác giả
Cảm ơn bạn rất nhiều vì đã đọc hết bài viết của mình, nếu bạn thấy nó hữu ích hay có bất kỳ ý kiến gì hãy comment bên dưới cho mình biết với nhé!. Cảm ơn bạn rất nhiều!!!!!!!!!
