Liên kết trong HTML

Các liên kết được tìm thấy trong gần như tất cả các trang web. Các liên kết cho phép người dùng chuyển trangtheo cách của họ từ trang này sang trang khác.

Các siêu liên kết ( liên kết ) trong HTML

Thẻ <a> định nghĩa một siêu liên kết trong HTML.

Một siêu liên kết ( hay liên kết ) là một từ, một nhóm nhiều từ, hoặc hình ảnh mà bạn có thể click vào đó để đi đến một trang web khác.

Khi bạn di chuyển con trỏ qua một liên kết trên trang web, mũi tên của con trỏ sẽ biến thành hình bàn tay.

Hầu hết các thuộc tính quan trọng của thẻ <a> là thuộc tính href, nó chỉ ra đích đến của liên kết.

Theo mặc định, các liên kết sẽ xuất hiện như sau trong tất cả các trình duyệt:.

·                                 Môt liên kết chưa được nhấp chuột sẽ được gạch dưới và có mầu xanh

·                                 Môt liên kết chưa được nhấp chuột sẽ được gạch dưới và có mầu tím

·                                 Môt liên kết khi được nhấp chuột sẽ được gạch dưới và có mầu đỏ

Cú pháp của liên kết HTML

Mã HTML cho môt liên kết rất đơn giản, chỉ cần:

<a href ="url"> Nội dung liên kết </a>

Trong đó thuộc tính href quy định cụ thể các điểm đến của một liên kết.

<a href="http://www.webdepre.biz/">Đi đến Web Đẹp Rẻ!</a>

Nó sẽ hiển thị là : Đi đến Web Đẹp Rẻ!

Nhấp chuột vào liên kết trên sẽ đưa chúng ta đến trang chủ của Web Đẹp Rẻ!.

Chú ý: "Nội dung liên kết" có thể là hình ảnh hoặc bất cứ phần tử HTML nào đó.

Liên kết trong HTML - Thuộc tính đích đến

Thuộc tính đích đến xác định nơi để mở các tài liệu liên kết.

Ví dụ dưới đây sẽ mở một liên kết đến trang chủ Web Đẹp Rẻ! trong một cửa sổ mới:

Ví dụ

<a href="http://www.webdepre.biz/" target="_blank">Đi đến Web Đẹp Rẻ!</a>  

Liên kết trong HTML - Định danh của thuộc tính

Định danh của thuộc tính có thể dùng để tạo ra một trang đánh dấu bên trong một tài liệu HTML.

Chú ý: Các trang đánh dấu được hiển thị như nội dung bình thường trong trang web, nó không có hiệu ứng đặc biệt nào.

Ví dụ

Đặt một điểm neo với một định danh bên trong một tài liệu HTML:

<a id="note">Chú ý trong bài này</a>

Tạo một liên kết đến "Chú ý trong bài này" trong trang này:

<a href="#note">Đi đến chú ý trong bài này</a>

Hoặc, tạo ra một liên kết đến ""Chú ý trong bài này" từ một trang khác:

<a href="http://webdepre.biz/hoc-thiet-ke-website/html/97-liên-kết-trong-html.html#note">

 Đi đến chú ý trong bài này</a>

Lời khuyên hữu ích

Mẹo : Luôn luôn thêm một dấu gạch chéo để chỉ định thư mục con. Nếu bạn thiết lập liên kết như sau:href = "http://www.webdepre.biz/hoc-truc-tuyen", bạn sẽ tạo ra hai yêu cầu đến máy chủ, đầu tiên máy chủ sẽ thêm một dấu gạch chéo để đi đến địa chỉ, và sau đó tạo ra một yêu cầu mới như thế này : href = "http://www.webdepre.biz/hoc-truc-tuyen/". Việc thêm dấu gạch chéo sẽ giảm số lượng xử lý của máy chủ và làm cho website chạy nhanh hơn.

 Nguồn  webdepre

Định dạng trong HTML

Ví dụ

Đây là chữ in đậm Đây là chữ in nghiêng

