thiết kế wep cơ bản và nâng cao

IP Address-địa chỉ IP: đ ể việc trao đổi thông tin trong m ạng Internet thực hiện được thì mỗi máy trong mạng cắn phải định danh đ ê phân b iệt với các máy khấc.. — Phương thức truyền th

CHƯƠNG I: G IỚ I THIỆU VE WEB

I.l.C Á C KH ÁI N IỆ M C ơ BẢN:

— Internet là một m ạng máy tính toàn cầu trong đó các máy truyền thông với nhau

theo một ngôn ngữ chung là TCP/IP

— Intranet đó là m ạng cục bộ không nôi vào Internet và cách truyền thông của chúng

cũng theo ngôn ngữ chung là TCP/IP

— Mô hình Cìient-Server: là mô hình khách-chủ Server chứa tài nguyên dùng chung

cho nhiều máy khách(Client) như các tập tin, tài liệu, máy in Ưu điểm của mô hình này là tiết kiệm v ề thời gian, tài chính, d ễ quản trị h ệ thống Cách hoạt động của mô hình này là máy Server ở trang thái hoạt động(24/24) và chờ yêu cầu

từ phía Client Khi Client yêu cầu thì máy Server đáp ứng yêu cầu đó

— Internet Server là các Server cung cấp các dịch vụ Internet(Web Server, Mail

Server, FTP Server )

— Internet Service Provider(ISP): Là nơi cung cấp các dịch vụ Internet cho khách

hàng Mỗi ISP có nhiều khách hàng và có th ể có nhiều loại dịch vụ Internet khác nhau

— Internet Protocol : Các máy sử dụng trong mạng Internet liên lạc với nhau theo

m ột tiêu chuẩn truyền thông gọi là Internet Protocol (IP) IP Address-địa chỉ IP:

đ ể việc trao đổi thông tin trong m ạng Internet thực hiện được thì mỗi máy trong mạng cắn phải định danh đ ê phân b iệt với các máy khấc Mỗi máy tính trong

m ạng được định danh bằng m ột nhóm các số được gọi là địa chỉ IP Địa chỉ IP gồm 4 sô thập phân có giá từ 0 đến 255 và được phân cách nhau bởi dấu chấm Ví

dụ 192.168.0.1 Địa chỉ IP này có giá trị trong toàn m ạng Internet, u ỷ ban phân phối địa chỉ IP của thê giới s ẽ phân chia các nhóm địa chỉ IP cho các quốc gia khác nhau Thông thường địa chỉ IP của một quốc gia do các cơ quan bưu điện quản lý

và phân phối lại cho các ISP M ột máy tính khi thâm nhập vào m ạng Internet cắn

có m ột địa chỉ IP Địa chỉ IP có th ể cấp tạp thời hoặc cấp vĩnh viễn Thông thường các máy Client k ế t nôi vào m ạng Internet thông qua một ISP bằng đường điện thoại Khi kết nôi, ISP sẽ cấp tạm thời m ột IP cho máy Client

— Phương thức truyền thông tin trong Internet: Khi một máy tính có địa chỉ IP là

x(máy X) gửi tin đến máy tính có địa chỉ IP là y (máy Y) thì phương thức truyền tin cơ bản diễn ra như sau: Nêu máy X và máy Y cùng nằm trên m ột m ạng con thì thông tin sẽ được gửi đi trực tiếp Còn máy X và Y không cùng nằm trong m ạng con thì thông tin sẽ được chuyển tới một máy trung gian có đường thông với các mạng khác rổi mới chuyển tới máy Y Máy trung gian này gọi là Gateway

— World Wide Web(WWW): là một dịch vụ phổ biên nhất hiện nay trên Internet Dịch

vụ này đưa ra cách truy xuất các tài liệu của các máy phục vụ d ễ dàng thông qua các giao tiếp đồ họa Đê’ sử dụng dịch vụ này máy Client cần có một chương trình gọi là Web Browser

— Web Browser(trình duyệt): là trình duyệt Web Dùng đ ể truy xuất các tài liệu trên

các Web Server Các trình duyệt hiện nay là Internet Explorer, Nestcape

— Home page: là trang web đắu tiên trong web site

— Hosting provider: là công ty hoặc tổ chức đưa các trang của chúng ta lên web

— Hyperlink : tên khác của hypertextlink

— Publish: làm cho trang web chạy được trên m ạng

— ƯRL(Unioform resource locator): m ột địa chỉ chỉ đến một file cự th ể trong nguồn

tài nguyên mạng

■ Mỗi nguồn trên web có duy nhất một địa chỉ rất khó nhớ Vì vậy, người ta

sử dụng URL là một chuỗi cung cấp địa chỉ Internet của một web site hoặc nguồn trên World Wide Web Định dạng đặc trưng là:

www.nameofsite.typeofsite.coumrycode

Ví dụ:

207.46.130.149 được biểu diễn trong URL là www.microsoft.com

■ URL cũng nhận biết giao thức của site hoặc nguồn được truy cập Giao thức thông thường nhất là “http”, m ột vài dạng URL khác là “gopher”, cung cấp địa chỉ Internet của một th ư mục Gopher, và “ftp”, cung cấp vị trí mạng của nguồn FTP

■ Có hai dạng URL:

<> URL tuyệt đôi - là địa chỉ Internet đầy đủ của một trang hoặc file, bao

gồm giao thức, vị trí mạng, đường dẫn tuỳ chọn và tên file

Ví dụ, http:// www.microsoft.com/ms.htm

o URL tương đối - mô tả ngắn gọn địa chỉ tập tin kết nôi có cùng đường

dẫn với tập tin hiện hành, URL tương đối đơn giản bao gồm tên và phần m ở rộng của tập tin

Ví dụ: index.html

— Web server là m ột chương trình đáp ứng lại các yêu cầu truy xuất tài nguyên từ

