Thứ Năm, 23 tháng 6, 2016

Phần 1 - Tạo khung bố cục web

- Tạo thư mục "ban_hang" trong thư mục "htdocs" của xampp

- 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>

+ 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

- 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>

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ê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>