/*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 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:
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”

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:

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!


[Xử Lý Dữ Liệu] - Nhập Môn Xử Lý Dữ Liệu - Ôn tập Lab 4, 5, 6, 7 - Thống kê, Phân tích, Dự báo

MỤC TIÊU

Biết cách phân tích thông kê và dự báo
Biết cách sử dụng hàm vlookup, hlookup, trend, forecast,...
Biết sử dụng pivot table, slicer
Biết cách vẽ biểu đồ dữ trên dữ liệu đã có, biết cách vẽ đường xu hướng, trung bình động,....


THỰC HIỆN




Xong!

[Xử Lý Dữ Liệu] - Nhập Môn Xử Lý Dữ Liệu - Lab 4 - Ôn Tập | Chuyển Đổi Dữ Liệu

MỤC TIÊU:

Gộp, Tách Dữ Liệu Tự Động
Xoay hàng thành cột, xoay cột thành hàng
Điền dữ liệu tự động với Fill Down/Up
Khắc phục lỗi ngày tháng khi chuyển đổi


THỰC HIỆN:

1. Gộp, Tách Dữ Liệu Tự Động Pivot Unpivot


2. Gộp Nhiều Cột Thành Một Cột - Unpivot Other Columns


3. Fill Down, Nối Tách Cột, Xoay Hàng Cột


4. Lab 4.5 Chuẩn Hóa Dữ Liệu



5. Lab 4.4 Chuẩn Hóa Dữ Liệu (tt)


6. Lab 4.2 Chuẩn Hóa Dữ Liệu (tt)


7. ASM - Chuẩn Hóa Dữ Liệu (tt)




Xong!

[Xử Lý Dữ Liệu] - Nhập Môn Xử Lý Dữ Liệu - Lab 3 - Ôn Tập | Làm Sạch Dữ Liệu

MỤC TIÊU

Sử dụng các hàm trong Ms Excel để làm sạch dữ liệu

THỰC HIỆN

1. Xử Lý Dữ Liệu Căn Bản | Ôn Tập Xử Lý Chuỗi


2. Xử Lý Dữ Liệu Căn Bản | Ôn Tập Xử Lý Chuỗi (tt)
 

3. Xử Lý Dữ Liệu Căn Bản | Làm Sạch Dữ Liệu


Xong!

[Tự Học HTML & CSS Cơ Bản] WEB1013 - Bài 4 - Tìm Hiểu CSS - Ôn Tập

YÊU CẦU

Bài 1:
Thiết kế trang web trình nội bài thơ Tre Việt Nam với các yêu cầu:
  • Sử dụng css inline
  • Tiêu đề dùng thẻ h2
  • In nghiêng toàn bộ bài thơ (thẻ em), màu chữ red
  • Chữ "tre" màu chữ blue, in đậm
Kết quả:

Tre Việt Nam

Tre xanh,
Xanh tự bao giờ?
Chuyện ngày xưa... đã có bờ tre xanh.

Thân gầy guộc, lá mong manh,
Mà sao nên luỹ nên thành tre ơi?
Ở đâu tre cũng xanh tươi,
Cho dù đất sỏi đất vôi bạc màu.
...

Bài 2:
Thiết kế trang web trình nội bài thơ Hoa hồng Bungari – của Tế Hanh với các yêu cầu:
  • Sử dụng internal css
  • Tiêu đề dùng thẻ h2
  • In nghiêng toàn bộ bài thơ (thẻ em), màu chữ green
  • Chữ "hoa" màu chữ hotpink, in đậm
Kết quả:

Hoa hồng Bungari – Tế Hanh

Hoa Hồng Bungari
Ôi! Loài hoa diệu kì!

Hoa ở đâu chẳng biết
Theo người hay gió bay
Từ thế kỷ mười bảy
Hoa về mọc nơi đây.

Giữa bốn bề núi dựng
Một thung lũng hoa hồng
Mỗi năm một lần nở
Trời đất bắt đầu xuân.
...

Bài 3: (external css)
Thiết kế trang web trình nội bài thơ "Bài thơ Cô giáo lớp em" với các yêu cầu:
Định dạng ban đầu:
  • Tiêu đề dùng thẻ h2
  • In nghiêng toàn bộ bài thơ (thẻ em, đoạn 1,2 chung class, đoạn 3 định dạng giống đoạn 1)
  • Chữ "cô" màu in đậm (thẻ strong)
  • Thẻ p bao nội dung "Tác giả: Nguyễn Xuân Sanh" 
  • Thẻ span bao nội dung "Nguyễn Xuân Sanh"
Định dạng css:
Thẻ em:
    font-variant: small-caps; 
    font-size: 20px;
    word-spacing: 2px;
    letter-spacing: 1px;
    line-height: 25px;

Thẻ h2:
    color: white;
    text-shadow: 0 0 5px red;

Thẻ body:
    text-align: center; /* căn giữa */