trình duyệt

1.2 G IỚ I TH IỆ U KH ÁI Q U Á T VẼ W EB

— Web là một ứng dựng chạy trên mạng(Client-Server), được chia sẻ khắp toàn cầu.

— Trang web là một file văn bản chứa những tag HTML hoặc những đọan mã đặc

b iệt mà trình duyệt web (Web browser) có thể hiểu và thông dịch được, file được lưu với phần m ở rộng là html hoặc htm

— HTML (HyperText Markup Language), gổm các đoạn mã chuẩn được quy ước đ ể

thiết k ế Web và được hiển thị bởi trình duyệt Web (Web Browser)

■ Hypertext (Hypertext link), là một từ hay một cụm từ đặc b iệt dùng đ ể tạo

liên kết giữa các trang web

■ Markup: là cách định dạng văn bản đ ể trình duyệt hiểu và thông dịch được.

■ Language: đây không là ngôn ngữ lập trình, mà chỉ là tập nhỏ những quy

luật đ ể định dạng văn bản trên trang web

— Trình soạn thảo trang web :CÓ thể soạn thảo web trên b ấ t kỳ trình soạn thảo văn

bản nào Các trình soạn thảo phổ biến hiện nay là: Notepad, Frontpage hoặc Dreamweaver

1.3.TAG HTM L:

Tag HTML là những câu lệnh nằm giữa cặp tag “<” và dùng đ ể định dạng các văn bẳn trên trang web D ạng chung của một tag HTML là:

<tagName ListProperties> Object </tagName>

Trong đó:

— TagName : là tên một tag HTML, v iế t liền với dấu “< không có khoảng trắng

— O b ject: là đôi tượng cắn định dạng trong trang Web

— ListPropeties là danh sách thuộc tính của Tag, là những đặc điểm b ổ sung vào

cho một tag, th ứ tự các thuộc tính trong một tag là tuỳ ý N êu có từ 2 thuộc tính trở lên thì mỗi thuộc tính cách nhau bởi khoảng trắng

<TagName propertyl=’v alu el’ property2=’value2\ >Object</TagName>

— Giá trị của thuộc tính được đ ặt trong nháy đơn ‘ hoặc nháy đôi “.(có th ể bỏ qua)

— <TagName>: gọi là tag mở

— </TagNcime>: gọi là tag đóng Thông thường thì các tag đều có tag đóng Tuy

nhiên có một sô tag không có tag đóng

Ví d ụ : <bodv BGCOLOR=”RED”>nÔi dung </body>

— Có thể có nhiều tag lổng vào nhau, theo nguyên tắc tag nào mở trước thì tag đó đóng sau

— Phắn đẳu(<Head></Head>): là phần chứa thông tin của trang Web

— Phần thân (<Body></Body>): là phần chứa nội dung của trang Web

— Phần đầu và phần thân được đ ặt trong cặp tag <HTML></HTML>

2 H iể n thị trang web:

- Khởi động trình duyệt Internet Explorer

- Chọn menu file,open, dùng browse tìm tập tin html mới tạo

- H oặc double click vào tên tập tin htm

<TitIe> : H iể n thị n ộ i dung tiêu đ ề c ủ a trang web trên thanh tiêu đ ề

củ a trình d u y ệt.

— Cặp tag <Title> được đ ặt trong phần <Head> của trang HTML

— Cú pháp:

<TITLE> N ội dung tiêu đ ề </TITLE>

<Hn>: T ạ o header, g ồ m 6 c ấ p header, đ ư ợ c đ ặ t trong p h ầ n BODY

<p> :

— Dùng đ ể ngát đoạn và b ất đắu đoạn mới

— Cú pháp:

<p ALIGN = “Direction”> N ội dung của đoạn </P>

— Tag </P> không bắt buộc

— Tag <p> k ế tiếp sẽ tự động b ắt đầu m ột đoạn mới

<BR>:

- N gắt dòng tại vị trí của của tag

Ví du:

'3 C:\DDCuments and Settings\X uan .

File Edit View Favo'ies Took Help A,: Q C:\Documents andSettir v 3 Go ”

<p>

Mary had a little lamb <br>

It’s fleece was white as snow<br>

Everywhere that Mary went <br>

She was followed by a little lamb<br>

M ary had a little lamb It’s fleece was white as snow Everywhere that Maty went She was followed by a little lamb.

<HR AIign=”directtion” Width= “Value” Size=value color=#rrggbb>

Trong đó:

o Direction: gồm các giá trị left, right, center

o Width: độ dài đường kẻ, tính bằng Pixel hoặc %

o Size: độ dày của đường kẻ, tính bằng pixel

o Color: màu đường kẻ, có th ể dùng tên màu hoặc dùng mã #rrggbb

<HR size = 5 align = center width = 50%>

<HR size = 15 align = left width = 80%>

<p> This is going to be real fun

</BODY>

</HTML>

<FONT>:

— Dùng định dạng font chữ

— Định dạng Font chữ cho cả tài liệu thì đ ặ t tag <Font> trong phần <Body>

— Định dạng từng phần hoặc từng từ thì đ ặt tại vị tri muốn định dạng

— Cú pháp:

<FONT Face=”fontNamel, fontName2, fontName3” size=”value” CoIor=”rrggbb”>

N ội dung hiển thị

<FONT SIZE = 3 COLOR = HOTPINK FACE = Arial>

My first HTML document </FONT>

<p> This is <FONT COLOR=BLUE SIZE = 6>going

