Bài giảng Thiết kế Web 1 - TS. Trương Diệu Linh

Bài giảng Thiết kế Web 1 do TS. Trương Diệu Linh thực hiện bao gồm những nội dung về giới thiệu Web; cách tạo các trang Web tĩnh (ngôn ngữ HTML, ngôn ngữ định kiểu CSS); cách tạo các trang Web động (phía khách - Javacript; phía chủ - ASP).

Thiết kế Web Giá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 dung Giới thiệu web Tạo trang web tĩnh Ngôn ngữ HTML Ngôn ngữ định kiểu CSS Tạo trang web động Phía khách (client-side): Javacript Phía chủ (server-side): ASP Tài liệu tham khảo http://www.w3schools.com/ Giới thiệu web Dịch vụ tra cứu trang siêu văn Siêu văn bản- Hypertext: Các trang Web trang văn gồm hình ảnh, âm thanh, có liên kết tới văn khác Ngôn ngữ sử dụng: HTML Ví dụ: (www.hut.edu.vn, www.vnexpress.net ) Web site: Hệ thống trang siêu văn tổ chức Web server Máy chủ lưu giữ trang siêu văn web site Trình duyệt web Netscape, Firefox, IE, … Giao thức trao đổi file siêu văn HTTP Web tĩnh web động Trang web tĩnh Nội dung không thay đổi lần truy cập • Trang tin tức • htm, html Trang web động Nội dung thay đổi tuỳ theo ứng xử người sử dụng trạng thái • Webmail • Trang web truy vấn sở liệu: xem điểm thi đại học • js, asp, php … Cơ chế hoạt động web tĩnh Web Server Viết HTML Web server lưu file htm Người dùng yêu cầu đọc1 trang web Các liệu HTML trả trình duyệt Trình duyệt hiển thị trang web Người dùng (khách) Cơ chế hoạt động web động phía chủ Web Server Viết aps Web server chứa trang web động Web server xử lí câu lệnh tạo trang HTML yêu cầu trang web Trả dòng HTML trình duyệt Trình duyệt hiển thị trang web Người dùng (Khách) Cơ chế hoạt động web động phía khách Web Server Web server chứa trang web động Viết js, yêu cầu trang web Trả HTML script trình duyệt Trình duyệt xử lí script để tạo thành HTML Trình duyệt hiển thị trang web Người dùng (khách) Chương 1: Tạo web tĩnh Ngôn ngữ HTML Ngôn ngữ định kiểu CSS Ngôn ngữ HTML HTML: HyperText Markup Language, tức "Ngôn ngữ Đánh dấu Siêu văn bản" Ngơn ngữ viết trang web Cách chèn hình ảnh, âm thanh, text Cách tạo liên kết văn Cách định dạng văn Là chuẩn internet World Wide Web Consortium (W3C) Các file HTML thường trao đổi giao thức HTTP Phiên nhất: 4.0.1, HTML thay XHTML 10 Ngôn ngữ HTML HTML sử dụng thẻ để tạo cấu trúc, định dạng văn … thẻ đóng: • … • VD: … thẻ mở: • … • VD: Thuộc tính thẻ • … • VD: … Tên thẻ chữ hoa, chữ thường có ý nghĩa Chuẩn HTML Kiểm tra văn HTML hợp lệ theo chuẩn • http://validator.w3.org/ 11 Ví dụ HTML& thiet ke web\vidu_html.htm 12 Cấu trúc trang HTML Thẻ bắt bc Thẻ bắt buộc Thẻ không bắt buộc 13 Thẻ Thẻ Nằm Tiêu đề trang Hinh anh bon mua 14 Text Text viết trực tiếp bên thẻ Ngắt dòng tự động Khơng hiển thị kí tự trắng VD: 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 15 Các thẻ định dạng văn Xuống dòng: cuối dòng Tạo dấu cách đoạn (paragraph)

đoạn văn

Đoạn văn với cách lề

16 17 Các thẻ định dạng văn (tiếp) Thẻ định dạng tiêu đề … 18 Các thẻ định dạng văn (tiếp) Thẻ định dạng kí tự …: chữ béo : chữ nghiêng … : gạch chân … 19 Danh sách Danh sách có số thứ tự

1. Je ne suis pas la pour etre aime
2. Babel
3. Volver

Danh sách khơng có số thứ tự

• Volver
• Je ne suis pas la pour etre aime
• Babel

20 Chèn ảnh Các thuộc tính • Src: địa ảnh – Địa tuyệt đối – Địa tương đối • Width: độ rộng • Height: chiều cao – Tuyệt đối: Pixel – Tương đối: % so với kích thước trang • Alt: đặc tả ảnh xuất trỏ vào ảnh 21 Bảng Thẻ Bên chứa hàng • … : biểu diễn hàng • Mỗi hàng chứa nhiều liệu, tương ứng với cột – … – Dữ liệu viêt thẻ đóng thẻ mở • …: hàng viết đậm – Biểu diễn tiêu đề cột liệu 22 Bảng- Ví dụ Thong tin mat hang Ma hang Mat hang 001 Tu lanh cua tren duoi 002 May giat cua truoc 23 Colspan bảng … n: số cột gộp lại với Name Telephone Fax Bill Gates 555 77 854 555 77 855 555 77 886 24 Rowspan bảng Visit W3Schools! 32 Liên kết siêu văn (hyperlink) Liên kết đến địa email Mở tự động chương trình soạn email mặc định máy để gửi mail đến địa đưa Syntax Send Mail Liên kết từ ảnh Dùng ảnh thay dùng đoạn text làm liên kết Chèn ảnh thay cho phần hiển thị text