Cách sử dụng phần tử trong HTML - 15 - Giải pháp website, App & CRM

Cách sử dụng phần tử trong HTML – 15

1) Chức năng và cách sử dụng phần tử <div>

– Phần tử <div> là một phần tử khối, mặc định thì phần tử khối này không có bất kỳ một định dạng gì, cho nên nó thường được dùng để làm thùng chứa cho các phần tử khác.

Ví dụ:

<!DOCTYPE html>
<html>
<head>
	<title>Tiêu đề của trang web</title>
	<meta charset="utf-8">
</head>
<body>
	<div>
		<u>Cách sử dụng phần tử div</u>
		<i>Cách sử dụng phần tử span</i>
		<p>Điểm khác giữa phần tử div và phần tử span</p>
		<h3>Tìm hiểu chức năng của phần tử div và phần tử span</h3>
	</div>
</body>
</html>

Đặt bốn phần tử <u>, <i>, <p>, <h3> nằm bên trong phần tử <div>

– Như các bạn đã thấy, việc chúng ta có đặt bốn phần tử <u>, <i>, <p>, <h3> bên trong phần tử <div> hay không thì cũng không ảnh hưởng gì đến bốn phần tử này, bởi vì mặc định phần tử <div> không có bất kỳ một định dạng nào cả.

Vậy, câu hỏi được đặt ra ở đây là: Chúng ta lấy phần tử <div> chứa các phần tử khác để làm gì !?

ĐỂ TIỆN CHO VIỆC ĐỊNH DẠNG

Ví dụ:

– Tôi có một đoạn mã như bên dưới:

<!DOCTYPE html>
<html>
<head>
	<title>Xem ví dụ</title>
	<meta charset="utf-8">
</head>
<body>
	<u>Phần tử div trong HTML</u>
	<i>Phần tử span trong HTML</i>
	<p>Cách sử dụng phần tử div để thiết kế bố cục trang web</p>
	<s>Nhóm các phần tử vào bên trong phần tử div</s>
</body>
</html>

– Bây giờ, tôi muốn thiết lập kích cỡ chữ 30 pixel cho tất cả các phần tử ở phía trên, thay vì phải định dạng từng phần tử thì tôi sẽ đặt chúng vào một phần tử <div> rồi định dạng cho phần tử <div>

<!DOCTYPE html>
<html>
<head>
	<title>Xem ví dụ</title>
	<meta charset="utf-8">
</head>
<body>
	<div style="font-size:30px">
		<u>Phần tử div</u>
		<i>Phần tử span</i>
		<p>Sử dụng phần tử div để thiết kế bố cục trang web</p>
		<s>Nhóm các phần tử vào bên trong phần tử div</s>
	</div>
</body>
</html>

– Để thiết kế một trang web có bố cục ba phần giống như minh họa ở phía trên thì chúng ta cần phải sử dụng ba phần tử <div> để tạo ba khối riêng biệt.

<html>
   <head>
      <title>Xem ví dụ</title>
      <meta charset="utf-8">
      <link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">
      <style>body{margin:0px;font-family:'Roboto Slab';}#header{background-color:#39e4c2;text-align:center;padding:5px 0px;}#content{padding:10px 20px;}#footer{background-color: #ddd;padding:15px;text-align: center;}</style>
   </head>
   <body>
      <div id="header">
         <h2 style="margin-top:5px;margin-bottom:-10px;">HỌC WEBSITE CƠ BẢN</h2>
         <p style="margin-bottom:5px">(THIẾT KẾ WEBSITE QUÁ DỄ)</p>
      </div>
      <div id="content">
         <h3><u>BÀI HƯỚNG DẪN SỐ 15</u></h3>
         <p>. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . </p>
      </div>
      <div id="footer">Thông tin bản quyền: <a href="https:/dsmart.vn">dsmart.vn</a></div>
   </body>
</html>

2) Chức năng và cách sử dụng phần tử <span>

– Phần tử <span> là một phần tử nội tuyến, mặc định thì phần tử nội tuyến này không có bất kỳ một định dạng gì, cho nên nó thường được dùng để làm thùng chứa cho những phần tử nội tuyến khác (chủ yếu là văn bản) để định dạng.

Ví dụ:

<!DOCTYPE html>
<html>
<head>
	<title>Xem ví dụ</title>
	<meta charset="utf-8">
</head>
<body>
	<p>- Tài liệu <span style="font-size:30px">học</span> HTML</p>
	<p>- Từ <span style="color:red">cơ bản</span> đến nâng cao</p>
</body>
</html>