Giáo trình thiết kế web (ngành quản trị mạng máy tính trung cấp)

3 LỜI GIỚI THIỆU Mạng Internet được coi như một tổ hợp các Website, người sử dụng có thể đi từ trang này sang trang khác, có thể tương tác với các trang Web để hiển thị những nội dung

Giới thiệu Error! Bookmark not defined 2 Quản lý các site Error! Bookmark not defined.2 3 Quản lý nội dung trong site Error! Bookmark not defined.3 4 Chọn vùng nhìn Error! Bookmark not defined.4 5 Thẻ HTML cơ bản Error! Bookmark not defined CÂU HỎI, BÀI TẬP Error! Bookmark not defined.9 CHƯƠNG 2: TẠO TRANG WEB BẰNG HTML5

 Click đôi chuột lên biểu tƣợng Adobe DreamWeaver trên desktop

 Vào Start  Programs  Adobe DreamWeaver

Hình 1.1 Giao diện Adobe DreamWeaver

 Vào menu Window  Chọn/bỏ chọn để hiện/ẩn palette

Hình 1.2 Vị trí hiển thị của các palette

 Muốn mở rộng palette nào thì click chuột lên biểu tƣợng của palette đó

 Click chuột lên biểu tƣợng để mở rộng tất cả palette

Vào menu Site  Manage Sites Xuất hiện hộp thoại quản lý các site

Hình 1.3 Hộp thoại Manage Sites

 Click chuột lên nút New Site

 Đặt tên cho site, chọn ổ đĩa, thƣ mục chứa site rồi chọn Save trong hộp thoại Site Setup

Hình 1.4 Hộp thoại Site Setup

 Trong hộp thoại Manage Site, chọn site cần xóa trong danh sách

 Click chuột lên biểu tƣợng Delete the current selected sites ( )

3 Quản lý nội dung trong site

Mở rộng palette Files Cấu trúc site cần tạo sẽ có nội dung nhƣ sau:

3.2 Các loại tập tin trong site

 htm, html: trang web, tài liệu html

 jpg, png, gif: tập tin hình ảnh, dùng để chèn, định dạng nền cho trang web, thường được đặt trong thư mục images

 css: tập tin định dạng cho trang web, thường được đặt trong thư mục styles

 js: tập tin javascript, chứa các đoạn mã thực thi trên trình duyệt, thường đượt đặt trong thƣ mục scripts

3.3 Quản lý thƣ mục, tập tin

 Yêu cầu: tạo 03 thƣ mục images, scripts, styles và tập tin index.html trong site

To organize your files effectively, begin by right-clicking on the object within the Files palette and selecting "New Folder" to create a new folder Next, assign a suitable name to your new folder to keep your project organized Finally, right-click on the site, choose "New File," and specify a name for the new file to add content to your project efficiently.

4 Chọn vùng nhìn làm việc

Hình 1.6 Các tùy chọn vùng nhìn làm việc

 Click đôi chuột lên trang web cần thiết kế

To select a viewing area, click on the icon representing the desired region The platform offers three modes: "Code," which allows you to design pages using HTML code; "Design," enabling you to build your website by drag-and-drop various elements; and "Split," which divides the document window into two sections displaying code and design simultaneously These features facilitate efficient web development by providing flexible editing and viewing options.

5.1 Tìm hiểu cấu trúc tài liệu HTML

 Hầu hết các element bắt đầu bằng thẻ mở và kết thúc bằng thẻ đóng Ví dụ:

 Nội dung đƣợc đặt giữa thẻ mở và thẻ đóng Ví dụ:

Đây là đoạn văn bản

Trong bài viết, các thẻ HTML đặc biệt như giúp ngắt xuống dòng, tạo đường kẻ ngang để phân chia nội dung rõ ràng, còn thẻ được sử dụng để chèn hình ảnh vào bài viết, sẽ được hướng dẫn chi tiết ở phần sau để người đọc hiểu rõ hơn về cách sử dụng và ý nghĩa của từng thẻ này.

Thuộc tính của element được đặt trong thẻ mở, ví dụ như thẻ ``, trong đó `src` là tên thuộc tính và `images/i1.jpg` là giá trị của thuộc tính Giá trị của thuộc tính luôn được gắn trong cặp dấu nháy kép `" "`, giúp xác định đường dẫn tới hình ảnh một cách chính xác.

 Element nào được mở trước thì phải đóng sau

5.2 Thiết kế trang web bằng các thẻ HTML cơ bản

 META o Tạo từ khóa tìm kiếm o Tạo nội dung mô tả cho trang

 TR: Tạo dòng trong bản

 TH: Tương tự TD nhưng là ô tiêu đề, nội dung được tự động tô đậm và canh giữa ô

 DIV: Chia vùng riêng, chiếm hết chiều ngang của vùng chứa

 BR: Ngắt xuống dòng trong đoạn văn bản

 HR: Tạo đường kẻ ngang

 IMG: Chèn ảnh vào trang web

 A: Tạo liên kết đến trang web

 OL: Tạo danh sách đánh số thứ tự

 UL: Tạo danh sách không đánh số thứ tự

 LI: Tạo mục trong danh sách

 FORM: Tạo form cho người truy cập nhập thông tin vào trang web

 INPUT: Tạo các điều khiển cho phép người dùng nhập/chọn dữ liệu, đặt trong FORM

 SELECT: Tạo danh sách chọn

 OPTION: Tạo mục trong danh sách chọn

1.1 Thiết kế một trang web cơ bản theo mẫu: tạo layout cho TrangChu.html

2.2 Tạo form và các điều khiển trong form

YÊU CẦU KIỂM TRA, ĐÁNH GIÁ KẾT QUẢ HỌC TẬP Đúng cấu trúc tài liệu HTML Đúng quy tắc: mở trước, đóng sau

Giao diện đăng ký phải đƣợc đặt trong form

CHƯƠNG 2: TẠO TRANG WEB BẰNG HTML5

Mã môn: MH25.2 Giới thiệu:

HTML5 là phiên bản mới nhất của HTML, mang lại các element ngữ nghĩa rõ ràng giúp tối ưu hóa cấu trúc trang web Với HTML5, các trang web được thiết kế với số lượng element ít hơn, giúp mã nguồn sạch sẽ và dễ hiểu hơn Ngoài ra, HTML5 cho phép chèn multimedia dễ dàng hơn, nâng cao trải nghiệm người dùng trên các thiết bị khác nhau.

 Biết công dụng các tag mới trong HTML5

 Bố cục, thiết kế đƣợc trang web bằng HTML5

