BÀI GIẢNG MÔN THI THIẾT KẾ WEB_1 ppt

BàiGiảngMônThiếtKếWeb

  Phần1:NgônNgữThiếtKếWebHTML



Biênsoạn:DươngThànhPhết  Trang1
Chương01
TỔNGQUANVỀTHIẾTKẾWEBSITE

Cáckháiniệm


Soạnthảotrangweb


CácthẻcủatậptinHTML


Làmtươivàxemmãnguồn

I.CÁCKHÁINIỆM
1.KháiniệmWebTĩnh,Webđộng
 WEBTĨNH:ĐượcxâydựngbằngcácngônngữHTML,DHTMLdùngđểthiếtkếcác
trangwebcónộidungítcầnthayđổivàcậpnhật.Thíchhợpvớicánhân,tổchức,
doanhnghiệpvừavànhỏmớilàmquenvớimôitrườngInternet.
o Ưuđiểm:
- Thiếtkếđồhoạđẹp:Trìnhbàyấntượngvìvềphầnmỹthuậtchúngtacó
thểhoàntoàntựdotrìnhbàycácýtưởngtrêntoàndiệntíchtrang.
- Tốcđộtruycậpnhanhvìkhôngmấtthờigiantrongviệctruyvấncơsởdữ
liệunhưcáctrangwebđộng.

- Chiphíđầutưthấp:Chiphíxâydựngwebsitetĩnhthấpvìkhôngphảixây
dựngcáccơsởdữliệu,lậptrìnhvàchiphíchoviệcthuêHosting...
o Nhượcđiểmcơbản:
- Khókhăntrongviệcthayđổivàcậpnhậtthôngtin:Muốnthayđổivàcập
nhật nội dung thông tin phải biết về ngôn ngữ html, sử dụng được các
chươngtrìnhthiếtkếđồhoạ,thiếtkếweb,cậpnhậtfilelênserver.
- Thôngtinkhôngcótínhlinhhoạt:Donộidungđượcthiếtkếcốđịnhnênkhi
nhucầuvềthôngtintăngcaothìsẽkhôngđápứngđược.
- Khó tích hợp, nâng cấp, mở rộng: Khi muốn mở rộng, nâng cấp một
websitetĩnhhầunhưlàphảilàmmớilạiwebsite.
 Webđộng:Webđộnglàthuậtngữđượcdùngđểchỉnhữngwebsitecócơsởdữ
liệuvàđượchỗtrợbởicácphầnmềmpháttriểnweb.
o Vớiwebđộng,thôngtinhiểnthịđượcgọiratừ1cơsởdữliệukhingườidùng
truyvấntớimộttrangweb.Chẳnghạnứngdụngthươngmạiđiệntử(mộtcửa
hàngtrựctuyến)trưngbàycataloguesảnphẩmtrênwebsitehaytheodõikho
hàng,khimộtmặthàngđượcgiao,ngaylậptứcnhữngtrangcóliênquanđến
sảnphẩmđóphảnánhsựthayđổinày.
o Webđộngthườngđượcpháttriểnbằngcácngônngữlậptrìnhtiêntiếnnhư
PHP,ASP,ASP.NET,Java,CGI,Perl,vàsửdụngcáccơsởdữliệuquanhệ
mạnhnhưAccess,MySQL,MSSQL,Oracle…
o Thôngtintrênwebđộngluônmớivìnódễdàngđượcthườngxuyêncậpnhật
thôngquaviệcsửdụngcáccôngcụcậpnhậtcủacácphầnmềmquảntrịweb.
o Vìvậywebsiteđượchỗtrợbởicơsởdữliệulàphươngtiệntraođổithôngtin
nhanh nhất với người dùng Internet. Điều dễ nhận thấy là những website
thườngxuyênđượccậpnhậtsẽthuhútnhiềukháchhàngtớithămhơn.
o TấtcảcácwebsiteThươngmạiđiệntử,cácmạngthôngtinlớn,cácwebsite
củacáctổchức,doanhnghiệphoạtđộngchuyênnghiệptrênNetđềusửdụng
côngnghệwebđộng.Cóthểnóiwebđộnglàwebsitecủagiớichuyênnghiệp
hoạtđộngtrênmôitrườngInternet.
This is trial version

