BÀI GIẢNG MÔN: THIẾT KẾ WEB (SỐ TIẾT: 30 LT- 60 TH) PHẦN 1: NGÔN NGỮ HTML (HyperText Markup Language) CHƯƠNG I GIỚI THIỆU VỀ WEB I CÁC KHÁI NIỆM CƠ BẢN  Internet : mạng máy tính tồn cầu, máy truyền thông với giao thức chung TCP/IP (Transfer Control Protocol/Internet Protocol)  Intranet : mạng cục không nối vào Internet, truyền thông giao thức TCP/IP  Mơ hình Client-Server: mơ hình khách-chủ Server chứa tài nguyên dùng chung cho nhiều máy Client  Internet Server: Server cung cấp dịch vụ Internet (Web Server, Mail Server, FTP Server…) I    CÁC KHÁI NIỆM CƠ BẢN Internet Service Provider (ISP): Nhà cung cấp dịch vụ Internet cho khách hàng Mỗi ISP có nhiều khách hàng có nhiều loại dịch vụ Internet khác Internet Protocol : tiêu chuẩn chi phối việc chuyển tải thông tin máy tính mạng World Wide Web (WWW): dịch vụ tra cứu thông tin Internet Dịch vụ đưa cách truy xuất tài liệu máy phục vụ dễ dàng thông qua giao tiếp đồ họa Để sử dụng dịch vụ máy Client cần có chương trình gọi Web Browser I  Web Browser : trình duyệt Web Dùng để truy xuất tài liệu Web Server – –     CÁC KHÁI NIỆM CƠ BẢN Internet Explorer Nestcape Home page: trang web web site Hosting provider: công ty tổ chức đưa trang lên mạng Publish: Xuất trang web Web server chương trình đáp ứng yêu cầu truy xuất tài nguyên I  CÁC KHÁI NIỆM CƠ BẢN URL(Uniform resource locator): địa chỉ đến file cụ thể nguồn tài nguyên mạng Ví dụ: 207.46.130.149 biểu diễn URL www microsoft.com – URL tuyệt đối – địa Internet đầy đủ trang file, bao gồm giao thức, vị trí mạng, đường dẫn tuỳ chọn tên file Ví dụ, http:// www.microsoft.com/ms.htm – URL tương đối - mô tả ngắn gọn địa tập tin kết nối có đường dẫn với tập tin hành, URL tương đối đơn giản bao gồm tên phần mở rộng tập tin II GIỚI THIỆU KHÁI QUÁT VỀ WEB  Web ứng dụng chạy mạng Client-Server, khách chủ web liên lạc giao thức http (HyperText Transfer Protocol) Các web server cung cấp thông tin định dạng theo ngôn ngữ HTML  Web Page: file văn chứa tag HTML đọan mã đặc biệt mà trình duyệt web hiểu thơng dịch được, file lưu với phần mở rộng html htm  Website: Một tập hợp nhiều web page, thể thông tin tổ chức chủ đề II  HTML (HyperText markup Language) gồm đoạn mã chuẩn quy ước để thiết kế Web hiển thị trình duyệt Web Hypertext (Hypertext link) từ hay cụm từ đặc biệt dùng để tạo liên kết trang web – Mark up: cách định dạng văn để trình duyệt hiểu thơng dịch – Language: tập quy luật để định dạng văn trang web Trình soạn thảo trang web :Có thể soạn thảo web trình soạn thảo văn nào: Notepad, FrontPage Dreamweaver –  GIỚI THIỆU KHÁI QUÁT VỀ WEB III TAG HTML Cú pháp:  Object – – – TagName : tên tag HTML, liền với dấu “< “, khơng có khoảng trắng Object :đối tượng hiển thị trang Web ListPropeties: danh sách thuộc tính Tag Ví dụ Using htm links Internet Introduction to HTML Internet Internet mạng mạng Nghĩa là, m ạng máy tính đ ược liên k ết v ới mạng khác, nối nước ngày toàn c ầu Giao th ức truy ền thông TCP/IP cung cấp liên kết với tất máy tính th ế gi ới Introduction to HTML Ngôn ngữ đánh dấu siêu văn ngôn ngữ chu ẩn mà web s dụng đ ể t ạo nhận tài liệu Mặc dù m ột tập ngôn ng ữ nâng c ấp tiêu chuẩn tổng quát (SGML), ngôn ngữ đánh dấu siêu văn b ản có liên quan v ới SGML SGML phương pháp trình bày ngôn ng ữ đ ịnh d ạng tài li ệu HTML ngôn ngữ đánh dấu sử dụng để tạo tài liệu HTML Các h ướng d ẫn ch ỉ rõ trang web nên hiển thị trình ệt LIÊN KẾT VỚI BOOKMARK CỦA TRANG KHÁC Cú pháp: Ví dụ: Trang main.htm Main document Internet Introduction to HTML LIÊN KẾT ĐẾN HỘP THƯ Cú pháp: Nhãn Ví dụ: Email II HÌNH ẢNH TRÊN TRANG WEB Các loại ảnh :    Ảnh Gif (Graphics Interchange Format): sử dụng phổ biến tài liệu HTML, dễ chuyển tải, kết nối sử dụng MODEM tốc độ chậm, hổ trợ 256 màu GIF Các file GIF định dạng không phụ thuộc phần Ảnh JPEG (Joint PhotoGraphic Expert Group) có phần mở rộng JPG, loại ảnh nén thông tin, nghĩa ảnh sau bị nén không giống ảnh gốc Tuy nhiên, trình phát lại ảnh rõ gần ảnh gốc JPEG hỗ trợ 16 triệu màu thường sử dụng cho ảnh có màu thực Ảnh PNG (Portable Network Graphics) nén khơng liệu II HÌNH ẢNH TRÊN TRANG WEB Chèn hình ảnh Cú pháp: URL: thường sử dụng địa tương đối – Nếu hình chứa thư mục image tập tin htm chứa thư mục html địa hình chèn có dạng Src=“ /image/hinh1.gif” – Nếu hình tập tin html chứa thư mục địa hình chèn có dạng: Src=“hinh1.gif” II HÌNH ẢNH TRÊN TRANG WEB Ví dụ: Image