Ngôn ngữ đánh dấu siêu văn bản_ HTML

Web ( World Wide Web): Mạng toàn cầu, sử dụng ngôn ngữ đánh dấu siêu văn bản ( HTML: Highper Text Markup Language) để mô tả. Có 2 loại trang web: tĩnh và động. Thông tin được khai báo bằng cách dùng các thẻ theo một quy luật khai. Người dùng sử dụng các trình duyệt để đọc các thông tin.

Trang 1

Bùi V Anh - Bài gi ng HTML 08-08-2005

Bài 1

Ngôn ng đ đ ánh d u siêu v n b n

(Highper Text Markup Language – HTML)

Ths Bùi V Anh

B môn Tin h c

Khoa Toán – C – Tin h c

vuanh@vnu.edu.vn

Hà N i 08-08-2005 Bùi V Anh - Bài gi ng v HTML 2

N i dung

• Khái ni m c b n

• C u trúc trang Web

• M t s th thông d ng

• M t s th đ c bi t

• C u trúc th Script

Khái ni m

• Web (World Wide Web): M ng toàn c u,

s d ng ngôn ng đánh d u siêu v n b n (HTML – H ighper T ext M arkup L anguage)

đ mô t n i dung.

• Có 2 lo i trang Web: T nh và đ ng

• Thông tin đ c khai báo b ng cách dùng

các th theo m t quy lu t khai báo.

• Ng i dùng s d ng các trình duy t đ

đ c các thông tin

BVA1

BVA5

Trình duy t và k ch b n

• Internet Explorer, Nescape, FireFox…

• K ch b n (script): Có 2 lo i, ch y trên máy

ch (server script) và máy khách – máy duy t web (client script) ó là d ng l p trình dùng đ nâng cao hi u qu , tính

n ng c a trang web.

• Các h CSDL g n v i trang web dùng đ

l u thông tin: Access, SQL Server, MySQL, Oracle…

Trình ch và ngôn ng script

• Trình ch (web server): N i cung c p d ch

v web, đ t và ch y trên máy tính

• Môi tr ng ch y trình ch : – Windows: IIS (Internet Information Server), Apache

– Linux: Apache, JRUN, Weblogic…

• Ngôn ng script: ASP (Active Server Page), JSP (Java Server Page), Servlet, PHP, Perl, ASP.NET

– Ph bi n: VB Script và Java Script

Trình ch và ngôn ng script…

• Client script không ph thu c vào Server script và Web server (t ng đ i)

• Có th dùng nhi u lo i client script trong cùng m t trang Web nh ng không đ c khai báo l n l n

Trang 2

Bui Vu Anh, 7/23/2005

Trang 3

C u trúc trang Web

• Là m t file text có c u trúc

• Tên file l u tr : htm, html , jhtm, phtm…

• Tên th không phân bi t ch hoa/th ng

<html>

<head>

<meta…>

</head>

</html>

Ý ngh a các th

trang web, m c đích cung c p thông tin…

duy t

có th che d u m t ph n thông tin tu theo

ph ng th c c a client script

Các th đ nh d ng

• Div : Canh l đo n v n b n

…

</div>

dòng m i, tách nhau b ng m t kho ng cách

…

</p>

• <blockquote> </blockquote> : Làm n i b t

đo n v n b n b ng cách lùi vào phía trong trang web, gi nguyên đ nh d ng

Các th đ nh d ng…

• Font : Quy đ nh font cho đo n v n b n

– <font face=“tên font”color=“màu”size=“kích th c”>

… </font>

– Tên font s d ng: font vi t tr c quy đ nh s dùng

n u máy đã cài đ t, font th 2 đ c dùng n u font

th nh t không cài đ t…

– H 16 màu chu n thì có th dùng tên: red, blue…, h màu 24bit, dùng 6 s h hexa d ng #FFFFFF(d u #

tr c) – C ch 1, 2, 3…7 ho c dùng kích th c t ng đ i so

v i trình duy t, dùng –n, +n

size=+1, size=-2

Mã 16 màu

navy olive purple red

silver teal white yellow

Các th đ nh d ng…

• B, I, U : Quy đ nh font ch đ m, nghiêng, g ch chân

M t s th khác làm thay đ i hình th c c a ch

• Heading: H1 đ n H6, Typewriter: tt

• <BIG> </BIG>, <SMALL> </SMALL>

• <sup> </sup> : superscript - ch s trên

• <sub> </sub> : subscript - ch s d i

• <strike> … </strike> : g ch ngang qua

• <basefont size=n> : Quy đ nh ch trong trang, ch thay

đ i khi có m t basefont khác xu t hi n

Trang 4

Ng t dòng và đo n

• D u tr ng, d u ng t đo n trên trình duy t ch

đ c tính 1 l n

• tách đo n, dùng th p, div

• Dùng th <pre> … </pre> n u mu n trình

duy t hi n đúng v n b n nh đã trình b y

trong trang web.

Chèn b ng

