Giới thiêu ngôn ngữ HTML - Dùng để thiết kế Web

Thành Ph Hu ố ếHương Th yủ Phú Vang Phú M uậ Hương S ơ Bình Đi nề Hương Văn... BORDER-BOTTOM: #aaa 1px dashed;FONT-FAMILY: verdana, Arial,tahoma;... BORDER-BOTTOM: #aaa 1px dashed; FONT-

Trang 1

HTML (Hypertext Markup Language): Ngôn ng đánh d u siêu văn b nữ ấ ả

Siêu văn b n (Hypertext): là các liên k t đ n các trang web khác.ả ế ế

Đánh d u (Markup): g m m t vài mã đ n gi n đ t o ra văn b n nét đ m ho cấ ồ ộ ơ ả ể ạ ả ậ ặ nghiêng, các hình đ ho chèn thêm vào, cùng v i s xác đ nh các m i liên k t siêu văn b n ồ ạ ớ ự ị ố ế ả

Ngôn ng (Language): g m các t p h p nh các nhóm hai đ n ba ch và các t dùngữ ồ ậ ợ ỏ ế ữ ừ

đ quy đ nh các lo i đ i tể ị ạ ố ượng trên m t Website.ộ

Trang 2

• Xâu ký t n m gi a <TITLE> và </TITLE> không hi n th trên trang Web mà hi n thự ằ ữ ể ị ể ị

t i thanh phía trên c a Browser ạ ủ

• Xâu ký t n m gi a <TITLE> và </TITLE> đự ằ ữ ược đ t trong ph n header khi trang Webặ ầ

được in ra

• Xâu ký t n m gi a <TITLE> và </TITLE> đự ằ ữ ược ghi l i khi b n c p nh t trang Webạ ạ ậ ậnày vào m c các trang Web yêu thích (Favorites).ụ

2.1.4 <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:

M t s các thu c tính c a th ộ ố ộ ủ ẻ <BODY>:

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át 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=,LI

NK=

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

Trang 3

</HTML>

<P>N i dung đo n văn b n</ộ ạ ả P>

chu t lên; vlink (ộ visited link) ch liên k t đã t ngỉ ế ừ

được kích ho t; ạ

Nh v y m t tài li u HTML c b n có c u trúc nh sau:ư ậ ộ ệ ơ ả ấ ư

Th c hành: ự

- H c sinh t o m t trang web đ n gi n b ng NotePad v i c u trúc c b n đã h c:ọ ạ ộ ơ ả ằ ớ ấ ơ ả ọ

• Tiêu đ : Design Simple Websiteề

• N i dung hi n th : ộ ể ị Xin chào! Thi t k web th t là d ! ế ế ậ ễ

• Màu n n trang web: Cyanề

Trang 4

</HTML>

K t qu : ế ả

Trang 5

Đây là đ u đ 1 ầ ề

Đây là đ u đ 2 ầ ềĐây là đ u đ 3 ầ ề Đây là đ u đ 4 ầ ề Đây là đ u đ 5 ầ ề

M i y u t c a danh sách bao g m hai thành ph n: ỗ ế ố ủ ồ ầ

• Tiêu đ đề ược căn l phía trái (ch ra b i th ề ỉ ở ẻ <DT>)

• Ph n gi i nghĩa đầ ả ược căn l th t h n sang phía ph i (ch ra b i th ề ụ ơ ả ỉ ở ẻ <DD>)

Trang 6

</DL>

2.4 Các th đ nh d ng ký t ẻ ị ạ ự

2.4.1 Các th đ nh d ng in ký t ẻ ị ạ ự

Sau đây là các th đẻ ượ ử ục s d ng đ quy đ nh các thu c tính nh in nghiêng, in đ m,ể ị ộ ư ậ

g ch chân cho các ký t , văn b n khi đạ ự ả ược th hi n trên trình duy t.ể ệ ệ

<U> </U> In ch g ch chânữ ạ

<DFN> Đánh d u đo n văn b n gi a hai th này làấ ạ ả ữ ẻ

<BIG> </BIG> In ch l n h n bình thữ ớ ơ ường b ng cách tăngằ

kích thước font hi n th i lên m t Vi c sệ ờ ộ ệ ử

<SMALL> </SMALL> In ch nh h n bình thữ ỏ ơ ường b ng cáchằ

gi m kích thả ước font hi n th i đi m t.ệ ờ ộ

Vi c s d ng các th <ệ ử ụ ẻ SMALL>l ng nhauồ

t o ra hi u ng ch gi m d n Tuy nhiênạ ệ ứ ữ ả ầ

đ i v i m i trình duy t có gi i h n vố ớ ỗ ệ ớ ạ ề kích thước đ i v i m i font ch , vố ớ ỗ ữ ượt quá

gi i h n này, các th <ớ ạ ẻ SMALL> s khôngẽ

có ý nghĩa

<SUP> </SUP> Đ nh d ng ch s trên (SuperScript)ị ạ ỉ ố

<SUB> </SUB> Đ nh d ng ch s dị ạ ỉ ố ưới (SubScript)

<BASEFONT> Đ nh nghĩa kích thị ước font ch đữ ược sử

d ng cho đ n h t văn b n Th này ch cóụ ế ế ả ẻ ỉ

m t tham s size= xác đ nh c ch Thộ ố ị ỡ ữ ẻ

<BASEFONT> không có th k t thúc.ẻ ế

<FONT> </FONT> Ch n ki u ch hi n th Trong th này cóọ ể ữ ể ị ẻ

