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
Trang 1THIẾT KẾ WEB VỚI
MICROSOFT FRONTPAGE 2003
VÀ HTML (Hypertext Markup
Language)
Trang 2NỘI DUNG
Chương I: Một số khái niệm cơ bản
Chương V: Multimedia hóa trang web
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
Trang 3Mạ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 tin trên khắp thế giới
Chương I: CÁC KHÁI NIỆM CƠ BẢN
Trang 4Giao 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
Trang 55
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)
Trang 6• 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
Trang 7Dị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
Trang 8URL (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:
Trang 9 Mô hình hoạt động của dịch vụ Web:
Trang 10Chương II NGÔN NGỮ HTML (Hypertext Markup Language)
Trang 11Giớ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, một đoạn chương trình khác
Trang 12• 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ở (<KEYWORD>) và thẻ đóng (</KEYWORD>) 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ẻ
Trang 13 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 HTML quy định cách viết: > <
Trang 14Cấ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:
Trang 15Một số thẻ HTML thông dụng:
1 Thẻ <HTML>: Trang web tĩnh đƣợc bắt
đầu bằng :<HTML> và kết thúc bằng:
</HTML>
2 Thẻ <HEAD>: Phần đầu của trang web
3 Thẻ <TITLE>: Đặt tiêu đề cho trang web
(thẻ này nằm trong <HEADER>) Nếu bỏ
trống thì trình duyệt sẽ cho hiện tên tệp thay vào đó
Trang 16Ví dụ: Đặt tiêu đề của trang web là: “Chào các bạn học viên”
Trang 174 Thẻ <BODY>: 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 <BODY> </BODY> 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
<! và dấu >
<! Nội dung chú thích >
Trang 24Thẻ trình bày trang
10 Định dạng phần địa chỉ: Cho biết
thông tin như địa chỉ, danh thiếp và tác giả, thường đặt ở đầu hay cuối tài liệu
Thẻ định dạng:
<ADDRESS>…</ADDRESS>
Trang 26Kết quả thu được
Trang 2711 Đoạn văn bản
• Thẻ này dùng để xác định một đoạn
văn bản Thẻ <P> (Paragraph) có thể dùng kèm thuộc tính để ấn định cách trình bày đoạn văn bản
• Chỉ là giới hạn một đoạn paragraph,
cách bày trí do các thành phần khác
Trang 2812 Xuống dòng
• Thẻ này dùng để xuống dòng mới Bắt buộc xuống dòng tại vị trí gặp từ khóa này Dòng mới được căn lề như dòng được bẻ tự động khi dòng đó quá dài
Thẻ định nghĩa dạng: <BR>
• Nếu không muốn chèn một dòng trắng
mà chỉ đơn thuần muốn xuống dòng mới thì cần sử dụng thẻ <BR> (Break) Thẻ Break không cần có thẻ đóng kèm theo
Trang 2913 Căn chính giữa
Thẻ này dùng để căn chỉnh đoạn văn bản ở giữa chiều rộng trang văn bản
•Thẻ định nghĩa dạng:
<CENTER> </CENTER>
•Thẻ này cũng có tác dụng xuống
dòng khi kết thúc đoạn văn bản
Trang 30Thuộc tính ALIGN của thẻ Paragraph
14 Căn lề trái: <P ALIGN=LEFT>…</P>
•Cả đoạn văn bản được căn lề trái của trang
•Ví dụ:
<P ALIGN=LEFT>
Em vội bước ra đi quên Logoff
Chẳng một lời dù chỉ tiếng Standby
Em quên hết kỷ niệm xưa đã Add
Quẳng tình anh vào khoảng trống Recycle Bin
</P>
Trang 31Thuộc tính ALIGN của thẻ Paragraph
15 Căn giữa: <P ALIGN=CENTER>…</P>
•Cả đoạn văn bản đƣợc căn chính giữa trang
•Ví dụ:
<P ALIGN=CENTER>
Anh vẫn đợi trên nền xanh Desktop
Bóng em vừa Refresh hồn anh Từng cú Click em đi vào nỗi nhớ Trong tim anh Harddisk dần đầy
</P>
Trang 32Thuộc tính ALIGN của thẻ Paragraph
16 Căn lề phải: <P ALIGN=RIGHT>…</P>
•Cả đoạn văn bản đƣợc căn lề bên phải của
Hay mình sẽ một lần Full Format
Em đã change Password cũ còn đâu!
</P>
Trang 3317 Đường kẻ ngang
• Thẻ này tạo ra đường kẻ ngang (Horizontal Rule) ngăn cách giữa các phần trong tài liệu
Trang 34SIZE = n Thay đổi độ đậm hay mảnh của đường kẻ n là số pixcel
ALIGN=LEFT|
RIGHT
Căn lề trái|phải Đường kẻ ngang mặc định được căn chính giữa
NOSHADE Không có bóng mờ, đường kẻ thành màu đen
Trang 3535
18 Danh sách không đánh số thứ tự
• Danh sách không đánh số thứ tự liệt kê các mục bằng một chấm tròn ở đầu mỗi mục
• Cặp thẻ <UL>…</UL> đánh dấu bắt đầu
và kết thúc danh sách Nó có tác dụng lùi
lề trái danh sách vào sâu hơn
• Các thẻ <LI> có tác dụng thể hiện bắt
đầu một dòng mới với một chấm tròn
Trang 36• Theo mặc định, mỗi mục thuộc mức thứ nhất của danh sách không đánh số thứ tự bắt đầu bằng một chấm tròn, còn mỗi mục thuộc mức thứ hai sẽ bắt đầu bằng một vòng tròng
• Ta vẫn có thể thay đổi bằng cách sử dụng thuộc tính TYPE
Cú pháp:
<UL TYPE=DISC|CIRCLE|SQUARE>
hoặc
<UI TYPE=DISC|CIRCLE|SQUARE>
Trang 3719 Danh sách đánh số thứ tự
• Danh sách đánh số thứ tự giống như danh
sách không đánh số thứ tự nhưng các chấm tròn ở đầu mỗi mục sẽ được thay bởi việc đánh số thứ tự các mục đó
• Cặp thẻ <OL>…</OL> đánh dấu bắt đầu và
kết thúc danh sách Nó có tác dụng lùi lề trái danh sách vào sâu hơn
• Các thẻ <LI> có tác dụng thể hiện bắt đầu
một dòng mới với một số thứ tự tương ứng
Trang 3838
• Có thể dùng thuộc tính TYPE để lựa
chọn các cách đánh thứ tự khác nhau khi bắt đầu mỗi mục trong một danh sách có đánh số thứ tự:
• Chữ in hoa A,B,C,… (TYPE=A)
Trang 3920 Danh sách các định nghĩa
• Danh sách các định nghĩa trông giống như một bảng từ vựng hay bảng giải thích các thuật ngữ lùi vào trong
• Cú pháp:
<OL TYPE=A|a|I|i|1>
hoặc
<LI TYPE=A|a|I|i|1>
Trang 4141
21 Danh sách phối hợp, lồng nhau
Các kiểu danh sách nêu trên đều có thể lồng nhau và lồng nhau nhiều mức
Trang 44Cú pháp tạo khung cấu trúc của một bảng:
Trang 46Kết quả thu đƣợc bảng nhƣ sau:
Họ và tên Lớp Quê quán
Nguyễn Mai
Trang 4747
Tên thẻ Giải thích Ví dụ
<B>…</B> Dạng chữ đậm <B>Hello world !</B>
<I>…</I> Dạng chữ nghiêng <I>Hello world !</I>
<U>…</U> Dạng chữ gạch chân <U>Hello world !</U>
<S>…</S> Dạng chữ gạch giữa <S>Hello world!</S>
Size: kích thước
<Font color=“Blue” face=“Arial”>Hello world
</Font>
<Sup>…</Sup> Tạo chỉ số trên X<Sup>2</Sup> X2
<Sub>…</Sub> Tạo chỉ số dưới H<Sub>2</Sub>O
H O
Trang 48<p align=“Left”> Hello world !
Width: độ dài (tính bằng
<HR Color=“Red” Size=“10”
Width=“200” />
Trang 49Các thuộc tính quan trọng của thẻ <P></P>:
Align:
Left: Canh trái
Center: Canh giữa
Right: Canh phải
justify: Canh đều
Style:
Margin-top: Canh lề trên của đoạn
Margin-left: Canh lề trái của đoạn
Margin-right: Canh lề phải của đoạn
Margin-bottom: Canh lề dưới của đoạn
Direction: Chỉ định chiều văn bản (từ trái sang phải “ltr” hoặc từ phải sang trái “rtl”
Trang 50Ví dụ:
1 Định dạng đoạn văn bản thao dạng canh đều,
chiều văn bản đi từ phải sang trái, khoảng cách trên:
3, dưới: 3, trái và phải là mặc định
Trang 51 Các thẻ hình ảnh và âm thanh:
Chèn hình vào web:
<IMG src=“…" width=“…" height=“…" border=“…" alt=“…“/>
Các thuộc tính (thẻ IMG):
Scr: là đường dẫn của file ảnh
Height: Chỉ định chiều cao của ảnh Nếu không chỉ định thì sẽ lấy chiều cao hiện tại của ảnh
Width: chỉ định độ rộng của ảnh Nếu không chỉ định thì
sẽ lấy chiều rộng hiện tại của ảnh
Border: chỉ định độ dày của khung bao quanh ảnh
Alt: là chuỗi văn bản xuất hiện khi đưa trỏ chuột vào ảnh
Đưa nhạc nền vào web:
<BGSOUND scr = “…” loop = “…”>
Trang 52Các thuộc tính:
Scr: là đường dẫn của file âm thanh (*.mid, *.wav, …)
Loop: số lần lặp lại bài nhạc Nếu loop= -1 hoặc “infinite” thì sẽ lặp đến khi chuyển sang trang mới web
Chèn âm thanh, phim:
<EMBED src = “…” autostart = “…” loop = “N” />
Các thuộc tính:
Scr: là đường dẫn của file bài hát/phim
Autostart: nếu là true tự động thực hiện bài hát
Loop: số lần lặp lại bài nhạc Nếu loop = true hoặc
“infinite” thì sẽ lặp đến khi chuyển sang trang mới web
Trang 53 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:
mailto:Địa chỉ E-mail“ >Text</A>
Tạo các liên kết (Hyper link):
Trang 54 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>
Tạo các liên kết (Hyper link):
Trang 55 Height, Width: chiều cao và chiều rộng
Scrollamount, Scrolldelay: chỉ định tốc chuyền động
Trang 56<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)
Tạo bảng (Table)
Trang 57 Background: đường dẫn file ảnh nền của dòng
Bgcolor: màu nền của dòng
Valign: lề theo chiều dọc của văn bản trong các ô trên dòng: “top”, “bottom”, “middle”
Chú ý:
Thẻ <Tr> phải nằm trong thẻ <Table></Table>
Tạo bảng (Table)
Trang 58Thêm ô vào bảng:
<TD align=“…” background = “url“ bgcolor = “RGB”
rowspan = “N” colspan = “M” valign = “…” > … </TD>
Trong đó:
Align: lề của ô: “left”, “right” hoặc “center”
Background: đường dẫn file ảnh nền của dòng
Bgcolor: màu nền của ô
Valign: lề theo chiều dọc của văn bản trong các ô trên dòng: “top”, “bottom”, “middle”
Rowspan: số ô trải dài trên N dòng
Colspan: Số ô trải rộng trên M cột
Chú ý: Thẻ <TD> phải nằm trong thẻ <TR></TR>
Tạo bảng (Table)
Trang 59THIẾT KẾ MỘT WEB SITE THẾ NÀO ?
Phân tích hệ thống web site:
Tìm hiểu đối tượng (khách hàng, người truy cập) của web site
Tìm hiểu các yêu cầu của khách hàng
Xây dựng mô hình hệ thống của web site:
Chức năng của từng trang
Cấu trúc của các trang
Mối liên kết giữa các trang
Xây dựng các mô hình cơ sở dữ liệu (nếu cần thiết)
Thu thập thông tin cần thiết (do khách hàng cung cấp) để xây dựng nội dung cho các trang web
Trang 60Xây dựng từng trang web cụ thể:
Cần liên hệ với nhà cung cấp Host để biết được các thông tin về hệ thống mà web site sau này sẽ vận hành
Nếu có nhiều người cùng tham gia: nên quy ước cách đặt tên các trang web (tên file), tên các thư mục, tên biến
ảnh, âm thanh hay tạo các liên kết giữa các trang (copy các file ảnh/âm thanh vào thư mục của web site trước khi chèn chúng vào các trang web)
Giao diện: đơn giản, thân thiện, dễ dùng, hình ảnh, âm thanh, màu sắc, … tuỳ thuộc vào mục đích của web site
Xây dựng nội dung cho trang web: xúc tích và chính xác
Trang 61 Khi lập trình cần chú ý đến thời gian thực hiện
Chú ý đến vấn đề bảo mật thông tin (nếu cần thiết)
Chạy thử trên hệ thống mạng Intranet hoặc Internet
Đưa web site vào vận hành thử nghiệm
Trang 62CHƯƠNG III
VỚI FRONTPAGE 2003
Trang 63Khởi động FrontPage 2003
Microsoft Office Microsoft FrontPage 2003
Trang 64Thanh tiêu
đề
Thanh Menu Thanh công cụ
chuẩn
Thanh định dạng Page
Thanh cuộn ngang – dọc Task pane Vùng thiết kế
Trang 65 Tạo web site mới:
1 Click
vào đây
Trang 662.Click chọn mẫu web site
1.Nhập đường dẫn chứa web site
Hoặc click vào nút
Browse để chọn
3.Click Ok để tạo website mới
Phải tạo thư mục chứa web site trước khi tạo web site
