Học HTLM - Css canban

THÔNG TIN TÀI LIỆU

Thông tin cơ bản

Định dạng
Số trang	65
Dung lượng	1,98 MB

Nội dung

Học HTLM - Css canban Học HTLM - Css canban

Phn I. K nng c bn 1.1 HTML là gì? HTML (Hyper Text Markup Language - Ngôn ng ánh du siêu vn bn) là mt s nh dng  báo cho trình duyt Web (Web browser) bit cách  hin th mt trang Web. Các trang Web thc ra không có gì khác ngoài vn bn cùng vi các th (tag) HTML c sp xp úng cách hoc các on mã  trình duyt Web bit cách  thông dch và hin th chúng lên trên màn hình. 1.2 Cu trúc ca mt file HTML 1.2.1. Th (tag) HTML là gì. Khi trình duyt Web c mt file HTML, nó s tìm trong file ó các tag hay nhng on mã c bit  bit cách hin th file HTML ó. Ví d: Khi trong file HTML có on <h3> Cu trúc ca file HTML </h3> thì s hin th on "Cu trúc ca file HTML" lên trên màn hình vi mc  tiêu  thc 3 (s nói k  phn sau). Các tag HTML báo cho trình duyt bit cách khi nào thì in m mt dòng vn bn, in nghiêng, bin dòng vn bn thành mt siêu liên kt ti các trang Web khác, hin th nh Trong ví d trên ta thy sau tag <h3> và on vn bn là tag </h3>. Trong tag </h3> ta thy có du / , du / nm trong 1 tag báo hiu cho trình duyt bit là hiu ng ca tag ó ã kt thúc. Nh vy vic s dng mt tag HTML nh sau: <tên tag> vùng vn bn chu tác ng </tên tag>. Chú ý: Trình duyt không quan tâm tên tag là ch hoa hay ch thng nên vic vit <h3> và <H3> là nh nhau. 1.2.2. Cu trúc ca mt file HTML. File HTML bao gi cng bt u bng th <html> và kt thúc bng th </html>. Cp th này báo cho trình duyt Web bit rng nó ang c mt file có cha các mã HTML, còn th </html> có tác dng nh kt thúc file HTML. Bên trong cp th <html> </html> là các cp th <head> </head> và <body> </body> là phn thân, ti ây bn có th nhp vào các on vn bn cùng các th khác quy nh v nh dng ca trang. Ngoài ra  ghi chú thích, tin cho vic xem tag HTML hoc cp nht mt trang Web, ta cn t chú thích vào gia <! và >. Tóm li cu trúc c bn ca mt file HTML là <html> <head> <title> Tên trang </title> </head> <body> <! Vn bn và các th HTML > </body> </html>. Bn quyn Công ty Phát trin Phn mm (VASC) E-mail: i-today@vasc.vnn.vn 2. To file HTML u tiên. Sau khi ã c phn trên, bn ã bit th nào là th HTML và cu trúc chung ca mt file HTML. Sau ây chúng ta s cùng to ra file HTML u tiên. 1. M Notepad ca Windows hay bt k mt trình son tho vn bn nào có th to ra nhng vn bn tr!n (plain text). Nu bn dùng Microsoft Word thì phi lu tr  dng ASCII. 2. Bn hãy nhp nhng dòng vn bn sau <html> <head> <title>Chân tri tri thc - Internet today </title> </head> <body> Chào m"ng bn ã tham gia chuyên mc Chân tri tri thc ca tp chí Công ngh Thông tin Internet Today. Trong phn này bn s c hc nhng kin thc c! bn v HTML, công c  to ra các trang Web. Sau khi ã hc xong v HTML bn có th to ra nhng trang Web y n tng vi vn bn, hình nh, âm thanh </body> </html> 3. Lu file vi phn m rng là htm. Ví d Bai1.htm. Lu ý: Bn nên to mt Folder riêng  cha các tp tin mà bn s to ra trong su#t thi gian hc HTML. 4. Khi ng IE hoc Nescape. Chn File / Open. S$ dng hp thoi  m file HTML bn v"a to. 5. Bn s nhìn thy trên tranh tiêu  ca trình duyt là dòng ch "Chân tri tri thc - Internet today" và trong trang di là "Chào m"ng bn ã tham gia chuyên mc Chân tri tri thc ca tp chí Công ngh Thông tin Internet Today. Trong phn này bn s c hc nhng kin thc c! bn v HTML, công c  to ra các trang Web. Sau khi ã hc xong v HTML bn có th to ra nhng trang Web y n tng vi vn bn, hình nh, âm thanh " mà bn ã vit trong phn body Bn quyn Công ty Phát trin Phn mm (VASC) E-mail: i-today@vasc.vnn.vn 3. Hin th vn bn  dng m, nghiêng, gch chân 3.1.Bài hc Khi trình bày mt trang Web, có lúc cn nhn mnh, hay  to s khác bit, bn cn phi hin th vn bn  các dng m, nghiêng, gch chân HTML có các tag nh dng kiu ch  giúp bn. HTML Kt qu <u>Ðây là tag gch chân</u> Ðây là tag gch chân <i>Ðây là tag nghiêng </i> Ðây là tag nghiêng <tt>Ðây là tag ch ánh máy</tt> Ðây là tag ch ánh máy <b>Ðây là tag m </b> Ðây là tag m <em>Ðây là tag </em> Ðây là tag Strong <strong>Ðây là tag strong</strong> Ðây là tag Strong <strike>Ðây là tag strong</strike> Ðây là tag strikeline Bn có th kt hp các tag này vi nhau, mi%n là chúng c l&ng vào nhau mt cách chính xác. Ví d: <b> <i> </i> </b> Tag in nghiêng phi nm trong tag in m. H!n na bn có th áp dng các tag vi tiêu  <h2> <i> </i> <h2> 3.2.Thc hành áp dng vào file HTML ca bn. 1. To mt file HTML mi 2. Thêm các tag nh dng kiu ch. Lúc này file HTML ca bn trong phn body có dng nh sau. <h3><b><i>Chú ý khi to file HTML</i></b></h3> Nu bn dùng các ch!ng trình son tho vn bn<b><u> khác NotePad ca Windows </u></b>thì bn phi nh lu kt qu  dng vn bn tr!n (ASCII) 3. Lu công vic ca bn. 4. Dùng trình duyt m và so sánh vi ví d m'u. Bn quyn Công ty Phát trin Phn mm (VASC) E-mail: i-today@vasc.vnn.vn 4. Sáu mc tiêu  4.1. Bài hc Khi trình bày mt trang Web, ôi khi bn phi cn n các tiêu  theo các kích c(, phông ch khác nhau. HTML có các tag  thc hin vic này. Ð to mt tiêu  chúng ta dùng <hx> Tên tiêu  <hx> Trong ó x là mt s# có giá tr t" 1 n 6 ch) kích c( tiêu . Sau ây là ví d cho các c( ca tiêu . Tiêu  c 1 <! H1 c 36 > Tiêu  c 2 Tiêu  c 3 Tiêu  c 4 Tiêu  c 5 Tiêu  c 6. 4.2.Thc hành Thêm các tiêu  vào trang Web ca bn. 1. M li file HTML mà bn ã to ra  bài hc trc bng trình son tho vn bn mà bn ã dùng  to ra nó. 2. Thêm on sau vào file HTML. Bn cn lu ý on thêm vào phi nm gia <body> và </body> <h1>Gi thiu chung</h1> vào trc on "Chào m"ng bn ã tham gia chuyên mc Chân tri tri thc ca tp chí Công ngh Thông tin Internet Today. Trong phn này bn s c hc nhng kin thc c! bn v HTML, công c  to ra các trang Web. Sau khi ã hc xong v HTML bn có th to ra nhng trang Web y n tng vi vn bn, hình nh, âm thanh 3. Lu công vic bn v"a làm. 4. Dùng trình duyt Web  m file HTML bn v"a to và so sánh vi ví d m'u, nu bn thy khác bn có th phi xem li nhng gì mình ã to trong file HTML. 5. Chia vn bn thành nhiu on Trc ht bn li m file HTML mà bn ã to t" các bài hc trc bng trình son tho vn bn, thay vì  vn bn nh c, bây gi  cu#i m*i dòng bn có th gõ Enter vài ln, khi ó on vn bn ca bn trông có v nh sau : Chào m"ng bn ã tham gia chuyên mc Chân tri tri thc ca tp chí Công ngh Thông tin Internet Today. Trong phn này bn s c hc nhng kin thc c! bn v HTML, công c  to ra các trang Web. Sau khi ã hc xong v HTML bn có th to ra nhng trang Web y n tng vi vn bn, hình nh, âm thanh Lu công vic bn v"a làm và m nó trên trình duyt ca bn. Khi ó bn s trông thy kt qu trên trình duyt nh sau : Bn cm thy có iu gì không úng phi không? Bi vì HTML b+ qua du hiu xu#ng dòng khi bn gõ Enter và b+ qua các dòng tr#ng nên bn thy on vn bn mà bn v"a nhp dù có Enter  xu#ng dòng nhng v'n lin vi nhau. Ð chia on HTML dùng tag <p> Cng lu ý rng tag <hx> gn lin vi s chia on nên bn không cn phi t <p> trc <hx>. Chèn các du chia on vào file HTML ca bn. 1. Dng trình son tho vn bn  m tile HTML mà bn ã to t" trc. 2. Chúng ta thêm on mi vào vn bn, sau on u Tp chí Internet Today là mt tp chí in t$ chuyên v Công ngh thông tin. Chúng tôi s giúp các bn tìm hiu và khám phá nhng bí ,n ca HTML  bn có th t to ra các trang Web cho riêng mình 3. Ða con tr+ son tho n cu#i on u, thêm tag <p>. Lúc này on vn bn trông gi#ng nh sau. Chào m"ng bn ã tham gia chuyên mc Chân tri tri thc ca tp chí Công ngh Thông tin Internet Today. Trong phn này bn s c hc nhng kin thc c! bn v HTML, công c  to ra các trang Web. Sau khi ã hc xong v HTML bn có th to ra nhng trang Web y n tng vi vn bn, hình nh, âm thanh <p> Tp chí Internet Today là mt tp chí in t$ chuyên v Công ngh thông tin. Chúng tôi s giúp các bn tìm hiu và khám phá nhng bí ,n ca HTML  bn có th t to ra các trang Web cho riêng mình 4. Lu li công vic ca bn. 5. Dùng trình duyt m li file HTML ca bn và so sánh vi ví d m'u. Nh bn thy, các on vn bn ã c tách nhau do tác dng ca tag <p> Thêm mt s tag phân on <hr> Chèn mt ng th-ng vào trang Web ca bn, tag này thng dùng  chia nhng phn chính ca trang Web. <br> Ð,y vn bn xu#ng mt dòng mi, tag này khác tag <p>  ch* nó không chèn thêm vào trang ca bn mt dòng tr#ng nh tag <p>. Bn có th s$ dng tag này khi to mt danh sách, vit các dòng ca mt bài th!. Ví d : Nu trong file HTML có on sau gia tag<body> và </body> <hr> Câu lc b Tin hc VNN1<br> Câu lc b Vn hoá VNN3<br> Tp chí Internet Today<br> <hr> Thì kt qu nh sau : Bn quyn Công ty Phát trin Phn mm (VASC) E-mail: i-today@vasc.vnn.vn 5. Preformatled text 5.1.Bài hc Phn này trình bày v cách hin th các on vn trong ó có c các khong trng và du xu#ng dòng. Nh bn ã bit trong các phn trc, trình duyt b+ qua các dòng trng, du hiu xu#ng dòng khi ta son tho. Tuy nhiên bn v'n có th hin th c vn bn nh lúc bn nhp vào bng cách s$ dng tag <pre> Ví d [...]... nh sau B n quy n Công ty Phát tri n Ph n m m (VASC) E-mail: i-today@vasc.vnn.vn 11 Thêm a ch , liên k t E-mail vào trang Web c a b n 11.1 Bài h c Nh b n v'n th ng th y trong các trang Web trên Internet, ph n cu#i m*i trang th ng có các thông tin v trang Web, ch-ng h n nh : Tiêu hay ch c a trang hi n th i Ngày c p nh t g n ây nh t B n quy n Tên và E-mail c a tác gi c a trang Web Ph n này g i là footer... trúc folder c a b n có d ng | My Web | | Pictures | | | i-today.gif | | Trang web c a b n v trí này Và b n mu#n liên k t t i I-today.gif, khi ó trang tag b n s$a l i nh sau Còn trong tr ng h p file b n c n t o liên k t có c u trúc folder cao h!n Ví d : | Pictures1 | My Web | | Pictures | | | i-today.gif | | Trang web c a b n v trí này và b n c n liên... ki n th c ã h c c, b n hãy xây d ng cho mình m t trang Web ch-ng h n nh m t trang Web h ng d'n h c ti ng Anh v i các hình nh, siêu liên k t và các ghi chú dùng tag B n quy n Công ty Phát tri n Ph n m m (VASC) E-mail: i-today@vasc.vnn.vn 7 S d ng các ký t c bi t 7.1.Bài h c Ðôi khi trong trang Web c a b n có các ký t c bi t, ch-ng h n nh ký t không ph i là ti ng Anh, m t d u nh n HTML quy... thông tin cho trang Web, b n thêm o n sau vào cu#i ph n body Chuyên m c Chân tr i tri th c - T p chí Internet Today Copyright @ 2000 by VASC Ð a ch) : 99 Tri u Vi t V !ng - Hà n i E_mail : i-today@vasc.vnn.vn M i ý ki n v b sách HTML xin g$i v : Tr n Vi t Hùng E_mail :hung_nd@vol.vnn.vn 2.L u công vi c c a b n và so sánh v i ví d m'u: B n quy n Công ty Phát tri n Ph n m m (VASC) E-mail: i-today@vasc.vnn.vn Ph n 2 Nâng cao 12 T o các danh sách 12.1 Bài h c Danh sách c dùng trình bày thông tin thành m t d ng d% c h!n Ch-ng h n t o ra các b ng ch) m c, n i dung c a m t dãy các tài li u hay các ch !ng HTML có hai ki u danh sách, danh sách có th t (ordered)... mà b n mu#n liên k t Ví d v các URL http://www.hut.edu.vn http:// www.vnn.vn http://www.vnn.vn/i-today mailto:hung_nd@vol.vnn.vn Th c hành 1.T o m t file HTML và thêm o n sau vào trong ph n body Tr ng Ð i h c Bách khoa Hà n i T p chí Công ngh Thông tin Internet Today G$i... trình duy t Web hi n th tag úng nh b n so n th o, b n nh dùng B n có th xu#ng dòng B n có th dùng d u cách tho i mái S c hi n th nh sau: B n quy n Công ty Phát tri n Ph n m m (VASC) E-mail: i-today@vasc.vnn.vn 6 Thêm m t ki u trình bày cho trang Web c a b n 6.1.Bài h c Ð làm cho m t kh#i v n b n n.i h!n, ví d m t o n trích d'n, m t l i khuyên và làm cho trang Web c a b n trình bày c /p... Trademark n u b n dùng font Ti ng Vi t thì b n ph i i các d u sang font Ti ng Anh Cu#i cùng chúng tôi b ng a ra m t b ng các ký t , b n hãy Click vào ây B n quy n Công ty Phát tri n Ph n m m (VASC) E-mail: i-today@vasc.vnn.vn 8 Ð a hình nh vào m t trang Web xem 8.1.Bài h c Sau khi h c các bài tr c ch c b n v'n còn th c m c, sao trang Web c a mình x u t , không gi#ng các trang trên Internet mà b n ã t"ng . file HTML. File HTML bao gi cng bt u bng th < ;html& gt; và kt thúc bng th < /html& gt;. Cp th này báo cho trình duyt Web bit rng nó ang c mt file có cha các mã HTML, . c mt file HTML, nó s tìm trong file ó các tag hay nhng on mã c bit  bit cách hin th file HTML ó. Ví d: Khi trong file HTML có on <h3> Cu trúc ca file HTML </h3>. nó ang c mt file có cha các mã HTML, còn th < /html& gt; có tác dng nh kt thúc file HTML. Bên trong cp th < ;html& gt; < /html& gt; là các cp th <head> </head> và <body>

Ngày đăng: 07/06/2014, 14:45

Xem thêm