HTML là gì?

bởi CodeGym | 27/12/2023 11:26 | Blog

Nội dung

Tìm hiểu về HTML
HTML hoạt động như thế nào?
Ưu và nhược điểm của HTML
- Ưu điểm
- Nhược điểm
Các phần mềm sử dụng để lập trình HTML
Một số thuật ngữ HTML
Ví dụ:

Tìm hiểu về HTML

HTML là ngôn ngữ được dùng để tạo ra trang web.

Trình duyệt web nhận tài liệu HTML từ máy chủ web hoặc từ bộ nhớ cục bộ và hiển thị tài liệu thành các trang web đa phương tiện. 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í dụ: <strong> </strong>).

Với cấu trúc HTML, hình ảnh và các đối tượng khác như biểu mẫu tương tác có thể được nhúng vào trang được hiển thị. 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.

Văn bản giữa thẻ <html> và </ html> mô tả trang web và văn bản giữa thẻ <body> và </ body> là nội dung trang hiển thị. Văn bản đánh dấu <title> Đây là tiêu đề </ title> xác định tiêu đề trang của trình duyệt. Mô tả loại tài liệu <! DOCTYPE html> dành cho HTML5. Nếu không có khai báo, các trình duyệt khác nhau sẽ hoàn nguyên về “chế độ quirks” để hiển thị.

Dạng chung của một phần tử HTML như sau: <tag attribute1 = “value1” attribute2 = “value2″> ” content ” </ tag>. Một số phần tử HTML được định nghĩa là các phần tử trống và có dạng <tag attribute1 = “value1” attribute2 = “value2”>. Trong đó tag là loại thẻ, attribute1, attribute2 là tên các thuộc tính và value1, value2 là giá trị của các thuộc tính. Nếu các thuộc tính không có giá trị, các giá trị mặc định được sử dụng. Các phần tử trống có thể không kèm theo nội dung, ví dụ: thẻ <br> hoặc thẻ <img>.

HTML hoạt động như thế nào?

Một tập tin HTML thường kết thúc bằng đuôi .html hoặc .htm, khi một tập tin hình thành thì việc xử lí nó sẽ thuộc về trình duyệt web. Với những file này bạn có thể xem bằng cách sử dụng bất kỳ trình duyệt nào (Google Chrome, Firefox, Safari,…) Ví dụ bạn vào Chrome và gõ 1 tên miền, khi đó Chrome sẽ kết nối với 1 máy chủ web, bằng cách dùng 1 địa chỉ IP, vốn được thấy bằng cách phân giải tên miền đó (DNS). Máy chủ web chính là 1 máy tính được kết nối tới internet và nhận các yêu cầu tới trang web từ trình duyệt của bạn. Máy chủ sau đó sẽ gửi trả thông tin về trình duyệt của bạn, là 1 tài liệu HTML, để hiển thị trang web. Trình duyệt web sẽ đóng vai trò như một nhà phiên dịch, đọc hiểu nội dung HTML từ các thẻ bên trong và chuyển sang dạng văn bản.

Một trang web sẽ có web HTML như: trang chủ, trang about, trang liên hệ,… tất cả các trang đều có HTML riêng. Cụ thể, mỗi trang HTML chứa một bộ các tag, hay còn được gọi là elements, được hiểu là các yếu tố để xây dựng từng khối của một trang web.

Ưu và nhược điểm của HTML

Ưu điểm

Ngôn ngữ được sử dụng rộng lớn này có rất nhiều nguồn tài nguyên hỗ trợ và cộng đồng sử dụng cực lớn.
Sử dụng mượt mà trên hầu hết mọi trình duyệt.
Có quá trình học đơn giản và trực tiếp.
Mã nguồn mở và hoàn toàn miễn phí.
Markup gọn gàng và đồng nhất.
Dễ dàng tích hợp với các ngôn ngữ backend như PHP và Node.js.

Nhược điểm