www.adultpdf.com
BàiGiảngMônThiếtKếWeb

  Phần1:NgônNgữThiếtKếWebHTML



Biênsoạn:DươngThànhPhết  Trang2
2.MạngInternet:
Mạngmáytínhtoàncầu–Hệthốngmạngcủacácmạng.Tiềnthânbanđầulàmạng
ARPANET(TổchứcAdvancedResearchProjectsAgency)củaMỹsánglập1969.Phụcvụ
traođổidữliệugiữacáctrườngđạihọc&Bộquốcphòng.
3.CácdịchvụcơbảntrênInternet
• WWW-WoldWideWeb:Dịchvụtraođổi,tìmkiếmtruycậpthôngtintrênmạngtheo
giaothứcHTTP.ĐượcsửdụngthôngquatrìnhduyệtWeb
• Email – Eletronic Mail-Thư điện tử: Dịch vụ trao đổi các thông điệp cho nhau
SMTP(Simple Mail Tranfer Protocol) Pop3(Post office protocol 3) được quản lý bởi
cácMailservernhư:
,,
• FTP–FileTransferProtocol–Truyềntảitậptin:Dịchvụtraođổitậptingiữacác
máytrênInternetthườngđượcdùngđểDownload&Uploadcáctrangwebtừngười
thiết kế đến các máy chủ thông qua các chương trình FTP như FTP Explorer,
FlashFXP.
• Chat–Tángẫu:Dịchvụchophépngườidùngtraođổitrựctuyếnvớinhauquamạng
internetbằngvănbản,âmthanh,hìnhảnhNhư:AOL,Yahoomessenger
4.HTTP-HyperTextTranferProtocol:GiaothứcdùngđểgiaotiếpvớicáctrangWeb.5.
HTML-HyperTextMakeupLanguage:Ngônngữđánhdấusiêuvănbảndùngđểthiếtkế
trangWeb.
6.WebPage-TrangWeb:LàmộttậptinvănbảnsoạnthảotheongônngữHTMLcóphần
mởrộnglàHTMLhoặcHTM.

7.WebSite:ChuyênkhuWebtậphợpcáctrangwebthuộc1chủthể.
8.HomePage:Trangđầutiên-Trangchủcủa1Website(Index.htm,Default.htm...)
9.WebServer:Máychủweb-Máytínhcấuhìnhmạnh,lưutrữcáctrangWebkếtnốithường
xuyênvớimạngInternetchophépcácmáykháctruycậpthôngtin.
10.Tênmiền-DomainName-WebServerName:ĐểphânbiệtmỗiWebServercómộtđịa
chỉIPvàđượcánhxạbởi1tên(VD:www.vietnamnet.vn).Đượcxemnhưtêngiaodịchcủa
côngty,tổchứctrênInternet.Baogồmmãquốcgianhư:ViệtNam:.VN,Anh:.UK,Mỹ:.US,
Nhật:.JP )và1sốlĩnhvực.
.Com:Thươngmại
.Edu:Tổchứcgiáodục
.Net:Cácmạngthôngtin
.Info:Cácmạngthôngtin
.Int:Tổchứcquốctế
.Org:Cáctổchứckhác
.Gov:Tổchứcchínhphủ
.Mil:Tổchứcquânsự
Cóthểkếthợplĩnhvựcvớimãquốcgianhưwww.tuoitre.com.vn
.Đểsởhữu1tên
miềnphảitrảchiphíhàngnămthôngquacáccôngtyủyquyềnbántênmiền.
11.Hosting:Khihoàntấtwebsitephảiđượcghilưuvào1webservernàođóthìmớitruy
cậpđượcthôngthườnglàcácservercủaISP(NhàcungcấpdịchvụInternethayđơnvị
chuyêndụng).Tùytheodunglượng,băngthôngvàmộtsốhỗtrợmàchiphíkhácnhau.
12. URL-Uniform Resource Location: Địa chỉ truy cập của trangWeb - 1 tập tin trong
Website
http://Webservername/……/File.html
Trangchủmặcđịnhkhôngcầnkhaibáokhitruycập
VD:Tứclà: />This is trial version
www.adultpdf.com
BàiGiảngMônThiếtKếWeb  Phần1:NgônNgữThiếtKếWebHTML