–Tr: Khai báo hàng –Td: Khai báo c t

<table border =n cellspacing =m cellpadding =k

width =l>

…

</table>

n v dùng tính theo đi m

BVA6 BVA7

Chèn b ng…

<td width=“n%” align=“l eft | right | center ” valign=“top

| bottom | mi ddle ” rowspan=m colspan=k>

…

</td> : Khai báo c t

<tr> … </tr> : Khai báo hàng

• Dùng th <th>…</th> đ đ nh d ng tiêu đ c t c a

b ng

• Dùng th <caption> … <caption> đ c n đ u theo chi u r ng m t dòng tiêu đ trong b ng Th này

đ t trong th <table>

BVA10 BVA11

Danh sách

• Không th t ( u norder l ist)

<li type=circle | square | disc > Item 1

<li> Item 2

</ul>

• Có th t ( o rder l ist)

<li type= “1 | A | a | I | i”> Item 1

<li> Item 2

</ol>

• Danh sách s đánh s th t t y (y là s , type tu ý)

• Danh sách có th l ng nhau nh ng không đ c đan chéo

Danh sách mô t

<dl>

<dt> description title1

<dd> description description1

<dt> description title2

<dd> description description2

…

<dt> description titleN

<dd> description descriptionN

</dl>

phân c p

Th chèn nh

• <imag align=“top | bottom | middle | left | right” scr =

“đ ng d n URL/UNC” border=n height=x width=y border=m alt=“x”>

• Imag không có th đóng, aligndùng đ dóng v n b n so

v i nh, m c đ nh làbottom N u dùng left | right, v n

b n sau đó c ng b tác đ ng (t ng quan text-image)

• nh có th b bi n d ng n u cung c p chi u cao, r ng sao t l => Không nên ch chi u cao và r ng n u không

c n thi t

• N u mu n nh không có vi n, ch n border m=0

• Khi không n p đ c nh, xâu trong alts hi n thay th

• Các lo i nh h tr : GIF, JPG, PNG

Trang 5

Slide 14

Bui Vu Anh, 8/2/2005

Slide 15

Bui Vu Anh, 7/23/2005

Trang 6

Các ký t đ c bi t

• D u xu ng dòng: <br clear=“left | right | center”> Clear

dùng đ xoá vi c c n dòng v n b n bao quanh hình nh do

th imag t o ra

• &gt (>), &lt (<), &amp (&),  (d u tr ng không b trình duy t hu

- non breacking space), © (©), ® (®), é (é)

• Dùng &xxxx; đ chèn các ký t ISO trong đó xxxx là mã

Tham kh o t i:http://www.uni-passau.de/~ramsch/iso8859-1.html

• ng k ngang (hard rules):

X có th dùng %, t l v i đ r ng c a trang hi n hành N

m c đ nh là 2 noshade : không có bóng

Th chèn liên k t

• G n v i v n b n: <a href=“ đ a ch liên k t URL/UNC”> … </a>

• G n v i nh

border=n height=x width=y>

</a>

• Dùng “mailto: đ a ch email” đ liên k t đ n

đ a ch g i th

URL: Universal/Uniform Resource Locator

BVA16

Th chèn liên k t…

<a href=“javascript:window.external.AddFavorite (‘http://mim.hus.vn’)”> Bookmark this URL </a>

• Khai báo nh m t Bookmark trong chính trang web”

– Khai báo: <a name="NAME">Dòng thông báo v trí,

có th không có</a>

– Tham kh o tr l i: <a name=“NAME">Dòng thông báo đi đ n v trí có tham kh o n</a>

Có th dùng bookmark trong m t trang khác:

name=<đ a ch trang>#tên tham kh o

BVA17

Các th input

• Cho phép ng i dùng nh p d li u

• Th c hi n ch th hay hành đ ng

• G m: text, password, submit, button,

reset, checkbox, radio, hidden, image

BVA18

Th text và password

• Quy đ nh chi u dài l n nh t (maxlength) và kích

th c (size) trên trang web

khi n/th ch a nó

Server Side

• Cung c p giá tr m c đ nh n u c n

Th text và password…

<input type=“ text ” name=“ txtUsername ” value=“”

size=20 maxlength=10>

value=“” size=20 maxlength=10>

Trang 7

Slide 20

UNC: a ch m ng c c b

Bui Vu Anh, 7/23/2005

Slide 21

Bui Vu Anh, 7/23/2005

Slide 22

Bui Vu Anh, 7/23/2005

Trang 8

Th checkbox

Dùng cho tu ch n

• Quan tâm đ n thu c tính checked (true/false) khi s

d ng Client Script

• Server side tham chi u th d i d ng giá tr c a th

thông qua tên nên c n đ nh ngh a giá tr tr c

• Khi khai báo trùng tên, chu i giá tr nh n đ c cách

nhau b i d u ph y (,) How can you know us:

<input type="checkbox" value="P" name="chkHow"

checked>Newspaper

<input type="checkbox" value="T" name="chkTV"

checked>Television

Th radio

• Dùng cho ch n 1 trong nhi u l a ch n

• Các radio ph i có cùng tên, khác nhau v giá tr

cùng n u c tình check nhi u m c

Gender:

<input type="radio" value="M" name="rdGender"

checked>Male

<input type="radio" value="F" name="rdGender">Female

Th submit

Ü Dùng ch p nh n nh ng d li u nh p trong input

form) hay Get (trong QueryString)

