Bài giảng thiết kế Web (Hệ Cao đẳng)

Trang Web trình bày dữ liệu trên trình duyệt có cấu trúc HTML. Cấu trúc này được bắt đầu bằng thẻ và kết thúc bằng thẻ . Trang HTML có tên mở rộng thường là .html ,.htm,.jhtml,.phtm.... nhưng mà tên mở rộng chuẩn trong HTML là .htmlHầu hết các thẻ HTML được khai báo giữa 2 thẻ Chú ý : Trong HTML các thẻ không phân biệt chữ hoa và chữ thường. Ví dụ cũng như và cũng giống như ....Để học nhanh HTML bạn nên phân chia ra hai lại thẻ:•Thẻ có thẻ đóng ví dụ thẻ thẻ đóng là , thẻ đóng •Thẻ không có thẻ đóng ví dụ như là .....Ví dụ: Mã nguồn tạo một trang web đơn giản

Trang 1

CHƯƠNG I CÁC KHÁI NIỆM VÀ THUẬT NGỮ VỀ WEB

1.1 Khái niệm về web

1.1.1 Trang Web và ngôn ngữ HTML

Trang Web trình bày dữ liệu trên trình duyệt có cấu trúc HTML Cấu trúc này đượcbắt đầu bằng thẻ <HTML> và kết thúc bằng thẻ </HTML> Trang HTML có tên mởrộng thường là html ,.htm,.jhtml,.phtm nhưng mà tên mở rộng chuẩn trong HTML là

*.html

Hầu hết các thẻ HTML được khai báo giữa 2 thẻ <HTML></HTML>

Chú ý : Trong HTML các thẻ không phân biệt chữ hoa và chữ thường Ví dụ

<HEAD> cũng như <head> và cũng giống như <HeAd>

Để học nhanh HTML bạn nên phân chia ra hai lại thẻ:

Đặc điểm tiện lợi của website: thông tin dễ dàng cập nhật, thay đổi, khách hàng cóthể xem thông tin ngay tức khắc, ở bất kỳ nơi nào, tiết kiệm chi phí in ấn, gửi bưu điện,fax, thông tin không giới hạn (muốn đăng bao nhiêu thông tin cũng được, không giớihạn số lượng thông tin, hình ảnh ) và không giới hạn phạm vi khu vực sử dụng (toànthế giới có thể truy cập)

Một website thông thường được chia làm 2 phần: giao diện người dùng (front-end)

và các chương trình được lập trình để website hoạt động (back-end) Giao diện ngườidùng là định dạng trang web được trình bày trên màn hình của máy tính của người xem(máy khách) được xem bằng các phần mềm trình duyệt web như Internet Explorer,

Trang 2

Firefox, Tuy nhiên ngày nay người xem có thể xem website từ các thiết bị điện tửkhác như điện thoại di động, PDA, Việc trình bày một website phải đảm bảo các yếu

tố về thẩm mỹ đẹp, ấn tượng; bố cục đơn giản, dễ hiểu và dễ sử dụng, các chức năngtiện lợi cho người xem Đặc biệt ngày nay, website trở nên sống động với những hiệuứng đa dạng của hình ảnh và chữ kết hợp với âm thanh

Phần Back-end là phần lập trình của website lưu trữ trên máy chủ (Server) Sự khácnhau ở phần lập trình back-end của website làm phân ra 2 loại website: Website tĩnh vàwebsite động

- Website động (Dynamic website) là website có cơ sở dữ liệu, được cung cấp công

cụ quản lý website (Admin Tool) để có thể cập nhật thông tin thường xuyên, quản lýcác thành phần trên website Loại website này thường được viết bằng các ngôn ngữ lậptrình như PHP, Asp.net, JSP, Perl, , quản trị Cơ sở dữ liệu bằng SQL hoặc MySQL,

- Website tĩnh do lập trình bằng ngôn ngữ HTML theo từng trang như brochure,không có cơ sở dữ liệu và không có công cụ quản lý thông tin trên website.Bạn phảibiết kỹ thuật thiết kế trang web (thông thường bằng các phần mềm như FrontPage,Dreamwaver, ) khi muốn thiết kế hoặc cập nhật thông tin của những trang web này

