Giáo trình Thiết kế web cơ bản - Trình độ: Trung cấp - Trường Cao đẳng kinh tế kỹ thuật Thành phố Hồ Chí Minh

171 trang Gia Huy 16/05/2022 4841

Download

Bạn đang xem 20 trang mẫu của tài liệu "Giáo trình Thiết kế web cơ bản - Trình độ: Trung cấp - Trường Cao đẳng kinh tế kỹ thuật Thành phố Hồ Chí Minh", để tải tài liệu gốc về máy bạn click vào nút DOWNLOAD ở trên

Tài liệu đính kèm:

giao_trinh_thiet_ke_web_co_ban_trinh_do_trung_cap_truong_cao.pdf

Nội dung text: Giáo trình Thiết kế web cơ bản - Trình độ: Trung cấp - Trường Cao đẳng kinh tế kỹ thuật Thành phố Hồ Chí Minh

ỦY BAN NHÂN DÂN THÀNH PHỐ HỒ CHÍ MINH TRƢỜNG CAO ĐẲNG KINH TẾ KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH  GIÁO TRÌNH MÔ ĐUN: THIẾT KẾ WEB CƠ BẢN NGÀNH: THIẾT KẾ VÀ QUẢN LÝ WEBSITE TRÌNH ĐỘ: TRUNG CẤP Thành phố Hồ Chí Minh, năm 2020
ỦY BAN NHÂN DÂN THÀNH PHỐ HỒ CHÍ MINH TRƢỜNG CAO ĐẲNG KINH TẾ KỸ THUẬT THÀNH PHỐ HỒ CHÍ MINH  GIÁO TRÌNH MÔ ĐUN: THIẾT KẾ WEB CƠ BẢN NGÀNH: THIẾT KẾ VÀ QUẢN LÝ WEBSITE TRÌNH ĐỘ: TRUNG CẤP THÔNG TIN CHỦ NHIỆM ĐỀ TÀI Họ tên: Lê Thị Thu Thảo Học vị: Thạc sĩ Đơn vị: Khoa Công nghệ thông tin Email: lethithuthao@hotec.edu.vn TRƢỞNG KHOA TỔ TRƢỞNG CHỦ NHIỆM BỘ MÔN ĐỀ TÀI Lê Thị Thu Thảo HIỆU TRƢỞNG DUYỆT Thành phố Hồ Chí Minh, năm 2020
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 Giáo trình “Thiết kế web cơ bản” được biên soạn nhằm phục vụ cho việc học tập môn học “Thiết kế web cơ bản” đang được giảng dạy tại khoa Công nghệ thông tin, trường Cao Đẳng Kinh tế Kỹ Thuật TP.HCM. Nội dung giáo trình gồm 5 bài được biên soạn bám sát theo đề cương môn học “Thiết kế web cơ bản” và dựa theo các tiêu chuẩn thiết kế web hiện hành. Mục đích của giáo trình là cung cấp cho sinh viên các kiến thức cơ bản về ngôn ngữ HTML, CSS, JavaScript, sử dụng phần mềm DreamWeaver để áp dụng vào việc thiết kế web. Xin chân thành cảm ơn các ý kiến đóng góp từ các đồng nghiệp đã giúp tôi hoàn thành giáo trình này. TP.HCM, ngày tháng 08 năm 2020 Lê Thị Thu Thảo
MỤC LỤC BÀI 1 - PHÁC THẢO WEBSITE 1 1.1. Các khái niệm 1 1.1.1. Internet và Word Wide Web 1 1.1.2. Web server, web browser và webpage 1 1.1.3. Search Engine 2 1.1.4. Xuất bản web 2 1.2. Lập kế hoạch thiết kế website 3 1.3. Thiết kế bố cục trang web 4 1.4. Bài tập áp dụng 5 BÀI 2 - THIẾT KẾ TRANG WEB VỚI HTML 6 2.1. Tạo trang web đầu tiên 6 2.1.1. Khái niệm HTML 6 2.1.2. Các thẻ của tập tin HTML 6 2.1.3. Tạo trang web 7 2.1.4. Các thẻ định cấu trúc tài liệu HTML 10 2.2. Làm việc với văn bản trên trang web 12 2.2.1. Thẻ 12 2.2.2. Thẻ 12 2.2.3. Thẻ 12 2.2.4. Thẻ 13 2.2.5. Thẻ 13 2.2.6. Thẻ 13 2.2.7. Thẻ 13 2.2.8. Thẻ 14 2.2.9. Thẻ 14 2.2.10. Thẻ đến 15 2.2.11. Thẻ 16 2.2.12. Thẻ 16
2.3. Làm việc với danh sách trên trang web 16 2.3.1. Danh sách không có thứ tự 16 2.3.2. Danh sách có thứ tự 17 2.4. Làm việc với các đối tượng media trên trang web 19 2.4.1. Thẻ 19 2.4.2. Thẻ 20 2.4.3. Thẻ 21 2.4.4. Thẻ 22 2.5. Làm việc với liên kết trên trang web 23 2.5.1. Tạo liên kết đến tài liệu khác 24 2.5.2. Tạo liên kết đến các phần trong cùng một tài liệu 25 2.6. Làm việc với bảng biểu trên trang web 26 2.6.1. Tạo bảng đơn giản 26 2.6.2. Tạo bảng có gộp ô 28 2.7. Làm việc với biểu mẫu trên trang web 29 2.7.1. Khái quát về Form 29 2.7.2. Thẻ 30 2.7.3. Thẻ 32 2.7.4. Thẻ 36 2.7.5. Thẻ 37 2.7.6. Thẻ 39 2.7.7. Thẻ 40 2.8. Tạo Bố cục trang 42 2.8.1. Thẻ 43 2.8.2. Thẻ 43 2.8.3. Thẻ 43 2.8.4. Thẻ 43 2.8.5. Thẻ 44 2.8.6. Thẻ 44 2.8.7. Thẻ 44
2.8.8. Thẻ 44 2.8.9. Thẻ 45 2.9. Bài tập áp dụng 45 BÀI 3 - THIẾT KẾ TRANG WEB VỚI DREAMWEAVER 47 3.1. Tạo và quản lý website 47 3.1.1. Tạo một website 47 3.1.2. Quản lý website 50 3.1.3. Đưa website lên internet 51 3.1.4. Kiểm tra và sửa lỗi trang web 51 3.2. Tạo và định dạng các đối tượng trên trang web 53 3.2.1. Môi trường làm việc của Dreamweaver 53 3.2.2. Các thao tác cơ bản 54 3.2.3. Làm việc với văn bản 55 3.2.4. Làm việc với hình ảnh 57 3.2.5. Làm việc với multimedia 58 3.2.6. Liên kết trang 58 3.2.7. Làm việc với bảng 59 3.2.8. Làm việc với form 63 3.2.9. CSS 68 3.3. Bài tập áp dụng 76 BÀI 4 - ĐỊNH DẠNG TRANG WEB VỚI CSS 77 4.1. Tạo css cho trang web 77 4.1.1. Khái niệm 77 4.1.2. Cú pháp CSS 77 4.1.3. Đơn vị đo trong CSS 79 4.1.4. Phân loại CSS 80 4.1.5. Tạo và sử dụng Internal style sheet 80 4.1.6. Tạo và sử dụng External style sheet 82 4.1.7. Tạo và sử dụng Inline style 83 4.1.8. Lớp (Class) 84
4.1.9. Định danh (ID) 86 4.2. Định dạng văn bản bằng css 87 4.2.1. Thuộc tính font 87 4.2.2. Thuộc tính text 90 4.3. Định dạng danh sách bằng css 93 4.3.1. Thuộc tính list-style-type: 93 4.3.2. Thuộc tính list-style-image: 94 4.3.3. Thuộc tính list-style-position: 94 4.4. Định dạng thành phần 95 4.4.1. Thuộc tính background 96 4.4.2. Thuộc tính border 99 4.4.3. Thuộc tính box-shadow 102 4.4.4. Thuộc tính margin 102 4.4.5. Thuộc tính padding 105 4.4.6. Thuộc tính height và width 107 4.5. Định dạng hình ảnh bằng css 110 4.6. Tạo bố cục trang web bằng mô hình hộp 113 4.7. Tạo thanh điều hướng cho trang web 120 4.7.1. Pseudo-classes cho liên kết 120 4.7.2. Tạo thanh điều hướng dọc 122 4.7.3. Tạo thanh điều hướng ngang 123 4.8. Định dạng bảng biểu bằng css 125 4.9. Định dạng biểu mẫu bằng css 127 4.10. Bài tập áp dụng 131 BÀI 5 - Ngôn ngữ JavaScript 132 5.1. Giới thiệu về JavaScript 132 5.2. Nhúng JavaScript vào trang web 132 5.2.1. Đặt mã lệnh JavaScript trực tiếp vào trang web 133 5.2.2. Đặt mã lệnh JavaScript bên trong một tập tin .js 134 5.3. Tạo tương tác cơ bản với trang web 134
5.3.1. Hiển thị dữ liệu ra màn hình trong JavaScript 134 5.3.2. Sử dụng biến, kiểu dữ liệu, biểu thức, toán tử trong JavaScript 137 5.3.3. Sử dụng câu lệnh điều kiện trong JavaScript 138 5.3.4. Sử dụng câu lệnh lặp trong JavaScript 140 5.3.5. Sử dụng hàm, mảng trong JavaScript 142 5.3.6. Sử dụng các đối tượng cơ bản trong JavaScript 144 5.3.7. DOM 147 5.4. Làm việc với web form 149 5.4.1. Xử lý sự kiện 149 5.4.2. Kiểm tra tính hợp lệ của dữ liệu trong form bằng JavaScript 152 5.5. Bài tập áp dụng 153 TÀI LIỆU THAM KHẢO 154 PHỤ LỤC 155 DANH MỤC HÌNH 156 DANH MỤC BẢNG 160
GIÁO TRÌNH MÔ ĐUN Tên mô đun: THIẾT KẾ WEB CƠ BẢN Mã mô đun: MĐ2101411 Vị trí, tính chất của mô đun: - Vị trí: là mô đun được bố trí ở học kỳ II (THCS), học kỳ I (THPT). - Tính chất: là mô đun tích hợp thuộc nhóm mô đun chuyên ngành. Mục tiêu của mô đun: Về kiến thức: - Trình bày được các bước lập kế hoạch thiết kế website. - Trình bày được cú pháp các thẻ lệnh HTML, cú pháp CSS. - Trình bày được các thuộc tính thường dùng trong CSS để định dạng trang web. - Trình bày được các đối tượng cơ bản trong JavaScript. Về kỹ năng: - Lập được kế hoạch thiết kế của một website. - Sử dụng được các thẻ lệnh HTML để tạo và định dạng văn bản, danh sách, hình ảnh, liên kết, bảng biểu, biểu mẫu trên trang web. - Tạo và quản lý được website bằng Dreamweaver. - Vận dụng được Dreamweaver để tạo và định dạng các đối tượng trên trang web. - Tạo và sử dụng được các kiểu CSS. - Vận dụng được CSS để định dạng các đối tượng văn bản, hình ảnh, liên kết, bảng biểu, biểu mẫu trên trang web. - Tạo được bố cục trang web bằng mô hình hộp. - Tạo được thanh định hướng cho trang web. - Nhúng được đoạn mã JavaScript vào trang web. - Tạo được tương tác cơ bản với trang web bằng JavaScript. - Sử dụng được JavaScript để viết kịch bản đơn giản cho trang web. Về năng lực tự chủ và trách nhiệm:
- Yêu thích định dạng web bằng ngôn ngữ css - Làm việc một cách tỉ mỉ và cẩn thận trong ngôn ngữ HTML - Rèn luyện khả năng tự học, tư duy sáng tạo - Phối hợp làm việc theo nhóm.
Bài 1 - Phác thảo website BÀI 1 - PHÁC THẢO WEBSITE Giới thiệu: Trong bài học đầu tiên sẽ cung cấp cho người học một số kiến thức cơ bản về internet và web. Bài học này cũng đồng thời giúp người học có cái nhìn tổng quan về quá trình thiết kế một website. Mục tiêu: - Trình bày được các bước lập kế hoạch thiết kế website - Lập được kế hoạch thiết kế của một website - Thiết kế được bố cục của trang web 1.1. CÁC KHÁI NIỆM 1.1.1. Internet và Word Wide Web - Internet: Internet là một hệ thống thông tin toàn cầu có thể được truy nhập công cộng gồm các mạng máy tính được liên kết với nhau. - World Wide Web (WWW): là một hệ thống liên kết giữa các tài liệu siêu văn bản, được truy cập trên internet thông qua trình duyệt web và được cung cấp bởi web server. 1.1.2. Web server, web browser và webpage - Web server đơn giản là một máy tính nối vào Internet và chạy các phần mềm được thiết kế để truyền tải nội dung dưới dạng trang HTML. Máy chủ phải đủ mạnh để đáp ứng nhiều kết nối Internet đồng thời. Thông qua trình duyệt web máy chủ sẽ cung cấp các dịch vụ được yêu cầu đến máy dịch vụ. - Web Browser: Web browser còn được gọi là trình duyệt web - là một phần mềm được dùng để xem, quản lý và truy cập vào các trang web. Mỗi trình duyệt có những đặc điểm khác nhau do đó những trang web được hiển thị trên các trình duyệt khác nhau là không hoàn toàn giống nhau. Các trình duyệt phổ biến hiện nay là: Microsoft Internet Explorer, Mozilla Firefox, Apple Safari, Google Chrome, Opera. - Webpage: trang web – một file văn bản chứa dữ liệu và các thẻ HTML hoặc những đoạn mã mà trình duyệt web có thể hiểu và thông dịch được lưu với phần mở rộng là .html hoặc .htm. KHOA CÔNG NGHỆ THÔNG TIN Trang 1
Bài 1 - Phác thảo website - Website: là 1 tập hợp gồm nhiều trang web thể hiện thông tin của tổ chức, 1 chủ đề nào đó. - Home page: trang chủ của 1 website - Hyperlink: 1 liên kết chỉ đến trang web khác - URL (Uniform Resource Locator): là địa chỉ của 1 website, 1 webpage trên Internet. Có dạng: protocol://domain_name/path Protocol: tên giao thức http, ftp, file, Domain name: tên miền - là tên giao dịch của công ty hay tổ chức trên Internet. Thường có dạng: yourcompany.com Các tên miền cấp 1: .com Các tổ chức thương mại, doanh nghiệp (commercial) .edu Các tổ chức giáo dục (education) .int Các tổ chức Quốc tế (international organizations) .net mạng không thuộc các loại phân vùng khác (Network) - Trang web tĩnh: trang web chứa nội dung cố định (thường là HTML, để cập nhật nội dung phải cập nhật trực tiếp trên HTML), không cho phép sử dụng tương tác, cập nhật dữ liệu trên trang web. - Trang web động: trang web có khả năng tương tác với người sử dụng. Trang web có kết hợp HTML và mã lệnh. Mã được thực thi trực tiếp trên server, gửi kết quả là HTML về người sử dụng. 1.1.3. Search Engine - Là công cụ tìm kiếm nhằm tìm ra các trang trên mạng Internet có nội dung theo yêu cầu người dùng dựa vào các thông tin mà chúng có. - Một số công cụ tìm kiếm mạnh trên thế giới hiện nay: Google.com, Yahoo.com, Altavista.com, 1.1.4. Xuất bản web Xuất bản trên web (còn gọi là xuất bản trực tuyến) là quá trình xuất bản nội dung trên Internet. Nội dung xuất bản web bao gồm văn bản, video, hình ảnh, âm thanh, và các hình thức truyền thông khác. Quy trình xuất bản web gồm: + Xây dựng website KHOA CÔNG NGHỆ THÔNG TIN Trang 2
Bài 1 - Phác thảo website + Tải website lên internet + Cập nhật các trang web và đăng các nội dung trực tuyến. 1.2. LẬP KẾ HOẠCH THIẾT KẾ WEBSITE Các bước lập kế hoạch thiết kế website: Bƣớc 1: Xác định mục đích của website - Xác định mục tiêu cơ bản của website: mục tiêu đề ra phải khái quát, ngắn gọn, rõ ràng. Mục tiêu phải dài hạn, bao trùm toàn bộ kế hoạch phát triển. Đây chính là công cụ hữu hiệu để đánh giá sự thành công của một website. - Xác định đối tượng phục vụ: để có thể thiết kế cấu trúc website phù hợp với nhu cầu, mong muốn của người dùng thì cần phải xác định loại người dùng chính của website. Cần tìm hiểu về sự hiểu biết, trình độ, sở thích, kinh nghiệm duyệt web, lứa tuổi của người dùng. Một hệ thống được thiết kế tốt sẽ thích hợp cho một dải rộng trình độ, nhu cầu người dùng. - Xác định thể loại website: việc xác định thể loại website giúp định hướng cho nhà thiết kế. Các thể loại website thường gặp: giáo dục, huấn luyện (online trainning), tin tức, giải trí, diễn đàn, trao đổi thảo luận, mua bán, quản lý . Bƣớc 2: Xác định sơ đồ của website (sitemap) - Việc xác định sơ đồ website giúp có cái nhìn tổng quát về thông tin của website và các mối liên kết giữa các trang trên website. - Sơ đồ website thường được phác thảo dưới dạng cấu trúc cây. Hình 1.1. Sơ đồ website KHOA CÔNG NGHỆ THÔNG TIN Trang 3
Bài 1 - Phác thảo website Bƣớc 3: Chuẩn bị nội dung website - Chuẩn bị nội dung cho từng trang: nội dung phải viết ngắn gọn, súc tích, sử dụng từ ngữ dễ hiểu, đúng chính tả. Nên đưa những thông tin mới, có ích cho người xem. - Hình ảnh đẹp, rõ, sắc nét. Phải lựa chọn hình ảnh phù hợp với nội dung. Bƣớc 4: Bố cục cho trang web - Lựa chọn bố cục phù hợp cho trang chủ và các trang con. Bƣớc 5: Lựa chọn màu sắc cho trang web - Màu sắc nên lựa chọn dựa theo nội dung trang web, nên sử dụng màu sắc tương phản để làm nổi bật nội dung cần thể hiện. Không nên sử dụng quá nhiều màu sắc. Bƣớc 6: Chi tiết hóa trang web - Phác thảo chi tiết cụ thể giao diện cho từng trang web 1.3. THIẾT KẾ BỐ CỤC TRANG WEB • Bố cục phổ biến của một trang web HEADER NAVIGATION SIDEBAR CONTENT FOOTER Hình 1.2. Bố cục thông thƣờng của một trang web - Header: là thành phần nằm ở vị trí đầu trên trang web, thường chứa tên công ty, logo, câu khẩu hiệu, hình ảnh tiêu biểu - Navigation (điều hƣớng):là hệ thống menu liên kết giúp người dùng có thể duyệt toàn bộ các trang trong một Website. Tùy từng bố cục, có thể đặt menu này dạng ngang hoặc đứng. - Content: là phần hiển thị nội dung chính của trang web. - Sidebar: là phần hiển thị nội dung phụ của trang web như các menu phụ, các bài viết liên quan, quảng cáo, Tùy theo bố cục mà một website có thể có một hoặc nhiều hơn một sidebar. KHOA CÔNG NGHỆ THÔNG TIN Trang 4
Bài 1 - Phác thảo website - Footer: là thành phần nằm ở vị trí cuối trên trang web và được hiển thị ở tất cả các trang trong website, thường chứa các thông tin về Website: bản quyền, điều khoản sử dụng, tác giả, địa chỉ liên hệ, Ngoài ra, Footer còn được dùng như một menu liên kết cuối trang để tạo sự tiện lợi cho người dùng. Hình 1.3. Trang web có bố cục thông thƣờng 1.4. BÀI TẬP ÁP DỤNG 1. Phác thảo website giới thiệu Khoa Công nghệ thông tin 2. Phác thảo website bán hàng online KHOA CÔNG NGHỆ THÔNG TIN Trang 5
Bài 2 - Thiết kế trang web với HTML BÀI 2 - THIẾT KẾ TRANG WEB VỚI HTML Giới thiệu: Trong bài học này sẽ cung cấp cho người học kiến thức cơ bản về các thẻ lệnh HTML để tạo và định dạng các đối tượng trên một trang web. Mục tiêu: - Trình bày được cú pháp các thẻ lệnh HTML - Sử dụng được các thẻ lệnh HTML để tạo và định dạng văn bản, danh sách, hình ảnh, liên kết, bảng biểu và biểu mẫu trên trang web. 2.1. TẠO TRANG WEB ĐẦU TIÊN 2.1.1. Khái niệm HTML - HTML (Hyper Text Markup Language) là ngôn ngữ đánh dấu siêu văn bản được thiết kế để xây dựng các trang web. HTML tồn tại như là các tập tin văn bản có phần mở rộng là .htm hoặc .html được chứa trên các máy tính nối vào mạng Internet. Các file này chứa các thành phần định dạng để báo cho trình duyệt web biết cách để hiển thị một trang web. - Một trang web thông thường gồm có 2 thành phần chính: + Dữ liệu của trang web (văn bản, âm thanh, hình ảnh ) + Các thẻ (tag) HTML dùng để định dạng mô tả cách thức các dữ liệu hiển thị trên trình duyệt. 2.1.2. Các thẻ của tập tin HTML . Cấu trúc thẻ - Thẻ HTML là 1 tập các ký hiệu được định nghĩa trong HTML, mỗi thẻ html có ý nghĩa riêng. Các thẻ này dùng để điều khiển nội dung và hình thức trình bày tài liệu HTML. - Cấu trúc thẻ HTML thông thường gồm 2 phần: thẻ mở và thẻ đóng nội dung + Tên thẻ và thuộc tính thẻ không phân biệt chữ thường và hoa. Tuy nhiên theo khuyến nghị của W3C để tài liệu chặt chẽ hơn thì tên thẻ và thuộc tính nên viết bằng chữ thường. KHOA CÔNG NGHỆ THÔNG TIN Trang 6
Bài 2 - Thiết kế trang web với HTML + Mỗi thẻ có thể không có hoặc có nhiều thuộc tính, các thuộc tính viết cách nhau ít nhất một khoảng trắng. Thuộc tính được nhập ngay trước ngoặc đóng „>‟ của thẻ mở. Giá trị thuộc tính của thẻ đặt trong dấu nháy đơn hoặc nháy kép. + Trình duyệt sẽ bỏ qua các khoảng trắng thừa và các dấu ngắt dòng, xuống dòng trong phần nội dung. . Phân loại thẻ - Thẻ chứa: gồm thẻ mở và thẻ đóng. Dữ liệu bị tác động nằm giữa thẻ mở và thẻ đóng. nội dung - Thẻ rỗng: chỉ gồm một thẻ mở, không có nội dung. Có thể có thuộc tính. - Các thẻ có thể lồng vào nhau, theo nguyên tắc thẻ nào mở trước thì thẻ đó đóng sau. nội dung Ví dụ: - Thẻ chứa chữ in đậm Mức chữ ở tiêu đề 3 - Thẻ rỗng - Thẻ lồng Thiết kế Web 2.1.3. Tạo trang web . Cấu trúc tài liệu HTML Cấu trúc cơ bản của tài liệu HTML thông thường gồm 3 phần: - - : Phần khai tất cả thông tin của tài liệu HTML như khai báo về meta, title, css, javascript. KHOA CÔNG NGHỆ THÔNG TIN Trang 7
Bài 2 - Thiết kế trang web với HTML - : Phần chứa nội dung của trang web, tất cả nội dung mà người dùng nhìn thấy sẽ được khai báo ở đây. Hình 2.1. Cấu trúc của tài liệu html * Lưu ý: - Một số ký tự đặc biệt trong HTML Hình 2.2. Các ký tự đặc biệt trong HTML - Phần chú thích trong trang HTML sẽ không được hiển thị trên trình duyệt. Cú pháp: . Tạo trang web Để tạo tài liệu html, chỉ cần sử dụng một chương trình soạn thảo văn bản để soạn thảo và sau đó lưu lại với tên tập tin có phần mở rộng .htm hoặc .html. Có nhiều chương trình soạn thảo tài liệu html từ đơn giản đến chuyên nghiệp như: Notepad, Notepad++, EditPlus, FrontPage, Dreamweaver, Ví dụ 1: Tạo trang web bằng Notepad++ - Mở Notepad++ và nhập vào nội dung sau: KHOA CÔNG NGHỆ THÔNG TIN Trang 8
Bài 2 - Thiết kế trang web với HTML Hình 2.3. Trình soạn thảo Notepad++ - Lưu tập tin: chọn File Save As + Save in: chọn thư mục lưu trữ + File name: nhập tên file (vidu1) + Save As Type: chọn Hyper Text Markup Language file Save Hình 2.4. Hộp thoại Save As - Hiển thị trang web trên trình duyệt: + Chọn Run chọn trình duyệt muốn hiển thị trang web Hình 2.5. Menu lệnh Run KHOA CÔNG NGHỆ THÔNG TIN Trang 9
Bài 2 - Thiết kế trang web với HTML + Hoặc nhấp đúp chuột lên tập tin (vidu.html) hoặc nhấp phải chuột lên tên tập tin (vidu.html) chọn Open with chọn tên trình duyệt Hình 2.6. Kết quả ví dụ 1 2.1.4. Các thẻ định cấu trúc tài liệu HTML Cấu trúc cơ bản của tài liệu HTML gồm: : phần khai báo chuẩn của HTML5 : phần khai báo tài liệu HTML : phần mở đầu của tài liệu HTML : phần chứa nội dung của trang web, phần sẽ được hiển thị trên trình duyệt. . Thẻ Thẻ dùng để thông báo cho trình duyệt biết đây là 1 tài liệu HTML. Toàn bộ nội dung của tài liệu HTML được đặt giữa cặp thẻ này. Cú pháp: Toàn bộ nội dung của tài liệu HTML Trình duyệt sẽ xem các tài liệu không sử dụng thẻ như những tập tin văn bản bình thường. . Thẻ Thẻ được dùng để xác định phần mở đầu cho tài liệu. Cú pháp: KHOA CÔNG NGHỆ THÔNG TIN Trang 10
Bài 2 - Thiết kế trang web với HTML Phần mở đầu của tài liệu HTML Phần mở đầu giống như phần giới thiệu, các trình duyệt web sử dụng phần mở đầu này để cung cấp các thông tin như tiêu đề của tài liệu, các tập tin hỗ trợ, các khai báo, Thẻ có thể chứa các thẻ: , , , , , , . Thẻ Dùng để thiết lập tiêu đề của trang web, dòng tiêu đề này sẽ hiển thị tại thanh tiêu đề của cửa sổ trình duyệt. Thẻ phải được đặt trong cặp thẻ . - Cú pháp: Tiêu đề của tài liệu HTML . Thẻ Dùng để xác định bộ ký tự dùng cho trang web (charset), thông tin về trang web (description), tác giả (author), từ khóa tìm kiếm (keywords) và thông tin dữ liệu khác. Thẻ phải được đặt trong cặp thẻ . - Cú pháp: Ví dụ 2: . Thẻ Thẻ được sử dụng để xác định phần nội dung chính của tài liệu - phần thân của tài liệu. KHOA CÔNG NGHỆ THÔNG TIN Trang 11
Bài 2 - Thiết kế trang web với HTML - Cú pháp: Phần nội dung của tài liệu HTML Ví dụ 3: Welcome to HTML My first HTML document 2.2. LÀM VIỆC VỚI VĂN BẢN TRÊN TRANG WEB Các thẻ dùng định dạng ký tự như: , , , , , , dùng phổ biến trong html4, tuy nhiên khuyến cáo sử dụng css để thay thế. 2.2.1. Thẻ Thẻ được sử dụng để định nghĩa văn bản in đậm. - Cú pháp: Nội dung văn bản 2.2.2. Thẻ Thẻ được sử dụng để định nghĩa văn bản quan trọng. - Cú pháp: Nội dung văn bản 2.2.3. Thẻ Thẻ được sử dụng để định nghĩa văn bản in nghiêng. - Cú pháp: Nội dung văn bản KHOA CÔNG NGHỆ THÔNG TIN Trang 12
Bài 2 - Thiết kế trang web với HTML 2.2.4. Thẻ Thẻ được sử dụng để định nghĩa văn bản nhấn mạnh. - Cú pháp: Nội dung văn bản 2.2.5. Thẻ Thẻ được sử dụng để định nghĩa văn bản có đường gạch chân. - Cú pháp: Nội dung văn bản 2.2.6. Thẻ Thẻ được sử dụng để định nghĩa chữ chỉ số trên. - Cú pháp: Nội dung văn bản 2.2.7. Thẻ Thẻ được sử dụng để định nghĩa chữ chỉ số dưới. - Cú pháp: Nội dung văn bản Ví dụ 4: KHOA CÔNG NGHỆ THÔNG TIN Trang 13
Bài 2 - Thiết kế trang web với HTML Hiển thị trên trình duyệt: Hình 2.7. Kết quả ví dụ 4 2.2.8. Thẻ Thẻ được dùng khi muốn hiển thị đúng dạng văn bản đã soạn thảo (không bỏ qua khoảng trắng, ngắt dòng). - Cú pháp: Văn bản đã được định dạng Ví dụ 5: Hiển thị trên trình duyệt: Hình 2.8. Kết quả ví dụ 5 2.2.9. Thẻ Thẻ được sử dụng để định nghĩa một đoạn văn bản. Thẻ tự động tạo một khoảng trắng trước và sau nó, khoảng trắng này tùy trình duyệt sẽ khác nhau. KHOA CÔNG NGHỆ THÔNG TIN Trang 14
Bài 2 - Thiết kế trang web với HTML - Cú pháp: Nội dung đoạn văn bản 2.2.10. Thẻ đến Dùng định nghĩa tiêu đề cho HTML. Thẻ định mức tiêu đề cấp cao nhất và giảm dần đến cấp thấp nhất - Cú pháp: nội dung Định dạng tiêu đề cấp 1 nội dung Định dạng tiêu đề cấp 2 nội dung Định dạng tiêu đề cấp 3 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 Ví dụ 6: Hiển thị trên trình duyệt: Hình 2.9. Kết quả ví dụ 6 KHOA CÔNG NGHỆ THÔNG TIN Trang 15
Bài 2 - Thiết kế trang web với HTML 2.2.11. Thẻ Thẻ dùng chuyển sang dòng mới trong cùng đoạn văn. Thẻ là thẻ rỗng. - Cú pháp: Ví dụ 7: Đâ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 - Cú pháp: 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ẻ sử dụng để tạo danh sách không có thứ tự. Ký hiệu đầu dòng đứ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. Thẻ được sử dụng kèm với thẻ . KHOA CÔNG NGHỆ THÔNG TIN Trang 16
Bài 2 - Thiết kế trang web với HTML - Cú pháp: Mục thứ nhất Mục thứ hai Ví dụ 8: Coffee Tea Milk 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ẻ sử dụng để tạo danh sách có thứ tự. Ký hiệu đầu dòng đứng trước mỗi mục trong danh sách mặc định là một con số. Thẻ được sử dụng kèm với thẻ . - Cú pháp: Mục thứ nhất Mục thứ hai Mục thứ ba KHOA CÔNG NGHỆ THÔNG TIN Trang 17
Bài 2 - Thiết kế trang web với HTML Ví dụ 9: Coffee Tea Milk 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 KHOA CÔNG NGHỆ THÔNG TIN Trang 18
Bài 2 - Thiết kế trang web với HTML 2.4. LÀM VIỆC VỚI CÁC ĐỐI TƢỢNG MEDIA TRÊN TRANG WEB 2.4.1. Thẻ 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 - Cú pháp: - Thuộc tính: Bảng 2.1. Các thuộc tính thẻ Thuộc tính Giá trị Ví dụ Mô tả Xác định văn bản thay thế alt Text alt="logo CTy" khi hình ảnh không hiển thị Địa chỉ của tập tin ảnh cần src URL src="img/ logo.gif" chèn vào tài liệu pixels Xác định chiều cao của hình height height="50px" % ảnh pixels Xác định chiều rộng của width width="50px" % hình ảnh Văn bản hiển thị khi di title Text title = "trang chủ" chuyển chuột trên hình ảnh. Ví dụ 11: chèn hình html5.gif vào tập tin index.html. Hình html5.gif chứa trong thư mục image và index.html chứa trong thư mục html, thư mục image và thư mục html ngang cấp nhau. 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: KHOA CÔNG NGHỆ THÔNG TIN Trang 19
Bài 2 - Thiết kế trang web với HTML 2.4.2. Thẻ 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) - Cú pháp: Dòng thông báo 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ẻ - Thuộc tính: Bảng 2.2. Các thuộc tính thẻ Thuộc tính Giá trị Mô tả autoplay autoplay Âm thanh tự động chạy. controls controls Hiển thị tính năng điều khiển. Hiển thị tính năng lặp lại khi chạy xong loop loop đoạn âm thanh. src URL Xác định đường dẫn tới tập tin âm thanh. Ví dụ 13: 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 KHOA CÔNG NGHỆ THÔNG TIN Trang 20
Bài 2 - Thiết kế trang web với HTML 2.4.3. Thẻ 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) - Cú pháp: Dòng thông báo 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ẻ - Thuộc tính: Bảng 2.3. Các thuộc tính thẻ Thuộc tính Giá trị Mô tả Xác định trạng thái mặc định của âm Audio muted thanh. Xác định trạng thái tự động chạy của Autoplay autoplay 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. Xác định video có được lặp lại hay Loop loop 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. Ví dụ 14: Trình duyệt bạn sử dụng không hỗ trợ thẻ video KHOA CÔNG NGHỆ THÔNG TIN Trang 21
Bài 2 - Thiết kế trang web với HTML 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ẻ . - Cú pháp: Dòng thông báo 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ẻ - Thuộc tính: Bảng 2.4. Các thuộc tính thẻ Thuộc tính Giá trị Mô tả data URL Xác định địa chỉ của đối tượng chèn. width pixel Xác định chiều rộng của đối tượng chèn. height pixel Xác định chiều cao của đối tượng chèn. KHOA CÔNG NGHỆ THÔNG TIN Trang 22
Bài 2 - Thiết kế trang web với HTML 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 2.5. 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. Một liên kết là sự kết nối đến tài liệu hay tập tin khác hoặc đến một phần khác trong cùng 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 tài liệu khác. - 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 so với mạng Internet, bao gồm một chuỗi đầy đủ giao thức, vị trí mạng, đường dẫn và tên tập tin. Ví dụ: - Địa chỉ tương đối : Là vị trí tương đối so với trang web hiện hành đang 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: Bảng 2.5. Ký hiệu đƣờng dẫn Ký hiệu Ý nghĩa / Trở về thư mục gốc của website ./ Thư mục hiện tại của trang web sử dụng link (mặc định) / Quay ra thư mục cha / đi ngược lại 1 cấp thư mục KHOA CÔNG NGHỆ THÔNG TIN Trang 23
Bài 2 - Thiết kế trang web với HTML Mặc định trong tất cả các trình duyệt các vị trí có liên kết đều được gạch chân, liên kết chưa thăm có màu xanh, liên kết đã thăm có màu tím và liên kết đang nhấn chọn sẽ có màu đỏ. 2.5.1. Tạo liên kết đến tài liệu khác - Cú pháp: - Thuộc tính: Bảng 2.6. Các thuộc tính thẻ KHOA CÔNG NGHỆ THÔNG TIN Trang 24
Bài 2 - Thiết kế trang web với HTML 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 Ví dụ 19: tạo liên kết đến trang web ở máy chủ khác Ví dụ 20: tạo liên kết đến email Ví dụ 21: mở (hay download) một file (file word, excel, pdf, image, ) 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” 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 Chương 1 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 Chương 1 KHOA CÔNG NGHỆ THÔNG TIN Trang 25
Bài 2 - Thiết kế trang web với HTML 2.6. LÀM VIỆC VỚI BẢNG BIỂU TRÊN TRANG WEB 2.6.1. Tạo bảng đơn giản Các thẻ thường dùng trong tạo bảng: Bảng 2.7. Các thẻ tạo bảng Tên thẻ Ý nghĩa Đị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 Nội dung của ô 1 Nội dung của ô 2 KHOA CÔNG NGHỆ THÔNG TIN Trang 26
Bài 2 - Thiết kế trang web với HTML Ví dụ 24: 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). KHOA CÔNG NGHỆ THÔNG TIN Trang 27
Bài 2 - Thiết kế trang web với HTML 2.6.2. Tạo bảng có gộp ô 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: Ví dụ 25: KHOA CÔNG NGHỆ THÔNG TIN Trang 28
Bài 2 - Thiết kế trang web với HTML Hiển thị trên trình duyệt: Hình 2.17. Kết quả ví dụ 25 2.7. LÀM VIỆC VỚI BIỂU MẪU TRÊN TRANG WEB 2.7.1. Khái quát về Form 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 - KHOA CÔNG NGHỆ THÔNG TIN Trang 29
Bài 2 - Thiết kế trang web với HTML 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 gọi là các điều khiển. Các điều khiển có thể là hộp văn bản, hộp danh sách lựa chọn, nút bấm, nút chọn Hình 2.18. Ví dụ form 2.7.2. Thẻ - 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ú pháp: Các thành phần điều khiển của form - Thuộc tính: KHOA CÔNG NGHỆ THÔNG TIN Trang 30
Bài 2 - Thiết kế trang web với HTML Bảng 2.8. Các thuộc tính thẻ Thuộc tính Giá trị Ví dụ Mô tả Địa chỉ sẽ gửi dữ liệu tới khi form được submit (bấm nút submit) Action URL action="confirm.php" Thông thường là địa chỉ một trang web nằm ở phía máy chủ. Chỉ định cụ thể bộ dữ accept- accept-charset="ISO- liệu (character-sets) mà charset charset 8859-1" máy chủ có thể xử lý cho form dữ liệu. application/ x-www- form- Chỉ định cụ thể dạng dữ enctype urlencoded enctype="text/plain" liệu gì trước khi gửi lên multipart/ máy chủ. form-data text/plain Chỉ định phương thức gửi dữ liệu method =get: truyền các dữ liệu đơn giản, không cần bảo mật và nhỏ. Các thông tin không được mã hóa nên nhanh hơn get method method="post" post post method =post: truyền các dữ liệu có kích thước lớn, phức tạp. Các thông tin được mã hóa trước khi gởi. Mặc định là method =get KHOA CÔNG NGHỆ THÔNG TIN Trang 31
Bài 2 - Thiết kế trang web với HTML name name name="login" Chỉ định tên cho form. _blank Chỉ định cửa sổ sẽ hiển _self thị kết quả sau khi gửi target target="_blank" _parent dữ liệu từ form đến máy chủ. _top 2.7.3. Thẻ 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, - Cú pháp: - Thuộc tính: Bảng 2.9. Các thuộc tính thẻ Thuộc tính Giá trị Ví dụ Mô tả Xác định nhãn cho hình của của điều alt Text alt="Đây là alt" khiển (chỉ cho type="image") xác định số ký tự tối đa có thể nhập vào thành phần điều khiển maxlength n maxlength="50" (sử dụng cho type="text", type="password") Xác định tên cho thành phần điều khiển name name name="inputName" (với type="radio" thuộc tính name phải có cùng giá trị ở tất cả KHOA CÔNG NGHỆ THÔNG TIN Trang 32
Bài 2 - Thiết kế trang web với HTML các thẻ input trong cùng nhóm điều khiển) Xác định chiều dài thành phần điều khiển. Đối với type="text", size n size="30" type="password" kích thước tính theo số ký tự, đối với các loại khác tính bằng px Hiển thị đường dẫn src="img/ src URL của hình dùng như nút btn_name.gif" submit. Điều khiển là nút button type="button" nhấn Điều khiển là hộp lựa checkbox type="checkbox" chọn cho phép chọn cùng lúc nhiều giá trị Điều khiển là hộp file type="file" chọn file hidden type="hidden" Điều khiển dạng ẩn. Điều khiển là nút image type="image" type nhấn dạng hình. Điều khiển là hộp password type="password" nhập mật khẩu Điều khiển là hộp lựa chọn chỉ cho phép radio type="radio" chọn một trong nhiều giá trị Điều khiển là nút reset type="reset" nhấn để trả về giá trị mặc định của các KHOA CÔNG NGHỆ THÔNG TIN Trang 33
Bài 2 - Thiết kế trang web với HTML trường trên form Điều khiển là nút submit type="submit" nhấn để gửi dữ liệu lên Server Điều khiển là hộp text type="text" nhập văn bản trên một dòng Điều khiển là một color type="color" bảng màu Điều khiển là một date type="date" bảng ngày tháng Điều khiển là hộp email type="email" nhập định dạng email Điều khiển là hộp tel type="tel" nhập định dạng số điện thoại Điều khiển là hộp search type="search" nhập dạng tìm kiếm value giá trị value="nam" Giá trị của điều khiển placeholder= “dòng Thêm dòng gợi ý cho placeholder text gợi ý” điều khiển nhập pixels Xác định chiều rộng width width="100px" % của điều khiển Xác định chiều cao pixels của điều khiển (chỉ sử height height="50px" % dụng cho type="image") Xác định một trường nhập đang được chọn checked checked checked (sử dụng cho type="checkbox" hay type="radio") KHOA CÔNG NGHỆ THÔNG TIN Trang 34
Bài 2 - Thiết kế trang web với HTML Xác định trường nhập chỉ được đọc (sử dụng readonly readonly readonly cho type="text", type="password") Xác định trường nhập disabled disabled disabled không hiển thị trước khi tải trang. Xác định giá trị đầu vào của trường nhập (một pattern hay một Giá trị pattern pattern="[a-z]" định dạng) (sử dụng định dạng cho type là text, date, search, url, tel, email, password) Xác định giá trị bắt required required required buộc cho một trường nhập Xác định một trường autofocus autofocus autofocus nhập được "focus" khi tải trang. Xác định một trường on autocomplete autocomplete="on" nhập có kích hoạt tự off động hay không. Ví dụ 26: tạo hộp nhập liệu text và nút submit KHOA CÔNG NGHỆ THÔNG TIN Trang 35
Bài 2 - Thiết kế trang web với HTML 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ẻ . - Cú pháp: tên mục chọn thứ nhất tên mục chọn thứ hai - Thuộc tính: Bảng 2.10. Các thuộc tính thẻ Thuộc tính Giá trị Ví dụ Mô tả Cho phép chọn nhiều multiple multiple multiple="multiple" mục lựa chọn cùng lúc. Xác định tên cho danh name name name="quequan" sách lựa chọn. Xác định số dòng trong size Số size="5" danh sách lựa chọn được hiển thị. KHOA CÔNG NGHỆ THÔNG TIN Trang 36
Bài 2 - Thiết kế trang web với HTML Bảng 2.11. Các thuộc tính thẻ Thuộc tính Giá trị Ví dụ Mô tả Xác định một mục selected selected selected được chọn mặc định. Xác định giá trị của value Text value="optValue" mục chọn. Ví dụ 27: Hiển thị trên trình duyệt: Hình 2.20. Kết quả ví dụ 27 2.7.5. Thẻ 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. - Cú pháp: KHOA CÔNG NGHỆ THÔNG TIN Trang 37
Bài 2 - Thiết kế trang web với HTML văn bản ban đầu - Thuộc tính: Bảng 2.12. Các thuộc tính thẻ Thuộc tính Giá trị Ví dụ Mô tả Xác định tên cho hộp name name name="gopy" văn bản. Xác định hộp văn bản readonly readonly readonly="readonly" chỉ được đọc. Xác định chiều rộng cols n cols="20" hiển thị của hộp văn bản (tính bằng số ký tự) Xác định số dòng trong rows Số rows="20" hộp văn bản được hiển thị. Ví dụ 28: Hiển thị trên trình duyệt: KHOA CÔNG NGHỆ THÔNG TIN Trang 38
Bài 2 - Thiết kế trang web với HTML 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. - Cú pháp: 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 ( , , ). Ví dụ 29: Hiển thị trên trình duyệt: Hình 2.22. Kết quả ví dụ 29 KHOA CÔNG NGHỆ THÔNG TIN Trang 39
Bài 2 - Thiết kế trang web với HTML 2.7.7. Thẻ 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. - Cú pháp: nội dung nhãn của nhóm Các thành phần điều khiển Ví dụ 30: Hiển thị trên trình duyệt: Hình 2.23. Kết quả ví dụ 30 Ví dụ 31: KHOA CÔNG NGHỆ THÔNG TIN Trang 40
Bài 2 - Thiết kế trang web với HTML KHOA CÔNG NGHỆ THÔNG TIN Trang 41
Bài 2 - Thiết kế trang web với HTML Hiển thị trên trình duyệt: Hình 2.24. Kết quả ví dụ 31 2.8. TẠO BỐ CỤC TRANG Hình 2.25. 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. KHOA CÔNG NGHỆ THÔNG TIN Trang 42
Bài 2 - Thiết kế trang web với HTML 2.8.1. Thẻ 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) - Cú pháp: Nội dung phần đầu trang Ví dụ 32: 2.8.2. Thẻ Thẻ được sử dụng để định nghĩa phần cuối (footer) của trang. - Cú pháp: Nội dung phần đầu trang 2.8.3. Thẻ Thẻ được sử dụng để định nghĩa phần nội dung chính hoặc quan trọng của tài liệu. Thẻ chỉ được sử dụng một lần trên mỗi trang và không thể được sử dụng như là phần tử con của các phần tử , , , , . - Cú pháp: Nội dung phần điều hướng 2.8.4. Thẻ Thẻ được sử dụng để định nghĩa phần điều hướng (navigation) của trang. - Cú pháp: Nội dung phần điều hướng KHOA CÔNG NGHỆ THÔNG TIN Trang 43
Bài 2 - Thiết kế trang web với HTML Ví dụ 33: 2.8.5. Thẻ Thẻ được sử dụng để định nghĩa một khối cho trang web. - Cú pháp: Nội dung khối 2.8.6. Thẻ Thẻ được sử dụng để định nghĩa nội dung bài viết độc lập của trang. - Cú pháp: Nội dung bài viết 2.8.7. Thẻ Thẻ được sử dụng để định nghĩa phần bên cạnh nội dung (như sidebar) của trang. - Cú pháp: Nội dung aside 2.8.8. Thẻ Thẻ dùng định nghĩa một khu vực trong tài liệu HTML. Thường được dùng để nhóm các thành phần nội dung thành một khối để định dạng bằng css. Cú pháp: nội dung định dạng KHOA CÔNG NGHỆ THÔNG TIN Trang 44
Bài 2 - Thiết kế trang web với HTML Ví dụ 34: Đây là tiêu đề Đây là đoạn văn. 2.8.9. Thẻ Tag dùng định nghĩa một khu vực trong tài liệu HTML. Thường được dùng để nhóm các thành phần nội dung inline thành một khối để định dạng bằng css. - Cú pháp: nội dung định dạng Ví dụ 35: Đây là đoạn text có sử dụng thẻ span để định dạng 2.9. BÀI TẬP ÁP DỤNG 1. Thiết kế trang web có nội dung như mẫu sau: KHOA CÔNG NGHỆ THÔNG TIN Trang 45
Bài 2 - Thiết kế trang web với HTML 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ị: KHOA CÔNG NGHỆ THÔNG TIN Trang 46
Bài 3 - Thiết kế trang web với Dreamweaver BÀI 3 - THIẾT KẾ TRANG WEB VỚI DREAMWEAVER Giới thiệu: Trong bài học này sẽ giới thiệu cho người học một trình soạn thảo ngôn ngữ đánh dấu siêu văn bản (HTML) chuyên nghiệp Adobe Dreamweaver. Nó cung cấp sẵn một bộ công cụ cho phép thiết kế, viết mã, và phát triển các website, các trang web và các ứng dụng web mạnh mẽ. Mục tiêu: - Vận dụng được Dreamweaver để tạo và định dạng các đối tượng trên trang web - Tạo và quản lý được website bằng Dreamweaver 3.1. TẠO VÀ QUẢN LÝ WEBSITE 3.1.1. Tạo một 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 Save KHOA CÔNG NGHỆ THÔNG TIN Trang 47
Bài 3 - Thiết kế trang web với Dreamweaver . 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 New file Hình 3.2. Cửa sổ Files - 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 KHOA CÔNG NGHỆ THÔNG TIN Trang 48
Bài 3 - Thiết kế trang web với Dreamweaver Hình 3.4. Hộp thoại Site setup – thẻ Server Chọn nút (+) để thêm một server mới Hình 3.5. Hộp thoại Basic KHOA CÔNG NGHỆ THÔNG TIN Trang 49
Bài 3 - Thiết kế trang web với Dreamweaver + Thẻ Basic  Server Name: nhập tên server  Connect using: chọn phương thức kết nối  Address: địa chỉ server  Username: tên đăng nhập  Password: mật khẩu  Root Directory: thư mục gốc  Web URL: địa chỉ trang web + Thẻ Advanced Automatically upload files to server: tự động upload các file lên web server mỗi khi trang được lưu. Save . Đƣ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 3.1.2. Quản lý website - 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 KHOA CÔNG NGHỆ THÔNG TIN Trang 50
Bài 3 - Thiết kế trang web với Dreamweaver 3.1.3. Đƣa website lên internet Hình 3.7. Hộp thoại Files - Đư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 KHOA CÔNG NGHỆ THÔNG TIN Trang 51
Bài 3 - Thiết kế trang web với Dreamweaver - 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 Hình 3.10. Cửa sổ Validation . 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 KHOA CÔNG NGHỆ THÔNG TIN Trang 52
Bài 3 - Thiết kế trang web với Dreamweaver * Quy trình xuất bản một website: - Thiết kế website - Đăng ký Hosting - Đăng ký tên miền - Đưa website lên Hosting - 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 Document Toolbar Property Inspector Docking Channel Hình 3.12. 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ị. KHOA CÔNG NGHỆ THÔNG TIN Trang 53
Bài 3 - Thiết kế trang web với Dreamweaver - 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 . Lưu trang web - 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 Save . Mở trang web - 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 - Từ menu File Close - Đó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 KHOA CÔNG NGHỆ THÔNG TIN Trang 54
Bài 3 - Thiết kế trang web với Dreamweaver 3.2.3. Làm việc với văn bản Tạo số thứ tự Tạo hoa thị Kiểu trình bày đoạn: sử dụng class Giảm/ tăng khoảng cách với lề Headingl, Heading2, sử dụng ID Tạo liên kết Cách mở trang web liên kết Hình 3.14. Cửa sổ Properties . 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 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 đề . Canh lề đoạn - 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 KHOA CÔNG NGHỆ THÔNG TIN Trang 55
Bài 3 - Thiết kế trang web với Dreamweaver Hình 3.16. Lệnh canh lề . 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: + Bold: chữ in đậm + Italic: chữ nghiêng + Underline: chữ gạch chân KHOA CÔNG NGHỆ THÔNG TIN Trang 56
Bài 3 - Thiết kế trang web với Dreamweaver Hình 3.18. Lệnh định dạnh chữ 3.2.4. Làm việc với hình ảnh . Chèn hì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: KHOA CÔNG NGHỆ THÔNG TIN Trang 57
Bài 3 - Thiết kế trang web với Dreamweaver Hình 3.20. Cửa sổ Properties + W: chiều rộng của hình + H: chiều cao của hình. + 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 3.2.5. Làm việc với multimedia . Chèn file Flash - 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 . Chèn file âm thanh - 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 3.2.6. Liên kết trang . Tạo liên kết ngoài - 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 KHOA CÔNG NGHỆ THÔNG TIN Trang 58
Bài 3 - Thiết kế trang web với Dreamweaver - 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 Hình 3.21. Cửa sổ Properties . 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 (văn bản hoặc hình ảnh) tạo liên kết 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) trong ô Link trên thanh Properties. 3.2.7. Làm việc với bảng . Tạo bảng - 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 KHOA CÔNG NGHỆ THÔNG TIN Trang 59
Bài 3 - Thiết kế trang web với Dreamweaver Hình 3.22. Hộp thoại Table . 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 Hình 3.23. Cửa sổ Properties + Rows: Số dòng + Cols: Số cột + W: Chiều rộng của bảng + 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 KHOA CÔNG NGHỆ THÔNG TIN Trang 60
Bài 3 - Thiết kế trang web với Dreamweaver . 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 Hình 3.24. 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. + W: Độ rộng của ô + H: Độ cao của ô + No wrap: Cho/ không cho text tự động xuống dòng trong ô + Header Chuyển ô thường thành ô tiêu đề. + Bg Màu nền cho ô . Gộp ô - Chọn các ô muốn gộp chọn nút Merges selected cells trong cửa sổ Properties . Tách ô - Chọn ô muốn tách chọn nút Splits cell trong cửa sổ Properties KHOA CÔNG NGHỆ THÔNG TIN Trang 61
Bài 3 - Thiết kế trang web với Dreamweaver + 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 . Chèn thêm cột/ hàng - Đặ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 KHOA CÔNG NGHỆ THÔNG TIN Trang 62
Bài 3 - Thiết kế trang web với Dreamweaver 3.2.8. Làm việc với form Form dùng để tạo các biểu mẫu thu thập thông tin của người xem trang web. Một Form có thể chứa nhiều thành phần như TextField, CheckBox, RadioButton. ComboBox, ListBox, TextAera . 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 Hình 3.27. Lệnh tạo Form . Chèn TextField: - Trong khung cửa sổ Design, đặt điểm chèn trong form - Chọn menu lệnh Insert Form TextField KHOA CÔNG NGHỆ THÔNG TIN Trang 63
Bài 3 - Thiết kế trang web với Dreamweaver 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 + Style: kiểu gắn nhãn + 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: Hình 3.29. Cửa sổ Properties + TextField: tên của TextField + 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 KHOA CÔNG NGHỆ THÔNG TIN Trang 64
Bài 3 - Thiết kế trang web với Dreamweaver + Int val: giá trị ban đầu của TextField + Type: kiể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. . Chèn Radio Button: 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: Hình 3.30. 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 . Chèn CheckBox: 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: KHOA CÔNG NGHỆ THÔNG TIN Trang 65
Bài 3 - Thiết kế trang web với Dreamweaver - Chọn CheckBox muốn hiệu chỉnh chọn các thuộc tính trong cửa sổ Properties: Hình 3.31. 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 . Chèn ComboBox hay ListBox: - 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) Hình 3.32. Cửa sổ Properties + Chọn nút List Values để nhập các mục trong List/Menu: KHOA CÔNG NGHỆ THÔNG TIN Trang 66
Bài 3 - Thiết kế trang web với Dreamweaver 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 . Chèn TextArea: 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 Hình 3.34. 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 KHOA CÔNG NGHỆ THÔNG TIN Trang 67
Bài 3 - Thiết kế trang web với Dreamweaver + Type: chọn loại phần tử input . Chèn Button: - 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 Hình 3.35. 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 3.2.9. CSS . Tạo 1 luật CSS - 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 KHOA CÔNG NGHỆ THÔNG TIN Trang 68
Bài 3 - Thiết kế trang web với Dreamweaver 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 : chọn tên thẻ (trường hợp chọn Selector Type là Tag) hoặc nhập tên class (trường hợp chọn Selector Type là Class), tên class phải bắt đầu bằng dấu chấm (vd: .tieude); hoặc nhập tên ID (trường hợp chọn Selector Type là ID), tên ID phải bắt đầu bằng dấu # (vd: #footer). KHOA CÔNG NGHỆ THÔNG TIN Trang 69
Bài 3 - Thiết kế trang web với Dreamweaver + 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 KHOA CÔNG NGHỆ THÔNG TIN Trang 70
Bài 3 - Thiết kế trang web với Dreamweaver - Font-family: chọn bộ font - Font-size: cỡ chữ - 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 - Color: màu chữ • Background: các thuộc tính định dạng nền Hình 3.41. Hộp thoại Background  Background-color: màu nền  Background-image: ảnh 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 KHOA CÔNG NGHỆ THÔNG TIN Trang 71
Bài 3 - Thiết kế trang web với Dreamweaver • Block: các thuộc tính định dạng khối Hình 3.42. Hộp thoại Block  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 KHOA CÔNG NGHỆ THÔNG TIN Trang 72
Bài 3 - Thiết kế trang web với Dreamweaver Hình 3.43. Hộp thoại Box • Border: các thuộc tính định dạng đường viền Hình 3.44. Hộp thoại Border  Style: kiểu đường viền  Width: độ dày đường viền  Color: màu đường viền KHOA CÔNG NGHỆ THÔNG TIN Trang 73
Bài 3 - Thiết kế trang web với Dreamweaver • List: các thuộc tính định dạng danh sách Hình 3.45. Hộp thoại List  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í Hình 3.46. Hộp thoại Positioning KHOA CÔNG NGHỆ THÔNG TIN Trang 74
Bài 3 - Thiết kế trang web với Dreamweaver  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 ID . Hiệu chỉnh luật CSS - Trong cửa sổ CSS Styles chọn tên luật CSS muốn hiệu chỉnh chọn nút Edit Rule mở hộp thoại CSS Rule definition cho phép hiệu chỉnh các thuộc tính của luật CSS. . 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 KHOA CÔNG NGHỆ THÔNG TIN Trang 75
Bài 3 - Thiết kế trang web với Dreamweaver Add as: chọn Link . Xóa luật CSS: - Trong cửa sổ CSS Styles chọn tên luật CSS muốn xóa chọn nút Delete CSS Rule 3.3. 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: KHOA CÔNG NGHỆ THÔNG TIN Trang 76
Bài 4 - Định dạng trang web với CSS BÀI 4 - ĐỊNH DẠNG TRANG WEB VỚI CSS Giới thiệu: Trong bài học này sẽ cung cấp cho người học các kiến thức cơ bản về css để định dạng trang web, làm cho trang web đẹp hơn, sinh động và hấp dẫn hơn. Mục tiêu: - Trình bày được cú pháp và các thuộc tính thường dùng trong CSS để định dạng trang web. - Vận dụng được CSS để định dạng các đối tượng trên trang web. 4.1. TẠO CSS CHO TRANG WEB 4.1.1. Khái niệm 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 hạn chế tối 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 ra khỏi HTML. Điều này khiến cho mã nguồn của trang Web được gọn gàng hơn đồng thời cũng giúp cho việc cập nhật nội dung trang web dễ dàng hơn. - CSS tạo ra các kiểu dáng có thể áp dụng cho nhiều trang Web, tránh phải lặp lại việc định dạng cho các trang Web giống nhau. giúp tiết kiệm được nhiều thời gian và công sức trong 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. 4.1.2. Cú pháp CSS 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. KHOA CÔNG NGHỆ THÔNG TIN Trang 77
Bài 4 - Định dạng trang web với CSS - Khai báo: bao gồm thuộc tính quy định cách trình bày (property) và giá trị thuộc tính (value) viết cách nhau bằng dấu “:”. Phần khai báo phải được đặt trong cặp ngoặc { } Ví dụ 1: khai báo bộ chọn thuộc tính giá trị thuộc tính - Có thể dùng nhiều khai báo cho bộ chọn, mỗi một khai báo phải được viết cách nhau bằng dấu chấm phẩy “;”. Mỗi một khai báo nên để trên một dòng để dễ đọc và dễ bảo trì. - Để ghi chú trong CSS, sử dụng dấu /* */ /* ghi chú */ Ví dụ 2: h1 { background: red;/* màu nền:đỏ */ color: blue; /* màu chữ:xanh */ } * Cách viết bộ chọn: 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 áp dụng cho nội dung * *{color:blue;} tất cả các thẻ html trong tài liệu web p{color:blue;} Định dạng áp dụng cho nội dung thẻ01 tất cả các thẻ trong tài liệu web Định dạng áp dụng cho nội dung tất cả các thẻ nằm bên thẻ01 thẻ02 div p{color:blue;} trong thẻ trong tài liệu web KHOA CÔNG NGHỆ THÔNG TIN Trang 78
Bài 4 - Định dạng trang web với CSS Định dạng áp dụng cho nội dung thẻ01,thẻ02 div,p{color:blue;} tất cả các thẻ và trong tài liệu web Định dạng áp dụng cho nội dung tất cả các thẻ được đặt kế thẻ01+thẻ02 div+p{color:blue;} và sau thẻ trong tài liệu web Định dạng áp dụng cho nội dung thẻ01>thẻ02 div>p{color:blue;} tất cả các thẻ có thẻ cha là trong tài liệu web Định dạng áp dụng cho nội dung .class .tieude{color:blue;} tất cả các thẻ có cùng tên class trong tài liệu web Định dạng áp dụng cho nội dung #id #footer{color:blue;} tất cả các thẻ có tên id trong tài liệu web Định dạng áp dụng cho nội dung thẻ01~thẻ02 ul~p{color:blue;} tất cả các thẻ khi có ở trước ul li :first-child{ Định dạng áp dụng cho phần tử :first-child color:blue;} đầu tiên trong danh sách ul li :last-child{ Định dạng áp dụng cho phần tử :last-child color:blue;} cuối cùng trong danh sách ul li:nth-child(3n) { color:blue;} Định dạng áp dụng cho phần tử có :nth-child điều kiện thứ tự cố định trong danh /* (3n): các phần tử chọn sẽ là 3x1, 3x2, sách 3x3, */ 4.1.3. Đơn vị đo trong CSS KHOA CÔNG NGHỆ THÔNG TIN Trang 79
Bài 4 - Định dạng trang web với CSS Bảng 4.2. Bảng đơn vị đo Đơn vị Mô tả % Phần trăm in Inch (1 inch = 2.54 cm) cm Centimeter mm Millimeter em 1 em ~ kích thước font hiện hành pt Point (1 pt = 1/72 inch) pc Pica (1 pc = 12 pt) px Pixels (điểm ảnh trên màn hình máy tính) 4.1.4. Phân loại CSS 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. Nếu một số thuộc tính được thiết lập cho cùng một bộ chọn với các chuẩn định dạng khác nhau (sử dụng loại CSS khác nhau), thì các giá trị sẽ kế thừa từ CSS có độ ưu tiên cao hơn. Như vậy, Inline Style có độ ưu tiên cao nhất, nghĩa là nó sẽ ghi đè lên chuẩn định dạng đặt 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 Internal style sheet dùng để định nghĩa các style dùng chung trong một trang web. Các style này chỉ được áp dụng trên chính trang chứa nó. Các luật CSS phải đặt trong thẻ và đặt trong phần . KHOA CÔNG NGHỆ THÔNG TIN Trang 80
Bài 4 - Định dạng trang web với CSS - Cú pháp: bộ chọn {thuộc tính:giá trị;} Ví dụ 3: Hiển thị trên trình duyệt: Hình 4.1. Kết quả ví dụ 3 KHOA CÔNG NGHỆ THÔNG TIN Trang 81
Bài 4 - Định dạng trang web với CSS 4.1.6. Tạo và sử dụng External style sheet External style sheet được sử dụng khi muốn áp dụng style cho nhiều trang web khác nhau trong cùng một website. Thực chất External style sheet là một tập tin văn bản chứa các luật CSS có phần mở rộng là .CSS. Việc lưu file CSS riêng giúp dễ dàng thay đổi giao diện trang web bằng cách thay đổi thông qua 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: * Lưu ý: - Thẻ này phải được đặt trong thẻ - File CSS không được chứa bất kỳ thẻ HTML nào. Ví dụ 4: Tạo file teststyle.css: Hình 4.2. Nội dung file teststyle.css KHOA CÔNG NGHỆ THÔNG TIN Trang 82
Bài 4 - Định dạng trang web với 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à style được định nghĩa trực tiếp trong thẻ HTML. Inline Style chỉ có tác dụng trong thẻ HTML được khai báo. Để định nghĩa inline style chỉ cần thêm thuộc tính “style” vào thẻ tương ứng. Thuộc tính “style” có thể chứa bất kỳ thuộc tính CSS nào. - Cú pháp: KHOA CÔNG NGHỆ THÔNG TIN Trang 83
Bài 4 - Định dạng trang web với CSS Ví dụ 5: Đâ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 4.1.8. Lớp (Class) Lớp (hay còn gọi là Class) dùng để chỉ một lớp các đối tượng có chung các thuộc tính. Các đối tượng trong cùng một lớp có tính thừa kế lẫn 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. - Cú pháp trong CSS: [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ị} - Cú pháp trong HTML: * Lưu ý: + 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. KHOA CÔNG NGHỆ THÔNG TIN Trang 84
Bài 4 - Định dạng trang web với CSS Ví dụ 6: Hiển thị trên trình duyệt: Hình 4.6. Kết quả ví dụ 6 KHOA CÔNG NGHỆ THÔNG TIN Trang 85
Bài 4 - Định dạng trang web với CSS 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. - Cú pháp trong CSS: [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ị} - Cú pháp trong HTML: * Lưu ý + 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. Ví dụ 7: KHOA CÔNG NGHỆ THÔNG TIN Trang 86
Bài 4 - Định dạng trang web với CSS Hiển thị trên trình duyệt: Hình 4.7. Kết quả ví dụ 7 4.2. ĐỊNH DẠNG VĂN BẢN BẰNG CSS 4.2.1. Thuộc tính font Các thuộc tính font cho phép thay đổi font chữ, cở chữ, kiểu chữ, độ đậm của chữ. . Thuộc tính font-family: 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. - Cú pháp: { font-family: tên font; } Có 2 loại loại font: + Loại tổng quát : serif , sans-serif, monospace + Loại cụ thể : 1 font cụ thể KHOA CÔNG NGHỆ THÔNG TIN Trang 87
Bài 4 - Định dạng trang web với CSS 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 } . Thuộc tính font-style: 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. - Cú pháp: { font-style: giá trị; } Các giá trị: + 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; } . Thuộc tính font-weight: Dùng thiết lập font chữ in đậm cho văn bản. - Cú pháp: { font-weight: giá trị; } Các giá trị: + 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 ; } . Thuộc tính font-size: KHOA CÔNG NGHỆ THÔNG TIN Trang 88
Bài 4 - Định dạng trang web với CSS Dùng thiết lập kích thước font. - Cú pháp: { font-size: giá trị; } 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 ; } . Thuộc tính font-variant: Dùng đổi thành chữ in nhỏ. - Cú pháp: { font-variant:small-caps;} Ví dụ 12: Hiển thị trên trình duyệt: KHOA CÔNG NGHỆ THÔNG TIN Trang 89
Bài 4 - Định dạng trang web với CSS Hình 4.8. Kết quả ví dụ 12 4.2.2. Thuộc tính text Các thuộc tính định dạng ký tự bao gồm: color, text-decoration, text- transform, text-align, text-indent. . Thuộc tính color: Dùng thiết lập màu chữ. - Cú pháp: { color: màu; } 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 - 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 . Thuộc tính text-align: Dùng thiết lập canh chỉnh văn bản trong một thành phần. - Cú pháp: { text-align: giá trị; } Các giá trị: left, right, center, justify . Thuộc tính text-indent: 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ú pháp: { text-indent: giá trị; } Các giá trị: giá trị số hoặc giá trị % . Thuộc tính text-transform: Dùng thay đổi dạng chữ. KHOA CÔNG NGHỆ THÔNG TIN Trang 90
Bài 4 - Định dạng trang web với CSS - Cú pháp: { text-transform: giá trị; } Các giá trị: + capitalize: dạng chữ đầu viết hoa + uppercase: dạng chữ in + lowercase: dạng chữ thường . Thuộc tính text-decoration: Dùng tạo hiệu ứng chữ. - Cú pháp: { text-decoration: giá trị; } Các giá trị: + underline: chữ có đường gạch chân + line-through: chữ có đường gạch xuyên + overline: chữ có đường gạch đầu + none: chữ bình thường . Thuộc tính letter-spacing: Dùng định khoảng cách giữa các ký tự. - Cú pháp: { letter-spacing: giá trị; } . Thuộc tính word-spacing: Dùng định khoảng cách giữa các từ. - Cú pháp: { word-spacing: giá trị; } . Thuộc tính line-height: Dùng thiết lập chiều cao của một dòng. - Cú pháp: { line-height: giá trị; } . Thuộc tính text-shadow: Dùng tạo bóng đổ (shadow) cho text. KHOA CÔNG NGHỆ THÔNG TIN Trang 91
Bài 4 - Định dạng trang web với CSS - Cú pháp: { text-shadow: h-offset v-offset blur color;} Các giá trị: + 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; Ví dụ 13: KHOA CÔNG NGHỆ THÔNG TIN Trang 92
Bài 4 - Định dạng trang web với CSS Hiển thị trên trình duyệt: Hình 4.9. Kết quả ví dụ 13 4.3. ĐỊ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. - Cú pháp: { 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. KHOA CÔNG NGHỆ THÔNG TIN Trang 93
Bài 4 - Định dạng trang web với CSS 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. - Cú pháp: { 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. - Cú pháp: { 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 Ví dụ 14: KHOA CÔNG NGHỆ THÔNG TIN Trang 94
Bài 4 - Định dạng trang web với CSS Hiển thị trên trình duyệt: Hình 4.11. Kết quả ví dụ 14 4.4. ĐỊ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: KHOA CÔNG NGHỆ THÔNG TIN Trang 95
Bài 4 - Định dạng trang web với CSS 4.4.1. Thuộc tính background 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: + background-color: thiết lập màu nền + background-image: thiết lập hình nền + background-repeat: quy định cách lặp lại hình nền + background-position: xác định vị trí hình nền + background-attachment: cố định hình nền . 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ị;} Các giá trị size: + 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. + giá trị 2 thành phần: xác định chiều rộng và chiều cao cho hình nền + contain: chia tỷ lệ hình nền càng lớn càng tốt (chiều rộng và chiều cao phải vừa với vùng chứa). Tùy thuộc vào tỷ lệ của hình nền và KHOA CÔNG NGHỆ THÔNG TIN Trang 96
Bài 4 - Định dạng trang web với CSS vùng chứa mà có thể có một số vùng của vùng chứa không bị ảnh nền che phủ. + cover: chia tỷ lệ hình nền để vùng chứa được bao phủ hoàn toàn bởi hình nền. Một số phần của hình nền có thể không hiển thị trong vùng chứa. - Ví dụ 9: đặt hình banner.png làm hình nền và tự điều chỉnh cho hình bao phủ toàn phần header của trang web header {background-image:url(banner.png); background-size: cover;} . 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;} Các 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: + left top: góc trên bên trái + left center: ở giữa bên trái + left bottom: góc dưới bên trái + right top: góc trên bên phải + right center: ở giữa bên phải + right bottom: góc dưới bên phải + center top: ở giữa bên trên + center center: ở giữa theo cả hai chiều ngang và đứng + center bottom: ở giữa bên dưới KHOA CÔNG NGHỆ THÔNG TIN Trang 97
Bài 4 - Định dạng trang web với CSS 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 Ví dụ 15: đặt hình logo.png làm nền cho trang web, hình lặp lại theo chiều ngang, hiển thị cách lề trái 100px, lề trên 20px 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. KHOA CÔNG NGHỆ THÔNG TIN Trang 98
Bài 4 - Định dạng trang web với CSS - 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: - Cú pháp: {background: ;} - Ví dụ 17: đặt hình logo.png làm nền cho trang web, hình lặp lại theo chiều ngang, hiển thị cách lề trái 100px, lề trên 20px body { background: url(logo.png) repeat-x 100px 20px; } 4.4.2. Thuộc tính border 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: + border-top: đường viền hiển thị bên trên + border-right: đường viền hiển thị bên phải + border-bottom: đường viền hiển thị bên dưới + border-left: đường viền hiển thị bên trái + border: đường viền hiển thị bao quanh 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;} KHOA CÔNG NGHỆ THÔNG TIN Trang 99
Bài 4 - Định dạng trang web với CSS 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: KHOA CÔNG NGHỆ THÔNG TIN Trang 100
Bài 4 - Định dạng trang web với CSS - Cú pháp: { 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, ) - Cú pháp: { 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ử: + border-top-left-radius: bo tròn góc trên bên trái + border-top-right-radius: bo tròn góc trên bên phải + border-bottom-left-radius: bo tròn góc dưới bên trái + border-bottom-right-radius: bo tròn góc dưới bên phải - Ví dụ 20: KHOA CÔNG NGHỆ THÔNG TIN Trang 101
Bài 4 - Định dạng trang web với CSS 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. - Cú pháp: { box-shadow: h-offset v-offset blur color;} - Các giá trị: + 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; 4.4.4. Thuộc tính margin 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: canh lề bên trái cho thành phần + margin-right: canh lề bên phải cho thành phần + margin-top: canh lề bên trên cho thành phần + margin-bottom: canh lề bên dưới cho thành phần Hình 4.16. Các vị trí lề KHOA CÔNG NGHỆ THÔNG TIN Trang 102
Bài 4 - Định dạng trang web với CSS - Cú pháp: { margin-left: giá trị; } { margin-top: giá trị; } { margin-right: giá trị; } { margin-bottom: giá trị; } Ví dụ 21: CSS .canhle{ margin-top:50px; margin-right:40px; margin-bottom:100px; margin-left:120px; } h2 { border:3px dotted black;} Đ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 KHOA CÔNG NGHỆ THÔNG TIN Trang 103
Bài 4 - Định dạng trang web với CSS . Thuộc tính margin rút gọn: - Cú pháp: {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 .canhle{ margin: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. .canhle{ margin:50px 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;} KHOA CÔNG NGHỆ THÔNG TIN Trang 104
Bài 4 - Định dạng trang web với CSS 4.4.5. Thuộc tính padding Các thuộc tính padding dùng thêm vào vùng đệm cho các thành phần HTML. Nói cách khác padding quy định khoảng không gian giữa phần nội dung hiển thị của một thành phần với đường viền của nó. Thuộc tính gồm: + 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 Nội dung border 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ị; } Ví dụ 26: KHOA CÔNG NGHỆ THÔNG TIN Trang 105
Bài 4 - Định dạng trang web với CSS 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: - Cú pháp: {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) KHOA CÔNG NGHỆ THÔNG TIN Trang 106
Bài 4 - Định dạng trang web với CSS Ví dụ 28: tạo class .dem quy định vùng đệm cho 4 bên là 30px .dem { padding: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. .dem { padding:20px 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 . Thuộc tính height: Quy định chiều cao của một thành phần HTML - Cú pháp: { height: giá trị; } . Thuộc tính width: Quy định chiều rộng của một thành phần HTML - Cú pháp: { width: giá trị; } 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ó) KHOA CÔNG NGHỆ THÔNG TIN Trang 107
Bài 4 - Định dạng trang web với CSS * Lưu ý: Khi quy định thuộc tính width, height cho 1 thành phần HTML trong CSS, thực chất chỉ là quy định chiều rộng và chiều cao cho phần nội dung của nó. Muốn có chiều rộng, chiều cao thật của thành phần, phải 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 . Thuộc tính max-height: Quy định chiều cao tối đa của một thành phần HTML - Cú pháp: { max-height: giá trị; } . Thuộc tính max-width: Quy định chiều rộng tối thiểu của một thành phần HTML - Cú pháp: { max-width: giá trị; } . Thuộc tính min-height: Quy định chiều cao tối thiểu của một thành phần HTML - Cú pháp: { min-height: giá trị; } . Thuộc tính min-width: Quy định chiều rộng tối đa của một thành phần HTML - Cú pháp: { min-width: giá trị; } Ví dụ 31: KHOA CÔNG NGHỆ THÔNG TIN Trang 108
Bài 4 - Định dạng trang web với CSS KHOA CÔNG NGHỆ THÔNG TIN Trang 109
Bài 4 - Định dạng trang web với CSS Hiển thị trên trình duyệt: Hình 4.20. Kết quả ví dụ 31 4.5. ĐỊ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. . Thuộc tính float: Dùng quy định văn bản bao quanh hình ảnh - Cú pháp: { float: giá trị; } Các giá trị: + 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ó) . Thuộc tính clear: KHOA CÔNG NGHỆ THÔNG TIN Trang 110
Bài 4 - Định dạng trang web với CSS 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. - Cú pháp: { 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. Ví dụ 32: - Code CSS: - Code HTML: KHOA CÔNG NGHỆ THÔNG TIN Trang 111
Bài 4 - Định dạng trang web với CSS Hiển thị trên trình duyệt: Hình 4.21. Kết quả ví dụ 32 KHOA CÔNG NGHỆ THÔNG TIN Trang 112
Bài 4 - Định dạng trang web với CSS 4.6. 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ó thể được coi là một hộp. Trong CSS, mô hình hộp (box model) được sử dụng khi nói về thiết kế và bố cục trang. 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. Hình 4.22. Mô hình hộp + 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 . Thuộc tính position: KHOA CÔNG NGHỆ THÔNG TIN Trang 113
Bài 4 - Định dạng trang web với CSS 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 - Cú pháp: { position: giá trị; } Các giá trị: + Absolute: Một phần tử có vị trí absolute sẽ được định vị tương đối so với phần tử bao (phần tử cha) nó (phần tử cha phải khai báo relative), nếu không có phần tử bao này sẽ định vị tương đối so với body. Thiết lập các thuộc tính top, left, right, bottom để xác định vị trí của phần tử. + relative: Một phần tử có vị trí relative sẽ được định vị tương đối so với vị trí bình thường của chính nó. Thiết lập các thuộc tính top, left, right, bottom để thay đổi vị trí của phần tử. + fixed: Một phần tử có vị trí fixed sẽ được định vị tương đối so với cửa sổ trình duyệt. Thiết lập các thuộc tính top, left, right, bottom để xác định vị trí của phần tử. . Thuộc tính left: dùng để định vị trí bên trái (left) cho thành phần khi sử dụng thuộc tính position, với khoảng cách được tính từ mép trái ngoài cùng của thành phần bao ngoài. . Thuộc tính top: dùng để định vị trí bên trên (top) cho thành phần khi sử dụng thuộc tính position, với khoảng cách được tính từ mép trên ngoài cùng của thành phần bao ngoài. . Thuộc tính right: dùng để định vị trí bên phải (riht) cho thành phần khi sử dụng thuộc tính position, với khoảng cách được tính từ mép phải ngoài cùng của thành phần bao ngoài. . Thuộc tính bottom: dùng để định vị trí bên dưới (bottom) cho thành phần khi sử dụng thuộc tính position, với khoảng cách được tính từ mép dưới ngoài cùng của thành phần bao ngoài. . Thuộc tính overflow: Dùng quy định cách hiển thị nội dung của một thành phần HTML - Cú pháp: { overflow: giá trị; } KHOA CÔNG NGHỆ THÔNG TIN Trang 114
Bài 4 - Định dạng trang web với CSS Các giá trị: + 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 . Thuộc tính z-index: Dùng được dùng để xếp chồng các phần tử trên cửa sổ trình duyệt - Cú pháp: { z-index: giá trị; } 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 KHOA CÔNG NGHỆ THÔNG TIN Trang 115
Bài 4 - Định dạng trang web với CSS 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 - Cú pháp: { display: giá trị; } Giá trị: + block: phần hiển thị như một khối, khi sử dụng giá trị block thành phần sẽ đứng một hàng độc lập so với thành phần trước và sau nó. + inline: giá trị mặc định. Thành phần sẽ hiển thị trên cùng dòng + inline-block: kết hợp giữa inline và block + 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) • justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly; điều chỉnh vị trí bắt đầu và căn chỉnh các flex-item bên trong flex-container (tùy thuộc vào flex-direction). • flex-flow: flex-direction | flex-wrap thuộc tính rút gọn của flex-direction và flex-wrap KHOA CÔNG NGHỆ THÔNG TIN Trang 116
Bài 4 - Định dạng trang web với CSS Hình 4.25. Ví dụ minh họa thuộc tính display . Thuộc tính box-sizing: Dùng xác định cách tính chiều rộng và chiều cao của một phần tử. - Cú pháp: { box-sizing: giá trị; } Giá trị: 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 KHOA CÔNG NGHỆ THÔNG TIN Trang 117