</FONT> [O be real fun

o BgColor: thiết lập màu nén của trang

o T p x í : thiết lập màn rh ữ

o Link: màu của siêu liên kết

o Vlink: màu của siêu liên k ết đã xem qua

o Background: dùng load một hình làm n ền cho trang

O LeftMargin: Canh lề trái

o TopMargin: Canh lề trên của trang_

Ví du:

<HTML>

<HEAD><TITLE> Learning HTML</TITLE></HEAD>

<BODY BGCOLOR= #0000FF” text=”yellow”>

<FONT COLOR = LIMEGRREN> Welcome to HTML</FONT>

</BODY>

</HTML>

o Màu sắc: Internet Explorer có thể xác lậ p 16 màu theo tên như sau:

— Black, Silver, Gray, White, Maroon, Red, Purple, Fuchsia, Green, Lime, Olive, Yellow, Navy, Blue, Teal, Aqua

— M ột sô mã thập lục phân của màu :#RRGGBB

<Img src=”URL” alt=”Text” width=value height=value border=vahie>

o Src: xác định đường dẫn tập tin cắn load, sử dụng đường dẫn tương đôi

<Img src=” /images/hl.gif”>

o Alt: chứa nội dung văn bản thay th ế cho hình ảnh khi hình không load

v ề được, nếu load v ề được thì sẽ xuất hiện nội dung trong textbox mỗi khi người dùng đưa chuột tới hình

Ü Width, Height: dùng đ ể xác định chê độ phóng to thu nhỏ hình ảnh

o Align =” left/ righr/top/bottom”: so hàng giữa hình ảnh và text

o Src chứa địa chỉ file nhạc, file này có phần mở rộng mp3 , mdi,

o Loop xác định chê độ lập đi lập lạ i của bài hát, nếu value< 0 thì lập vô hạn, value=n thì lập lại n lần rồi tự động tắt

— Các thuộc tính của Marquee :

o Direction = up/ down / left / right dùng đ ể điều khiển hướng chạy,

o Behavior = alternate: đối tượng chạy từ lề này sang lề kia và ngược lại.

Ví d u :

<Marquee direction=up>ĐỐi tượng chạy lên </Marquee>

<! Ghi chú N ộ i dung trong c ặ p tag này không h iể n thị trong

Cú pháp: <! — N ội dung lòi chú thích >

Định dạng khôi văn bản vừa đậm, nghiêng và gạch chân

<B><T><U> Trường ĐHCN TP HCM</U></I></B>

T ag <BIG> và <SM ALL>:

— Chỉnh cở chữ to hoặc nhỏ hơn cở chữ xung quanh

— Cú pháp

<BIG>NỘi dung chữ to </BIG>

<SMALL>NỘi dung chữ nhỏ </SMALL>

T ag <SUP> và <SUB> :

— Đưa chữ lên cao hoặc xuống thấp so với văn bản bình thười

— Cú pháp:

<SUP>NỘi dung chữ dưa lên cao </SUP>

<SUB>NỘi dung chữ đưa xuống thấp </SUB>

<BLOCKQUOTE><FONT color = hotpink>

Humpty Dumpty sat on a wallHumpty Dumpty had a great fallAll the King’s horses

And all the King’s menCould not put Humpty Dumty together again

And all the King’s men Could not put Humpty Dumty together again

</PRE>

</BODY>

</HTML>

'3 Learning HTML - Microsoft Internet Explorer

File Edit View Favorites Tools Help

A d d re ss C:\Documents and Settings\acer 5 0 5 0 \M y Documents\t.htm

Humpty Dumpty sat on a wall Humpty Dumpty had a great fall All the King's horses

And all the King's men Could not put Humpty Dumty together again

<DIV> <SPAN>:

— Chia văn bản thành các khối, có chung một định dạng

■ <DIV> chia văn bản thành m ột khối b ắt đắu từ m ột dòng mới

■ <SPAN> tách khôi nhưng không b ắt đầu từ một dòng mới

— Cú pháp:

<DIV>NỘi dung của khối b ắ t đầu từ m ột dòng m ới </DIV>

<SPAN>NỘi dung của khối trong 1 dòng </SPAN>

<p> The DTV element is used to group elements

<P>Typically, DIV is used for block level elements

</DIV>

<DIV align = righi>

<FONT size = 4 color = hotpink face = Arial>Division 2

<P>This is a second division<Br>

<H2>Are you having fun?</H2>

</FONT>

</DIV>

<p> The second division is right aligned

<SPAN STYLE = “FONT-SIZE:25; Color:BLUE”>Common formatting

</SPAN> is applied to all the elements in the division

<p> William &amp; Graham went to the fair

e Ký tư khoảng trắng : &nbsp;

I.6.M Ộ T SỐ THAO TÁC TR O N G C Ử A s ổ T R ÌN H D U Y Ệ T

— Cách load lại trang Web: Click biểu tượng Refresh (F5) trên thanh công cụ

— Chỉnh sửa size chữ hiển thị trên trang: Chọn Menu View->Text size

— Chỉnh lại font chữ: Chọn Menu View->EnCoding

— Trong trường hợp trang Web không hiển thị được Font tiếng Việt:

— Chọn menu Tool chọn Internet Options->chọn Tab Fonts-> chọn Font tiếng V iệt

— N êu chọn rồi mà không hiển thị được font tiếng V iệt thì chọn Menu

View->>EnCoding->chọn các font như User defined,Vietnamese

— Các tuỳ chọn khác cho trang Web: Tools -ỳ Internet option: Không Load hình

xuống, định dạng liên k ế t,

— Chọn trang web m ặc định khi mở trình duyệt

[ U sefiurrent [ [ Use Default | | Use Blank Temporary Internet files

i 7 \ > P ag es you view on the Internet are stored in a special folder

Y for quick viewing later.

Delete Cookies Delete Files Settings

History The History folder contains links to p ag es you've visited, for quick a cc e ss to recently viewed pages

Days to k eep pages in history: 20 C [ Clear History

Colors Fonts Languages Accessibility

0 Always sen d URLs a s UTF-8 (requires restart)

□ Automatically c h sc k for Internet Explorer updates

0 Close u n u sed folders in History and Favorites (requires restart)

0 Disable script debugging

□ Display a notification about every script error

0 Enable folder view for FTP sites

□ Enable Install On D em and (Internet Explorer)

0 Enable Install On D em and (Other)

0 Enable offline items to b e synchronized on a schedule

0 Enable p a g e transitions

□ Enable P e rs o n a te d Favorites Menu

0 Enable third-party browser extensions (requires restart)

— Tab General(Hình 1): th iết lậ p các tùy chọ n cho trình d u y ệt

— Click nút Use Current: chọn trang h iệ n tạ i đ ể load lên m ỗ i lầ n khởi đ ộ n g

IE

— Use Default: địa chỉ trang W eb m ặ c định m ỗi khi m ở trình d u y ệt

V í dụ m ỗ i khi m ở IE thì tự đ ộ n g h iể n thị trang W eb Yahoo trong ô Address nhập: http://yahoo.com , n ế u chọn Use Blank thì h iể n thị trang trắ n g

— History: lư u lạ i các trang w eb đã d u y ệ t qua tạ i máy Client và thông tin đăng

n h ậ p củ a user h iệ n h àn h

— N ê u khộng m uốn lưu lại: C họn Delete Cookies và D elete Files

— Có th ể th iế t lậ p kho ản g thời gian lư u tr ữ trang trong đối tưỢ ng History

b ằ n g cách thay đổi giá trị trong ô “ Days to keep pages in histoiy”

— N ê u m uốn xoá đ ôi tư ợ n g này thì n h ấn Clear history

— Tab Advance(Hình 2): có th ể chọ n các tùy chọn khác như:

— N găn c h ặ n không cho tả i hình xu ố n g trang web

— Màu liên k ế t, cách th ể hiện liên k ế t trên trang

— Copy hình ả n h từ trang W eb: Click p h ả i vào hình ản h c ầ n sao chép rồ i

ch ọ n Save picture as, h o ặc Save background as,

— Load v ề trang W eb bao g ồ m các h iệ u ứng, script, hình ả n h chứa trên trang: C họn M enu File -> Save As -> C h ọ n vị trí lư u fiỉe-> Save

— H iệ u chỉnh trang Web: View source->hiệu ch ỉnh-> chọn File -> Save đ ể lưu 1ại-> F5 đ ể c ậ p n h ật lạ i nội dung vừa h iệ u chỉnh

CHƯƠNG II: SIÊU LIÊN KÊT-HÌNH Ả n h

II.1 G IỚ I TH IỆ U SIÊU LIÊN K ÊT

Siêu liên k ế t:

Khả năng chính của HTML là hỗ trỢ các siêu liên kết M ột siêu liên kết cho phép người truy cập có th ể đi từ trang web này đến trang web khác M ột liên k ết gôm 3 phẩn:

— Nguòn: chứa nội dung hiển thị khi người dùng truy cập đến, có thể là một trang web

khác, m ột đoạn film, m ột hình ảnh hoặc một hộp thoại đ ể gữi mail

— Nhãn: có thể !à dòng văn bản hoặc hình ảnh đ ể người dùng click vào khi muốn truy

cập đến liên kết, nếu nhãn là văn bản thì thường được gạch dưới

— Đích đến (target): xác định vị trí đ ể nguồn hiển thị.

Các lo ạ i liên k ế t

— Internal Hyperìink:(L\ễn k ế t trong) là các liên k ết với các phần trong cùng một tài

liệu hoặc liên k ế t các trang trong cùng một web site

— External Hyperlink (Liên k ế t ngoài) là các liên k ết với các trang trên web site khác.

IL2 T Ạ O SIÊU LIÊN K Ê T

Cú pháp:

<A H R EF=”URL” > N hãn </A>

— Dùng URL tư ơng đ ố i đ ể liên k ế t đ ến các trang trong cùng m ột website

</HTML> '3 Using links - Microsof

File Edit View Favorites T >y i f

Address C:\Docun v Q Go Links y>

Click here to view document 2

- Dùng URL tu yệt đ ối đ ê liên k ế t đ ến các trang trong website khác

V íd u :

<A href="http://www.google.com"> liên k ết đến Google</A>

Liên k ế t v ớ i các p h ẩ n trong cùng m ộ t trang web

— N êu nội dung của trang quá dài thì nên tạo các Bookmark đ ể nhảy đến một phần

cụ thể nào đó trên chính trang web hiện hành

- Cách tạo liên kết đến các phần trong cùng trang: gồm 2 bước

<A HREF = “# In tern et”>Intemet</A><BR>

<A HREF = “#H TM Lw>Introduction to HTML</A><BR>

<A name = “Internet”>Internet</A><BR>

Internet là một m ạng của các mạng Nghĩa là, các m ạng máy tính được liên kết với các m ạng khác, nôi các nước và ngày nay là toàn cầu Giao thức truyền thông là TCP/IP cung cấp liên k ết với tất cả các máy tính trên thê giới

<A name = “HTML”>Introduction to HTML</A><BR>

Ngôn ngữ đánh dấu siêu văn bản là ngôn ngữ chuẩn mà web sử dựng đ ể tạo và nhận ra tài liệu M ặc dù không phải là một tập con của ngôn ngữ nâng cấp tiêu chuẩn tổng quát (SGML), ngôn ngữ đánh dấu siêu văn bản cũng có liên quan với SGML SGML

là m ột phương pháp trình bày các ngôn ngữ định dạng tài liệu HTML là ngôn ngữ đáiili dấu được sử dựng đ ể lạo lài liệu HTML Các hướng dẫn chỉ rõ m ột trang web nên được hiển thị như thê nào trong trình duyệt

</BODY>

</HTML>-> K ết quả trên trình duyệt

3 U s in g htm lin k s - M icro so ft In te rn e t E x p lo re r D O ®

File Edit View Fav o rite s Tools Help

A d d re ss I:\D ocum ents and Settings\Xuan Hien\My D ocu m en ts\test.htm v ' a Go Links y>

Internet Introduction to H r M L

Internet

Internet là m ột m ạng của các mạng N gh ĩa là, các m ạng m áy tính được liên

k ế t v ó i cá c m ạng kh ác, n oi các n ư ớ c v à ngày nay là toàn cầu G iao thức truyền thong là TCP/H* cung cấp liên k ết v ó i tất c ả các m áy tính trên the giói

In tro d u ctio M to H T M L

N g o n ngữ đánh dấu siêu văn bản là ngồn ngữ chuẩn m à w e b sử dụng đề tạo

và nhận ra tài liệu M ặc dù k h ôn g phải là m ột tập c o n của ngôn ngữ nâng cấp tiêu chuẩn tổng quát (S G M L ), n gôn ngữ đánh dấu siêu văn bản cũng có liên quan vói SG M L S G M L là m ột p h ư o n g pháp trình b à y các ngôn ngữ định dạng tài liệu H T M L là n gon ngữ đánh dấu đ ư ợ c sử dụng để tạo tài liệu

H T M L C á c hư ớng dẫn chỉ rõ m ộ t trang w e b nên đ ư ợ c hiển thị như thế nào trong trình duyệt

Liên k ế t v ớ i m ộ t Bookm ark Ở m ộ t tài liệ u khác

<A HREF = “C :\D ocl.htm#Intemet”>Intemet</A><br>

<A HREF = “C :\D ocl.htm#HTML”>Introduction to HTML</A><br>

<A name = “Internet”>Internet</A><BR>

Internet là một m ạng của các mạng Nghĩa là, m ạng máy tính được liên kết với các m ạng khác, nối với các nước và ngày nay

là toàn cầu Giao thức truyền TCP/IP cung cấp liên kết với tấ t

cả các máy tính trên th ê giới

<A name = “HTML”>Tntroduction to HTML</A><BR>

Ngôn ngữ đánh dấu siêu văn bản là ngôn ngữ chuẩn mà web sứ dụng đ ể tạo và nhận ra tài liệu M ặc dù không phải là m ột tập con của ngôn ngữ nâng cấp tiêu chuẩn tổng quát (SGML), ngôn ngữ đánh dấu siêu văn bản cũng có liên quan với SGML SGML

là một phương pháp trình bày các ngôn ngữ định dạng tài liệu HTML là ngôn ngữ đánh dấu được sử dựng đ ể tạo tài liệu HTML

</BODY>

</HTML>

Liên k ế t đ ế n h ộ p th ư e-m ail

Cú pháp:

<A href=”mailto:địa chỉ Email”>Nhãn</A>

— N êu siêu liên kết đ ặt ở cuối trang thì dùng tag <ADDRESS>

Cú pháp:

<Address><A href=”mailto:địa chỉ Email”>Nhãn</A></Address> II.3 HÌNH Ả N H TR ÊN TRANG WEB:

Các lo ạ i ả n h : a) Ảnh Gif (Graphics Interchange Format): được sử dụng phổ biên nhất trong các

tài liệu HTML, d ễ chuyển tải, ngay cả các k ết nối sử dụng MODEM tốc độ

chậm , hổ trỢ 256 màu GIF Các file GIF được định dạng không phụ thuộc phần nền

b) Ánh JPEG (Joint PhotoGraphic Expert Group) có phần m ở rộng JPG, là loại ảnh

nén m ất thông tin, nghĩa là ảnh sau khi bị nén không giống như ảnh gốc Tuy nhiên, trong quá trình phát lại thì ảnh cũng tốt gắn như ảnh gốc JPEG hỗ trợ hơn

16 triệu màu và thường được sử dụng cho các ảnh có màu thực

c) Á n h PNG (Portable Network Graphics) nén không m ấ t d ữ liệu

Chèn hình ả n h

Cú pháp:

<IMG Src=URL Border=n AIt=”NỘi dung thay th ê ”>

URL: địa chỉ của tập tin hình ảnh, thường sử dựng địa chỉ tương đòi, ví dự:

<img src=” /image/hinh.gif”> không phụ thuộc vị trí của tập tin ảnh trên đĩa

n: độ dày của đường viền, tính bằng pixel

Alt: Nội dung thay thê sẽ hiển thị khi hình không load được, hoặc khi đưa chuột ngang qua hình

Các th u ộ c tính c ủ a ảnh:

a) Dàn văn bản quanh hình ảnh:

<IMG SRC=URL Align= left> N ội dung văn bản quanh hình ảnh

<IMG SRC=URL AIign= Right> N ội dung văn bản quanh hình ảnh

A paragraph w ith an im age Th e align attribute

o f the im age is set to "le ft" T h e im age w ill flo at to the left o l' this text.

c) C h ặ n văn b ả n bao quanh hình:

Canh lề khi dàn văn bản xung quanh một ảnh sẽ tác động đến tấ t cả các văn bản sau đó nếu không chèn vào một dòng kẽ đặc biệt Thuộc tính CLEAR trong tag

BR làm cho văn bản không b ắt đầu nếu lề cụ th ể không bị xóa đi (nghĩa là tại cạnh dưới của ảnh)

Cú pháp:

<BR CLEAR=Right> : Ngăn chặn văn bản dàn bên lề phải của ảnh

<BR CLEAR=Left> : Ngăn chặn văn bản dàn bên lề trái của ảnh

<BR CLEAR=A1Ỉ> : Ngăn chặn văn bản dàn hai bên lề của ảnh d) Thêm k h o ả n g trố n g xung quanh ả n h

N êu không muôn văn bản dàn xung quanh lề trái của ảnh thì ta có th ể thêm khoảng trắng xung quanh ảnh

Cú pháp:

<IMG SRC=URL HSPACE=n VSPACE=m>

HSPACE=n: Khoảng tráng được tính bằng pixel sẽ thêm vào cả bên phải và

bên trái của ảnh

VSPACE=m: Khoảng trắng được tính bằng pixel sẽ thêm vào cả bên trên và

bên dưới của ảnh

e) Canh lề cho ảnh: Có th ể canh lề cho ảnh so với một dòng văn bản trong m ột