b Dịch vụ lưu trữ Web (Web Hosting)

Web Hosting là nơi lưu trữ tất cả các trang Web, các thông tin, tư liệu, hình ảnh củaWebsite trên một máy chủ Internet, Web Hosting đồng thời cũng là nơi diễn ra tất cảcác hoạt động giao dịch, trao đổi thông tin giữa Website với người sử dụng Internet và

Ứng dụng Web đã trở thành một thức hiện hữu ở khắp mọi nơi trên thế giới, khi màmáy tính trở thành công cụ tùy thân cho cả công việc và hoạt động vui chơi giải trí củacon người

Nhớ những thập kỷ trước đây, Web trở thành con đường giá rẻ cho hàng triệu doanhnghiệp thực hiện kênh thông tin liên lạc, trao đổi, giao dịch với khách hàng tương lai vàcác đối tác hiện tại

Ngày nay, các trang web đang trở thành một công cụ thương mại trung gian hiệuquả, tạo ra cho bạn vô số cơ hội kinh doanh khác nhau Không ai có thể phủ nhận rằngnếu biết tận dụng tốt các cơ hội kinh doanh trực tuyến, doanh thu và lợi nhuận sẽ giatăng theo cấp số nhân Rất nhiều công ty nhỏ đã thu lợi lớn từ các website của mình –một công cụ tiếp thị hữu hiệu cho sản phẩm/dịch vụ của họ

Trước tiên, chính mảng thông tin của các trang web sẽ tạo ra nhiều lợi nhuận nhấtcho bạn khi nó cung cấp một cổng tiếp cận ngay lập tức cho khách hàng hay cho cácđối tác tiềm năng Trang web không chỉ đơn giản là nơi giới thiệu về công ty bạn, màchúng còn cung cấp một lượng thông tin khá lớn cho người truy cập, chưa kể chúng còn

có thể đảm bảo việc phân phối cho khách hàng những dịch vụ tiện dụng liên quan đếnnhiều sản phẩm mà phần lớn mọi người không muốn phải dạo cửa hàng để tìm mua như

Trang 3

xe cộ, máy móc, hàng tiêu dùng Mặt khác, có một số sản phẩm mà khách hàng cầnphải thử hay chạm vào trước khi mua Bạn không thể thử một bộ ghế sofa hay một thỏison trong các quầy hàng trực tuyến Điều đó nói lên rằng nếu bạn có cả hai cửa hàngngoại tuyến và cửa hàng trực tuyến, các khách hàng có thể kiểm tra sản phẩm tại cửahàng ngoại tuyến của bạn và sau đó đặt hàng chúng trên các cửa hàng trực tuyến

Chúng không chỉ cho phép người truy cập xem xét mọi thứ, mà còn cung cấp mộtmạng phân phối giá rẻ để tìm đối tác; đồng thời thu thập thông tin quan trọng về thịtrường và nguồn nhân lực Một lợi thế khác của trang web là mở ra những dịch vụ mới

có giá trị ngày càng gia tăng Không ít công ty đã đem đến cho khách hàng nhữngnguồn thông tin riêng sau khi nhận ra sự cần thiết của biện pháp này và đổi lại họ thu vềnhững khoản lợi nhuận khổng lồ từ số lượng khách hàng ngày một gia tăng

* Ví dụ DHL, hãng dịch vụ chuyển phát nhanh, đã để cho khách hàng tự theodõi những kiện hàng của mình ngay trên đường vận chuyển, nhờ đó hãng đã giảmđược giá chào hàng và xây dựng được sự tín nhiệm của khách hàng

Theo số liệu của Trung tâm lnternet Việt Nam (VNNIC), hiện có xấp xỉ 14 triệungười, chiếm 16,48% dân số Việt Nam thường xuyên tiếp cận với lnternet Cùng với

sự ra đời của hàng trăm Website, báo điện tử, hoạt động xúc tiến thương mại điện tửcủa các cơ quan chức năng và đặc biệt là sự kiện Việt Nam gia nhập môi trườngkinh doanh toàn cầu - WTO vào cuối năm 2006 là những tiền đề cực kỳ thuận lợi

để QC-TT Việt Nam có cơ hội phát triển

Ngày nay, các nhà quảng cáo trên Net đang dần tạo được thói quen xem quảng cáo trênNet của người tiêu dùng Thói quen này bắt đầu với các chương trình quảng cáo trêncác trang tìm kiếm như Google (GOOG) Cách đây 5 năm, số tiền quảng cáo mà công

ty này nhận được chỉ là con số 0, nhưng đến nay, quảng cáo trực tuyến trên mạng đãđem lại cho Google thu nhập 3,9 tỷ đôla Theo số liệu của Công ty nghiên cứu KaganResearch LLC, số tiền quảng cáo trên Internet nói chung đã lên tới 9,4 tỷ đôla vào năm

2004 Và với tốc độ tăng trưởng tiếp tục là 2 con số nên thời lượng và diện tích giànhcho quảng cáo trên các trang web lớn hơn nhiều so với trên tạp chí trong vòng 2 nămgần đây Quảng cáo trực tuyến là sự thành công phía sau của tất cả các ngành Công ty

AOL (TWX) đã bỏ ra 435 triệu đôla cho chương trình quảng cáo trên Advertising.com

vào tháng 6 Vào trung tuần tháng 11, công ty Dow Jones & Co (DJ) đã đồng ý muaCBS Marketwatch (MKTW) với giá 515 triệu đôla Theo như ước tính trong năm tới,công ty này sẽ sở hữu một khoản tiền gấp 30 lần số tiền này Các nhà phân tích tin rằng

chủ sở hữu của trang Web wsj.com, Dow Jones, đang thấy được các khoản tiền khá lớn

từ quảng cáo Đây là một thị trường tự do để thu hút khách hàng vì ngày càng có nhiềungười xem quảng cáo trên Internet Phải nói rằng, quảng cáo trên Internet hiện này đangtrở thành cơn sốt

1.2 Một số thuật ngữ về web

cập (đọc và viết) qua các máy tính nối mạng Internet

vi toàn thế giới, tạo điều kiện thuận lợi cho các dịch vụ truyền thông dữ liệu, như đăngnhập từ xa, truyền các tệp tin, thư tín điện tử, và các nhóm thông tin

Trang 4

giới thiệu thông tin bằng máy tính, sử dụng nhiều phương tiện truyền thông tin nhưvăn bản, đồ hoạ và âm thanh, dùng với sự gây ấn tượng bằng tương tác.

do đuổi theo các dấu vết liên quan qua suốt tài liệu đó bằng các mối liên kết xác địnhsẵn do người sử dụng tự lập nên Trong một môi trường ứng dụng hypertext thực sự,bạn có thể trỏ vào ( highlight) bất kỳ từ nào của tài liệu và sẽ tức khắc nhảy đến các tàiliệu khác có văn bản liên quan đến nó Cũng có những lệnh cho phép bạn tự tạo choriêng mình những dấu vết kết hợp qua suốt tài liệu Các trình ứng dụng hypertext rấthữu ích trong trường hợp phải làm với một số lượng văn bản lớn, như các bộ từ điểnbách khoa và các bộ sách nhiều tập

bộ, là 1 chuỗi cung cấp địa chỉ Internet của 1 Web site tài nguyên trên World WideWeb, đi theo sau 1 nghi thức URL thường dùng là http://, để chỉ định địa chỉ Web sitetrên Internet Những URL khác là gopher://, ftp://, mailto: / /

hiệu ứng trình bày văn bản và đối tượng khác Trong FrontPage, bạn có thể sử dụng

thanh công cụ DHTML Effects để làm tăng cường hiệu ứng cho các thành phần của

mà không cần lập trình

với một hành phần khác trong môi trường mạng, bất chấp ngôn ngữ của thành phầnđược tạo ra ActiveX được dùng làm chính yếu để phát triển nội dung tương tác củaWorld Wide Web, mặc dù nó có thể sử dụng trong các ứng dụng người- máy và cácchương trình khác