Các thẻ định dạng trong HTML

HTML sử dụng các thẻ kiểu như <b> và <i> để định dạng kết quả khi hiển thị nội dung trên các trình duyệt, nhưĐậm hoặc Nghiêng.

Các thẻ như thế được gọi là các thẻ định đạng.

Thông thường thẻ <strong> cho kết quả giống với thẻ <b>, và thẻ <em> cho kết quả giống với thẻ <i>.
Tuy nhiên, có sự khác nhau về cách sử dụng của các thẻ này:
Thẻ <b> hoặc thẻ <i> chỉ định nghĩa nội dung là đậm hoặc nghiêng.
Thẻ <strong> hoặc thẻ <em> còn có chức năng nhấn mạnh nội dung nằm giữa các thẻ đó, còn khi hiển thị nội dung trên các trình duyệt việc nhấn mạnh như thế nào thì còn tùy mỗi trình duyệt.

Các ví dụ trong bài này

Định dạng nội dung
Làm cách nào để định dạng nội dung cho một văn bản HTML.

Văn bản định dạng sẵn.
Làm cách nào để định dạng văn bản sẵn với thẻ pre.

Các thẻ "Ngôn ngữ lập trình"
Làm thế nào để hiển thị như là ngôn ngữ lập trình trong văn bản. Sự khác nhau giữ các thẻ "Ngôn ngữ lập trình".

Địa chỉ
Làm thể nào để định dạng các thông tin liên lạc cho các tác giả / chủ sở hữu của một tài liệu HTML.

Chữ viết tắt và từ viết tắt
Làm thế nào để xử lý các chữ viết tắt và từ viết tắt..

Hướng của văn bản
Làm thế nào để thay đổi hướng của văn bản.

Trích dẫn
Làm thế nào để xử lý các trích dẫn dài và ngắn.

Đánh dấu Xóa và chèn văn bản
Làm thế nào để đánh dấu văn bản đã xóa và chèn vào.

Các thẻ định dạng nội dung trong HTML

Thẻ	Mô tả
<b>	Định nghĩa chữ in đậm
<em>	Định nghĩa nhấn mạnh văn bản, văn bản in nghiêng
<i>	Định nghĩa chữ in nghiêng
<small>	Định nghĩa chữ nhỏ hơn
<strong>	Định nghĩa nhấn mạnh văn bản, văn bản in đậm
<sub>	Định nghĩa chỉ số dưới
<sup>	Định nghĩa chỉ số trên
<ins>	Định nghĩa nội dung đã được chèn vào
<del>	Định nghĩa nội dung đã xóa

Các thẻ "Ngôn ngữ lập trình" trong HTML

Thẻ	Mô tả
<code>	Định nghĩa nội dung với kiểu giống như kiểu dùng cho ngôn ngữ lập trình
<kbd>	Định nghĩa nội dung được nhập vào
<samp>	Định nghĩa văn bản ngôn ngữ lập trình mẫu
<var>	Địnhnghĩa môt biến
<pre>	Định nghĩa văn bản định dạng sẵn

Các thẻ Trích dẫn, thuật ngữ trong HTML

Thẻ	Mô tả
<abbr>	Định nghĩa một từ viết tắt hoặc từ viết tắt
<address>	định dạng các thông tin liên lạc cho các tác giả / chủ sở hữu của một tài liệu.
<bdo>	Định nghĩa hướng của văn bản
<blockquote>	Định nghĩa một phần được trích dẫn từ một nguồn khác
<q>	Định nghĩa môt lời trích dẫn ngắn
<cite>	Xác định tiêu đề của một tác phẩm
<dfn>	Định nghĩa một thuât ngữ

Nguồn W3school

Bài 6 Tiêu đề trong html

Tiêu đề trong HTML

Các tiêu đề được định nghĩa bởi các thẻ từ <h1> đến <h6>.
<h1> định nghĩa mức độ quan trọng cao nhất của tiêu đề. <h6> định nghĩa mức độ quan trọng thấp nhất của tiêu đề

Ví dụ