Sử dụng các thẻ ngữ nghĩa

 section: định nghĩa một vùng của tài liệu

 article: định nghĩa một bài viết (bài trên forum, blog, báo)

 nav, menu: định nghĩa vùng chứa navigation (thường gọi là menu) của trang

 header: định nghĩa vùng header (banner) của trang/bài viết

 footer: định nghĩa vùng cuối trang (thông tin liên hệ, bản quyền)

Sử dụng các thẻ mới của HTML5 trong Form

 Các type mới của input trong FORM o color: chọn màu o date: chọn ngày o time: chọn giờ

18 o email: nhập email o month: chọn tháng, năm o week: chọn tuần trong năm o number: chọn số o range: chọn giá trị trong vùng giới hạn

3 Sử dụng HTML Graphics SVG

SVG là viết tắt của Scalable Vector Graphics, là một định dạng hình ảnh (tương tự như JPG, PNG, mà chúng ta vẫn thường dùng)

SVG được sử dụng để vẽ đồ họa 2D trên website, đặc biệt hữu ích cho các sơ đồ kiểu vectơ như biểu đồ Pie và các đồ thị hai chiều trong hệ tọa độ X, Y Công nghệ này giúp tạo ra các hình ảnh đồ họa sắc nét, dễ tùy chỉnh và tích hợp trực tiếp vào các trang web Nhờ SVG, các biểu đồ và đồ thị trên trang web trở nên sống động, dễ hiểu hơn và nâng cao trải nghiệm người dùng.

SVG là chuẩn chính thức của tổ chức web thế giới W3C Ƣu điểm

 Hình ảnh SVG có thể phóng to nhƣng không vỡ ảnh

 Hình ảnh SVG có thể đƣợc in với chất lƣợng cao ở bất kỳ độ phân giải nào

 Hình ảnh SVG có thể đƣợc tạo và chỉnh sửa bằng javascript

 Hình ảnh SVG có thể tìm kiếm, đánh chỉ mục, nén,…

 Hình ảnh SVG có thể chuyển động sử dụng các thành phần animation đã xây dựng sẵn

 Hình ảnh SVG có thể chứa liên kết đến bất kỳ tài liệu nào khác

 SVG hầu nhƣ đƣợc hỗ trợ trên tất cả các trình duyệt

Phần tử trong HTML là một vùng chứa để vẽ đồ họa

SVG có một vài phương thức để vẽ như: đường thẳng, hình hộp, hình tròn, văn bản và hình ảnh đồ họa

3.2 Vẽ đường tròn SVG Để vẽ đường tròn ta dùng thẻ

Các thuộc tính trong là:

 cx: vị trí tâm, tính từ mép trái của SVG

 cy: vị trí tâm, tính từ mép trên

 fill: xác định màu tô

20 Để vẽ hình ellipse ta sử dụng thẻ

Khi vẽ hình tròn, các tham số cụ thể giúp kiểm soát hình dạng và vị trí của hình Thêm vào đó, hai thuộc tính quan trọng là rx và ry, trong đó rx xác định bán kính từ tâm đến mép bên trái của hình tròn, còn ry xác định bán kính từ tâm đến mép phía trên Việc sử dụng các thuộc tính này giúp tùy biến hình tròn một cách chính xác và linh hoạt hơn trong thiết kế đồ họa.

Các đặc trƣng HTML5, bao gồm sự hỗ trợ audio và video tự nhiên mà không cần Flash

Thẻ HTML5 và giúp việc thêm đa phương tiện vào website trở nên dễ dàng hơn, bằng cách sử dụng thuộc tính src để chỉ định nguồn nội dung và thuộc tính control để người dùng có thể chơi, tạm dừng hoặc điều chỉnh phương tiện một cách thuận tiện Để nhúng video, bạn chỉ cần sử dụng thẻ cùng các thuộc tính cần thiết, đảm bảo trải nghiệm người dùng thân thiện và đa dạng cho website của bạn.

Một phần tử video cho phép nhiều phần tử source và trình duyệt sẽ sử dụng định dạng đƣợc nhận ra đầu tiên:

Ví dụ: play một video đã cho

Các định dạng audio đƣợc sử dụng phổ biến nhất là ogg, mp3 và wav

Một phần tử audio cho phép nhiều phần tử source và trình duyệt sẽ sử dụng định dạng mà nó nhận ra đầu tiên:

Tạo trang web theo mẫu của bài 1 với cách sử dụng tối đa thẻ HTML5

CHƯƠNG 3: HOÀN CHỈNH GIAO DIỆN TRANG WEB VỚI CSS

Mọi trang web đều cần được định dạng và trang trí để thu hút người xem và mang lại trải nghiệm tiện lợi Nội dung thường được định dạng theo cùng một mẫu để duy trì tính nhất quán Với CSS, nhà thiết kế web chỉ cần viết mã định dạng một lần và áp dụng cho nhiều nội dung khác nhau, giúp tối ưu hóa quá trình thiết kế và duy trì trang web dễ dàng hơn.

 Biết công dụng của CSS, các loại CSS

 Thiết kế đƣợc trang web với HTML, HTML5, và CSS

1 Giới thiệu CSS và các loại CSS

CSS (Cascading Style Sheet) là tài liệu định nghĩa các quy tắc định dạng cho các element trong trang web

Quy tắc định dạng đặt trong một tập tin css và đƣợc sử dụng trong trang thông qua thẻ

Quy tắc định dạng đƣợc đặt ngay trong trang web, đặt trong thẻ …

Quy tắc định dạng cũng có thể đặt trong thuộc tính style của thẻ mở

2 Tạo và sử dụng CSS

 ID Selector: Dùng dấu # đặt trước tên quy tắc Quy tắc định dạng sẽ áp dụng trên các element có thuộc tính id phù hợp

 Class Selector: dùng dấu chấm (.) đặt trước tên quy tắc Quy tắc định dạng sẽ áp dụng trên các element có thuộc tính class phù hợp

Creating common formatting styles enhances web design by utilizing key CSS properties Important aspects include setting font-family for typography and color for text customization Adding borders (border-top/right/bottom/left) defines element boundaries visibly Padding adjusts the space between the content and the border, improving readability, while margins ensure proper spacing between containers and other elements Additionally, background-color and background-image properties are essential for setting background colors or images, contributing to an attractive and cohesive website appearance Incorporating these CSS styles is fundamental for effective and visually appealing web development.

