Giáo trình thiết kết web cơ bản (ngành thiết kết và quản lý website trung cấp)

nội dung

nội dung Định dạng tiêu đề cấp 4

nội dung Định dạng tiêu đề cấp 5

nội dung Định dạng tiêu đề cấp 6

Hiển thị trên trình duyệt:

Hình 2.9 Kết quả ví dụ 6

Nội dung đoạn văn bản

Thẻ dùng chuyển sang dòng mới trong cùng đoạn văn Thẻ là thẻ rỗng

Đây là một đoạn văn bản sử dụng ngắt dòng

Hiển thị trên trình duyệt:

Hình 2.10 Kết quả ví dụ 7 2.2.12 Thẻ

Thẻ dùng tạo đường phân cách giữa các thành phần trong trang web

2.3 LÀM VIỆC VỚI DANH SÁCH TRÊN TRANG WEB

Các kiểu danh sách thường dùng:

- Danh sách không có thứ tự

- Danh sách có thứ tự

2.3.1 Danh sách không có thứ tự

Thẻ ul được dùng để tạo danh sách không có thứ tự trong HTML; ký hiệu đầu dòng trước mỗi mục trong danh sách mặc định là một ký tự đặc biệt hình tròn (bullet); thẻ ul được sử dụng kèm với thẻ li, với mỗi mục danh sách là một thẻ li nằm bên trong thẻ ul.

Hiển thị trên trình duyệt:

Hình 2.11 Kết quả ví dụ 8 2.3.2 Danh sách có thứ tự

Thẻ

được dùng để tạo danh sách có thứ tự trong HTML, với ký hiệu đầu dòng mặc định là một con số ở đầu mỗi mục Để xây dựng danh sách có thứ tự, bạn ghép thẻ
với thẻ
1. , trong đó mỗi thẻ
2. chứa nội dung của một mục.

3. Mục thứ nhất
4. Mục thứ hai
5. Mục thứ ba
6. Mục thứ nhất
7. Mục thứ hai

Hiển thị trên trình duyệt:

Hình 2.12 Kết quả ví dụ 9

Ví dụ 10: danh sách lồng nhau

Hiển thị trên trình duyệt:

Hình 2.13 Kết quả ví dụ 10

Làm việc với các đối tượng media trên trang web

Thẻ dùng để chèn một tập tin hình ảnh (.gif, ico, cur, jpg, jpeg, png, svg, bmp,…) vào tài liệu HTML

Bảng 2.1 Các thuộc tính thẻ

Trong thẻ img, các thuộc tính quan trọng gồm alt, src và height Alt xác định văn bản thay thế khi hình ảnh không hiển thị hoặc cho người dùng trình đọc màn hình, ví dụ alt="logo CTy" giúp người xem nắm bắt nội dung và tăng khả năng tối ưu hóa cho công cụ tìm kiếm Src chứa đường dẫn URL đến tập tin ảnh cần chèn vào tài liệu, ví dụ src="img/logo.gif" Height xác định chiều cao của hình ảnh tính bằng pixel, giúp kiểm soát kích thước và bố cục trang Việc sử dụng đúng các thuộc tính alt, src và height không chỉ cải thiện khả năng tiếp cận mà còn hỗ trợ SEO và trải nghiệm người dùng.

% height="50px" Xác định chiều cao của hình ảnh width pixels

% width="50px" Xác định chiều rộng của hình ảnh title Text title = "trang chủ" Văn bản hiển thị khi di chuyển chuột trên hình ảnh

Ví dụ 11 minh họa cách chèn hình html5.gif vào tập tin index.html Hình html5.gif nằm trong thư mục image và index.html nằm trong thư mục html; hai thư mục này nằm ở cùng cấp trong cấu trúc dự án, nên đường dẫn tới hình từ index.html là /image/html5.gif Bạn có thể chèn bằng thẻ img như sau: Việc dùng đường dẫn tương đối giúp hình ảnh hiển thị đúng khi di chuyển cả hai thư mục hoặc triển khai trên máy chủ khác nhau Để tối ưu SEO và trợ năng, có thể bổ sung thuộc tính width và height hoặc đóng gói trong thẻ figure với figcaption.

Sử dụng địa chỉ tương đối:

Ví dụ 12: chèn hình w3schools_green.jpg từ website w3schools

Sử dụng địa chỉ tuyệt đối:

Thẻ dùng chèn âm thanh vào tài liệu HTML

Hỗ trợ các định dạng file: MP3, Wav, Ogg (tùy trình duyệt)

Dòng thông báo nằm giữa và sẽ hiển thị khi trình duyệt không hỗ trợ thẻ

Bảng 2.2 Các thuộc tính thẻ

Trong thẻ audio của HTML, các thuộc tính quan trọng gồm autoplay (tự động phát âm thanh khi tải trang), controls (hiển thị thanh điều khiển để người dùng tua, phát, tạm dừng), loop (lặp lại âm thanh khi kết thúc) và src (đường dẫn tới tập tin âm thanh) Autoplay cho phép nghe ngay khi trang được tải, controls cung cấp giao diện kiểm soát phát lại, loop giúp lặp lại nội dung âm thanh nếu cần và src xác định nguồn âm thanh để trình duyệt tải xuống và phát.

Trình duyệt bạn sử dụng không hỗ trợ thẻ audio

Hiển thị trên trình duyệt:

Hình 2.14 Kết quả ví dụ 13

Thẻ dùng chèn video vào tài liệu HTML

Hỗ trợ các định dạng file: MP4, WebM, Ogg (tùy trình duyệt)

Dòng thông báo nằm giữa và sẽ hiển thị khi trình duyệt không hỗ trợ thẻ

Bảng 2.3 Các thuộc tính thẻ

Thuộc tính Giá trị Mô tả

Audio muted Xác định trạng thái mặc định của âm thanh

Autoplay autoplay Xác định trạng thái tự động chạy của video

Controls controls Hiển thị bộ điều khiển của video

Height pixel Xác định chiều cao của video.

Width pixel Xác định chiều rộng của video

Loop loop Xác định video có được lặp lại hay không

Poster URL Xác định hình đại diện cho video src URL Xác định đường dẫn của video

Trình duyệt bạn sử dụng không hỗ trợ thẻ video

Hiển thị trên trình duyệt:

Hình 2.15 Kết quả ví dụ 14 2.4.4 Thẻ

Thẻ dùng chèn các đối tượng (plug-in) vào trang HTML Các đối tượng có thể là trang HTML, hình ảnh, audio, video, Java applets, ActiveX, PDF, Flash

Thẻ được hầu hết các trình duyệt hỗ trợ

Tuy nhiên, để chèn ảnh nên dùng thẻ , chèn trang HTML nên dùng thẻ , chèn video nên dùng thẻ , chèn âm thanh nên dùng thẻ

Dòng thông báo nằm giữa và sẽ hiển thị khi trình duyệt không hỗ trợ thẻ

Bảng 2.4 Các thuộc tính thẻ

Trong HTML, các thuộc tính liên quan đến đối tượng được chèn bao gồm data URL, width và height Thuộc tính data URL xác định địa chỉ của đối tượng chèn, thuộc tính width (đơn vị: pixel) xác định chiều rộng và thuộc tính height (đơn vị: pixel) xác định chiều cao của đối tượng chèn.

Ví dụ 15: chèn flash vào trang web

Ví dụ 16: chèn một tập tin HTML vào trang web

Làm việc với liên kết trên trang web

Khả năng chính của HTML là hỗ trợ liên kết, cho phép tạo liên kết tới tài liệu hay tập tin khác hoặc tới một phần khác trong cùng tài liệu đó Liên kết là sự kết nối quan trọng giúp người dùng điều hướng dễ dàng giữa các trang và nội dung, tăng tính liên thông của website Việc sử dụng liên kết hợp lý cũng hỗ trợ tối ưu hóa cho công cụ tìm kiếm và cải thiện trải nghiệm người đọc.

Các địa chỉ đặt liên kết đến có thể là:

- Một phần khác trong cùng tài liệu

- Một phần trong tài liệu khác

- Các tập tin khác: văn bản, hình ảnh, âm thanh,

- Vị trí hoặc máy chủ khác

Một liên kết được xác định bởi một địa chỉ URL của tập tin liên kết Địa chỉ URL phân làm 2 loại:

Địa chỉ tuyệt đối là vị trí tuyệt đối trên Internet, được xác định bằng một chuỗi đầy đủ các thành phần: giao thức, vị trí mạng (host), đường dẫn và tên tập tin Đây là cách nhận diện tài nguyên mạng một cách duy nhất và có thể truy cập trực tiếp từ mọi nơi bằng cách sử dụng đầy đủ chuỗi này Địa chỉ tuyệt đối không phụ thuộc vào vị trí hiện tại của tài nguyên trong cấu trúc thư mục hay máy chủ, nhằm đảm bảo định danh rõ ràng và tăng cường khả năng liên kết cũng như tối ưu hóa cho các công cụ tìm kiếm.

Ví dụ: https://www.w3schools.com

Địa chỉ tương đối (Relative URL) là vị trí liên kết được xác định so với trang web hiện tại chứa liên kết, chỉ bao gồm một phần nhỏ của đường dẫn tuyệt đối Điều này cho phép liên kết nội bộ linh hoạt hơn khi cấu trúc thư mục hoặc đường dẫn thay đổi Trong thực tế, có một số ký hiệu đường dẫn đặc biệt thường gặp như / đại diện cho thư mục hiện tại, / đại diện cho thư mục cha, / bắt đầu từ thư mục gốc, ? dùng để bắt đầu chuỗi tham số và # để đánh dấu phần neo (fragment).

Bảng 2.5 Ký hiệu đường dẫn

Trong cấu trúc thư mục của website, ký hiệu / đại diện cho thư mục gốc của trang web, ký hiệu / biểu thị thư mục hiện tại (liên kết mặc định), và ký hiệu / cho phép quay về thư mục cha, tức là đi ngược lại một cấp thư mục Việc hiểu và sử dụng đúng các ký hiệu này giúp điều hướng trang hiệu quả và tối ưu hóa liên kết nội bộ cho SEO bằng cách duy trì cấu trúc URL rõ ràng và nhất quán.

Trong mọi trình duyệt, liên kết được hiển thị theo mặc định với gạch chân và màu sắc phân biệt theo trạng thái: liên kết chưa thăm có màu xanh, liên kết đã thăm có màu tím, còn liên kết đang nhấn (active) sẽ hiển thị màu đỏ, giúp người đọc nhận biết nhanh trạng thái của liên kết trên trang.

2.5.1 Tạo liên kết đến tài liệu khác

siêu văn bản

Bảng 2.6 Các thuộc tính thẻ

Thuộc tính Giá trị Ví dụ Mô tả href URL href="index.html" Địa chỉ đến liên kết target

Xác định nơi để mở tài liệu

_blank: mở tài liệu ở cửa sổ mới

_parent: mở tài liệu ở cửa sổ cha của trang hiện hành

_self: mở tài liệu ở cửa sổ hiện hành

_top: mở tài liệu vào cửa sổ cao nhất title text title = "trang chủ" Văn bản hiển thị khi di chuyển chuột trên liên kết

Ví dụ 17: tạo liên kết từ baihoc1.html đến baihoc2.html; baihoc1.html và baihoc2.html đều nằm trong cùng thư mục baihoc

