HTML - Hướng dẫn nhanh
HTML là viết tắt của Hypertmáy lẻ Mhòm Language, và nó là ngôn ngữ được sử dụng rộng rãi nhất để viết các Trang Web.
Hypertextđề cập đến cách mà các trang Web (tài liệu HTML) được liên kết với nhau. Do đó, liên kết có sẵn trên một trang web được gọi là Siêu văn bản.
Như tên gọi của nó, HTML là một Markup Language có nghĩa là bạn sử dụng HTML để đơn giản "đánh dấu" tài liệu văn bản bằng các thẻ cho trình duyệt Web biết cách cấu trúc nó để hiển thị.
Ban đầu, HTML được phát triển với mục đích xác định cấu trúc của các tài liệu như tiêu đề, đoạn văn, danh sách, v.v. để tạo điều kiện thuận lợi cho việc chia sẻ thông tin khoa học giữa các nhà nghiên cứu.
Bây giờ, HTML đang được sử dụng rộng rãi để định dạng các trang web với sự trợ giúp của các thẻ khác nhau có sẵn trong ngôn ngữ HTML.
Tài liệu HTML cơ bản
Ở dạng đơn giản nhất, sau đây là một ví dụ về tài liệu HTML:
<!DOCTYPE html>
<html>
<head>
<title>This is document title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>Document content goes here.....</p>
</body>
</html>Thẻ HTML
Như đã nói trước đó, HTML là một ngôn ngữ đánh dấu và sử dụng các thẻ khác nhau để định dạng nội dung. Các thẻ này được đặt trong dấu ngoặc nhọn<Tag Name>. Ngoại trừ một số thẻ, hầu hết các thẻ đều có thẻ đóng tương ứng. Ví dụ,<html> có thẻ đóng của nó </html> và <body> thẻ có thẻ đóng của nó </body> thẻ, v.v.
Ví dụ trên của tài liệu HTML sử dụng các thẻ sau:
| Sr.No | Thẻ & Mô tả |
|---|---|
| 1 | <!DOCTYPE...> Thẻ này xác định loại tài liệu và phiên bản HTML. |
| 2 | <html> Thẻ này bao quanh tài liệu HTML hoàn chỉnh và chủ yếu bao gồm tiêu đề tài liệu được đại diện bởi <head> ... </head> và phần thân tài liệu được thể hiện bằng thẻ <body> ... </body>. |
| 3 | <head> Thẻ này đại diện cho tiêu đề của tài liệu có thể giữ các thẻ HTML khác như <title>, <link>, v.v. |
| 4 | <title> Thẻ <title> được sử dụng bên trong thẻ <head> để đề cập đến tiêu đề tài liệu. |
| 5 | <body> Thẻ này đại diện cho phần thân của tài liệu giữ các thẻ HTML khác như <h1>, <div>, <p> v.v. |
| 6 | <h1> Thẻ này đại diện cho tiêu đề. |
| 7 | <p> Thẻ này đại diện cho một đoạn văn. |
Để học HTML, bạn sẽ cần phải nghiên cứu các thẻ khác nhau và hiểu cách chúng hoạt động, trong khi định dạng một tài liệu văn bản. Học HTML đơn giản vì người dùng phải học cách sử dụng các thẻ khác nhau để định dạng văn bản hoặc hình ảnh để tạo nên một trang web đẹp.
World Wide Web Consortium (W3C) khuyến nghị sử dụng các thẻ chữ thường bắt đầu từ HTML 4.
Cấu trúc tài liệu HTML
Một tài liệu HTML điển hình sẽ có cấu trúc sau:
<html>
<head>
Document header related tags
</head>
<body>
Document body related tags
</body>
</html>Chúng ta sẽ nghiên cứu tất cả các thẻ header và body trong các chương tiếp theo, nhưng bây giờ chúng ta hãy xem thẻ khai báo tài liệu là gì.
Khai báo <! DOCTYPE>
Thẻ khai báo <! DOCTYPE> được trình duyệt web sử dụng để hiểu phiên bản HTML được sử dụng trong tài liệu. Phiên bản hiện tại của HTML là 5 và nó sử dụng khai báo sau:
<!DOCTYPE html>Có nhiều kiểu khai báo khác có thể được sử dụng trong tài liệu HTML tùy thuộc vào phiên bản HTML đang được sử dụng. Chúng ta sẽ xem thêm chi tiết về điều này khi thảo luận về thẻ <! DOCTYPE ...> cùng với các thẻ HTML khác.
Thẻ tiêu đề
Bất kỳ tài liệu nào cũng bắt đầu bằng một tiêu đề. Bạn có thể sử dụng các kích thước khác nhau cho các tiêu đề của mình. HTML cũng có sáu cấp độ tiêu đề, sử dụng các phần tử<h1>, <h2>, <h3>, <h4>, <h5>, và <h6>. Trong khi hiển thị bất kỳ tiêu đề nào, trình duyệt sẽ thêm một dòng trước và một dòng sau tiêu đề đó.
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>Heading Example</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Thẻ đoạn văn
Các <p>thẻ cung cấp một cách để cấu trúc văn bản của bạn thành các đoạn văn khác nhau. Mỗi đoạn văn bản phải nằm giữa thẻ <p> mở và thẻ đóng </p> như được minh họa bên dưới trong ví dụ -
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>Paragraph Example</title>
</head>
<body>
<p>Here is a first paragraph of text.</p>
<p>Here is a second paragraph of text.</p>
<p>Here is a third paragraph of text.</p>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Thẻ ngắt dòng
Bất cứ khi nào bạn sử dụng <br />, bất cứ thứ gì theo sau nó bắt đầu từ dòng tiếp theo. Thẻ này là một ví dụ về mộtempty phần tử, nơi bạn không cần thẻ mở và thẻ đóng, vì không có gì để xen vào giữa chúng.
Thẻ <br /> có khoảng trắng giữa các ký tự brvà dấu gạch chéo. Nếu bạn bỏ qua khoảng trắng này, các trình duyệt cũ hơn sẽ gặp khó khăn khi hiển thị ngắt dòng, trong khi nếu bạn bỏ lỡ ký tự gạch chéo về phía trước và chỉ sử dụng <br> thì ký tự này không hợp lệ trong XHTML.
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>Line Break Example</title>
</head>
<body>
<p>Hello<br />
You delivered your assignment ontime.<br />
Thanks<br />
Mahnaz</p>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Căn giữa nội dung
Bạn có thể dùng <center> để đặt bất kỳ nội dung nào vào giữa trang hoặc bất kỳ ô nào trong bảng.
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>Centring Content Example</title>
</head>
<body>
<p>This text is not in the center.</p>
<center>
<p>This text is in the center.</p>
</center>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Đường ngang
Các đường ngang được sử dụng để chia nhỏ các phần của tài liệu một cách trực quan. Các<hr> thẻ tạo một dòng từ vị trí hiện tại trong tài liệu sang lề phải và ngắt dòng tương ứng.
Ví dụ: bạn có thể muốn đặt một dòng giữa hai đoạn văn như trong ví dụ dưới đây:
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Line Example</title>
</head>
<body>
<p>This is paragraph one and should be on top</p>
<hr />
<p>This is paragraph two and should be at bottom</p>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Lần nữa <hr /> thẻ là một ví dụ về empty phần tử, nơi bạn không cần thẻ mở và thẻ đóng, vì không có gì để xen vào giữa chúng.
Các <hr /> phần tử có khoảng cách giữa các ký tự hrvà dấu gạch chéo. Nếu bạn bỏ qua khoảng trắng này, các trình duyệt cũ hơn sẽ gặp khó khăn khi hiển thị đường ngang, trong khi nếu bạn bỏ lỡ ký tự gạch chéo về phía trước và chỉ cần sử dụng<hr> nó không hợp lệ trong XHTML
Duy trì định dạng
Đôi khi, bạn muốn văn bản của mình tuân theo định dạng chính xác như cách nó được viết trong tài liệu HTML. Trong những trường hợp này, bạn có thể sử dụng thẻ định dạng sẵn<pre>.
Bất kỳ văn bản nào giữa phần mở đầu <pre> thẻ và đóng </pre> thẻ sẽ giữ nguyên định dạng của tài liệu nguồn.
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>Preserve Formatting Example</title>
</head>
<body>
<pre>
function testFunction( strText ){
alert (strText)
}
</pre>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Hãy thử sử dụng cùng một mã mà không giữ nó bên trong <pre>...</pre> thẻ
Không gian không đột phá
Giả sử bạn muốn sử dụng cụm từ "12 Người đàn ông tức giận." Ở đây, bạn sẽ không muốn trình duyệt chia "12, Angry" và "Men" thành hai dòng -
An example of this technique appears in the movie "12 Angry Men."Trong trường hợp bạn không muốn trình duyệt máy khách ngắt văn bản, bạn nên sử dụng thực thể dấu cách không ngắt thay vì một không gian bình thường. Ví dụ: khi viết mã "12 Angry Men" trong một đoạn văn, bạn nên sử dụng một cái gì đó tương tự như đoạn mã sau:
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>Nonbreaking Spaces Example</title>
</head>
<body>
<p>An example of this technique appears in the movie "12 Angry Men."</p>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
An HTML elementđược xác định bởi một thẻ bắt đầu. Nếu phần tử chứa nội dung khác, phần tử đó kết thúc bằng thẻ đóng, trong đó tên phần tử được đặt trước bằng dấu gạch chéo như hình bên dưới với một vài thẻ -
| Bắt đầu thẻ | Nội dung | Thẻ kết thúc |
|---|---|---|
| <p> | Đây là nội dung đoạn văn. | </p> |
| <h1> | Đây là nội dung tiêu đề. | </h1> |
| <div> | Đây là nội dung phân chia. | </div> |
| <br /> |
Nên ở đây <p>....</p> là một phần tử HTML, <h1>...</h1>là một phần tử HTML khác. Có một số phần tử HTML không cần phải đóng, chẳng hạn như<img.../>, <hr /> và <br />các yếu tố. Chúng được gọi làvoid elements.
Tài liệu HTML bao gồm một cây gồm các phần tử này và chúng chỉ định cách tài liệu HTML nên được xây dựng và loại nội dung nào nên được đặt trong phần nào của tài liệu HTML.
Thẻ HTML so với phần tử
Một phần tử HTML được xác định bởi một thẻ bắt đầu . Nếu phần tử chứa nội dung khác, phần tử đó sẽ kết thúc bằng thẻ đóng .
Ví dụ, <p> là thẻ bắt đầu của một đoạn văn và </p> là thẻ đóng của cùng một đoạn nhưng <p>This is paragraph</p> là một thành phần của đoạn văn.
Các phần tử HTML lồng nhau
Rất được phép giữ một phần tử HTML bên trong một phần tử HTML khác -
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>Nested Elements Example</title>
</head>
<body>
<h1>This is <i>italic</i> heading</h1>
<p>This is <u>underlined</u> paragraph</p>
</body>
</html>Điều này sẽ hiển thị kết quả sau:
Chúng tôi đã thấy một vài thẻ HTML và cách sử dụng chúng như thẻ tiêu đề <h1>, <h2>, thẻ đoạn văn <p>và các thẻ khác. Cho đến nay, chúng tôi đã sử dụng chúng ở dạng đơn giản nhất, nhưng hầu hết các thẻ HTML cũng có thể có các thuộc tính, là các bit thông tin bổ sung.
Một thuộc tính được sử dụng để xác định các đặc điểm của phần tử HTML và được đặt bên trong thẻ mở của phần tử. Tất cả các thuộc tính được tạo thành từ hai phần - aname và một value
Các namelà thuộc tính bạn muốn đặt. Ví dụ, đoạn<p> phần tử trong ví dụ mang thuộc tính có tên là align, mà bạn có thể sử dụng để chỉ ra sự liên kết của đoạn văn trên trang.
Các valuelà những gì bạn muốn giá trị của thuộc tính được đặt và luôn đặt trong dấu ngoặc kép. Ví dụ dưới đây cho thấy ba giá trị có thể có của thuộc tính align: left, center và right.
Tên thuộc tính và giá trị thuộc tính không phân biệt chữ hoa chữ thường. Tuy nhiên, World Wide Web Consortium (W3C) đề xuất các thuộc tính / giá trị thuộc tính chữ thường trong đề xuất HTML 4 của họ.
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>Align Attribute Example</title>
</head>
<body>
<p align = "left">This is left aligned</p>
<p align = "center">This is center aligned</p>
<p align = "right">This is right aligned</p>
</body>
</html>Điều này sẽ hiển thị kết quả sau:
Thuộc tính cốt lõi
Bốn thuộc tính cốt lõi có thể được sử dụng trên phần lớn các phần tử HTML (mặc dù không phải tất cả) là:
- Id
- Title
- Class
- Style
Thuộc tính Id
Các idthuộc tính của thẻ HTML có thể được sử dụng để xác định duy nhất bất kỳ phần tử nào trong trang HTML. Có hai lý do chính mà bạn có thể muốn sử dụng thuộc tính id trên một phần tử -
Nếu một phần tử mang thuộc tính id như một số nhận dạng duy nhất, thì chỉ có thể xác định phần tử đó và nội dung của nó.
Nếu bạn có hai phần tử cùng tên trong một trang Web (hoặc trang định kiểu), bạn có thể sử dụng thuộc tính id để phân biệt giữa các phần tử có cùng tên.
Chúng ta sẽ thảo luận về style sheet trong phần hướng dẫn riêng. Bây giờ, hãy sử dụng thuộc tính id để phân biệt giữa hai phần tử đoạn văn như hình dưới đây.
Example
<p id = "html">This para explains what is HTML</p>
<p id = "css">This para explains what is Cascading Style Sheet</p>Thuộc tính tiêu đề
Các titlethuộc tính cung cấp tiêu đề gợi ý cho phần tử. Cú pháp của chúng chotitle thuộc tính tương tự như được giải thích cho id thuộc tính -
Hoạt động của thuộc tính này sẽ phụ thuộc vào phần tử mang nó, mặc dù nó thường được hiển thị dưới dạng chú giải công cụ khi con trỏ đi qua phần tử hoặc khi phần tử đang tải.
Example
<!DOCTYPE html>
<html>
<head>
<title>The title Attribute Example</title>
</head>
<body>
<h3 title = "Hello HTML!">Titled Heading Tag Example</h3>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Bây giờ hãy thử đưa con trỏ qua "Ví dụ về thẻ tiêu đề có tiêu đề" và bạn sẽ thấy rằng bất kỳ tiêu đề nào bạn đã sử dụng trong mã của mình đều xuất hiện dưới dạng chú giải công cụ của con trỏ.
Thuộc tính của lớp
Các classthuộc tính được sử dụng để liên kết một phần tử với một biểu định kiểu và chỉ định lớp của phần tử. Bạn sẽ tìm hiểu thêm về cách sử dụng thuộc tính class khi bạn tìm hiểu Cascading Style Sheet (CSS). Vì vậy, bây giờ bạn có thể tránh nó.
Giá trị của thuộc tính cũng có thể là một danh sách tên lớp được phân tách bằng dấu cách. Ví dụ -
class = "className1 className2 className3"Thuộc tính kiểu
Thuộc tính style cho phép bạn chỉ định các quy tắc Cascading Style Sheet (CSS) trong phần tử.
<!DOCTYPE html>
<html>
<head>
<title>The style Attribute</title>
</head>
<body>
<p style = "font-family:arial; color:#FF0000;">Some text...</p>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Tại thời điểm này, chúng tôi không học CSS, vì vậy hãy tiếp tục mà không cần bận tâm nhiều về CSS. Ở đây, bạn cần hiểu các thuộc tính HTML là gì và cách chúng có thể được sử dụng trong khi định dạng nội dung.
Các thuộc tính quốc tế hóa
Có ba thuộc tính quốc tế hóa, có sẵn cho hầu hết (mặc dù không phải tất cả) phần tử XHTML.
- dir
- lang
- xml:lang
Thuộc tính dir
Các dirthuộc tính này cho phép bạn chỉ ra cho trình duyệt về hướng mà văn bản sẽ chảy. Thuộc tính dir có thể nhận một trong hai giá trị, như bạn có thể thấy trong bảng sau:
| Giá trị | Ý nghĩa |
|---|---|
| ltr | Trái sang phải (giá trị mặc định) |
| rtl | Từ phải sang trái (đối với các ngôn ngữ như tiếng Do Thái hoặc tiếng Ả Rập được đọc từ phải sang trái) |
Example
<!DOCTYPE html>
<html dir = "rtl">
<head>
<title>Display Directions</title>
</head>
<body>
This is how IE 5 renders right-to-left directed text.
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Khi thuộc tính dir được sử dụng trong thẻ <html>, nó xác định cách văn bản sẽ được trình bày trong toàn bộ tài liệu. Khi được sử dụng trong một thẻ khác, nó sẽ kiểm soát hướng của văn bản đối với nội dung của thẻ đó.
Thuộc tính lang
Các langthuộc tính cho phép bạn chỉ ra ngôn ngữ chính được sử dụng trong tài liệu, nhưng thuộc tính này chỉ được giữ trong HTML để tương thích ngược với các phiên bản HTML trước đó. Thuộc tính này đã được thay thế bằngxml:lang thuộc tính trong tài liệu XHTML mới.
Các giá trị của thuộc tính lang là mã ngôn ngữ hai ký tự tiêu chuẩn ISO-639. Kiểm traHTML Language Codes: ISO 639 để có danh sách đầy đủ các mã ngôn ngữ.
Example
<!DOCTYPE html>
<html lang = "en">
<head>
<title>English Language Page</title>
</head>
<body>
This page is using English Language
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Thuộc tính xml: lang
Các xml: lang thuộc tính là sự thay thế XHTML cho lang thuộc tính. Giá trị của thuộc tính xml: lang phải là mã quốc gia ISO-639 như đã đề cập trong phần trước.
Thuộc tính Chung
Đây là bảng một số thuộc tính khác có thể sử dụng dễ dàng với nhiều thẻ HTML.
| Thuộc tính | Tùy chọn | Chức năng |
|---|---|---|
| căn chỉnh | phải, trái, giữa | Căn chỉnh các thẻ theo chiều ngang |
| giá trị | trên cùng, giữa, dưới cùng | Căn chỉnh theo chiều dọc các thẻ trong phần tử HTML. |
| bgcolor | giá trị số, hệ thập phân, RGB | Đặt màu nền phía sau một phần tử |
| lý lịch | URL | Đặt hình nền phía sau một phần tử |
| Tôi | Đã xác định người dùng | Đặt tên một phần tử để sử dụng với Trang tính kiểu xếp tầng. |
| lớp học | Đã xác định người dùng | Phân loại một phần tử để sử dụng với Trang tính kiểu xếp tầng. |
| chiều rộng | Giá trị số | Chỉ định chiều rộng của bảng, hình ảnh hoặc ô bảng. |
| Chiều cao | Giá trị số | Chỉ định chiều cao của bảng, hình ảnh hoặc ô bảng. |
| tiêu đề | Đã xác định người dùng | Tiêu đề "cửa sổ bật lên" của các phần tử. |
Chúng ta sẽ thấy các ví dụ liên quan khi chúng ta sẽ tiến hành nghiên cứu các thẻ HTML khác. Để có danh sách đầy đủ các Thẻ HTML và các thuộc tính liên quan, vui lòng kiểm tra tham chiếu đến Danh sách Thẻ HTML .
Nếu bạn sử dụng trình xử lý văn bản, bạn phải làm quen với khả năng làm cho văn bản in đậm, in nghiêng hoặc gạch chân; đây chỉ là ba trong số mười tùy chọn có sẵn để chỉ ra cách văn bản có thể xuất hiện trong HTML và XHTML.
Chữ in đậm
Mọi thứ xuất hiện bên trong <b>...</b> phần tử, được in đậm như hình dưới đây -
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>Bold Text Example</title>
</head>
<body>
<p>The following word uses a <b>bold</b> typeface.</p>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Văn bản in nghiêng
Mọi thứ xuất hiện bên trong <i>...</i> phần tử được in nghiêng như hình dưới đây -
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>Italic Text Example</title>
</head>
<body>
<p>The following word uses an <i>italicized</i> typeface.</p>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Văn bản được gạch chân
Mọi thứ xuất hiện bên trong <u>...</u> , được hiển thị với gạch dưới như hình dưới đây -
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>Underlined Text Example</title>
</head>
<body>
<p>The following word uses an <u>underlined</u> typeface.</p>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Văn bản cảnh cáo
Mọi thứ xuất hiện bên trong <strike>...</strike> phần tử được hiển thị với đường gạch ngang, là một đường mảnh xuyên qua văn bản như được hiển thị bên dưới -
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>Strike Text Example</title>
</head>
<body>
<p>The following word uses a <strike>strikethrough</strike> typeface.</p>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Phông chữ Monospaced
Nội dung của một <tt>...</tt>phần tử được viết bằng phông chữ monospaced. Hầu hết các phông chữ được gọi là phông chữ có chiều rộng thay đổi vì các chữ cái khác nhau có chiều rộng khác nhau (ví dụ: chữ 'm' rộng hơn chữ 'i'). Tuy nhiên, trong phông chữ monospaced, mỗi chữ cái có cùng chiều rộng.
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>Monospaced Font Example</title>
</head>
<body>
<p>The following word uses a <tt>monospaced</tt> typeface.</p>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Văn bản siêu chỉ số
Nội dung của một <sup>...</sup>phần tử được viết bằng chỉ số trên; kích thước phông chữ được sử dụng có cùng kích thước với các ký tự xung quanh nó nhưng được hiển thị bằng nửa chiều cao của ký tự so với các ký tự khác.
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>Superscript Text Example</title>
</head>
<body>
<p>The following word uses a <sup>superscript</sup> typeface.</p>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Văn bản chỉ số
Nội dung của một <sub>...</sub>phần tử được viết trong chỉ số con; kích thước phông chữ được sử dụng giống với các ký tự xung quanh nó, nhưng được hiển thị bằng nửa chiều cao của ký tự bên dưới các ký tự khác.
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>Subscript Text Example</title>
</head>
<body>
<p>The following word uses a <sub>subscript</sub> typeface.</p>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Đã chèn văn bản
Mọi thứ xuất hiện bên trong <ins>...</ins> phần tử được hiển thị dưới dạng văn bản được chèn.
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>Inserted Text Example</title>
</head>
<body>
<p>I want to drink <del>cola</del> <ins>wine</ins></p>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Văn bản đã Xóa
Mọi thứ xuất hiện bên trong <del>...</del> , được hiển thị dưới dạng văn bản đã xóa.
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>Deleted Text Example</title>
</head>
<body>
<p>I want to drink <del>cola</del> <ins>wine</ins></p>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Văn bản lớn hơn
Nội dung của <big>...</big> phần tử được hiển thị một cỡ chữ lớn hơn phần còn lại của văn bản xung quanh nó như được hiển thị bên dưới -
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>Larger Text Example</title>
</head>
<body>
<p>The following word uses a <big>big</big> typeface.</p>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Văn bản nhỏ hơn
Nội dung của <small>...</small> phần tử được hiển thị một cỡ chữ nhỏ hơn phần còn lại của văn bản xung quanh nó như được hiển thị bên dưới -
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>Smaller Text Example</title>
</head>
<body>
<p>The following word uses a <small>small</small> typeface.</p>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Nhóm nội dung
Các <div> và <span> các phần tử cho phép bạn nhóm nhiều phần tử lại với nhau để tạo các phần hoặc tiểu mục của một trang.
Ví dụ: bạn có thể muốn đặt tất cả các chú thích trên một trang trong phần tử <div> để cho biết rằng tất cả các phần tử trong phần tử <div> đó đều liên quan đến các chú thích. Sau đó, bạn có thể đính kèm một kiểu vào phần tử <div> này để chúng xuất hiện bằng cách sử dụng một bộ quy tắc kiểu đặc biệt.
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>Div Tag Example</title>
</head>
<body>
<div id = "menu" align = "middle" >
<a href = "/index.htm">HOME</a> |
<a href = "/about/contact_us.htm">CONTACT</a> |
<a href = "/about/index.htm">ABOUT</a>
</div>
<div id = "content" align = "left" >
<h5>Content Articles</h5>
<p>Actual content goes here.....</p>
</div>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Mặt khác, phần tử <span> chỉ có thể được sử dụng để nhóm các phần tử nội tuyến. Vì vậy, nếu bạn có một phần của câu hoặc đoạn muốn nhóm lại với nhau, bạn có thể sử dụng phần tử <span> như sau.
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>Span Tag Example</title>
</head>
<body>
<p>This is the example of <span style = "color:green">span tag</span>
and the <span style = "color:red">div tag</span> alongwith CSS</p>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Các thẻ này thường được sử dụng với CSS để cho phép bạn đính kèm một kiểu vào một phần của trang.
Các thẻ cụm từ đã được làm khô cho các mục đích cụ thể, mặc dù chúng được hiển thị theo cách tương tự như các thẻ cơ bản khác như <b>, <i>, <pre>và <tt>, bạn đã thấy trong chương trước. Chương này sẽ đưa bạn qua tất cả các thẻ cụm từ quan trọng, vì vậy chúng ta hãy bắt đầu xem từng thẻ một.
Đoạn văn bản được nhấn mạnh
Mọi thứ xuất hiện bên trong <em>...</em> phần tử được hiển thị dưới dạng văn bản được nhấn mạnh.
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>Emphasized Text Example</title>
</head>
<body>
<p>The following word uses an <em>emphasized</em> typeface.</p>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Văn bản được Đánh dấu
Bất cứ thứ gì xuất hiện cùng với <mark>...</mark> , được hiển thị như được đánh dấu bằng mực vàng.
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>Marked Text Example</title>
</head>
<body>
<p>The following word has been <mark>marked</mark> with yellow</p>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Văn bản mạnh mẽ
Mọi thứ xuất hiện bên trong <strong>...</strong> phần tử được hiển thị dưới dạng văn bản quan trọng.
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>Strong Text Example</title>
</head>
<body>
<p>The following word uses a <strong>strong</strong> typeface.</p>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Viết tắt văn bản
Bạn có thể viết tắt một văn bản bằng cách đặt nó bên trong các thẻ mở <abbr> và đóng </abbr>. Nếu có, thuộc tính title phải chứa mô tả đầy đủ này và không có gì khác.
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>Text Abbreviation</title>
</head>
<body>
<p>My best friend's name is <abbr title = "Abhishek">Abhy</abbr>.</p>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Yếu tố viết tắt
Các <acronym> phần tử cho phép bạn chỉ ra rằng văn bản giữa các thẻ <acronym> và </acronym> là một từ viết tắt.
Hiện tại, các trình duyệt chính không thay đổi giao diện nội dung của phần tử <tên viết tắt>.
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>Acronym Example</title>
</head>
<body>
<p>This chapter covers marking up text in <acronym>XHTML</acronym>.</p>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Văn bản chỉ đạo
Các <bdo>...</bdo> phần tử là viết tắt của Bi-Directional Override và nó được sử dụng để ghi đè hướng văn bản hiện tại.
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>Text Direction Example</title>
</head>
<body>
<p>This text will go left to right.</p>
<p><bdo dir = "rtl">This text will go right to left.</bdo></p>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Khóa đặc biệt
Các <dfn>...</dfn>phần tử (hoặc Phần tử Định nghĩa HTML) cho phép bạn chỉ định rằng bạn đang giới thiệu một thuật ngữ đặc biệt. Cách sử dụng của nó tương tự như các từ in nghiêng ở giữa một đoạn văn.
Thông thường, bạn sẽ sử dụng phần tử <dfn> lần đầu tiên bạn giới thiệu một thuật ngữ chính. Hầu hết các trình duyệt gần đây hiển thị nội dung của phần tử <dfn> bằng phông chữ nghiêng.
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>Special Terms Example</title>
</head>
<body>
<p>The following word is a <dfn>special</dfn> term.</p>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Văn bản trích dẫn
Khi bạn muốn trích dẫn một đoạn văn từ một nguồn khác, bạn nên đặt nó ở giữa <blockquote>...</blockquote> các thẻ.
Văn bản bên trong phần tử <blockquote> thường được thụt vào từ các cạnh bên trái và bên phải của văn bản xung quanh, và đôi khi sử dụng phông chữ in nghiêng.
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>Blockquote Example</title>
</head>
<body>
<p>The following description of XHTML is taken from the W3C Web site:</p>
<blockquote>XHTML 1.0 is the W3C's first Recommendation for XHTML,following on
from earlier work on HTML 4.01, HTML 4.0, HTML 3.2 and HTML 2.0.</blockquote>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Trích dẫn ngắn
Các <q>...</q> phần tử được sử dụng khi bạn muốn thêm dấu ngoặc kép trong một câu.
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>Double Quote Example</title>
</head>
<body>
<p>Amit is in Spain, <q>I think I am wrong</q>.</p>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Trích dẫn văn bản
Nếu bạn đang trích dẫn một văn bản, bạn có thể chỉ ra nguồn đặt nó giữa một đoạn mở <cite> gắn thẻ và đóng </cite> nhãn
Như bạn mong đợi trong một ấn phẩm in, nội dung của phần tử <cite> được hiển thị dưới dạng văn bản in nghiêng theo mặc định.
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>Citations Example</title>
</head>
<body>
<p>This HTML tutorial is derived from <cite>W3 Standard for HTML</cite>.</p>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Mã máy tính
Bất kỳ mã lập trình nào xuất hiện trên một trang Web phải được đặt bên trong <code>...</code>các thẻ. Thông thường nội dung của phần tử <code> được trình bày bằng phông chữ monospaced, giống như mã trong hầu hết các sách lập trình.
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>Computer Code Example</title>
</head>
<body>
<p>Regular text. <code>This is code.</code> Regular text.</p>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Văn bản bàn phím
Khi bạn đang nói về máy tính, nếu bạn muốn yêu cầu người đọc nhập một số văn bản, bạn có thể sử dụng <kbd>...</kbd> phần tử để chỉ ra những gì nên được nhập vào, như trong ví dụ này.
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>Keyboard Text Example</title>
</head>
<body>
<p>Regular text. <kbd>This is inside kbd element</kbd> Regular text.</p>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Các biến lập trình
Phần tử này thường được sử dụng cùng với <pre> và <code> phần tử để chỉ ra rằng nội dung của phần tử đó là một biến.
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>Variable Text Example</title>
</head>
<body>
<p><code>document.write("<var>user-name</var>")</code></p>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Đầu ra chương trình
The <samp>...</samp> element indicates sample output from a program, and script etc. Again, it is mainly used when documenting programming or coding concepts.
Example
<!DOCTYPE html>
<html>
<head>
<title>Program Output Example</title>
</head>
<body>
<p>Result produced by the program is <samp>Hello World!</samp></p>
</body>
</html>This will produce the following result −
Address Text
The <address>...</address> element is used to contain any address.
Example
<!DOCTYPE html>
<html>
<head>
<title>Address Example</title>
</head>
<body>
<address>388A, Road No 22, Jubilee Hills - Hyderabad</address>
</body>
</html>This will produce the following result −
HTML lets you specify metadata - additional important information about a document in a variety of ways. The META elements can be used to include name/value pairs describing properties of the HTML document, such as author, expiry date, a list of keywords, document author etc.
The <meta> tag is used to provide such additional information. This tag is an empty element and so does not have a closing tag but it carries information within its attributes.
You can include one or more meta tags in your document based on what information you want to keep in your document but in general, meta tags do not impact physical appearance of the document so from appearance point of view, it does not matter if you include them or not.
Adding Meta Tags to Your Documents
You can add metadata to your web pages by placing <meta> tags inside the header of the document which is represented by <head> and </head> tags. A meta tag can have following attributes in addition to core attributes −
| Sr.No | Attribute & Description |
|---|---|
| 1 | Name Name for the property. Can be anything. Examples include, keywords, description, author, revised, generator etc. |
| 2 | content Specifies the property's value. |
| 3 | scheme Specifies a scheme to interpret the property's value (as declared in the content attribute). |
| 4 | http-equiv Used for http response message headers. For example, http-equiv can be used to refresh the page or to set a cookie. Values include content-type, expires, refresh and set-cookie. |
Specifying Keywords
You can use <meta> tag to specify important keywords related to the document and later these keywords are used by the search engines while indexing your webpage for searching purpose.
Example
Following is an example, where we are adding HTML, Meta Tags, Metadata as important keywords about the document.
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>This will produce the following result −
Document Description
You can use <meta> tag to give a short description about the document. This again can be used by various search engines while indexing your webpage for searching purpose.
Example
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>Document Revision Date
You can use <meta> tag to give information about when last time the document was updated. This information can be used by various web browsers while refreshing your webpage.
Example
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
<meta name = "revised" content = "Tutorialspoint, 3/7/2014" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>Document Refreshing
A <meta> tag can be used to specify a duration after which your web page will keep refreshing automatically.
Example
If you want your page keep refreshing after every 5 seconds then use the following syntax.
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
<meta name = "revised" content = "Tutorialspoint, 3/7/2014" />
<meta http-equiv = "refresh" content = "5" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>Page Redirection
You can use <meta> tag to redirect your page to any other webpage. You can also specify a duration if you want to redirect the page after a certain number of seconds.
Example
Following is an example of redirecting current page to another page after 5 seconds. If you want to redirect page immediately then do not specify content attribute.
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
<meta name = "revised" content = "Tutorialspoint, 3/7/2014" />
<meta http-equiv = "refresh" content = "5; url = http://www.tutorialspoint.com" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>Setting Cookies
Cookies are data, stored in small text files on your computer and it is exchanged between web browser and web server to keep track of various information based on your web application need.
You can use <meta> tag to store cookies on client side and later this information can be used by the Web Server to track a site visitor.
Example
Following is an example of redirecting current page to another page after 5 seconds. If you want to redirect page immediately then do not specify content attribute.
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta http-equiv = "cookie" content = "userid = xyz; expires = Wednesday, 08-Aug-15 23:59:59 GMT;" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>If you do not include the expiration date and time, the cookie is considered a session cookie and will be deleted when the user exits the browser.
Note − You can check PHP and Cookies tutorial for a complete detail on Cookies.
Setting Author Name
You can set an author name in a web page using meta tag. See an example below −
Example
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
<meta name = "author" content = "Mahnaz Mohtashim" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>Chỉ định bộ ký tự
Bạn có thể sử dụng thẻ <meta> để chỉ định bộ ký tự được sử dụng trong trang web.
Thí dụ
Theo mặc định, máy chủ Web và trình duyệt Web sử dụng mã hóa ISO-8859-1 (Latin1) để xử lý các trang Web. Sau đây là một ví dụ để đặt mã hóa UTF-8:
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
<meta name = "author" content = "Mahnaz Mohtashim" />
<meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>Để cung cấp trang tĩnh có các ký tự tiếng Trung phồn thể, trang web phải chứa thẻ <meta> để đặt mã hóa Big5 -
<!DOCTYPE html>
<html>
<head>
<title>Meta Tags Example</title>
<meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
<meta name = "description" content = "Learning about Meta Tags." />
<meta name = "author" content = "Mahnaz Mohtashim" />
<meta http-equiv = "Content-Type" content = "text/html; charset = Big5" />
</head>
<body>
<p>Hello HTML5!</p>
</body>
</html>Nhận xét là một đoạn mã bị bất kỳ trình duyệt web nào bỏ qua. Một phương pháp hay là thêm nhận xét vào mã HTML của bạn, đặc biệt là trong các tài liệu phức tạp, để chỉ ra các phần của tài liệu và bất kỳ ghi chú nào khác cho bất kỳ ai xem mã. Nhận xét giúp bạn và những người khác hiểu mã của bạn và tăng khả năng đọc mã.
Nhận xét HTML được đặt ở giữa <!-- ... -->các thẻ. Vì vậy, bất kỳ nội dung nào được đặt với thẻ <! - ... -> sẽ được coi là nhận xét và sẽ bị trình duyệt bỏ qua hoàn toàn.
Thí dụ
<!DOCTYPE html>
<html>
<head> <!-- Document Header Starts -->
<title>This is document title</title>
</head> <!-- Document Header Ends -->
<body>
<p>Document content goes here.....</p>
</body>
</html>Điều này sẽ tạo ra kết quả sau mà không hiển thị nội dung được đưa ra như một phần của nhận xét -
Nhận xét hợp lệ so với không hợp lệ
Các bình luận không lồng vào nhau có nghĩa là một bình luận không thể được đưa vào bên trong một bình luận khác. Thứ hai, chuỗi dấu gạch ngang kép "-" có thể không xuất hiện bên trong nhận xét ngoại trừ một phần của thẻ đóng ->. Bạn cũng phải đảm bảo rằng không có khoảng trắng trong chuỗi bắt đầu của nhận xét.
Thí dụ
Ở đây, bình luận được đưa ra là bình luận hợp lệ và sẽ bị xóa bởi trình duyệt.
<!DOCTYPE html>
<html>
<head>
<title>Valid Comment Example</title>
</head>
<body>
<!-- This is valid comment -->
<p>Document content goes here.....</p>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Tuy nhiên, dòng sau không phải là bình luận hợp lệ và sẽ được trình duyệt hiển thị. Điều này là do có một khoảng trống giữa dấu ngoặc nhọn bên trái và dấu chấm than.
<!DOCTYPE html>
<html>
<head>
<title>Invalid Comment Example</title>
</head>
<body>
< !-- This is not a valid comment -->
<p>Document content goes here.....</p>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Nhận xét nhiều dòng
Cho đến nay, chúng ta đã thấy các nhận xét đơn dòng, nhưng HTML cũng hỗ trợ các nhận xét nhiều dòng.
Bạn có thể nhận xét nhiều dòng bằng thẻ bắt đầu đặc biệt <! - và thẻ kết thúc -> đặt trước dòng đầu tiên và cuối dòng cuối cùng như trong ví dụ dưới đây.
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>Multiline Comments</title>
</head>
<body>
<!--
This is a multiline comment and it can
span through as many as lines you like.
-->
<p>Document content goes here.....</p>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Nhận xét có điều kiện
Nhận xét có điều kiện chỉ hoạt động trong Internet Explorer (IE) trên Windows nhưng chúng bị các trình duyệt khác bỏ qua. Chúng được hỗ trợ từ Explorer 5 trở đi và bạn có thể sử dụng chúng để đưa ra các hướng dẫn có điều kiện cho các phiên bản IE khác nhau.
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>Conditional Comments</title>
<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->
</head>
<body>
<p>Document content goes here.....</p>
</body>
</html>Bạn sẽ gặp một tình huống mà bạn sẽ cần áp dụng một biểu định kiểu khác dựa trên các phiên bản khác nhau của Internet Explorer, trong tình huống đó, các nhận xét có điều kiện sẽ rất hữu ích.
Sử dụng thẻ nhận xét
Có một số trình duyệt hỗ trợ thẻ <comment> để nhận xét một phần của mã HTML.
Note- Thẻ <comment> không được dùng trong HTML5. Không sử dụng phần tử này.
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>Using Comment Tag</title>
</head>
<body>
<p>This is <comment>not</comment> Internet Explorer.</p>
</body>
</html>Nếu bạn đang sử dụng IE, thì nó sẽ cho kết quả như sau:
Nhưng nếu bạn không sử dụng IE, thì nó sẽ tạo ra kết quả như sau:
Mã tập lệnh bình luận
Mặc dù bạn sẽ học JavaScript với HTML, trong một hướng dẫn riêng, nhưng ở đây bạn phải lưu ý rằng nếu bạn đang sử dụng Java Script hoặc VB Script trong mã HTML của mình thì bạn nên đặt mã script đó bên trong các chú thích HTML phù hợp sao cho cũ. trình duyệt có thể hoạt động bình thường.
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>Commenting Script Code</title>
<script>
<!--
document.write("Hello World!")
//-->
</script>
</head>
<body>
<p>Hello , World!</p>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Nhận xét Trang tính Kiểu
Mặc dù bạn sẽ học cách sử dụng các biểu định kiểu với HTML trong một hướng dẫn riêng, nhưng ở đây bạn phải lưu ý rằng nếu bạn đang sử dụng Biểu định kiểu xếp tầng (CSS) trong mã HTML của mình thì bạn nên đặt mã biểu định kiểu đó bên trong các chú thích HTML phù hợp để các trình duyệt cũ có thể hoạt động bình thường.
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>Commenting Style Sheets</title>
<style>
<!--
.example {
border:1px solid #4a7d49;
}
//-->
</style>
</head>
<body>
<div class = "example">Hello , World!</div>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Hình ảnh rất quan trọng để làm đẹp cũng như mô tả nhiều khái niệm phức tạp theo cách đơn giản trên trang web của bạn. Hướng dẫn này sẽ hướng dẫn bạn qua các bước đơn giản để sử dụng hình ảnh trong các trang web của bạn.
Chèn hình ảnh
Bạn có thể chèn bất kỳ hình ảnh nào vào trang web của mình bằng cách sử dụng <img>nhãn. Sau đây là cú pháp đơn giản để sử dụng thẻ này.
<img src = "Image URL" ... attributes-list/>Thẻ <img> là một thẻ trống, có nghĩa là, nó chỉ có thể chứa danh sách các thuộc tính và không có thẻ đóng.
Thí dụ
Để thử ví dụ sau, hãy giữ tệp HTML test.htm và tệp hình ảnh test.png trong cùng một thư mục -
<!DOCTYPE html>
<html>
<head>
<title>Using Image in Webpage</title>
</head>
<body>
<p>Simple Image Insert</p>
<img src = "/html/images/test.png" alt = "Test Image" />
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Bạn có thể sử dụng tệp hình ảnh PNG, JPEG hoặc GIF tùy theo sự thoải mái của bạn nhưng hãy đảm bảo bạn chỉ định tên tệp hình ảnh chính xác trong srcthuộc tính. Tên hình ảnh luôn phân biệt chữ hoa chữ thường.
Các alt thuộc tính là một thuộc tính bắt buộc chỉ định văn bản thay thế cho một hình ảnh, nếu hình ảnh không thể được hiển thị.
Đặt vị trí hình ảnh
Thông thường chúng tôi giữ tất cả các hình ảnh trong một thư mục riêng biệt. Vì vậy, hãy giữ tệp HTML test.htm trong thư mục chính của chúng tôi và tạo một thư mục conimages bên trong thư mục chính, nơi chúng tôi sẽ lưu hình ảnh test.png của chúng tôi.
Thí dụ
Giả sử vị trí hình ảnh của chúng tôi là "image / test.png", hãy thử ví dụ sau:
<!DOCTYPE html>
<html>
<head>
<title>Using Image in Webpage</title>
</head>
<body>
<p>Simple Image Insert</p>
<img src = "/html/images/test.png" alt = "Test Image" />
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Đặt chiều rộng / chiều cao hình ảnh
Bạn có thể đặt chiều rộng và chiều cao hình ảnh dựa trên yêu cầu của mình bằng cách sử dụng width và heightthuộc tính. Bạn có thể chỉ định chiều rộng và chiều cao của hình ảnh theo pixel hoặc tỷ lệ phần trăm kích thước thực của hình ảnh.
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>Set Image Width and Height</title>
</head>
<body>
<p>Setting image width and height</p>
<img src = "/html/images/test.png" alt = "Test Image" width = "150" height = "100"/>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Đặt đường viền hình ảnh
Theo mặc định, hình ảnh sẽ có đường viền xung quanh, bạn có thể chỉ định độ dày đường viền theo pixel bằng thuộc tính border. Độ dày bằng 0 có nghĩa là, không có đường viền xung quanh hình ảnh.
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>Set Image Border</title>
</head>
<body>
<p>Setting image Border</p>
<img src = "/html/images/test.png" alt = "Test Image" border = "3"/>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Đặt căn chỉnh hình ảnh
Theo mặc định, hình ảnh sẽ căn chỉnh ở phía bên trái của trang, nhưng bạn có thể sử dụng align để đặt nó ở giữa hoặc bên phải.
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>Set Image Alignment</title>
</head>
<body>
<p>Setting image Alignment</p>
<img src = "/html/images/test.png" alt = "Test Image" border = "3" align = "right"/>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Đồ họa web miễn phí
Đối với Đồ họa web miễn phí bao gồm các mẫu bạn có thể xem trong Đồ họa web miễn phí
Các bảng HTML cho phép các tác giả web sắp xếp dữ liệu như văn bản, hình ảnh, liên kết, các bảng khác, v.v. thành các hàng và cột của ô.
Các bảng HTML được tạo bằng cách sử dụng <table> trong đó thẻ <tr> được sử dụng để tạo các hàng trong bảng và <td>được sử dụng để tạo các ô dữ liệu. Các phần tử dưới <td> là đều đặn và được căn trái theo mặc định
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<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>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Đây, borderlà một thuộc tính của thẻ <table> và nó được sử dụng để đặt đường viền trên tất cả các ô. Nếu bạn không cần viền, thì bạn có thể sử dụng border = "0".
Tiêu đề bảng
Tiêu đề bảng có thể được xác định bằng cách sử dụng <th>nhãn. Thẻ này sẽ được đặt để thay thế thẻ <td>, được sử dụng để đại diện cho ô dữ liệu thực tế. Thông thường, bạn sẽ đặt hàng trên cùng của mình làm tiêu đề bảng như hình dưới đây, nếu không, bạn có thể sử dụng phần tử <th> trong bất kỳ hàng nào. Các tiêu đề được xác định trong thẻ <th> được căn giữa và in đậm theo mặc định.
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Header</title>
</head>
<body>
<table border = "1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Thuộc tính Cellpadding và Cellspacing
Có hai thuộc tính được gọi là cellpadding và cellspacing mà bạn sẽ sử dụng để điều chỉnh khoảng trắng trong các ô bảng của mình. Thuộc tính cellspacing xác định khoảng cách giữa các ô trong bảng, trong khi cellpadding biểu thị khoảng cách giữa các đường viền ô và nội dung trong một ô.
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Cellpadding</title>
</head>
<body>
<table border = "1" cellpadding = "5" cellspacing = "5">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Thuộc tính Colspan và Rowspan
Bạn sẽ sử dụng colspannếu bạn muốn hợp nhất hai hoặc nhiều cột thành một cột duy nhất. Cách tương tự bạn sẽ sử dụngrowspan nếu bạn muốn hợp nhất hai hoặc nhiều hàng.
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Colspan/Rowspan</title>
</head>
<body>
<table border = "1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<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>
</table>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Hình nền bảng
Bạn có thể đặt nền bảng bằng một trong hai cách sau:
bgcolor Thuộc tính - Bạn có thể đặt màu nền cho toàn bộ bảng hoặc chỉ cho một ô.
background Thuộc tính - Bạn có thể đặt hình nền cho toàn bộ bảng hoặc chỉ cho một ô.
Bạn cũng có thể đặt màu viền cũng bằng cách sử dụng bordercolor thuộc tính.
Note- Các thuộc tính bgcolor , background và bordercolor không được dùng trong HTML5. Không sử dụng các thuộc tính này.
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border = "1" bordercolor = "green" bgcolor = "yellow">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<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>
</table>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Đây là một ví dụ về việc sử dụng backgroundthuộc tính. Ở đây chúng ta sẽ sử dụng một hình ảnh có sẵn trong thư mục / images.
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border = "1" bordercolor = "green" background = "/images/test.png">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<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>
</table>
</body>
</html>Điều này sẽ tạo ra kết quả sau. Ở đây hình nền không áp dụng cho tiêu đề của bảng.
Chiều cao và chiều rộng bảng
Bạn có thể đặt chiều rộng và chiều cao của bảng bằng cách sử dụng width và heightthuộc tính. Bạn có thể chỉ định chiều rộng hoặc chiều cao của bảng theo pixel hoặc theo phần trăm diện tích màn hình có sẵn.
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Width/Height</title>
</head>
<body>
<table border = "1" width = "400" height = "150">
<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>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Bảng chú thích
Các captionthẻ sẽ đóng vai trò như một tiêu đề hoặc giải thích cho bảng và nó hiển thị ở đầu bảng. Thẻ này không được dùng nữa trong phiên bản HTML / XHTML mới hơn.
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Caption</title>
</head>
<body>
<table border = "1" width = "100%">
<caption>This is the caption</caption>
<tr>
<td>row 1, column 1</td><td>row 1, columnn 2</td>
</tr>
<tr>
<td>row 2, column 1</td><td>row 2, columnn 2</td>
</tr>
</table>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Đầu trang, Nội dung và Chân trang của Bảng
Các bảng có thể được chia thành ba phần - phần đầu, phần thân và phần chân. Phần đầu và phần cuối khá giống với phần đầu và chân trang trong tài liệu được xử lý bằng văn bản, vẫn giữ nguyên cho mọi trang, trong khi phần thân là phần chứa nội dung chính của bảng.
Ba yếu tố để tách phần đầu, phần thân và phần chân của bảng là:
<thead> - để tạo một tiêu đề bảng riêng biệt.
<tbody> - để chỉ nội dung chính của bảng.
<tfoot> - để tạo một chân trang bảng riêng biệt.
Một bảng có thể chứa một số phần tử <tbody> để chỉ ra các trang hoặc nhóm dữ liệu khác nhau . Nhưng đáng chú ý là thẻ <thead> và <tfoot> phải xuất hiện trước <tbody>
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border = "1" width = "100%">
<thead>
<tr>
<td colspan = "4">This is the head of the table</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan = "4">This is the foot of the table</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
</table>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Bảng lồng nhau
Bạn có thể sử dụng một bảng bên trong một bảng khác. Không chỉ bảng, bạn có thể sử dụng hầu hết các thẻ bên trong thẻ dữ liệu bảng <td>.
Thí dụ
Sau đây là ví dụ về việc sử dụng một bảng khác và các thẻ khác bên trong một ô bảng.
<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border = "1" width = "100%">
<tr>
<td>
<table border = "1" width = "100%">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
HTML cung cấp cho các tác giả web ba cách để chỉ định danh sách thông tin. Tất cả các danh sách phải chứa một hoặc nhiều phần tử danh sách. Danh sách có thể chứa -
<ul>- Một danh sách không có thứ tự. Điều này sẽ liệt kê các mục sử dụng dấu đầu dòng đơn giản.
<ol>- Một danh sách có thứ tự. Điều này sẽ sử dụng các lược đồ số khác nhau để liệt kê các mục của bạn.
<dl>- Một danh sách định nghĩa. Điều này sắp xếp các mục của bạn theo cách giống như chúng được sắp xếp trong từ điển.
Danh sách không có thứ tự HTML
Danh sách không có thứ tự là một tập hợp các mục liên quan không có thứ tự hoặc trình tự đặc biệt. Danh sách này được tạo bằng cách sử dụng HTML<ul>nhãn. Mỗi mục trong danh sách được đánh dấu bằng dấu đầu dòng.
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Thuộc tính loại
Bạn có thể dùng typethuộc tính cho thẻ <ul> để chỉ định loại dấu đầu dòng bạn thích. Theo mặc định, nó là một đĩa. Sau đây là các tùy chọn khả thi -
<ul type = "square">
<ul type = "disc">
<ul type = "circle">Thí dụ
Sau đây là một ví dụ mà chúng tôi đã sử dụng <ul type = "square">
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type = "square">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Thí dụ
Sau đây là một ví dụ mà chúng tôi đã sử dụng <ul type = "disk"> -
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type = "disc">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Thí dụ
Sau đây là một ví dụ mà chúng tôi đã sử dụng <ul type = "circle"> -
<!DOCTYPE html>
<html>
<head>
<title>HTML Unordered List</title>
</head>
<body>
<ul type = "circle">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Danh sách có thứ tự HTML
Nếu bạn được yêu cầu đặt các mục của mình trong một danh sách được đánh số thay vì đánh dấu đầu dòng, thì danh sách có thứ tự HTML sẽ được sử dụng. Danh sách này được tạo bằng cách sử dụng<ol>nhãn. Việc đánh số bắt đầu từ một và được tăng lên một cho mỗi phần tử danh sách có thứ tự liên tiếp được gắn thẻ <li>.
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Thuộc tính loại
Bạn có thể dùng typethuộc tính cho thẻ <ol> để chỉ định kiểu đánh số bạn thích. Theo mặc định, nó là một số. Sau đây là các tùy chọn khả thi -
<ol type = "1"> - Default-Case Numerals.
<ol type = "I"> - Upper-Case Numerals.
<ol type = "i"> - Lower-Case Numerals.
<ol type = "A"> - Upper-Case Letters.
<ol type = "a"> - Lower-Case Letters.Thí dụ
Sau đây là một ví dụ mà chúng tôi đã sử dụng <ol type = "1">
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "1">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Thí dụ
Sau đây là một ví dụ mà chúng tôi đã sử dụng <ol type = "I">
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "I">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Thí dụ
Dưới đây là một ví dụ mà chúng tôi đã sử dụng <ol type = "i">
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "i">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Thí dụ
Sau đây là một ví dụ mà chúng tôi đã sử dụng <ol type = "A">
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "A">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Thí dụ
Sau đây là một ví dụ mà chúng tôi đã sử dụng <ol type = "a">
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "a">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Thuộc tính bắt đầu
Bạn có thể dùng startthuộc tính cho thẻ <ol> để chỉ định điểm bắt đầu đánh số mà bạn cần. Sau đây là các tùy chọn khả thi -
<ol type = "1" start = "4"> - Numerals starts with 4.
<ol type = "I" start = "4"> - Numerals starts with IV.
<ol type = "i" start = "4"> - Numerals starts with iv.
<ol type = "a" start = "4"> - Letters starts with d.
<ol type = "A" start = "4"> - Letters starts with D.Thí dụ
Sau đây là một ví dụ mà chúng tôi đã sử dụng <ol type = "i" start = "4">
<!DOCTYPE html>
<html>
<head>
<title>HTML Ordered List</title>
</head>
<body>
<ol type = "i" start = "4">
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Danh sách Định nghĩa HTML
HTML và XHTML hỗ trợ kiểu danh sách được gọi là definition listsnơi các mục được liệt kê giống như trong từ điển hoặc bách khoa toàn thư. Danh sách định nghĩa là cách lý tưởng để trình bày bảng thuật ngữ, danh sách các thuật ngữ hoặc danh sách tên / giá trị khác.
Danh sách Định nghĩa sử dụng ba thẻ sau.
- <dl> - Xác định vị trí bắt đầu của danh sách
- <dt> - Một thuật ngữ
- <dd> - Định nghĩa thuật ngữ
- </dl> - Xác định phần cuối của danh sách
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>HTML Definition List</title>
</head>
<body>
<dl>
<dt><b>HTML</b></dt>
<dd>This stands for Hyper Text Markup Language</dd>
<dt><b>HTTP</b></dt>
<dd>This stands for Hyper Text Transfer Protocol</dd>
</dl>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Một trang web có thể chứa các liên kết khác nhau đưa bạn trực tiếp đến các trang khác và thậm chí các phần cụ thể của một trang nhất định. Các liên kết này được gọi là siêu liên kết.
Siêu liên kết cho phép khách truy cập điều hướng giữa các trang Web bằng cách nhấp vào các từ, cụm từ và hình ảnh. Do đó, bạn có thể tạo siêu liên kết bằng cách sử dụng văn bản hoặc hình ảnh có sẵn trên trang web.
Note- Tôi khuyên bạn nên xem qua một hướng dẫn ngắn về Hiểu URL
Liên kết tài liệu
Một liên kết được chỉ định bằng thẻ HTML <a>. Thẻ này được gọi làanchor tagvà bất kỳ thứ gì giữa thẻ mở <a> và thẻ đóng </a> đều trở thành một phần của liên kết và người dùng có thể nhấp vào phần đó để truy cập tài liệu được liên kết. Sau đây là cú pháp đơn giản để sử dụng thẻ <a>.
<a href = "Document URL" ... attributes-list>Link Text</a>Thí dụ
Hãy thử làm theo ví dụ liên kết http://www.tutorialspoint.com tại trang của bạn -
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
</head>
<body>
<p>Click following link</p>
<a href = "https://www.tutorialspoint.com" target = "_self">Tutorials Point</a>
</body>
</html>Điều này sẽ tạo ra kết quả sau, nơi bạn có thể nhấp vào liên kết được tạo để truy cập trang chủ của Tutorials Point (trong ví dụ này).
Thuộc tính mục tiêu
Chúng tôi vừa dùng targettrong ví dụ trước của chúng tôi. Thuộc tính này được sử dụng để chỉ định vị trí nơi tài liệu được liên kết được mở. Sau đây là các tùy chọn khả thi -
| Sr.No | Tùy chọn & Mô tả |
|---|---|
| 1 | _blank Mở tài liệu được liên kết trong một cửa sổ hoặc tab mới. |
| 2 | _self Mở tài liệu được liên kết trong cùng một khung. |
| 3 | _parent Mở tài liệu được liên kết trong khung chính. |
| 4 | _top Mở tài liệu được liên kết trong toàn bộ nội dung của cửa sổ. |
| 5 | targetframe Mở tài liệu được liên kết trong một tên targetframe . |
Thí dụ
Hãy thử ví dụ sau để hiểu sự khác biệt cơ bản trong một số tùy chọn được cung cấp cho thuộc tính mục tiêu.
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
<base href = "https://www.tutorialspoint.com/">
</head>
<body>
<p>Click any of the following links</p>
<a href = "/html/index.htm" target = "_blank">Opens in New</a> |
<a href = "/html/index.htm" target = "_self">Opens in Self</a> |
<a href = "/html/index.htm" target = "_parent">Opens in Parent</a> |
<a href = "/html/index.htm" target = "_top">Opens in Body</a>
</body>
</html>Điều này sẽ tạo ra kết quả sau, nơi bạn có thể nhấp vào các liên kết khác nhau để hiểu sự khác biệt giữa các tùy chọn khác nhau được cung cấp cho thuộc tính đích.
Sử dụng đường dẫn cơ sở
Khi bạn liên kết các tài liệu HTML liên quan đến cùng một trang web, không bắt buộc phải cung cấp URL hoàn chỉnh cho mọi liên kết. Bạn có thể loại bỏ nó nếu bạn sử dụng<base>trong tiêu đề tài liệu HTML của bạn. Thẻ này được sử dụng để cung cấp một đường dẫn cơ sở cho tất cả các liên kết. Vì vậy, trình duyệt của bạn sẽ nối đường dẫn tương đối nhất định với đường dẫn cơ sở này và sẽ tạo thành một URL hoàn chỉnh.
Thí dụ
Ví dụ sau sử dụng thẻ <base> để chỉ định URL cơ sở và sau này chúng ta có thể sử dụng đường dẫn tương đối đến tất cả các liên kết thay vì cung cấp URL hoàn chỉnh cho mọi liên kết.
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
<base href = "https://www.tutorialspoint.com/">
</head>
<body>
<p>Click following link</p>
<a href = "/html/index.htm" target = "_blank">HTML Tutorial</a>
</body>
</html>Điều này sẽ tạo ra kết quả sau, nơi bạn có thể nhấp vào liên kết được tạo HTML Tutorial để đến với hướng dẫn HTML.
URL hiện đã cung cấp <a href = "/html/index.htm" đang được coi là <ahref = "http://www.tutorialspoint.com/html/index.htm"
Liên kết đến một phần trang
Bạn có thể tạo liên kết đến một phần cụ thể của một trang web nhất định bằng cách sử dụng namethuộc tính. Đây là một quy trình gồm hai bước.
Note- Thuộc tính name không được chấp nhận trong HTML5. Không sử dụng thuộc tính này. Sử dụng thuộc tính id và title thay thế.
Trước tiên, hãy tạo một liên kết đến nơi bạn muốn truy cập bằng trang web và đặt tên cho nó bằng thẻ <a ...> như sau:
<h1>HTML Text Links <a name = "top"></a></h1>Bước thứ hai là tạo một siêu liên kết để liên kết tài liệu và đặt nơi bạn muốn đến -
<a href = "/html/html_text_links.htm#top">Go to the Top</a>Điều này sẽ tạo ra liên kết sau, nơi bạn có thể nhấp vào liên kết được tạo Go to the Top để đến đầu hướng dẫn Liên kết văn bản HTML.
Go to the TopĐặt màu liên kết
Bạn có thể đặt màu cho các liên kết, liên kết đang hoạt động và liên kết đã truy cập bằng cách sử dụng link, alink và vlink thuộc tính của thẻ <body>.
Thí dụ
Lưu phần sau vào test.htm và mở nó trong bất kỳ trình duyệt web nào để xem cách thực hiện link, alink và vlink thuộc tính hoạt động.
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
<base href = "https://www.tutorialspoint.com/">
</head>
<body alink = "#54A250" link = "#040404" vlink = "#F40633">
<p>Click following link</p>
<a href = "/html/index.htm" target = "_blank" >HTML Tutorial</a>
</body>
</html>Điều này sẽ tạo ra kết quả sau. Chỉ cần kiểm tra màu sắc của liên kết trước khi nhấp vào nó, tiếp theo hãy kiểm tra màu sắc của nó khi bạn kích hoạt nó và khi liên kết đã được truy cập.
Liên kết tải xuống
Bạn có thể tạo liên kết văn bản để tải xuống các tệp PDF, DOC hoặc ZIP của bạn. Điều này rất đơn giản; bạn chỉ cần cung cấp URL đầy đủ của tệp có thể tải xuống như sau:
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
</head>
<body>
<a href = "https://www.tutorialspoint.com/page.pdf">Download PDF File</a>
</body>
</html>Điều này sẽ tạo ra liên kết sau và sẽ được sử dụng để tải xuống một tệp.
Hộp thoại Tải xuống Tệp
Đôi khi bạn muốn cung cấp một tùy chọn trong đó người dùng sẽ nhấp vào một liên kết và nó sẽ bật lên hộp "Tải xuống tệp" cho người dùng thay vì hiển thị nội dung thực tế. Điều này rất dễ dàng và có thể đạt được bằng cách sử dụng tiêu đề HTTP trong phản hồi HTTP của bạn.
Ví dụ, nếu bạn muốn Filename tệp có thể tải xuống từ một liên kết nhất định thì cú pháp của nó sẽ như sau.
#!/usr/bin/perl
# Additional HTTP Header
print "Content-Type:application/octet-stream; name = \"FileName\"\r\n";
print "Content-Disposition:attachment; filename = \"FileName\"\r\n\n";
# Open the target file and list down its content as follows
open( FILE, "<FileName" );
while(read(FILE, $buffer, 100)){ print("$buffer");
}Note- Để biết thêm chi tiết về các chương trình PERL CGI, hãy xem hướng dẫn PERL và CGI .
Chúng tôi đã biết cách tạo liên kết siêu văn bản bằng văn bản và chúng tôi cũng học cách sử dụng hình ảnh trong các trang web của mình. Bây giờ, chúng ta sẽ học cách sử dụng hình ảnh để tạo siêu liên kết.
Thí dụ
Thật đơn giản để sử dụng một hình ảnh làm siêu liên kết. Chúng ta chỉ cần sử dụng một hình ảnh bên trong siêu liên kết tại vị trí của văn bản như hình dưới đây -
<!DOCTYPE html>
<html>
<head>
<title>Image Hyperlink Example</title>
</head>
<body>
<p>Click following link</p>
<a href = "https://www.tutorialspoint.com" target = "_self">
<img src = "/images/logo.png" alt = "Tutorials Point" border = "0"/>
</a>
</body>
</html>Điều này sẽ tạo ra kết quả sau, nơi bạn có thể nhấp vào hình ảnh để truy cập trang chủ của Tutorials Point.
Đây là cách đơn giản nhất để tạo siêu liên kết bằng hình ảnh. Tiếp theo, chúng ta sẽ xem cách chúng ta có thể tạo Liên kết hình ảnh nhạy cảm với chuột.
Hình ảnh nhạy cảm với chuột
Các tiêu chuẩn HTML và XHTML cung cấp một tính năng cho phép bạn nhúng nhiều liên kết khác nhau vào bên trong một hình ảnh. Bạn có thể tạo các liên kết khác nhau trên một hình ảnh dựa trên các tọa độ khác nhau có sẵn trên hình ảnh. Khi các liên kết khác nhau được gắn với các tọa độ khác nhau, chúng ta có thể nhấp vào các phần khác nhau của hình ảnh để mở tài liệu đích. Những hình ảnh nhạy cảm với chuột như vậy được gọi là bản đồ hình ảnh.
Có hai cách để tạo bản đồ hình ảnh -
Server-side image maps - Điều này được kích hoạt bởi ismap thuộc tính của thẻ <img> và yêu cầu quyền truy cập vào máy chủ và các ứng dụng xử lý bản đồ hình ảnh liên quan.
Client-side image maps - Cái này được tạo bằng usemap thuộc tính của thẻ <img>, cùng với các thẻ <map> và <areosystem tương ứng.
Bản đồ hình ảnh phía máy chủ
Ở đây, bạn chỉ cần đặt hình ảnh của mình bên trong một liên kết siêu và ismapthuộc tính làm cho nó trở thành hình ảnh đặc biệt và khi người dùng nhấp vào một số vị trí trong hình ảnh, trình duyệt sẽ chuyển tọa độ của con trỏ chuột cùng với URL được chỉ định trong thẻ <a> đến máy chủ web. Máy chủ sử dụng tọa độ con trỏ chuột để xác định tài liệu nào cần cung cấp trở lại trình duyệt.
Khi ismap được sử dụng, thuộc tính href của thẻ chứa <a> phải chứa URL của ứng dụng máy chủ như cgi hoặc tập lệnh PHP, v.v. để xử lý yêu cầu đến dựa trên tọa độ đã chuyển.
Tọa độ của vị trí chuột là pixel màn hình được tính từ góc trên bên trái của hình ảnh, bắt đầu bằng (0,0). Các tọa độ, trước dấu chấm hỏi, được thêm vào cuối URL.
Ví dụ: nếu người dùng nhấp vào 20 pixel trên và 30 pixel xuống từ góc trên bên trái của hình ảnh sau:
Đoạn mã sau đã được tạo ra bởi:
<!DOCTYPE html>
<html>
<head>
<title>ISMAP Hyperlink Example</title>
</head>
<body>
<p>Click following link</p>
<a href = "/cgi-bin/ismap.cgi" target = "_self">
<img ismap src = "/images/logo.png" alt = "Tutorials Point" border = "0"/>
</a>
</body>
</html>Sau đó, trình duyệt sẽ gửi các tham số tìm kiếm sau đến máy chủ web có thể được xử lý bằng ismap.cgi script hoặc map file và bạn có thể liên kết bất kỳ tài liệu nào bạn thích với các tọa độ này -
/cgi-bin/ismap.cgi?20,30Bằng cách này, bạn có thể gán các liên kết khác nhau cho các tọa độ khác nhau của hình ảnh và khi các tọa độ đó được nhấp vào, bạn có thể mở tài liệu được liên kết tương ứng. Để tìm hiểu thêm vềismap, bạn có thể kiểm tra Cách sử dụng Bản đồ hình ảnh?
Note- Bạn sẽ học lập trình CGI khi bạn học lập trình Perl. Bạn có thể viết tập lệnh của mình để xử lý các tọa độ được truyền này bằng PHP hoặc bất kỳ tập lệnh nào khác. Bây giờ, hãy tập trung vào việc học HTML và sau này bạn có thể truy cập lại phần này.
Bản đồ hình ảnh phía máy khách
Bản đồ hình ảnh phía máy khách được kích hoạt bởi usemap thuộc tính của thẻ <img /> và được xác định bằng các thẻ tiện ích mở rộng <map> và <areosystem đặc biệt.
Hình ảnh sẽ tạo thành bản đồ được chèn vào trang bằng thẻ <img /> như một hình ảnh bình thường, ngoại trừ nó mang một thuộc tính bổ sung được gọi là usemap. Giá trị của thuộc tính usemap là giá trị sẽ được sử dụng trong thẻ <map> để liên kết các thẻ bản đồ và hình ảnh. Thẻ <map> cùng với thẻ <areosystem xác định tất cả các tọa độ hình ảnh và các liên kết tương ứng.
Thẻ <areosystem bên trong thẻ bản đồ, chỉ định hình dạng và tọa độ để xác định ranh giới của từng điểm phát sóng có thể nhấp có sẵn trên hình ảnh. Đây là một ví dụ từ bản đồ hình ảnh -
<!DOCTYPE html>
<html>
<head>
<title>USEMAP Hyperlink Example</title>
</head>
<body>
<p>Search and click the hotspot</p>
<img src = /images/html.gif alt = "HTML Map" border = "0" usemap = "#html"/>
<!-- Create Mappings -->
<map name = "html">
<area shape = "circle" coords = "80,80,20"
href = "/css/index.htm" alt = "CSS Link" target = "_self" />
<area shape = "rect" coords = "5,5,40,40" alt = "jQuery Link"
href = "/jquery/index.htm" target = "_self" />
</map>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Hệ tọa độ
Giá trị thực tế của coords hoàn toàn phụ thuộc vào hình dạng được đề cập. Dưới đây là một bản tóm tắt, sau đó là các ví dụ chi tiết -
rect = x1 , y1 , x2 , y2
x 1 và y 1 là tọa độ của góc trên bên trái của hình chữ nhật; x 2 và y 2 là tọa độ của góc dưới bên phải.
circle = xc , yc , radius
x c và y c là tọa độ của tâm đường tròn và bán kính là bán kính của đường tròn. Một vòng tròn có tâm là 200,50 với bán kính 25 sẽ có các coords thuộc tính = "200,50,25"
poly = x1 , y1 , x2 , y2 , x3 , y3 , ... xn , yn
Các cặp xy khác nhau xác định các đỉnh (điểm) của đa giác, với một "đường thẳng" được vẽ từ điểm này đến điểm tiếp theo. Một đa giác hình thoi với điểm trên cùng là 20,20 và 40 pixel ở các điểm rộng nhất của nó sẽ có các thuộc tính coords = "20,20,40,40,20,60,0,40" .
Tất cả các tọa độ đều liên quan đến góc trên bên trái của hình ảnh (0,0). Mỗi hình dạng có một URL liên quan. Bạn có thể sử dụng bất kỳ phần mềm hình ảnh nào để biết tọa độ của các vị trí khác nhau.
Không khó để đặt một liên kết email HTML trên trang web của bạn nhưng nó có thể gây ra vấn đề gửi thư rác không cần thiết cho tài khoản email của bạn. Có những người có thể chạy các chương trình để thu thập các loại email này và sau đó sử dụng chúng để gửi thư rác theo nhiều cách khác nhau.
Bạn có thể có một tùy chọn khác để tạo điều kiện cho mọi người gửi email cho bạn. Một tùy chọn có thể là sử dụng các biểu mẫu HTML để thu thập dữ liệu người dùng và sau đó sử dụng tập lệnh PHP hoặc CGI để gửi email.
Một ví dụ đơn giản, hãy kiểm tra Biểu mẫu liên hệ với chúng tôi . Chúng tôi lấy phản hồi của người dùng bằng biểu mẫu này và sau đó chúng tôi đang sử dụng một chương trình CGI đang thu thập thông tin này và gửi email cho chúng tôi đến một ID email đã cho.
Note- Bạn sẽ tìm hiểu về HTML Forms trong HTML Forms và bạn sẽ tìm hiểu về CGI trong một hướng dẫn khác của chúng tôiPerl CGI Programming.
Thẻ email HTML
HTML <a>thẻ cung cấp cho bạn tùy chọn để chỉ định địa chỉ email để gửi email. Trong khi sử dụng thẻ <a> làm thẻ email, bạn sẽ sử dụngmailto: email addresscùng với thuộc tính href . Sau đây là cú pháp sử dụngmailto thay vì sử dụng http.
<a href = "mailto: [email protected]">Send Email</a>Mã này sẽ tạo liên kết sau mà bạn có thể sử dụng để gửi email.
Send EmailBây giờ, nếu người dùng nhấp vào liên kết này, nó sẽ khởi chạy một Ứng dụng khách Email (như Lotus Notes, Outlook Express, v.v.) được cài đặt trên máy tính của người dùng của bạn. Có một rủi ro khác khi sử dụng tùy chọn này để gửi email vì nếu người dùng không cài đặt ứng dụng email trên máy tính của họ thì sẽ không thể gửi email.
Thiết lập mặc định
Bạn có thể chỉ định chủ đề email và nội dung email mặc định cùng với địa chỉ email của mình. Sau đây là ví dụ để sử dụng chủ đề và nội dung mặc định.
<a href = "mailto:[email protected]?subject = Feedback&body = Message">
Send Feedback
</a>Mã này sẽ tạo liên kết sau mà bạn có thể sử dụng để gửi email.
Send FeedbackKhung HTML được sử dụng để chia cửa sổ trình duyệt của bạn thành nhiều phần trong đó mỗi phần có thể tải một tài liệu HTML riêng biệt. Tập hợp các khung trong cửa sổ trình duyệt được gọi là bộ khung. Cửa sổ được chia thành các khung theo cách tương tự như các bảng được tổ chức: thành hàng và cột.
Nhược điểm của khung
Có một số hạn chế với việc sử dụng khung, vì vậy bạn không bao giờ nên sử dụng khung trong các trang web của mình -
Một số thiết bị nhỏ hơn thường không thể đối phó với khung hình vì màn hình của chúng không đủ lớn để chia nhỏ.
Đôi khi trang của bạn sẽ được hiển thị khác nhau trên các máy tính khác nhau do độ phân giải màn hình khác nhau.
Nút quay lại của trình duyệt có thể không hoạt động như người dùng hy vọng.
Vẫn còn một số trình duyệt không hỗ trợ công nghệ khung.
Tạo khung
Để sử dụng các khung trên một trang, chúng tôi sử dụng thẻ <frameset> thay vì thẻ <body>. Thẻ <frameset> định nghĩa, cách chia cửa sổ thành các khung. Cácrows thuộc tính của thẻ <frameset> xác định khung ngang và colsthuộc tính xác định khung dọc. Mỗi khung được biểu thị bằng thẻ <frame> và nó xác định tài liệu HTML nào sẽ mở vào khung.
Note- Thẻ <frame> không được dùng nữa trong HTML5. Không sử dụng phần tử này.
Thí dụ
Sau đây là ví dụ để tạo ba khung ngang:
<!DOCTYPE html>
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset rows = "10%,80%,10%">
<frame name = "top" src = "/html/top_frame.htm" />
<frame name = "main" src = "/html/main_frame.htm" />
<frame name = "bottom" src = "/html/bottom_frame.htm" />
<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>
</html>Điều này sẽ tạo ra kết quả sau:
Thí dụ
Hãy đặt ví dụ trên như sau, ở đây chúng tôi thay thế thuộc tính row bằng cols và thay đổi chiều rộng của chúng. Điều này sẽ tạo ra tất cả ba khung theo chiều dọc -
<!DOCTYPE html>
<html>
<head>
<title>HTML Frames</title>
</head>
<frameset cols = "25%,50%,25%">
<frame name = "left" src = "/html/top_frame.htm" />
<frame name = "center" src = "/html/main_frame.htm" />
<frame name = "right" src = "/html/bottom_frame.htm" />
<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>
</html>Điều này sẽ tạo ra kết quả sau:
Thuộc tính thẻ <frameset>
Sau đây là các thuộc tính quan trọng của thẻ <frameset>:
| Sr.No | Thuộc tính & Mô tả |
|---|---|
| 1 | cols Chỉ định bao nhiêu cột được chứa trong bộ khung và kích thước của mỗi cột. Bạn có thể chỉ định chiều rộng của mỗi cột theo một trong bốn cách sau: Giá trị tuyệt đối tính bằng pixel. Ví dụ: để tạo ba khung dọc, hãy sử dụng cols = "100, 500, 100" . Một phần trăm của cửa sổ trình duyệt. Ví dụ: để tạo ba khung dọc, hãy sử dụng cols = "10%, 80%, 10%" . Sử dụng ký tự đại diện. Ví dụ: để tạo ba khung dọc, hãy sử dụng cols = "10%, *, 10%" . Trong trường hợp này ký tự đại diện chiếm phần còn lại của cửa sổ. Như chiều rộng tương đối của cửa sổ trình duyệt. Ví dụ, để tạo ba khung dọc, hãy sử dụng cols = "3 *, 2 *, 1 *" . Đây là một sự thay thế cho tỷ lệ phần trăm. Bạn có thể sử dụng chiều rộng tương đối của cửa sổ trình duyệt. Ở đây cửa sổ được chia thành sáu phần: cột đầu tiên chiếm một nửa cửa sổ, cột thứ hai chiếm một phần ba và cột thứ ba chiếm một phần sáu. |
| 2 | rows Thuộc tính này hoạt động giống như thuộc tính cols và nhận các giá trị giống nhau, nhưng nó được sử dụng để chỉ định các hàng trong bộ khung. Ví dụ: để tạo hai khung ngang, hãy sử dụng row = "10%, 90%" . Bạn có thể chỉ định chiều cao của mỗi hàng theo cách tương tự như đã giải thích ở trên cho các cột. |
| 3 | border Thuộc tính này chỉ định chiều rộng của đường viền của mỗi khung hình bằng pixel. Ví dụ: border = "5". Giá trị bằng 0 có nghĩa là không có đường viền. |
| 4 | frameborder Thuộc tính này chỉ định xem có nên hiển thị đường viền ba chiều giữa các khung hay không. Thuộc tính này nhận giá trị 1 (có) hoặc 0 (không). Ví dụ frameborder = "0" chỉ định không có đường viền. |
| 5 | framespacing Thuộc tính này chỉ định lượng không gian giữa các khung trong một bộ khung. Điều này có thể nhận bất kỳ giá trị số nguyên nào. Ví dụ: framespacing = "10" có nghĩa là phải có 10 pixel khoảng cách giữa mỗi khung. |
Thuộc tính thẻ <frame>
Sau đây là các thuộc tính quan trọng của thẻ <frame>:
| Sr.No | Thuộc tính & Mô tả |
|---|---|
| 1 | src Thuộc tính này được sử dụng để cung cấp tên tệp sẽ được tải trong khung. Giá trị của nó có thể là bất kỳ URL nào. Ví dụ: src = "/html/top_frame.htm" sẽ tải một tệp HTML có sẵn trong thư mục html. |
| 2 | name Thuộc tính này cho phép bạn đặt tên cho khung. Nó được sử dụng để chỉ ra khung mà tài liệu sẽ được tải vào. Điều này đặc biệt quan trọng khi bạn muốn tạo liên kết trong một khung tải các trang vào một khung khác, trong trường hợp này, khung thứ hai cần có tên để tự xác định là mục tiêu của liên kết. |
| 3 | frameborder Thuộc tính này chỉ định xem các đường viền của khung đó có được hiển thị hay không; nó sẽ ghi đè giá trị đã cho trong thuộc tính frameborder trên thẻ <frameset> nếu một giá trị được cung cấp và điều này có thể nhận các giá trị 1 (có) hoặc 0 (không). |
| 4 | marginwidth Thuộc tính này cho phép bạn chỉ định chiều rộng của khoảng trống giữa bên trái và bên phải của các đường viền của khung và nội dung của khung. Giá trị được tính bằng pixel. Ví dụ: marginwidth = "10". |
| 5 | marginheight Thuộc tính này cho phép bạn chỉ định chiều cao của khoảng trống giữa phần trên và phần dưới của đường viền khung và nội dung của nó. Giá trị được tính bằng pixel. Ví dụ marginheight = "10". |
| 6 | noresize Theo mặc định, bạn có thể thay đổi kích thước bất kỳ khung nào bằng cách nhấp và kéo trên các đường viền của khung. Thuộc tính noresize ngăn người dùng có thể thay đổi kích thước khung. Ví dụ noresize = "noresize". |
| 7 | scrolling Thuộc tính này kiểm soát sự xuất hiện của các thanh cuộn xuất hiện trên khung. Điều này nhận các giá trị "có", "không" hoặc "tự động". Ví dụ: scrolling = "no" có nghĩa là nó không được có thanh cuộn. |
| số 8 | longdesc Thuộc tính này cho phép bạn cung cấp liên kết đến một trang khác có chứa mô tả dài về nội dung của khung. Ví dụ longdesc = "framedescription.htm" |
Hỗ trợ trình duyệt cho khung
Nếu người dùng đang sử dụng bất kỳ trình duyệt cũ nào hoặc bất kỳ trình duyệt nào không hỗ trợ khung thì phần tử <noframes> sẽ được hiển thị cho người dùng.
Vì vậy, bạn phải đặt một phần tử <body> bên trong phần tử <noframes> vì phần tử <frameset> được cho là thay thế phần tử <body>, nhưng nếu trình duyệt không hiểu phần tử <frameset> thì nó sẽ hiểu những gì bên trong Phần tử <body> được chứa trong phần tử <noframes>.
Bạn có thể đưa ra một số thông điệp hay cho người dùng của bạn có trình duyệt cũ. Ví dụ, Xin lỗi !! Trình duyệt của bạn không hỗ trợ khung. như trong ví dụ trên.
Tên của khung và thuộc tính mục tiêu
Một trong những cách sử dụng phổ biến nhất của khung là đặt các thanh điều hướng trong một khung và sau đó tải các trang chính vào một khung riêng biệt.
Hãy xem ví dụ sau trong đó tệp test.htm có mã sau:
<!DOCTYPE html>
<html>
<head>
<title>HTML Target Frames</title>
</head>
<frameset cols = "200, *">
<frame src = "/html/menu.htm" name = "menu_page" />
<frame src = "/html/main.htm" name = "main_page" />
<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>
</html>Ở đây, chúng tôi đã tạo hai cột để điền vào hai khung. Khung đầu tiên rộng 200 pixel và sẽ chứa thanh menu điều hướng domenu.htmtập tin. Cột thứ hai lấp đầy không gian còn lại và sẽ chứa phần chính của trang và nó được thực hiện bởimain.htmtập tin. Đối với tất cả ba liên kết có sẵn trong thanh menu, chúng tôi đã đề cập đến khung mục tiêu làmain_page, vì vậy bất cứ khi nào bạn nhấp vào bất kỳ liên kết nào trong thanh menu, liên kết có sẵn sẽ mở ra trong trang chính.
Sau đây là nội dung của tệp menu.htm
<!DOCTYPE html>
<html>
<body bgcolor = "#4a7d49">
<a href = "http://www.google.com" target = "main_page">Google</a>
<br />
<br />
<a href = "http://www.microsoft.com" target = "main_page">Microsoft</a>
<br />
<br />
<a href = "http://news.bbc.co.uk" target = "main_page">BBC News</a>
</body>
</html>Sau đây là nội dung của tệp main.htm -
<!DOCTYPE html>
<html>
<body bgcolor = "#b5dcb3">
<h3>This is main page and content from any link will be displayed here.</h3>
<p>So now click any link and see the result.</p>
</body>
</html>Khi chúng tôi tải test.htm tệp, nó tạo ra kết quả sau:
Bây giờ bạn có thể thử nhấp vào các liên kết có sẵn trong bảng điều khiển bên trái và xem kết quả. Các targetattribute cũng có thể lấy một trong các giá trị sau -
| Sr.No | Tùy chọn & Mô tả |
|---|---|
| 1 | _self Tải trang vào khung hiện tại. |
| 2 | _blank Tải một trang vào cửa sổ trình duyệt mới. Mở một cửa sổ mới. |
| 3 | _parent Tải trang vào cửa sổ mẹ, trong trường hợp chỉ có một bộ khung là cửa sổ trình duyệt chính. |
| 4 | _top Tải trang vào cửa sổ trình duyệt, thay thế mọi khung hiện tại. |
| 5 | targetframe Tải trang vào khung mục tiêu được đặt tên. |
Bạn có thể xác định khung nội tuyến bằng thẻ HTML <iframe>. Thẻ <iframe> bằng cách nào đó không liên quan đến thẻ <frameset>, thay vào đó, nó có thể xuất hiện ở bất kỳ đâu trong tài liệu của bạn. Thẻ <iframe> xác định một vùng hình chữ nhật trong tài liệu, trong đó trình duyệt có thể hiển thị một tài liệu riêng biệt, bao gồm thanh cuộn và đường viền. Khung nội tuyến được sử dụng để nhúng tài liệu khác vào tài liệu HTML hiện tại.
Các src thuộc tính được sử dụng để chỉ định URL của tài liệu chiếm khung nội tuyến.
Thí dụ
Sau đây là ví dụ cho thấy cách sử dụng <iframe> -
<!DOCTYPE html>
<html>
<head>
<title>HTML Iframes</title>
</head>
<body>
<p>Document content goes here...</p>
<iframe src = "/html/menu.htm" width = "555" height = "200">
Sorry your browser does not support inline frames.
</iframe>
<p>Document content also go here...</p>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Thuộc tính thẻ <Iframe>
Hầu hết các thuộc tính của thẻ <iframe>, bao gồm tên, lớp, thứ tự khung , id, longdesc, marginheight, marginwidth, tên, cuộn, kiểu và tiêu đề hoạt động chính xác như các thuộc tính tương ứng cho thẻ <frame>.
Note- Các thuộc tính frameborder , marginwidth , longdesc , scrolling , marginheight không được dùng trong HTML5. Không sử dụng các thuộc tính này.
| Sr.No | Thuộc tính & Mô tả |
|---|---|
| 1 | src Thuộc tính này được sử dụng để cung cấp tên tệp sẽ được tải trong khung. Giá trị của nó có thể là bất kỳ URL nào. Ví dụ: src = "/html/top_frame.htm" sẽ tải một tệp HTML có sẵn trong thư mục html. |
| 2 | name Thuộc tính này cho phép bạn đặt tên cho khung. Nó được sử dụng để chỉ ra khung mà tài liệu sẽ được tải vào. Điều này đặc biệt quan trọng khi bạn muốn tạo liên kết trong một khung tải các trang vào một khung khác, trong trường hợp này, khung thứ hai cần có tên để tự xác định là mục tiêu của liên kết. |
| 3 | frameborder Thuộc tính này chỉ định xem các đường viền của khung đó có được hiển thị hay không; nó sẽ ghi đè giá trị đã cho trong thuộc tính frameborder trên thẻ <frameset> nếu một giá trị được cung cấp và điều này có thể nhận các giá trị 1 (có) hoặc 0 (không). |
| 4 | marginwidth Thuộc tính này cho phép bạn chỉ định chiều rộng của khoảng trống giữa bên trái và bên phải của các đường viền của khung và nội dung của khung. Giá trị được tính bằng pixel. Ví dụ: marginwidth = "10". |
| 5 | marginheight Thuộc tính này cho phép bạn chỉ định chiều cao của khoảng trống giữa phần trên và phần dưới của đường viền khung và nội dung của nó. Giá trị được tính bằng pixel. Ví dụ marginheight = "10". |
| 6 | height Thuộc tính này chỉ định chiều cao của <iframe>. |
| 7 | scrolling Thuộc tính này kiểm soát sự xuất hiện của các thanh cuộn xuất hiện trên khung. Điều này nhận các giá trị "có", "không" hoặc "tự động". Ví dụ: scrolling = "no" có nghĩa là nó không được có thanh cuộn. |
| số 8 | longdesc Thuộc tính này cho phép bạn cung cấp liên kết đến một trang khác có chứa mô tả dài về nội dung của khung. Ví dụ longdesc = "framedescription.htm" |
| 9 | width Thuộc tính này chỉ định chiều rộng của <iframe>. |
Tất cả các phần tử HTML có thể được phân loại thành hai loại (a) Phần tử cấp độ khối (b)Phần tử nội tuyến.
Phần tử khối
Các phần tử khối xuất hiện trên màn hình như thể chúng có dấu ngắt dòng trước và sau chúng. Ví dụ: các thẻ <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <dl>, <pre>, <hr Các phần tử />, <blockquote> và <address> đều là các phần tử cấp khối. Tất cả đều bắt đầu trên dòng mới của riêng mình và bất cứ thứ gì theo sau chúng đều xuất hiện trên dòng mới của chính nó.
Phần tử nội tuyến
Mặt khác, các phần tử nội dòng có thể xuất hiện trong các câu và không nhất thiết phải xuất hiện trên một dòng mới của chính chúng. <b>, <i>, <u>, <em>, <strong>, <sup>, <sub>, <big>, <small>, <li>, <ins>, <del>, < các phần tử code>, <cite>, <dfn>, <kbd> và <var> đều là phần tử nội tuyến.
Nhóm các phần tử HTML
Có hai thẻ quan trọng mà chúng tôi sử dụng rất thường xuyên để nhóm các thẻ HTML khác nhau (i) thẻ <div> và (ii) thẻ <span>
Thẻ <div>
Đây là thẻ cấp khối rất quan trọng, đóng vai trò lớn trong việc nhóm các thẻ HTML khác nhau và áp dụng CSS trên nhóm các phần tử. Ngay cả bây giờ, thẻ <div> có thể được sử dụng để tạo bố cục trang web nơi chúng tôi xác định các phần khác nhau (Trái, Phải, Trên cùng, v.v.) của trang bằng thẻ <div>. Thẻ này không cung cấp bất kỳ thay đổi trực quan nào trên khối nhưng điều này có nhiều ý nghĩa hơn khi nó được sử dụng với CSS.
Thí dụ
Sau đây là một ví dụ đơn giản về thẻ <div>. Chúng ta sẽ tìm hiểu Cascading Style Sheet (CSS) trong một chương riêng biệt nhưng chúng ta đã sử dụng nó ở đây để hiển thị cách sử dụng thẻ <div> -
<!DOCTYPE html>
<html>
<head>
<title>HTML div Tag</title>
</head>
<body>
<!-- First group of tags -->
<div style = "color:red">
<h4>This is first group</h4>
<p>Following is a list of vegetables</p>
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
</div>
<!-- Second group of tags -->
<div style = "color:green">
<h4>This is second group</h4>
<p>Following is a list of fruits</p>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Mango</li>
<li>Strawberry</li>
</ul>
</div>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Thẻ <span>
HTML <span> là một phần tử nội tuyến và nó có thể được sử dụng để nhóm các phần tử nội tuyến trong một tài liệu HTML. Thẻ này cũng không cung cấp bất kỳ thay đổi trực quan nào trên khối nhưng có nhiều ý nghĩa hơn khi nó được sử dụng với CSS.
Sự khác biệt giữa thẻ <span> và thẻ <div> là thẻ <span> được sử dụng với các phần tử nội dòng trong khi thẻ <div> được sử dụng với các phần tử cấp khối.
Thí dụ
Sau đây là một ví dụ đơn giản về thẻ <span>. Chúng ta sẽ tìm hiểu Cascading Style Sheet (CSS) trong một chương riêng biệt nhưng chúng ta đã sử dụng nó ở đây để chỉ ra cách sử dụng thẻ <span> -
<!DOCTYPE html>
<html>
<head>
<title>HTML span Tag</title>
</head>
<body>
<p>This is <span style = "color:red">red</span> and this is
<span style = "color:green">green</span></p>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Theo mặc định, nền trang web của bạn có màu trắng. Bạn có thể không thích nó, nhưng đừng lo lắng. HTML cung cấp cho bạn hai cách sau để trang trí nền trang web của bạn.
- Nền HTML với màu sắc
- Nền HTML có hình ảnh
Bây giờ chúng ta hãy xem từng cách tiếp cận một bằng cách sử dụng các ví dụ thích hợp.
Nền html với màu sắc
Các bgcolor thuộc tính được sử dụng để kiểm soát nền của một phần tử HTML, cụ thể là nền của nội dung trang và bảng.
Note- Thuộc tính bgcolor không được dùng trong HTML5. Không sử dụng thuộc tính này.
Sau đây là cú pháp để sử dụng thuộc tính bgcolor với bất kỳ thẻ HTML nào.
<tagname bgcolor = "color_value"...>Color_value này có thể được cung cấp ở bất kỳ định dạng nào sau đây:
<!-- Format 1 - Use color name -->
<table bgcolor = "lime" >
<!-- Format 2 - Use hex value -->
<table bgcolor = "#f1f1f1" >
<!-- Format 3 - Use color value in RGB terms -->
<table bgcolor = "rgb(0,0,120)" >Thí dụ
Dưới đây là các ví dụ để đặt nền của thẻ HTML -
<!DOCTYPE html>
<html>
<head>
<title>HTML Background Colors</title>
</head>
<body>
<!-- Format 1 - Use color name -->
<table bgcolor = "yellow" width = "100%">
<tr>
<td>
This background is yellow
</td>
</tr>
</table>
<!-- Format 2 - Use hex value -->
<table bgcolor = "#6666FF" width = "100%">
<tr>
<td>
This background is sky blue
</td>
</tr>
</table>
<!-- Format 3 - Use color value in RGB terms -->
<table bgcolor = "rgb(255,0,255)" width = "100%">
<tr>
<td>
This background is green
</td>
</tr>
</table>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Nền html với hình ảnh
Các backgroundthuộc tính cũng có thể được sử dụng để kiểm soát nền của một phần tử HTML, cụ thể là các nền của thân trang và bảng. Bạn có thể chỉ định một hình ảnh để đặt nền cho trang hoặc bảng HTML của mình.
Note- Thuộc tính nền không được chấp nhận trong HTML5. Không sử dụng thuộc tính này.
Sau đây là cú pháp để sử dụng thuộc tính nền với bất kỳ thẻ HTML nào.
Note- Thuộc tính background không được dùng nữa và bạn nên sử dụng Style Sheet để thiết lập nền.
<tagname background = "Image URL"...>Các định dạng ảnh được sử dụng thường xuyên nhất là ảnh JPEG, GIF và PNG.
Thí dụ
Dưới đây là các ví dụ để đặt ảnh nền của bảng.
<!DOCTYPE html>
<html>
<head>
<title>HTML Background Images</title>
</head>
<body>
<!-- Set table background -->
<table background = "/images/html.gif" width = "100%" height = "100">
<tr><td>
This background is filled up with HTML image.
</td></tr>
</table>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Nền có hoa văn & trong suốt
Bạn có thể đã thấy nhiều hình nền hoặc hình nền trong suốt trên các trang web khác nhau. Điều này đơn giản có thể đạt được bằng cách sử dụng hình ảnh có hoa văn hoặc hình ảnh trong suốt ở nền.
Chúng tôi khuyên rằng trong khi tạo các mẫu hoặc hình ảnh GIF hoặc PNG trong suốt, hãy sử dụng kích thước nhỏ nhất có thể, thậm chí nhỏ nhất là 1x1 để tránh tải chậm.
Thí dụ
Dưới đây là các ví dụ để thiết lập mẫu nền của bảng -
<!DOCTYPE html>
<html>
<head>
<title>HTML Background Images</title>
</head>
<body>
<!-- Set a table background using pattern -->
<table background = "/images/pattern1.gif" width = "100%" height = "100">
<tr>
<td>
This background is filled up with a pattern image.
</td>
</tr>
</table>
<!-- Another example on table background using pattern -->
<table background = "/images/pattern2.gif" width = "100%" height = "100">
<tr>
<td>
This background is filled up with a pattern image.
</td>
</tr>
</table>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Màu sắc rất quan trọng để mang lại giao diện tốt cho trang web của bạn. Bạn có thể chỉ định màu ở cấp độ trang bằng cách sử dụng thẻ <body> hoặc bạn có thể đặt màu cho từng thẻ bằng cách sử dụngbgcolor thuộc tính.
Thẻ <body> có các thuộc tính sau có thể được sử dụng để đặt các màu khác nhau:
bgcolor - Đặt màu cho nền của trang.
text - đặt màu cho nội dung văn bản.
alink - đặt màu cho các liên kết đang hoạt động hoặc các liên kết đã chọn.
link - Đặt màu cho văn bản được liên kết.
vlink- đặt màu cho các liên kết đã truy cập - nghĩa là cho văn bản được liên kết mà bạn đã nhấp vào.
Phương pháp mã hóa màu HTML
Có ba phương pháp khác nhau sau đây để đặt màu trong trang web của bạn -
Color names - Bạn có thể chỉ định tên màu trực tiếp như xanh lá cây, xanh lam hoặc đỏ.
Hex codes - Một mã gồm sáu chữ số đại diện cho số lượng màu đỏ, xanh lá cây và xanh lam tạo nên màu sắc.
Color decimal or percentage values - Giá trị này được chỉ định bằng thuộc tính rgb ().
Bây giờ chúng ta sẽ xem từng cách phối màu này.
Màu HTML - Tên màu
Bạn có thể chỉ định trực tiếp tên màu để đặt văn bản hoặc màu nền. W3C đã liệt kê 16 tên màu cơ bản sẽ xác thực bằng trình xác thực HTML nhưng có hơn 200 tên màu khác nhau được các trình duyệt chính hỗ trợ.
Note- Kiểm tra danh sách đầy đủ của Tên màu HTML.
W3C tiêu chuẩn 16 màu
Đây là danh sách các tên 16 Màu Tiêu chuẩn W3C và bạn nên sử dụng chúng.
| Đen | Màu xám | Bạc | trắng | ||||
| Màu vàng | Vôi | Aqua | Fuchsia | ||||
| Đỏ | màu xanh lá | Màu xanh da trời | Màu tím | ||||
| Bỏ rơi | Ôliu | Hải quân | Mòng két |
Thí dụ
Dưới đây là các ví dụ để đặt nền của thẻ HTML theo tên màu -
<!DOCTYPE html>
<html>
<head>
<title>HTML Colors by Name</title>
</head>
<body text = "blue" bgcolor = "green">
<p>Use different color names for for body and table and see the result.</p>
<table bgcolor = "black">
<tr>
<td>
<font color = "white">This text will appear white on black background.</font>
</td>
</tr>
</table>
</body>
</html>Màu HTML - Mã Hex
Hệ thập lục phân là biểu diễn màu gồm 6 chữ số. Hai chữ số đầu tiên (RR) đại diện cho một giá trị màu đỏ, hai chữ số tiếp theo là một giá trị màu xanh lá cây (GG) và cuối cùng là giá trị màu xanh lam (BB).
Giá trị thập lục phân có thể được lấy từ bất kỳ phần mềm đồ họa nào như Adobe Photoshop, Paintshop Pro hoặc MS Paint.
Mỗi mã thập lục phân sẽ được đặt trước dấu thăng hoặc dấu thăng #. Sau đây là danh sách một số màu sử dụng ký hiệu thập lục phân.
| Màu sắc | Màu HEX |
|---|---|
| # 000000 | |
| # FF0000 | |
| # 00FF00 | |
| # 0000FF | |
| # FFFF00 | |
| # 00FFFF | |
| # FF00FF | |
| # C0C0C0 | |
| #FFFFFF |
Thí dụ
Dưới đây là các ví dụ để đặt nền của thẻ HTML theo mã màu ở hệ thập lục phân -
<!DOCTYPE html>
<html>
<head>
<title>HTML Colors by Hex</title>
</head>
<body text = "#0000FF" bgcolor = "#00FF00">
<p>Use different color hexa for for body and table and see the result.</p>
<table bgcolor = "#000000">
<tr>
<td>
<font color = "#FFFFFF">This text will appear white on black background.</font>
</td>
</tr>
</table>
</body>
</html>Màu HTML - Giá trị RGB
Giá trị màu này được chỉ định bằng cách sử dụng rgb( )bất động sản. Thuộc tính này nhận ba giá trị, mỗi giá trị cho màu đỏ, xanh lục và xanh lam. Giá trị có thể là một số nguyên từ 0 đến 255 hoặc một phần trăm.
Note - Tất cả các trình duyệt không hỗ trợ thuộc tính rgb () của màu sắc vì vậy bạn không nên sử dụng nó.
Sau đây là danh sách hiển thị một số màu sử dụng giá trị RGB.
| Màu sắc | Màu RGB |
|---|---|
| rgb (0,0,0) | |
| rgb (255,0,0) | |
| rgb (0,255,0) | |
| rgb (0,0,255) | |
| rgb (255,255,0) | |
| rgb (0,255,255) | |
| rgb (255,0,255) | |
| rgb (192,192,192) | |
| rgb (255,255,255) |
Thí dụ
Dưới đây là các ví dụ để đặt nền của thẻ HTML theo mã màu sử dụng các giá trị rgb () -
<!DOCTYPE html>
<html>
<head>
<title>HTML Colors by RGB code</title>
</head>
<body text = "rgb(0,0,255)" bgcolor = "rgb(0,255,0)">
<p>Use different color code for for body and table and see the result.</p>
<table bgcolor = "rgb(0,0,0)">
<tr>
<td>
<font color = "rgb(255,255,255)">This text will appear white on black background.</font>
</td>
</tr>
</table>
</body>
</html>Màu sắc an toàn của trình duyệt
Dưới đây là danh sách 216 màu được cho là an toàn nhất và các màu độc lập với máy tính. Những màu này rất từ mã hexa 000000 đến FFFFFF và chúng sẽ được hỗ trợ bởi tất cả các máy tính có bảng màu 256.
| 000000 | 000033 | 000066 | 000099 | 0000CC | 0000FF |
| 003300 | 003333 | 003366 | 003399 | 0033CC | 0033FF |
| 006600 | 006633 | 006666 | 006699 | 0066CC | 0066FF |
| 009900 | 009933 | 009966 | 009999 | 0099CC | 0099FF |
| 00CC00 | 00CC33 | 00CC66 | 00CC99 | 00CCCC | 00CCFF |
| 00FF00 | 00FF33 | 00FF66 | 00FF99 | 00FFCC | 00FFFF |
| 330000 | 330033 | 330066 | 330099 | 3300CC | 3300FF |
| 333300 | 333333 | 333366 | 333399 | 3333CC | 3333FF |
| 336600 | 336633 | 336666 | 336699 | 3366CC | 3366FF |
| 339900 | 339933 | 339966 | 339999 | 3399CC | 3399FF |
| 33CC00 | 33CC33 | 33CC66 | 33CC99 | 33CCCC | 33CCFF |
| 33FF00 | 33FF33 | 33FF66 | 33FF99 | 33FFCC | 33FFFF |
| 660000 | 660033 | 660066 | 660099 | 6600CC | 6600FF |
| 663300 | 663333 | 663366 | 663399 | 6633CC | 6633FF |
| 666600 | 666633 | 666666 | 666699 | 6666CC | 6666FF |
| 669900 | 669933 | 669966 | 669999 | 6699CC | 6699FF |
| 66CC00 | 66CC33 | 66CC66 | 66CC99 | 66CCCC | 66CCFF |
| 66FF00 | 66FF33 | 66FF66 | 66FF99 | 66FFCC | 66FFFF |
| 990000 | 990033 | 990066 | 990099 | 9900CC | 9900FF |
| 993300 | 993333 | 993366 | 993399 | 9933CC | 9933FF |
| 996600 | 996633 | 996666 | 996699 | 9966CC | 9966FF |
| 999900 | 999933 | 999966 | 999999 | 9999CC | 9999FF |
| 99CC00 | 99CC33 | 99CC66 | 99CC99 | 99CCCC | 99CCFF |
| 99FF00 | 99FF33 | 99FF66 | 99FF99 | 99FFCC | 99FFFF |
| CC0000 | CC0033 | CC0066 | CC0099 | CC00CC | CC00FF |
| CC3300 | CC3333 | CC3366 | CC3399 | CC33CC | CC33FF |
| CC6600 | CC6633 | CC6666 | CC6699 | CC66CC | CC66FF |
| CC9900 | CC9933 | CC9966 | CC9999 | CC99CC | CC99FF |
| CCCC00 | CCCC33 | CCCC66 | CCCC99 | CCCCCC | CCCCFF |
| CCFF00 | CCFF33 | CCFF66 | CCFF99 | CCFFCC | CCFFFF |
| FF0000 | FF0033 | FF0066 | FF0099 | FF00CC | FF00FF |
| FF3300 | FF3333 | FF3366 | FF3399 | FF33CC | FF33FF |
| FF6600 | FF6633 | FF6666 | FF6699 | FF66CC | FF66FF |
| FF9900 | FF9933 | FF9966 | FF9999 | FF99CC | FF99FF |
| FFCC00 | FFCC33 | FFCC66 | FFCC99 | FFCCCC | FFCCFF |
| FFFF00 | FFFF33 | FFFF66 | FFFF99 | FFFFCC | FFFFFF |
Phông chữ đóng một vai trò rất quan trọng trong việc làm cho một trang web thân thiện hơn với người dùng và tăng khả năng đọc nội dung. Khuôn mặt và màu sắc phông chữ phụ thuộc hoàn toàn vào máy tính và trình duyệt đang được sử dụng để xem trang của bạn nhưng bạn có thể sử dụng HTML<font>để thêm kiểu, kích thước và màu sắc cho văn bản trên trang web của bạn. Bạn có thể sử dụng một<basefont> để đặt tất cả văn bản của bạn có cùng kích thước, khuôn mặt và màu sắc.
Thẻ phông chữ có ba thuộc tính được gọi là size, colorvà faceđể tùy chỉnh phông chữ của bạn. Để thay đổi bất kỳ thuộc tính phông chữ bất kỳ lúc nào trong trang web của bạn, chỉ cần sử dụng thẻ <font>. Văn bản theo sau sẽ vẫn thay đổi cho đến khi bạn đóng bằng thẻ </font>. Bạn có thể thay đổi một hoặc tất cả các thuộc tính phông chữ trong một thẻ <font>.
Note−Các thẻ phông chữ và thẻ basefont không được dùng nữa và nó sẽ bị xóa trong phiên bản HTML trong tương lai. Vì vậy, chúng không nên được sử dụng thay vào đó, bạn nên sử dụng các kiểu CSS để thao tác với phông chữ của bạn. Nhưng vẫn nhằm mục đích học tập, chương này sẽ giải thích chi tiết về các thẻ font và basefont.
Đặt kích thước phông chữ
Bạn có thể đặt kích thước phông chữ nội dung bằng cách sử dụng sizethuộc tính. Phạm vi giá trị được chấp nhận là từ 1 (nhỏ nhất) đến 7 (lớn nhất). Kích thước mặc định của phông chữ là 3.
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>Setting Font Size</title>
</head>
<body>
<font size = "1">Font size = "1"</font><br />
<font size = "2">Font size = "2"</font><br />
<font size = "3">Font size = "3"</font><br />
<font size = "4">Font size = "4"</font><br />
<font size = "5">Font size = "5"</font><br />
<font size = "6">Font size = "6"</font><br />
<font size = "7">Font size = "7"</font>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Kích thước phông chữ tương đối
Bạn có thể chỉ định bao nhiêu kích thước lớn hơn hoặc bao nhiêu kích thước nhỏ hơn kích thước phông chữ đặt trước. Bạn có thể chỉ định nó như<font size = "+n"> hoặc là <font size = "−n">
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>Relative Font Size</title>
</head>
<body>
<font size = "-1">Font size = "-1"</font><br />
<font size = "+1">Font size = "+1"</font><br />
<font size = "+2">Font size = "+2"</font><br />
<font size = "+3">Font size = "+3"</font><br />
<font size = "+4">Font size = "+4"</font>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Đặt mặt phông chữ
Bạn có thể đặt khuôn mặt phông chữ bằng thuộc tính khuôn mặt nhưng lưu ý rằng nếu người dùng đang xem trang không được cài đặt phông chữ, họ sẽ không thể nhìn thấy nó. Thay vào đó, người dùng sẽ thấy mặt phông chữ mặc định áp dụng cho máy tính của người dùng.
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>Font Face</title>
</head>
<body>
<font face = "Times New Roman" size = "5">Times New Roman</font><br />
<font face = "Verdana" size = "5">Verdana</font><br />
<font face = "Comic sans MS" size =" 5">Comic Sans MS</font><br />
<font face = "WildWest" size = "5">WildWest</font><br />
<font face = "Bedrock" size = "5">Bedrock</font><br />
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Chỉ định các mặt phông chữ thay thế
Khách truy cập sẽ chỉ có thể thấy phông chữ của bạn nếu họ đã cài đặt phông chữ đó trên máy tính của họ. Vì vậy, có thể chỉ định hai hoặc nhiều lựa chọn thay thế mặt phông chữ bằng cách liệt kê tên mặt phông chữ, được phân tách bằng dấu phẩy.
<font face = "arial,helvetica">
<font face = "Lucida Calligraphy,Comic Sans MS,Lucida Console">Khi trang của bạn được tải, trình duyệt của họ sẽ hiển thị mặt phông chữ đầu tiên có sẵn. Nếu không có phông chữ nhất định nào được cài đặt, thì nó sẽ hiển thị phông chữ mặc định là Times New Roman .
Note - Kiểm tra danh sách đầy đủ HTML Standard Fonts.
Setting Font Color
You can set any font color you like using color attribute. You can specify the color that you want by either the color name or hexadecimal code for that color.
Note − You can check a complete list of HTML Color Name with Codes.
Example
<!DOCTYPE html>
<html>
<head>
<title>Setting Font Color</title>
</head>
<body>
<font color = "#FF00FF">This text is in pink</font><br />
<font color = "red">This text is red</font>
</body>
</html>This will produce the following result −
The <basefont> Element
The <basefont> element is supposed to set a default font size, color, and typeface for any parts of the document that are not otherwise contained within a <font> tag. You can use the <font> elements to override the <basefont> settings.
The <basefont> tag also takes color, size and face attributes and it will support relative font setting by giving size a value of +1 for a size larger or −2 for two sizes smaller.
Example
<!DOCTYPE html>
<html>
<head>
<title>Setting Basefont Color</title>
</head>
<body>
<basefont face = "arial, verdana, sans-serif" size = "2" color = "#ff0000">
<p>This is the page's default font.</p>
<h2>Example of the <basefont> Element</h2>
<p><font size = "+2" color = "darkgray">
This is darkgray text with two sizes larger
</font>
</p>
<p><font face = "courier" size = "-1" color = "#000000">
It is a courier font, a size smaller and black in color.
</font>
</p>
</body>
</html>This will produce the following result −
HTML Forms are required, when you want to collect some data from the site visitor. For example, during user registration you would like to collect information such as name, email address, credit card, etc.
A form will take input from the site visitor and then will post it to a back-end application such as CGI, ASP Script or PHP script etc. The back-end application will perform required processing on the passed data based on defined business logic inside the application.
There are various form elements available like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.
The HTML <form> tag is used to create an HTML form and it has following syntax −
<form action = "Script URL" method = "GET|POST">
form elements like input, textarea etc.
</form>Form Attributes
Apart from common attributes, following is a list of the most frequently used form attributes −
| Sr.No | Thuộc tính & Mô tả |
|---|---|
| 1 | action Tập lệnh phụ trợ đã sẵn sàng để xử lý dữ liệu đã chuyển của bạn. |
| 2 | method Phương pháp được sử dụng để tải lên dữ liệu. Thường được sử dụng nhất là phương thức GET và POST. |
| 3 | target Chỉ định cửa sổ hoặc khung đích nơi kết quả của tập lệnh sẽ được hiển thị. Nó nhận các giá trị như _blank, _self, _parent, v.v. |
| 4 | enctype Bạn có thể sử dụng thuộc tính enctype để chỉ định cách trình duyệt mã hóa dữ liệu trước khi nó gửi đến máy chủ. Giá trị có thể là - application/x-www-form-urlencoded - Đây là phương pháp tiêu chuẩn mà hầu hết các biểu mẫu sử dụng trong các tình huống đơn giản. mutlipart/form-data - Điều này được sử dụng khi bạn muốn tải lên dữ liệu nhị phân ở dạng tệp như hình ảnh, tệp word, v.v. |
Note- Bạn có thể tham khảo Perl & CGI để biết chi tiết về cách hoạt động của tải lên dữ liệu biểu mẫu.
Kiểm soát biểu mẫu HTML
Có nhiều loại điều khiển biểu mẫu khác nhau mà bạn có thể sử dụng để thu thập dữ liệu bằng biểu mẫu HTML -
- Điều khiển nhập văn bản
- Kiểm soát hộp kiểm
- Điều khiển hộp radio
- Chọn điều khiển hộp
- Hộp chọn tệp
- Kiểm soát ẩn
- Các nút có thể nhấp
- Nút Gửi và Đặt lại
Điều khiển nhập văn bản
Có ba kiểu nhập văn bản được sử dụng trên biểu mẫu -
Single-line text input controls- Điều khiển này được sử dụng cho các mục chỉ yêu cầu một dòng nhập của người dùng, chẳng hạn như hộp tìm kiếm hoặc tên. Chúng được tạo bằng HTML<input> nhãn.
Password input controls- Đây cũng là kiểu nhập văn bản một dòng nhưng nó che đi ký tự ngay khi người dùng nhập vào. Chúng cũng được tạo bằng thẻ HTMl <input>.
Multi-line text input controls- Điều này được sử dụng khi người dùng được yêu cầu cung cấp các chi tiết có thể dài hơn một câu đơn lẻ. Các điều khiển đầu vào nhiều dòng được tạo bằng HTML<textarea> nhãn.
Các điều khiển nhập văn bản một dòng
Điều khiển này được sử dụng cho các mục chỉ yêu cầu một dòng nhập của người dùng, chẳng hạn như hộp tìm kiếm hoặc tên. Chúng được tạo bằng thẻ HTML <input>.
Thí dụ
Đây là một ví dụ cơ bản về kiểu nhập văn bản một dòng được sử dụng để lấy tên và họ -
<!DOCTYPE html>
<html>
<head>
<title>Text Input Control</title>
</head>
<body>
<form >
First name: <input type = "text" name = "first_name" />
<br>
Last name: <input type = "text" name = "last_name" />
</form>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Thuộc tính
Sau đây là danh sách các thuộc tính cho thẻ <input> để tạo trường văn bản.
| Sr.No | Thuộc tính & Mô tả |
|---|---|
| 1 | type Cho biết loại điều khiển nhập liệu và đối với điều khiển nhập văn bản, nó sẽ được đặt thành text. |
| 2 | name Được sử dụng để đặt tên cho điều khiển được gửi đến máy chủ để được nhận dạng và nhận giá trị. |
| 3 | value Điều này có thể được sử dụng để cung cấp một giá trị ban đầu bên trong điều khiển. |
| 4 | size Cho phép chỉ định độ rộng của điều khiển nhập văn bản theo ký tự. |
| 5 | maxlength Cho phép chỉ định số ký tự tối đa mà người dùng có thể nhập vào hộp văn bản. |
Kiểm soát nhập mật khẩu
Đây cũng là kiểu nhập văn bản một dòng nhưng nó che dấu ký tự ngay khi người dùng nhập. Chúng cũng được tạo bằng thẻ HTML <input> nhưng thuộc tính type được đặt thànhpassword.
Thí dụ
Đây là một ví dụ cơ bản về kiểu nhập mật khẩu một dòng được sử dụng để lấy mật khẩu của người dùng -
<!DOCTYPE html>
<html>
<head>
<title>Password Input Control</title>
</head>
<body>
<form >
User ID : <input type = "text" name = "user_id" />
<br>
Password: <input type = "password" name = "password" />
</form>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Thuộc tính
Sau đây là danh sách các thuộc tính cho thẻ <input> để tạo trường mật khẩu.
| Sr.No | Thuộc tính & Mô tả |
|---|---|
| 1 | type Cho biết loại kiểm soát đầu vào và đối với kiểm soát nhập bằng mật khẩu, nó sẽ được đặt thành password. |
| 2 | name Được sử dụng để đặt tên cho điều khiển được gửi đến máy chủ để được nhận dạng và nhận giá trị. |
| 3 | value Điều này có thể được sử dụng để cung cấp một giá trị ban đầu bên trong điều khiển. |
| 4 | size Cho phép chỉ định độ rộng của điều khiển nhập văn bản theo ký tự. |
| 5 | maxlength Cho phép chỉ định số ký tự tối đa mà người dùng có thể nhập vào hộp văn bản. |
Điều khiển nhập văn bản nhiều dòng
Điều này được sử dụng khi người dùng được yêu cầu cung cấp các chi tiết có thể dài hơn một câu đơn lẻ. Các điều khiển đầu vào nhiều dòng được tạo bằng thẻ HTML <textareosystem.
Thí dụ
Đây là một ví dụ cơ bản về kiểu nhập văn bản nhiều dòng được sử dụng để lấy mô tả mặt hàng -
<!DOCTYPE html>
<html>
<head>
<title>Multiple-Line Input Control</title>
</head>
<body>
<form>
Description : <br />
<textarea rows = "5" cols = "50" name = "description">
Enter description here...
</textarea>
</form>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Thuộc tính
Sau đây là danh sách các thuộc tính cho thẻ <textareosystem.
| Sr.No | Thuộc tính & Mô tả |
|---|---|
| 1 | name Được sử dụng để đặt tên cho điều khiển được gửi đến máy chủ để được nhận dạng và nhận giá trị. |
| 2 | rows Cho biết số hàng của hộp vùng văn bản. |
| 3 | cols Cho biết số cột của hộp vùng văn bản |
Kiểm soát hộp kiểm
Hộp kiểm được sử dụng khi bắt buộc phải chọn nhiều tùy chọn. Chúng cũng được tạo bằng thẻ HTML <input> nhưng thuộc tính type được đặt thànhcheckbox..
Thí dụ
Đây là mã HTML mẫu cho biểu mẫu có hai hộp kiểm -
<!DOCTYPE html>
<html>
<head>
<title>Checkbox Control</title>
</head>
<body>
<form>
<input type = "checkbox" name = "maths" value = "on"> Maths
<input type = "checkbox" name = "physics" value = "on"> Physics
</form>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Thuộc tính
Sau đây là danh sách các thuộc tính cho thẻ <checkbox>.
| Sr.No | Thuộc tính & Mô tả |
|---|---|
| 1 | type Cho biết loại điều khiển đầu vào và đối với điều khiển đầu vào hộp kiểm, nó sẽ được đặt thành checkbox.. |
| 2 | name Được sử dụng để đặt tên cho điều khiển được gửi đến máy chủ để được nhận dạng và nhận giá trị. |
| 3 | value Giá trị sẽ được sử dụng nếu hộp kiểm được chọn. |
| 4 | checked Thiết lập để kiểm tra nếu bạn muốn chọn nó bằng cách mặc định. |
Điều khiển nút radio
Các nút radio được sử dụng khi trong số nhiều tùy chọn, chỉ cần chọn một tùy chọn. Chúng cũng được tạo bằng thẻ HTML <input> nhưng thuộc tính type được đặt thànhradio.
Thí dụ
Đây là mã HTML mẫu cho biểu mẫu có hai nút radio -
<!DOCTYPE html>
<html>
<head>
<title>Radio Box Control</title>
</head>
<body>
<form>
<input type = "radio" name = "subject" value = "maths"> Maths
<input type = "radio" name = "subject" value = "physics"> Physics
</form>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Thuộc tính
Sau đây là danh sách các thuộc tính cho nút radio.
| Sr.No | Thuộc tính & Mô tả |
|---|---|
| 1 | type Cho biết loại điều khiển đầu vào và đối với điều khiển đầu vào hộp kiểm, nó sẽ được đặt thành radio. |
| 2 | name Được sử dụng để đặt tên cho điều khiển được gửi đến máy chủ để được nhận dạng và nhận giá trị. |
| 3 | value Giá trị sẽ được sử dụng nếu hộp radio được chọn. |
| 4 | checked Thiết lập để kiểm tra nếu bạn muốn chọn nó bằng cách mặc định. |
Chọn điều khiển hộp
Một hộp chọn, còn được gọi là hộp thả xuống cung cấp tùy chọn để liệt kê các tùy chọn khác nhau dưới dạng danh sách thả xuống, từ đó người dùng có thể chọn một hoặc nhiều tùy chọn.
Thí dụ
Đây là mã HTML mẫu cho biểu mẫu có một hộp thả xuống
<!DOCTYPE html>
<html>
<head>
<title>Select Box Control</title>
</head>
<body>
<form>
<select name = "dropdown">
<option value = "Maths" selected>Maths</option>
<option value = "Physics">Physics</option>
</select>
</form>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Thuộc tính
Sau đây là danh sách các thuộc tính quan trọng của thẻ <select> -
| Sr.No | Thuộc tính & Mô tả |
|---|---|
| 1 | name Được sử dụng để đặt tên cho điều khiển được gửi đến máy chủ để được nhận dạng và nhận giá trị. |
| 2 | size Điều này có thể được sử dụng để trình bày một hộp danh sách cuộn. |
| 3 | multiple Nếu được đặt thành "nhiều" thì cho phép người dùng chọn nhiều mục từ menu. |
Sau đây là danh sách các thuộc tính quan trọng của thẻ <option> -
| Sr.No | Thuộc tính & Mô tả |
|---|---|
| 1 | value Giá trị sẽ được sử dụng nếu một tùy chọn trong hộp hộp chọn được chọn. |
| 2 | selected Chỉ định rằng tùy chọn này phải là giá trị được chọn ban đầu khi tải trang. |
| 3 | label Một cách thay thế các tùy chọn dán nhãn |
Hộp Tải lên Tệp
Nếu bạn muốn cho phép người dùng tải tệp lên trang web của mình, bạn sẽ cần sử dụng hộp tải tệp lên, còn được gọi là hộp chọn tệp. Điều này cũng được tạo bằng cách sử dụng phần tử <input> nhưng thuộc tính type được đặt thànhfile.
Thí dụ
Đây là mã HTML mẫu cho biểu mẫu có một hộp tải tệp lên -
<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<input type = "file" name = "fileupload" accept = "image/*" />
</form>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Thuộc tính
Sau đây là danh sách các thuộc tính quan trọng của hộp tải tệp lên:
| Sr.No | Thuộc tính & Mô tả |
|---|---|
| 1 | name Được sử dụng để đặt tên cho điều khiển được gửi đến máy chủ để được nhận dạng và nhận giá trị. |
| 2 | accept Chỉ định loại tệp mà máy chủ chấp nhận. |
Nút điều khiển
Có nhiều cách khác nhau trong HTML để tạo các nút có thể nhấp. Bạn cũng có thể tạo nút có thể nhấp bằng thẻ <input> bằng cách đặt thuộc tính loại của nó thànhbutton. Thuộc tính type có thể nhận các giá trị sau:
| Sr.No | Loại & Mô tả |
|---|---|
| 1 | submit Điều này tạo ra một nút tự động gửi biểu mẫu. |
| 2 | reset Điều này tạo ra một nút tự động đặt lại các điều khiển biểu mẫu về giá trị ban đầu của chúng. |
| 3 | button Điều này tạo ra một nút được sử dụng để kích hoạt tập lệnh phía máy khách khi người dùng nhấp vào nút đó. |
| 4 | image Điều này tạo ra một nút có thể nhấp được nhưng chúng ta có thể sử dụng hình ảnh làm nền của nút. |
Thí dụ
Đây là mã HTML mẫu cho một biểu mẫu có ba loại nút -
<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<input type = "submit" name = "submit" value = "Submit" />
<input type = "reset" name = "reset" value = "Reset" />
<input type = "button" name = "ok" value = "OK" />
<input type = "image" name = "imagebutton" src = "/html/images/logo.png" />
</form>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Kiểm soát biểu mẫu ẩn
Các điều khiển biểu mẫu ẩn được sử dụng để ẩn dữ liệu bên trong trang mà sau này có thể được đẩy lên máy chủ. Điều khiển này ẩn bên trong mã và không xuất hiện trên trang thực tế. Ví dụ, biểu mẫu ẩn sau đang được sử dụng để giữ số trang hiện tại. Khi người dùng nhấp vào trang tiếp theo thì giá trị của điều khiển ẩn sẽ được gửi đến máy chủ web và ở đó nó sẽ quyết định trang nào sẽ được hiển thị tiếp theo dựa trên trang hiện tại đã qua.
Thí dụ
Đây là mã HTML mẫu để hiển thị việc sử dụng điều khiển ẩn -
<!DOCTYPE html>
<html>
<head>
<title>File Upload Box</title>
</head>
<body>
<form>
<p>This is page 10</p>
<input type = "hidden" name = "pagename" value = "10" />
<input type = "submit" name = "submit" value = "Submit" />
<input type = "reset" name = "reset" value = "Reset" />
</form>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Đôi khi bạn cần thêm nhạc hoặc video vào trang web của mình. Cách dễ nhất để thêm video hoặc âm thanh vào trang web của bạn là bao gồm thẻ HTML đặc biệt có tên<embed>. Thẻ này khiến chính trình duyệt bao gồm các điều khiển cho trình duyệt được cung cấp tự động đa phương tiện, hỗ trợ thẻ <embed> và loại phương tiện nhất định.
Bạn cũng có thể bao gồm một <noembed>cho các trình duyệt không nhận ra thẻ <embed>. Ví dụ: bạn có thể sử dụng <embed> để hiển thị một bộ phim bạn chọn và<noembed> để hiển thị một hình ảnh JPG nếu trình duyệt không hỗ trợ thẻ <embed>.
Thí dụ
Đây là một ví dụ đơn giản để phát một tệp midi được nhúng -
<!DOCTYPE html>
<html>
<head>
<title>HTML embed Tag</title>
</head>
<body>
<embed src = "/html/yourfile.mid" width = "100%" height = "60" >
<noembed><img src = "yourimage.gif" alt = "Alternative Media" ></noembed>
</embed>
</body>
</html>Thuộc tính thẻ <embed>
Sau đây là danh sách các thuộc tính quan trọng có thể được sử dụng với thẻ <embed>.
Note−Các thuộc tính căn chỉnh và tự động khởi động không được dùng trong HTML5. Không sử dụng các thuộc tính này.
| Sr.No | Thuộc tính & Mô tả |
|---|---|
| 1 | align Xác định cách căn chỉnh đối tượng. Nó có thể được đặt ở giữa, trái hoặc phải . |
| 2 | autostart Thuộc tính boolean này cho biết liệu phương tiện có nên tự động khởi động hay không. Bạn có thể đặt nó đúng hoặc sai. |
| 3 | loop Chỉ định xem âm thanh có nên được phát liên tục (đặt vòng lặp thành true), một số lần nhất định (giá trị dương) hay không (sai) |
| 4 | playcount Chỉ định số lần phát âm thanh. Đây là tùy chọn thay thế cho vòng lặp nếu bạn đang sử dụng IE. |
| 5 | hidden Chỉ định xem đối tượng đa phương tiện có được hiển thị trên trang hay không. Giá trị sai có nghĩa là không và giá trị đúng có nghĩa là có. |
| 6 | width Chiều rộng của đối tượng tính bằng pixel |
| 7 | height Chiều cao của đối tượng tính bằng pixel |
| số 8 | name Tên được sử dụng để tham chiếu đối tượng. |
| 9 | src URL của đối tượng được nhúng. |
| 10 | volume Kiểm soát âm lượng của âm thanh. Có thể từ 0 (tắt) đến 100 (toàn bộ âm lượng). |
Các loại video được hỗ trợ
Bạn có thể sử dụng nhiều loại phương tiện khác nhau như phim Flash (.swf), AVI (.avi) và các loại tệp MOV (.mov) bên trong thẻ nhúng.
.swf files - là các loại tệp được tạo bởi chương trình Flash của Macromedia.
.wmv files - là các loại tệp Video Media Window của Microsoft.
.mov files - là định dạng Phim thời gian nhanh của Apple.
.mpeg files - là các tệp phim được tạo bởi Nhóm Chuyên gia Hình ảnh Động.
<!DOCTYPE html>
<html>
<head>
<title>HTML embed Tag</title>
</head>
<body>
<embed src = "/html/yourfile.swf" width = "200" height = "200" >
<noembed><img src = "yourimage.gif" alt = "Alternative Media" ></noembed>
</embed>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Âm thanh nền
Bạn có thể sử dụng HTML <bgsound>để phát nhạc nền trong trang web của bạn. Thẻ này chỉ được hỗ trợ bởi Internet Explorer và hầu hết các trình duyệt khác đều bỏ qua thẻ này. Nó tải xuống và phát một tệp âm thanh khi tài liệu lưu trữ được người dùng tải xuống lần đầu tiên và hiển thị. Tệp âm thanh nền cũng sẽ phát lại bất cứ khi nào người dùng làm mới trình duyệt.
Note- Thẻ bgsound không được dùng nữa và nó sẽ bị xóa trong phiên bản HTML trong tương lai. Vì vậy, chúng không nên được sử dụng thay vào đó, bạn nên sử dụng âm thanh thẻ HTML5 để thêm âm thanh. Nhưng vẫn nhằm mục đích học tập, chương này sẽ giải thích chi tiết về thẻ bgsound.
Thẻ này chỉ có hai vòng lặp thuộc tính và src . Cả hai thuộc tính này đều có cùng ý nghĩa như đã giải thích ở trên.
Đây là một ví dụ đơn giản để phát một tệp midi nhỏ -
<!DOCTYPE html>
<html>
<head>
<title>HTML embed Tag</title>
</head>
<body>
<bgsound src = "/html/yourfile.mid">
<noembed><img src = "yourimage.gif" ></noembed>
</bgsound>
</body>
</html>Điều này sẽ tạo ra màn hình trống. Thẻ này không hiển thị bất kỳ thành phần nào và vẫn bị ẩn.
Internet Explorer cũng chỉ có thể xử lý ba tệp định dạng âm thanh khác nhau - wav, định dạng gốc dành cho PC; au, định dạng gốc cho hầu hết các máy trạm Unix; và MIDI, một chương trình mã hóa âm nhạc phổ quát.
Thẻ đối tượng HTML
HTML 4 giới thiệu <object>, cung cấp một giải pháp đa năng để đưa vào đối tượng chung. Các<object> phần tử cho phép các tác giả HTML chỉ định mọi thứ theo yêu cầu của một đối tượng cho bản trình bày của nó bởi tác nhân người dùng.
Dưới đây là một vài ví dụ -
Ví dụ 1
Bạn có thể nhúng tài liệu HTML vào chính tài liệu HTML như sau:
<object data = "data/test.htm" type = "text/html" width = "300" height = "200">
alt : <a href = "data/test.htm">test.htm</a>
</object>Ở đây thuộc tính alt sẽ xuất hiện nếu trình duyệt không hỗ trợ thẻ đối tượng .
Ví dụ - 2
Bạn có thể nhúng tài liệu PDF vào tài liệu HTML như sau:
<object data = "data/test.pdf" type = "application/pdf" width = "300" height = "200">
alt : <a href = "data/test.pdf">test.htm</a>
</object>Ví dụ - 3
Bạn có thể chỉ định một số tham số liên quan đến tài liệu với <param>nhãn. Đây là một ví dụ để nhúng tệp wav -
<object data = "data/test.wav" type = "audio/x-wav" width = "200" height = "20">
<param name = "src" value = "data/test.wav">
<param name = "autoplay" value = "false">
<param name = "autoStart" value = "0">
alt : <a href = "data/test.wav">test.wav</a>
</object>Ví dụ - 4
Bạn có thể thêm một tài liệu flash như sau:
<object classid = "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id = "penguin"
codebase = "someplace/swflash.cab" width = "200" height = "300">
<param name = "movie" value = "flash/penguin.swf" />
<param name = "quality" value = "high" />
<img src = "penguin.jpg" width = "200" height = "300" alt = "Penguin" />
</object>Ví dụ - 5
Bạn có thể thêm một applet java vào tài liệu HTML như sau:
<object classid = "clsid:8ad9c840-044e-11d1-b3e9-00805f499d93"
width = "200" height = "200">
<param name = "code" value = "applet.class">
</object>Các classidthuộc tính xác định phiên bản Trình cắm Java nào sẽ sử dụng. Bạn có thể sử dụng thuộc tính codebase tùy chọn để chỉ định nếu và cách tải xuống JRE.
Bảng điều khiển HTML là một đoạn văn bản cuộn được hiển thị theo chiều ngang hoặc chiều dọc xuống trang web của bạn tùy thuộc vào cài đặt. Điều này được tạo bằng cách sử dụng thẻ HTML <marquees>.
Note- Thẻ <marquee> không được dùng trong HTML5. Không sử dụng phần tử này, thay vào đó bạn có thể sử dụng JavaScript và CSS để tạo các hiệu ứng như vậy.
Cú pháp
Một cú pháp đơn giản để sử dụng thẻ HTML <marquee> như sau:
<marquee attribute_name = "attribute_value"....more attributes>
One or more lines or text message or image
</marquee>Thuộc tính thẻ <marquee>
Sau đây là danh sách các thuộc tính quan trọng có thể được sử dụng với thẻ <marquee>.
| Sr.No | Thuộc tính & Mô tả |
|---|---|
| 1 | width Điều này chỉ định chiều rộng của vùng chọn. Đây có thể là một giá trị như 10 hoặc 20%, v.v. |
| 2 | height Điều này chỉ định chiều cao của vùng chọn. Đây có thể là một giá trị như 10 hoặc 20%, v.v. |
| 3 | direction Điều này chỉ định hướng mà bảng điều khiển sẽ cuộn. Đây có thể là một giá trị như lên, xuống, trái hoặc phải . |
| 4 | behavior Điều này chỉ định kiểu cuộn của vùng điều khiển. Điều này có thể có một giá trị như cuộn, trang chiếu và thay thế . |
| 5 | scrolldelay Điều này chỉ định khoảng thời gian trì hoãn giữa mỗi lần nhảy. Điều này sẽ có giá trị như 10, v.v. |
| 6 | scrollamount Điều này chỉ định tốc độ của văn bản marquee. Giá trị này có thể có giá trị như 10, v.v. |
| 7 | loop Điều này chỉ định số lần lặp lại. Giá trị mặc định là INFINITE, có nghĩa là bảng điều khiển lặp lại liên tục. |
| số 8 | bgcolor Điều này chỉ định màu nền dưới dạng tên màu hoặc giá trị hex màu. |
| 9 | hspace Điều này chỉ định không gian ngang xung quanh vùng chọn. Đây có thể là một giá trị như 10 hoặc 20%, v.v. |
| 10 | vspace Điều này chỉ định không gian dọc xung quanh vùng chọn. Đây có thể là một giá trị như 10 hoặc 20%, v.v. |
Dưới đây là một số ví dụ để chứng minh việc sử dụng thẻ marquee.
Ví dụ - 1
<!DOCTYPE html>
<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body>
<marquee>This is basic example of marquee</marquee>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Ví dụ - 2
<!DOCTYPE html>
<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body>
<marquee width = "50%">This example will take only 50% width</marquee>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Ví dụ - 3
<!DOCTYPE html>
<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body>
<marquee direction = "right">This text will scroll from left to right</marquee>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Ví dụ - 4
<!DOCTYPE html>
<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body>
<marquee direction = "up">This text will scroll from bottom to up</marquee>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Chúng tôi đã biết rằng một tài liệu HTML điển hình sẽ có cấu trúc sau:
Document declaration tag
<html>
<head>
Document header related tags
</head>
<body>
Document body related tags
</body>
</html>Chương này sẽ cung cấp thêm một chút chi tiết về phần tiêu đề được thể hiện bằng thẻ HTML <head>. Thẻ <head> là một vùng chứa các thẻ quan trọng khác nhau như thẻ <title>, <meta>, <link>, <base>, <style>, <script> và <noscript>.
Thẻ HTML <title>
Thẻ HTML <title> được sử dụng để chỉ định tiêu đề của tài liệu HTML. Sau đây là một ví dụ để đặt tiêu đề cho một tài liệu HTML:
<!DOCTYPE html>
<html>
<head>
<title>HTML Title Tag Example</title>
</head>
<body>
<p>Hello, World!</p>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Thẻ HTML <meta>
Thẻ HTML <meta> được sử dụng để cung cấp siêu dữ liệu về tài liệu HTML bao gồm thông tin về thời hạn trang, tác giả trang, danh sách từ khóa, mô tả trang, v.v.
Sau đây là một số cách sử dụng quan trọng của thẻ <meta> bên trong tài liệu HTML:
<!DOCTYPE html>
<html>
<head>
<title>HTML Meta Tag Example</title>
<!-- Provide list of keywords -->
<meta name = "keywords" content = "C, C++, Java, PHP, Perl, Python">
<!-- Provide description of the page -->
<meta name = "description" content = "Simply Easy Learning by Tutorials Point">
<!-- Author information -->
<meta name = "author" content = "Tutorials Point">
<!-- Page content type -->
<meta http-equiv = "content-type" content = "text/html; charset = UTF-8">
<!-- Page refreshing delay -->
<meta http-equiv = "refresh" content = "30">
<!-- Page expiry -->
<meta http-equiv = "expires" content = "Wed, 21 June 2006 14:25:27 GMT">
<!-- Tag to tell robots not to index the content of a page -->
<meta name = "robots" content = "noindex, nofollow">
</head>
<body>
<p>Hello, World!</p>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Thẻ HTML <base>
Thẻ HTML <base> được sử dụng để chỉ định URL cơ sở cho tất cả các URL tương đối trong một trang, có nghĩa là tất cả các URL khác sẽ được nối thành URL cơ sở trong khi định vị cho mục nhất định.
Ví dụ: tất cả các trang và hình ảnh nhất định sẽ được tìm kiếm sau khi thêm tiền tố vào các URL đã cho với thư mục http://www.tutorialspoint.com/ URL cơ sở -
<!DOCTYPE html>
<html>
<head>
<title>HTML Base Tag Example</title>
<base href = "https://www.tutorialspoint.com/" />
</head>
<body>
<img src = "/images/logo.png" alt = "Logo Image"/>
<a href = "/html/index.htm" title = "HTML Tutorial"/>HTML Tutorial</a>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Nhưng nếu bạn thay đổi URL cơ sở thành một thứ khác, ví dụ: nếu URL cơ sở là http://www.tutorialspoint.com/home thì hình ảnh và các liên kết đã cho khác sẽ trở thành http://www.tutorialspoint.com/home/images /logo.png và http://www.tutorialspoint.com/html/index.htm
Thẻ <link> HTML
Thẻ HTML <link> được sử dụng để chỉ định mối quan hệ giữa tài liệu hiện tại và tài nguyên bên ngoài. Sau đây là một ví dụ để liên kết tệp biểu định kiểu bên ngoài có sẵn trongcss thư mục con bên trong gốc web -
<!DOCTYPE html>
<html>
<head>
<title>HTML link Tag Example</title>
<base href = "https://www.tutorialspoint.com/" />
<link rel = "stylesheet" type = "text/css" href = "/css/style.css">
</head>
<body>
<p>Hello, World!</p>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Thẻ HTML <style>
Thẻ HTML <style> được sử dụng để chỉ định biểu định kiểu cho tài liệu HTML hiện tại. Sau đây là một ví dụ để xác định một số quy tắc biểu định kiểu bên trong thẻ <style> -
<!DOCTYPE html>
<html>
<head>
<title>HTML style Tag Example</title>
<base href = "https://www.tutorialspoint.com/" />
<style type = "text/css">
.myclass {
background-color: #aaa;
padding: 10px;
}
</style>
</head>
<body>
<p class = "myclass">Hello, World!</p>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Note- Để tìm hiểu về cách Cascading Style Sheet hoạt động, vui lòng xem một hướng dẫn riêng có sẵn tại css
Thẻ HTML <script>
Thẻ HTML <script> được sử dụng để bao gồm tệp kịch bản bên ngoài hoặc để xác định tập lệnh nội bộ cho tài liệu HTML. Sau đây là một ví dụ mà chúng tôi đang sử dụng JavaScript để xác định một hàm JavaScript đơn giản:
<!DOCTYPE html>
<html>
<head>
<title>HTML script Tag Example</title>
<base href = "http://www.tutorialspoint.com/" />
<script type = "text/JavaScript">
function Hello() {
alert("Hello, World");
}
</script>
</head>
<body>
<input type = "button" onclick = "Hello();" name = "ok" value = "OK" />
</body>
</html>Điều này sẽ tạo ra kết quả sau, nơi bạn có thể thử nhấp vào nút đã cho -
Note- Để tìm hiểu về cách hoạt động của JavaScript, vui lòng xem một hướng dẫn riêng có sẵn tại javascript
Cascading Style Sheets (CSS) mô tả cách tài liệu được trình bày trên màn hình, trong bản in hoặc có thể là cách chúng được phát âm. W3C đã tích cực thúc đẩy việc sử dụng các biểu định kiểu trên Web kể từ khi tập đoàn được thành lập vào năm 1994.
Cascading Style Sheets (CSS) cung cấp các lựa chọn thay thế dễ dàng và hiệu quả để chỉ định các thuộc tính khác nhau cho các thẻ HTML. Sử dụng CSS, bạn có thể chỉ định một số thuộc tính kiểu cho một phần tử HTML nhất định. Mỗi thuộc tính có tên và giá trị, được phân tách bằng dấu hai chấm (:). Mỗi khai báo thuộc tính được phân tách bằng dấu chấm phẩy (;).
Thí dụ
Trước tiên, hãy xem xét một ví dụ về tài liệu HTML sử dụng thẻ <font> và các thuộc tính liên quan để chỉ định màu văn bản và kích thước phông chữ -
Note- Thẻ phông chữ không được dùng nữa và nó sẽ bị xóa trong phiên bản HTML trong tương lai. Vì vậy, chúng không nên được sử dụng thay vào đó, bạn nên sử dụng các kiểu CSS để thao tác với phông chữ của bạn. Nhưng vẫn nhằm mục đích học tập, chương này sẽ làm việc với một ví dụ sử dụng thẻ phông chữ.
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS</title>
</head>
<body>
<p><font color = "green" size = "5">Hello, World!</font></p>
</body>
</html>Chúng ta có thể viết lại ví dụ trên với sự trợ giúp của Style Sheet như sau:
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS</title>
</head>
<body>
<p style = "color:green; font-size:24px;" >Hello, World!</p>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Bạn có thể sử dụng CSS theo ba cách trong tài liệu HTML của mình -
External Style Sheet - Xác định quy tắc biểu định kiểu trong một tệp .css riêng biệt và sau đó đưa tệp đó vào tài liệu HTML của bạn bằng cách sử dụng thẻ HTML <link>.
Internal Style Sheet - Xác định quy tắc biểu định kiểu trong phần tiêu đề của tài liệu HTML bằng thẻ <style>.
Inline Style Sheet - Xác định quy tắc biểu định kiểu trực tiếp cùng với các phần tử HTML bằng cách sử dụng style thuộc tính.
Chúng ta hãy xem tất cả ba trường hợp một với sự trợ giúp của các ví dụ phù hợp.
Trang định kiểu bên ngoài
Nếu bạn cần sử dụng biểu định kiểu của mình cho các trang khác nhau, thì bạn nên xác định biểu định kiểu chung trong một tệp riêng biệt. Tệp biểu định kiểu xếp tầng sẽ có phần mở rộng là.css và nó sẽ được đưa vào các tệp HTML bằng thẻ <link>.
Thí dụ
Hãy xem xét chúng tôi xác định một tệp định kiểu style.css có các quy tắc sau -
.red {
color: red;
}
.thick {
font-size:20px;
}
.green {
color:green;
}Ở đây chúng tôi đã xác định ba quy tắc CSS sẽ áp dụng cho ba lớp khác nhau được xác định cho các thẻ HTML. Tôi khuyên bạn không nên bận tâm về cách các quy tắc này được định nghĩa bởi vì bạn sẽ học chúng trong khi nghiên cứu CSS. Bây giờ hãy sử dụng tệp CSS bên ngoài ở trên trong tài liệu HTML sau của chúng tôi -
<!DOCTYPE html>
<html>
<head>
<title>HTML External CSS</title>
<link rel = "stylesheet" type = "text/css" href = "/html/style.css">
</head>
<body>
<p class = "red">This is red</p>
<p class = "thick">This is thick</p>
<p class = "green">This is green</p>
<p class = "thick green">This is thick and green</p>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Bảng kiểu nội bộ
Nếu bạn chỉ muốn áp dụng các quy tắc của Trang định kiểu cho một tài liệu, thì bạn có thể đưa các quy tắc đó vào phần tiêu đề của tài liệu HTML bằng cách sử dụng thẻ <style>.
Các quy tắc được xác định trong biểu định kiểu nội bộ sẽ ghi đè các quy tắc được xác định trong tệp CSS bên ngoài.
Thí dụ
Hãy viết lại ví dụ trên một lần nữa, nhưng ở đây chúng ta sẽ viết các quy tắc của bảng định kiểu trong cùng một tài liệu HTML bằng cách sử dụng thẻ <style> -
<!DOCTYPE html>
<html>
<head>
<title>HTML Internal CSS</title>
<style type = "text/css">
.red {
color: red;
}
.thick{
font-size:20px;
}
.green {
color:green;
}
</style>
</head>
<body>
<p class = "red">This is red</p>
<p class = "thick">This is thick</p>
<p class = "green">This is green</p>
<p class = "thick green">This is thick and green</p>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Trang kiểu nội tuyến
Bạn có thể áp dụng quy tắc biểu định kiểu trực tiếp cho bất kỳ phần tử HTML nào bằng cách sử dụng stylethuộc tính của thẻ có liên quan. Điều này chỉ nên được thực hiện khi bạn muốn thực hiện một thay đổi cụ thể chỉ trong bất kỳ phần tử HTML nào.
Các quy tắc được xác định nội dòng với phần tử sẽ ghi đè các quy tắc được xác định trong tệp CSS bên ngoài cũng như các quy tắc được xác định trong phần tử <style>.
Thí dụ
Chúng ta hãy viết lại ví dụ trên một lần nữa, nhưng ở đây chúng ta sẽ viết các quy tắc biểu định kiểu cùng với các phần tử HTML sử dụng style thuộc tính của các yếu tố đó.
<!DOCTYPE html>
<html>
<head>
<title>HTML Inline CSS</title>
</head>
<body>
<p style = "color:red;">This is red</p>
<p style = "font-size:20px;">This is thick</p>
<p style = "color:green;">This is green</p>
<p style = "color:green;font-size:20px;">This is thick and green</p>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
A scriptlà một phần nhỏ của chương trình có thể thêm tính tương tác vào trang web của bạn. Ví dụ: một tập lệnh có thể tạo thông báo hộp cảnh báo bật lên hoặc cung cấp menu thả xuống. Tập lệnh này có thể được viết bằng JavaScript hoặc VBScript.
Bạn có thể viết các hàm nhỏ khác nhau, được gọi là trình xử lý sự kiện bằng bất kỳ ngôn ngữ kịch bản nào và sau đó bạn có thể kích hoạt các hàm đó bằng các thuộc tính HTML.
Chỉ bây giờ một ngày JavaScript và các khung liên quan đang được hầu hết các nhà phát triển web sử dụng, VBScript thậm chí không được hỗ trợ bởi các trình duyệt chính khác nhau.
Bạn có thể giữ mã JavaScript trong một tệp riêng và sau đó đưa nó vào bất cứ nơi nào cần hoặc bạn có thể xác định chức năng bên trong chính tài liệu HTML. Chúng ta hãy xem từng trường hợp một với các ví dụ phù hợp.
JavaScript bên ngoài
Nếu bạn định xác định một chức năng sẽ được sử dụng trong các tài liệu HTML khác nhau thì tốt hơn nên giữ chức năng đó trong một tệp JavaScript riêng và sau đó đưa tệp đó vào tài liệu HTML của bạn. Tệp JavaScript sẽ có phần mở rộng là.js và nó sẽ được đưa vào các tệp HTML bằng thẻ <script>.
Thí dụ
Hãy xem xét chúng tôi xác định một hàm nhỏ bằng JavaScript trong script.js có mã sau -
function Hello() {
alert("Hello, World");
}Bây giờ, hãy sử dụng tệp JavaScript bên ngoài ở trên trong tài liệu HTML sau của chúng tôi -
<!DOCTYPE html>
<html>
<head>
<title>Javascript External Script</title>
<script src = "/html/script.js" type = "text/javascript"/></script>
</head>
<body>
<input type = "button" onclick = "Hello();" name = "ok" value = "Click Me" />
</body>
</html>Điều này sẽ tạo ra kết quả sau, nơi bạn có thể thử nhấp vào nút đã cho -
Tập lệnh nội bộ
Bạn có thể viết mã tập lệnh trực tiếp vào tài liệu HTML của mình. Thông thường, chúng tôi giữ mã tập lệnh trong tiêu đề của tài liệu bằng thẻ <script>, nếu không thì không có hạn chế và bạn có thể đặt mã nguồn của mình ở bất kỳ đâu trong tài liệu nhưng bên trong thẻ <script>.
Thí dụ
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Internal Script</title>
<base href = "https://www.tutorialspoint.com/" />
<script type = "text/JavaScript">
function Hello() {
alert("Hello, World");
}
</script>
</head>
<body>
<input type = "button" onclick = "Hello();" name = "ok" value = "Click Me" />
</body>
</html>Điều này sẽ tạo ra kết quả sau, nơi bạn có thể thử nhấp vào nút đã cho -
Trình xử lý sự kiện
Trình xử lý sự kiện không là gì ngoài các hàm được xác định đơn giản có thể được gọi đối với bất kỳ sự kiện chuột hoặc bàn phím nào. Bạn có thể xác định logic nghiệp vụ của mình bên trong trình xử lý sự kiện, có thể thay đổi từ một mã đến 1000 dòng.
Ví dụ sau giải thích cách viết một trình xử lý sự kiện. Hãy viết một hàm đơn giản EventHandler () trong tiêu đề của tài liệu. Chúng tôi sẽ gọi chức năng này khi bất kỳ người dùng nào đưa chuột qua một đoạn văn.
<!DOCTYPE html>
<html>
<head>
<title>Event Handlers Example</title>
<base href = "https://www.tutorialspoint.com/" />
<script type = "text/JavaScript">
function EventHandler() {
alert("I'm event handler!!");
}
</script>
</head>
<body>
<p onmouseover = "EventHandler();">Bring your mouse here to see an alert</p>
</body>
</html>Bây giờ Điều này sẽ tạo ra kết quả sau. Đưa chuột qua dòng này và xem kết quả -
Ẩn tập lệnh khỏi trình duyệt cũ hơn
Mặc dù hầu hết (nếu không phải tất cả) các trình duyệt ngày nay đều hỗ trợ JavaScript, nhưng một số trình duyệt cũ hơn thì không. Nếu một trình duyệt không hỗ trợ JavaScript, thay vì chạy tập lệnh của bạn, nó sẽ hiển thị mã cho người dùng. Để ngăn chặn điều này, bạn chỉ cần đặt các chú thích HTML xung quanh tập lệnh như được hiển thị bên dưới.
JavaScript Example:
<script type = "text/JavaScript">
<!--
document.write("Hello JavaScript!");
//-->
</script>
VBScript Example:
<script type = "text/vbscript">
<!--
document.write("Hello VBScript!")
'-->
</script>Phần tử <noscript>
Bạn cũng có thể cung cấp thông tin thay thế cho những người dùng có trình duyệt không hỗ trợ tập lệnh và cho những người dùng đã tắt tùy chọn tập lệnh trên trình duyệt của họ. Bạn có thể làm điều này bằng cách sử dụng<noscript> nhãn.
JavaScript Example:
<script type = "text/JavaScript">
<!--
document.write("Hello JavaScript!");
//-->
</script>
<noscript>Your browser does not support JavaScript!</noscript>
VBScript Example:
<script type = "text/vbscript">
<!--
document.write("Hello VBScript!")
'-->
</script>
<noscript>Your browser does not support VBScript!</noscript>Ngôn ngữ kịch bản mặc định
Có thể có một tình huống khi bạn sẽ bao gồm nhiều tệp kịch bản và cuối cùng sử dụng nhiều thẻ <script>. Bạn có thể chỉ định một ngôn ngữ kịch bản mặc định cho tất cả các thẻ tập lệnh của mình . Điều này giúp bạn không phải chỉ định ngôn ngữ mỗi khi bạn sử dụng thẻ script trong trang. Dưới đây là ví dụ -
<meta http-equiv = "Content-Script-Type" content = "text/JavaScript" />Lưu ý rằng bạn vẫn có thể ghi đè mặc định bằng cách chỉ định một ngôn ngữ trong thẻ script.
Bố cục trang web là rất quan trọng để mang lại giao diện tốt hơn cho trang web của bạn. Phải mất đáng kể thời gian để thiết kế bố cục trang web với giao diện tuyệt vời.
Ngày nay, tất cả các trang web hiện đại đang sử dụng khung dựa trên CSS và JavaScript để tạo ra các trang web đáp ứng và động nhưng bạn có thể tạo bố cục tốt bằng cách sử dụng các bảng HTML đơn giản hoặc thẻ phân chia kết hợp với các thẻ định dạng khác. Chương này sẽ cung cấp cho bạn một số ví dụ về cách tạo một bố cục đơn giản nhưng hiệu quả cho trang web của bạn bằng cách sử dụng HTML thuần túy và các thuộc tính của nó.
Bố cục HTML - Sử dụng Bảng
Cách đơn giản và phổ biến nhất để tạo bố cục là sử dụng thẻ HTML <table>. Các bảng này được sắp xếp theo cột và hàng, vì vậy bạn có thể sử dụng các hàng và cột này theo bất kỳ cách nào bạn muốn.
Thí dụ
Ví dụ: ví dụ về bố cục HTML sau đây đạt được bằng cách sử dụng bảng có 3 hàng và 2 cột nhưng cột đầu trang và chân trang kéo dài cả hai cột bằng cách sử dụng thuộc tính colspan -
<!DOCTYPE html>
<html>
<head>
<title>HTML Layout using Tables</title>
</head>
<body>
<table width = "100%" border = "0">
<tr>
<td colspan = "2" bgcolor = "#b5dcb3">
<h1>This is Web Page Main title</h1>
</td>
</tr>
<tr valign = "top">
<td bgcolor = "#aaa" width = "50">
<b>Main Menu</b><br />
HTML<br />
PHP<br />
PERL...
</td>
<td bgcolor = "#eee" width = "100" height = "200">
Technical and Managerial Tutorials
</td>
</tr>
<tr>
<td colspan = "2" bgcolor = "#b5dcb3">
<center>
Copyright © 2007 Tutorialspoint.com
</center>
</td>
</tr>
</table>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Bố cục Nhiều Cột - Sử dụng Bảng
Bạn có thể thiết kế trang web của mình để đưa nội dung web của bạn vào nhiều trang. Bạn có thể giữ nội dung của mình ở cột giữa và bạn có thể sử dụng cột bên trái để sử dụng menu và cột bên phải có thể được sử dụng để đặt quảng cáo hoặc một số nội dung khác. Bố cục này sẽ rất giống với những gì chúng ta có trên trang web tutorialspoint.com.
Thí dụ
Đây là một ví dụ để tạo bố cục ba cột -
<!DOCTYPE html>
<html>
<head>
<title>Three Column HTML Layout</title>
</head>
<body>
<table width = "100%" border = "0">
<tr valign = "top">
<td bgcolor = "#aaa" width = "20%">
<b>Main Menu</b><br />
HTML<br />
PHP<br />
PERL...
</td>
<td bgcolor = "#b5dcb3" height = "200" width = "60%">
Technical and Managerial Tutorials
</td>
<td bgcolor = "#aaa" width = "20%">
<b>Right Menu</b><br />
HTML<br />
PHP<br />
PERL...
</td>
</tr>
<table>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Bố cục HTML - Sử dụng DIV, SPAN
Phần tử <div> là phần tử mức khối được sử dụng để nhóm các phần tử HTML. Trong khi thẻ <div> là phần tử cấp khối, thì phần tử <span> HTML được sử dụng để nhóm các phần tử ở cấp nội tuyến.
Mặc dù chúng ta có thể có được những bố cục khá đẹp với các bảng HTML, nhưng các bảng không thực sự được thiết kế như một công cụ bố cục. Các bảng phù hợp hơn để trình bày dữ liệu dạng bảng.
Note - Ví dụ này sử dụng Cascading Style Sheet (CSS), vì vậy trước khi hiểu ví dụ này, bạn cần hiểu rõ hơn về cách hoạt động của CSS.
Thí dụ
Ở đây chúng tôi sẽ cố gắng đạt được kết quả tương tự bằng cách sử dụng thẻ <div> cùng với CSS, bất cứ điều gì bạn đã đạt được bằng cách sử dụng thẻ <table> trong ví dụ trước.
<!DOCTYPE html>
<html>
<head>
<title>HTML Layouts using DIV, SPAN</title>
</head>
<body>
<div style = "width:100%">
<div style = "background-color:#b5dcb3; width:100%">
<h1>This is Web Page Main title</h1>
</div>
<div style = "background-color:#aaa; height:200px; width:100px; float:left;">
<div><b>Main Menu</b></div>
HTML<br />
PHP<br />
PERL...
</div>
<div style = "background-color:#eee; height:200px; width:350px; float:left;" >
<p>Technical and Managerial Tutorials</p>
</div>
<div style = "background-color:#aaa; height:200px; width:100px; float:right;">
<div><b>Right Menu</b></div>
HTML<br />
PHP<br />
PERL...
</div>
<div style = "background-color:#b5dcb3; clear:both">
<center>
Copyright © 2007 Tutorialspoint.com
</center>
</div>
</div>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Bạn có thể tạo bố cục tốt hơn bằng cách sử dụng DIV, SPAN cùng với CSS. Để biết thêm thông tin về CSS, vui lòng tham khảo Hướng dẫn CSS.