Được dùng chủ yếu cho web tĩnh. Đối với các tính năng động, bạn cần sử dụng JavaScript hoặc ngôn ngữ backend bên thứ 3 như PHP.
Nó có thể thực thi một số logic nhất định cho người dùng. Vì vậy, hầu hết các trang đều cần được tạo riêng biệt, kể cả khi nó sử dụng cùng các yếu tố, như là headers hay footers.
Một số trình duyệt chậm hỗ trợ tính năng mới.
Khó kiểm soát cảnh thực thi của trình duyệt (ví dụ, những trình duyệt cũ không render được tag mới)

Các phần mềm sử dụng để lập trình HTML

Phần mềm Notepad ++

Đây là một phần mềm được khá nhiều người yêu thích và lựa chọn vì nó có môi trường nhỏ gon, với nhiều tiện ích giúp tối ưu hóa quá trình xây dựng website hay phần mềm. Nó bao gồm một số công dụng như số dòng, mã màu, gợi ý và một số công cụ có ích mà áp dụng Notepad tiêu chuẩn không hề có. Notepad ++ có thể hỗ trợ các ngôn ngữ như: C++, Java, C#, XML,…

Phần mềm Sublime Text

Đã hơn 10 năm kể từ ngày ra đời, Sublime Text vẫn chứng tỏ được giá trị và tính hữu ích của mình. Đây là một phần mềm hỗ trợ viết code lập trình được viết bằng 2 ngôn ngữ là Python và C++ và là phần mềm giúp các lập trình viên tiết kiệm được thời gian với các plugin được tích hợp sẵn. Tuy nhiên đây là một phần mềm có mất phí nên cũng khiến các lập trình viên khá đắn đo khi lựa chọn.

Phần mềm PHP Designer

PHP Designer hiện đang được sử dụng phố biến trên 200 quốc gia và nó đã trở thành trợ thủ đắc lực của các lập trình viên. Ngoài những chức năng cơ bản của một phần mềm lập trình, PHPdesigner còn có những tính năng cực kỳ hữu ích cho design về thiết kế website PHP như báo lỗi cú pháp, auto complete, cho phép coi trước trang trên trình duyệt web, sao lưu nội dung,… và PHP còn hỗ trợ đa ngôn ngữ.

Một số thuật ngữ HTML

Học một ngôn ngữ lập trình mới sẽ có rất nhiều thuật ngữ yêu cầu chúng ta phải nhớ và hiểu để sử dụng dễ dàng và đúng. Sau đâu CodeGym sẽ giúp bạn tìm hiểu 3 thuật ngữ phổ biến nhất trong tệp HTML

Tags: Tags được biết đến là một element được bao quanh bởi các dấu ngoặc < >, điều này sẽ tạo ra các thẻ. Chẳng hạn thẻ mở là dấu hiệu nhận biết cho sự bắt đầu của một Element (ví dụ: <div>). Thẻ đóng sẽ được đánh dấu vào cuối của một Element, thẻ đóng có hình thức là dấu ngoặc nhỏ + dấu chéo + dấu ngoặc lớn (ví dụ: </div>). Ở giữa thẻ mở và thẻ đóng chính là nội dung của Element.

Attributes: Attributes được biết đến là thuộc tính được dùng để cung cấp các thông bổ sung cho một Element. Các Attributes bao gồm tên và giá trị, được xác định sau tên của một thành phần và xuất hiện trong thẻ mở. Định dạng của Attributes như sau: tên thuộc tính + dấu bằng + giá trị thuộc tính được trích dẫn.

Elements: Elements được hiểu là các chỉ định dùng để xác định nội dung, đối tượng trong website. Trong tệp HTML, Elements được bao quanh và xác định bằng dấu ngoặc <>. Cụ thể, những yếu tố thường được sử dụng phổ biến như đoạn văn <p>, các cấp độ tiêu đề từ <h1> đến <h6>, danh sách tiếp tục bao gồm <a>, <span>, <strong> hay <em>,…

Ví dụ:

<!DOCTYPE html>
<html>
    <head>
        <title>This is a title</title>
    </head>
    <body>
        <p>Hello world!</p>
            <a href="https://example.org">
                <img src="image.gif" alt="descriptive text" width="50" height="50" border="0">
            </a>
    </body>
</html>

Tags: HTML