VNKHA.COM: Bài 2. Các thẻ HTML cơ bản

NỘI DUNG CHI TIẾT

1. Cấu trúc tổng quát ☝

Cấu trúc đơn giản của HTML5 thường có dạng như sau. Gồm 3 phần.

<!Doctype>: Đây là phần khai báo theo chuẩn W3C của trang web HTML5, trước đây ở các phiên bản HTML4/XHTML thì sẽ khác.

<head></head>: Phần khai cho các thẻ như title, meta, css, javascript…

<body> </body>: Phần chứa và hiện thi toàn bộ nội dung của trang web .

Cấu trúc cơ bản:

<!doctype HTML>
<html>
   <head>
	<title>Tiêu đề trang web</title>
	<meta charshet = "UTF-8"/>
   </head>
<body>
    Nội dung hiển thị
 </body>
 </html>

Ví dụ: Tạo file thong-tin-hoc-sinh.html có nội dung như sau:

<!doctype HTML>
<html>
<head>
    <title>Thông tin học sinh</title>
        <meta charshet = "UTF-8"/>
</head>
<body>
    <p>1. Nguyễn Văn An
    <p>2. Lê Thị Mỹ Hoa
    <p>2. Trần Công Thành
</body>
</html>

2. Chú thích trong HTML ☝

<!--

Nội dung chú thích

-->

3. Thẻ <html>☝

- Thẻ <html> là thẻ gốc của tập tin, nó dùng để chứa tất cả những thẻ khác ngoại trừ <!DOCTYPE>

- Thẻ <!DOCTYPE html> dùng để xác định phiên bản HTML5 đang sử dụng (trình duyệt sẽ lựa chọn sự hỗ trợ tốt nhất dành cho trang web của bạn)

4. Thẻ <head> ☝

Thẻ <head> dùng để chứa những thẻ cung cấp thông tin trang web, bên trong nó thường có các thẻ <title>, <meta>, <link>, <style>,...

Ví dụ:

<html>
<head>
    <title>Hiển thị tiêu đề trang web </title>
    <meta charset="UTF-8" name="mota" content="Mô tả trang web, chứa các từ khóa tìm kiếm"/> 
    <link rel="stylesheet" type="text/css" href="filecss.css"/>  <!--xác định mối quan hệ giữa một tài liệu HTML và các tài nguyên bên ngoài. Được dùng phổ biến nhất là link tới tài liệu css.-->
    <style> <!--khai báo các code CSS định dạng cho thẻ HTML-->     
           div{                font-size:30px;
           }
           p{
               font-size:14px;
           }
          .tieude{
             font-size:40px;
           }
    </style>
    <script>  
          // code javascript, được sử dụng để viết kịch bản phía máy khách   
    </script>    
</head>

<body>
    <p>vnkha.com</p>
    <p class="tieude">vnkha..com</p>
  
    <!--Footer là phần chân trang, nó chứa thông tin bản quyền, liên hệ, tác giả, ....-->    <footer>
        <div>©2023 vnkha.com</div>
    </footer>
</body>
</html>

5. Thẻ <title> ☝

Xem mục 4 ở trên

6. Thẻ <meta/> ☝

Xem mục 4 ở trên

7. Thẻ <body> ☝

Thẻ <body> xác định phần thân của một tài liệu HTML, nó dùng để chứa những phần tử sẽ được hiển thị lên màn hình trình duyệt

Ví dụ:

    <!DOCTYPE html>
<html>
    <head>
        <title>Tiêu đề trang web</title>
    </head>
    <body>
        <p>Nội dung trang web</p>
    </body>
</html>

8. Thẻ <h1> đến <h6> ☝

 
      <h1>www.vnkha.com</h1>
      <h2>www.vnkha.com</h2>
      <h3>www.vnkha.com</h3>
      <h4>www.vnkha.com</h4>
      <h5>www.vnkha.com</h5>
      <h6>www.vnkha.com</h6>

Kết quả:

9. Thẻ <p>, <span>, <i>, <b>,<em>, <strong>, <font>, <br>,<hr>... ☝

Các thẻ định dạng văn bản thường dùng:

<p>Thẻ đoạn văn</p>
<span>Được dùng để nhóm các phần tử nội tuyến lại với nhau, tiện cho việc định dạng CSS</span>
<i>Chữ nghiêng</i>
<em>Chữ nghiêng</b>
<b>Chữ in đậm</b>
<strong>Chữ in đậm</strong>
<br>:Xuống dòng nhưng không kết thúc đoạn
<hr>: Kẻ đường nằm ngang
<font face="Arial" size="16"> Trần Thị Mai Hoa</font>
<u>Chữ gạch dưới</u>
<sub>Chỉ số dưới</sub>
<sup>Chỉ số trên</sup>
  : Khoảng trắng
< :dấu nhỏ hơn (<)
> :dấu lớn hơn (>)
" :dấu ngoặc kết (")
' :dấu ngoặc đơn (')

10. Các thuộc tính ☝

width: Chiều rộng

heigth: Chiều cao

bgcolor: màu nền

background: hình nền

align: giống hàng (left, right, center)

Thuộc tính	Cho thẻ	Mô tả
action	<form>	Chỉ định nơi để gửi dữ liệu trên form khi một form được kích nút gửi.
align	Không hỗ trợ trong HTML 5.	Chỉ định việc căn chỉnh dữ liệu của các phần tử. (Căn chỉnh nội dung theo các hướng: trái, phải, trên, dưới, trung tâm …). Thường sử dụng trong CSS.
alt	<area>, <img>, <input>	Chỉ định văn bản thay thế cho các phần tử không hiển thị, ví dụ như phần tử img ta dùng alt để mô tả thông tin cho ảnh để các công cụ tìm kiếm dễ tìm thấy.
autoplay	<audio>, <video>	Chỉ định âm thanh/video sẽ bắt đầu chạy khi nó đã sẵn sàng.
bgcolor	Không hỗ trợ trong HTML 5.	Xác định màu nền của một phần tử. Thường sử dụng trong CSS.
border	Không hỗ trợ trong HTML 5.	Xác định độ rộng đường giới của một phần từ. Thường dụng trong CSS.
charset	<meta>, <script>	Xác định bộ mã ký tự cho văn bản HTML
checked	<input>	Chỉ định một phần tử <input> là được chọn khi tải trang (đối với type = “checkbox” hoặc type = “radio”).
class	Tất cả các thẻ	Chỉ định một hoặc nhiều tên class cho một phần tử (đề cập đến 1 class trong 1 stylesheet)
color	Không hỗ trợ trong HTML 5.	Xác định màu chữ của một phần từ. Thường dùng trong CSS.
cols	<textarea>	Xác định chiều rộng cột cho phần tử text area.
colspan	<td>, <th>	Xác định số cột của các ô trong bảng sẽ được gộp lại.
controls	<audio>, <video>	Xác định trình điều khiển âm thanh/video sẽ được hiển thị (ví dụ như một nút play / pause vv).
dir	Tất cả các thẻ	Chỉ định hướng của văn bản cho nội dung trong một phần tử ví dụ trái sang phải, phải sang trái …
height	<canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video>	Chỉ định chiều cao của phần tử.
high	<meter>	Xác định giá trị một khoảng nào đó và được xem như là một giá trị độ cao.
href	<a>, <area>, <base>, <link>	Chỉ định URL của trang liên kết đi tới.
id	Tất cả các thẻ	Chỉ định một id duy nhất cho một phần tử.
list	<input>	Đề cập đến phần tử <datalist> mà chứa các giá trị tùy chọn định nghĩa trước cho một phần tử <input>.
loop	<audio>, <video>	Chỉ định các âm thanh/video sẽ lặp lại một lần nữa, mỗi khi nó chạy hết.
name	<button>, <fieldset>, <form>, <iframe>, <input>, <keygen>, <map>, <meta>, <object>, <output>, <param>, <select>, <textarea>	Chỉ định tên của phần tử này.
onchange	Có ở tất cả các phần tử.	Script này được chạy khi giá trị của phần tử bị thay đổi.
onclick	Có ở tất cả các phần tử.	Script này được chạy khi phần tử được kích vào.
rows	<textarea>	Xác định số lượng dòng có trong một TextArea.
rowspan	<td>, <th>	Xác định số lượng ô trong một hàng của bảng được gộp
span	<col>, <colgroup>	Xác định số lượng cột được gộp lại thành một.
width	<canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video>	Xác định chiều rộng của phần tử.

11. Thẻ <img> ☝

<img src="đường dẫn đến tập tin hình ảnh">

Ví dụ:

12. Thẻ <a> ☝

Thẻ <a> dùng để tạo một liên kết đến một tài liệu nào đó.

Ví dụ:

<a href="https://www.vnkha.com/">Chuyển đến trang chủ VNKHA.COM</a>

