Giáo trình Thiết kế web

CHƯƠNG I: GIỚI THIỆU VỀ WEB
I.1. CÁC KHÁI NIỆM CƠ BẢN:
– Internet là một mạng máy tính toàn cầu trong ñó các máy truyền thông với nhau theo
một ngôn ngữ chung là TCP/IP.
– Intranet ñó là mạng cục bộ không nối vào Internet và cách truyền thông của chúng
cũng theo ngôn ngữ chung là TCP/IP.
– Mô hình Client-Server: là mô hình khách-chủ. Server chứa tài nguyên dùng chung
cho nhiều máy khách(Client) như các tập tin, tài liệu, máy in… Ưu ñiểm của mô
hình này là tiết kiệm về thời gian, tài chính, dễ quản trị hệ thống…Cách hoạt ñộng
của mô hình này là máy Server ở trang thái hoạt ñộng(24/24) và chờ yêu cầu từ phía
Client. Khi Client yêu cầu thì máy Server ñáp ứng yêu cầu ñó.
– Internet Server là các Server cung cấp các dịch vụ Internet(Web Server, Mail Server,
FTP Server…)
– Internet Service Provider(ISP): Là nơi cung cấp các dịch vụ Internet cho khách hàng.
Mỗi ISP có nhiều khách hàng và có thể có nhiều loại dịch vụ Internet khác nhau.
– Internet Protocol : Các máy sử dụng trong mạng Internet liên lạc với nhau theo một
tiêu chuẩn truyền thông gọi là Internet Protocol (IP). IP Address-ñịa chỉ IP: ñể việc
trao ñổi thông tin trong mạng Internet thực hiện ñược thì mỗi máy trong mạng cần
phải ñịnh danh ñể phân biệt với các máy khác. Mỗi máy tính trong mạng ñược ñịnh
danh bằng một nhóm các số ñược gọi là ñịa chỉ IP. ðịa chỉ IP gồm 4 số thập phân có
giá từ 0 ñến 255 và ñược phân cách nhau bởi dấu chấm. Ví dụ 192.168.0.1 ðịa chỉ IP
này có giá trị trong toàn mạng Internet. Uỷ ban phân phối ñịa chỉ IP của thế giới sẽ
phân chia các nhóm ñịa chỉ IP cho các quốc gia khác nhau. Thông thường ñịa chỉ IP
của một quốc gia do các cơ quan bưu ñiện quản lý và phân phối lại cho các ISP. Một
máy tính khi thâm nhập vào mạng Internet cần có một ñịa chỉ IP. ðịa chỉ IP có thể
cấp tạp thời hoặc cấp vĩnh viễn. Thông thường các máy Client kết nối vào mạng
Internet thông qua một ISP bằng ñường ñiện thoại. Khi kết nối, ISP sẽ cấp tạm thời
một IP cho máy Client.
– Phương thức truyền thông tin trong Internet: Khi một máy tính có ñịa chỉ IP là
x(máy X) gửi tin ñến máy tính có ñịa chỉ IP là y (máy Y) thì phương thức truyền tin
cơ bản diễn ra như sau: Nếu máy X và máy Y cùng nằm trên một mạng con thì thông
tin sẽ ñược gửi ñi trực tiếp. Còn máy X và Y không cùng nằm trong mạng con thì
thông tin sẽ ñược chuyển tới một máy trung gian có ñường thông với các mạng khác
rồi mới chuyển tới máy Y. Máy trung gian này gọi là Gateway.
– World Wide Web(WWW): là một dịch vụ phổ biến nhất hiện nay trên Internet. Dịch
vụ này ñưa ra cách truy xuất các tài liệu của các máy phục vụ dễ dàng thông qua các
giao tiếp ñồ họa. ðể sử dụng dịch vụ này máy Client cần có một chương trình gọi là
Web Browser.
– Web Browser(trình duyệt): là trình duyệt Web. Dùng ñể truy xuất các tài liệu trên các
Web Server. Các trình duyệt hiện nay là Internet Explorer, Nestcape
– Home page: là trang web ñầu tiên trong web site
– Hosting provider: là công ty hoặc tổ chức ñưa các trang của chúng ta lên web
– Hyperlink : tên khác của hypertextlink
– Publish: làm cho trang web chạy ñược trên mạng
– URL(Unioform resource locator): một ñịa chỉ chỉ ñến một file cụ thể trong nguồn tài
nguyên mạng. 
pdf 171 trang thiennv 08/11/2022 3880
Bạn đang xem 20 trang mẫu của tài liệu "Giáo trình Thiết kế web", để tải tài liệu gốc về máy hãy click vào nút Download ở trên.

