Bài giảng HTML cơ sở

BÀI 1 : HTML c sơ ở 1-Thành ph n-Element:ầ M i m t trang HTML đ c t o b i nhi u thành ph n. Thành ph n nhỗ ộ ượ ạ ở ề ầ ầ ư m t h p ch a t ng n i dung c a trang Web. Thành ph n khai báo các đ c tính mà n i dung trongộ ộ ứ ừ ộ ủ ầ ặ ộ thành ph n s d a vào đó. Đ đi vào chi ti t c a thành ph n, tr c h t b n c n n m m t s thànhầ ẽ ự ể ế ủ ầ ướ ế ạ ầ ắ ộ ố ph n chính c a trang web sau đây: ầ ủ ủ : B t đ u và k t thúc c a văn b n (b t bu c có trong t t c văn b n HTML).ắ ầ ế ủ ả ắ ộ ấ ả ả ả : B t đ u và k t thúc ph n l u tr các thông tin quan tr ng c a văn b n. Ph n nàyắ ầ ế ầ ư ữ ọ ủ ả ầ không hi n th trên trình duy t.ể ị ệ ệ : C p th này ch a tiêu đ c a trang. Tiêu đ này n m trong trong ph nặ ẻ ứ ề ủ ề ằ ầ và đ c hi n th trên cùng c a trình duy t. Khai báo luôn có đ Searchượ ể ị ủ ệ ể Engine tìm trang. E :: Tag th ng không c n khóa . Tag này dùng đ khai báo cácườ ầ ể thông tin chi ti t v trang. Các khai báo bày th ng b t đ u nh : <meta name="discription" content="ế ề ườ ắ ầ ư n i dung...ộ ">, ho c . Các khai báo này cũng đ cượ dùng cho Search Engine. (Nên có) d : C p Tag này dùng đ liên k t t p tin ngòai vào trang Web, th ng là t p tinặ ể ế ậ ườ ậ Cascading style sheet v i ph n m r ng là css.ớ ầ ở ộ Ví d :ụ Khi khai báo nh v y Tag này không c n tag đóng (s đ c p trong ph n CSS).ư ậ ầ ẽ ề ậ ầ ầ : C p Tag này dùng đ nhúng phong cách Cascading Style Sheet. Có th đ t trongặ ể ể ặ ph n ho c đ t t i n i phong cách đ c áp d ng.ầ ặ ặ ạ ơ ượ ụ Ví d :ụ p {font-family:tahoma;verdana;font-size:14px; color:#000000;} : C p tag này dùng đ nhúng ng d ng Javascript, có th đ t trong ph nặ ể ứ ụ ể ặ ầ ho c t i v trí ng d ng đ c g i. (s đ c p trong ph n javascript).ặ ạ ị ứ ụ ượ ọ ẽ ề ậ ầ Ví d :ụ for(x=0; x f : Đây là c p tag ch a đ ng n i dung c a trang Web. Nh ng gì hi n th trênặ ứ ự ộ ủ ữ ể ị Browser n m trong c p tag này. (Riêng v i Frameset không c n khai báo)ằ ặ ớ ầ ầ : Đ c đ t ngay d i c p Tags: ượ ặ ướ ặ . V i Frameset không c nớ ầ c p Tags: . Ví d tài li u HTML này đ c trình bày theo ki u Frame. (s đ c pặ ụ ệ ượ ể ẽ ề ậ trong các bài h c)ọ ọ : Thông báo trình duy t r ng trang index có th tìm đ c n m trên server.ệ ằ ể ượ ằ ằ : Mô t b n HTML mà trang web đ nh d ng theo đó. (không b t bu c)ả ả ị ạ ắ ộ 2-Th -Tag:ẻ Th cũng là m t thành ph n c a trang. Đây chính là nh ng gì b n c n nh đ biên t pẻ ộ ầ ủ ữ ạ ầ ớ ể ậ trang HTML. Các th th ng đi theo c p và có c u trúc nh thành ph n chính, nghĩa là cũng có thẻ ườ ặ ấ ư ầ ẻ m và đóng. Th m b t đ u v i d u nh h n() vàở ẻ ở ắ ầ ớ ấ ỏ ơ ồ ế ầ ủ ẻ ồ ấ ớ ơ th đóng cũng t ng t nh ng có thêm d u chéo t i (/).ẻ ươ ự ư ấ ớ Ví d :ụ đ khai báo m t đ an văn b n trong trang HTML, ta gõ vào: ể ộ ọ ả n i dung đ an văn b nộ ọ ả . Trong đó : khai báo đ an văn b n s hi n th và : đóng khai báo đ an văn b n.ọ ả ẽ ể ị ọ ả M t s th không có tag đóng, ví d nh dùng đ xu ng hàng hay dùng đ v m t đ ngộ ố ẻ ụ ư ể ố ể ẽ ộ ườ ngang. 3-Thu c tính-Attribues và Giá tr -Values:ộ ị Thu c tính là m t thành ph n quan tr ng trong HTML. Thu c tính đ c s d ng đ đ nh nghĩa đ cộ ộ ầ ọ ộ ượ ử ụ ể ị ặ tính c a thành ph n và đ c đ t trong tag m c a thành ph n. Giá tr luôn đi kèm v i thu c tính đủ ầ ượ ặ ở ủ ầ ị ớ ộ ể xác đ nh đ c tính c a thành ph n. Đ n gi n là thu c tính đ t tên cho đ c tính và giá tr mô t đ c tínhị ặ ủ ầ ơ ả ộ ặ ặ ị ả ặ đó. Nh v y, m t thành ph n th ng có c u trúc:ư ậ ộ ầ ườ ấ • Tag m thành ph n.ở ầ • Thu c tính thành ph n, d u "=" và "Giá tr thành ph n"ộ ầ ấ ị ầ • Tag đóng thành ph n.ầ Ví d :ụ Đ hi n th ch màu xanh, ta dùng c p tag . Và ta yêu c u Browser b ng l nhể ể ị ữ ặ ầ ằ ệ sau: Ch gi a c p tag này s có màu xanhữ ở ữ ặ ẽ Trong đó: color: là thu c tính, và ộ giá trị ="blue" là giá tr c a thu c tính màu.ị ủ ộ L u ý:ư • Không ph i các thu c tính và giá tr đ u áp d ng cho t t c các thành ph n. Ví d : n u taả ộ ị ề ụ ấ ả ầ ụ ế dùng color="blue" trong th , trình duy t s b qua thu c tính và giá tr nàyẻ ệ ẽ ỏ ộ ị và l y m c nhiên c a nó (th ng là ch màu đen).ấ ặ ủ ườ ữ • Luôn luôn khai báo giá tr trong d u ngo c kép (" ") m c dù HTML, XHTML và XML khôngị ấ ặ ặ yêu c u.ầ • Font ch và phong cách ch n trong ch ng trình biên t p HTML không có tác d ng tr ngữ ọ ươ ậ ụ ọ Browser. • Dùng phím Enter và phím Cách (space) đ t o kh ang cách các ch cũng không có tác d ng.ể ạ ỏ ữ ụ HTML là ngôn ng Markup là v y. Mu n trình di n ki u nào, ph i khai báo Markup ki u đó, và đữ ậ ố ễ ể ả ể ể Markup ph i dùng đ n TAG.ả ế Ok, trong bài h c này b n c n đ ý đ n 4 thành ph n c b n c a trang là:ọ ạ ầ ể ế ầ ơ ả ủ • . • . • . • . Hãy b t đ u v i trang HTML đ u tiên c a b n.ắ ầ ớ ầ ủ ạ II-Trang HTML đ u tiên c a b n: ầ ủ ạ 1-M Notepad: T Windows, click Start/ ch n All Programs/ ch n Accessories/ Ch n Notepad,ở ừ ọ ọ ọ ch ng trình Notepad m ra nh hình d i:ươ ở ư ướ Trong c a s Notepad, click Format, ch n Word Wrap đ ch không tràn sang biên ph i mà t đ ngử ổ ọ ể ữ ả ự ộ xu ng hàng. Click Format m t l n n a, ch n Font, trong c a s Font này, tìm ch n Tahoma n u b nố ộ ầ ữ ọ ử ổ ọ ế ạ mu n hi n th ti ng Vi t khi gõ b ng Unikey hay b gõ ti ng Vi t h tr Unicode. ố ể ị ế ệ ằ ộ ế ệ ỗ ợ 2-Vi t Codes vào NotePad:ế Gõ vào Notepad các dòng codes sau đây: My first webpage Đây là trang Web đ u tiên c a tôi!!!ầ ủ 3-L u trang Notepad Untilted:ư Tr c tiên, b n nên t o m t th m c đ ch a các trang mà b n t o ra trong su t quá trình th c hành,ướ ạ ạ ộ ư ụ ể ứ ạ ạ ố ự đ t tên cho th m c này là ặ ư ụ html. Nên đ th m c này là th m c g c ể ư ụ ư ụ ố C:\html. T c a s Notepad v i File Untitled ch a các dòng codes b n m i gõ vào, click ừ ử ổ ớ ứ ạ ớ File ch n ọ Save as, c a s Save as m ra, ch n dĩa ch a th m c ử ổ ở ọ ứ ư ụ html nh hình d i:ư ướ 1. T i ô Filename: gõ vào tên file myfirstpage.html (nh r ng ph n m r ng là .html)ạ ớ ằ ầ ở ộ 2. T i ô Save as type: ch n All filesạ ọ 3. T i ô Encoding ch n: UTF-8 (Unicode Transformation Format-8).ạ ọ Xong click Save. 4-M trang myfirstpage.html v i Internet Explorer:ở ớ 1. Kh i đ ng Internet Explorer: ở ộ Trong Windows, click Start/ ch n ọ Internet Explorer. Trình duy t IE đ c n p vào. B n không c n ph i k t n i Internet. B qua l u ý: ệ ượ ạ ạ ầ ả ế ố ỏ ư The page could not display. Click trên th c đ n File, ch n Open: C a s Open m ra: Xem hình:ự ơ ọ ử ổ ở 2. Click Browse tìm đ n th m c html, file myfirstpage và click Open, b n th y trình duy t tìmế ư ụ ạ ấ ệ đ c file, ch ng h n nh hình minh h a d i:ượ ẳ ạ ư ọ ướ 3. Click OK, trang Web c a b n đ c IE m nh bên d i: ( đây ch trình bày m t ph n c aủ ạ ượ ở ư ướ ở ỉ ộ ầ ủ trang trên IE Browser): B n xem l i các dòng codes, r i b n xem n i dung hi n th c a trang. B n th y r ng dòng t a đạ ạ ồ ạ ộ ể ị ủ ạ ấ ằ ự ề hi n th trên cùng c a Browser. Dòng này đ c khai báo trong c p Tag thành ph n đ tể ị ủ ượ ặ ầ ặ trong . Ch có câu: ỉ Đây là trang Web đ u tiên c a tôi!!!ầ ủ mà b n đ t gi a c p tag hi n th .ạ ặ ữ ặ ể ị Đó là chính là n i dung c a trang Web.ộ ủ Nh v y, bài th c hành này c ng c l i lý thuy t v các thành ph n chính trong m c I c a bài h c.ư ậ ự ủ ố ạ ế ề ầ ụ ủ ọ Đ th c hành, b n hãy t o m t s trang và gõ vào th t nhi u ch , b n cũng có th b m phím cáchể ự ạ ạ ộ ố ậ ề ữ ạ ể ấ đ m r ng kh ang cách các ch , nh n phím Enter đ xu ng hàng. Sau đó l u file (nh r ng ph nể ở ộ ỏ ữ ấ ể ố ư ớ ằ ầ m r ng ph i là .html). M file b ng Browser, b n xem các kh ang cách và xu ng hàng mà b n đãở ộ ả ở ằ ạ ỏ ố ạ t o trong Notepad có hi n th trên Browser không? Bài 4 s giúp b n làm đ c đi u này.ạ ể ị ẽ ạ ượ ề BÀI 2 : Tiêu Đ , Đ an Văn, Đ an Trích D n, Xu ng Hàngề ọ ọ ẫ ố Trong m t văn b n, tiêu đ (header) th ng đ c vi t đ m và l n đ phân bi t v i n i dung c a vănộ ả ề ườ ượ ế ậ ớ ể ệ ớ ộ ủ b n. Đ t o tiêu đ trong trang HTML s d ng c p tags (Th ):ả ể ạ ề ử ụ ặ ẻ I-C p Tags tiêu đ : Header (h) tagặ ề Trong m t văn b n, tiêu đ (header) th ng đ c vi t đ m và l n đ phân bi t v i n i dung c a văn b n. Độ ả ề ườ ượ ế ậ ớ ể ệ ớ ộ ủ ả ể t o tiêu đ trong trang HTML s d ng c p tags (Th ): ạ ề ử ụ ặ ẻ 1-Cú pháp: Tên c a tiêu đ ủ ề Trong đó: • h: dùng đ khai báo tag tiêu đ s đ c dùng ể ề ẽ ượ • n: là s nguyên 1--> 6 luôn đi sau h đ xác đ nh kích th c ch tiêu đ . Đ n v tính: pixel. Theo th t :ố ể ị ướ ữ ề ơ ị ứ ự • h1: 20px • h2: 18px • h3:16px • h4: 14px • h5:12px • h6: 10px L u ý: ư Các giá tr trên ch t ng tr ng cho kh năng c a HTML. V i CSS, b n có th đ nh d ng th vàị ỉ ượ ư ả ủ ớ ạ ể ị ạ ẻ cho giá tr đ l n (pixels) tùy ý.ị ộ ớ Tag đóng tiêu đ t ng ng v i tag m nh ng ph i có thêm d u /: ề ươ ứ ớ ở ư ả ấ Xem ví d :ụ Vi t: Đây là Header 1</ế h1> Hi n th :ể ị Đây là Header 1 Vi t: Đây là Header 2</ế h2> Hi n th :ể ị Đây là Header 2 Vi t: Đây là Header 3</ế h3> Hi n th :ể ị Đây là Header 3 Vi t: Đây là Header 4</ế h4> Hi n th :ể ị Đây là Header 4 Vi t: Đây là Header 5</ế h5> Hi n th :ể ị Đây là Header 5 Vi t: Đây là Header 6</ế h6> Hi n th :ể ị Đây là Header 6 Th c hành: M Notepad ho c coderunner gõ vào đ an code bên d i: ự ở ặ ọ ướ header Đây là Header 1 Đây là header 2 Đây là Header 3 Đây là Header 4 Đây là Header 5 vh6>Đây là Header 6 L u t p tin trên v i tên ư ậ ớ heading.html. Dùng trình duy t m đ xem k t qu .ệ ở ể ế ả 2-Thu c tính và giá tr thu c tính c a h:ộ ị ộ ủ Đ canh biên trái ph i, gi a, cho th ể ả ữ ẻ h chúng ta dùng thu c tính đi kèm trong ộ h là align="giá tr ".ị Cú pháp: <hn align="giá tr ">ị n i dung tiêu đ ộ ề Trong đó: "giá tr " đ c thay th b ng:ị ượ ế ằ • justify :canh đ u 2 biên trái ph i. Dùng trong tr ng tiêu đ dài h n 2 dòng thì 2 biên trái ph i đ uề ả ườ ề ơ ả ề nhau. Khác v i ki u đánh máy ch . ớ ể ữ • left :canh trái (m c nhiên, không c n khai báo) ặ ầ • right :canh ph i ả • center :canh gi a ữ Ví d : Header này đ c canh gi aụ ượ ữ Header này đ c canh gi aượ ữ Header này đ c canh ph iượ ả Header này đ c canh ph iượ ả Header này m c nhiên là canh biên tráiặ Header này m c nhiên canh biên tráiặ II-C p Tags Đ an Văn: Paragraph Tagặ ọ Đ hi n th n i dung c a m t đ an văn b n ta s d ng c p tag: . Khác v i vi c nh p n i dung tr cể ể ị ộ ủ ộ ọ ả ử ụ ặ ớ ệ ậ ộ ự ti p nh trong bài 3, ngòai vi c t đ ng xu ng hàng, cách m t dòng khi b t đ u m t đ an văn b n khác, c pế ư ệ ự ộ ố ộ ắ ầ ộ ọ ả ặ tags: còn có th đ nh d ng canh đ u 2 biên, canh ph i, canh gi a. M c nhiên, kh ang cách gi a cácể ị ạ ề ả ữ ặ ỏ ữ dòng trong văn b n đã đ c thi t l p trong trình duy t. Đ đ nh d ng kh ang cách gi a các hàng, các ch cũngả ượ ế ậ ệ ể ị ạ ỏ ữ ữ nh nhi u thu c tính khác c a chúng ta ph i dùng đ n Cascading Style Sheet(CSS).ư ề ộ ủ ả ế 1-Cú pháp: N i dung c a đ an văn b nộ ủ ọ ả Ví d : Vi t: ụ ế N u ch h c HTML mà không n m cách s d ng c a Cascading Style Sheet thì ch a th đi u khi n đ cế ỉ ọ ắ ử ụ ủ ư ể ề ể ượ trang web nh ý mu n. CSS, ngôn ng v i cú pháp riêng giúp chúng ta trình bày m t trang web v ng và g nư ố ữ ớ ộ ữ ọ gàng h n. Trong khi ph i l p đi l p l i vi c gõ các tag và thu c tính c a chúng đ áp d ng vào t ng ch , bi uơ ả ậ ậ ạ ệ ộ ủ ể ụ ừ ữ ể b ng... v i CSS, b n ch vi c gán thu c tính và giá tr r i dùng chúng đ đ nh d ng cho tòan b trang web ho cả ớ ạ ỉ ệ ộ ị ồ ể ị ạ ộ ặ nhi u trang Web trên cùng m t server.ề ộ Hi n th trên trình duy t:ể ị ệ N u ch h c HTML mà không n m cách s d ng c a Cascading Style Sheet thì ch a th đi u khi n đ cế ỉ ọ ắ ử ụ ủ ư ể ề ể ượ trang web nh ý mu n. CSS, ngôn ng v i cú pháp riêng giúp chúng ta trình bày m t trang web v ng vàng vàư ố ữ ớ ộ ữ g n gàng h n. Trong khi ph i l p đi l p l i vi c gõ các tag và thu c tính c a chúng đ áp d ng vào t ng ch ,ọ ơ ả ậ ậ ạ ệ ộ ủ ể ụ ừ ữ bi u b ng... V i CSS ta có th gán thu c tính và giá tr cho t ng elements và tags, r i l u chúng b ng 1 t p tinể ả ớ ể ộ ị ừ ồ ư ằ ậ có ph n m r ng là .css, dùng t p tin này đ đ nh d ng layout m t ho c nhi u trang Web trên Server.ầ ở ộ ậ ể ị ạ ộ ặ ề 2-Thu c tính và giá tr thu c tính c a :ộ ị ộ ủ Cũng gi ng nh v i , thu c tính c a là ố ư ớ ộ ủ align= và giá tr c a ị ủ align= là: • center :canh gi a. ữ • justify:canh đ u 2 biên ề • left :ho c không khai báo align: m c nhiên ặ ặ • right :canh biên ph i. ả Ví d : Đ an văn b n này đ c canh đ u hai biên. Vi t: ụ ọ ả ượ ề ế N u ch h c HTML mà không n m cách s d ng c a Cascading Style Sheet thì ch a thế ỉ ọ ắ ử ụ ủ ư ể đi u khi n đ c trang web nh ý mu n. CSS, ngôn ng v i cú pháp riêng giúp chúng ta trình bày m t trangề ể ượ ư ố ữ ớ ộ web v ng vàng và g n gàng h n. Trong khi ph i l p đi l p l i vi c gõ các tag và thu c tính c a chúng đ ápữ ọ ơ ả ậ ậ ạ ệ ộ ủ ể d ng vào t ng ch , bi u b ng... V i CSS ta có th gán thu c tính và giá tr cho t ng elements và tags, r i l uụ ừ ữ ể ả ớ ể ộ ị ừ ồ ư chúng b ng 1 t p tin có ph n m r ng là .css, dùng t p tin này đ đ nh d ng layout m t ho c nhi u trang Webằ ậ ầ ở ộ ậ ể ị ạ ộ ặ ề trên Server. Hi n th trên trình duy t: ể ị ệ N u ch h c HTML mà không n m cách s d ng c a Cascading Style Sheet thì ch a th đi u khi n đ cế ỉ ọ ắ ử ụ ủ ư ể ề ể ượ trang web nh ý mu n. CSS, ngôn ng v i cú pháp riêng giúp chúng ta trình bày m t trang web v ng vàng vàư ố ữ ớ ộ ữ g n gàng h n. Trong khi ph i l p đi l p l i vi c gõ các tag và thu c tính c a chúng đ áp d ng vào t ng ch ,ọ ơ ả ậ ậ ạ ệ ộ ủ ể ụ ừ ữ bi u b ng... V i CSS ta có th gán thu c tính và giá tr cho t ng elements và tags, r i l u chúng b ng 1 t p tinể ả ớ ể ộ ị ừ ồ ư ằ ậ có ph n m r ng là .css, dùng t p tin này đ đ nh d ng layout m t ho c nhi u trang Web trên Server.ầ ở ộ ậ ể ị ạ ộ ặ ề Đ ý: ể hai biên trái ph i đ c canh th ng đ u, không l i lõm theo ki u đánh máy ch .ả ượ ẳ ề ồ ể ữ Ví d : Đ an văn b n này đ c canh ph i. Vi t: ụ ọ ả ượ ả ế N u ch h c HTML mà không n m cách s d ng c a Cascading Style Sheet thì ch a th đi uế ỉ ọ ắ ử ụ ủ ư ể ề khi n đ c trang web nh ý mu n. CSS, ngôn ng v i cú pháp riêng giúp chúng ta trình bày m t trang webể ượ ư ố ữ ớ ộ v ng vàng và g n gàng h n. Trong khi ph i l p đi l p l i vi c gõ các tag và thu c tính c a chúng đ áp d ngữ ọ ơ ả ậ ậ ạ ệ ộ ủ ể ụ vào t ng ch , bi u b ng... V i CSS ta có th gán thu c tính và giá tr cho t ng elements và tags, r i l u chúngừ ữ ể ả ớ ể ộ ị ừ ồ ư b ng 1 t p tin có ph n m r ng là .css, dùng t p tin này đ đ nh d ng layout m t ho c nhi u trang Web trênằ ậ ầ ở ộ ậ ể ị ạ ộ ặ ề Server. Hi n th trên trình duy t: ể ị ệ N u ch h c HTML mà không n m cách s d ng c a Cascading Style Sheet thì ch a th đi u khi n đ cế ỉ ọ ắ ử ụ ủ ư ể ề ể ượ trang web nh ý mu n. CSS, ngôn ng v i cú pháp riêng giúp chúng ta trình bày m t trang web v ng vàng vàư ố ữ ớ ộ ữ g n gàng h n. Trong khi ph i l p đi l p l i vi c gõ các tag và thu c tính c a chúng đ áp d ng vào t ng ch ,ọ ơ ả ậ ậ ạ ệ ộ ủ ể ụ ừ ữ bi u b ng... V i CSS ta có th gán thu c tính và giá tr cho t ng elements và tags, r i l u chúng b ng 1 t p tinể ả ớ ể ộ ị ừ ồ ư ằ ậ có ph n m r ng là .css, dùng t p tin này đ đ nh d ng layout m t ho c nhi u trang Web trên Server.ầ ở ộ ậ ể ị ạ ộ ặ ề III-C p Tags Trích Đ an: ặ ọ 1-Cú pháp: N i dung c a trích đ anộ ủ ọ Dùng c p tag này khi mu n trích d n m t đ an văn b n, và đ an văn b n s th t l (indent) tùy theo s l nặ ố ẫ ộ ọ ả ọ ả ẽ ụ ề ố ầ m và đóng. M bao nhiêu thì đóng b y nhiêu.ở ở ấ Ví d : Vi t: ụ ế N u ch h c HTML mà không n m cách s d ng c a Cascading Style Sheet thìế ỉ ọ ắ ử ụ ủ ch a th đi u khi n đ c trang web nh ý mu n. CSS, ngôn ng v i cú pháp riêng giúp chúng ta trình bày m tư ể ề ể ượ ư ố ữ ớ ộ trang web v ng vàng và g n gàng h n. Trong khi ph i l p đi l p l i vi c gõ các tag và thu c tính c a chúng đữ ọ ơ ả ậ ậ ạ ệ ộ ủ ể áp d ng vào t ng ch , bi u b ng... V i CSS ta có th gán thu c tính và giá tr cho t ng elements và tags, r iụ ừ ữ ể ả ớ ể ộ ị ừ ồ l u chúng b ng 1 t p tin có ph n m r ng là .css, dùng t p tin này đ đ nh d ng layout m t ho c nhi u trangư ằ ậ ầ ở ộ ậ ể ị ạ ộ ặ ề Web trên Server. Hi n th trên trình duy t: ể ị ệ N u ch h c HTML mà không n m cách s d ng c a Cascading Style Sheet thì ch a th đi u khi n đ cế ỉ ọ ắ ử ụ ủ ư ể ề ể ượ trang web nh ý mu n. CSS, ngôn ng v i cú pháp riêng giúp chúng ta trình bày m t trang web v ng vàng vàư ố ữ ớ ộ ữ g n gàng h n. Trong khi ph i l p đi l p l i vi c gõ các tag và thu c tính c a chúng đ áp d ng vào t ng ch ,ọ ơ ả ậ ậ ạ ệ ộ ủ ể ụ ừ ữ bi u b ng... V i CSS ta có th gán thu c tính và giá tr cho t ng elements và tags, r i l u chúng b ng 1 t p tinể ả ớ ể ộ ị ừ ồ ư ằ ậ có ph n m r ng là .css, dùng t p tin này đ đ nh d ng layout m t ho c nhi u trang Web trên Server.ầ ở ộ ậ ể ị ạ ộ ặ ề 2-Thu c tính và giá tr thu c tính c a :ộ ị ộ ủ C p tag này không có thu c tính và giá tr tr vi c s d ng trích d n ngay trong dòng b ng cú pháp: ặ ộ ị ừ ệ ử ụ ẫ ằ <q xml:lang="xx">. Và đ ghi rõ trích d n t m t trang Web khác b n dùng cú pháp <blockquoteể ẫ ừ ộ ạ cite="URL"> IV-Tag Xu ng Hàng: Break a line tag và ch ng xu ng hàng .ố ố ố 1-Tag xu ng hàng:ố Khi vi t th ng vào HTML không c n s d ng Paragraph tag (p tag), b n có th s d ng Tag: đ xu ngế ẳ ầ ử ụ ạ ể ử ụ ể ố hàng. Tag này không có tag đóng.. Ví d : Vi t: ụ ế H : Tên: Đ a ch -email:ọ ị ỉ Hi n th trên trình duy t: ể ị ệ H : Tên: Đ a ch e-mail:ọ ị ỉ 2-Tag ch ng xu ng hàng: ố ố Tag này th ng s d ng trong m t câu l nh hay môt hành đ ng dài c a đ an mã Javascript. . ườ ử ụ ộ ệ ộ ủ ọ Cú Pháp: . B n s th y vi c s d ng h u hi u tag này trong các đ an Javascript cao c p.ạ ẽ ấ ệ ử ụ ữ ệ ọ ấ 3-Thu c tính và giá tr thu c tính c a ộ ị ộ ủ Tag này có m t thu c tính ộ ộ Clear dùng đ ngăn vi c xu ng dòng t đ ng. ể ệ ố ự ộ Cú pháp: Tag này th ng đ c dùng trong các đo n Javascript nh Rolling Text ho c Crossmarque, khi đó l nh xu ngườ ượ ạ ư ặ ệ ố hàng s làm cho đo n mã hi n th không đúng.ẽ ạ ể ị V-T o kh ang tr ng: ạ ỏ ố none breaking space 1-Cú pháp: Đ t o kh ang tr ng gi a các ch ho c n i dung ta dùng . Không có đóng m cho l nh này.ể ạ ỏ ố ữ ữ ặ ộ ở ệ Ví d : Vi t: ụ ế Khi ch a bi t CSS, mu n th t l tôi ph i dùng bao nhiêu là nh v y.ư ế ố ụ ề ả ư ậ Hi n th trên trình duy t: ể ị ệ Khi ch a bi t CSS CSS, mu n th t l tôi ph i dùng bao nhiêu là nh v y.ư ế ố ụ ề ả ư ậ VI-Tag v đ ng g ch ngang: ẽ ườ ạ H orizontal Rule (HR) tag 1-Cú pháp: Đ v m t đ ng ngang trong trang dùng tag: . Đây là m t tag đ n và do đó không có Tag đóng. ể ẽ ộ ườ ộ ơ 2-Thu c tính và giá tr thu c tính c a ộ ị ộ ủ Có 5 thu c tính cho đó là:ộ • align= :Canh biên. Giá tr là: right,center, left (m c nhiên) ị ặ • noshade :Khi mu n hi n th đ ng ngang không có bóng m . ố ể ị ườ ờ • size= :Đ dày c a đ ng ngang. Giá tr : s 1,2 ho c 3. ộ ủ ừơ ị ố ặ • width= :Đ r ng(đ dài chi u ngang). Giá tr là px ho c % ộ ộ ộ ề ị ặ • color= :Màu Dùng tên màu nh red, green, blue ho c hexadecimal nh : #0000FF, #FFCC99... ư ặ ư Ví d :ụ Vi t: ế Hi n th trên trình duy t: ể ị ệ VII-Canh gi a n i dung: ữ ộ tag Khi không s d ng ho c cho đ an văn b n, b n có th dùng c p Thử ụ ặ ọ ả ạ ể ặ ẻ đ canh gi a n i dung ể ữ ộ Ví d : Vi t: ụ ế Canh gi a n i dung nàyữ ộ Hi n th trên trình duy t: ể ị ệ Canh gi a n i dung nàyữ ộ C p tag này cũng đ c dùng đ canh nh, form vào gi a trang.ặ ượ ể ả ữ BÀI 3 : Đ nh d ng chị ạ ữ Trong bài h c này chúng ta s n m cách s d ng các th đ nh d ng ch Đ m, ọ ẽ ắ ử ụ ẻ ị ạ ữ ậ Nghiêng, G ch d iạ ướ ... trong trang HTML. I-Ch Đ m: Bold (b) tag Đ làm cho ch ữ ậ ể ữ đ mậ ta s d ng c p tag: 1-Cú pháp: a-C p Tags: : ử ụ ặ ặ ch c n làm đ mữ ầ ậ . Trong đó: • :tag khai báo ch đ m. ữ ậ • :tag đóng ch đã đ c làm đ m. N u b n s ý không đóng b ng tag này, ch đ m s nh h ngữ ượ ậ ế ạ ơ ằ ữ ậ ẽ ả ưở lên các n i dung khác trong văn b n. ộ ả Ví d :ụ Vi t:ế Hi n th trên trình duy t:ể ị ệ Đ an này s Đ mọ ẽ ậ Đ an này s Đ mọ ẽ ậ 2-Thu c tính và giá tr thu c tính c a: , Các c p tag này không có thu c tính và giáộ ị ộ ủ ặ ộ tr . ị II-Ch Nghiêng: ữ Italic (i) tag Đ làm cho ch ể ữ nghiêng ta s d ng c p tag: ho c ử ụ ặ ặ 1-Cú pháp: a-C p Tags: ặ ch nghiêngữ Trong đó: • :tag khai báo ch nghiêng. ữ • :tag đóng ch đã đ c làm nghiêng. Luôn có tag này. ữ ượ Ví d :ụ Vi t: ế Hi n th trên trình duy t:ể ị ệ Đ an này s nghiêngọ ẽ Đ an này s nghiêngọ ẽ b-C p Tags: cũng đ c dùng đ làm ch nghiêng. Cú pháp và ví d t ng t , thay th ặ ượ ể ữ ụ ươ ự ế i b ng ằ em. Ngòai ra chúng ta cũng có th dùng c p tags Ch nghiêng đ làm ch nghiêng,ể ặ ữ ể ữ nh ng n i dung trong c p tags này t đ ng xu ng hàng.ư ộ ặ ự ộ ố Các c p tags : ặ ch nghiêngữ , Ch nghiêngữ , Ch nghiêngữ , cũng có tác d ng làm nghiêng ch nh ng ít đ c s d ng nh tags ụ ữ ư ựơ ử ụ ư 2-Thu c tính và giá tr thu c tính c a: , ộ ị ộ ủ Các c p tag này không có thu c tính và giá tr .ặ ộ ị III-Ch G ch D i: ữ ạ ướ Underline (u) tag Đ làm cho ch ể ữ g ch d iạ ướ ta s d ng c p tag: và ử ụ ặ 1-Cú pháp: a-C p Tags: ặ ch c n g ch d iữ ầ ạ ướ Trong đó: • :tag khai báo g ch d i. ạ ướ • :tag đóng ch đã đ c g ch d i. Luôn có. ữ ượ ạ ướ Ví d :ụ Vi t:ế Hi n th trên trình duy t:ể ị ệ I like HTML I like HTML b-C p Tags: đ chèn m t đ an ch có g ch d i vào n i d ng:. Cú pháp t ng t .ặ ể ộ ọ ữ ạ ướ ộ ụ ươ ự Ví d :ụ Vi t:ế Hi n th trên trình duy t:ể ị ệ I like HTML I like HTML 2-Thu c tính và giá tr thu c tính c a: và :ộ ị ộ ủ Các c p tag này không có thu c tính và giá tr . ặ ộ ị IV-Ch G ch Gi a: ữ ạ ữ Strike (strike) tag 1-Cú pháp: Ta có th vi t: ể ế ch g ch gi a ho c ch g ch gi aữ ạ ữ ặ ữ ạ ữ Trong đó: • :tag khai báo g ch gi a. ạ ữ • :tag đóng ch đã đ c g ch gi a. ữ ượ ạ ữ Ví d :ụ Vi t:ế Hi n th trên trình duy t:ể ị ệ Giá cũ: 250.000 đ ngồ Giá cũ: 250.000 đ ngồ V-Ch to h n: Big (big) tagữ ơ Đ làm cho ch l n h n c ch hi n t i, ta s d ng c p tag: ể ữ ớ ơ ỡ ữ ệ ạ ử ụ ặ 1-Cú pháp:Ch to h nữ ơ Trong đó: • :tag khai báo làm ch to h n. ữ ơ • :tag đóng ch đã đ c làm to. ữ ượ Ví d :ụ Vi t:ế Hi n th trên trình duy t:ể ị ệ Ch này to h nữ ơ Ch này to h nữ ơ 2-Thu c tính và giá tr thu c tính c a: ộ ị ộ ủ Các c p tag này không có thu c tính và giá tr .ặ ộ ị VI-Ch nh h n: ữ ỏ ơ Small (small) tag Đ làm cho ch nh h n c ch hi n t i, ta s d ng c p tag: ể ữ ỏ ơ ỡ ữ ệ ạ ử ụ ặ 1-Cú pháp:Ch nh h nữ ỏ ơ Trong đó: • :tag khai báo làm ch nh h n. ữ ỏ ơ • : tag đóng ch đã đ c làm nh . ữ ượ ỏ Ví d :ụ Vi t:ế Hi n th trên trình duy t:ể ị ệ Ch này nhữ ỏ h nơ Ch này nh h nữ ỏ ơ 2-Thu c tính và giá tr thu c tính c a: ộ ị ộ ủ Các c p tag này không có thu c tính và giá tr .ặ ộ ị Đ th c hành, b n hãy m Notepad, sau đó vi t các đo n codes trong các bài ví d trên và l u t p tinể ự ạ ở ế ạ ụ ư ậ format_text.html BÀI 4 : Đ nh d ng Font Ch , Màu ch , C chị ạ ữ ữ ỡ ữ H ng d n đ nh d ng ch , màu ch v i th .ướ ẫ ị ạ ữ ữ ớ ẻ I-Font ch : tagữ tags dùng đ khai báo font ch , màu ch và c ch s d ng trong đ an văn b n hayể ữ ữ ỡ ữ ử ụ ọ ả tiêu đ , hay m t đ an trích d n... Khi khai báo ph i kèm theo thu c tính và giá tr c a nó.ề ộ ọ ẫ ả ộ ị ủ Cú pháp: ộ ị Trong đó: • :khai báo font tag s đ c dùng. ẽ ượ • Thu c tính: Có 3 thu c tính là: ộ ộ color, face và size. • :tag đóng. Ví d :ụ Vi t:ế Hi n th trên trình duy t:ể ị ệ Ch màu đ ữ ỏ Ch màu đữ ỏ Ch màu xanh, m c 1ữ ứ Ch màu xanh, m c 1ữ ứ Ch màu h ng, fontữ ồ arial Ch màu h ng, font arial ữ ồ Ch màu chanh, fontữ tahoma, m c -1 ứ Chữ màu chanh, font  tahoma, mức ­1 II-Giá tr màu, font ch và kích th c ch c a: tagị ữ ướ ữ ủ 1-Giá tr màu:ị Có hai cách khai báo màu ph bi n đó là:ổ ế a-S d ng tên màu: g m 16 tênử ụ ồ . Khai báo nh sau:ư • Màu aqua • Màu black • Màu blue • Màu fuchsia • Màu gray • Màu green • Màu lime • Màu maroon • Màu navy • Màu olive • Màu purple • Màu red • Màu silver • Màu teal • Màu white • Màu yellow b-S d ng giá tr Hexadecimal:ử ụ ị Cách khai báo: Luôn b t đ u b ng d u #.ắ ầ ằ ấ D i đây là ví d bi u di n 16 tên màu b ng giá tr Hex. Đ có thêm nhi u màu b n c n tham kh oướ ụ ễ ễ ằ ị ể ề ạ ầ ả B ng màu 1 trong m c l c. Ngòai ra, b n cũng có th s d ng giá tr Hex trong b ng màu 2.ả ụ ụ ạ ể ử ụ ị ả Ví d :ụ • Màu aqua • Màu black • Màu blue • Màu fuchsia • Màu gray • Màu green • Màu lime • Màu maroon • Màu navy • Màu olive • Màu purple • Màu red • Màu silver • Màu teal • Màu white • Màu yellow 2-Font ch : ữ 3 Font ch Unicode h tr d u ti ng Vi t cho Web ph bi n là: arial, verdana và tahoma. Dùng b gõữ ỗ ợ ấ ế ệ ổ ế ộ h tr Unicode nh Unikey và ch n l u file là Unicode UTF-8 thì trình duy t s hi n th d u Ti ngỗ ợ ư ọ ư ệ ẽ ể ị ấ ế Vi t. ệ Khai báo nh sau:ư • Font tahoma • Font arial • Font verdana 3-C ch :ỡ ữ • C r t l n ỡ ấ ớ • C l n ỡ ớ • C v a ỡ ừ • C nh ỡ ỏ • C policy th tín d ng ỡ ẻ ụ • C policy cho m n xe ỡ ướ III-Bài th c hành:ự M Notepad và gõ vào bài th c hành sau:ở ự Fotmat_font Bài th c hành sự ố 2 <font color="blue" size="+1">V i font tags ,ớ chúng ta có th ch n đ c màuể ọ ượ cho ch , kích th c cho font ch nh ch <fontữ ướ ữ ư ữ size="-2">r t nh , ch fontấ ỏ ữ face verdana. BÀI 5 : T o danh sách (list)ạ M t vài ví d s d ng th HTML đ trình bày Danh m c.ộ ụ ử ụ ẻ ể ụ I-Danh sách không theo th t : <ul> </ul> (Unordered List)ứ ự tags dùng đ t o danh sách không theo th t , tag này g m có thu c tính và thành ph n t oể ạ ứ ự ồ ộ ầ ạ danh sách. 1-Cú pháp: ộ ị M c trong danh sáchụ M c trong danh sách</li>ụ ............................ Trong đó: T :khai báo mmt danh sách s đ c dùng.ộẽượ ợ Thuuc tính: ộ type= t :Thành phhn khai báo m c c a danh sách. Giá tr : ầụ ủ ị type="ký t "ự ự :Tag đóng mmc. (Tag này là tùy ch n, không c n đóng cũng đ c.)ụọ ầ ượ ợ :Tag đóng. Ví d :ụ Vi t:ế Hi n th trên trình duy t:ể ị ệ M c 1 ụ M c 2 ụ M c 3 ụ 1. M c 1 ụ 2. M c 2 ụ 3. M c 3 ụ M c 1 ụ M c 2 ụ M c 5 ụ M c 6 ụ 1. M c 1 ụ 2. M c 2 ụ 1. M c 5 ụ 2. M c 6 ụ 3. M c 7 ụ M c 7 ụ M c nhiên, khi m t danh sách đ c khai báo thì m c đ u tiên s t đ ng xu ng 1 hàng vào th t l .ặ ộ ượ ụ ầ ẽ ự ộ ố ụ ề 2-Giá tr thu c tính c a Tag: ị ộ ủ ủ : BBt đ u danh sách theo th t 1,2,3.(m c nhiên)ắầ ứ ự ặ ặ : Danh sách bb t đ u là các ch m vuông đen.ắầ ấ ấ : Danh sách bb t đ u là vòng tròn r ng.ắầ ỗ ỗ : Danh sách bb t đ u là 1 vòng tròn đen.ắầ ầ :Danh sách bb t đ u s La Mã hoa.ắầ ố ố : Danh sách bb t đ u s La Mã th ng.ắầ ố ườ ờ : Danh sách bb t đ u ch cái Hoa.ắầ ữ ữ : Danh sách bb t đ u ch th ng. ắầ ữ ườ Xem ví d :ụ Vi t:ế Hi n th trên trình duy t:ể ị ệ M c th t 1 ụ ứ ự M c th t 2 ụ ứ ự M c th t 3 ụ ứ ự 1. M c th t 1 ụ ứ ự 2. M c th t 2 ụ ứ ự 3. M c th t 3 ụ ứ ự M c v i ô vuông đen. </ụ ớ li>  M c v i ô vuông đen. ụ ớ M c v i ô tròn r ng.ụ ớ ỗ o M c v i ô tròn r ng ụ ớ ỗ M c v i ô tròn đen.ụ ớ • M c v i ô tròn đen ụ ớ 3-T o danh sách nhi u t ng: Đ t o danh sách nhi u t ng, b n có th l ng m t danh sách vào trongạ ề ầ ể ạ ề ầ ạ ể ồ ộ m t danh sách. Xem ví d :ộ ụ Vi t:ế Hi n th trên trình duy t:ể ị ệ Ch ng 1:ươ Bài Lý thuy t 1. ế Bài Lý thuy t 2. ế Bài Lý thuy t 3. ế </li> Ch ng 2:ươ Bài Th c Hành 1. ự Bài Th c Hành 2. ự Bài Th c Hành 3. ự 1. Ch ng 1:ươ • Bài Lý thuy tế 1. • Bài Lý thuy tế 2. • Bài Lý thuy tế 3. 2. Ch ng 2:ươ ♣ Bài Th c Hànhự 1. ♣ Bài Th c Hànhự 2. ♣ Bài Th c Hànhự 3. II-Danh sách th t : ứ ự &(Ordered List) Ordered List đ t o danh sách theo th t s ho c ch . Cũng gi ng nh khai báo c a ể ạ ứ ự ố ặ ữ ố ư ủ , nh ng c p tags này còn có thêm thu c tính ư ặ ộ Start và giá tr .ị Ví d :ụ Vi t:ế Hi n th trên trình duy t:ể ị ệ Order List hi n th m c v i s th t .ễ ị ụ ớ ố ứ ự HTML không x p th t các m c.ế ứ ự ụ Nó ch thêm s th t vào m i m cỉ ố ứ ự ỗ ụ B n ph i t x p th t .ạ ả ự ế ứ ự 1. Order List hi n th m c v i s thể ị ụ ớ ố ứ t . ự 2. HTML không x p th t các m c. ế ứ ự ụ 3. Nó ch thêm s th t vào m i m cỉ ố ứ ự ỗ ụ 4. B n ph i t x p th t . ạ ả ự ế ứ ự Order List có th dùng s La Mã.ể ố Order List có th dùng ch cái.ể ữ B n b t đ u b ng 10.ạ ắ ầ ằ M c k ti p s là XI.ụ ế ế ẽ X. Order List có th dùng s La Mã. ể ố XI. Order List có th dùng ch cái. ể ữ XII. B n b t đ u b ng 10. ạ ắ ầ ằ XIII. M c k ti p s là XI, XII, XIII. ụ ế ế ẽ Order List có th dùng ch cái.ể ữ Dùng ch A đ khai báo.ữ ể B t đ u b ng ch th 24.ắ ầ ằ ữ ứ Ch k ti p nó là X,Y,Z, AA.ữ ế ế X. Order List có th dùng ch cái. ể ữ Y. Dùng ch A đ khai báo. ữ ể Z. B t đ u b ng ch th 24. ắ ầ ằ ữ ứ AA. Ch k ti p nó là X,Y,Z, AA. ữ ế ế Các giá tr thu c tính c a ị ộ ủ type=:  :B t đ u b ng 10, k ti p là 11, 12, 13... ắ ầ ằ ế ế  : Danh sách b t đ u là các ch m vuông đen. ắ ầ ấ  : Danh sách b t đ u là vòng tròn r ng. ắ ầ ỗ  : Danh sách b t đ u là 1 vòng tròn đen. ắ ầ  :Danh sách b t đ u s La Mã hoa, k ti p là VI, VII, VIII... ắ ầ ố ế ế  : Danh sách b t đ u s La Mã th ng, k ti p là vi, vii, viii... ắ ầ ố ườ ế ế  : Danh sách b t đ u ch cái Hoa, k ti p là C, D, E.... ắ ầ ữ ế ế  : Danh sách b t đ u ch th ng, k ti p là b,c,d... ắ ầ ữ ườ ế ế B n cũng có th t o danh sách nhi u t ng s d ng c p Tags này ho c k t h p v i Unodered List.ạ ể ạ ề ầ ử ụ ặ ặ ế ợ ớ Cách t o t ng t nh ví d trong m c I.ạ ươ ự ư ụ ụ III-T o Danh sách Đ nh nghĩa:ạ ị M t ng d ng t o danh sách quan tr ng là t o danh sách các đ nh nghĩa, gi i thích thu t ng . Chúngộ ứ ụ ạ ọ ạ ị ả ậ ữ ta có 3 c p tags đ làm công vi c này nh sau:ặ ể ệ ư 1. : Tags t o danh sách đ nh nghĩa. (Definition List) ạ ị 2. : Tags hi n th thu t ng s đ c đ nh nghĩa. (Definition Term) ể ị ậ ữ ẽ ượ ị 3. : Tags hi n th đ nh nghĩa c a thu t ng . (Definition Description) ể ị ị ủ ậ ữ Ví d :ụ Vi t:ế Hi n th trên trình duy t:ể ị ệ HTML Hypertext Markup Language. CSS Cascading Style Sheet. DHTML Damamic Hypertext Markup Language. Element Element đ c t o b i 2 Th .ượ ạ ở ẻ Attribute Attribute mô t đ c tính c aả ặ ủ Element. Value Value xác đ nh m t giá tr c aị ộ ị ủ Attribute. HTML Hypertext Markup Language. CSS Cascading Style Sheet. DHTML Dymamic Hypertext Markup Language. Element Element đ c t o b i 2 Th .ượ ạ ở ẻ Attribute Attribute mô t đ c tính c aả ặ ủ Element. Value Value xác đ nh m t đ c tính c aị ộ ặ ủ Attribute. BÀI 6 : Đ t nh lên trang Webặ ả Th ẻ dùng đ đ t nh lên trang Web.ể ặ ả Các t p tin nh v i ph n m r ng .jpg và .gif đ c h tr b i h u h t các web Browser. Ngòai ra,ậ ả ớ ầ ở ộ ượ ỗ ợ ở ầ ế m t s trình duy t cũng ch p nh n t p tin .bmp và .png. Trong HTML, tag không ch đ cộ ố ệ ấ ậ ậ ỉ ượ dùng đ đ t nh lên Web mà còn dùng đ chèn nh thay th cho đ an ch minh h a m t liên k t.ể ặ ả ể ả ế ọ ữ ọ ộ ế Chúng ta s đ c p đ n các liên k t và các s d ng nh làm liên k t trong bài sau.ẽ ề ậ ế ế ử ụ ả ế 1-Cú pháp: Trong đó: • IMG : dùng đ khai báo m t nh s đ c chèn vào. (Vi t t t c a Image: nh)ể ộ ả ẽ ượ ế ắ ủ ả • SRC= :Khai báo đ ng d n đ n file nh v i tên c a file nh c n chèn vào. (vi t t t c aườ ẫ ế ả ớ ủ ả ầ ế ắ ủ Source: Ngu n)ồ • ALIGN= :Dùng đ canh v trí nh trong trang. (các giá tr là: right, top, left, bottom, và middle)ể ị ả ị • BORDER= :Hi n th vi n bao quanh nh, giá tr gi u vi n là 0.ể ị ề ả ị ấ ề • WIDTH= :Xác đ nh chi u R NG c a nh.ị ề Ộ ủ ả • HEIGHT= :Xác đ nh chi u CAO c a nh.ị ề ủ ả • ALT= :Đ an ch thay th cho nh trong tr ng h p nh không hi n th trên Web.ọ ữ ế ả ườ ợ ả ể ị (alt=Alternate: Thay th )ế 2-Ví d :ụ Gi s b n có m t nh có tên là mypicture.jpg, nh này có chi u r ng là 200px và chi u cao làả ử ạ ộ ả Ả ề ộ ề 300px. B n mu n đ t nh này lên Web. S d ng Th , b n vi t nh sau:ạ ố ặ ả ử ụ ẻ ạ ế ư -N u nh này n m trong th m c ế ả ằ ư ụ image và trang Web ch a nh c a b n ngòai th m c này. B nứ ả ủ ạ ở ư ụ ạ ch đ ng d n đ n file nh này nh sau: ỉ ườ ẫ ế ả ư -N u nh này đ t t i đ a ch : ế ả ặ ạ ị ỉ B n ch đ ng d nạ ỉ ườ ẫ đ n file nh này nh sau: ế ả ư <IMG SRC="" WIDTH="200" HEIGHT="300" ALT="my picture"> Tuy nhiên file nh này ch hi n th khi ả ỉ ể ị máy tính n i b n th c hành có k t n i Internet. Do v y ngơ ạ ự ế ố ậ ứ d ng này ít đ c s d ng. T t h n h t nên Download t p tin nh v máy tr c.ụ ượ ử ụ ố ơ ế ậ ả ề ướ -Trong tr ng h p t p tin nh không có trong đ ng d n ườ ợ ậ ả ườ ẫ SRC=, dòng Text c a ALT s hi n th thayủ ẽ ể ị th : Xem ví d d i:ế ụ ướ L u ý: Nên khai báo thu c tính ư ộ WIDTH và HEIGHT cho nh vì nh v y s giúp trang Web hi n thả ư ậ ẽ ể ị nhanh h n. B i vì, Browser s t đ ng dành m t kh ang tr ng b ng chi u r ng và chi u cao c aơ ở ẽ ự ộ ộ ỏ ố ằ ề ộ ề ủ nh tr c r i t i các n i dung c a trang. Sau đó s ti p t c t i nh vào. Ngòai ra giá tr mà b n gánả ướ ồ ả ộ ủ ẽ ế ụ ả ả ị ạ cho WIDTH và HEIGHT khác v i chi u r ng và chi u cao c a nh cũng s làm thay đ i hi n thớ ề ộ ề ủ ả ẽ ổ ể ị c a nh trong trang Web. Các bài th c hành bên d i s minh h a đi u này.ủ ả ự ướ ẽ ọ ề 3-Th c hành:ự V i nh bên d i đây có chi u r ng là 200px và chi u cao là 150px, l n l t áp d ng các thu c tínhớ ả ướ ề ộ ề ầ ượ ụ ộ và giá tr c a th ị ủ ẻ cho nh này. Tr c h t b n c n t i nh này v máy tính và đ t trong thả ướ ế ạ ầ ả ả ề ặ ư m c ụ html là th m c ch a các t p tin Html mà b n th c hành t tr c. Các bài th c hành này khôngư ụ ứ ậ ạ ự ừ ứơ ự đ c p đ n các c p tag c n thi t đ m và đóng m t trang HTML mà ch t p trung vào th ề ậ ế ặ ầ ế ể ở ộ ỉ ậ ẻ L u ý:ư : đ canh nh vào gi a, chúng ta dùng c p th ể ả ữ ặ ẻ đ t tr c và sau thặ ướ ẻ Th c hành 1: tag IMG đ n gi n nh tự ơ ả ấ Vi t: ế Xem k t qu .ế ả Đ đ t m t nh vào gi a trang Web, khi nh không n m trong m t TD (s đ c p trong bài 12), dùngể ặ ộ ả ữ ả ằ ộ ẽ ề ậ c p th : ặ ẻ Vi t: ế Xem k t qu .ế ả Th c hành 2: Dùng ALIGN đ đ nh ví tr cho nh:ự ể ị ị ả Vi t: ế nh này đ c canhẢ ượ ph i so v i dòng ch này, n i dung s n m bên trái c a nh. Gi ngả ớ ữ ộ ẽ ằ ủ ả ố nh Wrap nh trong Word. ư ả Xem k t qu .ế ả nh này đ c canh ph i so v i dòng ch này, n i dung s n m bên tráiẢ ượ ả ớ ữ ộ ẽ ằ c a nh. Gi ng nh Wrap nh trong Word.ủ ả ố ư ả Vi t: ế Dòng ch này n m gi a so v i v trí c a nh.ữ ằ ữ ớ ị ủ ả Xem k t qu .ế ả Dòng ch này n m gi a so v i v trí c a nhữ ằ ữ ớ ị ủ ả T ng t , b n có th th c hành v i các v tr : left, top, bottomươ ự ạ ể ự ớ ị ị Th c hành 3: Dùng Border đ thêm vi n cho nh:ự ể ề ả Vi t: ế Xem k t qu .ế ả Th c hành 4: Thu nh nh b ng HEIGHT và WIDTH:ự ỏ ả ằ Đ thu nh nh b ngh Height và Width, b n c n thu nh theo t l theo chi u r ng và chi u cao.ể ỏ ả ằ ạ ầ ỏ ỉ ệ ề ộ ề Ch ng h n, nh trong ví d này có chi u r ng là 200px và chi u cao là 150px. Nh v y khi gi mẳ ạ ả ụ ề ộ ề ư ậ ả chi u r ng xu ng 1/2 thì chi u cao cũng gi m 1/2 t ng ng. T c là WIDTH="100" VÀề ộ ố ề ả ươ ứ ứ HEIGHT="75" Vi t: ế Xem k t qu .ế ả Bài h c này bao trùm cách s d ng Th đ chèn nh vào trang Web. Đây là Th duy nh tọ ử ụ ẻ ể ả ẻ ấ dùng đ hi n th nh trên trang Web (Tr nh làm n n v i th background). Do đó, b n c n th cể ể ị ả ừ ả ề ớ ẻ ạ ầ ự hành cách dùng th này th t nhi u l n đ hi n th nh trên trang theo ý mu n.ẻ ậ ề ầ ể ể ị ả ố BÀI 7 : Hi n th văn b n đ nh d ng tr c-Hi n th l i gi i thíchể ị ả ị ạ ướ ể ị ờ ả Đ n bài h c này b n đã n m đ c m t s tag đ trình bày m t trang HTML... Nh ng có th b n sế ọ ạ ắ ượ ộ ố ể ộ ư ể ạ ẽ h i r ng n u mu n gi nh ng đ an text đã đ c đ nh d ng tr c và không c n s d ng các th c aỏ ằ ế ố ữ ữ ọ ượ ị ạ ướ ầ ử ụ ẻ ủ HTML thì có đ c không? Câu tr l i là Đ c và b n có th s d ng Th ho c đượ ả ờ ượ ạ ể ử ụ ẻ ặ ể làm đi u này. ề I-Gi l i đ nh d ng c a văn b n v i c p tags : ữ ạ ị ạ ủ ả ớ ặ 1-Cú pháp: Đ nh d ng tr c c a văn b n ị ạ ướ ủ ả Trong đó: • :khai báo gi đ nh d ng m c nhiên c a văn b n.ữ ị ạ ặ ủ ả • :Tag đóng khai báo. Ví d :ụ V y đ hi n th đ c các thành ph n c a trang HTML nh , , thì làm sao.? Khi đó b nậ ể ể ị ượ ầ ủ ư ạ ph i s d ng đ n ký t riêng cho các d u m và đóng thành ph n. D i đây là m t s ví d : ả ử ụ ế ự ấ ở ầ ướ ộ ố ụ Xem ví d :ụ Vi t:ế Hi n th trên trình duy t:ể ị ệ <html> <head> <title> <body> </p> ® © ™ ® © ™ Vi c đ a t t c các ký hi u riêng cho HTML là m t công vi c m t r t nhi u th i gian và công s cệ ư ấ ả ệ ộ ệ ấ ấ ề ờ ứ n u không s d ng công c h tr . Ch ng h n đ hi n th ví d trên, trong Notepad, chúng ta ph iế ử ụ ụ ỗ ợ ẳ ạ ể ể ị ụ ả vi t ph i vi t nh sau: ế ả ế ư &lt;html&gt; &lt;head&gt; &lt;titlel&gt; ........................................... I-Gi l iữ ạ đ nh d ng c a văn b n v i c p tags : ị ạ ủ ả ớ ặ C p tag này hi n không đ c h tr r ng rãi b i Browser nên đ c khuy n cáo là không nên sặ ệ ượ ỗ ợ ộ ở ượ ế ử d ng nhi u. IE6, FireFox 7.5 h tr . Đ c đi m c a tag này là hi n th b t kỳ cái gì ch a bên trong nó.ụ ề ỗ ợ ặ ể ủ ể ị ấ ứ 1-Cú pháp: Đ nh d ng tr c c a văn b n ị ạ ướ ủ ả Trong đó: • :khai báo gi đ nh d ng m c nhiên c a văn b n.ữ ị ạ ặ ủ ả • :Tag đóng khai báo. Xem ví d : ụ Vi t:ế Hi n th trên trình duy t:ể ị ệ Hello Hi How are you? I don't know I don't care What is HTML? Hello Hi How are you? I don't know I don't care What is HTML? Do tính ch t không đ c ch p nh n r ng rãi, B n ph i c n th n khi s d ng tag này đ trình bày bàiấ ượ ấ ậ ộ ạ ả ẩ ậ ử ụ ể h ng d n s d ng HTML.ướ ẫ ử ụ III-Hi n th l i gi i thích: ể ị ờ ả Dùng đ hi n th l i gi i thích cho các ch vi t t t b i các ch cái đ u. Víể ể ị ờ ả ữ ế ắ ở ữ ầ d : ụ WTO= World Trade Organization. B n th đ a chu t lên ch WTO s s th y hi u l c c a tagạ ử ư ộ ữ ẽ ẽ ấ ệ ự ủ này. 1-Cú pháp: Ch vi t t t ờ ả ữ ế ắ Trong đó: • :Đ t ngay tr c ch vi t t t.ặ ướ ữ ế ắ • title="l i gi i thích" : Ghi gi i thích c a ch vi t t t.ờ ả ả ủ ữ ế ắ • :Tag đóng khai báo sau ch vi t t t.ữ ế ắ Ví d :ụ Vi t:ế Hi n th :ể ị <acronym title="HyperText Markup Language">HTML <acronym title="Cascading Style Sheet">CSS <acronym title="Visual HTML CSS VB Basic">VB <acronym title="Active Server Page">ASP ASP B n th đ a chu t lên t ng t vi t t t c a s hi n th , b n s th y đ c hi u ng acronym m iạ ử ư ộ ừ ừ ế ắ ở ử ổ ể ị ạ ẽ ấ ượ ệ ứ ớ dùng. Ngòai ra b n cũng có th s d ng c p tag đ hi n th l i gi i thích. Cú pháp t ng tạ ể ử ụ ặ ể ể ị ờ ả ươ ự nh c p tag Acronym nh ng ch h tr v i Netscape Navigator và không đ c h tr b i IE.ư ặ ư ỉ ỗ ợ ớ ượ ỗ ợ ở BÀI 8 : Thu c tính cho thành ph n BODY-Ph n 1ộ ầ ầ Bài này s gi i thi u 3 thu c tính dùng cho thành ph n BODY đó là ch n màu n n, dùng nh đ làmẽ ớ ệ ộ ầ ọ ề ả ể n n, màu ch v i các Th : bgcolor=, background= , text= .ề ữ ớ ẻ M c nhiên, n u không khai báo màu n n và màu ch trong thành ph n BODY, Trình duy t s tặ ế ề ữ ầ ệ ẽ ự đ ng ch n màu tr ng làm n n và màu đen cho ch . Chúng ta có th s d ng m t s thu c tính d iộ ọ ắ ề ữ ể ử ụ ộ ố ộ ướ đây đ thi t l p màu n n, nh n n và màu ch cho trang Web theo ý mu n.ể ế ậ ề ả ề ữ ố I-Màu n n: bgcolor= ề 1-Cú pháp: Trong đó: • bgcolor= :khai báo màu n n cho Web(vi t t t c a background color).ề ế ắ ủ • color :Màu cho n n(dùng tên màu ho c giá tr Hexadecimal).ề ặ ị Ví d : Đ an Code sau đây l y màu xanh làm n nụ ọ ấ ề Trang Web này dùng màu xanh làm n n và d c khai báo trongề ượ thành ph n BODY.ầ Thay vì s d ng tên màu, b n có th thay th b ng giá tr Hexadecimal (b n nên s d ng). Ch ngử ụ ạ ể ế ằ ị ạ ử ụ ẳ h n, màu xanh trong ví d trên có giá tr Hex là: ạ ụ ị #0000FF. V y b n có th vi t nh sau:ậ ạ ể ế ư Thay vì dùng bgcolor="blue", chúng ta có th dùng giá tr Hex,ể ị bgcolor="#0000FF" cho màu xanh. II-Dùng nh làm n n: ả ề Đ dùng nh làm n n cho thành ph n , chúng ta có th thay th thu c tính ể ả ề ầ ể ế ộ bgcolor b ng thu c tính:ằ ộ background= 1-Cú pháp: Trong đó: • background= :khai báo nh n n cho thành ph n Body.ả ề ầ • imgname: ngu n và tên c a nh n n.ồ ủ ả ề Có 2 đ nh d ng nh đ c h tr b i ph n l n các Trình duy t đó là nh GIF và JPG. Thông th ngị ạ ả ượ ỗ ợ ở ầ ớ ệ ả ườ đ t o nh n n, nên dùng JPG vì đ nh d ng này cho nh ch t l ng cao. B n ph i khai báo đúng tênể ạ ả ề ị ạ ả ấ ượ ạ ả đ ng d n đ n ngăn l u tr file nh và đúng tên c a t p tin nh (đ ý tên t p là ch vi t th ng hayườ ẫ ế ư ữ ả ủ ậ ả ể ậ ữ ế ườ vi t hoa và khai báo cho đúng). Không nh t thi t ph i ch n m t t p tin nh có kích th c l n làmế ấ ế ả ọ ộ ậ ả ướ ớ n n. M c nhiên, khi ch n m t nh cho n n, trình duy t s t đ ng tr i nh này cho tòan b trangề ặ ọ ộ ả ề ệ ẽ ự ộ ả ả ộ Web. Nghĩa là Browser s t o ra m t nh l n làm n n t file nh nh b ng cách tr i và đ t chúngẽ ạ ộ ả ớ ề ừ ả ỏ ằ ả ặ n m li n nhau. N u nh n n không s d ng hi u ng Seamless Tiding- m t k thu t làm li n vi nằ ề ế ả ề ử ụ ệ ứ ộ ỹ ậ ề ề nh lót g ch hoa, thì gi a các nh dàn tr i s xu t hi n các đ ng vi n khi n chúng không li nư ạ ữ ả ả ẽ ấ ệ ườ ề ế ề nhau. Đ tránh tr ng h p này, b n ph i dùng m t ch ng trình x lý nh đ t o nh li n vi n.ể ườ ợ ạ ả ộ ươ ử ả ể ạ ả ề ề Xem bài Th c hành s 3-Bài 8 tài li u h ng d n s d ng Paintshop Pro 8. D i đây là 2 đ an codeự ố ệ ướ ẫ ử ụ ướ ọ s d ng nh n n cho trang Web. V i 2 nh m u bên d i: B n nên l u 2 file nh này vào th m cử ụ ả ề ớ ả ẫ ướ ạ ư ả ư ụ ch a file th c hành.ứ ự nh 1-Không li n vi n. nh 2-Li n vi n.Ả ề ề Ả ề ề Ví d : Đ an code d i đây s d ng nh làm n n. ụ ọ ướ ử ụ ả ề nh n n Cho Web không dùng hi u ng Seamless TidingẢ ề ệ ứ B n d dàng nh n ra các đ ng n i gi a các nh nh .ạ ễ ậ ườ ố ữ ả ỏ nh n n Cho Web dùng hi u ng Seamless TidingẢ ề ệ ứ B n khó nh n ra các đ ng n i gi a các nh nh .ạ ậ ườ ố ữ ả ỏ S th a n u b n v a dùng nh làm n n l i v a dùng màu làm n n. Do v y, ch 1 trong 2 ch n l aẽ ừ ế ạ ừ ả ề ạ ừ ề ậ ỉ ọ ự n n cho trang Web nói trên đ c dùng trong thành ph n ề ượ ầ BODY . III-Màu ch : text= ữ M c nhiên, Browser s ch n màu đen cho ch . Trong bài 6, chúng ta cũng đã đ c p đ n s d ng Tagặ ẽ ọ ữ ề ậ ế ử ụ đ ch n màu cho ch . Ngòai ra đ thay đ i màu m c nhiên c a ch , chúng ta còn có th dùng thu cể ọ ữ ể ổ ặ ủ ữ ể ộ tính text="color" . 1-Cú pháp: Trong đó: • text= :khai báo ch cho Web.ữ • color : Màu cho ch (dùng tên màu ho c giá tr Hexadecimal).ữ ặ ị Ví d : Đ an code d i đây s d ng màu đen làm n n và màu tr ng cho ch . ụ ọ ướ ử ụ ề ắ ữ Ch màu tr ng và n n màu đen.ữ ắ ề BÀI 9 : Thu c tính cho thành ph n BODY-Ph n 2ộ ầ ầ Trong bài 8, chúng ta đã n m m t s thu c tính (properties) cho thành ph n bao g m: màu n nắ ộ ố ộ ầ ồ ề (bgcolor=), nh n n (background=) và màu ch (text=). Bài này chúng ta đ c p đ n các thu c tínhả ề ữ ề ậ ế ộ còn l i c a bao g m: L c a trang Web (margin), màu c a các đ ng liên k t (link).ạ ủ ồ ề ủ ủ ườ ế I-L c a trang HTML:ề ủ topmargin= "", leftmargin="" 1-topmargin: Cú pháp ố Trong đó: • topmargin= :Khai báo kh ang cách trên cùng c a trang Web so v i trình duy t. Giá tr là sỏ ủ ớ ệ ị ố Pixels 2-leftmargin: Cú pháp ố Trong đó: • leftmargin= :Khai báo kh ang cách trái ph i c a trang Web so v i hai biên c a trình duy t.ỏ ả ủ ớ ủ ệ Giá tr là s Pixelsị ố 3-Vi t g p 2 th trong thành ph n BODY:ế ộ ẻ ầ ố ố 4- Ví d : Đ an Code xác đ nh kh ang cách trên cùng, kh ang cách 2 biên c a trang Web v i trìnhụ ọ ị ỏ ỏ ủ ớ duy t b ng 5 pixels.ệ ằ 5-a Real World Example: Đ an Codes này xác đ nh kh ang cách trên cùng c a trang Web v i trìnhọ ị ỏ ủ ớ duy t b ng 0 pixels. ệ ằ TEST MARGIN <BODY BGCOLOR="#FFFFFF" text="#000000" leftmagrin="0" topmargin="0"> <TABLE align="center" width="600" height="50" border="1" cellpadding="0" cellspacing="0"> Banner 1 Banner 2 Banner 3 <TABLE align="center" WIDTH="600" HEIGHT="20" cellpadding="0" cellspacing="0" border="1"> <font color="blue" size="1">Đ t Script gi đăng nh p:ặ ờ ậ <font color="blue" size="1">Đ t Script ngày tháng nămặ <TABLE align="center" width="600" cellspacing="0" cellpadding="0"> <TABLE cellpadding="2" cellspacing="2" width="140" border="1" bordercolor="silver"> Trang Chính Gi i thi uớ ệ Tinh cọ Âm nh cạ Ti ng Anhế Ki n Th cế ứ <TD BGCOLOR="#99FFFF" VAlign="tOP" width="320" height="100%" align="center"> Welcome to My First HTML Page! Đón chào b n đ n v i TRang Web đ u tiên c a tôi!ạ ế ớ ầ ủ <TABLE WIDTH="140" border="1" cellspacing="2" cellpadding="2" bordercolor="#FFFFFF"> Truy nệ dài Truy nệ ng nắ Truy n c i</ệ ườ TD> Th ơ Liên l cạ Đăng ký <TABLE ALIGN="CENTER" Border="1" width="600" height="20" cellpadding=0 bgcolor="#8DCFF4"> All rights reserved-Copyrighted by Me. Chép đ an codes này và dán vào Coderunner, Click nút ọ Xem trang Web, b n th y r ng bây gi trangạ ấ ằ ờ này phía trên cùng n m sát v i th c đ n trình duy t. Không có kh ang tr ng nào. V i Leftmargin vìằ ớ ự ơ ệ ỏ ố ớ chúng ta dùng đ r ng c a là 600pixels nên không th y đ c kh ang cách.ộ ộ ủ ấ ượ ỏ 5-b Real World Example: Đ an Codes này xác đ nh kh ang cách trên cùng và hai biên c a trang Webọ ị ỏ ủ v i trình duy t b ng 0 pixels. ớ ệ ằ Đ i l i đ r ng c a các b ng (table) trong đ an Codes trên là 100%. Chép đ an Codes d i đây làổ ạ ộ ộ ủ ả ọ ọ ướ l u vào Notepad v i tên t p tin ư ớ ậ testmargin.html. M b ng trình duy t ho c Coderunner b n s th yở ằ ệ ặ ạ ẽ ấ k t qu :ế ả TEST MARGIN <BODY BGCOLOR="#FFFFFF" text="#000000" leftmargin="0" topmargin="0"> <TABLE align="center" width="100%" border="0" cellpadding="0" cellspacing="0"> <TABLE align="center" width="100%" height="50" border="1" cellpadding="0" cellspacing="0"> Banner 1 Banner 2 Banner 3 <TABLE align="center" WIDTH="100%" HEIGHT="20" cellpadding="0" cellspacing="0" border="1"> <font color="blue" size="1">Đ t Script gi đăng nh p:ặ ờ ậ <font color="blue" size="1">Đ t Script ngày tháng nămặ <TABLE align="center" width="100%" cellspacing="0" cellpadding="0"> <TABLE cellpadding="2" cellspacing="2" width="140" border="1" bordercolor="silver"> Trang Chính Gi i thi uớ ệ Tinh cọ Âm nh cạ Ti ng Anhế Ki n Th cế ứ <TD BGCOLOR="#99FFFF" VAlign="tOP" height="100%" align="center"> Welcome to My First HTML Page! Đón chào b n đ n v i TRang Web đ u tiên c a tôi!ạ ế ớ ầ ủ <TABLE WIDTH="140" border="1" cellspacing="2" cellpadding="2" bordercolor="#FFFFFF"> Truy nệ dài Truy nệ ng nắ Truy n c i</ệ ườ TD> Th ơ Liên l cạ Đăng ký <TABLE ALIGN="CENTER" Border="1" width="100%" height="20" cellpadding=0 bgcolor="#8DCFF4"> All rights reserved-Copyrighted by Me. II-Màu c a các liên k t trong HTML: link= "", alink="", vlink=""ủ ế Cho đ n gi chúng ta ch a h c đ n l nh liên k t đ n trang ho c Website trong HTML. Tuy v y, bàiế ờ ư ọ ế ệ ế ế ặ ậ h c này cung c p thông tin đ b n s d ng cho các liên k t mà b n s h c trong bài 18. Nh b nọ ấ ể ạ ử ụ ế ạ ẽ ọ ư ạ bi t, ngòai vi c hi n th thông tin trên trình duy t, HTML còn cho phép chúng ta liên k t đ n các trangế ệ ể ị ệ ế ế HTML khác, ho c các Website khác... Đ làm đ c, chúng ta ph i s d ng Th liên k t(s đ c pặ ể ượ ả ử ụ ẻ ế ẽ ề ậ đ n trong bài 18). M i m t liên k t bao g m màu ch c a Liên k t khi ng i dùng ch a Click chu tế ỗ ộ ế ồ ữ ủ ế ườ ư ộ lên liên k t đó (Link color). Màu ch c a Liên k t khi liên k t đã đ c Click và hi n t i trang liên k tế ữ ủ ế ế ượ ệ ạ ế đang m (active link). Và màu c a liên k t cho bi t r ng trang đó chúng ta đã xem(visited link).ở ủ ế ế ằ HTML ch cho chúng ta 3 thu c tính đó. Ngòai ra, đ th c s đi u khi n đ c thu c tính c a Liênỉ ộ ể ự ự ề ể ượ ộ ủ k t, b n ph i dùng đ n CSS. CSS cho phép b n t t c các kh năng mà b n c n đ trang web tr nênế ạ ả ế ạ ấ ả ả ạ ầ ể ở sinh đ ng h n. ộ ơ Trong HTML đ khai báo màu c a Link, b n ph i đ t các thu c tính này trong th ể ủ ạ ả ặ ộ ẻ . Có 3 thu c tính mà b n dùng là: ộ ạ • link="giá tr màu"ị :Khai báo màu c a ch đ i di n cho Liên k t. Giá tr màu có th là tênủ ữ ạ ệ ế ị ể màu ho c giá tr Hex.ặ ị • alink="giá tr màu" ị :Khai báo màu c a ch đ i di n cho Liên k t khi liên k t này đ c click.ủ ữ ạ ệ ế ế ượ Giá tr màu có th là tên màu ho c giá tr Hex( alink vi t t t c a Active Link: Liên k t đangị ể ặ ị ế ắ ủ ế h at đ ng)ọ ộ • vlink="giá tr màu" ị :Khai báo màu c a ch đ i di n cho Liên k t khi liên k t này đ c xem.ủ ữ ạ ệ ế ế ượ Giá tr màu có th là tên màu ho c giá tr Hex( vlink vi t t t c a Visited Link: Liên k t đãị ể ặ ị ế ắ ủ ế đ c xem.)ượ 1-Cú pháp: 2-Ví d : ụ Đ khai báo màu ch c a liên k t là Xanh, Active Link là màu Đ và Vlink là màu Tím, b n vi t nhể ữ ủ ế ỏ ạ ế ư sau: Ho c b n có th dùng giá tr HEX:ặ ạ ể ị Tham kh o b ng màu v i các giá tr Hex s n có.ả ả ớ ị ẵ Trong bài k ti p, b n s h c cách đ t m t liên k t trên trang HTMLế ế ạ ẽ ọ ặ ộ ế BÀI 10 : Th c hành HTML và làm quen v i bi u b ngự ớ ể ả Bài th c hành này ôn l i m t s codes đã h c..., cách s d ng màu cho trang Web. Qua đó b n cũngự ạ ộ ố ọ ử ụ ạ làm quen d n v i bi u b ng và cách t o m t bi u b ng trong HTML tr c khi chúng ta b t đ u trongầ ớ ể ả ạ ộ ể ả ướ ắ ầ bài 11. Hãy xem bi u b ng bên d i...ể ả ướ B ng 16 màu c b nả ơ ả White Black Gray Silver Aqua Navy Yellow Green Red Fuchsia Blue Teal Lime Olive Maroon Purple Đ th c hành, b n hãy m Notepad, ch n font ch verdana ho c tahoma, và gõ vào các dòng codesể ự ạ ở ọ ữ ặ bên d i: ướ T o b ng màu 16 màu c b nạ ả ơ ả B ng 16 màu cả ơ b nả <table align="center" border=1 bordercolor="#0000FF" cellspacing="0" cellpadding="2" width="500"> <font color="blue">White <font color="white">Black <font color="white">Gray <font color="white">Silver <font color="white">Aqua <font color="white">Navy <font color="white">Yellow <font color="white">Green <font color="white">Red <font color="white">Fuchsia <font color="white">Blue <font color="white">Teal <font color="blue">Lime <font color="white">Olive <font color="white">Maroon <font color="white">Purple Đ s d ng màu b n ch vi c khai báo thu c tínhể ử ụ ạ ỉ ệ ộ màu trong thành ph n theo sau b i d u = "tênầ ở ấ màu. L u t p tin này vào th m c ư ậ ư ụ html v i tên ớ colorchart.html. K t qu c a b n gi ng nh t p tin htmlế ả ủ ạ ố ư ậ này, click vào đây BÀI 11 : T o bi u b ng trong HTML-Ph n 1ạ ể ả ầ N u b n đã dùng ch ng trình b ng tính (Excel) ho c s d ng b ng (table) trong MS Word thì b nế ạ ươ ả ặ ử ụ ả ạ d dàng hi u khái ni m v b ng và hình th c c a chúng. B ng là t p h p c a hàng và c t....ễ ể ệ ề ả ứ ủ ả ậ ợ ủ ộ Giao ti p gi a hàng và c t t o ra các ô (cell). D li u ch a trong ô g i là d li u c a b ng (table data). B ngế ữ ộ ạ ữ ệ ứ ọ ữ ệ ủ ả ả đ c phát tri n và đ a vào s d ng trong HTML đ hi n th các thông tin theo c u trúc. Cho đ n nay b ng đãượ ể ư ử ụ ể ể ị ấ ế ả đ c s d ng r ng rãi trong thi t k Web. B ng dùng đ đ nh d ng b c c c a m t trang, chia các ph n c aượ ử ụ ộ ế ế ả ể ị ạ ố ụ ủ ộ ầ ủ trang ra thành t ng khu v c nh . B n th truy c p m t trang b t kỳ nào, r i dùng l nh View/Source c a trìnhừ ự ỏ ạ ử ậ ộ ấ ồ ệ ủ duy t đ xem Source code c a trang .Rõ ràng, b n th y trong trang này s d ng nhi u thành ph n b t đ uệ ể ủ ạ ấ ử ụ ề ầ ắ ầ b ng ằ và trong thành ph n này có nhi u thu c tính và giá tr c a thu c tính dùng đ đ nh d ng cho Thầ ề ộ ị ủ ộ ể ị ạ ẻ đó . M i m t b ng (table) g m m t ho c nhi u hàng (tr= table row), trong m t hàng g m m t ho c nhi u ô (tdỗ ộ ả ồ ộ ặ ề ộ ồ ộ ặ ề =table data). M t b ng ch có m t hàng và m t ô th ng đ c dùng làm b ng chính bao quanh n i dung c aộ ả ỉ ộ ộ ườ ượ ả ộ ủ trang Web. Khi thi t k b ng ph c t p, trong m t ô có th thêm vào các b ng nh và các ô trong b ng nh nàyế ế ả ứ ạ ộ ể ả ỏ ả ỏ có th thêm vào b ng n a... Ho c có th hàng trên trong b ng ch 1 ô và hàng d i là 2 ô, hàng d i n a là 3ể ả ữ ặ ể ả ỉ ướ ướ ữ ô...Ho c hàng bên trái g m 4 hàng và hàng bên ph i là m t hàng... Vi c s d ng tag m và đóng ph i theoặ ồ ả ộ ệ ử ụ ở ả đúng trình t n u không ô trong b ng s không hi n th nh mong mu n.ự ế ả ẽ ể ị ư ố I-Các thành ph n đ t o m t b ng: ầ ể ạ ộ ả Tr c h t, trong HTML, đ t o m t b ng, c n các c p Th thành ph n sau đây:ướ ế ể ạ ộ ả ầ ặ ẻ ầ • :ộ ị ộ ị M và đóng m t b ng.ở ộ ả • : ộ ị ộ ị M và đóng m t hàng.ở ộ • ộ ị ộ ị : M và đóng m t ô.ở ộ Nh r ng gi a các thu c tính trong b ng ph i cách nhau b ng m t kh ang cách( nh n phím cách) và theo sauớ ằ ữ ộ ả ả ằ ộ ỏ ấ chúng là d u "="ấ 1-Các thu c tính c a b ng () g m:ộ ủ ả ồ • align= • background= • bgcolor= • width= • height= • border= • bordercolor = • bordercolordark= • bordercolorlight= • cellpadding= • cellspacing= • frame= • rules= 2-Các thu c tính c a hàng () g m:ộ ủ ồ • align= • valign • bgcolor= • background= 3-Các thu c tính c a ô () g m:ộ ủ ồ • align= • valign= • bgcolor= • background= • char= • colspan= • rowspan= • nowrap= • height = • width= Chúng ta s l n l t tìm hi u cách dùng các thu c tính và giá tr đi kèm chúng cho m i thành ph n trong b ngẽ ầ ượ ể ộ ị ỗ ầ ả trong bài này và các bài k ti p v b ng. ế ế ề ả II-B t đ u t o m t b ng đ n gi n:ắ ầ ạ ộ ả ơ ả Tr c tiên, đ làm quen v i b ng chúng ta th c hành t o m t s b ng đ n gi n. Sau đó, chúng ta s l ng cácướ ể ớ ả ự ạ ộ ố ả ơ ả ẽ ồ thu c tính cho t ng thành ph n nh đã nêu trên.ộ ừ ầ ư 1-B ng đ n gi n:ả ơ ả M t b ng đ n gi n g m các b c:ộ ả ơ ả ồ ướ -B t đ u b ng gõ vào Th ắ ầ ả ẻ -B t đ u m t hàng đ u tiên trong b ng gõ vào: ắ ầ ộ ầ ả -B t đ u m t ô d li u đ u tiên trong b ng gõ vào: ắ ầ ộ ữ ệ ầ ả -Nh p vào n i d ng c a ô d li u.ậ ộ ụ ủ ữ ệ -Đóng ô d li u này b ng Th ữ ệ ằ ẻ -Đóng hàng đ u tiên b ng Th : ầ ằ ẻ -Đóng b ng này b ng Th : ả ằ ẻ L u ý:ư Th ẻ là b t bu c n u b n mu n trang Web hi n th b ng trong Netscape Navigator.ắ ộ ế ạ ố ể ị ả a-Ví d 1:ụ Bang dau tien Đây là b ng đ u tiên, b ng này ch có m t hàng và m t c t.ả ầ ả ỉ ộ ộ ộ Tìm hi u cách vi t c a b ng trên:ể ế ủ ả 1- 2- 3-Đây là b ng đ u tiên, b ng này ch có m t hàng và m t c t.ả ầ ả ỉ ộ ộ ộ 4- 5- 6- • Dòng 1: B t đ u m t b ngắ ầ ộ ả • Dòng 2: B t đ u 1 hàng.ắ ầ • Dòng 3: B t đ u m t ô, và trong ô ph i ch a m t n i dung nào đó. N i dung có th là Text, ho c hìnhắ ầ ộ ả ứ ộ ộ ộ ể ặ nh. (trong ví d này là Text : ả ụ Đây là b ng đ u tiên, b ng này ch có m t hàng và m t c tả ầ ả ỉ ộ ộ ộ • Dòng 4: Đóng ô d li uữ ệ • Dòng 5: Đóng hàng trong b ngả • Dòng 6: Đóng b ng.ả Cú pháp trên đây giúp b n d theo dõi vi c t o m t b ng. Khi đã quen v i vi t codes, các tag có th n m trênạ ễ ệ ạ ộ ả ớ ế ể ằ cùng m t hàng mà không c n ph i xu ng hàng nh cách vi t trên. Đ an codes trên đây có th vi t l i nh sau:ộ ầ ả ố ư ế ọ ể ế ạ ư Bang dau tien Đây là b ng đ u tiên, b ng này ch có m t hàng và m t c t.ả ầ ả ỉ ộ ộ ộ Khi b n xem ví d trên, b n không th y gì ngòai dòng: ạ ụ ạ ấ Đây là b ng đ u tiên, b ng này ch có m t hàng và m tả ầ ả ỉ ộ ộ c t.ộ . V y, b ng n m đâu?. Nguyên nhân là v i HTML, khi b n không khai báo ậ ả ằ ở ớ ạ border= cho b ng thì trìnhả duy t hi u r ng, b ng đó s d ng ệ ể ằ ả ử ụ border=0. V y cũng v i đ an code trên chúng ta hãy thêm ậ ớ ọ border="5" vào b ng xem sao. (5 pixels)ả Ví d 2: T o vi n cho b ng v i thu c tính border="s pixel"ụ ạ ề ả ớ ộ ố Bang dau tien B ng này có vi n l n b ng 5 pixel.ả ề ớ ằ Rõ ràng, bây gi bao quanh b ng là 1 khung màu xám. B n có th cho khung này m t chút màu đ c không?ờ ả ạ ể ộ ượ Câu tr l i là b n ch c n thêm ả ờ ạ ỉ ầ bordercolor="màu" vào trong thành ph n ầ Cũng v i ví d trên b n vi t l i nh sau:ớ ụ ạ ế ạ ư Ví d 3: Thêm màu cho vi n v i thu c tính bordercolor="màu"ụ ề ớ ộ Bang dau tien B ng này có vi n = 5px và màu vi n là vàng.ả ề ề B n đã t o đ c m t b ng có đ r ng c a vi n b ng 5px và màu c a vi n là vàng. B n có th th c hành v iạ ạ ượ ộ ả ộ ộ ủ ề ằ ủ ề ạ ể ự ớ các giá tr màu và pixel khác nhau đ quen d n.ị ể ầ Đ n đây ch c b n nghĩ r ng, có th thêm màu cho vi n thì cũng có th thêm màu cho n n. Đ c mà, ch c nế ắ ạ ằ ể ề ể ề ượ ỉ ầ b n thêm thu c tính ạ ộ bgcolor="màu" vào thành ph n b ng (thu c tính này b n đã quen trong bài 9). Dùng ví dầ ả ộ ạ ụ trên, hãy thêm thu c tính ộ bgcolor="red" vào b ng. Nh đ an codes bên d i:ả ư ọ ướ Ví d 4: Thêm màu màu n n cho b ng v i thu c tính bgcolor="màu"ụ ề ả ớ ộ Bang dau tien B ng này có vi n = 5px và màu vi n là vàng, màu n n đ .ả ề ề ề ỏ N u thêm màu n n, h n cũng có th s d ng nh n n cho b ng. Không sai, b n có th thay th thu c tínhế ề ẳ ể ử ụ ả ề ả ạ ể ế ộ bgcolor="màu" b ng thu c tính background="taptinanh.gif". (Xem bài 9- nh n n cho thành ph n ằ ộ Ả ề ầ body). Khi đó b n ph i có t p tin nh n n có ph n m r ng là .jpg ho c gif). ạ ả ậ ả ề ầ ở ộ ặ Đ n đây, b n th y r ng thu c tính ế ạ ấ ằ ộ background= "", bgcolor="" ngòai xác đ nh màu n n và nh n n choị ề ả ề thành ph n ầ body c a trang, nó còn đ c dùng cho c b ng, hàng( ủ ượ ả ả ch dùng bgcolorỉ ), và c t...Đây là m i quanộ ố h c a thu c tính v i thành ph n, không ch trong HTML mà c Javascript, CSS và nhi u ngôn ng khác cóệ ủ ộ ớ ầ ỉ ả ề ữ dùng ngôn ng HTML. Và b n càng ng c nhiên khi th y đ c s gi ng nhau trong quan h c a Thành ph n-ữ ạ ạ ấ ượ ự ố ệ ủ ầ Thu c tính hay Đ i t ng-Thu c tính hay Đ i t ng-Ph ng pháp trong nhi u ngôn ng l p trình. Cái c b nộ ố ượ ộ ố ượ ươ ề ữ ậ ơ ả là chúng ta nh , hình dung và s p x p chúng theo tr t t h p lý.ớ ắ ế ậ ự ợ Ph n 1 đã gi i thi u nh ng c b n nh t v b ng. Đ khám phá ti p cách dùng các thu c tính còn l i và t oầ ớ ệ ữ ơ ả ấ ề ả ể ế ộ ạ ạ nh ng b ng ph c t p, chúng ta s ti p t c v i ph n 13, 14, 15, 16.ữ ả ứ ạ ẽ ế ụ ớ ầ BÀI 12 : T o bi u b ng trong HTML-Ph n 2ạ ể ả ầ Trong ph n 1, b n đã n m đ c cách t o m t b ng đ n gi n, thêm vi n, màu vi n, màu n n, nhầ ạ ắ ượ ạ ộ ả ơ ả ề ề ề ả n n cho b ng. B n cũng bi t đ c b c c m t b ng b t đ u b ng , bên trong làề ả ạ ế ượ ố ụ ộ ả ắ ầ ằ , bên trong là . Trong ph n 1, b n đã n m đ c cách t o m t b ng đ n gi n, thêm vi n, màu vi n, màu n n, nhầ ạ ắ ượ ạ ộ ả ơ ả ề ề ề ả n n cho b ng. B n cũng bi t đ c b c c m t b ng b t đ u b ng ề ả ạ ế ượ ố ụ ộ ả ắ ầ ằ , bên trong là , bên trong là . Đ đóng ể dùng Th ẻ , đ đóng m t hàng ch a ể ộ ứ , dùng Tag đóng . Và đ k t thúc b ng dùng tag đóng ể ế ả . Gi i s mu n t o b ng có 2 hay nhi u hàng thì làm sao?ả ử ố ạ ả ề I-T o b ng đ n gi n v i nhi u hàng, nhi u c t:ạ ả ơ ả ớ ề ề ộ Cũng nh t o b ng đ n gi n v i 1 hàng, đ t o nhi u hàng, ngay khi đóng hàng đ u tiên c a b ng,ư ạ ả ơ ả ớ ể ạ ề ầ ủ ả b n ti p t c m m t hàng m i b ng Tag ạ ế ụ ở ộ ớ ằ , r i cũng khai báo d li u b ng các tag m và đóngồ ữ ệ ằ ở . 1-B ng nhi u hàng:ả ề a-Ví d 1: T o b ng nhi u hàng. ụ ạ ả ề Xem minh h a:ọ D i đây là đ an mã HTML cho minh h a trên.ướ ọ ọ B n nên th c hành gõ vào Notepad và l u b ng t pạ ự ư ằ ậ tin m r ng .htm ho c .html h n là chép r i dán.ở ộ ặ ơ ồ Bang nhieu hang Đây là hàng 1 ch màu vàng. ữ Đây là hàng 2 ch màu đ .ữ ỏ Đây là hàng 3 ch màu xanh.ữ Đây là hàng 4 ch màu lá chanh.ữ B n đ ng b n t m t i sao b ng thu h p chi u ngang. Đ n gi n là chúng ta ch a khai báo đ r ngạ ừ ậ ậ ạ ả ẹ ề ơ ả ư ộ ộ cho b ng nên Trình duy t t đ ng m r ng hay thu h p b ng tùy theo n i dung ch a trong ả ệ ự ộ ở ộ ẹ ả ộ ứ . Trong ví d trên, m i m t hàng m i đ c khai báo v i Th ụ ỗ ộ ớ ượ ớ ẻ , và đóng b ng ằ . B n có th thêm màu n n vào trong m i hàng( ạ ể ề ỗ b ng cách chèn thu c tínhằ ộ dùng thu c tính ộ bgcolor="tên màu" nh b n dùng trong Th ư ạ ẻ ho c ặ . Cũng v i ví d trên, ví d d i đâyớ ụ ụ ướ là thêm màu n n vào ề . b-Ví d 2: Thêm màu n n vào Thụ ề ẻ Xem minh h a:ọ Đo n mã HTML bên d i:ạ ướ Bang nhieu hang Đây là hàng 1 ch màu vàng, n n màu đen.ữ ề Đây là hàng 2 ch màu đ , n n màuữ ỏ ề xanh. Đây là hàng 3 ch màu xanh, n n màu láữ ề chanh. Đây là hàng 4 ch màu lá chanh, n n màuữ ề n c bi n.ướ ể Dù b n đã khai báo màu n n trong Th ạ ề ẻ , b n v n có th thay đ i màu n n trong th ạ ẫ ể ổ ề ẻ b ngằ cách thêm thu c tính ộ bgcolor="tên màu" trong th đó.ẻ Tóm l i, b n có th thay đ i màu n n và nh n n cho Th ạ ạ ể ổ ề ả ề ẻ , , b ng thu c tính:ằ ộ bgcolor="tên màu" và background="taptinanh". L u ý:ư Ch dùng thu c tính ỉ ộ bgcolor cho th ẻ . 2-T o b ng nhi u c t:ạ ả ề ộ Nh đã nói, trong m t hàng g m m t ho c nhi u c t d li u ( ư ộ ồ ộ ặ ề ộ ữ ệ ). Do v y chúng ta có th t o m tậ ể ạ ộ b ng v i nhi u c t d li u b ng cách chia ả ớ ề ộ ữ ệ ằ v i nhi u ớ ề . Ví d 1: T o b ng nhi u c t.ụ ạ ả ề ộ L u ý:ư Nh ng ví d này không đữ ụ ề c p đ n màu n n, màu ch hay màuậ ế ề ữ vi n.ề Xem minh h a: ọ Mã HTML cho ví d trên.ụ Bang nhieu hang, nhieu cot. Qúy I Tháng giêng Tháng 2 Tháng 3 T ng thuổ 000000 000000 000000 Chi 000000 000000 000000 Còn l iạ 000000 000000 000000 L u ý: ư V i cách t o b ng này s c t trong m i hàng đ u b ng nhau, tr ng h p b n b sót m tớ ạ ả ố ộ ỗ ề ằ ườ ơ ạ ỏ ộ trong m t hàng, b n s có k t qu nh hình d i:ộ ạ ẽ ế ả ư ướ II-M t s thu c tính khác trong b ng:ộ ố ộ ả Ví d 1: Đ t tiêu đ cho b ng:ụ ặ ề ả B n có th s d ng Th , đ a đ t tiêu đ cho b ng. Dòng code này ph i đ t đ uạ ể ử ụ ẻ ể ặ ề ả ả ặ ầ tiên ngay sau khi th ẻ đ c m . Trong ví d d i đây dùng ượ ở ụ ướ tbody align="center" v a đ t tiêu đ v a canh gi a các thànhừ ặ ề ừ ữ ph n trong b ng.ầ ả Xem minh h a: ọ Đ an mã HTML cho minh h a trên.ọ ọ Nh là th c hành gõ vào Notepad và l u b ng t p tin mớ ự ư ằ ậ ở r ng .htm ho c .html đ quen.ộ ặ ể Bang nhieu hang, nhieu cot. Doanh Thu Qúy I năm 2005 Qúy I Tháng giêng Tháng 2 Tháng 3 T ng thuổ 000000 000000 000000 Chi 000000 000000 000000 Còn l iạ 000000 000000 000000 Ví d 2: Che vi n trong ngòai c a b ng:ụ ề ủ ả Thu c tính ộ Frame="v trí"ị có th dùng đ che vi n ngòai c a Table: Thu c tính này đ c đ t trongể ể ề ủ ộ ượ ặ Th ẻ . Các giá tr v trí c a Thu c tính Frame là:ị ị ủ ộ • void: che d u vi n quanh b ngấ ề ả • above: Ch hi n th vi n trên và trongỉ ể ị ề • below: Ch hi n th vi n d i và trongỉ ể ị ề ướ • hsides : Hi n th vi n trên và d iể ị ề ướ • vsides: Hi n th vi n 2 bên trái ph iể ị ề ả • rhs: Hi n th vi n bên ph i và trongể ị ề ả • lhs: Hi n th vi n bên trái và trongể ị ề • box, border: hi n th vi n trong tòan b ng.ể ị ề ả Xem minh h a: ọ Ví d này s d ng ụ ử ụ Frame="void" trong Ví d 3: Che vi n trong c a b ng:ụ ề ủ ả Thu c tính ộ rules="v trí"ị có th dùng đ che vi n trong c a Table: Thu c tính này đ c đ t trongể ể ề ủ ộ ượ ặ Th ẻ Table. Các giá tr v trí c a Thu c tính rules là:ị ị ủ ộ • none: che vi n trong c a b ng.ề ủ ả • rows: Ch hi n th vi n ngangỉ ể ị ề • cols: Ch hi n th vi n đ ngỉ ể ị ề ứ Ph n k ti p s gi i thi u m t s thu c tính c a b ng v đ r ng, chi u cao, canh biên... K t thúcầ ế ế ẽ ớ ệ ộ ố ộ ủ ả ề ộ ộ ề ế bài h c v b ng, b n có th s d ng b ng đ Layout m t trang HTML hòan ch nh. ọ ề ả ạ ể ử ụ ả ể ộ ỉ BÀI 13 : Đ nh chi u r ng và chi u cao cho b ngị ề ộ ề ả Khi nói đ n đ r ng Width= và chi u cao Height= c a b ng, chúng ta ph i l u ý đ n đ phân gi iế ộ ộ ề ủ ả ả ư ế ộ ả màn hình. Có 2 giá tr đ gán cho thu c tính đ r ng và chi u cao trong th : <table width=""ị ể ộ ộ ộ ề ẻ height=""> đó là S Pixel và %.ố N u b n s d ng Pixel cho b ng, tùy theo đ phân gi i c a màn hình mà trang Web c a b n đ cế ạ ử ụ ả ộ ả ủ ủ ạ ượ tr i đ u ra hai biên hay có khuynh h ng b thu h p l i vào gi a khi hi n th trên màn hình có đả ề ướ ị ẹ ạ ữ ể ị ộ phân gi i cao. Th ng kê cho th y hi n có kh ang 50% mà hình ả ố ấ ệ ỏ máy tính v n s d ng đ phân gi iẫ ử ụ ộ ả 800x600 pixels. Cũng có nhi u màn hình h tr t t 1024x768 pixels nh ng do ng i dùng đã quenề ỗ ợ ố ư ườ thu c v i đ phân gi i th p nên ng i thay đ i. Khi tăng đ phân gi i, đ i t ng trên màn hình cóộ ớ ộ ả ấ ạ ổ ộ ả ố ượ khuynh h ng thu nh l i. Ng c l i, khi gi m đ phân gi i, đ i t ng có khuynh h ng dãn ra. Doướ ỏ ạ ượ ạ ả ộ ả ố ượ ướ v y, ch n S pixels hay % cho b ng chính bao tòan trang là tùy thu c vào s l a ch n c a b n. Hi nậ ọ ố ả ộ ự ự ọ ủ ạ ệ có r t nhi u trang Web s d ng pixels và gi i h n chi u r ng c a b ng là 770. T t c các trang c aấ ề ử ụ ớ ạ ề ộ ủ ả ấ ả ủ Th vi n IT s d ng 100% chi u r ng cho b ng chính. Khi dùng ph n trăm và thi t k trên màn hìnhư ệ ử ụ ề ộ ả ầ ế ế 1024x768, trang có th đ p m t v i b n, nh ng n u hi n th trên màn hình đ phân gi i th p, các đ iể ẹ ắ ớ ạ ư ế ể ị ộ ả ấ ố t ng có th hi n th không theo nh mong mu n.ượ ể ể ị ư ố I-Đ nh chi u r ng và chi u cao cho b ng: Width= "", Height=""ị ề ộ ề ả Cú pháp: ho c: ặ ố ố Trong đó: • width= :Khai báo đ r ng cho b ng (giá tr là s Pixels ho c %).ộ ộ ả ị ố ặ • height= :Khai báo chi u cao cho b ng (Giá tr là s Pixels ho c %).ề ả ị ố ặ Ví d : Đ an code sau đây t o m t b ng có chi u r ng 500pxels và chi u cao 200pixels.ụ ọ ạ ộ ả ề ộ ề Table 1 Ô này r ng 200 pixels ộ Ô này r ng 300 pixels ộ Ô này r ng 200 pixels ộ Ô này r ng 300 pixels ộ Ô này r ng t ng ng ộ ươ ứ Ô này r ng t ng ng ộ ươ ứ K t qu nh hình d i:ế ả ư ướ này r ng 200 pixels ộ Ô này r ng 300 pixels ộ Ô này r ng 200 pixels ộ Ô này r ng 300 pixels ộ Ô này r ng t ng ng ộ ươ ứ Ô này r ng t ng ngộ ươ ứ II-Đ nh v trí cho b ng và các d li u trong ô:ị ị ả ữ ệ 1-Đ nh v trí cho b ng:ị ị ả Đ xác đ nh v trí c a b ng, chúng ta dùng thu c tính ể ị ị ủ ả ộ align= v i các giá tr : ớ ị left, center và right. M cặ nhiên v trí c a h u h t các thành ph n là bên trái. Đ canh b ng vào gi a, cũng v i ví d trên, chúngị ủ ầ ế ầ ể ả ữ ớ ụ ta thêm align="center" vào trong th , nh sau: <table align="center" width="500"ẻ ư height="200" border="5"> K t qu :ế ả này r ng 200 pixels ộ Ô này r ng 300 pixels ộ Ô này r ng 200 pixels ộ Ô này r ng 300 pixels ộ Ô này r ng t ng ng ộ ươ ứ Ô này r ng t ng ngộ ươ ứ Khi ta đ nh d ng b ng sang ph i, chúng ta có th vi t n i dung bên trái gi ng nh Wrapị ạ ả ả ể ế ộ ở ố ư trong Word. Thay Align="right" trong ví d trên chúng ta đ c b ngụ ượ ả và n i dung nh sau: ộ ư B n đ ý n u chúng ta dùng Th ạ ể ế ẻ <p đ vi t thì n i dung s hi n th vào ph n tr ng bên trái c aể ế ộ ẽ ệ ị ầ ố ủ b ng này nh b n đang th y.ả ư ạ ấ 2-Đ nh v trí d li u:ị ị ữ ệ Trong 3 ví d trên, d li u trong ô n m v bên trái và m c nhiên đ c đ a xu ng gi a dòng. Đ xácụ ữ ệ ằ ề ặ ượ ư ố ữ ể đ nh v tri c a d li u trong ô, chúng ta s d ng 2 thu c tính cho ô đó là:ị ị ủ ữ ệ ử ụ ộ • align= giá tr cho align m c nhiên là Left (trái). Đ canh gi dùng "center", canh ph i dùngị ặ ể ữ ả "right". • valign= giá tr cho valign là "top" (trên cùng), "bottom" (d i cùng") và "middle" (gi a). (v vi tị ướ ữ ế t t c a vertical: đ ng). Ngòai ra còn có baseline, nh ng giá tr này ít đ c dùng.ắ ủ ứ ư ị ượ Bây gi , dùng l i đ an code trên nh ng chúng ta thêm vào align và valign cho các ô:ờ ạ ọ ư Table 1 Canh gi a ữ Canh biên ph i ả Canh gi a và trên ữ Canh gi a và gi a ữ ữ này r ng 200 pixels ộ Ô này r ng 300 pixels ộ Ô này r ng 200 pixels ộ Ô này r ng 300 pixels ộ Ô này r ng t ng ng ộ ươ ứ Ô này r ng t ng ngộ ươ ứ Canh gi a và d i ữ ướ Canh ph i và d i ả ướ Xem k t qu :ế ả Canh gi a ữ Canh biên ph i ả Canh gi a và trên ữ Canh gi a và gi a ữ ữ Canh gi a và d i ữ ướ Canh ph i và d i ả ướ III-Kh ang cách các ô d li u:ỏ ữ ệ 1-Kh ang cách gi a các ô d li u: cellspacing=ỏ ữ ữ ệ Thu c tính ộ cellspacing="s pixels" ố đ c dùnng đ các đ nh kh ang các gi a các ô d li u trongượ ể ị ỏ ữ ữ ệ b ng. Thu c tính này đ c đ t trong Th ả ộ ượ ặ ẻ khi m t b ng đ c khai báo. Ví d , đ xác đ nhộ ả ượ ụ ể ị kh ang cách gi a các ô là 10px, ta khai báo nh sau:ỏ ữ ư Chèn đ an codes này vào đ an codes m u trong ví d trên, thêm màu n n cho t ng ô d li u đ dọ ọ ẫ ụ ề ừ ữ ệ ể ễ phân bi t (dùng bgcolor="yellow" ch ng h n), Ch y đ an codes này (trong Code Runner) ta th y k tệ ẳ ạ ạ ọ ấ ế qu nh bên d i:ả ư ướ Canh gi a ữ Canh biên ph i ả Canh gi a và trên ữ Canh gi a và gi a ữ ữ Canh gi a và d i ữ ướ Canh ph i và d i ả ướ Đ ý r ng, gi a các ô d li u gi đây đã có m t kh ang cách là 10 pixels. Hi n th b ng m t vi nể ằ ữ ữ ệ ờ ộ ỏ ể ị ằ ộ ề r ng 10pixels màu tr ng. ộ ắ 2-Kh ang cách t ô d li u đ n vi n xung quanh: cellpadding=ỏ ừ ữ ệ ế ề N u b n t ng gói hàng, h n b n ph i dùng gi y m m ho c mút chèn xung quanh món hàng đ b oế ạ ừ ẳ ạ ả ấ ề ặ ể ả v kh i b v . Nh ng gì b n chèn xung quanh món hàng đ n h p b c bên ngòai, trong HTML g i đóệ ỏ ị ỡ ữ ạ ế ộ ọ ọ là padding: đ m, lót ệ . Nh v y, ư ậ cellpadding= là kh ang cách t d li u đ n các vi n xung quanh nó.ỏ ừ ữ ệ ế ề Các vi n này đ c xác đ nh trong Th ề ượ ị ẻ table. Cũng nh ư cellspacing=, cellpadding= cũng đ c khaiượ báo trong th ẻ Table. Đ th y đ c k t qu c a Cellpadding, chúng ta dùng đ an code bên d i: ể ấ ượ ế ả ủ ọ ướ <table align="center" width="500" height="60" border=1 cellspacing="0"> Canh gi a ữ Canh biên ph i ả Canh gi a và trên </ữ td> Canh gi a vàữ gi a ữ Canh gi a vàữ d i ướ Canh ph i vàả d i ướ Ch y đ an codes này (trong Code Runner), chúng ta có b ng sau: ạ ọ ả Canh gi a ữ Canh biên ph i ả Canh gi a và trên ữ Canh gi a và gi a ữ ữ Canh gi a và d i ữ ướ Canh ph i và d i ả ướ Bây gi , chèn thêm Cellpadding=20 vào Th Table: ờ ẻ Thay th đ an codes này cho đ an khai báo Table trên ví d trên và ch y l i (trong Code Runner), taế ọ ọ ở ụ ạ ạ có k t qu nh sau:ế ả ư Canh gi a ữ Canh biên ph i ả Canh gi a và trên ữ Canh gi a và gi a ữ ữ Canh gi a và d i ữ ướ Canh ph i và d i ả ướ Rõ ràng, d li u trong ô đã đ c đ m 20pixels cho trái, ph i, trên d i, khi n cho đ cao c a ô đ cữ ệ ượ ệ ả ướ ế ộ ủ ượ n i ra. Còn hai biên trái ph i thì d li u đ c đ y th t vào.ớ ả ữ ệ ượ ẩ ụ Tuy nhiên, khi dùng Cellpadding thì ph n đ m s đ c chèn vào 4 phía: trên, trái, d i, ph i. Và b nầ ệ ẽ ượ ướ ả ạ không thích nh v y. B n ch thích có th đi u khi n kh ang cách cho t ng phía. Cascading Styleư ậ ạ ỉ ể ề ể ỏ ừ Sheet (CSS) s giúp b n làm đi u này v i thu c tính ẽ ạ ề ớ ộ padding-top, padding-left, padding-bottom, padding-right; Đây là m t ví d Inline Embeded CSS trong m t ộ ụ ộ . <TD align="center" bgcolor="yellow" STYLE="padding-top:0px; padding-left:5px; padding- bottom:0px; padding-right:5px;">D li u trong ô ữ ệ Ho c vi t g n:ặ ế ọ D li u trong ô</ử ệ TD> Các bài h c v CSS s trình bày chi ti t v đ nh d ng Layout m t trang Web. ọ ề ẽ ế ề ị ạ ộ IV-S d ng giá tr ph n trăm cho b ng: ử ụ ị ầ ả L y m t đ an codes m u trên và thay đ i các giá tr Pixel cho Width= và Height=ấ ộ ọ ẫ ở ổ ị b ng sằ ố ph n trăm. Ch ng h n, b n mu n trang Web c a b n r ng b ng 70% c a màn hình 1024x768 và caoầ ẳ ạ ạ ố ủ ạ ộ ằ ủ 100%, b n khai báo nh sau:ạ ư B n cũng có th v a dùng Pixels v a dùng ph n trăm cho đ r ng và chi u cao c a b ng. Xem đ anạ ể ừ ừ ầ ộ ộ ề ủ ả ọ codes bên d i:ướ <table align="center" width="100%" height="60" border=1 cellspacing="0"> Canh gi a ữ Canh biên ph i ả Canh gi a và trên </ữ td> Canh gi a vàữ gi a ữ Canh gi a vàữ d i ướ Canh ph i vàả d i ướ Đ n đây v c b n, b n đã n m đ c cách s d ng b ng. V i ham mu n n m v ng, n m ch c,ế ề ơ ả ạ ắ ượ ử ụ ả ớ ố ắ ữ ắ ắ n m k ki n th c đã h c, b n nên th c hành nhi u và th t nhi u l n. B n cũng có th hình dung đ nắ ỹ ế ứ ọ ạ ự ề ậ ề ầ ạ ể ế vi c s p x p các n i dung c a trang Web thành m t tr t t b ng cách s d ng b ng. Tr c khi b tệ ắ ế ộ ủ ộ ậ ự ằ ử ụ ả ướ ắ đ u Layout m t b ng hòan ch nh, chúng ta còn m t ph n quan tr ng trong thi t k b ng ph c t p đóầ ộ ả ỉ ộ ầ ọ ế ế ả ứ ạ là Colspan và Rowspan. S đ c đ c p trong bài 15.ẽ ượ ề ậ Nh ng thu c tính nh ữ ộ ư name=, id= không đ c đ c p trong đây vì chúng dùng cho các Scriptingượ ề ậ Language. Cũng không m y khó đ dùng khi b n đã nhu n nhuy n HTML r i đi ti p qua CSS,ấ ể ạ ầ ễ ồ ế Javascript tr c khi vào Server-Side Scripting và Advanced Programming.ướ BÀI 14 : T o bi u b ng trong HTML-Ph n 4ạ ể ả ầ Thu c tính COLSPAN="" dùng đ m r ng m t ô d li u trong m t c t b ng v i s ô d li u trongộ ể ở ộ ộ ữ ệ ộ ộ ằ ớ ố ữ ệ c t đó. Thu c tính ROWSPAN ="" dùng đ m r ng 1 ô d li u trong m t hàng b ng v i v i sộ ộ ể ở ộ ữ ệ ộ ằ ớ ớ ố hàng ch a các ô còn l i.ứ ạ Hãy xem b ng bên d i-Ví D 1:ả ướ ụ BUSINESS 2ND QUARTER SALES SUMMARY. Click here to see detailed sales. Month APR MAY JUN Gross Sales 000000 000000 000000 Expenses 000000 000000 000000 Total 00000 00000 00000 METHOD OF PAYMENT. Click here to see Monthly transaction statement. Visa 000000 000000 000000 MasterCard 000000 000000 000000 Others 000000 000000 000000 Total 000000 000000 000000 Click here Personal 000000 000000 000000 to see checks deposited. check Business check 000000 000000 000000 Others 00000 00000 00000 Total 00000 00000 00000 EMPLOYEE PAYROLL. Click here for issued checks. EMP 1 000000 000000 000000 EMP 2 000000 000000 000000 EMP 3 000000 000000 000000 Total 000000 000000 000000 TAXABLE INTEREST Net business Interest. 000000 000000 000000 Và đây là m t ví d khác- ộ ụ Ví d 2:ụ B NG GIÁ THÁNG 3 NĂM 2006Ả Tên thi t bế ị S l ngố ượ Giá Thành ti nề 000115 Dĩa c ngứ 10 $120 $1200 000116 RAM 15 $50 $750 000117 CPU 5 $180 $900 Total $2850 I-Thu c tính Colspan: Colspan="s ô trong c t"ộ ố ộ Thu c tính này đ c đ t trong Th .ộ ượ ặ ẻ 1-Cú pháp: ố ộ Trong đó: • Colspan= :Khai báo s m r ng bao nhiêu c t so v i s ô còn l i trong c t đó undefinedgiá trẽ ở ộ ộ ớ ố ạ ộ ị là s ).ố Ví d : Chúng ta hãy xem ví d s 2:ụ ụ ố Trong ví d 2 chúng ta dùng m t b ng có đ r ng =500pixels, align="center", cellspacing="2",ụ ộ ả ộ ộ cellpadding="3", border="1". Chúng ta vi t nh sau: ế ư B t đ u m t hàng, vi t:ắ ầ ộ ế Đ n đây, nh ví d minh h a 2, b n th y r ng hàng này ch ch a m t ô d li u, B NG GIÁ THÁNGế ư ụ ọ ạ ấ ằ ỉ ứ ộ ữ ệ Ả 3 NĂM 2006. Nh v y có th xem đây là m t c t. Đ m s c t trong các hàng còn l i và l y hàng cóư ậ ể ộ ộ ế ố ộ ạ ấ s c t nhi u nh t. Trong ví d này là 5 c t. Nh v y đ ô này tr i r ng b ng 5 c t so v i hàng đó, taố ộ ề ấ ụ ộ ư ậ ể ả ộ ằ ộ ớ vi t nh sau: ế ư B NG GIÁ THÁNG 3 NĂM 2006Ả Đóng hàng này, vi t:ế Nh v y, chúng ta có đ an Codes cho hàng đ u tiên nh sau:ư ậ ọ ầ ư B NG GIÁ THÁNG 3 NĂM 2006Ả Trong hàng th 2, c t đ u tiên ứ ộ ầ Tên thi t bế ị có đ r ng b ng 2 ô d li u hàng d i là ô mã s vàộ ộ ằ ữ ệ ở ướ ố thi t b (cùng trong m t c t). Do đó chúng ta vi t, b t đ u m t hàng m i:ế ị ộ ộ ế ắ ầ ộ ớ B t đ u m t ô, ô này m r ng b ng 2 ô nh trong cùng m t c t so v i hàng d i: ắ ầ ộ ở ộ ằ ỏ ộ ộ ớ ướ Tên thi t b ế ị Chúng ta vi t ti p các ô còn l i và đóng hàng này:ế ế ạ S l ngố ượ Giá Thành ti nề Đ n đây chúng ta đã làm xong đ c 2 hàng trong b ng ế ượ ả B NG GIÁ THÁNG 3 NĂM 2006Ả Tên thi t b ế ị S l ngố ượ Giá Thành ti nề Chúng ta ti p t c v i hàng th 3, 4, 5: Vì các hàng này có t ng s c t là 5 nên không có ô nào mế ụ ớ ứ ổ ố ộ ở r ng. Do đó chúng ta không dùng Colspan mà vi t nh sau:ộ ế ư Hàng th 3:ứ 000115 Dĩa c ngứ 10 $120 $1200 Vi t t ng t cho hàng th 4 và 5 nh ng thay th n i dung d li u trong Ô.ế ươ ự ứ ư ế ộ ữ ệ Hàng th 6: Totalứ Hàng này có 2 ô d li u. Ô đ u tiên là ữ ệ ầ Total có đ r ng b ng 4 ô hàng trên, canh bên ph i. Do v y, ôộ ộ ằ ả ậ này ph i dùng ả Colspan=4. Ô th 2 b ng v i s ô trong c t- ch có 1 ô, nên không dùng Colspan. Và taứ ằ ớ ố ộ ỉ vi t hàng này nh sau: ế ư Total $2850 Cu i cùng đ đóng b ng, ta dùng th ố ể ả ẻ Và đây là Codes cho b ng c a ví d 2:ả ủ ụ <TABLE width="500" align=center cellpadding="3" cellspacing = "2" border=1> B NG GIÁẢ THÁNG 3 NĂM 2006 Tên thi t b ế ị S l ngố ượ Giá Thành ti nề 000115 Dĩa c ngứ 10 $120 $1200 000116 RAM 15 $50 $750 000117 CPU 5 $180 $900 Total $2850 II-Thu c tính Rowspan: Rowspan="s hàng ch a ô"ộ ố ứ Thu c tính ộ Rowspan ="" dùng đ m r ng 1 ô d li u trong m t hàng theo chi u cao b ng v i v iể ở ộ ữ ệ ộ ề ằ ớ ớ s hàng ch a các ô còn l i.ố ứ ạ Thu c tính này đ c đ t trong Th ộ ượ ặ ẻ . Đ n m đ c cách dùng ể ắ ượ Rowspan=, chúng ta xem l i ví d 1. Ví d 1 là m t k t h p s d ngạ ụ ụ ộ ế ợ ử ụ COLSPAN và ROWSPAN. B ng này s d ng các thu c tính và giá tr nh bên d i:ả ử ụ ộ ị ư ướ Hãy đ ý hàng nhi u ô d li u nh t trong b ng VD 1 là 5 ô, t c b ng này có s c t cao nh t là 5 c t.ể ề ữ ệ ấ ả ứ ả ố ộ ấ ộ hàng đ u tiên c a b ng:ầ ủ ả BUSINESS 2ND QUARTER SALES SUMMARY là hàng ch có m t c t d li u. Và đ c t này tr iỉ ộ ộ ữ ệ ể ộ ả b ng 5 ô d li u trong hàng có s ô d li u nhi u nh t ta vi t:ằ ữ ệ ố ữ ệ ề ấ ế BUSINESS 2ND QUARTER SALES SUMMARY. Nh v y chúng ta có đ c hàng đ u tiên.ư ậ ượ ầ Trong hàng th 2, ô d li u đ u tiên ( ứ ữ ệ ầ Click here to see detailed sales.) có chi u cao b ng 4 hàng g mề ằ ồ ch a ô ứ Month, Gross Sales, Expenses, Total và các ô k ti p qua ph i... ế ế ả Đ m r ng ô này có chi u cao b ng 4 hàng ta vi t nh sau:ể ở ộ ề ằ ế ư Click here to see detailed sales. Chúng ta ti p t c vi t cho 4 ô còn l i trong hàng này:ế ụ ế ạ Month APR MAY JUN Cho 3 hàng còn l i (M i hàng ch có 4 c t) chúng ta vi t nh sau:ạ ỗ ỉ ộ ế ư Gross Sales 000000 000000 000000 Expenses 000000 000000 000000 Total 00000 00000 00000 Nh v y đ n chúng ta đ c b ng v i hàng s d ng ROWSPAN: ư ậ ế ượ ả ớ ử ụ BUSINESS 2ND QUARTER SALES SUMMARY. Click here to see detailed sales. Month APR MAY JUN Gross Sales 000000 000000 000000 Expenses 000000 000000 000000 Total 00000 00000 00000 Và n u đ n đây b n đóng b ng b ng cách thêm vào ế ế ạ ả ằ thì b n có đ c b ng nh minh h aạ ượ ả ư ọ d i:ướ BUSINESS 2ND QUARTER SALES SUMMARY. Click here to see detailed sales. Month APR MAY JUN Gross Sales 000000 000000 000000 Expenses 000000 000000 000000 Total 00000 00000 00000 Nh ng chúng ta ph i hòan t t b ng VD 1, vì v y b n ch a th đóng b ng t i đây mà s d ng c uư ả ấ ả ậ ạ ư ể ả ạ ử ụ ấ trúc vi t trong hàng:ế Click here to see detailed sales. đ vi t cho hàng ể ế METHOD OF PAYEMENT , EMPLOYEE PAYROLL và hàng TAXABLE INTEREST. Hàng cu i cùng d i ố ướ TAXABLE INTEREST, chúng ta dùng COLSPAN đ m r ng c t ể ở ộ ộ Net business Interest. C u trúc nh sau:ấ ư Net business Interest. 000000 000000 000000 Xong, chúng ta đóng b ng này b ng th ả ằ ẻ Và đây là Source Codes cho b ng ví d 1:ả ụ <TABLE ALIGN=CENTER width=500 border=1 CELLSPACING=1 CELLPADDING=1> BUSINESS 2ND QUARTER SALES SUMMARY. Click here to see detailed sales. Month APR MAY JUN Gross Sales 000000 000000 000000 <TD ALIGN=CENTER bgcolor="#FFFFFF">Expenses 000000 000000 000000 Total 00000 00000 00000 <FONT COLOR="WHITE">METHOD OF PAYMENT. Click here to see Monthly TRansaction statement. Visa 000000 000000 000000 MasterCard 000000 000000 000000 Others 000000 000000 000000 Total 000000 000000 000000 Click here to see checks deposited. Personal check 000000 000000 000000 Business check 000000 000000 000000 Others 00000 00000 00000 Total 00000< 00000 00000 <font color="white">EMPLOYEE PAYROLL. Click here for issued checks. EMP 1 000000 000000 000000 EMP 2 000000 000000 000000 EMP 3 000000 000000 000000 Total 000000 000000 000000 TAXABLE INTEREST Net business Interest. 000000 000000 000000 Ph n cu i cùng c a các bài h c v s d ng b ng là m t minh h a s d ng b ng đ Layout m tầ ố ủ ọ ề ử ụ ả ộ ọ ử ụ ả ể ộ trang WEB. BÀI 15 : S d ng B ng Layout m t trang Webử ụ ả ộ Qua bài 12,13,14,15, b n đã n m ph n l n các yêu c u đ t o m t b ng và thu c tính đ đ nh d ngạ ắ ầ ớ ầ ể ạ ộ ả ộ ể ị ạ b ng. Tuy nhiên, HTML v n ch a cho b n đ y đ nh ng gì b n mu n. Đ th t s đ nh d ng b ngả ẫ ư ạ ầ ủ ữ ạ ố ể ậ ự ị ạ ả theo ý mu n, b n c n bi t cách dùng Ngôn ng CSS...ố ạ ầ ế ữ Cascading Style Sheet cũng là m t ngôn ng l p trình Web b i vì nó cũng có nh ng cú pháp riêng.ộ ữ ậ ở ữ Ph n minh h a d i đây ch y u giúp b n v c u trúc, còn v phong cách, c n ph i có CSS h trầ ọ ướ ủ ế ạ ề ấ ề ầ ả ỗ ợ (S đ c p đ y đ trong giáo trình CSS) và kh năng sáng t o và th m m c a b n.ẽ ề ậ ầ ủ ả ạ ẩ ỹ ủ ạ D i đây là m t b ng minh h a c u trúc c a trang Web theo Phong cách cân đ i-Symmetrical style:ướ ộ ả ọ ấ ủ ố (truy n th ng)ề ố Banner 1 Banner 2 Banner 3 Đ t Script gi đăng nh p:ặ ờ ậ Đ t Script ngày tháng nămặ Trang Chính Gi i thi uớ ệ Tinh cọ Âm nh cạ Ti ng Anhế Ki n Th cế ứ Welcome to My First HTML Page! Đón chào b n đ n v iạ ế ớ TRang Web đ u tiên c aầ ủ tôi! Truy n dàiệ Truy n ng nệ ắ Truy n c iệ ườ Thơ Liên l cạ Đăng ký All rights reserved-Copyrighted by Me. Và đây là Source Codes đ t o b ng trên:ể ạ ả My First Page <TABLE align="center" width="600" height="50" border="1" cellpadding="0" cellspacing="0"> Banner 1 Banner 2 Banner 3 <TABLE align="center" WIDTH="600" HEIGHT="20" cellpadding="0" cellspacing="0" border="1"> <font color="blue" size="1">Đ t Script gi đăng nh p:ặ ờ ậ <font color="blue" size="1">Đ t Script ngày tháng nămặ <TABLE align="center" width="600" cellspacing="0" cellpadding="0"> <TABLE cellpadding="2" cellspacing="2" width="140" border="1" bordercolor="silver"> Trang Chính Gi i thi uớ ệ Tinh cọ Âm nh cạ Ti ng Anhế Ki n Th cế ứ <TD BGCOLOR="#99FFFF" VAlign="tOP" width="320" height="100%" align="center"> Welcome to My First HTML Page! Đón chào b n đ n v i TRang Web đ u tiên c a tôi!ạ ế ớ ầ ủ <TABLE WIDTH="140" border="1" cellspacing="2" cellpadding="2" bordercolor="#FFFFFF"> Truy n dàiệ Truy n ng nệ ắ Truy n c iệ ườ Th ơ Liên l cạ Đăng ký <TABLE ALIGN="CENTER" Border="1" width="600" height="20" cellpadding=0 bgcolor="#8DCFF4"> All rights reserved-Copyrighted by Me. Đ n đây, b n đã n m đ c c b n cách dùng b ng đ đ nh d ng m t trang Web. B n có th thayế ạ ắ ượ ơ ả ả ể ị ạ ộ ạ ể đ i đ r ng c a b ng =100%. B n cũng có th thêm nhi u thành ph n khác đ trang th t s theo ýổ ộ ộ ủ ả ạ ể ề ầ ể ậ ự mu n. B n th c hành th t nhi u l n đ n m cách s d ng. Sau đó b n ch y đ an Code m i trongố ạ ự ậ ề ầ ể ắ ử ụ ạ ạ ọ ớ trình duy t, b n th y có m t kh ang cách gi a các th c đ n c a trình duy t WEB (IE ch ng h n) vàệ ạ ấ ộ ỏ ữ ự ơ ủ ệ ẳ ạ trang web c a b n. Lý do là chúng ta ch a xác đ nh kh ang cách c a trang v i biên trình duy t. Trongủ ạ ư ị ỏ ủ ớ ệ bài 17, chúng ta s h c đ nh d ng cho thành ph n BODY(ph n 2) đ xác đ nh kh ang cách này. Bàiẽ ọ ị ạ ầ ầ ể ị ỏ 18, chúng ta h c các liên k t đ n các t p tin html khác ho c trang Web khác và kích h at ch ng trìnhọ ế ế ậ ặ ọ ươ g i mail. Đây ch là nh ng ph n đ n gi n c a HTML. Ngòai ra, s d ng Iframe, Frame và t o Formử ỉ ữ ầ ơ ả ủ ử ụ ạ trong HTML là nh ng ph n quan tr ng mà chúng ta cũng s l n l t khám phá.ữ ầ ọ ẽ ầ ượ HTML Tags Bài này gi i thi u m t s HTML Tags và các thu c tính c a chúng . ớ ệ ộ ố ộ ủ TAGS ATTRIBUTES DESCRIPTION: MÔ TẢ Để tạo liên kết hoặc chỉ mục liên kết(anchor) href= Chỉ định đến một địa chỉ URL hoặc một chỉ mục  liên kết(anchor) hoặc địa chỉ e­mail... name= Đánh dấu một vùng mà liên kết chỉ mục sẽ nhảy  đến (thường là trong 1 trang). target= Chỉ định 1 cửa sổ hoặc một khung để nội dung  trang liên kết sẽ hiển thị. (sử dụng nhiều với  frameset) accesskey= Thêm phím bấm nhanh cho liên kết đến chỉ mục. event Dùng để kích 1 script. tabindex Xác định thứ tự phím tab đi qua trong liên kết  hoặc thành phần của form. Giải thích nghĩa của các ký tự viết tắt. title= Nội dung giải thích. Giải thích nghĩa của các ký tự viết tắt bắt đầu bằng chữ đầu: Ví dụ NATO, WHO, WTO. title= Nội dung giải thích. Định dạng địa chỉ mail của người thiết kế Web, thường cho chữ nghiêng, xuống dòng tự động. Chèn chương trình Java Applets. code Xác định địa chỉ URL của mã applets width, height Xác định chiều rộng và cao của Applets. area Xác định tọa độ của bản đồ ảnh.. accesskey= Thêm phím bấm nhanh đến một vùng riêng biệt  trên bản đồ. alt= Cung cấp thông tin về một vùng. coords= Cung cấp tọa độ của một vùng trên bản đồ. href= Link đến một địa chỉ URL từ một vùng trong bản  đồ ảnh. nohref= Đánh dấu một vùng trên bản đồ không có liên kết  đến địa chỉ URL shape= Xác định hình dạng của một vùng trên bản đồ  (circle, rect và poly). target= xác định cửa sổ hay khung mà file liên kết sẽ hiển  thị trong đó. Làm chữ đậm lên. base Xác định địa chỉ URL liên quan trọng frame. href= Xác định địa chỉ URL sẽ được dùng để truy cập  các địa chỉ URL liên quan. target= Xác định đích cho các liên kết trên trang hiện tại. basefont Xác định chuẩn font cố định cho chữ. color= Xác định màu cố định cho chữ. face= Xác định font cố định cho chữ. size= Xác định kích thước cố định cho chữ. bgsound Lồng nhạc nền vào trang. loop= Xác định số lần mà bản nhạc sẽ lặp lại. src= Xác định địa chỉ nguồn của bản nhạc. Làm cho chữ lớn hơn so với chữ xung quanh. Làm cho chữ ẩn hiện, nhấp nháy. Tạo một đọan trích dẫn thụt lề. Khỏang cách thụt lề tùy vào số tag mở/đóng blockquote. cite= Ghi địa chỉ nguồn trích dẫn (nếu có). Khai báo phần nội dung chính(phần thân) của  trang web. Những gì nằm giữa tag mở/đóng body  sẽ hiển thị trên trình duyệt. alink= Xác định màu của một link đang tham khảo đến,  đang họat động(active link). link= Xác định màu của một link chưa được kích họat. (new link). vlink= Xác định màu của một link đã được viếng thăm  (visited link). background= Xác định ảnh nền cho tòan trang.  bgcolor= Xác định màu nền cho tòan trang. leftmargin= Xác định lề trái (là khỏang cách từ biên trái màn  hình đến lề trái của trang web) toptmargin= Xác định lề trên (là khỏang cách từ biên trên màn  hình đến lề trên của trang web). text= Xác định màu của chữ. br Dùng để xuống hàng (break a line) clear Ngừng việc xuống hàng tự động. button Dùng để tạo nút bấm (button). Được sử dụng nhiều trong Form­rất quan trọng. accesskey= Thêm phím bấm nhanh cho nút. disabled Làm cho button có màu xám cho đến khi một sự  kiện khác xuất hiện . event Liên kết button với một script. (Event handler) name= Xác định tên của button để tham khảo sự kiện  trong button (trong một hàm javascript). type= Dùng button như một thành phần của Form.  Thường trong input type=button value= value= Giá trị hiển thị của button. Ví dụ: <input  type=button name=getcode value="Click here"> caption Dùng để tạo phụ đề (chú thích) cho bảng align= Dùng để xác định vị trí của caption trên hay dưới  bảng. Dùng canh giữa chữ, ảnh và các thành phần khác  Đánh dấu chữ là trích dẫn. Làm chữ nghiêng. Nếu  là giá trị, cite dùng để chỉ đường link đến nguồn  trích dẫn. Xem  <code</code Đánh dấu chữ là mã máy tính. col Kết hợp các cột trong một bảng thành một nhóm  không có cấu trúc align=  Xác định sự ngay hàng của cột trong nhóm cột. valign= Xác định sự ngay hàng(theo chiều dọc) của cột  trong nhóm cột span=  Xác định số cột trong một nhóm cột. width=  Xác định độ rộng của cột. colgroup Để kết hợp các cột trong một bảng thành một bảng có cấu trúc align=  Xác định sự ngay hàng của cột trong nhóm cột.. valign= Xác định sự ngay hàng(theo chiều dọc) của cột  trong nhóm cột span=  Xác định số cột trong một nhóm cột. width=  Xác định độ rộng mặc định cho các thành phần  col đi kèm.. dd Đánh dấu một định nghĩa trong danh sách Hiển thị chữ với một đường gạch giữa như xóa. Như strike hoặc s. Chia trang thành các vùng hợp lý. Dùng nhiều trong DHTML và CSS. align= Canh biên trái, phải, giữa một vùng được chia . class= Cấp một tên cho mỗi class của các vùng phân  chia. id= Cấp 1 tên duy nhất cho một vùng phân chia riêng  biệt. dl Tạo một danh sách định nghĩa. dt Đánh dấu một thuật ngữ sẽ được định nghĩa trong danh sách. Làm cho chữ nghiêng.Tương tự i. embed Chèn file phim, nhạc và trang web. align= Canh lề bộ điều khiển. autostart= Khởi động file nhạc, hay phim tự động khi được  nạp vào. Giá trị: True hoặc False controls= Dùng để hiển thị các nút điều khiển trên bộ điều  khiển. loop= Xác định số lần mà file phim hay nhạc sẽ lặp. src= Xác định nguồn (địa chỉ URL) của file phim hay  nhạc. width=           height= Xác định kích thước của bộ điều khiển. fieldset Nhóm một tập hợp các thành phần của form lại với nhau. font Dùng để thay đổi kích thước chữ, font chữ và màu chữ. color= Xác định màu chữ. face Xác định lọai font chữ. size Xác định kích thước chữ. Dùng để tạo một đơn với các ô trống để người dùng điền vào nội dung cần thiết. action= Cung cấp địa chỉ URL của file xử lý đơn. (CGI  Scripts chẳng hạn) enctype Để upload các tập tin theo định dạng cho phép. method= Xác định phương pháp mà đơn sẽ được xử lý. frame Để tạo khung trong tập hợp khung. border= Xác định độ dày của của viền quanh khung. bordercolor= Xác định màu của viền. frameborder= Xác định hiển thị hay giấu viền quanh khung. framespacing= Thêm khỏang trống vào giữa các khung. longdesc= Liên kết đến một tài liệu có nhiều thông tin. name= Đặt tên cho một khung để có thể dùng làm target  cho file trong liên kết. noresize Không cho phép người dùng thay đổi kích thước  của khung. marginwidth=            marginheight= Xác định lề trái phải, trên dưới của khung. scrolling= Để hiển thị hay giấu thanh cuộn của khung. src= Xác định địa chỉ URL của file đầu tiên hiển thị  trong khung. target= Xác định khung (với tên) nào mà file trong một  liên kết sẽ mở vào đó. title= Chỉ định mục đích của khung. Xác định một tập hợp khung . border= Định độ dày của viền quanh khung. bordercolor= Định màu cho viền khung. cols= Định số khung và kích thước khung. frameborder= Để hiển thị hay giấu viền khung. framespacing= Để thêm khỏang cách giữa các khung. rows= Để xác định số khung và kích thước các khung. h1,h2,h3,h4,h5,h6 Dùng để tạo tiêu đề cho văn bản align= Canh biên tiêu đề Bắt đầu và kết thúc tạo phần đầu của trang là nơi chứa title, meta, link, script tag. Dùng để tạo đường kẽ ngang. align= Canh biên cho đường kẽ. noshade Hiển thị đường kẽ không có bóng mờ. size= Xác định độ lớn của đường kẽ. width= Xác định độ dài của đường kẽ. color= Xác định màu của đường kẽ. Bắt đầu và kết thúc một trang tài liệu viết bằng HTML. Hiển thị chữ nghiêng. Bắt đầu và kế thúc một Inline frame. align= Canh biên Inline frame. frameborder= Hiển thị hoặc giấu viền. height= Xác định chiều cao của iframe. width=, height= Xác định kích thước của Iframe. name= Đặt tên của Iframe để dùng cho thuộc tính target. scrolling= Hiển thị hoặc giấu thanh cuộn src= Xách định địa chỉ URL của trang đầu tiên. img Chèn ảnh vào trang HTML. align= Canh biên cho ảnh. alt= Hiển thị dòng văn bản thay thế trường hợp ảnh  không có. border= Xác định độ dày của viền, nếu có. hspace,vspace Xác định khỏang cách trái phải, trên dưới của ảnh. src= Xác định địa chỉ nguồn của ảnh. usemap= Xác định bản đồ ảnh sẽ được dùng với ảnh được  tham chiếu. width=, height= Xác định kích thước của ảnh, giúp ảnh tải nhanh  hơn. input Tạo các thành phần cho Form. accesskey= Thêm phím bấm nhanh cho thành phần. align= Canh biên cách thành phần. checked Đánh dấu một nút radio hoặc hộp check mặc  nhiên. disabled Vô hiệu các thành phần của Form cho đến khi  một sự kiện xảy ra. event handler= Kích một sự kiện như Onclick=, Onchange=. maxlength= Xác định số chữ cao nhất có thể nhập vào thành  phần Form. name= Tên của thành phần mà dữ liệu sẽ được thu thập  khi tham chiếu. size= Xác định độ rộng của hộp Text hoặc Password. src= Xác định nguồn của ảnh đang họat động. readonly Chống thay đổi nội dung trong form từ khách  viếng thăm. tabindex Xác định thứ tự mà phím Tab sẽ di chuyển qua  các thành phần trong Form. type= Xác định lọai thành phần của Form. value= Xác định giá trị của thành. ins Đánh dấu chữ chèn vào với gạch dưới­Dùng để gạch dưới. TAGS/ ATTRIBUTES DESCRIPTION: MÔ TẢ kbd Đánh dấu chữ bàn phím. label Gán nhãn cho thành phần của Form. for= Xác định thành phần nào trong form sẽ được label. layer Định vị thành phần. legend Gán nhãn cho filedset. align= Canh biên cho lời giải thích. li Tạo bảng mục lục­danh sách. type= Xác định ký tự nào bắt đầu danh sách. value= Xác định giá trị đầu tiên của mục đầu tiên trong danh sách. link Tạo bảng mục lục­danh sách. href= Xác định địa chỉ nguồn của trang CSS. media= Lưu ý mục đích của trang CSS.  title= Gán nhãn thay thế cho trang CSS. type= Lưu ý lọai MIME của trang CSS rel= Xác định trang CSS là chính hay trang thay thế. map Tạo bản đồ ảnh hướng khách hàng name= Đặt tên cho bản đồ để tham chiếu sau đó. marquee Tạo chữu chạy. behavior Điều khiển việc di chuyển của chữ(scroll, slide,alternate). direction Điều khiển hướng di chuyển của chữ: trái qua phải hay phải qua  trái. loop Xác định vòng lặp. scrollamount Xác định khỏang cách giữa các lần lặp. scrolldelay Xác định khỏang thời gian giữa mỗi lần lặp. meta Tag dùng để khai báo cho search engine. content= Thêm thông tin về trang web. http­equiv Tạo nhảy đến trang khác, thiết lập ngôn ngữ cho các script, khai  báo encode. name Khai báo thêm thông tin về trang Web nobr Chống xuống hàng. Các ký tự sẽ nằm trên cùng 1 hàng. noframes Cung cấp các thay thế cho frames. noscript Cung cấp các thay thế cho script. object Nhúng các đối tượng vào trang Web. align= Canh biên đối tượng. border= Tạo hoặc giấu viền quanh đối tượng. classid= Xác định lọai đối tượng được nhúng codebase Xác định địa chỉ URL cơ sở của đối tượng nguồn. data Xác định nguồn của tập tin phim được nhúng. hspace, vspace Xác định khỏang trống xung quanh đối tượng. name Xác định tên của đối tượng. standby Hiển thị đọan tin khi đối tượng đang đựơc tải. type Lưu ý đối tượng là lọai MIME. width,height Xác định kích thước của hộp đối tượng. ol Tạo danh sáchc 1o thứ tự type= Xác định ký tự bắt đầu trong mỗi mục. start Xác định giá trị đầu tiên của mục đầu tiên. optgroup Chia thực đơn thành thực đơn con disabled Tắt khả năng lưa chọn thực đơn cho đến khi một sự kiện xuất hiện. label Xác định cách chọn lựa hiển thị trên thực đơn. option Tạo thực đơn các chọn lựa kiểu drop­down trong đơn (Form). disabled Tắt khả năng chọn cho đến khi một sự kiện xuất hiện. label Xác định cách chọn lựa hiển thị trên thực đơn. name Đặt tên cho chọn lựa. selected Xác định một chọn lựa được chọn mặc định. value Xác định giá trị đầu của chọn lựa trong thực đơn. P Tạo một đọan văn bản align Canh biên cho đọan văn bản. param Thiết lập thuộc tính cho một đối tượng name=  Xác định lọai đối tượng. value= Thiết lập giá trị của thuộc tính được đặt tên. pre Hiển thị chữ theo định dạng trước.  q Trích dẫn một đọan tin ngắn. cite Cung cấp địa chỉ URL của nguồn trích dẫn. s như strike Hiển thị chữ với một đường gạch giữa nhu xóa. Như strike hoặc del. samp Hiển thị chữ theo font chữ monospace. script Chèn các đọan script tự động vào trang. charset Xác định bộ ký tự mà script được viết. language Xác định ngôn ngữ mà đọan script viết. src Tham chiếu vị trí của script.(địa chỉ URL của script). type Xác định ngôn ngữ để script mà đọan script được viết. select Tạo một thực đơn trong Form. disabled Tắt khả năng cho đến khi một sự kiện xuất hiện. name= Xác định dữ liệu được thu thập bởi thực đơn. multiple Cho phép người dùng chọn nhiều lựa chọn cùng lúc. size Xác định số mục sẽ hiển thị trong cửa sổ thực đơn. small Giảm kích thước chữ so với kích thứơc của chữ xung quanh. span Tạo phong cách riêng cho chữ với CSS. class Đặt tên một phong cách riêng để tham chiếu. id Xác định những thành phần riêng biệt của HTML. Id thường được  dùng nhiều trong DHTML. strike Viết tắt là s. Dùng để hiển thị đường gạch giữa chữ. strong Dùng để làm đậm chữ (như tag ). style Dùng để chèn đọan mã CSS vào trang. Xem phần CSS. media Xác định mục đích của CSS. type Xác định lọai MIME của CSS. sub Dùng để hạ thấp chữ. Ví dụ như H2O sup Dùng để nâng cao chữ. Ví dụ như (a+b)2=a2+2ab+b2 table Tạo biểu bảng trong tài liệu HTML. align= Xác định vị trí của bảng trong trang (trái, phải hoặc giữa). background= Xác định ảnh làm nền cho bảng. bgcolor Xác định màu nền cho tòan bảng. border Xác định độ rộng của khung. bordercolor Xác định màu cho viền bảng. bordercolordark Xác định màu đậm hơn cho viền. bordercolorlight Xác định màu lợt hơn. cellpadding= Xác định khỏang cách giữa nội dung của các ô trong bảng với viền  bao quanh. cellspacing= Xác định khỏang cách giữa các ô trong bảng. frame Hiển thị viền bên ngòai. height Xác định độ cao của bảng. width Xác định độ rộng của bảng. rules Hiển thị viền ở trong. tbody Xác định phần body của bảng. align Canh biên nội dung của body trong bảng. td; th Tạo các ô hoặc ô tiêu đề riêng biệt trong bảng. align, valign Canh nội dung trong ô theo chiều ngang hoặc đứng. bgcolor= Chọn màu cho ô. background= Chèn ảnh làm nền cho ô. char Canh nội dung của ô phù hợp với ký tự. colspan Mở rộng một theo số cột trong bảng. Ví dụ bảng có 4 cột và có một  dòng chỉ là một cột thì dùng colspan=4 cho dòng đó. rowspan Mở rộng một ô hơn một dòng. Ví dụ bên phải của bảng là 5 ô và ô  bên trái có độ cao bằng 5 ô bên phải thì khai báo ô bên trái là  rowspan=5 nowrap Hiển thị nội dung trong ô trên một dòng. width, height Xác định độ rộng và cao của ô. textarea Tạo một hộp chứa văn bản. Thường nội dung do người dùng nhập vào. Sử dụng nhiều với Form. accesskey Thêm phím nóng cho vùng text. disabled Làm chữ có màu xám lợt cho đến khi một sự kiện xuất hiện. Sự kiện  được kích bởi một bộ qủan lý sự kiện như onClick, onkeydown... name Xác định tên cho dữ liệu sẽ được tham chiếu trong ô textarea khi xử  lý với chương trình xử lý Form như CGI. readonly Khóa nội dung trong ô textarea để chỉ đọc và chép, không xóa  hoặc thay đổi được. rows, cols Xác định bao nhiêu hàng và cột trong ô văn bản. width, height Xác định độ rộng và cao của ô. tfoot, thead Xác định tiêu đề trên dưới của bảng. align, valign Canh tiêu đề của ô. title Đặt tên tiêu đề của trang để hiển thị trên browser cũng như cho search Engine tìm trang. tr Tạo hàng trong bảng. Trong một bảng có một hoặc nhiều hàng.  Mỗi một hàng có một hoặc nhiều td (table data) được xem là mỗi ô  (cell) trong bảng. Không giống như chương trình bảng tính có nhiều  cột và hàng. Trong HTML các td trong một hàng sẽ tạo nên cột. align, valign Canh nội dung trong hàng theo chiều ngang hoặc đứng. bgcolor Xác định màu nền cho hàng background Xác định ảnh nền cho hàng. tt Hiển thị chữ monospace. u Hiển thị chữ gạch dưới (underline). ul Tạo một unordered list (danh sách không theo thứ tự). type Chọn một ký tự bắt đầu một mục trong danh sách. Ký tự có thể là :  square (vuông), circle(tròn) và disc (tròn đen). wbr Tạo một hàng trống tùy ý.