Những ví dụ về HTML

Hà Nguyễn

Những ví dụ về HTML

HTML cơ bản
Thuộc tính HTML
HTML Heading
Đoạn trong HTML
Style trong HTML
Định dạng văn bản
Trích dẫn trong HTML
Ghi chú trong HTML
CSS trong HTML

HTML cơ bản

Mở đầu HTML

<!DOCTYPE html>
<html>
<body>

<h1>Tiêu đề mở đầu của trang</h1>

<p>Đoạn văn bản đầu tiên.</p>

</body>
</html>

Các thẻ Heading

<!DOCTYPE html>
<html>
<body>

<h1>Đây là nội dung thẻ Heading 1</h1>
<h2>Đây là nội dung thẻ Heading 2</h2>
<h3>Đây là nội dung thẻ Heading 3</h3>
<h4>Đây là nội dung thẻ Heading 4</h4>
<h5>Đây là nội dung thẻ Heading 5</h5>
<h6>Đây là nội dung thẻ Heading 6</h6>

</body>
</html>

Đoạn văn bản

<!DOCTYPE html>
<html>
<body>

<p>Đây là một đoạn văn bản.</p>
<p>Và đây là một đoạn văn bản khác của QuanTriMang.com.</p>

</body>
</html>

Link (liên kết)

<!DOCTYPE html>
<html>
<body>

<h2>Link trong HTML</h2>
<p>Các liên kết HTML được xác định bằng thẻ:</p>

<a href="https://quantrimang.com">Đây là tên link</a>

</body>
</html>

Hình ảnh

<!DOCTYPE html>
<html>
<body>

<h2>Hình ảnh trong HTML</h2>
<p>Ảnh trong HTML được xác định bằng thẻ img:</p>

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

</body>
</html>

Các nút

<!DOCTYPE html>
<html>
<body>

<h2>Nút trong HTML</h2>
<p>Các nút trong HTML được xác định bằng thẻ button:</p>

<button>Tên nút</button>

</body>
</html>

Danh sách (list)

<!DOCTYPE html>
<html>
<body>

<h2>Danh sách HTML không có thứ tự</h2>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>  

<h2>Danh sách HTML có thứ tự</h2>

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol> 

</body>
</html>

Thuộc tính HTML

Thuộc tính Title

<!DOCTYPE html>
<html>
<body>

<h2 title="Đây là tiêu đề">Nội dung tiêu đề của trang</h2>

<p title="Đây là chú thích tiêu đề">Di chuột qua đoạn này để xem chú thích của thuộc tính tiêu đề</p>

</body>
</html>

Thuộc tính Href

<!DOCTYPE html>
<html>
<body>

<h2>Thuộc tính Href</h2>

<p>Các liên kết HTML được xác định bằng thẻ a. Địa chỉ liên kết được chỉ định trong thuộc tính href:</p>

<a href="https://quantrimang.com">Truy cập Quản Trị Mạng</a>

</body>
</html>

Thuộc tính Width và Height

<!DOCTYPE html>
<html>
<body>

<h2>Thuộc tính Width và Height</h2>

<p>Thuộc tính Width và Height của thẻ img để xác định chiều rộng và chiều cao của hình ảnh:</p>

<img src="qtm.jpg" width="500" height="600">

</body>
</html>

Thuộc tính Alt

<!DOCTYPE html>
<html>
<body>

<h2>Thuộc tính Alt</h2>
<p>Thuộc tính alt phải phản ánh nội dung hình ảnh, vì vậy nếu người dùng không thể nhìn thấy hình ảnh sẽ hiểu được hình ảnh chứa những gì:</p>

<img src="qtm.jpg" alt="Ảnh Quản Trị Mạng" width="500" height="600">

</body>
</html>

Thuộc tính không có dấu ngoặc kép

<!DOCTYPE html>
<html>
<body>

<a href=https://quantrimang.com>Quản Trị Mạng</a>

</body>
</html>

Thuộc tính không có dấu ngoặc kép không hoạt động

<!DOCTYPE html>
<html>
<body>

<h1>Quản Trị Mạng</h1>

<p title=Thuộc tính không có ngoặc kép>
Bạn không thể bỏ qua dấu ngoặc kép xung quanh một giá trị thuộc tính nếu giá trị chứa khoảng trắng.
</p>

<p><b>
Nếu bạn di chuyển chuột qua đoạn trên, trình duyệt của bạn sẽ chỉ hiển thị từ đầu tiên của tiêu đề.
</b></p>

</body>
</html>

HTML Heading

Các thẻ tiêu đề <H1> đến <H6>

<!DOCTYPE html>
<html>
<body>

<h1>Tiêu đề H1</h1>
<h2>Tiêu đề H2</h2>
<h3>Tiêu đề H3</h3>
<h4>Tiêu đề H4</h4>
<h5>Tiêu đề H5</h5>
<h6>Tiêu đề H6</h6>