13. Thẻ <video>

</video>

14. Thẻ <audio> ☝

<audio controls>
<source src="../file/bell.mp3">
</audio>

15. Thẻ <table> ☝

Để tạo được một cái bảng thì chúng ta cần phải sử dụng các thẻ sau:

   <table>: dùng để xác định bảng.
    <th>: dùng để xác định một hàng tiêu đề.
   <tr>: dùng để xác định một hàng.
   <td>: dùng để xác định một ô.

Ví dụ:

<table border="1">
<tr>
<th>Họ tên</th>
<th>Ngày sinh</th>
<th>Giới tính</th>
</tr>
<tr>
<td>Nguyễn Văn Anh</td>
<td>25/09/2000</td>
<td>Nam</td>
</tr>
<tr>
<td>Trần Thị Hoa</td>
<td>10/09/1990</td>
<td>Nữ</td>
</tr>
<tr>
<td>Lê Thống</td>
<td>06/12/1999</td>
<td>Nam</td>
</tr>
</table>

Kết quả:

Các thuộc tính trong table:

- border: Thiết lập độ dày của cái đường viền bao xung quanh bảng và các ô.

- cellspacing: Thiết lập khoảng cách nằm giữa mỗi hai đường viền lân cận.

- cellpadding: Thiết lập khoảng cách vùng đệm bên trong các ô.

- bgcolor: Thiết lập màu nền cho bảng hoặc các ô.

- width: Thiết lập chiều rộng cho bảng hoặc các ô.

- height: Thiết lập chiều cao cho bảng hoặc các ô.

- align: Canh lề cho nội dung bên trong ô (theo chiều ngang)

- valign: Canh lề cho nội dung bên trong ô (theo chiều dọc)

Cách gộp ô trong bảng:

15.1. Gộp ô theo cột (theo chiều ngang):

   colspan="số ô muốn gộp lại với nhau"

Ví dụ:

<table border="1">
<tr>
<th colspan="3">THÔNG TIN SINH VIÊN</th>
</tr>
<tr>
<td>Trần Anh Đức</td>
<td>03/08/1993</td>
<td>Nam</td>
</tr>
<tr>
<td>Kiều Thị Thu Hằng</td>
<td>04/09/1991</td>
<td>Nữ</td>
</tr>
<tr>
<td>Vương Thị Lê Na</td>
<td>06/10/1991</td>
<td>Nữ</td>
</tr>
</table>

Kết quả:

15.2. Gộp ô theo hàng (theo chiều dọc):

   rowspan="số ô muốn gộp lại với nhau"

Ví dụ:

<table border="1">
<tr>
<th rowspan="3">LẬP TRÌNH WEB</th>
<td>HTML</td>
</tr>
<tr>
<td>CSS</td>
</tr>
<tr>
<td>JavaScript</td>
</tr>
</table>

Kết quả:

16. Thẻ <ul>, <li> ☝

Danh sách không có thứ tự, sử dụng cặp thẻ: <ul></ul> và <li></li>, trong đó:

   <ul></ul>:danh sách không có thứ tự
   <li></li>: mục của danh sách.

Ví dụ:

       <ul>
       <li>Trang chủ</li>
       <li>Giới thiệu</li>
       <li>Liên hệ</li>
   </ul>

17. Thẻ <ol>, <li> ☝

Danh sách không có thứ tự, sử dụng cặp thẻ: <ol></ol> và <li></li>, trong đó:

   <ol></ol>:danh sách có thứ tự
   <li></li>: mục của danh sách.

Ví dụ:

       <ol>
       <li>Trang chủ</li>
       <li>Giới thiệu</li>
       <li>Liên hệ</li>
   </ol>

18. Thẻ <div> ☝

Thẻ <div> là một thẻ khối, thường được dùng để chứa thẻ khác hoặc dùng để định dạng khối văn bản.

Ví dụ:

       <div>
<h3>Danh mục sản phẩm</h3>
       <ul>
<li>Máy tính</li>
           <li>Điện thoại</li>
           <li>Ti vi</li>
       </ul>
</div>
   <div style="align: left; font-size:30px">
<p>Copyright: 200
</div>

19. Thẻ <form> ☝

Ví dụ:

  <!DOCTYPE >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Form</title>
</head>

