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) - CĐ Kinh tế Kỹ thuật TP.HCM

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

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ẻ

được sử dụng để tạo danh sách không có thứ tự, với ký hiệu đầu dòng mặc định là hình tròn Để tạo các mục trong danh sách, thẻ
cần được kết hợp với thẻ
• .

  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 sử dụng để tạo danh sách có thứ tự, với ký hiệu đầu dòng mặc định là con số Để sử dụng thẻ
  , cần kết hợp với thẻ
  1. để liệt kê các mục trong danh sách.

  2. Mục thứ nhất
  3. Mục thứ hai
  4. Mục thứ ba
  5. Mục thứ nhất
  6. 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 HTML, thuộc tính "alt" cung cấp văn bản thay thế cho hình ảnh khi chúng không hiển thị, ví dụ: alt="logo CTy" Thuộc tính "src" xác định địa chỉ của tập tin ảnh cần chèn vào tài liệu, ví dụ: src="img/logo.gif" Ngoài ra, thuộc tính "height" được sử dụng để chỉ định chiều cao của hình ảnh tính bằng pixel.

  % 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

  Để chèn hình ảnh html5.gif vào tập tin index.html, bạn cần đảm bảo rằng hình ảnh này nằm trong thư mục image, trong khi index.html được lưu trữ trong thư mục html Cả hai thư mục image và html đều nằm ngang cấp nhau trong cấu trúc thư mục.

  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 bài viết này, chúng ta sẽ khám phá các thuộc tính quan trọng trong HTML cho âm thanh Đầu tiên, thuộc tính "autoplay" cho phép âm thanh tự động phát khi trang được tải Tiếp theo, "controls" hiển thị các công cụ điều khiển cho người dùng Thuộc tính "loop" giúp âm thanh lặp lại khi kết thúc, và cuối cùng, "src" xác định đường dẫn tới tệp âm thanh cần 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ẻ

  Thuộc tính "data URL" xác định địa chỉ của đối tượng chèn, trong khi "width" và "height" lần lượt xác định chiều rộng và chiều cao của đối tượng chèn tính bằng pixel.

  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

  HTML chủ yếu hỗ trợ khả năng tạo liên kết, cho phép kết nối đến tài liệu hoặc tập tin khác, cũng như đến các phần khác trong cùng một tài liệu.

  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í chính xác trên Internet, bao gồm đầy đủ chuỗi giao thức, địa chỉ mạng, đường dẫn và tên tập tin.

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

  Địa chỉ tương đối là vị trí tương đối 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 Một số ký hiệu đường dẫn đặc biệt được sử dụng trong việc xác định địa chỉ này.

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

  Trở về thư mục gốc của website để truy cập các tài nguyên chính Thư mục hiện tại của trang web sử dụng liên kết mặc định giúp điều hướng dễ dàng Để quay lại thư mục cha, bạn có thể đi ngược lại một cấp thư mục.

  Trong tất cả các trình duyệt, các liên kết mặc định được gạch chân; liên kết chưa thăm có màu xanh, liên kết đã thăm hiển thị màu tím, và liên kết đang được nhấn chọn sẽ có màu đỏ.

  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 bao gồm nhiều phần tử khác nhau, được gọi là các điều khiển, như hộp văn bản, hộp danh sách lựa chọn, nút bấm và nút chọn.

  - 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 data forms, including the following encodings: application/x-www-form-urlencoded, multipart/form-data, and text/plain.

  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 gửi dữ liệu GET thích hợp cho việc truyền tải các thông tin đơn giản, không yêu cầu bảo mật và có kích thước nhỏ, giúp quá trình gửi diễn ra nhanh chóng do không cần mã hóa Ngược lại, phương thức POST được sử dụng để gửi dữ liệu có kích thước lớn và phức tạp, với các thông tin được mã hóa trước khi gửi, đảm bảo tính bảo mật cao hơn.

  =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"

  Xác định nhãn cho hình ảnh trong điều khiển (chỉ áp dụng cho type="image") và thiết lập maxlength="50" để giới hạn số ký tự tối đa cho các thành phần điều khiển như type="text" và type="password" Đặt tên cho trường nhập liệu bằng thuộc tính 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, đối với các loại input như type="text" và type="password", kích thước được tính theo số ký tự Trong khi đó, đối với các loại input khác, kích thước được tính bằng pixel (px).

  Các loại điều khiển trong HTML bao gồm: nút nhấn dạng hình (image type="image") và nút gửi dữ liệu lên Server (submit type="submit") Hộp nhập văn bản (text type="text") cho phép nhập một dòng văn bản, trong khi hộp nhập mật khẩu (password type="password") bảo vệ thông tin nhạy cảm Hộp lựa chọn (checkbox type="checkbox") cho phép chọn nhiều giá trị, còn hộp radio (radio type="radio") chỉ cho phép chọn một giá trị duy nhất Hộp chọn file (file type="file") cho phép tải lên tệp, và hộp nhập định dạng email (email type="email") đảm bảo định dạng chính xác Hộp nhập số điện thoại (tel type="tel") và hộp tìm kiếm (search type="search") cũng rất hữu ích Thêm vào đó, các điều khiển như bảng màu (color type="color") và bảng ngày tháng (date type="date") giúp người dùng chọn lựa dễ dàng hơn Cuối cùng, giá trị mặc định có thể được thiết lập với nút reset (reset type="reset"), và các gợi ý có thể được hiển thị qua thuộc tính placeholder (placeholder text).

  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]"

  Determine the input value for the input field, which can be a pattern or format, applicable for types such as text, date, search, URL, telephone, email, and password It is essential to mark these fields as required.

  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ẻ

  Thuộc tính "multiple" cho phép người dùng chọn nhiều mục trong danh sách lựa chọn cùng lúc Thuộc tính "name" xác định tên cho danh sách lựa chọn, ví dụ như "quequan" Cuối cùng, thuộc tính "size" xác định số lượng mục hiển thị trong danh sách, ví dụ "size=5".

  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ẻ

  Trong HTML, thuộc tính "selected" được sử dụng để xác định một mục được chọn mặc định trong danh sách lựa chọn Còn thuộc tính "value" với cú pháp "value='optValue'" được dùng để xác định giá trị của mục chọn.

  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 sử dụng để xác định tên cho hộp văn bản, ví dụ như name="gopy" Thuộc tính "readonly" cho phép thiết lập hộp văn bản chỉ có thể đọc mà không thể chỉnh sửa, được biểu thị bằng readonly="readonly" Ngoài ra, thuộc tính "cols" xác định số lượng cột hiển thị trong hộp văn bản, ví dụ như cols="20".

  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ãn củ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ẻ được sử dụng để xác định nội dung chính của tài liệu và chỉ được phép xuất hiện một lần trên mỗi trang Nó không thể là phần tử con của các thẻ .

  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 dung phầ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ẻ được sử dụng để định nghĩa một khu vực trong tài liệu HTML, thường được áp dụng để nhóm các thành phần nội dung thành một khối nhằm dễ dàng định dạng bằng CSS.

  < section> Nội dung khối

  Nội dung bài viết

  Nội dung aside

  nội dung định dạng

  Thẻ được sử dụng để xác định một khu vực trong tài liệu HTML, thường được áp dụng để nhóm các thành phần nội dung inline thành một khối, giúp việc định dạng bằng CSS trở nên dễ dàng hơn.

  Đâ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

  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

  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

  Chọn đối tượng, bao gồm văn bản hoặc hình ảnh, mà bạn muốn tạo liên kết Sau đó, gõ #tên vị trí liên kết (lưu ý phải có dấu # ngay trước tên vị trí liên kết) trong ô 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ụ quan trọng để tạo các biểu mẫu nhằm thu thập thông tin từ người dùng truy cập trang web Một Form có thể bao gồm nhiều thành phần khác nhau như TextField, CheckBox, RadioButton, ComboBox, ListBox và TextArea, giúp tối ưu hóa trải nghiệm người dùng và nâng cao hiệu quả thu thập dữ liệu.

   Chèn một Form 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

  When selecting a Selector Name, you can choose a tag name if the Selector Type is Tag, or enter a class name if the Selector Type is Class, ensuring the class name begins with a dot (e.g., tieude) Alternatively, if the Selector Type is ID, you should input an ID name that starts with a hashtag (e.g., #footer).

  + 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 desired CSS rule to edit, then click the Edit Rule button to open the CSS Rule Definition dialog, which allows for the modification of 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ữ cho mã HTML của trang web gọn gàng bằng cách tách biệt phần định dạng khỏi nội dung Điều này không chỉ làm cho mã nguồn trở nên sạch sẽ hơn mà còn đơn giản hóa quá trình cập nhật nội dung trang web.

  CSS cho phép tạo ra các kiểu dáng có thể áp dụng cho nhiều trang web, giúp tránh việc lặp lại định dạng cho các trang tương tự Điều này không chỉ tiết kiệm thời gian mà còn giảm bớt 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 trong CSS bao gồm thuộc tính quy định cách trình bày (property) và giá trị thuộc tính (value), được phân cách bằng dấu “:” Phần khai báo cần được đặt trong cặp ngoặc nhọn { }.

  Có thể sử dụng nhiều khai báo cho bộ chọn, với mỗi khai báo được ngăn cách bằng dấu chấm phẩy “;” Để tăng tính dễ đọc và bảo trì, mỗi khai báo nên được đặt trên một dòng riêng biệt.

  - Để 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ạm vi ảnh hưởng

  Định dạng CSS áp dụng cho nội dung của tất cả các thẻ HTML trong tài liệu web có thể được quy định như sau: Đối với thẻ , tất cả các thẻ

  sẽ có màu xanh Đối với thẻ nằm bên trong thẻ , nội dung cũng sẽ được định dạng màu xanh Bên cạnh đó, tất cả các thẻ và trong tài liệu web sẽ được áp dụng định dạng màu xanh Ngoài ra, các thẻ đứng kế bên thẻ cũng sẽ có màu xanh Cuối cùng, tất cả các thẻ có thẻ cha là sẽ được áp dụng định dạng màu sắc tương tự.

  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

  Tất cả các thẻ có tên id trong tài liệu web sẽ được định dạng với màu xanh dương Đối với các thẻ khi có trong danh sách, nội dung cũng sẽ được áp dụng định dạng màu xanh dương.

  :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ả

  This article provides a conversion guide for various measurement units, including inches, centimeters, millimeters, ems, points, picas, and pixels Specifically, it notes that 1 inch equals 2.54 centimeters, while 1 point is equivalent to 1/72 of an inch and 1 pica equals 12 points Additionally, it highlights that 1 em is approximately equal to the current font size, and pixels refer to the individual dots on a computer screen.

  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 nhiều thuộc tính được áp dụng cho cùng một bộ chọn với các chuẩn định dạng khác nhau, giá trị sẽ được kế thừa từ CSS có độ ưu tiên cao hơn.

  Inline Style có độ ưu tiên cao nhất, cho phép nó ghi đè lên các quy tắc định dạng trong thẻ của Internal style sheet và trong External style sheet.

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

  An internal style sheet is used to define common styles for a specific webpage, ensuring that these styles are only applied to the page that contains them CSS rules must be placed within the tag, which should be located in the section of the HTML 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 style sheet được sử dụng để áp dụng kiểu dáng cho nhiều trang web trong cùng một website Đây là một tập tin văn bản chứa các quy tắc CSS với phần mở rộng CSS Việc lưu trữ file CSS riêng biệt giúp việc thay đổi giao diện trang web trở nên dễ dàng hơn, chỉ cần chỉnh sửa một file duy nhấ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à kiểu định dạng được áp dụng trực tiếp trong thẻ HTML và chỉ có hiệu lực trong thẻ đó Để sử dụng inline style, bạn chỉ cần thêm thuộc tính "style" vào thẻ HTML tương ứng, và thuộc tính này có thể bao gồm mọi thuộc tính CSS.

  Đâ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

  Lớp (hay Class) là tập hợp các đối tượng có chung thuộc tính, trong đó các đối tượng trong cùng một lớp có khả năng thừa kế các đặc điểm từ nhau.

  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ên lớ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

  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ặc giá 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ị; }

  + 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:

  The background-color property allows you to set the background color of an element, while the background-image property enables you to establish a background image You can control how the background image repeats using the background-repeat property, and the background-position property helps define its placement Lastly, the background-attachment property is used to fix the background image in place.

   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

  Để xác định chiều rộng và chiều cao cho hình nền, cần lưu ý rằng tỷ lệ hình nền nên được điều chỉnh sao cho lớn nhất có thể, với chiều rộng và chiều cao phù hợp với vùng chứa Tùy thuộc vào tỷ lệ của hình nền so với vùng chứa, có thể xuất hiện một số khu vực không được hình nền che phủ.

  Để đảm bảo hình nền được bao phủ hoàn toàn vùng chứa, cần điều chỉnh tỷ lệ hình nền phù hợp Lưu ý rằng một số phần của hình nền có thể không hiển thị trong vùng chứa.

  To set the banner.png image as the background for the header of your website, use the following CSS code: `header {background-image: url(banner.png); background-size: cover;}` This code ensures that the image fully covers the header area, creating a visually appealing design.

   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:

  In a grid layout, the positions are defined as follows: the left top is located at the upper left corner, while the left center is in the middle of the left side, and the left bottom is at the lower left corner On the right side, the right top is at the upper right corner, the right center is in the middle of the right side, and the right bottom is at the lower right corner The center top is positioned in the middle at the top, the center center is at the intersection of the horizontal and vertical midpoints, and the center bottom is at the middle of the bottom These positions can be referenced as left top, center top, right top, left center, center center, right center, left bottom, center bottom, and 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

  For example, to set the logo.png image as the background for a webpage, you can repeat it horizontally, positioning it 100 pixels from the left margin and 20 pixels from the top The CSS code for this would be: 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:

  ;}

  Để đặt hình logo.png làm nền cho trang web, bạn có thể sử dụng đoạn mã CSS sau: `body { background: url(logo.png) repeat-x 100px 20px; }` Mã này sẽ lặp lại hình nền theo chiều ngang, với lề trái 100px và lề trên 20px.

  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:

  Đường viền trong CSS được sử dụng để tạo các hiệu ứng hiển thị cho các thành phần Các thuộc tính bao gồm: border-top để hiển thị đường viền phía trên, border-right cho đường viền bên phải, border-bottom cho đường viền bên dưới, và border-left cho đường viền bên trái Ngoài ra, thuộc tính border cho phép hiển thị đường viền bao quanh toàn bộ thành phần.

   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ử:

  The CSS properties for rounding corners include: `border-top-left-radius` for the top-left corner, `border-top-right-radius` for the top-right corner, `border-bottom-left-radius` for the bottom-left corner, and `border-bottom-right-radius` for the bottom-right corner.

  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 + color: màu 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:

  The CSS properties for margin control allow you to adjust the spacing around elements effectively Use "margin-left" to set the left margin, "margin-right" for the right margin, "margin-top" for the top margin, and "margin-bottom" for the bottom margin of a component This enables precise layout management and enhances the visual structure of your web 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:

   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;}

  Padding là thuộc tính trong HTML dùng để tạo khoảng đệm cho các thành phần, giúp xác định không gian giữa nội dung hiển thị và đường viền của thành phần đó.

  + 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ó)

  Khi thiết lập thuộc tính width và height cho một thành phần HTML trong CSS, bạn chỉ định kích thước nội dung của nó Để tính toán kích thước thực tế của thành phần, cần cộng thêm margin, border và padding.

  • 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:

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

  Đị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

  + 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

  Tất cả các phần tử HTML đều được xem như một hộp, và trong CSS, mô hình hộp (box model) đóng vai trò quan trọng trong việc thiết kế và bố cục trang web.

  Mô hình hộp về 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

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

  Một phần tử có vị trí relative được định vị tương đối so với vị trí ban đầu của nó, cho phép thay đổi vị trí bằng cách sử dụng các thuộc tính top, left, right và bottom.

  Một phần tử với vị trí fixed được định vị tương đối so với cửa sổ trình duyệt, cho phép bạn sử dụng các thuộc tính top, left, right và bottom để xác định vị trí chính xác của nó trên màn hình.

  Thuộc tính left được sử dụng để xác định vị trí bên trái cho các thành phần khi áp dụng thuộc tính position, với khoảng cách được tính từ mép trái của thành phần bao ngoài.

  Thuộc tính top được sử dụng để xác định vị trí phía trên cho các thành phần khi áp dụng thuộc tính position, với khoảng cách tính từ mép trên của phần tử bao ngoài.

  Thuộc tính "right" được sử dụng để xác định vị trí bên phải cho các thành phần khi áp dụng thuộc tính "position" Khoảng cách được tính từ mép bên phải của phần tử cha.

  Thuộc tính bottom được sử dụng để xác định vị trí bên dưới cho một thành phần khi áp dụng thuộc tính position, với khoảng cách tính từ mép dưới của thành phần bao ngoài.

  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, giá trị "block" khiến phần tử hiển thị như một khối độc lập, tách biệt với các phần tử xung quanh Ngược lại, giá trị "inline" là mặc định, cho phép phần tử hiển thị trên cùng một dòng với các phần tử khác Cuối cùng, "inline-block" là sự kết hợp giữa hai giá trị này, cho phép phần tử vừa giữ vị trí trên cùng dòng vừa có khả năng định dạng 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)

  The `justify-content` property in CSS can be set to values like flex-start, flex-end, center, space-between, space-around, and space-evenly This property adjusts the starting position and alignment of flex items within a flex container, depending on the flex-direction.

  • 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

  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

  Liên kết có chuột đi qua sẽ được hiển thị với chữ màu đỏ đậm, kích thước lớn hơn (1.2em), nền màu vàng (gold), không có gạch chân, và có đường viền màu xanh nhạt kiểu outset dày 5px.

  - 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

  4.7.2 Tạo thanh điều hướng dọc

  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

    Thanh điều hướng ngang được tạo ra bằng cách sử dụng thuộc tính display: inline, cho phép các phần tử

  • hiển thị trên cùng một dòng, tương tự như cách tạo thanh điều hướng dọc.

    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

     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:

    Hình 4.32 Kết quả ví dụ 39

    Đị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