Tìm Hiểu Về HTML

HTML là gì?

HTML là viết tắt của Hyper Text Markup Language, là ngôn ngữ được sử dụng rộng rãi nhất trên thế giới để phát triển các trang Web. Với HTML, bạn có thể tạo các trang Web từ đơn giản tới phức tạp, từ các trang hiển thị thông tin cá nhân đơn giản cho đến các trang bao gồm nhiều nghiệp vụ phức tạp. HTML là ngôn ngữ đánh dấu bằng thẻ, nghĩa là bạn sử dụng HTML để đánh dấu một tài liệu text bằng các thẻ (tag), thẻ là đại diện cho các phần tử HTML và thẻ có những nhãn mẫu cho nội dung như: "heading", "paragraph", "table",…, để nói cho trình duyệt Web cách để cấu trúc nó và để hiển thị ra màn hình.


Ví dụ một tài liệu HTML đơn giản:

<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>

Giải thích ví dụ :

Các thẻ (tag) HTML

Các thẻ (tag) HTML là gì?

HTML là ngôn ngữ đánh dấu bằng thẻ (tag) và sử dụng các thẻ khác nhau để định dạng nội dung. Cấu trúc thành phần của thẻ HTML được bao quanh bởi dấu hoặc nhọn: Tagname nội dung tại đây ... / tagname

Thẻ bắt đầu cũng được gọi là thẻ mở và thẻ kết thúc các thẻ đóng.

Các thẻ (tag) cơ bản trong HTML

Tất cả các tài liệu HTML phải bắt đầu với một khai báo kiểu tài liệu: !DOCTYPE html. Các tiêu đề của các tài liệu HTML bắt đầu bằng html và kết thúc bằng / html. Các phần nội dung của tài liệu HTML nằm ở giữa body và / body.

Ví dụ:

<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>

HTML Headings

Bất kỳ tài liệu nào cũng đều bắt đầu với một đầu đề. Bạn có thể sử dụng các kích cỡ khác nhau cho đầu đề của bạn. HTML cũng có 6 cỡ khác nhau cho đầu đề, sử dụng các thẻ cơ bản là h1, h2, h4, h4, h5, và h6.

Ví dụ:

<h1>This is heading 1</h1> … <h6>This is heading 6</h6>

HTML Paragraph

Thẻ p, với p là viết tắt của Paragraph, giúp cấu trúc tài liệu HTML của bạn thành các đoạn văn khác nhau.

Ví dụ:

<p>This is a paragraph.</p>

HTML Paragraph

HTML links được định nghĩa bởi thẻ a:

<a href="link.com">This is a link</a>

HTML Images

HTML images được đĩnh nghĩa bởi thẻ img . Trong đó src là nguồn file hình, alt là văn bản thay thế khi hình không hiển thị được, width và height là chiều rộng, chiều dài của hình

<img src=".jpg" alt=".com" width="104" height="142">

HTML Break

Bất cứ khi nào bạn sử dụng thẻ br / thì các đối tượng theo sau nó sẽ bắt đầu từ dòng tiếp theo. Thẻ này là một ví dụ cho một khoảng trống (empty) trong tài liệu, tại đó bạn sử dụng thẻ br / thay vì sử dụng các thẻ mở và đóng.

Ví dụ:

<p>Xin chao tat ca cac ban<br /> Cam on ban da hoc HTML.<br /> Chuc cac ban hoc tot!</p>

HTML hr – Hiển thị dòng ngang

Các đường ngang được sử dụng để ngăn cách các khu vực trong tài liệu. Thẻ

tạo một dòng ngang từ vị trí hiện tại trong tài liệu đến lề phải và do đó tạo ra một dòng ngắt.

<p>Doan van thu nhat va nam o ben tren</p> <hr /> <p>Doan van thu hai va nam o ben duoi</p>

Các phần tử trong HTML

Phần tử trong HTML là gì?