Biênso
ạn:DươngThànhPhết  Trang3
13.Browser:TrìnhduyệtWebdùngđểđọcvàhiểnthịcáctrangWeb.Phổbiếnhiệnnaylà:
InternetExplorer,Netscape,FireFox.
II.SOẠNTHẢOTRANGWEB
1. Chương trình soạn thảo:Trang web là 1 tập tin văn bản không định dạng, chứa các
thẻ(Tag).ViếtbằngmãnguồnHTMLtrênchươngtrìnhsoạnthảovănbảnkhôngđịnhdạng
như:NotePad.
Khởiđộng:Start/Program/Accessories/NotePad
Ghichú:Nếusửdụngchữcódấu,thìphải
• ThiếtlậpbảngmãUnicodechotrìnhgõVietKey,Unikey,
• ChọnFontUnicodetrongtrìnhsoạnthảo(Format/FontArial,Tahoma,...)

2.Đặttên,Lưu&Mởtậptin:Tậptinlưutrữcóphầnmởrộnglà:.htmhoặc.html
a.Lưutậptin:Tạicửasổsoạnthảo:File/SaveFilename:Tên.html(VD:VD01.html)
Saveastype:AllFilesEncoding:UTF-8(Nếunộidungcódấu)Save

b.Lưulạivớitênkhác:TạicửasổsoạnthảoFile/SaveAs
c.Mởtậptinđãsoạnthảo:Tạicửasổsoạnthảo:File/Open



Chọntậptincầnmở




Open


3.XemtrangWebsaukhisoạnthảo:Cách1:MởthưmụcđãlưutrữDoubleClicktập
tin.htm
Cách2:KhởiđộngtrìnhduyệtFile/OpenChọnBrowserđểtìmtậptincầnmởOk


Kếtquảhiệnthị
This is trial version
www.adultpdf.com
BàiGiảngMônThiếtKếWeb  Phần1:NgônNgữThiếtKếWebHTML


Biênso
ạn:DươngThànhPhết  Trang4

III.CÁCTHẺCỦATẬPTINHTML
1. KháiNiệm:
TậptinHTMLlà1vănbảnchứacácthẻ(Tag)-đểtạocácthànhphầncủatàiliệu.
CấuTrúcTổngQuátCủaThẻ:<Tênthẻ[Thuộctính]>Thànhphầnchịutácđộng</Tênthẻ>

Têncủathẻđặttrongcặpngoặcnhọn:<...>Cóhoặckhôngcócácthuộctính
Vídụ1: <B>ChàoCácBạn</B>Nộidungsẽinđậm
Vídụ: <FontSize=“4”>Chúccácbạnhọctốt</Font>Nộidungchữcócỡ
4Ghichú:Chophépcácthẻlồngnhau,Choviếtcácthẻtrêncùng1dònghoặcnhiều
dòng.Nênviếtcócấutrúc
2.CấuTrúcTổngQuátCủaTậpTinHTML:
<HTML><HEAD>
<TITLE>Nộidungtiêuđề</TITLE>
</HEAD>
<BODY>
Phầndữliệucủatrangweb

</BODY>
</HTML>
<HTML>...</HTML>:BắtđầuvàkếtthúctậptinHTML
<HEAD>...</HEAD>:Phầnđầutrangweb
<TITLE>Nộidungtiêuđề</TITLE>:Hiểnthịnộidungtrênthanhtiêuđề
<BODY>Nộidungtrêntrang</BODY>:Hiểnthịnộidungtrêntrang.
3.VíDụMinhHọa
Tạotậptinvớinộidungnhưsau