< <h1>Đây là một tiêu đề</h1>
  <h2>Đây là một tiêu đề</h2>
<h3>Đây là một tiêu đề</h3>

Chú ý: Trình duyệt tự động thêm một khoảng không gian trống (margin) trước và sau khi mỗi tiêu đề.

Tiêu đề là rất quan trọng

Chỉ dùng Các tiêu đề của HTML cho tiêu đề của trang web. Không dùng Các tiêu đề của HTML để tạo ra các đoạn chữ LỚN và đậm.
Các công cụ tìm kiếm sử dụng tiêu đề của bạn để đánh chỉ mục cấu trúc và nội dung cho các trang web của bạn.
Vì người dùng có thể lướt các trang của bạn bằng cách tiêu đề của nó, nên hãy sử dụng hợp lý các tiêu đề để hiển thị cấu trúc của trang web.

Tiêu đề H1 nên được sử dụng như là đề mục chính, tiếp theo là tiêu đề H2, sau đó ít quan trọng hơn là tiêu đề H3, và cứ thế theo thứ tự ưu tiên, cho đến H6.

Các dòng ngang trong HTML

Thẻ <hr> dùng để tạo ra một dòng ngang trong một trang web.
Thẻ <hr> có thể được sử dụng để phân chia nội dung cua trang web

Ví dụ

 <p>Đây là môt đoạn</p> 
  <hr><p>Đây là môt đoạn</p> 
  <hr><p>Đây là môt đoạn</p>

Các chú thích trong HTML

Các chú thích được chèn vào mã HTML để làm cho mã HTML dễ đọc và dễ hiểu, dễ tìm trong trường hợp muốn sửa chữa, thay thế. Các chú thích được các trình duyệt bỏ qua và không hiển thị.
Các chú thích được viết như sau:

Ví dụ

<!-- Đây là một chú thích -->

Chú ý: Có một dấu chấm than sau dấu ngoặc mở, nhưng không có chấm than ở trước dấu ngoặc đóng

Mẹo HTML - Cách nhìn mã HTML

Có bao giờ bạn nhìn một trang web và nghĩ rằng " đẹp thế nhỉ, mình cũng muốn làm một trang như thế chưa? "
Để xem cách họ làm trang đó, bạn Click chuột phải vào trang và chọn "View Source" ( khi sử dụng trình duyệt Internet Explorer ) hoặc "View Page Source" (khi sử dụng trình duyệt Firefox), hoặc tương tự cho các trình duyệt khác. Nó sẽ mở ra một cửa sổ chứa mã HTML của trang đó

Tham khảo các thẻ HTML

Bảng tham khảo các thẻ, mô tả và các thuộc tính của chúng được tạo ra nhằm cung cấp khả năng tìm kiếm và tham chiếu đến chúng nhanh hơn.
Bạn sẽ được học thêm nhiều thẻ HTML và các thuộc tính của chúng ở các bài học sau.

Thẻ	Mô tả
<html>	Định nghĩa một văn bản HTML
<body>	Định nghĩa phần thân của một văn bản
<h1> to <h6>	Định nghĩa các tiêu đề cho văn bản
<hr>	Định nghĩa một đường ngang trong văn bản
<!-->	Định nghĩa một chú thích

theo w3schools

Bài 5 Thuộc tính trong html

Các thuộc tính trong HTML

             Các phần tử HTML có thể có các thuộc tính.Các thuộc tính cung cấp thêm các thông tin cho một phần tử HTML
Các thuộc tính luôn luôn được chỉ định trong thẻ bắt đầu. Các thuộc tính đi với nhau thành từng cặp là tên/giá trị, ví dụ: name="value"

Một ví dụ về thuộc tính của phần tử

Thẻ <a> trong HTML dùng để định nghĩa một liên kết. Địa chỉ liên kết được quy định cụ thể trong thuộc tính href :

Ví dụ

<a href="http://www.webdepre.biz">Đây là một liên kết</a> 

Luôn luôn đặt giá trị của thuộc tính vào dấu ngoặc kép