Thẻ em.doan1:
    color: red;

Thẻ em.doan2
    color: blue;

Thẻ strong:
    color: green;

Thẻ span:
    color: brown;
    font-style: italic;
    font-weight: bold;


Kết quả:

Bài thơ Cô giáo lớp em

Sáng nào em đến lớp
Cũng thấy  đến rồi
Đáp lời “Chào  ạ!”
 mỉm cười thật tươi

 dạy em tập viết
Gió đưa thoảng hương nhài
Nắng ghé vào cửa lớp
Xem chúng em học bài

Những lời  giáo giảng
Ấm trang vở thơm tho
Yêu thương em ngắm mãi
Những điểm mười  cho.

Tác giả: Nguyễn Xuân Sanh


THỰC HIỆN

Bài 1:
<!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>Tìm hiểu CSS | CSS Inline </title>
</head>
<body>
  <h2>Tre Việt Nam</h2>
  <em style="color: red;">
    <strong style="color: blue;">Tre</strong>  xanh, <br>
    Xanh tự bao giờ? <br>
    Chuyện ngày xưa... đã có bờ <strong style="color: blue;">tre</strong>  xanh. <br> <br>
    Thân gầy guộc, lá mong manh, <br>
    Mà sao nên luỹ nên thành <strong style="color: blue;">tre</strong>  ơi? <br>
    Ở đâu <strong style="color: blue;">tre</strong>  cũng xanh tươi, <br>
    Cho dù đất sỏi đất vôi bạc màu. <br>
    ... <br>
  </em>
  
</body>
</html>

Bài 2:

<!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>Tìm hiểu CSS | CSS Internal </title>
    <style>
        .kieu2{
            color: green;
        }
        strong{
            color: hotpink;
        }
    </style>
</head>
<body>
    <h2>Hoa hồng Bungari – Tế Hanh</h2>
    <em class="kieu2">
        <strong>Hoa</strong> Hồng Bungari <br>
        Ôi! Loài <strong>hoa</strong> diệu kì! <br> <br>
        <strong>Hoa</strong> ở đâu chẳng biết <br>
        Theo người hay gió bay <br>
        Từ thế kỷ mười bảy <br>   
        <strong>Hoa</strong> về mọc nơi đây. <br> <br>
        Giữa bốn bề núi dựng <br>
        Một thung lũng <strong>hoa</strong> hồng <br>
        Mỗi năm một lần nở <br>
        Trời đất bắt đầu xuân. <br>
        ... <br>
    </em>
</body>
</html>

Bài 3:
Tạo file css/bai4.3.css
em{
    font-variant: small-caps; /* Chuyển đổi kiểu chữ (thường thành hoa). */
    font-size: 20px; /* font-size với cỡ chữ chỉ rõ theo đơn vị px, em, rem ... */
    word-spacing: 2px; /* Tăng hoặc giảm khoảng cách giữa các từ trong đoạn văn bản */
    letter-spacing: 1px; /* Tăng hoặc giảm khoảng cách giữa các ký tự. */
    line-height: 25px; /* Tăng hoặc giảm khoảng cách giữa các dòng, đơn vị có thể là px, em, %, ... */
}
h2{
    color: white;
    text-shadow: 0 0 5px red; 
    /* 
    1. vị trí của bóng theo chiều ngang,  
    2. vị trí của bóng theo chiều dọc
    3. Xác định khoảng cách độ nhòe của bóng
    4. màu của bóng
    */
}
body{
    text-align: center; /* căn giữa */
}
em.doan1{
    color: red;
}
em.doan2{
    color: blue;
}
strong{
    color: green;
}
span{
    color: brown;
    font-style: italic; /* in nghiêng */
    font-weight: bold; /* in đậm */
}
Tạo file .html
<!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>Tìm hiểu CSS | CSS external </title>
    <link rel="stylesheet" href="css/bai4.3.css">
