/*auto readmore*/ /*auto readmore*/ /* an hien script*/ // an hien password /*an hien ma chuong trinh cong tru */ /*Scrollbox thanh cuon*/ /***Nhung CODE***/ /* dòng xanh dòng trắng */ /* https://cdnjs.com/libraries/prism lay thu vien, can vao ten file ma goi 1. copy link vao vi du:prism-python.min.js 2. ten ngon nua la python */ /*=== New posts ===*/ /*header slider*/ /*=== bai viet lien quan===*/ /*===tabcode===*/

[Database-Tự Học SQL] COM2034_SQL Server - Lab 7: SQL Function & View

NỘI DUNG:
Sử dụng hàm do người dùng định nghĩa và tạo khung nhìn view.
➢ Khai báo, tạo function
➢ Thực thi các function
➢ Tạo và sử dụng khung nhìn view

YÊU CẦU:

Bài 1:
Viết các hàm:
Nhập vào MaNV cho biết tuổi của nhân viên này.
Nhập vào Manv cho biết số lượng đề án nhân viên này đã tham gia
Truyền tham số vào phái nam hoặc nữ, xuất số lượng nhân viên theo phái
Truyền tham số đầu vào là tên phòng, tính mức lương trung bình của phòng đó, Cho biết
họ tên nhân viên (HONV, TENLOT, TENNV) có mức lương trên mức lương trung bình
của phòng đó.
Tryền tham số đầu vào là Mã Phòng, cho biết tên phòng ban, họ tên người trưởng phòng
và số lượng đề án mà phòng ban đó chủ trì.


Bài 2: 
Tạo các view:
Hiển thị thông tin HoNV,TenNV,TenPHG, DiaDiemPhg.
Hiển thị thông tin TenNv, Lương, Tuổi.
Hiển thị tên phòng ban và họ tên trưởng phòng của phòng ban có đông nhân viên nhất


THỰC HIỆN:

Bài 1:
Viết các hàm:
➢ Nhập vào MaNV cho biết tuổi của nhân viên này.
-- 1.1. Nhập vào MaNV cho biết tuổi của nhân viên này
CREATE OR ALTER FUNCTION Tuoi_NV (@maNV NVARCHAR(9))
RETURNS INT
AS
BEGIN
  RETURN (SELECT YEAR(GETDATE()) - YEAR(NgSinh) 
      FROM NhanVien 
      WHERE MaNV = @maNV);
END

GO

-- cách gọi hàm kiểm tra tuổi
SELECT dbo.Tuoi_NV('005') AS Tuoi;
GO

-- hoặc
PRINT 'Tuoi cua nhan vien: ' + CAST(DBO.Tuoi_NV('005') AS NVARCHAR(20))
GO

➢ Nhập vào Manv cho biết số lượng đề án nhân viên này đã tham gia
-- 1.2. Nhập vào Manv cho biết số lượng đề án nhân viên này đã tham gia
CREATE OR ALTER FUNCTION SoLuong_DeAnDaThamGia (@maNV NVARCHAR(9))
RETURNS INT
AS
BEGIN
  RETURN (SELECT COUNT(*) 
      FROM PhanCong 
      WHERE Ma_NVien = @maNV);
END

GO

-- gọi hàm
SELECT dbo.SoLuong_DeAnDaThamGia('003') AS SoLuong_DeAnDaThamGia;
GO

➢ Truyền tham số vào phái nam hoặc nữ, xuất số lượng nhân viên theo phái
-- 1.3. Truyền tham số vào phái nam hoặc nữ, xuất số lượng nhân viên theo phái
CREATE OR ALTER FUNCTION SoLuong_NhanVien_TheoPhai (@phai NVARCHAR(4))
RETURNS INT
AS
BEGIN
  RETURN (SELECT COUNT(*) 
      FROM NhanVien 
      WHERE Phai = @phai);
END

GO

