MỤC TIÊU
- Biết cách sử dụng các thẻ căn bản trong html
LÝ THUYẾT
| Thẻ |
Ví Dụ |
Diễn Giải |
| title |
<title>Tìm hiểu CSS External</title> |
Xác định tiêu đề của trang web |
| h1 ... h6 |
<h2>Hoa hồng Bungari – Tế Hanh</h2>
|
Tạo những tiêu đề trang web, số càng cao chữ càng nhỏ |
| p |
<p>Đây là văn bản</p>
|
Xác định một đoạn văn bản, có khảng cách giữa các đoạn |
| div |
<div>Văn bản</div>
|
Xác định một đoạn văn bản, KHÔNG CÓ khảng cách giữa các đoạn |
| br |
Mỗi người một vẻ mười phân vẹn mười <br>
|
Xuống dòng |
| hr |
<hr>
|
Tạo đường kẻ nằm ngang |
| img |
<img src="img/hinhcute1.jpg" alt="" >
|
Chèn ảnh |
| em |
<em>đoạn văn bản sẽ được in nghiêng</em>
|
in nghiêng |
| i |
|
in nghiêng |
| b |
|
int đậm |
| strong |
<strong>đoạn văn bản sẽ được in đâm</strong>
|
int đậm |
| del |
<del>Giá cũ</del>
|
tạo đường kẻ ngang lên giữa văn bản |
| s |
|
tạo đường kẻ ngang lên giữa văn bản |
| ins |
|
Tạo một đường gạch chân lên văn bản |
| center |
|
Căn giữa văn bản, hình |
| sub |
H<sub>2</sub>O
|
Tạo văn bản có kích thước nhỏ, nằm ở khoảng nửa dưới văn bản bình
thường
|
| sup |
x<sup>2</sup>
|
Tạo văn bản có kích thước nhỏ, nằm ở khoảng nửa trên văn bản bình
thường(ghi dấu mũ)
|
|
|
|
YÊU CẦU:
THỰC HIỆN
Bài 1:
Gợi ý: Tạo thư mục img gồm các hình có tên:
logo.jpg, hinh1.jpg, dùng margin-right: 20px cho hinh1.jpg để tạo khoảng cách giữa hình và chữ<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lab 1 | Bài 1</title>
</head>
<body>
<img src="img/logo.jpg" alt="logo">
<hr>
<h2>XÂY DỰNG TRANG WEB</h2>
<img src="img/hinh1.jpg" alt="Nếu không tìm thấy hình sẽ hiển thị dòng này" width="300px" style="float: left; margin-right: 20px;">
<p>Cập nhật tin tức mới và nóng nhất về Đời sống - Xã hội, Kinh tế, Thế giới, Thể thao, Giải trí, Công nghệ và nhiều lĩnh vực khác</p>
</body>
</html>
Bài 2:
Gợi ý: Tạo thư mục img gồm các hình có tên: hinhcute1.jpg, hinhcute2.jpg, hinhcute3.jpg, hinhcute4.jpg; noel1.jpg, noel2.jpg, noel3.jpg, noel4.jpg
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lab 1 | Bài 2</title>
</head>
<body>
<center>
<h1>ALBUM ẢNH </h1>
<hr>
<img src="img/hinhcute1.jpg" alt="" height="200px" width="150px">
<img src="img/hinhcute2.jpg" alt="" height="200px" width="150px">
<img src="img/hinhcute3.jpg" alt="" height="200px" width="150px">
<img src="img/hinhcute4.jpg" alt="" height="200px" width="150px">
<hr>
<img src="img/noel1.jpg" alt="" height="200px" width="150px">
<img src="img/noel2.jpg" alt="" height="200px" width="150px">
<img src="img/noel3.jpg" alt="" height="200px" width="150px">
<img src="img/noel4.jpg" alt="" height="200px" width="150px">
</center>
</body>
</html>
Bài 3:
Tạo file lab2.1_baitho.html với nội dung như dưới
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lab 2 | Bài 1</title>
</head>
<body>
<em>
Màu <strong>tím</strong> hoa sim màu <strong>tím</strong> nhớ <br>
Màu <strong>tím</strong> lòng người <strong>tím</strong> ước mơ <br>
Ôi <strong>tím</strong> thủy chung màu đẹp quá <br>
Màu <strong>tím</strong> chiều ta <strong>tím</strong> ý thơ <br> <br>
Màu tim hoa sim tim <strong>tím</strong> <mark>Huế</mark> <br>
Bầu trời tim <strong>tím tím</strong> tim tôi
</em>
</body>
</html>
Bài 4:
Tạo file lab2.1_phuongtrinh.html với nội dung như dưới
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lab 2 | Bài 1 Phương Trình</title>
</head>
<body>
<h1>Phương trình</h1>
<p>a <sub>0</sub> x <sup> N </sup> + a <sub>1</sub> x <sup> N+1 </sup> + ... a <sub>N</sub> x <sup> 0 </sup> = 0 </p>
</body>
</html>
Bài 5:
Gợi ý: Tạo thư mục img gồm các hình có tên: logo.jpg
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lab 2 | Tổng hợp</title>
</head>
<body>
<img src="img/logo.jpg" alt="">
<hr>
<a href="#">Home</a>
<a href="lab2.1_baitho.html">Bài thơ</a>
<a href="lab2.1_phuongtrinh.html">Phương trình</a>
</body>
</html>
Xong!