Một phần tử HTML được xác định bằng một thẻ mở. Nếu phần tử này bao hàm nội dung khác, nó kết thúc với một thẻ đóng. Trong thẻ đóng, tên của phần tử được đứng trước bởi dấu gạch chéo.

Các phần tử và thẻ trong HTML

Một yếu tố HTML được xác định bằng một thẻ mở. Nếu phần tử này bao hàm nội dung khác, nó kết thúc với một thẻ đóng. Ví dụ, thẻ p là thẻ mở của đoạn văn và thẻ /p là thẻ đóng của đoạn văn đó, nhưng p Đây là một đoạn văn /p là một phần tử đoạn văn.

Các phần tử trong HTML được lồng vào nhau

Nó cho phép một phần tử HTML giữ trong một phần tử khác.

<h1>Vi du mot dau de co dang <i>in nghieng</i></h1> <p>Vi du phan van ban <u>bi gach chan</u></p>

Các thuộc tính trong HTML

Thuộc tính trong HTML là gì?

Một thuộc tính được sử dụng để xác định đặc trưng của một phần tử HTML và được đặt trong một thẻ mở của phần tử đó. Tất cả các thuộc tính được chia thành 2 phần: name="value"

Tên thuộc tính và giá trị thuộc tính là không phân biệt chữ hoa và chữ thường. Tuy nhiên, W3C đề nghị thuộc tính chữ thường và thuộc tính giá trị trong phiên bản HTML 4 đã giới thiệu.

<p align="left">Doan van nay duoc can chinh trai</p>

Các thuộc tính cốt lõi trong HTML

Có 4 thuộc tính cốt lõi có thể được sử dụng trong phần lớn các phần tử HTML (mặc dù không phải toàn bộ) là:

Thuộc tính id trong HTML

Các thuộc tính id của một thẻ HTML được sử dụng để nhận diện duy nhất bất kỳ phần tử nào trong một trang HTML. Có 2 lý do chính mà bạn có thể muốn sử dụng một thuộc tính id trên một phần tử là:

<p id="html">Vi du 1 ve thuoc tinh id trong HTML</p>

Thuộc tính title trong HTML

Thuộc tính title cung cấp một tiêu đề cho một phần tử. Cú pháp cho thuộc tính title tương tự như phần giải thích ở trên của thuộc tính id. Chế độ xử lý của thuộc tính này phụ thuộc vào phần tử mang nó, mặc dù nó thường hiển thị một tooltip khi bạn rê chuột qua.

<h4 title="Vi du thuoc tinh title!">Ban re chuot qua day</h4>

Thuộc tính class trong HTML

Thuộc tính class được sử dụng để liên kết một phần tử với một Style Sheet và xác định kiểu của phần tử. Giá trị của thuộc tính này có thể là một danh sách tên các class riêng rẽ được phân biệt nhau bởi khoảng trống.

class="tenClass1 tenClass2 tenClass3"

Thuộc tính style trong HTML

Thuộc tính này cho phép bạn xác định rõ các quy tắc Cascading Style Sheet (CSC) trong phần tử.

<p style="font-family:arial; color:#FF0000;">Hoc HTML co ban va nang cao</p>

Thuộc tính lang trong HTML

Thuộc tính xml:lang trong XHTML thay cho thuộc tính lang. Giá trị của thuộc tính xml:lang này có thể là một mã quốc gia trong ISO-639 như đã đề cập ở trên.

<html lang="vi"> <head> <title>Vi du thuoc tinh lang trong HTML</title> </head> <body> Hoc HTML bang tieng Anh. </body> </html>

Định dạng trong HTML

Các định dạng trong HTML

Cũng như các ứng dụng soạn thảo văn bản khác. HTML cũng cung cấp cho người dùng tính năng địng dạng văn bản.

Thẻ b - In đậm trong HTML

Bất cứ nội dung gì mà xuất hiện trong phần tử b.../b đều được in đậm