file bằng HTML, định dạng chúng sang các trang Web, và thể hiện chúng chongười dùng Vài browser có thể cho phép người dùng gởi nhận e-mail, đọcnewsgroups, và thực hiện các file sound hoặc video đã được nhúng và trong tài liệuWeb

Trang 5

Chương II NGÔN NGỮ HTML 2.1. Giới thiệu ngôn ngữ HTML (Hypertext Markup Language):

Hiện nay có hai loại hệ thống xử lý văn bản trên máy tính Hệ thống thứ nhất là các

hệ soạn thảo văn bản dùng trên môi trường đồ hoạ như Microsoft Word, Word Perfect Mục đích chính của các hệ soạn thảo văn bản kiểu này là chú trọng vào hình thức củavăn bản Vì vậy các chương trình đó tập trung vào xử lý kiểu dạng chữ, hình ảnh trongvăn bản và cách bố cục chúng Loại hệ thống thứ hai không chú trọng tới hình thức thểhiện văn bản mà nhấn mạnh cấu trúc văn bản đó Các văn bản này có cấu trúc như mộtngôn ngữ lập trình đơn giản, bằng các mô tả ngôn ngữ bên trong nó để thể hiện các liênkết giữa nhiều kiểu dữ liệu khác nhau Bên cạnh đó cũng cho phép mô tả một số thuộctính trình bày văn bản như kiểu dạng chữ, canh lề

Ngôn ngữ HTML (Hypertext Markup Language) là một ngôn ngữ mô tả dữ liệuthuộc hệ thống thứ hai Nó là một dạng của ngôn ngữ mô tả tài liệu tổng quát SGML(Standard Generalized Markup Language) SGML cho phép ta thiết lập mối liên hệ giữacác thành phần khác nhau trong cùng một tài liệu hoặc giữa nhiều tài liệu thuộc cácdạng dữ liệu khác nhau Nó cho phép một tài liệu có thể được dịch và hiển thị trên mọimáy tính chạy các hệ điều hành khác nhau mà bố cục và nội dung không thay đổi Cácmáy tính, dù chạy trên môi trường Windows, Linux, Unix, Sun-OS, Dos, Mac-OS đều

có thể hiển thị được văn bản HTML mà không cần phải sửa đổi gì do một tập lệnhchung thống nhất mà mỗi hệ điều hành đều có thể hiểu được

Người ta sử dụng các mô tả ngôn ngữ của SGML để định nghĩa ra các ngôn ngữnhằm mô tả các dạng tài liệu khác nhau dựa vào một loại định nghĩa gọi là DTD(Document Type Definition) Có rất nhiều loại ngôn ngữ được định nghĩa theo kiểuDTD, trong đó HTML là ngôn ngữ phổ biến nhất và dùng trong dịch vụ World WideWeb Như vậy HTML tuân thủ các quy tắc mà ngôn ngữ theo dạng SGML phải có vàcác thành phần của nó được định nghĩa bởi các DTD của SGML

Giống như SGML, HTML là ngôn ngữ định dạng và đánh dấu các văn bản.HTML sử dụng các thẻ (tag) để định dạng, sắp đặt thông tin trên văn bản Ta có thểphân các thẻ của HTML thành hai loại: loại thứ nhất dùng để thể hiện các chỉ dẫn vềđịnh dạng văn bản như kiểu chữ, cỡ chữ, định lề loại thứ hai là loại mô tả về cấu trúccủa văn bản bao gồm việc định nghĩa các danh sách, các liên kết dữ liệu, các mô tả thểhiện hình ảnh, văn bản, âm thanh

Ta cũng có thể phân biệt các thể của HTML theo cấu tạo của nó: ta có các thẻchứa (Container) hoặc rỗng (Empty) Để tạo ra một văn bản HTML ta có thể dùng các

hệ soạn thảo đơn giản như Notepad của Winddows, hoặc bất kì một Editor nào của Dostạo file ASCII hoặc các phần mềm chuyên dụng như Micrrosoft FrontPage,DreamWav để tạo các trang web