</head>
<body>
    <h2>Bài thơ Cô giáo lớp em</h2>
    <em class="doan1">
        Sáng nào em đến lớp <br>
        Cũng thấy <strong>cô</strong> đến rồi <br>
        Đáp lời “Chào <strong>cô</strong> ạ!” <br>
        <strong>Cô</strong> mỉm cười thật tươi <br> <br>
    </em>
    <em class="doan2">
        <strong>Cô</strong> dạy em tập viết <br>
        Gió đưa thoảng hương nhài <br>
        Nắng ghé vào cửa lớp <br>
        Xem chúng em học bài <br> <br>
    </em>
    <em class="doan1">
        Những lời <strong>cô</strong> giáo giảng <br>
        Ấm trang vở thơm tho <br>
        Yêu thương em ngắm mãi <br>
        Những điểm mười <strong>cô</strong> cho. <br><br>
    </em>
    <p>Tác giả: <span>Nguyễn Xuân Sanh</span>  </p>
</body>
</html> 


Xong!

[Tự Học Java] MOB1014-Java 1 - Bài 8 - Lớp & Phương Thức Nâng Cao

MỤC TIÊU

Kết thúc bài thực hành này bạn có khả năng sử dụng phương thức tĩnh để xây dựng một thư viện các hàm tiện ích phục vụ cho các thao tác xử lý nhanh sau này.

LÝ THUYẾT

1. Phương Thức Tham Số Biến Đổi

Với các viết cũ, ví dụ có các phương thức tính tổng của 2, 3, 4,... 
    public static int tinhTong(int a, int b){ // tổng 2 số
        return a + b;
    }
    public static int tinhTong(int a, int b, int c){ // tổng 3 số
        return a + b + c;
    }
    public static int tinhTong(int a, int b, int c, int d){ // tổng 4 số
        return a + b + c + d;
    }

Với code trên khi cần tính tổng của 5 số thì sẽ bị lỗi vì hàm tính tổng 5 số chưa được định nghĩa
Vì vậy có các viết khác tương đương với cách viết trên nhưng tham số truyền vào linh động hay có thể biến đổi

    public static final int tinhTong(int ...x){
        int tong = 0;
        for (int i = 0; i < x.length; i++){
            tong += x[i];
        }
        return tong;
    }

Hoặc cách viết khác
    public static final int tinhTong(int ...x){
        int tong = 0;
        for (int i: x){
            tong += i;
        }
        return tong;
    }

Ví dụ đầy đủ:
package Bai8;

/**
 *
 * @author khanhvc
 */
public class PhuongThuc {
    /*
    public static int tinhTong(int a, int b){
        return a + b;
    }
    
    public static int tinhTong(int a, int b, int c){
        return a + b + c;
    }
    
    public static int tinhTong(int a, int b, int c, int d){
        return a + b + c + d;
    }
    
    public static final int tinhTong(int ...x){
        int tong = 0;
        for (int i = 0; i < x.length; i++){
            tong += x[i];
        }
        return tong;
    }
    */
    public static final int tinhTong(int ...x){
        int tong = 0;
        for (int i: x){
            tong += i;
        }
        return tong;
    }
    