<p>Vi du <b>the b trong HTML</b>.</p>

Thẻ i - In nghiêng trong HTML

Bất cứ nội dung gì xuất hiện trong phần tử i.../i đều được in nghiêng

<p>Vi du <i>the i trong HTML</i>.</p>

Thẻ u – Gạch chân trong HTML

Bất cứ nội dung gì xuất hiện trong phần tử u.../u đều được gạch chân.

<p>Vi du <u>the u trong HTML</u>.</p>

Thẻ strong – Thể hiện phần văn bản quan trọng trong HTML

Nội dung xuất hiện trong phần tử strong.../strong được hiển thị như là văn bản quan trọng. Phần văn bản đó sẽ được in đậm hơn các phần văn bản khác.

<p>Day la <strong>the strong </strong> trong HTML.</p>

Thẻ em – Nhấn mạng văn bản trong HTML

Bất cứ nội dung nào trong phần tử em.../em đều được hiển thị ở dạng văn bản được nhấn mạnh.

<p>Vi dụ sau su dung the <em>em trong HTML</em>.</p>

Thẻ mark – Đánh dấu văn bản trong HTML

Nội dung xuất hiện trong phần tử mark.../mark được hiển thị dưới dạng đánh dấu bằng màu mực vàng.

<p>Cum tu sau duoc danh dau bang <mark>the mark trong HTML</mark> voi mau vang</p>

Thẻ small – Làm văn bản hiển thị nhỏ hơn trong HTML

Nội dung xuất hiện trong phần tử small.../small được hiển thị ở một kích cỡ nhỏ hơn phần còn lại xung quanh nó.

<p>Tu sau day su dung the <small>small</small> trong HTML.</p>

Thẻ sup – Chỉ số trên trong HTML

Nội dung trong phần tử sup.../sup được viết dưới dạng chỉ số trên, kích cỡ của nó bằng kích cỡ của các ký tự quanh nó nhưng độ cao của nó bằng một nửa các ký tự khác.

<p>Vi du <sup>the sup trong HTML</sup>.</p>

Thẻ sub – Chỉ số dưới trong HTML

Nội dung trong phần tử sub.../sub được viết ở dạng chỉ số dưới, kích cỡ của nó bằng kích cỡ các ký tự xung quanh nhưng chiều cao bằng một nửa.

<p>Vi du <sub>the sub trong HTML</sub>.</p>

Thẻ ins – Chèn văn bản trong HTML

Bất cứ nội dung xuất hiện trong phần tử ins.../ins được hiển thị như ở dạng văn bản được chèn.

<p>Toi thich hoc <ins>CSS</ins></p>

Thẻ del – Xóa văn bản trong HTML

Nội dung xuất hiện trong phần tử del.../del được hiển thị dưới dạng bị xóa.

<p>Toi thich hoc <del>HTML</del></p>

Thẻ div và span – Tạo nhóm nội dung trong HTML

Phần tử div và span cho phép bạn tạo các phần tử thành nhóm nội dung để tạo ra các khu vực hoặc các tiểu khu của một trang. Bên cạnh đó, phần tử span có thể sử dụng để tạo nhóm chỉ cho các phần tử trong một dòng. Vì thế, nếu bạn có một phần của câu hay đoạn văn mà bạn muốn phân nhóm chúng, bạn có thể sử dụng phần tử span.

<p>Day la vi du ve the <span style="color:green">span</span> va the <span style="color:red">div</span> co su dung CSS</p>

Thẻ code trong HTML

Thẻ code

Bất kỳ code chương trình nào xuất hiện trên trang Web đều được đặt trong phần tử code.../code. Thông thường, nội dung trong phần tử này được hiển thị trong font đơn cách.

<code> var x = 5; var y = 6; document.getElementById("demo").innerHTML = x + y; </code>

Thẻ kbd– Hiển thị văn bản nhập bàn phím trong HTML

