 |
| Khóa học đào tạo lập trình trên ngôn ngữ HTML & CSS |
1. HTML là gì?
HTML được ví như là bộ xương của một giao diện website, dù nó là dành cho WordPress hay bất cứ website nào. “Bộ xương” này sẽ giúp chúng ta xác định bố cục trên mỗi website và đánh dấu lại các phần đó bằng các thẻ (tag) nhất định, sau đó nó sẽ tự xác định mỗi đối tượng được đánh dấu mang một vài trò riêng trong website.
HTML là từ viết tắt của HyperText Markup Language, nghĩa là ngôn ngữ đánh dấu siêu văn bản.
Hypertext (siêu văn bản): là một đoạn text bất kì nhưng có chứa link đến một nguồn thông tin khác (như một đoạn văn bản khác, một địa chỉ website, hình ảnh, âm thanh…)
Ngôn ngữ đánh dấu này sẽ là cầu nối của sự giao tiếp giữa người dùng và trình duyệt, giúp trình duyệt hiểu được cách thức hiển thị trang web. Khi trình duyệt đọc thấy 1 kí tự A, nó chỉ đơn thuần hiển thị A, chứ không thể biết bạn muốn tô đậm, in nghiêng, hay màu mè hoa lá thế nào cả. Chính lúc đấy, bạn cần HTML, thông qua việc sử dụng các thẻ HTML.
Thẻ HTML được định nghĩa bằng một cặp từ khóa nằm giữa dấu < và dấu >, và báo cho trình duyệt biết cách thức hiển thị đoạn kí tự bên trong thẻ HTML đó.
In đậm bằng thẻ <b>:
1
<b>A</b>
In nghiêng bằng thẻ <i>:
1
<i>A</i>
2. Cấu trúc cây HTML cơ bản
Cấu trúc của HTML rất đơn giản và logic, với bố cục từ trên xuống dưới, từ trái qua phải, với 2 phần chính là HEAD vàBODY. Các website viết bằng HTML đều tuân theo cấu trúc cơ bản như sau:
Mọi trang HTML đều phải khai báo DOCTYPE (định nghĩa chuẩn văn bản) ngay từ dòng đầu tiên.
Thẻ <html> cho trình duyệt biết mở đầu và kết thúc của trang HTML.
Thẻ <head> chứa tiêu đề và các thông tin khai báo, các thông tin ẩn khác.
Thẻ <body> sẽ hiển thị nội dung của trang web. Đây là phần thông tin mà người dùng sẽ nhìn thấy khi trình duyệt đọc các mã HTML.
Mọi kí tự nằm giữa dấu <!– và –> sẽ được xem là thẻ comment và sẽ bị trình duyệt bỏ qua, không xử lý và không hiển thị.
- <html>
- <head>
- <title>Đây là thẻ đánh dấu tiêu đề trang web</title>
- <!-- Comment: Các thông tin khai báo, các thông tin ẩn -->
- </head>
- <body>
- <!-- Comment: Nội dung trang web mà người dùng sẽ thấy -->
- <b>Đây là dòng chữ in đậm</b>
- <i>Đây là dòng chữ in nghiêng</i>
- </body>
- </html>
Trắc nghiệm trực tuyến nhận quà liền tay
Không có nhận xét nào:
Đăng nhận xét