3 Tạo định dạng chung cho trang web

4 Tạo giao diện trang web canh giữa trình duyệt

Hầu hết các màn hình LCD phổ biến trên thị trường ngày nay là màn ảnh rộng

Tỷ lệ màn hình rộng này có thể gây ảnh hưởng tới các nhà thiết kế web và cách họ trình bày trang Web

Với đoạn mã CSS ngắn gọn, bạn có thể dễ dàng căn chỉnh thiết kế trang web vào trung tâm trên mọi loại màn hình Điều này đảm bảo trang của bạn hiển thị đẹp mắt và đúng vị trí, bất kể màn hình theo tỷ lệ ngang hay dọc Sử dụng CSS giúp tối ưu hóa trải nghiệm người dùng và nâng cao tính thẩm mỹ của website.

Để đảm bảo các trình duyệt hiển thị đồng nhất, bạn cần tạo một file css với các quy tắc điều chỉnh phù hợp Trong file CSS này, bạn nên loại bỏ các hiển thị không cần thiết như bỏ danh sách kiểu cho thẻ

và

5 Tạo hiệu ứng đổi định dạng cho menu

Viết CSS cho

Thêm hiệu ứng cho gNav khi hover (di chuyển chuột đổi hiệu ứng)

6 Tạo khung viền bo tròn cho nội dung

Bốn giá trị bán kính đường viền được thiết lập theo thứ tự: 15px cho góc trên cùng bên trái, 50px cho góc trên cùng bên phải, 30px cho góc dưới cùng bên phải, và 5px cho góc dưới cùng bên trái Điều này giúp tạo ra các góc bo tròn đều và linh hoạt cho phần tử trong thiết kế Việc sử dụng các giá trị khác nhau cho từng góc giúp thiết kế trở nên sáng tạo và độc đáo hơn Chỉ cần chỉnh sửa các giá trị này để điều chỉnh độ cong của các góc theo ý muốn Việc áp dụng đúng các giá trị này không chỉ nâng cao thẩm mỹ mà còn tối ưu hóa trải nghiệm người dùng.

Để tạo hiệu ứng bo góc đẹp mắt cho phần tử, bạn có thể sử dụng thuộc tính CSS `border-radius` với giá trị “15px 50px 30px” Trong đó, giá trị đầu tiên áp dụng cho góc trên cùng bên trái, giá trị thứ hai cho các góc trên cùng bên phải và dưới cùng bên trái, còn giá trị thứ ba dành cho góc dưới cùng bên phải Việc điều chỉnh các giá trị này giúp tạo ra đường viền bo góc phù hợp, tăng tính thẩm mỹ và chuyên nghiệp cho trang web của bạn.

Giá trị của bán kính đường viền là 15px 50px, trong đó giá trị đầu tiên áp dụng cho các góc trên cùng bên trái và dưới cùng bên phải, giúp tạo ra các góc bo tròn mềm mại, trong khi giá trị thứ hai áp dụng cho các góc trên cùng bên phải và dưới cùng bên trái, mang lại kiểu dáng phù hợp và thẩm mỹ cho thiết kế web.