Khi bạn đang nói về máy tính, nếu bạn muốn nói cho thiết bị đọc để nhập một vài văn bản, bạn có thể sử dụng phần tử kbd.../kbd để chỉ rõ những gì nên được gõ vào.

<kbd>File | Open...</kbd>

Thẻ var– Hiển thị biến chương trình trong HTML

Phần tử này thường được sử dụng kết hợp với phần tử pre và code để chỉ rõ rằng nội dung trong phần tử là một biến.

Einstein wrote: <var>E</var> = <var>m</var><var>c</var><sup>2</sup>.

Thẻ samp– Hiển thị kết quả chương trình trong HTML

Phần tử samp.../samp chỉ kết quả đầu ra mẫu của một chương trình. Nó hỗ trợ kiểu sample trong máy tính, và được sử dụng chính khi tài liệu lập trình hoặc mã hóa các khái niệm.

<samp> demo.example.com login: Apr 12 09:10:17 Linux 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189 </samp>

Các thẻ Meta trong HTML

Các thẻ Meta trong HTML là gì?

Thẻ meta được sử dụng để cung cấp các thông tin thêm như vậy. Thẻ này là một phần tử trống và không có thẻ đóng nhưng nó lại mang thông tin trong thuộc tính của nó. Với các trang Web mang tính thương mại thì thẻ meta là một trong các nhân tố quan trọng cho SEO. Việc tối ưu hóa thẻ meta càng tốt sẽ giúp cho trang Web của bạn càng nhanh lên top khi được tìm kiếm bởi Google. Bạn có thể sử dụng một hay nhiều thẻ meta trong tài liệu của bạn trên cơ sở những thông tin gì bạn muốn giữ trong tài liệu, nhưng một cách tổng quát thì thẻ meta không ảnh hưởng đến sự xuất hiện vật lý của tài liệu. Do đó, bạn có thể sử dụng hoặc không sử dụng các thẻ meta.

Thêm các thẻ Meta vào tài liệu

Bạn có thể thêm các siêu dữ liệu vào trong các trang Web bằng cách đặt các thẻ meta trong đầu trang của tài liệu mà được thể hiện bởi thẻ head và /head.

Các loại thẻ Meta trong HTML

Thẻ meta keyworks – Xác định các từ khóa trong HTML

Bạn có thể sử dụng thẻ meta để chỉ rõ các từ khóa quan trọng liên quan đến tài liệu và sau đó những từ khóa này được sử dụng trong các công cụ tìm kiếm (ví dụ: Google) trong khi lập chỉ mục trang Web của bạn cho mục đích tìm kiếm.

<meta name="keywords" content="HTML, the meta trong HTML, hoc HTML co ban va nang cao" />

Thẻ meta description – Miêu tả tài liệu trong HTML

Bạn có thể sử dụng thẻ meta để đưa ra một miêu tả ngắn gọn về tài liệu. Điều này giúp cho các công cụ tìm kiếm trong khi lập chỉ mục trang Web của bạn cho mục đích tìm kiếm.

<meta name="description" content="The meta trong HTML." />

Comment trong HTML

Comment trong HTML là gì?

Comment là một phần của code mà được bỏ qua bởi bất kỳ trình duyệt nào. Thêm comment vào code của bạn là một sự luyện tập tốt, đặc biệt trong các tài liệu phức tạp, để chỉ dẫn các khu vực của tài liệu, và bất kỳ ghi chú nào khác cho ai đó tiện theo dõi code. Comment giúp bạn và người khác hiểu đoạn code của bạn để làm cho nó dễ đọc hơn. Comment trong HTML được đặt trong thẻ . Vì vậy bất kỳ nội dung nào đặt trong thẻ này đều được coi như là comment và sẽ được bỏ qua bởi trình duyệt.

<!-- This is a comment --> <p>This is a paragraph.</p> <!-- Remember to add more information here -->

