Bài 6 - Xây dựng thanh điều hướng cho website.docx

Bài 6 – Website giới thiệu bản thân Siêu Nhân Lập Trình Web – Học phần 6
Ths. Nguyễn Anh Trọng 1
BÀI 6 – WEBSITE GIỚI THIỆU BẢN THÂN
Mục tiêu bài học
- Tìm hiểu về id và cách sử dụng id
- Tìm hiểu về thẻ liên kết <a>
- Xây dựng menu điều hướng
- Các thuộc tính css
- Vận dụng kiến thức thực hành xây dựng menu ngang cho trang web
1. Định nghĩa thuộc tính ID và cách sử dụng
Thuộc tính id quy định một định danh duy nhất cho một thẻ HTML (giá trị phải là duy nhất trong trang
HTML).
Thuộc tính id hầu hết được sử dụng để trỏ tới một thành phần trang trí trong CSS và được JavaScript sử dụng
để tương tác với thẻ (qua HTML DOM) thông qua giá trị.
Cú pháp:
<element id="id">
Giá trị mô tả:
Giá trị Mô tả
id Một định danh duy nhất cho thẻ. Quy tắt đặt tên:
 Phải chứa ít nhất một ký tự
 Không được có khoảng trắng
 Trong HTML, tất cả các giá trị không phân biệt viết hoa, viết thường
Để sử dụng id trong css, ta sẽ sử dụng từ khóa “#”
Ví dụ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
padding: 20px;
}
#teacherIntro {
background-color: #f2f2f2;
padding: 20px;
border-radius: 10px;
}
#teacherImage {
max-width: 200px;
border-radius: 50%;
}
#coursesList {
list-style-type: none;

padding: 0;
}
.courseItem {
margin-bottom: 10px;
}
</style>
<title>Teacher Introduction</title>
</head>
<body>
<div id="teacherIntro">
<h1>Giới Thiệu Bản Thân</h1>
<img id="teacherImage" src="./images/Ví dụ/teacher_img.jpg" alt="Teacher Image">
<p>
Xin chào! Tôi là <span id="teacherName">Nguyễn Anh Trọng</span>,
một giáo viên đầy nhiệt huyết với nhiều năm kinh nghiệm trong việc giáo dục
công nghệ.
</p>
<div id="teacherDetails">
<h2>Thông Tin Cá Nhân</h2>
<p><strong>Email:</strong> anhtrongteky167@gmail.com</p>
<p><strong>Số điện thoại:</strong> 0344-20-1607</p>
</div>
<div id="teachingExperience">
<h2>Kinh Nghiệm Giảng Dạy</h2>
<ul id="coursesList">
<li class="courseItem">Lập trình web fullstack</li>
<li class="courseItem">Trí tuệ nhân tạo</li>
<li class="courseItem">Lập trình app fullstack</li>
</ul>
</div>
</div>
</body>
</html>
2. Thẻ liên kết
Bạn có thể thấy liên kết xuất hiện trên hầu hết tất cả các website. Liên kết cho phép người dùng chuyển từ
trang này tới một trang khác.
Các liên kết trong HTML được gọi là những siêu liên kết.
Siêu liên kết là một đoạn chữ hoặc một bức ảnh mà bạn có thể nhấn vào để chuyển tới một trang khác.
Cú pháp: Trong HTML, các liên kết được tạo bởi thẻ <a>:
<a href="url">tên liên kết</a>
Ví dụ
<p>Website: <a href="nguyenanhtrong.tech">Coder's Den</a></p>
a) Text-decoration
Khi sử dụng thẻ <a> mặc định phần nội dung sẽ có gach chân. Để tắt chức năng này, ta sẽ cần thay đổi thuộc
tính text-decoration của thẻ <a> thành trạng thái None
Ví dụ

a{
text-decoration: none;
}
b) Anchor Link
Liên kết neo là một liên kết khi bấm vào sẽ dẫn đến một vị trí khác trong cùng tài liệu mà không phải tải lại
hay mở lại tải liệu.
Cú pháp: <a href = “#noi-dung”> Xem nội dung</a>
Chú ý: Để tạo liên kết neo, phải tạo id ở vị trí thẻ mà liên kết chuyển tới.
Ví dụ
<p>Website: <a href="#teacherImage">Coder's Den</a></p>
c) Màu sắc và biểu tượng
Khi bạn di chuột vào một liên kết, sẽ có hai điều thường xảy ra:
 Chuột sẽ chuyển từ dạng mũi tên sang hình một bàn tay nhỏ
 Màu của liên kết sẽ thay đổi
Mặc định, trên các trình duyệt liên kết sẽ được hiển thị như sau:
 Một liên kết chưa được nhấn vào sẽ được gạch chân và có màu xanh
 Một liên kết đã được nhấn vào sẽ được gạch chân và có màu tím
 Khi một liên kết được nhấn sẽ được gạch chân và có màu đỏ