đọan

Cú pháp:

<IMG SRC=URL ALIGN= “Direction”>Văn bản muôn canh lề so với ảnh

Direction: gổm các giá trị: top, bottom, middle, texttop

Ví dụ:

3 T o p 1 0 S h o e m a k e r I c v y 9 Im a g es M ic r o s o ft In te r n e ! E x p lo re r Fite EtH Vfesw Favorites Toob Hsip

Cú pháp:

<Ẩ HREF=”Địa chỉ trang liên k ế t ”>

<IMG SRC=URL Alt=”n ọ i dung thay thê'”>Nhãn

- Label: tên của bản đổ ảnh

- Type: hình dạng của các vùng trên ảnh, gổm các loại:

• Rect: Vùng hình chữ nhật

• Circle: Vùng hình tròn

• Poly: Vùng hình đa giác

- Coords:toa độ các đỉnhcủa hình

• Rect: (x l, y l, x2, y2) là toạ độ 2 đỉnh chéo của vùng hình CN

• Circle: (x, y, r) lần lượt là toạ độ tâm và bán kính của vùng hình tròn

• Poly: (xl, y l, x2, y2, x3, y3, .) là các đỉnh của vùng hình đa giác

<area shape="rect" coords="73,3,149,66" href="Bl.htm">

<area shape="poly" coords="152(81,71,75,62,109,97,123" href="B3.htm">