Ví dụ 18: tạo liên kết từ baihoc1.html đến baitap1.html; baihoc1.html nằm trong thư mục baihoc, baitap1.html nằm trong thư mục baitap

Baitap va baihoc có cùng thư mục cha là thietkeweb

Bài tập 1

Ví dụ 19: tạo liên kết đến trang web ở máy chủ khác

Intel Home Page

Ví dụ 20: tạo liên kết đến email

email Hotec

Ví dụ 21: mở (hay download) một file (file word, excel, pdf, image, )

Mở file vidu.doc trong thư mục "doc"

2.5.2 Tạo liên kết đến các phần trong cùng một tài liệu Để tạo liên kết đến các phần trong cùng một tài liệu thực hiện qua 2 bước:

+ Bước 1: đánh dấu vị trí neo bằng cách thêm thuộc tính id=“TenViTriNeo” vào thẻ đóng vai trò là điểm tham chiếu (thẻ

, thẻ tiêu đề

+ Bước 2: tạo liên kết đến vị trí neo bằng thẻ với thuộc tính href=“#TenViTriNeo”

Text đại diện

Ví dụ 22: người dùng nhấn vào vị trí „Về Chương 1‟ thì trình duyệt sẽ chuyển đến vị trí neo của Chương 1 trong cùng trang web

Ví dụ 23: người dùng nhấn vào vị trí „Đén Chương 1‟ thì trình duyệt sẽ chuyển đến vị trí neo của Chương 1 trên trang web baihoc.html

Đến Chương 1

Làm việc với bảng biểu trên trang web

Các thẻ thường dùng trong tạo bảng:

Bảng 2.7 Các thẻ tạo bảng

Định nghĩa một bảng

Định nghĩa một dòng trong bảng

Định nghĩa một ô trên dòng

Định nghĩa ô chứa tiêu đề của cột hoặc dòng

Tiêu đề của bảng

Thẻ chứa bên trong nó các thẻ ,, và Thẻ chứa bên trong nó các thẻ ,

Thẻ chứa bên trong nó là nội dung của ô

Có thể tạo một bảng con trong một bảng bằng cách thêm thẻ vào bên trong thẻ

* Cấu trúc bảng tổng quát:

Tiêu đề của bảng

Hiển thị trên trình duyệt:

Hình 2.16 Kết quả ví dụ 24

* Ghi chú: HTML5 không hỗ trợ hầu hết các thuộc tính định dạng bảng do đó dùng các thuộc tính css để thay thế (xem bài 3)

Sử dụng thuộc tính colspan, rowspan trong thẻ , để gộp ô

- Gộp các ô theo chiều ngang:

- Gộp các ô theo chiều dọc:

Hiển thị trên trình duyệt:

Hình 2.17 Kết quả ví dụ 25

Làm việc với biểu mẫu trên trang web

Form dùng để nhận thông tin từ người dùng hoặc phản hồi thông tin đến người dùng

Qua form người dùng có thể có các yêu cầu như:

- Nhập vào câu trả lời, ý kiến

- Chọn câu trả lời từ danh sách

- Chọn câu trả lời từ một hoặc một số tùy chọn

Dữ liệu thu thập được có thể xử lý tại máy khách hoặc có máy chủ Sau đó trả kết quả về cho người dùng

Một form trong HTML gồm nhiều phần tử khác nhau được gọi là các điều khiển của form Các điều khiển này có thể là hộp văn bản (text input), hộp danh sách lựa chọn (select), nút bấm (button), nút chọn (radio button) và các thành phần tương tác khác như hộp kiểm (checkbox) Những điều khiển form cho phép người dùng nhập dữ liệu hoặc chọn phương án, là cốt lõi để thu thập thông tin và nâng cao trải nghiệm người dùng trên trang web.

- Thẻ dùng tạo ra một form trong tài liệu HTML

- Các phần tử của form: hộp văn bản, hộp danh sách lựa chọn, nút bấm, nút chọn…phải nằm trong cặp thẻ form

- Thẻ có thể chứa các thành phần điều khiển như: ,

, , , , ,… và cũng có thể chứa các thẻ khác

Các thành phần điều khiển của form

Bảng 2.8 Các thuộc tính thẻ

Thuộc tính Giá trị Ví dụ Mô tả

Action URL action="confirm.php" Địa chỉ sẽ gửi dữ liệu tới khi form được submit (bấm nút submit)

Thông thường là địa chỉ một trang web nằm ở phía máy chủ accept- charset charset accept-charset="ISO-

Specify the character sets that the server can process for form data by using the form's encoding type The enctype attribute defines how form data is encoded when submitted, with common options such as application/x-www-form-urlencoded, multipart/form-data, and text/plain For example, enctype="text/plain" illustrates one encoding method, while application/x-www-form-urlencoded is the default for simple forms and multipart/form-data is used for file uploads Choosing the right form encoding and character set ensures reliable data transmission and proper server-side handling.

Chỉ định cụ thể dạng dữ liệu gì trước khi gửi lên máy chủ method get post method="post"

Phương thức GET được dùng để truyền dữ liệu đơn giản, kích thước nhỏ và không cần bảo mật, vì dữ liệu được gửi không mã hóa nên thường nhanh hơn; trong khi POST thích hợp cho truyền dữ liệu có kích thước lớn và tính phức tạp, với thông tin được mã hóa trước khi gửi để tăng cường bảo mật.

=get name name name="login" Chỉ định tên cho form target

_blank _self _parent _top target="_blank"

Chỉ định cửa sổ sẽ hiển thị kết quả sau khi gửi dữ liệu từ form đến máy chủ

Thẻ được dùng tạo các thành phần điều khiển nhập thông tin

Các dạng điều khiển nhập: text, checkbox, password, radio button, button,

Bảng 2.9 Các thuộc tính thẻ

Thuộc tính Giá trị Ví dụ Mô tả alt Text alt="Đây là alt"

Đối với điều khiển input type="image", xác định nhãn cho hình thông qua thuộc tính alt hoặc aria-label để nội dung dễ hiểu và SEO tốt Đối với trường nhập liệu type="text" hoặc type="password", xác định giới hạn ký tự tối đa bằng thuộc tính maxlength (ví dụ maxlength="50") Để tham chiếu và xử lý dữ liệu hiệu quả, gán tên cho điều khiển bằng thuộc tính name, ví dụ name="inputName".

Xác định tên cho thành phần điều khiển

(với type="radio" thuộc tính name phải có cùng giá trị ở tất cả các thẻ input trong cùng nhóm điều khiển) size n size="30"

Xác định chiều dài của thành phần điều khiển: với input có type="text" hoặc type="password", kích thước được tính theo số ký tự (sử dụng thuộc tính size); đối với các loại input khác, kích thước được xác định bằng đơn vị pixel (px) Ví dụ: có thể dùng src="img/btn_name.gif" làm nguồn ảnh cho nút hình.

Trong HTML, các trường của form được xác định bằng thẻ input với nhiều kiểu khác nhau để người dùng tương tác Ví dụ, input type='button' hoặc input type='submit' tạo nút nhấn, input type='image' cho phép dùng hình ảnh làm nút submit, input type='checkbox' là hộp chọn cho phép chọn nhiều giá trị cùng lúc, input type='file' cho phép chọn file, input type='hidden' ẩn dữ liệu, input type='password' để nhập mật khẩu, input type='radio' là hộp lựa chọn cho phép chỉ một giá trị được chọn trong nhóm, input type='reset' là nút nhấn để trả về giá trị mặc định của các trường trên form, input type='text' cho hộp nhập văn bản trên một dòng, input type='color' là bảng màu, input type='date' là bảng ngày tháng, input type='email' là hộp nhập định dạng email, input type='tel' là hộp nhập định dạng số điện thoại, input type='search' cho ô nhập dạng tìm kiếm, và các thuộc tính value để gán giá trị (ví dụ value='nam') hoặc placeholder để gợi ý nhập liệu (ví dụ placeholder='dòng gợi ý'), nhằm tối ưu SEO và trải nghiệm người dùng.

Thêm dòng gợi ý cho điều khiển nhập width pixels

% width="100px" Xác định chiều rộng của điều khiển height pixels

Xác định chiều cao của điều khiển (chỉ sử dụng cho type="image") checked checked checked

Xác định một trường nhậpđang được chọn (sử dụng cho type="checkbox" hay type="radio") readonly readonly readonly

Xác định trường nhập chỉ được đọc (sử dụng cho type="text", type="password") disabled disabled disabled

Xác định trường nhập không hiển thị trước khi tải trang pattern Giá trị định dạng pattern="[a-z]"

Define the initial input value by applying a pattern or format for common HTML input types, including text, date, search, URL, tel, email, and password Use a proper pattern to guide user input and validate the data on the client side, and set the required attribute to ensure the field is not left empty This approach improves form reliability, enhances user experience, and helps ensure consistent, accurately formatted data for better SEO and data quality.

Xác định giá trị bắt buộc cho một trường nhập autofocus autofocus autofocus

Xác định một trường nhập được "focus" khi tải trang autocomplete on off autocomplete="on"

Xác định một trường nhập có kích hoạt tự động hay không

Ví dụ 26: tạo hộp nhập liệu text và nút submit

Hiển thị trên trình duyệt:

Hình 2.19 Kết quả ví dụ 26 2.7.4 Thẻ

Thẻ dùng tạo một danh sách lựa chọn cho người dùng Mỗi một mục chọn trong danh sách được tạo bởi thẻ

tên mục chọn thứ nhất

tên mục chọn thứ hai

Bảng 2.10 Các thuộc tính thẻ

Trong thẻ select HTML, các thuộc tính quan trọng gồm multiple, name và size Thuộc tính multiple cho phép người dùng chọn nhiều mục lựa chọn cùng lúc, ví dụ multiple="multiple" Thuộc tính name xác định tên cho danh sách lựa chọn, ví dụ name="quequan" Thuộc tính size xác định số lượng mục hiển thị đồng thời trên danh sách, ví dụ size="5" Việc nắm bắt đúng các thuộc tính này giúp xây dựng form hiệu quả và tối ưu trải nghiệm người dùng.

Xác định số dòng trong danh sách lựa chọn được hiển thị

Bảng 2.11 Các thuộc tính thẻ

Thuộc tính và giá trị của thẻ select trong HTML: thuộc tính selected xác định một mục được chọn mặc định khi trang được tải, ví dụ một option có thuộc tính selected sẽ hiển thị ở trạng thái mặc định Thuộc tính value xác định giá trị của mỗi mục khi gửi form, ví dụ value="optValue" cho một mục Mô tả ngắn gọn: việc xác định mục được chọn và giá trị của mỗi mục giúp dữ liệu gửi đi rõ ràng và hỗ trợ trải nghiệm người dùng cũng như tối ưu hóa SEO.

Hiển thị trên trình duyệt:

Hình 2.20 Kết quả ví dụ 27

Thẻ dùng tạo một hộp nhập văn bản gồm nhiều dòng

Kích thước của hộp văn bản có thể xác định bằng các thuộc tính rows và cols

văn bản ban đầu

Bảng 2.12 Các thuộc tính thẻ

Trong HTML, thuộc tính name được dùng để xác định tên cho hộp văn bản, ví dụ name="gopy" Thuộc tính readonly làm hộp văn bản ở chế độ chỉ đọc, ví dụ readonly="readonly", giúp người dùng xem nội dung mà không thể chỉnh sửa Thuộc tính cols xác định số cột hiển thị cho textarea, ví dụ cols="20", nhằm điều chỉnh kích thước hiển thị của hộp văn bản đa dòng.

Xác định chiều rộng hiển thị của hộp văn bản (tính bằng số ký tự) rows Số rows="20"

Xác định số dòng trong hộp văn bản được hiển thị.

Hiển thị trên trình duyệt:

Hình 2.21 Kết quả ví dụ 28 2.7.6 Thẻ

Thẻ dùng định nghĩa nhãn cho thành phần điều khiển đi kèm

nội dung nhãn

Giá trị thuộc tính for của phải trùng giá trị thuộc tính id của các thẻ tạo điều khiển được gán nhãn (, , )

Hiển thị trên trình duyệt:

Hình 2.22 Kết quả ví dụ 29

Thẻ dùng để nhóm các thành phần bên trong với nhau Thẻ tạo đường bao ngoài bao quanh các thành phần trong nhóm

Thẻ đi kèm với thẻ dùng để tạo nhãn cho nhóm.

nội dung nhãncủa nhóm

Các thành phần điều khiển

Hiển thị trên trình duyệt:

Hình 2.23 Kết quả ví dụ 30

Hiển thị trên trình duyệt:

Hình 2.24 Kết quả ví dụ 31

Tạo Bố cục trang

Các thẻ tạo bố cục trang được sử dụng kết hợp với CSS để định dạng trang web

Thẻ được sử dụng để định nghĩa phần đầu (header) của trang

Thường được dùng cho phần giới thiệu hay chứa các thành phần điều hướng (navigation)

Thẻ được sử dụng để định nghĩa phần cuối (footer) của trang.

Thẻ main được dùng để định nghĩa phần nội dung chính hoặc quan trọng của tài liệu, giúp cấu trúc trang rõ ràng và tối ưu cho người dùng và công cụ tìm kiếm Thẻ này chỉ nên xuất hiện một lần trên mỗi trang và không được đặt làm phần tử con của thẻ article, nhằm duy trì sự phân cấp nội dung hợp lý và hỗ trợ truy cập.

Thẻ được sử dụng để định nghĩa phần điều hướng (navigation) của trang

Nội dung phần đầu trang

Nội dung phần điều hướng

Nội dung phần đầu trang

Nội dungphầnđiều hướng

Thẻ được sử dụng để định nghĩa một khối cho trang web

Thẻ được sử dụng để định nghĩa nội dung bài viết độc lập của trang

Thẻ được sử dụng để định nghĩa phần bên cạnh nội dung (như sidebar) của trang

Thẻ div là một phần tử trong HTML dùng để định nghĩa một khu vực trên tài liệu, thường được dùng để nhóm các thành phần nội dung thành một khối nhằm áp dụng CSS để định dạng và bố trí Việc dùng div hỗ trợ xây dựng cấu trúc bố cục linh hoạt, tối ưu cho responsive bằng cách phân chia nội dung thành các khối có thể gán class hoặc ID cho việc styling và scripting.

< section> Nội dung khối

Nội dung bài viết

Nội dung aside

nội dung định dạng

Thẻ span trong HTML được dùng để đánh dấu một khu vực nhỏ trên nội dung, thường để nhóm các phần nội dung inline lại với nhau nhằm áp dụng CSS cho phần đó hoặc phục vụ cho các thao tác với JavaScript Vì là thẻ inline, span cho phép bạn định dạng riêng cho một đoạn văn bản mà không làm thay đổi luồng bố cục của trang.

Đây là đoạn text có sử dụng thẻ span để định dạng

Bài tập áp dụng

1 Thiết kế trang web có nội dung như mẫu sau:

nội dung định dạng

2 Thiết kế trang web có nội dung như mẫu sau:

3 Tạo trang web có form như mẫu sau:

Trong đó Age chứa các giá trị:

THIẾT KẾ TRANG WEB VỚI DREAMWEAVER

Tạo và quản lý website

- Chọn menu Site  New Site  chọn thẻ Site

Hình 3.1 Hộp thoại Site setup –thẻ Site

+ Site Name: nhập tên site + Local Site Folder: chọn thư mục lưu các tập tin trong Site

 Tạo thƣ mục con trong site: bấm chuột phải lên tên site muốn tạo thư mục con  New folder

 Tạo tập tin trong site: bấm chuột phải lên tên thư mục muốn tạo tập tin

- Chọn thƣ mục mặcđịnh chứa hình ảnh trong site:

Chọn thẻ Site  chọn thẻ Advanced Settings  chọn thư mục mặc định chứa hình ảnh trong mục Default Images folder

Hình 3.3 Hộp thoại Site setup –thẻ Advanced

- Cấu hình server: chọn thẻ Server

Hình 3.4 Hộp thoại Site setup –thẻ Server

Chọn nút (+) để thêm một server mới

 Server Name: nhập tên server

 Connect using: chọn phương thức kết nối

 Root Directory: thư mục gốc

 Web URL: địa chỉ trang web

Automatically upload files to server: tự động upload các file lên web server mỗi khi trang được lưu

 Đƣa Website đã tạo sẵn vào Dreamweaver quản lý:

+ Chọn menu Site  New Site  chọn Site + Site Name: nhập tên site

+ Local Site Folder: chọn thư mục chứa Website đã tạo Save

- Chọn menu Site  Manage Sites

- Chọn tên website muốn quản lý  chọn nút Edit Site  chọn Site

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

- Đưa file lên server từ xa: chọn Put file(s) to “Remote Server”

- Lấy file về từ server từ xa: chọn Get file(s) from “Remote Server”

- Đồng bộ các file trên server từ xa và server cục bộ: chọn Sychronize

3.1.4 Kiểm tra và sửa lỗi trang web

 Kiểm tra và sửa lỗi các liên kết trong trang web

- Mở trang web muốn kiểm tra các liên kết

- Chọn menu Window  Results  Link Checker

- Chọn nút Check Link  chọn lệnh kiểm tra liên kết

Hình 3.8 Lệnh kiểm tra liên kết

- Sửa lỗi các liên kết: chọn 1 liên kết bị hỏng trong cửa sổ Broken Link  chọn nút Browse for file  chọn lại file liên kết

Hình 3.9 Lệnh sửa lỗi liên kết

 Hiệu lực hóa các trang web

Validator cho phép định vị nhanh các lỗi thẻ hoặc cú pháp trong mã lệnh

- Mở trang web muốn kiểm tra các liên kết

- Chọn menu Window  Results  Validation

- Chọn nút Validate  chọn lệnh kiểm tra

- Chọn nút More info để xem thêm thông tin dòng lỗi chọn

 Kiểm tra khả năng tương thích trình duyệt

- Mở trang web muốn kiểm tra

- Chọn menu File  Check Page  Browser Compatibility

- Trong cửa sổ Browser Compatibility chọn dòng lỗi để xem thông tin lỗi

Hình 3.11 Cửa sổ Browser Compatibility

Tạo và định dạng các đối tượng trên trang web

- Kiểm tra và kết thúc

3.2 TẠO VÀ ĐỊNH DẠNG CÁC ĐỐI TƢỢNG TRÊN TRANG WEB

3.2.1 Môi trường làm việc của Dreamweaver

 Các thành phần chính trong cửa sổ Dreamweaver

- Document Window: hiển thị các tài liệu Dreamweaver

- Document Toolbar: hiển thị các công cụ cho tài liệu hiện hành

- Docking Channel: chứa nhóm các panel

- Property Inspector : hiển thị các thuộc tính của đối tượng đang được chọn

 Các chế độ làm việc

Với một trang web, Dreamweaver cung cấp cho người dùng 3 giao diện hiển thị

Docking Channel Document Window Document Toolbar

- Chế độ Code: mã lệnh HTML, CSS, Javascript, …

- Chế độ Design: hiển thịtrang web trực quan, phù hợp với việc thiết kế giao diện.

- Chế độ Split: Chia màn hình thiết kế thành 2 phần, phần bên trái hiển thị mã lệnh, phần bên phải hiển thị kết quả thiết kế dưới dạng Design

3.2.2 Các thao tác cơ bản

 Tạo một trang web mới

- Từ menu File  New  Blank Page  Chọn HTML  Create

- Từ menu File  Save  Save in: chọn vị trí lưu

File name: nhập tên file save as type: chọn loại tập tin

- Từ menu File  Open  Look in: chọn vị trí chứa file mở  chọn tên file mở  Open

 Đóng trang web đang soạn

- Đóng tất cả các file đang mở: File  Close All

 Kiểm tra kết quả thiết kế trên trình duyệt

- Trên thanh công cụ  chọn nút Preview/Debug in Browser

 Chọn trình duyệt để kiểm tra trang web

Hình 3.13 Lệnh kiểm tra trang web trên trình duyệt

3.2.3 Làm việc với văn bản

- Trong khung cửa sổ Design chọn văn bản cần định dạng

- Chọn menu lệnh Format  Paragraph Format  chọn kiểu định dạng tiêu đề có sẵn Heading1, Heading2,… (hoặc chọn nút lệnh Format trên cửa sổ Properties)

Hình 3.15 Lệnh tạo tiêu đề

- Trong khung cửa sổ Design chọn văn bản cần định dạng

- Chọn menu lệnh Format  Align  chọn cách canh lề: Left, Center, Right, Justify

Headingl, Heading2, sử dụng class Tạo hoa thị Tạo số thứ tự

Giảm/ tăng khoảng cách với lề

Cách mở trang web liên kết sử dụng ID

 Tạo danh sách có thứ tự và không có thứ tự

- Trong khung cửa sổ Design chọn văn bản cần định dạng

- Chọn menu lệnh Format  List  chọn loại danh sách cần tạo

+ Unordered List: tạo danh sách không có thứ tự

+ Ordered List: tạo danh sách có thứ tự

(hoặc chọn nút Unordered List hay Ordered List trên cửa sổ Properties)

Hình 3.17 Lệnh tạo danh sách

 Tạo chữ đậm, chữ nghiêng, chữ gạch chân

- Trong khung cửa sổ Design chọn văn bản cần định dạng

- Chọn menu lệnh Format  List  Style  chọn kiểu định dạng:

Hình 3.18 Lệnh định dạnh chữ

3.2.4 Làm việc với hình ảnh

- Trong khung cửa sổ Design, đặt điểm chèn tại vị trí cần chèn hình ảnh

- Chọn menu lệnh Insert  Image  Look in: chọn vị trí chứa hình  chọn hình hoặc gõ địa chỉ hình trong mục URL

Hình 3.19 Hộp thoại Select Image Source

 Thay đổi thuộc tính hình ảnh

- Chọn hình cần thay đổi thuộc tính  chọn thuộc tính trong cửa sổ Properties:

+ Src: địa chỉ, tên file hình

+ Link: địa chỉ trang web liên kết với hình

+ Target: cách mở trang web liên kết

+ Alt: dòng chữ hiện ra khi người xem đưa chuột vào hình

+ : tạo các hotspot cho hình

+ ID: ID định dạng cho hình

+ Class: class định dạng cho hình

- Trong khung cửa sổ Design, đặt điểm chèn tại vị trí cần chèn file Flash

- Chọn menu lệnh Insert  Media

+ SWF: chèn movie flash (file swt)

+ Shockware: chèn shockware (file swc)

+ FLV: chèn video flash (file flv)

 chọn file muốn chèn  OK

Các định dạng file flash có thể chèn vào trang web: swt, swc, flv

- Trong khung cửa sổ Design, đặt điểm chèn tại vị trí cần chèn file âm thanh

- Chọn menu lệnh Insert  Media  Plugin

 chọn file audio muốn chèn  OK

- Chọn đối tượng (văn bản hoặc hình ảnh) tạo liên kết  gõ địa chỉ liên kết trong ô Link trên thanh Properties

- Hoặc chọn biểu tượng Browse for file để chọn file liên kết

- Hoặc kéo file liên kết (nếu file nằm trong website) thả vào ô link

 Tạo liên kết đến một vị trí bên trong 1 trang web

- Đặt tên cho 1 vị trí trong trang web: đặt điểm chèn tại vi trí muốn đặt tên  chọn lnsert  Name Anchor  nhập tên cho vị trí  OK

Để tạo liên kết, chọn đối tượng là văn bản hoặc hình ảnh Sau đó gõ #tên vị trí liên kết (phải có dấu # ngay trước tên vị trí liên kết) vào ô Link trên thanh công cụ.

- Trong khung cửa sổ Design, đặt điểm chèn tại vị trí cần tạo bảng

- Chọn menu lệnh Insert  Table

+ Rows: số dòng của bảng

+ Columns: số cột của bảng

+ Table width: chiều rộng của bảng, có thể tính theo đơn vị là pixels hay percent (%)

+ Border thickness: độ dày đường viền của bảng Nếu giá trị là 0, thì bảng không có đường viền

+ Cell padding: khoảng cách từ nội dung trong ô đến đường viền của ô + Cell spacing: khoảng cách giữa 2 ô trong bảng

+ Header: kiểu bảng có hoặc không có dòng tiêu đề, cột tiêu đề

+ Caption: dòng tiêu đề bảng

 Thay đổi thuộc tính bảng

- Chọn bảng cần thay đổi thuộc tính  chọn thuộc tính cần thay đổi trong cửa sổ Properties

+ CellPad: khoảng cách từ nội dung trong ô đến đường viền của ô + CellSpace: khoảng cách giữa 2 ô trong bảng

+ Align: canh bảng trên trang web

+ Border: Độ dày đường viền

+ Class: class định dạng cho bảng

+ Table: ID định dạng cho bảng

 Thay đổi thuộc tính của ô

- Chọn ô muốn thay đổi thuộc tính  chọn thuộc tính cần thay đổi trong cửa sổ Properties

+ Horz: Cách canh nội dung trong ô theo chiều ngang + Vert: Cách canh nội dung trong ô theo chiều dọc

+ No wrap: Cho/ không cho text tự động xuống dòng trong ô

+ Header Chuyển ô thường thành ô tiêu đề

- Chọn các ô muốn gộp  chọn nút Merges selected cells trong cửa sổ Properties

- Chọn ô muốn tách  chọn nút Splits cell trong cửa sổ Properties

+ Split cell into: chọn tách ô theo dòng (rows) hay cột (columns)

+ Number of rows (columns): chọn số dòng (hoặc cột) tách

Hình 3.25 Hộp thoại Split Cell

- Đặt điểm chèn trong ô muốn thêm cột hoặc dòng kề với nó  chọn menu Insert  Table Objects

+ Insert Row Above: chèn thêm một dòng bên trên ô có điểm chèn

+ Insert Row Below: chèn thêm một dòng bên dưới ô có điểm chèn.

+ Insert Column to the Left: chèn thêm một cột bên trái ô có điểm chèn. + Insert Column the Right: chèn thêm một cột bên phải ô điểm chèn

Hình 3.26 Lệnh chèn cột/ hàng

Form là công cụ để tạo biểu mẫu thu thập thông tin từ người xem trang web, cho phép người dùng nhập dữ liệu và gửi đi Một Form có thể chứa nhiều thành phần như TextField để nhập văn bản, CheckBox và RadioButton để chọn tùy chọn, cùng với các control khác như ComboBox, ListBox và TextArea giúp người dùng tương tác và lựa chọn một cách linh hoạt.

 Chèn một F orm mới vào trang web

- Trong khung cửa sổ Design, đặt điểm chèn tại vị trí cần chèn form

- Chọn menu lệnh Insert  Form  Form

- Trong khung cửa sổ Design, đặt điểm chèn trong form

- Chọn menu lệnh Insert  Form  TextField

Hình 3.28 Hộp thoại thuộc tính thẻ input

+ Label: khai báo nhãn đính kèm theo TextField

+ Position: vị trí của nhãn

* Hiệu chỉnh thuộc tính TextField

- Chọn TextField muốn hiệu chỉnh  chọn các thuộc tính trong cửa sổ Properties:

+ Char width: bề rộng của Textfield, tính bằng số kí tự

+ Max Chars: số kí tự tối đa có thề được nhập vào

+ Int val: giá trị ban đầu của TextField

Single line: TextField cho phép nhập văn bản 1 dòng

Multiline: TextField cho phép nhập văn bàn bao gồm nhiều dòng

Password: TextField chỉ hiện ra các dấu * khi người dùng nhập văn bàn vào khung

Radio Button sử dụng trong trường hợp cho phép chọn 1 trong các lựa chọn

- Trong khung cửa sổ Design, đặt điểm chèn trong form

- Chọn menu lệnh Insert  Form  Radio Button

* Hiệu chỉnh thuộc tính RadioButton:

- Chọn Radio Button muốn hiệu chỉnh  chọn các thuộc tính trong cửa sổ Properties:

+ Check value: khai báo giá trị sẽ được gởi về máy chủ

+ Initial State: trạng thái khởi đầu cho Radio Button

Checked: chọn sẵn, Unchecked: không được chọn sẵn

CheckBox sử dụng trong trường hợp cho phép chọn nhiều trong các lựa chọn

- Trong khung cửa sổ Design, đặt điểm chèn trong form

- Chọn menu lệnh Insert  Form  CheckBox

* Hiệu chỉnh thuộc tính CheckBox:

- Chọn CheckBox muốn hiệu chỉnh  chọn các thuộc tính trong cửa sổ Properties:

+ Check value: khai báo giá trị sẽ được gởi về máy chủ

+ Initial State: trạng thái khởi đầu cho CheckBox

Checked: chọn sẵn, Unchecked: không được chọn sẵn

- Trong khung cửa sổ Design, đặt điểm chèn trong form

- Chọn menu lệnh Insert  Form  Select (List/Menu)

* Hiệu chỉnh thuộc tính List/Menu:

- Chọn List/Menu muốn hiệu chỉnh  chọn các thuộc tính trong cửa sổ Properties

+ Type: chọn dạng Menu (comboBox), List (ListBox)

+ Chọn nút List Values để nhập các mục trong List/Menu:

Hình 3.33 Hộp thoại List values

+ Nhắp nút để thêm một mục

+ Nhắp nút để xóa mục đang

+ Nhắp nút để chỉnh thứ tự các mục

TextArea dùng trong trường hợp cần nhập nội dung nhiều dòng văn bản, thường là các yêu cầu, góp ý của người xem trang web

- Trong khung cửa sổ Design, đặt điểm chèn trong form

- Chọn menu lệnh Insert  Form  TextArea

* Hiệu chỉnh thuộc tính TextArea:

- Chọn TextArea muốn hiệu chỉnh  chọn các thuộc tính trong cửa sổ Properties

+ Char width: bề rộng của vùng nhập văn bản, tính bằng số ký tự

+ Num lines: số dòng hiện ra trên trang web

+ Initial val: văn bản khởi đầu cho CheckBox

+ Type: chọn loại phần tử input

- Trong khung cửa sổ Design, đặt điểm chèn trong form

- Chọn menu lệnh Insert  Form  Button

* Hiệu chỉnh thuộc tính Button:

- Chọn Button muốn hiệu chỉnh  chọn các thuộc tính trong cửa sổ Properties

+ Value: giá trị của button

+ Action: Submit form: tạo nút Submit

Reset form: tạo nút Reset None: tạo nút lệnh

- Trong cửa sổ CSS Styles  chọn nút New CSS Rule

( Mở/ đóng cửa sổ CSS Styles: chọn menu Window  CSS Styles)

Hình 3.36 Cửa sổ CSS Styles

Hình 3.37 Cửa sổ New CSS Rule

- Trong hộp thoại New CSS Rule:

+ Selector Type: chọn loại luật CSS

 Class (can apply to any HTML element): tạo class

 ID (applys to only one HTML element): tạo ID

 Tag (redefines an HTML element): tạo luật CSS cho một thẻ cụ thể

 Compund (based on your selection): tạo pseudo class cho liên kết

Hình 3.38 Danh sách chọn Selector type

Selector Name: Enter the tag name when Selector Type is Tag, or enter the class name when Selector Type is Class (the class name must start with a dot, e.g., tieude), or enter the ID name when Selector Type is ID (the ID must start with a hash, e.g., #footer). -**Support Pollinations.AI:** -🌸 **Ad** 🌸Powered by Pollinations.AI free text APIs [Support our mission](https://pollinations.ai/redirect/kofi) to keep AI accessible for everyone.

+ Rule definition: chọn nơi định nghĩa luật CSS

This document only: lưu luật CSS trong chính trang web hiện hành (internal style sheet)

New Style Sheet File: lưu luật CSS trong 1 file riêng (external style sheet)

chọn vị trí lưu  nhập tên file css

Hình 3.39 Danh sách chọn Rule Definition

- Trong hộp thoại CSS Rule definition: thiết lập các thuộc tính định dạng

+ Category: chọn lớp các thuộc tính định dạng

• Type: các thuộc tính định dạng văn bản

Hình 3.40 Hộp thoại CSS Rule definition

- Font-family: chọn bộ font

- Font-weight: độ đậm của chữ

- Font-style: kiểu chữ nghiêng, xiên

- Font-variant: kiểu chữ in nhỏ

- Line-height: chiều cao dòng văn bản

- Case: đổi thành chữ in, chữ thường, đầu chữ viết hoa

- Decoration: kiểu trang trí cho chữ: gạch dưới, gạch trên, gạch ngang

• Background: các thuộc tính định dạng nền

 Background-repeat : cách thức lặp ảnh nền

 Background-attachment: cố định (fixed)/ không (scroll) ảnh nền

 Background-position (X): định vị ảnh nền theo phương x

 Background-position (Y): định vị ảnh nền theo phương y

• Block: các thuộc tính định dạng khối

 Word-spacing: khoảng cách giữa các từ

 Letter-spacing: khoảng cách giữa các ký tự

 Vertical-align: canh lề theo phương đứng

 Text-align: canh lề theo phương ngang

 Text-indent: khoảng thụt đầu dòng

 Display: cách hiển thị khối văn bản (inline, block, )

• Box: các thuộc tính định dạng hộp

 Width: chiều rộng đối tượng

 Height: chiều cao đối tượng

 Float: cố định đối tượng nằm bên trái (left), phải (right) đối tượng khác

 Clear: bỏ tác động của thuộc tính float

 Padding: vùng đệm của đối tượng

 Margin: lề của đối tượng

• Border: các thuộc tính định dạng đường viền

 Width: độ dày đường viền

• List: các thuộc tính định dạng danh sách

 List-style-type: kiểu ký tự đầu mục của danh sách

 List-style-image: kiểu ký tự đầu mục của danh sách là hình ảnh

 List-style-position: vị trí ký tự đầu mục của danh sách

• Positioning: các thuộc tính định dạng vị trí

 Position: vị trí đối tượng trong mô hình hộp

 Z-Index: thứ tự đối tượng trong mô hình hộp

 Overflow: cách hiển thị nội dung trong mô hình hộp

 Áp dụng luật CSS cho đối tượng

- Chọn đối tượng muốn áp dụng luật CSS

- Trên cửa sổ Properties chọn tên class trong hộp Class hoặc tên ID trong hộp

In the CSS Styles window, select the CSS rule you want to edit, then click the Edit Rule button This opens the CSS Rule Definition dialog, where you can modify the properties of the selected CSS rule.

 Liên kết 1 file CSS có sẵn vào trang web hiện hành

- - Trong cửa sổ CSS Styles  chọn nút Attach Style Sheet

Hình 3.47 Hộp thoại Attach Style Sheet

File/URL: chọn địa chỉ file CSS muốn liên kết

- Trong cửa sổ CSS Styles  chọn tên luật CSS muốn xóa  chọn nút Delete CSS Rule

Bài tập áp dụng

1 Thiết kế trang web có nội dung và định dạng như mẫu:

2 Thiết kế trang web có form như mẫu:

ĐỊNH DẠNG TRANG WEB VỚI CSS

Tạo css cho trang web

CSS (Cascading Style Sheet) là một ngôn ngữ quy định cách trình bày cho các tài liệu HTML trên trang web

CSS giúp giảm thiểu việc làm rối mã HTML của trang web bằng cách tách phần định dạng khỏi HTML Nhờ sự phân tách này, mã nguồn của trang web trở nên gọn gàng và dễ bảo trì hơn, đồng thời việc cập nhật nội dung trên website cũng trở nên nhanh chóng và thuận tiện hơn.

CSS cho phép tạo ra các kiểu dáng và định dạng có thể áp dụng cho nhiều trang web, giúp tránh lặp lại công việc thiết kế cho các trang giống nhau và tiết kiệm đáng kể thời gian cũng như công sức trong quá trình thiết kế web.

- Do CSS được hỗ trợ bởi tất cả các trình duyệt giúp cho trang web hiển thị hầu như giống nhau trên các hệ thống khác nhau

Cấu trúc của một luật CSS gồm 2 phần: bộ chọn (selector) và khai báo (declaration).

Bộ chọn{ thuộc tính: giá trị;}

- Bộ chọn: là các đối tượng sẽ được áp dụng các thuộc tính trình bày Các đối tượng này có thể là các thẻ HTML, class hoặc id

Khai báo gồm hai yếu tố: thuộc tính (property) quy định cách trình bày và giá trị (value) của thuộc tính được viết cách nhau bởi dấu hai chấm ':', toàn bộ khai báo phải được đặt trong cặp ngoặc nhọn '{}'.

Có thể sử dụng nhiều khai báo cho bộ chọn CSS; mỗi khai báo được viết và tách bằng dấu chấm phẩy ';', và nên để mỗi khai báo trên một dòng riêng để dễ đọc và dễ bảo trì mã nguồn.

- Để ghi chú trong CSS, sử dụng dấu /* */

Ví dụ 2: h1 { background: red;/* màu nền:đỏ */ color: blue; /* màu chữ:xanh */

Bảng 4.1 Cách viết bộ chọn

Bộ chọn Ví dụ Mô tảphạmvi ảnh hưởng

* *{color:blue;} Định dạng áp dụng cho nội dung tất cả các thẻ html trong tài liệu web thẻ01 p{color:blue;} Định dạng áp dụng cho nội dung tất cả các thẻ trong tài liệu web thẻ01 thẻ02 div p{color:blue;} Định dạng áp dụng cho nội dung tất cả các thẻ nằm bên trong thẻ trong tài liệu web thuộc tính giá trị thuộc tính khai báo bộ chọn thẻ01,thẻ02 div,p{color:blue;} Định dạng áp dụng cho nội dung tất cả các thẻ và trong tài liệu web thẻ01+thẻ02 div+p{color:blue;} Định dạng áp dụng cho nội dung tất cả các thẻ được đặt kế và sau thẻ trong tài liệu web thẻ01>thẻ02 div>p{color:blue;} Định dạng áp dụng cho nội dung tất cả các thẻ có thẻ cha là

trong tài liệu web

.class tieude{color:blue;} Định dạng áp dụng cho nội dung tất cả các thẻ có cùng tên class trong tài liệu web

#id #footer{color:blue;} Định dạng áp dụng cho nội dung tất cả các thẻ có tên id trong tài liệu web thẻ01~thẻ02 ul~p{color:blue;} Định dạng áp dụng cho nội dung tất cả các thẻ khi có

:first-child ul li :first-child{ color:blue;} Định dạng áp dụng cho phần tử đầu tiên trong danh sách

:last-child ul li :last-child{ color:blue;} Định dạng áp dụng cho phần tử cuối cùng trong danh sách

:nth-child ul li:nth-child(3n) { color:blue;}

/* (3n): các phần tử chọn sẽ là 3x1, 3x2, 3x3,…*/ Định dạng áp dụng cho phần tử có điều kiện thứ tự cố định trong danh sách

4.1.3 Đơn vị đo trong CSS

Bảng 4.2 Bảng đơn vị đo Đơn vị Mô tả

Understanding the common measurement units used in typography and design helps create consistent layouts for print and digital media Percent, inch, centimeter, and millimeter describe physical dimensions, with one inch equal to 2.54 centimeters and one centimeter equal to 10 millimeters In typography, the em is a scalable unit based on the current font size, while the point (pt) equals 1/72 of an inch and the pica (pc) equals 12 points For screen design, pixels (px) define the actual image dots on a display By using these units—percentages for flexible layouts, inches and centimeters for print, ems for scalable text, points and picas for traditional typography, and pixels for screens—you can craft precise, accessible designs that render well across platforms.

CSS được phân thành 3 loại như sau:

- Inline Style (CSS cục bộ): style được qui định trong 1 thẻ HTML cụ thể

- Internal Style Sheet (CSS nội tuyến): style được qui định trong phần

của 1 tài liệu HTML

- External Style Sheet (CSS ngoại tuyến): style được qui định trong file CSS ngoài

Thứ tự ưu tiên sử dụng giữa các loại CSS: Inline Style, Internal Style Sheet, External Style Sheet

Khi cùng một bộ chọn được gán các thuộc tính từ các nguồn CSS khác nhau có độ ưu tiên khác nhau (ví dụ inline, CSS nội bộ và CSS ngoại bộ), giá trị của các thuộc tính này bị quyết định bởi quy tắc có độ ưu tiên cao hơn Nói cách khác, thứ tự ưu tiên (specificity) và nguồn gốc của CSS xác định cách thuộc tính được áp dụng: quy tắc có độ ưu tiên lớn hơn sẽ ghi đè lên quy tắc có độ ưu tiên thấp hơn, và kết quả hiển thị của phần tử phản ánh giá trị từ CSS có ưu tiên cao hơn.

Trong CSS, Inline Style có độ ưu tiên cao nhất, vì vậy các thuộc tính được gắn trực tiếp vào thẻ HTML sẽ ghi đè lên các định dạng được quy định trong thẻ của Internal style sheet hoặc trong External style sheet.

4.1.5 Tạo và sử dụng Internal style sheet

An internal style sheet defines the CSS styles used on a web page, and these styles apply only to the page that contains them CSS rules must be placed inside a tag within the section of the document.

bộ chọn {thuộc tính:giá trị;}

Hiển thị trên trình duyệt:

Hình 4.1 Kết quả ví dụ 3

4.1.6 Tạo và sử dụng External style sheet

External stylesheet được sử dụng khi muốn áp dụng style cho nhiều trang web trong cùng một website Thực chất, external stylesheet là một tập tin văn bản chứa các quy tắc CSS có phần mở rộng css Việc lưu trữ CSS riêng trên một file duy nhất giúp dễ dàng thay đổi giao diện cho toàn bộ website bằng cách chỉnh sửa một nguồn duy nhất và có thể tái sử dụng cho nhiều trang, đồng thời hỗ trợ bảo trì và tối ưu hóa tốc độ tải trang thông qua cơ chế cache của trình duyệt.

- Khai báo trong tập tin css theo cú pháp: bộ chọn {thuộc tính:giá trị;}

- Để sử dụng file CSS này, trong tài liệu HTML cần phải khai báo liên kết đến file CSS theo cú pháp:

- Thẻ này phải được đặt trong thẻ

- File CSS không được chứa bất kỳ thẻ HTML nào

Hình 4.2 Nội dung file teststyle.css

Liên kết file teststyle.css vào trong tài liệu HTML:

Hình 4.3 Nội dung file test.html

Hiển thị trên trình duyệt:

Hình 4.4 Kết quả ví dụ 4

4.1.7 Tạo và sử dụng Inline style

Inline Style là cách định nghĩa CSS trực tiếp trong thẻ HTML, cho phép áp dụng định dạng cho từng phần tử cụ thể mà nó được khai báo Inline Style có hiệu lực chỉ với thẻ HTML chứa định nghĩa và không ảnh hưởng đến các thẻ khác trên trang Để định nghĩa inline style, chỉ cần thêm thuộc tính style vào thẻ tương ứng và thuộc tính này có thể chứa mọi thuộc tính CSS cần thiết.

Đây là đoạn văn bản sử dụng Inline style

Hiển thị trên trình duyệt:

Hình 4.5 Kết quả ví dụ 5

Trong lập trình hướng đối tượng, lớp (hay class) là khái niệm dùng để mô tả một nhóm đối tượng có chung các thuộc tính và hành vi Các đối tượng thuộc cùng một lớp thừa hưởng các đặc điểm và phương thức từ lớp ấy, nhờ tính kế thừa, giúp tái sử dụng mã nguồn và mở rộng hệ thống một cách linh hoạt.

Trong một thẻ có thể có chứa nhiều thuộc tính lớp, mỗi lớp phải ngăn cách nhau bằng một khoảng trắng

Lớp có thể sử dụng lặp lại nhiều lần trong cùng một tài liệu HTML

[tên thẻ].tênlớp {thuộc tính: giá trị}

Có thể tạo lớp để áp dụng cho nhiều thẻ khác nhau bằng cách bỏ tên thẻ ở đầu:

tên lớp {thuộc tính: giá trị}

+ Tên lớp chỉ được phép chứa chữ cái, chữ số, dấu gạch dưới ( _ ), dấu gạch nối ( - )

+ Tên lớp không nên bắt đầu bằng chữ số, không được phép chứa khoảng trắng

Hiển thị trên trình duyệt:

Hình 4.6 Kết quả ví dụ 6

4.1.9 Định danh (ID) Định danh (còn gọi là ID) có chức năng tương tự như lớp nhưng định danh chỉ dùng để xác định một đối tượng duy nhất nào đó trên trang HTML

Do đó trong một trang HTML mỗi đối tượng chỉ có duy nhất một định danh

[tên thẻ]#tên định danh{thuộc tính: giá trị}

Có thể tạo lớp để gắn vào nhiều thẻ bằng cách bỏ tên thẻ ở đầu:

#tên định danh{thuộc tính: giá trị}

+ Tên định danh chỉ được phép chứa chữ cái, chữ số, dấu gạch dưới (_), dấu gạch nối ( - )

+ Tên định danh không nên bắt đầu bằng chữ số, không được phép chứa khoảng trắng

Hiển thị trên trình duyệt:

Định dạng văn bản bằng css

Các thuộc tính font cho phép thay đổi font chữ, cở chữ, kiểu chữ, độ đậm của chữ

Dùng định nghĩa một danh sách ưu tiên các font sẽ được dùng để hiển thị văn bản

+ Loại tổng quát : serif , sans-serif, monospace + Loại cụ thể : 1 font cụ thể

Nên sử dụng nhiều font, để nếu không có font này, trình duyệt sẽ dùng font khác

Ví dụ 8: quy định font chữ dùng cho trang web là Times New Roman,

Tohama, sans-serif body { font-family: “Times New Roman”,Tohama,sans-serif }

Dùng thiết lập các kiểu chữ in thường, in nghiêng, in xiên cho văn bản

+ normal: thiết lập kiểu chữ in thường + italic: thiết lập kiểu chữ in nghiêng + oblique: thiết lập kiểu chữ in xiên

Ví dụ 9: thiết lập các kiểu chữ in nghiêng cho các thành phần h1 h1 { font-style:italic; }

Dùng thiết lập font chữ in đậm cho văn bản

+ normal: thiết lập kiểu dạng thường + bold: thiết lập kiểu chữ in đậm

Ví dụ 10: thiết lập các kiểu chữ in đậm cho các thành phần p p {font-weight:bold ; }

Dùng thiết lập kích thước font

Các giá trị: xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger hoặc giá trị số (%, px, em,…)

Ví dụ 11: thiết lập các cở chữ 1.5em cho các thành phần p p {font-size: 1.5em ; }

Dùng đổi thành chữ in nhỏ

Hiển thị trên trình duyệt:

Hình 4.8 Kết quả ví dụ 12

Các thuộc tính định dạng ký tự bao gồm: color, text-decoration, text- transform, text-align, text-indent

Dùng thiết lập màu chữ

Màu có thể xác định theo: tên màu, giá trị RGB hoặc giá trị HEX

 Thuộc tính background-color: thiết lập màu nền

Màu có thể xác định theo: tên màu, giá trị RGB hoặc giá trị HEX

Dùng thiết lập canh chỉnh văn bản trong một thành phần

Các giá trị: left, right, center, justify

Dùng thiết lập khoảng cách lề cho dòng đầu văn bản trong một thành phần

Các giá trị: giá trị sốhoặcgiá trị %

Dùng thay đổi dạng chữ

+ capitalize: dạng chữ đầu viết hoa + uppercase: dạng chữ in

Dùng tạo hiệu ứng chữ

+ underline: chữ có đường gạch chân + line-through: chữ có đường gạch xuyên + overline: chữ có đường gạch đầu

Dùng định khoảng cách giữa các ký tự

Dùng định khoảng cách giữa các từ

Dùng thiết lập chiều cao của một dòng

Dùng tạo bóng đổ (shadow) cho text

{ text-shadow: h-offset v-offset blur color;}

+ h-offset: khoảng cách shadow theo chiều ngang + v-offset: khoảng cách shadow theo chiều dọc + blur: độ mờ của shadow

+ color: màu của shadow ví dụ: text-shadow: 0px 5px 5px #999999;

Hiển thị trên trình duyệt:

Hình 4.9 Kết quả ví dụ 13

Định dạng danh sách bằng css

Các thuộc tính định dạng danh sách bao gồm: list-style-type, list-style- position, list-style-image

4.3.1 Thuộc tính list-style-type:

Dùng thay đổi kiểu hoa thị, kiểu số thứ tự của danh sách

{ list-style-type: giá trị; } Các giá trị: disc, circle, square, decimal, decimal-leading-zero,upper- alpha, lower-alpha, upper-roman, lower-roman, none

Hình 4.10 Các kiểu list style

4.3.2 Thuộc tính list-style-image:

Dùng thay đổi kiểu hoa thị của danh sách bằng một hình ảnh

{ list-style-image:url(địa chỉ hình);}

4.3.3 Thuộc tính list-style-position:

Dùng thiết lập vị trí của hoa thị, số thứ tự vào phía trong hay phía ngoài của đoạn văn bản trong danh sách

{ list-style-position: giá trị; } Các giá trị:

+ inside: hoa thị, số thứ tự nằm vào phía trong đoạn + outside: giá trị mặc định Hoa thị, số thứ tự nằm phía ngoài đoạn

Hiển thị trên trình duyệt:

Hình 4.11 Kết quả ví dụ 14

Định dạng thành phần

Các thuộc tính chung dùng định dạng các thành phần html:

Các thuộc tính background dùng để xác định hiệu ứng màu nền, hình nền cho các thành phần HTML

Thuộc tính background bao gồm:

CSS background properties let you control the visual backdrop of any element The background-color property sets the base color behind the content, while background-image defines the image used as the backdrop The background-repeat property controls how the image repeats across the element, with options like no-repeat, repeat, repeat-x, and repeat-y The background-position property determines where the image sits inside the element, using keywords such as center, top left, or precise offsets The background-attachment property decides whether the background scrolls with the page or stays fixed in place Mastering these properties helps improve aesthetics, accessibility, and the overall readability of your web design.

 Thuộc tính background-color: thiết lập màu nền cho thành phần HTML

- Cú pháp: { background-color:màu; }

Màu có thể xác định theo: tên màu, giá trị RGB hoặc giá trị HEX

- Ví dụ 8: thiết lập màu nền cho trang web là màu xanh body { background-color:cyan; }

 Thuộc tính background-image: thiết lập hình nền cho thành phần HTML

- Cú pháp: { background-image:url(địa chỉ file hình); }

- Ví dụ 9: đặt hình logo.png làm hình nền cho trang web body {background-image:url(logo.png); }

* Có thể đặt nhiều hình nền cho một thành phần html, các hình nền được phân cách bằng dấu phẩy. body {background-image:url(logo.png), url(paper.png); }

 Thuộc tính background-size: quy định lại kích thước hình nền Thuộc tính này được sử dụng kèm với thuộc tính background-image

- Cú pháp: {background-size: giá trị;}

+ giá trị 1 thành phần: xác định chiều rộng cho hình, chiều cao tự động điều chỉnh theo

Để kiểm soát hình nền trong CSS, hai thành phần chính cần xác định là chiều rộng và chiều cao cho hình nền Khi dùng background-size: contain, hình nền được chia tỷ lệ sao cho càng lớn càng tốt và vừa với vùng chứa, nghĩa là chiều rộng và chiều cao được điều chỉnh để khớp với kích thước vùng chứa mà vẫn giữ nguyên tỷ lệ Tuy nhiên, tùy thuộc vào tỷ lệ khung hình của hình nền so với vùng chứa, một số vùng của vùng chứa có thể không được ảnh nền che phủ hoàn toàn.

Để hình nền phủ kín vùng chứa, hãy chia tỷ lệ hình nền sao cho vùng chứa được bao phủ hoàn toàn bởi hình nền Do tỷ lệ khung hình và kích thước màn hình khác nhau, một số phần của hình nền có thể bị cắt bớt và không hiển thị trong vùng chứa Lựa chọn thuộc tính phù hợp và cân nhắc vị trí tập trung của hình ảnh giúp tối ưu hiển thị trên nhiều thiết bị và kích thước màn hình.

Example 9 demonstrates how to set banner.png as the background image for the website header and automatically adjust it to cover the entire header area using CSS: header { background-image: url(banner.png); background-size: cover; } This approach creates a responsive, full-bleed header that fills the header on different screen sizes without distortion.

 Thuộc tính background-repeat: quy định cách lặp lại hình nền Thuộc tính này được sử dụng kèm với thuộc tính background-image

- Cú pháp: {background-repeat: giá trị repeat;}

+ repeat: giá trị mặc định Hình nền được lặp lại theo cả chiều ngang và đứng

+ repeat-x: hình nền chỉ được lặp lại theo chiều ngang + repeat-y: hình nền chỉ được lặp lại theo chiều đứng + no-repeat: hình nền không lặp lại

 Thuộc tính background-position: xác định vị trí hiển thị hình nền Thuộc tính này được sử dụng kèm với thuộc tính background-image và background- repeat

- Cú pháp: {background-position: vị trí;}

Các vị trí hiển thị hình nền:

These terms describe the nine standard positions in a 3x3 layout grid used for UI and content placement: left top (top-left corner), left center (middle-left), left bottom (bottom-left); right top (top-right corner), right center (middle-right), right bottom (bottom-right); center top (top-center), center center (the exact center, equidistant in both horizontal and vertical directions), and center bottom (bottom-center) In practice, designers reference these positions as left top, left center, left bottom, right top, right center, right bottom, center top, center center, and center bottom to control where elements appear on a page or screen, and sometimes the sequence is presented as left top, center top, right top; left center, center center, right center; left bottom, center bottom, right bottom.

Hình 4.12 Các vị trí hiển thị ảnh nền

Hoặc: {background-position: khoảng cách x khoảng cách y}

Gốc tọa độ xác định tại vị trí góc trên bên trái (left top)

Hình 4.13 Vị trí hiển thị ảnh nền tính theo khoảng cách x, y

Example 15 shows how to set logo.png as the background image for a web page by repeating the image horizontally and offsetting it 100px from the left and 20px from the top; this effect is achieved with CSS: body { background-image: url(logo.png); background-repeat: repeat-x; background-position: 100px 20px; }

 Thuộc tính background- attachment: cố định hình nền không cho di chuyển khi cuộn trang web Thuộc tính này được sử dụng kèm với thuộc tính background-image

- Cú pháp: {background- attachment: fixed/scroll;}

+ scroll: giá trị mặc định, hình nền sẽ cuộn cùng nội dung trang web

+ fixed: hình nền đứng yên khi cuộn trang web

- Ví dụ 16: body{ background-image:url('img_tree.png'); background-repeat:no-repeat; background-position:right top; margin-right:200px; background-attachment: fixed;

 Thuộc tính background rút gọn:

{background:

;}

Ví dụ 17 hướng dẫn đặt hình logo.png làm nền cho trang web, với hình nền được lặp lại theo chiều ngang và có khoảng cách từ lề trái 100px cùng lề trên 20px Đoạn CSS tương ứng là: body { background: url(logo.png) repeat-x 100px 20px; } Thiết lập này giúp logo hiển thị nền một cách đều đặn trên toàn trang bằng cách lặp lại theo chiều ngang và căn chỉnh đúng vị trí.

Các thuộc tính border dùng để định dạng đường viền cho các thành phần HTML

Thuộc tính định dạng gồm:

+ border-style: thiết lập kiểu đường viền + border-width: thiết lập độ dày cho đường viền

+ border-color: thiết lập màu cho đường viền Thuộc tính vị trí gồm:

Trong CSS, border-top là đường viền hiển thị phía trên của thành phần, border-right là đường viền hiển thị ở bên phải, border-bottom là đường viền hiển thị ở phía dưới, và border-left là đường viền hiển thị ở bên trái; ghép lại, thuộc tính border cho phép viền bao quanh toàn bộ thành phần và có thể được chỉnh sửa riêng cho từng cạnh hoặc theo cách tổng quát để tạo khung viền phù hợp với thiết kế trang web.

 Thuộc tính border-style: thiết lập kiểu cho đường viền

- Cú pháp: { border-style: kiểu đường;}

Các kiểu đường: dotted, dashed, solid, double, groove, ridge, inset, outset, none, hidden

Hình 4.14 Các kiểu đường viền

- Ví dụ 18: định dạng đường viền cho đoạn có kiểu dotted và màu cyan p {border-style:dotted; border-color:cyan; }

 Thuộc tính border-width: thiết lập độ dày cho đường viền

- Cú pháp: { border- width: độ dày;}

Các giá trị độ dày: thin, medium, thick, hay giá trị đo cụ thể như pixels

 Thuộc tính border-color: thiết lập màu cho đường viền

- Cú pháp: { border-color: màu;}

Màu có thể xác định theo: tên màu, giá trị RGB hoặc giá trị HEX

- Ví dụ 19: h1 { border-style:dotted; border-width:thin; border-color:#FF0000;

 Thuộc tính border rút gọn:

{ border: ;}

Có thể dùng các thuộc tính border-top, border-right, border-bottom, border-left để chỉ định đường viền riêng cho các cạnh

 Thuộc tính border-radius: tạo góc bo tròn cho các phần tử (hộp văn bản, hình ảnh,…)

{ border-radius: độ bo tròn góc;}

+ Độ bo tròn của góc có thể xác định theo đơn vị: px, em, hoặc % + Có thể bo tròn theo từng góc của phần tử:

CSS border-top-left-radius defines the curvature of the top-left corner of an element, enabling rounded corners; border-top-right-radius does the same for the top-right corner, border-bottom-left-radius for the bottom-left corner, and border-bottom-right-radius for the bottom-right corner Each value can be a length (px, em, rem) or a percentage, allowing you to scale the curve with the element, and you can apply these radii independently or together to create a variety of shapes for UI components such as buttons, cards, and panels, making the design feel softer and more modern while improving usability.

Hiển thị trên trình duyệt:

Hình 4.15 Kết quả ví dụ 20 4.4.3 Thuộc tính box-shadow

Dùng tạo bóng đổ (shadow) cho các thành phần HTML

{ box-shadow: h-offset v-offset blur color;}

+ h-offset: khoảng cách shadow theo chiều ngang + v-offset: khoảng cách shadow theo chiều dọc + blur: độ mờ của shadow

+ spread: độ phân tán của shadow

Ví dụ: box-shadow: 0px 0px 5px 5px #999999;

Các thuộc tính margin dùng canh lề cho các thành phần HTML Thuộc tính gồm:

Margin-left sets the left margin of an element, creating horizontal space from the left edge Margin-right sets the right margin, pushing the element away from the right edge Margin-top defines the space above the element, separating it from content above Margin-bottom defines the space below the element, separating it from content below Using the CSS margin properties—margin-left, margin-right, margin-top, and margin-bottom—controls the whitespace around elements to shape layout, improve readability, and support responsive design.

Hình 4.16 Các vị trí lề

{ margin-left: giá trị; } { margin-top: giá trị; } { margin-right: giá trị; } { margin-bottom: giá trị; }

canhle{ margin-top:50px; margin-right:40px; margin-bottom:100px; margin-left:120px;

Đoạn không sử dụng thuộc tính margin

Đoạn có sử dụng thuộc tính margin

Hiển thị trên trình duyệt:

Hình 4.17 Kết quả ví dụ 21

 Thuộc tính margin rút gọn:

{margin:

Ví dụ 22: tạo class canhle quy định khoảng cách lề cho thành phần như sau: lề trên 50px, lề phải 40px, lề dưới 100px, lề trái 120px

canhle{margin:50px 40px 100px 120px;}

+ Thuộc tính margin rút gọn với 1 giá trị:

{margin: ;} giá trị: khoảng cách mặc định cho tất cả các phía (trên, dưới, trái, phải)

Ví dụ 23: tạo class canhle quy định khoảng cách lề 4 bên là 50px

+ Thuộc tính margin rút gọn với 2 giá trị:

{margin: ;} giá trị 1: khoảng cách lề trên và lề dưới giá trị 2: khoảng cách lề trái và lề phải

Ví dụ 24: tạo class canhle quy định khoảng cách lề cho thành phần như sau: lề trên 50px, lề phải 20px, lề dưới 50px, lề trái 20px

+ Thuộc tính margin rút gọn với 3 giá trị:

{margin: ;} giá trị 1: khoảng cách lề trên giá trị 2: khoảng cách lề trái và lề phải giá trị 3: khoảng cách lề dưới

Ví dụ 25: tạo class canhle quy định khoảng cách lề cho thành phần như sau: lề trên 50px, lề phải 20px, lề dưới 30px, lề trái 20px

canhle{ margin:50px 20px 30px;}

Thuộc tính padding được sử dụng để tạo vùng đệm cho các phần tử HTML, cho phép điều chỉnh khoảng trống bên trong phần tử Nói cách khác, padding xác định khoảng không gian giữa nội dung hiển thị bên trong một thành phần và đường viền của nó, từ đó ảnh hưởng trực tiếp đến kích thước hiển thị và khả năng trình bày Bạn có thể thiết lập giá trị padding cho từng cạnh (top, right, bottom, left) để tối ưu hóa bố cục và sự cân đối của giao diện web.

+ padding-left: vùng đệm bên trái + padding-right: vùng đệm bên phải + padding-top: vùng đệm bên trên + padding-bottom: vùng đệm bên dưới

Hình 4.18 Các vị trí padding

Cú pháp: { padding-left: giá trị; }

{ padding-top: giá trị; } { padding-right: giá trị; } { padding-bottom: giá trị; }

Hiển thị trên trình duyệt:

Hình 4.19 Kết quả ví dụ 26

 Thuộc tính padding rút gọn:

{padding:

Ví dụ 27: tạo class dem quy định vùng đệm cho thành phần như sau: trên

50px, phải 40px, dưới 60px, trái 100px

dem { padding:50px 40px 60px 100px;}

+ Thuộc tính padding rút gọn với 1 giá trị:

{padding: ;} giá trị: khoảng cách mặc định cho tất cả các phía (trên, dưới, trái, phải)

Ví dụ 28: tạo class dem quy định vùng đệm cho 4 bên là 30px

+ Thuộc tính padding rút gọn với 2 giá trị:

{padding: ;} giá trị 1: vùng đệm trên và dưới giá trị 2: vùng đệm trái và phải

Ví dụ 29: tạo class canhle quy định vùng đệm cho thành phần như sau: trên 20px, phải 30px, dưới 20px, trái 30px

+ Thuộc tính padding rút gọn với 3 giá trị:

{padding: ;} giá trị 1: vùng đệm trên giá trị 2: vùng đệm trái và phải giá trị 3: vùng đệm dưới

Ví dụ 30: tạo class dem quy định vùng đệm cho thành phần như sau: trên

30px, phải 20px, dưới 10px, trái 20px

dem { padding:30px 20px 10px;}

4.4.6 Thuộc tính height và width

Quy định chiều cao của một thành phần HTML

Quy định chiều rộng của một thành phần HTML

Giá trị của thuộc tính width và height có thể xác định theo đơn vị: px, em,

% (phần trăm kích thước của phần tử chứa nó)

Trong CSS, thuộc tính width và height xác định kích thước của phần nội dung (content box) của một thành phần HTML; kích thước thật khi hiển thị lên trang được tính bằng cách cộng padding và border vào kích thước nội dung Margin nằm ở lớp ngoài và ảnh hưởng đến khoảng cách giữa các phần tử, nhưng không phải là phần tạo nên kích thước nội dung Hiểu đúng box model giúp tối ưu bố cục và hiển thị trên giao diện, đồng thời hỗ trợ viết mã có thể tối ưu cho SEO bằng cách dự đoán chính xác không gian chiếm dụng của từng phần tử.

• Chiều rộng thực = width + left padding + right padding + left border + right border + left margin + right margin

• Chiều cao thực = height + top padding + bottom padding + top border

+ bottom border + top margin + bottom margin

Quy định chiều cao tối đa của một thành phần HTML

Quy định chiều rộng tối thiểu của một thành phần HTML

Quy định chiều cao tối thiểu của một thành phần HTML

Quy định chiều rộng tối đa của một thành phần HTML

Hiển thị trên trình duyệt:

Định dạng hình ảnh bằng css

Các thuộc tính định dạng hình ảnh bao gồm: width, height, border, margin, padding, float, clear

 Thuộc tính border: quy định đường viền cho hình ảnh

 Thuộc tính margin: quy định lề cho hình ảnh

 Thuộc tính padding: thêm vào vùng đệm cho hình ảnh

 Thuộc tính height: quy định chiều cao của hình ảnh

 Thuộc tính width:quy định chiều rộng của hình ảnh

 Thuộc tính opacity: thiết lập độ trong suốt cho hình ảnh

- Cú pháp: { opacity: giá trị ; } Độ trong suốt có giá trị từ 0 đến 1 Giá trị càng thấp hình ảnh càng trong suốt.

Dùng quy định văn bản bao quanh hình ảnh

+ left: cố định hình nằm bên trái

+ right: cố định hình nằm bên phải

+ none: bình thường (nằm tại chính vị trí của nó)

Dùng xóa các quy định văn bản bao quanh hình ảnh dùng ở thuộc tính float phía trước

{ clear: giá trị; } Các giá trị:

+ left: xóa quy định hình nằm bên trái

+ right: xóa quy định hình nằm bên phải

+ both: xóa quy định cố định hình

Hiển thị trên trình duyệt:

Hình 4.21 Kết quả ví dụ 32

Tạo bố cục trang web bằng mô hình hộp

Trong thiết kế web, mọi phần tử HTML được xem như một hộp chứa nội dung cùng với các khe đệm, viền và lề Mô hình hộp (box model) của CSS mô tả cách các phần tử này tương tác để xác định kích thước và khoảng cách trên trang, từ kích thước nội dung đến padding (đệm), border (viền) và margin (lề) Hiểu rõ box model giúp kiểm soát thiết kế và bố cục trang một cách linh hoạt, đặc biệt khi điều chỉnh kích thước, căn chỉnh và khoảng cách giữa các phần tử.

Mô hình hộpvề cơ bản là một hộp bao quanh phần tử HTML Nó bao gồm: padding, border margin và content

+ margin: là khoảng trắng nằm phía ngoài border + border : là đường biên bao quanh padding và content + padding : là vùng đệm giữa border và content

+ content : là nơi mà văn bản, hình ảnh nội dung của thành phần HTML xuất hiện

Các thuộc tính định dạng mô hình hộp bao gồm: width, height, border, margin, padding, float, clear, overflow, position, left, right, top, bottom, z- index, display

 Thuộc tính border: quy định đường viền cho hộp

 Thuộc tính margin: quy định lề cho hộp

 Thuộc tính padding: thêm vào vùng đệm cho hộp

 Thuộc tính height: quy định chiều cao của hộp

 Thuộc tính width: quy định chiều rộng của hộp

 Thuộc tính float: quy định vị trí cố định hộp

Dùng xác định vị trí hộp Thuộc tính position thường dùng kèm với các thuộc tính định vị trí: left, right, bottom, top

Trong CSS, một phần tử có vị trí absolute sẽ được định vị tương đối so với phần tử cha có vị trí được khai báo là relative; nếu không có phần tử cha như vậy, nó sẽ định vị tương đối so với body Bạn có thể thiết lập các thuộc tính top, left, right, bottom để xác định vị trí của phần tử.

Trong CSS, một phần tử có vị trí position: relative sẽ được định vị tương đối so với vị trí bình thường của chính nó Bạn có thể thay đổi vị trí của phần tử bằng cách thiết lập các thuộc tính top, left, right và bottom để di chuyển phần tử theo ý muốn, mà không làm ảnh hưởng đến vị trí của các phần tử khác xung quanh.

Vị trí fixed cho phép một phần tử được định vị tương đối với cửa sổ trình duyệt Khi áp dụng position: fixed, phần tử sẽ được giữ ở một vị trí cố định khi người dùng cuộn trang Để xác định vị trí của phần tử trên màn hình, bạn có thể thiết lập các thuộc tính top, left, right và bottom.

Thuộc tính left trong CSS được dùng để định vị trí bên trái cho một phần tử khi nó được đặt bằng thuộc tính position; giá trị left xác định khoảng cách từ mép trái ngoài cùng của phần tử bao ngoài đến mép trái của phần tử được định vị.

Thuộc tính top dùng để định vị trí bên trên cho một phần tử khi sử dụng với thuộc tính position, với giá trị top xác định khoảng cách từ mép trên ngoài cùng của phần tử bao ngoài đến mép trên của phần tử được căn chỉnh Nói cách khác, top cho phép căn chỉnh dọc phần tử từ mép trên, hỗ trợ bố trí giao diện web một cách linh hoạt.

Thuộc tính right trong CSS dùng để định vị trí của một phần tử ở bên phải khi phần tử đó có kiểu định vị position (ví dụ absolute hoặc fixed) Giá trị của right cho biết khoảng cách từ mép phải của phần tử tới mép phải của khối chứa (containing block) Khoảng cách này được tính từ mép phải ngoài cùng của khối chứa và sẽ di chuyển phần tử theo hướng ngang khi bạn điều chỉnh giá trị right.

Thuộc tính bottom dùng để định vị vị trí ở phía dưới cho một phần tử khi bạn áp dụng thuộc tính position; giá trị bottom xác định khoảng cách từ mép dưới của khung chứa đến mép dưới của phần tử, giúp căn chỉnh bố cục một cách linh hoạt Bottom hoạt động cùng với các giá trị position như absolute hoặc fixed để định vị phần tử so với khung chứa, và với position relative nó ảnh hưởng đến vị trí của phần tử so với vị trí bình thường Việc nắm vững bottom là một kỹ thuật căn bản trong thiết kế giao diện, hỗ trợ tối ưu bố cục trên nhiều kích thước màn hình và nội dung được sắp xếp rõ ràng cho người dùng cũng như công cụ tìm kiếm.

Dùng quy định cách hiển thị nội dung của một thành phần HTML

+ visible: giá trị mặc định, khi nội dung chứa bên trong vượt quá kích thước của thành phần thì vẫn được hiển thị tràn ra khỏi thành phần đó

+ hidden: khi chiều cao của thành phần không đủ chứa nội dung, thì nội dung bị tràn sẽ được dấu đi

+ auto: tự động hiện thanh cuộn khi nội dung chứa bên trong vượt quá kích thước của thành phần

+ scroll: hiện thanh cuộn ngang và thanh cuộn đứng

Hình 4.23 Ví dụ minh họa các giá trị thuộc tính overflow

Dùng được dùng để xếp chồng các phần tử trên cửa sổ trình duyệt

Giá trị của thuộc tính z-index quyết định thứ tự xếp chồng Giá trị càng lớn, thứ tự sắp xếp càng cao

Hình 4.24 Thứ tự xếp chồng các phần tử

 Thuộc tính display: Được dùng xác định cách hiển thị của thành phần

Trong CSS, các giá trị hiển thị phổ biến là display: block, display: inline và display: inline-block Với display: block, phần tử hiển thị như một khối riêng biệt và sẽ đứng trên một hàng độc lập so với các phần tử trước và sau nó Với display: inline là giá trị mặc định, phần tử sẽ được hiển thị trên cùng một dòng với các phần tử khác Với display: inline-block là sự kết hợp giữa đặc tính của inline và block, cho phép phần tử nằm trên cùng một dòng nhưng vẫn có kích thước và chiều cao có thể được điều chỉnh như một khối.

+ flex: hiển thị một thành phần dưới dạng vùng chứa linh hoạt + inline-flex: kết hợp giữa inline và flex

Bố cục sử dụng flex bao gồm 2 phần: flex-container và các flex- items Các thuộc tính đi kèm với flex-container:

• flex-direction: row | row-reverse | column | column-reverse; định hướng các flex-items theo hàng| đảo ngược hàng | cột | đảo ngược cột

• flex-wrap: nowrap | wrap ; cho phép flex-item tự động xuống dòng khi kích thước flex- container thay đổi (mặc định nowrap)

CSS justify-content controls how flex items are positioned along the main axis inside a flex container It supports the values flex-start, flex-end, center, space-between, space-around, and space-evenly, allowing you to place items at the start or end, center them, or distribute space between and around items The exact positioning depends on the container’s flex-direction, which defines the main axis for alignment.

• flex-flow: flex-direction | flex-wrap thuộc tính rút gọn của flex-direction và flex-wrap

Hình 4.25 Ví dụ minh họa thuộc tính display

Dùng xác định cách tính chiều rộng và chiều cao của một phần tử

 content-box: thuộc tính chiều rộng và chiều cao chỉ bao gồm nội dung, không bao gồm đường viền và phần đệm

 border-box: thuộc tính chiều rộng và chiều cao bao gồm nội dung, phần đệm và đường viền

Hình 4.26 Ví dụ minh họa thuộc tính box-sizing

Ví dụ 33: mô hình hộp dùng thuộc tính float

Hiển thị trên trình duyệt:

Hình 4.27 Kết quả ví dụ 33

Ví dụ 34: mô hình hộp dùng thuộc tính position

Hiển thị trên trình duyệt:

Hình 4.28 Kết quả ví dụ 34

Tạo thanh điều hướng cho trang web

4.7.1 Pseudo-classes cho liên kết

Pseudo-Classes for Link cho phép xác định các hiệu ứng định dạng cho một đối tượng liên kết ở một trạng thái xác định

Pseudo-classes bắt đầu với dấu hai chấm (:)

- Cú pháp: a:pseudo-classes { thuộc tính: giá trị; }

 Định dạng liên kết khi chƣa ghé thăm

- Cú pháp: a:link { thuộc tính: giá trị; }

 Định dạng liên kết khi đã ghé thăm

- Cú pháp: a:visited { thuộc tính: giá trị; }

 Định dạng liên kết khi đƣa chuột trên liên kết

- Cú pháp: a:hover { thuộc tính: giá trị; }

 Định dạng liên kết khi liên kết đang đƣợc kích hoạt

- Cú pháp: a:active { thuộc tính: giá trị; }

* Lưu ý: Khi ta định dạng cho liên kết theo trạng thái, các trạng thái phải được sắp xếp theo đúng thứ tự: link, visited, hover, active

Ví dụ 35: Thiết lập các trạng thái liên kết:

- Liên kết chưa thăm: chữ màu vàng, nền màu xanh lá, không có gạch chân, đường viền màu xanh nhạt, kiểu outset, dày 5px

Ở trạng thái hover, liên kết hiển thị chữ màu đỏ đậm và lớn hơn với kích thước 1.2em, nền màu vàng nổi bật, không gạch chân, viền màu xanh nhạt với kiểu outset và độ dày 5px, giúp liên kết nổi bật và dễ nhận diện trên trang.

- Liên kết đã thăm: chữ màu trắng, nền màu xanh lá, không có gạch chân, đường viền màu xanh nhạt, kiểu outset, dày 5px

- Liên kết đang kích hoạt: chữ màu đỏ, nền màu xanh vàng (yellowgreen), không có gạch chân, đường viền màu xanh nhạt, kiểu outset, dày 5px

Có nhiều cách để tạo thanh điều hướng, cách phổ biến nhất là tạo thanh điều hướng bằng danh sách sử dụng các thẻ

và

• Hiển thị trên trình duyệt:

  Hình 4.29 Kết quả ví dụ 36

  4.7.3 Tạo thanh điều hướng ngang

  Giống như cách ta tạo thanh điều hướng dọc, thanh điều hướng ngang có cấu trúc tương tự nhưng thay đổi ở cách hiển thị các mục Để các phần tử

• hiển thị trên cùng một dòng, ta áp dụng display: inline cho các phần tử li (hoặc cho các liên kết bên trong li), giúp chúng xếp thành hàng ngang và không bị xuống dòng Việc này tạo một thanh điều hướng ngang gọn gàng và dễ tùy chỉnh, đồng thời có thể tối ưu hóa trải nghiệm người dùng và SEO khi bố trí hợp lý các liên kết quan trọng, kết hợp với các thuộc tính như padding, margin, màu sắc và hiệu ứng hover để nâng cao sự thân thiện với người dùng.

  Hiển thị trên trình duyệt:

  Hình 4.30 Kết quả ví dụ 37

  Tương tự như trên nhưng sử dụng thuộc tính display: flex để taọ thanh điều hướng dọc hoặc thanh điều hướng ngang

  - Hiển thị trên trình duyệt:

  Hình 4.31 Kết quả ví dụ 38

  Định dạng bảng biểu bằng css

  Các thuộc tính định dạng bảng bao gồm: width, height, border, border- collapse, margin, padding, text-align, vertical-align, background-color

   Thuộc tính height: quy định chiều cao của ô, dòng, bảng

   Thuộc tính width: quy định chiều rộng của ô, dòng, bảng

   Thuộc tính border: quy định đường viền cho bảng

   Thuộc tính margin: quy định lề cho bảng

   Thuộc tính padding: quy định vùng đệm giữa đường viền và nội dung trong bảng

   Thuộc tính background-color: thiết lập màu nền cho bảng

   Thuộc tính text-align: canh chỉnh nội dung trong bảng theo chiều ngang

   Thuộc tính vertical-align: canh chỉnh nội dung trong bảng theo chiều đứng

  + top: nội dung nằm ở trên + bottom: nội dung nằm ở dưới + middle nội dung nằm ở giữa

  Dùng xác định kết hợp hoặc tách riêng đường viền của bảng

  - Cú pháp: { border-collapse: giá trị;}

  + collapse: kết hợp đường viền (loại bỏ khoảng trống giữa các đường viền)

  + separate: phân tách đường viền

  - Hiển thị trên trình duyệt:

  Định dạng biểu mẫu bằng css

  Các thuộc tính định dạng biểu mẫu (form) bao gồm: width, height, border, margin, padding, text-align, vertical-align, background-color

   Thuộc tính height: quy định chiều cao của phần tử form

   Thuộc tính width: quy định chiều rộng của phần tử form

   Thuộc tính border: quy định đường viền cho phần tử form

   Thuộc tính margin: quy định lề cho phần tử form

   Thuộc tính padding: quy định vùng đệm giữa đường viền và nội dung trong phần tử form

   Thuộc tính background-color: thiết lập màu nền cho phần tử form

  Hiển thị trên trình duyệt:

  Hình 4.33 Kết quả ví dụ 40

  Bài tập áp dụng

  Thiết kế trang web có nội dung và định dạng như mẫu

  Trang web phải được bố cục và định dạng bằng css.

  Ngôn ngữ JavaScript