Bài giảng Thiết kế Web: Ngôn ngữ HTML - Phạm Thế Bảo

Bài giảng này giới thiệu về ngôn ngữ HTML trong thiết kế Web. Thông qua chương học này, người học có thể biết về lịch sử của HTML, đặc điểm của HTML, trang web đầu tiên, thẻ TAG trong HTML, thuộc tính (property) của thẻ,... Mời các bạn cùng tham khảo để nắm bắt các nội dung chi tiết.

Trang 1

Ngôn ng ӳ HTML

Phɞm Thɼ Bɠo

Khoa Toán – Tin h͍c ptbao@hcmus.edu.vn http://www.math.hcmuns.edu.vn/~ptbao/TKW

Trang 2

Gi ӟi thiӋu

Ngôn ngͯ ÿánh dɢu siêu văn bɠn – Ngôn ngͯ ÿʀ viɼt các trang web

W3C (World Wide Web Consortium) ÿɉa

thành chuɦn năm 1994

Trang 3

- Ch ӭa các thành phҫn ÿӏnh dҥng ÿӇ báo cho trình duyӋt Web biӃt cách hiӇn thӏ mӝt trang Web

- Mӝt trang web thông thѭӡng gӗm có 2 thành phҫn chính:

D ӳ liӋu cӫa trang web (văn bҧn, âm thanh, hình ҧnh )

Các th ҿ (tag) HTML dùng ÿӇ ÿӏnh dҥng mô tҧ cách thӭc các d ӳ liӋu trên hiӇn thӏ trên trình duyӋt.

- ĈӇ ÿӑc ÿѭӧc trang Web phҧi thông qua trình duyӋt Web (Web Browser).

Trang 4

pháp HTML Nɼu viɼt sai cú pháp chʆ dɨn ÿɼn kɼt quɠ hiʀn thʈ không ÿúng v͛i dͱ

ÿʈnh.

Trang 5

Trang web ÿҫu tiên

9 Trang HTML có phɤn m͟ r͙ng (ÿuôi) là HTM hoɴc HTML

9 Có thʀ tɞo trang HTML bɮng bɢt cͩ trình soɞn

thɠo “văn bɠn thuɤn” nào (Notepad, EditPlus,…)

9 Có nhiɾu trình soɞn thɠo HTML cho phép NSD

soɞn thɠo trͱc quan, kɼt quɠ sinh ra HTML tɉɇng

ͩng nhɉ:

– Microsoft FrontPage

– Macromedia Dreamweaver

– …

Trang 6

Trang web ÿҫu tiên (tt)

– M͟ trình soɞn thɠo văn bɠn thuɤn (VD Notepad) gõ ND dɉ͛i

– Ghi lɞi v͛i tên “CHAO.HTM” hay “chao.html”

Trang 7

Trang web ÿҫu tiên (tt)

9 Thͭ nghiʄm:

– M͟ trình duyʄt web (IE)

– Vào File/Open, ch͍n file

CHAO.HTM vͫa ghi

– Nhɢn OK ĺ Có kɼt quɠ nhɉ

hình bên

9 Thay ÿ͕i:

– Quay lɞi Notepad, sͭa lɞi n͙i

dung trang web r͓i ghi lɞi

– Chuyʀn sang IE, nhɢn nút

Refresh (F5) ĺ thɢy kɼt quɠ

Trang 8

• Dɢu ngoɴc kép (“): "

• Ký hiʄu : ©

• …

9 Ghi chú trong HTML:

<! Ghi chú >

Trang 9

Th ҿ TAG trong HTML

Có nhiɾu thɸ, m͗i thɸ có 1 tên và mang ý nghśa khác nhau

Ví dͥ : <title> Trang chͧ </title>

- Tag l͓ng : Các tag viɼt l͓ng nhau.Thɸ ÿɉͣc m͟ ÿɤu tiên sɺ ÿɉͣc ÿóng sau cùng

Ví dͥ : Phɤn N͙i dung

Trang 10

2 Thu͙c tính (property) cͧa thɸ

các thu͙c tính nhɮm b͕ sung tác dͥng cho thɸ.

cͧa tag

nhau b͟i khoɠng trɬng.

Trang 11

Thu ӝc tính (property) cӫa thҿ

9 Chú ý:

– Có thʀ thay ÿ͕i thͩ tͱ, s͑ lɉͣng các thu͙c tính mà

không gây ra l͗i cú pháp

– Sͱ h͗ trͣ các thɸ, thu͙c tính ͟ m͗i trình duyʄt là khác nhau Chʆ gi͑ng nhau ͟ các thɸ, thu͙c tính cɇ bɠn.

– Thɸ ÿóng cͧa thɸ có thu͙c tính vɨn viɼt bình thɉ͝ng

Trang 12

C ҨU TRÚC TRANG WEB

Tiêu ÿӅ cӱa sә trang Web

N ӝi dung thӇ hiӋn

Trang 13

Ý ngh ƭa các thành phҫn

<html> </html> : Ĉӏnh nghƭa phҥm vi cӫa văn bҧn HTML

<head> </head> : Các mô t ҧ vӅ trang HTML Các thông tin trong tag này không ÿѭӧc hiӇn thӏ trên web.

<title> </title> : Mô t ҧ tiêu ÿӅ trang web.

<body> </body> : Xác ÿӏnh vùng thân cӫa trang web, nѫi

ch ӭa các thông tin ( Dӳ liӋu , hình ҧnh …)

Trang 14

Ĉӏnh dҥng trang

a Font chӳ mһc ÿӏnh cӫa trang web:

Cú pháp :

< BASEFONT face= fontName size= fontSize color= textColor>

Th ҿ lӋnh này có tác dөng lên toàn bӝ văn bҧn trong trang web

và ÿѭӧc ÿһt trong phҥm vi Tag <Head>

Trang 15

b Hình / Màu n Ӆn mһc ÿӏnh cho trang web:

Thuӝc tính cӫa Tag Body

< Body text=textColor bgcolor=backgroundColor

background= Image leftmargin=lm rightmargin=rm>

Thҿ lӋnh này dùng ÿӇ ÿӏnh các thông sӕ hiӇn thӏ trang web

nh ѭ : màu nӅn, ҧnh nӅn, màu chӳ …

Thөôc tính

textColor : Màu ch ӳ.

Bgcolor : Màu n Ӆn trang web

backgroundImage : Ҧnh nӅn trang web

Leftmargin , Rightmargin : L Ӆ trái phҧi cӫa trang Web.

• Ví d ө 1 : <body bgcolor="#FFCCFF" text="#0000FF">

• Ví dө 2 : <body background=.//love.jpg leftmargin=10

rightmargin = 10 text=“Blue" >

Trang 17

Style ch ӳ

n ӝi dung

… In ÿұm nӝi dung

n ӝi dung G ҥch dѭӟi nӝi dung

n ӝi dung In nghiêng n ӝi dung

<Strike> … </Strike> G ҥch ngang nӝi dung

<BIG> nӝi dung </BIG> Thay ÿәi nӝi dung thành chӳ lӟn

… Thay ÿәi nӝi dung thành chӳ nhӓ

n ӝi dung ChӍ sӕ trên ( SuperScript )

n ӝi dung Ch Ӎ sӕ dѭӟi ( SubScript )

Trang 18

 Ch ӳ gҥch chân 

 Ch ӳ in nghiêng 

Trang 20

Tiêu ÿӅ, ÿoҥn văn, ngҳt dòng

Trang 21

Ĉѭӡng kҿ ngang

Cú pháp :

< HR Size = “n” Width = “w” align = “alignStyle” color = “color”>

T ҥo ÿѭӡng kҿ ngang trang Web

 TR ѬӠNG ĈҤI HӐC KHOA HӐC TӴ NHIÊN 

<Hr Size = 3 Width = 50% align = center color = Red >

Trang 22

Ĉӏnh dҥng Bullets and Numbering

<UL Type = “Disk” >

<Li > Tóan </Li>

<Li> Lý </Li>

</UL>

Trang 23

2 Numbering

Cú pháp :

< OL Type = “Style ” start = “n” >

… ( Danh sách ÿѭӧc thӇ hiӋn bҵng Tag <Li> …</Li> )

<OL Type = A Start = 3 >

<Li > Tóan </Li>

<Li> Lý </Li>

</OL>

Trang 24

<! - - nӝi dung ghi chú > Nӝi dung ghi chú trên Web

Trang 25

Ví d ө

<html>