Giá trị thuộc tính phải luôn luôn được kèm theo trong dấu ngoặc kép.

Thường đặt giá trị thuộc tính giữa hai dấu ngoặc kép " ", nhưng nếu đặt môt dấu ngoặc kép ' '  cũng được chấp nhận.

Mẹo: Trong một số ít trường hợp, khi bản thân giá trị có chứa dấu ngoặc kép, thì việc sử dụng một dấu ngoặc kép là cần thiết, ví dụ : name='John "ShotGun" Nelson'

Mẹo: Dùng chữ viết thường để ghi các thuôc tính

Tên và giá trị của thuộc tính không phân biệt chữ hoa và chữ thường. Tuy nhiên, tổ chức World Wide Web (W3C) khuyên rằng nên sử dụng chữ viết thường để ghi tên và giá trị của thuôc tính trong HTML 4.
Các phiên bản mới của (X)HTML yêu cầu phải viết chữ thường đối với các thuộc tính.

Tham khảo các thuộc tính của HTML

Danh sách đầy đủ các thuôc tính của mỗi phần tử HTML có tại: Tham khảo thuộc tính HTML.

Dưới đây là danh sách các thuôc tính có thể được sử dụng cho bất kỳ phần tử HTML nào :

Thuộc tính	Mô tả
class	Chỉ định một hoặc nhiều tên lớp cho một phần tử, đề cập đến một lớp trong một tập tin chứa nhiều lớp, dùng để quy định phong cách cho văn bản ( CSS : Cascading Style Sheets)
id	Chỉ định một id ( định danh ) duy nhất cho một phần tử
style	Chỉ định một kiểu CSS trực tiếp cho môt phần tử
title	Chỉ định thông tin thêm về một phần tử (hiển thị như là một tool tip)

Để có thêm thông tin về các thuôc tính toàn cục ( có thể sử dụng cho bất kỳ phần tử nào ) hãy đi đến : Tham khảo các thuộc tính toàn cục trong HTML.

Bài 4 Phần tử trong HTML

Các phần tử HTML

Một phần tử HTML là tất cả nội dung phía trong thẻ bắt đầu và thẻ kết thúc:

Thẻ mở	Nội dung của phần tử	Thẻ đóng
<p>	Đây là một đoạn	</p>
<a href="/default.htm">	Đây là một liên kết	</a>
<br>

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

Cú pháp của phần tử HTML

• Một phần tử HTML bắt đầu với một Thẻ bắt đầu / Thẻ mở
• Một phần tử HTML kết thúc với một Thẻ kết thúc / thẻ đóng
• Nội dung của phần tử là tất cả những gì nằm giữa thẻ mở và thẻ đóng
• Một vài phần tử HTML không có nội dung
• Những phần tử không có nội dung là các thẻ không có thẻ đóng
• Hầu hết các phần tử HTML đều có những thuộc tính

Sự lồng nhau của các phần tử HTML

Hầu hết các phần tử HTML có thể chứa các phần tử HTML khác.

Những văn bản HTML bao gồm rất nhiều các phần tử HTML khác nhau.

Ví dụ về một văn bản HTML

<!DOCTYPE html> <html>  <body> <p>Đây là một đoạn.</p> </body>  </html>

Ví dụ này chứa 3 phần tử HTML

Giải thích một số ví dụ về phần tử trong HTML

Phần tử <p>:

<h1>Đây là một đoạn</h1> 

Phần tử <p> định nghĩa một đoạn trong văn bản HTML.

Phần tử bắt đầu bằng thẻ mở <p> và kết thúc bằng thẻ đóng là </p>.

Nội dung của phần tử : Đây là một đoạn.

Phần tử <body> :

<body> <p>Đây là một đoạn.</p> </body>

  Phần tử <body> định nghĩa tất cả nội dung trong văn bản HTML.

Phần tử bắt đầu bằng thẻ mở <body> và kết thúc bằng thẻ đóng là </body>.
Nội dung của phần tử là một phần tử HTML khác ( ở đây là phần tử <p> ).