<body>
<form method="post" action="">
    <table width="80%" border="0">
      <tr>
        <td colspan="2" style="text-align: center; font-weight: bold; color: #006;">
        THÔNG TIN HỌC SINH
        </td>
      </tr>
      <tr>
        <td width="24%">Họ tên:</td>
        <td width="76%"><input type="text" name="txtHoTen" size="40px" /></td>
      </tr>
      <tr>
        <td>Giới tính:</td>
        <td>
            <input type="radio" name="radGioiTinh" value="1"/> Nam
            <input type="radio" name="radGioiTinh" value="0"/> Nữ
        </td>
      </tr>
      <tr>
        <td>Ngày sinh</td>
        <td><input type="text" name="txtNgaySinh" size="40px" /></td></td>
      </tr>
      <tr>
        <td>Địa chỉ</td>
        <td><input type="text" name="txtDiaChi" size="40px" /></td>
      </tr>
      <tr>
        <td>Quốc tịch:</td>
        <td>
            <select name="QuocTich">
            	<option value="VietNam" selected="selected">Việt Nam</option>
                <option value="ThaiLan">Thái Lan</option>
                <option value="Lao" >Lào</option>
            </select>
        </td>
      </tr>
      <tr>
        <td>Điện thoại:</td>
        <td><input type="text" name="txtDienThoai" size="40px" /></td>
      </tr>
      <tr>
        <td>Sở thích:</td>
        <td>
            <input type="checkbox" name="cheSoThich" value="Nhac"/> Nhạc
            <input type="checkbox" name="cheSoThich" value="DuLich"/> Du lịch
            <input type="checkbox" name="cheSoThich" value="XemPhim"/> Xem phim
            
        </td>
      </tr>
      <tr>
        <td colspan="2" style="text-align: center;"><input type="submit" name="Goi" value="Goi" size="12px"/></td>
      </tr>
    </table>
</form>

<p>
<hr />
<?php
if (isset($_POST['Goi']))
{
	$hoTen = $_POST['txtHoTen'];
	$gioiTinh = $_POST['radGioiTinh'];
	$ngaySinh = $_POST['txtNgaySinh'];

	echo '<p>THÔNG TIN HỌC SINH BẠN VỪA NHẬP<p>';
	echo 'Họ và tên: ' .$hoTen. '<br>';
	#Xử lý chỗ giới tính
	if ($gioiTinh == 0)
	    echo 'Giới tính: Nữ<br>';
	else
	    echo 'Giới tính: Nam<br>';
	echo 'Ngày sinh: ' .$ngaySinh. '<br>';
}
?>

</body>
</html>

20. Định dạng bằng css trong Dreamweaver ☝

CSS là một ngôn ngữ dùng để trình bày hình thức thể hiện của các phần tử HTML

Nhúng CSS vào HTML:

1. Inline: mã CSS viết tại thuộc tính style của phần tử HTML

- Các bước thực hiện:

Trên thanh Propertes àTrong Targeted Rule chọn <New Inline Style> àThực hiện định dạng.

Ví dụ:

Đây là ví dụ về CSS dạng inline

</p>

2. Internal: mã CSS trong chính văn bản HTML, nằm trong khối thẻ <style>

- Các bước thực hiện:

Trên thanh Propertes àTrong Targeted Rule chọn <New CSS Rule> àChọn Edit Rule àĐặt tên cho class (ví dụ: TieuDe1 àThiết đặt các thuộc tính cho class àApply àOK

- Cách sử dụng class mới tạo ở trên: Chọn nội dung văn bảng cần định dạng à Propertes àTrong Targeted Rule chọn TieuDe1.

Ví dụ:

Đây là ví dụ về CSS dạng inline

</p>

3. External: mã CSS ở một file riêng biệt (thường là file.css) sau đó nạp vào HTML bằng phần tử html <link> (liên kết css với html)

- Các bước thực hiện:

Tạo mới file my.css àTạo các class định dạng trong file my.css

- Cách sử dụng class có trên file my.css:

Nạp file my.css vào file HTML: Nháy chuột phải tại trang muốn chèn file my.css àchọn CSS Styles àchọn Attach Style sheet… àchọn nơi chứa file my.css đã tạo ở trên àOK.

Ví dụ:

Đây là ví dụ về CSS dạng External

</p>

Menu-ngang

☰ MENU

23/02/2023

Bài 2. Các thẻ HTML cơ bản

NỘI DUNG CHI TIẾT

3. Thẻ <html>☝

5. Thẻ <title> ☝

6. Thẻ <meta/> ☝

7. Thẻ <body> ☝

8. Thẻ <h1> đến <h6> ☝

9. Thẻ <p>, <span>, <i>, <b>,<em>, <strong>, <font>, <br>,<hr>... ☝

10. Các thuộc tính ☝

width: Chiều rộng

heigth: Chiều cao

bgcolor: màu nền

background: hình nền

align: giống hàng (left, right, center)

11. Thẻ <img> ☝

<img src="đường dẫn đến tập tin hình ảnh">

12. Thẻ <a> ☝

Thẻ <a> dùng để tạo một liên kết đến một tài liệu nào đó.

Ví dụ:

<a href="https://www.vnkha.com/">Chuyển đến trang chủ VNKHA.COM</a>

13. Thẻ <video>

14. Thẻ <audio> ☝

<audio controls>
<source src="../file/bell.mp3">
</audio>

15. Thẻ <table> ☝

16. Thẻ <ul>, <li> ☝

Danh sách không có thứ tự, sử dụng cặp thẻ: <ul></ul> và <li></li>, trong đó:

   <ul></ul>:danh sách không có thứ tự
   <li></li>: mục của danh sách.

Ví dụ:

       <ul>
       <li>Trang chủ</li>
       <li>Giới thiệu</li>
       <li>Liên hệ</li>
   </ul>

17. Thẻ <ol>, <li> ☝

Danh sách không có thứ tự, sử dụng cặp thẻ: <ol></ol> và <li></li>, trong đó:

<ol></ol>:danh sách có thứ tự
   <li></li>: mục của danh sách.

Ví dụ:

       <ol>
       <li>Trang chủ</li>
       <li>Giới thiệu</li>
       <li>Liên hệ</li>
   </ol>

18. Thẻ <div> ☝

19. Thẻ <form> ☝

20. Định dạng bằng css trong Dreamweaver ☝

Menu-ngang

☰ MENU

23/02/2023

Bài 2. Các thẻ HTML cơ bản

NỘI DUNG CHI TIẾT

3. Thẻ <html>☝

5. Thẻ <title> ☝

6. Thẻ <meta/> ☝

7. Thẻ <body> ☝

8. Thẻ <h1> đến <h6> ☝

9. Thẻ <p>, <span>, <i>, <b>,<em>, <strong>, <font>, <br>,<hr>... ☝

10. Các thuộc tính ☝

width: Chiều rộng

heigth: Chiều cao

bgcolor: màu nền

background: hình nền

align: giống hàng (left, right, center)

11. Thẻ <img> ☝

<img src="đường dẫn đến tập tin hình ảnh">

12. Thẻ <a> ☝

Thẻ <a> dùng để tạo một liên kết đến một tài liệu nào đó.

Ví dụ:

<a href="https://www.vnkha.com/">Chuyển đến trang chủ VNKHA.COM</a>

13. Thẻ <video>

14. Thẻ <audio> ☝

<audio controls> <source src="../file/bell.mp3"> </audio>

15. Thẻ <table> ☝

16. Thẻ <ul>, <li> ☝

Danh sách không có thứ tự, sử dụng cặp thẻ: <ul></ul> và <li></li>, trong đó: <ul></ul>:danh sách không có thứ tự <li></li>: mục của danh sách.Ví dụ: <ul> <li>Trang chủ</li> <li>Giới thiệu</li> <li>Liên hệ</li> </ul>

17. Thẻ <ol>, <li> ☝

Danh sách không có thứ tự, sử dụng cặp thẻ: <ol></ol> và <li></li>, trong đó:

<ol></ol>:danh sách có thứ tự <li></li>: mục của danh sách.Ví dụ: <ol> <li>Trang chủ</li> <li>Giới thiệu</li> <li>Liên hệ</li> </ol>

18. Thẻ <div> ☝

19. Thẻ <form> ☝

20. Định dạng bằng css trong Dreamweaver ☝

<audio controls>
<source src="../file/bell.mp3">
</audio>

Danh sách không có thứ tự, sử dụng cặp thẻ: <ul></ul> và <li></li>, trong đó:

<ul></ul>:danh sách không có thứ tự
<li></li>: mục của danh sách.

Ví dụ:

<ul>
<li>Trang chủ</li>
<li>Giới thiệu</li>
<li>Liên hệ</li>
</ul>

<ol></ol>:danh sách có thứ tự
<li></li>: mục của danh sách.

Ví dụ:

<ol>
<li>Trang chủ</li>
<li>Giới thiệu</li>
<li>Liên hệ</li>
</ol>