2.2. Các thành phần của một văn bản HTML

2.2.1 Phần đầu cấu trúc HTML

Phần đầu văn bản cho biết tiêu đề của văn bản và thiết lập các quan hệ giữa văn

bản với hệ thống thư mục Phần đầu văn bản được mở đầu bằng thẻ <HEAD> và kết thúc bằng thẻ </HEAD> Thông tin duy nhất trong phần đầu được trình duyệt web hiển

thị là tiêu đề của văn bản Các thông tin trong phần này cón có thể được sử dụng bởi các

Trang 6

Phần thân văn bản, được bắt đầu bởi thẻ <BODY> và kết thúc bởi thẻ </BODY>,

là một phần chứa nội dung chính của văn bản Phần thân của văn bản có thể chỉ đơnthuần cung cấp cho người dùng các thông tin kết hợp với hình ảnh, âm thanh hoặc cũng

có thể có dạng một biểu mẫu (Form) để người dùng điền thông tin vào và thực hiện mộtcông việc nào đó từ trang web (tìm kiếm, tra cứu, đặt cấu hình, chạy một ứng dụng ).Trong phần thân còn có thể có các liên kết (HyperLink) với các văn bản khác để người

sử dụng xem được những thông tin liên quan

2.2.3 Cấu trúc tổng quát của HTML

Một tài liệu HTML có cấu trúc tổng quát như sau:

2.3. Các thẻ dùng trong HTML

2.3.1 Các thẻ định cấu trúc tài liệu

2.3.1.1.Thẻ <HTML> </HTML>

Cặp thẻ này được sử dụng để xác nhận một tài liệu là tài liệu HTML, tức là nó có

sử dụng các thẻ HTML để trình bày Toàn bộ nội dung của tài liệu được đặt giữa cặpthẻ này

Trang 7

2.3.1.3 Thẻ <TITLE> </TITLE>

Thẻ này để định nghĩa tiêu đề của một tài liệu HTML, nó thường hiện lên trênphần tiêu đề (Title Bar) của cửa sổ trình duyệt khi mở tài liệu đó Nếu tiêu đề dài quá

64 kí tự thì có thể nó hiển thị không đúng Một tài liệu HTML chỉ có một tiêu đề, tiêu

đề thường ngắn gọn và mô tả nội dung của tài liệu

Cú pháp:

2.3.1.4.Thẻ <BODY> </BODY>

Thẻ này được sử dụng để xác định phần nội dung chính của tài liệu - phần thân(body) của tài liệu Trong phần thân có thể chứa các thông tin định dạng nhất định đểđặt ảnh nền cho tài liệu, màu nền, màu văn bản siêu liên kết, đặt lề cho trang tài liệu Những thông tin này được đặt ở phần tham số của thẻ

Cú pháp:

Các thuộc tính của thẻ

BACKGROUND= Đặt một ảnh nào để làm ảnh nền (background) cho

văn bản Giá trị của tham số này (phần sau dấu bằng) là URL của file ảnh Nếu kích thước ảnh nhỏ hơn cửa sổ trình duyệt thì toàn bộ màn hình cửa sổ trình duyệt sẽ được lấp kín bằng nhiều ảnh.

BGCOLOR= Đặt mầu nền cho trang khi hiển thị Nếu cả hai tham

số BACKGROUND và BGCOLOR 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ỉ liên kết đã từng được kích

Trang 8

2.3.2.2 Thẻ 

Thẻ (Line Break): thẻ này dùng để ngắt dòng, nó thuộc loại thẻ rỗng, bởi vì

nó chỉ có tác động ngay tại vị trí văn bản mà nó đánh dấu Khi trình duyệt Web gặp thẻnày thì nó sẽ ngắt dòng và dữ liệu đi sau nó được đưa xuống dòng tiếp theo

Kết quả thu được khi dùng trình duyệt Web sẽ là:

Nếu bạn có tài liệu:

2.3.3 Các thẻ định dạng danh sách

Trang 9

Có 2 kiểu đánh danh sách thường dùng

Danh sách không có thứ tự (đánh bằng các dấu bullet) <UL>

=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