    public static void main(String[] args) {
        int tong2 = tinhTong(1, 2);
        System.out.println("Tong " + tong2);
        
        int tong3 = tinhTong(1, 2, 3);
        System.out.println("Tong " + tong3);
        
        int tong5 = tinhTong(1, 2, 3, 4, 5);
        System.out.println("Tong " + tong5);
        
        int mang[] = {1, 2, 3, 4, 5}; 
        int tongMang = tinhTong(mang); // có thể truyền vào 1 mảng 
        System.out.println("Tong mang: " + tongMang);
    }    
}

YÊU CẦU:
Tạo lớp final có tên là XPoly và bổ sung các phương thức tĩnh và viết mã theo yêu cầu của các bài sau đây.

Bài 1:
Thêm một phương thức tĩnh có tên là sum() với tham số biến đổi kiểu double. Viết mã cho phương thức này để thực hiện tính tổng các tham số truyền vào.

Bài 2:
Bổ sung thêm 2 phương thức tĩnh để tìm số lớn nhất và nhỏ nhất từ tham số biến đổi

Bài 3:
Bổ sung thêm 1 phương thức tĩnh toUpperFirstChar(String s) để chuyển đổi các ký tự đầu tiên của mỗi từ sang ký tự hoa. Ví dụ: “nguyen van teo” sẽ đổi thành “Nguyen Van Teo”.

Bài 4:
Viết chương trình sử dụng các phương thức tiện ích đã xây dựng trong lớp XPoly ở trên.

THỰC HIỆN:

Tạo lớp final có tên là XPoly (nội dung lớp gồm bài 1, 2, 3) và bổ sung các phương thức tĩnh và viết mã theo yêu cầu của các bài sau đây. 
Thêm một phương thức tĩnh có tên là sum() với tham số biến đổi kiểu double. Viết mã cho phương thức này để thực hiện tính tổng các tham số truyền vào.
    public static final double tinhTong(double ...thamSo){
        double tong = 0;
        for (double x: thamSo){
            tong += x;
        }
        return tong;
    }
Bổ sung thêm 2 phương thức tĩnh để tìm số lớn nhất và nhỏ nhất từ tham số biến đổi
    public static final double timMax(double ...thamSo){ // tìm số lớn nhất
        double max = thamSo[0];
        for (double x: thamSo){
            if ( x > max) 
                max = x;
        }
        return max;
    }
    // bai 2
    public static final double timMin(double ...thamSo){ // tìm số nhỏ nhất
        double min = thamSo[0];
        for (double x: thamSo){
            if ( x < min) 
                min = x;
        }
        return min;
    }
Bổ sung thêm 1 phương thức tĩnh toUpperFirstChar(String s) để chuyển đổi các ký tự đầu tiên của mỗi từ sang ký tự hoa. Ví dụ: “nguyen van teo” sẽ đổi thành “Nguyen Van Teo”.
    public static String ghiHoaKyTuDau(String motTu){ // Ghi hoa ký tự đầu tiên của một chuỗi
        return motTu.substring(0, 1).toUpperCase() + motTu.substring(1).toLowerCase();
    }
    
    public static String ghiHoaKyTuDauTienMoiTu(String chuoi){
        String chuoiMoi="";
        String [] mangMotTu = chuoi.split(" ");
        for (String motTu: mangMotTu ){
//            chuoiMoi += ghiHoaKyTuDau(motTu) + " "; // nối chuỗi theo cách thông thường
            chuoiMoi += ghiHoaKyTuDau(motTu).concat(" "); // nối chuỗi theo kiểu sử dụng hàm concat
        }
        return chuoiMoi;
    }
Viết chương trình sử dụng các phương thức tiện ích đã xây dựng trong lớp XPoly ở trên.
package Bai_8;

/**
 *
 * @author khanhvc
 */
