Khi bắt đầu làm quen với lập trình web thì HTML chính là nội dung đầu tiên mà bạn phải học, sau đó bạn sẽ kết hợp với CSS để tạo ra những sản phảm rất là độc đáo. Nghe nói thì hay nhưng bạn mới học nên có lẽ hơi mơ hồ phải không . Vậy trong serie này ta sẽ cùng nhau khám phá xem HTML là gì? và vai trò của chúng trong thiết kế web.
1. HTML là gì?
HTML là chữ viết tắt của cụm từ HyperText Markup Language (dịch là Ngôn ngữ đánh dấu siêu văn bản) được sử dụng để tạo một trang web, trên một website có thể sẽ chứa nhiều trang và mỗi trang được quy ra là một tài liệu HTML (thi thoảng mình sẽ ghi là một tập tin HTML). Cha đẻ của HTML là Tim Berners-Lee, cũng là người khai sinh ra World Wide Web và chủ tịch của World Wide Web Consortium (W3C – tổ chức thiết lập ra các chuẩn trên môi trường Internet).
Một tài liệu HTML được hình thành bởi các phần tử HTML (HTML Elements) được quy định bằng các cặp thẻ (tag), các cặp thẻ này được bao bọc bởi một dấu ngoặc ngọn (ví dụ <html>) và thường là sẽ được khai báo thành một cặp, bao gồm thẻ mở và thẻ đóng (ví <strong> dụ </strong> và ). Các văn bản muốn được đánh dấu bằng HTML sẽ được khai báo bên trong cặp thẻ (ví dụ <strong>Đây là chữ in đậm</strong>). Nhưng một số thẻ đặc biệt lại không có thẻ đóng và dữ liệu được khai báo sẽ nằm trong các thuộc tính (ví dụ như thẻ <img>).
Một tập tin HTML sẽ bao gồm các phần tử HTML và được lưu lại dưới đuôi mở rộng là .html hoặc .htm.
Như vậy HTML ra đời với mục đích thiết kế bố cục nội dung cho dữ liệu nói chung và cho giao diện website nói riêng.
2. Bố cục HTML của một trang web
Như trên mình có giới thiệu HTML dùng để tạo nên bổ cục của giao diện website. Nó có rất nhiều thẻ khác nhau và mỗi thẻ sẽ có những nhiệm vụ nhất định. Vậy bạn có thắc mắc mắc cách chia các thẻ cho một trang web như thế nào không?
Thông thường bổ cục HTML của một website sẽ có dạng nhu sau:
Trong đó:
<!DOCTYPE html>là phần khai báo kiểu dữ liệu hiển thị làhtmlđể trình duyệt (Browser) biết.<html>và</html>là cặp thẻ nằm ngoài cùng và nó có nhiệm vụ là bao hết nội dung của trang web lại. Thẻ này là bát buộc.<head>và</head>là phần khai báo thông tin của trang web<title>và</title>nằm bên trong thẻ<head>và đây chính là khai báo tiêu đề cho trang web.<body>và</body>là thành phần quan trọng nhất, nó chứa nhưng đoạn mã HTML dùng để hiển thị trên website- Các thẻ còn lại nằm trong thẻ
<body>chính là các thẻ định dạng dữ liệu.
Như vậy trong một website chúng ta chia làm 2 phần chính:
- Phần 1: Là những khai báo thông tin cho trang web và ta đặt nó trong thẻ
head. - Phần 2: Là phần hiển thị định dạng nội dung của trang web và ta đặt trong thẻ
body.
Ví dụ:
3. HTML đóng vai trò gì trong website?
HTML là một ngôn ngữ đánh dấu siêu văn bản nên nó sẽ có vai trò xây dựng cấu trúc siêu văn bản trên một website, hoặc khai báo các tập tin kỹ thuật số (media) như hình ảnh, video, nhạc.
Điều đó không có nghĩa là chỉ sử dụng HTML để tạo ra một website mà HTML chỉ đóng một vai trò hình thành trên website. Ví dụ một website như tranngocsy.com sẽ được hình thành bởi:
- HTML – Xây dựng cấu trúc và định dạng các siêu văn bản.
- CSS – Định dạng các siêu văn bản dạng thô tạo ra từ HTML thành một bố cục website, có màu sắc, ảnh nền,….
- Javascript – Tạo ra các sự kiện tương tác với hành vi của người dùng (ví dụ nhấp vào ảnh trên nó sẽ có hiệu ứng phóng to).
- PHP – Ngôn ngữ lập trình để xử lý và trao đổi dữ liệu giữa máy chủ đến trình duyệt (ví dụ như các bài viết sẽ được lưu trong máy chủ).
- MySQL – Hệ quản trị cơ sở dữ liệu truy vấn có cấu trúc (SQL – ví dụ như các bài viết sẽ được lưu lại với dạng dữ liệu SQL).
Nhưng ở đây, tạm thời bạn chỉ cần quan tâm đến HTML mà thôi. Dễ hiểu hơn, bạn hãy nghĩ rằng nếu website là một cơ thể hoàn chỉnh thì HTML chính là bộ xương của cơ thể đó, nó như là một cái khung sườn vậy.
Như vậy, dù website thuộc thể loại nào, giao tiếp với ngôn ngữ lập trình nào để xử lý dữ liệu thì vẫn phải cần HTML để hiển thị nội dung ra cho người truy cập xem.
Qua bài này mình đã giới thiệu xong các khái niệm căn bản của HTML, đồng thời bạn cũng biêt được các thành phần chính tạo nên một giao diện website, hẹn gặp lại các bạn trong các bài viết tiếp theo.
Tags: html là gì