</body>
</html>

Đường kẻ ngang

<!DOCTYPE html>
<html>
<body>

<h1>Đây là tiêu đề Heading 1</h1>
<p>Nội dung của heading 1 sẽ ở đây.</p>
<hr>

<h2>Đây là tiêu đề Heading 2</h2>
<p>Nội dung của heading 2 sẽ ở đây.</p>
<hr>

<h2>Đây là tiêu đề Heading 2</h2>
<p>Nội dung của heading 2 sẽ ở đây.</p>

</body>
</html>

Thẻ Head

<!DOCTYPE html>
<html>
<head>
  <title>File HTML đầu tiên</title>
  <meta charset="UTF-8">
</head>
<body>

<p>Phần tử Head của HTML chứa siêu dữ liệu (Meta data).</p>
<p>Meta data là dữ liệu về tài liệu HTML.</p>

</body>
</html>

Đoạn trong HTML

Đoạn văn bản

<!DOCTYPE html>
<html>
<body>

<p>Đây là 1 đoạn HTML trên QuanTriMang.</p>
<p>Đây là 1 đoạn HTML trên QuanTriMang.</p>
<p>Đây là 1 đoạn HTML trên QuanTriMang.</p>

</body>
</html>

Nhiều đoạn hơn

<!DOCTYPE html>
<html>
<body>

<p>
Đoạn văn này
chứa rất nhiều dòng
trong mã nguồn,
nhưng trình duyệt
bỏ qua nó và viết liền
thành 1 đoạn.
</p>

<p>
Đoạn văn này
chứa rất nhiều        khoảng trống
trong      mã nguồn,
nhưng trình      duyệt
bỏ       qua nó.
</p>

<p>
Số dòng trong một đoạn văn bản phụ thuộc vào kích thước của cửa sổ trình duyệt. Nếu bạn thay đổi kích thước cửa sổ trình duyệt, số dòng trong đoạn này sẽ thay đổi.
</p>

</body>
</html>

Ngắt dòng

<!DOCTYPE html>
<html>
<body>

<p>Đây là <br> một đoạn văn bản <br> có ngắt dòng.</p>

</body>
</html>

Một số vấn đề với định dạng HTML

<!DOCTYPE html>
<html>
<body>

<p>Trong HTML, dấu cách và dòng mới bị bỏ qua:</p>

<p>

  Công cha như núi thái sơn.

  Nghĩa mẹ như nước trong nguồn chảy ra.

  Một lòng thờ mẹ kính cha.
  
  Cho tròn chữ hiếu mới là đạo con.

</p>

</body>
</html>

Giữ nguyên định dạng với thẻ <pre>

Thẻ <pre> giúp kiểm soát nội dung bên trong thẻ, ngắt dòng và các khoảng trống được giữ nguyên như trình bày trong thẻ.

<!DOCTYPE html>
<html>
<body>

<p>Thẻ Pre sẽ giữ lại cả dấu cách và dấu ngắt dòng:</p>

<pre>
  Công cha như núi thái sơn.

  Nghĩa mẹ như nước trong nguồn chảy ra.

  Một lòng thờ mẹ kính cha.
  
  Cho tròn chữ hiếu mới là đạo con.
</pre>

</body>
</html>

Style trong HTML

Style

<!DOCTYPE html>
<html>
<body>

<p>Chữ thông thường</p>
<p style="color:red;">Chữ màu đỏ</p>
<p style="color:blue;">Chữ màu xanh</p>
<p style="font-size:50px;">Chữ với font lớn hơn</p>

</body>
</html>

Màu nền

<!DOCTYPE html>
<html>
<body style="background-color:powderblue;">

<h1>Đây là thẻ Heading</h1>
<p>Đây là một đoạn văn bản và thẻ Heading 1 với màu nền đã được thiết lập trong thẻ body.</p>

</body>
</html>

Màu văn bản

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;">Thẻ Heading với chữ xanh</h1>
<p style="color:red;">Đoạn văn bản với chữ đỏ.</p>

</body>
</html>

Phông chữ

<!DOCTYPE html>
<html>
<body>

<h1 style="font-family:verdana;">Heading 1 với Font chữ Verdana</h1>
<p style="font-family:courier;">Đoạn văn bản lại là font chữ khác.</p>

</body>
</html>

Kích thước văn bản

<!DOCTYPE html>
<html>
<body>

<h1 style="font-size:300%;">Heading với cỡ chữ tăng 300%</h1>
<p style="font-size:160%;">Đoạn văn bản với cỡ chữ tăng 160%.</p>

</body>
</html>

Căn chỉnh văn bản

<!DOCTYPE html>
<html>
<body>

