Giáo trình Thiết kế và cấu hình website (Nghề: Quản trị mạng máy tính - Trình độ Cao đẳng) - Trường Cao đẳng Nghề An Giang

Chia sẻ: _ _ | Ngày: | Loại File: PDF | Số trang:91

Thêm vào BST

Báo xấu

23
lượt xem 6
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Giáo trình Thiết kế và cấu hình website gồm các nội dung chính như: Ngôn ngữ HTML; Css cơ bản; cài đặt và sử dụng Joomla; sử dụng các đối tượng Joomla; quản trị cơ sở dữ liệu trong joola; sử dụng Componet;... Mời các bạn cùng tham khảo!

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Giáo trình Thiết kế và cấu hình website (Nghề: Quản trị mạng máy tính - Trình độ Cao đẳng) - Trường Cao đẳng Nghề An Giang

ỦY BAN NHÂN DÂN TỈNH AN GIANG TRƢỜNG CAO ĐẲNG NGHỀ AN GIANG GIÁO TRÌNH Thiết kế và cấu hình website NGHỀ QUẢN TRỊ MẠNG MÁY TÍNH Trình độ cao đẳng (Ban hành theo Quyết định số: 70 /QĐ-CĐN ngày 11 tháng 01 năm 2019 của Hiệu trưởng trường Cao đẳng nghề An Giang) Tên tác giả: Đổ Văn Nhớ Năm ban hành: 2018 1
TUYÊN BỐ BẢN QUYỀN Tài liệu này thuộc loại sách giáo trình nên các nguồn thông tin có thể đƣợc phép dùng nguyên bản hoặc trích dùng cho các mục đích về đào tạo và tham khảo. Mọi mục đích khác mang tính lệch lạc hoặc sử dụng với mục đích kinh doanh thiếu lành mạnh sẽ bị nghiêm cấm. LỜI GIỚI THIỆU Trong những năm qua, dạy nghề đã có những bƣớc tiến vƣợt bậc cả về số lƣợng và chất lƣợng, nhằm thực hiện nhiệm vụ đào tạo nguồn nhân lực kỹ thuật trực tiếp đáp ứng nhu cầu xã hội. Cùng với sự phát triển của khoa học công nghệ trên thế giới, lĩnh vực Công nghệ thông tin nói chung và ngành Quản trị mạng ở Việt Nam nói riêng đã có những bƣớc phát triển đáng kể. Chƣơng trình dạy nghề Quản trị mạng đã đƣợc xây dựng trên cơ sở phân tích nghề, phần kỹ năng nghề đƣợc kết cấu theo các môđun. Để tạo điều kiện thuận lợi cho các cơ sở dạy nghề trong quá trình thực hiện, việc biên soạn giáo trình theo các môđun đào tạo nghề là cấp thiết hiện nay. Mô đun 20: Thiết kế và cấu hình website là mô đun đào tạo chuyên môn nghề đƣợc biên soạn theo hình thức tích hợp lý thuyết và thực hành. Trong quá trình thực hiện, nhóm biên soạn đã tham khảo nhiều tài liệu Thiết kế website trong và ngoài nƣớc, kết hợp với kinh nghiệm trong thực tế. Mặc dầu có rất nhiều cố gắng, nhƣng không tránh khỏi những khiếm khuyết, rất mong nhận đƣợc sự đóng góp ý kiến của độc giả để giáo trình đƣợc hoàn thiện hơn. Xin chân thành cảm ơn! An Giang, ngày 15 tháng 04 năm 2018 Tham gia biên soạn Đổ Văn Nhớ 2
MỤC LỤC ĐỀ MỤC TRANG LỜI GIỚI THIỆU ................................................................................................... 2 BÀI 1: NGÔN NGỮ HTML ................................................................................... 7 I. KHÁI QUÁT VỀ TRANG WEB .................................................................... 7 II. CẤU TRÚC CƠ BẢN CỦA TRANG WEB ................................................. 8 III. CÁC THẺ HTML CƠ BẢN ......................................................................... 8 BÀI 2: CSS CƠ BẢN ............................................................................................. 11 I. LẬP KẾ HOẠCH VÀ QUẢN LÝ, THAO TÁC TRÊN WEBSITE.......... 11 II. CÚ PHÁP CHUNG ....................................................................................... 12 III. CÁC ĐỊNH DẠNG CSS ............................................................................. 12 Bài 3: CÀI ĐẶT VÀ SỬ DỤNG JOOMLA ........................................................ 27 I. CÀI ĐẶT VÀ CẤU HÌNH JOOMLA .......................................................... 27 II. SỬ DỤNG CÁC CHỨC NĂNG CHÍNH CỦA JOOMLA. ....................... 38 III. CÀI ĐẶT VÀ SỬ DỤNG COMPONENT, MODULE, PLUGIN VÀ TEMPLATE. ...................................................................................................... 45 BÀI 4: SỬ DỤNG CÁC ĐỐI TƢỢNG JOOMLA ............................................. 58 I. SỬ DỤNG CÁC ĐỐI TƢỢNG HỖ TRỢ LẬP TRÌNH JOOMLA. ......... 58 II.TÌM HIỂU CẤU TRÚC TỔ CHỨC THƢ MỤC JOOMLA. .................... 59 III. TÌM HIỂU CẤU TRÚC URI. .................................................................... 61 IV. LÀM VIỆC VỚI CÁC ĐỐI TƢỢNG: REQUEST, FACTORY, SESSION,............................................................................................................ 61 BÀI 5: QUẢN TRỊ CƠ SỞ DŨ LIỆU TRONG JOOMLA ............................... 63 I. CẤU HÌNH KẾT NỐI CƠ SỞ DỮ LIỆU TRONG JOOMLA. ................. 63 II. SỬ DỤNG CÁC HÀM TRUY VẤN DỮ LIỆU TỪ DATABASE. ........... 64 III. SỬ DỤNG JTABLE. ................................................................................... 66 BÀI 6: SỬ DỤNG COMPONENT ....................................................................... 68 I. GIỚI THIỆU CẤU TRÚC COMPONENT JOOMLA. ............................. 68 II. SỬ DỤNG MÔ HÌNH MVC TRONG COMPONENT............................. 69 III. TẠO CÁC DẠNG HIỂN THỊ FEED, PDF, RAW................................... 71 IV. SỬ DỤNG THAM SỐ. ................................................................................ 72 BÀI 7: SỬ DỤNG MODULE ............................................................................... 74 I. GIỚI THIỆU CẤU TRÚC MODULE JOOMLA ....................................... 74 II. SỬ DỤNG THAM SỐ. ................................................................................. 75 III. TẠO LAYOUT CHO MODULE. .............................................................. 75 3
IV. SỬ DỤNG HELPER FILE. ........................................................................ 76 BÀI 8: SỬ DỤNG PLUGIN.................................................................................. 78 I. GIỚI THIỆU CẤU TRÚC PLUGIN JOOMLA. ........................................ 78 II. SỬ DỤNG EVENT VÀ LISTENERS. ........................................................ 78 BÀI 9: SỬ DỤNG EXTENSION.......................................................................... 80 I.SỬ DỤNG CÁC LỚP HỖ TRỢ LẬP TRÌNH.............................................. 80 II. SỬ DỤNG HELPER. .................................................................................... 80 III. SỬ DỤNG SESSION, BROWSER,... ........................................................ 81 BÀI 10: SỬ DỤNG TEMPLATE ......................................................................... 83 I. GIỚI THIỆU CẤU TRÚC TEMPLATE JOOMLA. ................................. 83 II. SỬ DỤNG CSS, JAVASCRIPT VÀ HÌNH ẢNH. ..................................... 84 III. ĐỊNH NGHĨA POSITION CHO MODULE VÀ COMPONENT TRONG TEMPLATE. ...................................................................................... 85 IV. XÂY DỰNG TEMPLATE CHO FRONT-END VÀ BACK-END. ........ 86 BÀI 11: SỬ SỤNG API ......................................................................................... 87 I. SỬ DỤNG CÁC API JOOMLA. .................................................................. 88 II. SỬ DỤNG CÁC CLASS: DATE, FILE, ARRAY, TREE,... .................... 88 CÁC THUẬT NGỮ CHUYÊN MÔN.................................................................. 90 TÀI LIỆU THAM KHẢO .................................................................................... 91 4
GIÁO TRÌNH MÔ ĐUN Tên mô đun: THIẾT KẾ VÀ CẤU HÌNH WEBISTE Mã mô đun: MĐ 20 I. VỊ TRÍ, TÍNH CHẤT CỦA MÔ ĐUN 1. Vị trí: thuộc nhóm Mô đun chuyên môn nghề 2. Tính chất: Là Mô đun chuyên môn bắt buộc trong ngành quản trị mạng máy tính hệ Cao đẳng II. MỤC TIÊU CỦA MÔ ĐUN - Kiến thức: + Nêu và ứng dụng các thẻ HTML + Tổ chức thông tin trên trang chủ web + Định hướng được các cách liên kết đến các trang web + Đưa ra được ý tưởng về giao diện + Có khả năng sử dụng dụng các thẻ HTML + Trình bày được thế nào là Hệ thống quản trị nội dung CMS, hiểu rõ ưu nhược điểm khi sử dụng hệ thống quản trị nội dung CMS để xây dựng website + Trình bày được hệ thống quản trị nội dung Joomla. + Trình bày được quy trình cài đặt và cấu hình Joomla. + Hiểu biết các đối tượng trong Joomla. + Hiểu rõ cấu trúc các đối tượng: Component, Module, Plugin, Extention, Template, API trong Joomla. - Kỹ năng: + Sử dụng các thẻ HTML để thiết kế được trang web + Thiết kế được giao diện của các trang trên website + Thực hiện cài đặt và cấu hình được Joomla + Tìm kiếm và cài đặt sử dụng các thành phần mở rộng: Component, Module, Plugin. + Tạo được các thành phần mở rộng đơn giản. + Cài đặt và sử dụng được template. Tạo mới template. - Năng lực tự chủ và trách nhiệm. + Cẩn thận, tỉ mỉ, tự giác học tập và nghiên cứu. Nội dung của mô đun Thời gian (giờ) Tên các bài trong TT Tổng Lý Thực Kiểm mô đun số thuyết hành tra 1 Bài 1: Ngôn ngữ HTML 20 5 13 2 5
2 Bài 2: Css cơ bản 25 10 13 2 3 Bài 3: Cài đặt và sử dụng Joomla 4 2 2 4 Bài 4: Sử dụng các đối tượng Joomla 4 2 2 5 Bài 5: Quản trị cơ sở dữ liệu trong joola 4 2 2 6 Bài 6: Sử dụng Componet 4 2 2 7 Bài 7: Sử dụng Module 8 2 5 1 8 Bài 8: Sử dụng Plugin 4 2 2 9 Bài 9: Sử dụng Extension 4 2 2 10 Bài 10: Sử dụng Template 4 1 3 11 Bại 11: Sử dụng API 5 1 4 12 Bài 12: Ôn tập 4 4 Cộng 90 30 54 6 6
BÀI 1: NGÔN NGỮ HTML Giới thiệu: HTML là kiến thức cơ bản mà bất cứ ai muốn học lập trình web hoặc học thiết kế web đều phải biết. Tất cả các trang web dù xử lý phức tạp đến đâu đều phải trả về dưới dạng mã nguồn HTML để trình duyệt có thể hiểu và hiển thị lên được. Mục tiêu: - Trình bày và sử dụng được cấu trúc của một trang HTML - Thiết kế được trang web bằng ngôn ngữ HTML Nội dung chính: I. KHÁI QUÁT VỀ TRANG WEB Ngôn ngữ đánh dấu siêu văn bản (html) chỉ rõ một trang Web sẽ được hiển thị như thế nào trong một trình duyệt. Sử dụng các thẻ và các phần tử html, bạn có thể:  Điều khiển hình thức và nội dung của trang  Xuất bản các tài liệu trực tuyến và truy xuất thông tin trực tuyến bằng cách sử dụng các liên kết được chèn vào tài liệu html  Tạo các biểu mẫu trực tuyến để thu thập thông tin về người dùng, quản lý các giao dịch  Chèn các đối tượng như audio clip, video clip, các thành phần ActiveX, Flash và các Java Applet vào tài liệu html Tài liệu html tạo thành mã nguồn của trang Web. Khi được xem trên trình soạn thảo, tài liệu này là một chuỗi các thẻ và các phần tử, mà chúng xác định trang web hiển thị như thế nào. Trình duyệt đọc các file có đuôi .htm hay .html và hiển thị trang web đó theo các lệnh có trong đó. Ví dụ, theo cú pháp html dưới đây sẽ hiển thị thông điệp “My first html document” Welcome to html My first html document Trình duyệt thông dịch những lệnh này và hiển thị trang web như hình sau: Hình 1.1 Trang web cơ bản html 7
II. CẤU TRÚC CƠ BẢN CỦA TRANG WEB Một tài liệu html gồm 3 phần cơ bản: Phần html: Mọi tài liệu html phải bắt đầu bằng thẻ mở html và kết thúc bằng thẻ đóng html Thẻ html báo cho trình duyệt biết nội dung giữa hai thẻ này là một tài liệu html Phần tiêu đề: Phần tiêu đề bắt đầu bằng thẻ và kết thúc bởi thẻ  . Phần này chứa tiêu đề mà được hiển thị trên thanh điều hướng của trang Web. Tiêu đề nằm trong thẻ title, bắt đầu bằng thẻ và kết thúc là thẻ . Tiêu đề là phần khá quan trọng. Khi người dùng tìm kiếm thông tin, tiêu đề của trang Web cung cấp từ khóa chính yếu cho việc tìm kiếm. Phần thân: phần này nằm sau phần tiêu đề. Phần thân bao gồm văn bản, hình  ảnh và các liên kết mà bạn muốn hiển thị trên trang web của mình. Phần thân bắt đầu bằng thẻ và kết thúc bằng thẻ  Ví dụ: Welcome to the world of html Chào mừng các bạn đến với Khoa CNTT III. CÁC THẺ HTML CƠ BẢN 1. Thẻ : trình bày tiêu đề cho phần nội dung hiển thị trên trang web. a. Cú pháp: Nội dung tiêu đề với n: từ 1 đến 6 b. Ví dụ: Xin chào các bạn ! Thiết kế web với html 2. Thẻ : liên kết đến trang web cục bộ hoặc trang web khác a. Cú pháp: Nội dung tiêu đề b. Ví dụ: Trường cao đẳng nghề An giang 3. Thẻ : hiển thị hình ảnh a. Cú pháp: 8
b. Ví dụ: 4. Thẻ , , : in đậm, in nghiêng, gạch chân a. Cú pháp: Nội dung Nội dung Nội dung b. Ví dụ: Quản trị mạng máy tính Quản trị mạng máy tính Quản trị mạng máy tính 5. Thẻ : xuống dòng a. Cú pháp: Nội dung vẳn bản b. Ví dụ: Khoa công nghệ thông tin Quản trị mạng máy tính 6. Thẻ , : tạo danh sách không thứ tự và có thứ tự a. Cú pháp: b. Ví dụ: Danh sách không có thứ tự Coffee Tea Milk Danh sách có thứ tự Coffee Tea Milk 7. Thẻ , : định dạng đoạn văn bản a. Cú pháp: Nội dung align=” left, right, center” b. Ví dụ: Thiết kế web với HTML cơ bản 8. Thẻ : tạo bảng a. Cú pháp: Nội dung dòng 1 cột 1 9
Nội dung dòng 2 cột 1 b. Ví dụ: Vị trí đặt banner Nội dung dòng 2 cột 1 9. Thẻ : định dạng font chữ website a. Cú pháp: Nội dung b. Ví dụ: Xin chao cac ban Câu hỏi ôn tập: 1/. HTML là gì ? 2/. Trình bày cú pháp của HTML 3/. Kết hợp các thẻ html cơ bản xây dựng một website đơn giản mang tên web cá nhân đơn giản. 10
BÀI 2: CSS CƠ BẢN Giới thiệu CSS là chữ viết tắt của cụm từ “Cascading Style Sheet” dùng để định dạng bố cục của một website dựa vào ngôn ngữ đánh dấu HTML. Nói một cách dễ hiểu CSS dùng để thay đổi cách hiển thị mặc định của các thẻ HTML nhằm thân thiện với người dùng hay thêm phần thẩm mỹ cho website. Mục tiêu - Trình bày và sử dụng được các định dạng cho một trang web. - Thiết kế được trang web có định dạng bằng css. Nội dung chính I. LẬP KẾ HOẠCH VÀ QUẢN LÝ, THAO TÁC TRÊN WEBSITE CSS cho phép bạn định dạng các đối tượng với rất nhiều đặc điểm (thuộc tính) mở rộng mà HTML thông thường không có Hình 2.1 Bố cục html và css CSS đóng vai trò rất quan trọng khi bạn xây dựng website, bạn không thể định dạng 1 trang web cho đẹp khi không có sự am hiểu về kỹ thuật CSS. Thông thường các Developer sẽ sử dụng một chương trình thiết kế như photoshop để tạo giao diện sau đó convert sang file CSS riêng mà không phải ngồi viết từng dòng lệnh. Hình 2.2 Mô phỏng cách học css CSS là gì? Cấu trúc CSS trong một website 11
Các thể loại CSS thông dụng  Background : CSS tùy chỉnh hình nền  Text : CSS tùy chỉnh cách hiển thị đoạn text  Font : CSS tùy chỉnh kích thước, kiểu chữ  List : CSS tùy chỉnh danh sách  Table : CSS tùy chỉnh bảng  Link : CSS tùy chỉnh liên kết  Box model : CSS tùy chỉnh padding, margin, border II. CÚ PHÁP CHUNG Một đoạn CSS bao gồm 4 phần như sau: vùng định dạng { Thuộc tính : giá trị; Thuộc tính : giá trị; ... } Vùng định dạng ở đây là các đoạn text hay các thẻ HTML mà bạn muốn định dạng. Tất cả giá trị của vùng định dạng nằm trong cặp dấu ngoặc { }. Mỗi thuộc tính sẽ ứng với một giá trị, phần thuộc tính và giá trị cách nhau bởi dấu hai chấm, kết thúc một thuộc tính cách nhau bởi dấu chấm phẩy cuối cùng. Một vùng định dạng có thể sử dụng không giới hạn thuộc tính. III. CÁC ĐỊNH DẠNG CSS Chúng ta đã tìm hiểu về cú pháp viết CSS, nhưng còn đặt nó ở đâu trong tài liệu HTML? Chúng ta có ba cách khác nhau để nhúng CSS vào trong một tài liệu HTML + Cách 1: Nội tuyến (kiểu thuộc tính) Đây là một phương pháp nguyên thủy nhất để nhúng CSS vào một tài liệu HTML bằng cách nhúng vào từng thẻ HTML muốn áp dụng. Và dĩ nhiên trong trường hợp này chúng ta sẽ không cần selector trong cú pháp. Lưu ý: Nếu bạn muốn áp dụng nhiều thuộc tính cho nhiều thẻ HTML khác nhau thì không nên dùng cách này. Ví dụ sau chúng ta sẽ tiến hành định nền màu trắng cho trang và màu chữ xanh lá cho đoạn văn bản như sau: Ví dụ ^_^ Welcome To Khoa CNTT ^_^ + Cách 2: Bên trong (thẻ style) Thật ra nếu nhìn kỹ chúng ta cũng nhận ra đây chỉ là một phương cách thay thế cách thứ nhất bằng cách rút tất cả các thuộc tính CSS vào trong thẻ style 12
Ví dụ làm trang web có màu nền trắng, đoạn văn bản chữ xanh lá, chúng ta sẽ thể hiện như sau: Ví dụ body { background-color:#FFF } p { color:#00FF00 } ^_^ Welcome To Khoa CNTT ^_^ Lưu ý: Thẻ style nên đặt trong thẻ head + Cách 3: Bên ngoài (liên kết với một file CSS bên ngoài) Tương tự như cách 2 nhưng thay vì đặt tất cả các mã CSS trong thẻ style chúng ta sẽ đưa chúng vào trong một file CSS (có phần mở rộng .css) bên ngoài và liên kết nó vào trang web bằng thuộc tính href trong thẻ link. Đây là cách làm được khuyến cáo, nó đặc biệt hữu ích cho việc đồng bộ hay bảo trì một website lớn sử dụng cùng một kiểu mẫu.Ví dụ sau đây sẽ được trình bày theo kiểu này. vidu.html Ví dụ ^_^ Welcome To Khoa CNTT ^_^ Sau đó hãy tạo một file style.css với nội dung: body { background-color:#FFF } p{ color:#00FF00 } Hãy đặt 2 file này vào cùng một thư mục, mở file vidu.html trong trình duyệt của bạn và xem thành quả. Có thể chọn Encoding là UTF-8, nếu bạn chú thích CSS bằng tiếng việt. - Màu nền (thuộc tính background-color): Thuộc tính background-color giúp định màu nền cho một thành phần trên 13
trang web. Các giá trị mã màu của background-color cũng giống như color nhưng có thêm giá trị transparent để tạo nền trong suốt. Ví dụ sau đây sẽ chỉ cho chúng ta biết cách sử dụng thuộc tính background- color để định màu nền cho cả trang web, các thành phần h1, h2 lần lượt là xanh lơ, đỏ và cam. body { background-color:cyan } h1 { background-color:red } h2 { background-color:orange } - Ảnh nền (thuộc tính background-image): Việc sử dụng ảnh nền giúp trang web trông sinh động và bắt mắt hơn. Để chèn ảnh nền vào một thành phần trên trang web chúng ta sử dụng thuộc tính background-image body { background-image:url(logo.png) } h1 { background-color:red } h2 { background-color:orange } p{ background-color: FDC689 Như các bạn đã thấy chúng ta sẽ phải chỉ định đường dẫn của ảnh trong cặp ngoặc đơn sau url. Do ảnh đặt trong cùng thư mục với file style3.css nên chúng ta chỉ cần ghi abc.jpg. Nhưng nếu chúng ta tạo thêm một thư mục img trong thư mục thì chúng ta sẽ phải ghi là background-image:url(img/abc.jpg). Đôi khi nếu không chắc lắm bạn có thể dùng đường dẫn tuyệt đối cho ảnh. - Lặp lại ảnh nền (thuộc tính background-repeat): Nếu sử dụng một ảnh có kích thước quá nhỏ để làm nền cho một đối tượng lớn hơn thì theo mặc định trình duyệt sẽ lặp lại ảnh nền để phủ kín không gian còn thừa. Thuộc tính background-repeat cung cấp cho chúng ta các điều khiển giúp kiểm soát trình trạng lặp lại của ảnh nền. Thuộc tính này có 4 giá trị: + repeat-x: Chỉ lặp lại ảnh theo phương ngang. + repeat-y: Chỉ lặp lại ảnh theo phương dọc. + repeat: Lặp lại ảnh theo cả 2 phương, đây là giá trị mặc định. + no-repeat: Không lặp lại ảnh. Bây giờ, chúng ta hãy thêm thuộc tính background-repeat này vào ví dụ trên thử xem sao. 14
body { background-image:url(logo.png); background-repeat:no-repeat; } - Font Chữ: body { font-family:”Times New Roman” } h1, h2, h3 { font-family:arial,verdana,serif } p{ font-weight:bold; // in đậm font-style: italic; // in nghiêng font-size:14pt; // tính theo pt hoặc px hoặc cm } Cấu trúc rút gọn cho các thuộc tính nhóm font: Font : | < font-variant> | | |< font- family> p{ font: italic bold 30px arial; } - Text : + Thuộc tính color : body { color:#000 } h1 { color:#0000FF } + Thuộc tính text-indent : p{ text-indent:30px ; // thụt vào đầu dòng khoảng cách 30px } + Thuộc tính text-align : h1, h2 { text-align:right ; // canh lề phải } p{ text-align:justify ; // canh đều } + Thuộc tính letter-spacing : h1, h2 { letter-spacing:7px ; // khoảng cách giữa các ký tự trong một đoạn văn bản } +Thuộc tính text-decoration : giúp bạn thêm các hiệu ứng gạch chân (underline), gạch xiên (line-through), gạch đầu (overline), và một hiệu ứng đặc biệt là văn bản nhấp nháy (blink). 15
Ví dụ sau chúng ta sẽ định dạng gạch chân cho thành phần h1, gạch đầu thành phần h2 h1 { text-decoration:underline } h2 { text-decoration:overline } + Thuộc tính text-transform : thuộc tính này có tất cả 4 giá trị: uppercase (in hoa), lowercase (in thường), capitalize (in hoa ở ký tự đầu tiên trong mỗi từ) và none (không áp dụng hiệu ứng – mặc định). Ví dụ dưới đây chúng ta sẽ định dạng cho thành phần h1 là in hoa, h2 là in hoa đầu mỗi ký tự. h1 { text-transform:uppercase } h2 { text-transform:capitalize } - Liên kết : + Liên kết chưa được thăm (a:link), + Khi rê chuột lên liên kết (a:hover), + Khi liên kết được thăm (a:visited) hay + Khi liên kết đang được kích hoạt – đang giữ nhấn chuột (a:active). a:link { color:#00FF00 } a:hover { color:#FF00FF } a:visited { color:#FF0000 } a:active { color:# 662D91 } Tạo các hiệu ứng tương ứng với trình trạng liên kết: các liên chưa thăm có màu xanh lá, kích cỡ font 14px; liên kết mouse over có màu đỏ tươi, kích cỡ font 1.2em, hiệu ứng nhấp nháy; liên kết đã thăm sẽ có màu xanh da trời, không có đường gạch chân; các liên kết đang kích hoạt có màu tím và font dạng small-caps. a:link { color:#00FF00; font-size:14px } a:hover { color:#FF00FF; 16
font-size:1.2em; text-decoration:blink } a:visited { color:#FF0000; text-decoration:none } a:active { color:# 662D91; font-variant:small-caps } - Class & ID: + Class dùng để nhóm các đối tượng có cùng thuộc tính, do tính chất đó nó có thể được sử dụng nhiều lần. + Id dùng để nhận dạng một đối tượng đặc trưng, id có tính duy nhất. *Ví dụ về class: Danh Sách Các Tỉnh, Thành Phố Của Việt Nam Hà Nội TP. Hồ Chí Minh Đà Nẵng Thừa Thiên Huế Khánh Hòa Quãng Ninh Tiền Giang Với việc dùng class để nhóm các đối tượng như trên thì công việc của chúng ta sẽ trở nên đơn giản hơn nhiều: li .tp { color:FF0000 } li .tinh { color:0000FF } *Vi dụ về id : Danh Sách Các Tỉnh, Thành Phố Của Việt Nam Hà Nội TP. Hồ Chí Minh Đà Nẵng Thừa Thiên Huế Khánh Hòa Quãng Ninh Tiền Giang 17
Và đoạn CSS cần dùng sẽ là : #hanoi { color:# 790000 } #hcmc { color:#FF0000 } #danang { color:#FF00FF } .tinh { color:#0000FF } - Nhóm khối phần tử với thẻ : Cũng như , cũng là một thẻ trung hòa và được thêm vào tài liệu HTML với mục đính nhóm các phần tử lại cho mục đích định dạng bằng CSS. Tuy nhiên, điểm khác biệt là dùng để nhóm một khối phần tử trong khi đó có thể nhóm một hoặc nhiều khối phần tử * Ví dụ về thẻ : Danh Sách Các Tỉnh, Thành Phố Việt Nam: Hà Nội TP. Hồ Chí Minh Đà Nẵng Thừa Thiên Huế Khánh Hòa Quãng Ninh An Giang Và đoạn CSS cho mục đích này sẽ là: #tp { color:#FF0000 } #tinh { color:0000FF } - Box Model : Trong CSS, box model (mô hình hộp) mô tả cách mà CSS định dạng khối không gian bao quanh một thành phần. Nó bao gồm padding (vùng đệm), border (viền) và margin (canh lề) và các tùy chọn. Hình bên dưới mô tả cấu trúc minh họa mô hình hộp cho một thành phần web. 18
Hình 2.3 Mô tả khoảng cách giữa chữ so với nội dung Phần CSS cho đoạn HTML trên: p{ width:200px; margin:30px 20px; padding:20px 10px; border:1px solid #000; text-align:justify } Hình 2.4 Mô tả cách sử dụng thẻ Margin và Padding 19
- Margin & Padding : + Margin : dùng để canh lề cho cả trang web hay một thành phần web này với các thành phần web khác hay với viền trang Cú pháp như sau: margin: | | | Ví dụ sau sẽ chỉ cho chúng ta biết cách canh lề cho một trang web. body { margin-top:80px; margin-bottom:40px; margin-left:50px; margin-right:30px; border:1px dotted #FF0000 } Hoặc gọn hơn chúng ta sẽ viết như sau: body { margin:80px 30px 40px 50px; border:1px dotted #FF0000 } Ví dụ sau đây sẽ trình bày chi tiết hơn về margin body { margin:80px 30px 40px 50px; border:1px solid #FF0000 } #box1 { margin:50px 30px 20px 40px; border:1px solid #00FF00 } #box2 { margin:50px 30px 20px 40px; border:1px solid #0000FF } + Padding : chỉ quy định khoảng cách giữa phần nội dung và viền của một đối tượng Cú pháp: Tương tự margin. Padding: | | | - Border : Ví dụ sau sẽ định viền cho 3 thành phần h1, h2, p như sau: h1 { border-width:thin; border-color:#FF0000; border-style:solid } h2 { border-width:thick; border-color:#CCC; border-style:dotted } 20