File đính kèm:

  • pdfgiao_trinh_thiet_ke_web.pdf

Nội dung text: Giáo trình Thiết kế web

  1. GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) I.5.25. Cáckýtñcbit: a. Lnhơn(>):> Víd: IfA>B Then A=A+1 b. Nhhơn( IfA<B Then A=A+1 c. Cpnháy””:" Víd: "Tobeornottobe?"Thatisthequestion d. Kýtvà&:& Víd: William&Grahamwenttothefair e. Kýtkhongtrng :  I.6. MTSTHAOTÁCTRONGCASTRÌNHDUYT – CáchloadlitrangWeb:ClickbiutưngRefresh(F5)trênthanhcôngc. – Chnhsasizechhinthtrêntrang:ChnMenuView>Textsize – Chnhlifontch:ChnMenuView>EnCoding – TrongtrưnghptrangWebkhônghinthñưcFonttingVit: – ChnmenuToolchnInternetOptions>ChnTabFonts chnFonttingVit – NuchnrimàkhônghinthñưcfonttingVitthìchnMenu View >EnCoding chncácfontnhưUserdefined,Vietnamese . – CáctuỳchnkhácchotrangWeb:Tools Internetoption:KhôngLoadhìnhxung, ñnhdngliênkt, – Chntrangwebmcñnhkhimtrìnhduyt Trang10
  2. GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) Hình1 Hình2 Trang11
  3. GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) – TabGeneral(Hình1):thitlpcáctùychnchotrìnhduyt – ClicknútUseCurrent :chntranghintiñloadlênmilnkhiñngIE – Use Default : ña ch trang Web mc ñnh mi khi m trình duyt VídmikhimIEthìtñnghinthtrangWebYahootrongôAddress nhp: ,nuchnUseBlankthìhinthtrangtrng. – History :lưulicáctrangwebñãduytquatimáyClientvàthôngtinñăng nhpcauserhinhành – Nukhngmunlưuli:ChnDeleteCookiesvàDeleteFiles. – Cóththitlpkhongthigianlưutrtrangtrong ñi tưng History bngcáchthayñigiátrtrongô“Daystokeeppagesinhistory”. – NumunxoáñitưngnàythìnhnClearhistory. – TabAdvance (Hình 2):cóthchncáctùychnkhácnhư: – Ngănchnkhôngchotihìnhxungtrangweb – Màuliênkt,cáchthhinliênkttrêntrang – CopyhìnhnhttrangWeb:Clickphivàohìnhnhcnsaochépri chnSavepictureas,hocSavebackgroundas, – LoadvtrangWebbaogmcáchiung,script,hình nh cha trên trang:ChnMenuFile SaveAs Chnvtrílưufile Save. – HiuchnhtrangWeb:Viewsource>hiuchnh chnFile Saveñlưu li F5ñcpnhtlinidungvahiuchnh Trang12
  4. GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) CHƯƠNGII: SIÊULIÊNKT HÌNHNH II.1. GIITHIUSIÊULIÊNKT II.1.1. Siêuliênkt: KhnăngchínhcaHTMLlàhtrcácsiêuliênkt.Mtsiêuliênktchophépngưi truycpcóthñittrangwebnàyñntrangwebkhác.Mtliênktgm3phn: – Ngun :chanidunghinthkhingưidùngtruycpñn,cóthlàmttrangweb khác,mtñonfilm,mthìnhnhhocmthpthoiñgimail – Nhãn :cóthlàdòngvănbnhochìnhnhñngưidùngclickvàokhimuntruycp ñnliênkt,nunhãnlàvănbnthìthưngñưcgchdưi – ðích ñn (target):xácñnhvtríñngunhinth. II.1.2. Cácloiliênkt – InternalHyperlink :(Liênkttrong)làcácliênktvicácphntrongcùngmttàiliu hocliênktcáctrangtrongcùngmtwebsite. – ExternalHyperlink (Liênktngoài)làcácliênktvicáctrangtrênwebsitekhác. II.2. TOSIÊULIÊNKT Cúpháp : Nhãn – DùngURLtươngñiñliênktñncáctrangtrongcùngmtwebsite Víd: Usinglinks Clickheretoviewdocument2 – DùngURLtuytñiñliênktñncáctrangtrongwebsitekhác Víd: liênktñnGoogle II.2.1. Liênktvicácphntrongcùngmttrangweb – NunidungcatrangquádàithìnêntocácBookmarkñnhyñnmtphnc thnàoñótrênchínhtrangwebhinhành. – Cáchtoliênktñncácphntrongcùngtrang:gm2bưc Trang13
  5. GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I)  ToBookMark : Nhãn Nidung  ToliênktñnBookmark : Nhãncatextliênkt Víd: Usinghtmlinks Internet IntroductiontoHTML Internet Internetlàmtmngcacácmng.Nghĩalà,cácmngmáytính ñưcliênktvicácmngkhác,nicácnưcvàngàynaylàtoàn cu.GiaothctruynthônglàTCP/IPcungcpliênktvittc cácmáytínhtrênthgii IntroductiontoHTML Ngônngñánhdusiêuvănbnlàngônngchunmàweb s dngñtovànhnratàiliu.Mcdùkhôngphilàmttpcon cangônngnângcptiêuchuntngquát(SGML),ngônng ñánhdusiêuvănbncũngcóliênquanviSGML.SGMLlàmt phươngpháptrìnhbàycácngônngñnhdngtàiliu.HTMLlà ngônngñánhduñưcsdngñtotàiliuHTML.Cáchưng dnchrõmttrangwebnênñưchinthnhưthnàotrongtrình duyt Ktqutrêntrìnhduyt Trang14
  6. GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) II.2.2. LiênktvimtBookmarkmttàiliukhác Cúpháp : Víd: – Trangmain.htm Maindocument Internet Introductionto HTML – TrangDoc1.htm UsingLinks Internet Internetlàmtmngcacácmng.Nghĩalà,mngmáytínhñưc liênktvicácmngkhác,nivicácnưcvàngàynaylàtoàn cu.GiaothctruynTCP/IPcungcpliênktvittccácmáy tínhtrênthgii. IntroductiontoHTML Ngônngñánhdusiêuvănbnlàngônngchunmàweb s dngñtovànhnratàiliu.Mcdùkhôngphilàmttpcon cangônngnângcptiêuchuntngquát(SGML),ngônng ñánhdusiêuvănbncũngcóliênquanviSGML.SGMLlàmt phươngpháptrìnhbàycácngônngñnhdngtàiliu.HTMLlà ngônngñánhduñưcsdngñtotàiliuHTML. II.2.3. Liênktñnhpthưemail Cúpháp : Nhãn – Nusiêuliênktñtcuitrangthìdùngtag Cúpháp: Nhãn II.3. HÌNHNHTRÊNTRANGWEB: II.3.1. Cácloinh: a) nh.Gif (GraphicsInterchangeFormat):ñưcsdngphbinnhttrongcáctài liuHTML,dchuynti,ngayccácktnisdngMODEMtcñchm,h tr256màuGIF.CácfileGIFñưcñnhdngkhôngphthucphnnn b) nhJPEG (JointPhotoGraphicExpertGroup)cóphnmrng.JPG,làloinh nénmtthôngtin,nghĩalànhsaukhibnénkhônggingnhưnhgc. Tuynhiên, trongquátrìnhphátlithìnhcũngttgnnhưnhgc.JPEGhtrhơn16triu màuvàthưngñưcsdngchocácnhcómàuthc. Trang15
  7. GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) c) nhPNG (PortableNetworkGraphics)nénkhôngmtdliu II.3.2. Chènhìnhnh Cúpháp : URL:ñachcatptinhìnhnh,thưngsdngñachtươngñi,víd: khôngphthucvtrícatptinnhtrênñĩa n:ñdàycañưngvin,tínhbngpixel Alt:Nidungthaythshinthkhihìnhkhôngloadñưc,hockhiñưachutngang quahình II.3.3. Cácthuctínhcanh: a) Dànvănbnquanhhìnhnh: Nidungvănbnquanhhìnhnh Nidungvănbnquanhhìnhnh Víd: b) Kíchthưcnh: Víd: Image c) Chnvănbnbaoquanhhình: Canhlkhidànvănbnxungquanhmtnhstácñngñnttccácvănbnsau ñónukhôngchènvàomtdòngkñcbit.ThuctínhCLEARtrongtagBRlàm chovănbnkhôngbtñunulcthkhôngbxóañi(nghĩalàticnhdưica nh) Cúpháp : :Ngănchnvănbndànbênlphicanh :Ngănchnvănbndànbênltráicanh :Ngănchnvănbndànhaibênlcanh Trang16
  8. GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) d) Thêmkhongtrngxungquanhnh Nukhôngmunvănbndànxungquanhltráicanhthìtacóththêmkhong trngxungquanhnh Cúpháp: HSPACE=n: Khongtrngñưctínhbngpixelsthêmvàocbênphivàbên tráicanh VSPACE=m: Khongtrngñưctínhbngpixelsthêmvàocbêntrênvàbên dưicanh e) Canhlchonh: Cóthcanhlchonhsovimtdòngvănbntrongmtñan Cúpháp: Vănbnmuncanhlsovinh Direction:gmcácgiátr:top,bottom,middle,texttop Víd: II.3.4. Dùngnhlàmliênkt: Cóthdùnghìnhnhñtomtliênktñnmttrangkhác,hocnucómtnhln, bncóthtonhnhhơnhocmtbiutưngchonóñnócóthhinthnhanh chóngtrêntrangweb,sauñótoliênktññưangưitruycpñnnhcókíchthưc tht Cúpháp : Nhãn II.3.5. Bnñnh: Bnñnhlàmtnhtrongtrangwebñưcchiaralàmnhiuvùng,mivùngkhiclick vàosliênktñnmtñachURL Cáchto :Trưchtphichènvàotrangmtnhvàñtnhãnchonh Trang17
  9. GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) Trongñó: - Label :têncabnñnh - Type: hìnhdngcacácvùngtrênnh,gmcácloi: • Rect:Vùnghìnhchnht • Circle:Vùnghìnhtròn • Poly:Vùnghìnhñagiác - Coords :toñcácñnhcahình • Rect:(x1,y1,x2,y2)làtoñ2ñnhchéocavùnghìnhCN • Circle:(x,y,r)lnlưtlàtoñtâmvàbánkínhcavùnghìnhtròn • Poly:(x1,y1,x2,y2,x3,y3, )làcácñnhcavùnghìnhñagiác y y x Víd: x Image II.3.6. Hìnhnn: Tronghuhtcáctrangwebthưngsdngnnmàu,vimcñíchlàlàmnibtni dungtrangñó.Tuynhiêncũngcóthsdnghìnhnhñlàmnnbngthuctính BACKGROUNDcathBODY. Trang18
  10. GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) CHƯƠNGIII: DANHSÁCH III.1. DANHSÁCHKHÔNGCÓTHT(UnorderListUL) Cúpháp : Nidung1 Nidung2 − Shape1,Shape2làloibullettñngñtñudòngtrongdanhsách − Shape1:nhhưngñntoàndanhsách − Shape2:nhhưngñnmtmctrongdanhsách − Cácloishape: o Circle:Bullettròn,rng o Square:Bulletvuông o Disc:Bullettrònkhôngrng Víd: LearningHTML Monday IntroductiontoHTML CreatingLists Tuesday CreatingTables InsertingImages Wednesday Thursday Friday III.2. DANHSÁCHCÓTHT(OrderList–OL) Cúpháp : Nidung1 Nidung2 Trang19
  11. GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) − x:loikýtmunsdngtrongdanhsáchgm:  A:Chhoa  a:Chthưng  I:Slamãhoa  i:Slamãthưng  1:Chosmcñnh − n:giátrñutiêncadanhsách − x1 :làloikýtsdngchodòngnàyvàdòngtiptheo,làmmtnhhưngcax − m:giátrñutiêncadòngnày,làmthayñigiátrcan Víd1: LearningHTML Monday IntroductiontoHTML CreatingLists Tuesday CreatingTables InsertingImages Wednesday CreatingForms WorkingwithFrames Thursday Friday Víd2 :Cóthlng2loidanhsáchcóthtvàkhôngcóthtvàonhau LearningHTML Monday IntroductiontoHTML CreatingLists Tuesday CreatingTables InsertingImages Trang20
  12. GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) Wednesday CreatingForms WorkingwithFrames Thursday Friday III.3. DANHSÁCHðNHNGHĨA: TrongHTMLcómttagñcbitdùngñtodanhsáchñnhnghĩadànhriêngchovictra cu,nhưngcũngthíchhpchodanhsáchnàoñnimttvimtdingiidài. Cúpháp : Nhptmunñnhnghĩa Nhâpnidungñnhnghĩa Víd: LearningHTML DefinitionList Pixel Shortforpictureelement.Apixelreferstothesmalldotsthat makeupanimageonthescreen.Pixeldepthreferstothenumberof colourswhichmaybedisplayed. Resolution The quality of the display on a monitor. The higher the resolution,thesharpertheimage.Thenumberofpixelsthatcanbe displayedonascreendefinesresolution. Scanner A hardware device that allows the user to make electronic copiesofgraphicsortext. Trang21
  13. GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) Trang22
  14. GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) CHƯƠNGIV: BNGVÀTRÌNHBÀYTRANG IV.1. BNG Bngthưngñưcsdngñtocácvănbnnhiucthocphânchiatrangthànhnhiu vùngkhácnhaurttinlitrongthitkvàtrìnhbàytrangweb Cúpháp : Nidungtrongô1 Ct1 Nidungtrongô2 Ct2 Dòng1 Nidungtrongôn Nidungtrongô1 Dòng2 Nidungtrongô2 Nidungtrongôn – Tag :chthmtbng – Tag :xácñnhmtdòngcabng – Tag :xácñnhmtôchadliucabng.Dliutrongôcóthlà vănbnhochìnhnh Víd1 : TABLE Cell1 Cell2 Cell3 Cell4 Trang23
  15. GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) Víd2 : TABLE Cell1 Cell2 Cell3 Cell4 Víd3 : TABLE Cell1 Cell2 Cell3 Cell4 IV.2. CÁCTHUCTÍNH: IV.2.1. Thuctínhcabng f) Thêmkhungvin : n:ñdàycakhungvintínhbngPixel g) ðnhmàucakhungvinvàmàunn: Trang24
  16. GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) h) Tobóng: : Bóngñcnhdưivàphicabng : Bóngñcnhtrêntráicabng i) ðnhchiurngvàchiucaocabng : , nlàchiurngtínhbngPixel j) Canhlbng: k) ThuctínhCellpaddingvàCellSpacing: : Khongcáchgiañưngvincacácô : Khongcáchgiañưngvincaôvivăn bn l) TagtiêuñcaTable: tiêuñ Tag nmtrongcpTag IV.2.2. Thuctínhcact a) Canhltheochiungang: b) Canhltheochiuñng: c) Trnô: :trnnct :trnndòng d) Tag : Cótácdngnhư nhưnglàmchodliutrongôñưcinñmvàcanhgia Nidung Víd: Cell1 Cell2 Trang25
  17. GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) Víd: TABLE Cell1 Cell2 Cell3 Cell4 Víd: PropertiesofTable Colspan Rowspan Cell1 Cell2 Cell3 Cell4 Víd:Thitkmttrangwebnhưmu Trang26
  18. GiáoTrìnhThitKWeb TrungTâmCNTT(H.U.I) Trinhbaytrang ComputerModel Tintuc Giaitri Quangcao Thethao IV.3. TRÌNHBÀYTRANG Trongthct,bngthưngñưcsdngñtrìnhbàybccchotoànbtrangweb.Nu munthitkmttrangthhinvănbntrongctdngbáochíhocphântrangthành nhngvùngcóchñkhácnhau,thìbnglàmtcôngccnthit.Mttrongnhngnét ñctrưnghudngcabngñólàtrongmitablecellbncóthsdngbtkỳtag HTMLnào,vídbncóthchènmttag trongmtcellhocmtdanhsáchcóth tcácmchoccóthchènmtbngcontrongmtbngkhác Víd: Cnthitktrangwebgmnhiuvùngvinhngchñkhácnhaunhưhình dưiñây,thìbnglàcôngchuhiu Trang27