Thành phần của HTML
Các dạng thẻ HTML Thẻ HTML dùng để viết lên những thành tố HTML Thẻ HTML được bao quanh bởi hai dấu lớn hơn < và > nhỏ hơn. Những thẻ HTML thường có một cặp giống như <b> và </b> Thẻ thứ nhất là thẻ mở đầu và thẻ ...
Các dạng thẻ HTML
Thẻ HTML dùng để viết lên những thành tố HTML
Thẻ HTML được bao quanh bởi hai dấu lớn hơn < và > nhỏ hơn.
Những thẻ HTML thường có một cặp giống như <b> và </b>
Thẻ thứ nhất là thẻ mở đầu và thẻ thứ hai là thẻ kết thúc.
Dòng chữ ở giữa hai thẻ bắt đầu và kết thúc là nội dung.
Những thẻ HTML không phân biệt in hoa và viết thường, ví dụ dạng <b> và <B> đều như nhau.
Nhớ lại ví dụ ở trên của chúng ta về HTML
<html><head><title>Trường đại học sư phạm kỹ thuật Hưng Yên</title>
</head><body>
www.utehy.vn and www.utehy.edu.vn. <b>UTHYE and web design resources </b>
</body></html>
<b>UTEHY and web design resources </b> bắt đầu với thẻ: <b> Nội dung của nó là: UTHYE and web design resources kết thúc với thẻ: </b> Mục đích của thẻ <b> là để xác định một thành phần của HTML phải được thể hiện dưới dạng in đậmĐây cũng là một thành phần của HTML:
<body>
www.utehy.vn and www.utehy.edu.vn.
<b> UTHYE and web design resources </b>
</body>
Phần này bắt đầu bằng thẻ bắt đầu <body> và kết thúc bằng thẻ kết thúc </body>. Mục đích của thẻ <body> là xác định thành phần của HTML bao gồm nội dung của tài liệu.
Những thẻ HTML đều có những thuộc tính riêng. Những thuộc tính này cung cấp thông tin về thành phần HTML của trang web. Tag này xác định thành phần thân của trang HTML: <body>. Với một thuộc tính thêm vào là bgcolor, bạn có thể báo cho trình duyệt biết rằng màu nền của trang này là màu đỏ, giống như sau: <body bgcolor="red"> hoặc <body bgcolor="#E6E6E6"> (#E6E6E6 là giá trị hex của màu) Thẻ này sẽ xác định dạng bảng HTML: <table> với một thuộc tính đường viền (border), bạn có thể báo cho trình duyệt biết rằng bảng sẽ không có đường viền: <table border="0"> Thuộc tính luôn luôn đi kèm một cặp như name/value: name="value" (tên="giá trị") thuộc tính luôn luôn được thêm vào thẻ mở đầu của thành phần HTML.
Dấu ngoặc kép, "red" hoặc 'red'
Giá trị thuộc tính nên được đặt trong dấu trích dẫn " và ". Kiểu ngoặc kép như vậy thì phổ biến hơn, tuy nhiên kiểu đơn như ' và ' cũng có thể được dùng. Ví dụ trong một vài trường hợp đặc biệt hiếm, ví dụ như giá trị thuộc tính đã mang dấu ngoặc kép rồi, thì việc sử dụng ngoặc đơn là cần thiết. Ví dụ: name='ban"tay"den'
Những thẻ quan trọng nhất trong HTML là những thẻ xác định Heading, đoạn văn và xuống dòng.
HTML head
<html>
<head>
<title>The title is not displayed</title>
</head>
<body>
<p>This text is displayed</p>
</body>
</html>
Thông tin tiêu đề ở trong phần head thì không được hiển thị trong cửa sổ trình duyệt.
Đường link tài liệu:
<html>
<head>
<base target="_blank">
</head>
<body>
<p>
<a href=http://www.utehy.vn target="_blank">This link</a>
Đoạn này sẽ cho ra một cửa sổ mới bởi vì nó được gắn thuộc tính target là "_blank".
</p>
<p>
<a href='http://www.utehy.vn'>
This link</a>
Chỉ thực hiện chuyển cửa sổ hiện hành đến trang cần đến.
</p>
</body>
</html>
Cách sử dụng thẻ <base> để làm cho tất cả các đường link trên một trang mở ở một cửa sổ mới.
Thành phần của head
Thành phần của head bao gồm những thông tin chung, hay còn được gọi là meta-information về tài liệu. Meta có nghĩa là "thông tin về". Bạn có thể nói rằng meta-data có nghĩa rằng thông tin về data, hoặc meta-infomation có nghĩa rằng thông thin về thông tin.
Thông tin trong thành phần head.
Theo như tiêu chuẩn của HTML, chỉ một vài thẻ được chính thức đặt trong phần head đó là: base>, <link>, <meta>, <title>, <style>, and <script>.
Đây là một ví dụ hợp quy định
<head><p>This is some text</p>
</head>
Trong trương fhợp này trình duyệt có hai lựa chọn:
Hiển thị chữ bởi vì nó nằm trong thành phần đoạn văn là <p> và </p>
Ẩn chữ bởi vì nó nằm trong thành phần Head.
Nếu bạn muốn thêm một thành phần HTML là <h1> hoặc <p> vào phần head như trên, hầu hết các trình duyệt sẽ hiển thị chúng thậm chí như thế là không hợp lệ. Trình duyệt có nên bỏ qua những lỗi như thế không? chúng tôi không nghĩ thế! nhưng người ta lại cho thế là đúng!
Thẻ Head
| Thẻ | Miêu tả đặc tính |
| <head> | Xác định thông tin về tài liệu |
| <title> | Xác định tiêu đề của tài liệu |
| <base> | Xác định địa chỉ URL cơ bản cho tất cả các đường liên kết trên trang |
| <link> | Xác định tài nguyên để liên kết đến |
| <meta> | Xác định meta-information |
| <!DOCTYPE> | Xác định loại tài liệu. Thẻ này đi trứơc thẻ <html> |
HTML Meta
<html>
<head>
<meta name="author"
content="Jan Egil Refsnes">
<meta name="revised"
content="Jan Egil Refsnes,6/10/99">
<meta name="generator"
content="Microsoft FrontPage 4.0">
</head>
<body>
<p>
The meta attributes of this document identify the author and the editor software.
</p>
</body>
</html>
Thông tin bên trong thành phần meta miêu tả về tài liệu.
<html>
<head>
<meta name="description"
content="HTML examples">
<meta name="keywords"
content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript">
</head>
<body>
<p>
The meta attributes of this document describe the document and its keywords.
</p>
</body>
</html>
Thông tin bên trong thành phần meta miêu tả từ khoá của tài liệu.
Tái định hướng người dùng
<html>
<head>
<meta http-equiv="Refresh"
content="5;url=http://www.utehy.edu.vn">
</head>
<body>
<p>
Sorry! We have moved! The new URL is:
<a href='http://www.utehy.edu.vn'>http://www.utehy.edu.vn</a>
</p>
<p>
You will be redirected to the new address in five seconds.
</p>
<p>
If you see this message for more than 5 seconds, please click on the link above!
</p>
</body>
</html>
Cách tái định hướng người dùng nếu bạn thay đổi tên miền.
Thành phần của meta
Như đã được giải thích ở chương trước, thành phần của head bao gồm những thông tin chung về tài liệu. HTML cũng có một thành phần meta và nằm trong phần head. Mục đích của thành phần meta là cung cấp meta-information về tài liệu.
Hầu hết thành phần meta được sử dụng để cung cấp thông tin liên quan đến trình duyệt hoặc những công cụ tìm kiếm như được miêu tả nội dung của tài liệu.
Một vài công cụ tìm kiếm trên mạng sử dụng tên và nội dung của thẻ meta trong trang index của bạn.
<meta name="description" content="Trang web chuyên về Photoshop, thiết kế web">
Mục đích chính của thuộc tính tên và nội dung là để miêu tả nội dung của trang. Tuy nhiên, bởi vì quá nhiều người đã lạm dụng thẻ meta để spam bằng cách lập đi lập lại từ khoá để cho trang web của họ có rank cao hơn, cho nên một vài công cụ tìm kiếm đã hoàn toàn không sử dụng thẻ meta nữa.
Đôi khi bạn có thể thấy thuộc tính thẻ meta là unknown như sau:
<meta name="security" content="low">
Nếu bạn có thấy thì cũng cứ chấp nhận nó bởi vì nó là một cái gì đó duy nhất cho trang hoặc cho tác giả của trang đó và nó có thể chẳng có gì liên quan đến bạn hết.
Xác định thông tin trên internet (URL = Uniform Resource Locator) HTML.
Khi bạn nhấp chuột vào link trong một tài liệu HTML như thế này: Trang Trước, một thẻ gạch chân <a> sẽ chỉ đến một nơi (một địa chỉ) trên Web với một giá trị thuộc tính href như: <a href='trangtruoc.htm'>Trang Trước</a>
Liên kết Trang Trước ở ví dụ trên là đường liên kết có liên quan đến một trang web mà bạn đang lướt ở đó, và trình duyệt của bạn sẽ tạo ra một địa chỉ web đầy đủ như sau: http://www.utehy.vn/html/trangtruoc.htm để truy cập trang đó.
Uniform Resource Locator (URL)
URL được dùng để xác định địa chỉ của một tài liệu (hoặc dữ liệu khác) trên World Wide Web. Một địa chỉ đầy đủ sẽ như sau: http://www.utehy.vn/html/trangtruoc.htm và tuân theo cú pháp sau:
Scheme://host.domain:port/path/filename
Scheme: Là một trong các giao thức Internet, gồm http, ftp, gopher, news (USENET news), nntp (Network News Transfer Protocol), Telnet và WAIS (Wide Area Information Servers), và những giao thức khác. Ðija chỉ dưới đây ừung giao thức http:http://www.utehy.vn/html/html_basic.htm
Domain: xác định tên miền của trang web trên Internet ví dụ như utehy.com
Host xác định tên miền của host. Nếu được bỏ qua, thì mặc định của host cho http là www.
Port xác định port number tại host. Số cổng thường được bỏ qua. Số cổng mặc định của http là 80.
Path xác định đường dẫn trên server. Nếu đường dẫn được bỏ qua, thì tài liệu phải được định vị tại thư mục gốc của trang web.
Filename xác định tên của tài liệu. Tên mặc định của một tài liệu có thể là default.asp hoặc index.html hoặc một cái gì đó phụ thuộc vào những cài đặt của server.
URL Scheme
Dưới đây là ví dụ của những lược đồ thông dụn nhất
| Schemes | Access |
| file | Một tệp tin ở máy tính của bạn |
| ftp | Một tệp tin ở FTP server |
| http | Một tệp tin ở World Wide Web Server |
| gopher | Một tệp tin ở Gopher server |
| news | Usenet newsgroup |
| telnet | Telnet connection |
| WAIS | Một tệp tin ở WAIS server |
Truy cập vào Newsgroup
Dòng code HTML sau:
<a href='news:alt.html'>HTML Newsgroup</a>
tạo ra một đường liên kết đến newsgroup như là HTML Newsgroup.
Download với FTP
Dòng code HTML sau:
<a href='ftp://www.utehy.edu.vn/ftp/winzip.exe'>Download WinZip</a>
Tạo ra một đường link download như là: Download WinZip.
Chú ý: Liên kết trên chỉ là ví dụ thôi! cho nên nó không có giá trị.
Liên kết đến hệ thống Mail
Dòng code HTML sau:
<a href='mailto:admin@utehy.com'>admin@utehy.com</a>
Tạo ra một đường liên kết với hệ thống email của bạn là admin@utehy.com
Headings
Headings được định dạng với hai thẻ <h1> đến <h6>. <h1> xác định heading lớn nhất. <h6> xác định heading nhỏ nhất
<h1>Đây là heading</h1><h2>Đây là heading</h2><h3>Đây là heading</h3><h4>Đây là heading</h4>
<h5>Đây là heading</h5><h6>Đây là heading</h6>
HTML sẽ tự động thêm một dòng trắng trước và sau mỗi heading.
Đoạn văn – paragraphs
Paragraphs được định dạng bởi thẻ <p>.
<p>Đây là đoạn văn</p><p>Đây là một đoạn văn khác</p>
HTML sẽ tự động thêm một dòng trắng trước và sau mỗi heading.
Line Breaks - xuống dòng
Thẻ <br> được sử dụng khi bạn muốn kết thúc một dòng nhưng lại không muốn bắt đầu một đoạn văn khác. Thẻ <br> sẽ tạo ra một lần xuống dòng khi bạn viết nó.
<p>Đây <br> là một đo<br>ạn văn với thẻ xuống hàng</p>
Thẻ <br> là một thẻ trống, nó không cần thẻ đóng dạng </br>
Lời chú thích trong HTML
Thẻ chú thích được sử dụng để thêm lời chú thích trong mã nguồn của HTML. Một dòng chú thích sẽ được bỏ qua bởi trình duyệt. Bạn có thể sử dụng chú thích để giải thích về code của bạn, để sau này bạn có phải quay lại chỉnh sửa gì thì cũng dễ nhớ hơn.
Bạn cần một dấu chấm than ! ngay sau dấu nhỏ hơn nhưng không cần ở dấu lớn hơn.