Bạn có thể thay đổi kiểu mặc định bằng cách sử dụng CSS:
Ví dụ
a:link {
color: #000000;
background-color: transparent;
text-decoration: none;}
a:visited {
color: #000000;
text-decoration: none;}
a:hover {
color: #ff0000;
text-decoration: underline;
}
a:active {
color: #ff0000;
text-decoration: underline;
}
d) Thuộc tính target
Thuộc tính target quy định vị trí mở của trang được liên kết.

Trong ví dụ dưới đây liên kết sẽ được mở trong một cửa sổ hoặc một tab mới:
Ví dụ
<p>Website: <a href="nguyenanhtrong.tech" target="_blank">Coder's Den</a></p>
Target Miêu tả
_blank Mở liên kết trong một cửa sổ hoặc một tab mới
_self Mở liên kết tại chính cửa sổ hiện tại (Mặc định)
_parent Mở liên kết tại frame ngoài
_top Mở liên kết tại cửa sổ hiện tại (Thoát ra khỏi frame nếu đang ở trong frame).
Nếu trang của bạn đang nằm ở trong một frame, bạn có thể dùng target=”_top” để thoát khỏi frame.
e) Tạo liên kết trong ảnh
Cách phổ biến nhất sử dụng ảnh trong liên kết là:
Ví dụ
<a href="teky.edu.vn"><img id="teacherImage" src="./images/Ví dụ/teacher_img.jpg"
alt="Teacher Image"></a>
Tổng kết nội dung thẻ liên kết:
 Sử dụng thẻ <a> để tạo một liên kết trong HTML
 Sử dụng thuộc tính href để quy định địa chỉ của liên kết trong HTML
 Sử dụng thuộc tính target để quy định vị trí mở của trang được liên kết trong HTML
 Sử dụng thẻ <img> (trong thẻ <a>) để sử dụng ảnh liên kết trong HTML
 Sử dụng thuộc tính id để tạo một chỉ mục trong trang HTML
 Sử dụng thuộc tính href (href=”#value”) để chuyển tới chỉ mục trong HTML
3. Menu trong thiết kế website
Menu trong website là một trình đơn hiển thị các liên kết trong giao diện của website.
Có 2 loại menu cơ bản:
 Menu ngang
 Menu dọc
Các bước tạo menu
 Bước 1: Sử dụng thẻ <ul>, <li>, <a>, <div> để tạo thành danh sách các mục bên trong menu.
Ví dụ

<style>
#header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #333;
padding: 10px;
border-radius: 10px;

color: #fff;
}
#logo {
max-width: 100px;
border-radius: 70%;
}
#menu {
list-style-type: none;
display: flex;
margin: 0;
padding: 0;
}
#menu li {
margin-right: 20px;
position: relative;
}
#menu a {
text-decoration: none;
color: #fff;
padding: 10px;
display: block;
}
</style>

<div id="header">
<img id="logo" src="./images/coders-den.png" alt="Logo">
<ul id="menu">
<li><a href="#">Trang Chủ</a></li>
<li>
<a href="#">Kinh nghiệm</a>
<ul>
<li><a href="#">Lập trình web fullstack</a></li>
<li><a href="#">Trí tuệ nhân tạo</a></li>
<li><a href="#">Lập trình app fullstack</a></li>
</ul>
</li>
<li><a href="#">Liên Hệ</a></li>
</ul>
</div>
 Bước 2: Sử dụng CSS để thiết lập hiển thị bằng các thuộc tính: display, position, color, background-
color, …
Ví dụ

<style>
/* (Những phần CSS từ Bước 1 ở trên) */
#menu div {
display: none;
position: absolute;
top: 100%;
left: 0;
border-radius: 0 0 10px 10px;
}
#menu li:hover div {
display: block;
}
</style>
 Bước 3: Tạo menu con sử dụng thuộc tính position.
 Bước 4: Sử dụng thuộc tính hover để tạo ra hiệu ứng khi di chuột vào các mục trong menu.

Ví dụ

<style>
#menu ul li {
margin: 0;
padding: 10px;
}
#menu ul a {
padding: 10px;
}
#menu li:hover a {
border-radius: 5px;
}
</style>
THỰC HÀNH
Sử dụng các kiến thức đã học ở trên hãy thực hiện trang web giới thiệu bản thân:

Bài 6 - Xây dựng thanh điều hướng cho website.docx

Recommended

Recommended

More Related Content

Similar to Bài 6 - Xây dựng thanh điều hướng cho website.docx

Similar to Bài 6 - Xây dựng thanh điều hướng cho website.docx (20)

Bài 6 - Xây dựng thanh điều hướng cho website.docx