BÀI 1 GIỚI THIỆU VỀ WORLD WIDE WEB VÀ HTML ThS. Nguyễn Mạnh Sơn

02/08/2011 BÀI GIỚI THIỆU VỀ WORLD WIDE WEB VÀ HTML ThS Nguyễn Mạnh Sơn V1.0011101205 TÌNH HUỐNG DẪN NHẬP Các trang Web ngày trở nên quan trọng gần gũi với sống hàng ngày V1.0011101205 02/08/2011 TÌNH HUỐNG DẪN NHẬP (tiếp theo)  • Lịch sử Internet WWW? • Tổ chức trang Web? • Biểu diễn trang Web? • Thiết kế trang Web đơn giản? V1.0011101205 MỤC TIÊU Giới thiệu internet WWW Ngôn ngữ HTML sử dụng thẻ HTML Các kiến thức ban đầu thiết kế trang web đơn giản với Frontpage V1.0011101205 02/08/2011 NỘI DUNG Lịch sử Internet WWW, dịch vụ khái niệm Mô hình hoạt động dịch vụ Web Giới thiệu ngôn ngữ HTML Định dạng cấu trúc tài liệu định dạng khối với HTML Siêu liên kết HTML Chèn âm thanh, hình ảnh bảng biểu Tạo HTML Form thành phần Giới thiệu công cụ Microsoft FrontPage Thiết kế trang Web đơn giản sử dụng Frontpage V1.0011101205 CÁC KHÁI NIỆM CƠ BẢN TRÊN INTERNET VÀ WWW • Phân biệt loại mạng; • Địa IP; • Dịch vụ tên miền; • Địa URL; V1.0011101205 02/08/2011 1 PHÂN BIỆT CÁC LOẠI MẠNG • • • Intranet  Mạng riêng gồm nhiều LAN & WAN  Sử dụng giao thức để liên lạc  Thường có Firewalls có kết nối Internet Extranet  Một kiểu mạng Intranet mở rộng  Dành cho giao tiếp với khách hàng, đại lý bên Internet  Mạng cộng đồng diện rộng, sử dụng giao thức TCP/IP  Gồm nhiều Intranet  Mỗi máy tính mạng có địa IP V1.0011101205 1.2 ĐỊA CHỈ IP, DỊCH VỤ TÊN MIỀN, ĐỊA CHỈ URL • Địa IP  Một dãy số có octet, VD 192.168.1.212  Duy nhất: khơng có máy tính Internet có trùng địa IP;  Bất tiện: Khó nhớ • Dịch vụ tên miền  Ánh xạ địa IP thành tên chữ có dấu chấm ngược lại  Ví dụ : • 203.162.168.130  www.vnn.vn Địa URL (Uniform Resource Locator): dùng để tham chiếu tới tài nguyên Internet  Ví dụ: V1.0011101205 02/08/2011 LỊCH SỬ INTERNET VÀ WWW • Khởi nguồn từ dự án ARPANet  Được năm 1960 ARPA (Advanced Research Projects Agency of DOD);  Ban đầu, mạng xây dựng để kết nối trường đại học viện nghiên cứu với đường truyền 56KB;  Sự phát triển liên tục hệ thống mạng dẫn tới đời Internet ngày • Các mục tiêu ARPA  Cho phép nhiều người dùng gửi nhận thơng tin thời điểm  Sử dụng chuyển mạch gói;  Thiết kế mạng để hoạt động mà không cần điều khiển tập trung V1.0011101205 LỊCH SỬ INTERNET VÀ WWW (tiếp theo) • Sự đời ARPANet dẫn tới phát triển mạnh mẽ phần cứng phần mềm liên quan đến mạng • Mạng Internet mạng tất mạng, Internet mạng công cộng kết nối hàng trăm triệu người giới • Về mặt vật lý, mạng Internet sử dụng phần toàn tài nguyên mạng viễn thông công cộng tồn • Về mặt kĩ thuật, mạng Internet sử dụng tập giao thức gọi chung TCP/IP (Transmission Control Protocol/Internet Protocol) V1.0011101205 10 02/08/2011 CÁC DỊCH VỤ TRÊN MẠNG INTERNET Các dịch vụ mạng Internet: • DHCP: dịch vụ cấp phát địa IP; • File Server: chia sẻ liệu (tập tin, thư mục); • Print Server: chia sẻ máy in; • Database Server: dịch vụ sở liệu; • DNS: chuyển đổi tên miền  địa IP; • Web Server: dịch vụ web; • FTP Server: dịch vụ truyền, nhận file; • Mail Server: dịch vụ email (thư điện tử) 11 V1.0011101205 2.2 WORLD WIDE WEB VÀ TỔ CHỨC W3C • World Wide Web (WWW)  Tim Berner Lee, 1989: HTML, WWW  Trang web (Web page): •  Một dạng tài liệu sử dụng phổ biến Internet  Cho phép trình bày chữ, hình ảnh, âm thanh,…  HTML (Hyper Text Markup Language) Tổ chức W3C  Sáng lập năm 1994 Tim Berner Lee nhằm chuẩn hố cơng nghệ, dịch vụ WWW  Các khuyến nghị W3C đưa cho công nghệ như: Extensible HyperText Markup Language (XHTML), Cascading Style Sheets (CSS) and the Extensible Markup Language (XML) V1.0011101205 12 02/08/2011 2.3 CÁC DỊCH VỤ PHỔ BIẾN TRÊN INTERNET • Thư điện tử (E-mail); • World Wide Web (WWW); • File Transfer Protocol (FTP); • Tán gẫu (Chat); • Làm việc từ xa (Telnet); • Gọi điện thoại qua Internet (NetPhone); • Tra cứu thơng tin; • Thương mại điện tử (E-commerce); • Đào tạo trực tuyến (E-learning); • Các dịch vụ khác (Gopher, Giải trí…) 13 V1.0011101205 2.4 MƠ HÌNH ỨNG DỤNG WEB Mơ hình kết nối Internet UNI VERSI TY V1.0011101205 14 02/08/2011 2.4 MƠ HÌNH ỨNG DỤNG WEB (tiếp theo) Mơ hình kết nối Internet Xử lý u cầu Internet HTML……… ………………… ………… Web Server http://www.topica.edu.vn V1.0011101205 15 2.4 MƠ HÌNH ỨNG DỤNG WEB (tiếp theo) Các thuật ngữ mơ hình ứng dụng Web: • Máy chủ (Server); • Máy khách (Client); • Trình duyệt Web: Phần mềm có khả đọc file biểu diễn nội dung Website Ví dụ: Internet Explorer, Mozilla Firefox … • Giao thức truyền thông tin ứng dụng Web:  Tương ứng với kiểu ứng dụng có giao thức tương ứng để định nghĩa cách thức gửi nhận thông tin máy chủ máy khách  Ví dụ: giao thức HTTP, SMTP, FTP, POP3, Telnet,… V1.0011101205 16 02/08/2011 GIỚI THIỆU NGÔN NGỮ HTML • Giới thiệu HTML:  HTML: Hyper-Text Markup Language;  Là ngôn ngữ dùng để tạo trang web (ở dạng tập tin văn đơn giản);  HTML dùng thẻ (tag) để thông báo cho web browser hiển thị;  Hầu hết web browser hiểu ngơn ngữ HTML • Cú pháp thẻ (tag) HTML: ]>  Ví dụ: Hiển thị dòng chữ “Chào bạn” dạng in đậm Chào bạn 17 V1.0011101205 ĐỊNH DẠNG CẤU TRÚC TÀI LIỆU VỚI HTML Tiêu đề tài liệu Nội dung tài liệu V1.0011101205 18 02/08/2011 4.1 ĐỊNH DẠNG CẤU TRÚC TÀI LIỆU VỚI HTML Các thuộc tính thẻ BODY Đặt ảnh làm ảnh (Background) cho văn Giá trị tham số (phần sau dấu bằng) URL BACKGROUND= file ảnh Nếu kích thước ảnh nhỏ cửa sổ trình duyệt tồn hình cửa sổ trình duyệt sẽ lát kín nhiều ảnh Đặt màu cho trang hiển thị Nếu hai tham số BGCOLOR= TEXT= ALINK= VLINK= LINK= BACKGROUND có giá trị trình duyệt hiển thị mầu trước, sau tải ảnh lên phía Xác định màu chữ văn bản, kể đề mục Xác định màu sắc cho siêu liên kết văn Tương ứng, alink (Active link) liên kết kích hoạt - tức kích chuột lên; vlink (Visited link) lên kết kích hoạt V1.0011101205 19 4.2 ĐỊNH DẠNG KHỐI VỚI HTML • Thẻ P:

