Bài giảng Thiết kế trang web - Trường Đại học Nha Trang

153 trang Gia Huy 16/05/2022 2640

Download

Bạn đang xem 20 trang mẫu của tài liệu "Bài giảng Thiết kế trang web - Trường Đại học Nha Trang", để 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:

bai_giang_thiet_ke_trang_web_truong_dai_hoc_nha_trang.pdf

Nội dung text: Bài giảng Thiết kế trang web - Trường Đại học Nha Trang

TRƯỜNG ĐẠI HỌC NHA TRANG KHOA CÔNG NGHỆ THÔNG TIN – BỘ MÔN HỆ THỐNG THÔNG TIN BÀI GIẢNG THIẾT KẾ TRANG WEB  Tổng quan về Internet và WEB  HTML  CSS  JavaScript NHA TRANG 2014
LỜI NÓI ĐẦU Bài giảng Thiết kế trang web được biên soạn làm tài liệu tham khảo hữu ích cho sinh viên Ngành Công nghệ Thông tin học tập và nghiên cứu. Trong bài giảng này, nội dung được viết theo hướng trang bị cho người học kiến thức nền tảng về kỹ thuật, kỹ năng xây dựng, thay đổi giao diện, điều khiển hoạt động trang web theo các chuẩn khác nhau. Các chủ đề chính của bài giảng bao gồm Tổng quan về Internet và dịch vụ World Wide Web Ngôn ngữ đánh dấu siêu văn bản HTML 4.01 và XHTML 1.0 Ngôn ngữ định dạng CSS2 Ngôn ngữ lập trình JavaScript Bên cạnh phần lý thuyết còn có các bài tập thực hành kèm theo để người học luyện tập, vận dụng những kiến thức đã học vào thực tế, tăng cường khả năng tự học, đáp ứng được yêu cầu đổi mới phương pháp học tập theo học chế tín chỉ. Dù có nhiều cố gắng trong công tác biên soạn nhưng bài giảng chắc chắn sẽ có ít nhiều sai sót. Chúng tôi mong nhận được các ý kiến đóng góp của các đồng nghiệp cũng như của sinh viên để hoàn thiện bài giảng trong những lần xuất bản tiếp theo. KHOA CÔNG NGHỆ THÔNG TIN BỘ MÔN HỆ THỐNG THÔNG TIN
MỤC LỤC CHƯƠNG 0: TỔNG QUAN VỀ INTERNET VÀ WORLD WIDE WEB 1 1. Internet 1 1.1. Khái niệm 1 1.2. Lịch sử 1 1.3. Địa chỉ IP và tên miền 2 1.3.1. Địa chỉ IP 2 1.3.2. Tên miền (Domain name) 3 1.4. Nhà cung cấp dịch vụ Internet 4 1.4.1. IAP (Internet Access Provider) 4 1.4.2. ISP (Internet Service Provider) 4 1.4.3. ICP (Internet Content Provider) 4 2. World Wide Web 5 2.1. Khái niệm 5 2.2. Các thành phần của web 5 2.2.1. Siêu văn bản (HyperText) 5 2.2.2. Ngôn ngữ đánh dấu siêu văn bản (HyperText Markup Language – HTML) 5 2.2.3. Giao thức truyền tin siêu văn bản (HyperText Transfer Protocol – HTTP) 5 2.2.4. Trình duyệt (web browser) 6 2.2.5. URL (Uniform Resource Locator) 6 2.3. Mô hình tương tác Client-Server trong một ứng dụng Web 7 2.3.1. Khái niệm ứng dụng web 7 2.3.2. Mô hình client-server 7 2.4. Một số tổ chức quản lý chuẩn và công nghệ web 8 2.4.1. W3C - The World Wide Web Consortium 9 2.4.2. ECMA - European Computer Manufacturers Association 9 2.4.3. OASIS – Organization for the Advancement of Structured Information Standards 9 CHƯƠNG 1: HYPERTEXT MARKUP LANGUAGE (HTML) 10 1. Giới thiệu HTML 10 2. Đặc điểm của HTML 10 3. Cấu trúc của văn bản HTML 11 3.1. Cấu trúc của HTML element 11
3.2. Cấu trúc của văn bản HTML 13 3.2.1. HTML section 13 3.2.2. Header section 13 3.2.3. Body section 13 4. Các thẻ thuộc HTML element 14 4.1. Phân loại HTML element 14 4.1.1. Element khối (block-level element) 14 4.1.2. Element dòng (inline element) 14 4.2. Các thẻ cơ bản 15 4.2.1. Thẻ heading 15 4.2.2. Thẻ Paragraph 16 4.2.3. Thẻ 16 4.2.4. Thẻ 17 4.2.5. Thẻ ngắt dòng 17 4.2.6. Đường kẻ ngang 17 4.2.7. Các thẻ định dạng văn bản 19 4.3. Liên kết 22 4.3.1. Liên kết địa chỉ tuyệt đối 22 4.3.2. Liên kết địa chỉ tương đối 22 4.3.3. Liên kết nội tại 23 4.4. Bảng biểu (Table) 23 4.5. Danh sách (List) 25 4.5.1. Danh sách không đánh số thứ tự 25 4.5.2. Danh sách đánh số thứ tự 26 4.5.3. Danh sách định nghĩa 27 4.6. Hình ảnh 28 4.7. Multimedia 28 4.8. Khung (frame) 28 4.9. Biểu mẫu (form) 30 4.9.1. Thẻ 31 a) Text & password 31 b) Radio button 31 c) Checkbox 32 d) Hidden 32
e) Button 32 f) Image 33 g) File 33 4.9.2. Combo box (drop-down menu) 33 4.9.3. TextArea 34 4.10. Các thẻ bổ sung thông tin cho trang web 35 4.10.1. Thẻ 35 a) Meta Content Type 35 b) Meta Content Language (hoặc Meta Language) 35 c) Meta Description 36 d) Meta Keywords 36 e) Meta Author 36 f) Meta Refresh 36 4.10.2. Thẻ 36 4.10.3. Thẻ 37 4.10.4. Thẻ 37 5. Khai báo chuẩn HTML 38 5.1. Khái niệm 38 5.2. Khai báo 38 5.2.1. HTML 4.01 38 a) HTML 4.01 Strict 38 b) HTML 4.01 Transitional 39 c) HTML 4.01 Frameset 39 5.2.2. XHTML 1.0 39 a) XHTML 1.0 Strict 39 b) XHTML 1.0 Transitional 39 c) XHTML 1.0 Frameset 39 5.2.3. XHTML 1.1 40 5.2.4. HTML5 40 6. XHTML 40 6.1. Khái niệm 40 6.2. Các thay đổi về cú pháp trong XHTML so với HTML 40 7. Giới thiệu HTML5 42 CHƯƠNG 2: CASCADING STYLE SHEET (CSS) 43 1. Giới thiệu CSS 43
2. Mục đích sử dụng CSS 43 3. Cú pháp CSS 43 3.1. Selector 43 3.1.1. Universal selector 44 3.1.2. Type selector 44 3.1.3. Id selector 45 3.1.4. Class selector 45 3.1.5. Descendant selector 46 3.1.6. Child selector 46 3.1.7. Adjacent sibling selector 46 3.1.8. Attribute selector 47 3.1.9. Pseudo elements và Pseudo classes 48 a) Pseudo elements 48 b) Pseudo classes 48 3.2. Property 49 3.3. Value 50 4. Đơn vị CSS 50 4.1. Đơn vị đo chiều dài 50 4.2. Đơn vị màu sắc 51 5. Nhúng mã CSS vào file HTML 51 5.1. Kiểu thuộc tính (Inline Style) 51 5.2. Kiểu tập hợp nhúng bên trong tài liệu HTML (Internal Style Sheet) 52 5.3. Liên kết ngoài (External Style Sheet) 53 5.3.1. Sử dụng thẻ 53 5.3.2. Sử dụng @import 54 5.4. Mức độ ưu tiên giữa các cách nhúng CSS vào tài liệu HTML 57 6. Các định dạng CSS cơ bản 57 6.1. Background 57 6.1.1. Màu nền 57 6.1.2. Ảnh nền 57 Định dạng background rút gọn 59 6.2. Font 59 6.2.1. Thuộc tính font-family 59
6.2.2. Thuộc tính font-style 59 6.2.3. Thuộc tính font-variant 59 6.2.4. Thuộc tính font-weight 60 6.2.5. Thuộc tính font-size 60 Định dạng font rút gọn 60 6.3. Text 60 6.3.1. Màu chữ (thuộc tính color) 60 6.3.2. Thuộc tính text-indent 60 6.3.3. Thuộc tính text-align 61 6.3.4. Thuộc tính vertical-align 61 6.3.5. Thuộc tính letter-spacing 61 6.3.6. Thuộc tính text-decoration 62 6.3.7. Thuộc tính text-transform 62 6.4. Box model 62 6.4.1. Margin 63 6.4.2. Padding 63 6.4.3. Border 64 a) border-width 64 b) border-color 64 c) boder-style 64 6.4.4. Width & Height 65 a) Thuộc tính width, max-width, min-width 65 b) Thuộc tính height, max-height, min-height 65 6.5. Float & clear 66 6.5.1. Thuộc tính float 66 6.5.2. Thuộc tính clear 67 6.6. Position 68 6.7. Lớp (Layers) 69 7. Giới thiệu CSS3 70 CHƯƠNG 3: JAVASCRIPT 71 1. Giới thiệu JavaScript 71 2. Đặc điểm của JavaScript 71 3. Mục đích sử dụng JavaScript 72 4. Nhúng mã JavaScript vào file HTML 72
4.1. Sử dụng thẻ 72 4.2. Dùng file chứa mã JavaScript 74 4.3. Dùng biểu thức JavaScript làm giá trị thuộc tính xử lý sự kiện 74 4.4. Thẻ 75 5. Khai báo cơ bản trong JavaScript 76 5.1. Biến 76 5.1.1. Khai báo 76 5.1.2. Quy tắc đặt tên biến 76 5.1.3. Phạm vi của biến 76 5.2. Hằng 77 6. Các kiểu dữ liệu trong JavaScript 78 6.1. Kiểu số nguyên 78 6.2. Kiểu số thực (kiểu số dấu chấm động) 78 6.3. Kiểu Logical (hay boolean) 79 6.4. Kiểu chuỗi (String) 79 6.5. Kiểu null 80 6.6. Kiểu undefined (không xác định) 80 7. Toán tử trong JavaScript 80 7.1. Toán tử gán 80 7.2. Toán tử số học 81 7.3. Toán tử so sánh 82 7.4. Toán tử logic 83 7.5. Toán tử thao tác trên bit 84 7.5.1. Các toán tử logic thao tác bit 84 7.5.2. Các toán tử dịch của thao tác bit 85 7.6. Toán tử điều kiện 85 8. Các cấu trúc điều khiển 86 8.1. Rẽ nhánh if 86 8.2. Rẽ nhánh switch 87 8.3. Cấu trúc lặp for 88 8.4. Cấu trúc lặp while 90 8.5. Các cấu trúc chuyển điều khiển trong vòng lặp 90 8.5.1. Cấu trúc label 90
8.5.2. Cú pháp break 91 8.5.3. Cấu trúc continue 91 8.6. Quản lý lỗi 92 9. Hàm 92 9.1. Khái niệm 92 9.2. Xây dựng hàm tự định nghĩa 93 9.3. Một số hàm thông dụng được hỗ trợ bởi JavaScript 94 9.3.1. alert 94 9.3.2. prompt 94 9.3.3. confirm 95 9.3.4. eval 95 9.3.5. isNaN 95 9.3.6. parseInt 96 9.3.7. parseFloat 96 9.3.8. setTimeout và clearTimeout 96 9.3.9. setInterval và clearInterval 96 10. Đối tượng trong JavaScript 97 10.1. Các đối tượng xây dựng sẵn của JavaScript 98 10.1.1. Đối tượng String 98 a) Thuộc tính 98 b) Phương thức 98 10.1.2. Đối tượng mảng (Array) 101 a) Thuộc tính 101 b) Phương thức 101 10.1.3. Đối tượng Date 103 10.1.4. Đối tượng Math 104 a) Thuộc tính 105 b) Phương thức 105 10.1.5. Đối tượng Number 106 10.2. Đối tượng do người dùng tự định nghĩa 107 10.2.1. Xây dựng đối tượng 107 10.2.2. Sử dụng đối tượng 107 10.2.3. Phát triển kế thừa 108 10.2.4. Bổ sung thuộc tính hoặc phương thức cho đối tượng 108
10.3. Đối tượng trình duyệt 109 10.3.1. window 109 a) Thuộc tính 109 b) Phương thức 109 10.3.2. location 110 a) Thuộc tính 110 b) Phương thức 110 10.3.3. history 111 10.3.4. document 111 a) Thuộc tính 111 b) Phương thức 111 c) Thay đổi nội dung của Element 112 d) Thay đổi giá trị thuộc tính của Element 113 e) Thay đổi định dạng của Element 113 10.3.5. form 114 a) Thuộc tính của form 114 b) Phương thức của form 114 c) Các thuộc tính trên mảng element 114 11. Xử lý sự kiện 115 11.1. Khái niệm 115 11.2. Xử lý sự kiện cho các thẻ HTML 115 11.3. Một số sự kiện phổ biến 116 11.3.1. Sự kiện trên chuột 116 11.3.2. Sự kiện trên bàn phím 116 11.3.3. Sự kiện trên form 116 11.4. Đăng ký sự kiện 117 12. Làm việc với cookie 118 12.1. Khái niệm 118 12.2. Thiết lập cookie 118 12.3. Đọc cookie 119 TÀI LIỆU THAM KHẢO 120 PHỤ LỤC 121 1. Các thẻ HTML 4.01, XHTML 1.0 121 2. Các thẻ mới trong HTML5 123
3. Thuộc tính CSS2 125 4. Thuộc tính mới trong CSS3 127 BÀI TẬP THỰC HÀNH 129 1. Phần HTML và CSS 129 2. Phần JavaScript 140
KHOA CÔNG NGHỆ THÔNG TIN ĐẠI HỌC NHA TRANG CHƯƠNG 0: TỔNG QUAN VỀ INTERNET VÀ WORLD WIDE WEB Chương này giới thiệu các khái niệm liên quan đến mạng Internet, dịch vụ World Wide Web, ngôn ngữ siêu văn bản và cách thức hoạt động của 1 trang web. 1. Internet 1.1. Khái niệm Internet là một liên mạng máy tính toàn cầu được hình thành từ các mạng nhỏ hơn, liên kết hàng triệu máy tính trên thế giới thông qua cơ sở hạ tầng viễn thông. Internet là mạng của các mạng máy tính. Trong mạng này, các máy tính và thiết bị mạng giao tiếp với nhau bằng một ngôn ngữ thống nhất. Đó là bộ giao thức TCP/IP (Transmision Control Protocol – Internet Protocol). 1.2. Lịch sử Internet có khởi thủy là ARPANET, một dự án do Bộ Quốc phòng Hoa Kỳ khởi xướng vào năm 1969. Mạng ARPANET khởi đầu là mạng kết nối giữa Bộ Quốc phòng Hoa Kỳ với các nhà thầu nghiên cứu khoa học và quân sự lại với nhau, trong đó phần lớn là các trường đại học đang tiến hành các nghiên cứu khoa học được tài trợ. Thiết kế của ARPANET độc đáo ở chỗ là mạng vẫn có thể hoạt động khi một phần của nó bị phá hủy. Nếu một trong những liên kết mạng bị phá hủy do chiến tranh hay thiên tại thì lưu thông trên đó có thể được tự động chuyển sang các liên kết khác. Vào đầu năm 1980 giao thức TCP/IP được phát triển và nhanh chóng trở thành giao thức mạng chuẩn được dùng trên mạng ARPANET. Hệ điều hành được dùng trên mạng lúc này là BSD UNIX cũng được tích hợp để sử dụng giao thức TCP/IP. Hệ điều hành này nhanh chóng trở thành một công cụ hữu hiệu để phát triển mạng máy tính. Với các công nghệ mới này số lượng mạng máy tính đã phát triển nhanh chóng. ARPANET thành công vang dội và mọi trường đại học tại Hoa Kỳ đều muốn gia nhập vào mạng này. Với việc mở rộng đối tượng tham gia vào mạng, ARPANET bắt đầu trở nên khó quản lý hơn. Do đó nó đã được chia làm hai mạng: MILNET dành cho mục đích quân sự và ARPANET mới, với quy mô nhỏ hơn, dành cho các mục đích phi quân sự. ARPANET nhanh chóng trở nên quá tải do sự phát triển của số lượng các máy tính kết nối vào mạng này cũng như băng thông mà các máy tính này đòi hỏi. Quỹ Khoa học Quốc gia Hoa Kỳ (National Science Foundation - NSF) đã lập nên mạng NSFNET vào năm 1986, một mạng riêng và nhanh hơn nhiều của mình. NSF đã thiết lập một chuỗi các mạng khu vực nhằm liên kết những người sử dụng trong từng khu vực với nhau, cũng như kết nối các mạng khu vực này với NSFNET. NSFNET đã dần thay thế cho ARPANET và sau này trở thành mạng Internet. Internet được thiết kế dựa trên ý tưởng là có thể có nhiều mạng hoàn toàn độc lập với nhau kết nối vào nó, các mạng này có thể truyền thông với nhau thông qua phương thức truyền gói dữ liệu (packet switching) và qua kiến trúc mạng mở (open-architecture networking). Kiến trúc mạng mở nghĩa là các mạng con có thể có giao diện, cấu trúc của riêng nó. Điều này giải thích tại sao ngày nay chúng ta có thể kết nối Internet bất kể máy tính của mình đang sử dụng hệ điều hành gì. Trang 1
KHOA CÔNG NGHỆ THÔNG TIN ĐẠI HỌC NHA TRANG Khi ngày càng có nhiều người tham gia vào cộng đồng mạng, những nhà phát triển nhận thấy sự cần thiết phải có một giao diện thân thiện và dễ sử dụng cho mọi đối tượng người dùng. Năm 1991, Đại học Minnesota thiết kế Gopher, một hệ thống menu đơn giản để truy cập đến các tập tin. Sự ra đời của giao thức HTTP và HTML đã đánh dấu một bước ngoặt mới trong việc sử dụng Internet. Tim Berners-Lee là người đã phát triển các giao thức nền tảng cho World Wide Web (WWW) vào năm 1992. Ông cũng chính là người đã tạo ra ngôn ngữ đánh dấu siêu văn bản (HTML: Hypertext Markup Language) – ngôn ngữ để viết nên các trang Web. Từ đây, với dịch vụ World Wide Web, Internet đã trở nên thực sự phổ biến và thích hợp với mọi đối tượng người dùng máy tính. Về mặt vật lý, Internet sử dụng một phần của toàn bộ tài nguyên mạng viễn thông hiện có. Về mặt kỹ thuật, Internet sử dụng tập giao thức nền tảng gọi là TCP/IP (Transmission Control Protocol / Internet Protocol). Với TCP trước đây, khi định nghĩa về Internet, IP không phải là một bộ phận trong thiết kế. Trong quá trình phát triển, Danny Cohen ở Đại học Nam California (University of Southern California-USC) cho rằng các chức năng hướng kết nối của TCP là không cần thiết đối với một số kiểu truyền dữ liệu và chúng tạo ra phí tổn phát sinh. Ông đề nghị tách TCP ra để thỏa mãn yêu cầu "đúng giờ hơn là chính xác". Điều cần thiết là tìm cách lấy dữ liệu nhanh chóng để chuyển sang hệ thống khác. Như vậy, TCP trở thành TCP và IP. Ngày nay Internet là một mạng công cộng kết nối hàng trăm triệu người trên thế giới. Internet, cùng với những mặt tốt hoặc xấu của nó mà người ta đang sử dụng hoặc phải đối mặt, đã trở thành một phần quan trọng của đời sống con người. 1.3. Địa chỉ IP và tên miền 1.3.1. Địa chỉ IP Ngày nay, mạng Internet được phát triển rộng khắp trên toàn thế giới. Để có thể khai thác và sử dụng các dịch vụ và ứng dụng trên mạng Internet chúng ta cần phải xác định được vị trí của máy tính cung cấp dịch vụ và ứng dụng. Vị trí của các máy tính trên mạng được xác định bởi địa chỉ IP. Địa chỉ IP là một con số 32 bit để định danh đối tượng nhận và gửi thông tin trên Internet. Nói một cách khác địa chỉ IP dùng để xác định một máy tính trong mạng Internet dựa trên giao thức TCP/IP. Địa chỉ IP đang được sử dụng hiện tại là thế hệ địa chỉ IPv4 có 32 bit chia thành 4 Octet, mỗi Octet có 8 bit, tương đương với 1 byte được đếm từ trái qua phải từ bit 1 đến bit 32, các Octet tách biệt nhau bằng dấu chấm "." và biểu hiện ở dạng thập phân đầy đủ là 12 chữ số. Ví dụ: địa chỉ IP 10001100101110100101000100000001 sẽ được ký hiệu thành 140.186.81.1 Hiện nay một số quốc gia đã đưa vào sử dụng địa chỉ IPv6 nhằm mở rộng không gian địa chỉ và sử dụng những ứng dụng và tính năng mới của IPv6, địa chỉ IPv6 gồm 128 bit dài gấp 4 lần so với độ dài của địa chỉ IPv4. Nói cách khác chính xác hơn là địa IPv4 có khả nǎng cung cấp 232 = 4,294,967,296 địa chỉ, còn địa chỉ IPv6 có khả nǎng cung cấp tới 2128 địa chỉ. Trang 2
KHOA CÔNG NGHỆ THÔNG TIN ĐẠI HỌC NHA TRANG 1.3.2. Tên miền (Domain name) Một điều dễ nhận thấy là địa chỉ IP khó nhớ và gây nhiều trở ngại trong việc truy cập đến các tài nguyên trên mạng. Tim Beners-Lee đã xây dựng hệ thống tên miền (Domain Name System – DNS) để khắc phục trở ngại này. Hệ thống DNS được sinh ra để gán cho mỗi địa chỉ IP dạng số một tên dạng chữ tương ứng, dễ nhớ. Các tên dạng chữ này được gọi là tên miền. Các tên miền này thường có ý nghĩa liên quan đến các dịch vụ được cung cấp. Hệ thống tên miền trên mạng Internet có nhiệm vụ chuyển đổi tên miền sang địa chỉ IP và ngược lại từ địa chỉ IP sang tên miền. Ví dụ: Địa chỉ IP của tên miền www.google.com là 74.125.31.147 Hệ thống tên miền được phân bố theo cấu trúc hình cây, tên miền cấp cao nhất là tên miền gốc (ROOT) được thể hiện bằng dấu ".". Root gov mil com net edu Top level domain cnn Second level domain news products contact Sub domain Một số tên miền cấp 1 dùng chung phổ biến: o COM (commercial): mọi đối tượng, cá nhân, doanh nghiệp. o EDU (education): các tổ chức giáo dục. o GOV (government): các tổ chức chính phủ. o ORG (organization): các tổ chức hoạt động trong lĩnh vực chính trị, văn hoá, xã hội. o NET (network): các tổ chức hoạt động trong lĩnh vực thiết lập và cung cấp các dịch vụ trên mạng. o INT (International): các tổ chức quốc tế. o MIL (military): các tổ chức quân sự. o Tên miền quốc gia (us, vn, uk, ). Hệ thống tên miền cấp 1 này không phải là bất biến. Hiện nay ngày càng có thêm nhiều tên miền cấp 1 được thông qua và cho phép sử dụng. Trang 3
KHOA CÔNG NGHỆ THÔNG TIN ĐẠI HỌC NHA TRANG 1.4. Nhà cung cấp dịch vụ Internet Để có thể khai thác và sử dụng các dịch vụ Internet, cần có các nhà cung cấp dịch vụ Internet. Có thể liệt kê như sau: 1.4.1. IAP (Internet Access Provider) IAP là nhà cung cấp dịch vụ đường truyền để kết nối với Internet (còn gọi là IXP – Internet Exchange Provider). Nếu hiểu Internet như một siêu xa lộ thông tin thì IAP là nhà cung cấp phương tiện để đưa người dùng vào xa lộ. Nói cách khác IAP là kết nối người dùng trực tiếp với Internet. IAP có thể thực hiện cả chức năng của ISP nhưng ngược lại thì không. Một IAP thường phục vụ cho nhiều ISP khác nhau. 1.4.2. ISP (Internet Service Provider) ISP là nhà cung cấp dịch vụ Internet cấp quyền truy cập Internet qua mạng viễn thông và các dịch vụ như: Email, Web, FTP, Telnet, Chat. Để có thể truy nhập và sử dụng các dịch vụ của Internet, người sử dụng phải đăng ký với nhà cung cấp dịch vụ này. ISP được cấp cổng truy cập vào Internet bởi IAP. 1.4.3. ICP (Internet Content Provider) ICP là nhà cung cấp dịch vụ nội dung thông tin Internet, cung cấp các thông tin về: kinh tế, giáo dục, thể thao, chính trị, quân sự, (thường xuyên cập nhật thông tin mới theo định kỳ) đưa lên mạng. Trang 4
KHOA CÔNG NGHỆ THÔNG TIN ĐẠI HỌC NHA TRANG 2. World Wide Web 2.1. Khái niệm Word Wide Web (được gọi tắt là Web) - là mạng lưới nguồn thông tin cho phép mọi người khai thác thông tin qua một số công cụ hoặc là chương trình hoạt động dưới các giao thức mạng. World Wide Web là một trong số các dịch vụ của Internet nhằm giúp cho việc trao đổi thông tin trở nên thuận tiện và dễ dàng. 2.2. Các thành phần của web 2.2.1. Siêu văn bản (HyperText) Siêu văn bản là một loại văn bản thông thường nhưng lại có tham chiếu (hyperlink – liên kết) tới các văn bản khác. Người sử dụng có thể truy cập từ tài liệu này đến tài liệu khác thông qua các tham chiếu. Trang web (webpage) là một siêu văn bản được hiển thị trên màn hình máy tính hoặc thiết bị điện tử (ví dụ như điện thoại di đông) bởi phần mềm ứng dụng trình duyệt (web browser). Webpage được truy cập trên mạng Internet thông qua địa chỉ gọi là Uniform Resource Locator (URL). Website là tập hợp các tài liệu web (webpage, file định dạng CSS, các script, hình ảnh, âm thanh ) có liên quan với nhau, được đặt tại ít nhất một máy phục vụ web (web server) 2.2.2. Ngôn ngữ đánh dấu siêu văn bản (HyperText Markup Language – HTML) Là ngôn ngữ đánh dấu cơ bản để tạo ra các trang web. Ngôn ngữ HTML định nghĩa các phần tử đánh dấu để mô tả cấu trúc và nội dung của trang web trên trình duyệt cũng như cách thức kết nối đến các đối tượng siêu văn bản khác (hình ảnh, âm thanh, ). Văn bản HTML là các tập tin có phần mở rộng .html hay .htm. Ta có thể tạo các file HTML bằng bất kỳ bộ xử lý văn bản nào. Hiện nay, phiên bản HTML 4.01 là phiên bản chuẩn mới nhất được công nhận. Ngoài ra HTML5 là phiên bản đang được phát triển với nhiều tính năng vượt trội so với các phiên bản trước. Bên cạnh HTML, XHTML (Extensible HyperText Markup Language – Ngôn ngữ đánh dấu siêu văn bản mở rộng) là một ngôn ngữ đánh dấu có cùng các khả năng như HTML, nhưng có cú pháp chặt chẽ hơn. 2.2.3. Giao thức truyền tin siêu văn bản (HyperText Transfer Protocol – HTTP) Hypertext Transfer Protocol (HTTP) là 1 giao thức để truyền thông tin trên Internet. Mục tiêu ban đầu của giao thức này là cung cấp cách thức để gửi và nhận các trang HTML. Giao thức này cung cấp cách thức để xử lý các yêu cầu và kết quả phản hồi giữa máy khách (client) và máy chủ (server). Giữa máy khách và máy chủ có thể có nhiều thiết bị trung gian, chẳng hạn như proxy và gateway. Hypertext Transfer Protocol Secure (HTTPS) là một sự kết hợp giữa giao thức HTTP và giao thức bảo mật SSL (Secure Socket Layer) hay TLS (Transport Layer Security). Thông tin truyền tải giữa máy khách và máy chủ được mã hóa.cho phép trao đổi thông tin một cách bảo mật trên Internet. Trang 5
KHOA CÔNG NGHỆ THÔNG TIN ĐẠI HỌC NHA TRANG 2.2.4. Trình duyệt (web browser) Là một phần mềm để hiển thị các trang web viết bằng HTML cho người dùng. Trình duyệt là cầu nối liên lạc giữa người dùng với máy chủ web. Thông qua trình duyệt, người dùng gửi yêu cầu đến máy chủ dịch vụ web. Máy chủ dịch vụ web sẽ gửi kết quả trả về trình duyệt để hiển thị cho người dùng. Một số trình duyệt thông dụng hiện nay: Internet Explorer (IE), FireFox, Google Chrome, Safari, Opera Internet Explorer FireFox Google Chrome Safari 2.2.5. URL (Uniform Resource Locator) URL là địa chỉ tham chiếu đến 1 tài nguyên trên Internet. Tài nguyên có thể là 1 trang web, 1 hình ảnh, tập tin multimedia, URL có cấu trúc phân cấp giống như folder và file trên máy tính. protocol://host_name[:port_num][/path][/file_name][?query] protocol: một trong các giao thức trên Internet, ví dụ: http, ftp, host_name: tên máy chủ port_num: cổng giao tiếp. Ví dụ: Dịch vụ World Wide Web với giao thức http sử dụng cổng 80, nếu là giao thức https thì sử dụng cổng 443. path và file_name: đường dẫn đến tập tin tài nguyên. query: giới hạn tài nguyên truy xuất từ tập tin hoặc thao tác trên kết quả (ví dụ như sắp xếp) Trang 6
KHOA CÔNG NGHỆ THÔNG TIN ĐẠI HỌC NHA TRANG Ví dụ: URL dạng đầy đủ URL dạng không đầy đủ www.google.com.vn 2.3. Mô hình tương tác Client-Server trong một ứng dụng Web 2.3.1. Khái niệm ứng dụng web Ứng dụng Web là loại ứng dụng Internet cho phép cho phép các máy khách (client) sử dụng trình duyệt Web để truy cập và xem thông tin hoặc thực hiện tác vụ cụ thể nào đó được cung cấp bởi máy phục vụ (web server). Một điểm cần lưu ý là tại một thời điểm nào đó có thể có nhiều người sử dụng cùng đồng thời truy cập một trang web hoặc cùng thực hiện một tác vụ, như vậy có nghĩa là mọi ứng dụng Web đều có khả năng quản lý và phục vụ đa phiên. 2.3.2. Mô hình client-server Trong mô hình tương tác này, một ứng dụng Web có thể được xem gồm 2 phần: Client Bên phía client, người dùng (user) sử dụng trình duyệt web để gửi yêu cầu (request) đến Server bằng cách gõ địa chỉ của trang web cần đến vào thanh địa chỉ của trình duyệt. Kết quả nhận được sau đó sẽ được hiển thị trên cửa sổ của trình duyệt Server Về phía Server, máy phục vụ web khởi chạy một ứng dụng web tương ứng để xử lý yêu cầu của người sử dụng, kết quả là ứng dụng web sinh ra một trang HTML trả lại cho trình duyệt, sau Trang 7
KHOA CÔNG NGHỆ THÔNG TIN ĐẠI HỌC NHA TRANG đó trình duyệt sẽ hiển thị kết quả cho người dùng. Trong mô hình tương tác này, cả hai (Client & Server) cùng sử dụng chung một giao thức truyền thông siêu văn bản HTTP. Một máy phục vụ thường được cài các phần mềm chuyên dụng và có thể dùng cho một hay nhiều mục đích o Web server o File server o Application server o Database server o Mail server  Chú ý: Phân biệt trang web tĩnh và trang web động  Trang web tĩnh + Trang web tĩnh tương tác yếu với người dùng, nội dung của trang web không bị thay đổi theo thời gian cho đến khi người lập trình thay đổi code của trang web. + Trang web tĩnh thường được viết bằng thuần HTML hoặc XHTML  Trang web động + Trang web động tương tác mạnh với người dùng, nội dung trang web bị thay đổi tùy theo ngữ cảnh người dùng yêu cầu. + Trang web động được xây dựng bằng HTML (XHTML) kết hợp với các ngôn ngữ kịch bản dành cho server (ASP, PHP, Java, ) + Trang web động thường có yêu cầu truy xuất dữ liệu từ database. 2.4. Một số tổ chức quản lý chuẩn và công nghệ web Để làm cho Internet trở thành nơi tốt hơn cho cả những người phát triển web và người dùng cuối cùng, cả trình duyệt và những nhà thiết kế web cần thiết phải tuân thủ theo các chuẩn web. Khi những nhà phát triển tuân theo các chuẩn web, việc phát triển web sẽ được đơn giản hóa. Khi đó, người phát triển có thể dễ dàng hiểu những cách viết mã khác. Sử dụng các chuẩn web giúp đảm bảo rằng trang web hiển thị chính xác trên các trình duyệt khác nhau, mà không phải thường xuyên tốn thời gian viết lại. Những trang web tuân theo chuẩn sẽ dễ dàng được các cỗ máy tìm kiếm truy cập và lập chỉ mục hơn, dễ dàng chuyển đổi định dạng hơn, và dễ dàng tiếp cận các mã chương trình (như JavaSrcipt) Trang 8
KHOA CÔNG NGHỆ THÔNG TIN ĐẠI HỌC NHA TRANG Một số tổ chức quản lý các chuẩn web: 2.4.1. W3C - The World Wide Web Consortium W3C là một tổ chức quốc tế phi chính phủ thiết lập các chuẩn cho World Wide Web. Được thành lập năm 1994 bởi nhà sáng lập và lãnh đạo hiện nay Tim Berners-Lee, người sáng tạo ra HTTP và HTML. Mỗi chuẩn của W3C đi qua bốn giai đoạn: Phác thảo (Working Draft), Chỉnh sửa cuối cùng (Last Call), Chuẩn đủ tư cách ứng cử (Candidate Recommendation), Trình chuẩn (Proposed Recommendation) trước khi được gọi là Chuẩn chính thức (Recommendation). Các nhà công nghiệp phần mềm được tự quyết định có theo tiêu chuẩn hay không. Thông thường, nhiều trong số họ theo các tiêu chuẩn này. Việc tuân thủ chuẩn W3C sẽ giúp: Trang web thân thiện hơn với các Search Engine Trang web được hỗ trợ tốt trên nhiều trình duyệt, không mất nhiều thời gian để chỉnh sửa và tối ưu hóa cho từng trình duyệt. Trang web được tải nhanh hơn. Các thiết bị hiển thị website di động như điện thoại IPad đều dựa trên chuẩn W3C. Do đó, trang web sẽ được hiển thị tốt hơn trên các thiết bị này 2.4.2. ECMA - European Computer Manufacturers Association ECMA thành lập năm 1961, nhằm mục đích đáp ứng nhu cầu chuẩn hóa ngôn ngữ máy tính và các mã đầu vào/đầu ra. ECMA không phải là một tổ chức chuẩn hóa chính thức, mà là một hiệp hội các công ty phối hợp với các tổ chức chính thức khác như International Organization for Standardization (ISO) và the European Telecommunications Standards Institute (ETSI). Với các nhà phát triển web, chuẩn quan trong nhất là ECMAScript, một dạng chuẩn hóa của JavaScript. 2.4.3. OASIS – Organization for the Advancement of Structured Information Standards OASIS hướng tới sự an toàn các ứng dụng web bằng việc đưa ra các chuẩn về xác thực, trao quyền và an toàn dịch vụ web như: Security Assertion Markup Language (SAML), eXtensible Access Control Markup Language (XACML), Service Provisioning Markup Language (SPML), Web Services Security, Trang 9
KHOA CÔNG NGHỆ THÔNG TIN ĐẠI HỌC NHA TRANG CHƯƠNG 1: HYPERTEXT MARKUP LANGUAGE (HTML) Chương này giới thiệu ngôn ngữ đánh dấu siêu văn bản HTML 4.01 và XHTML 1.0, cấu trúc trang web viết bằng HTML (XHTML), các chuẩn của HTML (XHTML). 1. Giới thiệu HTML Năm 1989, Tim Berners-Lee, một nhà khoa học ở viện thí nghiệm CERN (Centre European pour la Recherche Nucleaire) - Thụy sỹ có ý tưởng là cho phép các nhà nghiên cứu có thể trao đổi tài liệu bằng mạng điện tử . Từ đó World Wide Web (Web) được hình thành. Tim Berners-Lee muốn tài liệu trên Web phải được tổ chức lại sao cho người dùng có thể tham chiếu các tài liệu khác nhau trên mạng thông qua các liên kết ngay trong tài liệu đang được sử dụng. Ông dựa vào ngôn ngữ Standard Generalized Markup Language (SGML), để phát triển nên HTML, ngôn ngữ trình bày nội dung tài liệu và các liên kết thông qua hệ thống các thẻ đánh dấu. HTML đã trải qua các phiên bản gồm HTML phiên bản đầu tiên (1992), HTML 2 (1994), HTML 3 (1995), HTML 4 (1997). Qua các phiên bản phát triển, HTML ngày càng có nhiều thẻ mới, tính năng mới cũng như là tính đơn giản hóa ngày càng cao. HTML 4 đươc phát triển vào năm 1997, nâng cấp 4.01 năm 1999, là phiên bản thành công nhất được sử dụng phổ biến cho đến hiện nay. HTML 4.x hỗ trợ hiển thị hầu hết ngôn ngữ trên thế giới dựa trên chuẩn Universal Character Set, thay vì các phiên bản trước chỉ hiển thị theo chuẩn ISO-8859-1. HTML 4.x còn có thêm một số tính năng quan trọng sau: Hỗ trợ ngôn ngữ lập trình của client-script và có thể nhúng thêm các tập tin script bên ngoài vào. Hỗ trợ các sự kiện client-script như onclick, onchange cho các thẻ. Hỗ trợ CSS với các thuộc tính mới ID, Class và Style. Ba thuộc tính này giúp các thẻ liên kết với các style được khai báo trong CSS. Cùng với sự phát triển của công nghệ web thì HTML dần bộc lộ một số nhược điểm (mặc dù không phải là nghiêm trọng) do cấu trúc không chặt chẽ, việc hiển thị trên các trình duyệt cũng như trên các thiết bị di động không thống nhất. Để có thể khắc phục những hạn chế của HTML, tháng 2/2000, W3C giới thiệu ngôn ngữ XHTML (Extensible HyperText Markup Language). XHTML cũng là một ngôn ngữ đánh dấu có cùng các khả năng như HTML, nhưng có cú pháp chặt chẽ hơn. 2. Đặc điểm của HTML HTML (XHTML) sử dụng tập những mã "đánh dấu" – phần tử (element) – để mô tả các thành phần của văn bản. Trong các phần tử HTML, cách thức dữ liệu hiển thị trên trình duyệt được mô tả thông qua một ký hiệu đánh dấu gọi là tag, hoặc "thẻ HTML". Khi một trang web được tải về trình duyệt, trình duyệt sẽ căn cứ trên các tag HTML để hiển thị nội dung. HTML (XHTML) không được coi là ngôn ngữ lập trình. Văn bản HTML (XHTML) không có khái niệm trang, Văn bản được trình bày tùy theo kích thước của cửa sổ hiển thị: cửa sổ rộng bề ngang thì sẽ thu ngắn hơn, cửa sổ hẹp bề ngang thì sẽ được kéo dài ra để hiển thị cho hết nội dung. Độ dài của văn bản HTML thực sự không bị hạn chế. Văn bản HTML (XHTML) là các tập tin có phần mở rộng .html hay .htm. Ta có thể tạo các file HTML bằng bất kỳ bộ xử lý văn bản nào. Trang 10
KHOA CÔNG NGHỆ THÔNG TIN ĐẠI HỌC NHA TRANG 3. Cấu trúc của văn bản HTML 3.1. Cấu trúc của HTML element Một element cơ bản bao gồm tag (thẻ) mở, nội dung của element, tag đóng. Ngoài ra element còn có thể có các thuộc tính cung cấp thêm thông tin element. Giá trị của Tên tag thuộc tính Tên thuộc tính Chào mừng đến với Web [Thuộc tính] [Nội dung của element] [Tag đóng] Tag đóng HTML element  Chú ý:  Tên tag trong HTML 4.x không phân biệt chữ hoa và chữ thường  Một số tag đóng không bắt buộc phải có, tuy nhiên điều này có thể làm cho nội dung của element thể hiện không đúng cách trên trình duyệt.  Một số tag không theo cặp – không có tag đóng, còn được gọi là thẻ đơn hoặc thẻ rỗng (không có phần nội dung) Ví dụ: (có tác dụng chèn vào một dòng trống)  Thuộc tính của element chỉ có trong tag mở. Có những thuộc tính bắt buộc phải có trong tag. Ví dụ: tag bắt buộc phải có thuộc tính src để khai báo đường dẫn của ảnh  Trong phần nội dung của element, nhiều dấu cách (space) liền nhau chỉ được xem như 1 dấu cách, gõ Enter để xuống dòng cũng xem như gõ 1 dấu cách (trừ thẻ ) Trang 11
KHOA CÔNG NGHỆ THÔNG TIN ĐẠI HỌC NHA TRANG  Một số ký tự có ý nghĩa đặc biệt trong HTML, chẳng hạn như dấu nhỏ hơn ( lớn hơn > > & dấu và & & " ngoặc kép " " ' ngoặc đơn ' ' ¢ cent ¢ ¢ £ pound £ £ ¥ yen ¥ ¥ § section § § © copyright © © ® registered trademark ® ® × nhân × × ÷ chia ÷ ÷ Mã các ký tự phải được viết thường nếu văn bản HTML theo một chuẩn nào đó. Ví dụ: Phương trình: x × y < z  Không giống như ngôn ngữ lập trình, nếu ta mắc lỗi cú pháp hoặc lỗi logic HTLM thì trình duyệt sẽ không có một thông báo lỗi nào báo cho biết mà vẫn trình bày trang web nhưng theo cách không như mong muốn. Trang 12
KHOA CÔNG NGHỆ THÔNG TIN ĐẠI HỌC NHA TRANG 3.2. Cấu trúc của văn bản HTML Một văn bản HTML thường có cấu trúc cơ bản sau 3.2.1. HTML section Được bắt đầu bởi tag và kết thúc bởi Cặp tag này định nghĩa phạm vi của văn bản HTML. 3.2.2. Header section Được bắt đầu bởi tag và kết thúc bởi Phần này chứa thông tin mô tả trang web, chẳng hạn như tiêu đề trang web, các từ khóa dùng để tìm kiếm và nhận diện trang web, . Những thông tin này không được hiển thị trên trang web. Thẻ head có thể bị lược bỏ nếu ta không cần mô tả về trang hiện tại. 3.2.3. Body section Được bắt đầu bởi tag và kết thúc bởi Phần này chứa nội dung của trang web xuất hiện trên trình duyệt được thể hiện bởi các phần tử HTML.  Chú ý: Để có thể đặt chú thích trong trang web, ta có thể dùng cặp Ví dụ: Đoạn chú thích có thể được đặt bất cứ vị trí nào trong văn bản HTML Trang 13
KHOA CÔNG NGHỆ THÔNG TIN ĐẠI HỌC NHA TRANG 4. Các thẻ thuộc HTML element 4.1. Phân loại HTML element Các element được phân loại: element khối (block-level element) và element dòng (inline element).  Chú ý: Sự phân loại này chỉ tính cho các element nằm trong thẻ 4.1.1. Element khối (block-level element) Nội dung của element khi hiển thị trên trình duyệt sẽ bắt đầu và kết thúc bằng một dòng mới để phân cách với các element khác. Một số element khối cơ bản có các thẻ: Thẻ định dạng tiêu đề : gồm các thẻ từ cho đến , được sử dụng để định nghĩa tiêu đề cho nội dung HTML, giúp cho trình duyệt nhận biết được tiêu đề của một nội dung. Thẻ xác định đoạn văn bản : giúp trình duyệt xác định được đoạn văn bản trong trang HTML, thẻ này chỉ có thể chứa các thẻ thuộc nhóm inline, gồm: , , , , Thẻ phân chia khu vực : tương tự như thẻ nhưng thường được dùng ểđ phân vùng trang web do nó chứa được tất cả các thẻ khác. Với thẻ kết hợp với định dạng CSS, chúng ta có thể bố cục trang web một cách linh động và thay thế cách bố cục bằng tạo bảng. Thẻ tạo biểu mẫu : được sử dụng để xác định biểu mẫu Thẻ tạo nhóm chức năng : được sử dụng để tạo nhóm chức năng trong form, bắt buộc phải ở trong thẻ Thẻ tạo bảng : xác định bảng. Thẻ trích dẫn : được dùng ểđ xác định một đoạn văn bản có ý nghĩa trích ẫd n. Thẻ tạo dòng kẻ ngang : chèn một dòng có đường kẻ ngang trong văn bản Thẻ xác định danh sách , , : Sử dụng cho danh sách có các mục và có nội dung mô tả cho các mục. Thẻ danh sách có thứ tự , : Được sử dụng cho danh sách có thứ tự. Thẻ danh sách không có thứ tự , : Được sử dụng cho danh sách không có thứ tự. 4.1.2. Element dòng (inline element) Nội dung của element sẽ tiếp tục ở trên dòng hiển thị của trình duyệt. Những element thuộc nhóm inline nên được bao ngoài bởi nhóm các element block, vì các element block sẽ lo nhiệm vụ dàn trang web, còn các element thuộc nhóm inline chỉ để hiển thị nội dung cho văn bản. Những element thuộc nhóm inline có thể được lồng vào nhau nhưng không thể sử dụng element block lồng trong element inline. Trang 14
KHOA CÔNG NGHỆ THÔNG TIN ĐẠI HỌC NHA TRANG Một số element inline tiêu biểu có các thẻ sau 4.2. Các thẻ cơ bản 4.2.1. Thẻ heading Thẻ heading thuộc block-level element dùng để tạo các tiêu đề, đầu đề cho trang web Có 6 thẻ tiêu đề bao gồm h1, h2, h3, h4, h5, h6 theo thứ tự h1 (quan trọng nhất) đến h6 (ít quan trọng nhất). Hầu hết trình duyệt đều hiển thị các thẻ heading tô đậm và sử dụng font lớn hơn bình thường: h1 là lớn và đậm nhất cho đến h6 là lớn và đậm ít nhất. Tuy nhiên thẻ heading dùng để đánh dấu các đoạn text mang ý nghĩa quan trọng như tiêu đề bài viết, các mục lục chứ không phải dùng để in đậm văn bản. Ví dụ: Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6 Trang 15
KHOA CÔNG NGHỆ THÔNG TIN ĐẠI HỌC NHA TRANG 4.2.2. Thẻ Paragraph Thẻ thuộc block-level element dùng để định nghĩa đoạn văn bản. Thẻ chỉ có thể chứa inline element (nếu có). Ví dụ: Thẻ paragraph được dùng để định nghĩa đoạn văn bản Đây là 1 thẻ thuộc block-level element 4.2.3. Thẻ Thẻ thuộc block-level element định nghĩa một phân chia khu vực hay một vùng trong văn bản HTML. Thẻ thường được dùng để nhóm các thành phần nội dung thành một khối để định dạng bằng css do có thể chứa các block-element và inline element bất kỳ. Ví dụ: Thẻ paragraph được dùng để định nghĩa đoạn văn bản Đây là 1 thẻ thuộc block-level element Trang 16
KHOA CÔNG NGHỆ THÔNG TIN ĐẠI HỌC NHA TRANG 4.2.4. Thẻ Thẻ thuộc inline element được sử dụng để nhóm các inline element trong văn bản HTML với mục đích định dạng css cho các element đó. Ví dụ: Trường Đại học Nha Trang 4.2.5. Thẻ ngắt dòng Thẻ thuộc inline element được sử dụng khi ta muốn kết thúc một dòng nhưng không muốn bắt đầu một đoạn mới. Thẻ sẽ ngắt dòng tại nơi ta đặt nó trong văn bản HTML (tương tự như bấm phím Enter ở văn bản thông thường) là một thẻ rỗng. Nó không có thẻ đóng. Để các trình duyệt có thể thể hiện chính xác trong các phiên bản HTML (XHTML) thì thẻ ngắt dòng cần được viết là Ví dụ: Dòng text dài cần xuống hàng. Đã xuống hàng 4.2.6. Đường kẻ ngang Thẻ được sử dụng khi ta muốn tạo một đường kẻ ngang trong trang web. Trong HTML, thẻ không có thẻ đóng. Dưới đây là những thuộc tính của thẻ này: Thuộc tính Giá trị Mô tả Được dùng để sắp xếp vị trí cho thành phần . left align center Không khuyến khích sử dụng, sử dụng thuộc right tính text-align của css để thay thế. Trang 17
KHOA CÔNG NGHỆ THÔNG TIN ĐẠI HỌC NHA TRANG Thuộc tính Giá trị Mô tả Xác định một đường line thẳng, rõ nét, không phải bóng mờ. noshade noshade Không khuyến khích sử dụng, sử dụng thuộc tính text- decoration của css để thay thế. px Xác định chiều cao của thành phần . pt size em Không khuyến khích sử dụng, sử dụng thuộc % tính font-size của css để thay thế. px Xác định chiều rộng của thành phần . pt width em Không khuyến khích sử dụng, sử dụng thuộc % tính width của css để thay thế. Ví dụ: Thiết kế web Ngôn ngữ HTML Trang 18
KHOA CÔNG NGHỆ THÔNG TIN ĐẠI HỌC NHA TRANG 4.2.7. Các thẻ định dạng văn bản Thẻ Ý nghĩa Tô đậm văn bản. Nên dùng thay cho thẻ này Tô đậm văn bản Định nghĩa văn bản có size lớn hơn bình thường Làm cho văn bản nghiêng Định nghĩa văn bản được nhấn mạnh (emphasized) Định nghĩa văn bản có size nhỏ hơn bình thường Định nghĩa chỉ số dưới Định nghĩa chỉ số trên Định nghĩa văn bản được "thêm vào" Định nghĩa văn bản đã bị xóa Định nghĩa văn bản đã bị xóa. Nên dùng thay cho thẻ này. Định nghĩa văn bản đã bị xóa. Nên dùng thay cho thẻ này. Gạch dưới văn bản Ví dụ: This text is bold This text is strong This text is big This text is italic This text is emphasized This text is small This text contains subscript This text contains superscript This text contains inserted text This text contains deleted text This text contains deleted text This text contains deleted text This text contains underlined text  Chú ý: Các thẻ định dạng văn bản trên thông thường được thay thế bởi định dạng CSS Trang 19
KHOA CÔNG NGHỆ THÔNG TIN ĐẠI HỌC NHA TRANG Thẻ Ý nghĩa Định nghĩa văn bản được định dạng sẵn Xác định một đoạn trích dẫn dài. Xác định một đoạn trích dẫn ngắn. Mô tả cụm từ viết tắt (chú thích) Xác định thông tin liên hệ (địa chỉ, mail, điện thoại, ). Ví dụ: This is preformatted text. It preserves both spaces and line breaks. The pre tag is good for displaying computer code: for i = 1 to 10 print i next i Trang 20
KHOA CÔNG NGHỆ THÔNG TIN ĐẠI HỌC NHA TRANG Ví dụ: W3C là tổ chức quản lý các chuẩn Web Trích dẫn dài Đây là đoạn trích dẫn dài. Đây là đoạn trích dẫn dài. Đây là đoạn trích dẫn dài. Đây là đoạn trích dẫn dài. Trích dẫn ngắn Đây là trích dẫn ngắn Địa chỉ ĐH Nha Trang Số 02 Nguyễn Đình Chiểu Nha Trang, Khánh Hòa Trang 21
KHOA CÔNG NGHỆ THÔNG TIN ĐẠI HỌC NHA TRANG 4.3. Liên kết Một trong những đặc trưng cơ bản của văn bản HTML là nó chứa liên kết tới các văn bản khác hoặc một phần nội dung khác nằm trong văn bản đó. Để tạo liên kết chúng ta dùng thẻ Ví dụ: Để quy định cửa sổ trình duyệt mở tài nguyên được liên kết, ta dùng thuộc tính target. target = _blank : mở liên kết trong 1 cửa sổ mới target = _self : mở liên kết trong cửa sổ hiện tại (mặc định) target = _parent : mở liên kết trong cửa sổ cha của cửa sổ hiện tại Ví dụ: 4.3.1. Liên kết địa chỉ tuyệt đối Với liên kết này thì giá trị URL của thuộc tính target được khai báo đầy đủ: giao thức, tên miền, đường dẫn tới tài nguyên. Ví dụ: Liên kết địa chỉ tuyệt đối thường được dùng để tham chiếu đến tài liệu nằm ngoài máy chủ của trang web. 4.3.2. Liên kết địa chỉ tương đối Nếu liên kết đến tài liệu thuộc cùng máy chủ của trang web thì ta sử dụng địa chỉ tương đối là đường dẫn tới tài liệu tham chiếu Ví dụ: Trang web đang A soạn thảo mywebsite.html doc1.html doc1.html /B/doc2.html B doc2.html Trang 22
KHOA CÔNG NGHỆ THÔNG TIN ĐẠI HỌC NHA TRANG 4.3.3. Liên kết nội tại Liên kết nội tại thường được dùng tham chiếu đến 1 phần nội dung của trang web. Để làm được điều này ta thực hiện các bước sau: Đánh dấu (bookmark) vị trí bằng cách sử dụng thuộc tính name của thẻ Để tham chiếu đến phần nội dung cần thiết, ta liên kết đến vị trí đã đánh dấu. Ví dụ: 4.4. Bảng biểu (Table) Bảng trong HTML được định nghĩa bởi thẻ . Một bảng được chia thành các dòng (với thẻ ), và mỗi dòng lại được chia thành các data cell (được định nghĩa bởi thẻ ). Một data cell có thể chứa text, image, list, paragraph, form, table, Ví dụ: row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 Một số thuộc tính của bảng BORDER : kích thước viền BGCOLOR : màu nền ALIGN : canh chỉnh WIDTH, HEIGHT : kích thước CELLPADDING : khoảng cách từ viền của ô đến nội dung trong ô CELLSPACING : khoảng cách giữa các ô trong bảng ROWSPAN, COLSPAN: trộn các dòng hoặc cột Các thuộc tính trên có thể được điều chỉnh bởi CSS Trang 23
KHOA CÔNG NGHỆ THÔNG TIN ĐẠI HỌC NHA TRANG Ví dụ: Nhóm 2 ô hàng ngang thành 1 ô Name Telephone Bill Gates 555 77 854 555 77 855 Trang 24
KHOA CÔNG NGHỆ THÔNG TIN ĐẠI HỌC NHA TRANG Ví dụ: Nhóm 2 ô hàng dọc thành 1 ô First Name: Bill Gates Telephone: 555 77 854 555 77 855 4.5. Danh sách (List) 4.5.1. Danh sách không đánh số thứ tự Danh sách không đánh số thứ tự liệt kê các mục bằng một biểu tượng (bullet) ở đầu mỗi mục. Cú pháp Mục thứ 1 Mục thứ 2 Ví dụ: Bò beefsteak Salad trộn Nước trái cây ép Trang 25
KHOA CÔNG NGHỆ THÔNG TIN ĐẠI HỌC NHA TRANG Theo mặc định, mỗi mục thuộc mức thứ nhất của danh sách không đánh số thứ tự bắt đầu bằng một chấm tròn (disc). Để thay đổi biểu tượng liệt kê ta sử dụng thuộc tính TYPE hoặc Ví dụ: Bò beefsteak Salad trộn Nước trái cây ép 4.5.2. Danh sách đánh số thứ tự Danh sách đánh số thứ tự liệt kê các mục bằng các số (hoặc chữ cái) theo thứ tự ở đầu mỗi mục Cú pháp Mục thứ 1 Mục thứ 2 Ví dụ: Bò beefsteak Salad trộn Nước trái cây ép Có thể dùng thuộc tính TYPE để lựa chọn các cách đánh thứ tự khác nhau khi bắt đầu mỗi mục trong một danh sách có đánh số thứ tự: Chữ in hoa A,B,C, (TYPE=A) Chữ in thường a,b,c, (TYPE=a) Chữ số La mã lớn I,II,III, (TYPE=I) Chữ số La mã nhỏ i, ii, iii, (TYPE=i) Số thứ tự 1,2,3,4, (TYPE=1), đây là lựa chọn mặc định Cú pháp: hoặc (Hoạt động không ổn định trên IE) Nếu muốn đánh số thứ tự bắt đầu từ 1 đơn vị xác định, ta dùng thuộc tính START cho thẻ (với n là thứ tự trong dãy đánh số) Ví dụ: Bò beefsteak Salad trộn Nước trái cây ép Trang 26
KHOA CÔNG NGHỆ THÔNG TIN ĐẠI HỌC NHA TRANG 4.5.3. Danh sách định nghĩa Danh sách định nghĩa thể hiện các đề mục và phần mô tả (định nghĩa) các đề mục đó. Cú pháp Mục thứ 1 Mô tả mục thứ 1 Mô tả mục thứ 1 Mục thứ 2 Mô tả mục thứ 2 Ví dụ: Trái nho: Thường màu đỏ hoặc xanh Có vị ngọt Trái chuối: Thường màu vàng, có vị ngọt Ta có thể phối hợp các loại danh sách lại với nhau Ví dụ: Điểm tâm Hạng thường Phở Bún riêu Hạng sang Beefsteak Cá hồi Bữa trưa Đang lên thực đơn Trang 27
KHOA CÔNG NGHỆ THÔNG TIN ĐẠI HỌC NHA TRANG 4.6. Hình ảnh Trong HTML, hình ảnh được định nghĩa bởi thẻ . Thẻ có 2 thuộc tính cần thiết là src và alt, trong đó: src: đường dẫn tham chiếu tới hình ảnh. Có thể là đường dẫn tuyệt đối hoặc tương đối. alt: được sử dụng như một văn bản thay thế khi hình ảnh không hiển thị (hoặc không có sẵn). Cú pháp: Ví dụ:  Chú ý: Ta có thể kết hợp giữa thẻ liên kết 4.7. Multimedia Trong HTML, các đối tượng đa phương tiện khác như audio, video, được định nghĩa bởi thẻ và Ví dụ: Nếu trình duyệt không hỗ trợ player tương ứng thì các tập tin audio, video, sẽ không được thực hiện chính xác. 4.8. Khung (frame) Khi sử dụng frame, chúng ta có thể hiển thị nhiều hơn một tài liệu HTML trong một cửa sổ trình duyệt. Mỗi tài liệu HTML được gọi là một frame, và mỗi frame thì độc lập với những frame còn lại. Cú pháp Trang 28
KHOA CÔNG NGHỆ THÔNG TIN ĐẠI HỌC NHA TRANG Ví dụ: Xin lỗi, trình duyệt không xử lý được frame! Thẻ có 2 thuộc tính cơ bản COLS và ROWS dùng để xác định kích thước các frame của nó. Giá trị của cols và rows có thể là px (pixels), pt (points), % hoặc * Ví dụ: -> frameset này có 2 frame, trong đó frame thứ 2 có độ rộng (cols) gấp 3 lần độ rộng của frame thứ 1 Thẻ có các thuộc tính cơ bản sau NAME="tên_frame" : đặt tên cho frame SRC="URL" : địa chỉ trang web được hiển thị FRAMEBORDER="0|1" : xác định hiển thị viền của frame SCROLLING="yes|no|auto" : xác định thuộc tính hiển thị scrollbar NORESIZE : không cho phép hiệu chỉnh kích thước frame Trang 29
KHOA CÔNG NGHỆ THÔNG TIN ĐẠI HỌC NHA TRANG 4.9. Biểu mẫu (form) Một HTML form là một vùng trên văn bản HTML có chứa các đối tượng đặc biệt gọi là control (ví dụ: checkbox, radio button, ) và nhãn của các control đó. Người dùng "hoàn tất" nội dung trên form bằng cách thay đổi giá trị của các control này (nhập văn bản, chọn các mục trình đơn, ). Sau đó, người dùng gửi nội dung form tới một đối tượng có chức năng xử lý những dữ liệu này (chẳng hạn như một web server, mail server, ). Mọi form phải được bắt đầu bằng 1 thẻ . Thẻ có thể được đặt ở bất kỳ đâu trong phần body của văn bản HTML. Form phải được kết thúc bằng thẻ đóng . Ví dụ: Member Infomation Full Name: Password: Gender: Male Female Address: Trang 30
KHOA CÔNG NGHỆ THÔNG TIN ĐẠI HỌC NHA TRANG Các thuộc tính cơ bản của form: NAME : tên form METHOD: phương thức truyền dữ liệu (GET/POST) ACTION : chương trình/trang web xử lý dữ liệu của form. 4.9.1. Thẻ Thẻ là một thẻ rỗng thuộc inline element được sử dụng để nhập hay chọn thông tin. Thẻ có thể có nhiều dạng khác nhau, tùy thuộc vào thuộc tính tùy chọn TYPE, có thể là text, một checkbox, một trường password, một radio button, một button, a) Text & password Thẻ dạng text và password được sử dụng để nhập giá trị văn bản trên 1 dòng. Tuy nhiên với dạng password thì ký tự hiển thị bị che dấu bởi ký tự "*". Ví dụ: Full Name: Password Thuộc tính VALUE được sử dụng để cài đặt sẵn giá trị mặc định cho ô nhập liệu b) Radio button Thẻ dạng radio button cho phép chọn 1 phần tử duy nhất trong một nhóm lựa chọn được đưa ra. Ví dụ: Gender: Male Female Để có thể gom thành 1 nhóm lựa chọn thì thuộc tính NAME trong các thẻ phải có cùng giá trị. Thuộc tính CHECKED được sử dụng khi chúng ta muốn chọn mặc định 1 lựa chọn. Khi nội dung form được gửi tới server để xử lý thì nhóm lựa chọn radio button sẽ có giá trị của thuộc tính VALUE thuộc phần tử được chọn. Trang 31
KHOA CÔNG NGHỆ THÔNG TIN ĐẠI HỌC NHA TRANG c) Checkbox Thẻ dạng checkbox cho phép chọn nhiều phần tử trong một nhóm lựa chọn được đưa ra. Ví dụ: I have Bike Car House Các thuộc tính NAME, CHECKED tương tự như radio button. Riêng thuộc tính VALUE sẽ trả về mảng giá trị thuộc các phần tử được chọn. d) Hidden Thẻ dạng hidden được ẩn khi hiển thị trên trình duyệt, thẻ này dùng để lưu giá trị mà không cho người dùng biết nhưng vẫn được xử lý khi gửi nội dung form đến server. Ví dụ: e) Button Thẻ dạng button được sử dụng như một nút nhấn. Ví dụ: Ngoài button thông thường, form còn hỗ trợ 2 button đặc biệt: submit và reset. Button submit có chức năng chuyển nội dung của form đến server để xử lý, còn button reset giúp thiết lập các control trên form về trạng thái mặc định. Ví dụ: Input name: Trang 32
KHOA CÔNG NGHỆ THÔNG TIN ĐẠI HỌC NHA TRANG f) Image Thẻ dạng image cho phép tạo nút nhấn bằng hình. Ví dụ: Click here Trong thực tế, để có thể tạo nút nhấn bằng hình, ta chỉ cần tạo nút nhấn thông thường rồi thay đổi nền của nút bấm bằng mã định dạng CSS g) File Thẻ dạng file cho phép xử lý file upload Ví dụ: Select file to upload 4.9.2. Combo box (drop-down menu) Combo box là một danh sách có nhiều phần tử dạng menu thả xuống (drop-down menu), người sử dụng chỉ có thể chọn một phần tử tại mỗi thời điểm. Thẻ được dùng để tạo combo box với các phần tử trong danh sách được tạo bởi thẻ Cú pháp Phần tử 1 Phần tử 2 Ví dụ: Toyota Honda Mercedes Ford Trang 33
KHOA CÔNG NGHỆ THÔNG TIN ĐẠI HỌC NHA TRANG Thẻ có một số thuộc tính cơ bản NAME="name" : tên danh sách DISABLED : cố định danh sách, không hiển thị chọn lựa MULTIPLE : cho phép chọn nhiều phần tử, lúc này ta được list box Ví dụ: Toyota Honda Mercedes Ford SIZE="n" : xác định số phần tử hiển thị ban đầu trong danh sách, mặc định là 1. Thẻ có các thuộc tính cơ bản DISABLE : không cho phép chọn lựa phần tử SELECTED : phần tử được chọn sẵn mặc định. VALUE : xác định giá trị của phần tử (sẽ được gửi tới server khi submit). Ta có thể phân loại các phần tử (chia nhóm phần tử) bằng thẻ Ví dụ: Volvo Saab Mercedes Audi 4.9.3. TextArea Thẻ cho phép nhập văn bản dài trên nhiều dòng. Kích thước của vùng văn bản có thể được xác định bởi các thuộc tính ROWS và COLS, và cũng có thể điều chỉnh thông qua width và height trong CSS. Ví dụ: Bạn đang xem thẻ html textarea, là control cho phép nhập được văn bản, và có thể chứa rất nhiều dòng Trang 34
KHOA CÔNG NGHỆ THÔNG TIN ĐẠI HỌC NHA TRANG 4.10. Các thẻ bổ sung thông tin cho trang web 4.10.1. Thẻ Thẻ là một thành phần quan trọng trong file HTML, nó chứa các thông tin về file HTML đó như các thông tin mô tả trang web và website, bảng mã ngôn ngữ, các từ khoá, Và có thể có 1 số thông tin điều khiển trình duyệt, chỉ định cho các máy tìm kiếm (search engine), Thẻ được đặt trong phạm vi thẻ và thông tin mà thẻ cung cấp không hiển thị trên trình duyệt. Cú pháp hoặc Ví dụ: Một số thẻ thông dụng a) Meta Content Type Dùng để khai báo mã hiển thị cho trang web. Một số trình duyệt sẽ không thể hiện đúng nội dung nếu không khai báo thẻ này do không tự động điều chỉnh mã phù hợp cho trang web. Ví dụ: b) Meta Content Language (hoặc Meta Language) Thường dành cho các website không phải tiếng Anh, được dùng để khai báo ngôn ngữ của website. Các search engine thường dùng thẻ này để phân loại ngôn ngữ của website. Ví dụ: Trang 35
KHOA CÔNG NGHỆ THÔNG TIN ĐẠI HỌC NHA TRANG c) Meta Description Là thẻ mô tả tóm tắt nội dung của website, nội dung mô tả này được các search engine hiển thị khi tìm kiếm tối đa 160 ký tự. Ví dụ: Một thẻ Meta Description được viết tốt nhất nằm trong một câu hoàn chỉnh vàc liệt kê được đầy đủ các thông tin liên quan đến trang đó. Một số chú ý khi tạo mô tả trong Meta Description: Tạo mỗi description khác nhau cho mỗi trang web Phải chứa các thông tin quan trọng, trung thực Lập trình tự động tạo các miêu tả Phần miêu tả chất lượng, có các từ khóa và thương hiệu sản phẩm (nếu có) d) Meta Keywords Mô tả các từ khóa của website, tuy nhiên không được lạm dụng Ví dụ: e) Meta Author Dùng để mô tả tác giả của một nội dung trên website. Ví dụ: Trong Meta Author không được để địa chỉ email nhằm tránh bị spam mail. f) Meta Refresh Được dùng để tự động chuyển qua trang web khác. Ví dụ: Kết quả là sẽ chuyển qua trang sau 5 giây tính từ lúc trang web được tải lên trình duyệt. 4.10.2. Thẻ Thẻ được dùng để khai báo các lệnh xử lý client, điều khiển trang web hoạt động. Ví dụ: document.write("Hello World!") Trang 36
KHOA CÔNG NGHỆ THÔNG TIN ĐẠI HỌC NHA TRANG Thẻ có các thuộc tính cơ bản TYPE : xác định loại script nào được sử dụng (ví dụ: javascript, vbscript) SRC : đường dẫn của file script được sử dụng bổ sung Ví dụ: 4.10.3. Thẻ Thẻ được dùng để khai báo các mã định dạng CSS cho trang web, thay đổi hình thức thể hiện của trang web. Thẻ thường được đặt trong cặp thẻ Ví dụ: body{ background: #FFF; color:blue; } p{ font: bold italic 120% Arial, Tahoma; } 4.10.4. Thẻ Dùng để kết nối đến file định dạng CSS cho trang web thay vì đặt các mã trong thẻ Thẻ cũng được đặt trong cặp thẻ Ví dụ: Trang 37
KHOA CÔNG NGHỆ THÔNG TIN ĐẠI HỌC NHA TRANG 5. Khai báo chuẩn HTML 5.1. Khái niệm Mỗi tiêu chuẩn HTML và XHTML đều có một DOCTYPE (Document Type Declaration) để khai báo khi được kiểm tra rằng phiên bản HTML hoặc XHTML đang được sử dụng. DOCTYPE, thường được đặt ở đầu mỗi Web Document, là thành phần chính của các Web Document chuẩn mực. Thiếu DOCTYPE, các thành phần đánh dấu và định dạng sẽ không được kiểm duyệt. Một DOCTYPE thường gồm một đường dẫn cụ thể để khai báo với trình duyệt các quy chuẩn mà trình duyệt sẽ dựa vào đó để dịch và hiển thị các mã HTML hoặc XHTML, CSS một cách đúng đắn và thống nhất. Không chọn hoặc chọn nhầm DOCTYPE sẽ khiến các trình duyệt xem như là các web documents được viết theo kiểu tự do, gọi chung là "Quirks" mode. Theo đó, các trình duyệt sẽ xử lý trang web làm sao đó để nó tương thích ngược với các phiên bản của mỗi trình duyệt, và làm theo cách riêng của chúng. Vì thế, web documents sẽ được hiển thị khác nhau trên các trình duyệt khác nhau, đôi lúc có thể làm hỏng bố cục các web documents. 5.2. Khai báo Các DOCTYPE được xây dựng bởi W3C, do đó các DOCTYPE được cung cấp trên website của W3C. Tuy nhiên mã DOCTYPE thường khó nhớ và dài dòng (trừ HTML5), thông thường trong các IDE hỗ trợ soạn thảo code HTML như Adobe Dreamweaver hay Komodo Edit đều có tạo sẵn DOCTYPE. DOCTYPE thường được khai báo dưới dạng , tuy nhiên nó không phải là một thẻ HTML. DOCTYPE luôn được khai báo ở ngay đầu trang soạn thảo trang web, trước cả thẻ 5.2.1. HTML 4.01 Có 3 phiên bản DOCTYPE của HTML 4.01 a) HTML 4.01 Strict DOCTYPE này quy định văn bản HTML không được phép sử dụng một số thẻ đánh dấu, các thuộc tính dạng trình bày, không sử dụng frame. Các thẻ không sử dụng trong HTML 4.01 Strict Thẻ Mô tả Xác định applet (nhúng JAVA). Xác định font, màu sắc, hay kích cỡ mặc định của text trong trang. Canh giữa text. Xác định danh sách thư mục. Trang 38
KHOA CÔNG NGHỆ THÔNG TIN ĐẠI HỌC NHA TRANG Thẻ Mô tả Xác định font, màu sắc, và kích cỡ cho text. Hiển thị một hộp thoại để nhập văn bản. Xác định danh sách menu. Hiển thị gạch ngang text. Hiển thị gạch ngang text. Hiển thị gạch dưới text. Các thuộc tính dạng trình bày không sử dụng trong HTML 4.01 Strict ALIGN : xác định vị trí của phần tử BACKGROUND : xác định hình nền của phần tử. BGCOLOR : xác định màu nền của phần tử. BORDER : xác định viền của phần tử. TEXT : màu chữ của nội dung của phần tử thẻ TYPE : kiểu bullet của danh sách (thuộc thẻ ) HEIGHT, WIDTH : chiều cao, chiều rộng của đối tượng. b) HTML 4.01 Transitional DOCTYPE này quy định văn bản HTML được phép sử dụng một số thẻ đánh dấu, các thuộc tính dạng trình bày, không sử dụng frame. c) HTML 4.01 Frameset DOCTYPE này có đầy đủ tính chất như HTML 4.01 Transitional nhưng được sử dụng thêm frame. 5.2.2. XHTML 1.0 DOCTYPE của XHTML 1.0 cũng có 3 phiên bản tương tự và có cùng tính chất như HTML 4.01 là XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset a) XHTML 1.0 Strict b) XHTML 1.0 Transitional c) XHTML 1.0 Frameset Trang 39
KHOA CÔNG NGHỆ THÔNG TIN ĐẠI HỌC NHA TRANG 5.2.3. XHTML 1.1 DOCTYPE của XHTML 1.1 tương đương với đặc điểm và tính chất của XHTML 1.0 Strict nhưng có thêm một số module 5.2.4. HTML5 Do HTML5 không dựa trên ngôn ngữ SGML nên không có tham chiếu DOCTYPE, do đó đối với HTML5, W3C đề nghị tạm thời khai báo như sau 6. XHTML 6.1. Khái niệm XHTML (Extensible HyperText Markup Language – Ngôn ngữ đánh dấu siêu văn bản mở rộng) là một ngôn ngữ đánh dấu có cùng các khả năng như HTML 4.01, nhưng có cú pháp chặt chẽ hơn. XHTML 1.0 là khuyến cáo của W3C vào ngày 26 tháng 2, 2000. Một số lý do để sử dụng XHTML Quy tắc ngữ pháp trong XHTML ít tùy ý hơn so với HTML. Do đó, trang web sẽ ít lỗi hơn và ít tốn thời gian hơn để sữa chữa. XHTML rất thích hợp với nhiều yêu cầu do được tổ chức như một ứng dụng của XML, vì thế nó trở thành một lựa chọn tuyệt với cho những nhà thiết kế và phát triển Web Học tập và giảng dạy XHTML dễ dàng hơn do nó có các quy tắc chặt chẽ hơn. Đặc điểm mở rộng sẽ cung cấp cho nhu cầu về tính linh động lâu dài. Một điểm đáng chú ý nữa là XHTML có thể hiển thị chính xác trên mọi trình duyệt trên máy tính và kể cả trên các thiết bị di động. XHTML cần ít thời gian tải hơn so với HTML, qua đó cải thiện được vị trí trang web trên các trang web xếp hạng cũng như các hệ thống Search engine. 6.2. Các thay đổi về cú pháp trong XHTML so với HTML Trang web được viết bằng XHTML phải có đặc tả dạng chuẩn (well-form) theo W3C Phải có khai báo DOCTYPE XHTML 1.0 Strict XHTML 1.0 Transitional XHTML 1.0 Frameset Trang 40
KHOA CÔNG NGHỆ THÔNG TIN ĐẠI HỌC NHA TRANG XHTML 1.1 Tài liệu XHTML chỉ có duy nhất 1 phần tử gốc (chỉ có 1 cặp ) Phải có các thẻ cơ bản , , , Phải có khai báo namespace cho thẻ Tên thẻ và thuộc tính phải được viết thường Ví dụ: Trong HTML có thể viết Nhưng với XHTML phải viết Các thẻ phải đi theo cặp (mở-đóng) và lồng nhau đúng cách (như của XML) Ví dụ: Trong HTML có thể viết Chữ đậm và nghiêng Nhưng với XHTML phải viết Chữ đậm và nghiêng Các phần tử sau khi được mở phải được đóng Ví dụ: Trong HTML có thể viết Đây là một đoạn văn bản Nhưng với XHTML phải viết Đây là một đoạn văn bản > Thẻ rỗng cũng phải được đóng Giá trị của thuộc tính phải được đặt trong cặp dấu " " Ví dụ: Trong HTML có thể viết Nhưng với XHTML phải viết Không ghi tối giản thuộc tính Ví dụ: Trong HTML có thể viết Value Nhưng với XHTML phải viết Value Trang 41
KHOA CÔNG NGHỆ THÔNG TIN ĐẠI HỌC NHA TRANG 7. Giới thiệu HTML5 HTML5 là phiên bản mới nhất của HTML, được thiết kế nhằm thay thế HTML và XHTML. Thực tế HTML5 được phát triển từ 2004 nhưng mãi đến năm 2011 mới chính thức được ra mắt. HTML5 gây được sự chú ý bởi các tính năng mạnh mẽ và liên tục được phát triển của nó. Hiện nay HTML5 vẫn đang được phát triển và cải tiến. Về cơ bản, cách khai báo, cấu trúc và cú pháp HTML5 được phát triển dựa trên HTML 4.01 (là loại đang được dùng phổ biến hiện nay). HTML5 làm việc tốt với tất cả các phiên bản CSS. Tuy nhiên, với HTML5, quá trình mã hóa trở nên dễ dàng và hợp lý hơn. Các tính năng độc đáo và ấn tượng của HTML5 không những có trong tiến trình sử lý đa phương tiện như , , mà còn tích hợp các nội dung đồ họa vector (trước đây chính là thẻ ). Điều này có nghĩa rằng media và vector trên website được xử lý và thực hiện dễ dàng hơn, nhanh hơn mà ko cần phải bổ sung bất kì phần mềm liên quan hoặc thư viện API nào khác. Điều này giúp HTML5 tương thích với tất cả các thiết bị độc lập đặc biệt ở mảng di động. HTML5 kết hợp với CSS3 cũng làm cho các ứng dụng Web và các trang web hấp dẫn hơn. HTML5 có các tính năng mới được thêm vào giúp cho việc xây dựng ứng dụng web dễ dàng hơn rất nhiều. Ví dụ như nhiều màu sắc hơn và hỗ trợ đường cong, việc làm mờ, góc tròn (thay vì ép buộc các nhà thiết kế web sử dụng các hình ảnh để tạo ra các góc tròn), và dĩ nhiên là cả việc lưu trữ offline. Tất cả những điều này là một trang web trở nên dễ nhìn hơn, bắt mắt hơn và làm cho mọi thứ trở nên sát với những gì mà nhà thiết kế tưởng tượng trong đầu hơn. Tuy nhiên, do vẫn ở trong giai đoạn thử nghiệm và liên tục phát triển nên HTML5 cùng với CSS3 vẫn chưa được W3C công nhận là một chuẩn chính thức, ngoài ra các trình duyệt hiện tại cũng hỗ trợ HTML5 ở những mức độ khác nhau. Một số thẻ quan trọng mới được phát triển trong HTML5 - thẻ này định nghĩa một bài viết hoặc bình luận của người dùng. Nó độc lập với content của website. - thẻ này đánh dấu nội dung bên cạnh của trang hiện tại. Ví dụ như một slidebar. và - hai thẻ này giúp không cần định nghĩa id cho tiêu đề và cuối trang. - thẻ này định nghĩa phần menu điều hướng cho website. - đây là một thẻ quan trọng, nó giúp xác định các thành phần khác nhau trong website. , - hai thẻ này giúp hiển thị một đoạn phim hoặc một bài hát trên website đơn giản hơn rất nhiều. - thẻ này xác định một container các plugin tương tác với ứng dụng bên ngoài. - thẻ này cho phép vẽ đồ họa mà không cần phải qua bất kì đoạn mã hỗ trợ nào (chủ yếu là javascript). Trang 42
KHOA CÔNG NGHỆ THÔNG TIN ĐẠI HỌC NHA TRANG CHƯƠNG 2: CASCADING STYLE SHEET (CSS) Chương này giới thiệu ngôn ngữ định dạng phân tầng CSS2, một ngôn ngữ quy định cách trình bày của các phần tử HTML trên trang web, thay đổi cách hiển thị nội dung của trang web. 1. Giới thiệu CSS CSS (Cascading Style Sheets) là một ngôn ngữ đặc biệt để giúp cho việc định nghĩa các định dạng tài liệu được viết bằng ngôn ngữ siêu văn bản như HTML. CSS sẽ giúp tạo ra những giao diện web theo ý muốn của nhà phát triển. CSS được phát triển bởi một nhóm trong W3C, đứng đầu là Bert Bos and Hakon Lie. Khi HTML phiên bản đầu tiên được phát hành năm 1991 thì khái niệm định dạng nội dung được thể hiện ngay trong tên một số các thẻ HTML nhưng chỉ ở mức cơ bản. Đến năm 1996, phiên bản CSS đầu tiên đã được chính thức phát hành, cho phép tách riêng phần định dạng ra khỏi nội dung trang web. Phiên bản này bao gồm các chức năng cơ bản như font, color, background images v.v Hầu hết các trình duyệt trong giai đoạn này đều hỗ trợ CSS1. Năm 1998, CSS2 ra đời và đã thêm vào rất nhiều tính năng mới. CSS2 cho phép canh chỉnh vị trí cho các thẻ của HTML, cho phép thay đổi font chữ cho trang web và cho phép định dạng kiểu in Hầu hết các trình duyệt hiện nay đều hỗ trợ đầy đủ CSS2. Năm 2009, CSS 3 được phát triển song song với HTML5 với nhiều tính năng định dạng đặc biệt. CSS3 được chia thành module, các thành phần cũ được chia nhỏ và có một số thành phần mới được thêm vào. Tuy nhiên CSS3 vẫn chỉ dừng lại ở mức độ thử nghiệm và sự hỗ trợ của các trình duyệt dành cho CSS3 là khác nhau. 2. Mục đích sử dụng CSS CSS tách riêng phần định dạng ra khỏi nội dung trang web, các mã HTML sẽ gọn gàng hơn, dễ hiểu hơn, kích thước của tài liệu HTML cũng được giảm đáng kể. CSS giúp người thiết kế kiểm soát toàn bộ giao diện nhanh nhất và hiệu quả nhất, thuận tiện hơn trong việc chỉnh sửa giao diện từ đó tạo điều kiện thuận lợi cho việc bảo trì trang web. Các mã CSS có thể chia sẻ cho nhiều nhà thiết kế khác nhau. Các nhà thiết kế có thể xây dựng giao diện từ những mã CSS có sẵn mà không cần phải viết từ đầu. Có thể đồng bộ giao diện của nhiều trang web từ một mã CSS duy nhất. CSS còn cho phép áp đặt những kiểu trình bày thích hợp hơn cho các phương tiện khác nhau như màn hình máy tính, máy in, điện thoại, 3. Cú pháp CSS Cú pháp CSS cơ bản selector { property : value; } 3.1. Selector Các đối tượng được áp dụng các thuộc tính trình bày. Đó có thể là các tag HTML, class hay id. Ví dụ: body, h2, p, img, #title, #content, .username, Trang 43
KHOA CÔNG NGHỆ THÔNG TIN ĐẠI HỌC NHA TRANG Nếu có nhiều selector có chung định dạng (style) thì ta có thể nhóm các selector đó lại với nhau và chỉ phải khai báo css 1 lần duy nhất cho tất cả các thành phần này. Khi nhóm lại thì mỗi selector được phân cách bởi dấu "," Ví dụ: Giả sử có định dạng sau div { background: #FFF; color: blue; font: 12pt 'Times New Roman'; } p { background: #FFF; color: blue; } span { background: #FFF; color: blue; } Các định dạng trên có thể nhóm lại thành div, p, span { background: #FFF; color: blue; } div { font: 12pt 'Times New Roman'; } Các loại selector 3.1.1. Universal selector Universal selector tác động định dạng tới tất cả các đối tượng HTML trong trang web, đây là selector có độ ưu tiên thấp nhất của CSS và thường được sử dụng để reset css. Ký hiệu của selector này là * Ví dụ: * { margin: 0; padding: 0 } 3.1.2. Type selector 1 type selector sẽ hướng tới với 1 thẻ HTML cụ thể nào đó Ví dụ: h1 { color: blue; } Đoạn mã CSS trong ví dụ sẽ thiết lập tất cả nội dung của thẻ h1 trong trang web có chữ màu xanh. Trang 44
KHOA CÔNG NGHỆ THÔNG TIN ĐẠI HỌC NHA TRANG 3.1.3. Id selector Id selector được sử dụng để chỉ định style cho một phần tử HTML duy nhất. Id selector sử dụng thuộc tính id của phần tử HTML và được định nghĩa bắt đầu với dấu "#". Quy tắc đặt tên id: Tên id không phân biệt chữ hoa và chữ thường Tên id chỉ gồm các ký tự chữ cái, các chữ số từ 0 đến 9, dấu gạch ngang "-" hoặc dấu gạch chân "_". Mỗi phần tử HTML chỉ có tối đa 1 id, id này cũng là duy nhất trong toàn bộ code HTML của trang web. Ví dụ: 3.1.4. Class selector Class selector được sử dụng để chỉ định style cho một nhóm các phần tử HTML. Class selector sử dụng thuộc tính class của phần tử HTML và được định nghĩa bắt đầu với dấu chấm ".". Quy tắc đặt tên class: Tên class không phân biệt chữ hoa và chữ thường Tên class chỉ gồm các ký tự chữ cái, các chữ số từ 0 đến 9, dấu gạch ngang "-" hoặc dấu gạch chân "_". Có thể quy định một hoặc nhiều tên class cho một phần tử. Để chỉ định nhiều tên class, các tên được phân cách bằng dấu cách (spacebar) Ví dụ:  Chú ý:  Trong HTML 5, thuộc tính id và class có thể được sử dụng cho các phần tử HTML bất kỳ  Trong HTML 4.01 và XHTML 1.0, thuộc tính id và class không thể sử dụng với các phần tử: , , , , , , , và . Trang 45
KHOA CÔNG NGHỆ THÔNG TIN ĐẠI HỌC NHA TRANG 3.1.5. Descendant selector Descendant selector là cách chọn thành phần B là con hoặc các cấp sâu hơn của thành phần A nào đó. Cú pháp: A B {property_1: value_1 ; ; property_n: value_n } Ví dụ: div p { color : red; } Trong ví dụ trên, nội dung của thẻ p trong thẻ div sẽ được thiết lập chữ màu đỏ (các thẻ p không nằm trong thẻ div sẽ không được thiết lập). 3.1.6. Child selector Child selector là cách chọn thành phần B là con của thành phần A nào đó. Cú pháp: A > B {property_1: value_1 ; ; property_n: value_n } Ví dụ: div > p { color : red; } Trong ví dụ trên, nội dung của thẻ p là con của thẻ div sẽ được thiết lập chữ màu đỏ (các thẻ p nằm trong thẻ div nhưng không phải là con của thẻ div sẽ không được thiết lập). 3.1.7. Adjacent sibling selector Loại selector này có cú pháp là E1 + E2, trong đó E2 là thành phần cần hướng đến và loại selector này chỉ có tác dụng khi E1 và E2 có cùng 1 cha trong cấu trúc HTML đồng thời E1 là thành phần nằm liền trước E2. Cú pháp A + B {property_1: value_1 ; ; property_n: value_n } Ví dụ: Xét đoạn mã HTML sau Đoạn văn bản này là thành phần A Thành phần span này là B Thành phần div là C Chọn thành phần C dựa vào thành phần B và hiển thị với màu đỏ: span + div { color: red } Tương tự có thể chọn được B dựa vào A p + span { color: red } Nhưng không thể chọn C dựa vào A bởi vì giữa A và C có thành phần B. Trang 46
KHOA CÔNG NGHỆ THÔNG TIN ĐẠI HỌC NHA TRANG 3.1.8. Attribute selector Attribute selector dựa vào thuộc tính trong các phần tử HTML để xác định được thành phần cần hướng đến. Có những cách tạo attribute selector sau [att] - Chọn tất cả các thành phần có cùng thuộc tính tên là att Ví dụ: [href], [type] { color : red; } [att=value] - Chọn tất cả các thành phần với thuộc tính tên là att có giá trị value Ví dụ: [name="ABC"] { background:#FFF; } Ta có thể chi tiết selector này bằng cách khai báo thêm tên thẻ HTML kèm theo (được sử dụng chủ yếu khi định dạng các thẻ form) Ví dụ: input[type="text"] { background:#FFF; color: blue; } [att~=value] - Chọn tất cả các thành phần với thuộc tính tên là att có giá trị chứa cụm từ value Ví dụ: Giả sử có đoạn mã HTML sau Hello World Có các định dạng [name="ABC"] {color:red;} /* chỉ định dạng dòng chữ "Hello" có màu đỏ */ [name~="ABC"] {color:red;} /* định dạng dòng chữ "Hello" và "World" có màu đỏ vì thuộc tính name của 2 thẻ p đều chứa giá trị "ABC" */ [att|=value] - Chọn tất cả các thành phần với thuộc tính tên là att có giá trị value hoặc bắt đầu là value và theo sau đó là ký tự "-". Selector này chủ yếu được sử dụng để định dạng các thành phần có thuộc tính ngôn ngữ. Ví dụ: [lang|="en"] {color : red} /* tác dụng lên các giá trị "en", "en-us", */ Trang 47
KHOA CÔNG NGHỆ THÔNG TIN ĐẠI HỌC NHA TRANG 3.1.9. Pseudo elements và Pseudo classes Nếu như các selector khác xác định 1 thành phần dựa vào vị trí của thành phần đó trên cây cấu trúc trang web (document tree) thì với pseudo elements và pseudo classes, CSS cho phép xác định 1 thành phần dựa trên thông tin nằm ngoài document tree. a) Pseudo elements Pseudo elements tạo ra các khái niệm trừu tượng về document tree ngoài các quy định của HTML và XHTML. Ví dụ, HTML và XHTML không có cơ chế cho phép truy cập đến ký tự đầu tiên hay dòng đầu tiên của một thành phần nào đó. Tuy nhiên với pseudo elements, ta có thể hướng đến các thành phần này. :first-line - Chọn dòng đầu tiên của 1 thành phần :first-letter - Chọn ký tự đầu tiên của 1 thành phần Ví dụ: p:first-line { color : red; } p:first-letter { color:yellow; font-size: 20px; } :before và :after - Được dùng để thêm nội dung vào trước hoặc sau một thành phần. Ví dụ: h1:before {content:url(smile.gif);} /* Thêm hình ảnh trước nội dung thẻ h1 */ b) Pseudo classes Pseudo classes phân loại các thành phần dựa vào các yếu tố khác thay vì dựa vào tên, thuộc tính hay nội dung như các selector khác. Pseudo classes có tính động, có nghĩa là 1 thành phần có thể có được hoặc mất đi 1 pseudo class khi người dùng tương tác với thành phần đó (trừ :first- child và :last-child có thể rút trích ra từ document tree). :first-child và :last-child - Chọn con đầu tiên hoặc con cuối cùng của một thành phần. Ví dụ: giả sử có đoạn mã HTML sau Welcome Nha Trang City 2013 với các định dạng div:first-child {color : red;} /* Định dạng nội dung của thẻ h1 có màu đỏ */ div:last-child {color : blue;} /* Định dạng nội dung của thẻ strong có màu xanh */ :link - Thường được dùng với thẻ a nhằm định dạng liên kết chưa được truy cập. Ví dụ: giả sử có đoạn mã HTML sau với định dạng a.external:visited { color: blue } thì link trên sẽ được định dạng chữ màu xanh khi chưa được truy cập (click chuột) Trang 48
KHOA CÔNG NGHỆ THÔNG TIN ĐẠI HỌC NHA TRANG :visited - Tương tự như :link nhưng dùng định dạng liên kết đã từng được truy cập. :hover - có được khi người dùng di chuyển con trỏ chuột qua 1 thành phần nào đó. :focus - có được khi 1 thành phần được chọn (focus) :active - có được khi một thành phần được kích hoạt một sự kiện nào đó (ví dụ: sự kiện diễn ra trong khoảng thời gian người dùng nhấn và thả một phím) Ví dụ: a:hover{ color: yellow;} a:active {font-size: 2em;} input[type="text"]:focus {border: 1px solid red;}  Chú ý: Thứ tự ưu tiên của các selector 1. Id selector 2. Attribute selector 3. Class selector 4. Child selector Độ ưu tiên giảm dần 5. Adjacent sibling selector 6. Descendant selector 7. Type selector 8. Universal selector Nếu như có nhiều selector cùng loại định dạng trên một thành phần trong cùng một mẫu định dạng thì selector được khai báo sau sẽ có độ ưu tiên cao hơn Ví dụ: Xét mã HTML sau Hello World với các định dạng p strong {color:red;} strong {color:blue;} thì từ "World" sẽ được định dạng chữ màu đỏ mặc dù trong mã CSS màu xanh định dạng sau vì định dạng chữ màu đỏ có độ ưu tiên cao hơn (Descendant selector so với Type selector). 3.2. Property Là các thuộc tính quy định cách trình bày. Ví dụ: background- color, font-family, color, padding, margin, Mỗi thuộc tính CSS phải được gán một giá trị. Nếu có nhiều hơn một thuộc tính cho một selector thì phân cách các thuộc tính bằng dấu ";". Tất cả các thuộc tính trong một selector sẽ được đặt trong cặp { } sau selector. Trang 49
KHOA CÔNG NGHỆ THÔNG TIN ĐẠI HỌC NHA TRANG Ví dụ: body { background:#FFF; color:#FF0000; font-size:14pt } có thể viết các thuộc tính và giá trị thành các hàng riêng biệt body { background : #FFF; color : #FF0000; font-size : 14pt } 3.3. Value Mô tả giá trị của thuộc tính làm thay đổi định dạng thành phần được chọn của trang web. Ví dụ: body { background:#FFF; } /* Giá trị màu sắc của màu nền trang web là #FFF */ Đối với một giá trị có chứa khoảng trắng thì giá trị đó phải được đặt trong dấu nháy kép " " hoặc nháy đơn ' ' Ví dụ: font-family:"Times New Roman", Arial; Đối với các giá trị là đơn vị đo, không đặt một khoảng cách giữa số đo với đơn vị của nó, nếu không thì định dạng đó sẽ bị vô hiệu hóa trên một số trình duyệt như FireFox. Ví dụ: không nên viết font-size:14 pt; mà phải viết font-size:14pt; 4. Đơn vị CSS Trong CSS2 hỗ trợ các loại đơn vị là đơn vị đo chiều dài, màu sắc, đơn vị đo góc, thời gian, cường độ âm thanh. Tuy nhiên, sử dụng phổ biến nhất vẫn là đơn vị đo chiều dài và màu sắc. 4.1. Đơn vị đo chiều dài Đơn vị Mô tả % Phần trăm cm Centimeter mm Millimeter in Inch (1in ~ 2.54cm) px Pixels (điểm ảnh trên màn hình máy tính) pt Point (1pt = 1/72in) Trang 50
KHOA CÔNG NGHỆ THÔNG TIN ĐẠI HỌC NHA TRANG Đơn vị Mô tả pc Pica (1pc = 12pt) em 1em tương đương kích thước font hiện hành, nếu font hiện hành có kích cỡ 14px thì 1em = 14px. 1ex bằng chiều cao của chữ x in thường của font hiện hành. Do đó, đơn vị này không những phụ thuộc trên kích cỡ font ex chữ mà còn phụ thuộc loại font chữ vì cùng 1 cỡ 14px nhưng chiều cao chữ x của font Times New Roman và font Tahoma là khác nhau. 4.2. Đơn vị màu sắc Đơn vị Mô tả Tên màu tiếng Anh. Name Ví dụ: black, white, red, green, blue, cyan, Màumagenta, RGB v ới 3 giá trị R (Red – đỏ), G (Green – xanh lá), B (Blue – xanh biển) có trị từ 0 – 255 kết hợp với nhau tạo RGB (r,g,b) ra các màu khác nhau. Ví dụ: RGB(0,15,200) /* Xanh biển nhạt */ Màu RGB với 3 giá trị R, G, B có trị từ 0 – 100% kết hợp. RGB (%r,%g,%b) Ví dụ: RGB(25%,75%,25%) /* Xanh lá nhạt */ Hexadecimal RGB Mã màu RGB dạng hệ thập lục. Ví dụ: #FFFFFF: trắng, #000000: đen, #FF00FF: đỏ 5. Nhúng mã CSS vào file HTML Có ba cách khác nhau để nhúng CSS vào trong một tài liệu HTML 5.1. Kiểu thuộc tính (Inline Style) Đâ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. Trong trường hợp này, selector sẽ bị giản lược. Với kiểu thuộc tính, các định dạng CSS sẽ được định nghĩa bởi thuộc tính style của từng thẻ. Cú pháp: Ví dụ: Heading này có chữ màu đỏ Trang 51
KHOA CÔNG NGHỆ THÔNG TIN ĐẠI HỌC NHA TRANG 5.2. Kiểu tập hợp nhúng bên trong tài liệu HTML (Internal Style Sheet) Với cách này, tất cả các khai báo CSS được tập hợp vào trong thẻ của tài liệu HTML Cú pháp: selector_1 { property_1 : value_1; property_2 : value_2; property_n : value_n; } selector_2 { } Ví dụ: Trang 52
KHOA CÔNG NGHỆ THÔNG TIN ĐẠI HỌC NHA TRANG 5.3. Liên kết ngoài (External Style Sheet) Với cách này, các mã CSS sẽ được đưa vào trong một file (có phần mở rộng .css) và liên kết vào trang web. Đây là cách làm đặ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. Có 2 cách tạo liên kết đến file CSS 5.3.1. Sử dụng thẻ Cú pháp Ví dụ: Trang web vidu.html có mã như sau Trang 53
KHOA CÔNG NGHỆ THÔNG TIN ĐẠI HỌC NHA TRANG File externalCSSfile.css cùng thư mục web với file vidu.html và có các dòng mã sau Khi mở trang vidu.html sẽ có kết quả như sau 5.3.2. Sử dụng @import Cú pháp @import url("URL"); Ví dụ: Trang web vidu.html sử dụng file externalCSSfile.css để định dạng thì có thể viết mã Trang 54
KHOA CÔNG NGHỆ THÔNG TIN ĐẠI HỌC NHA TRANG  Chú ý: Nếu sử dụng thẻ để khai báo CSS liên kết ngoài thì chỉ có 1 file CSS được sử dụng. Nếu phải sử dụng nhiều file CSS ngoài thì có thể khai báo như sau Sau đó dùng JavaScript (hoặc ngôn ngữ lập trình Client khác) điều khiển lựa chọn sử dụng một trong các file CSS đã khai báo. Ví dụ: Nếu sử dụng @import để khai báo CSS liên kết ngoài thì tất cả các định dạng trong các file CSS đều sẽ được áp dụng vào tài liệu HTML. Nếu một thuộc tính của một đối tượng HTML cùng được định dạng thì giá trị thuộc tính của file CSS khai báo sau cùng sẽ được ưu tiên. Ví dụ: Trang 55
KHOA CÔNG NGHỆ THÔNG TIN ĐẠI HỌC NHA TRANG Các khai báo @import cần phải được thực hiện trước các mã CSS bổ sung khác Ví dụ: Không được viết p { background : #FFF; color : yellow; } @import url("externalCSSfile.css"); mà phải viết @import url("externalCSSfile.css"); p { background : #FFF; color : yellow; } Tùy theo thiết bị hiển thị trang web mà các định dạng CSS liên kết ngoài có thể bị giới hạn bởi thuộc tính media Ví dụ: hoặc @import url("style.css") print; Một số giá trị media thông dụng o all : giá trị mặc định, áp dụng khi muốn hiển thị định dạng trên tất cả các thiết bị. o screen : định dạng sử dụng màu mà màn hình máy tính có thể hiển thị được o print : định dạng theo chế độ in ấn (print preview), có thể chuyển các màu thành trắng đen nếu máy in đơn sắc. Chú thích trong CSS: ta đặt đoạn cần chú thích trong cặp ký tự /* và */ Ví dụ: /* Đoạn văn bản này nền trắng chữ vàng */ p { background : #FFF; color : yellow; } Trang 56
KHOA CÔNG NGHỆ THÔNG TIN ĐẠI HỌC NHA TRANG 5.4. Mức độ ưu tiên giữa các cách nhúng CSS vào tài liệu HTML Thứ tự ưu tiên áp dụng định dạng khi sử dụng các loại CSS được sắp xếp theo thứ tự giảm dần như sau 1. Inline Style 2. Internal Style Sheet 3. External Style Sheet 4. Browser Default Style Nếu muốn thay đổi thứ tự ưu tiên thì sử dụng từ khóa !important ngay phía sau định dạng cần ưu tiên. Ví dụ: 6. Các định dạng CSS cơ bản 6.1. Background 6.1.1. Màu nền Để điều chỉnh màu nền của một thành phần trên trang web, ta sử dụng thuộc tính background-color với giá trị là các mã màu. Ví dụ: body { background-color : #FFF; } 6.1.2. Ảnh nền 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. Ví dụ: body { background-image : url( /image/mybg.jpg); } Trang 57
KHOA CÔNG NGHỆ THÔNG TIN ĐẠI HỌC NHA TRANG 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 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ị: o repeat-x : Chỉ lặp lại ảnh theo phương ngang. o repeat-y : Chỉ lặp lại ảnh theo phương dọc. o repeat : Lặp lại ảnh theo cả 2 phương, đây là giá trị mặc định. o no-repeat : Không lặp lại ảnh. Ví dụ: body { background-image : url( /image/mybg.jpg); background-repeat : no-repeat; } Để có thể cố định ảnh nền so với nội dung trang web trong trường hợp nội dung trang web lớn hơn kích thước màn hình hiển thị (xuất hiện thanh cuộn), ta sử dụng thuộc tính background- attachment để điều khiển. Thuộc tính này có 2 giá trị: o scroll : Ảnh nền sẽ cuộn cùng nội dung trang web, đây là giá trị mặc định. o fixed : Cố định ảnh nền so với nội dung trang web. Khi áp dụng giá trị này, ảnh nền sẽ đứng yên khi ta đang cuộn trang web để đọc nội dung. Ví dụ: body { background-image : url( /image/mybg.jpg); background-repeat : no-repeat; background-attachment : fixed; } Khi định dạng ảnh nền cho một đối tượng của trang web, theo mặc định ảnh nền khi được đưa vào sẽ nằm ở góc trên, bên trái màn hình. Tuy nhiên với thuộc tính background-position ta có thể đặt ảnh nền ở bất cứ vị trí nào (trong không gian của thành phần mà nó làm nền). background-position dùng một cặp 2 giá trị để biểu diễn tọa độ đặt ảnh nền. Ví dụ: Giá trị Ý nghĩa background-position:50px 20px Ảnh được định vị 50px từ trái qua và 20px từ trên xuống. background-position:20% 30% Ảnh được định vị 20% từ trái qua và 30% từ trên xuống. background-position:top left Ảnh được định vị ở góc trái phía trên Trang 58
KHOA CÔNG NGHỆ THÔNG TIN ĐẠI HỌC NHA TRANG Định dạng background rút gọn Ví dụ: giả sử có định dạng sau #myCSS { background-color : #FFF; background-image : url( /image/mybg.jpg); background-repeat : no-repeat; background-attachment : fixed; background-position : top right; } định dạng trên có thể được viết rút gọn như sau #myCSS { background : #FFF url( /image/mybg.jpg) no-repeat fixed top right; } Tổng quát, cấu trúc rút gọn của CSS background như sau background : | | | | các thuộc tính không được đề cập sẽ nhận các giá trị mặc định. 6.2. Font 6.2.1. Thuộc tính font-family Thuộc tính font-family có công dụng định nghĩa một danh sách ưu tiên các font sẽ được dùng ểđ hiển thị một thành phần trang web. Theo đó, thì font đầu tiên được liệt kê trong danh sách sẽ được dùng để hiển thị trang web. Nếu như trên máy tính truy cập chưa cài đặt font này thì font thứ hai trong danh sách sẽ được ưu tiên cho đến khi có một font phù hợp. Có hai loại tên font được dùng để chỉ định trong font-family: family-name và generic family. o Family-name : Tên cụ thể của một font. Ví dụ: Arial, Tahoma, o Generic family : Tên của một họ gồm nhiều font. Ví dụ: sans-serif, serif, Ví dụ: h1 { font-family : Arial, "Times New Roman", sans-serif; } 6.2.2. Thuộc tính font-style Thuộc tính font-style định nghĩa việc áp dụng các kiểu in thường (normal), in nghiêng (italic) hay xiên (oblique) lên các thành phần trang web. Ví dụ: p { font-style : italic; } 6.2.3. Thuộc tính font-variant Thuộc tính font-variant được dùng để chọn giữa chế độ bình thường (normal) và small-caps của một font chữ. Trang 59
KHOA CÔNG NGHỆ THÔNG TIN ĐẠI HỌC NHA TRANG Một font small-caps là một font sử dụng chữ in hoa có kích cỡ nhỏ hơn in hoa chuẩn để thay thế những chữ in thường. Nếu như font chữ dùng để hiển thị không có sẵn font small-caps thì trình duyệt sẽ hiện chữ in hoa để thay thế. Ví dụ: div { font-variant : small-caps; } 6.2.4. Thuộc tính font-weight Thuộc tính font-weight mô tả cách thức thể hiện của font chữ là ở dạng bình thường (normal) hay in đậm (bold). Ngoài ra, chúng ta có thể mô tả độ in đậm bằng các con số từ 100 – 900. Ví dụ: p { font-weight : bold; } #myId { font-weight : 500; } 6.2.5. Thuộc tính font-size Kích thước của một font được định bởi thuộc tính font-size. Thuộc tính này nhận các giá trị đơn vị đo hỗ trợ bởi CSS. Ngoài ra font-size còn có các giá trị đặc biệt khác gồm xx-small, x-mall, small, medium, large, x-large, xx-large, smaller, larger. Ví dụ: span { font-size : 12pt; } .myClass { font-size : 120%; } div { font-size : medium; } Định dạng font rút gọn font : | | | | Ví dụ: p { font: italic bold 120% arial, verdana, sans-serif; } 6.3. Text 6.3.1. Màu chữ (thuộc tính color) Để định màu chữ cho một thành phần nào đó trên trang web chúng ta sử dụng thuộc tính color. Giá trị của thuộc tính này là các giá trị màu CSS hỗ trợ. Ví dụ: body { color : #000; } h1 { color : blue; } p { color : RGB(100, 50, 255); } 6.3.2. Thuộc tính text-indent Thuộc tính text-indent cung cấp khả năng tạo ra khoảng tab (vào đầu dòng) cho dòng đầu tiên của đoạn văn bản. Giá trị thuộc tính này là các đơn vị đo chiều dài cơ bản dùng trong CSS. Ví dụ: p { text-indent : 15px; } Trang 60
KHOA CÔNG NGHỆ THÔNG TIN ĐẠI HỌC NHA TRANG 6.3.3. Thuộc tính text-align Thuộc tính text-align giúp canh chỉnh văn bản cho các thành phần trong trang web. Thuộc tính này có 4 giá trị cơ bản: left (canh trái – mặc định), right (canh phải), center (canh giữa) và justify (canh đều). Ví dụ: 6.3.4. Thuộc tính vertical-align Thuộc tính vertical-align canh chỉnh văn bản theo chiều dọc. Thuộc tính này nhận các giá trị đơn vị đo chiều dài của CSS (hỗ trợ cả số âm). Ngoài ra vertical-align còn có các giá trị khác gồm baseline, sub, super, top, text-top, middle, bottom, text-bottom. Ví dụ: 6.3.5. Thuộc tính letter-spacing Thuộc tính letter-spacing được dùng để định khoảng cách giữa các ký tự trong một đoạn văn bản. Ví dụ: p { letter-spacing : 5px; } Trang 61
KHOA CÔNG NGHỆ THÔNG TIN ĐẠI HỌC NHA TRANG 6.3.6. Thuộc tính text-decoration Thuộc tính text-decoration thêm các hiệu ứng gạch chân (underline), gạch giữa dòng (line- through), gạch đầu (overline) Ví dụ: span { text-decoration : line-through; } 6.3.7. Thuộc tính text-transform Text-transform là thuộc tính qui định chế độ in hoa hay in thường của văn bản mà không phụ thuộc vào văn bản gốc trên HTML. Thuộc tính này có các 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ụ: div { text-transform : capitalize; } 6.4. 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. Box model bao gồm padding (vùng đệm), border (viền) và margin (canh lề) và các tùy chọn độ rộng và chiều cao của khối không gian. Ví dụ: Xét đoạn mã HTML sau 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. và định dạng CSS cho thành phần HTML ở trên như sau p { width :200px; margin :30px 20px; padding :20px 10px; border :1px dotted #000; text-align :justify } Với ví dụ trên mô hình hộp được khái quát như sau: Boder Vùng thể hiện nội dung của thành phần HTML Trang 62
KHOA CÔNG NGHỆ THÔNG TIN ĐẠI HỌC NHA TRANG 6.4.1. Margin Margin là vùng không gian bên ngoài viền của 1 thành phần HTML và có thể được chia thành 4 thuộc tính chi tiết: margin-top, margin-right, margin-bottom, margin-left. Giá trị margin tính theo các đơn vị đo chiều dài của CSS. Margin không có màu nền (trong suốt). Ví dụ: body { margin-top :80pt; margin-right :30pt; margin-bottom :40pt; margin-left :50pt; } có thể viết gọn thành body { margin : 80pt 30pt 40pt 50pt; } Cú pháp tổng quát margin : | | | hoặc margin : | (với value1 là giá trị margin-top và margin-bottom và value2 là giá trị margin-left và margin-right.) hoặc margin : (với value là cả 4 giá trị margin-top, margin-bottom, margin-left, margin-right.) Ví dụ: #myBox { margin : 20px 10px; } .myArea { margin : 10%; } 6.4.2. Padding Padding có thể hiểu như là một vùng đệm xung quanh nội dung của đối tượng HTML. Padding không ảnh hưởng tới khoảng cách giữa các các đối tượng như margin mà nó chỉ quy định khoảng cách giữa phần nội dung và viền của một đối tượng Trang 63
KHOA CÔNG NGHỆ THÔNG TIN ĐẠI HỌC NHA TRANG Cú pháp tổng quát: tương tự như margin padding : | | | hoặc padding : | (với value1 là giá trị padding-top và padding-bottom và value2 là giá trị padding-left và padding-right.) hoặc padding : (với value là cả 4 giá trị padding-top, padding-bottom, padding-left, padding-right.) 6.4.3. Border Border là một thành phần quan trọng trong một trang web. Nó thường được dùng trong trang trí, đóng khung cho một đối tượng cần nhấn mạnh, phân cách các đối tượng giúp trang web trông dễ nhìn hơn, Border có các thuộc tính cơ bản gồm border-width, border-color và border-style. a) border-width Border-width quy định độ rộng (độ dày mỏng) cho viền của một đối tượng HTML. Thuộc tính này có các giá trị thuộc đơn vị chiều dài của CSS và thêm các giá trị: thin (mảnh), medium (vừa), thick (dày). b) border-color Border-color là thuộc tính quy định màu viền cho một đối tượng HTML. Thuộc tính này nhận giá trị thuộc đơn vị đo màu CSS. c) boder-style Border-style là thuộc tính quy định kiểu viền thể hiện của một đối tượng HTML. CSS cung cấp các giá trị kiểu viền sau: dotted, dashed, solid, double, groove, ridge, inset và outset. Ngoài ra, hai giá trị none (mặc định) hay hidden dùng để ẩn đường viền. Ví dụ: h1 { border-width :thin; border-color :#FF0C00; border-style :solid; } có thể viết gọn lại thành h1 { border : thin #FF0C00 solid; } Như vậy, thuộc tính border có thể được viết rút gọn như sau border : | | Trang 64
KHOA CÔNG NGHỆ THÔNG TIN ĐẠI HỌC NHA TRANG Ngoài ra, thuộc tính border còn có thể chia thành 4 thuộc tính thành phần: border-top, border-right, border-bottom và border-left. Ví dụ: div { border-top-width : 5px; border-top-color : blue; border-top-style : double; border-right : 1% #000 dotted; border-bottom : 2pt RBG(20, 200, 125) groove; border-left : none; } 6.4.4. Width & Height Thuộc tính height và width dùng để định kích cỡ cho một thành phần HTML. a) Thuộc tính width, max-width, min-width Width là thuộc tính CSS dùng để quy định chiều rộng cho một thành phần HTML. Width nhận các giá trị thuộc đơn vị đo chiều dài CSS. Ví dụ: img { width : 100px; } Để giới hạn chiều rộng tối đa của một thành phần HTML, ta dùng thuộc tính max-width Ví dụ: img { max-width : 500px; } Để giới hạn chiều rộng tối thiểu của một thành phần HTML, ta dùng thuộc tính min-width Ví dụ: img { min-width : 50px; } b) Thuộc tính height, max-height, min-height Các thuộc tính height, max-height, min-height quy định chiều cao, chiều cao tối đa, chiều cao tối thiểu cho một thành phần HTML Ví dụ: img { height : 200px; max-height : 300px; min-height : 100px; } Trang 65