1. Giao diện
2. Cấu trúc các file
3. Code file index.html
<!DOCTYPE html><html> <head> <title>index</title> <meta charset="UTF-8"/> <link rel="stylesheet" href="myCSS.css"/> </head> <body> <!--Nhúng file tiêu đề trên--> <iframe class="iframe-header" src="header.html" scrolling="no" style="text-align: center;"></iframe>
<!--Nhúng file menu ngang--> <iframe class="iframe-menu-ngang" src="menu-ngang.html" scrolling="no" ></iframe> <!--Nhúng file menu trai--> <iframe class="iframe-menu-left" src="menu-left.html" scrolling="no" ></iframe> <!--HIỂN THỊ NỘI DUNG bằng cách nhúng thẻ iframe với thuộc tính name="hien-thi"--> <iframe class="iframe-noi-dung" src="trang-chu.html" name="hien-thi"></iframe> <!--Nhúng file menu trai--> <iframe class="iframe-footer" src="footer.html" scrolling="no" ></iframe> </body></html>4. Code file myCSS.css
body{ font-size: 14px; color: green; font-family: Arial;}
.iframe-noi-dung{ float: left; width: 80%; height: 500px; margin: 5px; padding: 5px; border: 2px solid green;}
.iframe-header{ width: 97%; height: 80px; margin: 5px; /*K. cách bên ngoài khung*/ padding: 5px;/*K. cách bên trong khung*/ border: 2px solid green; /*Kẻ viền*/ font-size: 30px; background:#98FB98;}.iframe-menu-left{ float: left; width: 15%; height: 500px; margin: 5px; padding: 5px; border: 2px solid green; background:#98FB98;}.iframe-menu-ngang{ float: left; width: 97%; height: 25px; margin: 5px; padding: 5px; border: 2px solid green; background:#4169E1; }.menu-ngang{ color: white;}/*Định dạng Thẻ <a> trong .menu-ngang*/.menu-ngang a{ color: gold;}.iframe-footer{ float: left; width: 97%; height: 50px; margin: 5px; /*K. cách bên ngoài khung*/ padding: 5px;/*K. cách bên trong khung*/ border: 2px solid green; /*Kẻ viền*/ text-align: center; padding-top: 20px; background:#98FB98;}
5. Code file header.html
body{ font-size: 14px; color: green; font-family: Arial;}
.iframe-noi-dung{ float: left; width: 80%; height: 500px; margin: 5px; padding: 5px; border: 2px solid green;}
.iframe-header{ width: 97%; height: 80px; margin: 5px; /*K. cách bên ngoài khung*/ padding: 5px;/*K. cách bên trong khung*/ border: 2px solid green; /*Kẻ viền*/ font-size: 30px; background:#98FB98;}.iframe-menu-left{ float: left; width: 15%; height: 500px; margin: 5px; padding: 5px; border: 2px solid green; background:#98FB98;}.iframe-menu-ngang{ float: left; width: 97%; height: 25px; margin: 5px; padding: 5px; border: 2px solid green; background:#4169E1; }.menu-ngang{ color: white;}/*Định dạng Thẻ <a> trong .menu-ngang*/.menu-ngang a{ color: gold;}.iframe-footer{ float: left; width: 97%; height: 50px; margin: 5px; /*K. cách bên ngoài khung*/ padding: 5px;/*K. cách bên trong khung*/ border: 2px solid green; /*Kẻ viền*/ text-align: center; padding-top: 20px; background:#98FB98;}<!DOCTYPE html><html> <head> <title>Header</title> <meta charset="UTF-8"/> <link rel="stylesheet" href="myCSS.css"/> </head> <body> <div style="display: flex; justify-content: center; text-align: center;"> <span><img src="hinh/logo.jpg" width="70px" height="70px"/> </span> <span style="padding-top: 20px; color: red; font-size: 30px;">Shop Điện máy PHÚC KHANG</span> </div> </body></html>6. Code file menu-ngang.html
<!DOCTYPE html><html> <head> <title>Menu ngang</title> <meta charset="UTF-8"/> <link rel="stylesheet" href="myCSS.css"/> </head> <body> <div class="menu-ngang"> <!-- Hiển thị các trang bằng iframe có tên name="hien-thi" ở trang index.html bằng thuộc tính target="hien-thi" trong thẻ a --> <span><a href="trang-chu.html" target="hien-thi">Trang chủ</a> |</span> <span><a href="gioi-thieu.html" target="hien-thi">Giới thiệu</a> |</span> <span><a href="lien-he.html" target="hien-thi">Liên hệ</a> |</span> </div> </body></html>7. Code file menu-left.html
<!DOCTYPE html><html> <head> <title>Menu-left</title> <meta charset="UTF-8"/> <link rel="stylesheet" href="myCSS.css"/> </head> <body> <p>SẢN PHẨM</p> <ul> <!-- Hiển thị các trang bằng iframe có tên name="hien-thi" ở trang index.html bằng thuộc tính target="hien-thi" trong thẻ a --> <li><a href="ti-vi.html" target="hien-thi">Ti vi</a></li> <li><a href="tu-lanh.html" target="hien-thi">Tủ lạnh</a></li> <li><a href="may-tinh.html" target="hien-thi">Máy tính</a></li> </ul> </body></html>8. Code file trang-chu.html
<!DOCTYPE html><html> <head> <title>Trang chủ</title> <meta charset="UTF-8"/> <link rel="stylesheet" href="myCSS.css"/> </head> <body> <h3>TRANG CHỦ</h3> </body></html>9. Code file footer.html
<!DOCTYPE html><html> <head> <title>Footer</title> <meta charset="UTF-8"/> <link rel="stylesheet" href="myCSS.css"/> </head> <body> <div style="text-align: center;"> <span>Copyright: Phúc Khang </span> </div> </body></html>10. Code gioi-thieu.html
<!DOCTYPE html><html> <head> <title>Giới thiệu</title> <meta charset="UTF-8"/> <link rel="stylesheet" href="myCSS.css"/> </head> <body> <h3>Giới thiệu</h3> </body></html>11. Code lien-he.html
<!DOCTYPE html><html> <head> <title>Liên hệ</title> <meta charset="UTF-8"/> <link rel="stylesheet" href="myCSS.css"/> </head> <body> <h3>Liên hệ</h3> <h4>ĐT:....</h4> <h4>ĐC:....</h4> </body></html>12. Code ti-vi.html
<!DOCTYPE html><html> <head> <title>Ti vi</title> <meta charset="UTF-8"/> <link rel="stylesheet" href="myCSS.css"/> </head> <body> <h3>Ti vi</h3> <p><img src="hinh/ti-vi.jpg" width="300px" height="300px"/></p> <p>Thông tin chi tiết</p> <p>...................</p> </body></html>13. Code file tu-lanh.html
<!DOCTYPE html><html> <head> <title>Tủ lạnh</title> <meta charset="UTF-8"/> <link rel="stylesheet" href="myCSS.css"/> </head> <body> <h3>Tủ lạnh</h3> <p><img src="hinh/tu-lanh.jpg" width="300px" height="300px"/></p> <p>Thông tin chi tiết</p> <p>...................</p> </body></html>14. Code file may-tinh.html
<!DOCTYPE html><html> <head> <title>Máy tính</title> <meta charset="UTF-8"/> <link rel="stylesheet" href="myCSS.css"/> </head> <body> <div style="width: 100%;"> <h3>Máy tính</h3> <p><img src="hinh/may-tinh.jpg" width="300px" height="300px"/></p> <p>Thông tin chi tiết</p> <p>...................</p> <h4><a href="lien-he.html">Liên hệ</a></h4> <h4><a href="https://www.vnkha.com/">vnkha.com</a></h4> </div> </body></html>