th đ t hai tham s size= ho c color= xácể ặ ố ặ

đ nh c ch và màu s c đo n văn b n n mị ỡ ữ ắ ạ ả ằ

gi a hai th 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.ố ớ ữ ệ ạ

Ví d : ụ

M t s th đ nh d ng ki u ch và k t qu th hi n trên trình duy t:ộ ố ẻ ị ạ ể ữ ế ả ể ệ ệ

Trang 7

<CENTER>Văn b n s đả ẽ ược căn gi a trang</ữ CENTER>

Trong trình bày trang Web c a mình các b n luôn ph i chú ý đ n vi c căn l các vănủ ạ ả ế ệ ề

b n đ trang Web có đả ể ược m t b c c đ p M t s các th đ nh d ng nh ộ ố ụ ẹ ộ ố ẻ ị ạ ư P,, IMG đ u cóềtham s ố ALIGN cho phép b n căn l các văn b n n m trong ph m vi gi i h n b i c a cácạ ề ả ằ ạ ớ ạ ở ủ

th đó.ẻ

Các giá tr cho tham s ị ố ALIGN:

LEFT Căn l tráiềCENTER Căn gi a trangữJUSTIFY Căn đ u hai bênềRIGHT Căn l ph iề ả

Ngoài ra, chúng ta có th s d ng th ể ử ụ ẻ CENTER đ căn gi a trang m t kh i văn b n ể ữ ộ ố ả

Trang 8

Nh ng ký hi u này đữ ệ ược dùng đ ch các th mà b n không th dùng chúng trongể ỉ ẻ ạ ểHTML B n có th dùng d u ph i h p đ th hi n các ký t đ c bi t.ạ ể ấ ố ợ ể ể ệ ự ặ ệ