<HTML>
 <HEAD> 
  <TITLE>GI
ỚITHIỆU</TITLE>
 </HEAD>
 <BODY>
  Chàom
ừngcácbạnđếnvớiHTML
 </BODY>
</HTML>
Thẻmở
Thẻđóng
This is trial version
www.adultpdf.com
BàiGiảngMônThiếtKếWeb  Phần1:NgônNgữThiếtKếWebHTML


Biênso
ạn:DươngThànhPhết  Trang5
4.VấnĐềNgắtDòng

 Tạotậptinvớinộidungnhưsau:


Khôngxuốngdòngnhưsoạnthảomàchỉtựmàrớtdòngtùytheokíchthướccửasổ
trìnhduyệt.
• Đểngắtdòngtạođoạnmới,tạodòngtrống:Đặtvănbảntrongcặpthẻ<P> </P>
• Đểngắtdòngkhôngtạođoạnmới:Chènthẻ<BR>tạivịtrímuốnngắtdòng
• Đểgiữcácphầntửtrêncùng1dòng:Đặtvănbảntrongcặpthẻ<Nobr> </Nobr>
Vănbảnsẽbịchekhuấtkhichiềurộngcửasổtrìnhduyệtkhôngđủvàsẽhiệnthanh
cuộnngang.
VD:Tạotậptinvớinộidungnhưsau


<HTML>

<HEAD>
<TITLE> > BAI THO CO HAI MO </TITLE>
</HEAD>
<BODY>
CÔ HÁI MƠ
Thơ thẩn đường chiều một khách thơ
Say nhìn xa rặng núi xanh lơ
Khí trời lặng lẽ và trong trẻo
Thấp thoang rừng mơ, cô hái mơ
</BODY>
</HTML>
<HTML>

<HEAD><TITLE> > BÀI THƠ CÔ HÁI MƠ
</TITLE></HEAD>

<BODY>
CÔ HÁI MƠ
<NOBR>
Thơ thẩn đường chiều một khách thơ<BR>
Say nhìn xa rặng núi xanh lơ<BR>
Khí trời lặng lẽ và trong trẻo<BR>
Thấp thoáng rừng mơ, cô hái mơ
</NOBR>
</BODY>
</HTML>
This is trial version
www.adultpdf.com
BàiGiảngMônThiếtKếWeb  Phần1:NgônNgữThiếtKếWebHTML


Biênso
ạn:DươngThànhPhết  Trang6

5.TạoChúThích
Đặtcâughichúvàocặpthẻ<! Câuchúthích >
Nộidungcâuchúthíchkhônghiểnthịtrêntrìnhduyệt
IV.LÀMTƯƠITRANGWEB–XEMMÃNGUỒN
1.LàmTươiNộiDung
Khiđanghiệnthịmộttrangwebtrêntrìnhduyệtcóthểxemvàđiềuchỉnhnộidung
mãnguồntừtrìnhsoạnthảo.Khiđãlưulạinộidungđiềuchỉnh,từtrìnhduyệttacóthểxem
lạikếtquảtheonộidungmới-Làmtươi:ClickbiểutượngRefesh(HoặcF5)
2.XemMãNguồn:
TừtrìnhduyệtcóthểxemmãnguồntrangWeb:ClickMenuView/Source
This is trial version
www.adultpdf.com

BàiGiảngMônThiếtKếWeb  Phần1:NgônNgữThiếtKếWebHTML


Biênso
ạn:DươngThànhPhết  Trang7
Chương02
CÁCTHẺĐỊNHDẠNGVĂNBẢN
o
Địnhdạngkítự,Địnhdạngđoạn

o
Sửdụngmàu

o
Chènđườngkẽngangvàkýtựđặcbiệt

o
Hiệuứngchuyểnđộngchữ

o
Vănbảndanhsach

I.ĐịnhDạngKýTư
1.ĐịnhdạngKiểudáng-Style
 <B>Nộidungvănbản</B> :