-- Gọi hàm
SELECT dbo.SoLuong_NhanVien_TheoPhai(N'Nữ') AS SoLuong_NhanVien;
GO

SELECT dbo.SoLuong_NhanVien_TheoPhai(N'Nam') AS SoLuong_NhanVien;
GO

➢ Truyền tham số đầu vào là tên phòng, tính mức lương trung bình của phòng đó, Cho biết họ tên nhân viên (HONV, TENLOT, TENNV) có mức lương trên mức lương trung bình của phòng đó.
-- 1.4. Truyền tham số đầu vào là tên phòng, tính mức lương trung bình của phòng đó, Cho biết họ tên nhân viên (HONV, TENLOT, TENNV) có mức lương trên mức lương trung bình của phòng đó
CREATE OR ALTER FUNCTION LuongNV_TrenLuongTB (@tenPhG NVARCHAR(15))
RETURNS @nV TABLE (HoTen NVARCHAR(45))
AS
BEGIN
  DECLARE @luongTB FLOAT = (SELECT AVG(Luong) 
                FROM NhanVien 
                WHERE PhG = (SELECT MaPhG FROM PhongBan WHERE TenPhG = @tenPhG));

  INSERT INTO @nV
  SELECT CONCAT(HoNV, ' ', TenLot, ' ', TenNV) -- hoặc dùng concat để nối chuỗi
      FROM NhanVien 
      WHERE Luong > @luongTB;
  
  RETURN;
END

GO

-- Gọi hàm
SELECT *
FROM dbo.LuongNV_TrenLuongTB(N'CNTT');
GO
Hoặc
-- hoặc
CREATE OR ALTER FUNCTION fn_Cau_14 (@tenPhG NVARCHAR(15))
RETURNS TABLE
AS
  RETURN
  (
    SELECT honv,  tenlot, tennv
    FROM nhanvien
    WHERE luong > (
    SELECT AVG(luong) 
    FROM nhanvien
    WHERE phg = (SELECT maphg FROM PhongBan WHERE tenPhG = @tenPhG)
    )
  )
GO
--Gọi Hàm
SELECT *
FROM fn_Cau_14('CNTT')
GO

➢ Tryền tham số đầu vào là Mã Phòng, cho biết tên phòng ban, họ tên người trưởng phòng
và số lượng đề án mà phòng ban đó chủ trì.

-- 1.5. Tryền tham số đầu vào là Mã Phòng, cho biết tên phòng ban, họ tên người trưởng phòng và số lượng đề án mà phòng ban đó chủ trì
CREATE OR ALTER FUNCTION Tim_PhongBan (@maPhg INT)
RETURNS TABLE
AS
  RETURN (SELECT TenPhG, CONCAT(HoNV, ' ', TenLot, ' ', TenNV) AS HoTenNV, COUNT(MaDA) AS SoLuong_DeAn
      FROM PhongBan 
        JOIN NhanVien ON PhongBan.TrPhG = NhanVien.MaNV
        JOIN DeAn ON PhongBan.MaPhG = DeAn.Phong
      WHERE MaPhG = @maPhg
      GROUP BY TenPhG, HoNV, TenLot, TenNV);

GO
-- Gọi hàm
SELECT *
FROM dbo.Tim_PhongBan(5);
GO


Bài 2: 
Tạo các view:
➢ Hiển thị thông tin HoNV,TenNV,TenPHG, DiaDiemPhg.
-- 2.1. Hiển thị thông tin HoNV, TenNV, TenPHG, DiaDiemPhg
CREATE OR ALTER VIEW View_ThongTinNhanVien
AS
	SELECT HoNV, TenNV, TenPhG, DiaDiem
	FROM NhanVien 
		JOIN PhongBan ON NhanVien.PhG = PhongBan.MaPhG
		JOIN DiaDiem_PhG ON PhongBan.MaPhG = DiaDiem_PhG.MaPhG;

GO