<area shape="circle" coords="37,32,27" href="b2.htm">

</map>

</body>

</html>

H ình n ề n :

Trong hầu hết các trang web thường sử dụng nền màu, với mục đích là làm nổi bật nội dung trang đó Tuy nhiên cũng có th ể sử dụng hình ảnh đ ể làm nền bằng thuộc tính BACKGROUND của thẻ BODY.

<BODY BACKGROUND= “bgimage.gif”>

CHƯƠNG III: DANH SÁCH

View Favorites Tools

Cú pháp:

<UL Type= Shapel>

<LI Type= Shape 2> N ội dung 1

<LI Type= Shape 2> N ọi dung 2

</UL>

- Shape 1, Shape 2 là loại bullet tự động đ ặt ở đầu dòng trong danh sách

- Shape 1: ảnh hưởng đến toàn danh sách

Shape 2: ảnh hưởng đến một m ục trong danh sách

- Các loại shape:

o Circle: Bullet tròn, rổng

o Square: Bullet vuông

o Disc: Bullet tròn không rổng

<OL Type=x Start =n >

<LI Type = xl Value=m> N ội dung 1

<LI Type =xl Value=m> N ội dung 2

File Edit Address snts\test.htm v Go Links

M onday

o Introduction to HTM L

o Creating Lists Tuesday

o Creating Tables

o Inserting Images

W ednesday Thursday

F nday

•fe] Dor

</OL>

- x: loại ký tự muốn sử dụng trong danh sách gồm :

- n: giá trị đầu tiên của danh sách

- x l: là loại ký tự sử dụng cho dòng này và dòng tiếp theo, làm m ất ảnh hưởng của X

- m: giá trị đầu tiên của dòng này, làm thay đổi giá trị của n

<LI TYPE = i>Introduction to HTML

<LI TYPE = i>Creating Lists

</OL>

<LI>Tuesday

<OL>

<LT TYPE = A>Creating Tables

<LT TYPE = A>Inserting Images

</OL>

<LI>Wednesday

<OL START = 5>

<LI >Creating Forms

<LT >Working with Flames

<LI >Creating Tables

<LI >Inserting Images

</UL>

3 Learning HTML Microsof Ị - Ifn II X I

I Fife Edit View Favorites Tools J> //

1 Address ents\test.htm v H Go Lirii-i »

<UL ty p e -c y c le ’>

<LI >Creating Forms

<LI >Working with Frames

<DT> Resolution

<DD>The quality of the display on a monitor The higher the resolution, the sharper the image The number of pixels that can be displayed on a screen defines resolution

'3 Learning HTML - Microsoft Internet Explorer _ fn x l

1 Address 4Ệ0 C :\D ocum ents a n d S ettings\X uan Hien\My D o cu m en ts\te st.h tm V 0 G o Links ”

ADefinition List

Pixel

Short for picture element A pixel refers to the small dots that make up

an image on the screen Pixel depth refers to the number of colours which may be displayed

R eso lu tio n

The quality of the display on a monitor The higher the resolution, the sharper the image The number of pixels that can be displayed on a screen defines resolution

S can n er

A hardware device that allows the user to make electronic copies of graphics or text

CHƯƠNG IV: BẢNG VÀ TRÌNH BẢY TRANG

<TD>NỘi dung trong ô 1</TD> A

<TD>NỘi dung trong ô 2</TD> -4

<TD>NỘi dung trong ô 1</TD>

<TD>NỘi dung trong ô 2</TD>

<TD>NỘi dung trong ô n</TD>

f) Thêm khung v iền :

<Table Border =n> <Table>

n: độ dày của khung viền tính bằng Pixel

g) Đinh màu của khung viền và màu nền:

Cell 1 CeU 2

► Cell 3 Cell 4

Cell 1 Cell 2Cell 3 Cell4

<Table BorderColor= “Color” BgColor=”Color”> </Table>

h ) Tao bóng :

<Table BorderCoIorDark= “Color”> : Bóng đổ ở cạnh dưới và phải của bảng

