Sharing & Linking

[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

css
html
Layout

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

css
html
Layout

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:

css
html
Kết quả

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:

css
html
Kết quả

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!

[Database-Tự Học Quản Trị SQL Server] SOA101 - LAB5 - QUẢN LÝ THÔNG TIN ĐĂNG NHẬP, NGƯỜI DÙNG VÀ PHÂN QUYỀN

MỤC TIÊU:

Kết thúc bài thực hành này bạn có thể biết cách:

Chuyển đổi authentication mode
Tạo user login
Quản lý và cấp quyền server level role
Tạo và quản lý database user
Cấp quyền và xem lại các quyền đã cấp

YÊU CẦU:

BÀI 1

Tạo mới login và user với các yêu cầu:

• Tên người dùng là AW_Admin với vai trò là nhà quản trị CSDL, phân quyền cho user này toàn quyền thao tác trên CSDL AdventureWorks2019

• Tạo người dùng khác tên là AW_backup, phân quyền cho người dùng này chỉ được phép thao tác backup CSDL AdventureWorks2019

BÀI 2

Tạo mới login và user với các yêu cầu:

• Một người dùng thông thường tên AW_UserThuong cho phép user này thấy bảng dữ liệu “Customer” và chỉ được phép thực hiện các câu lệnh select, insert, delete trên bảng này.

• Thu hồi quyền delete của user “AW_UserThuong” trên bảng “Customer”

THỰC HIỆN:

Video bài viết

BÀI 1

Tạo mới login và user với các yêu cầu:

• Tên người dùng là AW_Admin với vai trò là nhà quản trị CSDL, phân quyền cho user này toàn quyền thao tác trên CSDL AdventureWorks2019

• Tạo người dùng khác tên là AW_backup, phân quyền cho người dùng này chỉ được phép thao tác backup CSDL AdventureWorks2019

Quản lý server-level security

Tại SSMS, ở cửa sổ Object explorer, phải chuột tên server -> chọn properties -> chọn Security -> SQL Server and Windows Authentication mode -> OK

Tại cửa sổ phải Object explorer, phải chuột tên server SQL -> chọn Restart -> OK để khởi động lại SQL Server

a. Tạo Login

Security -> Logins -> New Login …

Tại cửa sổ Login-new , trong phần login name nhập AW_Admin -> chọn option SQL server authentication -> nhập password 2 lần -> bỏ checkbox Enforce password policy, trong phần Default database chọn AdventureWorks2019-> OK

b. Ngoài ra chúng ta có thể tạo login AW_backup bằng T-SQL

USE master
GO
CREATE LOGIN AW_backup
	WITH PASSWORD=N'AW_backup', 
	CHECK_EXPIRATION=OFF, 
	CHECK_POLICY=OFF
GO

Xem thông tin Logins đã tạo Security -> Logins

c. Tạo user

d. Tạo user bằng T-SQL

USE AdventureWorks2019
GO
CREATE USER AW_backup 
	FOR LOGIN AW_backup
GO

e. Gán quyền cho user AW_Admin

f. Gán quyền cho user AW_backup bằng T-SQL

USE AdventureWorks2019
GO
	ALTER ROLE db_backupoperator 
	ADD MEMBER AW_backup
GO

BÀI 2

Tạo mới login và user với các yêu cầu:

• Thu hồi quyền delete của user “AW_UserThuong” trên bảng “Customer”

a. Tạo mới LogIn và User

USE master;
GO
CREATE LOGIN AW_UserThuong
	WITH PASSWORD = 'AW_UserThuong',
	CHECK_POLICY = OFF, CHECK_EXPIRATION = OFF,
	DEFAULT_DATABASE = AdventureWorks2019;
GO

USE AdventureWorks2019
GO
CREATE USER AW_UserThuong 
	FOR LOGIN AW_UserThuong
GO

b. Phân quyền được phép thực hiện các câu lệnh: Select, Insert, Delete

USE AdventureWorks2019
GO
GRANT SELECT, INSERT, DELETE
ON Customer TO AW_UserThuong;
GO

c. Kiểm tra quyền đã gán

d. Thu hồi quyền delete của user AW_UserThuong trên bảng dữ liệu Customer

USE AdventureWorks2019
GO
REVOKE DELETE
ON Customer
FROM AW_UserThuong;
GO

Xong!

[Tự Học HTML & CSS Cơ Bản] WEB1013 - Bài 5 - Box Model

Bài 2:

css
html

Tạo thư mục CSS và lưu file lại với tên css/lab5.2.css

.cot{
    width: 25%;
    float: left;
}
.sanpham{
    border-radius: 10px; /* bo góc */
    box-shadow: 0 0 5px gray;
    padding: 10px;
    margin: 5px;
    text-align: center;
}
.cot .sanpham:hover{ /* duy chuyển chuột */
    box-shadow: 0 0 10px green;
}
.sanpham .ten{
    font-size: larger;
    font-variant: small-caps;
    color: blue;
}
.sanpham img{
    max-width: 95%;
}
.sanpham .gia{
    color: red;
    font-weight: bold;
    font-size: larger;
}
.sanpham .gia del{
    color: gray;
}

Tạo file html và link đến file css, các bạn có thể làm nhiều hình ảnh khác nhau.

<!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 5 | Bài 2 Box Model và Layout</title>
    <link rel="stylesheet" href="css/lab5.2.css">

</head>
<body>
    <div class="cot">
        <div class="sanpham">
            <div class="ten"> Máy tính</div>
            <img src="img/laptop.jpg" alt="">
            <div class="gia">
                <del>$150</del> $148
            </div>
        </div>
    </div>

    <div class="cot">
        <div class="sanpham">
            <div class="ten"> Máy tính</div>
            <img src="img/laptop.jpg" alt="">
            <div class="gia">
                <del>$150</del> $148
            </div>
        </div>
    </div>

    <div class="cot">
        <div class="sanpham">
            <div class="ten"> Máy tính</div>
            <img src="img/laptop.jpg" alt="">
            <div class="gia">
                <del>$150</del> $148
            </div>
        </div>
    </div>

    <div class="cot">
        <div class="sanpham">
            <div class="ten"> Máy tính</div>
            <img src="img/laptop.jpg" alt="">
            <div class="gia">
                <del>$150</del> $148
            </div>
        </div>
    </div>

    <div class="cot">
        <div class="sanpham">
            <div class="ten"> Máy tính</div>
            <img src="img/laptop.jpg" alt="">
            <div class="gia">
                <del>$150</del> $148
            </div>
        </div>
    </div>

    <div class="cot">
        <div class="sanpham">
            <div class="ten"> Máy tính</div>
            <img src="img/laptop.jpg" alt="">
            <div class="gia">
                <del>$150</del> $148
            </div>
        </div>
    </div>

    <div class="cot">
        <div class="sanpham">
            <div class="ten"> Máy tính</div>
            <img src="img/laptop.jpg" alt="">
            <div class="gia">
                <del>$150</del> $148
            </div>
        </div>
    </div>

    <div class="cot">
        <div class="sanpham">
            <div class="ten"> Máy tính</div>
            <img src="img/laptop.jpg" alt="">
            <div class="gia">
                <del>$150</del> $148
            </div>
        </div>
    </div>

    
    
</body>
</html>

Kết quả:

Xong!