-- Thực hiện select dữ liệu trong view vừa tạo
SELECT *
FROM View_ThongTinNhanVien;
GO

➢ Hiển thị thông tin TenNv, Lương, Tuổi.
-- 2.2. Hiển thị thông tin TenNv, Lương, Tuổi
CREATE OR ALTER VIEW View_ThongTinNhanVien_Tuoi
AS
  SELECT TenNV, Luong, YEAR(GETDATE()) - YEAR(NgSinh) AS Tuoi
  FROM NhanVien

GO

SELECT *
FROM View_ThongTinNhanVien_Tuoi;
GO


➢ Hiển thị tên phòng ban và họ tên trưởng phòng của phòng ban có đông nhân viên nhất
-- 2.3. Hiển thị tên phòng ban và họ tên trưởng phòng của phòng ban có đông nhân viên nhất
CREATE OR ALTER VIEW View_PhongBan_MaxNV
AS
  SELECT TOP(1) WITH TIES COUNT(NhanVien.PhG) AS SLNV
    , TenPhG
    , CONCAT(NV.HoNV, ' ', NV.TenLot, ' ', NV.TenNV) AS HoTenTP
  FROM NhanVien
    JOIN PhongBan ON NhanVien.PhG = PhongBan.MaPhG
    JOIN NhanVien NV ON PhongBan.TrPhG = NV.MaNV
  GROUP BY NhanVien.PhG, TenPhG, NV.HoNV, NV.TenLot, NV.TenNV
  ORDER BY SLNV DESC

GO

SELECT *
FROM View_PhongBan_MaxNV;
GO

Xong!

[Database-Tự Học SQL] COM2012_MySQL Bài 2 - Các Bước Xây Dựng Cơ Sở Dữ Liệu

MỤC TIÊU

Hiểu các khái niệm về thực thể, tập thực thể
Nắm được mối quan hệ giữa các thực thể
Các ràng buộc trong CSDL quan hệ: khoá chính, khoá ngoại ...
Làm quen với hệ quản trị cơ sở dữ liệu MySQL

THỰC HIỆN

1. Hướng Dẫn Vẽ Sơ Đồ Thực Thể Liên Kết ERD

2. Phân tích và thiết kế cơ sở dữ liệu quản lý bán hàng

3. Hướng Dẫn Chuyển Mô Hình ERD Mức Logic Sang Vật Lý và Sinh Code Tự động

4. Lab 2.1 - Hướng Dẫn Phân Tích Bài Bất Động Sản - Phần 1
 
5. Lab 2.2 Cài đặt trên hệ quản trị cơ sở dữ liệu/Tạo Bảng, Nhập Liệu, Tạo Khóa Trong MySQL WorkBench


Xong!

[Database-Tự Học SQL] COM2012_MySQL Bài 1 - Hướng Dẫn Cài Đặt MySQL Workbench Trên Windows

MỤC TIÊU
1. Biết cách download và cài đặt MySQL trên windows
2. Cài đặt MySQL Workbench trên MacOS
3. Hướng dẫn thực thi câu lệnh SQL và hiển thị sơ đồ quan hệ thực thể

THỰC HIỆN

1. Hướng dẫn cài đặt MySQL Workbench trên Windows
  

Tải file thực hành 

2. Cài đặt MySQL Workbench trên MacOS
updating...

3. Hướng dẫn thực thi câu lệnh SQL và hiển thị sơ đồ quan hệ thực thể



Xong!




[Database-Tự Học Quản Trị SQL Server] SOA101 - LAB6 - GIÁM SÁT, CẢNH BÁO, THÔNG BÁO ĐẾN EMAIL

Nên xem cấu hình SMTP trước khi xem bài này

MỤC TIÊU:
Kết thúc bài thực hành này bạn có thể biết cách:
  • Xem SQL Server Error Log
  • Cấu hình Database mail
  • Cấu hình SQL Server Agent Operators
  • Cấu hình SQL Server Agent Alerts