public class Bai_8 {
    public static void main(String[] args) {
        
        System.out.println("Tong " + XPoly.tinhTong(1, 2, 3, 4, 5));
        System.out.println("Min " + XPoly.timMin(1, 2, 3, 4, 5));
        System.out.println("Max " + XPoly.timMax(1, 2, 3, 4, 5));
        System.out.println("Ghi hoa chu cai dau: " + XPoly.ghiHoaKyTuDauTienMoiTu("tOny tEO teO TEO"));
    }



Xong!

[Tự Học HTML & CSS Cơ Bản] WEB1013 - Bài 3 - Tìm Hiểu CSS

MỤC TIÊU
Kết thúc bài này bạn có khả năng:
  • Biết cách định dạng văn bản với CSS: inline CSS, embed/internal CSS và external CSS
  • Biết cách định nghĩa và sử dụng các selector cơ bản: HTML, class và id

LÝ THUYẾT

CSS là gì?
CSS - Cascading Style Sheets: là ngôn ngữ được dùng để trình bày văn bản viết bằng ngôn ngữ HTML hay XHTML. Hay nói cách khác CSS là ngôn ngữ tạo style cho trang web.

Bố cục CSS dạng hộp

  • Margin: Là khoảng cách xung quanh bên ngoài của phần tử.
  • Border: Là đường liền nằm bên ngoài phần đệm.
  • Padding: Không gian xung quanh nội dung.

Có 3 loại CSS:
Inline CSS: áp dụng trực tiếp trên một đối tượng nhất định bằng cách sử dụng thuộc tính style

Ví dụ:
<!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>Tìm hiểu CSS inline</title>
</head>
<body>
    <h1 style="color:blue;">CSS inline - Đây là dòng tiêu đề</h1>
    <p style="color:red;">CSS inline</p>
</body>
</html>

Internal CSS: là đặt CSS ở đầu trang web để áp dụng kiểu dáng cho toàn bộ trang, khi đó chỉ cần đặt đoạn CSS vào trong cặp thẻ <style> rồi đặt vào trong phần header của website (giữa <head> và </head>):

Ví dụ:
<!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>Tìm hiểu CSS Embed/Internal</title>
    <style> /* internal CSS */
        .thuykieu{
            color: blue;
            font-style: italic;
        }
        strong{
            font-weight: bold;
            color: red;
        }
    </style>
</head>
<body>
    <div class="thuykieu">
        Đầu lòng hai ả tố nga <br>
        <strong>Thúy Kiều</strong>  là chị, em là <strong>Thúy Vân</strong>  <br>
        Mai cốt cách tuyết tinh thần <br>
        Mỗi người một vẻ mười phân vẹn mười <br>
    </div>
</body>
</html>
External CSS: là cách thuận tiện nhất bởi vì nó được trong một file .css. Bạn có thể tạo một file CSS với phong cách riêng rồi tải lên. Cách này sẽ cải thiện được thời gian tải trang trên website của bạn.

Ví dụ: 
Tạo file CSS có tên mystyle.css
.thuykieu{
    color: blue;
    font-style: italic;
}
strong{
    font-size: larger;
    font-weight: bold;
    color: red;
}

Từ trang HTML liên kết đến file mystyle.css bằng thẻ link
<!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>Tìm hiểu CSS External</title>
    <link rel="stylesheet" href="mystyle.css">
</head>
<body>
    <div class="thuykieu">
        Đầu lòng hai ả tố nga <br>
        <strong>Thúy Kiều</strong>  là chị, em là <strong>Thúy Vân</strong>  <br>
        Mai cốt cách tuyết tinh thần <br>
        Mỗi người một vẻ mười phân vẹn mười <br>
    </div>
</body>
</html>

Độ ưu tiên: Nếu có nhiều CSS trên cùng một trang HTML thì độ ưu tiên sẽ là:
  • Ưu tiên 1: Inline CSS.
  • Ưu tiên 2: External and internal style sheets.
  • Ưu tiên 3: Browser default – Mặc định của trình duyệt
  • Nếu các kiểu khác nhau được xác định trên cùng mức ưu tiên, kiểu cuối cùng có mức ưu tiên cao nhất.

YÊU CẦU

Bài 1:
Thiết kế trang web trình  bài thơ SAO theo yêu cầu và kết quả như



Bài 2:
Nội dung bài thơ:

ANH HỨA MÃI MÃI CHỈ YÊU EM
Em chẳng còn Con gái nữa đâu anh
Chữ trinh nguyên chẳng kịp dành anh nữa
Người đến trước trao em bao thề hứa
Cướp mất rồi, em khờ dại còn tin.

Em chẳng còn là đứa Con gái vẹn nguyên
Vẫn vui tươi, mộng mơ nhưng bình yên đã mất
Em sợ – Sợ một ngày sự thật
Chẳng giữ nổi anh, anh sẽ hận, sẽ cười.
Anh hứa mãi mãi chỉ yêu em

Em chẳng còn tự tin lúc bên người
Cái gia giáo, cái chữ trinh đè thân em trĩu nặng
Rồi một ngày biết em không còn trong trắng
Như anh vẫn chờ, anh có hết yêu em ?

Em vẫn cầu, vẫn nguyện ước bao đêm
Vẫn sợ lo anh sẽ xa em mãi
Bởi Con gái khi yêu luôn khờ dại
Anh có yêu nhiều để giữ chặt vòng tay?

Sử dụng external để định bài thơ với các yêu cầu:
  • Nội dung các đoạn in nghiêng (dùng thẻ em)
  • Chữ anh, em định dạng in đậm, màu nâu
  • Đoạn 1 màu đỏ, đoạn 2 màu xanh (green), đoạn 3 màu blue, đoạn 4 màu giống đoạn 1


THỰC HIỆN

Bài 1:

Tạo folder css có tên: css/lab3.1.doan3.css có nội dung: 
em.doan3{
    color: blue;
}
strong{
    color: brown;
}
	
Tạo file có phần mở rộng .html với nội dung
<!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 3 | Bài 1, bài thơ SAO</title>
    <style>
        .doan2{
            color: green;

        }
        strong{
            color: brown;
        }
    </style>
    <link rel="stylesheet" href="css/lab3.1.doan3.css">
</head>
<body>
    <h2>SAO</h2>
    <!-- Đoạn 1 CSS inline style-->
    <em style="color: red;">
        Một ngôi <strong style="color:brown;">sao</strong>  vừa rơi <br>
        vụt tắt trên bầu trời <br>
        hay là tên người ấy <br>
        vụt tắt ở trong tôi? <br> <br>
    </em>
    <!-- Đoạn 2 CSS nội bộ/embed - Internal nhúng trong html-->
    <em  class="doan2">
        Vẫn thấy trên bầu trời <br>
        có muôn vàn <strong> sao</strong>  sáng <br>
        mà ở trong lòng tôi <br>
        như một hành lang vắng <br> <br>


