%20thân%20thiện%20và%20hiệu%20quả%20nhất)
Người Viết : ViKiMi Editor
Các Phần Tử CƠ Bản của HTML giúp xây dựng bộ khung của Website, cần phải thuần thục
Chúng ta đã có cái nhìn cơ bản nhất về cách mà HTML làm việc và tạo một cấu trúc Website. Nhưng chúng ta còn có thể tạo những gì mới và những hiểu biết cơ bản nào cần nắm rõ? Vậy chúng ta sẽ đưa ra những khái niệm cơ bản nào cần nắm bắt. Đó là những cái nhìn tổng quan về các thành phần cơ bản của HTML để xây dựng Website.
Để thuận tiện Chúng ta sẽ nhắc lại một số khái niệm sau :
+ Tất cả tài liệu HTML phải bắt đầu bằng khai báo loại tài liệu :
<!DOCTYPE html>
Đây là khai báo cho kiểu tài liệu, điều này sẽ giúp trình duyệt hiển thị trang Web một cách chính xác.
Nó ở đầu tiên trước bất kỳ thẻ HTML nào.
Và đây là khai báo cho HTML5.
+ Tài liệu HTML bắt đầu bằng <html> và kết thúc bằng </html>.
+ Nội dung hiển thị của tài liệu HTML nằm giữa <body> và </body>.
A ] THUỘC TÍNH KIỂU CỦA HTML / HTML STYLES
Khi bạn thiết kế Website thì chắc chắn không thể để Website chỉ có màu đen và trắng, cũng như không có các thiết kế mang tính đồ hoạ.
Vậy buộc lòng bạn phải sử dụng THUỘC TÍNH KIỂU HTML / HTML STYLES để tạo một Website có tính thiết kế màu sắc hơn.
+ Thuộc tính kiểu của HTML / HTML styles giúp thêm kiểu cho các thành phần của HTML, chẳng hạn như color, font, size, etc.
+ Việc đặt kiểu cho phần tử HTML thì chúng ta có thể sử dụng style attribute.
Cách sử dụng đơn giản như sau :
CÚ PHÁP :
<tagname style=”property:value;”>
Áp dụng cho các thẻ của HTML.
EXAMPLE :
<!DOCTYPE html>
<HTML>
<body style="background-color:blue; color:orangered;">
<h1> Đây là HTML HEADING H1 </h1>
<p> Đây là đoạn văn bản </p>
</body>
<HTML>
Hoặc,
<!DOCTYPE html>
<HTML>
<body>
<h1 style="background-color:blue; color:orange;"> Đây là HTML HEADING H1 </h1>
<p style="color:green;"> Đây là đoạn văn bản </p>
</body>
<HTML>
Chúng ta tham khảo một số thuộc tính Kiểu HTML như sau :
Để sử dụng hết các thuộc tính kiểu áp dụng cho các phần tử HTML buộc lòng bạn phải biết ngôn ngữ CSS. Nên phía dưới chỉ tham khảo một số ít thuộc tính kiểu HTML.
1 ] Background Color :
Đây là thuộc tính xác định màu nền cho MỘT phần tử HTML
<body style=” background-color: blue; “>
2 ] Text Color :
Thuộc tính Text Color xác định màu văn bản cho một phần tử HTML
<h1 style=”color:blue;”>Đây là HTML Heading H1, với màu văn bản là Blue</h1>
<p style=”color:red;”>Đây là đoạn văn bản, với màu văn bản là Red</p>
3 ] Fonts / Phông chữ
Thuộc tính Font-family xác định Phông Chữ cho một phần tử HTML. Bạn biết đấy một đoạn văn hoặc một bài văn sẽ được thể hiện với Phông chữ được lựa chọn. Và thuộc tính này giúp bạn điều đó.
<h1 style=”font-family:verdana;”> Đây là HTML Heading H1, với font là verdana</h1>
<p style=”font-family:courier;”> Đây là đoạn văn bản, với với font là courier</p>
4 ] Text Size / Cỡ Chữ
Thuộc tính CSS Font Size xác định kích thước chữ cho văn bản
<h1 style=”font-size:300%;”> Đây là HTML Heading H1, với font size là 300%</h1>
<h2 style=”font-size:20px;”> Đây là HTML Heading H1, với font size là 20px</h2>
<p style=”font-size:160%;”> Đây là đoạn văn bản, với với font size là 160%</p>
5 ] Text Alignment / Căn chỉnh văn bản
Thuộc tính text-align giúp căn chỉnh văn bản theo chiều ngang cho các phần tử HTML
<h1 style=”text-align:center;”> Đây là HTML Heading H1, với với text align là center </h1>
<p style=”text-align:left;”> Đây là đoạn văn bản, với với text align là left </p>
B ] TIÊU ĐỀ CỦA HTML / HTML HEADINGS
Tiêu đề của HTML thể hiện Tiêu đề hoặc Phụ Đề mà bạn muốn thể hiện trên Website. Tiêu đề của HTML / HTML HEADINGS thực sự rất quan trọng và mang lại nhiều lợi ích.
Khi bạn thực hiện SEO cho Website thì đây là một thành phần rất tốt bởi vì tất cả các công cụ tìm kiếm đều sử dụng tiêu đề để lập chỉ mục cấu trúc. Tất nhiên, nếu bạn muốn SEO thì bạn phải lập trình và đồng thời sẽ sử dụng HTML HEADINGS làm một yếu tố quan trọng đầu vào.
+ Tiêu đề của HTML được định nghĩa bằng các thẻ :
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
+ Thẻ <h1> sẽ định nghĩa một tiêu đề quan trọng nhất cần thể hiện trên trang Web. Và Tiêu đề sẽ giảm độ quan trọng lần lượt đến các thẻ tiếp theo.
+ Trong đó <h6> là tiêu đề thể hiện thông tin ít quan trọng nhất.
+ Độ lớn của chữ do HTML HEADINGS thể hiện đã được quy định mặc định.
Nếu bạn muốn thay đổi độ lớn của HTML HEADINGS thì bạn phải sử dụng thuộc tính Style, Sử dụng thuộc tính CSS Font Size.
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
EXAMPLE : Thay đổi độ lớn của Headings bằng cách sử dụng Font Size
Thay đổi Kích thước H1 (Mặc định có font-size: 2em) :
<h1 style=”font-size:100px;”> Heading 1 </h1>
C ] HTML PARAGRAPHS / ĐOẠN VĂN BẢN HTML
Chúng ta luôn có Đoạn Văn / HTML Paragraphs luôn bắt đầu trên một dòng mới và trình duyệt sẽ thêm một khoảng trắng trước và sau Đoạn Văn.
+ Đoạn Văn Bản HTML thông thường là một khối văn bản
EXAMPLE : Thể hiện đoạn văn bản HTML
<p style=”text-align:left;”> Đây là đoạn văn bản, với với text align là left </p>
Lưu ý :
Khi bạn thể hiện văn bản thì ngôn ngữ HTML xảy ra hiện tượng sau :
Với HTML, bạn không thể thay đổi cách hiển thị bằng cách thêm dấu cách hoặc dòng thừa trong mã HTML của mình.
Trình duyệt sẽ tự động xóa mọi khoảng trắng và dòng thừa khi trang được hiển thị:
Ví Dụ :
<p>
Đây là đoạn văn bản
Chứa nhiều dòng trong
source code HTML,
Nhưng nó sẽ bị trình
duyệt bỏ qua.
</p>
<p>
Đây là đoạn văn
chứa nhiều khoảng trắng
trong source code HTML,
nhưng browser
sẽ bỏ qua nó.
</p>
KẾT QUẢ TRÌNH DUYỆT :
+ Để giải quyết vấn đề này bạn cần dùng các thẻ của HTML cung cấp. Như vậy sẽ có kết quả hiển thị đúng cách.
1 ] HTML Horizontal Rules / Thước ngang HTML
Thẻ <hr> xác định điểm ngắt theo chủ đề trong trang HTML và thường được hiển thị dưới dạng như một thước ngang.
Phần tử <hr> được sử dụng để phân tách nội dung (hoặc xác định thay đổi) trong trang HTML. Nó sẽ tạo một dòng kẻ ngang.
Example :
<h1> Đây là tiêu đề h1 </h1>
<p> Đây là đoạn văn bản p-1</p>
<hr>
<h2> Đây là tiêu đề h2 </h2>
<p> Đây là đoạn văn bản p-2</p>
<hr>
Hình Ảnh Kết Quả :
2 ] HTML Line Breaks / Ngắt dòng
Phần tử <BR> giúp ngắt dòng trong HTML
Sử dụng Thẻ <BR> nếu bạn muốn xuống dòng mới ( Mà không phải tạo một đoạn văn bản mới / Với Thẻ P )
Example :
<p>Thẻ hiện Văn Bản <br> Các phần tử HTML <br> có sử dụng ngắt dòng.</p>
3 ] The HTML <pre> Element / Phần tử <Pre>
Phần tử HTML <pre> xác định văn bản được định dạng sẵn. Do đó, đoạn văn sẽ giữ được định dạng ban đầu mà không cần dùng thêm thẻ các khác.
Sử dụng thẻ <pre> sẽ giúp giữ nguyên cả khoảng trắng và ngắt dòng.
+ Thẻ này thường được sử dụng để thể hiện Coding trên trang Web.
Example ::
<pre>
Sử dụng thẻ pre thật đơn giản.
Giúp giữ nguyên
các khoảng trắng Và ngắt dòng.
Thẻ pre được sử dụng nhiều.
</pre>
Như Vậy, Chúng ta đã làm quen với một số thành phần cơ bản đầu tiên của HTML. Thực sự không khó để tiếp xúc với HTML, lợi ích của nó là nền tảng cho những thiết kế Website mang tính chất khó hơn. HTML là một ngôn ngữ luôn đồng hành với Thiết Kế Website.