YÊU CẦU:
BÀI 1
Thực hiện xem log lỗi của SQL Server và kiểm tra nơi lưu trữ các file log hiện tại trên hệ thống SQL 

BÀI 2
Tạo profile và cấu hình account email và thực hiện gửi mail test

BÀI 3
Tạo mới SQL Server Agent Operators và thực hiện jobs backup full cho CSDL AdventureWorks2019, sau khi backup hoàn thành hệ thống tự động gửi thông báo đến email DBA.

BÀI 4
Tạo mới SQL Server Agent Alerts để tự động gửi cảnh cáo nếu transaction log bị đầy (mã lỗi 9002) đến email DBA


THỰC HIỆN:

BÀI 1
Thực hiện xem log lỗi của SQL Server và kiểm tra nơi lưu trữ các file log hiện tại trên hệ thống SQL 

Xem SQL Server Error Log
Tại SSMS, ở cửa sổ Object explorer, Chọn Management, chọn SQL Server Logs, phải chuột vào Current chọn View SQL Server Log.


Tại cửa sổ Log File Viewer, check vào SQL Server, SQL Server Agent để xem thông tin các log đã được ghi nhận

a. File log hiện tại của SQL Server

b. File log của hiện tại SQL Server Agent

c. Khởi tạo lại log của SQL Server
Thực hiện lệnh (new query – execute): EXEC sys.sp_cycle_errorlog;


BÀI 2
Tạo profile và cấu hình account email và thực hiện gửi mail test

Cấu hình Database mail
a. Tạo database mail
Tại SSMS, ở cửa sổ Object explorer, Chọn Management, phải chuột phải vào Database Mail > chọn Configure Database Mail màn hình Welcome ấn Next


tại màn hình Select Configuration Task chọn option Set up Database Mail > ấn next


Tại màn hình New Profile nhấn Add để thêm account


Điền thông tin SMTP server bạn > nhấn OK


Outgoing Mail Server (SMTP)

AMTP Authentication

 

E-mail address:

Basic authentication

Reply e-mail:

User name:

Server name:

Password:

Port number:

Confirm password:



Nhấn next


Tại màn hình Manage Profile Security chọn tab public profile, trong phần Default Profile chọn Yes ấn > next.


Nhấn Next



nhấn Finish


Nhấn Close để hoàn thành cài đặt


b. Kích hoạt Database Mail XPS

sp_configure 'show advanced options', 1;  
GO  
RECONFIGURE;  
GO  
sp_configure 'Database Mail XPs', 1;  
GO  
RECONFIGURE  
GO 
Tham khảo cách cấu hình email tại đây

c. Gửi mail test và xem log

Chọn Management, phải chuột vào Database Mail chọn Send Test E-mail..
Trong phần To: nhập vào địa chỉ mail muốn nhận ấn Send Test E-Mail



Nhấn OK để gửi mail
Database Mail > View Database Mail Log

Log ghi nhận trên hệ thống


Kiểm tra đã nhập được email

BÀI 3
Tạo mới SQL Server Agent Operators và thực hiện jobs backup full cho CSDL AdventureWorks2019, sau khi backup hoàn thành hệ thống tự động gửi thông báo đến email DBA.

Cấu hình SQL Server Agent Operators
Start SQL Server Agent


a. Chuẩn bị
Server Objects > Backup Devices > New Backup Deivce > đặt tên AW_Backup_Full > đường dẫn lưu trữ file



Management > Maintenance Plans > Maintence Plan Wizard > đặt tên Lab SQL Server Agent

Tab General > Database(s)
Tab Destination > Add > AW_Backup_Full


b. Enable SQL Server Agent mail profile

SQL Server Agent > Properties > Chọn Alert System > Enable Mail profile > OK > Restart SQL Server Agent