<h1 style="text-align:center;">Heading được căn giữa</h1>
<p style="text-align:center;">Đoạn văn bản được căn giữa.</p>

</body>
</html>

Định dạng văn bản

Định dạng In đậm

<!DOCTYPE html>
<html>
<body>

<p>Đây là đoạn văn bản thông thường</p>

<p><b>Đây là đoạn văn bản in đậm.</b></p>

</body>
</html>

Định dạng Quan trọng

<!DOCTYPE html>
<html>
<body>

<p>Đây là đoạn văn bản thông thường.</p>

<p><strong>Đây là nội dung quan trọng!</strong></p>

</body>
</html>

Định dạng In nghiêng

<!DOCTYPE html>
<html>
<body>

<p>Đây là đoạn văn bản thông thường.</p>

<p><i>Đây là đoạn văn bản in nghiêng.</i></p>

</body>
</html>

Định dạng Nhấn mạnh

<!DOCTYPE html>
<html>
<body>

<p>Đây là đoạn văn bản thông thường.</p>

<p><em>Đây là đoạn văn bản được nhấn mạnh.</em></p>

</body>
</html>

Định dạng chữ nhỏ hơn

<!DOCTYPE html>
<html>
<body>

<p>Đây là đoạn văn bản thông thường.</p>
<p><small>Đây là định dạng văn bản nhỏ hơn.</small></p>

</body>
</html>

Định dạng đánh dấu

<!DOCTYPE html>
<html>
<body>

<p>Đừng quên mua <mark>trà sữa</mark> hôm nay.</p>

</body>
</html>

Định dạng đã xóa

<!DOCTYPE html>
<html>
<body>

<p>Đồ uống yêu thích của tôi là <del>cà phê</del> trà sữa.</p>

</body>
</html>

Định dạng đã thêm

<!DOCTYPE html>
<html>
<body>

<p>Phần tử ins đánh dấu văn bản được gạch chân (được thêm vào).</p>

<p><ins>Trà sữa</ins> là đồ uống yêu thích của tôi.</p>

</body>
</html>

Định dạng đã xóa và đã thêm

<!DOCTYPE html>
<html>
<body>

<p>Đồ uống yêu thích của tôi là <del>cà phê</del> <ins>trà sữa</ins>.</p>

</body>
</html>

Định dạng chỉ số dưới

<!DOCTYPE html>
<html>
<body>

<p>Đây là văn bản chứa <sub>chỉ số dưới</sub>.</p>

</body>
</html>

Định dạng chỉ số trên

<!DOCTYPE html>
<html>
<body>

<p>Đây là văn bản chứa <sup>chỉ số trên</sup>.</p>

</body>
</html>

Trích dẫn trong HTML

Trích dẫn ngắn với thẻ <q>

<!DOCTYPE html>
<html>
<body>

<p>Trình duyệt thường chèn dấu ngoặc kép xung quanh phần tử q.</p>

<p>Mục tiêu của QuanTriMang là: <q>Xây dựng một cộng đồng, nơi mọi người có thể chia sẻ kiến thức.</q></p>

</body>
</html>

Trích dẫn dài với <blockquote>

<!DOCTYPE html>
<html>
<body>

<p>Trình duyệt thường thụt lề các phần tử blockquote.</p>

<blockquote cite="http://www.worldwildlife.org/who/index.html">
Trong gần 60 năm, WWF đã và đang bảo vệ tương lai của thiên nhiên. Tổ chức bảo tồn hàng đầu thế giới - WWF - hoạt động tại 100 quốc gia và được hỗ trợ bởi hơn một triệu thành viên ở Hoa Kỳ và gần năm triệu người trên toàn cầu.
</blockquote>

</body>
</html>

Thông tin chủ sở hữu/tác giả với <address>

<!DOCTYPE html>
<html>
<body>

<p>Phần tử address trong HTML xác định thông tin liên hệ (tác giả/chủ sở hữu) của một tài liệu hoặc bài báo.</p>

<address>
Được viết bởi Admin.<br> 
Chia sẻ tại:<br>
QuanTriMang.com<br>
Hà Nội, Việt Nam<br>
</address>

</body>
</html>

Định dạng viết tắt với <abbr>

<!DOCTYPE html>
<html>
<body>

<p>Trang <abbr title="Quản Trị Mạng">QTM</abbr> là trang web chia sẻ kiến thức.</p>

<p>Đánh dấu các từ viết tắt có thể cung cấp thông tin hữu ích cho trình duyệt, hệ thống dịch và công cụ tìm kiếm.</p>

</body>
</html>

Đánh dấu đề mục công việc với <cite>

<!DOCTYPE html>
<html>
<body>

<p>Phần tử cite trong HTML xác định tiêu đề của tác phẩm/công việc.</p>
<p>Các trình duyệt thường hiển thị các phần tử cite ở dạng nghiêng.</p>

