5 bước để hiểu mã HTML cơ bản
HTML là xương sống của mọi trang web. Nếu bạn là người mới bắt đầu, hãy để FUNiX hướng dẫn bạn qua 5 bước cơ bản để hiểu HTML.
- Hướng dẫn cơ bản về CSS cho người mới bắt đầu
- HTML (Hyper Text Markup Language) là gì? HTML được sử dụng làm gì?
- Bật mí cẩm nang học lập trình web hiệu quả nhanh
- Học lập trình web bắt đầu từ đâu sẽ mang lại hiệu quả tốt?
- Cách sử dụng Phần tử giả (Pseudo-element) trong CSS
Table of Contents
Như chúng ta đã biết, HTML là một phần quan trọng của web. Và trong khi một số nhà thiết kế web tạo các trang web bằng cách nhập HTML theo cách thủ công, vẫn rất hữu ích nếu bạn biết một chút về nó.
Hãy cùng FUNiX tìm hiểu một số kiến thức cơ bản về ngôn ngữ này, bao gồm HTML thực sự là gì, một số khái niệm cơ bản và cách nó tương tác với các ngôn ngữ khác.
Khái niệm cơ bản về HTML: HTML là gì?
HTML là viết tắt của Hypertext Markup Language. Và mặc dù đôi khi nó được gộp chung với các ngôn ngữ lập trình, nhưng điều này không chính xác.
Là một Markup Language (ngôn ngữ đánh dấu), HTML chỉ cho phép bạn tạo bố cục hiển thị của các trang. Một ngôn ngữ lập trình thực sự , như Java hoặc C ++, chứa logic và các lệnh được thực hiện.
Mặc dù nó đơn giản nhưng HTML là xương sống của tất cả các trang web. Nó quyết định những văn bản hiển thị nào là in đậm, thêm hình ảnh và liên kết đến các trang khác.
Bạn có thể nhấp chuột phải vào hầu hết các trang trong trình duyệt của mình và chọn View page source (Xem nguồn trang) hoặc tương tự để xem HTML đằng sau chúng. Nó sẽ hiện ra rất nhiều mã không phải là HTML, nhưng bạn có thể lọc.
Ngay cả khi bạn không có kinh nghiệm về ngôn ngữ lập trình hoặc đánh dấu, việc học một chút về HTML sẽ giúp bạn trở thành người dùng web hiểu biết hơn. Hãy xem qua 5 bước cơ bản để giúp bạn hiểu cách thức hoạt động của HTML. Chúng tôi sẽ cung cấp các ví dụ trong quá trình thực hiện.
Bước 1: Hiểu khái niệm về tag
HTML sử dụng một hệ thống các tag (thẻ) để phân loại các phần tử khác nhau của tài liệu.
Hầu hết các tag đi theo cặp để bọc văn bản bị ảnh hưởng bên trong chúng. Đây là một ví dụ đơn giản (tag làm cho văn bản được in đậm):
<strong>
<strong>This is some bold text</strong>.
Lưu ý cách closing tag (thẻ đóng) bắt đầu bằng dấu gạch chéo (/). Điều này biểu thị một tag đóng, điều này rất quan trọng. Nếu bạn không đóng tag, mọi thứ từ đầu trở đi sẽ có thuộc tính (attribute) đó.
Tuy nhiên, không phải tất cả các tag đều có một cặp. Một số phần tử HTML, được gọi là empty elements (phần tử trống), không có nội dung và tự tồn tại. Ví dụ
<br>
là một dấu ngắt dòng. Bạn có thể “đóng” các tag như vậy bằng cách thêm dấu gạch chéo nhưng nó không hoàn toàn cần thiết.
<br />
Bước 2: Bố cục HTML (HTML layout) cơ bản
Một tài liệu HTML thích hợp phải có các tag nhất định được xác định để nó được trình bày một cách chính xác. Đây là những phần thiết yếu:
- Mọi tài liệu HTML phải bắt đầu bằng
<!DOCTYPE html>để ‘thông báo’ rằng nó là một tài liệu html. Do đó, tag đóng của nó,</html>là mục cuối cùng trong tệp HTML.
- Tiếp theo,
<head>bao gồm thông tin như tiêu đề trang, các tập lệnh khác nhau chạy trên trang và các thông tin tương tự. Như tên của nó cho thấy, nó thường xuất hiện ngay sau tag<html>đầu tiên. Người dùng cuối không nhìn thấy nhiều nội dung trong các tag này.
- Cuối cùng, tag
<body>giữ văn bản của trang mà người đọc nhìn thấy (và hơn thế nữa). Tại đây, bạn sẽ tìm thấy hình ảnh, liên kết.v.v.
Do phần <body> chiếm phần lớn trong một tài liệu HTML, phần còn lại của hướng dẫn này xem xét các yếu tố liên quan đến nó.
Bước 3: Các tag HTML cơ bản để định dạng
Tiếp theo, chúng ta hãy xem xét một số tag phổ biến tạo nên tài liệu HTML. Tất nhiên, không thể bao gồm tất cả các yếu tố, vì vậy chúng tôi sẽ xem xét một số yếu tố quan trọng nhất. Nếu những tag này có vẻ khá cơ bản, hãy nhớ rằng HTML đã được tạo ra từ năm 1993. Giai đoạn đó, web chủ yếu là văn bản.
Định dạng văn bản đơn giản
HTML hỗ trợ các kiểu văn bản cơ bản như bạn tìm thấy trong Microsoft Word:
Tag <strong> làm cho văn bản được in đậm.
Tag <em> (viết tắt của “emphasis”) sẽ in nghiêng văn bản.
HTML cũng hỗ trợ tag <b> cho in đậm và <i> cho chữ in nghiêng. Tuy nhiên, tốt hơn là sử dụng những cái trên.
Đoạn văn (paragraph) và các phần (division) khác
Tag <div> cho phép bạn xác định một phần (section) của tài liệu. Thông thường, phần này được ghép nối với CSS (xem bên dưới) để định dạng một phần theo một cách nhất định.
Tag <p> cho phép bạn chia văn bản thành các đoạn văn (paragraph). Trình duyệt sẽ tự động đặt một số khoảng trắng trước và sau những khoảng trắng này, cho phép bạn chia nhỏ văn bản một cách tự nhiên.
Bạn có thể thêm tiêu đề vào tài liệu của mình và giúp dễ theo dõi hơn bằng cách sử dụng <h1> cho đến <h6>
H1 là tiêu đề quan trọng nhất, trong khi H6 ít quan trọng nhất. Phần lớn các bài báo đều sử dụng tiêu đề H2 và H3 để sắp xếp thông tin.
Nhấn Enter để thêm ngắt dòng trong tài liệu HTML của bạn sẽ không thực sự hiển thị chúng. Thay vào đó, bạn có thể sử dụng <br> (viết tắt của break) để thêm dấu ngắt dòng.
Dưới đây là một ví dụ sử dụng tất cả những điều này:
<div class="example">
<h2>Example Heading</h2>
<p>This is one paragraph.</p>
<p>This is a second<br>paragraph split between two lines.</p>
</div>
Bước 4: Chèn hình ảnh
Hình ảnh là một phần quan trọng của hầu hết các trang web. Bạn có thể thêm chúng dễ dàng bằng HTML và thậm chí đặt các thuộc tính khác nhau cho chúng.
Bạn chèn một hình ảnh bằng cách sử dụng tag <img>
Kết hợp điều này với tag src cho phép bạn chỉ định nơi bạn muốn tải hình ảnh từ đó.
Một thuộc tính quan trọng khác của các tag <img> là alt cho phép bạn mô tả hình ảnh cho trình đọc màn hình hoặc trong trường hợp hình ảnh không tải đúng cách. Bạn có thể di chuột qua hình ảnh để xem văn bản thay thế của hình ảnh đó.
Sử dụng width và height để xác định số lượng pixel của hình ảnh.
Đặt tất cả lại với nhau và một tag hình ảnh trông như thế này:
<img src="https://img.drphil.com/wp-content/uploads/2016/04/DrPhil-1280x720px-Shareimage.jpg" alt="Dr. Phil" width="1280" height="720">
Bước 5: Thêm liên kết
Sử dụng <a> bạn có thể liên kết đến các trang khác trên bất kỳ văn bản nào.
Bên trong tag <a> thuộc tính href cho biết bạn đang liên kết ở đâu. Chỉ cần dán URL vào.
Bạn có thể dùng phần tử title để thêm văn bản xuất hiện khi ai đó di chuột qua liên kết.
Một liên kết cơ bản giống như sau:
<a href="https://www.google.com/" title="Click here to search the web">Visit Google</a>
Các tag <a> có nhiều yếu tố (element) khác, nhưng chúng tôi sẽ không đi sâu vào chúng ở đây.
Cách HTML kết nối với CSS và JavaScript
Chúng tôi đã giới thiệu những kiến thức cơ bản về HTML và cách nó thiết lập một trang web. Nhưng như bạn có thể tưởng tượng, HTML không thôi là chưa đủ cho web hiện đại. Các trang web HTML đơn giản rất phổ biến trong những ngày “Web 1.0”, khi hầu hết các trang web chỉ là văn bản tĩnh.
Nhưng bây giờ, chúng tôi có rất nhiều thứ khác. CSS (Cascading Style Sheets) là một ngôn ngữ được sử dụng để mô tả văn bản bạn chuẩn bị trong HTML sẽ trông như thế nào. Bạn còn nhớ tag <div> chúng ta đã thảo luận? Bên trong tag này (và các tag khác), bạn có thể xác định một thuộc tính class
Sau đó, trong tài liệu CSS đi kèm, bạn có thể viết hướng dẫn về cách Class đó nên hiển thị như thế nào.
Bạn có thể định nghĩa các phần tử kiểu này trong mã HTML của mình, nhưng đây không được coi là một cách làm tốt vì nó khó duy trì hơn nhiều.
JavaScript
Chúng ta đã thấy rằng HTML xác định nội dung và CSS xác định hình thức. JavaScript, thành viên cuối cùng của bộ ba quan trọng đối với web, cho phép các trang web phản hồi hành động của mọi người mà không cần tải trang mới mỗi lần.
Ví dụ: JavaScript cho phép một trang web cảnh báo bạn rằng mật khẩu bạn đã nhập không đáp ứng các yêu cầu của nó trước khi bạn click vào ‘đăng nhập’. Một nhà thiết kế web có thể sử dụng JavaScript để duyệt qua các hình ảnh trong trình chiếu hoặc nhắc người dùng nhập liệu.
Đây chỉ là một vài ví dụ cơ bản. JavaScript là một ngôn ngữ kịch bản (scripting language) có khả năng làm được nhiều việc và tương đối phức tạp hơn nhiều so với HTML và CSS.
Xem xét tổng thể của thiết kế web nằm ngoài phạm vi của bài viết này, bạn chỉ cần nhớ rằng HTML tương tác với các ngôn ngữ khác để tạo ra các trang web mà chúng ta biết ngày nay.
Sự phát triển của HTML
Điều quan trọng cần lưu ý là HTML đã trải qua một số lần sửa đổi, gần đây nhất là HTML 5. Đáng chú ý, tiêu chuẩn này hỗ trợ nhúng video gốc thay vì dựa vào các định dạng độc quyền như Adobe Flash.
Các bản mới của HTML cũng thông báo một số tag cổ điển nhất định thỉnh thoảng không được dùng nữa. Chúng bao gồm các tag khủng khiếp như <marquee> và <blink> (văn bản cuộn và văn bản flash tương ứng) thường thấy trong thiết kế trang web những năm 1990. Vì vậy, hãy nhớ rằng các tiêu chuẩn thay đổi theo thời gian.
Kết luận
Chúng tôi đã giới thiệu sơ qua về cách hoạt động của một tài liệu HTML. Bây giờ bạn đã biết các nguyên tắc cơ bản về cách các trang web được cấu trúc. Ngay cả khi bạn không tiếp tục xây dựng các trang web, bạn cũng sẽ hiểu hơn một chút về trang web mà bạn sử dụng hàng ngày.
Dịch từ: https://www.makeuseof.com/tag/5-steps-understanding-basic-html-code/
Vân Nguyễn
Bài liên quan
Bài liên quan
Report Thị trường IT Việt Nam 2024 – 2025: Cơ hội, Thách thức và Động lực
9X Đà Nẵng thành mentor FUNiX vì ấn tượng mô hình học trực tuyến
Xu hướng chọn học gia sư trực tuyến của phụ huynh Việt
Trường Ban Mai đồng hành FUNiX ở chuỗi sự kiện hướng nghiệp
Báo cáo Việc làm và mức lương ngành công nghệ thông tin năm 2024
Tự học lập trình PHP có khó không? Ưu & Nhược điểm của phương pháp tự học
Lập trình viên PHP là gì? X kiến thức & kỹ năng cần nắm vững để ra nghề nhanh
Bình luận (0
)