8/21/2012

Chapter3: HTML Elements

HTML documents được xác định bởi HTML elements.


HTML Elements


Start tag *Element contentEnd tag *
<p>Đây là đoạn văn</p>
<a href="default.htm"> Cái này là đường link</a>
<br />
HTML element là tất cả những thứ từ thẻ bắt đầu đến thẻ kết thúc:
* Thẻ bắt đầu còn gọi là thẻ mở, thẻ kết thúc gọi là thẻ đóng. (Các bạn liên hệ lại Chapter 0)


Cú pháp HTML Element
Một HTML element bắt đầu với thẻ mở./thẻ bắt đầu(từ nay mình gọi luôn là thẻ mở nhé)
Một HTML element kết thức với thẻ đóng/ thẻ kết thúc(mình gọi luôn là thẻ đóng, qui ước 1 thứ cho dễ học).
Nội dung của element là những thứ nằm giữa thẻ mở và thẻ đóng.
Cũng có trường hợp nội dung của element là trống rỗng.
Element rỗng bị đóng trong thể mở. Ví dụ như <br /> chẳng hạn.
Hầu hết các HTML element đều có các thuộc tính.

Tip: Các thuộc tính này sẽ học ở các chapter sau, học cùng một lượt dễ bị tảu hỏa nhập ma lắm.

HTML Elements lồng vào nhau.
Hầu hết các HTML element can thể lồng vào nhau(nghĩa là nó có thẻ chứa các HTML element khác).
Những HTML document bao gồm các HTML element lồng nhau.


Ví dụ ta có 1 HTML Document như sau.
<!DOCTYPE html>
<html>

<body>
<p>This is my first paragraph.</p>
</body>

</html>
Ví dụ trên chứa 3 HTML element đó là: <html> ... </html>, <body> ... </body>, <p> ...</p>.


Giải thích ví dụ trên.
Element <p>.
<p>This is my first paragraph.</p>

Element <p> xác định một đoạn văn trong HTML document. Nói cách khác khi ta thấy thẻ <p> thì ta biết đằng sau nó sẽ là đoạn văn bản.
Element này có thẻ mở là <p> và thẻ đóng là thẻ </p>.
Nội dụng của element này là : Đây là đoạn văn đầu tiên của tôi.

Tiếp theo là Element <body>.
<body>
<p>This is my first paragraph.</p>
</body>
Element <body> dùng để xác định thân của HTML document(nó chứa hầu như những thứ mà ta thấy trên trình duyệt).
Element này cũng bắt đầu bằng thẻ mở <body>  và kết thúc bằng thẻ đóng </body>.
Element này chứa một element khác là element <p>
(Giờ thì thấy Element HTML lồng vào nhau chưa?).

Tiếp tục là Element <html>.
<html>&

<body>
<p>This is my first paragraph.</p>
</body>

</html>
Element <html> dùng để xác định đây là HTML document.
Nó bắt đầu bẳng thẻ mở <html> và kết thúc bằng thẻ đóng </html>.
Element này chứa Element <body>.


Đừng quên thẻ đóng nhé.
Một vài Element vẫn có thể hiện đúng nội dung element mặc dù bạn quên viết thẻ đóng:
<p>This is a paragraph
<p>This is a paragraph
Ví dụ trên vẫn đúng trên hầu hết cac trình duyệt mặc dù nó không có thẻ đóng bởi vì thẻ đóng của Element <p> được coi là tùy chọn(Có thì tốt mà không có cũng không sao. Nhưng có vẫn hơn). Bạn nên có thể đóng, nó sẽ là thói quen tốt trong khi viết mã, vì nhiều có nhiều(rất nhiều nhé hầu như là đa số) element HTML khác nếu không có thể đóng thì trình duyệt sẽ bào lỗi hoặc kết quả hiên lên không theo như ý muốn của người viết nếu như bạn quên thể đóng. Với một hai dòng mã HTML nếu quên bạn dễ dàng phát hiện ra, chứ là vài trang mã HTML thì dù chỉ một lỗi nhỏ cũng đủ làm bạn mệt nghỉ rùi. Cuối cùng đừng quên thẻ đóng.


Element HTML rỗng.
Những element HTML này sẽ không chứa nội dung nên gọi là Element HTML Rỗng.
Ví dị như <br;> là một element rỗng, nó sẽ không có thẻ đóng ( <br> cho ta biết kết thúc một dòng. Kết thúc dòng khác Kết thúc đoạn văn nhé ).


Mẹo: Trong XHTML, Tất cả các element phải được đóng lại. Thêm một dấu / vào cuối từ khóa thẻ mở là đúng nguyên tắc nhất, ví dụ như <br /> đó là cách đóng những element rỗng đúng quy tắc trong ngôn ngữ XHTML (và XML), tất nhiên là đúng trong HTML rồi.


Mẹo HTML: Sử dụng thẻ chữ thường.
Thẻ HTML không phân biệt chữ hoa chữ thường: <P> cũng giống như <p>. Và có nhiều trang web sử dụng thẻ mà từ khóa viết hoa, điều này không sai trong HTML.
Với trang W3Schools sư dụng thẻ mà từ khóa viết thường bời vì World Wide Web Consortium (W3C) đề nghị viết thẻ bằng chữ thường HTML 4, và yêu cầu thẻ chữ thường trong XHTML.
Cái này mà anh em hỏi tôi là tại sao trong HTML4 và XHTML lại rắc rối đến thế... Tôi xin thưa đó là qui tắc cấm sửa hahahhah. Tới đây thì anh em thấy thẻ viết Hoa lợi hơn hay viết Thường lợi hơn. Anh em hãy tự hình thành cho mình một thói quen viết code sẽ rất lợi cho AE.

0 nhận xét:

Post a Comment