th c Post

(value là giá tr caption trên nút)

Th button

• Ch p nh n nh ng d li u nh p trong các th

input lên trình khách (n u dùng ph ng th c

submit(), nút s g i th form lên trình ch

web) Mu n tính toán trên trang web => dùng

th này

• Th c thi ph ng th c Client Script

Ví d : Quay v trang tr c

<input type=“button" value=“Back" name= “Back“

onClick=“window.history.go(-1);”>

Th reset

• Ph c h i d li u nh p trong các th input, select, textarea

• c khai báo trong th form dùng đ reset

d li u trên trang web

Th hidden

• T ng t th text nh ng không hi n th trên trang web, không cho phép ng i dùng nh p

d li u mà c n đ nh ngh a tr c giá tr cho

nó, nh m th c hi n m c đích ti m n.

Trang 9

Th image

• Hình nh trên trang web g n v i m t ch c

n ng (ví d g n kèm các nút submit, reset,

button).

<input type=“image" name= “imgGo” scr=“đ ng d n đ n

file nh”>

Th textarea

• Nh p d li u trên nhi u dòng (không gi i

h n tr c chi u dài l n nh t)

• H n đ nh s dòng (rows) và c t (cols) ph c

v vi c hi n th

• Trình b y trong b ng đ c n hàng, c t Description: <textarea name="txtDesc" cols="20"

rows="3"></textarea>

Requirement: <textarea name="txtRequire" cols="20"

rows="3">Please enter here </textarea>

Th select

• Ch n các ph n t trong danh sách (ListBox, ComboBox)

• Cho ch n m t (ComboBox) ho c nhi u m c (ListBox)

• Ph n t đ c ch n thì thu c tính selected

nh n đúng

Th select…

<option value="" selected>(Select a city)</option>

</select>

<option value="" selected>(Select Industry)</option>

<option value="MED">Medical</option>

<option value="ENG">Engineering</option>

</select>

Th form

• Dùng đ g i d li u trong trang web t phía Client lên Server

• Post: G i d li u lên, Get: G i yêu c u l y

d li u v

• Th form c n bao (ch a) các th input c n

đ a d li u cho Server

• Các th form không đ c l ng nhau vì chúng

có hành đ ng (action) khai báo t ng ng riêng ch đ n m t trang web

Th form…

trang web chuy n đ n là trang hi n t i.

lên chu i QueryString (chu i g m nhi u c p tham

s cùng v i giá tr đi kèm n u có k t sau d u ?, cách nhau b i d u &, tham s và giá tr cách nhau

b i d u =)

ti p t trang web đ n trang Server Script

Script; Post: submit d li u đ n Server Script

Trang 10

Th form…

<form name = "form1" action = "doaction.php" method = "post"

onsubmit = "alert('You are about submit');">

… Các input n m đây …

ho c

</form>

Khi b m Enter trong h p Text, hành đ ng submit c ng s

đ c th c hi n và nó s g i hành đ ng t ng ng

(doaction)

Th form…

Khai báo th form đ Upload lên Server t Client, dùng th form:

<FORM ENCTYPE = “multipart/form-data” ACTION

= “download.php” name = “form1” METHOD = POST onsubmit = “return doUpload();>

ng d ng trên Server Script mu n Upload file t Client lên Server đ u ph i khai báo th này trong trang ch n file.

Các th đ c bi t Meta: Khai báo trong th head dùng khai báo

lo i font s d ng, tìm ki m, xoá cache, chuy n trang…

• Th meta v i font:

“text/html; charset = UTF-8”>

N u mu n hi n n i dung ti ng Vi t và cho phép

meta nh trên.

Các th đ c bi t…

• Th meta tìm ki m:

Cung c p thông tin cho các Search Engine khi

“text/html; charset = UTF-8”>

<META NAME=“description” CONTENT = “Mô

t ”>

Trong CONTENT li t kê các t khoá ph c v tìm

ki m

• T đ ng chuy n đ n URL/UNC sau m t th i gian:

<META http-equiv=refresh content="5;

URL=http://mim.hus.vn”>

Trang web s t đ ng làm t i sau 5 giây và

đ a ch đ c khai báo nh trong URL:

http://mim.hus.vn

• Xoá cache:

nhanh khi duy t –Khi có s thay đ i c u trúc trang web => m ng

th xoá cache hay IP cho máy duy t web –Mu n ch đ ng xoá cache => c n khai báo:

Định dạng
Số trang	12
Dung lượng	262,22 KB