BàiGiảngMônThiếtKếWeb Phần1:NgônNgữThiếtKếWebHTML Biênsoạn:DươngThànhPhết Trang1 Chương01 TỔNGQUANVỀTHIẾTKẾWEBSITE Cáckháiniệm Soạnthảotrangweb CácthẻcủatậptinHTML Làmtươivàxemmãnguồn I.CÁCKHÁINIỆM 1.KháiniệmWebTĩnh,Webđộng WEBTĨNH:ĐượcxâydựngbằngcácngônngữHTML,DHTMLdùngđểthiếtkếcác trangwebcónộidungítcầnthayđổivàcậpnhật.Thíchhợpvớicánhân,tổchức, doanhnghiệpvừavànhỏmớilàmquenvớimôitrườngInternet. o Ưuđiểm: - Thiếtkếđồhoạđẹp:Trìnhbàyấntượngvìvềphầnmỹthuậtchúngtacó thểhoàntoàntựdotrìnhbàycácýtưởngtrêntoàndiệntíchtrang. - Tốcđộtruycậpnhanhvìkhôngmấtthờigiantrongviệctruyvấncơsởdữ liệunhưcáctrangwebđộng. - Chiphíđầutưthấp:Chiphíxâydựngwebsitetĩnhthấpvìkhôngphảixây dựngcáccơsởdữliệu,lậptrìnhvàchiphíchoviệcthuêHosting... o Nhượcđiểmcơbản: - Khókhăntrongviệcthayđổivàcậpnhậtthôngtin:Muốnthayđổivà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ươngtrìnhthiếtkếđồhoạ,thiếtkếweb,cậpnhậtfilelênserver. - Thôngtinkhôngcótínhlinhhoạt:Donộidungđượcthiếtkếcốđịnhnênkhi nhucầuvềthôngtintăngcaothì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 websitetĩnhhầunhưlàphảilàmmớilạiwebsite. Webđộng:Webđộnglàthuậtngữđượcdùngđểchỉnhữngwebsitecócơsởdữ liệuvàđượchỗtrợbởicácphầnmềmpháttriểnweb. o Vớiwebđộng,thôngtinhiểnthịđượcgọiratừ1cơsởdữliệukhingườidùng truyvấntớimộttrangweb.Chẳnghạnứngdụngthươngmạiđiệntử(mộtcửa hàngtrựctuyến)trưngbàycataloguesảnphẩmtrênwebsitehaytheodõikho hàng,khimộtmặthàngđượcgiao,ngaylậptứcnhữngtrangcóliênquanđến sảnphẩmđóphảnánhsựthayđổinày. o Webđộngthườngđượcpháttriểnbằngcácngônngữlậptrìnhtiêntiếnnhư PHP,ASP,ASP.NET,Java,CGI,Perl,vàsửdụngcáccơsởdữliệuquanhệ mạnhnhưAccess,MySQL,MSSQL,Oracle… o Thôngtintrênwebđộngluônmớivìnódễdàngđượcthườngxuyêncậpnhật thôngquaviệcsửdụngcáccôngcụcậpnhậtcủacácphầnmềmquảntrịweb. o Vìvậywebsiteđượchỗtrợbởicơsởdữliệulàphươngtiệntraođổithôngtin nhanh nhất với người dùng Internet. Điều dễ nhận thấy là những website thườngxuyênđượccậpnhậtsẽthuhútnhiềukháchhàngtớithămhơn. o TấtcảcácwebsiteThươngmạiđiệntử,cácmạngthôngtinlớn,cácwebsite củacáctổchức,doanhnghiệphoạtđộngchuyênnghiệptrênNetđềusửdụng côngnghệwebđộng.Cóthểnóiwebđộnglàwebsitecủagiớichuyênnghiệp hoạtđộngtrênmôitrườngInternet. This is trial version www.adultpdf.com BàiGiảngMônThiếtKếWeb Phần1:NgônNgữThiếtKếWebHTML Biênsoạn:DươngThànhPhết Trang2 2.MạngInternet: Mạngmáytínhtoàncầu–Hệthốngmạngcủacácmạng.Tiềnthânbanđầulàmạng ARPANET(TổchứcAdvancedResearchProjectsAgency)củaMỹsánglập1969.Phụcvụ traođổidữliệugiữacáctrườngđạihọc&Bộquốcphòng. 3.CácdịchvụcơbảntrênInternet • WWW-WoldWideWeb:Dịchvụtraođổi,tìmkiếmtruycậpthôngtintrênmạngtheo giaothứcHTTP.ĐượcsửdụngthôngquatrìnhduyệtWeb • 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ácMailservernhư: phetitc@yahoo.com,webmaster@clbtinhoc.net,phetit@hcm.fpt.vn • FTP–FileTransferProtocol–Truyềntảitậptin:Dịchvụtraođổitậptingiữacác máytrênInternetthườngđượcdùngđểDownload&Uploadcáctrangwebtừ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ángẫu:Dịchvụchophépngườidùngtraođổitrựctuyếnvớinhauquamạng internetbằngvănbản,âmthanh,hìnhảnhNhư:AOL,Yahoomessenger 4.HTTP-HyperTextTranferProtocol:GiaothứcdùngđểgiaotiếpvớicáctrangWeb.5. HTML-HyperTextMakeupLanguage:Ngônngữđánhdấusiêuvănbảndùngđểthiếtkế trangWeb. 6.WebPage-TrangWeb:LàmộttậptinvănbảnsoạnthảotheongônngữHTMLcóphần mởrộnglàHTMLhoặcHTM. 7.WebSite:ChuyênkhuWebtậphợpcáctrangwebthuộc1chủthể. 8.HomePage:Trangđầutiên-Trangchủcủa1Website(Index.htm,Default.htm...) 9.WebServer:Máychủweb-Máytínhcấuhìnhmạnh,lưutrữcáctrangWebkếtnốithường xuyênvớimạngInternetchophépcácmáykháctruycậpthôngtin. 10.Tênmiền-DomainName-WebServerName:ĐểphânbiệtmỗiWebServercómộtđịa chỉIPvàđượcánhxạbởi1tên(VD:www.vietnamnet.vn).Đượcxemnhưtêngiaodịchcủa côngty,tổchứctrênInternet.Baogồmmãquốcgianhư:ViệtNam:.VN,Anh:.UK,Mỹ:.US, Nhật:.JP )và1sốlĩnhvực. .Com:Thươngmại .Edu:Tổchứcgiáodục .Net:Cácmạngthôngtin .Info:Cácmạngthôngtin .Int:Tổchứcquốctế .Org:Cáctổchứckhác .Gov:Tổchứcchínhphủ .Mil:Tổchứcquânsự Cóthểkếthợplĩnhvựcvớimãquốcgianhưwww.tuoitre.com.vn .Đểsởhữu1tên miềnphảitrảchiphíhàngnămthôngquacáccôngtyủyquyềnbántênmiền. 11.Hosting:Khihoàntấtwebsitephảiđượcghilưuvào1webservernàođóthìmớitruy cậpđượcthôngthườnglàcácservercủaISP(NhàcungcấpdịchvụInternethayđơnvị chuyêndụng).Tùytheodunglượng,băngthôngvàmộtsốhỗtrợmàchiphíkhácnhau. 12. URL-Uniform Resource Location: Địa chỉ truy cập của trangWeb - 1 tập tin trong Website http://Webservername/……/File.html Trangchủmặcđịnhkhôngcầnkhaibáokhitruycập VD:http://www.thoitrangtre.com.vnTứclà:http://www.thoitrangtre.com.vn/Index.htm This is trial version www.adultpdf.com BàiGiảngMônThiếtKếWeb Phần1:NgônNgữThiếtKếWebHTML Biênso ạn:DươngThànhPhết Trang3 13.Browser:TrìnhduyệtWebdùngđểđọcvàhiểnthịcáctrangWeb.Phổbiếnhiệnnaylà: InternetExplorer,Netscape,FireFox. II.SOẠNTHẢOTRANGWEB 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ếtbằngmãnguồnHTMLtrênchươngtrìnhsoạnthảovănbảnkhôngđịnhdạng như:NotePad. Khởiđộng:Start/Program/Accessories/NotePad Ghichú:Nếusửdụngchữcódấu,thìphải • ThiếtlậpbảngmãUnicodechotrìnhgõVietKey,Unikey, • ChọnFontUnicodetrongtrìnhsoạnthảo(Format/FontArial,Tahoma,...) 2.Đặttên,Lưu&Mởtậptin:Tậptinlưutrữcóphầnmởrộnglà:.htmhoặc.html a.Lưutậptin:Tạicửasổsoạnthảo:File/SaveFilename:Tên.html(VD:VD01.html) Saveastype:AllFilesEncoding:UTF-8(Nếunộidungcódấu)Save b.Lưulạivớitênkhác:TạicửasổsoạnthảoFile/SaveAs c.Mởtậptinđãsoạnthảo:Tạicửasổsoạnthảo:File/Open Chọntậptincầnmở Open 3.XemtrangWebsaukhisoạnthảo:Cách1:MởthưmụcđãlưutrữDoubleClicktập tin.htm Cách2:KhởiđộngtrìnhduyệtFile/OpenChọnBrowserđểtìmtậptincầnmởOk Kếtquảhiệnthị This is trial version www.adultpdf.com BàiGiảngMônThiếtKếWeb Phần1:NgônNgữThiếtKếWebHTML Biênso ạn:DươngThànhPhết Trang4 III.CÁCTHẺCỦATẬPTINHTML 1. KháiNiệm: TậptinHTMLlà1vănbảnchứacácthẻ(Tag)-đểtạocácthànhphầncủatàiliệu. CấuTrúcTổngQuátCủaThẻ:<Tênthẻ[Thuộctính]>Thànhphầnchịutácđộng</Tênthẻ> Têncủathẻđặttrongcặpngoặcnhọn:<...>Cóhoặckhôngcócácthuộctính Vídụ1: <B>ChàoCácBạn</B>Nộidungsẽinđậm Vídụ: <FontSize=“4”>Chúccácbạnhọctốt</Font>Nộidungchữcócỡ 4Ghichú:Chophépcácthẻlồngnhau,Choviếtcácthẻtrêncùng1dònghoặcnhiều dòng.Nênviếtcócấutrúc 2.CấuTrúcTổngQuátCủaTậpTinHTML: <HTML><HEAD> <TITLE>Nộidungtiêuđề</TITLE> </HEAD> <BODY> Phầndữliệucủatrangweb </BODY> </HTML> <HTML>...</HTML>:BắtđầuvàkếtthúctậptinHTML <HEAD>...</HEAD>:Phầnđầutrangweb <TITLE>Nộidungtiêuđề</TITLE>:Hiểnthịnộidungtrênthanhtiêuđề <BODY>Nộidungtrêntrang</BODY>:Hiểnthịnộidungtrêntrang. 3.VíDụMinhHọa Tạotậptinvớinộidungnhưsau <HTML> <HEAD> <TITLE>GI ỚITHIỆU</TITLE> </HEAD> <BODY> Chàom ừngcácbạnđếnvớiHTML </BODY> </HTML> Thẻmở Thẻđóng This is trial version www.adultpdf.com BàiGiảngMônThiếtKếWeb Phần1:NgônNgữThiếtKếWebHTML Biênso ạn:DươngThànhPhết Trang5 4.VấnĐềNgắtDòng Tạotậptinvớinộidungnhưsau: Khôngxuốngdòngnhưsoạnthảomàchỉtựmàrớtdòngtùytheokíchthướccửasổ trìnhduyệt. • Đểngắtdòngtạođoạnmới,tạodòngtrống:Đặtvănbảntrongcặpthẻ<P> </P> • Đểngắtdòngkhôngtạođoạnmới:Chènthẻ<BR>tạivịtrímuốnngắtdòng • Đểgiữcácphầntửtrêncùng1dòng:Đặtvănbảntrongcặpthẻ<Nobr> </Nobr> Vănbảnsẽbịchekhuấtkhichiềurộngcửasổtrìnhduyệtkhôngđủvàsẽhiệnthanh cuộnngang. VD:Tạotậptinvớinộidungnhư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àiGiảngMônThiếtKếWeb Phần1:NgônNgữThiếtKếWebHTML Biênso ạn:DươngThànhPhết Trang6 5.TạoChúThích Đặtcâughichúvàocặpthẻ<! Câuchúthích > Nộidungcâuchúthíchkhônghiểnthịtrêntrìnhduyệt IV.LÀMTƯƠITRANGWEB–XEMMÃNGUỒN 1.LàmTươiNộiDung Khiđanghiệnthịmộttrangwebtrêntrìnhduyệtcóthểxemvàđiềuchỉnhnộidung mãnguồntừtrìnhsoạnthảo.Khiđãlưulạinộidungđiềuchỉnh,từtrìnhduyệttacóthểxem lạikếtquảtheonộidungmới-Làmtươi:ClickbiểutượngRefesh(HoặcF5) 2.XemMãNguồn: TừtrìnhduyệtcóthểxemmãnguồntrangWeb:ClickMenuView/Source This is trial version www.adultpdf.com BàiGiảngMônThiếtKếWeb Phần1:NgônNgữThiếtKếWebHTML Biênso ạn:DươngThànhPhết Trang7 Chương02 CÁCTHẺĐỊNHDẠNGVĂNBẢN o Địnhdạngkítự,Địnhdạngđoạn o Sửdụngmàu o Chènđườngkẽngangvàkýtựđặcbiệt o Hiệuứngchuyểnđộngchữ o Vănbảndanhsach I.ĐịnhDạngKýTư 1.ĐịnhdạngKiểudáng-Style <B>Nộidungvănbản</B> : Nộidungvănbảnđượcinđậm <I>Nộidungvănbản</I> : Nộidungvănbảnđượcinnghiêng <U>Nộidungvănbản</U> : Nộidungvănbảnđượcgạchdưới(chân) <S>Nộidungvănbản</S>: Nộidungvănbảnđượcgạchngang 2.ThayđổiFont,Size <FONTFACE=“FontName1,FontName2…”>Nộidungvănbản</FONT> XácđịnhFontchoNộidungvănbản,NếumáytruycậpkhôngcóFontName1sẽ lấyFontName2...sẽlấyFontmặcđịnhcủatrìnhduyệt. <BASEFONTSIZE=“n”> Xácđịnhcỡchữchocảtàiliệugiátrịn:Từ1đến7(8,10,12,14,16,24,36)mặc địnhlà3. <FONTSIZE=“n”>Nộidungvănbản</FONT> Xácđịnhcỡchữchonộidungvănbản VD:Tạotậptinvớinộidungnhư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àiGiảngMônThiếtKếWeb Phần1:NgônNgữThiếtKếWebHTML Biênso ạn:DươngThànhPhết Trang8 3.TaochỉsốTrên/Dưới <SUP>Vănbản</SUP>:Tạochỉsốtrênchovănbản <SUB>Vănbản</SUB>:Tạochỉsốdướichovănbản VD: II.ĐỊNHDẠNGĐOẠN 1.Thiếtlậplềtrang Thiếtlậplềtráitrang(LeftMargin),lềtrêntrang(TopMargin)Theogiátrịn1,n2đơnvị tínhlàPixcel 2.Canhlềđoạnvănbản <PAlign=”Hướng”>Đoạnvănbản</P> Hướng:LeftCanhtráiđoạnvănbản RightCanhphảiđoạnvănbản CenterCanhgiữađoạnvănbản JustifyCanhđềuvănbản <CENTER>Cácthànhphầncầncanhgiữa</CENTER> 3.Tạovănbảnđềmục Đềmụclàdòngvănbảnđịnhdạngkháccácdòngvănbảntrongnộidungdùngđể tạođềmụcphần,chương.Mỗithẻcóchứcnăngphânđoạn,cấp1lớnnhất,cấp6nhỏnhất, cóthểkếthợpthuộctínhcanhlề. < H1>Nộidungvănbảnđềmụccấp1</H1> <H2>Nộidungvănbảnđềmụccấp2</H2> ..... <BODYLeftmargin=“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àiGiảngMônThiếtKếWeb Phần1:NgônNgữThiếtKếWebHTML Biênso ạn:DươngThànhPhết Trang9 <H6>Nộidungvănbảnđềmụccấp6</H6> VD: <H3Align=Center>Đềmụccấp,3canhlềgiữa</H3> 4.Tạovănbảnchúthích,tríchdẫn <CITE>Vănbảnchúthích</CITE> Vănbảnchúthíchngiêng,cùngdòngsovớivănbảntrướcđó. III.SỬDỤNGMÀU 1.Cácmãmàu ĐểxáclậpmàucóthểdùngTênmàuhayTrịthậplụcphântươngứng. Tênmàu Trị Tênmàu Trị Black Đen #000000 Olive Nâuvàng #808000 Red Đỏ #FF0000 Teal Nâusẫ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áclậpmàuchungchotrangWeb DùngcácthuộctínhcủathẻBODYđểxáclập:màunền,màuvănbản,màucácvăn bảnliênkết <BODYBgColor=“Màu”Text=“Màu”Link=“Màu” VLink=“Màu”Alink=“Màu”> .....NộidungtrangWeb..... </BODY> BgColor:Màunềntrang Text:Màuvănbản Link:Màuliênkếtchưatruycập VLink:Màuliênkếtđãtruycập Alink:MàuliênkếtkhiđangtrỏMouse 3.Xáclậpmàuchovănbản DùngthuộctínhColorcủathẻFONTđểxáclậpmàu:chonộidungvănbảnchỉđịnh. <FONTCOLOR=“Trịmàu”>Nộidungvănbản</FONT> VD: <FONTFACE=“Tahoma”COLOR=“Red”SIZE=3>Côngnghệthơngtin</FONT> This is trial version www.adultpdf.com BàiGiảngMônThiếtKếWeb Phần1:NgônNgữThiếtKếWebHTML Biênso ạn:DươngThànhPhết Trang10 IV.ĐƯỜNGKẼNGANGVÀKÝTỰĐẶCBIỆT. 1.ĐườngKẽNgang <HRSize=“n1”Width=“n2”Align=“Hướng”Color=“màu”Noshade> <HR>:Tạođườngkẽngangdàibằngchiềurộngcửasổ Size:Độdày Width:Độrộng(Pixcelhoặc%) Align:canhlềLeft(Trái),Center(Giữa),Right(Phải) Color:Màu NoShade:Khôngcóbóng VD: <HRSize=3Width=50%Align="Right"> <HRSize=2Width=75Align=“Center"> 2.Kýtựđặcbiệt NhậpMãtênhayMãsốcủakýtựtươngứng Kýtự Mãtên Mãsố Kýtự Mãtên Mãsố © © © “ "e; " TM ™ ™ Khoảngtrắng   ® ® ® Vídụ:TạotậptinHTMvớinộidungnhưsau V.HIỆUỨNGCHUYỂNĐỘNGCHỮ <Marquee Behavior=“Hiệuứng”Direction=“Hướng”Loop=n1 ScrollAmount=n2 ScrollDelay=n3 BgColor=“Trịmàu”> Chuỗikýtự </Marqueee> <HTML> <BODYBgcolor=Aqua> <PAlign=Center><H3>Cáckýhi ệuđặcbiệt:</H3><P> <HR><FontColor=Blue> B ảnquyền:©<BR> Th ươnghiệu:™<BR> Th ươnghiệuđđăngký:®<BR> Email:phetcm@yahoo.com<BR></Font> <HRSIZE=3WIDTH=50%NOSHADE> </BODY> </HTML> This is trial version www.adultpdf.com . Bài Giảng Môn Thi t Kế Web Phần 1: NgônNgữ Thi t Kế Web HTML Biênsoạn:DươngThànhPhết Trang 1 Chương 01 TỔNGQUANVỀ THI TKẾWEBSITE Cáckháiniệm Soạnthảotrang web CácthẻcủatậptinHTML Làmtươivàxemmãnguồn I.CÁCKHÁINIỆM 1. KháiniệmWebTĩnh, Web động . trong Website http://Webservername/……/File.html Trangchủmặcđịnhkhôngcầnkhaibáokhitruycập VD:http://www.thoitrangtre.com.vnTứclà:http://www.thoitrangtre.com.vn/Index.htm This is trial version www.adultpdf.com Bài Giảng Môn Thi t Kế Web Phần 1: NgônNgữ Thi t Kế Web HTML Biênso ạn:DươngThànhPhết Trang3 13 .Browser:Trìnhduyệt Web dùngđểđọcvàhiểnthịcáctrang Web. Phổbiếnhiệnnaylà: InternetExplorer,Netscape,FireFox. II.SOẠNTHẢOTRANG WEB 1. . .....Nộidungtrang Web. .... </BODY> BgColor:Màunềntrang Text:Màuvănbản Link:Màuliênkếtchưatruycập VLink:Màuliênkếtđãtruycập Alink:MàuliênkếtkhiđangtrỏMouse 3.Xáclậpmàuchovănbản DùngthuộctínhColorcủathẻFONTđểxáclậpmàu:chonộidungvănbảnchỉđịnh. <FONTCOLOR=“Trịmàu”>Nộidungvănbản</FONT> VD: <FONTFACE=“Tahoma”COLOR=“Red”SIZE=3>Côngnghệthơngtin</FONT> This is trial version www.adultpdf.com Bài Giảng Môn Thi t Kế Web Phần 1: NgônNgữ Thi t Kế Web HTML Biênso ạn:DươngThànhPhết Trang 10 IV.ĐƯỜNGKẼNGANGVÀKÝTỰĐẶCBIỆT. 1. ĐườngKẽNgang <HRSize=“n1”Width=“n2”Align=“Hướng”Color=“màu”Noshade> <HR>:Tạođườngkẽngangdàibằngchiềurộngcửasổ Size:Độdày