Comment có nhiều dòng trong HTML

Bạn đã thấy comment có một dòng, nhưng HTML cũng hỗ trợ một comment có nhiều dòng. Bạn có thể tạo một comment nhiều dòng bằng cách sử dụng thẻ mở đặt trước dòng đầu tiên và dòng cuối cùng.

<!-- Do not display this at the moment <img border="0" src="pic_mountain.jpg" alt="Mountain"> -->

Comment có điều kiện trong HTML

Comment này chỉ làm việc trên Internet Explorer trên Windows nhưng chúng được bỏ qua bởi các trình duyệt khác. Chúng được hỗ trợ cho các phiên bản IE 5 về trước, và bạn có thể sử dụng chúng để đưa các chỉ thị có điều kiện cho các phiên bản khác nhau của IE.

<!--[if IE 9]> .... some HTML here .... <![endif]-->

Hình ảnh trong HTML

Hình ảnh trong HTML

Hình ảnh là rất quan trọng trong diễn tả và làm đẹp các khái niệm phức tạp theo một cách đơn giản nhất trên trang Web của bạn.

Thẻ img - Chèn hình ảnh trong HTML

Bạn có thể chèn bất cứ hình ảnh nào vào trang Web của bạn bằng cách sử dụng

<img src="đường dẫn url tới nơi chứa hình ảnh" ... danh-sách-thuộc-tính/>

thẻ img. Dưới đây là cú pháp đơn giản để sử dụng thẻ này. Thẻ img này là một thẻ trống, nghĩa là nó chỉ có thể chứa danh sách các thuộc tính và không có thẻ đóng.

Bạn có thể sử dụng file hình ảnh PNG, JPEG hoặc GIF phải xác định rõ tên file ảnh trong thuộc tính src. Tên file là phân biệt chữ hoa và thường. Thuộc tính alt là một thuộc tính ủy quyền, nếu hình ảnh không hiển thị, nó sẽ xác định một văn bản thay thế cho hình ảnh đó.

Thiết lập vị trí của ảnh trong HTML

Chúng ta thường giữ tất cả hình ảnh trong một thư mục riêng. Vì thế hãy lưu các file HTML (test.htm) trong thư mục chính và tạo thư mục phụ imagetrong thư mục chính để lưu file hình ảnh (test.png).

<img src="./images/logo.png" alt="Hình ảnh trong HTML" />

Thiết lập chiều cao và độ rộng của ảnh trong HTML

Bạn có thể thiết lập chiều cao/độ rộng của hình ảnh trên cơ sở sử dụng thuộc tính width vàheight. Bạn có thể xác định chiều độ rộng, chiều cao của hình sử dụng mối quan hệ hoặc là với Pixel hoặc là với kích thước thật của hình đó.

<img src="./images/logo.png" alt="Hình ảnh trong HTML" width="150" height="100"/>

Bảng trong HTML

Bảng trong HTML

Các bảng HTML cho phép lập trình viên sắp xếp các dữ liệu như văn bản, hình ảnh, đường link… vào các ô trong bảng. Bảng HTML được tạo ra bằng cách sử dụng thẻ table trong đó: thẻ tr được sử dụng để tạo các hàng và thẻ td được sử dụng để tạo các ô.

<table border="1"> <tr> <td>Row 1, Column 1</td> <td>Row 1, Column 2</td> </tr> <tr> <td>Row 2, Column 1</td> <td>Row 2, Column 2</td> </tr> </table>

Tại đây border là một thuộc tính của thẻ table và được sử dụng để đặt Border (đường viền) dọc tất cả các ô. Nếu bạn không cần Border, bạn có thể sử dụng border="0".

Tiêu đề bảng trong HTML

Tiêu đề bảng có thể được xác định bằng thẻ th. Thẻ này để thế chỗ cho thẻ td , mà được sử dụng để đại diện cho các ô dữ liệu. Thông thường bạn sẽ đặt hàng đầu tiên của bảng là tiêu đề, ngoài ra bạn có thể sử dụng phần tử th trong bất kỳ hàng nào.