<UL TYPE= circle/square>

<LI> Môc thø nhÊt

<LI> Môc thø hai

</UL>

<OL TYPE=1/a/A/i/I>

<LI> Môc thø nhÊt

<LI> Môc thø hai

</OL>

Trang 10

2.3.4.1. Thẻ chú thích:

Thẻ chú thích rất quan trọng trong soạn thảo mã nguồn HTML Giúp người đọc

mã nguồn có thể hiểu được trang HTML đang thể hiện mục đích gì Tuy nhiên khi chạytrình duyệt thì sẽ bỏ qua phần văn bản nằm trong thẻ chú thích

Cấu trúc: <!- - ……… - ->

Ví dụ:

Chuc ban vui ve

<! Không hiển thị trên trình duyệt > Chuc ban vui ve

2.3.4.2. Thẻ , : Hiển thị văn bản in đậm

Ví dụ:

Chuc ban vui ve

Hoc tap tot Chuc ban vui ve Hoc tap tot

2.3.4.3. Thẻ , : Hiển thị văn bản in nghiêng

Ví dụ:

Chuc ban vui ve

Hoc tap tot Chuc ban vui ve Hoc tap tot

2.3.4.4. Thẻ : Hiển thị văn bản gạch dưới

Ví dụ:

Chuc ban vui ve Chuc ban vui ve

2.3.4.5. Thẻ <BLOCKQUOTE>….</BLOCKQUOTE>: Khối trích dẫn được

dùng trong trường hợp sử dụng các trích dẫn mở rộng Toàn khối trích dẫn sẽcăn thụt lề cả hai phía và tạo thành một khối riêng so với các đoạn khác trongtrang HTML

2.3.4.6. Thẻ ….: tạo chỉ số trên trong văn bản

Ví dụ:

Trang 11

2.3.4.7. Thẻ ……: Tạo chỉ số dưới trong văn bản

+ Thuộc tính FACE: chọn tên font chữ

+ Thuộc tính SIZE= : xác định cỡ chữ 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

+ Thuộc tính COLOR=: màu sắc đoạn văn bản nằm giữa hai thẻ

Có nhiều ký tự mà HTML dùng vào mục đích đặc biệt Bởi các ký hiệu được dùng

để chỉ các thẻ mà bạn không thể sử dụng chúng như trong HTML Để có thể dùngđược bạn dùng dấu phối hợp:

2.3.4.10. Thẻ qui định màu chữ, màu nền, hình nền, màu mối liên kết

Một màu được tổng hợp từ ba thành phần màu chính, đó là: Đỏ (Red), Xanh lá cây(Green), Xanh nước biển (Blue) Trong HTML một giá trị màu là một số nguyên dạnghexa (hệ đếm cơ số 16) có định dạng như sau:

#RRGGBB

trong đó:

RR - là giá trị màu Đỏ.

GG - là giá trị màu Xanh lá cây.

BB - là giá trị màu Xanh nước biển.

Màu sắc có thể được xác định qua thuộc tính bgcolor= hay color= Sau dấu bằng cóthể là giá trị RGB hay tên tiếng Anh của màu Với tên tiếng Anh, ta chỉ có thể chỉ ra 16màu trong khi với giá trị RGB ta có thể chỉ tới 256 màu

Trang 12

Sau đây là một số giá trị màu cơ bản:

YELLOWLIGHTYELLOWWHITE

BLACKGRAYBROWNMAGENTAVIOLETPINKORANGENAVYROYALBLUEAQUAMARINE

Trang 13

LINK Chỉ định màu của văn bản siêu liên kết

ALINK Chỉ định màu của văn bản siêu liên kết đang đang chọn

VLINK Chỉ định màu của văn bản siêu liên kết đã từng mở

BACKGROUND Chỉ định địa chỉ của ảnh dùng làm nền

TEXT Chỉ định màu của văn bản trong tài liệu

SCROLL YES/NO - Xác định có hay không thanh cuộn

Behavior=type (scroll, slide, alternate) Kiểu chuyển động của chuỗi ký tự

Direction=left/right/up/down Định hướng chuỗi ký tự bắt đầu chuyển động

