Bài giảng Thiết kế web - Ths. Phạm Đào Minh Vũ

Mở đầu về thiết kế web CHƯƠNG 1 Giảng viên : Ths. PHẠM ĐÀO MINH VŨ Khoa CNTT-Trường CĐ CNTT TPHCM Email : vupdm@itc.edu.vn Nội dung üMột số khái niệm üPhân loại trang web üMột số bước chính trong phát triển website üCông bố website trên internet üTạo Domain Free trên Internet Một số khái niệm Mạng, giao thức, Internet ü Mạng máy tính (Computer Network): Hệ thống các máy tính được kết nối với nhau nhằm trao đổi dữ liệu. ü Giao thức: Protocol: – Tập hợp các quy tắc được thống nhất giữa các máy tính trong mạng nhằm thực hiện trao đổi dữ liệu được chính xác – Ví dụ: TCP/IP, HTTP, FTP, Các dịch vụ cơ bản trên Internet ü World Wide Web : Truy cập, tìm kiếm thông tin ü Email – Electronic Mail : Trao đổi thông điệp, văn bản ü FTP – File Tranfer Protocol : Trao đổi tập tin, chương trình, ü Chat – Tán gẫu: Người dùng trao đổi trực tiếp với nhau bằng văn bản, âm thanh, hình ảnh, Địa chỉ IP: IP Address ü Xác định một máy tính trong mạng dựa trên giao thức TCP/IP. Hai máy tính trong mạng có 2 địa chỉ IP khác nhau ü Có dạng x.y.z.t (0 ≤ x, y, z, t ≤ 255) ü Ví dụ: 74.125.71.105: địa chỉ máy chủ web của Google.com. ü Đặc biệt: địa chỉ: 127.0.0.1 (địa chỉ loopback) là địa chỉ của chính máy tính đang sử dụng dùng để thử mạng Tên miền: Domain Name ü Là tên được “gắn” với 1 địa chỉ IP. ü Máy chủ DNS thực hiện việc “gắn” (ánh xạ) ü Ở dạng văn bản nên thân thiện với con người ü Được chia thành nhiều cấp, phân biệt bởi dấu chấm (.). Đánh số cấp lần lượt từ phải sang trái bắt đầu từ 1. ü Cấp lớn hơn là con của cấp nhỏ hơn ü Ví dụ: it.dlu.edu.vn gắn với 203.162.18.59 trong đó: – vn: Nước Việt Nam (Cấp 1) – edu: Tổ chức giáo dục (Cấp 2) – dlu: Tên cơ quan (Cấp 3) – it: đơn vị nhỏ trong cơ quan (Cấp 4) ü Đặc biệt: Tên localhost được gắn với 127.0.0.1 Máy chủ (máy phục vụ): Server ü Là máy tính chuyên cung cấp tài nguyên, dịch vụ cho máy tính khác. ü Thường được cài các phần mềm chuyên dụng để có khả năng cung cấp ü Một máy chủ có thể dùng cho một hay nhiều mục đích. Tên máy chủ thường gắn với mục đích sử dụng. Ví dụ: – File server – Application server – Mail server – Web server ü Thực tế: các máy chủ có cấu hình cao, khả năng hoạt động ổn định Máy khách: Client üMáy khai thác dịch vụ của máy chủ üVới mỗi dịch vụ, thường có các phần mềm chuyên biệt để khai thác üMột máy tính có thể vừa là client vừa là server üMột máy tính có thể khai thác dịch vụ của chính nó. Cổng dịch vụ: Service Port – Là số Î [0; 65535] xác định dịch vụ của máy chủ – 2 dịch vụ khác nhau chiếm các cổng khác nhau – Mỗi dịch vụ thường chiếm các cổng xác định, ví dụ: • Web: 80 • FTP: 21 Chuỗi định vị tài nguyên (địa chỉ): URL (Uniform Resource Locator) ü Tài nguyên: file trên mạng ü URL: Xác định vị trí và cách khai thác file ü Cấu trúc: giao_thức://địa_chỉ_máy:cổng/đường_dẫn/tên_file ü Ví dụ: ü Trong trường hợp mặc định, nhiều thành phần có thể bỏ qua: – Giao thức, cổng: Được trình duyệt đặt mặc định – Tên file: được máy chủ đặt mặc định Trang web, web site, World Wide Web ü Trang web: Web page: – Là một trang nội dung – Có thể được viết bằng nhiều ngôn ngữ khác nhau (HTML, ASP.NET, PHP,) nhưng kết quả trả về client là HTML ü Web site: – Tập hợp các trang web có nội dung thống nhất phục vụ cho một mục đích nào đó ü World Wide Web (WWW): Tập hợp các web site trên mạng internet. Web server, Web browser ü Web server: – Máy tính dùng lưu trữ các trang Web, có kết nối Internet, cung cấp thông tin cho người dùng – Một số phần mềm web server chuyên dụng: • Apache: mã nguồn mở • Internet Information Services (IIS): Sản phẩm của Microsoft ü Web Browser: – Phần mềm chạy trên client để khai thác dịch vụ web – Một số Web browser: • Nescape • Mozilla Firefox • Internet Explorer (IE): tích hợp sẵn trong windows • ... Mô hình hoạt động website INTERNET Máy chủ DNS Địa chỉ youtube.com ở đâu em ? Dạ 74.125.67.100 anh Máy chủ Youtube 74.125.67.100Đưa đây trang chủ ? Phân loại trang web Phân loại trang web üDựa vào công nghệ phát triển, có 2 loại: – Web tĩnh: Thường được viết bằng ngôn ngữ HTML kết hợp JavaScript. – Web động: • Thường để chỉ những website có Cơ sở dữ liệu • Có thể được viết bằng ngôn ngữ ASP, ASP.NET, PHP, JSP, với CSDL có thể là Access, SQLServer, MySQL, Oracle, WEB TĨNH – Ưu Điểm: • Thiết kế đồ họa đẹp, ấn tượng, • Tốc độ truy cập nhanh • Chi phí đầu tư thấp, dễ phát triển, – Khuyết điểm: • Khó khăn trong thay đổi, cập nhật thông tin • Thông tin cố định, không mang tính linh hoạt • Khó tích hợp, nâng cấp, mở rộng. • Tương tác yếu WEB ĐỘNG – Ưu Điểm: • Thông tin được cập nhật nhánh chóng, liên tục => tạo sự thu hút • Tương tác người dùng mạnh mẽ • Thực hiện các tác vụ phức tạp với độ bảo mật cao như : mua bán, thanh toán trực tuyến, • Ít tốn công sức cập nhật thông tin – Khuyết điểm: • Tốc độ truy cập chậm (do kết nối CSDL và có xử lý tính toán phức tạp) • Chi phí đầu tư cao, Một số bước chính trong phát triển website Các bước üTương tự với phân tích và thiết kế hệ thống. 1. Đặc tả 2. Phân tích 3. Thiết kế 4. Lập trình 5. Kiểm thử Một số điều cần chú ý ü Đặc tả: – Web để làm gì? – Ai dùng? – Trình độ người dùng? – Nội dung, hình ảnh? ü Phân tích – Mối liên quan giữa các nội dung? – Thứ tự các nội dung? Một số điều cần chú ý (tt) ü Thiết kế – Sơ đồ cấu trúc website – Giao diện – Tĩnh hay động – CSDL – Nội dung từng trang – Liên kết giữa các trang ü Xây dựng – Cấu trúc thư mục – Các modul dùng chung – Một số điều cần chú ý (tt) üKiểm thử – Kiểm tra trên nhiều trình duyệt – Kiểm tra trên nhiều loại mạng – Kiểm tra tốc độ – Kiểm tra các liên kết – Thử các lỗi bảo mật – Công bố website trên Internet Các điều kiện cần thiết ü Xây dựng website ü Quyền sử dụng hợp pháp ü Domain (tên miền) – Sử dụng tên miền con miễn phí – Đăng ký tên miền riêng ü Hosting – Sử dụng miễn phí – Thuê không gian riêng – Tự host website của mình ü Duy trì và phát triển và quảng bá website Đăng ký tên miền üXác định tên – Tên tiếng Việt – Tên giao dịch tiếng Anh – Tên viết tắt üXác định nơi đăng ký üĐăng ký tên miền càng sớm càng tốt – Thủ tục đơn giản, nhanh chóng – Kinh phí rẻ • Việt Nam: 450.000+480.000/năm • Nước ngoài: 8 – 12USD Hosting ü Xác định môi trường vận hành của website – Máy chủ Windows • Support ASP, PHP, SQL Server, MySQL • Đắt hơn máy chủ Linux – Máy chủ Linux • Support PHP, JSP, MySQL • Rẻ hơn máy chủ Windows ü Xác định dung lượng thực tế của website, khả năng sẽ mở rộng ü Xác định băng thông, các dịch vụ đảm bảo an toàn, an ninh, backup dữ liệu Duy trì website üCập nhật thông tin – Web tĩnh: • Upload Webpage thông qua Web Browser • Upload Webpage thông qua FTP program (Cute FTP, FTP Voyager, ) – Web động • Form cập nhật CSDL nếu Site có kết nối CSDL Phát triển website üCác chiến lược marketing – Sử dụng thư điện tử – Đầu tư quảng cáo 1 đợt trên các phương tiện truyền thông (Báo, đài, Tivi) üLiên kết với các site cùng loại – Trao đổi banner – Giới thiệu lẫn nhau. Quảng bá website ü Quảng bá Website – Đăng ký Website vào các máy tìm kiếm trong nước và thế giới (search engine) • Vietnam Searchengine: Panvietnam, vinaseek • Global Searchengine: google, altavista, hotboot – Nâng cao vị trí của Website trong hệ thống xếp hạng Website thế giới. • Google rank (the important of website: 1-10) • Alexa rank: Traffic ranking of website. Phát triển website ü Nâng tầm phát triển Website – Tự động hoá dần các chức năng của Website. – Bảo mật web – Phát triển các chức năng phức tạp như : mua bán, thanh toán trực tuyến, – Biến Website thành một môi trường kinh doanh thực sự hiệu quả 24/24 trên Internet. Ngôn ngữ HTML Phần cơ bản CHƯƠNG 2 Giới thiệu HTML ü HTML (Hypertext Markup Language) : Ngôn ngữ đánh dấu siêu văn bản, dùng để thiết kế trang web ü Mô tả cách thức mà dữ liệu được hiển thị thông qua các ký hiệu đánh dấu gọi là tag (Element) ü File HTML phải có đuôi HTML hoặc HTM ü File HTML có thể được tạo bất kỳ trình soạn thảo web hoặc văn bản nào ü HTML trở thành 1 chuẩn của Internet do tổ chức World Wide Web Consortiun (W3C) phát triển và duy trì. Ví dụ HTML üCấu trúc tổng quát của 1 file HTML: üĐể xem kết quả, nhấn đúp vào file hello.html Title of page This is my first homepage. This text is bold HTML Elements (Tag) ü HTML là văn bản bao gồm các HTML Element, Hay được gọi là các HTML Tag ü Mỗi tag có 1 tên, được bao giữa 2 kí tự “<“ và “>” ü Tag thường đi theo cặp. Ví dụ ü Thẻ đầu tiên gọi là thẻ mở (), thẻ sau gọi là thẻ đóng () ü Văn bản giữa thẻ mở và thẻ đóng là nội dung của HTML Tag ü HTML tag không phân biệt hoa thường. giống Ví dụ về HTML Elements ü Đây là 1 HTML Element ü Trong đó : – b là tên thẻ đánh dấu bắt đầu và kết thúc element – Thẻ mở – Thẻ đóng – Nội dung của HTML Element là : This text is bold – Khi hiển thị trên trình duyệt : This text is bold – Mục đích của thẻ b là in đậm văn bản nằm trong nó This text is bold Ví dụ về HTML Tag (tt) ü Đây cũng là 1 HTML Tag ü Trong đó – body là tên thẻ – Thẻ mở , thẻ đóng – Nội dung : – Mục đích thẻ body là chứa tất cả các Element nội dung trong trang HTML This is my first homepage. This text is bold This is my first homepage. This text is bold Chú ý Mặc dù thẻ HTML không phân biệt hoa thường và nhiều trang web sử dụng chữ hoa. Thế nhưng để phù hợp với các tiêu chuẩn mới nhất của web ta sẽ sử dụng chữ thường cho tất cả các thẻ HTML Cấu trúc trang HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " transitional.dtd"> <html xmlns="" lang="en"> Title here <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> Thẻ DOCTYPE üMọi trang HTML đều nên bắt đầu bằng 1 thẻ DOCTYPE để chỉ ra loại ngôn ngữ đánh dấu nào đang sử dụng. üTrong ví dụ trên ta dùng XHTML 1.0 Transitional üDOCTYPE sẽ cho trình duyệt biết nên render theo kiểu nào ? Nếu bỏ DOCTYPE trình duyệt sẽ render theo kiểu riêng của mình (Quick mode) mà không theo chuẩn Cấu trúc trang HTML đơn giản üCấu trúc 1 trang HTML đơn giản không DOCTYPE üCách xem mã nguồn của 1 trang web : Click chuột phải , nhấn view source Title here Thẻ html ü . . . : Bắt đầu và kết thúc tập tin HTML ü . . . : Phần đầu trang web ü : Khai báo thông tin trang web ü Nội dung tiêu đề : Hiển thị nội dung trên thanh tiêu đề ü : Là tag rỗng, chứa khai báo đến các tập tin có liên quan như tập tin định dạng thể hiện (.css), xử lý (.js), ü Nội dung trên trang : Hiển thị nội dung trên trang. ü : Khai báo mẫu định dạng chung cho 1 Element nào đó (tag , , ,) ü : Khai báo phần ngôn ngữ tham gia xử lý trang web, như Javascript, Vbscript, Tiêu đề - Heading - Thẻ ü Thẻ heading dù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 ü Thẻ heading dùng để đánh dấu các đoạn text mang ý nghĩa quan trọng như tiêu đề bài viết, các mục lục chứ không phải dùng để in đậm văn bản Thẻ h demo üTrình duyệt sẽ tự động thêm dòng trống trước và sau 1 heading Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6 Đoạn văn – Thẻ p üThẻ p dùng để đánh dấu một đoạn văn (paragraph) üTrình duyệt sẽ tự động thêm 1 dòng trống trước và sau mỗi đoạn văn üVí dụ This is a paragraph This is another paragraph Thẻ p demo This is a paragraph This is another paragraph Lưu ý ü Nhớ đóng thẻ ü Quên đóng thẻ là lỗi rất hay mắc phải. ü Lỗi này khiến 1 số trình duyệt hiển thị sai. Tuy 1 số có thể hiển thị đúng nhưng sẽ không đúng trong mọi trường hợp ü Việc quên đóng thẻ sẽ khiến mã nguồn HTML khó đọc, khó sửa khi có lỗi xảy ra. ü Không đóng thẻ là không tuân theo chuẩn web This is a paragraph This is another paragraph Ngắt dòng – Thẻ br üThẻ br dùng để ngắt 1 dòng (xuống hàng) nhưng không phải để bắt đầu 1 đoạn văn üThẻ br sẽ ngắt 1 dòng tại bất kỳ nơi nào nó xuất hiện üChú ý br là thẻ rỗng (nó không có thẻ đóng, thẻ mở). This is a paragraph with line breaks Thẻ br demo This is a paragraph with line breaks Thẻ ü Dùng để định nghĩa 1 secsion riêng trong trang web, do đó có thể chứa các tag khác như tag đến , , Trung tâm tin học Trường Công nghệ thông tin Thẻ - Horizontal Ruler ü Dùng để kẻ đường kẻ ngang ü Sử dụng thuộc tính siza va width để thay đổi độ rộng và chiều dài đường kẻ Trung tâm tin học HTML Attributes ü Bên cạnh tên, HTML Tag có thể có thêm các thuộc tính Hello World Tên thuộc tính. Thuộc tính element bgcolor qui định màu nền cho body Giá trị thuộc tính. bgcolor = “red”. Màu nền trang web sẽ có màu đỏDấu nháy kép (”)hoặcđơn (‘) dùng để đánh dấu bắt đầu và kết thúc của giá trị thuộc tính. Ví dụ HTML Attribute üCanh giữa heading üGiá trị align : – center : canh giữa – left : canh trái – right : canh phải My page Ví dụ HTML Attribute üĐặt màu nền và màu chữ cho trang web : übgcolor qui định màu nền, text qui định màu chữ üMàu có thể là chữ (red,yellow) hoặc số (Ví dụ #FF0000, #FFFF00 ) Hello World HTML color ü Màu sắc bao gồm 3 giá trị chủ đạo là : R (Red), G (Green ) và B (Blue) ü Giá trị thấp nhất của của R,G,B là 0 và cao nhất là 255(FF) ü Có 3 cách giá trị 1 màu : – Sử dụng tên. Ví dụ red, black, blue, yellow,green,white,red ... – Sử dụng giá trị hexa. Ví dụ : #FF00FF,#00FF11,#445566 ü Cách dùng phổ biến nhất là ghi màu dưới dạng hexa Ví dụ HTML color BẢNG Mà MÀU Tên màu Trị Tên màu Trị Black Đen #000000 Olive Nâu vàng #808000 Red Đỏ #FF0000 Teal Nâu sẫm #008080 Blue Xanh #0000FF Maroon Nâu #800000 Navy X.Đãm #000800 Gray Xám #808080 Lime V.Chanh #FFFFFF Fuchsia Hồng #FF00FF White Trằng #FFFFFF Green Lá #008000 Rurple Đ.Tía #800080 Silver Bạc #C0C0C0 Yellow Vàng #FFFF00 Aqua Ngọc #00FFFF Demo HTML color Quê hương tôi có con sông xanh biếc Nước trong xanh soi bóng những hàng tre Quê hương là cầu tre nhỏ Mẹ về nón lá nghiêng che Cách lấy màu hexa ü Nếu trong bức ảnh hoặc 1 trang web có màu chúng ta cần. Làm sao ta biết giá trị hexa của nó ? ü Trả lời : – Là ảnh : Sử dụng các chương trình chỉnh sửa ảnh như Photoshop. Dùng tính năng Eye Drop ( ) – Là web : Dùng add-on ColorZilla của Firefox (Download tại colorzilla.com). Sau khi install, click vào biểu tượng (góc trái dưới cùng) sau đó chọn điểm nào trên web cần lấy giá trị màu. – Một cách khác là vào trang HTML Formats – Định dạng văn bản ü HTML cung cấp nhiều thẻ dùng để định dạng văn bản ü Có 2 loại thẻ chính : – Thẻ định dạng vật lý : là các thẻ chỉ định trình duyệt phải hiển thị đoạn văn bản như thế nào, font to hay font nhỏ, đậm hay lợt, nghiêng hay bình thường – Thẻ định dạng logic : là các thẻ chỉ định cho trình duyệt biết loại nội dung của đoạn văn bản . Trình duyệt tự do hiển thị theo cách của mình. Thẻ định dạng vật lý Element Meaning Notes In nghiêng In đậm Dạng máy đánh chữ Gạch dưới Bị loại bỏ trong các phiên bản mới HTML và XHTML Gạch ngang Bị loại bỏ trong các phiên bản mới HTML và XHTML Gạch ngang Bị loại bỏ trong các phiên bản mới HTML và XHTML Chỉ số Số mũ Font bự hơn 1 đơn vị Font bé hơn 1 đơn vị Demo thẻ định dạng vật lý This text is bold This text is italic This text is big This text is small This text contains subscript This text contains superscript Demo thẻ định dạng vật lý Physical Text Elements This is Bold This is Italic This is Monospaced This is Underlined This is Strike-through This is also Strike-through This is Big This is even Bigger This is Small This is even Smaller This is Superscript This is Subscript This is Bold, italic, and underlined Thẻ định dạng logic Thẻ Ý nghĩa Hiển thị phổ biến Chữ viết tắt (abbreviation). Ví dụ Mr M. Thường Cụm từ viết tắt (acronym). Ví dụ WWW) Thường Trích dẫn nguồn In nghiêng Mã nguồn Chìều dài cố định Định nghĩa In nghiêng Nhấn mạnh In nghiêng .. Phím bấm Chiều dài cố định Trích dẫn trong dòng Bao bởi 2 dấu nháy(not in IE 6) Đoạn text ví dụ Chiều dài cố định Nhấn mạnh cực kỳ In đậm Biến lập trình In nghiêng Demo thẻ định dạng logic Physical Text Elements This is Bold This is Italic This is Monospaced This is Underlined This is Strike-through This is also Strike-through This is Big This is even Bigger This is Small This is even Smaller This is Superscript This is Subscript This is Bold, italic, and underlined Demo thẻ định dạng logic Lưu ý ü Dùng thẻ định dạng vật lý, tất cả các trình duyệt đều hiển thị đoạn văn bản giống nhau( ví dụ thẻ thì đều sử dụng font đậm) ü Thẻ định dạng logic, không qui định việc hiển thị mà qui định loại hay ngữ nghĩa của văn bản. Các trình duyệt khác nhau có thể hiển thị khác nhau ü Để thay đổi hiển thị của thẻ logic, ta phải dùng CSS. HTML Preformat üTrình duyệt sẽ tự động lược bỏ khoảng trắng và các kí tự xuống dòng khi hiển thị trang HTML üXem ví dụ : for i = 1 to 10 print i next i HTML Preformat ü Để giữ nguyên định dạng (khoảng trắng, xuống dòng,) ta phải sử dụng thẻ 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 Ví dụ thẻ pre This is P R E F O R M A T T E D T E X T SPACES are ok! So are RETURNS! This is NOT P R E F O R M A T T E D T E X T SPACES and RETURNS are lost. Mã nguồn – thẻ code,kbd,var... Computer code Keyboard input Teletype text Sample text Computer variable Note: These tags are often used to display computer/programming code. Địa chỉ với thẻ address Donald Duck BOX 555 Disneyland USA Viết tắt với abbr, acronym UN WWW The title attribute is used to show the spelled-out version when holding the mouse pointer over the acronym or abbreviation. This only works for the acronym element in IE 5. This works for both the abbr and acronym element in Netscape 6.2. Viết từ phải qua trái với thẻ bdo If your browser supports bi-directional override (bdo), the next line will be written from the right to the left (rtl): Here is some Hebrew text Trích dẫn với blockquote, q Here comes a long quotation: This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. Here comes a short quotation: This is a short quotation With the block quote element, the browser inserts line breaks and margins, but the q element does not render as anything special. Đánh dấu chèn, xóa với ins, del a dozen is twenty twelve pieces Most browsers will overstrike deleted text and underline inserted text. Some older browsers will display deleted or inserted text as plain text. HTML Entities ü Trong HTML số kí tự có ý nghĩa đặc biệt như (<, /, ...). Làm thế nào để hiển thị nó ? ü Trình duyệt tự động loại bỏ các khoảng trắng dư thừa ? Làm thế nào để hiển thị nhiều khoảng trắng mà không dùng thẻ pre ? ü Câu trả lời là dùng HTML Entities ü HTML Entities là các kí tự đặc biệt được ghi dưới 2 dạng sau : – Kí tự & + Tên + Kí tự ; – Kí tự & + Kí tự # + Số + Kí tự ; Ví dụ HTML Entities ü Để hiển thị – Kí tự < ta dùng < hoặc #60; – 3 khoảng trắng ta dùng     – Kí tự & ta dùng & ü Lưu ý : – Dùng tên dễ nhớ hơn là dùng số – Tuy nhiên nhiều trình duyệt không hỗ trợ hết các tên mới – Ngược lại, việc hỗ trợ các entities bằng số lại tốt hơn – Tên thực thể có phân biệt chữ hoa và chữ thường Các HTML entities phổ biến Kết quả Mô tả Thực thể dùng tên Thực thể dùng số Khoảng trắng     < Nhỏ hơn < < > Lớn hơn > > & Và & & " Dấu nháy kép " " ' Dấu nháy đơn ' (does not work in IE) ' Một số HTML Entities khác Kết quả Mô tả Thực thể dùng tên Thực thể dùng số ¢ cent ¢ ¢ £ pound £ £ ¥ yen ¥ ¥ € euro € € § section § § © copyright © © ® registered trademark ® ® × multiplication × × ÷ division ÷ ÷ Demo HTML Entities Character entities &X; Substitute the "X" with an entity number like "#174" or an entity name like "pound" to see the result. HTML Entities reference üKham khảo danh sách các HTML entities ở đâu ? – – HTML List üHTML hỗ trợ 3 loại danh sách – Danh sách không thứ tự (unordered list) – Danh sách có thứ tự (ordered list) – Danh sách định nghĩa (definition list) Unordered list ü Một danh sách không thứ tự bao gồm nhiều mục. Mỗi mục sẽ được đánh dấu bằng 1 bullet (thường hình tròn màu đen) ü Danh sách bắt đầu bằng thẻ ü Mỗi mặt hàng bắt đầu bằng thẻ ü Ví dụ An Unordered List: Coffee Tea Milk Các loại danh sách không thứ tự üSử dụng thuộc tính type của thẻ ul, ta có thể thay đổi hình dáng của bullet trong danh sách üNếu type = – disc => bullet hình tròn tô đen – circle => bullet hình tròn đen không tô – square => bullet hình vuông Demo kiểu danh sách không thứ tự Ordered list ü Một danh sách có thứ tự cũng gồm nhiều mục. Nhưng mỗi mục lại được đánh số từ 1,2,3... ü Danh sách có thứ tự bắt đầu bằng thẻ ol (ordered list) ü Mỗi mục bắt đầu bằng thẻ ü Ví dụ : An Ordered List: Coffee Tea Milk Các loại danh sách có thứ tự ü Sử dụng thuộc tính type của thẻ ol, ta có thể thay đổi cách đánh số trong danh sách có thứ tự ü Nếu không có thuộc tính type, đánh số từ 1,2,3 ü Nếu type = – a => đánh số từ a,b,c,d ... – A => đánh số từ A,B,C, ... – I => đánh số từ I,II,III,IV... – i => đánh số từ i, ii, iii, iv ... Demo kiểu danh sách thứ tự Ví dụ danh sách lồng Danh sách định nghĩa üDanh sách định nghĩa là 1 danh sách bao gồm nhiều mục. Mỗi mục bao gồm 1 từ khóa (term) và một định nghĩa (description) cho từ khóa đó üDanh sách định nghĩa bắt đầu bởi thẻ dl (definition list) üMỗi mục gồm 2 thẻ : – Thẻ dt (definition term) đánh dấu từ khóa – Thẻ dd (definition description) đánh dấu định nghĩa Demo HTML Entities Coffee Black hot drink Milk White cold drink Lưu ý về danh sách üCác mục trong 1 danh sách có thể là 1 từ, đoạn văn, hình ảnh, âm thanh ... hay là 1 danh sách khác üNếu trong 1 mục chứa trong nó 1 danh sách khác. Ta gọi đó là 1 danh sách lồng Các thẻ trong danh sách Thẻ Mô tả ol Xác định 1 danh sách không thứ tự ul Xác định 1 danh sách có thứ tự li Xác định 1 mục trong danh sách dl Xác định 1 danh sách định nghĩa dt Xác định 1 từ khóa dd Xác định mô tả của một từ khóa HTML Link ü Liên kết là địa chỉ 1 tài nguyên trên web üTài nguyên có thể là 1 trang HTML, 1 hình ảnh, 1 file âm thanh ... üAnchor là 1 từ khóa dùng để chỉ 1 liên kết trong nội bộ 1 trang üThẻ dùng để đánh dấu liên kết Thẻ ü Cú pháp : ü Trong đó : – href là địa chỉ của tài nguyên cần trỏ tới – name là tên của liên kết (tùy chọn – sử dụng khi dùng anchor) – target qui định cửa sổ nào sẽ mở tài nguyên được liên kết • 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 • target = _parent: mở liên kết trong cửa sổ cha của cửa sổ hiện tại Mô tả liên kết Ví dụ ü Liên kết trỏ tới trang web Trường ü Liên kết đến báo tuổi trẻ. Trang web tuoitre.com sẽ được mở trong 1 cửa sổ mới Trường CĐ CNTT Báo Tuổi trẻ Anchor(neo) ü Để có thể liên kết đến 1 nơi nào đó trong nội bộ trang. Ta phải : – Đánh dấu (Bookmark) vị trí bằng cách sử dụng thuộc tính tên của thẻ . Ví dụ : ta đánh dấu vị trí trên cùng của trang web : – Sau đó liên kết đến vị trí vừa đánh dấu sử dụng thẻ và thuộc tính href hoặc Chapter 1 Go to Chapter 1 Go to Chapter 1 Địa chỉ URL üCó 2 loại địa chỉ : – Tuyệt đối : Địa chỉ tuyệt đối bao gồm cả tên miền của website – Tương đối : Địa chỉ tương đối chỉ chứa đường dẫn đến tài nguyên so với thư mục hiện tại Trang 1 Chapter 2 Trang 1 Đường dẫn tương đối Book Index.html Chapter1 Section1.html Section2.html Section1.html Chapter2 WE ARE HERE ../Index.html Section2.html ../Chapter2/Section1.html Kí hiệu đặc biệt üDấu . : Thư mục hiện tại üDấu .. : Thư mục cha thư mục hiện tại Thẻ hình ảnh ü Trong HTML, hình ảnh được xác định bởi thẻ ü là thẻ rỗng , tức chỉ có thuộc tính, không có thẻ đóng ü Để hiển thị 1 hình ảnh, ta phải cung cấp giá trị cho thuộc tính src của . Đây là URL của ảnh đó ü Cú pháp :<img src= "URL" alt= "Alternative Text" width = "" height = “" /> Thuộc tính thẻ ü src : URL của hình ảnh. Ví dụ ü alt : Đoạn text mô tả hình ảnh. Sẽ được hiện khi hình không tìm thấy hoặc chưa nạp kịp <img src = ”” alt= ”Đây là cái vách núi” /> ü width, height : Dùng để qui định kích thước hiển thị của ảnh. Ta có thể dùng để phóng lớn, hoặc thu nhỏ ảnh. <img src = ”” alt= ”Đây là cái vách núi” width= ”200px” height= ”200px”/> Hình sẽ được hiển thị với kích thước 200x200 Thẻ üThẻ dùng để hiển thị dữ liệu dưới dạng bảng (như Excel) üHoặc dùng để layout trang web üVí dụ Cú pháp thẻ üBảng được xác định sử dụng thẻ üTrong bảng sẽ có nhiều dòng, được đánh dấu bằng (table row) üTrong mỗi dòng sẽ có nhiều ô dữ liệu, được đánh dấu bằng thẻ (table data) üMỗi ô dữ liệu có thể chứa 1 kí tự, hình ảnh, văn bản hay 1 bảng khác Ví dụ thẻ row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 Tiêu đề trong bảng ü Tiêu đề được đánh dấu sử dụng thẻ . ü Dòng tiêu đề là dòng đầu tiên của bảng Heading Another Heading row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 Các thuộc tính của cellpadding cellspacing border Thuộc tính border Heading Another Heading row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 Thuộc tính cellpadding Heading Another Heading row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 Thuộc tính cellspacing Heading Another Heading row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 Cell span ü Các ô trên 1 dòng có thể được trộn lại (merge) với nhau, ta gọi là row span. Để trộn các ô lại, ta dùng thuộc tính rowspan trên , ü Trường hợp ô được trộn lại trên cột ta gọi là column span. Để làm việc này, ta dùng thuộc tính colspan trên , Row span First Name: Bill Gates Telephone: 555 77 854 555 77 855 Column span Cell that spans two columns: Name Telephone Bill Gates 555 77 854 555 77 855 Màu nền, hình nền cho üTa có thể đặt màu nền cho sử dụng thuộc tính bgcolor üThuộc tính background chỉ định hình nền cho üCú pháp : – bgcolor = “Màu nền“ – background = “Tên hình nền" Ví dụ màu nền cho <table border="1" bgcolor="red"> First Row Second Row Ví dụ hình nền cho <table border="1" background="bgdesert.jpg"> First Row Second Row Màu, hình nền cho cell üMỗi ô hay dòng cũng có thể được đặt màu hoặc hình nền giống sử dụng bgcolor và background First Row <td background="bgdesert.jpg"> Second Row Ngôn ngữ HTML Phần FORM CHƯƠNG 3 HTML Form üHTML Form gồm các thành phần dùng để thu thập các thông tin từ người dùng. üCác thành phần này có thể là – text field – text area – radio button – check box – button ... Thẻ üMột form được đánh dấu bởi thẻ üCác thành phần đều nằm trong thẻ Input tag üThẻ được sử dụng nhiều nhất để tạo các thành phần là üThuộc tính type của thẻ quyết định kiểu của thành phần. üCú pháp : " name=“" value = “”/> Textfield üNếu gán type = “text”. Thẻ sẽ hiển thị 1 text field üText field được dùng nếu ta muốn thu thập 1 dòng text từ người duyệt web như username, địa chỉ, điện thoại ... üĐộ dài mặc định của textfield trên các trình duyệt là 20 kí tự. üĐể thay đổi độ dài của textfield, ta thay đổi giá trị thuộc tính size (Ví dụ size=“30”) Ví dụ Textfield First name: Last name: Radio Button üNếu đặt type=“radio”, thẻ input sẽ hiển thị 1 radio button. üRadio button được dùng khi ta chỉ muốn người dùng chọn 1 trong các tùy chọn. üNếu các radio button đặt cùng name, nó sẽ được nhóm lại (Nghĩa là người dùng chỉ được chọn 1 trong số này) Ví dụ radio button Male Female Checkbox üNếu đặt type=“checkbox”, thẻ input sẽ hiển thị 1 checkbox. üCheckbox được dùng khi ta muốn người dùng có thể chọn 0 hay nhiều tùy chọn. üCheckbox trái ngược với radio button Ví dụ checkbox I have a bike: I have a car: I have an airplane: <input type="checkbox" name="vehicle" value="Airplane" /> Button ü Là một dạng nút nhấn, dùng để xử lý 1 sự kiện nào đó trên form, ví dụ như : validate (kiểm tra dữ liệu), xử lý tính toán, thông báo lỗi, ü Việc xử lý sự kiện của Button thông thường được viết bằng ngôn ngữ lập trình javascript. Ví dụ Button <form name="input" action="html_form_submit.asp" method="get"> Nhap so A: Nhap so B: Ket qua la : Submit button ü Là một button đặc biệt mà khi người dùng nhấn vào nó, các dữ liệu mà người dùng nhập vào form sẽ được gởi về server xử lý. üKhi đó thuộc tính action của thẻ sẽ qui định trang ở server sẽ xử lý dữ liệu. üDữ liệu gởi tới server bao gồm các cặp { , } üĐể tạo 1 submit button, gán type=“submit” Ví dụ submit <form name="input" action="html_form_submit.asp" method="get"> Username: Reset button ü Là 1 button đặc biệt mà khi người dùng nhấn vào, tất cả giá trị người dùng nhập vào sẽ bị reset trở về mặc định üĐể tạo 1 reset button, gán type=“reset” Ví dụ Reset button Nhap so A: Nhap so B: Ket qua la : Dropdown box üDropdown box là 1 danh sách xổ xuống, người dùng có thể chọn 1 giá trị trong danh sách üDropdown box được xác định bởi thẻ üCác tùy chọn trong danh sách được xác định bởi thẻ Ví dụ về dropdown box Volvo Saab Fiat Audi TextArea üTextArea được dùng khi ta muốn thu thập 1 đoạn văn từ người dùng üThẻ được dùng để tạo 1 TextArea üThuôc tính rols và cols qui định số dòng và số cột cho TextArea Ví dụ về textarea The cat was playing in the garden. Fieldset và Legend ü dùng để gom nhóm các thành phần có liên quan với nhau (giống GroupBox trong VS 2005) ü dùng để đặt tên cho nhóm trên üNếu dùng thẻ xung quanh các thành phần sẽ có đường viền và phía trên đường viền là tên nhóm từ thẻ Ví dụ và Personalia: Name: Email: Date of birth: Ví dụ 1 form gởi email <form action="MAILTO:someone@w3schools.com" method="post" enctype="text/plain"> This form sends an e-mail to W3Schools. Name: Mail: Comment: <input type="text" name="comment" value="yourcomment" size="40" /> GIỚI THIỆU XHTML 1.0 XHTML - Extensible HyperText Markup Language ü XHTML (viết tắt của tiếng Anh 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. ü Về phương diện kĩ thuật, XHTML là một họ các kiểu tài liệu hiện tại và tương lai cùng các mô đun nhằm tái tạo lại, mở rộng, thâu nạp HTML, tái cấu trúc lại dưới dạng XML ü XHTML 1.0 là Khuyến cáo của World Wide Web Consortium (W3C) vào ngày 26/02/2000 Một số khác biệt giữa HTML và XHTML Các phần tử phải được lồng nhau đúng cách üTrong HTML một số phần tử có thể được lồng vào nhau không đúng cách như thế này. This text is bold and italic üTrong XHTML tất cả các phần tử phải được lồng vào nhau đúng cách như thế này: This text is bold and italic Các phần tử phải được lồng nhau đúng cách ü Một lỗi thường thấy ở các danh sách gạch đầu dòng lồng vào nhau mà quên mất rằng danh sách bên trong phải được đặt trong phần tử li. ü Trong XHTML Phải có đặt ở dạng chuẩn (well-formed) ü Tất cả các phần tử XHTML phải được đặt lồng bên trong phần tử gốc . ü Tất cả các phần tử khác có thể có các phần tử con. Các phần tử con phải đi theo cặp và phải được đặt lồng nhau đúng cách bên trong phần tử mẹ. Cấu trúc tài liệu cơ bản là: ... ... Tên gọi của thẻ đều phải viết thường ü HTML chấp nhận cách viết dưới: . This is a paragraph üTrong XHTML This is a paragraph Tất cả các phần tử XHTML phải được đóng lại üHTML chấp nhận cách viết dưới: . This is a paragraph This is another paragraph üTrong XHTML This is a paragraph This is another paragraph Các phần tử rỗng cũng phải được đóng lại üHTML chấp nhận cách viết dưới: . This is a break Here comes a horizontal rule: Here's an image üTrong XHTML This is a break Here comes a horizontal rule: Here's an image Các giá trị của thuộc tính phải được đặt trong dấu nháy kép üHTML chấp nhận cách viết dưới: . üTrong XHTML Việc tối giản thuộc tính là bị nghiêm cấm ü HTML chấp nhận cách viết dưới: • • • • • • ü Trong XHTML • • • • • • CSS - Cascading Style Sheet CHƯƠNG 4 Giới thiệu CSS ü CSS là gì? – CSS : viết tắt của Cascading Style Sheet – CSS là tập hợp các định dạng để hiển thị & trang trí trang HTML – CSS được lưu dưới dạng file text có đuôi .css ü Lợi ích của CSS ? – Tách phần định dạng ra khỏi HTML ( Loại bỏ thẻ ,,,...) – Tăng tốc việc phát triển web. Việc lập trình nội dung trang web và việc layout giao diện có thể được làm song song – Tiêu tốn ít không gian lưu trữ. Có hiệu quả đồng bộ. – Được hỗ trợ bởi tất cả các trình duyệt – Thay đổi giao diện dễ dàng, chỉ cần thay đổi file CSS mới CSS syntax ü CSS bao gồm các luật định dạng ü Mỗi luật bao gồm 2 phần : – Selector : xác định các thẻ HTML sẽ được định dạng – Declaration gồm 1 property và 1 value. Property là thuộc tính định dạng mà ta cần thay đổi, value là giá trị của của thuộc tính đó Trong ví dụ trên ta định dạng tất cả thẻ sẽ có color = blue và font-size = 12 px CSS example CSS comment ü Giống C++, ta sử dụng // và /* */ để comment các ghi chú và các luật không xài. ü Lưu ý : – Các declaration trong 1 luật CSS phải được bao lại bởi { và } – Mỗi declaration nên để 1 dòng để dễ đọc và dễ bảo trì CSS id & class üĐể xác định các thẻ cần định dạng, CSS có 3 cách : – Sử dụng tên thẻ – Sử dụng id và class – Hỗn hợp Tag selector Ta có thể định dạng CSS cho nhiều thẻ bằng cách dùng tên thẻ : p //Tất cả thẻ p { background-color : #FFFFFF; } p h1 // Tất cả thẻ h1 nằm trong thẻ p { color : red; font-weight:bold; } Id selector ü Id selector dùng để áp dụng định dạng CSS cho 1 thành phần HTML duy nhất ü Id selector = “#” + giá trị thuộc tính id của thành phần HTML ü Ví dụ luật dưới đây áp dụng cho các thành phần có id = “para1” Ví dụ Class selector üClass selector dùng để định dạng 1 nhóm các HTML element thuộc cùng 1 lớp (class) üClass selector = “.” + giá trị thuộc tính class trong thành phần HTML üVí dụ Ví dụ Ví dụ Sử dụng CSS üCó 3 cách chèn CSS vào HTML : – Dùng file CSS riêng – Chèn CSS vào thẻ – Chèn CSS dạng inline vào các thẻ HTML Dùng file CSS riêng ü Thích hợp cho việc định dạng nhiều trang cùng 1 lúc ü Các trang HTML phải liên kết đến file CSS bằng thẻ ü Việc lưu file CSS riêng sẽ giúp ta dễ dàng đổi giao diện trang web bằng cách thay file CSS ü File CSS lúc này chỉ bao gồm toàn các luật CSS : Dùng file CSS riêng Chèn CSS vào thẻ ü Thay vì để CSS riêng ra 1 file, ta có thể nhúng vào trang HTML ở trong phần ü Các luật CSS phải nằm trong thẻ Chèn CSS dạng inline üCác định dạng CSS sẽ được chèn trực tiếp vào thuộc tính style của các thẻ HTML. Lúc này ta không cần đến selector üSử dụng dạng inline sẽ xóa bỏ ưu điểm tách biệt nội dung và giao diện của CSS Lưu ý üNếu trang HTML sử dụng tất cả các kiểu chèn CSS trên thì thứ tự định dạng sẽ là : 1. Các định dạng inline 2. Các định dạng trong thẻ 3. Các định dạng từ file CSS 4. Các định dạng mặc định của trình duyệt 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 này bao gồm : – background-color : màu nền – background-image : hình nền – background-repeat : cách lặp lại hình nền – background-position : vị trí của hình nền Background color üThuộc tính background-color giúp ta đặt màu nền cho thành phần HTML üCú pháp : background-color=#; üVí dụ : Ví dụ Background image üThuộc tính background-image dùng để đặt hình nền cho thành phần HTML üMặc định hình nền sẽ tô đầy kích thước của thành phần HTML üCú pháp : background-image : url(<Đường dẫn hình nền>); Ví dụ Background repeat ü Mặc định background-image sẽ lặp lại hình nền cho cả 2 chiều dọc và ngang ü Một số hình chỉ cần repeat ngang hoặc dọc nếu không sẽ rất xấu. ü Thuộc tính background-repeat qui định việc lặp lại này ü Cú pháp background-repeat : ; Giá trị repeat gồm : • repeat-x • repeat-y • repeat • no-repeat Ví dụ Ví dụ Background position ü Thuộc tính background-postion chỉ hiện hình nền tại 1 vị trí nhất định (đi kèm với background-repeat: no-repeat;) ü Cú pháp : background-position : ; right topleft top left bottom left center right center right bottom center top center center center botttom Ví dụ Ví dụ Background short hand üĐể làm ngắn code CSS, ta có thể gom tất cả các thuộc tính (background-color, background-image, background- repeat,background-position) vào thuộc tính background : background:#ffffff url('img_tree.png') no-repeat right top; Fixed background üThuộc tính background-attachment : fixed dùng để cố định vị trí của hình nền. üVí dụ ta muốn có 1 hình nền ở góc trên bên trái trang web. Hình nền sẽ luôn luôn ở vị trí góc trên bên trái dù người dùng có cuộn trang web. Ví dụ Property Description Values CSS background Đặt màu nền hình nền background-color , background- image , background-repeat , background- attachment , background-position, inherit 1 background- attachment Đặt vị trí cố định cho hình nền scroll , fixed ,inherit 1 background- color Đặt màu nền color-rgb , color-hex , color-name transparent , inherit 1 background- image Đặt hình nền url(URL) none inherit 1 background- position Đặt vị trí cho hình nền left top , left center , left bottom , right top , right center , right bottom , center top ,center center , center bottom , x% y% , xpos ypos , inherit 1 background- repeat Qui định cách lặp lại hình repeat , repeat-x , repeat-y , no- repeat , inherit 1 Text color üThuộc tính color dùng để đặt màu chữ cho văn bản üCú pháp : color : ; // Ví dụ red hoặc color : ; // Ví dụ #FFEECC hoặc color : ; // Ví dụ RGB(255,0,0) Ví dụ Text alignment üThuộc tính text-align qui định cách canh lề cho văn bản üCú pháp : text-align : üCách canh lề : – left : canh lề trái – right : canh lề phải – justify : canh giữa Ví dụ Text decoration üThuộc tính text-decoration dùng để đặt hoặc xóa các trang trí cho văn bản üCú pháp text-decoration : ; üCách trang trí : – overline : đường gạch ngang phía trên văn bản – underline : đường gạch dưới – line-through : đường gạch giữa văn bản – blink : nhấp nháy – none : không trang trí Ví dụ Text Transformation üThuộc tính text-transformation dùng để chuyển chữ hoa ,thường cho văn bản üCú pháp text-transformation : üKiểu chữ : – lowercase : Chuyển tất cả kí tự sang chữ thường – uppercase : Chuyển tất cả kí tự sang chữ hoa – capitalize : Ghi hoa các kí tự đầu của chữ Ví dụ Các thuộc tính khác ü text-indent: qui định cách lề cho dòng đầu tiên (bằng pixel). ü letter-spacing : khoảng cách giữa các kí tự ü word-spacing : khoảng cách giữa các từ ü line-height: chiều cao của 1 dòng (pixel hoặc %) ü direction : hướng viết văn bản (rtl : phải qua trái) ü white-space : nowrap ; // Không wrap văn bản ü vertical-align: đặt canh lề dọc (baseline, sub, super, top, text-top, middle, bottom, text- bottom). Ví dụ Ví dụ Ví dụ Ví dụ Ví dụ CSS Font ü Các thuộc tính CSS font cho phép thay đổi font, kích thước font, kiểu font, độ đậm của font. ü Trong CSS 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ể Loại tổng quát Font cụ thể Serif Times New Roman Georgia Sans-serif Arial Verdana Monospace Courier New Lucida Console Font Family üThuộc tính font-family qui định loại font cho văn bản ü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 üCú pháp : Font style & font weight ü Thuộc tính font-style dùng để in nghiêng văn bản ü Giá trị : – normal : bình thường – italic : in nghiêng ü Thuộc tính font-weight dùng để in đậm văn bản ü Giá trị – normal – bold – bolder – lighter – 100, 200, 300, ... 900 Font size ü Thuộc tính font-size qui định kích thước văn bản ü Có 2 loại kích thước : – Tuyệt đối : là giá trị tính bằng pixel – Tương đối là giá trị tính bằng “em” ( 1 em = kích thước font mặc định của trình duyệt. Mặc định = 16px) Link ü Liên kết có thể được trang trí bởi các thuộc tính : color, background-color, background- image,font ... üMột liên kết có 4 trạng thái sau : qa:link – 1 liên kết bình thường, chưa được truy cập qa:visited – 1liên kết đã được người dùng truy cập qa:hovered – 1 liên kết khi chuột đang ở trên nó qa:active – 1 liên kết đang được nhấn Ví dụ 1 List ü Với danh sách, ta có thể dùng CSS để thay đổi : – Bullet trong danh sách không thứ tự hoặc cách đánh số trong danh sách có thứ tự (list-style-type) – Thay thế bullet bằng hình ảnh (list-style-image) ü Giá trị thuộc tính : – list-style-type : • none, disc, circle, square • decimal, lower-roman, upper-alpha, upper- roman – list-style-image : url (image_path) Ví dụ 1 Ví dụ 2 CSS Table üSử dụng CSS ta có thể trang trí bảng rất đẹp. üVí dụ như : CSS Table ü border-collapse : – collapse: boder các ô sẽ dính sát nhau. – separate : boder các ô sẽ được tách ra. ü border : thuộc tính border qui định kiểu, độ dày và màu sắc đường viền ü width, height: qui định chiều dài, chiều cao của bảng, ô hoặc dòng ü text-align (left, right, justify) : canh lề văn bản ü vertical-align(bottom, middle, top) : canh lề dọc ü padding : kích thước đệm mỗi ô Ví dụ Table ü Demo dùng CSS để tạo bảng giống hình bên dưới Gợi ý (tô màu dòng chẳn dòng lẻ): table.ex1 tr:nth-child(odd) {color: #000; background: #FFF} table.ex1 tr:nth-child(even) {color: #000; background: #CCC} Box model ü Mô tả cách CSS định dạng khối không gian bao xung quanh 1 element. Mỗi HTML element khi hiển thị trên trình duyệt sẽ là 1 cái hộp như sau : CSS Box model part ü margin: là khoảng trắng nằm phía ngoài border, margin sẽ không có màu nền. Luôn luôn vô hình ü border : là đường biên bao quanh padding và content. Một border bao gồm kiểu, độ dày, và màu ü padding : là khoảng đệm giữa border và content ü content : là nơi mà văn bản, hình ảnh nội dung của HTML element xuất hiện Width, height of an element ü Khi chúng ta đặt thuộc tính width, height cho 1 HTML element trong CSS, thực chất ta chỉ đặt width và height cho content của nó mà thôi ü Muốn có width , height thật của box, ta phải cộng thêm margin, border, padding ü Total element width = width + left padding + right padding + left border + right border + left margin + right margin ü Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin Ví dụ CSS border (1) üborder-style : qui định kiểu border : CSS border (2) üborder-width : qui định chiều dày của border CSS border(3) üborder-color : qui định màu cho border CSS border (4) ü Tiếp đầu ngữ : border-left , border-top, border- right, border-bottom dùng kèm với width, color, style để qui định độ dày, màu sẵc, kiểu của border trái, trên, phải, dưới. CSS border (5) üGhi tắt – border : solid 1px red; – border : dotted 5px #FFEE00; CSS margin ümargin-left , margin-top,margin-right, margin-bottom : dùng để qui định margin của bên trái, trên, phải và dưới üGiá trị của margin : – auto : trình duyệt tự động quyết định – px, em : độ dài bằng pixel hay em – % độ dài bằng phần trăm CSS margin(2) CSS margin(3) – Viết tắt ü margin:25px 50px 75px 100px; – top margin is 25px – right margin is 50px – bottom margin is 75px – left margin is 100px ü margin:25px 50px 75px; – top margin is 25px – right and left margins are 50px – bottom margin is 75px – margin:25px 50px; – top and bottom margins are 25px – right and left margins are 50px – margin:25px; – all four margins are 25px CSS padding üpadding-left , padding-top, padding-right, padding-bottom : dùng để qui định padding của bên trái, trên, phải và dưới üGiá trị của padding: – px, em : độ dài bằng pixel hay em – % độ dài bằng phần trăm CSS padding (2) CSS padding (3) ü padding:25px 50px 75px 100px; – top padding is 25px – right padding is 50px – bottom padding is 75px – left padding is 100px ü padding:25px 50px 75px; – top padding is 25px – right and left paddings are 50px – bottom padding is 75px ü padding:25px 50px; – top aand bottom paddings are 25px – right and left paddings are 50px ü padding:25px; – all four paddings are 25px CSS ADVANCED CHƯƠNG 5 CSS Display üThuộc tính display qui định cách 1 element hiển thị. üThuộc tính visibility qui định 1 element sẽ được hiển thị hay ẩn đi Ẩn element üTa có thể ẩn 1 element bằng cách sử dụng : – display:none; – visibility :hidden; ü visibility:hidden; ẩn element nhưng khoảng không tại vị trí element vẫn được giữ nguyên üdisplay:none; element sẽ không chiếm giữ bất kỳ khoảng không nào. Trình duyệt sẽ hiển thị như không có element này. Demo ẩn element üDisplayHidden.html Demo ẩn element Block và inline element ü Block element là 1 element khi hiển thị sẽ chiếm toàn bộ chiều ngang có thể và có xuống dòng phía trước và phía sau nó. – Ví dụ block element : ,,, ü Inline element là 1 element khi hiển thị chỉ chiếm đủ chiều ngang để hiển thị nội dung, và không có xuống dòng phía trước hay phía sau – Ví dụ inline element : , ü Ta có thể thay đổi cách hiển thị mặc định của 1 element sử dụng display: – display:inline; – display:block; Demo đổi kiểu hiển thị üDisplayBlockInline.html CSS position üCác thuộc tính CSS position cho phép : – Qui định vị trí của các Element. Ta có thể đặt vị trí xuất hiện ở bất cứ nơi nào tùy thích. – Thậm chí đặt 1 element phía trên hay phía dưới 1 element khác. – Hoặc qui định cách hiển thị khi nội dung element lớn vượt quá kích thước của element – Thuộc tính Position có 4 kiểu : position-static, position-fixed, position-relative, position- absolute Position-static – position:static : là kiểu hiển thị mặc định của trình duyệt. Các element sẽ hiển thị theo kiểu bình thường. Element nào xuất hiện trước sẽ ở phía trên, rồi đến các element kế tiếp Fixed position Øposition:fixed; => element sẽ có vị trí tương đối so với cửa sổ trình duyệt. Nó thậm chí không bị di chuyển khi cửa sổ bị cuộn ü Lúc này ta kết hợp với các thuộc tính left, right, top, bottom để qui định các element sẽ cách bên trái, phải, trên hoặc dưới của cửa sổ bao nhiêu pixel – Lưu ý : IE chỉ hỗ trợ fixed postioned khi HTML có thẻ !DOCTYPE – fixed element sẽ bị loại khỏi cách hiển thị thông thường. Trình duyệt sẽ hiển thị vị trí các element khác như không có fixed element Demo fixed element üPositionFixed.html Relative position üposition:relative; => element sẽ có vị trí tương đối so với vị trí của nó lúc hiển thị bình thường (static) üNội dung của relative position có thể di chuyển đè lên các element khác (tùy thuộc vào thuộc tính left, right, top, bottom) nhưng khoảng không dành cho element này vẫn được giữ lại. Demo relative element üPositionRelative.html Absolute position üposition:absolute; => Element sẽ nhận giá trị tuyệt đối và có vị trí không đổi khi thu giảm hoặc tăng kích thướt trình duyệt ü các thành phần được định vị không để lại bất cứ một khoảng trống nào trong tài liệu Demo absolute position üAbsolutePosition.html Overlap element üNếu 2 element bị chồng lên nhau(overlap) khi hiển thị thì ta có thể sử dụng thuộc tính z-index để qui định element nào sẽ được nằm trên üGiá trị z-index là 1 số nguyên (có thể âm) ü z-index càng cao thì sẽ nằm trên. Demo overlap üPositionOverlap.html CSS Float ü Với CSS float, 1 element có thể trôi về bên trái hoặc bên phải để cho các element khác có thể nằm bao quanh nó CSS Float – Đặc điểm ü CSS float rất hữu ích khi hiển thị ảnh hoặc làm layout ü 1 float element sẽ trôi về bên trái hoặc phải cho đến khi đụng biên hoặc 1 element khác ü Các element phía sau 1 float element sẽ nằm bao quanh nó ü Các element phía trước 1 float element sẽ không bị ảnh hưởng Demo float ü Float.html Tắt float üCác element phía sau sẽ tự động bao quanh float element. Để tránh chuyện này xảy ra ta có thể thêm thuộc tính clear – clear:left; => không cho float bên trái – clear:right; => không cho float bên phải – clear:both; => không cho float cả 2 bên Demo float clear ü FloatClear.html Align üTa có thể align 1 block element sử dụng : – margin – position üNếu muốn align text sử dụng thuộc tính text-align Align giữa üTa có thể align 1 block element chính giữa bằng cách – Đặt width – Đặt margin-left và margin-right là auto üVí dụ : Align trái, phải üĐể align trái 1 element ta : – Đặt position: absolute; – Đặt left : 0px; üĐể align phải 1 element ta : – Đặt position: absolute; – Đặt right: 0px; Demo align block left,right,center Demo cách tạo navigation bar ngang ü Là dạng CSS thông thường dùng để tạo Menu cho trang web. ü Code CSS div.horizontal { width: 100%; height: 63px; } div.horizontal ul { list-style-type: none; margin: 0; padding: 0; } div.horizontal li { float: left; } div.horizontal a { display: block; width: 86px; } div.horizontal a:link, div.horizontal a:visited { font-weight: bold; color: #FFFFFF; background-color: #98bf21; text-align: center; padding: 4px; text-transform: uppercase; } div.horizontal a:hover, div.horizontal a:active { background-color: #7A991A; } Demo cách tạo navigation bar dọc Demo: Navigation Bar Home News Articles Forum Contact About HTML file Làm 1 gallery Image sprite üKhi 1 trang web sử dụng nhiều ảnh thì cần nhiều yêu cầu gửi tới server để xử lý => làm sao để giảm số lần gửi yêu cầu ảnh về server??? ü Image sprite : Là cách nhóm các ảnh đơn lại với nhau để tạo thành 1 ảnh duy nhất. üKhi đó chỉ cần 1 yêu cầu là có thể đáp ứng được yêu c Demo image sprite ü ImageSprite.html Opacity üTa có thể làm mờ đi 1 hình ảnh bằng cách sử dụng thuộc tính : – opacity :1.0; (cho FF) – filter:alpha(opacity=100); (cho IE) ü1.0 (100) : Không trong suốt ü0.0 (0) : Trong suốt hoàn toàn (không thể nhìn thấy) Demo image opacity ü ImageOpacity JAVASCRIPT CHƯƠNG 6 Giới thiệu Javascript ü Javascript là 1 ngôn ngữ hướng đối tượng dùng để xử lý các thành phần HTML trong 1 trang web ü Javascript chạy trên phía client (trên trình duyệt – IE,FF,Opera,Chrome ...) ü Javascript được tạo ra năm 1995 bởi Brendan Eich của Netscape (Mozilla hiện tại) dưới tên Mocha, sau đó đổi thành Livescript rồi Javascript. Đặc điểm javascript ü Là ngôn ngữ hướng đối tượng. Ta có thể tạo, sử dụng các đối tượng ü Javascript sử dụng trình biên dịch được tích hợp với trình duyệt, được hỗ trợ bởi hầu hết các trình duyệt kể cả trên mobile ü Cú pháp Javascript tương đồng với C/C++ và Java nên dễ viết, dễ học Cách viết Javascript üCó 2 cách viết Javascript : – Cách 1 : Nhúng đoạn javascript vào trong file HTML – Cách 2 : Viết javascript thành 1 file riêng có đuôi .js và liên kết với file HTML Nhúng javascript vào HTML ü Ta sử dụng thẻ có như sau để chèn đoạn mã Javascript vào bất kỳ nơi nào trong file HTML ( và ) : Mã_nguồn_Javascript ü Ví dụ : Tạo file .js üTa sử dụng thẻ với thuộc tính src để liên kết 1 file javascript vào HTML : <script language=“javascript” src=“myscript.js”> üVí dụ : Cú pháp Javascript ü Lệnh đơn : mỗi lệnh đơn kết thúc bằng ; üKhối lệnh : được bao bằng { } üChú thích : // và /* .. */ üCấu trúc điều khiển : – Rẽ nhánh : if, else, switch – Lặp : for, while, do... while, for ... in Biến trong javascript ü Javascript không cần khai báo biến vẫn có thể sử dụng được ü Tên biến phân biệt hoa thường, phải bắt đầu bằng kí tự hoặc gạch dưới ( _ ) ü Biến nếu được khai báo thì không cần khai báo kiểu : – var a; – a = 10; ü Một biến có thể chứa bất kỳ giá trị nào (nguyên, thực , chuỗi ...) Tầm vực của biến üTầm vực là tầm ảnh hưởng của biến : – Biến toàn cục : được khai báo ngoài các hàm.Biến có tác dụng từ vị trí khai báo cho đến cuối chương trình – Biến cục bộ : được khai báo trong hàm. Biến chỉ có tác dụng trong hàm được khai báo. üNếu trong hàm, biến cục bộ trùng tên với biến toàn cục thì biến cục bộ sẽ được sử dụng Kiểu dữ liệu ü Biến trong javascript không cần khai báo kiểu dữ liệu ü Khai báo biến kiểu số : – a = 1.4; b = 2 ü Khai báo biến kiểu chuỗi : – str = ‘Chuỗi dùng dấu nháy đơn’ ; str2 = “Dấu nháy kép” ü Khai báo biến boolean – var dung = true,sai = fase; ü Khai báo biến null – obj = null Phép toán Phép gán Phép so sánh Phép toán logic Phép toán + ü Phép + trên 1 chuỗi sẽ cho ra chuỗi. ü Ví dụ : s = “Chào các bạn” + “sinh viên ITC” Kí tự đặc biệt üCác kí tự đặc biệt muốn xuất hiện trong chuỗi phải escape : – \n : new line – \t : tab – \b : BackSpace – \& : dấu & – \”: dấu “ Kí tự đặc biệt Cấu trúc rẽ nhánh ü if , else : if (n % 2 == 0) document.write(“Chẳn”); else document.write(“Lẻ”); ü switch : switch (n) { case 2 : document.write(“Thứ 2”); break; case 3 : document.write(“Thứ 3”); break; } Cấu trúc lặp ü for var i=0; for (i=0;i<=5;i++) { document.write("The number is " + i); document.write(""); } ü while var i=0; while (i<=5) { document.write("The number is " + i); document.write(""); i++; } Cấu trúc lặp ü for ... in var x; var mycars = new Array(); mycars[0] = "Saab"; mycars[1] = "Volvo"; mycars[2] = "BMW"; for (x in mycars) { document.write(mycars[x] + ""); } Hàm ü Cú pháp : function functionName(var1,var2,...,varX) { //some code } ü Hàm không được thực thi khi trang web được load ü Hàm chỉ thực thi khi được gọi (ví dụ trong sự kiện hoặc trực tiếp) ü Hàm có thể đặt ở trong hoặc nhưng nên đặt trong . Nó sẽ luôn được nạp trước khi gọi Ví dụ hàm Hàm trả về giá trị üTừ khóa return dùng để trả về giá trị cho hàm üCú pháp : function functionName(var1,var2,..., varX) { //some code return value; } Ví dụ hàm trả về giá trị Các hàm thông dụng – hàm alert() üalert ( “Nội dung thông báo”) : hiển thị hộp thoại thông báo có 1 nút OK. Hàm prompt ü prompt (“Thông báo”, Giá_trị_mặc_định) : hiển thị hộp thoại với câu thông báo và 2 nút OK, Cancel và một textfield cho phép người dùng nhập vào 1 giá trị. ü Nếu người dùng nhấn OK, hàm prompt() sẽ trả về chuỗi được nhập, ngược lại giá_trị_mặc_địch sẽ trả về Hàm Hàm confirm() ü confirm(“Thông báo”) : là hàm dùng để xác nhận lại thông tin, hiển thị câu thông báo với 2 nút OK, Cancel. ü confirm() trả về giá trị true nếu OK được nhấn và false nếu Cancel được nhấn Hàm confirm() – ví dụ Hàm document.write() üHàm document.write(“Chuỗi”) : dùng để ghi 1 chuỗi ra trang HTML ü document.writeln(“Chuỗi”) : ghi chuỗi ra và kết thúc bằng ký tự xuống dòng. Hàm này nên đi kèm với thẻ để giữ lại kí tự xuống dòng üVí dụ : – document.write(“Hello world”); – document.writeln(“Hello world”); Hàm eval() üHàm eval(“Chuỗi”) : Chuyển đổi giá trị chuỗi thành giá trị số üVí dụ Hàm parseInt() ü parseInt(“Chuỗi”,[radix]) : hàm đổi chuỗi ra số nguyên với cơ số là tham số radix. ü Nếu Chuỗi gồm các kí số rồi đến kí tự (123abc) thì các kí tự sẽ bị bỏ qua (trả về 123) ü Nếu Chuỗi bắt đầu không phải kí số thì parseInt sẽ trả về NaN (Not a Number) Hàm parseFloat() ü parseFloat (“Chuỗi”) : hàm đổi chuỗi ra số thực ü Nếu Chuỗi gồm các kí số rồi đến kí tự (123abc) thì các kí tự sẽ bị bỏ qua (trả về 123) ü Nếu Chuỗi bắt đầu không phải kí số thì parseFloat sẽ trả về NaN (Not a Number) Hàm isNaN() ü isNaN(“Chuỗi”) : hàm kiểm tra xem 1 chuỗi có phải là số không ? Nếu là số trả về false, ngược lại true Event ü Sử dụng javascript ta có thể tạo các trang web động ü Event là các sự kiện phát sinh khi người dùng tương tác với các element trong trang web ü Mỗi element có 1 số các sự kiện riêng có thể kích hoạt javascript ü Một số các ví dụ : – 1 cú click chuột – 1 trang web hay 1 hình ảnh đang được nạp – Di chuyển chuột lên trên 1 element – Chọn 1 ô text field trong HTML – Gởi dữ liệu trong form HTML – Nhấn phím Event – Cấu trúc phân cấp Ví dụ event onBlur Xảy ra khi control mất focus onClick Xảy ra khi người dùng kích vào các thành phần hay liên kết của form. onChange Xảy ra khi giá trị của thành phần được chọn thay đổi onFocus Xảy ra khi thành phần của form được focus. onLoad Xảy ra trang Web được tải. onMouseOver Xảy ra khi di chuyển chuột lên trên control onSelect Xảy ra khi người sử dụng lựa chọn một trường nhập dữ liệu trên form. onSubmit Xảy ra khi người dùng chuyển dữ liệu về server (bấm vào nút submit). onUnLoad Xảy ra khi người dùng đóng trang üMột số sự kiện tiêu biểu Các sự kiện của một vài đối tượng Đối tượng Chương trình xử lý sự kiện có sẵn Selection list onBlur, onChange, onFocus Text onBlur, onChange, onFocus, onSelect Textarea onBlur, onChange, onFocus, onSelect Button onClick Checkbox onClick Radio button onClick Hypertext link onClick, onMouseOver, onMouseOut Clickable Imagemap area onMouseOver, onMouseOut Reset button onClick Submit button onClick Document onLoad, onUnload, onError Window onLoad, onUnload, onBlur, onFocus Framesets onBlur, onFocus Form onSubmit, onReset Image onLoad, onError, onAbort Ví dụ event Event Handler <BODY onLoad="alert('Welcome to my page!');" onUnload="alert('Goodbye! ');"> Ví dụ event <input type="text" onblur="alert('Sự kiện ONBLUR')" onclick="alert('Sự kiện ONCLICK');" onchange="alert('Sự kiện ONCHANGE');" onkeypress="alert('Sự kiện KEYPRESS');"/> function a_plus_b(form) { a=eval(form.a.value) b=eval(form.b.value) c=a+b form.ans.value = c } function a_minus_b(form) { a=eval(form.a.value) b=eval(form.b.value) c=a-b form.ans.value=c } CHƯƠNG TRÌNH TÍNH TOÁN Nhập số a : Nhập số b : Kết quả : Ví dụ event JAVASCRIPT MÔ HÌNH DOM CHƯƠNG 7 Nội dung § DOM (Document Object Model) : Là một mô hình chuẩn cho phép ngôn ngữ lập trình có thể truy xuất và thay đổi động nội dung, cấu trúc, định dạng của 1 văn bản. § HTML DOM : là mô hình chuẩn cho văn bản HTML § Toàn bộ trang là document node § Mỗi thẻ là 1 HTML node § Văn bản trong 1 thẻ là text node § Các thuộc tính trong thẻ là các attribute § Thông qua HTML DOM, ta có thể lấy, thay đổi, thêm hay xóa bất kỳ 1 element nào trong trang web 303 Ví dụ HTML DOM 304 My Title my link My header Ví dụ Cây HTML § HTML DOM coi trang HTML là 1 cây 305 Quan hệ giữa các node § Các node trong cây HTML có mối quan hệ phân cấp với nhau § Các từ cha, con, anh em dùng để mô tả các mối quan hệ này. Các node cha có các node con, các node anh em là các node có cùng cấp § Trong 1 cây HTML, node trên cùng là root (gốc) § Mọi node (trừ root) đề có duy nhất 1 node cha § 1 node có thể có nhiều node con § Node lá là node không có node con § Node anh em là node có cùng node cha 306 Mô hình quan hệ giữa các node Quan hệ giữa các node Lấy 1 node 309 Mỗi node trong HTML là 1 đối tượng. Ta có thể lấy đối tượng bằng cách : § X.getElementById ( id) : lấy element có id cung cấp trong node X § X.getElementByTagName( name) : lấy danh sách các element có name cung cấp trong node X § X.innerHTML : văn bản trong X § X.nodeName : tên của X § X.nodeValue : giá trị của X § X.parentNode : node cha của X § X.childNodes : các node con của X § X.attributes : các thuộc tính của X § X.firstChild : node con đầu tiên của X § X.lastChild : node con cuối của X Trong đó X là 1 node trong HTML DOM Thuộc tính 1 node Hello World innerHTML vs outerHTML a outerHTML innerHTML Ví dụ innerHTML § X.appendChild ( Y) : thêm node Y vào làm con node X § X.removeChild ( Y ) : xóa node Y ra khỏi con node X § document.createTextNode(“Text”) : tạo 1 node văn bản § document.createElement(TagName) : tạo 1 node có là thẻ Thêm, xóa 1 node Ta có thể thêm, xóa, cập nhật thuộc tính của 1 node như sau : § X.getAttribute(“Attribute name”) : Lấy giá trị 1 attribute § X.setAttribute(“Attribute name”,”Attribute value”) : Thêm hay set lại giá trị 1 attribute § X.removeAttribute(“Attribute name”) : Xóa 1 attribute Làm việc với thuộc tính Ví dụ § Các node biểu diễn 1 thẻ đều có thuộc tính style dùng để định dạng § Cách thay đổi định dạng 1 node : Định dạng node Thay đổi background Ví dụ Thay đổi border, margin, padding Ví dụ Thay đổi font Kham khảo § Javascript Tutorial : § HTML DOM Tutorial : § Javascript & DOM example : § HTML DOM Style Object : § setTimeout(“javascript command”, delayTime) : hàm cho phép thực thi 1 lần 1 câu lệnh hay hàm sau 1 khoảng thời gian tính bằng milisecond. Hàm trả về 1 id và id này dùng cho hàm clearTimeOut() để dừng việc thực thi § clearTimeout(id) : dừng việc thực thi § setInterval(“javascript command”, delayTime) : hàm cho phép thực thi liên tục sau 1 khoảng thời gian § clearInterval(id) : dừng việc thực thi liên tục Hàm thiết lập thời gain Ví dụ Tài liệu tham khảo üPhạm Đào Minh Vũ - Giáo Trình bài giảng Thiết kế web – Trường CĐ CNTT TPHCM üPhạm Thị Nhung - Lập trình web với HTML và JavaScript – NXB ĐH Quốc Gia TPHCM üCác giáo trình bằng tiếng Anh. ü ü ü ü