<img src="img_the_scream.jpg" width="220" height="277" alt="The Scream">
<p><cite>The Scream</cite> của Edvard Munch. Được vẽ năm 1893.</p>

</body>
</html>

Định dạng hướng văn bản bằng <bdo>

<!DOCTYPE html>
<html>
<body>

<p>Nếu trình duyệt của bạn hỗ trợ ghi hai hướng (bdo), dòng tiếp theo sẽ được viết từ phải sang trái (rtl):</p>

<bdo dir="rtl">Dòng này sẽ được viết từ phải sang trái</bdo>

</body>
</html>

Ghi chú trong HTML

Ghi chú ẩn

<!DOCTYPE html>
<html>
<body>

<!-- Đây là nội dung ẩn -->
<p>Đây là đoạn văn bản sẽ hiển thị trên site.</p>
<!-- Nội dung này sẽ không hiển thị trong trình duyệt -->

</body>
</html>

Ghi chú có điều kiện

<!DOCTYPE html>
<html>
<body>

<!--[if IE 5]>Đây là IE 5<br><![endif]-->
<!--[if IE 6]>Đây là IE 6<br><![endif]-->
<!--[if IE 7]>Đây là IE 7<br><![endif]-->
<!--[if IE 8]>Đây là IE 8<br><![endif]-->
<!--[if IE 9]>Đây là IE 9<br><![endif]-->

</body>
</html>

Ghi chú để gỡ lỗi

<!DOCTYPE html>
<html>
<body>

<p>Đây là một đoạn văn bản.</p>
<!--
<p>Xem bức ảnh thú vị sau:</p>
<img border="0" src="quantrimang.jpg" alt="Quản Trị Mạng">
-->
<p>Đây là đoạn văn bản thứ hai.</p>

</body>
</html>

CSS trong HTML

HTML với CSS ngay trong các thẻ

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;">Tiêu đề chữ màu xanh</h1>

<p style="color:red;">Đoạn văn bản chữ màu đỏ</p>

</body>
</html>

HTML với CSS ở đầu file

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>
<body>

<h1>Đây là thẻ tiêu đề</h1>
<p>Đây là một đoạn văn bản.</p>

</body>
</html>

HTML với CSS là file khác

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>Đây là thẻ tiêu đề</h1>
<p>Đây là một đoạn văn bản.</p>

</body>
</html>

CSS font chữ

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: blue;
  font-family: verdana;
  font-size: 300%;

}
p  {
  color: red;
  font-family: courier;
  font-size: 160%;
}
</style>
</head>
<body>

<h1>Đây là thẻ tiêu đề</h1>
<p>Đây là một đoạn văn bản.</p>

</body>
</html>

CSS với thuộc tính id

<!DOCTYPE html>
<html>
<head>
<style>
#p01 {
  color: blue;
}
</style>
</head>
<body>

<p>Đây là một đoạn văn bản.</p>
<p>Đây cũng là một đoạn văn bản.</p>
<p id="p01">Riêng tôi là khác biệt với màu chữ khác.</p>

</body>
</html>

CSS với thuộc tính class

<!DOCTYPE html>
<html>
<head>
<style>
p.error {
  color: red;
}
</style>
</head>
<body>

<p>Đây là một đoạn văn bản.</p>
<p>Đây cũng là một đoạn văn bản.</p>
<p class="error">Đây là màu của văn bản lỗi.</p>
<p>This is a paragraph.</p>
<p class="error">Đây cũng là màu của văn bản lỗi.</p>

</body>
</html>

CSS đường viền

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border: 2px solid powderblue;
}
</style>
</head>
<body>

<h1>Tiêu đề Heading</h1>

<p>Đây là một đoạn văn bản.</p>
<p>Đây là một đoạn văn bản.</p>
<p>Đây là một đoạn văn bản.</p>

</body>
</html>

CSS với phần đệm padding

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border: 2px solid powderblue;
  padding: 30px;
}
</style>
</head>
<body>

<h1>Đây là tiêu đề Heading</h1>

<p>Đoạn văn bản ví dụ về padding trên QuanTriMang.</p>
<p>Đoạn văn bản ví dụ về padding trên QuanTriMang.</p>

</body>
</html>

CSS với phần lề margin

<!DOCTYPE html>
<html>
<head>
<style>
p {
  border: 2px solid powderblue;
  margin: 50px;
}
</style>
</head>
<body>

<h1>Đây là tiêu đề</h1>

<p>Đoạn văn bản chứa margin trên QuanTriMang.</p>
<p>Đoạn văn bản chứa margin trên QuanTriMang.</p>
<p>Đoạn văn bản chứa margin trên QuanTriMang.</p>

</body>
</html>

Thứ Tư, 04/05/2022 09:27

5 ★ 14 👨 929