CÁC KHÁI NIỆM CƠ BẢN TRÊN INTERNET VÀ WWW• Phân biệt các loại mạng; • Địa chỉ IP; • Dịch vụ tên miền; • Địa chỉ URL;... LỊCH SỬ INTERNET VÀ WWW • Khởi nguồn từ dự án ARPANet Được bắt đ
Trang 1V1.0011101205 1
BÀI 1 GIỚI THIỆU VỀ WORLD WIDE WEB VÀ HTML
ThS Nguyễn Mạnh Sơn
TÌNH HUỐNG DẪN NHẬP
Trang 2V1.0011101205 3
• Lịch sử Internet và WWW?
• Tổ chức một trang Web?
• Biểu diễn trang Web?
• Thiết kế một trang Web đơn giản?
TÌNH HUỐNG DẪN NHẬP (tiếp theo)
Trang 31 CÁC KHÁI NIỆM CƠ BẢN TRÊN INTERNET VÀ WWW
• Phân biệt các loại mạng;
• Địa chỉ IP;
• Dịch vụ tên miền;
• Địa chỉ URL;
Trang 4 Mỗi máy tính trong mạng có một địa chỉ IP duy nhất.
1.2 ĐỊA CHỈ IP, DỊCH VỤ TÊN MIỀN, ĐỊA CHỈ URL
Trang 5V1.0011101205 9
2 LỊCH SỬ INTERNET VÀ WWW
• Khởi nguồn từ dự án ARPANet
Được bắt đầu từ những năm 1960 bởi ARPA (Advanced Research Projects
Agency of DOD);
Ban đầu, mạng được xây dựng để kết nối các trường đại học và viện nghiên cứu
với đường truyền 56KB;
Sự phát triển liên tục của hệ thống mạng này đã dẫn tới sự ra đời của Internet
ngày nay
• Các mục tiêu của ARPA
Cho phép nhiều người dùng có thể gửi và nhận thông tin tại cùng một thời điểm
Sử dụng chuyển mạch gói;
Thiết kế mạng để có thể hoạt động mà không cần điều khiển tập trung
• Sự ra đời của ARPANet đã dẫn tới sự phát triển mạnh mẽ của các phần cứng
và phần mềm liên quan đến mạng
• Mạng Internet là mạng của tất cả các mạng, Internet là một mạng công cộng
kết nối hàng trăm triệu người trên thế giới
• Về mặt vật lý, mạng Internet sử dụng một phần của toàn bộ các tài nguyên
của các mạng viễn thông công cộng đang tồn tại
• Về mặt kĩ thuật, mạng Internet sử dụng tập các giao thức gọi chung là
TCP/IP(TransmissionControlProtocol/InternetProtocol)
2 LỊCH SỬ INTERNET VÀ WWW (tiếp theo)
Trang 6V1.0011101205 11
2 1 CÁC DỊCH VỤ TRÊN MẠNG INTERNET
Các dịch vụ trên mạng Internet:
• DHCP: dịch vụ cấp phát địa chỉ IP;
• File Server: chia sẻ dữ liệu (tập tin, thư mục);
• Print Server: chia sẻ máy in;
• Database Server: dịch vụ cơ sở dữ liệu;
• DNS: chuyển đổi tên miền địa chỉ 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ử)
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 được sử dụng phổ biến trê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 bởi Tim Berner Lee nhằm chuẩn hoá các công nghệ, các
dịch vụ và sự trên WWW
Các khuyến nghị của W3C được đưa ra cho các công nghệ mới như:
Extensible HyperText Markup Language (XHTML), Cascading Style Sheets
(CSS) and the Extensible Markup Language (XML)
Trang 7V1.0011101205 13
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);
Trang 8V1.0011101205 15
Internet HTML………
2.4 MÔ HÌNH ỨNG DỤNG WEB (tiếp theo)
Mô hình kết nối Internet
2.4 MÔ HÌNH ỨNG DỤNG WEB (tiếp theo)
Các thuật ngữ trong 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ả năng đọc các file biểu diễn nội dung Website
Ví dụ: Internet Explorer, Mozilla Firefox …
• Giao thức truyền thông tin trong ứng dụng Web:
Tương ứng với mỗi kiểu ứng dụng sẽ có những giao thức tương ứng để định
nghĩa cách thức gửi và nhận thông tin giữa máy chủ và máy khách
Ví dụ: các giao thức HTTP, SMTP, FTP, POP3, Telnet,…
Trang 9V1.0011101205 17
3 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 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
<BODY Các tham số nếu có>
Nội dung của tài liệu
</BODY>
</HTML>
Trang 10Đặt màu nền cho trang khi hiển thị Nếu cả hai tham số
BACKGROUND cùng có giá trị thì trình duyệt sẽ hiển thị
mầu nền trước, sau đó mới tải ảnh lên phía trên.
TEXT= Xác định màu chữ của văn bản, kể cả các đề mục.
ALINK=
VLINK=
LINK=
Xác định màu sắc cho các siêu liên kết trong văn bản.
Tương ứng, alink (Active link) là liên kết đang được kích hoạt - tức là khi đã được kích chuột lên; vlink (Visited link) chỉ lên kết đã từng được kích hoạt.
Các thuộc tính chính của thẻ BODY
Trang 11<LI>Muc thu nhat
<LI>Muc thu hai
= i Các mục được sắp xếp theo thứ tự i, ii, iii
= I Các mục được sắp xếp theo thứ tự I, II, III
<U> </U> In chữ gạch chân
<DFN> Đánh dấu đoạn văn giữa hai thẻ này là định nghĩa của một
từ Chúng thường được in nghiêng hoặc thể hiện qua một kiểu đặc biệt nào đó.
<S> </S>
<STRIKE> </STRIKE>
In chữ gạch ngang
<BIG> </BIG> In chữ lớn hơn bình thường bằng cách tăng kích thước font
hiện thời lên một Việc sử dụng các thẻ <BIG>lồng nhau tạo
Trang 12V1.0011101205 23
<SMALL> </SMALL> In chữ nhỏ hơn bình thường bằng cách giảm kích thước font
hiện thời đi một Việc sử dụng các thẻ <SMALL> lồng
nhau tạo ra hiệu ứng chữ giảm dần Tuy nhiên đối với mỗi trình duyệt cũ giới hạn về kích thước đối với mỗi font
chữ, vượt qua giới hạn này, các thẻ <SMALL> sẽ không
có ý nghĩa.
<SUP> </SUP> Định dạng chỉ số trên (SuperScript)
<SUB> </SUB> Định dạng chỉ số dưới (SubScript)
<BASEFONT> Định nghĩa kích thước font chữ được sử dụng cho đến hết
văn bản Thẻ này chỉ cú một tham số size= xác định cỡ chữ.
Thẻ <BASEFONT> không có thẻ kết thúc.
<FONT> </FONT> Chọn kiểu chữ hiển thị Trong thẻ này có thể đặt hai tham số
size= hoặc color= xác định cỡ chữ và màu sắc đoạn văn bản nằm giữa hai thẻ Kích thước cú thể là tuyệt đối (nhận giỏ trị
từ 1 đến 7) hoặc tương đối (+2,-4 ) so với font chữ hiện tại.
Trang 13HREF Địa chỉ của trang Web được liên kết, là một URL nào đó
NAME Đặt tên cho vị trí đặt thẻ.
TABLEINDEX Thứ tự di chuyển khi ấn phím Tab
TITLE Văn bản hiển thị khi di chuột trên siêu liên kết.
TARGET Mở trang Web được liên trong một cửa sổ mới (_blank) hoặc
trong cửa sổ hiện tại (_self), trong một frame (tên frame).
• Tạo liên kết đến trang web khác:
<A href = “url” target = “…”>Text </A>
• Trong đó:
Url: là đường dẫn/địa chỉ của của trang web chuyển đến
Target có thể là các giá trị sau:
“_new” hoặc “_blank”: trình duyệt sẽ phải mở trang web đích trong một cửa sổ
mới
"_top", "_parent", "_self“: dùng cho những trang web có chứa frame
Text: là đoạn văn bản hiển thị để người dùng click vào
• Tạo liên kết đến E-mail:
<A href = "mailto:Địa chỉ E-mail“>Text</A>
4.6 SIÊU LIÊN KẾT TRONG HTML (tiếp theo)
Trang 14V1.0011101205 27
• Tạo liên kết bên trong (liên kết nội) của trang web:
Là liên kết đến từng đoạn văn bản trong trang web
<A href = “#Tên của đoạn”>Text</A>
• Trong đó:
Chỉ mục/tên của đoạn được tạo như sau:
<A name = “Tên đoạn”>Text</A>
Được đặt ở đầu đoạn
• Tạo dòng chữ chạy trên trang web:
<MARQUEE direction = “…” behavior =“…” height = “…” width = “…”
scrollamount =“N” scrolldelay = “M”>Text </MARQUEE>
Trong đó:
Direction: hướng chuyển động của dòng chữ “Text”
Behavior: hình thức chuyển động
Height, Width: chiều cao và chiều rộng
4.6 SIÊU LIÊN KẾT TRONG HTML (tiếp theo)
5 CHÈN ÂM THANH, HÌNH ẢNH, BIỂU BẢNG
• Chèn âm thanh vào trang web;
• Chèn hình ảnh vào trang web;
• Chèn biểu bảng vào trang web
Trang 15V1.0011101205 29
5.1 CHÈN ÂM THANH VÀO TRANG WEB
Đưa âm thanh vào tài liệu Web
<BGSOUND SRC = url LOOP = n>
• Thẻ này không có thẻ kết thúc tương ứng (</BGSOUND>) Để chơi lặp lại vô hạn
cần chỉ định LOOP = -1 hoặc LOOP = INFINITE.
• Thẻ BGSOUND phải được đặt trong phần mở đầu (tức là nằm trong cặp thẻ
Trang 16V1.0011101205 31
5.3 CHÈN BIỂU BẢNG VÀO TRANG WEB
Các thẻ liên quan đến bảng biểu
<TABLE> </TABLE> Định nghĩa một bảng
<TR> </TR> Định nghĩa một hàng trong bảng
<TD> </TD> Định nghĩa một ô trong hàng
<TH> </TH> Định nghĩa ô chứa tiêu đề của cột
<CAPTION> </CAPTION> Tiêu đề của bảng
ALIGN = LEFT / CENTER / RIGHT
VALIGN = TOP / MIDDLE / BOTTOM
Trang 17V1.0011101205 33
• <TABLE align = “…” background = “url” bgcolor = “RGB” border = “…” cellpadding
= “…” width = “…” height=“…" >
• Trong đó:
Align: lề của bảng: “left” hoặc “right”
Background: chỉ định file ảnh nền của bảng;
Bgcolor: màu nền của bảng;
Border: đường viền bảng (tính bằng pixel);
Cellpadding: khoảng cách từ các cạnh của ô tới nội dung của ô (tính bằng pixel)
Width, Height : độ rộng, cao của bảng (tính theo % hoặc tính bằng pixel)
5.3 CHÈN BIỂU BẢNG VÀO TRANG WEB (tiếp theo)
6 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ụ
Trang 18ACTION Địa chỉ sẽ gửi dữ liệu tới khi form
được submit (có thể là địa chỉ tới một chương trình CGI, một trang ASP ).
METHOD Phương thức gửi dữ liệu.
NAME Tên của form.
TARGET Chỉ định cửa sổ sẽ hiển thị kết quả
sau khi gửi dữ liệu từ form đến server.
<INPUT
ALIGN = LEFT | CENTER | RIGHT
TYPE = BUTTON | CHECKBOX | FILE | IMAGE | PASSWORD |
RADIO | RESET | SUBMIT | TEXT
VALUE = value
>
6.2 TẠO DANH SÁCH LỰA CHỌN
Cấu trúc danh sách lựa chọn
<SELECT NAME="tên danh sách" SIZE="chiều cao">
<OPTION VALUE=value1 SELECTED> Tên mục chọn thứ nhất
<OPTION VALUE=value2> Tên mục chọn thứ hai
<! Danh ssch các mục chọn >
</SELECT>
Trang 19V1.0011101205 37
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 bản
Trang 20V1.0011101205 39
7 GIỚI THIỆU MICROSOFT FRONTPAGE
• Là công cụ thiết kế web đơn giản dễ sử dụng đi kèm trong bộ Microsoft Office;
• Ở đây chúng ta ví dụ vớiFRONTPAGE 2003
Hiện nay các phiên bản Office nào là phổ biến nhất?
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 của FrontPage 2003:
Thanh định dạng Page tab Đóng trang
web hiện tại Task pane
Vùng thiết kế
Trang 21V1.0011101205 41
7.2 TẠO MỘT TRANG WEB VỚI FRONTPAGE 2003
Tạo web site mới:
• Mở MS.FrontPage
• Click vào hình mũi tên bên cạnh biểu tượng New Web site
Hộp thoại Web site Templates xuất hiện
2.Click vào để tạo web site mới
• Split: chế độ vừa thiết kế vừa viết mã lệnh;
• Preview: Chế độ chạy thử trang web trong FrontPage
Trang 22V1.0011101205 43
7.4 ĐỊNH DẠNG LỀ CHO TRANG WEB
Các thao tác định dạng lề cho trang Web:
• Mở hộp thoại Page properties;
• Chọn tab Advanced;
• Định lề trên: nhập giá trị vào ô Top Margin;
• Định lề trái: nhập giá trị vào ô Left Margin;
• Định lề dưới: nhập giá trị vào ô Bottom Margin;
• Định lề phải: nhập giá trị vào ô Right Margin
7.5 ĐỊNH DẠNG FONT CHỮ
Các thao tác định dạng font chữ:
• Mở hộp thoại Page properties;
• Chọn tab Advanced;
• Click chọn nút Body style Hộp thoại Modify style xuất hiện;
• Click nút Format Font;
• Chọn các giá trị cần thiết rồi click OK để thiết lập
Trang 23V1.0011101205 45
7.6 CHÈN ẢNH NỀN
Các thao tác chèn ảnh nền
• Mở hộp thoại Page properties
• Chọn tab Formatting Background picture Browse để chọn ảnh nền OK
• Chọn Insert Hyperlink (hoặc ấn tổ hợp phím “Ctrl” + K)
• Hoặc click biểu tượng hyperlink ( ) trên thanh công cụ
• Hộp thoại Insert hyperlink xuất hiện click chọn trang web cần liên kết OK
• Hoặc nhập vào địa chỉ (của trang web trên mạng) vào ô Address click OK
Trang 24V1.0011101205 47
7.8 CHÈN BẢNG
Table cho phép hiển thị danh sách theo dòng, cột:
• Table cho phép ta tạo các ô để đặt các đối tượng vào đúng vị trí của chúng (table
chính xác hơn layer)
• Chèn Table vào trang web:click Table Insert Table
7.9 LÀM VIỆC VỚI KHUNG (Frame)
Một trang web có thể chứa nhiều frame:
• Mỗi Frame chứa một trang web
• Frame giúp cho trình duyệt cùng một lúc có thể hiển thị một hoặc nhiều trang
web trong cùng 1 cửa sổ
• Tuy nhiên không phải mọi trình duyệt đều hỗ trợ frame
• Tạo một trang web có frame ta thực hiện:
Click mũi tên bên cạnh biểu tượng New Page
Hộp thoại Page template xuất hiện Frames pages
Hình minh họa:
Trang 25V1.0011101205 49
TÓM LƯỢC CUỐI BÀI
• Lịch sử của Internet và WWW
• Một số khái niệm cơ bản
• Cấu trúc chung và một số thẻ HTML cơ bản
• Bước đầu sử dụng FrontPage 2003 để tạo các trang web
đơn giản