c. Tạo Operator
SQL Server Agent, phải chuột phải vào Operators > New Operator…
Name: Admin-SQL, 
Email name: địa chỉ mail muốn nhận thông báo  > OK



d. Cấu hình job gửi notify đến Operator
Chọn tên Lab SQL Server Agent.Subplan_1 (là tên đã làm ở phần chuẩn bị) > Properties > Notifications > Email chọn Admin-SQL(là operator đã tạo bước trên) > hành động muốn gửi thông báo Ví dụ: When the job completes > OK


e. Test và kiểm tra kết quả
Chọn Lab SQL Server Agent.Subplan_1 > Start Job at Step…


Chọn SQL Server Agent > Operations > Admin-SQL > Properties > History


Kiểm tra email đã nhận được thông báo.


BÀI 4
Tạo mới SQL Server Agent Alerts để tự động gửi cảnh cáo nếu transaction log bị đầy (mã lỗi 9002) đến email DBA

Cấu hình SQL Server Agent Alerts
a. Tạo Alert
SQL Server Agent > New Alert... > đặt tên > điền mã lỗi. Ví dụ: 9002



Respone > chọn Notify Operators > chọn E-mail Options >  chọn E-mail > OK

b. Test và kiểm tra kết quả
Tạo mới Database, giới hạng dung lượng file 20MB và mới bảng dữ liệu



Thực hiện chèn dữ liệu vào bảng (mục đích tạo ra lỗi 9002)

Code:
-- test alert 9002 đầy log
USE master;
GO
CREATE DATABASE TestAlertDB -- tạo database
ON (
	NAME = TestAlertDB
	, FILENAME = 'd:\Data\TestAlertDB.mdf' 
	, MAXSIZE = 20MB)
LOG ON (
	NAME = TestAlertDB_log
	, FILENAME = 'd:\Data\TestAlertDB_log.ldf'
	, MAXSIZE = 20MB) ; -- giới hạng dung lượng 20MB
GO
-- tạo mới bảng dữ liệu
USE TestAlertDB;
CREATE TABLE testtable (col1 text);

-- chèn dữ liệu để test
USE TestAlertDB;
GO
SET NOCOUNT ON;
WHILE 1 = 1
	BEGIN
		INSERT INTO testtable (col1)
		VALUES('Test data!');
	END;
GO

Vào SQL Server Agent > Alerts > Test Full Transaction Log > Properties > History




Xong!

[Tự Học HTML & CSS Cơ Bản] WEB1013 - Bài 6 - Thiết Kế Layout

MỤC TIÊU:
Kết thúc bài này bạn có khả năng:
  • Thiết kết được layour cho web
  • Tổ chức được website với iframe

THỰC HIỆN

Bài 1:
Thiết kết layout thô 1
Tạo thư mục CSS và lưu file css với tên css/lab6.1.layout.css
body{ /* bỏ lề và khoảng đệm xung quanh trang */
    padding: 0px;
    margin: 0px;
}
.container{
    max-width: 1260px; /* rộng tối đa */
    height: 900px;
    background-color: green;
    margin: 0 auto; /* căn giữa */
}
header{
    background-color: red;
    width: 100%;
    height: 300px;
    
}
nav{
    background-color: yellow;
    width: 100%;
    height: 50px;
}
article{
    background-color: gray;
    width: 75%;
    min-height: 400px;
    float: left; /* thả nổi trái*/
}
aside{
    background-color: orange;
    width: 25%;
    min-height: 400px;
    float: right; /* thả nổi phải*/
}
footer{
    background-color:pink;
    width: 100%;
    height: calc(100% - 300px - 50px - 400px ) ;
    clear: both; /* bỏ thả nổi */
}
Link tới file css/lab6.1.layout.css
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lab 6 | Bài 1 - Layout </title>
    <link rel="stylesheet" href="css/lab6.1.layout.css">