Loop=N hoặc Infinite N là số lần chuyển động ngang qua màn hình của chuỗi ký tự Nếu bằng infinite thì chuyển

ký tự sẽ xuất hiện liên tục

Scrollamount=N Xác định khoảng trống tính bằng pixel, giữa mỗi lần cuốn của chuỗi ký tự

2.3.4.12. Thẻ tạo liên kết

Cấu trúc: <a href="">………</a>

Trong đó thuộc tính href sẽ sử dụng khác nhau khi bạn sử dụng:

o Liên kết nội bộ trang: bạn sử dụng cách đặt bookmark trên trang href=”#tên bookmark”

o Liên kết các trang khác nhau href=”/thư mục/tên tập tin”

o Liên kết từ xa: href=”http://…” Ví dụ: http:// www.yahoo.com

2.3.5 Các thẻ âm thanh, hình ảnh

2.3.5.1.Thẻ <IMG>: dùng để chèn hình ảnh vào trang HTML

Cấu trúc: <img src=đường dẫn lưu file hình>

Ví dụ:

Trang 15

Các thuộc tính trong thẻ

Border=n Định dạng đường viền cho bảng với n là giá trịWidth=n% Định dạng chiều rộng của bảng bằng n%

Cellpadding=n Khoảng cách giữa các văn bản và ô

Cellspacing=n Khoảng cách giữa các biên trong và ngoài của ôColspan=n Chia cột thành n cột

Align=(left, right, center,

justify) Định dạng lề theo chiều ngang văn bảnValign=(top, bottom, midle) Định dạng lề theo chiều dọc văn bản

Trang 16

 Cấu trúc của Frame

 b là chiều cao của khung tiếp theo

 * là chiều cao còn lại

Ví dụ:

<frame name ="con_lai"

Trang 17

Ví dụ:

<frame name ="ben phai"

Scrolling=yes/no Hiện/ẩn thanh cuốn cho khung

Noresize Ngăn không cho người dùng thay đổi kích thước của khung khi duyệt trang

Chương III THIẾT KẾ WEB BẰNG MS-FRONTPAGE

3.1.1 Giới thiệu về FrontPage

Trang 18

Microsoft FrontPage là một bộ công cụ để quản lý và tổ chức World Wide Web

mà không cần các kiến thức về lập trình FontPage có tất cả mọi thứ cần thiết để thiết kế

và xây dựng một World Wide Web site đơn giản một cách nhanh chóng và dễ dàng

Microsoft FrontPage là công cụ tạo Web hoàn chỉnh nhất, tích hợp bên trong nócác bộ công cụ giúp người sử dụng thuận lợi khi làm việc với các trang HTML và quảntrị Website

Với FrontPage 98, chúng ta có bộ chương trình để làm việc bao gồm FrontPageExplorer dùng để quản lý Website và FrontPage Editor dùng để soạn thảo trang HTML;bên cạnh đó còn có thể có thêm một số phần mềm khác đi kèm theo, chẳng hạn nhưTheme Designer để quản lý các theme

Kể từ FrontPage 2000 trở lên thì không còn có sự tách biệt giữa FrontPageExplorer và FrontPage Editor, chúng được hoà trộn vào nhau và được thể hiện dưới cácchức năng hiển thị khác nhau của FrontPage

3.1.2 Khởi động và thoát khỏi FrontPage

Khởi động Microsoft FrontPage

Vào Start → chọn Programs → chọn Microsoft Office → chọn Microsoft Office ForntPage 2003.

Thoát khỏi Microsoft FrontPage

Vào menu File → chọn Exit hoặc nhấn nút Close góc bên phải màn hình hoặc nhấn

tổ hợp phím Alt + F4

3.1.3 Cửa sổ làm việc FrontPage

3.2 Làm việc với trang Web trong ForntPage

3.2.1 Tạo một trang Web

Vào menu File  chọn New  chọn Blank Page trên thanh đa nhiệm hoặc nhấn tổ hợp phím Ctrl + N

Trang 19

3.2.2 Tạo website với FrontPage

