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><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>,<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 &nbsp;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&nbsp;Angry&nbsp;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 /><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, centerright.

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><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><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><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 widthheightthuộ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à cellpaddingcellspacing 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 , backgroundbordercolor 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 widthheightthuộ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 idtitle 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, alinkvlink 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, alinkvlink 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,30

Bằ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 Email

Bâ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 Feedback

Khung 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ểutiê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, colorfaceđể 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 &lt;basefont&gt; 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ỉnhtự độ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ếuthay 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.