<head> <title> Vi du Ky tu ÿac biet </title>

</head>

<body text = "blue">

 Ký t ӵ ÿһc biӋt <hr size = 2 width = 50% color = "#1144FF" >

Trang 27

Ĉӏnh dҥng hình ҧnh

Cú pháp :

< IMG SRC = Url ALT = text Border = border Width = w Height = h

Align = alignStyle vspace = space 1 hsapce = sapce 2 >

Dùng ÿӇ chèn 1 hình vào trang Web Tұp tin hình ÿѭӧc xác ÿӏnh bӣi thu ӝc tính SRC

* Top, Bottom , Middle Æ Ҧnh ÿѭӧc xem nhѭ 1 ký tӵ.

* Left , Right Æ Ҧnh ӣ trҥng thái Floating

Sapce 1 , space 2 : Kh ӓang cách lӅ tính vӟi ҧnh.

Trang 28

<head> <title> Vi du chen hinh </title> <head>

<body>

<! hspace : Khoang cach theo chieu ngang man hinh >

<! vspace : Khoang cach theo chieu doc man hinh >

 Hình 1 <IMG Src = “1.jpg" Alt = "Sánh ÿôi " border = 2 height=40% >

Trang 30

Âm thanh n Ӆn trang Web

Cú pháp :

< BGSOUND SRC = Url Loop = loop >

Dùng ÿӇ chèn 1 tұp tin âm thanh Midi làm nhҥc nӅn cho trang Web T ұp tin hình ÿѭӧc xác ÿӏnh bӣi thuӝc tính SRC

Thuӝc tính :

Url : Ĉѭӡng dүn tұp tin âm thanh.

loop : s ӕ lҫn lһp ( -1 Æ lһp vô hҥn )

<html>

<head> <title> Vi du Nhac nen trang web </title> <head>

<bgsound src="town.mid" loop = 1>

Trang 31

Table – B ҧng biӇu

Cú pháp :

< Table Border = x Bgcolor = color Width = w Height = h

Cellpadding = m Cellspacing = n Align = alignStyle >

… Khai báo dòng c ӝt bҵng Tag <Tr> và <Td>

W : Ĉӝ rӝng Table H : Ĉӝ cao Table

Cellpadding , CellSpacing : Kh ӓang cách lӅ giӳa các Cell alignStyle : V ӏ trí Table so vӟi trang

Trang 32

Các Tag ÿӏnh dҥng Table

Cú pháp :

< Caption > N ӝi dung mô tҧ tiêu ÿӅ bҧng </Caption>

< Tr Align = alignStyle Height = h > … </Tr>

Trang 35

<! Table 4 dòng 5cӝt >

<Table border = 1 bgcolor =yellow width = 50% align = center>

<Tr >

<Td align = Center rowspan = 2 >Hӑ tên </Td>

<Td align = Center colspan = 3 > điӇm thi </Td>

<Td align = Center rowspan = 2 >điӇm TB </Td>

Trang 37

LIÊN K ӂT

• Là ÿiӇm ÿһc trѭng cӫa Web, dùng ÿӇ di chuyӇn giӳa các mөc hay giӳa các trang trong cùng bӝ Web hoһc ÿӃn 1 trang Web cӫa bӝ web khác

• Là kh ҧ năng cho phép tҥo liên kӃt giӳa 1 ÿӕi tѭӧng vӟi mӝt phҫn

n ӝi dung Khi ta kích chuӝt vào ÿӕi tѭӧng thì phҫn nӝi dung sӁ

- Bookmark : liên k Ӄt giӳa các mөc trong cùng trang Web.

- Page : liên kӃt giӳa các trang trong cùng bӝ Web

b Liên k Ӄt ngӑai :

- Web Site : Liên kӃt ÿӃn 1 ÿӏa chӍ Web site khác

Trang 38

Tag Liên k Ӄt

Liên kӃt ÿiӇm dӯng ( BookMark ) :

ĈӇ thӵc hiӋn liên kӃt nӝi trong trang Æ Phҧi tҥo ÿiӇm dӯng

tr ѭӟc khi thӵc hiӋn liên kӃt.

a T ҥo Bookmark :

Cú pháp :

< A Name = “Bookmark Name” > N ӝi dung </A>

- Bookmark Name : Tên v ӏ trí liên kӃt.