<th>Ten tieu de</th>

Thuộc tính cellpadding và cellspacing trong HTML

Hai thuộc tính này bạn sử dụng để điều chỉnh khoảng trống trắng trong các ô bảng. Thuộc tính cellspacing xác định độ rộng của Border, trong khi thuộc tính cellpadding thay cho khoảng cách giữa Border ô và nội dung trong một ô.

<table border="1" cellpadding="5" cellspacing="5"> </table>

Thuộc tính colspan và rowspan trong HTML

Bạn sử dụng thuộc tính colspan để nhập hai hay nhiều cột vào một cột. Tương tự là thuộc tính rowspan để nhập hai hay nhiều hàng vào một hàng.

<tr><td rowspan="2">Row 1 Cell 1</td><td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr> <tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr> <tr><td colspan="3">Row 3 Cell 1</td></tr>

Xác định background cho bảng trong HTML

Bạn có thể sử dụng một trong hai cách sau để thiết lập nền của bảng: • bgcolor - Bạn sử dụng để thiết lập màu nền cho cả bảng hoặc chỉ cho một ô. • background - Bạn sử dụng để thiết lập ảnh nền cho cả bảng hoặc chỉ cho một ô. Bên cạnh đó, bạn có thể thiết lập màu cho Border bằng cách sử dụng bordercolor.

<table border="1" bordercolor="green" bgcolor="yellow"> </table>

Đây là một ví dụ về sử dụng thuộc tính background. Tại đây chúng tôi sử dụng một hình có trong thư mục ảnh

Chiều cao và độ rộng cho bảng trong HTML

<table border="1" bordercolor="green" background="/images/test.png"> </table>

Bạn sử dụng thuộc tính width và height để thiết lập độ rộng và chiều cao của bảng. Bạn có thể thiết lập nó bằng Pixel hoặc phần trăm của khu vực đặt hình

<table border="1" width="400" height="150"> </table>

Danh sách trong HTML

HTML cung cấp cho người lập trình web 3 cách để xác định danh sách các thông tin. Tất cả các danh sách phải chứa một hoặc nhiều phần tử list. Danh sách có thể gồm:

HTML5

HTML5 là gì?

HTML5 là gì?

HTML5 là một ngôn ngữ cấu trúc và trình bày nội dung cho World Wide Web và sẽ là công nghệ cốt lõi của Internet trong tương lai không xa, được đề xuất đầu tiên bởi Opera Software. Đây là phiên bản thứ năm của ngôn ngữ HTML - được tạo ra năm 1990 và chuẩn hóa như HTML4 năm 1997 - và xuất hiện vào tháng 12 năm 2012, là 1 ứng viên được giới thiệu bởi World Wide Web Consortium (W3C). Mục tiêu cốt lõi khi thiết kế ngôn ngữ là cải thiện khả năng hỗ trợ cho đa phương tiện mới nhất trong khi vẫn giữ nó dễ dàng đọc được bởi con người và luôn hiểu được bởi các thiết bị và các chương trình máy tính như trình duyệt web, phân tích cú pháp, v.v... HTML5 vẫn sẽ giữ lại những đặc điểm cơ bản của HTML4 và bổ sung thêm các đặc tả nổi trội củaXHTML, DOM cấp 2, đặc biệt là JavaScript.

HTML được xử lý ra sao?

Khi một tập tin HTML được hình thành, việc xử lý nó sẽ do trình duyệt web đảm nhận. Trình duyệt sẽ đóng vai trò đọc hiểu nội dung HTML từ các thẻ bên trong và sẽ chuyển sang dạng văn bản đã được đánh dấu để đọc, nghe hoặc hiểu (do các bot máy tính hiểu).

HTML Versions

Bổ cục HTML của một trang web