<img src="hinh_anh/banner.JPG" >
+ Phần ảnh "banner.jpg" thì bạn sẽ được nhận trong file đính kèm cùng tài liệu này (Tên ảnh là 'banner.JPG')
+ Trong thư mục "ban_hang" , bạn tạo thêm thư mục "hinh_anh" rồi sao chép file ảnh banner vào
+ Thuộc tính src trong đoạn code trên chính là định nghĩa đường dẫn file ảnh
+ Lưu ý rằng bạn bỏ chữ "Banner" trong ô banner đi
+ Trong thư mục "ban_hang" , bạn tạo thêm thư mục "hinh_anh" rồi sao chép file ảnh banner vào
+ Thuộc tính src trong đoạn code trên chính là định nghĩa đường dẫn file ảnh
+ Lưu ý rằng bạn bỏ chữ "Banner" trong ô banner đi
- Nếu làm đúng thì bạn nhận được kết quả như sau :
- Kế tiếp tại ô menu ngang thì bạn xóa đi chữ "Menu ngang" và thêm vào đoạn code sau :
<div class="menu_ngang">
<a href="">Trang chủ</a>
<a href="">Giới thiệu</a>
<a href="">Sản phẩm</a>
<a href="">Hướng dẫn mua hàng</a>
<a href="">Liên hệ</a>
</div>
<a href="">Trang chủ</a>
<a href="">Giới thiệu</a>
<a href="">Sản phẩm</a>
<a href="">Hướng dẫn mua hàng</a>
<a href="">Liên hệ</a>
</div>
+ Thẻ a dùng để định nghĩa liên kết web , phần đường dẫn web sẽ nằm
trong thuộc tính href (hiện tại code này thì để liên kết là rỗng) , còn
nội dung liên kết nằm ở giữa thẻ a
+ Như vậy bạn tạo được 5 liên kết web
+ Ở đây chú ý thẻ div ( code : <div class="menu_ngang"> ) , dùng để nói lên phần địa chỉ css để ta định nghĩa giao diện menu ở phần sau
+ Như vậy bạn tạo được 5 liên kết web
+ Ở đây chú ý thẻ div ( code : <div class="menu_ngang"> ) , dùng để nói lên phần địa chỉ css để ta định nghĩa giao diện menu ở phần sau
- Bạn nhận được kết quả như sau :
- Kế tiếp bạn thêm phần code css này vào giữa thẻ head và sau thẻ title :
<style type="text/css" >
div.menu_ngang a
{
color:blue;
margin-left: 10px;
margin-right: 10px;
text-decoration: none;
font-size:20px;
}
div.menu_ngang a:hover
{
color:red
}
</style>
div.menu_ngang a
{
color:blue;
margin-left: 10px;
margin-right: 10px;
text-decoration: none;
font-size:20px;
}
div.menu_ngang a:hover
{
color:red
}
</style>
+ Đây là code css để định nghĩa giao diện menu ngang lại 1 chút
+ Cách ghi code div.menu_ngang a là dùng định nghĩa giao diện thẻ a trong thẻ div có tên class là 'menu_ngang'
+ Cách ghi code div.menu_ngang a:hover là dùng định nghĩa giao diện thẻ a trong thẻ div có tên class là 'menu_ngang' khi ta rê chuột vào thẻ a (rê chuột vào liên kết đó)
+ Thuộc tính 'color' là định nghĩa màu sắc của liên kết
+ Thuộc tính 'margin-left' là định nghĩa khoảng cách cách trái của liên kết
+ Thuộc tính 'margin-right' là định nghĩa khoảng cách cách phải của liên kết
+ Thuộc tính 'text-decoration' là định nghĩa gạch dưới của liên kết , ở đây giá trị là 'none' , tức là không có gạch dưới
+ Thuộc tính 'font-size' để định nghĩa kích cỡ chữ
+ Như vậy bạn đã tạo ra liên kết có chữ màu xanh và khi rê chuột vào thì là màu đỏ
+ Cách ghi code div.menu_ngang a là dùng định nghĩa giao diện thẻ a trong thẻ div có tên class là 'menu_ngang'
+ Cách ghi code div.menu_ngang a:hover là dùng định nghĩa giao diện thẻ a trong thẻ div có tên class là 'menu_ngang' khi ta rê chuột vào thẻ a (rê chuột vào liên kết đó)
+ Thuộc tính 'color' là định nghĩa màu sắc của liên kết
+ Thuộc tính 'margin-left' là định nghĩa khoảng cách cách trái của liên kết
+ Thuộc tính 'margin-right' là định nghĩa khoảng cách cách phải của liên kết
+ Thuộc tính 'text-decoration' là định nghĩa gạch dưới của liên kết , ở đây giá trị là 'none' , tức là không có gạch dưới
+ Thuộc tính 'font-size' để định nghĩa kích cỡ chữ
+ Như vậy bạn đã tạo ra liên kết có chữ màu xanh và khi rê chuột vào thì là màu đỏ
- Vì phần menu ngang hơi khít nên cần kéo dài chiều dài ra 1 chút , để làm điều này ta thêm code height="50px" vào ô td của phần menu ngang (thuộc tính 'height' để quy định chiều cao )
- Kết thúc phần này thì file 'index.php' có nội dung như sau
<html>
<head>
<meta charset="UTF-8">
<title>Web bán hàng</title>
<style type="text/css" >
div.menu_ngang a
{
color:blue;
margin-left: 10px;
margin-right: 10px;
text-decoration: none;
font-size:20px;
}
div.menu_ngang a:hover
{
color:red
}
</style>
</head>
<body>
<center>
<table width="990px">
<tr>
<td colspan="3"><img src="hinh_anh/banner.JPG" ></td>
</tr>
<tr>
<td colspan="3" height="50px" >
<div class="menu_ngang">
<a href="">Trang chủ</a>
<a href="">Giới thiệu</a>
<a href="">Sản phẩm</a>
<a href="">Hướng dẫn mua hàng</a>
<a href="">Liên hệ</a>
</div>
</td>
</tr>
<tr>
<td width="170px">Cột trái</td>
<td width="650px">Cột giữa</td>
<td width="170px">Cột phải</td>
</tr>
<tr>
<td colspan="3">Footer</td>
</tr>
</table>
</center>
</body>
</html>
<head>
<meta charset="UTF-8">
<title>Web bán hàng</title>
<style type="text/css" >
div.menu_ngang a
{
color:blue;
margin-left: 10px;
margin-right: 10px;
text-decoration: none;
font-size:20px;
}
div.menu_ngang a:hover
{
color:red
}
</style>
</head>
<body>
<center>
<table width="990px">
<tr>
<td colspan="3"><img src="hinh_anh/banner.JPG" ></td>
</tr>
<tr>
<td colspan="3" height="50px" >
<div class="menu_ngang">
<a href="">Trang chủ</a>
<a href="">Giới thiệu</a>
<a href="">Sản phẩm</a>
<a href="">Hướng dẫn mua hàng</a>
<a href="">Liên hệ</a>
</div>
</td>
</tr>
<tr>
<td width="170px">Cột trái</td>
<td width="650px">Cột giữa</td>
<td width="170px">Cột phải</td>
</tr>
<tr>
<td colspan="3">Footer</td>
</tr>
</table>
</center>
</body>
</html>
- Và đây là kết quả nhận được từ code :
