Giáo trình HTML

Chia sẻ: Đoàn Trần Nghiệp | Ngày: | Loại File: PDF | Số trang:14

Thêm vào BST

Báo xấu

387
lượt xem 182
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Cuốn sách huớng dẫn sử dụng Ngôn ngữ siêu văn bản( html ) lỡ một cuốn sách dùng cho những ai mới lần đầu tiếp xúc với ngôn ngữ nỡy. Nội dung tập trung về những vấn đề cơ bản trong ngôn ngữ siêu văn bản, nó cung cấp cho chúng ta một cái nhìn ban đầu về ngôn ngữ siêu văn bản, từ đó độc giả không phải ngỡ ngỡng khi tiếp tục nghiên cứu tiếp những vấn đề nâng cao hơn. Bạn có thể đọc vỡ vận dụng một cách nhanh chóng những vấn đề đuợc bỡn luận...

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Giáo trình HTML

Cuèn s¸ch huíng dÉn sö dông Ng«n ng÷ siªu v¨n b¶n( html ) lµ mét cuèn s¸ch dïng cho nh÷ng ai míi lÇn ®Çu tiÕp xóc víi ng«n ng÷ nµy. Néi dung tËp trung vÒ nh÷ng vÊn ®Ò c¬ b¶n trong ng«n ng÷ siªu v¨n b¶n, nã cung cÊp cho chóng ta mét c¸i nh×n ban ®Çu vÒ ng«n ng÷ siªu v¨n b¶n, tõ ®ã ®éc gi¶ kh«ng ph¶i ngì ngµng khi tiÕp tôc nghiªn cøu tiÕp nh÷ng vÊn ®Ò n©ng cao h¬n. B¹n cã thÓ ®äc vµ vËn dông mét c¸ch nhanh chãng nh÷ng vÊn ®Ò ®uîc bµn luËn trong tËp tµi liÖu nµy.Tuy nhiªn nh÷ng g× ®Ò cËp ë ®©y chØ lµ nh÷ng vÊn ®Ò c¬ b¶n ban ®Çu.§Ó t×m hiÓu thªm, b¹n cÇn tham kh¶o thªm ë nh÷ng cuèn s¸ch kh¸c chi tiÕt h¬n còng nh b¹n cÇn tù nghiªn cøu thªm. Kh«ng cã g× tèt h¬n lµ ®i vµo thùc tÕ nh ngêi ta thêng b¶o:"Muèn biÕt b¬i th× ph¶i nh¶y xuèng nuíc". Chóc b¹n ®¹t ®îc nh÷ng íc muèn khi ®äc cuèn s¸ch nµy. C¸c thµnh phÇn x¸c ®Þnh cÊu tróc d÷ liÖu lµ c¸c thµnh phÇn b¾t buéc ph¶i cã trong mét tµi liÖu siªu v¨n b¶n HTML. Ngoµi thµnh phÇn më ®Çu x¸c ®Þnh tªn vµ mét sè thuéc tÝnh ®Ó ph©n biÖt gi÷a c¸c tµi liÖu, chØ cã c¸c thµnh phÇn liÖt kª díi ®©y lµ b¾t buéc ®èi víi mçi mét tµi liÖu HTML ®Ó phï hîp víi chuÈn chung. Nh÷ng tõ kho¸ thiÕt yÕu nµy bao gåm: 1. ... 2. ... 3. ... B©y giê ta ®i vµo chi tiÕt c¸c tõ kho¸ nµy: ... a. CÆp tõ kho¸ nµy gióp nhËn d¹ng ra r»ng tµi liÖu cã chøa c¸c thµnh phÇn tu©n thñ theo chuÈn vÒ ng«n ng÷ siªu v¨n b¶n. Thµnh phÇn nµy ph¶i n»m tiÕp ngay sau phÇn më ®Çu vµ cÆp tõ kho¸ cã t¸c dông giíi h¹n toµn bé phÇn néi dung cßn l¹i, kÓ c¶ c¸c thµnh phÇn kh¸c. 1
b. Mét tµi liÖu ph¶i cã d¹ng tæng qu¸t sau: toµn bé néi dung tµi liÖu, kÓ c¶ c¸c thµnh phÇn kh¸c ®Òu n»m ë ®©y. c. CÆp tõ kho¸ ... kh«ng ®îc hiÓn thÞ lªn bëi c¸c bé duyÖt vµ chØ ®îc chøa c¸c thµnh phÇn vµ . ... a. Thµnh phÇn më ®Çu cña mét tµi liÖu HTML lµ mét su tËp kh«ng s¾p xÕp c¸c th«ng tin vÒ tµi liÖu ®ã.Trong ®ã cÆp tõ kho¸ ®Æt tiªu ®Ò còng lµ b¾t buéc: Giíi thiÖu vÒ HTML b. CÆp tõ khãa vµ kh«ng trùc tiÕp ¶nh hëng tíi c¸ch thÓ hiÖn tµi liÖu khi ta xem b»ng bé duyÖt. c. C¸c thµnh phÇn sau ®©y liªn quan tíi thµnh phÇn më ®Çu tµi liÖu, tuy kh«ng trùc tiÕp "t¹o d¸ng"nhng ( nÕu sö dông ) l¹i cung cÊp nh÷ng th«ng tin quan träng ®èi víi bé duyÖt: -cho phÐp khai b¸o ®Þa chØ c¬ së cña tµi liÖu. -Cho phÐp t×m kiÕm trong tµi liÖu theo tõ kho¸. -ChØ ra c¸c mèi quan hÖ gi÷a c¸c tµi liÖu. -T¹o tªn gäi ®ång nhÊt ho¸ cho tµi liÖu. -Cung cÊp th«ng tin h÷u Ých cho chÕ ®é truy nhËp server/clients Cho phÐp bé t×m tµi liÖu nguyªn ®ång d¹ng ( URL-Uniform o Resource Locator ) cña chÝnh tµi liÖu nµy ®îc ghi chÐp l¹i trong nhng t×nh huèng tµi liÖu cã thÓ bÞ tra l¹c ®Ò.C¸c URL trong tµi liÖu cã thÓ cã d¹ng côc bé mét c¸ch t ¬ng ®èi quy chiÕu trªn ®Þa chØ nµy. Chç nµo ®Þa chØ c¬ së kh«ng ®îc chØ râ,bé duyÖt sÏ lÊy URL mµ nã ®· dïng ®Ó truy ®Õn tµi liÖu lµm c¬ së ho¸ gi¶i c¸c URL 2
quy chiÕu t¬ng ®èi. Thµnh phÇn chØ cã mét thuéc tÝnh lµ HREF ®ång nhÊt ho¸ URL. Tõ kho¸ IsIndex th«ng b¸o cho bé duyÖt biÕt r»ng tµi liÖu ®îc "chØ o sè ho¸" ( cã liÖt kª c¸c tõ kho¸ vÊn ®Ò). Trong khi ®äc tµi liÖu ,ng - êi ®äc cã thÓ dïng chøc n¨ng t×m theo tõ kho¸ vÊn ®Ò,b»ng c¸ch thªm dÊu chÊm hái (?) vµo cuèi ®Þa chØ tµi liÖu vµ tiÕp theo lµ danh s¸ch c¸c tõ kho¸ vÊn ®Ò c¸ch nhau bëi dÊu céng(+). Ghi chó: Thµnh phÇn nµy thêng ®îc chÝnh m¸y chñ t¹o mét c¸ch o tù ®éng. NÕu ®îc gâ vµo cã thÓ khiÕn bé duyÖt tëng m¸y chñ cã thÓ ®¸p øng ®îc viÖc t×m kiÕm ®ã.Trong trêng hîp nµy, m¸y chñ ph¶i cã mét c¬ chÕ hçi trî viÖc nµy. Thµnh phÇn ®îc Netscspe bæ sung thªm thuéc tÝnh o PROMPT ®Ó gióp ta cã thÓ thay dßng th«ng b¸o mÆc ®Þnh ®Æt tríc trêng nhËn chuçi ký tù cÇn t×m b»ng mét dßng th«ng b¸o cña m×nh. Dßng th«ng b¸o mÆc ®Þnh ®ã lµ: this is a searchable index. Enter search keywords B»ng PROMPT, ch¼ng h¹n ta cã thÓ thay thµnh: Cã thÓ t×m trong tµi liÖu b»ng c¸c tõ kho¸ vÊn ®Ò. H·y nhËp tõ kho¸: ChØ ra mèi quan hÖ gi÷a tµi liÖu hiÖn thêi víi mét sè ®èi tîng o kh¸c, thêng lµ vÒ t¸c gi¶, môc tra cøu,... Lµ tham sè do phÇn mÒm hiÖu ®Ýnh tµi liÖu sinh ra ®Ó cã tªn duy o nhÊt cña tµi liÖu. Bé duyÖt cã thÓ bá qua thµnh phÇn nµy. 3
Dïng ®Ó ®a vµo tµi liÖu nh÷ng th«ng tin phô kh«ng ®Þnh nghÜa ®îc o b»ng c¸c thµnh phÇn kh¸c cña HTML. Th êng ®i kÌm víi HTTP- EQUIV, NAME, CONTENT. Nãi chung chØ cã ý nghÜa trong tµi liÖu ®éng ( thêng hay thay ®æi ). ... Chøa tÊt c¶ c¸c thµnh phÇn kh¸c còng nh néi dung tõ lêi v¨n ®Õn h×nh ¶nh cÊu thµnh nªn mét tµi liÖu, song kh«ng dÝnh d¸ng ®Õn sù bµi trÝ cña tµi liÖu ®ã ( chØ lµ dÊu hiÖu më ®Çu vµ kÕt thóc ). ... §¸nh dÊu côm tõ chØ ®Õn mét kÕt nèi siªu v¨n b¶n ( hypertext link ) mµ khi trá tíi nã, bé duyÖt sÏ dÉn d¾t ®Õn mét tµi liÖu hay mét ®o¹n v¨n b¶n kh¸c. Cã nhiÒu thuéc tÝnh nhng hoÆc NAME hoÆc HREF lµ c¸c thuéc tÝnh b¾t buéc. HREF NÕu cã HREF, côm tõ ®øng gi÷a sÏ thµnh siªu v¨n b¶n, nghÜa lµ nã trá ®Õn mét v¨n b¶n kh¸c chø kh«ng chØ mang néi dung thuÇn tuý. Khi chän vµo côm tõ ®ã, mét tµi liÖu kh¸c hoÆc ®o¹n tµi liÖu kh¸c trong cïng mét tµi liÖu ®ang xem mµ ®Þa chØ ®îc chØ ra bëi gi¸ trÞ cña thuéc tÝnh HREF sÏ ®îc hiÖn lªn. VÝ dô: Xem phÇn Gi¶i thÝch ®Ó biÕt thªm chi tiÕt. Trong vÝ dô trªn, khi chän vµo Gi¶i thÝch, trang tµi liÖu tõ m¸y chñ cã ®Þa chØ 190.2.0.1 cã tªn lµ gthich.htm sÏ ®îc lÊy vÒ vµ hiÓn thÞ trªn mµn h×nh bëi bé duyÖt. Dïng d¹ng HREF="#tªn_gäi" ®Ó chØ ®Õn mét ®iÓm mãc nèi kh¸c trong cïng tµi liÖu ®ang xÐt. VÝ dô: PhÇn glossary gi¶i thÝch c¸c thuËt ng÷ dïng trong tµi liÖu. 4
Trong vÝ dô nµy, khi chän vµo glossary ®a ta ®Õn mét ®iÓm mãc nèi kh¸c (®îc ®Þnh nghÜa b»ng ...) trong cïng tµi liÖu cã tªn lµ tailieu.htm. NÕu ®iÓm mãc nèi l¹i ë tµi liÖu kh¸c, HREF cã thÓ lµ URL t¬ng ®èi so víi ®Þa chØ cña tµi liÖu hiÖn thêi hay ®Þa chØ c¬ së ®· ®- îc x¸c ®Þnh ( b»ng ë trªn). NAME Dïng ®Ó ®Æt tªn cho ®iÓm mãc nèi vµ v× vËy ph¶i lµ duy nhÊt trong néi bé tµi liÖu hiÖn thêi mÆc dï tªn cã thÓ ®Æt tuú ý. VÝ dô: Cµ phª lµ mét vÝ dô vÒ lo¹i c©y... Mét vÝ dô vÒ lo¹i c©y nµy lµ Tõ tµi liÖu kh¸c cã thÓ tham chiÕu tíi b»ng c¸ch ®Æt tªn gäi vµo sau ®Þa chØ , ng¨n c¸ch b»ng mét dÊu #. VÝ dô: TITLE Thuéc tÝnh nµy chØ cã ý nghÜa th«ng b¸o vµ ® îc dïng ®Ó ®Æt ®Çu ®Ò cho tµi liÖu mµ ®Þa chØ do HREF chØ ra. §Çu ®Ò cÇn ph¶i lµ duy nhÊt ®èi víi tµi liÖu ®Ých. Nã cã Ých Ýt nhÊt lµ trong hai trêng hîp sau: Bé duyÖt cã thÓ hiÖn ®Çu ®Ò cña tµi liÖu tríc khi lÊy vÒ, ch¼ng h¹n o nh mét ghi chó nhá bªn lÒ hay trong mét khung nhá khi con trá chuét di qua ®iÓm mãc nèi (cã thÓ lµ mét côm tõ hay mét h×nh ¶nh), hay khi ®ang t¶i tµi liÖu ra (nhÊt lµ khi qua ®êng truyÒn cã tèc ®é kh«ng cao l¾m). C¸c thµnh phÇn ®Þnh d¹ng khèi dïng ®Ó t¹o d¹ng cña mét do¹n v¨n b¶n vµ ph¶i n»m trong phÇn th©n cña tµi liÖu. Cã nh÷ng cÆp tõ kho¸ quan träng sau ®©y: ...-§Þnh d¹ng phÇn ®Þa chØ. ...-§Þnh d¹ng s¸u møc tiªn ®Ò. -§êng ph©n c¸ch ngang tµi liÖu. ...-Giíi h¹n mét paragraph. 5
-BÎ dßng. ...-§o¹n v¨n b¶n ®· ®Þnh d¹ng s½n. ...-TrÝch dÉn nguån tµi liÖu kh¸c. ... Cho biÕt th«ng tin nh ®Þa chØ ,danh thiÕp vµ t¸c gi¶ thêng ®Æt ë ®Çu hay cuèi tµi liÖu. VÝ dô sö dông: Newsletter editor J.R.Brown JimquickPost News, Iumquick, CT 01234 Tel (123) 456 7890 KÕt qu¶ thùc hiÖn: Newsletter editor J.R.Brown JimquickPost News, Jumquick, CT 01234 Tel (123) 456 7890 ... MTML cã s¸u møc tiªu ®Ò (®Ò môc ) bao hµm kiÓu ph«ng ch÷, c¸ch ®o¹n tríc sau còng nh kho¶ng trèng cÇn thiÕt ®Ó thÓ hiÖn tiªu ®Ò. Møc cao nhÊt lµ H1 kÕ ®Õn H2,...H6. VÝ dô sö dông: C¸ch thÓ hiÖn c¸c tiªu ®Ò phô thuéc vµo bé duyÖt. Nhng th«ng th- êng th×: ... §êng kÎ ngang ( Horizontal Rule ) ng¨n c¸ch gi÷a c¸c phÇn trong tµi liÖu. VÝ dô: February 8, 1995, CERN ... 6
ChØ lµ giíi h¹n mét paragraph. C¸ch bµi trÝ do c¸c thµnh phÇn kh¸c t¹o thµnh. Thêng chØ cã kho¶ng trèng kho¶ng mét dßng hay nöa dßng tríc paragraph, trõ khi n»m trong phÇn ®Þa chØ ( trong ... ). Mét sè bé duyÖt thÓ hiÖn dßng ®Çu cña paragraph thôt vµo. VÝ dô: Tiªu ®Ò cña Paragraph §o¹n v¨n b¶n thuéc vÒ paragraph thø nhÊt. §o¹n v¨n b¶n thuéc vÒ paragraph thø hai.MÆc dï kh«ng nhÊt thiÕt ph¶i b¾t ®Çu b»ng dßng míi, song dïng c¸ch nµy gióp cho viÖc "lu tr÷" tµi liÖu dÔ dµng h¬n. §o¹n v¨n b¶n thø ba. Ghi chó: HTML 3.0 më réng tõ kho¸ nµy víi thuéc tÝnh c¨n lÒ. B¾t buéc xuèng dßng t¹i vÞ trÝ gÆp tõ kho¸ nµy. Dßng míi ®îc c¨n lÒ nh dßng ®îc bÎ tù ®éng khi dßng ®ã qu¸ dµi. VÝ dô: Smile an everlasting smile a smile could bring you near to me Ghi chó: Netscape më réng . ... ... Dïng ®Ó trÝch dÉn mét ®o¹n v¨n b¶n, thêng ®îc thÓ hiÖn b»ng ch÷ nghiªng cã c¨n lÒ lïi vµo trong ( nh mét paragraph ) vµ thêng cã mét dßng trèng trªn vµ díi. VÝ dô: I think the poem ends Soft you now, the fair Ophelia. Nymph, in thy orisons, be all my sins remembered.But I am not sure. I think the poem ends 7
Soft you now, the fair Ophelia. Nymph, in thy orisons, be a ll my sins remembered. But I am not sure. hç trî nhiÒu kiÓu lo¹i danh s¸ch , tÊt c¶ ®Òu cã thÓ lång vµo nhau vµ chØ HTML nªn dïng trong phÇn th©n cña tµi liÖu (...). ...-Danh s¸ch ®Þnh nghÜa. ...-Danh s¸ch kiÓu th môc. ...-Danh s¸ch kiÓu thùc ®¬n. ...-Danh s¸ch cã s¾p xÕp. ...-Danh s¸ch kh«ng s¾p xÕp. ... LËp danh s¸ch c¸c thuËt ng÷ vµ ®Þnh nghÜa t ¬ng øng. VÝ dô: TermThis is the difinition of the first term. TermThis is the difinition of the second term. KÕt qu¶ cña vÝ dô trªn: Term This is the difinition of the first term. Term This is the difinition of the second term. ®Ó chØ tªn thuËt ng÷, ®Ó chØ phÇn ®Þnh nghÜa. Sau ph¶i lµ . Cã thÓ cã thªm thuéc tÝnh COMPACT ®Ó chØ dÉn thªm lµ xÕp vµ theo tõng cÆp. Lóc ®ã sÏ ph¶i viÕt lµ vµ tiÕp theo còng vÉn ph¶i lµ : TermThis is the difinition of the first term. TermThis is the difinition of the second term. 8
KÕt qu¶ cña lÇn vÝ dô nµy: Term This is the difinition of the first term. Term This is the difinition of the second term. ... Danh s¸ch c¸c phÇn tö mµ trong ®ã mçi phÇn tö dµi ®Õn 20 kÝ tù. Sau b¾t buéc ph¶i lµ ( list item ): A-HI-NM-RS-Z KÕt qu¶ cña dßng v¨n b¶n nµy: A-H I-N M- R S-Z ... Danh s¸ch c¸c lùa chän trong mét thùc ®¬n. Sau ph¶i lµ ( list item ):
Third item in the list. o ... Danh s¸ch cã s¾p xÕp theo tr×nh tù hay møc ®é quan träng. Sau ph¶i lµ ( list item ) vµ cã thÓ cã thªm thuéc tÝnh COMPACT. First list item. Second list item. Third list item. 1. First list item. 2. Second list item. 3. Third list item. ... Còng nh nhng danh s¸ch kh«ng hÒ cã s¾p xÕp. VÝ dô: First list item. Second list item. Third list item. Cho kÕt qu¶: o First list item. o Second list item. o Third list item Khai b¸o lo¹i th«ng tin: ...-TrÝch dÉn. ...-VÝ dô vÒ m· lÖnh. ...-NhÊn m¹nh. ...-KÝ tù do ngêi dïng gâ vµo trªn bµn phÝm. ...-Nguyªn v¨n. 10
...-RÊt nhÊn m¹nh. ...-ChØ tªn biÕn hay tham sè. §Þnh d¹ng mÉu kÝ tù: ...-Ch÷ ®Ëm. ...-Ch÷ nghiªng. ...-Ch÷ ®¸nh trªn m¸y ch÷. ... This sentence, containing a citation reference would look like: This sentence, containing a citation reference would look like: ... Dïng ®Ó chØ ra mét ®o¹n ch¬ng tr×nh nguån ( m· lÖnh ). CÇn ph©n biÖt víi v¨n b¶n ®Þnh d¹ng s½n ( Preformatted Text ).VÝ dô: This sentence contains an example of code . It would look like: This sentence contains an example . It would look like: of code ... Tõ kho¸ nµy dïng ®Ó nhÊn m¹nh, ch¼ng h¹n: The Emphasis element tyically tenders as Italics. sÏ trë thµnh: The Emphasis element tyically renders as Italics. ... Thêng dïng trong híng dÉn sö dông ®Ó chØ r»ng kÝ tù lµ do ngêi dïng gâ vµo: The text inside the KBD element would typically renders as monospaced font. sÏ thÓ hiÖn lµ: The text inside the KBD renders as element would typically monospaced font. 11
... VÝ dô: A sequence of literal characters commonly renders as monospaced font. sÏ cho: A sequence of literal characters commonly renders as monospaced font ... Dïng ®Ó nhÊn m¹nh: The instrucstions must be read before continuing. sÏ cho kÕt qu¶ lµ: The instructions must be read before continuing. ... ChØ ra tªn biÕn hay tham sè: VÝ dô: When coding,LeftIndent()must be a variable. sÏ cho kÕt qu¶ lµ: When coding, LeftIndent() must be a variable ... ThÓ hiÖn b»ng ch÷ ®Ëm (bold): The instrucstions must be read before continuing. sÏ cho kÕt qu¶ lµ: 12
The instructions must be read before continuing. ... ThÓ hiÖn b»ng ch÷ nghiªng (Italics): Anything between the I elements should be Italics. sÏ cho kÕt qu¶ lµ: Anything between the I elements should be Italics ... ChØ ra r»ng nh÷ng kÝ tù gâ b»ng m¸y ch÷ hay teletip(teletype): Text between the typetype elements should be rendered in fixed width typewriter font. sÏ cho kÕt qu¶ lµ: Text between the typetype should be rendered in fixed elements width typewriter font. ... Dïng ®Ó lång h×nh ¶nh vµo tµi liÖu. Kh«ng dïng ®Ó chÌn siªu v¨n b¶n kh¸c. Cã thÓ cã thªm nh÷ng thuéc tÝnh sau: C¨n lÒ trªn ( TOP ) ,gi÷a ( MIDDLE ), díi ( BOTTOM ) c¸c kÝ tù v¨n b¶n ®èi víi h×nh ¶nh: Dïng trong trêng hîp cã thÓ bé duyÖt kh«ng hiÓu thÞ ®îc h×nh ¶nh ph¶i hiÖn dßng v¨n b¶n thay thÕ. VÝ dô: Be sure to read these instructions. 13
H×nh ¶nh cã d¹ng mét b¶ng ®å , nghÜa lµ cã chøa c¸c vïng ®îc "¸nh x¹" ®Õn nh÷ng URL vµ khi bÊm vµo c¸c vÞ trÝ kh¸c nhau trªn h×nh ¶nh sÏ dÉn ®Õn c¸c tµi liÖu kh¸c nhau.VÝ dô: §©y lµ thuéc tÝnh b¾t buéc, víi c¸c gi¸ trÞ lµ mét URL cña h×nh ¶nh ®îc lång vµo. Có ph¸p còng nh ë HREF trong thµnh phÇn liªn kÕt .VÝ dô: Be sure to read these instructions. 14