Ngôn ngữ đánh dấu siêu văn bản (html) chỉ rõ một trang Web sẽ được hiển thị như thế nào trong một trình duyệt. Sử dụng các thẻ và các phần tử html, bạn có thể:
- Điều khiển hình thức và nội dung của trang
- Xuất bản các tài liệu trực tuyến và truy xuất thông tin trực tuyến bằng cách sử dụng các liên kết được chèn vào tài liệu html
- Tạo các biểu mẫu trực tuyến để thu thập thông tin về người dùng, quản lý các giao dịch .....
- Chèn các đối tượng như audio clip, video clip, các thành phần ActiveX, Flash và các Java Applet vào tài liệu html
Tài liệu html tạo thành mã nguồn của trang Web. Khi được xem trên trình soạn thảo, tài liệu này là một chuỗi các thẻ và các phần tử, mà chúng xác định trang web hiển thị như thế nào. Trình duyệt đọc các file có đuôi .htm hay .html và hiển thị trang web đó theo các lệnh có trong đó. HTML là kiến thức cơ bản mà bất cứ ai muốn học lập trình web hoặc học thiết kế web đều phải biết. Tất cả các trang web dù xử lý phức tạp đến đâu đều phải trả về dưới dạng mã nguồn HTML để trình duyệt có thể hiểu và hiển thị lên được.
Ví dụ, theo cú pháp html dưới đây sẽ hiển thị thông điệp “My first html document”
<html>
<head>
<title>Welcome to html</title>
</head>
<body>
<H3>My first html document</H3>
</body>
</html>
Trình duyệt thông dịch những lệnh này và hiển thị trang web như hình sau:
Cấu trúc của một tài liệu html
Một tài liệu html gồm 3 phần cơ bản:
- Phần html: Mọi tài liệu html phải bắt đầu bằng thẻ mở html <html> và kết thúc bằng thẻ đóng html </html>
<html> …. </html>
Thẻ html báo cho trình duyệt biết nội dung giữa hai thẻ này là một tài liệu html
- Phần tiêu đề: Phần tiêu đề bắt đầu bằng thẻ <head> và kết thúc bởi thẻ </head>. Phần này chứa tiêu đề mà được hiển thị trên thanh điều hướng của trang Web. Tiêu đề nằm trong thẻ title, bắt đầu bằng thẻ <title> và kết thúc là thẻ </title>.
Tiêu đề là phần khá quan trọng. Khi người dùng tìm kiếm thông tin, tiêu đề của trang Web cung cấp từ khóa chính yếu cho việc tìm kiếm.
- Phần thân: phần này nằm sau phần tiêu đề. Phần thân bao gồm văn bản, hình ảnh và các liên kết mà bạn muốn hiển thị trên trang web của mình. Phần thân bắt đầu bằng thẻ <body> và kết thúc bằng thẻ </body>
Ví dụ:
<html>
<head>
<title>Welcome to the world of html</title>
</head>
<body>
<P>This is going to be real fun</P>
</body>
</html>
Bạn có chú ý đến thẻ <P> trong ví dụ 2 không? Thẻ <P> để trình bày một đoạn
Khi viết một bài báo hay một bài luận, bạn nhóm nội dung thành một loạt các đoạn. Trong một tài liệu html cũng vậy nội dung có thể được nhóm thành các đoạn. Thẻ <P> được sử dụng để đánh dấu sự bắt đầu của một đoạn mới.
Các thẻ ngắt
Phần tử <br> được sử dụng để ngắt dòng trong tài liệu html. Thẻ <br> bổ sung một ký tự xuống dòng tại vị trí của thẻ.
Ví dụ:
<html>
<head>
<title>Welcome to html</title>
</head>
<body>
<P>This is going to be real <br>fun
<P> Another paragraph element
</body>
</html>
Thuộc Tính Thẻ
- Là những đặc tính, tính chất mang theo để trình duyệt định dạng và hiển thị thẻ đó.
- Mỗi thẻ có thể có 1 hoặc nhiều thuộc tính
- Mỗi thuộc tính có tên thuộc tính và giá trị của thuộc tính, giá trị được đặt trong dấu ""
Cú pháp:
<tên_thẻ thuộc_tính_1="giá_trị_thuộc_tính_1" thuộc_tính_2="giá_trị_thuộc_tính_2" ... />
Thuộc tính align được sử dụng để canh lề cho các phần tử html trong trang Web. Chúng ta có thể canh lề văn bản, các đối tượng, hình ảnh, các đoạn, các phân đoạn,.... Sau đây, bạn sẽ học cách canh lề văn bản:
Thuộc tính align gồm các giá trị sau:
Value Description
Left Văn bản được canh lề trái
Center Văn bản được canh giữa
Right Văn bản được canh phải
Justify Văn bản được canh đều hai bên
Canh lề được mặc định dựa vào hướng của văn bản. Nếu hướng văn bản là từ trái sang phải thì mặc định là trái.
Ví dụ:
<html>
<head>
<title>Learning html</title>
</head>
<body>
<P align = right>This is good fun</P>
</body>
</html>
Thẻ meta
- Thẻ meta được sử dụng để cung cấp metadata cho trang web, meta data không hiển thị trên trang web nhưng lại là một phần tử khá quan trọng đối với search engine
- Thẻ meta thường được dùng để chỉ định mô tả về trang web, từ khóa, tác giả trang web, lần sửa chữa cuối cùng và một số thông tin khác
- Các dữ liệu metadata được chỉ định bằng thẻ meta có thể được dùng bởi trình duyệt (hiển thị nội dung hoặc reload lại trang), search engine, từ khóa hoặc các web service khác
<head>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="html,CSS,XML,JavaScript">
<meta name="author" content="Hege Refsnes">
</head>
Sự khác nhau giữa html 4.0.1 và html 5 trong khai báo thẻ meta
- html 4.01: <meta http-equiv="content-type" content="text/html; charset=UTF-8">
- html5: <meta charset="UTF-8">