    </em>
    <!-- Đoạn 3 CSS Extention, bên ngoài-->
    <em class="doan3">
        Một ngôi <strong>sao</strong>  vừa tắt <br>
        bầu trời vẫn không buồn <br>
        <strong>sao</strong> tên người ấy tắt <br>
        trong lòng tôi cô đơn? <br> <br>
    </em>
</body>
</html>
	

Bài 2:
Tạo file css/lab3.2.css
em.doan1{
    color: red;
}
strong{
    color: brown;
}
em.doan2{
    color: green;
}
em.doan3{
    color: blue;
}
	
Tạo file .html có nội dung
<!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 3 Bài 2</title>
    <link rel="stylesheet" href="css/lab3.2.css">
</head>
<body>
    <h2>ANH HỨA MÃI MÃI CHỈ YÊU EM</h2>
    <em class="doan1">
        
        <strong>Em</strong> chẳng còn Con gái nữa đâu <strong>anh</strong> <br>
        Chữ trinh nguyên chẳng kịp dành <strong>anh</strong> nữa <br>
        Người đến trước trao <strong>em</strong> bao thề hứa <br>
        Cướp mất rồi, <strong>em</strong> khờ dại còn tin. <br> <br>

    </em>
    <em class="doan2">
        <strong>Em</strong> chẳng còn là đứa Con gái vẹn nguyên <br>
        Vẫn vui tươi, mộng mơ nhưng bình yên đã mất <br>
        <strong>Em</strong> sợ – Sợ một ngày sự thật <br>
        Chẳng giữ nổi <strong>anh, anh</strong> sẽ hận, sẽ cười. <br>
        <strong>Anh</strong> hứa mãi mãi chỉ yêu <strong>em</strong> <br> <br>