Nội dung đoạn văn bản

• Các thẻ đề mục: H1/H2/H3/H4/H5/H6 • Thẻ xuống dịng BR • Thẻ PRE: Văn định dạng V1.0011101205 20 10 02/08/2011 4.3 ĐỊNH DẠNG DANH SÁCH • • • Định dạng danh sách thơng thường

• Mục thứ
• Mục thứ hai

Thẻ OL

1. Muc thu nhat
2. Muc thu hai
3. Muc thu ba

TYPE  =1 Các mục xếp theo thứ tự 1, 2,  =a Các mục xếp theo thứ tự a, b, c  =A Các mục xếp theo thứ tự A, B, C  =i Các mục xếp theo thứ tự i, ii, iii  =I Các mục xếp theo thứ tự I, II, III 21 V1.0011101205 4.4 ĐỊNH DẠNG KÝ TỰ In chữ đậm In chữ nghiêng In chữ gạch chân Đánh dấu đoạn văn hai thẻ định nghĩa từ Chúng thường in nghiêng thể qua kiểu đặc biệt In chữ gạch ngang In chữ lớn bình thường cách tăng kích thước font thời lên Việc sử dụng thẻ lồng tạo hiệu ứng chữ tăng dần Tuy nhiên trình duyệt có giới hạn kích thước font chữ, vượt q giới hạn này, thẻ khơng có ý nghĩa V1.0011101205 22 11 02/08/2011 4.4 ĐỊNH DẠNG KÝ TỰ (tiếp theo) In chữ nhỏ bình thường cách giảm kích thước font thời Việc sử dụng thẻ lồng tạo hiệu ứng chữ giảm dần Tuy nhiên trình duyệt cũ giới hạn kích thước font chữ, vượt qua giới hạn này, thẻ khơng có ý nghĩa Định dạng số (SuperScript) Định dạng số (SubScript) Định nghĩa kích thước font chữ sử dụng hết văn Thẻ cú tham số size= xác định cỡ chữ Thẻ khơng có thẻ kết thúc Chọn kiểu chữ hiển thị Trong thẻ đặt hai tham số size= color= xác định cỡ chữ màu sắc đoạn văn nằm hai thẻ Kích thước cú thể tuyệt đối (nhận giỏ trị từ đến 7) tương đối (+2,-4 ) so với font chữ 23 V1.0011101205 4.5 SỬ DỤNG MÀU SẮC Màu sắc Đỏ Đỏ sẫm Xanh Xanh nhạt Xanh nước biển Vàng Vàng nhạt Trắng Đen Xám Nâu Tím Tím nhạt Hồng Da cam Màu đồng phục hải quân V1.0011101205 Giá trị Tên tiếng Anh #FF0000 RED #8B0000 DARKRED #00FF00 GREEN #90EE90 LIGHTGREEN #0000FF BLUE #FFFF00 YELLOW #FFFFE0 LIGHTYELLOW #FFFFFF WHITE #000000 BLACK #808080 GRAY #A52A2A BROWN #FF00FF MAGENTA #EE82EE VIOLET #FFC0CB PINK #FFA500 ORANGE #000080 NAVY #4169E1 ROYALBLUE #7FFFD4 AQUAMARINE 24 12 02/08/2011 4.6 SIÊU LIÊN KẾT TRONG HTML • • Sử dụng thẻ A siêu văn = url = name =n = title = _blank / _self Ý nghĩa tham số: HREF Địa trang Web liên kết, URL NAME Đặt tên cho vị trí đặt thẻ TABLEINDEX Thứ tự di chuyển ấn phím Tab TITLE Văn hiển thị di chuột siêu liên kết TARGET Mở trang Web liên cửa sổ (_blank) cửa sổ (_self), frame (tên frame) V1.0011101205 25 4.6 SIÊU LIÊN KẾT TRONG HTML (tiếp theo) • Tạo liên kết đến trang web khác: Text • Trong đó:  Url: đường dẫn/địa của trang web chuyển đến  Target giá trị sau:  “_new” “_blank”: trình duyệt phải mở trang web đích cửa sổ  "_top", "_parent", "_self“: dùng cho trang web có chứa frame  Text: đoạn văn hiển thị để người dùng click vào • Tạo liên kết đến E-mail:  • Trong đó:  Align: lề bảng: “left” “right”  Background: định file ảnh bảng;  Bgcolor: màu bảng;  Border: đường viền bảng (tính pixel);  Cellpadding: khoảng cách từ cạnh tới nội dung (tính pixel)  Width, Height : độ rộng, cao bảng (tính theo % tính pixel) V1.0011101205 33 TẠO HTML FORM VÀ CÁC THÀNH PHẦN • Tạo HTML Form; • Tạo danh sách lựa chọn; • Tạo vùng soạn thảo văn bản; • Ví dụ V1.0011101205 34 17 02/08/2011 6.1 TẠO HTML FORM Cấu trúc câu lệnh tạo form METHOD NAME TARGET Phương thức gửi liệu Tên form Chỉ định cửa sổ hiển thị kết 35 V1.0011101205 6.2 TẠO DANH SÁCH LỰA CHỌN Cấu trúc danh sách lựa chọn Tên mục chọn thứ Tên mục chọn thứ hai V1.0011101205 36 18 02/08/2011 6.3 TẠO VÙNG SOẠN THẢO VĂN BẢN Cấu trúc vùng soạn thảo văn Văn ban đầu V1.0011101205 37 6.4 VÍ DỤ FORM TRONG HTML Ví dụ tạo form với password hộp chọn file V1.0011101205 38 19 02/08/2011 GIỚI THIỆU MICROSOFT FRONTPAGE • Là cơng cụ thiết kế web đơn giản dễ sử dụng kèm Microsoft Office; • Ở ví dụ với FRONTPAGE 2003 Hiện phiên Office phổ biến nhất? 39 V1.0011101205 7.1 THANH CÔNG CỤ TRÊN FRONTPAGE 2003 • Mở FrontPage 2003: Start  Programs  Microsoft Office  Microsoft FrontPage 2003 • Màn hình làm việc FrontPage 2003: Thanh tiêu đề Thanh Menu Thanh cơng cụ chuẩn Thanh định dạng Page tab Đóng trang web Task pane Vùng thiết kế Chế độ làm việc V1.0011101205 Thanh cuộn ngang – dọc 40 20 ... rộng V1.0 011 1 012 05 27 CHÈN ÂM THANH, HÌNH ẢNH, BIỂU BẢNG • Chèn âm vào trang web; • Chèn hình ảnh vào trang web; • Chèn biểu bảng vào trang web V1.0 011 1 012 05 28 14 02/08/2 011 5 .1 CHÈN ÂM THANH VÀO... tính pixel) V1.0 011 1 012 05 33 TẠO HTML FORM VÀ CÁC THÀNH PHẦN • Tạo HTML Form; • Tạo danh sách lựa chọn; • Tạo vùng soạn thảo văn bản; • Ví dụ V1.0 011 1 012 05 34 17 02/08/2 011 6 .1 TẠO HTML FORM Cấu... Telnet,… V1.0 011 1 012 05 16 02/08/2 011 GIỚI THIỆU NGƠN NGỮ HTML • Giới thiệu HTML:  HTML: Hyper-Text Markup Language;  Là ngôn ngữ dùng để tạo trang web (ở dạng tập tin văn đơn giản);  HTML dùng