Phần tử <html> :

<html>  <body> <p>Đây là một đoạn.</p> </body>  </html>

 Phần tử <html> định nghĩa đây là văn bản HTML.

Phần tử bắt đầu bằng thẻ mở <html> và kết thúc bằng thẻ đóng là </html>.

Nội dung của phần tử là một phần tử HTML khác ( ở đây là phần tử <p> và phần tử <body> ).

Đừng quên các thẻ đóng.

Một số phần tử HTML vẫn hiển thị đúng ngay cả khi bạn quên thẻ đóng của chúng :

<p>Đây là một đoạn<p>Đây là một đoạn khác 

Tuy nhiên lời khuyên của chúng tôi là bạn nên tập thói quen đóng thẻ ngay khi bạn không muốn sử dụng nó nữa, việc này sẽ tránh các lỗi không cần thiết trong quá trình hiển thị văn bản HTML trên các trình duyệt.

Các phần tử HTML đặc biệt

Các phần tử HTML không có thẻ đóng được gọi là các phần tử HTML đặt biệt.

<br> là một phần tử đặc biệt, nó không có thẻ đóng ( Thẻ <br> định nghĩa ngắt một dòng).

Mẹo: Trong XHTML, tất cả các phần tử phải có thẻ đóng, với các thẻ đặc biệt, bạn chỉ cần thêm một dấu gạch chép phía trong thẻ mở, ví dụ như <br />.

Mẹo HTML : Dùng các thẻ với chữ viết thường

Các thẻ HTML không phân biệt chữ hoa và chữ thường, có nghĩa là bạn viết : <P> và <p> đều được. Có rất nhiều trang web dùng các thẻ HTML với chữ viết hoa. Tuy nhiên chúng tôi sử dụng chữ viết thường bởi vì World Wide Web Consortium (W3C) khuyến cáo nên viết chữ thường trong HTML 4, và đòi hỏi thẻ phải viết bằng chữ thường trong XHTML.

theo w3schools.com

: Đây là một đoạn.
Phần tử định nghĩa tất cả nội dung trong văn bản HTML. Phần tử bắt đầu bằng thẻ mở và kết thúc bằng thẻ đóng là . Nội dung của phần tử là một phần tử HTML khác ( ở đây là phần tử ). Phần tử : Đây là một đoạn.
Phần tử định nghĩa đây là văn bản HTML. Phần tử bắt đầu bằng thẻ mở và kết thúc bằng thẻ đóng là . Nội dung của phần tử là một phần tử HTML khác ( ở đây là phần tử và phần tử ). Đừng quên các thẻ đóng. Một số phần tử HTML vẫn hiển thị đúng ngay cả khi bạn quên thẻ đóng của chúng : Đây là một đoạn Đây là một đoạn khác Tuy nhiên lời khuyên của chúng tôi là bạn nên tập thói quen đóng thẻ ngay khi bạn không muốn sử dụng nó nữa, việc này sẽ tránh các lỗi không cần thiết trong quá trình hiển thị văn bản HTML trên các trình duyệt. Các phần tử HTML đặc biệt Các phần tử HTML không có thẻ đóng được gọi là các phần tử HTML đặt biệt.
là một phần tử đặc biệt, nó không có thẻ đóng ( Thẻ
định nghĩa ngắt một dòng). Mẹo: Trong XHTML, tất cả các phần tử phải có thẻ đóng, với các thẻ đặc biệt, bạn chỉ cần thêm một dấu gạch chép phía trong thẻ mở, ví dụ như
. Mẹo HTML : Dùng các thẻ với chữ viết thường Các thẻ HTML không phân biệt chữ hoa và chữ thường, có nghĩa là bạn viết : và đều được. Có rất nhiều trang web dùng các thẻ HTML với chữ viết hoa. Tuy nhiên chúng tôi sử dụng chữ viết thường bởi vì World Wide Web Consortium (W3C) khuyến cáo nên viết chữ thường trong HTML 4, và đòi hỏi thẻ phải viết bằng chữ thường trong XHTML.