    </em>
    <em class="doan3">
        <strong>Em</strong> chẳng còn tự tin lúc bên người <br>
        Cái gia giáo, cái chữ trinh đè thân <strong>em</strong> trĩu nặng <br>
        Rồi một ngày biết <strong>em</strong> không còn trong trắng <br>
        Như <strong>anh</strong> vẫn chờ, <strong>anh</strong> có hết yêu <strong>em</strong> ? <br><br>

    </em>

    <em class="doan1">
        <strong>Em</strong> vẫn cầu, vẫn nguyện ước bao đêm <br>
        Vẫn sợ lo <strong>anh</strong> sẽ xa <strong>em</strong> mãi <br>   
        Bởi Con gái khi yêu luôn khờ dại <br>
        <strong>Anh</strong> có yêu nhiều để giữ chặt vòng tay? <br>

    </em>
</body>
</html>
	
Xong!

[Tự Học HTML & CSS Cơ Bản] WEB1013 - Bài 1 - Giới Thiệu Các Thẻ Hay Dùng Trong HTML

MỤC TIÊU
  • Biết cách sử dụng các thẻ căn bản trong html

LÝ THUYẾT

Thẻ Ví Dụ Diễn Giải
title <title>Tìm hiểu CSS External</title> Xác định tiêu đề của trang web
h1 ... h6 <h2>Hoa hồng Bungari – Tế Hanh</h2> Tạo những tiêu đề trang web, số càng cao chữ càng nhỏ
p <p>Đây là văn bản</p> Xác định một đoạn văn bản, có khảng cách giữa các đoạn
div <div>Văn bản</div> Xác định một đoạn văn bản, KHÔNG CÓ khảng cách giữa các đoạn
br Mỗi người một vẻ mười phân vẹn mười <br> Xuống dòng
hr <hr> Tạo đường kẻ nằm ngang
img <img src="img/hinhcute1.jpg" alt="" > Chèn ảnh
em <em>đoạn văn bản sẽ được in nghiêng</em> in nghiêng
i in nghiêng
b int đậm
strong <strong>đoạn văn bản sẽ được in đâm</strong> int đậm
del <del>Giá cũ</del> tạo đường kẻ ngang lên giữa văn bản
s tạo đường kẻ ngang lên giữa văn bản
ins Tạo một đường gạch chân lên văn bản
center
Căn giữa văn bản, hình
sub H<sub>2</sub>O Tạo văn bản có kích thước nhỏ, nằm ở khoảng nửa dưới văn bản bình thường
sup x<sup>2</sup> Tạo văn bản có kích thước nhỏ, nằm ở khoảng nửa trên văn bản bình thường(ghi dấu mũ)


YÊU CẦU:


THỰC HIỆN

Bài 1:
Gợi ý: Tạo thư mục img gồm các hình có tên: logo.jpg, hinh1.jpg, dùng margin-right: 20px cho hinh1.jpg để tạo khoảng cách giữa hình và chữ
<!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 1 | Bài 1</title>
</head>
<body>
    <img src="img/logo.jpg" alt="logo">
    <hr>
    <h2>XÂY DỰNG TRANG WEB</h2>
    <img src="img/hinh1.jpg" alt="Nếu không tìm thấy hình sẽ hiển thị dòng này" width="300px" style="float: left; margin-right: 20px;">
    <p>Cập nhật tin tức mới và nóng nhất về Đời sống - Xã hội, Kinh tế, Thế giới, Thể thao, Giải trí, Công nghệ và nhiều lĩnh vực khác</p>
</body>
</html>


Bài 2:
Gợi ý: Tạo thư mục img gồm các hình có tên: hinhcute1.jpg, hinhcute2.jpg, hinhcute3.jpg, hinhcute4.jpg; noel1.jpg, noel2.jpg, noel3.jpg, noel4.jpg
<!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 1 | Bài 2</title>
</head>
<body>
    <center>
        <h1>ALBUM ẢNH </h1>
        <hr>
        <img src="img/hinhcute1.jpg" alt="" height="200px" width="150px">
        <img src="img/hinhcute2.jpg" alt="" height="200px" width="150px">
        <img src="img/hinhcute3.jpg" alt="" height="200px" width="150px">
        <img src="img/hinhcute4.jpg" alt="" height="200px" width="150px">
        <hr>
        <img src="img/noel1.jpg" alt="" height="200px" width="150px">
        <img src="img/noel2.jpg" alt="" height="200px" width="150px">
        <img src="img/noel3.jpg" alt="" height="200px" width="150px">
        <img src="img/noel4.jpg" alt="" height="200px" width="150px">
    </center>
    
</body>
</html>


Bài 3:
Tạo file lab2.1_baitho.html với nội dung như dưới
<!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 2 | Bài 1</title>
</head>
<body>
 
