Tài liệu 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> </u