Bài giảng Thiết kế Web

*Thiết kế WebGiáo viên: TS. Trương Diệu Linh Bộ môn Truyền thông & Mạng linhtd@it-hut.edu.vn*Nội dungGiới thiệu về webTạo các trang web tĩnhNgôn ngữ HTMLNgôn ngữ định kiểu CSSTạo các trang web độngPhía khách (client-side): JavacriptPhía chủ (server-side): ASP*Tài liệu tham khảo ới thiệu về webDịch vụ tra cứu các trang siêu văn bảnSiêu văn bản- Hypertext:Các trang Web là các trang văn bản có thể gồm cả hình ảnh, âm thanh, có các liên kết tới các văn bản khác.Ngôn ngữ sử dụng: HTMLVí dụ: (www.hut.edu.vn, www.vnexpress.net )Web site: Hệ thống các trang siêu văn bản của 1 tổ chứcWeb serverMáy chủ lưu giữ các trang siêu văn bản của một web siteTrình duyệt webNetscape, Firefox, IE, Giao thức trao đổi các file siêu văn bảnHTTP*Web tĩnh và web độngTrang web tĩnhNội dung không thay đổi mỗi lần truy cậpTrang tin tức.htm, .htmlTrang web độngNội dung thay đổi tuỳ theo ứng xử của người sử dụng và trạng thái hiện tạiWebmailTrang web truy vấn cơ sở dữ liệu: xem điểm thi đại học.js, .asp, .php *Cơ chế hoạt động của web tĩnhWeb ServerNgười dùng (khách)1Viết HTML2Người dùng yêu cầu đọc1 trang web3Web server lưu các file .htmCác dữ liệu HTML trả về trình duyệt45Trình duyệt hiển thị trang web*Cơ chế hoạt động của web động phía chủWeb ServerNgười dùng (Khách)2yêu cầu trang web3Web server chứa các trang web độngTrả dòng HTML về trình duyệt56Trình duyệt hiển thị trang web4Web server xử lí các câu lệnh tạo trang HTML1Viết .aps*Cơ chế hoạt động của web động phía kháchWeb ServerNgười dùng (khách)1Viết .js, 23Trả HTML và script về trình duyệt564Trình duyệt xử lí các script để tạo thành HTMLWeb server chứa các trang web độngyêu cầu trang webTrình duyệt hiển thị trang web*Chương 1: Tạo web tĩnhNgôn ngữ HTMLNgôn ngữ định kiểu CSS*Ngôn ngữ HTMLHTML: HyperText Markup Language, tức là "Ngôn ngữ Đánh dấu Siêu văn bản" Ngôn ngữ viết trang webCách chèn hình ảnh, âm thanh, textCách tạo các liên kết giữa các văn bảnCách định dạng văn bảnLà 1 chuẩn internet của World Wide Web Consortium (W3C) Các file HTML thường được trao đổi bằng giao thức HTTPPhiên bản mới nhất: 4.0.1, HTML được thay thế bằng XHTML*Ngôn ngữ HTMLHTML sử dụng các thẻ để tạo cấu trúc, định dạng văn bản thẻ đóng: VD: . thẻ mở:VD: Thuộc tính của thẻVD: Tên thẻ chữ hoa, chữ thường có ý nghĩa như nhau.Chuẩn HTMLKiểm tra nếu một văn bản HTML hợp lệ theo chuẩní dụHTML& thiet ke web\vidu_html.htm*Cấu trúc một trang HTML Thẻ bắt buôcThẻ bắt buộcThẻ không bắt buộc*Thẻ Thẻ Nằm trong Tiêu đề của trangHinh anh bon mua*Text Text được viết trực tiếp bên trong thẻ Ngắt dòng tự độngKhông hiển thị các kí tự trắngVD: NAUDERO, Pakistan (CNN)-- Pakistan's Central Election Commission said Monday that a decision is expected Tuesday on whether to hold parliamentary elections as scheduled on January 8. *Các thẻ định dạng văn bảnXuống dòng: ở cuối dòngTạo dấu cách đoạn (paragraph) đoạn văn bản Đoạn văn bản với các cách căn lề**Các thẻ định dạng văn bản (tiếp) Thẻ định dạng tiêu đề *Các thẻ định dạng văn bản (tiếp) Thẻ định dạng kí tự: chữ béo...: chữ nghiêng : gạch chân *Danh sách Danh sách có số thứ tựJe ne suis pas la pour etre aimeBabelVolverDanh sách không có số thứ tự Volver Je ne suis pas la pour etre aime Babel *Chèn ảnhCác thuộc tínhSrc: địa chỉ ảnhĐịa chỉ tuyệt đốiĐịa chỉ tương đốiWidth: độ rộngHeight: chiều cao Tuyệt đối: PixelTương đối: % so với kích thước của trangAlt: đặc tả ảnh xuất hiện khi trỏ vào ảnh*BảngThẻ Bên trong chứa các hàng : biểu diễn 1 hàng Mỗi hàng chứa nhiều ô dữ liệu, tương ứng với 1 cột Dữ liệu được viêt giữa thẻ đóng và thẻ mở: hàng đầu tiên và được viết đậmBiểu diễn tiêu đề của từng cột dữ liệu*Bảng- Ví dụ Thong tin mat hang Ma hang Mat hang 001Tu lanh 2 cua tren duoi 002May giat cua truoc *Colspan trong bảngn: số cột sẽ được gộp lại với nhau Name Telephone Fax Bill Gates 555 77 854 555 77 855 555 77 886*Rowspan trong bảng N: số dòng được gộp lại với nhau First Name: Bill Gates Telephone: 555 77 854 555 77 855 Fax 555 77 886*Một số mã hiển thị các kí tự đặc biệtCác kí tự được sử dụng bởi HTML nên không thể hiển thị nó trực tiếpHiển thị bắng các mã*Một số mã hiển thị các kí tự đặc biệt*Background Màu nềnĐặt màu đồng nhất cho nền của trang web Ảnh nềnDùng ảnh để làm nền Ảnh sẽ lặp đi lặp lại để lấp đầy nền nếu kích thước ảnh nhỏ hơn kích thước của trang webMàu chữ*Các mầu cơ bảnCó thể dùng mã mầu hoặc tênVí dụ*Liên kết siêu văn bản (hyperlink)Liên kết ngoàiLiên kết đến một trang web khácText sẽ hiển thịHref: địa chỉ trang được liên kết tớiText bên trong thẻ thông thường sẽ được gạch chân và khi click lên thì sẻ nhảy đến trang được liên kếtĐịa chỉ tương đốiUne pageĐịa chỉ tuyệt đốiUne page *Liên kết siêu văn bản (hyperlink)Liên kết trongLiên kết đến một đoạn trong trangĐánh dầu vị trí cần liên kết tớiRestaurant Khai Thai (thailandais) Tạo liên kếtThailandais cuisine Ví dụ*Liên kết siêu văn bản (hyperlink)Thuộc tính targetQuy định nơi mà trang web được liên kết tới sẽ được hiển thị Vi_tri=“ _blank”Hiển thị trang đích trong một cửa sổ mớiVisit W3Schools!Vi_tri=“_self”Hiển thị trang đích trong cửa sổ hiện tạiVisit W3Schools!*Liên kết siêu văn bản (hyperlink)Liên kết đến địa chỉ emailMở tự động chương trình soạn email mặc định trong máy để gửi mail đến địa chỉ đưa raSyntaxSend MailLiên kết từ 1 ảnhDùng ảnh thay vì dùng 1 đoạn text làm liên kếtChèn ảnh thay cho phần hiển thị text *Ví dụ tổng hợp: