Lời mở đầu
Mở đầu series hướng dẫn lập trình website chuyên nghiệp với mục tiêu giúp bạn thành thạo HTML, CSS và PHP. Cùng theo dõi và tiếp thêm các kiến thức từ cơ bản đến nâng cao trên website chia sẻ Itidea.org nhé!
Lập trình web – HTML là gì? Giới thiệu về HTML
Định nghĩa HTML
HTML (Hypertext Markup Language) là ngôn ngữ được sử dụng rộng rãi nhất để lập trình các trang Web. Hypertext là cách mà các trang Web (các tài liệu HTML) được kết nối với nhau. Và như thế, đường link có trên trang Web được gọi là Hypertext.
Tóm tắt kiến thức:
- HTML là một ngôn ngữ đánh dấu dùng để mô tả các trang web.
- Viết tắt của Hyper Text Markup Language – Ngôn ngữ đánh dấu siêu văn bản.
- Ngôn ngữ đánh dấu này được tập hợp bởi các thẻ đánh dấu (Markup tag)
- Tài liệu HTML (trang web) được mô tả bởi các thẻ HTML.
- Mỗi thẻ HTML mô tả một nội dung khác nhau.
- Một file HTML sẽ có 2 định dạng mở rộng là .html và .htm
Tại sao bạn nên tìm hiểu HTML?
Html là bộ khung sườn của website giúp bạn định hình website đó như thế nào.
Hiện nay, có rất nhiều mã nguồn mở giúp bạn dễ dàng làm website chỉ bằng việc kéo thả nhưng bạn sẽ không biết rõ là website bạn bao gồm những cấu trúc dòng code như thế nào. Bạn phải hiểu rõ HTML để có thể tùy biến theo ý muốn của mình.
Trên hết, website dù được thiết kế bằng bất cứ ngôn ngữ nào (PHP, ASP,HTML,…) thì khi người dùng xem website điều hiển thị định dạng HTML. Chính vì thế bạn phải hiểu HTML là gì thì mới có thể bắt đầu làm website được.
Vai trò của HTML trong việc thiết kế website
- HTML – Xây dựng cấu trúc và định dạng các siêu văn bản – Hyper Text Markup Language – là bộ xương của website.
- CSS – Định dạng các siêu văn bản dạng đơn giản tạo ra từ HTML thành một bố cục website hoàn chỉnh. VD: tùy chỉnh ảnh nền, màu sắc, khung,…
- Javascript – Tạo ra các hành động giúp tương tác với người dùng. VD: các hiệu ứng khi bạn nhấp vào các nút,…
- 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. VD: các hoạt động yêu cầu truy xuất dữ liệu tới máy chủ.
- MySQL – Hệ quản trị cơ sở dữ liệu truy vấn có cấu trúc.
Cần chuẩn bị gì để học HTML
- Trình duyệt web để đọc các file HTML (cốc cốc, chrome, firefox,… trình duyệt sẽ đóng vai trò đọc hiểu nội dung HTML từ các thẻ mà bạn đã viết)
- Khung giờ để học, thường 1 tuần Itidea.org sẽ đăng 2 bài mới cho các bạn tìm hiểu.
- Chương trình dùng để lập trình, viết code html (Dreamweaver, Sublime Text,…)
Ở đây mình dùng Sublime Text, bạn vào đây để tải. > Chọn phiên bản phù hợp với máy rồi cài đặt. Chương trình này rất nhẹ và hiển thị tốt, làm nổi bật các đoạn code giúp bạn dễ dàng chỉnh sửa hơn.
Bắt đầu làm quen với HTML
HTML là một định dạng đặc biệt của XML nên nó sẽ có thẻ mở và thẻ đóng với cú pháp như sau:
<html> nội dung website </html>
- Thẻ mở được bao gọn trong dấu <tên thẻ>
- Thẻ đóng tương tự thẻ mở nhưng có thêm dấu / </tên thẻ>
Thông thường giao diện của một trang web sẽ được chia thành các phần như sau:
- Các thẻ cơ bản và các thẻ định dạng văn bản.
- HTML Entities và Thẻ font.
- Thẻ image và Liên kết (link)
- Danh sách (list)
- Thẻ Table và Frame.
- Thẻ Form.
- HTML color và HTML Background.
- Head Element và Meta Element.
Như vậy một trang web viết bằng html thường sẽ có cấu trúc như sau:
<!DOCTYPE html> <html> <head> <title> Tiêu đề trang web </title> </head> <body> <!-- Phần bạn cần trình bày. Ví dụ một bức ảnh hay lời văn.--> </body> </html>
Trong đó:
<!DOCTYPE html> là phần khai báo kiểu dữ liệu hiển thị html giúp trình duyệt nhận biết.
<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 không được thiếu khi bạn code 1 trang html.
và là phần khai báo thông tin của trang web.
<title> khai báo tiêu đề cho trang web.
<body> là thành phần quan trọng nhất, nó chứa các đoạn mã HTML dùng để hiển thị trên website. Các thẻ còn lại nằm trong thẻ chính là các thẻ định dạng dữ liệu.
Các thành phần chính của 1 trang HTML
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.
Ở bài tiếp theo mình sẽ bắt đầu giới thiệu từng loại thẻ HTML giúp các bạn dễ dàng hiểu và thực hành được!
Có rất nhiều đoạn code cho bạn khả năng tự điều chỉnh cấu trúc website theo ý thích của mình. Để học HTML, bạn sẽ cần phải học các loại thẻ khác nhau và hiểu cách chúng vận hành trong khi định dạng tài liệu thuần văn bản. Học HTML là đơn giản khi người sử dụng học được cách sử dụng của các thẻ khác nhau để định dạng văn bản hoặc hình ảnh để tạo các website đẹp và chuẩn.