2.4.4 Trang trí màu s c trong thi t k website ắ ế ế

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 ng hexaể ộ ị ộ ố ạ(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 16 màuể ị ế ủ ớ ế ỉ ể ỉtrong khi v i giá tr RGB ta có th ch t i 256 màu.ớ ị ể ỉ ớ

Vàng nh tạ

Tr ngắĐenXámNâuTímTím nh tạ

YELLOWLIGHTYELLOWWHITE

BLACKGRAYBROWNMAGENTAVIOLETPINKORANGE

Trang 9

Màu đ ng ph c h iồ ụ ả quân

#000080

#4169E1

#7FFFD4

NAVYROYALBLUEAQUAMARINE

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 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ỉ ị ị ỉ ủ ả ề

BGCOLOR Ch đ nh màu 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ị ộ

Trang 10

Đ t o ra m t siêu văn b n chúng ta s d ng th <ể ạ ộ ả ử ụ ẻ A>.

HREF Đ a ch c a trang Web đị ỉ ủ ược liên k t, là m t URL nào đó.ế ộ

NAME Đ t tên cho v trí đ t th siêu liên k t.ặ ị ặ ẻ ế

TABLEINDEX Th t di chuy n khi n phím Tabứ ự ể ấ

TITLE Văn b n hi n th khi di chu t trên siêu liên k t.ả ể ị ộ ế

TARGET M trang Web đở ược liên k t trong m t c a s m iế ộ ử ổ ớ

(_blank) ho c trong c a s hi n t i (ặ ử ổ ệ ạ _self), trong m tộ frame (tên frame)

2.4.7 K t n i mailto ế ố

N u đ t thu c tính href= c a th <a> giá tr mailto:address@domain thì khi kích ho tế ặ ộ ủ ẻ ị ạ

k t n i s kích ho t ch c năng th đi n t c a trình duy t.ế ố ẽ ạ ứ ư ệ ử ủ ệ

<head><title>Design Simple Website</title></head>

Gõ [<a href="mailto:webmaster@hueic.edu.vn?subject=Test&body=This is a

test">vào đây</a>] đ g i e-mail cho tôi.ể ử

</font>

</body>

Trang 11

ALIGN Căn l (căn trái, căn ph i, căn gi a)ề ả ữ

COLOR Đ t màu cho đặ ường th ngẳ

SIZE Đ dày c a độ ủ ường th ng (pixel)ẳ

WIDTH Chi u dài (pixel ho c % c a b r ng c a s trìnhề ặ ủ ề ộ ử ổ

Liên k t v i file đa phế ớ ương ti n cũng tệ ương t nh liên k t bình thự ư ế ường Tuy v yậ

ph i đ t tên đúng cho file đa phả ặ ương ti n Ph n m r ng c a file ph i cho bi t ki u c a file.ệ ầ ở ộ ủ ả ế ể ủ

KI U Ể PH N MỞ Ầ

R NG Ộ MÔ TẢ Image/GIF gif Vi t t t c a Graphics Interchange Format Khuônế ắ ủ

d ng này xu t hi n khi m i ngạ ấ ệ ọ ười có nhu c uầ trao đ i nh trên nhi u h th ng khác nhau Nóổ ả ề ệ ố

được s d ng trên t t c các h th ng h trử ụ ấ ả ệ ố ỗ ợ giao di n đ ho Đ nh d ng GIF là đ nh d ngệ ồ ạ ị ạ ị ạ chu n cho m i trình duy t WEB Nhẩ ọ ệ ược đi mể

c a nó là ch th hi n đủ ỉ ể ệ ược 256 màu

Trang 11

Trang 12

M r ng c a chu n này là GIF89, đở ộ ủ ẩ ược thêmnhi u ch c năng cho các ng d ng đ c bi t nhề ứ ứ ụ ặ ệ ư làm nh n n trong su t - t c là nh có th n iả ề ố ứ ả ể ổ

b ng cách làm màu n n gi ng v i màu n n c aằ ề ố ớ ề ủ trình duy t.ệ

Image/JPEG jpeg Vi t t t c a Joint Photographic Expert Group Làế ắ ủ

khuôn d ng nh khác nh ng có thêm kh năngạ ả ư ảnén u đi m n i b t c a khuôn d ng này là l uƯ ể ổ ậ ủ ạ ư

tr đữ ược hàng tri u màu và đ nén cao nên kíchệ ộ

thước file nh nh h n và th i gian downloadả ỏ ơ ờnhanh h n Nó là c s cho khuôn d ng MPEG.ơ ơ ở ạ

T t c các trình duy t đ u có kh năng xem nhấ ả ệ ề ả ả JPEG

Image/TIFF tiff Vi t t t c a Tagged Image File Format Đế ắ ủ ượ c

Microsoft thi t k đ quét nh t máy quét cũngế ế ể ả ừ

nh t o các n ph m.ư ạ ấ ẩ

Text/HTML

HTML, htm PostScript eps, ps Đượ ạc t o ra đ hi n th và in các văn b n cóể ể ị ả

ch t lấ ượng cao

Adobe

Acrobat

.pdf Vi t t t c a Portable Document Format Acrobatế ắ ủ

cũng s d ng các siêu liên k t ngay trong vănử ụ ế

b n cũng gi ng nh ả ố ư HTML T phiên b n 2.0,ừ ảcác s n ph m c a Acrobat cho phép liên k t gi aả ẩ ủ ế ữ nhi u văn b n u đi m l n nh t c a nó là khề ả Ư ể ớ ấ ủ ả năng WYSISYG

Video/MPEG mpeg Vi t t t c a Motion Picture Expert Group, là đ nhế ắ ủ ị

d ng dành cho các lo i phim (video) Đây làạ ạkhuôn d ng thông d ng nh t dành cho phim trênạ ụ ấWEB

Video/AVI avi Là khuôn dn g phim do Microsoft đ a ra.ạ ư

Video/Quick

Time .mov Do Apple Computer đ a ra, chu n video nàyư ẩ

được cho là có nhi u u đi m h n MPEG vàề ư ể ơAVI M c dù đã đặ ược tích h p vào nhi u trìnhợ ềduy t nh ng v n ch a ph bi n b ng hai lo iệ ư ẫ ư ổ ế ằ ạ

đ nh d ng trên.ị ạ

Sound/AU au

Sound/MIDI mid Là khuôn d ng dành cho âm nh c đi n t h tạ ạ ệ ử ế

s c thông d ng đứ ụ ược nhi u trình duy t trên cácề ệ

h th ng khác nhau h tr File Midi đệ ố ỗ ợ ượ ổ c t ng

h p s hoá tr c ti p t máy tính.ợ ố ự ế ừ

Sound/RealA

udio

.ram Đ nh d ng audio theo dòng M t b t ti n khi sị ạ ộ ấ ệ ử

d ng các đ nh d ng khác là file âm thanh thụ ị ạ ườ ng

có kích thướ ớc l n - do v y th i gian t i xu ngậ ờ ả ố lâu, Trái l i audio dòng b t đ u ch i ngay khi t iạ ắ ầ ơ ả

được m t ph n file trong khi v n t i v cácộ ầ ẫ ả ề

Trang 13

ph n khác.M c dù file theo đ nh d ng này khôngầ ặ ị ạ

nh h n so v i các đ nh d ng khác song chínhỏ ơ ớ ị ạ

kh năng dòng đã khi n đ nh d ng này phù h pả ế ị ạ ợ

v i kh năng ch i ngay l p t c.ớ ả ơ ậ ứ

VRML vrml Vi t t t c a Virtual Reality Modeling Language.ế ắ ủ

Các file theo đ nh d ng này cũng gi ng nhị ạ ố ư

HTML Tuy nhiên do trình duy t có th hi n thệ ể ể ị

được c a s 3 chi u nên ngử ổ ề ười xem có th c mể ả

nh n đậ ượ ảc c m giác ba chi u.ề

2.5.2 Chèn âm thanh vào Website

Cú pháp:

<BGSOUND

SRC = url LOOP = n

>

- Th này không có th k t thúc tẻ ẻ ế ương ng (</ứ BGSOUND>).

- Đ file nh c l p l i vô h n c n ch đ nh ể ạ ặ ạ ạ ầ ỉ ị LOOP = -1 ho c ặ LOOP = INFINITE.

- Th ẻ BGSOUND ph i đả ược đ t trong ph n m đ u (t c là n m trong c p th ặ ầ ở ầ ứ ằ ặ ẻ HEAD) 2.5.3 Chèn hình nh, đo n video vào Website ả ạ

Đ chèn m t file nh (.jpg, gif, bmp) ho c video (.mpg, avi) vào tài li u HTML, b nể ộ ả ặ ệ ạ

có th s d ng th ể ử ụ ẻ IMG.

Cú pháp:

<IMG ALIGN = TOP/MIDDLE/BOTTOM

ALIGN = TOP/ MIDDLE/

BOTTOM/ LEFT/ RIGHT

Canh đo n văn b n bao quanh nhạ ả ả

Trang 13

Trang 14

ALT = text Ch đ nh văn b n s đỉ ị ả ẽ ược hi n th n u ch cể ị ế ứ

năng show picture c a browser b t t đi hayủ ị ắ

hi n th thay th cho nh trên nh ng trìnhể ị ế ả ữduy t không có kh năng hi n th đ ho ệ ả ể ị ồ ạ Văn b n này còn đả ược g i là nhãn c a nh.ọ ủ ả

SRC = url Đ a ch c a file nh c n chèn vào tài li u.ị ỉ ủ ả ầ ệ

WIDTH/HEIGHT Ch đ nh kích thỉ ị ướ ủ ảc c a nh được hi n th ể ị

HSPACE/VSPACE Ch đ nh kho ng tr ng xung quanh hình nhỉ ị ả ố ả

(tính theo pixel) theo b n phía trên, dố ưới, trái,

ph i.ả

TITLE = title Văn b n s hi n th khi con chu t tr trênả ẽ ể ị ộ ỏ

nhả

DYNSRC = url Đ a ch c a file video.ị ỉ ủ

FILEOPEN/MOUSEOVER Ch đ nh file video s đỉ ị ẽ ược ch i khi tài li uơ ệ

được m hay khi tr con chu t vào nó Có thở ỏ ộ ể

k t h p c hai giá tr này nh ng ph i phânế ợ ả ị ư ảcách chúng b i d u ph y.ở ấ ẩ

LOOP = n/INFINITE Ch đ nh s l n ch i N u LOOP = INFINITEỉ ị ố ầ ơ ế

thì file video s đẽ ược ch i vô h n l n.ơ ạ ầ

Ghi chú:

S d ng th IMG đ đ a m t file video vào Website ta vi t code:ử ụ ẻ ể ư ộ ế

(Đo n mã này ch s d ng v i trình duy t Internet Explore) ạ ỉ ử ụ ớ ệ

Riêng Internet Explorer còn cho phép b n t o nh c n n v i th đ n <bgsound> Dòngạ ạ ạ ề ớ ẻ ơcode s đẽ ược vi t nh sau: ế ư

loop="infinite" cho phép browser ch y b n nh c không ng ng ạ ả ạ ừ

Có r t nhi u d ng audio (*.au, *.wav, *.mid ) và video (*.mpeg, *.avi ) Nh ng có lấ ề ạ ư ẽ

ch có d ng midi (*.mid) là c nh nh t M t b n nh c 5 phút chi m kho ng 30KB trong khiỉ ạ ỡ ỏ ấ ộ ả ạ ế ả

đó 5 phút dướ ại d ng wav lên t i 5MB Ð đ a chúng vào m t trang web, b n c n vi t dòngớ ể ư ộ ạ ầ ế

Trang 15

Trong đó "music.mid" là tên c a file nh c, autostart="true" ch y b n nh c t đ ng,ủ ạ ạ ả ạ ự ộloop="true" t đ ng quay l i đ u b n nh c khi và ch y ti p, n u b n ch mu n b n nh cự ộ ạ ầ ả ạ ạ ế ế ạ ỉ ố ả ạ

ch y m t s l n nh t đ nh l n r i d ng, hãy thay "true" b ng "1", "2" ạ ộ ố ầ ấ ị ầ ồ ừ ằ

Đ nh nghĩa các ô trong dòngị

<TD

BORDERCOLORDARK = color BORDERCOLORLIGHT= color

Trang 15

Trang 16

<caption> <font face="Tahoma" color="#336600" size="4">Danh sách các bài hát yêu thích</font></caption>

<tr bgcolor="#123456"><td align="center"><font face="Verdana" size="2" color="#FFEEEE">Tên bài hát</font></td><td align="center"><font face="Verdana" size="2" color="#FFEEEE">Nh c s </font></td></tr>ạ ỹ

<tr><td align="center" width="50%"> M t cõi đi v </td><tdộ ềalign="center">Tr nh Công S n</td></tr>ị ơ

<tr><td align="center">Đêm đông</font></td><td align="center">Nguy n Vănễ

Trang 18

ACTION Đ a ch s g i d li u t i khi form đị ỉ ẽ ử ữ ệ ớ ược submit (có

th là m t trang ASP ).ể ộ

METHOD Phương th c g i d li u (ứ ử ữ ệ GET/POST)

NAME Tên c a form.ủ

Đ t các đ i tặ ố ượng đi u khi n (nh h p nh p văn b n, ô ki m tra, nút b m ) vàoể ể ư ộ ậ ả ể ấtrang Web

Cú pháp th ẻ INPUT:

<INPUT name=””

ALIGN = LEFT | CENTER | RIGHT

TYPE = BUTTON | CHECKBOX | FILE | IMAGE | PASSWORD

| RADIO | RESET | SUBMIT | TEXT

<td><input type="radio" checked name="R1">Nam

<input type="radio" name="R1">N </td>ữ

Trang 19

<SELECT NAME="tên danh sách" SIZE="chi u cao">ề

<OPTION VALUE=value1 SELECTED> Tên m c ch n th nh tụ ọ ứ ấ

<OPTION VALUE=value2> Tên m c ch n th haiụ ọ ứ

<! Danh sách các m c ch n >ụ ọ

</SELECT>

Trang 19

Trang 20

S d ng thu c tính Style v i cú pháp nh sau:ử ụ ộ ớ ư

Style=”Property1: value1; Property2: value2; …”

Thu c tính Style s độ ẽ ược dùng cho b t kỳ các th HTML nào.ấ ẻ

Ví d : ụ Xem ví d inline styleụ

Mã ngu n: ồ

<html>

<body>

<p style="color: blue; font-family: arial; font-size: 20px"> Dòng văn b n</p>ả

<p style="color: blue; font-family: arial; font-size: 20px">Hello everybody</p>

</body>

</html>

Ghi chú:

- Cách này người ta ít s d ng do đã có th <FONT> đ đ nh d ng cho văn b n.ử ụ ẻ ể ị ạ ả

2.3 CSS nhúng bên trong trang Web

S d ng c p th <STYLE> và </STYLE> đử ụ ặ ẻ ược đ t trong th <HEAD>, gi a c p thặ ẻ ữ ặ ẻ

<STYLE> và </STYLE> là t p h p m t ho c nhi u y u t nh m đ nh d ng cho các thậ ợ ộ ặ ề ế ố ằ ị ạ ẻ HTML

Trang 21

Đ s d ng các y u t bên trong c p th <STYLE> ta s d ng thu c tínhể ử ụ ế ố ặ ẻ ử ụ ộ

class=”tên_y u_t ” bên trong các th HTML có thu c tính class.ế ố ẻ ộ

Ví d : ụ Xem ví d Embleded Styleụ

- M t s trình duy t không h tr CSS thì nó s hi n th n i dung các y u t bên trong c pộ ố ệ ỗ ợ ẽ ể ị ộ ế ố ặ

th <STYLE> và </STYLE> nh là n i dung văn b n bình thẻ ư ộ ả ường Do v y ta nên s d ngậ ử ụ

c p th <! và > đ tránh l i trên, v i c p th <! và > thì trình duy t h tr CSS sặ ẻ ể ỗ ớ ặ ẻ ệ ỗ ợ ẽ

d ch bình thị ường

- M t nhộ ược đi m c a cách này là ch đ nh d ng cho trang Web hi n th i ch không s d ngể ủ ỉ ị ạ ệ ờ ứ ử ụ

được cho các trang khác

2.4 Liên k t đ n file CSS ế ế

M t cách hi u qu đ thêm các đ nh d ng CSS trong trang Web là t o m t file CSSộ ệ ả ể ị ạ ạ ộriêng và tham chi u đ n nó.ế ế

Cách này r t hi u qu b i vì nó có tính k th a và t o ra s th ng nh t trong vi cấ ệ ả ở ế ừ ạ ự ố ấ ệ trang trí cho trang Web

Ta s d ng th LINK đử ụ ẻ ược đ t trong th HEAD đ ch đặ ẻ ể ỉ ường d n đ n file CSS theoẫ ế

cú pháp sau:

Trang 21

Trang 22

<LINK REL=”STYLESHEET” HREF=”URL” type=”text/css”>

Ví d : ụ

File link_style.html

<html>

<head>

<title>Design Simple Website></title>

Trang 23

<span class=”tên_y u_t ”> </span>ế ố

<span id=”tên_y u_t ”> </span>ế ố

<div class=”tên_y u_t ”> </div>ế ố

<div id=”tên_y u_t ”> </div>ế ố

Trang 23

Trang 24

Các thu c tính nh Border-Bottom, Border-Left, Border-Right, Border-Top đ u có th cộ ư ề ự

hi n tệ ương t ự

2.5.2.3 Thu c tính Border-width ộ

Cú pháp : Border-width : <giá tr >ị

Ch c năng: ứ Quy đ nh đ r ng đị ộ ộ ường vi nề

Các giá tr có th : ị ể thin | medium | thick | <đ dài> ộ

Áp d ng v i : ụ ớ T t c các ph n tấ ả ầ ử

2.5.2.4 Thu c tính height ộ

Cú pháp : Height : <giá tr >ị

Ch c năng ứ Quy đ nh chi u cao cho các kh i đị ề ố ược ch đ nhỉ ị

Các giá tr có th : ị ể <đ dài> | auto ộ

Ch c năng ứ Quy đ nh l c a kh i so v i trang gi y.ị ề ủ ố ớ ấ

Các giá tr có th : ị ể <đ dài > | <t l ph n trăm> | auto ộ ỉ ệ ầ

Áp d ng v i : ụ ớ t t c các ph n tấ ả ầ ử

Ví d : ụ BODY { margin: 0 }

P { margin: 2em 4em }

L trên (Top) và dề ưới (Bottom)= 2em,

L trái (Left) và l ph i (Right) = 4em.ề ề ảMargin : 0 nghĩa là căn l trái, ph i, trên, dề ả ướ ềi đ u =

0 Các thu c tính nh Margin-Top, Margin-left, Margin-Bottom, Margin-Right đ u th cộ ư ề ự

Các giá tr có th : ị ể <đ dài > | <t l ph n trăm> ộ ỉ ệ ầ

Padding là t p h p c a t t c các padding (padding-right, padding-ậ ợ ủ ấ ảleft, ) vì th giá tr c a nó có tác d ng t i toàn b ế ị ủ ụ ớ ộ

Ví d : ụ Table { padding : 5px }: Kho ng cách gi a ch và đả ữ ữ ường vi n là 5pxề

Các thu c tính padding-Left, Padding-Right, Padding-Bottom, Padding-Top đ u th cộ ề ự

hi n tệ ương t trên.ự

2.5.2.7 Thu c tính Width ộ

Cú pháp : Width : <giá tr >ị

Trang 25

Ch c năng: ứ Quy đ nh đ r ng c a các kh i, b ng ho c các c t trong b ngị ộ ộ ủ ố ả ặ ộ ả

Các giá tr có th : ị ể <đ dài> | <t l ph n trăm> | auto ộ ỉ ệ ầ

Ch c năng ứ Quy đ nh n n c a các ph n t nh body, b ng, …đị ề ủ ầ ử ư ả ược áp d ngụ

Các giá tr có th : ị ể <background-color> | <background-image> | <background-repeat> |

Ví d : ụ body {background: #ffffff url(“/ANH/banner.gif”) ; margin: 0}

TABLE { background: red url(“/ANH/Left-Corner.gif”) no-repeat bottom }

Trang 26

 Font-weight

Cú pháp font : <giá tr >ị

Ch c n ứ ăng Thi t l p các thu c tính cho font ch nh tên font, kích thế ậ ộ ữ ư ước font,…

Các giá tr có th : ị ể <font-family> | <font-size> | <font-variant> | <font-weight> | <font-style>

| <line-height>

 1 S Font thông d ng (cài s n trong Windows nên ko b l i font) :ố ụ ẵ ị ỗArial, tahoma, verdana, Times new roman

Ví d : ụ P { font : tahoma, 12pt, normal, bold }

Cú pháp font-family : <tên font>

Ch c n ứ ăng Thi t l p danh sách font cho kh i ch n ho c trang Web, nên ch n cácế ậ ố ọ ặ ọ

font thông d ng đụ ược cài đ t s n nh Arial, Veranda, Tahoma, Timesặ ẵ ưnew roman

Các giá tr có th ị ể <tên font>

Áp d ng v i ụ ớ T t c các ph n t ấ ả ầ ử

Ví d ụ Table, tr, td { font-family : arial, tahoma, verdana ; font-size : 13}

Cú pháp : font-size : <kíck c tuy t đ i> | <kíck c tỡ ệ ố ỡ ương đ i> | <đ dài> | <t lố ộ ỉ ệ

Cú pháp : font-style : <giá tr >ị

Ch c n ứ ăng Thi t l p ki u fontế ậ ể

Các giá tr có th : ị ể normal | ilatic | oblique

Trang 27

 Ki u ể SMALL-CAPS l n h n ch thớ ơ ữ ường 1 chút và nh h n ch vi t hoa,ỏ ơ ữ ế

ta hãy th so sánh : ử SMALL-CAPS SMALL-CAPS

Các giá tr có th ị ể normal | SMALL-CAPS

Ch c năng ứ Quy đ nh chi u cao vùng ch a đo n văn b n ị ề ứ ạ ả

Các giá tr có th ị ể normal | <number> | <t l ph n trăm> | <đ dài> ỉ ệ ầ ộ

Các giá tr có th : ị ể left | right | center | justify

- left: Canh trái

- Right: Canh ph iả

Trang 27

Trang 28

Ch c n ứ ăng Thi t l p các hi u ng lên văn b nế ậ ệ ứ ả

Các giá tr có th : ị ể none | underline | overline | line-through | blink

Ví d : ụ a {corlor: #ffffff ; text-decoration: none }

a :visited {corlor: red ; text-decoration: underline }

Cú pháp : vertical-align : <giá tr >ị

Ch c n ứ ăng: Canh văn b n theo chi u d cả ề ọ

<title>Design Simple Website</title>

</head>

<body>

Trang 29

<td valign="top" class="noidungtin> Đây là Website gi i thi u m tớ ệ ộ

s đ a phố ị ương trên đ a bàn t nh th a thiên hu <p>T nh th a thiên hu bao g mị ỉ ừ ế ỉ ừ ế ồ

m t s các đ a phộ ố ị ương sau:</p>

<ol>

Trang 29

Trang 30

<li>Thành Ph Hu </li>ố ế

<li>Hương Th y</li>ủ

<li>Phú M u</li>ậ

<li>Hương S </li>ơ

<li>Bình Đi n</li>ề

<li>Hương Văn</li>

Trang 31

BORDER-BOTTOM: #aaa 1px dashed;

FONT-FAMILY: verdana, Arial,tahoma;

Trang 32

BORDER-BOTTOM: #aaa 1px dashed;

FONT-FAMILY: verdana, Arial,tahoma;

TEXT-DECORATION: none; CURSOR: hand;

Trang 34

2.2 Cách th c nhúng JavaScript vào file HTML ứ

Chúng ta có th nhúng JavaScript vào m t file HTML theo m t trong các cách sau đây:ể ộ ộ

 S d ng các câu l nh và các hàm trong c p th <SCRIPT>ử ụ ệ ặ ẻ

 S d ng các file ngu n JavaScriptử ụ ồ

 S d ng m t bi u th c JavaScript làm giá tr c a m t thu c tính HTMLử ụ ộ ể ứ ị ủ ộ ộ

 S d ng th s ki n (event handlers) trong m t th HTML nào đóử ụ ẻ ự ệ ộ ẻ

Trong đó, s d ng c p th <SCRIPT> </SCRIPT> và nhúng m t file ngu nử ụ ặ ẻ ộ ồ JavaScript là đượ ử ục s d ng nhi u h n c ề ơ ả

2.3 S d ng th SCRIPT ử ụ ẻ

Script được đ a vào file HTML b ng cách s d ng c p thư ằ ử ụ ặ ẻ

<SCRIPT> và </SCRIPT> Các th <SCRIPT> có th xu t hi nẻ ể ấ ệ

trong ph n <HEAD> hay <BODY> c a file HTML N u đ t trongầ ủ ế ặ

ph n <HEAD>, nó s đầ ẽ ượ ảc t i và s n sàng trẵ ước khi ph n còn l iầ ạ

c a văn b n đủ ả ượ ảc t i

Thu c tính duy nh t độ ấ ược đ nh nghĩa hi n th i cho thị ệ ờ ẻ

<SCRIPT> là “LANGUAGE=“ dùng đ xác đ nh ngôn ng scriptể ị ữ

được s d ng Có hai giá tr đử ụ ị ược đ nh nghĩa là "JavaScript" vàị

"VBScript" V i chớ ương trình vi t b ng JavaScript b n s d ng cúế ằ ạ ử ụ

pháp sau :

<SCRIPT LANGUAGE=”JavaScript” type=”text/javascript”>

//Vi t mã JavaScript đâyế ở

…

</SCRIPT>

2.4 S d ng m t file ngu n JavaScript ử ụ ộ ồ

Thu c tính ộ SRC c a th <ủ ẻ SCRIPT> cho phép b n ch rõ file ngu n JavaScript đạ ỉ ồ ượ ử ục s d ng

Trang 35

- Các file JavaScript bên ngoài không được ch a b t kỳ th HTML nào, chúng ch đứ ấ ẻ ỉ ược ch aứ các câu l nh JavaScript và các đ nh nghĩa hàm.ệ ị

2.5 Hi n th m t dòng Text trên Website ể ị ộ

Đ i tố ượng document trong JavaScript được thi t k s n hai cách th c đ xu t m tế ế ẵ ứ ể ấ ộ dòng text ra màn hình c a client: ủ write() và writeln() Cách g i m t cách th c c a m t đ iọ ộ ứ ủ ộ ố

Thông thường, hàm alert() đượ ử ục s d ng trong các trường h p:ợ

 Thông tin đ a vào form không h p l ư ợ ệ

 K t qu sau khi tính toán không h p l ế ả ợ ệ

charset=utf-8">

Trang 35

Trang 36

<table border="1" width="100%" id="table1"

style="border-collapse: collapse" bordercolor="#0000FF">

<input type="submit" onclick="kiemtradulieu();"

value="Update" name="B1"><input type="reset" value="Reset" name="B2"></p>

<TITLE>Design Simple Website</TITLE>

var name=window.prompt(“Hello! What’s your name ?”,””);document.write(“Hello ” + name + “ ! I hope you like

JavaScript ”);

</SCRIPT>

</HEAD>

Trang 37

var ans=window.confirm("B n c n ti n không?");ạ ầ ề

if(ans){

document.write("Tôi cho b n 2$");ạ}

Ph m vi c a bi n có th là m t trong hai ki u sau: ạ ủ ế ể ộ ể

 Bi n toàn c c: ế ụ Có th để ược truy c p t b t kỳ đâu trong ng d ng.ậ ừ ấ ứ ụ

được khai báo nh sau :ư

x = 0;

 Bi n c c b : ế ụ ộ Ch đỉ ược truy c p trong ph m vi chậ ạ ương trình mà nó khai báo Bi n c cế ụ

b độ ược khai báo trong m t hàm v i t khoá ộ ớ ừ var nh sau:ư

var x = 0;

Bi n toàn c c có th s d ng t khoá ế ụ ể ử ụ ừ var, tuy nhiên đi u này không th c s c n thi t.ề ự ự ầ ế

2.7.2 Ki u d li u ể ữ ệ

Khác v i C++ hay Java, JavaScript là ngôn ng có tính đ nh ki u th p Đi u này có nghĩaớ ữ ị ể ấ ề

là không ph i ch ra ki u d li u khi khai báo bi n Ki u d li u đả ỉ ể ữ ệ ế ể ữ ệ ượ ự ộc t đ ng chuy n thànhể

ki u phù h p khi c n thi t.ể ợ ầ ế

Ví d : ụ

Trang 37

Trang 38

 S h c ố ọ : Nh m đ lằ ể ượng giá giá tr s Ví d ị ố ụ (3+4) được đánh giá b ng ằ 7.

 Chu i ỗ : Nh m đ đánh giá chu i Ví d ằ ể ỗ ụ "The dog barked" + barktone + "!" là The dog

barked ferociously!.

 Logic: Nh m đánh giá giá tr logic Ví d ằ ị ụ temp>32 có th nh n giá tr sai JavaScriptể ậ ịcũng h tr bi u th c đi u ki n, cú pháp nh sau:ỗ ợ ể ứ ề ệ ư

(condition) ? valTrue : valFalse

N u đi u ki n ế ề ệ condition được đánh giá là đúng, bi u th c nh n giá tr ể ứ ậ ị valTrue, ngượ c

l i nh n giá tr ạ ậ ị valFalse Ví d :ụ

state = (tuoi>60) ? "già" : "tr ";ẻ

Trong ví d này bi n state đụ ế ược gán giá tr ị "già" n u giá tr c a bi n ế ị ủ ế tuoi l n h n 32;ớ ơtrong trường h p ngợ ượ ạc l i nó nh n giá tr ậ ị "tr " ẻ

Trang 39

== Tr l i giá tr đúng n u toán h ng bên trái b ng toán h ng bên ph iả ạ ị ế ạ ằ ạ ả

!= Tr l i giá tr đúng n u toán h ng bên trái khác toán h ng bên ph iả ạ ị ế ạ ạ ả

> Tr l i giá tr đúng n u toán h ng bên trái l n h n toán h ng bên ph iả ạ ị ế ạ ớ ơ ạ ả

>= Tr l i giá tr đúng n u toán h ng bên trái l n h n ho c b ng toán h ng bên ph iả ạ ị ế ạ ớ ơ ặ ằ ạ ả

< Tr l i giá tr đúng n u toán h ng bên trái nh h n toán h ng bên ph iả ạ ị ế ạ ỏ ơ ạ ả

<= Tr l i giá tr đúng n u toán h ng bên trái nh h n ho c b ng toán h ng bênả ạ ị ế ạ ỏ ơ ặ ằ ạ

ph iả

2.8.2.3 S h c ố ọ

Bên c nh các toán t c ng (+), tr (-), nhân (*), chia (/) thông thạ ử ộ ừ ường, JavaScript còn

h tr các toán t sau đây: x=4; y=5; z=++x – y ; x=5; z=0; y=4ỗ ợ ử

var1% var2 Toán t ph n d , tr l i ph n d khi chia var1 cho var2ử ầ ư ả ạ ầ ư

- Toán t ph đ nh, có giá tr ph đ nh toán h ngử ủ ị ị ủ ị ạ

var++ Toán t này tăng var lên 1 (có th bi u di n là ++var)ử ể ể ễ

var Toán t này gi m var đi 1 (có th bi u di n là var)ử ả ể ể ễ

Chú ý

- N u b n gán giá tr c a toán t ++ hay vào m t bi n, nh y= x++, có th có các k tế ạ ị ủ ử ộ ế ư ể ế

qu khác nhau ph thu c vào v trí xu t hi n trả ụ ộ ị ấ ệ ước hay sau c a ++ hay v i tên bi nủ ớ ế (là x trong trường h p này).ợ

- N u ++ đ ng trế ứ ước x, x s đẽ ược tăng ho c gi m trặ ả ước khi giá tr x đị ược gán cho y

N u ++ hay đ ng sau x, giá tr c a x đế ứ ị ủ ược gán cho y trước khi nó được tăng hay

gi m.ả

2.8.2.4 Chu i ỗ

Khi đượ ử ục s d ng v i chu i, toán t ớ ỗ ử+ được coi là k t h p hai chu i, ế ợ ỗ

Ví dụ : "abc" + "xyz" được "abcxyz"

2.8.2.5 Logic

JavaScript h tr các toán t logic sau đây:ỗ ợ ử

expr1 && expr2 Là toán t logic AND, tr l i giá tr đúng n u c expr1 và expr2 cùngử ả ạ ị ế ả

Trang 40

2.8.2.6 Bitwise

V i các toán t thao tác trên bit, đ u tiên giá tr đớ ử ầ ị ược chuy n dể ướ ại d ng s nguyên 32ốbit, sau đó l n lầ ượt th c hi n các phép toán trên t ng bit.ự ệ ừ

& Toán t bitwise AND, tr l i giá tr 1 n u c hai bit cùng là 1.ử ả ạ ị ế ả

| Toán t bitwise OR, tr l i giá tr 1 n u m t trong hai bit là 1.ử ả ạ ị ế ộ

^ Toán t bitwise XOR, tr l i giá tr 1 n u hai bit có giá tr khác nhauử ả ạ ị ế ị

Ngoài ra còn có m t s toán t d ch chuy n bitwise Giá tr độ ố ử ị ể ị ược chuy n thành sể ố nguyên 32 bit trước khi d ch chuy n Sau khi d ch chuy n, giá tr l i đị ể ị ể ị ạ ược chuy n thành ki uể ể

c a toán h ng bên trái Sau đây là các toán t d ch chuy n:ủ ạ ử ị ể

<< Toán t d ch trái D ch chuy n toán h ng trái sang trái m t s lử ị ị ể ạ ộ ố ượng bit b ngằ

toán h ng ph i Các bit b chuy n sang trái b m t và 0 thay vào phía bên ph i.ạ ả ị ể ị ấ ả

Ví d : 4<<2 tr thành 16 (s nh phân 100 tr thành s nh phân 10000)ụ ở ố ị ở ố ị

>> Toán t d ch ph i D ch chuy n toán h ng trái sang ph i m t s lử ị ả ị ể ạ ả ộ ố ượng bit b ngằ

toán h ng ph i Các bit b chuy n sang ph i b m t và d u c a toán h ng bênạ ả ị ể ả ị ấ ấ ủ ạtrái được gi nguyên Ví d : 16>>2 tr thành 4 (s nh phân 10000 tr thành sữ ụ ở ố ị ở ố

nh phân 100)ị

>>> Toán t d ch ph i có chèn 0 D ch chuy n toán h ng trái sang ph i m t sử ị ả ị ể ạ ả ộ ố

lượng bit b ng toán h ng ph i Bit d u đằ ạ ả ấ ược d ch chuy n t trái (gi ng >>).ị ể ừ ố

Nh ng bit đữ ược d ch sang ph i b xoá đi Ví d : -8>>>2 tr thành 1073741822ị ả ị ụ ở(b i các bit d u đã tr thành m t ph n c a s ) T t nhiên v i s dở ấ ở ộ ầ ủ ố ấ ớ ố ương k tế

qu c a toán t >> và >>> là gi ng nhau.ả ủ ử ố

Có m t s toán t d ch chuy n bitwise rút g n:ộ ố ử ị ể ọ

Ki u bitwise thông th ể ườ ng Ki u bitwise rút g n ể ọ

//Các câu l nh v i đi u ki n đúng ệ ớ ề ệ }

else {

//Các câu l nh v i đi u ki n sai ệ ớ ề ệ }

Ví d : ụ

Định dạng
Số trang	101
Dung lượng	734,9 KB

Giới thiêu ngôn ngữ HTML - Dùng để thiết kế Web

Th uc tính color và Background ộ

Cài đt ASP trên máy tín hặ