Giáo trình của FPT-aptech đây. Mọi người cùng tham khảo nhé
Building Dynamic Website Bài 2 Sử dụng danh sách và bảng Làm việc với Frame và Form Mục tiêu: Kết thúc bài học này bạn có thể: Sử dụng Danh sách trong tài liệu HTML Sử dụng Bảng trong tài liệu HTML Nhúng video vào trong tài liệu HTML Sử dụng inline Frame Sử dụng Form và các phần tử của Form Các bước được mô tả chi tiết dưới đây sẽ giúp bạn nắm được và đạt được các mục tiêu nêu trên. Đề nghị bạn thực hiện đầy đủ và cẩn thận theo các bước này. Trước hết bạn cần thực hiện các yêu cầu sau: 1. Tạo thư mục BDWS là thư mục con của thư mục sau C:\Temp, tạo tiếp thư mục Session2 trong thư mục BDWS và lưu các tài liệu HTML của bạn vào đây. 2. Mở chương trình Textpad++ hoặc Textpad đã được cài đặt sẵn trong máy tính của bạn. 3. Sử dụng Textpad++ để soạn thảo các tài liệu HTML. 4. Sử dụng trình duyệt (IE, Firefox hoặc Chrome) để chạy các tài liệu HTML này. Phần I: Giáo viên nhắc lại các nội dung đã giảng trên lớp về: • Danh sách\Bảng • Frame và Form Hướng dẫn các bước căn bản để: • tạo một danh sách trong tài liệu HTML • tạo bảng trong một tài liệu HTML • sử dụng inline Frame • tạo form và các thành phần căn bản có trong form Phần II: Ví dụ 1: Sử dụng danh sách lồng nhau <html> <head> <title>Using List</title> </head> <body> <h2>A nested List:</h2> <ul> 1 Building Dynamic Website <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea <ul> <li>China</li> <li>Africa</li> </ul> </li> </ul> </li> <li>Milk</li> </ul> </body> </html> Hình 2.1: Kết quả của VD 1 Ví dụ 2: Tài liệu HTML chứa bảng với hai dòng và 3 cột <html> <head> <title>Using Table</title> </head> <body> <h3>Table headers:</h3> <table border="1" cellpadding="6" cellspacing="6"> 2 Building Dynamic Website <tr bgcolor="cyan"> <th>Name</th> <th>Email</th> <th>Telephone</th> </tr> <tr bgcolor="gray"> <td>Bill Gates</td> <td>billgates@hotmail.com</td> <td>555 77 855</td> </tr> </table> </body> </html> Hình 2.2: Kết quả của VD 2 Ví dụ 3: Bảng với các ô cùng cột được gộp với nhau <html> <head> <title>Using Table with Rowspan</title> </head> <body> <table border="2" cellpading="4"> <tr> <th rowspan="3">Production</th> <td>West Region</td> <td>1500</td> </tr> <tr> 3 Building Dynamic Website <td>South Region</td> <td>3869</td> </tr> <tr> <td>North Region</td> <td>6283</td> </tr> <tr> <th rowspan="3">Sales</th> <td>James Gonzalez</td> <td>4927</td> </tr> <tr> <td>Tim Jones</td> <td>7676</td> </tr> <tr> <td>Danny Zeller</td> <td>5989</td> </tr> </table> </body> </html> Hình 2.3: Kết quả của VD 3 Ví dụ 4: Tài liệu HTML nhúng video của Youtube <html> <head> <title>Embedding Video from YouTube </title> 4 Building Dynamic Website </head> <body> <h2>Embedding Video from YouTube</h2> <p> <iframe title="YouTube video player" type="text/html" width="480" height="390" src="http://www.youtube.com/embed/dcLMH8pwusw" frameborder="0"> </iframe> </p> </body> </html> Hình 2.4: Kết quả của VD 4 Ví dụ 5: Tài liệu HTML chứa form đơn giản <html> <head> <title>Đăng ký thông tin</title> </head> <body> 5 Building Dynamic Website <form action="#" method="post"> <center> <h2>ĐĂNG KÝ THÔNG TIN</h2> </center> <p> Họ và tên: <input type="text" name="EName" size="30" maxlength="30" value=""> </p> <p> Học vấn: <input type="checkbox" name="Graduate" checked>Đại học <input type="checkbox" name="Post Graduate">Sau Đại học </p> <p> Giới tính: <input type="radio" name="Gender" value="Male" checked>Nam <input type="radio" name="Gender" value="Female">Nữ </p> <p> Mức lương:<input type="text" name="Salary" size="10" value=""> </p> <p> Thông tin thêm:<textarea rows=3 cols=30>Mời bạn nhập thêm thông tin</textarea> </p> <p> Quốc gia: <select name="Country"> <option>Việt Nam</option> <option selected>Hoa Kỳ</option> </select> </p> <p align="center"> <input type="submit" value="Đăng ký"> <input type="reset" value="Nhập lại"> </p> </form> </body> </html> 6 Building Dynamic Website Hình 2.5: Kết quả của VD 5 Ví dụ 6: Tài liệu HTML với inline Frame Sử dụng inline Frame để nhúng trang web aptech.ac.vn vào tài liệu HTML. <html> <head> <title>Using Inline Frame</title> </head> <body> <h3>It has been good fun. You have been learning about inline frame</h3> <iframe src="http://aptech.ac.vn" width="500" height="300" scrolling="auto" frameborder="1">[The browser does not support frames or is currently configured not to display frames. These are the <a href="http://aptech.ac.vn">contents</a>] </iframe> <h3><font color = "hotpink">The above is an inline frame</h3><font> <body> </html> 7 Building Dynamic Website Hình 2.6: Kết quả của VD 6 8 Building Dynamic Website Phần III: Bài tập tự làm 1. Tạo một tài liệu HTML sử dụng bảng để có kết quả như sau: Hình 2.7: Kết quả của bài 1 2. Tạo tài liệu HTML chứa form như sau: Hình 2.8: Form của bài 2 3. Tạo tài liệu HTML theo mẫu sau: 9 Building Dynamic Website Hình 2.9: Kết quả của bài 3 4. Tạo form theo mẫu sau: Hình 2.10: Kết quả của bài 4 1 . Làm vi c với Frame và Form Mục tiêu: Kết thúc bài học này bạn có thể: Sử dụng Danh sách trong tài liệu HTML Sử dụng Bảng trong tài liệu HTML Nhúng video. quả của VD 3 Ví dụ 4: Tài liệu HTML nhúng video của Youtube <html> <head> <title>Embedding Video from YouTube </title> 4 Building