Nộidungvănbảnđượcinđậm
 <I>Nộidungvănbản</I> :

Nộidungvănbảnđượcinnghiêng

 <U>Nộidungvănbản</U> :

Nộidungvănbảnđượcgạchdưới(chân)
 <S>Nộidungvănbản</S>:

Nộidungvănbảnđượcgạchngang
2.ThayđổiFont,Size
 <FONTFACE=“FontName1,FontName2…”>Nộidungvănbản</FONT>
XácđịnhFontchoNộidungvănbản,NếumáytruycậpkhôngcóFontName1sẽ
lấyFontName2...sẽlấyFontmặcđịnhcủatrìnhduyệt.
 <BASEFONTSIZE=“n”>
Xácđịnhcỡchữchocảtàiliệugiátrịn:Từ1đến7(8,10,12,14,16,24,36)mặc
địnhlà3.
 <FONTSIZE=“n”>Nộidungvănbản</FONT>


Xácđịnhcỡchữchonộidungvănbản
VD:Tạotậptinvớinộidungnhưsau


<HTML>
<HEAD> <TITLE>BAI THO CO HAI MO
</TITLE>
</HEAD>
<BODY>
<P><Font size=4><B>CÔ HÁI MƠ</B></Font></P>
<NOBR><I>
Thơ thẩn đường chiều một khách thơ<BR>
Say nhìn xa rặng núi xanh lơ </I><BR>
<B><i>

Khí trời lặng lẽ và trong trẻo<BR>
Thấp thoáng rừng mơ, cô hái mơ</B></I>
</NOBR>
</BODY>
</HTML>

This is trial version
www.adultpdf.com
BàiGiảngMônThiếtKếWeb  Phần1:NgônNgữThiếtKếWebHTML


Biênso
ạn:DươngThànhPhết  Trang8

3.TaochỉsốTrên/Dưới
<SUP>Vănbản</SUP>:Tạochỉsốtrênchovănbản
<SUB>Vănbản</SUB>:Tạochỉsốdướichovănbản
VD:
 

II.ĐỊNHDẠNGĐOẠN
1.Thiếtlậplềtrang

Thiếtlậplềtráitrang(LeftMargin),lềtrêntrang(TopMargin)Theogiátrịn1,n2đơnvị
tínhlàPixcel
2.Canhlềđoạnvănbản
<PAlign=”Hướng”>Đoạnvănbản</P>
Hướng:LeftCanhtráiđoạnvănbản
 RightCanhphảiđoạnvănbản
 CenterCanhgiữađoạnvănbản

 JustifyCanhđềuvănbản
<CENTER>Cácthànhphầncầncanhgiữa</CENTER>
3.Tạovănbảnđềmục
Đềmụclàdòngvănbảnđịnhdạngkháccácdòngvănbảntrongnộidungdùngđể
tạođềmụcphần,chương.Mỗithẻcóchứcnăngphânđoạn,cấp1lớnnhất,cấp6nhỏnhất,
cóthểkếthợpthuộctínhcanhlề.
 <
H1>Nộidungvănbảnđềmụccấp1</H1>
 <H2>Nộidungvănbảnđềmụccấp2</H2>
 .....
<BODYLeftmargin=“n1”Topmargin=“n2”>
 ........
</BODY>
<HTML>

<HEAD>
<TITLE> VAN BAN CHI SO TREN DUOI </TITLE>
<BODY>
Văn bản có chỉ số trên:AX<SUP>2</SUP>+BX+C=0<BR>
Văn bản có chỉ số dưới : H<SUB>2</SUB>O
</BODY>
</HEAD>
</HTML>
This is trial version
www.adultpdf.com
BàiGiảngMônThiếtKếWeb  Phần1:NgônNgữThiếtKếWebHTML


Biênso
ạn:DươngThànhPhết  Trang9

 <H6>Nộidungvănbảnđềmụccấp6</H6>