</head>
<body>
   <div class="container">
        <header></header>
        <nav></nav>
        <article></article>
        <aside></aside>
        <footer></footer>

   </div> 
   
</body>
</html>
Kết quả


Thiết kết layout thô 2
Tạo thư mục CSS và lưu file css với tên css/lab6.1.layout2.css
body{ /* bỏ lề và khoảng đệm xung quanh trang */
    padding: 0px;
    margin: 0px;
}
.container{
    max-width: 1260px; /* rộng tối đa */
    height: 900px;
    background-color: green;
    margin: 0 auto; /* căn giữa */
}
header{
    background-color: red;
    width: 100%;
    height: 300px;
    
}

nav{
    background-color: yellow;
    width: 100%;
    height: 50px;
}

asideright{
    background-color: orange;
    width: 30%;
    min-height: 400px;
    float: right; /* thả nổi phải*/
}

asideleft{
    background-color: yellowgreen;
    width: 20%;
    min-height: 400px;
    float: left; 
}

article{
    background-color: gray;
    /* width: 75%; */
    width: 50%;
    min-height: 400px;
    margin-left: 20%; /* bằng độ rộng của left */
    /* margin: 0 auto;  */
}

footer{
    background-color:pink;
    width: 100%;
    height: calc(100% - 300px - 50px - 400px ) ;
    clear: both; /* bỏ thả nổi */
}
Link tới file css/lab6.1.layout2.css
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lab 6 | Bài 1 - Layout (vck) </title>
    <link rel="stylesheet" href="css/lab6.1.layout2.css">
</head>
<body>
   <div class="container">
        <header></header>
        <nav></nav>
        <asideright></asideright>
        <asideleft></asideleft>
        <article></article>
        <footer></footer>

   </div> 
   
</body>
</html>
Kết quả

Thiết kế theo yêu cầu:
Tạo thư mục CSS và lưu file css với tên css/lab6.1.css
body{ /* bỏ lề và khoảng đệm xung quanh trang */
    padding: 0px;
    margin: 0px;
}
.container{
    max-width: 1260px; /* rộng tối đa */
    height: 900px;
    background-color: green;
    margin: 0 auto; /* căn giữa */
}
header{
    background-color: red;
    width: 100%;
    height: 300px;
    
}
nav{
   
    width: 100%;
    height: 50px;

    background-color:  #006666;
    line-height: 40px;
    color: white;
    text-align: center;
    font-variant: small-caps;

}
nav a{
    color: white;
    text-decoration: none;
    line-height: 50px;
    margin: 0 10px;
}
nav a:hover{ /* Hiệu ứng rê chuột */
    color: yellowgreen;
    text-decoration: underline;
    font-weight: bold;
}

article{
    background-color:gainsboro;
    width: 75%;
    min-height: 400px;
    float: left; /* thả nổi trái*/
}
aside{
    background-color:  #001111;
    width: 25%;
    min-height: 400px;
    float: right; /* thả nổi phải*/
}
aside a{
    text-decoration: none;
    color: #006666;
    
}
aside a:hover{
    text-decoration: underline;
    color: #00cc99;
}
footer{
    border-top: 5px, double darkgreen;
    background-color:  #001111;
    width: 100%;
    height: calc(100% - 300px - 50px - 400px ) ;
    clear: both; /* bỏ thả nổi */
    text-align: center;
    line-height: 150px  ;
    font-size: 30px;
    color: #006666;
}
Tạo thư mục img và lưu hình ảnh muốn làm banner.png vào trong thư mục này (nên điều chỉnh kích thước hình ảnh bằng kích thước của header)  Tạo file html và link đến file css/lab6.1.css
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lab 6 | Bài 1 - Layout </title>
    <link rel="stylesheet" href="css/lab6.1.css">