b Tҥo Liên kӃt :

< A href = “# Bookmark Name” > … </A>

- # Bookmark Name : Vӏ trí liên kӃt di chuyӇn ÿӃn.

Trang 39

Click vào </a> ÿӇ liên kӃt ÿӃn Web site Microsoft

Liên kӃt nӝi – Trong cùng bӝ Web

Cú pháp :

< A href = “NamePage.htm” target = Style > n ӝi dung </A>

- NamePage.htm : Tên trang htm trong cùng bӝ Web

- target : Th Ӈ hiӋn cӱa sә cho liên kӃt (_blank , _top, _self)

Liên kӃt ngӑai – ĈӃn ÿӏa chӍ Web

Cú pháp :

< A href = “http://WebName” target = Style> n ӝi dung </A>

- http://WebName : Ĉӏa chӍ Web

- target : ThӇ hiӋn cӱa sә cho liên kӃt (_blank , _top)

Trang 40

Liên k Ӄt (tt)

<A HREF=“URL” TARGET=“…”> hypertext </A>

name: tɠi trang web vào frame có tên NAME

_blank: tɠi trang web vào cͭa s͕ m͛i

_parent: tɠi trang web vào cͭa s͕ cha cͧa nó

_self: tɠi trang web vào chính cͭa s͕ hiʄn hành

_top: tɠi trang web vào cͭa s͑ cao nhɢt

• Liên kɼt v͛i ÿʈa chʆ e-mail thì ÿɴt

href=“mailto:ÿʈa_chʆ_e-mail”

Ví dͥ: <A HREF=“mailto:ptbao@hcmus.edu.vn>Phɞm Thɼ Bɠo</A>

• Thͱc hiʄn lʄnh JavaScript khi kích chu͙t vào thì ÿɴt

href=“javascript:lʄnh”

Trang 43

<h3>Ĉây là trang Web ÿҫu tiên tôi</h3>

Có viӅn xung quanh (boder =1 và vspace,hspace = 20)

Text thay thӃ là " Bӭc ҧnh vӅ chú báo "

Canh lӅ trái

Bҥn hãy thiӃt kӃ thӱ xem !!!

Liên hӋ <a href="mailto:ptbao@hcmus.edu.vn">ptbao[at]hcmus[dot]edu[dot]vn</a>

</body>

</html>

Trang 45

Liên k Ӄt ÿa hình ҧnh

9 Xác ÿʈnh các vùng liên kɼt trên ɠnh

<MAP name = "map_name">

<area shape = "rect" coords = "x1,y1,x2,y2" href ="URL">

<area shape = "rect" coords = "x4,y4,x5,y5" href ="URL">

Trang 46

</map>

</body>

</html>

Trang 48

Chuy Ӈn hѭӟng trang web tӵ ÿӝng

9 <META HTTP-EQUIV=“refresh” CONTENT=“3”; URL=“URL”>

– Chuyʀn hɉ͛ng tͱ ÿ͙ng sang trang URL sau th͝i gian 3 giây

– Ĉɴt trong phɤn <HEAD> …</HEAD>

<HEAD>

</HEAD>

Trang 49

FRAME

Trang 50

– ROWS=“X,Y,Z,*”: phân các frame theo dòng

– COLS=“X,Y,*”: phân các frame theo c͙t

(X,Y,Z: kích thɉ͛c xác ÿʈnh hay tʆ lʄ %)

– Frameborder=“Yes/No”

Trang 51

9 Thu͙c tính cͧa <FRAME …>

– NAME=“tên_frame”: ÿɴt tên cho frame

– SRC=“URL” : ÿʈa chʆ trang web ÿɉͣc hiʀn thʈ

– TARGET: xác ÿʈnh frame mɴc ÿʈnh cho các hyperlink frame này – BORDER=“x” : xác ÿʈnh kích thɉ͛c ÿɉ͝ng viɾn

– SCROLLING=“yes/no/auto” : xác ÿʈnh thu͙c tính hiʀn thʈ scrollbar – NORESIZE: không cho phép hiʄu chʆnh kích thɉ͛c frame window

9 Sͭ dͥng các FRAMESET l͓ng nhau

Trang 52

</frameset>

</html>

Trang 54

</frameset>

</html>

Trang 56

T ҥo liên kӃt trong Frame