Bước 1: Vào menu File → chọn New, khung tác vụ New hiển thị bên phải màn hình Bước 2: Kích vào mục More Web site template, xuất hiện hộp thoại

Bước 3: Chọn thẻ General, chọn mẫu site cần tạo

Bước 4: Trong mục Specify the location of the new Web site chọn đường dẫn lưu Web site bằng cách nhập trực tiếp hoặc nhấn vào nút Browse…

Bước 5: Nhấn nút OK hoàn tất việc tạo Web site

3.2.3 Đưa một trang Web vào Website

Bước 1: Trong hộp thoại Folder List chọn biểu tượng New Page hoặc kích chuột phải chọn New → chọn Blank Page, trên hộp thoại sẽ chèn vào một trang mới Bước 2: Nhập tên cần đặt cho trang vừa mới tạo, sau đó nhấn Enter

3.2.4 Soạn thảo nội dung trên trang Web

Sau khi một trang mới đã được mở, sẵn sàng cho bạn đưa dữ liệu và hình ảnh trangtrí vào, trong phần góc dưới bên trái của cửa sổ Frontpage có ba bảng (tab) chọn lựagồm Design, Split, Code, Preview

Sử dụng soạn thảo font Unicode trong ForntPage:

− Vào menu File  chọn Properties  chọn Language  chọn Save the document as  chọn Unicode (UTF-8).

− Hay chọn chế độ hiển thị Code và thay thế dòng <meta Type” content=”text/ html; charset=windows-1252"> (ở giữa hai thẻ <head>

http-equiv=”Content-và </head>) thành <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8"> rồi chuyển trở lại chế độ Design soạn thảo

Trang 20

Chú ý: Nếu dùng font tiếng Việt khác như ABC, VNI, Bách Khoa, bạn phải thay bằng dòng <meta http-equiv=”Content-Type” content=”text/html; charset=x-user- defined”>

3.2.5 Lưu trang web

− Vào File  Save

3.3 Định dạng văn bản trong FrontPage

3.3.1 Định dạng ký tự

Bước 1: Vào menu Format  chọn Font…  chọn thẻ Font

Bước 2: Chọn font chữ mục Font, chọn kiểu font tại mục Font style, chọn kích cỡ tại mục Size, màu chữ tại mục Color, chọn các hiệu ứng khác trong phần Effects Bước 3: Nhấn OK

3.3.2 Định dạng đoạn văn bản (Paragraph)

Tạo một dòng mới mà không có khoảng trắng với dòng trên đó: Nhấn Shift +

Enter

Tạo một đoạn mới

+ Để tạo một đoạn mới với cùng kiểu với đoạn hiện tại, đặt điểm chèn tới cuối

đoạn trên và nhấn Enter.

+ Để chia nhỏ đoạn hiện tại, đặt điểm chèn tại vị trí muốn chia trong đoạn và

nhấn Enter.

Trang 21

Đặt văn bản thụt vào hoặc thụt ra so với lề của đoạn hiện thời

Bước 1: Chọn văn bản muốn thực hiện thụt lề

Bước 2: Nhấn nút Decrease Indent (thụt ra), nút Increase Indent (thụt

vào)

3.3.3 Tạo danh sách trong FrontPage

Bước 1: Chọn các dòng văn bản muốn thêm dấu Bullet hoặc Number

Bước 2: Vào menu Format  chọn Bullets and Numbering

Bước 3: Chọn thẻ Plain Bullets nếu đánh danh sách theo kiểu bullet, chọn thẻ Numbers nếu đánh danh sách theo số thứ tự

3.3.4 Tạo màu nền văn bản

Vào Format  chọn Background hoặc kích chuột phải lên nền chọn Page properties  chọn thẻ Background

− Background picture: Chọn check box này để sử dụng một ảnh nền ảnh sẽ trải

theo dạng lát gạch trên nền trang Gõ tên của đường dẫn đến file ảnh hoặc kíchnút Browse để tìm file này

− Watermark: Chọn để hiển thị ảnh như một “watermark”.

Định dạng
Số trang	42
Dung lượng	1,27 MB