<Table BorderColorLight= “Color”> : Bóng đổ cạnh trên trái của bảng

ỉ) Đinh chiều rông vò chiều cao của bảng:

<Table Width =n height=m>, n là chiều rộng tính bằng Pixel

j) Canh lề bảna:

<Table AIign= left/ right/ center> </table>

k) Thuôc tính Ceììpadding và CeìlSpadng:

<Table CelISpacing =”value”>: Khoảng cách giữa đường viền của các ô

<Table CelIPadding=”VaIue”>: Khoảng cách giữa đường viển của ô vói văn

bản

1) Tag tiêu đ ề của Table:

<Caption> tiêu đ ề </Caption>

-T ag <Caption> nằm trong cặp Tag <Table> </Table>

<td width="24%" height="98" valign="top">

<table width="100%" border="l" cellspacing="0">

Trong thực tế, bảng thường được sử dụng đ ể trình bày bô cục cho toàn bộ trang web

N êu muốn thiết kê một trang th ể hiện văn bản trong cột dạng báo chí hoặc phân trang thành những vùng có chủ đ ề khác nhau, thì bảng là m ột công cụ cắn thiết Một trong những nét đặc trưng hữu dụng của bảng đó là trong mỗi table cell bạn có th ể sử dụng

b ấ t kỳ tag HTML nào, ví dụ bạn có th ể chèn một tag <H1> trong một cell hoặc một danh sách có thứ tự các mục hoặc có thể chèn một bảng con trong một bảng khác

V I d u :

C ần th iế t k ế trang web gồm nhiều vùng với những chủ đ ề khác nhau n h ư hình

d ư ớ i đây, thì b ả n g là công c ụ hữu hiệu

Untitled Document • Microsoft Internet Explorer

~he Vatican Collection

"he Rodm Collection

enaistance Masters

This month Middle Age Arts intrcducts the Gargoyle Collection I'm really excited ^ ^ about that new

I set of classical figures

The Collection contains faithful reproductions of gargoyles from soir.e of the famous cathedrals od Europe, including Notre Dame, Rheims, and Watwick Castle

All reproduction are done

| with exacting and loving detail.

he collection also contains lorginal works by noted artists

Don't think you nedd a gargoyle ? Think again gargoyle are useful as

Profile of the Artist

This month's artist is Michael Cassini Michael has been a professional

sculptor for ten years He has won numerous awards, including | the prestigious

b j giaotrin ¿ ỉ ENGLI5 Ç) Mscro A My Doc \ÿ untitled 3 Untitle

table 2

- N êu tài trang sử dựng Frame thì không sử tag Body

<Frame name=”N am el” Src=”Contentl.htm>

<Frame name=”Name2” Src=”Content2.htm>

<Frame name=”Name_n” Src=”Content_n.htm>

</Frameset>

</HTML>

T rong dó:

a, b : là độ cao của các dòng thứ 1, th ứ 2 có thể tính bằng pixel hoặc bằng %

Name: tên khung, (xác định chức năng của khung) Content.htm: địa chỉ trang web xuất hiện đầu tiên trong khung

Ví dụ:

<HTML>

<HEAD><TITLE>Frame</TITLEx/HEAD>

<Frameset Rows=20%, 60%, 20% >

<Frame name=”Head” Src=”head.htm>

<Frame name=”C ontentl” Src=”Contentl.htm>

<Frame name=”Content2” Src=”Content2.htm>

b) T ạ o fram e theo c ộ t

Cú pháp:

<HTML>

<HEAD><TITLE>NỘi dung tiêu đề</TITLE></HEAD>

<Frameset Cols=”a, ti ” >

<Frame name=”N am el” Src=”Contentl.htm>

<Frame name=”Name2” Src=”Content2.htm>

<Frame name=”Name_n” Src=”Content_n.htm>

<Frame name=”Baner” Src=”head.htm>

<Frame name=”Contentl” Src=”Contentl.htm>

<Frame name=”Content2” Src=”Content2.htm>

<Fram eset Cols=30% , 30%, * >

Các th u ộ c tính c ủ a Frame:

a) Noresize: Không đổi kích thước

b) Scrolling: có/không có thanh cuộn

Auto: X uất hiện thanh cuộn khi nội dung dài

Yes: luôn xuất hiện thanh cuộn

No: không xuất hiện thanh cuộn

Ví Hụ:

<frameset rows="80,*" cols="*" frameborder="NO" border="0" >

<frame noresize src="topFrame" scrolling-'N O " >

<frame noresize s r c - ’leftFrame" scrolling="NO" >

</frameset>

c) Frameborder: đường viền của khung m ặc định là 1, muôn giữa các khung không

còn đường viền thì trong tag Frameset nhập thêm Border=0,

d) Marginwidth: hiệu chỉnh khoảng cách từ nội dung đến lề trái và phải của khung

(tính bằng pixel)

e) Marạinheiạht: hiệu chỉnh khoảng cách từ nội dung đến lề trên và dưới của

Tại trang muốn tạo liên kết với khung, ta nhập cú pháp:

<a Href=”Page.htm Target=”name”>

Nhãn m ực liên k ế t

</a>

Trong đó :

Target=Name : tên của khung mà trang muốn liên k ết đến trong tag <Frame>

Page.htm: trang hiển thị trong khung liên k ết

3 Staff of The Colorado fxperientre - Microsoft Internet Fxplorer

FJe Edit View Favorites Tools Help

Je ffh a s le d joutes in Yosenute, E ldoiado M o u n t Ramer a n d Rocky M ou n tain N ational Park He h a s partici

in expedition? in Denali M en eo and N ep al W e aie h a p p y to vrelcome b ack Jefffo r his fourth year w ith Th Colorado Exfenence J e ff will b e leading to u rs to E ldorado C anyon

