Bài giảng HTML - Ngôn ngữ đánh dấu siêu văn bản

HTML Ngôn ngữ đánh dấu siêu văn bản TRỊNH CÔNG DUY Khái quát Tạo lập trang Web là một vấn đề đơn giản, chỉ cần đánh văn bản vào rồi chèn thêm các ký hiệu đánh dấu, gọi là thẻ có dạng như sau:văn bản chịu tác động Tập tin HTML luôn bắt đầu bằng thẻ và kết thúc bằng Các file web tỉnh luôn có phần mở rộng là *.htm hay *.html nhằm báo cho trình duyệt biết mà thực thi. Các file web tỉnh không cần Server khi chạy, chỉ cần nhấn đôi vào là đã có thể thực thi. Tổng quan trang web Html Các trang Web khác nhau, tẻ nhạt hay sinh động, vô nghĩa hoặc rất cần thiết, nhưng tất cả đều có cùng một cấu trúc cơ sở, nên đa số các trình duyệt đang chạy trên hầu hết các kiểu máy tính đều có thể hiển thị thành công hầu hết các trang Web . Cấu trúc căn bản của trang web Tiêu đề ... Nội dung của trang Web I C¸c thÎ ®Þnh cÊu tróc tµi liÖu 1.1 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. Có ph¸p: 	 Tr×nh duyÖt sÏ xem c¸c tµi liÖu kh«ng sö dông thÎ nh­ nh÷ng tÖp tin v¨n b¶n b×nh th­êng. Nội dung 1.2 HEAD ThÎ HEAD ®­îc dïng ®Ó x¸c ®Þnh phÇn më ®Çu cho tµi liÖuCó ph¸p: 1.3 TITLE 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 đề Phần đầu 1.4 BODY ThÎ nµy ®­îc sö dông ®Ó x¸c ®Þnh phÇn néi dung chÝnh cña tµi liÖu - phÇn th©n (body) cña tµi liÖu. Trong phÇn th©n cã thÓ chøa c¸c th«ng tin ®Þnh d¹ng nhÊt ®Þnh ®Ó ®Æ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 C¸c tham sè cña thÎ BODY	 2.2. C¸c thÎ ®Þnh d¹ng ®Ò môc H1/H2/H3/H4/H5/H6 HTML hç trî 6 møc ®Ò môc 	 2.2. C¸c thÎ ®Þnh d¹ng xuèng dßng Khi gÆp thÎ nµy v¨n b¶n tù xuèng dßng Thẻ : Với thẻ này văn bản sẽ kết thóc mét ®o¹n vµ xuèng hµng (Kho¶ng c¸ch cña v¨n bµn míi vµ v¨n b¶n cò lín h¬n b×nh th­êng) Thẻ : Với thẻ này văn bản sẽ xuèng hµng gièng nh­ ta gâ Enter VÝ dô Cộng hoà xã hội chủ nghĩa Việt nam Độc lập - Tự do - Hạnh phúcĐơn xin việc Kết quả Cộng hoà xã hội chủ nghĩa Việt nam Độc lập - Tự do - Hạnh phúc  Đơn xin việc 2.3 §­êng kÎ ngang       Đường kẻ ngang chủ yếu được dùng để phân định một trang Web thành những phần có tính logic và dễ nhìn II. C¸c thÎ ®Þnh d¹ng v¨n b¶n 2.1 ThÎ … Cho phÐp ®Þnh d¹ng v¨n b¶n b»ng c¸c cÊu tróc cña chóng. Có ph¸p: … C¸c gi¸ trÞ cho tham sè ALIGN: 2.2 Sö dông mµu s¾c trong thiÕt kÕ 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 B¶ng mµu II. C¸c thÎ ®Þnh d¹ng v¨n b¶n 2.3 §Þnh d¹ng 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 2.3. Chän kiÓu ch÷ cho v¨n b¶n 	Có ph¸p: III. C¸c thÎ ®Þnh d¹ng danh s¸ch 1. Danh sách có trật tự Danh sách có trật tự tự động đánh số từng thành tố của d/s. 2. Danh sách không có trật tự Danh sách không  có trật tự đánh dấu (chẳng hạn các núm tròn) cho từng yếu tố của danh sách. 3. Danh sách định nghĩa Mỗi yếu tố của danh sách bao gồm hai thành phần:     Tiêu đề được căn lề phía trái (chỉ ra bởi thẻ )     Phần giải nghĩa được căn lề thụt hơn sang phía phải (chỉ ra bởi thẻ ) 4. Danh sách kiểu thực đơn Mỗi yếu tố của danh sách được cấp một chỉ số chẳng hạn như dấu tròn. Trông rất giống danh sách không có trật tự IV. Liªn kÕt siªu v¨n b¶n 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 - URL ®­îc tr×nh bµy ë trªn lµ URL tuyÖt ®èi. - URL t­¬ng ®èi hay cßn gäi lµ URL kh«ng ®Çy ®ñ. - 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. - 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. a. §Þa chØ t­¬ng ®èi b. C¸ch t¹o liªn kÕt siªu v¨n b¶n trong HTML §Ó t¹o ra mét siªu v¨n b¶n chóng ta sö dông thÎ 	 Có ph¸p: ... siªu v¨n b¶n Ví dụ: nhan vao day de kiem tra mail ý nghÜa c¸c tham sè: c. C¸ch t¹o liªn kÕt đÕn 1 ®Þa chØ mail 	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 Ví dụ: Trang WEB nµy ®­îc WEBMASTER b¶o tr× IV. ChÌn c¸c thÎ ©m thanh, h×nh ¶nh 5.1. 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 5.2. §­a ©m thanh vµo mét tµi liÖu HTML Có ph¸p: ThÎ nµy kh«ng cã thÎ kÕt thóc t­¬ng øng (). §Ó ch¬i lÆp l¹i v« h¹n cÇn chØ ®Þnh LOOP = -1 hoÆc LOOP = INFINITE. ThÎ BGSOUND ph¶i ®­îc ®Æt trong phÇn më ®Çu (tøc lµ n»m trong cÆp thÎ HEAD). 5.3. ChÌn mét h×nh ¶nh, mét ®o¹n video §Ó chÌn mét file ¶nh (.jpg, .gif, .bmp) hoÆc video (.mpg, .avi) vµo tµi liÖu HTML, cã thÓ sö dông thÎ IMG Bài tập ôn tập Index.htm News.htm Product.htm contact.htm Đưa thông tin vào 4 trang này. Cho phép liên kết giữa các trang và các website khác