THIẾT KẾ WEB VỚI MICROSOFT FRONTPAGE 2003 VÀ HTML (Hypertext Markup Language) 1 NỘI DUNG Chương I: Một số khái niệm cơ bản Chương II: Ngôn ngữ HTML Chương III: Tạo trang web với FrontPage 2003 Chương IV: Xử lý văn bản & một số đối tượng khác Chương V: Multimedia hóa trang web 2 Chương I: CÁC KHÁI NIỆM CƠ BẢN Mạng Internet là gì?  Tiền thân của internet là ARPANET, đƣợc xây dựng bởi Bộ quốc phòng Mỹ (năm 1969).  Góc độ kỹ thuật: Internet là mạng đƣợc hợp thành bởi việc kết nối các mạng trên toàn thế giới thông qua các phƣơng tiện viễn thông, cáp quang, điện thoại,…  Góc độ thông tin và ứng dụng: Internet là tên của một nhóm tài nguyên thông 3 tin trên khắp thế giới Giao thức? • Giao thức: là tập hợp nhiều qui tắc để điều khiển phƣơng thức truyền thông tin giữa các máy tính. • Trên internet, việc định vị nguồn tài nguyên thông tin đƣợc thực hiện bằng cách chỉ ra địa chỉ của máy tính, nơi chứa nguồn tài nguyên. Địa chỉ này gọi là IP. IP Address là một số duy nhất đƣợc gán cho một máy tính trong một mạng. 4 World Wide Web? • Dịch vụ World Wide Web (WWW) thƣờng đƣợc gọi là dịch vụ web, cho phép ngƣời dùng tìm kiếm và truy xuất tài nguyên thông tin dƣới dạng các siêu văn bản Siêu văn bản? • Siêu văn bản (Hypertext): là tập các thông tin có thể xem nhờ vào các liên kết (Hyperlink). Các thông tin trong siêu văn bản: text, âm thanh, hình ảnh,…đƣợc định dạng trong tập tin HTML (tập tin có phần mở rộng *.htm, *.html) 5 • Siêu liên kết (Hyperlink): là mối nối thông tin giữa hai thông tin trong một siêu văn bản • Trang Web (web page): là những trang thông tin hiển thị dƣới dạng siêu văn bản đƣợc tạo ra từ ngôn ngữ HTML • Website là tập hợp những trang web đƣợc liên kết với nhau theo một cấu trúc nào đó của một tổ chức hay cá nhân. • Trang chủ (Home page) là trang đầu tiên của một website, cung cấp cái nhìn tổng quát về website 6 Dịch vụ web tổ chức theo mô hình client/server •Client đƣợc gọi là Web Browser: gửi yêu cầu tra cứu thông tin đến Web Server và nhận thông tin kết quả trả về từ Web Server. •Server đƣợc gọi là Web Server: lắng nghe yêu cầu từ web, phân tích yêu cầu, tạo ra thông tin kết quả và trả về cho trình duyệt web. 7 URL (Uniform Resource Location):  Là địa chỉ để định vị các nguồn tài nguyên trên Web.  Cấu trúc của một URL: ://[/Path][/Document] Ví dụ: http://www.pdu.edu.vn/khoacntt/index. php 8  Mô hình hoạt động của dịch vụ Web: Xử lý yêu cầu Internet Web Server HTML… …………… …………… ………...... http://www.pud.edu.vn 9 Chương II NGÔN NGỮ HTML (Hypertext Markup Language) 10 Giới thiệu HTML:  Là ngôn ngữ dùng để lập trình tạo ra các trang web (ở dạng tập tin văn bản đơn giản)  HTML dùng các thẻ (tag) để thông báo cho các web browser hiển thị.  Hầu hết các web browser đều hiểu đƣợc ngôn ngữ HTML • Cú pháp các thẻ (tag) trong HTML: Các thẻ dùng để báo cho trình duyệt cách thức trình bày văn bản trên màn hình hoặc dùng đê chèn một mối liên kết đến các trang khác, 11 một đoạn chƣơng trình khác... • Mỗi thẻ gồm một từ khoá KEYWORD - bao bọc bới hai dấu "bé hơn" (<) và "lớn hơn" (>). • Hầu hết các lệnh thể hiện bằng một cặp hai thẻ: thẻ mở () và thẻ đóng (). Dấu gạch chéo ("/") kí hiệu thẻ đóng. Lệnh sẽ tác động vào đoạn văn bản nằm giữa hai thẻ. 12 Một số điều cần lƣu ý khi soạn thảo siêu văn bản bằng HTML: Nhiều dấu cách liền nhau cũng chỉ có tác dụng nhƣ một dấu cách. Bạn phải sử dụng thẻ để thể hiện nhiều dấu giãn cách liền nhau. Gõ Enter để xuống dòng đƣợc xem nhƣ một dấu cách, để xuống hàng thì chúng ta phải sử dụng thẻ tƣơng ứng Có thể viết tên thẻ không phân biệt chữ in thƣờng và in hoa. Vì các kí tự dấu lớn hơn ">", dấu nhỏ hơn "<" đã đƣợc dùng làm thẻ đánh dấu, do đó để hiển thị các kí tự này 13 HTML quy định cách viết: > < Cấu trúc của một tài liệu HTML Mọi tài liệu HTML đều có khung cấu trúc như sau: 14 Một số thẻ HTML thông dụng: 1. Thẻ : Trang web tĩnh đƣợc bắt đầu bằng : và kết thúc bằng: 2. Thẻ : Phần đầu của trang web 3. Thẻ 16 4. Thẻ : Chứa nội dung trang web.  Toàn bộ nội dung của tài liệu nằm giữa hai thẻ xác định thân của trang ... . Các dòng văn bản, hình ảnh, âm thanh, video, các mối liên kết... tạo nên trang Web đều phải nằm ở đây.  Chú thích trong HTML: dùng dấu 17 Thẻ tạo tiêu đề 5. Tiêu đề mức 1 • Thẻ định nghĩa có dạng:

...

Ví dụ:

Tiêu đề 1

cho ta tiêu đề tương ứng Tiêu đề 1 18 Thẻ tạo tiêu đề 5. Tiêu đề mức 2 • Thẻ định nghĩa có dạng:

...

Ví dụ:

Tiêu đề 2

cho ta tiêu đề tương ứng Tiêu đề 2 19 Thẻ tạo tiêu đề 6. Tiêu đề mức 3 • Thẻ định nghĩa có dạng:

...

Ví dụ:

Tiêu đề 3

cho ta tiêu đề tương ứng Tiêu đề 3 20