'Mainframe

Cách thực hiện:

Trang chính: Chia trang thành 3 khung: topframe, leftframe và mainframe Trang

Photo.htm đ ặt trong left frame, logo.htm đ ặt trong Topframe, Bester.htm, DuMont.htm, Jacobs.htm đ ặt trong mainframe

<HTML>

<HEAD><TITLE>Staff of The Colorado Experience</TITLE>

<FRAMESET R0ws="60,*">

<!— Company logo — >

<FRAME SRC="Logo.htm" marginheight=1 noresize scrolling=NO

name=T opf rame>

<!— Nested frames —>

<FRAMESET CC)LS="140,*">

<!— A list of staff photos — >

<FRAME SRC="Photos.htm" NAME=Leftframe>

<!— Individual staff biographies —>

<FRAME SRC="Bester.htm" NAME=Mainframe>

N e Edit View Favorites Tocfe HeJp

W w \p ) E:\WEB\V« ebchieu\6 ai tap\H TM iyram eV;ow ado\Phc<os.htrn

</FONT>

<BODY>

</HTML>

3 Jeff Bester Microsoft Internet Explorer

Name: JeffB ester

Age: 37

Experience: Twelve years climbing Three years with The Colorado

Experience

EMT: Yes Jeff h as led routes in Yosemite Eldorado, M o u n t Ramer and Rocky M ountain N ational Park He has participated in expeditions in Denali, Mexico and Nepal W e are h ap p y to welcome back Jeff for his fourth year with The Colorado Experience Jeff will be leading to u rs to Eldorado Canyon.

Các trang DuMont.htm, Jacobs.htm cũng thiết k ê tương tự

P h ầ n t ử IFRAM E

N êu muôn trộn văn bản và khung trong cùng m ột trang thì phải tạo một khung bên

trong trang bằng tag <iframe>, khi trình duỵêt không hổ trợ thì nội dung trong

IFRAME sẽ bị trả lại

Cú pháp:

- T ại vị trí muốn chèn frame, nhập cú pháp:

<Iframe Src=”Page.htm” Name=”name” Width= X Height=y Align=left/

right/top/bottom>

Nội dung thay th ê khi trình duyệt không chấp nhận khung

</Iframe>

Trong đó:

Page.htm: là trang đầu tiên xuất hiện trong khung

- Nnme: tên rủri khung

- X , y: kích thước của khung Aìigrt: canh lề

Ví d ụ : thiết kê trang web có dạng sau:

<center><img src="Logo.jpg" width="550" height="70"></center>

<iframe width="350" h e ig h t-'150" align-'right" src="Bester.htm">

</iframe>

<hl> <font face="Arial, Helvetica, sans-serif">Staff </font></lil>

The staff at the Colorado Experience is here to helpwith all of your climbing needs All of our instructors are fully qualified, with yearsof climbing and teaching experience Scroll through the biographies at the right for more information

</body>

</html>

3 Untilled Document Microsoft Internet Explorer

File Edt View Favorites Took Help

The staff at the Colorado Experience

is here to helpwith all of your climbing

needs AD of our instructors are fully

qualified, with yearsof climbing and

teaching experience Scroll through

the biographies at the right for more

CHƯƠNG VI: FORM

s ử d ụ n g Form: Form đ ư ợ c s ử d ụ n g khi cần :

- Thu thập thông tin tên, địa chỉ, sô điện thoại, email, .đ ể đăng ký cho người dùng vào một dich vụ hoặc một sự kiện

— T ập hợp thông tin đ ể mua hàng

- Thu thập thông tin phản hôi về một Website

— Cung cấp công cụ tìm kiếm trên website

Cách tạ o :

Cú pháp:

<Form Method=(Post Get) Action=script.ur!>

N ội dung của Form

</Form>

Trong đỏ:

-Method: xác định phương thức đưa d ữ liệu lên máy chủ, có 2 giá trị :Post và Get

• N êu giá trị là GET thì trình duyệt sẽ tạo một câu hỏi chứa trang URL, một dấu hỏi

và các giá trị do biểu m ẫu tạo ra Trình duyệt sẽ đổi script của câu hỏi thành kiểu được xác định trong URL đ ể x ử lý

• N êu giá trị là POST thì d ữ liệu trên biểu m ẫu sẽ được gửi đến script như m ột khỏi

d ữ liẹ u

-Action: là địa chỉ của script sẽ thực hiện khi form được submit

Các phần tử của form thường sử dụng trên trang web gồm

• Input boxes: nhập d ữ liệu dạng text và number

• Radio buttons: dùng đ ể chọn một tùy chọn trong danh sách

• Selection lists: dùng cho một danh sách dài các lựa chọn, thường là trong Drop­

down list box

• Check boxes: chỉ định một item được chọn hay không

• Text area: một text box có thể chứa nhiều dòng

• Submit và Reset button: đ ể gửi form đến CGI script vừa đ ể reset form v ề

trạng thái ban đẩu

Các giá tri của thuỏc tính TYPE: M ặc định giá trị của TYPE là text, nếu trong tag

<INPUT> không nhập thuộc tính TYPE thì loại input boxes là text

PASSWORD CHECKBOX RADIO HIDDEN RESET SUBMIT TEXTAREA

BUTTON IMAGE

<td><input name =Address></td>

'3 Form - Microsoft Internet Explorer

File Edit View Favorites Tools Help Address C:\Documents and Settings\acer 5050\My Documents\TEST.HTM

<Input Type=”Text” Value=”Value” Name=”name” Size=n Maxlength=m>

- Name : tên d ữ liệu đắn vào server

- Value: D ữ liệu ban đầu có sẳn trong text box

- Size: chiều rộng của text box tính bằng sô ký tự (m ặc định là 20)

- Maxlength: sô ký tự tói đa có th ể nhập vào text box