Một giá trị – bán kính đường viền: 15px; (giá trị áp dụng cho tất cả bốn góc, đƣợc làm tròn nhƣ nhau:

Viết css cho bài tập của bài học số 2 của trang web mẫu:

1.1 Viết css cho phần header

1.2 Viết css cho button của phần header

1.3 Viết css cho các đường thẳng đứng trong danh sách link của phần header

CHƯƠNG 4: TÙY BIẾN GIAO DIỆN VỚI CSS3

CSS3 là tiêu chuẩn mới nhất của CSS, hoàn toàn tương thích với các phiên bản trước Với CSS3, bạn có thể tạo ra các trang web đa màu sắc sinh động và thiết kế hiệu ứng hoạt hình phong phú một cách dễ dàng Đặc biệt, CSS3 giúp phát triển các hiệu ứng hoạt hình cho trang web mà không cần biết lập trình phức tạp, phù hợp với những người làm web muốn tối ưu hóa giao diện và trải nghiệm người dùng.

 Biết các thông tin định dạng của CSS3

 Thiết kế đƣợc giao diện trang web với HTML, HTML5 và CSS3

Tạo khung bo tròn các góc

Dùng ảnh làm đường viền

Chuẩn bị ảnh border.png

Hình 4.5 Kết quả của ảnh làm kẻ khung (border images)

Ví dụ 1: Dùng nhiều ảnh làm nền

Hình 4.6 Kết quả của ví dụ 1

Ví dụ 2: Thiết lập kích thước ảnh nền

Ví dụ 3: Sử dụng giá trị contain và cover để thiết lập kích thước ảnh nền

Hình 4.8 Kết quả của div1

Ví dụ 4: Thiết lập kích thước cho nhiều ảnh nền

 Hệ màu RGBA (Red-Green-Blue-Alpha)

Là sự kết hợp giữa RGB và Opactity

 Hệ màu HSL (Hue-Saturation-Lightness)

 Hệ màu HSLA (Hue-Saturation-Lightness-Alpha)

Là sự kết hợp giữa HSL và Opacrity

Xử lý hiển thị khi nội dung vượt quá kích thước vùng chứa

Hình 4.12 Kết quả của Text Overflow

Xử lý ngắt xuống dòng với những từ dài

Nội dung trong HTML Nội dung CSS

 Word Breaking: xử lý giữ hay ngắt những từ dài

 Ma trận biến đổi (matrix): kết hợp Scale, Skew và Translate matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

 Xoay xung quanh trục X (rotateX)

 Xoay xung quanh trục Y (rotateY)

 Xoay xung quanh trục Z (rotateZ)

Ví dụ 1: Khi di chuyển chuột lên hình vuông thì chiều ngang sẽ thay đổi đến 300px trong vòng 2 giây

Ví dụ 2: Chiều ngang thay đổi đến 300px trong 2 giây, chiều cao thay đổi đến 300px trong 4 giây

Ví dụ 3: Chờ 1 giây, chiều ngang thay đổi đến 300px trong 3 giây tiếp theo

Ví dụ 4: Thay đổi chiều ngang, cao trong 2 giây, xoay trong 3 giây

Ví dụ: Hình vuông sẽ chuyển từ màu đỏ sang màu vàng trong 2 giây

Quy định, kích thước của element:

 Trở ngại cho người thiết kế web khi viết CSS

 Thuộc tính box-sizing của CSS3 đảm bảo đúng padding, border mà vẫn đảm bảo kích thước đúng với giá trị của width và height

1.1 Thiết kế trang web có giao diện như hình bên dưới

44 5.2 Thiết kế trang web theo mẫu sau:

CHƯƠNG 5: XỬ LÝ TƯƠNG TÁC VỚI JAVASCRIPT

Javascript là ngôn ngữ lập trình xử lý trên tài liệu HTML, được thực thi trực tiếp trên trình duyệt Việc biết lập trình Javascript giúp các nhà thiết kế tạo ra các hiệu ứng động và sinh động hơn cho trang web, bên cạnh kiến thức về HTML và CSS Điều này giúp nâng cao trải nghiệm người dùng và làm cho trang web trở nên hấp dẫn hơn.

 Có kiến thức cơ bản về Javascript

 Biết lập trình nhúng xử lý tương tác cơ bản trên trang web bằng Javascript

1.1 Các cách nhúng Javascript vào trang web Đoạn Javascript có thể đƣợc đặt trong … hoặc … của tài liệu HTML

Cách 1: Viết trực tiếp trong tài liệu HTML

Cách 2: Viết các lệnh Javascript trong một tập tin script có phần mở rộng js sau đó chèn vào tài liệu HTML

1.2 Kiểu dữ liệu, khai báo biến

 Khai báo biến: var ;

Trong JavaScript, kiểu dữ liệu của biến không cần xác định ngay khi khai báo, giúp linh hoạt trong quá trình lập trình Biến trong JavaScript có thể lưu trữ các giá trị thuộc nhiều kiểu dữ liệu khác nhau như số (number), chuỗi (string), mảng (array), đối tượng (object), tạo điều kiện thuận lợi cho việc xử lý dữ liệu phong phú và đa dạng.

 Javascript linh động trong việc xử lý kiểu dữ liệu khi thực hiện các phép tính

 Kiểu số (numer): Javascript không quan tâm số thực/nguyên Javascript chỉ có một kiểu số

Chỉ số phần tử đầu tiên của mảng là 0

Trong ví dụ trên, đối tƣợng person có 4 thuộc tính: firstName, lastName, age và eyeColor

 Toán tử typeOf: cho biết kiểu dữ liệu của biến/biểu thức

 Trong Javascript, một biến chƣa đƣợc gán giá trị thì sẽ có giá trị là undefined và toán tử typeOf cũng sẽ trả về undefined

 Sự khác nhau giữa undefined và null

 Các toán tử trên số

 Toán tử so sánh và luận lý

 Toán tử trên kiểu dữ liệu

2 Sử dụng cấu trúc điều khiển

 Vòng lặp for/in: duyệt từng thuộc tính trong đối tƣợng

 Lệnh break, continue o break: thoát khỏi vòng lặp o continue: bỏ qua các lệnh bên dưới của vòng lặp hiện tại, tiếp tục vòng lặp tiếp theo

3 Sử dụng hàm và mảng

 Truy cập phần tử trong mảng

 Lưu trữ mảng dưới dạng đối tượng

 Thuộc tính và phương thức trên mảng o Thuộc tính length: cho biết số phần tử trong mảng o Phương thức sort: sắp xếp mảng

 Thêm phần tử vào mảng

 Duyệt phần tử trong mảng

3.2 Một số hàm toán học

 Lấy giá trị tuyệt đối

 Tìm giá trị nhỏ nhất

 Tìm giá trị lớn nhất

 Nhận giá trị ngẫu nhiên trong đoạn [0, 1)

 Làm tròn đến số nguyên gần nhất

 Làm tròn lên số nguyên gần nhất

 Làm tròn xuống số nguyên gần nhất

 Tạo đối tƣợng date: có 4 cách

 Các hàm đọc trên date

 Các hàm ghi trên date

Hàm được định nghĩa bắt đầu bằng từ khóa function, theo sau là tên hàm và các tham số đặt trong cặp dấu () Hàm có thể có một, nhiều hoặc không có tham số Các lệnh thực thi được đặt trong cặp dấu {}, giúp giữ cho mã rõ ràng và dễ quản lý.

Các lệnh thực thi sẽ đƣợc thực hiện khi có lời gọi hàm (đúng quy tắc)

 Hàm trả về giá trị

5.1 Thiết kế trang web hiển thị số tuổi sau khi nhập năm sinh

5.2 Thiết kế trang web hiển thị chu vi và diện tích hình chữ nhật

5.3 Thiết kế trang web giải và biện luận phương trình ax 2 + bx + c = 0

YÊU CẦU KIỂM TRA, ĐÁNH GIÁ KẾT QUẢ HỌC TẬP

Xây dựng hàm tính toán

Hướng dẫn: tham khảo hàm getElementById, thuộc tính value, innerHTML

CHƯƠNG 6: MỘT SỐ KỸ THUẬT THIẾT KẾ NÂNG CAO

HTML DOM (Document Object Model) là mô hình đối tượng chuẩn và giao diện lập trình cho tài liệu HTML, cho phép JavaScript truy cập và chỉnh sửa toàn bộ các phần tử trong tài liệu Với HTML DOM, bạn có thể dễ dàng thao tác nội dung và thuộc tính của các phần tử HTML, giúp nâng cao khả năng tương tác và của trang web.

 Biết các thuộc tính, sự kiện của các element trong trang web

 Thay đổi nội dung, định dạng các element bằng Javascript

 Lập trình được tương tác với người dùng trên trang web bằng Javascript

Giới thiệu CSS và các loại CSS Error! Bookmark not defined.8 2 Tạo và sử dụng CSS Error! Bookmark not defined.9 3 Tạo định dạng chung cho trang web

CSS (Cascading Style Sheet) là tài liệu định nghĩa các quy tắc định dạng cho các element trong trang web

Quy tắc định dạng đặt trong một tập tin css và đƣợc sử dụng trong trang thông qua thẻ

Quy tắc định dạng đƣợc đặt ngay trong trang web, đặt trong thẻ …

Quy tắc định dạng cũng có thể đặt trong thuộc tính style của thẻ mở

2 Tạo và sử dụng CSS

 ID Selector: Dùng dấu # đặt trước tên quy tắc Quy tắc định dạng sẽ áp dụng trên các element có thuộc tính id phù hợp

 Class Selector: dùng dấu chấm (.) đặt trước tên quy tắc Quy tắc định dạng sẽ áp dụng trên các element có thuộc tính class phù hợp

Creating common formatting styles is essential for effective web design Use the CSS properties such as font-family and color to define text style and color Apply border properties like border-top, border-right, border-bottom, and border-left to add borders around elements Adjust padding to control the space between the border and the content inside, while margin creates spacing between the container and surrounding elements Additionally, utilize background-color and background-image to set background colors or images for a visually appealing layout.

3 Tạo định dạng chung cho trang web

Tạo giao diện trang web canh giữa trình duyệt

Hầu hết các màn hình LCD phổ biến trên thị trường ngày nay là màn ảnh rộng

Tỷ lệ màn hình rộng này có thể gây ảnh hưởng tới các nhà thiết kế web và cách họ trình bày trang Web

Với đoạn mã CSS ngắn gọn, bạn có thể dễ dàng căn chỉnh thiết kế trang web vào trung tâm của màn hình Điều này giúp trang web hiển thị đẹp mắt và phù hợp trên mọi thiết bị, bất kể màn hình có tỷ lệ ngang hay dọc Sử dụng CSS để điều chỉnh trung tâm giúp tối ưu hóa trải nghiệm người dùng và đảm bảo tính thẩm mỹ của trang web trên mọi kích thước màn hình.

Để đảm bảo các trình duyệt hiển thị đồng nhất, bạn cần tạo file CSS tùy chỉnh như sau Trong đó, bạn cần điều chỉnh để loại bỏ các hiển thị không cần thiết, chẳng hạn như bỏ bullet hoặc số thứ tự của danh sách bằng cách dùng thuộc tính list-style cho các thẻ

Tạo hiệu ứng đổi định dạng cho menu

Viết CSS cho

Thêm hiệu ứng cho gNav khi hover (di chuyển chuột đổi hiệu ứng)

Tạo khung viền bo tròn cho nội dung Error! Bookmark not defined.2 CÂU HỎI, BÀI TẬP Error! Bookmark not defined.2 CHƯƠNG 4: TÙY BIẾN GIAO DIỆN WEB VỚI CSS3

Bài viết giới thiệu về bốn giá trị bán kính đường viền, với các thông số lần lượt là 15px, 50px, 30px, và 5px Các giá trị này lần lượt áp dụng cho các góc của phần tử: góc trên cùng bên trái, góc trên cùng bên phải, góc dưới cùng bên phải, và góc dưới cùng bên trái Việc thiết lập các bán kính này giúp tạo nên các cạnh bo tròn độc đáo và phù hợp với thiết kế mong muốn Đặc biệt, giá trị 50px tại góc trên cùng bên phải tạo điểm nhấn nổi bật cho giao diện Các thuộc tính này giúp tối ưu hóa giao diện người dùng, làm mềm mại các góc cạnh và nâng cao thẩm mỹ cho trang web hoặc ứng dụng của bạn.

Trong thiết kế CSS, thuộc tính "border-radius" có giá trị là 15px 50px 30px, trong đó giá trị đầu tiên áp dụng cho góc trên cùng bên trái, giá trị thứ hai cho các góc trên cùng bên phải và dưới cùng bên trái, còn giá trị thứ ba dành cho góc dưới cùng bên phải Điều này giúp tạo các góc bo tròn độc đáo và tùy chỉnh theo ý muốn, nâng cao tính thẩm mỹ cho giao diện web Sử dụng đúng quy tắc này sẽ giúp cải thiện trải nghiệm người dùng và tối ưu hóa SEO cho website của bạn.

Giá trị bán kính đường viền là 15px cho các góc trên cùng bên trái và dưới cùng bên phải, và 50px cho các góc trên cùng bên phải và dưới cùng bên trái, giúp tạo ra các góc bo mềm mại và tinh tế cho thiết kế trang web.

Một giá trị – bán kính đường viền: 15px; (giá trị áp dụng cho tất cả bốn góc, đƣợc làm tròn nhƣ nhau:

Viết css cho bài tập của bài học số 2 của trang web mẫu:

1.1 Viết css cho phần header

1.2 Viết css cho button của phần header

1.3 Viết css cho các đường thẳng đứng trong danh sách link của phần header

CHƯƠNG 4: TÙY BIẾN GIAO DIỆN VỚI CSS3

CSS3 là tiêu chuẩn mới nhất của CSS, hoàn toàn tương thích với các phiên bản trước đó Với CSS3, bạn có thể tạo ra trang web đa màu sắc, sinh động và thêm các hiệu ứng hoạt hình hấp dẫn mà không cần biết lập trình CSS3 giúp nâng cao trải nghiệm người dùng và tăng tính thẩm mỹ cho trang web của bạn.

 Biết các thông tin định dạng của CSS3

 Thiết kế đƣợc giao diện trang web với HTML, HTML5 và CSS3

Tạo khung bo tròn các góc

Dùng ảnh làm đường viền

Chuẩn bị ảnh border.png

Hình 4.5 Kết quả của ảnh làm kẻ khung (border images)

Ví dụ 1: Dùng nhiều ảnh làm nền

Ví dụ 2: Thiết lập kích thước ảnh nền

Ví dụ 3: Sử dụng giá trị contain và cover để thiết lập kích thước ảnh nền

Ví dụ 4: Thiết lập kích thước cho nhiều ảnh nền

 Hệ màu RGBA (Red-Green-Blue-Alpha)

Là sự kết hợp giữa RGB và Opactity

 Hệ màu HSL (Hue-Saturation-Lightness)

 Hệ màu HSLA (Hue-Saturation-Lightness-Alpha)

Là sự kết hợp giữa HSL và Opacrity

Text

Xử lý hiển thị khi nội dung vượt quá kích thước vùng chứa

Hình 4.12 Kết quả của Text Overflow

Xử lý ngắt xuống dòng với những từ dài

Nội dung trong HTML Nội dung CSS

 Word Breaking: xử lý giữ hay ngắt những từ dài

Fonts

 Ma trận biến đổi (matrix): kết hợp Scale, Skew và Translate matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

 Xoay xung quanh trục X (rotateX)

 Xoay xung quanh trục Y (rotateY)

 Xoay xung quanh trục Z (rotateZ)

Transitions

Ví dụ 1: Khi di chuyển chuột lên hình vuông thì chiều ngang sẽ thay đổi đến 300px trong vòng 2 giây

Ví dụ 2: Chiều ngang thay đổi đến 300px trong 2 giây, chiều cao thay đổi đến 300px trong 4 giây

Ví dụ 3: Chờ 1 giây, chiều ngang thay đổi đến 300px trong 3 giây tiếp theo

Ví dụ 4: Thay đổi chiều ngang, cao trong 2 giây, xoay trong 3 giây

Animations

Ví dụ: Hình vuông sẽ chuyển từ màu đỏ sang màu vàng trong 2 giây

Box Sizing

Quy định, kích thước của element:

 Trở ngại cho người thiết kế web khi viết CSS

 Thuộc tính box-sizing của CSS3 đảm bảo đúng padding, border mà vẫn đảm bảo kích thước đúng với giá trị của width và height

1.1 Thiết kế trang web có giao diện như hình bên dưới

44 5.2 Thiết kế trang web theo mẫu sau:

CHƯƠNG 5: XỬ LÝ TƯƠNG TÁC VỚI JAVASCRIPT

JavaScript là ngôn ngữ lập trình quan trọng dùng để xử lý nội dung trên tài liệu HTML và được thực thi trực tiếp trên trình duyệt web Để tạo ra các hiệu ứng động và làm nổi bật trang web, ngoài việc sử dụng HTML và CSS, các nhà thiết kế web còn cần trang bị kiến thức về lập trình JavaScript Việc tích hợp JavaScript giúp nâng cao trải nghiệm người dùng và làm cho website trở nên sinh động hơn.

 Có kiến thức cơ bản về Javascript

 Biết lập trình nhúng xử lý tương tác cơ bản trên trang web bằng Javascript

Trong JavaScript, kiểu dữ liệu của biến không cần xác định khi khai báo Biến trong JavaScript có thể lưu trữ giá trị của nhiều kiểu dữ liệu khác nhau như số (number), chuỗi (string), mảng (array), đối tượng (object), giúp linh hoạt trong quá trình lập trình và xử lý dữ liệu.

Hàm được định nghĩa bắt đầu bằng từ khóa function, theo sau là tên hàm và các tham số nằm trong cặp dấu () Hàm có thể có một, nhiều hoặc không có tham số nào Các lệnh thực thi trong hàm được đặt trong cặp dấu {} để thực hiện các chức năng mong muốn.

Hướng dẫn: tham khảo hàm getElementById, thuộc tính value, innerHTML

CHƯƠNG 6: MỘT SỐ KỸ THUẬT THIẾT KẾ NÂNG CAO

HTML DOM (Document Object Model) là mô hình đối tượng chuẩn và giao diện lập trình cho tài liệu HTML Với HTML DOM, JavaScript có thể truy cập và thay đổi toàn bộ các phần tử trong tài liệu, bao gồm nội dung và thuộc tính, giúp tạo ra các trang web động và tương tác hơn.

 Biết các thuộc tính, sự kiện của các element trong trang web

 Thay đổi nội dung, định dạng các element bằng Javascript

 Lập trình được tương tác với người dùng trên trang web bằng Javascript

Bạn có thể dễ dàng tạo website chuyên nghiệp bằng cách sử dụng các template dựng sẵn của Dreamweaver, giúp bạn tiết kiệm thời gian và công sức Sử dụng template, bạn sẽ có một trang web hoàn chỉnh từ đầu, đồng thời có thể tham khảo mã nguồn bên trong để học hỏi và tùy chỉnh theo nhu cầu của mình Đây là giải pháp tối ưu để bắt đầu dự án web một cách nhanh chóng và hiệu quả.

1.1 Chọn template mẫu của Dreamwaver

Vào File > New > Tab Generate chọn Page Design (CSS) > Cột giữa chọn Two Column Left Nav > Bấm Create

Xuất hiện CS Save As, bạn thấy Dòng Save in đã có tên Site bạn vừa tạo, nhập tên: index bấm Save

When the "Dependent Files" copy appears, especially containing image files, it is recommended to click "Cancel." Alternatively, you can create an "Images" folder to organize and store all your image files effectively.

Sau khi hoàn thành, bạn sẽ thấy trong cột Quản lý Files có thư mục images và file index.php Bạn có thể kéo các file ảnh vào thư mục images để tổ chức dữ liệu một cách dễ dàng Sau đó, nhấn vào file index.php để xem nội dung hiển thị bên trái màn hình Đừng quên nhấn “Save All” để lưu các thay đổi, rồi làm mới trình duyệt để kiểm tra kết quả cuối cùng.

Bước 1: Bôi đen tên Menu đầu tiên

Bước 2: Bấm Code > Nhập TRANG CHỦ

Bước 3: Bấm nút Design, bạn đã thấy tên TRANG CHỦ

Bước 4: Bạn lần lượt sửa lại đặt tên: GIỚI THIỆU - TIN TỨC - SẢN PHẨM – LIÊN

HỆ Vào trình duyệt bạn thấy các tên Menu vừa tạo

1.3 Bổ sung văn bản vào trang

Bấm chuột chỉ định vị trí nhập hoặc dán văn bản > Nhập văn bản Văn bản xuất hiện trên trang và canh theo lề trái

Trên Thanh chèn (Insert Bar) chọn Text từ Menu bật lên Bạn sử dụng Thanh chèn và Hộp Kiểm Properties để định dạng văn bản

1.5 Bổ sung hình ảnh vào trang

Chỉ định vị trí chèn hình ảnh > Bật Thanh chèn Common > Bấm nút Image > Đến nơi cần lấy ảnh > Mở trình duyệt xem

Với CSS, bạn có thể biến các thanh menu nhàm chán trở nên đẹp mắt hơn Cách tạo navigation bằng danh sách sử dụng các thẻ

2.2 Canh chỉnh đường dẫn và thêm đường viền cho menu
Thêm text-align:center vào
hoặc để căn chỉnh đường dẫn nằm vào giữa khối
Để tạo viền quanh thanh điều hướng, bạn cần thêm thuộc tính border vào thẻ
- trừ thẻ cuối cùng, giúp tăng tính thẩm mỹ và rõ ràng cho menu điều hướng trên trang web của bạn.
  2.3 Cố định chiều cao thanh điều hướng dọc
  Tạo một thanh điều hướng xác định chiều cao, cố định ở bên trái:
  3 Đối tƣợng nâng cao trong Javascript
  HTML DOM (Document Object Model) là mô hình đối tượng chuẩn và giao diện lập trình cho tài liệu HTML, cho phép JavaScript truy cập và chỉnh sửa toàn bộ các phần tử trong HTML Nhờ HTML DOM, JavaScript có thể thao tác, thay đổi nội dung cũng như thuộc tính của các element một cách dễ dàng và linh hoạt.
  3.1 Xử lý trên HTML DOM
  3.1.2 Cập nhật nội dung, thuộc tính
  3.1.4 Xử lý sự kiện của element
  Cách 1: Gán thuộc tính sự kiện cho hàm xử lý
  Cách 2: Gán thuộc tính sự kiện cho lệnh xử lý trong thẻ mở
  3.2.1 Window Đối tƣợng window đƣợc hỗ trợ trên tất cả trình duyệt, tham chiếu đến cửa sổ của trình duyệt
   Đọc kích thước cửa số (không bao gồm thanh cuộn, công cụ) o window.innerHeight: chiều cao o window.innerWidth: chiều rộng
   Mở cửa sổ mới: window.open()
   Đóng cửa sổ: window.close()
   Di chuyển cửa sổ: window.moveTo()
   Thay đổi kích thước cửa sổ: window.resizeTo()
  3.2.2 Screen window.screen trả về đối tượng chứa thông tin về màn hình của người sử dụng
   Chiều rộng của màn hình: screen.width
   Chiều cao của màn hình: screen.height
   Chiều rộng của màn hình (trừ đi vùng chứa tính năng của hệ điều hành: Windows Taskbar, …): screen.availWidth
   Chiều cao của màn hình (trừ đi vùng chứa tính năng của hệ điều hành: Windows Taskbar, …): screen.availHeight
   Đường dẫn URL của trang: window.location.href
   Trả về tên miền trỏ đến webserver của trang: window.location.hostname
   Trả về đường dẫn tương đối của trang trên webserver: window.locaiton.pathname
   Trả về giao thức đang truy cập trang: window.location.protocol
   Tải trang mới bằng assign: window.location.assign(URL)
  3.2.4 History window.history là đối tƣợng chứa lịch sử truy cập của trình duyệt
  Nút Back: window.history.back()
  Nút Forward: window.history.forward()
   Thông báo: window.alert(“Nội dung thông báo”)
   Hộp thoại cho người dùng chọn OK hoặc Cancel: window.confirm(“Thông báo”)
  Hộp thoại cho người dùng nhập giá trị: window.prompt(“Thông báo”, “Giá trị ban đầu)
   Đợi một khoảng thời gian sau đó thực hiện các lệnh trong hàm
   Ngừng trước khi thực hiện hàm trong setTimeout
   Lặp lại các lệnh trong hàm sao một khoảng thời gian
  6.1 Thiết kế trang web thay đổi màu nền ngẫu nhiên cho đoạn văn bản mỗi khi click chuột lên nút
  6.2 Thiết kế trang web tự động thêm đường kẻ ngang (màu ngẫu nhiên) mỗi khi click chuột lên nút
  Chức năng của trang web là hiển thị danh sách HSSV gồm các thông tin như Mã HSSV, Họ lót, Tên, Giới tính và Năm sinh Khi người dùng nhấn nút “Thêm”, hệ thống sẽ chèn tự động một dòng mới ở cuối bảng, chứa các ô input để nhập dữ liệu Sau khi điền thông tin, người dùng có thể nhấn nút “Ghi” để lưu lại dữ liệu, đồng thời các thông tin sẽ được hiển thị ngay trong dòng mới, và các ô input sẽ biến mất Thiết kế này giúp người dùng dễ dàng thao tác và cập nhật danh sách HSSV một cách linh hoạt và trực quan.
  Lập trình thay đổi nội dung, thuộc tính của element
  Lập trình thêm, xóa element
  CHƯƠNG 7: TẠO GIAO DIỆN CHUYÊN NGHIỆP BẰNG JQUERY
  jQuery là thư viện Javascript dễ học và sử dụng, giúp nhà thiết kế web lập trình xử lý tương tác với trình duyệt một cách dễ dàng hơn Để thành thạo jQuery, người dùng cần có kiến thức về HTML, CSS và Javascript nhằm khai thác tối đa khả năng của thư viện này trong việc phát triển website tương tác chuyên nghiệp.
   Biết công dụng của jQuery
   Thiết kế đƣợc giao diện trang web chuyên nghiệp với jQuery
  jQuery là một thư viện Javascript nhỏ gọn giúp lập trình web trở nên đơn giản hơn nhờ vào khả năng "viết ít, làm nhiều" Với jQuery, việc xử lý các tác vụ phổ biến trên trang web bằng Javascript chỉ cần một hoặc vài dòng lệnh, giảm thiểu công sức và thời gian lập trình Thư viện này đặc biệt hữu ích cho những nhà phát triển muốn tối ưu mã code và nâng cao hiệu quả trong quá trình xây dựng trang web.
  JQuery cũng đơn giản hóa rất nhiều công việc phức tạp từ Javascript, nhƣ các lệnh tải dữ liệu AJAX, thao tác trên HTML DOM
  Thƣ viện jQuery bao gồm các tính năng sau:
   Thao tác trên HTML DOM
   Phương thức xử lý sự kiện trên HTML
  Tải jQuery mới nhất từ http://jquery.com/download/ về thƣ mục Scripts trong site
  Khai báo sử dụng thƣ viện jQuery bằng thẻ script
  Trong đó: x, y, z là phiên bản jQuery sử dụng
   $: dấu báo lệnh sử dụng thƣ viện jQuery
   selector: truy vấn lọc/tìm element
   action: hành động trên element
  2.1 Cú pháp và cách chọn tương tự CSS
  Element có thuộc tính id là “test”: $(“#test”)
  Tất cả element có thuộc tính class là “test”: $(“.test”)
  Tham khảo thêm tại: http://www.w3schools.com/jquery/jquery_ref_selectors.asp
  2.2 Chọn theo mối quan hệ phân cấp
  3 Thay đổi nội dung, thuộc tính
  3.1 Duyệt danh sách các element
  3.3 Đọc, thay đổi nội dung trong element
   Thay đổi nội dung text
   Thay đổi nội dung html
  3.4 Đọc, thay đổi thuộc tính
   Đọc giá trị thuộc tính
   Thay đổi giá trị thuộc tính
   append: chèn nội dung vào cuối element
   prepend: chèn nội dung vào đầu element
   after: chèn nội dung vào sau element
   before: chèn nội dung vào trước element
   Thêm/xóa giá trị của thuộc tính class o addClass: thêm một hoặc nhiều class o removeClass: xóa một hoặc nhiều class o toggleClass: lần lƣợt thêm/xóa class
   Sử dụng phương thức css
  Các phương thức thay đổi kích thước
  4.2 Xử lý một số sự kiện thường gặp
   ready: khi document đƣợc tải
   focus: khi control trong form nhận đƣợc con trỏ
   blur: khi control trong form không còn chiếm con trỏ
   keypress: nhấn phím trong khi control đang nhận con trỏ
   mousehover: khi con trỏ chuột ở trên element
   mouseout: khi con trỏ chuột di chuyển ra khỏi element
  4.3 Xử lý đối tƣợng Event
  Trong mục 5.2, chúng ta đã xây dựng hàm xử lý cho sự kiện mà không sử dụng tham số sự kiện Tuy nhiên, để đảm bảo hàm xử lý sự kiện đầy đủ và chính xác, cần thiết phải có tham số sự kiện, giúp quản lý và xử lý các sự kiện một cách hiệu quả hơn trong lập trình Việc sử dụng tham số sự kiện là một nguyên tắc quan trọng trong viết hàm xử lý sự kiện, nhằm tăng tính linh hoạt và mở rộng cho mã nguồn.
   Vị trí tương đối của con trỏ chuột (event.pageX, event.pageY)
   Loại của sự kiện (event.type)
   Cho biết phím (hoặc nút chuột) nào đƣợc nhấn (event.which)
  5 Tạo hiệu ứng và hoạt ảnh
   Hiện: tương tự như ẩn, thay hide bằng show
   Ẩn chuyển sang hiện, hiện chuyển sang ẩn (toggle)
   Ẩn xuống (fadeOut): tương tự hiện lên, thay fadeIn bằng fadeOut
   Ẩn chuyển sang hiện, hiện chuyển sang ẩn (fadeToggle)
  Cách dùng các tham số: speed, easing, callback tương tự như mục 5.1 và 5.2
  Trong đó: speed, easing và callback là các tham số tùy chọn
  7.1 Thiết kế trang web thay đổi màu nền ngẫu nhiên cho đoạn văn bản mỗi khi click chuột lên nút
  7.2 Thiết kế trang web tự động thêm đường kẻ ngang (màu ngẫu nhiên) mỗi khi click chuột lên nút
  Trong phần 7.3, thiết kế trang web hiển thị danh sách HSSV với các trường mã HSSV, họ tên, giới tính và năm sinh, được tích hợp chức năng thêm mới dòng dữ liệu Khi nhấn nút “Thêm”, hệ thống sẽ chèn một dòng trống ở cuối bảng với các ô nhập liệu để người dùng có thể nhập thông tin của HSSV mới Sau khi nhập xong, người dùng nhấn nút “Ghi”, thông tin sẽ được hiển thị ngay trong dòng mới, các ô input sẽ tự động biến mất để thể hiện dữ liệu đã được lưu thành công Đây là tính năng giúp quản lý danh sách HSSV dễ dàng, linh hoạt và tối ưu hóa trải nghiệm người dùng.
  Lập trình thay đổi nội dung, thuộc tính của element
  Lập trình thêm, xóa element
  Quá trình chuyển đổi website từ môi trường thiết kế trên máy tính cục bộ sang môi trường mạng thực sự là bước quan trọng để tương tác với người dùng thực tế Đây là quá trình đưa website đã được thiết kế hoàn chỉnh lên internet, giúp mở rộng khả năng tiếp cận và cung cấp trải nghiệm trực tuyến cho người dùng Việc này đảm bảo rằng website hoạt động ổn định, tối ưu hóa hiệu suất và đáp ứng các tiêu chuẩn SEO để nâng cao sự hiện diện trực tuyến.
   Làm việc với các bước xuất bản website
  1 Đăng ký web hosting miễn phí
  Xuất bản website được chia thành nhiều bước:
  Cập nhật và chỉnh sửa website
  2 Publish web lên web hosting miễn phí
  Bước 1: Đăng ký tài khoản Hostinger: http://www.hostinger.vn/order
  Bước 2: Điền đầy đủ thông tin rồi bấm vào tạo tài khoản
  Bước 3: Vào Email để xác nhận tài khoản
   Truy cập vào đường dẫn trên, sau đó nhấp vào nút đăng kí trong bảng Free
   Ngay sau đó trong danh sách tài khoản sẽ xuất hiện tài khoản bạn vừa tạo
  XỬ LÝ TƯƠNG TÁC VỚI JAVASCRIPTS
  Tổng quan Javascript
  Trong JavaScript, kiểu dữ liệu của biến không cần xác định khi khai báo, giúp linh hoạt trong quá trình lập trình Biến trong JavaScript có thể lưu trữ các giá trị của nhiều kiểu dữ liệu khác nhau như số (number), chuỗi (string), mảng (array), đối tượng (object) và nhiều kiểu dữ liệu khác Điều này cho phép lập trình viên dễ dàng thao tác và xử lý dữ liệu một cách linh hoạt và hiệu quả.
  Hàm được định nghĩa bắt đầu bằng từ khóa function, theo sau là tên hàm và các tham số đặt trong cặp dấu () Hàm có thể có một, nhiều hoặc không có tham số nào Các lệnh thực thi bên trong hàm được đặt trong cặp dấu {} để thực hiện các tác vụ cần thiết.
  Hướng dẫn: tham khảo hàm getElementById, thuộc tính value, innerHTML .
  MỘT SỐ KỸ THUẬT THIẾT KẾ NÂNG CAO
  TẠO GIAO DIỆN CHUYÊN NGHIỆP BẰNG JQUERY
  PUBLISH WEBSITE

Tiêu đề	Giáo trình thiết kế web (ngành quản trị mạng máy tính trung cấp)
Trường học	Trường Cao đẳng Cộng đồng Đồng Tháp
Chuyên ngành	Quản trị mạng máy tính
Thể loại	Giáo trình
Năm xuất bản	2019
Thành phố	Đồng Tháp

Định dạng
Số trang	84
Dung lượng	2,78 MB