Giáo trình Giáo trình thiết kế và lập trình web

Nội dung text: Giáo trình Giáo trình thiết kế và lập trình web

1. 10 bén sÏ g©y ra c¶m gi¸c ch¸n n¶n vµ nhøc m¾t. - Tæ chøc néi dung mét c¸ch th«ng minh: Nªn nhí r»ng site cña m×nh t¹o ra kh«ng chØ cã "®é s©u" mét bËc, do vËy chØ cã nh÷ng th«ng tin thËt cÇn thiÕt míi cho vµo trang chñ. VÝ dô: giíi thiÖu tªn c«ng ty, môc ®Ých, mét sè s¶n phÈm - KiÓm tra, ch¹y thö site võa thiÕt kÕ mét c¸ch kü tr−íc khi ®−a lªn Web Server: Thö kiÓm tra site bëi c¸c tr×nh duyÖt Web, trªn c¸c hÖ ®iÒu hµnh kh¸c nhau hay lµ c¸c chÕ ®é kÝch th−íc cöa sæ kh¸c nhau ®Ó ®¶m b¶o r»ng site cña chóng ta th«ng suèt. 1.7 Ph©n lo¹i Web Dùa vµo ®Æc tr−ng, kÕt nèi d÷ liÖu vµ c«ng cô ph¸t triÓn ng−êi ta cã thÓ chia ra lµm 3 lo¹i Web sau ®©y: 1.7.1 Static pages (Web tÜnh ): TÝnh chÊt cña c¸c trang Web nµy lµ chØ bao gåm c¸c néi dung hiÓn thÞ cho ng−êi dïng xem. VÝ dô: hiÓn thÞ c¸c trang d¹ng text, h×nh ¶nh ®¬n gi¶n ch¼ng h¹n nh− mét cèc cµ phª ®ang bèc khãi 1.7.2 Form pages (MÉu biÓu): Ngoµi néi dung nh− ë trang Web tÜnh, nã cßn chøa c¸c mÉu biÓu (form) cho phÐp nhËp c¸c yªu cÇu tõ phÝa ng−êi sö dông. Khi ng−êi dïng ®iÒn xong c¸c form, Ên nót "Submit" vµ tÊt c¶c c¸c th«ng tin (yªu cÇu) sÏ ®−a ®Õn ®Çu vµo cña mét ch−¬ng tr×nh CGI (Common Gateway Interface) ch¹y trªn Server. (th−êng th× c¸c CGI xö lý vµ cÊt gi÷ th«ng tin vµo c¸c file d÷ liÖu trªn Server råi th«ng b¸o tr¶ l¹i cho kh¸ch hµng). Lo¹i Web nµy th−êng ®−îc dïng ®Ó lµm c¸c phiÕu ®iÒu tra, tr−ng cÇu ý kiÕn, mua hµng v v 1.7.3 Dynamic Web (Web ®éng) Néi dung cña trang Web ®éng nh− trong 1 trang Web tÜnh, ngoµi ra cßn cã nhóng c¸c ®o¹n m· lÖnh cho phÐp truy nhËp c¬ së d÷ liÖu trªn m¹ng. Tuú theo nhu cÇu, øng dông cã thÓ cung cÊp kh¶ n¨ng truy cËp d÷ liÖu, t×m kiÕm th«ng tin, 1.8 C©u hái vµ bµi tËp ch−¬ng 1 C©u 1: Ph©n biÖt m¹ng Intranet vµ m¹ng Internet. C©u 2: M¹ng Internet sö dông nh÷ng giao thøc nµo? Chøc n¨ng cña chóng? C©u 3: CÊu tróc c¸c líp cña ®Þa chØ IP. C©u 4: C¸c kh¸i niÖm URL, hyperlinks, web page, web browser, web server. C©u 5: Ph©n biÖt Internet vµ World Wide Web. C©u 6: C¸ch thøc x©y dùng mét website. C©u 7: Ph©n biÖt c¸c lo¹i web
2. 11 Ch−¬ng 2 LËp tr×nh Web víi ng«n ng÷ ®¸nh dÊu siªu v¨n b¶n (HTML) 2.1 Kh¸i niÖm ng«n ng÷ HTML HTML viÕt t¾t cña HyperText Mark-up Language (ng«n ng÷ ®¸nh dÊu siªu v¨n b¶n). Cã thÓ ®Þnh nghÜa HTML: Lµ mét tËp hîp c¸c quy t¾c vµ c¸c thÎ (tag) ®−îc sö dông ®Ó quy ®Þnh c¸c thøc tr×nh bµy, hiÓn thÞ néi dung cña c¸c trang Web, tËp hîp c¸c quy t¾c vµ thÎ nµy ph¶i tu©n theo mét chuÈn quèc tÕ, ®¶m b¶o cho c¸c tr×nh duyÖt Web kh¸c nhau,trªn c¸c nÒn phÇn cøng vµ hÖ ®iÒu hµnh kh¸c nhau ®Òu hiÓu ®−îc vµ hiÓn thÞ ®óng néi dung cña c¸c trang Web. HTML kh«ng ph¶i lµ mét ng«n ng÷ lËp tr×nh, nã lµ mét ng«n ng÷ ®¸nh dÊu. HTML dÔ hiÓu h¬n nhiÒu so víi hÇu hÕt c¸c ng«n ng÷ lËp tr×nh. Mét tµi liÖu HTML lµ mét tÖp tin v¨n b¶n trong ®ã cã sö dông c¸c thÎ HTML ®Ó quy ®Þnh c¸ch thøc hiÓn thÞ v¨n b¶n khi nã ®−îc më bëi mét tr×nh duyÖt Web. C¬ b¶n c¸c thÎ ®Þnh d¹ng trong HTML th−êng cã tõng cÆp gåm: thÎ më vµ thÎ ®ãng . C¸c v¨n b¶n n»m gi÷a hai thÎ nµy sÏ ®−îc chÞu t¸c ®éng ®Þnh d¹ng bëi thÎ. VÝ dô, thÎ dïng ®Ó ®Þnh d¹ng ch÷ in ®Ëm, khi ®ã v¨n b¶n " Hello " sÏ ®−îc hiÓn thÞ lµ "Hello". 2.2 LËp tr×nh web víi ng«n ng÷ HTML 2.2.1 C¸c thÎ ®Þnh d¹ng cÊu tróc cña HTML C¸c thÎ x¸c ®Þnh cÊu tróc tµi liÖu lµ b¾t buéc ph¶i cã trong mét tµi liÖu HTML. Sau ®©y chóng ta sÏ lÇn l−ît häc c¸ch sö dông c¸c thÎ ®Þnh d¹ng cÊu tróc cña mét tµi liÖu HTML c¬ b¶n. a. HTML CÆp thÎ nµy ®−îc sö dông ®Ó x¸c nhËn mét tµi liÖu lµ tµi liÖu HTML, tøc lµ nã cã sö dông c¸c thÎ HTML ®Ó tr×nh bµy. Toµn bé néi dung cña tµi liÖu ®−îc ®Æt gi÷a cÆp thÎ nµy. TÊt c¶ c¸c tËp tin HTML ®Òu b¾t ®Çu b»ng thÎ , thÎ nµy th«ng b¸o cho tr×nh duyÖt Web biÕt r»ng nã ®ang ®äc mét tµi liÖu cã chøa c¸c m· HTML vµ cuèi c¸c tËp tin HTML sÏ lµ thÎ ®ãng t−¬ng øng th«ng b¸o kÕt thóc mét tµi liÖu HTML. Có ph¸p: Toµn bé néi dung cña tµi liÖu ®−îc ®Æt ë ®©y Tr×nh duyÖt sÏ xem c¸c tµi liÖu kh«ng sö dông thÎ nh− nh÷ng tÖp v¨n b¶n b×nh th−êng. b. HEAD Mét tµi liÖu HTML gåm cã 2 phÇn: phÇn më ®Çu vµ phÇn néi dung chÝnh. PhÇn më ®Çu gièng nh− phÇn giíi thiÖu, c¸c tr×nh duyÖt Web sö dông phÇn më ®Çu nµy ®Ó thu nhÆt c¸c th«ng tin kh¸c nhau vÒ tµi liÖu HTML nµy, ch¼ng h¹n nh− tiªu
3. 12 ®Ò cña tµi liÖu, c¸c quan hÖ ®−îc thiÕt lËp gi÷a tµi liÖu vµ c¸c th− môc. ThÎ ®−îc dïng ®Ó x¸c ®Þnh phÇn më ®Çu cho tµi liÖu. Có ph¸p: PhÇn më ®Çu (header) cña tµi liÖu ®−îc ®Æt ë ®©y c. TITLE Chóng ta cã thÓ ®Æt tiªu ®Ò cho tµi liÖu HTML cña m×nh. Tiªu ®Ò nµy sÏ ®−îc hiÓn thÞ trªn thanh tiªu ®Ò cña tr×nh duyÖt. CÆp thÎ nµy chØ cã thÓ sö dông trong phÇn më ®Çu cña tµi liÖu, tøc lµ nã ph¶i n»m trong thÎ ph¹m vi giíi h¹n bëi cÆp thÎ . Có ph¸p: Tiªu ®Ò cña tµi liÖu ®−îc ®Æt ë ®©y d. BODY ThÎ nµy ®−îc sö dông ®Ó x¸c ®Þnh phÇn néi dung chÝnh cña tµi liÖu. Còng cã thÓ sö dông c¸c tham sè cña thÎ ®Ó ®Æ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: phÇn néi dung cña tµi liÖu ®−îc ®Æt ë ®©y Trªn ®©y lµ có ph¸p c¬ b¶n cña thÎ , tuy nhiªn b¾t ®Çu tõ phiªn b¶n HTML 3.2 th× cã nhiÒu thuéc tÝnh ®−îc sö dông trong thÎ . Nh− vËy mét tµi liÖu HTML c¬ b¶n cã cÊu tróc nh− sau: Tiªu ®Ò cña tµi liÖu Néi dung cña tµi liÖu Sau ®©y lµ c¸c thuéc tÝnh chÝnh: 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.
4. 13 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= X¸c ®Þnh mµu s¾c cho c¸c siªu liªn kÕt trong v¨n b¶n. VLINK= T−¬ng øng, alink (active link) lµ liªn kÕt ®ang ®−îc kÝch LINK= ho¹t - tøc lµ khi ®· ®−îc kÝch chuét lªn; vlink (visited link) chØ liªn kÕt ®· tõng ®−îc kÝch ho¹t; e. Chó thÝch CÆp thÎ nµy cho phÐp ng−êi biªn so¹n tµi liÖu HTML cã thÓ thªm vµo trong c¸c tµi liÖu HTML nh÷ng chó thÝch cÇn thiÕt, hoÆc cã thÓ sö dông cÆp thÎ nµy ®Ó th«ng b¸o cho tr×nh duyÖt bá qua mét ®o¹n m· lÖnh HTML. C¸c v¨n b¶n ®−îc ®Æt gi÷a hai thÎ nµy sÏ kh«ng ®−îc tr×nh duyÖt hiÓn thÞ. Có ph¸p: 2.2.2 C¸c thÎ ®Þnh d¹ng khèi a. ThÎ ThÎ ®−îc sö dông ®Ó ®Þnh d¹ng mét ®o¹n v¨n b¶n. Có ph¸p: Néi dung ®o¹n v¨n b¶n b. C¸c thÎ ®Þnh d¹ng ®Ò môc H1/H2/H3/H4/H5/H6 HTML hç trî 6 møc ®Ò môc. Chó ý r»ng ®Ò môc chØ lµ c¸c chØ dÉn ®Þnh d¹ng vÒ mÆt logic, tøc lµ mçi tr×nh duyÖt sÏ thÓ hiÖn ®Ò môc d−íi mét khu«n d¹ng thÝch hîp. Cã thÓ ë tr×nh duyÖt nµy lµ font ch÷ 14 point nh−ng sang tr×nh duyÖt kh¸c lµ font ch÷ 20 point. §Ò môc cÊp 1 lµ cao nhÊt vµ gi¶m dÇn ®Õn cÊp 6. Th«ng th−êng v¨n b¶n ë ®Ò môc cÊp 5 hay cÊp 6 th−êng cã kÝch th−íc nhá h¬n v¨n b¶n th«ng th−êng. D−íi ®©y lµ c¸c thÎ dïng ®Ó ®Þnh d¹ng v¨n b¶n ë d¹ng ®Ò môc: §Þnh d¹ng ®Ò môc cÊp 1 §Þnh d¹ng ®Ò môc cÊp 2 §Þnh d¹ng ®Ò môc cÊp 3 §Þnh d¹ng ®Ò môc cÊp 4 §Þnh d¹ng ®Ò môc cÊp 5 §Þnh d¹ng ®Ò môc cÊp 6
5. 14 c. ThÎ xuèng dßng ThÎ nµy kh«ng cã thÎ kÕt thóc t−¬ng øng ( ), nã cã t¸c dông chuyÓn sang dßng míi. L−u ý, néi dung v¨n b¶n trong tµi liÖu HTML sÏ ®−îc tr×nh duyÖt Web thÓ hiÖn liªn tôc, c¸c kho¶ng tr¾ng liÒn nhau, c¸c ký tù tab, ký tù xuèng dßng ®Òu ®−îc coi nh− mét kho¶ng tr¾ng. §Ó xuèng dßng, ta ph¶i sö dông thÎ . d. 2.4 ThÎ §Ó giíi h¹n ®o¹n v¨n b¶n ®· ®−îc ®Þnh d¹ng s½n ta cã thÓ sö dông thÎ . V¨n b¶n ë gi÷a hai thÎ nµy sÏ ®−îc thÓ hiÖn gièng hÖt nh− khi chóng ®−îc ®¸nh vµo, vÝ dô dÊu xuèng dßng trong ®o¹n v¨n b¶n giíi h¹n bëi thÎ sÏ cã ý nghÜa chuyÓn sang dßng míi (tr×nh duyÖt sÏ kh«ng coi chóng nh− dÊu c¸ch). Có ph¸p: V¨n b¶n ®· ®−îc ®Þnh d¹ng 2.2.3 C¸c thÎ ®Þnh d¹ng danh s¸ch Có ph¸p: Môc thø nhÊt Môc thø hai Cã 4 kiÓu danh s¸ch: • Danh s¸ch kh«ng s¾p xÕp ( hay kh«ng ®¸nh sè) • Danh s¸ch cã s¾p xÕp (hay cã ®¸nh sè) , mçi môc trong danh s¸ch ®−îc s¾p xÕp thø tù. • Danh s¸ch thùc ®¬n • Danh s¸ch ph©n cÊp Víi nhiÒu tr×nh duyÖt, danh s¸ch ph©n cÊp vµ danh s¸ch thùc ®¬n gièng danh s¸ch kh«ng ®¸nh sè, cã thÓ dïng lÉn víi nhau. Víi thÎ OL ta cã có ph¸p sau: Muc thu nhat Muc thu hai Muc thu ba Trong ®ã: TYPE =1 C¸c môc ®−îc s¾p xÕp theo thø tù 1, 2, 3 =a C¸c môc ®−îc s¾p xÕp theo thø tù a, b, c =A C¸c môc ®−îc s¾p xÕp theo thø tù A, B, C =i C¸c môc ®−îc s¾p xÕp theo thø tù i, ii, iii =I C¸c môc ®−îc s¾p xÕp theo thø tù I, II, III Ngoµi ra cßn thuéc tÝnh START= x¸c ®Þnh gi¸ trÞ khëi ®Çu cho danh s¸ch. ThÎ cã thuéc tÝnh TYPE= x¸c ®Þnh ký hiÖu ®Çu dßng (bullet) ®øng tr−íc mçi môc trong danh s¸ch. Thuéc tÝnh nµy cã thÓ nhËn c¸c gi¸ trÞ : disc (chÊm trßn ®Ëm); circle (vßng trßn); square (h×nh vu«ng).
6. 15 2.2.4 C¸c thÎ ®Þnh d¹ng ký tù a. 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. ThÎ Thuéc tÝnh In ch÷ ®Ëm In ch÷ nghiªng In ch÷ g¹ch ch©n §¸nh dÊu ®o¹n v¨n b¶n gi÷a hai thÎ nµy lµ ®Þnh nghÜa cña mét tõ. Chóng th−êng ®−îc in nghiªng hoÆc thÓ hiÖn qua mét kiÓu ®Æc biÖt nµo ®ã. In ch÷ bÞ g¹ch ngang. 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ö dông c¸c thÎ lång nhau t¹o ra hiÖu øng ch÷ t¨ng 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Î sÏ kh«ng cã ý nghÜa. 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Î 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Î sÏ kh«ng cã ý nghÜa. §Þnh d¹ng chØ sè trªn (SuperScript) §Þnh d¹ng chØ sè d−íi (SubScript) §Þ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Î kh«ng cã thÎ kÕt thóc. 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.
7. 16 b. C¨n lÒ v¨n b¶n trong trang Web Trong tr×nh bµy trang Web cña m×nh chóng ta 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− , , ®Òu cã tham sè ALIGN cho phÐp 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 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. Có ph¸p: V¨n b¶n sÏ ®−îc c¨n gi÷a trang c. C¸c ký tù ®Æc biÖt Ký tù & ®−îc sö dông ®Ó chØ chuçi ký tù ®i sau ®−îc xem lµ mét thùc thÓ duy nhÊt. Ký tù ; ®−îc sö dông ®Ó t¸ch c¸c ký tù trong mét tõ. Ký tù M· ASCII Tªn chuçi > > & & & d. Sö dông mµu s¾c trong thiÕt kÕ c¸c trang Web 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. Sau ®©y lµ mét sè gi¸ trÞ mµu c¬ b¶n: Mµu s¾c Gi¸ trÞ Tªn tiÕng Anh §á #FF0000 RED §á sÉm #8B0000 DARKRED Xanh l¸ c©y #00FF00 GREEN Xanh nh¹t #90EE90 LIGHTGREEN Xanh n−íc biÓn #0000FF BLUE Vµng #FFFF00 YELLOW Vµng nh¹t #FFFFE0 LIGHTYELLOW Tr¾ng #FFFFFF WHITE
8. 17 §en #000000 BLACK X¸m #808080 GRAY N©u #A52A2A BROWN TÝm #FF00FF MAGENTA TÝm nh¹t #EE82EE VIOLET Hång #FFC0CB PINK Da cam #FFA500 ORANGE Mµu ®ång phôc h¶i #000080 NAVY qu©n #4169E1 ROYALBLUE #7FFFD4 AQUAMARINE Có ph¸p: phÇn néi dung cña tµi liÖu ®−îc ®Æt ë ®©y Sau ®©y lµ ý nghÜa c¸c tham sè cña thÎ : C¸c tham sè ý nghÜa 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 ®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 TOPMARGIN LÒ trªn RIGHTMARGIN LÒ ph¶i LEFTMARGIN LÒ tr¸i
9. 18 e. Chän kiÓu ch÷ cho v¨n b¶n Có ph¸p: néi dung ®o¹n v¨n b¶n f. Kh¸i niÖm v¨n b¶n siªu liªn kÕt V¨n b¶n siªu liªn kÕt hay cßn gäi lµ siªu v¨n b¶n lµ mét tõ, mét côm tõ hay mét c©u trªn trang Web ®−îc dïng ®Ó liªn kÕt tíi mét trang Web kh¸c. Siªu v¨n b¶n lµ m«i tr−êng trong ®ã chøa c¸c liªn kÕt (link) cña c¸c th«ng tin. Do WWW cÊu thµnh tõ nhiÒu hÖ thèng kh¸c nhau, cÇn ph¶i cã mét quy t¾c ®Æt tªn thèng nhÊt cho tÊt c¶ c¸c v¨n b¶n trªn Web. Quy t¾c ®Æt tªn ®ã lµ URL (Universal Resource Locator). DÞch vô Cæng Tªn file Tªn hÖ thèng §−êng dÉn C¸c tham sè, biÕn, truy vÊn H×nh 2.1 C¸c thµnh phÇn cña URL ®−îc minh ho¹ ë h×nh trªn. • DÞch vô: Lµ thµnh phÇn b¾t buéc cña URL. Nã x¸c ®Þnh c¸ch thøc tr×nh duyÖt cña m¸y kh¸ch liªn l¹c víi m¸y phôc vô nh− thÕ nµo ®Ó nhËn d÷ liÖu. Cã nhiÒu dÞch vô nh− http, wais, ftp, gopher, telnet. • Tªn hÖ thèng: Lµ thµnh phÇn b¾t buéc cña URL. Cã thÓ lµ tªn miÒn ®Çy ®ñ cña m¸y phôc vô hoÆc chØ lµ mét phÇn tªn ®Çy ®ñ – tr−êng hîp nµy x¶y ra khi v¨n b¶n ®−îc yªu cÇu vÉn n»m trªn miÒn cña site. Tuy nhiªn nªn sö dông ®−êng dÉn ®Çy ®ñ. • Cæng: Kh«ng lµ thµnh phÇn b¾t buéc cña URL. Cæng lµ ®Þa chØ socket cña m¹ng dµnh cho mét giao thøc cô thÓ. Giao thøc http ngÇm ®Þnh nèi víi cæng 8080. • §−êng dÉn th− môc: Lµ thµnh phÇn b¾t buéc cña URL. Ph¶i chØ ra ®−êng dÉn tíi file yªu cÇu khi kÕt nèi víi bÊt kú hÖ thèng nµo. Cã thÓ ®−êng dÉn trong URL kh¸c víi ®−êng dÉn thùc sù trong hÖ thèng m¸y phôc vô. Tuy nhiªn cã thÓ rót gän ®−êng dÉn b»ng c¸ch ®Æt biÖt danh (alias). C¸c th− môc trong ®−êng dÉn c¸ch nhau bëi dÊu g¹ch chÐo (/). • Tªn file: Kh«ng lµ thµnh phÇn b¾t buéc cña URL. Th«ng th−êng m¸y phôc vô ®−îc cÊu h×nh sao cho nÕu kh«ng chØ ra tªn file th× sÏ tr¶ vÒ file ngÇm ®Þnh trªn th− môc ®−îc yªu cÇu. File nµy th−êng cã tªn lµ
10. 19 index.html, index.htm, default.html hay default.htm (víi c¸c Web site ®éng th× file mÆc ®Þnh cã thÓ cã phÇn më réng lµ asp, aspx, jsp hay php ). NÕu còng kh«ng cã c¸c file nµy th× th−êng kÕt qu¶ tr¶ vÒ lµ danh s¸ch liÖt kª c¸c file hay th− môc con trong th− môc ®−îc yªu cÇu • C¸c tham sè: Kh«ng lµ thµnh phÇn b¾t buéc cña URL. NÕu URL lµ yªu cÇu t×m kiÕm trªn mét c¬ së d÷ liÖu th× truy vÊn sÏ g¾n vµo URL, ®ã chÝnh lµ ®o¹n m· ®»ng sau dÊu chÊm hái (?).URL còng cã thÓ tr¶ l¹i th«ng tin ®−îc thu thËp tõ form. Trong tr−êng hîp dÊu th¨ng (#) xuÊt hiÖn ®o¹n m· ®¨ng sau lµ tªn cña mét vÞ trÝ (location) trong file ®−îc chØ ra. §Ó t¹o ra mét siªu v¨n b¶n chóng ta sö dông thÎ ý nghÜa c¸c tham sè: C¸c tham sè ý nghÜ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Î. 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 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). g. §Þa chØ t−¬ng ®èi URL ®−îc tr×nh bµy ë trªn lµ URL tuyÖt ®èi. Ngoµi ra cßn cã URL t−¬ng ®èi hay cßn gäi lµ URL kh«ng ®Çy ®ñ. §Þa chØ t−¬ng ®èi sö dông sù kh¸c biÖt t−¬ng ®èi gi÷a v¨n b¶n hiÖn thêi vµ v¨n b¶n cÇn tham chiÕu tíi. C¸c thµnh phÇn trong URL ®−îc ng¨n c¸ch b»ng ký tù ng¨n c¸ch (ký tù g¹ch chÐo /). §Ó t¹o ra URL t−¬ng ®èi, ®Çu tiªn ph¶i sö dông ký tù ng¨n c¸ch. URL ®Çy ®ñ hiÖn t¹i sÏ ®−îc sö dông ®Ó t¹o nªn URL ®Çy ®ñ míi. Nguyªn t¾c lµ c¸c thµnh phÇn bªn tr¸i dÊu ng¨n c¸ch cña URL hiÖn t¹i ®−îc gi÷ nguyªn, c¸c thµnh phÇn bªn ph¶i ®−îc thay thÕ b»ng thµnh phÇn URL t−¬ng ®èi. Chó ý r»ng tr×nh duyÖt kh«ng göi URL t−¬ng ®èi, nã bæ sung vµo URL c¬ së ®· x¸c ®Þnh tr−íc thµnh phÇn URL t−¬ng ®èi x¸c ®Þnh sau thuéc tÝnh href=. Ký tù ®Çu tiªn sau dÊu b»ng sÏ x¸c ®Þnh c¸c thµnh phÇn nµo cña URL hiÖn t¹i sÏ tham gia ®Ó t¹o nªn URL míi. VÝ dô, víi ®Þa chØ URL: th×:
11. 20 • DÊu hai chÊm (:) chØ dÞch vô gi÷ nguyªn nh−ng thay ®æi phÇn cßn l¹i. • DÊu g¹ch chÐo (/) chØ dÞch vô vµ m¸y phôc vô gi÷ nguyªn nh−ng toµn bé ®−êng dÉn thay ®æi. VÝ dô /JavaScript/index.htm sÏ t¶i file index.htm cña th− môc JavaScript trªn m¸y phôc vô dit.tsqtt.edu.vn. • Kh«ng cã dÊu ph©n c¸ch chØ cã tªn file lµ thay ®æi. VÝ dô index.htm sÏ t¶i file index.htm ë trong th− môc HTML cña m¸y phôc vô dit.tsqtt.edu.vn. • DÊu th¨ng (#): chØ dÞch vô, m¸y phuc vô, ®−êng dÉn vµ c¶ tªn file gi÷ nguyªn, chØ thay ®æi vÞ trÝ trong file. Do ®−êng dÉn ®−îc xem lµ ®¬n vÞ ®éc lËp nªn cã thÓ sö dông ph−¬ng ph¸p ®−êng dÉn t−¬ng ®èi nh− trong UNIX hay MS-DOS (tøc lµ dÊu chÊm (.) chØ th− môc hiÖn t¹i cßn hai dÊu chÊm ( ) chØ th− môc cha cña th− môc hiÖn t¹i). URL c¬ së cã thÓ ®−îc x¸c ®Þnh b»ng thÎ . h. KÕt nèi mailto NÕu ®Æt thuéc tÝnh href= cña thÎ 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. Trang WEB nµy ®−îc WEBMASTER b¶o tr× i. VÏ mét ®−êng th¼ng n»m ngang Có ph¸p: ý nghÜa c¸c tham sè: C¸c tham sè ý nghÜa ALIGN C¨n lÒ (c¨n tr¸i, c¨n ph¶i, c¨n gi÷a) COLOR §Æt mµu cho ®−êng th¼ng NOSHADE Kh«ng cã bãng SIZE §é dµy cña ®−êng th¼ng WIDTH ChiÒu dµi (tÝnh theo pixel hoÆc % cña bÒ réng cöa sæ tr×nh duyÖt). ThÎ nµy gièng nh− thÎ , nã còng kh«ng cã thÎ kÕt thóc t−¬ng øng.
12. 21 2.2.5 C¸c thÎ chÌn ©m thanh, h×nh ¶nh a. Giíi thiÖu 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 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. 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 .pdf ViÕt t¾t cña Portable Document Format. Acrobat 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 .mov Do Apple Computer ®−a ra, chuÈn video nµy ®−îc Time 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