</head>
<body>
   <div class="container">
        <header>
            <img src="img/banner.png" alt=""> <!-- nên chỉnh kích thước hình bằng kích header trước khi chèn  --> 
        </header>
        <nav>
            <a href="#">Trang chủ</a> |
            <a href="#">Giới thiệu</a> |
            <a href="#">Liên hệ</a> |
            <a href="#">Góp ý</a> |
            <a href="#">Hỏi đáp</a>
        </nav>
        <article></article>
        <aside>
            <ul>
                <li>
                    <a href="">Máy tính xách tay</a>
                </li>
                <li>
                    <a href="">Điện thoại di động</a>
                </li>
                <li>
                    <a href="">Máy quay phim</a>
                </li>
                <li>
                    <a href="">Máy chụp ảnh</a>
                </li>
            </ul>
        </aside>
        <footer>
            Khanhvc | Tìm hiểu HTML
        </footer>

   </div> 
   
</body>
</html>
Kết quả cuối cùng

Bài 2: 
Tạo file css có tên: ccss/lab6.1.css
body{ /* bỏ lề và khoảng đệm xung quanh trang */
    padding: 0px;
    margin: 0px;
}
.container{
    max-width: 1260px; /* rộng tối đa */
    height: 900px;
    background-color: green;
    margin: 0 auto; /* căn giữa */
}
header{
    background-color: red;
    width: 100%;
    height: 300px;
    
}
nav{
   
    width: 100%;
    height: 50px;

    background-color:  #006666;
    line-height: 40px;
    color: white;
    text-align: center;
    font-variant: small-caps;

}
nav a{
    color: white;
    text-decoration: none;
    line-height: 50px;
    margin: 0 10px;
}
nav a:hover{ /* Hiệu ứng rê chuột */
    color: yellowgreen;
    text-decoration: underline;
    font-weight: bold;
}

article{
    background-color:gainsboro;
    width: 75%;
    min-height: 400px;
    float: left; /* thả nổi trái*/
}
aside{
    background-color:  #001111;
    width: 25%;
    min-height: 400px;
    float: right; /* thả nổi phải*/
}
aside a{
    text-decoration: none;
    color: #006666;
    
}
aside a:hover{
    text-decoration: underline;
    color: #00cc99;
}
footer{
    /* border-top: 5px, double darkgreen; */
    background-color:  #001111;
    width: 100%;
    height: calc(100% - 300px - 50px - 400px ) ;
    clear: both; /* bỏ thả nổi */
    text-align: center;
    line-height: 150px  ;
    font-size: 30px;
    color: #006666;
}
iframe[name=page]{
    width: 100%;
    min-height: 400px - 5px;
    
}
Trang html link đến css/lab6.1.css Tạo các trang httm, dùng thẻ a để lên đến các trang này.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lab 6 | Bài 1 - Layout </title>
    <link rel="stylesheet" href="css/lab6.1.css">
</head>
<body>
   <div class="container">
        <header>
            <img src="img/banner.png" alt=""> <!-- nên chỉnh kích thước hình bằng kích header trước khi chèn  --> 
        </header>
        <nav>
            <a href="trangchu.html" target="page">Trang chủ</a> |
            <a href="gioithieu.html" target="page">Giới thiệu</a> |
            <a href="#" target="page">Liên hệ</a> |
            <a href="#">Góp ý</a> |
            <a href="#">Hỏi đáp</a>
        </nav>
        <article>
            <iframe name="page" src="trangchu.html" frameborder="0"></iframe>
            
        </article>
        <aside>
            <ul>
                <li>
                    <a href="">Máy tính xách tay</a>
                </li>
                <li>
                    <a href="">Điện thoại di động</a>
                </li>
                <li>
                    <a href="">Máy quay phim</a>
                </li>
                <li>
                    <a href="">Máy chụp ảnh</a>
                </li>
            </ul>
        </aside>
        <footer>
            Khanhvc | Tìm hiểu HTML
        </footer>

   </div> 
   
</body>
</html>
Kết quả cuối cùng



Xong!

/*header slide*/