VD: 
<H3Align=Center>Đềmụccấp,3canhlềgiữa</H3>
4.Tạovănbảnchúthích,tríchdẫn
<CITE>Vănbảnchúthích</CITE>
Vănbảnchúthíchngiêng,cùngdòngsovớivănbảntrướcđó.
III.SỬDỤNGMÀU
1.Cácmãmàu
ĐểxáclậpmàucóthểdùngTênmàuhayTrịthậplụcphântươngứng.

Tênmàu  Trị  Tênmàu  Trị 
Black Đen #000000 Olive Nâuvàng #808000
Red Đỏ #FF0000 Teal Nâusẫm #008080
Blue Xanh #0000FF Maroon Nâu #800000
Navy X.Đậm #000800 Gray Xám #808080
Lime V.Chanh

#FFFF00

Fuchsia Hồng #FF00FF
White Trắng #FFFFFF

Green Lá #008000
Rurple Đ.Tía #800080 Silver Bạc #C0C0C0

Yellow Vàng #FFFF00


Aqua Ngọc #00FFFF


2.XáclậpmàuchungchotrangWeb
DùngcácthuộctínhcủathẻBODYđểxáclập:màunền,màuvănbản,màucácvăn
bảnliênkết 
<BODYBgColor=“Màu”Text=“Màu”Link=“Màu” VLink=“Màu”Alink=“Màu”>
 .....NộidungtrangWeb.....
</BODY>
BgColor:Màunềntrang
Text:Màuvănbản
Link:Màuliênkếtchưatruycập
VLink:Màuliênkếtđãtruycập
Alink:MàuliênkếtkhiđangtrỏMouse
3.Xáclậpmàuchovănbản
DùngthuộctínhColorcủathẻFONTđểxáclậpmàu:chonộidungvănbảnchỉđịnh.
<FONTCOLOR=“Trịmàu”>Nộidungvănbản</FONT>

VD:
<FONTFACE=“Tahoma”COLOR=“Red”SIZE=3>Côngnghệthơngtin</FONT>
This is trial version
www.adultpdf.com
BàiGiảngMônThiếtKếWeb  Phần1:NgônNgữThiếtKếWebHTML


Biênso
ạn:DươngThànhPhết  Trang10
IV.ĐƯỜNGKẼNGANGVÀKÝTỰĐẶCBIỆT.
1.ĐườngKẽNgang
<HRSize=“n1”Width=“n2”Align=“Hướng”Color=“màu”Noshade>
<HR>:Tạođườngkẽngangdàibằngchiềurộngcửasổ
Size:Độdày 
Width:Độrộng(Pixcelhoặc%)

Align:canhlềLeft(Trái),Center(Giữa),Right(Phải)
Color:Màu
NoShade:Khôngcóbóng
VD:
<HRSize=3Width=50%Align="Right">
 <HRSize=2Width=75Align=“Center">
2.Kýtựđặcbiệt
NhậpMãtênhayMãsốcủakýtựtươngứng
Kýtự Mãtên Mãsố Kýtự Mãtên Mãsố
© &copy; &#169; “ &quote; &#34;
TM
&trade; &#153; Khoảngtrắng

&nbsp; &#160;
® &reg; &#174;   
Vídụ:TạotậptinHTMvớinộidungnhưsau


V.HIỆUỨNGCHUYỂNĐỘNGCHỮ
<Marquee
 Behavior=“Hiệuứng”Direction=“Hướng”Loop=n1 ScrollAmount=n2
 ScrollDelay=n3  BgColor=“Trịmàu”>
 Chuỗikýtự
</Marqueee>
<HTML>
<BODYBgcolor=Aqua>
 <PAlign=Center><H3>Cáckýhi
ệuđặcbiệt:</H3><P>
<HR><FontColor=Blue>
 B

ảnquyền:&#169;<BR>
 Th
ươnghiệu:&#153;<BR>
 Th
ươnghiệuđđăngký:&reg;<BR>
 Email:phetcm&#64;yahoo.com<BR></Font>
 <HRSIZE=3WIDTH=50%NOSHADE>
</BODY>
</HTML>

This is trial version
www.adultpdf.com