    <em>
        Màu <strong>tím</strong> hoa sim màu <strong>tím</strong> nhớ <br>
        Màu <strong>tím</strong> lòng người <strong>tím</strong> ước mơ <br>
        Ôi <strong>tím</strong> thủy chung màu đẹp quá <br>
        Màu <strong>tím</strong> chiều ta <strong>tím</strong> ý thơ <br> <br>
        Màu tim hoa sim tim <strong>tím</strong> <mark>Huế</mark>  <br>
        Bầu trời tim <strong>tím tím</strong> tim tôi
        
    </em>
    
</body>
</html>

Bài 4:
Tạo file lab2.1_phuongtrinh.html với nội dung như dưới
<!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 2 | Bài 1 Phương Trình</title>
</head>
<body>

    <h1>Phương trình</h1>
    <p>a <sub>0</sub> x <sup> N </sup> + a <sub>1</sub> x <sup> N+1 </sup>  + ... a <sub>N</sub> x <sup> 0 </sup>  = 0 </p>
</body>
</html>

Bài 5:
Gợi ý: Tạo thư mục img gồm các hình có tên: logo.jpg
<!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 2 | Tổng hợp</title>
</head>
<body>
    <img src="img/logo.jpg" alt="">
    <hr>
    <a href="#">Home</a>
    <a href="lab2.1_baitho.html">Bài thơ</a>
    <a href="lab2.1_phuongtrinh.html">Phương trình</a>
</body>
</html>



Xong!

[Tự Học HTML & CSS Cơ Bản] WEB1013 - Bài Đầu Tiên - Cài Trình Soạn Thảo & Làm Quen

NỘI DUNG:
1. Download Visual Studio Code và cài đặt
2. Tìm các extension cần thiết cho lập trình HTML tại đây:
3. Làm quen/lập trang web đầu tiên
4. Cấu trúc căn bản của trang html
5. Cách chạy trang web: 

THỰC HIỆN:

1. Download Visual Studio Code và cài đặt
2. Tìm các extension cần thiết cho lập trình HTML tại đây:
  • Material Icon Theme
  • Auto Rename Tag
  • Auto Close Tag
  • ESLint
  • Live Server
  • Bracket Pair Color
  • Prettier - Code formatter
  • Polacode
  • CodeSnap
  • HTML CSS Support
  • IntelliSense for CSS class names in HTML
  • HTML Snippets
  • HTMLHint
Cách cài extension trên Visual Studio Code


Các extension cần thiết cho lập trình HTML đã cài đặt (nếu đã cài rồi sẽ không có chữ Install)


3. Làm quen/lập trang web đầu tiên

Tạo mới file > đặt tên có phần mở rộng là .html  > gõ html:5 nhấn enter



4. Cấu trúc căn bản của trang html

Ví dụ:
Code:
<!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>Bài Học Đầu Tiên | Làm Quen HTML</title>
</head>
<body>
    <h1>Tìm hiểu về HTML!</h1>
    <p>Hello mọi người, đây là trang web đầu tiên của tôi!</p>
</body>
</html>

5. Cách chạy trang web: 
Click chuột phải vào trang web > chọn Open with Live Server



Giải thích




Xong!


/*header slide*/