<! File menu.htm ÿɉͣc sͭa thành >

<a href="chapter1.htm" target="content">Chapter 1</a>

</body>

</html>

Trang 58

Trang 60

T ҥo khung cho Frame

</frameset>

</html>

Trang 62

B ӓ khung cӫa Frame

</frameset>

</html>

Trang 64

</frameset>

</html>

Trang 66

Màu s ҳc cӫa Frame

<html>

<head>

<title>HTML Frames - An Advanced Frame Layout</title>

</head>

</frameset>>

</frameset>

</html>

Trang 68

Bài th ӵc hành 4:

Thi Ӄt kӃ các trang web có dҥng FRAME sau

Trang 69

Form trên trang web

Trang 70

Các ÿӕi tѭӧng nhұp dӳ liӋu

9 Cho phép ngɉ͝i sͭ dͥng nhɪp dͯ liʄu trên trang web Dͯ liʄu này có thʀ ÿɉͣc gͭi vɾ server ÿʀ xͭ lý

9 Ngɉ͝i sͭ dͥng nhɪp dͯ liʄu thông qua các ÿiɾu khiʀn

(controls) Có nhiɾu loɞi control:

Trang 71

Các ÿӕi tѭӧng nhұp dӳ liӋu (tt)

ÿʈnh qua thu͙c tính name Tuy nhiên có

m͙t s͑ ÿiɾu khiʀn thì name không quan

tr͍ng (các ÿiɾu khiʀn mà sau này không

cɤn lɢy dͯ liʄu)

nghśa nh͝ thɸ <input> và thu͙c tính

type sɺ xác ÿʈnh là ÿiɾu khiʀn nào sɺ

ÿɉͣc tɞo ra

Trang 72

9 Sͭ dͥng ÿʀ chͩa m͍i ÿ͑i tɉͣng khác

9 Không nhìn thɢy khi trang web ÿɉͣc hiʀn thʈ

9 Quy ÿʈnh m͙t s͑ thu͙c tính quan tr͍ng nhɉ

method, action.

9 Thɸ tɞo form:

<form>…</form>

9 Các thu͙c tính:

– name=“tên_form”: Không quan tr͍ng lɬm

– action=“ÿʈa chʆ nhɪn dͯ liʄu”: Nên sͭ dͥng ÿɉ͝ng dɨn

tɉɇng ÿ͑i nɼu nɮm trong cùng 1 web

– method=“phɉɇng thͩc gͭi dͯ liʄu” Chʆ có 2 giá trʈ:

• GET (mɴc ÿʈnh)

• POST

Trang 73

H ӝp nhұp văn bҧn 1 dòng (Oneline Textbox)

Trang 74

9 Cho phép ch͍n nhiɾu lͱa ch͍n

trong m͙t nhóm lͱa ch͍n ÿɉͣc ÿɉa

Trang 75

Option Button (Radio Button)

9 Cho phép ch͍n m͙t lͱa ch͍n trong m͙t

nhóm lͱa ch͍n ÿɉͣc ÿɉa ra

9 Trên 1 form có thʀ có nhiɾu nhóm lͱa

Trang 76

Nút l Ӌnh (Button)

9 Sͭ dͥng ÿʀ NSD ra lʄnh thͱc hiʄn công viʄc.

9 Trên web có 3 loɞi nút:

– submit: Tͱ ÿ͙ng ra lʄnh gͭi dͯ liʄu

– reset: ÿɉa m͍i dͯ liʄu vɾ trɞng thái mɴc ÿʈnh

Trang 77

Combo Box (Drop-down menu)

Trang 79

H ӝp nhұp văn bҧn nhiӅu dòng (TextArea)

9 Cho phép nhɪp văn bɠn dài trên

rows tính theo s͑ dòng văn bɠn,

cols tính theo s͑ ký tͱ chuɦn trên

dòng.

Tiêu đề	Ngôn ngữ HTML
Tác giả	Phạm Thế Bảo
Trường học	Trường Đại Học Khoa Học Tự Nhiên - Đại Học Quốc Gia Thành Phố Hồ Chí Minh
Chuyên ngành	Thiết kế Web
Thể loại	bài giảng
Thành phố	Thành phố Hồ Chí Minh

Định dạng
Số trang	89
Dung lượng	0,94 MB