- Tạo file "index.php" trong thư mục "ban_hang" (bạn có thể tạo file txt rồi đổi đuôi thành file php )
- Bạn mở file "index.php" bằng phần mềm notepad++ , trong file này bạn chọn "Encode in UTF-8 without Bom" , lựa chọn này là để gõ dấu tiếng việt có dấu trong notepad++ (các tập tin khác trong web cũng nên có lựa chọn này) :
- Bạn sao chép và dán đoạn code này vào file "index.php" :
<html>
<head>
<meta charset="UTF-8">
<title>Web bán hàng</title>
</head>
<body>
</body>
</html>
<head>
<meta charset="UTF-8">
<title>Web bán hàng</title>
</head>
<body>
</body>
</html>
+ Thẻ html dùng để khai báo code dùng mã html
+ Thẻ head dùng để chứa các file css , js (css dùng để định nghĩa giao diện , js định nghĩa hiệu ứng web)
+ Thẻ body dùng để viết nội dung web
+ Dòng code <meta charset="UTF-8"> là để khai báo chữ tiếng việt có dấu
+ Thẻ title dùng để viết tên web trong tab trình duyệt web (như Firefox , chrome ... ) mỗi khi các bạn lướt vào web
+ Thẻ head dùng để chứa các file css , js (css dùng để định nghĩa giao diện , js định nghĩa hiệu ứng web)
+ Thẻ body dùng để viết nội dung web
+ Dòng code <meta charset="UTF-8"> là để khai báo chữ tiếng việt có dấu
+ Thẻ title dùng để viết tên web trong tab trình duyệt web (như Firefox , chrome ... ) mỗi khi các bạn lướt vào web
- Bạn sao chép và dán đoạn code này trong cặp thẻ body :
<table width="990px">
<tr>
<td colspan="3">Banner</td>
</tr>
<tr>
<td colspan="3">Menu ngang</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>
<tr>
<td colspan="3">Banner</td>
</tr>
<tr>
<td colspan="3">Menu ngang</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>
Sau đó bạn truy cập vào link web http://localhost/ban_hang/ , bạn sẽ nhận được kết quả sau :
+ Ở phần này , các bạn dùng thẻ table , tr , td để tạo bảng
+ Thẻ table là tạo bảng , thẻ tr là tạo dòng , thẻ td là tạo ô
+ Bạn dùng thuộc tính 'width' để định nghĩa chiều rộng của bảng và của ô
+ Trong code trên là tạo bảng với độ dài là 990px ( code : width="990px" ) , tạo cột trái và cột phải có độ dài 170px , ( code : width="170px" ) , còn cột giữa độ dài là 650px ( code : width="650px" )
+ Dùng thuộc tính colspan để gộp ô lại , ở đây code này dùng colspan="3" để gộp 3 ô ở các phần banner , menu ngang và footer
+ Sở dĩ colspan="3" là vì code này tạo ra 3 cột là cột trái , cột giữa và cột phải ; có thể hiểu là các dòng tr trong bảng table phải đồng bộ với nhau , nếu không đồng bộ thì phải có thuộc tính colspan
+ Thẻ table là tạo bảng , thẻ tr là tạo dòng , thẻ td là tạo ô
+ Bạn dùng thuộc tính 'width' để định nghĩa chiều rộng của bảng và của ô
+ Trong code trên là tạo bảng với độ dài là 990px ( code : width="990px" ) , tạo cột trái và cột phải có độ dài 170px , ( code : width="170px" ) , còn cột giữa độ dài là 650px ( code : width="650px" )
+ Dùng thuộc tính colspan để gộp ô lại , ở đây code này dùng colspan="3" để gộp 3 ô ở các phần banner , menu ngang và footer
+ Sở dĩ colspan="3" là vì code này tạo ra 3 cột là cột trái , cột giữa và cột phải ; có thể hiểu là các dòng tr trong bảng table phải đồng bộ với nhau , nếu không đồng bộ thì phải có thuộc tính colspan
- Thêm thẻ center trước thẻ table để canh web vào giữa , như vậy hết phần này thì code file "index.php" sẽ như sau :
<html>
<head>
<meta charset="UTF-8">
<title>Web bán hàng</title>
</head>
<body>
<center>
<table width="990px">
<tr>
<td colspan="3">Banner</td>
</tr>
<tr>
<td colspan="3">Menu ngang</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>
</head>
<body>
<center>
<table width="990px">
<tr>
<td colspan="3">Banner</td>
</tr>
<tr>
<td colspan="3">Menu ngang</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>
