PHP Can Ban (Black Art)

1
Hng dn v PHP Tc gi: Black Art gi trong din n hackervn.net 1. Php l g? PHP l mt ngn ng lp trnh kiu script , chy trn Server v tr v m HTML cho trnh duyt. VD: <html> <head> <title>Example</title> </head> <body> <?php echo "Hi, I'm a PHP script!"; ?> </body> </html> M PHP c t trong kiu tag c bit cho php ta c th vo hoc ra khi ch PHP 2. Ci t nh th no? Ci PHP trn nn Window vi IIS version 3 hoc 4: - Copy php.ini - dist vo th mc Window. i tn thnh php.ini - Sa file php.ini nh sau: - t li ng dn mc : 'extension_dir' chuyn ti v tr ci t php hoc ni cc file php_*.ini. VD : c:\php - t ng dn chnh xc n file: browscap.ini trong th mc Window. - Chy MMC , chn Web site hoc th mc ca ng dng - m mc Property ca th mc , chn vo Home Directory, Virtual Directory hay Directory. - Vo mc: Configuration->App Mappings ->Add->Executable : c:\php\php.exe %s %s. Ch phi c %s %s . - Trong Extension, nh ui file bn mun gn vi m php. Thng l .php hoc .phtml - t ch sercurity thch hp. Nu dng h thng NTFS, cn t cho php thc hin vi th mc c php.exe II.Ngn ng PHP: 1/ C 4 cch dng PHP 1. <? echo ("this is the simplest, an SGML processing instruction\n"); ?> 2. <?php echo("if you want to serve XML documents, do like this\n"); ?> 3. <script language="php"> echo ("some editors (like FrontPage) don't like processing instructions"); </script> 4. <% echo ("You may optionally use ASP-style tags"); %> <%= $variable; # This is a shortcut for "<%echo .." %> Cch 1 ch c th s dng nu nhng tag ngn c cho php s dng. C th sa short_open_tag trong cu hnh ca php hoc bin dch file php vi la chn cho php dng cc tag ngn. Tng t nh vy, cch th 4 ch c tc dng nu asp_tag c t trong file cu hnh ca PHP PHP cho php h tr cc kiu ch thch ca c C, C++ v Unix shell. VD: <?php echo "This is a test"; // This is a one-line c++ style comment /* This is a multi line comment yet another line of comment */ echo "Another Test"; # This is shell-style style comment ?> 2. Cc kiu d liu: 2.1S nguyn : c khai bo v s dng gi tr giing vi C: VD: $a = 1234; # decimal number $a = -123; # a negative number $a = 0123; # octal number (equivalent to 83 decimal)
2
$a = 0x12; # hexadecimal number (equivalent to 18 decimal) 2.2 S thc: VD :$a = 1.234; $a = 1.2e3; Ch : Khi s dng cc s thc tnh ton , c th s lm mt gi tr ca n. V vy, nn s dng cc hm ton hc trong th vin chun tnh ton. 2.3 Xu : C 2 cch xc nh 1 xu: t gia 2 du ngoc kp (") hoc gia 2 du ngoc n ('. Ch : Cc bin gi tr s khng c khai trin trong xu gia 2 du ngoc n. 2.4 : Mng : Mng thc cht l gm 2 bng : bng ch s v bng lin kt. a. Mng 1 chiu : C th dng hm : list() hoc array() hoc lit k cc gi tr ca tng phn i trong mng to mng . C th thm cc gi tr vo mng to thnh 1 mng. --> Dng ging trong C C th dng cc hm asort(), arsort(), ksort(), rsort(), sort(), uasort(), usort(), and uksort() sp xp mng. Tu thuc vo vic bn nh sp xp theo kiu g. b. Mng nhiu chiu: Tng t C. bn c th dng nh VD sau: $a[1] = $f; # one dimensional examples $a["foo"] = $f; $a[1][0] = $f; # two dimensional $a["foo"][2] = $f; # (you can mix numeric and associative indices) $a[3]["bar"] = $f; # (you can mix numeric and associative indices) PHP3 khng th tham chiu tr tip t mt mng nhiu chiu khi bn trong 1 xu: VD : $a[3]['bar'] = 'Bob'; echo "This won't work: $a[3][bar]"; Kt qu tr ra s l: This won't work: Array[bar]. Nhng vi VD sau s chy ng: $a[3]['bar'] = 'Bob'; echo "This will work: " . $a[3][bar]; Vi PHP4, vn s c gi quyt bng cch cho mng vo gia 2 du ngoc mc { } VD : $a[3]['bar'] = 'Bob'; echo "This will work: {$a[3][bar]}"; PHP khng yu cu phi khai bo trc kiu d liu cho cc bin, Kiu d liu ca bin s ph thuc vo kiu d liu m bn gn cho n, VD : $foo = "0"; // $foo l k t ASCII 48 $foo++; // $foo is xu "1" (ASCII 49) $foo += 1; // $foo l s nguyn (2) $foo = $foo + 1.3; // $foo l s thc (3.3) $foo = 5 + "10 Little Piggies"; // $foo l s nguyn (15) 3. Bin - gi tr: PHP quy nh mt bin c biu din bt u bng du $, sau l mt ch ci hoc du gch di. 3.1 Mt s bin c to sn : argv : Mng tham s truyn cho script. Khi on script chy bng dng lnh, tham s ny s c dng ging nh C truy nhp cc tham s trn dng lnh. argc : s cc tham s oc truyn. Dgn vi argv; PHP_SELF : tn ca on m script ang thc hin. Nu PHP ang c chy t dng lnh th tham s ny khng c gi trj. HTTP_COOKIE_VARS: mt mng cc gi tr c truyn ti script hin ti bng HTTP cookie. Ch c tc dng nu "track_vars" trong cu hnh c t hoc ch dn <?php_track_vars?>
3
HTTP_GET_VARS: Mng cc gi tr truyn ti script thng qua phng thc HTTP GET. Ch c tc dng nu "track_vars" trong cu hnh c t hoc ch dn <?php_track_vars?> HTTP_POST_VARS: 3.2 Phm vi gi tr: PHP coi 1 bin c mt gii hn. xc nh mt bin ton cc (global) c tc dng trong mt hm , ta cn khai bo li. Nu khng gi tr ca bin s c coi nh l cc b trong hm. VD : $a = 1; $b = 2; Function Sum () { global $a, $b; $b = $a + $b; } Sum (); echo $b; Khi c khai bo global trn, $a v $b c cho bit l nhng bin ton cc. Nu khng c khai bo global, $a v $b ch c coi l cc bin bn trong hm Sum(). iu ny khc vi C Mt cch khc dng bin ton cc trong 1 hm l ta dung mng $GLOBAL ca PHP VD trn s c th vit nh sau: $a = 1; $b = 2; Function Sum () { $GLOBALS["b"] = $GLOBALS["a"] + $GLOBALS["b"]; } Sum (); echo $b; Mt ch khc l khai bo static. Vi khai bo ny bn trong mt hm vi 1 bin cc b, gi tr ca bin cc b s khng b mt i khi ra khi hm. VD : Function Test () { static $a = 0; echo $a; $a++; } Vi khai bo nh trn , $a s khng mt i gi tr sau khi thc hin li gi hm Test() m $a s c tng ln 1 sau mi ln gi hm Test(). 3.3 Tn bin: Mt bin c th gn vi 1 ci tn . VD: $a = "hello"; $$a = "world"; ==> $hello = "world" v echo "$a ${$a}"; <==> echo "$a $hello";
4
Kt qu ra s l : hello world Ch : bn c th gp phi trng hp khng r rng khi s dng cch ny vi mng . VD : $$a[1] s hiu l bn mun dng $a[1] nh 1 bin hay dng $$a nh 1 bin vi [1] l ch s? trnh trng hp ny , cn c su phn bit r bng du { }. VD :${$a[1]} hoc ${$a}[1]. 3.4 Cc gi tr bn ngoi phm vi PHP HTML Form : khi 1 form gn vi 1 file php qua phng thc POST VD: <form action="foo.php3" method="post"> Name: <input type="text" name="name"><br> <input type="submit"> </form> PHP s to 1 bin $name bao gm mi gi tr trong trung Name ca Form. PHP c th hiu c mt mng mt chiu gm cc gi tr trong 1 form. V vy, bn c th nhm nhng gi tr lin quan li vi nhau hoc s dng c tnh ny nhn cc gi tr t 1 u vo tu chn.(multi select input) Khi tnh cht track_vars c t trong cu hnh hoc c ch dn <?php_track_vars?> . cc gi tr c submit c ly ra qua phng thc GET v POST c th ly t 2 mng ton cc $HTTP_POST_VARS v $HTTP_GET_VARS IMAGE SUBMIT: Khi dng 1 image thc hin submit, c th dng tag nh sau: <input type=image src="image.gif" name="sub"> Khi ngi dng click chut trn nh, form tng ng s c gi ti server km theo 2 gi tr thm vo : sub_x v sub_y. Nhng bin ny s lu gi to m ngi dng click chut trn nh. Ngi lp trnh c kinh nghim s thy rng trn thc t, trnh duyt gi cc gi tr c chu k thi gian nhng PHP to cm gic gn nh vic gi cc gi tr l lin tc. HTTP Cookies : PHP h tr HTTP cookies theo nh dng ca Netscape. Cookies file lu gi thng tin ca cc trnh duyt t xa v qua c th theo di hay nhn bit ngi s dng. C th dng Cookies bng hm SetCookie(). Hm ny cn c gi trc khi thng tin c gi ti trnh duyt. Bt k cookie no gi ti bn t my khch (client) s t ng chuyn thnh d liu ca phng thc GET v POST. Nu bn mun c nhiu gi tr trong 1 cookie, ch cn thm vo du [ ] vi tn ca cookie. VD : SetCookie ("MyCookie[]", "Testing", time()+3600); Ch rng cookie s thay th cho cookie cng tn, tr trg hp khc ng dn hoc min. BIN MI TRNG: PHP t ng to bin cho cc bin mi trng nh 1 bin bnh thng ca PHP VD : echo $HOME; /* Shows the HOME environment variable, if set. */ V thng tin ti qua cc phng thc GET, POST , Cookie cng t ng to cc bin PHP, thnh thong bn nn c 1 bin t mi trng chc chn rng bn c ng version. Hm getenv() v putenv() gip bn c v ghi vi cc bin mi trng. DU CHM TRONG TN BIN: Bnh thng, PHP khng thay i tn bin khi bin c truyn vo on script. Tuy nhin, nn ch rng du chm (.) khng phi l mt k hiu hp l trong tn bin i vi PHP. V vy, PHP s t ng thay th cc du chm bng du gch di.(_)
5
4. CONSTANTS PHP nh ngha sn mt vi hng s: _FILE_ : tn ca script file ang c thc hin. _LINE_ : s dng ca m script ang c thc hin trong script file hin ti. _PHP_VERSION_ : version ca PHP _PHP_ : tn h iu hnh m PHP ang chy TRUE FALSE E_ERROR : bo hiu c li E_PARSE : bo li sai khi bin dch E_NOTICE : Mt vi s kin c th l li hoc khng. E_ALL : C th nh ngha mt hng s bng hm define() VD : <?php define("CONSTANT", "Hello world."); echo CONSTANT; // outputs "Hello world." ?> 5. BIU THC Biu thc l mt phn quan trng trong PHP. Phn ln mi th ban vit u c coi nh 1 biu thc. iu ny c ngha l mi th u c 1 gi tr. Mt dng c bn nht ca biu thc bao gmcc bin v hng s. PHP h tr 3 kiu gi tr c bn nht: s nguyn, s thc, v xu. Ngoi ra cn c mng v i tng. Mi kiu gi tr ny c th gn cho cc bin hay lm gi tr tr ra ca cc hm. Bn c th thao tc vi cc bin trong PHP ging nh vi trong C. VD $b = $a = 5; /* assign the value five into the variable $a and $b */ $c = $a++; /* post-increment, assign original value of $a (5) to $c */ $e = $d = ++$b; /* pre-increment, assign the incremented value of $b (6) to $d and $e */ /* at this point, both $d and $e are equal to 6 */ $f = double($d++); /* assign twice the value of $d before the increment, 2*6 = 12 to $f */ $g = double(++$e); /* assign twice the value of $e after the increment, 2*7 = 14 to $g */ $h = $g += 10; /* first, $g is incremented by 10 and ends with the value of 24. the value of the assignment (24) is then assigned into $h, and $h ends with the value of 24 as well. */ 6.CC CU TRC LNH: 6.1 If ....else....else if: if (iu kin) { do something; } elseif ( iu kin ) { do something;} else { do something;} 6.2 Vng lp : while ( DK) { ...} do { .....} white ( DK ); for (bieuthuc1; bieuthuc2; bieu thuc3) {.....} PHP 4 only : foreach(array_expression as $value) statement foreach(array_expression as $key => $value) statement 6.3 break v continue:
6
break : thot ra khi vng lp hin thi continue : b qua vng lp hin ti, tip tc vng tip theo. 6.4 switch switch (tn bin) { case trng hp 1: ..... break; case trng hp 2: ..... break; case trng hp 3: ..... break; default : } 7 HM: Dng ging vi C++. Ngoi tr bn khng cn phi khai bo kiu cho tham s ca hm: 7.1 Tham tr : VD: function takes_array($input) { echo "$input[0] + $input[1] = ", $input[0]+$input[1]; } 7.2 Tham bin: function add_some_extra(&$string) { $string .= 'and something extra.'; } 7.3 Tham s c gi tr mc nh: function makecoffee ($type = "cappucino") { return "Making a cup of $type.\n"; } Ch : khi s dng hm c i s c gi tr mc nh, cc bin ny s phi nm v pha phi nht trong danh sch i s. VD : Sai function makeyogurt ($type = "acidophilus", $flavour) { return "Making a bowl of $type $flavour.\n"; } ng ; function makeyogurt ($flavour, $type = "acidophilus") { return "Making a bowl of $type $flavour.\n"; } 7.4 Gi tr tr li ca hm: C th l bt k gi tr no, Tuy vy, khng th tr li nhiu gi tr ring l nhng c th tr li mt mng cc gi tr. VD function small_numbers() { return array (0, 1, 2); } tr li mt tham tr, bn cn c du & c khai bo ca hm cng nh gi tr tr li. VD : function &returns_reference() { return &$someref; } $newref = &returns_reference(); 7.5 Hm bin: PHP cho php s dng hm gi tr Ngha l khi mt bin c goi c km theo du ngoc n , PHP s tm hm c cng tn vi gi tr bin v thc hin
7
VD <?php function foo() { echo "In foo()<br>\n"; } function bar( $arg = '' ) { echo "In bar(); argument was '$arg'.<br>\n"; } $func = 'foo'; $func(); $func = 'bar'; $func( 'test' ); ?> 8. CC TON T: PHP c cc ton t cho cc php s hc : + - * / % Cc ton t logic : and or xor ! && || Ton t thao tc vi bit : & | ^ ~ << >> Ton t so snh : ==, != ,< ,> ,<=, >=, ==== (bng va cng kiu - PHP4 only), !== (khc hoc khc kiu - PHP4 only) Ton t iu khin li : @ - khi ng trc 1 biu thc th cc li ca biu thc s b b qua v lu trong $php_errormsg VD: <?php /* Intentional SQL error (extra quote): */ $res = @mysql_query ("select name, code from 'namelist") or die ("Query failed: error was '$php_errormsg'"); ?> Ton t thc thi : ` `- PHP s thc hin ni dung nm gia 2 du ` nh 1 lnh shell. Tr ra gi tr l kt qu thc hin lnh VD : $output = `ls -al`; //lit k cc file bng lnh Linux echo "<pre>$output</pre>"; 9 LP V I TNG: Class: l tp hp cc bin v hm lm vic vi cc bin ny. Mt lp c nh dng nh sau: <?php class Cart { var $items; // Items in our shopping cart // Add $num articles of $artnr to the cart function add_item ($artnr, $num) { $this->items[$artnr] += $num; } // Take $num articles of $artnr out of the cart function remove_item ($artnr, $num) { if ($this->items[$artnr] > $num) { $this->items[$artnr] -= $num; return true; } else { return false; } } } ?>
8
Lp Cart y l mt kiu d liu, v vy bn c th to mt bin c kiu ny vi ton t new VD: $cart = new Cart; $cart->add_item("10", 1); Lp c th c m rng bng nhng lp khc. Lp mi thu c c tt c nhng bin v hm ca c lp thnh phn. Thc hin vic tha k ny bng t kho "extends". Ch : k tha nhiu lp 1 lc khng c chp nhn. VD : class Named_Cart extends Cart { var $owner; function set_owner ($name) { $this->owner = $name; } } Cc hm khi to ca lp c gi t ng khi bn gi ton t new. Tuy nhin, cc hmkhi to ca lp cha s khng c gi khi hm khi to ca lp con c gi. Hm khi to c th c i s hoc khng, 10. THAM CHIU: Tham chiu trong PHP c ngha l ly cng 1 gi tr bng nhiu tn bin khc nhau. Khc vi con tr trong C, tham chiu l mt bng cc b danh. Ch : trong PHP, tn bin v ni dung ca bin l khc nhau. V vy, cng 1 ni dugn c th c nhiu tn khc nhau. Tham chiu PHP cho php bn to 2 bin c cng ni dung. VD : $a = & $b; -- > $a, $b tr ti cng 1 gi tr. Tham chiu truen gi tr bng tham chiu. Thc hin vic ny bng cch to mt hm cc b v truyn gi tr c tham chiu VD: function foo (&$var) { $var++; } $a=5; foo ($a); --> Kt qu : $a = 6; Gi tr tr li ca mt hm bng tham chiu rt tin khi bn mun s dng hm tm 1 gi tr trong 1 phm vi no . VD : function &find_var ($param) { ...code... return $found_var; } $foo =& find_var ($bar); Khi bn mun loi b mi lin kt gia tn bin v gi tr ca bin, s dng hm unset() VD : $a = 1; $b =& $a; unset ($a); 11. THAO TC VI NH: PHP khng b gii hn vi m HTML c tr li cho trnh duyt. V vy, c th dng PHP to v thao tc vi cc file nh c nh dng khc nhau, bao gm :gif, png, jpg, wbmp,
9
and xpm. PHP c th a cc file nh trc tip n cc trnh duyt. Bn s cn bin dch PHP vi th vin GD bao gm cc hm thao tc vi nh. GD v PHP c th s cn c thm 1 s th vin khc, tu thuc vo nh dng ca file nh cn dng. VD : To nh GIF vi PHP <?php Header("Content-type: image/gif"); $string=implode($argv," "); $im = imagecreatefromgif("images/button1.gif"); $orange = ImageColorAllocate($im, 220, 210, 60); $px = (imagesx($im)-7.5*strlen($string))/2; ImageString($im,3,$px,9,$string,$orange); ImageGif($im); ImageDestroy($im); ?> gi s VD trn trong file button.php . KHi , s dng ta dng tag : <img src="button.php?text">. , 12. MySQL v PHP connect ti 1 CSDL trn MySQL server rt n gin. Bn ch cn dng hm mysql_connect(host, user, password) m 1 kt ni ti MYSQL server vi kt qu l gi tr tr v ca hm (Gi s l bin $db). Sau , dng hm mysql_select_db(database_name, link_id) chn CSDL bn mun kt ni. thc hin mt cu lnh truy vn, dng hm mysql_query(query, link_ID). Gi tr tr li ca hm l kt qu ca cu truy vn. Nu b qua link_ID th kt ni cui cng ti MySQL server s c thc hin. Bn c th xem v d sau s hiu r hn. <html> <body> <?php $db = mysql_connect("localhost", "root"); mysql_select_db("mydb",$db); $result = mysql_query("SELECT * FROM employees",$db); printf("First Name: %s<br>\n", mysql_result($result,0,"first")); printf("Last Name: %s<br>\n", mysql_result($result,0,"last")); printf("Address: %s<br>\n", mysql_result($result,0,"address")); printf("Position: %s<br>\n", mysql_result($result,0,"position")); ?> </body> </html> Ngoi cch dng hm mysql_result() ly kt qu thc hin , bn c th dng cc hm khc : mysql_fetch_row(), mysql_fetch_array(), and mysql_fetch_object(). * mysql_fetch_row($result) : tr v mt mng cc d liu ly t 1 dng trong CSDL. Nu cui CSDL, gi tr tr v l false. Bn phi dng ch s ca cc trng trong CSDL nu mun ly d liu, VD : <html> <body>
10
<?php $db = mysql_connect("localhost", "root"); mysql_select_db("mydb",$db); $result = mysql_query("SELECT * FROM employees",$db); echo "<table border=1>\n"; echo "<tr><td>Name</td><td>Position</tr>\n"; while ($myrow = mysql_fetch_row($result)) { printf("<tr><td>%s %s</td><td>%s</td></tr>\n", $myrow[1], $myrow[2], $myrow[3]); } echo "</table>\n"; ?> </body> </html> * mysql_fetch_array (int result [, int result_type]) : tr v mt mng cha d liu ly t 1 dng trong CSDL. Tng t nh mysql_fetch_row() nhng bn c th ly trc tip tn trng ly d liu. VD : Cng mt CSDL nh trn, bn c th thy s khc bit <html> <body> <?php $db = mysql_connect("localhost", "root"); mysql_select_db("mydb",$db); $result = mysql_query("SELECT * FROM employees",$db); if ($myrow = mysql_fetch_array($result)) { do { printf("<a href=\"%s?id=%s\">%s %s</a><br>\n", $PHP_SELF, $myrow["id"], $myrow["first"], $myrow["last"]); } while ($myrow = mysql_fetch_array($result)); } else { echo "Sorry, no records were found!"; ?> </body> </html> *mysql_fetch_object : chuyn kt qu thnh mt i tng vi cc trng l cc trng trong CSDL. VD : <?php mysql_connect ($host, $user, $password); $result = mysql_db_query ("database", "select * from table"); while ($row = mysql_fetch_object ($result)) { echo $row->user_id; echo $row->fullname; } mysql_free_result ($result); ?> 0. Tiu chun ca HTML i vi bt c mt vn g, lun lun c nhng lut tun theo. Tht may mn, vi HTML nhng lut ny rt t v nhng g m HTML cung cp th rt l ln... Mc ch y ch l s gii thiu v mt vi khi nim lin quan n HTML. Sau bi hc ny bn c th:
11

Din t phn quan trng ca nhng tiu chun HTML. Nhn bit c s khc nhau gia HTML 2.0 v HTML 3.0
Bi hc HTML, hayHyperText Markup Language, l mt s nh dng Web browser hin th nhng ti liu multimedia. Bn thn nhng ti liu ch l nhng tp tin vn bn n gin (ASCII) vi nhng tag hoc nhng on m c bit m mt Web browser bit cch thng dch v hin th n trn mn hnh ca bn. Gii thiu v nhng tiu chun World Wide Web tht l th v - N khp mi ni. Hy nh rng nhng th to ra Web (v Internet ni chung) l ph hp vi nhng lut c cng nhn hu ht loi my tnh c th giao tip v chia x thng tin vi nhau. u c th tm thy nhng tiu chun HTML c s dng y? Tt c nhng g m chng ta s hc trong ti liu ny l s tr gip to ra nhng ti liu ph hp vi HTML standards.. Khi s dng HTML tiu chun, cc bi lm ca bn s "chia x c" (share-able) mt cch rng ri trong s pht trin nhanh chng ca mng trong tng lai. Tiu chun c s dng hin nay l HTML 2.0 c h tr bi hu ht cc Web browser. Hin nay, sau khi NetScape v Microsoft gii thiu v mt vi c im c coi nh l vt xa hn nhng tiu chun chung ca HTML trc , mt s c im phc tp hn s c a vo phin bn HTML 3.2. Nhng c im ny ch c th c h tr bi mt s Web browser nht nh. iu ny c ngha l g ? Nu bn tnh n chuyn lm cho trang Web ca bn trng thy c sc thu ht mnh m trong Netscape hoc Explorer, th nhng trang Web ny c th tr nn c v rt ti trong nhng Web browser khc. Hy nh rng nhng ngi c trang Web ca bn c th khng nhng ang s dng mt loi Web browser khc m kch c mn hnh v phng ch cng c th khng ging nh trn h thng m bn s dng thit k cc trang web. Sau cng, c th khng phi ch c mt mnh bn xem nhng trang Web m bn mt nhiu thi gian thit k ra! iu quan trng y l lm mt th g cho mi ngi cng xem. V th phn u tin ca nhng bi hc s a bn lt qua nhng c im ca HTML c chp nhn rng ri. T , bn c th quyt nh s dng nhng c im "tt nht". Nhng vn cn c xem li 1. HTML l g? 2. Ti sao ta phi quan tm n s khc nhau trong nhng tiu chun HTML? i n bi tip theo.... n lc bt u vit nhng trang Web u tin! Bn sn sng cha? Trong bi hc k tip bn s bit lm th no s dng ba ca s vit nhng dng HTML u tin. Hy bt u ... 1. To ti liu HTML u tin
12
Bn sp bc vo mt cuc hnh trnh s bin bn t mt Internet Surfer tr thnh mt Internet Author of Multimedia! Mc ch Sau bi hc ny bn s c th:

Nhn ra ngha v mc ch ca nhng tag HTML. M ra mt Workspace cho vic to nhng ti liu HTML. S dng mt trnh son tho vn bn to cu trc HTML n gin cho bt k trang Web no. Chn nhng li ch thch khng c hin th vo trong cc tp tin HTML. M ti liu ca bn bng Web browser thy n c hin th nh th no.
Bi hc By gi bn bit HTML l g, chng ta hy bt u s dng n. Tag HTML l g ? Khi mt Web browser hin th mt trang chng hn nh trang bn ang xem y, Web browser s c t mt file vn bn n gin v tm kim nhng on m c bit hay nhng tag c nh du bi k hiu < v > . Dng chung ca mt tag HTML l : <tag_name>string of text</tag_name> Ly v d, tiu ca phn ny s dng tag header : <h3>Tag HTML la gi?</h3> Tag ny bo cho Web browser hin th dng ch Tag HTML l g? dng ca mc tiu th ba (chng ta s xt k hn nhng tag ny nhng bi sau). Nhng Tag HTML bo cho Web browser bit khi no cn in m mt dng vn bn, in nging n, lm cho n tr thnh mt header, hoc lm cho n l mt Hypertext lin kt ti mt trang Web khc. iu quan trng cn nh l trong tag kt thc, </tag_name> c cha k t "/". K t "/" ny bo cho Web browser bit l hiu ng ca tag c kt thc ti y. Rt nhiu tag HTML c i theo mt cp nh th ny. Nu bn qun k t "/", Web browser s tip tc th hin hiu ng ca tag trong phn cn li ca vn bn v to ra cc kt qu khng mong mun ( c kinh nghim, sau ny bn c th th xem). LU : mt Web Browser khng quan tm ti vic bn s dng ch hoa hay ch thng. Ly v d : <h3>...</h3> th khng khc g vi <H3>...</H3> Khng ging nh vic lp trnh, nu bn c mt li trong trang HTML, h thng ca bn s khng b "Crash"; trang Web ca bn s vn nhn thy c, nhng ... sai. C th nhanh chng v d dng vo bn trong trang HTML v sa cha li ni dung ca n. Browser ca bn tuy nh nhng li c mt b t vng m. Tht l th v vi HTML khi browser ca bn khng bit lm ci g vi tag cho, n s b qua tag ! Ly v d, trong ti liu m bn ang xem y, tag header cho phn ny tht s c vit nh sau : <wiggle><h3>Tag HTML la gi?</h3></wiggle> nhng v browser ca bn c th khng h tr tag <wiggle> (do ti t t ra, c th trong tng lai n s lm cho vn bn c dng sng khi th hin), n s b qua v vn tip tc vi nhng tag no m n hiu c. Nu ti l ngi vit ra mt web browser mi, ti s quyt nh thm tag <wiggle> vo phn mm ca ti. M ra Workspace ca bn hon tt nhng bi hc trong phn hng dn ny, bn s to mt ca s web th hai (iu ny cho php bn gi ca s ny vi nhng li ch dn ca bi hc v mt ca s nh
13
l mt vng lm vic ca bn "Workspace"); v thm mt ca s th ba l trnh son tho vn bn. Lu : y l ni rt tt lu vi bn rng chng ti s cung cp nhng ch dn chng hn nh l tn thc n v tn tp tin nhng nhng tn ny c th khc i ph thuc vo Web browser m bn ang s dng. V vy, bn hy c thch ng vi vic chuyn qua li gia cc chng trnh v ca s trn my ca bn. Mt cch khc l hy in ra cc li ch dn trong bi hc (nhng tht s chng ti khng mun t chc cc bi hng dn ny theo mt cu trc cy). Di y l cc bc to ra workspace ca bn : 1. T thc n File ca web browser, chn New Window hoc New Web Browser. Mt ca s web th hai s xut hin. Hy s dng ca s th nht nh l mt "sch ch dn" (textbook) v ca s th hai nh l vng lm vic ca bn (workspace) hon tt nhng bi hc HTML. Lu : L do duy nht c hai ca s y l bn c th c nhng ch dn t bi hc v cng c th xem ti liu m bn ang lm vic. Bn cng c th a vo boomark trang web ny v tr li n vo mi lc s dng thc n Go hay History. 2. K tip, bn cn chuyn ra khi web browser v m mt chng trnh son tho vn bn. Lu : Bn cn phi chuyn qua li gia cc ca s hon tt cc bi hc. iu ny c th gy ra kh chu ph thuc vo kch c ca mn hnh bn ang s dng. Bn c th chnh li kch thc cc ca s chng cng c trnh by trn mn hnh d dng lm vic vi chng. Nu bn s dng mt chng trnh x l vn bn to HTML ca bn , hy chc chn rng dng lu tr l vn bn (hoc ASCII). Nu by gi bn mi bt u, chng ti NHN MNH li ngh bn s dng mt trnh x l vn bn n gin nh - SimpleText hay TeachText ca Macintosh hay NotePad ca Windows. Ti sao khng nn s dng s tr gip iu luyn ca cc trnh x l vn bn HTML? Thc t s thit k ca ti liu mong mun cc bn hiu c nhng khi nim cn thit ri SAU mi s dng n s tr gip m cc trnh x l vn bn HTML mang li. Cng v vy, s gip cho bn c nhiu hn khi bn to ra mt directory/folder mi trong my ca bn gi li cc kt qu bn to ra. Bn c th gi n l workarea hay myspace hay bt k t no bn thch; hy lu li tt c cc tp tin m bn to ra trong vng ny. iu ny s lm cho cuc sng ca bn tt hn ... t nht l trong khi lm vic vi ti liu ny! To ti liu HTML ca bn Mt ti liu HTML gm hai phn ring bit, phn u (head) v phn thn (body). Phn u cha ng nhng thng tin v ti liu v khng c hin th ln mn hnh. Phn thn th cha ng mi th c trnh by ln mn hnh nh l mt phn ca trang Web. Cu trc c bn ca mt trang HTML l: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> <html> <head>  </head>
14
<body>  : : : : : : </body> </html> Dng u tin ht: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> th khng cn thit lm, nhng l m bo cho browser bit phin bn no ca HTML c s dng trong trang hin thi. c nhiu thng tin hn, hy xem trang W3C Reference Specification. Ton b cng vic thnh lp mt trang HTML nm trong cp tag <html>...</html>. Bn trong n l cp tag <head>...</head> v sau l <body>...</body>. Trang Web ca bn c th c hin th tt trn hu ht my tnh m khng cn nhng tag ny. Tuy nhin bng cch s dng chng, trang Web ca bn s hon ton tng thch vi chun quc t ca HTML v chc chn rng s tng thch vi nhng Web browser khc trong tng lai. y l mt thi quen tt ging nh l vic bn nh rng hng ngy vy. Cng lu rng nhng tag ch thch c bao bi . Dng vn bn gia nhng tag ny KHNG c hin th trong trang Web nhng t nhng thng tin c th hu ch cho chnh bn hoc bt k ngi no cn phi xem dng HTML ca nhng trang Web. Khi trang Web ca bn tr nn phc tp (ging nh bn s thy sau ny khi thm vo cc bng, frame v nhng vn khc ca hn 20 bi hc), nhng ch thch ny s tr nn hu ch khi bn cn cp nht mt trang Web m bn to ra cch y kh lu. Sau y l nhng bc tip theo cho vic to file HTML u tin. Bn vn sn sng ch? 1. Nu cha m, hy m trnh son tho vn bn ca bn. 2. Chuyn n trnh son tho vn bn. 3. Bn hy nhp nhng dng vn bn sau (khng cn nh vo phm RETURN cui mi dng, web browser s t ng iu chnh li cc vn bn): 4. 5. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"> 6. <html> 7. <head> 8. <title>Volcan 2. iu chnh mt ti liu HTML By gi bn c ti liu HTML u tin ca bn, bn s hc cch iu chnh ti liu v nhn thy s cp nht trong ti liu ca bn. Mc ch Sau bi hc ny bn s c th:

M li workspace cho trang Web ca bn. Thc hin cc thay i trong ti liu HTML bng cch s dng trnh son tho. Np li ti liu trong Web browser thy c s thay i.
15
Bi hc M li workspace ca bn Lu : Nu bn khng c ti liu t bi hc trc, bn c th download li ngay by gi. hon tt bi hc ny bn cn to nn ca s th hai v m li ca s son tho vn bn bn s dng trong bi hc trc. Sau y l nhng bc cn thit lm cng vic : 1. Nu cha c, to ca s mi bng cch chn New Window t thc n File . 2. S dng Open File... t thc n File tm v m li tp tin HTML bn to ra trong v d trc. 3. M li chng trnh son tho vn bn. 4. Trong chng trnh son tho, m tp tin ("Volc.htm") bn to ra trong bi hc trc. Ch : Nu bn s dng Windows, tp tin ca bn nn c tn l "VOLC.HTM". T nay chng ti xem nh bn d dng m c workspace ca bn. To s thay i trong ti liu HTML. 1. Chuyn n ca s trnh son tho. 2. Sau on vn bn bn nh t bi hc trc, nhn ENTER mt vi ln v nh thm on vn sau: 3. 4. A volcano is a location where magma, 5. or hot melted rock from within a planet, 6. reaches the surface. It may happen violently, 7. in a massive supersonic explosion, or more 8. quietly, as a sticky, slow lava flow. Lu rng on vn bn ny phi trn nhng tag </body> v </html> nm cui tp tin HTML. 9. Chn Save t thc n File cp nht s thay i trong tp tin HTML ca bn. Np li ti liu trong Web Browser Tr li browser workspace ca bn, ni m phin bn trc ca tp tin c hin th. Lu rng nhng dng ch bn mi nhp vo cha c nhn thy. thy c s thay i , s dng button Reload hoc thc n c trong web browser ca bn. Yu cu ny ra lnh cho Web browser c li cng mt tp tin HTML v hin th li n cng vi cc s thay i c to ra. Bn s nhn thy nhng dng ch bn mi nhp vo. Lu rng Web browser s b qua nhng dng trng m bn nhp. Mc du vy, c th bn vn mun s dng nhng dng trng (blank line), nhng khong trng, v c nhng tag ch thch m chng ta thy trong bi 1 lm cho tp tin HTML ca bn d c hn trong trnh son tho vn bn. S dng Drag v Drop! C th c mt cch d dng hn np v xem cc trang HTML ca bn. Bn cn phi sp xp li trong my ca bn c th nhn thy icon cho cc tp tin HTML ca bn bn ngoi ca s web browser. Sau click v drag icon ca tp tin "Volc.htm" hay "Volc.htm"
16
thng vo ca s web browser ca bn. ng vy! trang ca bn s c hin th nu my tnh ca bn c h tr hot ng drag v drop (Chng ti bit chc rng Macintosh System 7.5 v Windows 95 c h tr hot ng ny.) Kim tra cng vic ca bn Hy so snh ti liu ca bn vi v d mu sn c. Nu trang Web ca bn trng khc vi mu, hy xem li vn bn m bn nh vo trong trnh son tho vn bn. Hy chc chn rng n ph hp vi nhng ch dn trong on To s thay i trong ti liu ca bn ca bi ny. Xem li Xem li nhng ch sau: 1. Lm th no m li workspace ca bn? 2. Nhng bc no c s dng thay i ni dung ti liu HTML ca bn? 3. Lm th no hin th v nhn thy s thay i trong Web browser? Thc tp t do Tng t nh trong bi hc, hy iu chnh ti liu HTML ring ca bn to ra trong bi hc va ri. Thm mt vi cu v hy kim tra trong browser ca bn khi np li n. i n phn tip theo.... By gi bn bit v qu trnh son tho, chng ta s thm nhng tiu to v c sc hp dn hn vo ti liu HTML ca bn 3. Su mc tiu Nh l bn nhn thy trong trang Web ny, cc phn tiu ("Su mc tiu ", "Mc ch", "Mc Lc", ...) xut hin nhng kch c khc nhau v, c l c nhng phng ch v mu sc khc nhau na. HTML cung cp nhng on m cho vic thit k phn tiu theo su mc khc nhau. Browser t xc nh chnh xc phng ch v kch c hin th. Mc ch Sau bi hc ny bn c kh nng:

Nhn dng c nhng mc khc nhau ca cc tiu trong HTML v cc tag lin quan ti chng. t nhng mc tiu khc nhau vo trong ti liu HTML v nhn thy s thay i ca chng trong browser ca bn.
Bi hc Nhng tiu ca HTML Nhng tiu c thc hin trong HTML bng cch t on vn bn gia nhng tag tiu (heading tag). Dng cc tag tiu ca HTML l:
17
<hN>Text to Appear in Heading</hN> N l mt s c gi tr t 1 n 6 ch nh kch c tiu . Sau y l mt vi v d cho nhng kch c khc nhau ca tiu : Heading Level 1 Heading Level 2 Heading Level 3 Heading Level 4 Heading Level 5 Heading Level 6 Cc mc tiu c sp xp t 1 (quan trng nht) n 6 (t quan trng nht). Cc tiu nn c tnh tng i, nh s th t v t ti cc v tr tng t nhau. t nhng tiu HTML vo ti liu ca bn Lu : Nu bn khng c ti liu t bi hc trc, bn c th download li ngay by gi. 1. 2. 3. 4. M li workspace ca bn (nu n cha c m). n ca s son tho vn bn. M li tp tin HTML to trong bi 2, "Volc.htm". Trc ht, chng ta s dng tag <h1> trnh by tiu nh l header ln nht, <H1>. Nhp dng sau vo phn thn ca HTML v sau cc tag </head><body>:
5. 6. <h1>Volcano Web</h1> 7. Bn di nhng dng vn bn nhp, to nhng mc khc nhau cho nhng phn sau ny ca trang Volcano Web ca bn. Nhp nhng tiu sau trong phn thn ca trang Web ca bn (ch mt s s dng </h3> cn mt s s dng </h2>): <h2>Introduction</h2> <h2>Volcano Terminology</h2> <h2>Volcanic Places in the USA</h2> <h3>Mount St Helens</h3> <h3>Long Valley</h3> <h2>Volcanic Places on Mars?</h2> <h2>Research Project</h2> <h3>References</h3> 8. Lu tr (save) li s thay i trong trnh son tho. 9. Tr li web browser ca bn, M v Np li tp tin HTML.
18
Ch rng trn my tnh bn ang s dng hin nay, bn c th ci t cho browser ca bn phng v/hay kch thc ca cc tiu . V d nh, bn c th c mt browser th hin tag h1 theo phng Times c 36 im; tag h2 theo phng Helvetica c 24 im, v.v... Cc m HTML ch a ra cc loi ca tiu (t h1 n h6); cn vic th hin chng th c iu khin bi ngi s dng thng qua trnh web browser.
Kim tra cng vic ca bn So snh cng vic ca bn vi v d mu sn c. Nu c mt vi tiu xut hin khng ng, hy kim tra li tag bt u v tag kt thc ca mi tiu . Nh l mt phn bi tp ngh, hy nhn xem chuyn g s xy ra khi bn c mt li nh my sai. M li ti liu HTML ca bn trong chng trnh son tho v xo i k t "/" trong tag kt thc <h1> , sau mc Volcano Web:
<h1>Volcano Web<h1> [missing "/" -----------^^^] Lu tr s thay i v np li trong Web browser. Khng c s kt thc ng n ca tag h1, browser ca bn s thng dch phn vn bn tip theo nh l mt phn ca tiu ! Sau khi th xong bn nn tr li ti liu ca bn v thm li dy / nh ban u. Xem li 1. 2. 3. 4. Nhng mc khc nhau ca tiu trong HTML l g? Nhng tag lin quan n nhng mc ny l g? Nhng bc no c s dng trong vic t tiu vo trong ti liu HTML ? Nhng g xy ra nu bn qun du "/" ti cui ca mt tag tiu ?
Thc tp t do Hy thm vo t nht ba tiu vi cc cp khc nhau vo ti liu WWW ca ring bn. 4. Chia vn bn ra thnh nhiu on Cho n by gi bn to v sa i ti liu HTML, v chc bn cm thy thoi mi vi vic son tho v np li vn bn trong Web browser. V vy by gi bn s cm thy d dng vi bi hc nhanh ny: thm vo cc du chia on vn (paragraph break). Mc ch Sau bi hc ny bn c th:

Nhn dng nhng tag chia on trong HTML. Chp mt on vn bn t Web page v dn (paste) n vo mt ti liu khc. Chn cc du chia on vo trong vn bn HTML v nhn s thay i trong Web browser ca bn.
Bi hc Chia on trong HTML
19
Trc y chng ta bit rng mt Web browser s b qua tt c k t XUNG DNG (carriage returns) c nh trong trnh son tho. Nhng, khi browser nhn thy tag chia on, n chn mt dng trng v bt u mt on mi. M HTML cho cng vic chn mt s chia on l : <p> Lu rng tag ny l mt c bit v n khng cn tag kt thc; v th bn khng cn s dng: </p> Trong bi sau chng ta s thy trng hp tag <p> c s dng tag </p> kt thc. Cng lu rng tag <h> c s gn lin vi s chia on nn khng cn thit t tag <p> trc mt tag tiu nh v d di y: <p> <h2>Blah Blah Blah Blah</h2> Chn cc du chia on Lu : Nu bn khng c ti liu t bi hc trc, bn c th download li ngay by gi. Hy theo s ch dn di y chn v xem li mt s ngt on trong ti liu HTML ca bn. 1. M li workspace ca bn (nu n cha c m). 2. i n ca s son tho vn bn. 3. M ti liu lm vic ca bn Volc.htm trong trnh son tho vn bn (nu n cha c m). 4. Trc ht chng ta di chuyn cu ("A volcano is ...") n di tiu Introduction. Hy s dng chut ct v dn on vn bn ny vo v tr thch hp. 5. Sau nhng cu ny, chng ta mun thm vo mt on na. Nhng thay v phi nh li n, t trang Web ny hy s dng chut chn v chp (copy) vo clipboard cc on vn: 6. 7. Volcanoes have been a part of earth's history 8. long before humans. Compare the history of human 9. beings, a few million years in the making, to that of 10. the Earth, over four billion years in the making. 11. 12. By gi, hy tr li ti liu HTML trong trnh son tho v dn (paste) n vo sau nhng cu c sn bn trong mc <h2>Introduction</h2>. 13. Lu tr s thay i trong trnh son tho. 14. Tr li Web browser ca bn. 15. Nu ti liu ca bn cha c, s dng lnh Open Local... t thc n File m ti liu. 16. Chn Reload t thc n File. By gi bn s nhn thy hai cu ca phn Introduction. By gi chng ta mun t mt du phn on gia cc cu ny. 17. Mt ln na tr li ti liu HTML trong trnh son tho. 18. Sau cu th hai ca phn <h2>Introduction</h2> (tc l cu c kt thc l " as a sticky, slow lava flow.") nhn RETURN (tht ra khng cn thit nhng iu ny lm cho bn HTML d c hn khi bn lm vic vi n), v by gi hy nhp tag phn on nh sau : 19. <p> 20. Lc ny on vn bn trng ging nh sau:
20
<h2>Introduction</h2> A volcano is a location where magma, or hot melted rock from within a planet, reaches the surface. It may happen violently, in a massive supersonic explosion, or more quietly, as a sticky, slow lava flow. <p> Volcanoes have been a part of earth's history long before humans. Compare the history of human beings, a few million years in the making, to that of the Earth, over four billion years in the making. 21. Lu tr s thay i trong trnh son tho. 22. Tr li Web browser v np li ti liu. Hai cu ca mc introduction by gi s trn hay on vn khc nhau.
Nhng dng phn on khc phn chia nhng phn chnh ca mt trang Web, s dng hard rule hay cn gi l tag hr . Tag ny s chn mt ng thng ging nh bn nhn thy ngay trn phn tiu ca mc ny. Dng HTML cho tag hard rule l:
<hr> By gi chng ta hy s dng n! t mt tag hr ngay trn tiu Introduction. Cng vic ny gip cho vic tch cu m u ca bi hc ra khi nhng phn i sau n. V cui cng, tag <br> s y vn bn xung dng mi nh tag <p> nhng khng chn thm mt dng trng. Bn c th phi s dng tag ny khi to mt danh sch (list), khi vit nhng dng ca mt bi th, v.v... Hy so snh s khc nhau gia vic s dng tag <br> v tag <p> trong hai v d sau y: Ch s dng cc tag <p> HTML And then, we could all see at once the brilliant purpose of the paragraph tag. <p> Moving on... <p> the more tags you write, the better you will feel? HTML And then, we could all see<br> at once the brilliant purpose<br> of the paragraph tag. <p> Moving on... <br> the more tags you Kt qu And then, we could all see at once the brilliant purpose of the paragraph tag. Moving on... the more tags you write, the better you will feel? S dng c tag <p> v tag <br> Kt qu And then, we could all see at once the brilliant purpose of the paragraph tag. Moving on... the more tags you write, the better you will feel?
21
write,<br> the better you will feel? Tag <br> cn c th c s dng cho nhng cch trnh by khc nhau cho phn tiu ca bn. Nu nh bn ch , bn s nhn thy l cc tag tiu <h1>, <h2>, ... t ng chn thm cc dng trng trn v di dng ch ca tag tiu . Mt vi tc gi ca nhng trang Web thch t iu khin nhng dng trng ny. Tn mc dng tag tiu Kt qu and in the end it was all for naught.
HTML and in the end it was all for naught.
The New Cheese Edict <h4>header tag</h4> Later, sir Longhorn declared that all makers of cheese would have Later, sir Longhorn to be certified before commencing production. declared that all makers of cheese would have to be certified before commencing production. Tn mc dng tag <b> v <br> HTML and in the end it was all for naught. <p> <b>The New Cheese Edict</b><br> Later, sir Longhorn declared that all makers of cheese would have to be certified before commencing production. Kt qu and in the end it was all for naught. The New Cheese Edict Later, sir Longhorn declared that all makers of cheese would have to be certified before commencing production.
y s khc nhau c v tm thng qu, nhng thc t iu ny to ra cc kh nng sau ny chng ta hc cch to ra tiu c mu v kch c khc nhau. V d nh hy xem trang Web Pages That Don't Look Like Web Pages Kim tra li cng vic ca bn Nu bn thch, hy so snh trang Web bn ang thc hin vi v d mu. Nu ti liu bn to ra khc vi v d mu, hy kim tra li cch bn nh vo cc du chia on <p>. Hy chc chn rng bn lm ng theo s hng dn trong mc Chn cc du chia on ca bi ny. Xem li 1. Tag HTML no dng cho vic phn on? 2. Nhng bc no bn s dng cho vic chn thm mt s phn on trong ti liu ca bn? 3. Lm th no trnh by v nhn thy c s thay i trong Web browser ? 4. im thm*- Tag <hr> l g? Tag <br> l g? Thc tp t do
22
S dng paragraph, tag hard rule, hay tag br to ra cc mc hay on vn trong ti liu ca bn. i n phn tip theo.... Bn c nh phng ch u tin khng ? Lm th no thm mt kiu mu... (style) khc vo vn bn ca bn. Ging nh mt trnh son tho vn bn, HTML c th bo cho Web browser hin th mt phn no ca vn bn dng in nghing hoc in m hoc dng in kt hp c hai ch . Mc ch Sau bi hc ny bn c kh nng:

Nhn dng cc tag HTML cho cc kiu mu vn bn: m, nghing, hoc dng ch nh my (mono-spaced). Nhp vn bn trong ti liu HTML theo nhiu kiu mu khc nhau v nhn thy s thay i ca chng trong Web browser ca bn.
Bi hc Cc tag Style ca HTML HTML cung cp mt vi tag cho vic nh dng style cho vn bn. Hy thn trng v suy ngh cn thn trc khi dng nhng kiu ny nh dng cho vn bn; s dng qu nhiu c th lm cho vn bn tr nn kh c hn ... Cc tag Style HTML Kt qu <b>This is Bold...</b> <i>This is Italic...</i> This is Bold This is Italic
This is Typewriter <tt>This is Typewriter...</tt> Lu rng bn c th kt hp cc tag ny nh dng min l chng c lng vo nhau mt cch chnh xc, v d nh c hai tag bt u v kt thc in nghing u phi bn trong cc tag in m. Cng lu l th t cc tag khng quan trng. <i><b>This is Bold AND Italic</b></i> This is Bold AND Italic
And So is This <b><i>And So is This</i></b> Hn na, bn c th p dng nhng kiu vo trong phn tiu . Lu v cch t cc tag style ng v m xung quanh nhng t mun to kiu cn nhng tag mc th bao quanh ton b mc. blah blah blah blah blah blah <h2><i>New</i> and <tt>Improved!</tt></h2> blah blah blah New and Improved! blah blah blah
23
p dng Style vo trong ti liu ca bn Lu : Nu bn cha c ti liu t cc bi hc trc, bn c th download ngay by gi. Theo nhng bc sau p dng cc tag style cho vn bn HTML ca bn: 1. M li workspace ca bn (nu n cha c m). 2. Tr li ti liu HTML "Volc.htm" ca bn trong chng trnh son tho. 3. Tm t "volcano" trong cu u tin ca phn Introduction. Chng ta s lm t ny tr nn in m nh du y l t quan trng. 4. Chn thm cc tag lm t ny tr nn in m : 5. 6. <b>volcano</b> 7. By gi chng ta s sa i on vn th hai vi nhng tag in m v in nging nhn mnh. Hy thm tag <b>...</b> v <i>...</i> quanh t billion on ny trng ging nh sau : 8. 9. <p> 10. Volcanoes have been a part of earth's history long 11. before humans. Compare the history of human beings, 12. a few million years in the making, to that of the 13. Earth, over four <b><i>billion</i></b> years in the 14. making. 15. Cui cng, chng ta s s dng tag typewriter ch ra mt t c bit. Bn di mc Volcano Terminology, nhp vo on sau: 16. 17. The study of volcanoes, or <tt>Volcanology</tt>, 18. includes many odd terms. 19. Lu tr trong trnh son tho v Reload trong Web browser ca bn.
Kim tra li cng vic ca bn Hy xem V d mu nhn thy s thay i. iu quan trng khi s dng cc tag style l s kt thc ng n cc tag ny bng tag </> thch hp. Nu khng, tt c phn vn bn cn li s b tc ng ca kiu chn. Khi nhn s c v k quc. Xem li 1. 2. 3. 4. Cc tag style ca HTML l g? Nhng tag no c s dng cho vic nh dng cc kiu mu vn bn? Nhng bc no bn s dng cho vic p dng kiu vo trong ti liu HTML ? im thm*- Cc tag ny to ra tin li khi to trang web nh th no?
Thc tp t do Th s dng cc tag style lm m, lm nghing, v dng kiu ch nh my typewriter vo vn bn trong trang web ca bn. Hy quan st khi bn c th s dng thnh cng t hp cc kiu mu. 6. Danh sch, Danh sch, v Danh sch Danh sch c dng trnh by cc mc thng tin thnh mt dng d c hn. Chng hn nh, ngay sau phn tiu k tip di y c mt danh sch.
24
Mc ch Sau bi hc ny bn c kh nng:
Nhn dng c m cho vic to thnh nhng danh sch c th t (ordered list), khng c th t (unordered list) v danh sch lng nhau (nested list) ca mt trang web. t nhng loi danh sch khc nhau vo trong ti liu HTML v nhn thy s thay i ca chng trong trang Web.
Bi hc C rt nhiu trang Web trnh by danh sch cc mc. C nhng mc bt u bng mt "bullet" (unordered) hoc l mt danh sch c nh s theo th t (ordered). Nhng danh sch ny c nh dng d dng trong HTML, v chng cng c th c lng vo nhau (danh sch trong danh sch) to thnh mt dng phn cp ti liu. Danh sch cng c s dng cho vic to mt bng ch mc hay l mt bng ni dung ca mt dy cc ti liu hoc cc chng. Danh sch khng c th t Danh sch khng c th t (unordered list) s dng tag ul c xut hin nh l mt danh sch cc mc vi nhng du "bullet" hoc nhng k hiu nh du trc. K hiu dng nh du ty thuc vo tng loi phin bn ca Web browser v phng trnh by cc k t thng thng (v d nh, trong Macintosh cc bullet l k t option-8 ca phng Times c dng l mt hnh vung nh, cn trong Geneva n li l mt du chm trn ln). Sau y l v d cho mt danh sch khng c th t: My Unordered List:

Item 1 Item 2 Item 3
V dng HTML cho kt qu trn l: <B>My Unordered List:</B> <ul> <li> Item 1 <li> Item 2 <li> Item 3 </ul> Cc tag <ul> nh du s bt u v kt thc ca danh sch, cn tag <li> ch ra tng mc cho mt danh sch. Danh sch c th t Danh sch c th t l danh sch m browser s nh s th t cho mi mc trong danh sch, thng l bt u bng "1." Lu rng, s khc nhau chnh l do mt thay i nh t tag ul thnh tag ol. Ly v d tng t nh v d trn: My Ordered List: 1. Item 1
25
2. Item 2 3. Item 3 V dng HTML cho v d trn l: <B>My Ordered List:</B> <ol> <li> Item 1 <li> Item 2 <li> Item 3 </ol> Danh sch lng nhau Danh sch c th t v danh sch khng c th t c th lng vo nhau theo nhiu mc khc nhau ty thuc vo tng loi Web browser. Vn bn cn quan tm chnh y l vic kim tra rng mi danh sch c kt thc mt cch chnh xc v trt t lng vo nhau l ng. Bc u bn c v thy phc tp vi cc tag <ol> <li> </ul> <li>, nhng hy c gng nh cu trc c bn nh sau : <ul> <li> <li> </ul> <ol> <li> <li> </ol>
Sau y l mt v d vi mt danh sch khng c th t vi cc mc danh sch con khc ca n: Nested Unordered List

This is the first item This is the second item o This is the first sub item of the second item And this is a sub item of a sub item Getting lost yet? o This is the second sub item of the second item o This is the third sub item of the second item This is the third item
Hy ch s thay i ca cc du nh du cho cc mc khc nhau ca danh sch. V y l on m HTML cho v d trn: <ul><B>Nested Unordered List</B> <li>This is the first item <li>This is the second item <ul> <li> This is the first sub item of the second item <ul> <li> And this is a sub item of a sub item <li> Getting lost yet? </ul> <li> This is the second sub item of the second item
26
<li> This is the third sub item of the second item </ul> <li>This is the third item </ul> Nhng danh sch lng nhau - Trn chng li vi nhau Bn khng nhng c th lng cc danh sch c th t vo trong danh sch c th t m cn c th trn ln cc loi danh sch. ng qu ngc nhin! Bt u HTML trng c v hi ng ngn, nhng bn hy xem th cch m cc danh sch li c nhng danh sch khc bn trong ca n. Ly v d, danh sch c th t di y bao gm mt danh sch khng c th t bn trong n: Nested Unordered List 1. This is the first item 2. This is the second item o This is the first sub item of the second item 1. An this is a numbered sub item of a sub item 2. An this is another numbered subItem of a sub item 3. Getting lost yet? o This is the second sub item of the second item o This is the third sub item of the second item 3. This is the third item V y l on m HTML cho v d trn. Hy ch s sp xp trong cch vit HTML d c hn: <B>Nested Unordered List</B> <ol> <li>This is the first item <li>This is the second item <ul> <li> This is the first sub item of the second item <ol> <li> An this is a numbered subItem of a sub item <li> An this is another numbered sub item of a sub item <li> Getting lost yet? </ol> <li> This is the second sub item of the second item <li> This is the third sub item of the second item </ul> <li>This is the third item </ol> t nhng danh sch vo trong ti liu HTML ca bn Lu : Nu bn cha c ti liu t bi hc trc, hy download ngay by gi. S dng tag list, bn s thm mt danh sch c th t v mt danh sch khng c th t vo trang web Volcano Web ca bn. 1. M li workspace ca bn (nu n cha c m). 2. M li ti liu HTML trong trnh son tho.
27
3. Bn di mc Volcano Terminology chng ta s dng mt danh sch khng c th t trnh by mt s thut ng k thut c s dng trong vic nghin cu ni la. Hy n mc ny trong ti liu HTML ca bn. 4. Trc ht thm cu sau : 5. 6. How many do you know? 7. V by gi, hy nh vo dng HTML to ra danh sch cc thut ng: 8. 9. <ul> 10. <li>caldera 11. <li>vesicularity 12. <li>pahoehoe 13. <li>rheology 14. <li>lahar 15. </ul> 16. By gi chng ta s dng mt danh sch c th t xc nh nhng phn yu cu ca bi hc chng ta ang xy dng. Bn di mc Research Project, thm nhng dng sau (Hng dn: lc ny bn nn s dng chc nng ct v dn t trong trang web tr phi bn c thch th v mun t nh li on vn bn!): 17. 18. Your mission is to find information and report on a 19. volcano, other than the ones listed above, that has erupted 20. in the last 100 years. Your reports must include: 21. <ol> 22. <li>Type of volcano 23. <li>Geographic location 24. <li>Name, distance, and population of nearest major city 25. <li>Dates of most recent and most destructive eruptions. 26. <li>Other events associated with the recent eruptions 27. (earthquakes, floods, mudslides, etc) 28. </ol> 29. <p> 30. Then, write a one page description on the major hazards to 31. humans in the vicinity of this volcano. Speculate on what 32. you would do if you were in charge of minimizing the risk 33. to the population. 34. Lu tr v Reload trong Web browser ca bn.
Kim tra li cng vic ca bn C th bn mun so snh ti liu ca bn vi v d mu cho phn bn va lm. Nu danh sch ca bn khc vi danh sch trong v d mu, hy kim tra li nhng g bn nh trong trnh son tho. Hy chc chn rng n ph hp vi cc hng dn trong mc t nhng danh sch vo trong ti liu HTML ca bn trong bi ny. Xem li 1. 2. 3. 4. 5. Danh sch c gi tr nh th no trong trang Web ? Tag HTML no c dng cho danh sch khng c th t? Tag HTML no c dng cho danh sch c th t? Phi lm th no to ra danh sch lng nhau ? Nhng bc no c s dng trong vic thm mt danh sch vo ti liu HTML ca bn?
Thc tp t do
28
C th bn mun c kinh nghim trong vic chuyn i mt danh sch c th t thnh mt danh sch khng c th t. ng thi bn cng mun thm mt danh sch c th t hay khng c th t vo trong ti liu WWW ca bn. Hy chc chn rng n c th hin ng trong browser ca bn. Bn c to c cc danh sch c danh sch con khng ? 7. Thm hnh nh vo trang Web Vic gi mt vn bn thng qua Internet ch l mt cch c ca th tn in t. Ngi ta lm c iu trong nhiu thp k! Khi bn c th bao gm c hnh nh, thng bo ca bn s tr nn nhiu thng tin hn. C phi l mt bc hnh s ng gi hn c ngn t khng ? Mc ch Sau bi hc ny, bn c kh nng:

Nhn ra nhng dng hnh nh cho World Wide Web. Tho lun v nhng im chnh cn nhc khi chn hnh nh vo ti liu WWW. Download mt tp tin hnh nh v h thng ca bn. S dng ng nhng dng HTML cho vic chn hnh nh trong trang web ca bn.
Bi hc Bn s cm thy thoi mi vi bi hc ny! Bi ny ch gii thiu s qua v hnh nh cho WWW. Nhng chng ti mun bn hot ng mt cht. Cc dng hnh nh ca Web C v s dng tp tin hnh nh cho my tnh: PICT, GIF, TIFF, ri th EPS, BMP, PCX, JPEG ... Cch c ca n ging nh mt bi th b n. Mt bi th ti. Cch thc cho Web browser hin th hnh nh l mt s nh dng ca HTML ch ra v tr ca tp tin hnh nh sao cho s nh dng c th thng dch c trong cc my tnh khc nhau. V d nh, thng tin theo dng c nhn bi my Macintosh th browser s hin th hnh nh theo dng hnh nh ca my Macintosh. Tuy nhin, khi cng thng tin gi cho browser trn Windows, n c hin th theo ch ha ca Windows. Theo thut ng k thut, chng ta s ni rng dng hnh nh l c lp vi platform (platform independent). Bn thn HTML cng l c lp vi platform v cc k t vn bn trn ca n u c th hiu c trong mi my tnh. Dng chun c th hin th trong mt trang web l GIF hay Graphics Interchange Format. GIF nn cc thng tin ca hnh nh (gim kch thc ca tp tin) v chuyn n thnh m nh phn c th truyn qua Internet. K thut nn theo GIF l k thut nn c hiu qu cao nht khi hnh nh c nhng vng lin tc c cng mt mu, v vic nn cng ln hn khi c s lp li mu theo chiu ng. Dng hnh nh khc s dng trong web l JPEG (c t tn sau khi Joint Photographic Engineering Group thit k ra dng ny). Trc y, cc nh JPEG khng c hin th trong cng trang m c hin th trong mt ca s khc nh vo mt chng trnh "tr gip" c ci t thm vo. Nhng hin nay hu ht cc browser u h tr vic hin th nh JPEG ngay trong trang web. K thut nn JPEG rt c hiu qu vi cc nh chp m mu sc thay i lin tc trong cc phn rt nh ca nh (cc nh "grainy"). Ty thuc vo s tha hip vi cht lng nh, JPEG cung cp cc loi h s nn v kch thc tht l c n tng, i khi t n 10 (tc l tp tin 1500KB gim cn 150KB).
29
c nhiu thng tin hn v cc dng tp tin ny, hy xem trang SITO ti Graphics File Compression. Nu bn mun c mt cun sch ln, hy xem Designing Web Graphics ca Lynda Weinman. Rt nhiu chng trnh x l th c sn chc nng lu tr tp tin theo dng GIF. Nu khng, di y l mt vi chng trnh/trnh tin ch shareware thc hin vic chuyn i. Bn c th tm thy chng ti cc site nh shareware.com, Jumbo , hay Yahoo. Vi trnh tin ch cho Ha Macintosh Windows GIFConverter WinGif 1.4 GraphicConverter Lview 3.1 clip2gif PaintShop Pro PhotoGIF (plugin for PhotoShop)
Vi im cn bit khi s dng ha Vi ti liu ny, bn khng cn thit phi s dng mt trong cc chng trnh x l ha ni trn. Chng ti s trnh by n cc bn cch lu tr li mt bn sao ca bt k hnh nh no bn nhn thy trn trang web. Tuy vy, v bn bt u pht trin cc trang web ca bn, bn cng nn lm quen vi cch to ra cc hnh nh dng GIF hay JPEG. Nu trang web ca bn c thm hnh nh, bn nn ch cc vn sau y:
Tng s lng v kch thc ca hnh nh c th xem tt hn trn my tnh, nhng chng cng lm cho ngi s dng phi ch i hnh nh c gi thng qua mng (cng ging nh c c bao nhiu ngi trong chng ta c my Sun SparcStation ti nh?) Chng ti ngh nn gi kch thc ca hnh nh t hn 100K (vi chng ti th t hn 50B). Cng nh cng tt. Cng vi mt ghi ch tng t, khng phi mi ngi trong chng ta u c mn hnh 21 inch! Nn gi cc hnh nh khng rng hn 480 im v khng cao hn 300 im trnh cho ngi s dng phi scroll hay nh li kch thc ca s browser ca h. Nhiu cp mu lm cho nh c v p hn nhng vi cc hnh GIF chng s khng nn c nhiu nh cc khi cng mu v i khi chng khng ghp nhm c Mt s chng trnh x l hnh nh c ch "no dithering" khi chuyn sang dng GIF -- vic ny c th lm gim "s hn n" (noise) trong cc khi nn. Nhiu tng mu ti trn my Macintosh khng th hin th c trn my Windows. Thay v hin th tt c cc hnh nh trong trang web, c th to lin kt chng nh l cc hnh nh bn ngoi chng ch c np v khi ngi xem click vo hypertext lin kt (iu ny c xt k hn sau ny trong bi 8a v trong bi 8d). Nu bn c nhiu hnh cn trnh by, hy th chia nh trang web ca bn thnh mt chui cc trang lin kt nhau. Mt hnh nh nh (nh l mt "bullet" nh) c th xut hin nhiu ln trong mt trang m ch b chm rt t thi gian cho mi ln s dng li nh . Hin nay nhiu browser "cache" c cc hnh nh (ct chng li trong my ca bn), iu ny c ngha l khi s dng cng mt tp tin trong nhiu trang web s lm cho chng c np vo t ngay trn my tnh ca chnh bn ch khng phi t trn Internet. iu quan trng nht, hy chc chn rng cc hnh nh l nhng th to thm ngha cho ti liu HTML ca bn.
30
Bn c th thit k ra mt trang web p, c nhiu hnh nh ln, c np d dng t my tnh ca bn, nhng m n li c th chu cnh chm th thm vi cc ngi xem s dng mt modem tc thp qua mt mng rt bn rn. Mng l ch lc no cng b bn. Lu tr v Thm Hnh nh vo Trang Web ca Bn n c bi k tip, u tin bn cn chp li mt bn sao hnh nh ca s bng n ca ni la (hy xem cc dung nham nng bng ca n!). Ch cn theo cc hng dn trong Trung tm Download Hnh nh ca Bi 7 ri sau tr li y hon tt bi hc ny
Kim tra li cng vic ca bn Hy kim tra bit rng tp tin "lava.gif" c ct vo cng mt directory/folder vi tp tin vn bn HTML ca bn "Volc.htm". Nu n khng c, hy kim tra li bn c ct nhm vo mt directory/folder khc khng. Nu ng nh vy, chuyn n vo li ng v tr. Xem li 1. 2. 3. 4. Hai dng nh no c s dng cho World Wide Web? Lm th no cc tp tin hnh nh c trnh by trn cc my tnh khc nhau? Vi im lu no cn xt n khi thm hnh nh vo cc trang web? Lm th no bn ct li hnh nh dung nham s dng trong ti liu WWW ca bn?
Thc tp t do Lt trn web v tm mt vi hnh nh. Th download t nht mt hnh nh c th hu ch cho trang ca bn. Vi ni bn c th th l: Yahoo Picture Archive, SpriteLib, hay Rob's Multimedia Lab 7a. Hnh nh Inline Ton hc trong WWW l: Text + Pictures = Multimedia Multimedia + WWW = Global HyperMedia Bn c ng khng? Mc ch Sau bi hc ny, bn s c th:

t mt hnh nh vo trong ti liu HTML ca bn. Chn la cch xp sp hnh nh vi vn bn bao quanh. Sa i tag chn hnh nh phc v cho ngi s dng dng browser khng c hnh nh. Ch nh chiu ca hnh nh.
Bi hc
31
Chng ta hy nhn xem lm th no thm cc hnh nh ging nh "ch M ln" vo trong mt trang web ... Tag HTML cho Inline Graphics Mt hnh nh "inline" c xut hin bn trong vn bn ca trang web, ging nh
hnh "ch M ln" ny. Dng HTML cho tag hnh nh inline l: <img src="filename.gif"> trong filename.gif l tn ca mt tp tin GIF cng directory/folder vi ti liu HTML. T "inline" c ngha l web browser s hin th hnh nh ngay trong vn bn. Hy ch cc vn bn theo ngay sau "ch M ln" trn. Nu chng ta mun "ch M ln" ring trn mt dng th sao? mt hnh nh xut hin trn mt dng ring bit,
ch cn thm mt tag paragraph trc v sau tag image:
<p> <img src="filename.gif"> <p> S sp xp trong hng ca vn bn v Inline Graphics Tag <img...> c th thm thuc tnh iu khin v tr ca vn bn so vi hnh nh trong hng. Thuc tnh align c thm vo trong tag <img....> c th em li nhng hiu qu sau: 1. align=top <img align=top src="filename.gif">
is for Maricopa Community Colleges located in the Valley of the Sun, metropolitan Phoenix, Arizona. Our license plates say that we are the Grand Canyon State...
2. align=middle <img align=middle src="filename.gif">
32
3. align=bottom (mc nh) <img align=bottom src="filename.gif">
Ch cch sp xp vn bn trn mi dng...(c th thu hp hay m rng b rng ca ca s browser WWW xem r s thay i). Vi HTML 2.0, bn khng th c nhng khi vn bn ngay bn cnh hnh nh. Trong nhng bi hc sau, chng ta s xem cch to ra nhng hiu qu . t mt hnh nh vo trong ti liu HTML ca bn Lu : Nu bn cha c ti liu t bi hc trc, bn c th download ngay by gi. Bn cng cn c hnh GIF t Trung tm Download Hnh nh Bi 7. Trong bi tp ny, bn s thm hnh nh gii thiu ni la trong trang web ca bn. 1. M li workspace ca bn (nu n cha c m). 2. M li ti liu volc.htm trong trnh son tho vn bn. 3. Bn trn mc <h1>Volcano Web</h1> nh vo: 4. <img src="lava.gif"> Dng HTML ny s thm trn nh trang web ca bn hnh nh dung nham m bn download trong bi trc. 5. Lu tr v reload trong web browser ca bn. Trong vic t hnh nh, bn c th t hi ti sao chng ta khng cn t mt tag <p> sau hnh nh. iu ny khng cn thit bi v vn bn theo sau n l mt tiu . Mt web browser lun lun chn mt du ngt on trc v sau mt tag <h1,h2,h3...>. Thuc tnh alt="..." Nu trang web ca bn s c xem bi mt ngi s dng browser dng vn bn (textonly browser, v d nh lynx), h s khng c kh nng xem bt k nhng hnh nh inline no. Hoc i khi ngi s dng tt i vic trnh by hnh nh inline tit kim thi gian download qua cc kt ni mng chm. Mt thuc tnh ca tag <img...> cho php thay vo v tr ca hnh nh bng mt chui vn bn m t n.
33
Bnh thng khi gp trng hp ny, mt ngi s dng text-browser s thy mt v tr gi ch (place holder) phn u trang web ca chng ta trng ging nh sau: [IMAGE] Volcano Web In this lesson you will use the Internet to research information on volcanoes and then write a report on your results. ----------------------------------------------------------------In this Lesson... Cch trnh by ny gip ngi s dng bit rng c mt hnh nh c chen vo u ca trang ny. Bn c th sa i tag <img> thay v trnh by mt v tr gi ch nh trn, browser s hin th mt dng vn bn. Ly v d trong bi ca chng ta, chng ta c th thm "A lesson on:" bng cch iu chnh li tag <img...> nh sau: <img alt="A Lesson on:" src="lava.gif"> Thuc tnh alt="..." thay v tr gi ch bng mt dng vn bn cho mt text-browser (hay khi tt vic hin th hnh nh), bi ca chng ta s xut hin nh sau: A Lesson On Volcano Web In this lesson you will use the Internet to research information on volcanoes and then write a report on your results. ----------------------------------------------------------------In this Lesson... By gi hy iu chnh tng t nh trn vo trang HTML ca bn cho tag <img> c hnh ni la. Thuc tnh chiu cao v chiu rng Mt kh nng khc m bn c th mun thm vo tag <img...> l hai thuc tnh xc nh kch c hnh nh tnh bng s im (pixel). Ti sao vy? Thng thng web browser ca bn phi t xc nh nhng kch c ny khi n c hnh nh; vic np trang ca bn c th nhanh hn nu bn ch nh nhng thng s ny trong HTML. Dng thm nhng thng s ny l: <img src="filename.gif" width=X height=Y > trong X l chiu rng v Y l chiu cao ca hnh nh tnh theo im. Bn c th s dng nhiu chng trnh tin ch xc nh nhng gi tr s ny. Mt cch khc tm nhng kch c ca hnh nh l np n vo trong browser ca bn (bn c th s dng chc nng ko v th - drag and drop - biu tng ca hnh nh vo trong browser ca bn), khi chiu cao v chiu rng s c hin th trn thanh tiu ca browser. Vi v d ca chng ta trong bi hc ny, hnh lava.gif c 300 im chiu rng v 259 im chiu cao. V vy bn nn iu chnh trong tp tin volc.htm thnh: <img alt="A Lesson on:" src="lava.gif" width=300 height=259> Ch : Th t cc thuc tnh trong tag <img> khng quan trng. Thng thng chng ta s t hi c th thay i nhng kch c ca hnh nh bng cch a vo nhng s khc vi kch c tht ca hnh nh khng. Cu tr li l c nhng kt qu nhn c th khng th bit trc. Nu bn cho nhng s ln hn ( lm cho hnh ln hn) kt qu l mt hnh c cc "khi mu" ("blocky" picture). Nu bn cho nhng s b hn ( lm cho hnh nh hn) kt qu c th lm bin dng hnh nh. Bn c th t lm th c kinh nghim. Vi chng ti, l mt s sai lm!
34
Kim tra li cng vic ca bn Bn c th so snh cng vic ca bn vi v d mu bit ti liu ny nn xut hin nh th no. Nu ti liu ca bn khng ging nh v d mu, kim tra li xem bn nh vo dng hnh nh trong trnh son tho nh th no. Hy chc chn rng bn nh vo theo s hng dn trong phn t mt hnh nh vo trong ti liu HTML ca bn ca bi ny. Nu bn thy mt biu tng hnh vi mt du chm hi nh sau:
trc ht hy kim tra li xem tp tin HTML v hnh nh GIF c cng trn mt folder/directory khng. Sau , bn cng nn chc chn rng tn tp tin bn nh trong tag <img... > l tng ng vi tn ca tp tin GIF. Ch : Mt s h thng my tnh (UNIX) c phn bit dng ch hoa v ch thng (case sensitive) trong tn tp tin, iu ny c ngha rng tp tin "lava.GIF" KHNG phi l "lava.gif". Mt s my tnh khc (Macintosh) li xem chng l cng mt tp tin. Ngay c khi my tnh ca bn khng c s khc bit nh vy, chng ti vn ngh bn nn xt li dng ch trong cch t tn tp tin v cc tham kho chng trong HTML ca bn. (Nhiu WWW servers trn UNIX). Xem li 1. Dng HTML cho mt hnh nh inline l g? 2. Tag no bn phi thm vo trc mt tag hnh nh n xut hin trn mt dng ring? 3. Lm th no thm hnh nh ni la vo ti liu ca bn? 4. Thuc tnh alt="...." lm g? Thuc tnh height="...." l g? Thc tp t do Thm mt hnh nh inline vo trang web ca bn bng cch s dng mt hnh GIF ang c trong my ca bn hoc mt hnh c download t Internet. 8. To Lin kt bng Anchors Mc ch ca bi ny ch cung cp cho ta nhng thng tin b sung... V th bi ny nhanh v kh d hiu! Th no lURL? Sc mnh tht s ca web l kh nng to ra nhng lin kt siu vn bn (hypertext link) n cc thng tin lin quan. Nhng thng tin ny c th l nhng trang web khc, nhng hnh nh, m thanh, on phim, animation, cc chng trnh, ni dung ca Gopher server, mt trnh log-in vo my tnh xa (remote computer), hay mt tp hp cc phn mm, hay mt "ftp" site. WWW s dng mt cch nh a ch gi l URL, hay Uniform Resource Locator (i khi cn gi l "Universal Resource Locator"), ch ra v tr ca nhng mc nh vy. Nhng lin kt ny thng c biu din bng nhng ch mu xanh c gch di v c gi l anchor. Trong nhng bi hc tip theo chng ta s:
35

Xem li khi nim ca URL Tm v chp URL t web browser vo ti liu vn bn HTML ca bn. Vit mt anchor HTML lin kt n ti liu trong cng th mc vi ti liu u tin. Vit mt anchor HTML lin kt n ti liu khc th mc vi ti liu u tin. Vit mt anchor HTML lin kt n mt trang web khc trn Internet. Vit mt anchor HTML lin kt n Gopher Server. Vit mt anchor HTML lin kt n mt phn khc ca cng mt ti liu. Lin kt vi mt hnh nh nh mt "hyperlink" n ti liu khc.
! Nghe nh c nhiu vic phi lm! ng lo lng, mi th iu khng phc tp nh bn ngh. Sau cng, nu khng c hypertext th chng ta khng th gi ti liu ny l Son tho HTML m phi gi l Son tho TML 8a. Lin kt n tp tin cc b Ti liu ca ti c th ni chuyn vi ti liu ca ti c khng? c ch, t nht l chng c th lin kt vi nhau c! Mc ch Sau bi hc ny, bn c th:

To lin kt n ti liu HTML trong cng directory/folder vi ti lu chnh ca bn. To lin kt hin th mt hnh nh. To lin kt n mt tp tin trong mt directory/folder khc vi ti liu chnh ca bn. T chc li cu trc web ca bn.
Bi hc By gi, bn s i bc u tin ca "anchoring" bng cch to ra mt lin kt siu vn bn n mt trang web th hai. Nhng lin kt ny c gi l "cc b" (local) bi v chng cng trn mt my tnh v l ti liu ang lm vic ca bn (chng khng cn phi thm him trn Internet). Bn s thay i mt cht v s pht trin web site ca bn (bn c thy rng iu ny to ra mt ci g hi khc mt cht vi t "home gape" khng?). Lu : Nu bn cha c ti liu t bi trc, hy download mt bn sao. Lin kt n Tp tin cc b Lin kt anchor n gin nht l lin kt m tp tin HTML khc trong cng mt th mc vi trang web ang c th hin. Dng HTML lm vic ny l: <a href="filename.htm">text that responds to link</a> Hy xem ch "a" l anchor cn "href" l "hypertext reference. Tn tp tin phi l mt tp tin HTML khc. Bt c vn bn no xut hin sau k hiu > v trc k hiu </a> s l "siu vn bn", n c hin th bng gch di v "hyper". Hy theo nhng bc sau xy dng mt Anchor trong ti liu HTML ca bn lin kt n mt tp tin cc b: 1. M vn bn HTML ca bn , volc.htm, trong trnh son tho. 2. u tin, di tiu Volcanic Places in the USA nh vo on vn gii thiu v hai ni la s dng cho cc phn k tip.
36
3. 4. Listed below are two places in the United States that 5. are considered "active" volcanic areas. 6. Bn di tiu "Mount St. Helens", nh: 7. 8. On May 18, 1980, after a long period of rest, this quiet 9. mountain in Washington provided <a href="msh.htm"> 10. detailed observations</a> on the mechanics of highly explosive eruptions. on vn "detailed observations" s to lin kt cho ngi xem n mt ti liu HTML th hai gi l msh.htm. Tp tin HTML cha c; chng ta s to ra n trong cc bc (5) v (6). 11. Lu v ng ti liu HTML ca bn 12. By gi m mt ti liu Mi trong trnh son tho ca bn. 13. Nhp cc dng sau trong mn hnh mi: 14. <html> 15. <head> 16. <title>Mount St Helens</title> 17. </head> 18. <body> 19. <h1>Mount St Helens</h1> 20. The towering pine trees of this once-quiet mountain 21. were toppled over like toys. 22. </body> 23. </html> 24. Lu tp tin ny vi tn msh.htm trong cng mt directory/folder vi ti liu HTML ca bn (Volc.htm). 25. Reload Volc.htm trong web browser. 26. Kim tra lin kt siu vn bn ti cc t "detailed observations". Khi c chn, n phi kt ni n trang mi v Mount St. Helens. Lin kt Anchor n mt hnh nh Trong bi 7a, chng ta xt cch trnh by mt hnh nh "inline" trong trang Web. Vi tag anchor, bn cng c th to ra mt lin kt hin th mt tp tin hnh nh. Khi chn mt lin kt anchor , hnh nh s c download v trnh by ring trong mt trang trng hoc cng c th web browser ca bn t ng gi mt trnh ng dng hin th hnh nh. Lin kt anchor n gin nht l lin kt n mt tp tin trong cng mt directory/folder vi ti liu gi n. Dng to mt lin kt siu vn bn n mt hnh nh ging nh lin kt n mt ti liu HTML khc trn <a href="filename.gif">text that responds to link</a> trong filename.gif l tn ca tp tin hnh nh GIF. By gi theo nhng bc sau thm mt lin kt vi mt tp tin hnh nh trong ti liu ca bn: 1. Trc ht, bn cn chp mt bn sao tp tin hnh nh GIF t Trung tm Download Hnh nh Bi 8a. 2. M tp tin msh.htm trong trnh son tho. 3. iu chnh on vn bn to lin kt ti hnh nh Mount St. Helens. 4. The towering pine trees of this once-quiet mountain 5. were <a href="msh.gif">toppled over like toys</a>. 6. Lu li tp tin msh.htm v Reload trong web browser ca bn. 7. By gi click vo lin kt m bn va to ra trong bc (3)
37
8. Mt bc nh cy ci b thi ng s c th hin Nhng lin kt n cc th mc khc Tag Anchor cng c th to lin kt n mt ti liu HTML hoc tp tin hnh nh trong mt directory/folder khc c lin quan ti ti liu m c cha anchor. V d nh, trong bi ca chng ta , chng ta c th lu tr tt c cc tp tin hnh nh trong mt directory/folder ring gi l pictures. Khi bn to ngy cng nhiu tp tin HTML, s tt hn khi gi cc tp tin hnh nh trong mt vng ring bit. Hy lm iu sau: 1. Trong h thng ca bn to mt sub-directory/folder pictures trong cng v tr lu tr tp tin Volc.htm. 2. Chuyn tp tin msh.gif n sub-directory/folder mi ny. 3. M tp tin msh.htm trong trnh son tho. 4. iu chnh tag anchor cho hnh nh cn c: 5. The towering pine trees of this once-quiet mountain 6. were <a href="pictures/msh.gif">toppled over like toys</a>. Ch : Vi HTML bn c th hng dn web browser ca bn m mi ti liu/hnh nh ti th mc cp thp hn ti liu hin ti bng cch s dng k t "/" ch ra th mc con gi l "pictures." 7. Lu tr ti liu HTML v reload li trong browser ca bn Nu tt c u tt, vic lin kt trong cu m t cc cy b thi ng s gi n tp tin hnh nh ang c trong directory/folder pictures. Lin kt Anchor n th mc cp cao hn Loi lin kt chng ta va thc hin c gi l cc lin kt "tng i" (relative link), ngha l mt Web browser c th xy dng li y URL da trn v tr hin hnh ca trang HTML v nhng thng tin lin kt trong cc tag <a href=...>. iu ny rt tt bi v bn c th xy dng tt c cc trang web ca bn trn cng mt my tnh, kim tra chng, v di chuyn chng vo mt my khc, tt c cc lin kt tng i vn gi nguyn hiu ng. Trong bi hc chng ta bit lm th no xy dng mt siu lin kt (hyperlink) n mt ti liu lu tr trong mt th mc thp hn trang HTML ang lm vic. Lu rng bn cng c th xy dng mt lin kt n mt th mc cao hn bng cch s dng HTML sau: <a href="../../home.htm">return to home</a> Mi mt ln xut hin ca "../", URL ca lin kt anchor bo cho web browser i n mt directory/folder cao hn mt cp tng ng vi trang hin ti; trong trng hp c th ny c ngha l ln hai cp th mc v tm tp tin home.htm. Trong v d ca chng ta, hy xt trng hp khi th mc con pictures khng cng trong directory/folder vi tp tin volc.htm m cao hn mt cp Trong phn trc chng ta to lin kt t volc.htm ti tp tin msh.gif trong th mc con:
38
<img src= "pictures/msh.gif"> By gi, chng ta mun t chc li cu trc web th mc pictures mt mc cao hn. Lin kt s c vit nh sau: <img src= "../pictures/msh.gif"> V vy web browser tm kim th mc pictures c lu tr cao hn mt mc so vi tp tin volc.htm. S tin li ca cu trc ny l d dng lu li mt s lng ln hnh nh trong directory/folder cao hn c th dng chung trong nhng trang web khc. Chng ta c th thc hin mt bi hc khc v a mo (im c trng t nhin ca b mt qu t) v s dng nhng hnh nh c lu tr trong directory/folder ny. By gi n lc t chc li cc tp tin HTML ca chng ta. thc hin c iu ny bn cn lm quen vi vic di chuyn tp tin v th mc trn my tnh ca bn. Hy c mt cch cn thn! Bn c th cm thy kh phc tp, nhng chng bao lu na tt c u r rng thi! 1. u tin, to directory/folder mi c tn l volcano (mt li khuyn l nn gi cc tn tp tin dng ch nh). 2. Di chuyn hai tp tin HTML volc.htm v msh.htm vo trong directory/folder mi ny. 3. Di chuyn directory/folder pictures (cng vi tp tin msh.gif bn trong) n cng cp vi directory/folder mi volcano. Tng t, di chuyn tp tin lava.gif m chng ta to ra trong bi 7a vo th mc cc hnh ny. 4. Nh vy ton b th mc (workarea) by gi gmhai th mc con - mt gi cc tp tin HTML (volcano) v mt gi cc hnh nh (pictures): 5. + workarea (directory) 6. 7. + pictures (directory) 8. msh.gif 9. volc.gif 10. 11. + volcano (directory) 12. volc.htm 13. msh.htm 14. Chng ta di chuyn mt s th do vy by gi chng ta phi cp nht li cc lin kt anchor trong cc tp tin HTML. Trc ht, hy xem li lin kt cc b trong tp tin volc.htm: 15. <h3>Mount St Helens</h3> 16. On May 18, 1980, after a long period of rest, this quiet 17. mountain in Washington provided <a href="msh.htm">detailed 18. observations</a> on the mechanics of highly explosive 19. eruptions. Ch : V tp tin msh.htm vn cng th mc vi volc.htm, chng ta khng cn thay i g c trong tp tin HTML ny! Bn c thy s lin kt tng i l mt tnh cht rt hay ca HTML khng? 20. Nhng by gi hy xem li lin kt n hnh Mt. St Helens to ra trong tp tin msh.htm: 21. The towering pine trees of this once-quiet mountain 22. were <a href="pictures/msh.gif">toppled over like toys</a>.
39
M tp tin ny trong trnh son tho vn bn v iu chnh lin kt nh sau: The towering pine trees of this once-quiet mountain were <a href="../pictures/msh.gif">toppled over like toys</a>. Lin kt tng i ny bo cho web browser xt ln mt cp so vi directory/folder hin hnh (volcano) ri tm directory/folder c tn (pictures) m c cha nh msh.gif 23. Cui cng, bn cn iu chnh li tag <img...> tag hin th hnh nh tiu . M tp tin volc.htm trong trnh son tho v sa i dng ngay sau tag <body>: 24. <img alt="A Lesson on:" src="../pictures/lava.gif" width=300 height=259> 25. Lu li tp tin ca bn. Bn nn M li tp tin volc.htm trong web browser ca bn v th li lin kt n msh.htm v lin kt n hnh Mount St Helens. Thm mt s thay i nh na Bc thay i nh cui cng ny c th khng r rng, ngng chng ti s c gng gii thch ngn gn. iu cui cng bn nn lm trong bi ny l i tn tp tin t volc.htm thnh index.htm Ti sao vy? Hy xem nh bn kt thc bi ny v sn sng a web site ca bn vo World Wide Web server mi ngi cng xem. V chng ta hy gi thit rng a ch Internet ca server ny ti Big University l: http://www.bigu.edu/ V tp tin ca bn c ct vo th mc sau: --= top level of server: www.bigu.edu /courses /science /geology nh vy URL cho Volcano Web c th l: http://www.bigu.edu/courses/science/geology/volcano/volc.htm , kh di nh? By gi l nhng li gii thch nh ha -- trn nhiu WWW server bn c th ch nh mt tn chun gi l trang web "mc nhin" (default) cho mt th mc v trn nhiu h thng tn l .... index.htm. iu ny c ngha rng a ch Internet: http://www.bigu.edu/courses/science/geology/volcano/ tng ng vi http://www.bigu.edu/courses/science/geology/volcano/index.htm iu ny c th lm cho bn ngh l tit kim c nhiu nng lng trong vic xa bt 20 k t t URL! Thc t, n lm cho URL ca bn c v chuyn nghip hn. Nu bn ni c mt Home page l Longhorn Cheese, http://www.cheese.com/longhorn/ c v t rm ra hn l http://www.cheese.com/longhorn/longhorn.htm khi cho mi ngi c URL ca bn v th nh vo browser ca h. Kim tra li cng vic ca bn So snh trang web vi v d mu bit ti liu nn xut hin nh th no. Trc ht bn s thy trang Volcano Web. Khi bn click vo siu vn bn ti detailed observations, web browser ca bn s hin th mt trang mi. Cui cng, khi bn click vo toppled
40
over like toys, web browser ca bn s hin th trong mt ca s mt tp tin hnh nh c ct trong mt sub-directory/folder. S dng button back ca browser hai ln quay v trang ny. Nu trang web ca bn khc vi mu, xem li vn bn bn nh vo trong trnh son tho vn bn. Xem li 1. Cc bc no c s dng to mt lin kt trong ti liu ca bn n mt tp tin cc b? 2. Nhng bc no c s dng to mt lin kt khi mun hin th hnh nh trong ca s ring bit? 3. Lm th no to mt lin kt n mt tp tin trong mt directory/folder thp hn ti liu chnh ca bn? cao hn? 4. ngha ca tp tin c tn index.htm trn mt WWW server l g? Thc tp t do To mt ti liu HTML s dng cc nh dng HTML m bn quen bit n giai on ny. Tr v trang u tin v to mt anchor lin kt n trang mi ny. 8b. URLs - Con tr n Internet URL? Earl? Yurl? hurl? gyrl? n lc lin kt n Big Wide Web s dng s nh a ch ca web. Mc ch Sau khi hon tt bi ny bn c th:

Nhn dng chc nng ca Uniform Resource Locators (URLs). Nhn bit cu trc ca mt URL. Kim tra URL trong lin kt siu vn bn ca bt k trang web no.
Bi hc Ch : Trong bi ny, bn s khng cn tp tin vn bn HTML ca bn. Mt bi hc khng cn gng sc! URL l g? WWW s dng Uniform Resource Locator (URL) tm v tr ca nhng tp tin v ti liu ca cc my tnh trn Internet. Trn mn hnh browser ca bn, URL cho ti liu ny c th hin phn phn trn ca ca s browser. URL bao gm:

Mt s nh dng loi Internet server; Mt a ch Internet; v Mt ng dn tp tin (file path) ch ti mc ang xem.
URL l th bn cn xy dng mt lin kt t trang web bn to ra n nhng phn thng tin khc trn Internet. bit chi tit hn, hy xem Curling Up To URLs (v0.2) Cu trc URL nh th no? Cu trc ca mt URL l:
41
type://in.ter.net.address/directory/sub-directory/.../filename "type" ch ra loi ca Internet server c truy xut: http Mt World Wide Web server. "HTTP" tng trng cho HyperText Transfer Protocol. gopher Mt Internet Gopher site, th mc cc tp tin v thng tin theo dng thc n. ftp Mt anonymous File Transfer Protocol (FTP) site, truy tm cc tp tin. telnet Khi to mt trnh Telnet log on t xa ti mt my tnh khc. Khi chn, web browser s khi ng chng trnh Telnet v kt ni ti site c ch nh . WAIS Wide Area Indexed Server- mt site d tm cc ti liu theo ch c xc nh bng cc t kha. file Mt tp tin trn my cc b (a cng, a mm, file server ni b). Sau Type lun lun l "://" v a ch Internet ca my t xa. Sau y l cu trc ca a ch ny: host.domain.domain.domain V d nh: machine.department.college.edu 123.45.6.78 office.company.com agency.branch.gov machine.organization.country Nu URL ch n mc chnh ca host ny ("home page" ca n), th URL c kt thc bng mt du "/". Nn bn lin kt ti mt th mc con hoc mt tp tin, bn phi thm chnh xc ng dn ti n bng cch s dng du "/". Ch : Hu ht cc server u kim tra ng php! V cng kim tra dng ch hoa hay ch thng! Cc tn tp tin trn cc my UNIX c phn bit ch hoa v ch thng, iu ny c ngha l tp tin c tn SpiffyText.htm l khc vi tp tin spiffytext.htm To kinh nghim vi URLs Ch rng URL c th to lin kt n mi site, th mc, th mc con, tp tin vn bn, hnh nh, digital movie, hay tp tin m thanh trn mi Internet site ci t cho php truy xut t do. Cch tt nht xem cc URL khc nhau l di chuyn chut ca bn qua cc lin kt siu vn bn trong trang web no - nu bn nhn vo bn di web browser ca bn, n s trnh by URL m bn mun ni n khi bn click vo lin kt . Bn c th vo mt site ln nh Yahoo v "nhm trm" cc URL (bn c thy URL ca Yahoo khi bn di chuyn mouse qua lin kt trong cu va ri khng?) Cn by gi l mt cch rt d chp li mt URL ca mt lin kt trong mt trang bt k. Trc ht bn m thc n "b mt" t mt lin kt siu vn bn no trong mt trang web (n v gi chut trong Macintosh; n v gi button phi ca chut trong Windows v Unix). T thc n ny, chn Copy This Link Location (hay chc nng tng t). Sau khi th button chut ra, chuyn n mt trnh son tho vn bn no v chn Paste t thc n Edit. Hay qu! Bn ly c mt URL t mt lin kt trong trang web (vi cch ny bn c th chp mt URL ngay c khi bn cha tham quan trang m n lin kt n!)
Xem li
42
1. 2. 3. 4. Mc ch ca URL cho World Wide Web? Ni no thy c URL trn mt mn hnh WWW? Cu trc c bn ca mt URL? Lm th no thy c URL ca mt lin kt siu vn bn s nhy n?
Thc tp t do Tm vi site trn Internet m bn cm thy thch. Vi mi site, ghi li URL ca n c trnh by gn trn nh ca ca s browser. Th xem bn c thc hin c vic chp v dn (copy and paste) cc URL vo mt ti liu vn bn hay khng. Bn s s dng danh sch ny thm cc lin kt t cc trang web ca ring bn n cc site m bn tm thy. 8c. Lin kt n cc site Internet bn ngoi Bn nn lm ti li c my ca bn bng cch chm vo Information SuperHighway, c khng? y chng ta s m rng cch s dng ca cc tag anchor to ra lin kt n cc ti nguyn c sn trn Internet. Mc ch Sau bi hc ny bn c th:

To mt anchor lin kt n mt Internet site. Chp nhanh URL ca mt site v s dng n trong ti liu HTML ca bn.
Bi hc Lu : Nu bn cha c ti liu bi hc trc, bn c th download ngay by gi. HTML cho cc Anchor n Internet To lin kt n mt site trn Internet bao gm nhng iu chng ta xt trong bi Lin kt vi tp tin cc b (Bi 8a) cng vi bi v URLs (Bi 8b). Dng HTML y cho mt lin kt anchor n mt mc trn Internet l: <a href="URL">Text to Activate Link</a> Trong URL gia hai du nhy l dng y ca Uniform Resource Locator, cho bit a ch ca Internet site m bn mun gi n ngi c. Chui Text to Activate Link l dng ch s c hin th nh l siu vn bn trong web browser thng (nhng khng phi lun lun) c dng gch di v mu xanh. Khi ngi c click trn siu vn bn ny, web browser s lin kt chng vi Internet site c ch nh bi URL. Nn nh rng mt URL c th l mt lin kt n mt World Wide Web (WWW) server khc, Gopher server, FTP site, hoc bt k mt tp tin vn bn, hnh nh, m thanh, video trn cc server ny. By gi chng ta s thm mt lin kt siu vn bn n site ca NASA l site c thng tin v cc ni la trn Sao ha (planet Mars). Theo nhng ch dn sau thm lin kt anchor vo ti liu HTML ca bn: 1. M tp tin index.htm ca bn trong trnh son tho vn vn. 2. Bn di tiu Volcanic Places on Mars, nhp vn bn sau: 3. 4. <a href="http://bang.lanl.gov/solarsys/mars.htm"> 5. Mars</a> has its fair share of volcanic landforms,
43
6. 7. 8. including the largest known volcano in the solar system, <a href="http://bang.lanl.gov/solarsys/raw/mars/olympus.gif"> Olympus Mons</a> Ch : Chng ta to s lin kt n hai loi thng tin khc nhau. Siu lin kt (hyperlink) u tin ni n mt trang web m t thng tin v Sao ha. Ci th hai l lin kt n mt nh GIF nh ca ni la Martian. 9. Lu v Reload trong web browser ca bn. Mt cch d dng nhp cc URL trong tag Anchor Nh l bn thy trong cc trang web, URL ca trang hin ti c th thy c phn trn ca ca s web browser (bn c th tm kim thc n Trnh by URL). V d nh, trong ti liu ny, URL trng ging nh sau: http://www.mcli.dist.maricopa.edu/tut/tut8c.html Bn c th s dng chut chn v chp li mt URL t phn trnh by trong web browser ri sau dn n vo trong tag anchor ca ti liu HTML. iu ny hiu qu hn l vit URL ra giy rt nhiu (i lc kh di!). By gi chng ta s thm mt s lin kt ti cc site khc m chng ta s lit k ra trong phn References ca bi Volcano. Mt trong cc site c th cung cp thng tin lin quan l US Geological Survey. Theo nhng bc sau: 1. M ti liu HTML index.htm trong trnh son tho 2. Di tiu "References", nhp: 3. 4. <ul> 5. <li> <a href="">Educational Resources from the 6. USGS</a> 7. </ul> Ch : Chng ta to ra lin kt siu vn bn v vn cn phi thm vo mt URL gia hai du nhy. 8. Ni n US Geological Survey Education Index trong ca s browser ca bn. 9. T trang web, s dng chut chn URL ang c hin th trong vng trnh by URL. 10. T thc n Edit, chn Copy URL. 11. By gi , tr li ti liu HTML ca bn index.htm 12. Click mouse vo gia hai du nhy m bn nh vo bc #2 v Dn vo ti liu bn chp trong bc #5. Tag anchor cui cng ging nh sau: 13. 14. <a href="http://info.er.usgs.gov/education/index.html"> 15. Educational Resources from the USGS</a> Ch : Bn va thit lp xong mt cu trc HTML s dng Danh sch Khng c th t, vi mi mc l mt lin kt siu vn bn n mt site c cung cp thng tin v ni la. xem li cc danh sch, hy chn Bi 6. Nh l phn thc tp thm, hy vo cc site Internet di y vi cc ti liu v a cht (Geology) v/hay ni la (Volcanoes). Chp cc URL v xy dng t nht hai site trong phn Reference:
44
Cc Site c Thng tin v Ni la: Alaska Volcano Observatory * Cascades Volcano Observatory * Michigan Tech Volcanoes Page * NASA Earth Observing System (EOS) IDS Volcanology Team * NASA Facts: Volcanoes and Global Climate Change * Smithsonian Global Volcanism Program * Volcano Listserv * Volcano Watch Newsletter * JASON Project VI: Island Earth Cc Site c Thng tin v cc Tai ha T nhin (Natural Hazard): Disaster Information * Emergency Preparedness Information eXchnage (EPIX) * NGDC Natural Hazards Data Cc Site c Thng tin Tng qut v a cht: Earth Resources Observation Systems (EROS) Data Center * EINet Galaxy * Environmental Internet Catalog * NASA Internet Connections * NOAA Environmental Information Server * Planet Earth Home Page * Rice University * United States Geological Survey * Whole Internet Catalog * WWW Virtual Library Kim tra li cng vic ca bn So snh trang web ca bn vi v d mu bit ti liu nn xut hin nh th no. Nu trang web ca bn khng ging nh v d mu hay cc lin kt khng ni n ng site xa, hy kim tra li vn bn bn nh trong trnh son tho. Ch rng danh sch cc tham kho ca bn c th khng ging nh trong v d mu. Xem li 1. 2. 3. 4. a ch cho mt mc trn Internet l g? Nhng bc no cn cho vic to mt lin kt anchor n NASA Internet Site? Cch nhanh no c dng a mt URL vo trong lin kt anchor? Hy ni cho bn b v cc lin kt khc m bn a vo ti liu ca bn.
Thc tp t do To cc lin kt anchor t trang web ca bn ni n vi a ch URL m bn khm ph c. 8d. Lin kt Cc phn ca mt Trang Bn bit lm th no lin kt ti nhng trang web khc l nhng trang do bn to ra hay l nhng trang c trn Internet. Nu bn mun kt ni ti mt phn dc ch nh bn trong mt ti liu th sao? BN C TH LM C IU NY! Mc ch Sau bi ny bn c th:

To mt du hiu tham kho n cho mt phn ring bit bn trong mt tp tin HTML. Xy dng mt lin kt siu vn bn ni n mt phn ring bit bn trong tp tin HTML. Xy dng mt lin kt siu vn bn ni n mt phn ring bit bn trong tp tin HTML khc. To mt bng mc lc siu vn bn cho mt trang web.
Bi hc
45
Lu : Nu bn cha c ti liu t bi hc trc, bn c th download li ngay by gi. Anchor c t tn Mt anchor c t tn (named anchor) l mt du hiu tham kho n cho mt phn c bit no ca tp tin HTML ca bn. N c s dng to lin kt ti mt phn khc ca cng trang khi trang di, hoc nh du mc ca mt trang khc. Ly v d, trong trang bn ang xem, ti c th to ra mt du n gi l "check" nh du tiu "Kim tra li cng vic ca bn" bn di. Sau , ti vit mt lin kt anchor kt ni ti mc ny trong ti liu ny. Mt khi bn click trn mt lin kt n anchor c t tn ny, web browser ca bn s chuyn n ch dng ny nm trn nh ca mn hnh. Sau y l mt v d bn c th th ngay by gi. i n Kim tra li cng vic ca bn. Khi n , bn s thy mt lin kt tr li mc ny. Dng HTML cho vic to anchor c t tn l: <a name="NAME">Text to Link To</a> hay vi lin kt bn va th trn: <a name="check">Kiem tra lai cong viec cua ban</a> Ch s khc bit vi lin kt anchor <a href=... chng ta xt trong bi 8a. Vit mt lin kt ti mt Anchor c t tn Khi bn mun to mt lin kt siu vn bn (hay mt "lin kt anchor", xem bi 8a) ti mt anchor c t tn, s dng dng HTML sau: <a href="#xxxxx">Text to act as hypertext</a> hay lin kt bn va th n phn di ca ti liu ny: Di den <a href="#check">Kiem tra lai cong viec cua ban</a> K hiu "#" ch cho web browser ca bn tm trong ti liu HTML mt anchor c t tn l "xxxxxx" hay trong v d ca chng ta l "check". Khi bn chn hay click trn siu vn bn, n mang phn ca ti liu c cha anchor c t tn ln nh ca mn hnh. Thm Anchor c t tn vo bi Volcano Web By gi chng ta s xy dng mt bng mc lc cho bi ca chng ta n s xut hin u trang Volcano web. Cc phn t trong bng mc lc s l cc tiu m chng ta to ra v s hot ng nh mt lin kt siu vn bn n mt phn ring bit trong bi chng ta. Bc u tin l to mt anchor c t tn cho mi mc tiu trong bi Volcano Web: 1. M tp tin index.htm trong trnh son tho vn bn 2. Tm tiu Introduction. Chuyn i n t: <h2>Introduction</h2> thnh: <h2><a name="intro">Introduction</a></h2>
46
Ch : Bn va nh du dng cha mc tiu "Introduction" vi mt du tham kho n c anchor c t tn l "intro" 3. Theo cch tng t, thay i tt c cc tags <h2> cho cc phn khc: 4. 5. <h2><A NAME="term">Volcano Terminology</A></h2> 6. 7. <h2><A NAME="usa">Volcanic Places in the USA</A></h2> 8. 9. <h2><A NAME="mars">Volcanic Places on Mars</A></h2> 10. 11. <h2><A NAME="project">Research Project</A></h2> 12. Nu bn Reload lin trong web browser ca bn, bn s khng nhn thy bt k s thay i no; cc tag anchor c t tn thm vo u c du khi ngi s dng xem trang. Thm lin kt ti mt Anchor c t tn trong Cng mt Ti liu By gi chng ta s xy dng mt bng mc lc s xut hin trn u mn hnh. Chng ta s dng mt danh sch khng c th t (xem li bi 6 v danh sch) to n: 1. Nu cha m, hy m tp tin index.htm trong trnh son tho. 2. Bn di cu u tin trong tiu Volcano Web thm nhng dng sau: 3. 4. <hr> 5. <B>In this Lesson...</B> 6. <ul><i> 7. <li>Introduction 8. <li>Volcano Terminology 9. <li>Volcanic Places in the USA 10. <li>Volcanic Places on Mars 11. <li>Research Project</i> 12. </ul> Ch : Bng mc lc ny c nh du trn v di bng tag <hr>. Kiu ch Nghing c dng cho cc mc. y chng ta ch mi nh vo tn cc mc. Sau ny chng ta s thm vo cc lin kt hot ng c. 13. Lu v Reload trong web browser ca bn. Cui cng , chng ta mun lm cho mi mc ca danh sch hot ng nh mt lin kt siu vn bn ti mt phn khc ca ti liu. lm iu ny, chng ta s s dng mt bin th ca lin kt anchor c bn trong bi 8a. Thay v lin kt ti mt tp tin khc, chng ta lin kt ti mt trong nhng anchor c t tn (cc du n bn to ra trn) bn trong cng mt tp tin HTML. Chng ta ch nh mt anchor c t tn bng cch t k hiu "#" trc tn ca du tham kho: 1. M tp tin index.htm trong trnh son tho 2. n mc u tin trong phn mc lc. Thay i n t: 3. 4. <li>Introduction thnh: <li><A HREF="#intro">Introduction</A> 5. By gi bn nn in cc lin kt khc on vn ny trng ging nh sau:
47
6. 7. <hr> 8. <B>In this Lesson...</B> 9. <ul><i> 10. <li><A HREF="#intro">Introduction</A> 11. <li><A HREF="#term">Volcano Terminology</A> 12. <li><A HREF="#usa">Volcanic Places in the USA</A> 13. <li><A HREF="#mars">Volcanic Places on Mars</A> 14. <li><A HREF="#project">Research Project</A></i> 15. </ul> 16. Lu v Reload vo trong web browser ca bn. Khi bn click trn mt mc ca bn mc lc, phn tng ng s hin ra trn nh ca mn hnh. Thm Lin kt ti Anchor c t tn trong Ti liu Khc Bn c th to mt lin kt nhy n mt phn c nh du bi mt anchor c t tn ca mt ti liu HTML khc. HTML xy dng mt lin kt ti mt anchor c t tn trong mt ti liu HTML cc b khc c dng: <a href="file.htm#NAME">Text to activate link</a> v nu l ti liu trn web site khc th c dng: <a href="http://www.cheese.org/pub/recipe.htm#colby"> Colby Cheese</a> Trong bi 8a chng ta to ra mt lin kt siu vn bn t Mount St. Helens n msh.htm l mt tp tin ring bit. By gi, chng ta s thm mt lin kt trong ti liu th hai tr li phn nguyn thy trong trang Volcano chnh. 1. M tp tin msh.htm trong trnh son tho 2. Gn cui trang HTML (nhng phi trn </body>) thm nh sau: 3. 4. <hr> 5. <a href="index.htm#usa">Return to <i>Volcano Web</i></a> Ch : Chng ta c s dng kiu ch Nghing vi tag <i>...</i> bn trong vn bn c nh du bi anchor c t tn l "usa". Lu v Reload vo web browser ca bn. Khi click vo mt v tr ca siu vn bn cui trang msh.htm, bn s phi thy qua tr li mc "Volcanic Plases in the USA" ca bi Volcano Web. Trong trng hp ang xt lin kt ch l tn ca mt tp tin HTML khc, index.htm, trong cng th mc vi tp tin msh.htm. Tuy nhin, bn c th s dng mt URL y (xem bi 7) lin kt ti mt anchor c t tn trong mt tp tin HTML c trn mt my khc xa. V d nh, to mt lin kt n phn "Introduction" ca tp tin HTML ct trong MCLI WWW server, cch vit nn l: <a href= http://www.mcli.dist.maricopa.edu/tut/final/index.htm#intro> Introduction to Volcano Web</a> Du tham kho "#anchor_name" c gn thm vo cui ca URL.
Kim tra li cng vic ca bn
48
So snh cng vic ca bn vi v d mu bit ti liu nn xut hin nh th no. Nu trang web ca bn khng ging nh v d mu hay cc lin kt anchor c t tn khng hot ng ng, hy kim tra li vn bn bn nh trong trnh son tho. V d s dng lin kt tr li phn m t anchor c t tn... Xem li 1. Lm th no nhn dng mt anchor c t tn? 2. Nhng bc no to mt lin kt ti mt phn khc trong cng mt ti liu? 3. Lm th no hiu chnh mt lin kt anchor ni n mt anchor c t tn trong mt ti liu HTML khc? 4. Lm th no to mt bng mc lc cho mt trang web? 5. S khc nhau gia tag <a href="...> v tag <a name="...> l g? Thc tp t do To cc anchors c t tn cho cc tiu trong trang web v xy dng mt mc lc lin kt n nhng mc con ny. 8e. Lin kt Siu Hnh nh Khng phi ch c vn bn mi lm c "hyper"... hy m rng kh nng cho cc trang web ca bn cc hnh nh hot ng nh mt siu lin kt (hyperlink) (Th click vo hnh hp!). Mc ch Sau bi ny bn c th:

Chn mt button hnh trong trang web ca bn n lin kt ti mt ti liu HTML khc. Chn mt hnh nh nh hot ng nh l mt "tem th" (postage stamp) lin kt n vic trnh by mt bn sao ln ca hnh nh .
Bi hc Lu : Nu bn cha c ti liu t bi hc trc, bn c th download li ngay by gi. Button siu lin kt T nhng bi hc trc bn d dng (hy vng l vy) trong vic to ra siu vn bn, tc l on vn bn trong ti liu ca bn cho php ngi xem ni n nhng thng tin c lin quan. Bn cng c th lm cho hnh nh inline (xem bi 7a) hot ng theo cch ging nh "hyper" ny. Nu bn nh li, trong bi hc mi y chng ta lin kt mt on vn bn trong trang Volcano Web, index.htm, n trang th hai l msh.htm miu t Mount St. Helens. By gi trong trang web ny chng ta mun thm mt button m khi c click vo s a ngi c tr v bi hc chnh. Cch lm c iu ny l t cc tag HTML sao cho cc hnh nh inline bn trong phn siu vn bn ca tag anchor:
49
<a href="fileX.htm"> <img src="graphic.gif"> Go to Document X</a> Trong trang web ca bn HTML ny s hin th mt hnh nh inline v on ch Go to Document X. C hai s hot ng nh mt siu lin kt; khi nhn vo on ch hay vo hnh nh s bo cho web browser i n tp tin HTML fileX.htm. Ring hnh nh cng c th l mt siu lin kt. Ni chung, trong World Wide Web, mt "HyperGraphic" s c bao quanh bi mt hp mu tng ng vi loi mu s dng cho siu vn bn trong trang web ca bn, nh bn bit rng n "hot ng" (active). Ch : Nhiu browser hin nay c th thay i mu ca siu vn bn v mt s b i vic trnh by ng bao quanh cc lin kt HyperGraphic. Ni chung, bn c th xc nh mt vng siu lin kt trong mt trang web bng cch xem s thay i ca du nhy (cursor) khi n bng qua mt vng "nng" (hot). Thng thng du nhy s chuyn t du mi tn sang mt bn tay khi n bng qua mt lin kt hot ng (active link). T quan im ca mt nh thit k, chng ti ngh khi bn s dng mt hnh nh nh l mt siu lin kt th nn thm mt lin kt bng vn bn hoc l s dng thm ALT= attribute trong tag <IMG...> phc v cho trng hp ngi xem tt vic np cc hnh nh. By gi chng ta s to ra mt button hnh nh "hyper". Trc ht, bn cn chp mt bn sao ca button mi tn t Trung tm Download Hnh nh Bi 8e. Bn nn c mt bn sao ca tp tin hnh nh u trn my ca bn (Bn nn ct li n vo trong folder/directory pictures trong vng lm vic ca bn). Tip theo, thm vo HTML button hot ng c: 1. M tp tin HTML th hai msh.htm trong trnh son tho vn bn. 2. di cng, iu chnh dng cui thnh: 3. 4. <hr> 5. <a href="index.htm"> <img src="../pictures/left.gif"> 6. Return to <i>Volcano Web</i></a> Lu : Tag hnh nh inline (<img...>) hon ton nm trong anchor gia > nh du kt thc URL v </a> nh du s kt thc ca siu vn bn. Ngoi ra cng ch tag <i> c s dng trong siu vn bn nhn mnh tiu ca bi. V cui cng, chng ta s dng tag <hr> to mt dng thng trn hnh button (xem tag ny trong bi 4). 7. 8. 9. 10. Lu tr tp tin HTML. Tr v web browser, Open Local t thc n File c tp tin "msh.htm". Chn Reload t thc n File iu chnh cc thay i. Th siu lin kt n trang Mount St. Helens v button mi tr bn li trang Volcano Web.
Cc hnh nh "Tem th" Trc y, chng ti c ngh khng nn s dng cc hnh nh inline ln trong trang web ca bn bi v ngi s dng phi mt thi gian ch i hnh nh c download vo my tnh ca h. Mt cch khc y l to mt bng sao b nh ca hnh nh, hay c gi l "tem th" (postage stamps) trnh by nh l hnh nh inline. Sau s dng nhng bc tng t nh trn bn c th lm cho "tem th" hot ng nh mt siu lin kt n hnh vi kch thc tht ca n. Theo cch ny hnh nh ln tht s ch c download nu ngi xem quyt nh mun coi n.
50
Trc ht bn cn sao chp hai tp tin nh t Trung tm Download Hnh nh Bi 8e. (Cc tp tin ny nn c ct vo folder/directory pictures trong vng lm vic ca bn). Sau , to cc lin kt tem th trong tp tin vn bn chnh: 1. M tp tin index.htm trong trnh son tho 2. Di tiu Long Valley nh vo: 3. 4. This field seismometer measures earthquakes associated 5. with subsurface volcanic forces and may help to predict 6. future events. It sits on a plateau known as the "Volcanic 7. Tableland" formed by a major eruption 600,000 years ago. 8. <p> 9. <a href="../pictures/seismo.jpg"> 10. <img src="../pictures/stamp.gif"> 11. -- [View the full size image] -- </a> 12. <p> 13. This seismometer measures earthquakes 14. associated with subsurface volcanic forces. Hnh nh inline, stamp.gif, hot ng nh mt siu lin kt n hnh ln hn, seismo.jpg. Khi ngi s dng click trn "tem th" hay trn on vn "View the full size image --", browser ca bn s trnh by nh ln trong mt ca s ring hay trong mt trang trng. 15. Lu v Reload trong web browser ca bn.
Kim tra li cng vic ca bn So snh trang web ca bn vi v d mu bit ti liu nn xut hin nh th no. Nu trang web ca bn khng ging nh v d mu, hy kim tra li vn bn bn nh trong trnh son tho. Li thng gp l s khc bit khi nh vn tn tp tin v m HTML cho lin kt anchor, hoc l khng c tp tin hnh nh ti th mc ch nh. Nu bn thy mt biu tng hnh vi du chm hi:
th thng c ngha l HTML khng tm thy tp tin c trong tag <img> hoc l nh khng thuc dng GIF hay JPEG. Xem li Nhng vn n li ca bi ny l: 1. Lm th no to mt button hnh nh trong trang web ca bn? 2. Lin kt "tem th" tin li nh th no khi thm hnh nh vo trang web ca bn? 3. Lm th no to ra lin kt "tem th" trong ti liu ca bn? Thc tp t do Thm cc button lin kt hai trang web ln nhau. 9. Preformatted Text
51
Lm th no bn c th hin th c nhng on vn trong c xt n cc khong trng v du xung dng? display text where Mc ch Sau bi hc ny bn c kh nng:

space and carriage return characters count?
To mt bng cc vn bn c nh bin iu khin v tr ca vn bn trn mt trang khi tab v khong cch c xt n
Bi hc Lu : Nu bn khng c ti liu t nhng bi hc trc, bn c th download ngay by gi. Trong nhng bi hc trc chng ta bit l mt Web browser s b qua nhng k t khong trng, k t tab, v du xung dng d tha trong tp tin HTML ca bn. Tuy nhin c mt vi trng hp c bit m vic trnh by trang vi cc tnh cht tr nn quan trng. Trong bi ny, chng ta s xt mt v d m ta s trnh by vn bn thnh cc ct ngay hng vi nhau. Tag preformat hng dn cho Web browser trnh by vn bn chnh xc nh khi bn nh vo trong vn bn HTML, bao gm c vic th hin cc khong trng, cc tab, v c du xung dng. Mt browser tiu biu s hin th vn bn nh vy theo kiu: monospaced Mt v d cho vic s dng tag preformat l:
<pre> We have indented with 5 space characters. And used the carriage return to jump to a new line. Here we use spaces to create a text table. </pre> Khng c cc tag <pre> v </pre>, th on HTML trn s c trnh by nh sau: We have indented with 5 space characters. And used the carriage return to jump to a new line. Here we use spaces to create a text table.
52
Vi tag preformat, s d hn khi trnh son tho bn ang s dng c th trnh by trong mt phng mono-spaced (nh l "Courier" hay "Monoco"); nu khng bn cn phi m k s khong trng chnh ct cc on vn (v bn s kh mt khi lm chuyn ). Vi bi Volcano ca chng ta, chng ta mun thm vo mt bng bn di phn Introduction lit k ra mt vi ni la ni ting, khi no n hot ng li, v mc hot ng ca n. lm iu ny: 1. M tp tin HTML th hai, index.htm trong trnh son tho vn bn. 2. Di phn cui cng ca Introduction, t mt tiu mc 4 (<h4>) vi dng ch: Volumes of Some Well-Known Volcanic Eruptions (Nu bn khng nh cch to tiu , hy xem bi 3). 3. Bn di tiu ny, nhp chnh xc vn bn sau (c th thun li hn khi s dng chc nng ct v dn t trang web ny!): 4. 5. <pre> 6. Eruption Date Volume in km^3 7. -----------------------8. Paricutin, Mexico 1943 1.3 9. Mt. Vesuvius, Italy 79 A.D. 3 10. Mount St. Helen, Washington 1980 4 11. Krakatoa, Indonesia 1883 18 12. Long Valley, California pre-historic 500 - 600 13. Yellowstone, Wyoming pre-historic 2400 14. </pre> Trong v d ny, chng ta s dng cc khong trng lm cho ct u tin c chnh bin tri (left justified) cn hai ct kia c chnh bin gia (center-justified). Cc du tr nhn mnh ct tiu . 15. Lu tr v Reload trong web browser ca bn.
Kim tra li cng vic ca bn So snh trang Web ca bn vi v d mu bit ti liu nn xut hin nh th no. Nu trang web ca bn khng ging nh v d mu, hy kim tra li vn bn bn nh trong trnh son tho. Nu cc ct khng c chnh ng, c l bn nh thiu hay tha cc khong trng. Xem li Nhng vn n li ca bi ny l: 1. Tag preformat lm thay i cch browser thng dch HTML nh th no? 2. Trong nhng trng hp no c th bn cn s dng tag ny? Thng tin b sung Bn vn c th s dng cc tag HTML bn trong vn bn c nh du bi tag preformat. V d nh chng ta c th thm mt lin kt siu vn bn v vi tag nh kiu khc bn trong cp tag <pre>...</pre>: HTML Kt qu <pre> This tutorial is copyright This tutorial is copyright 1995, 1996 1995, 1996
53
Be sure to tell all of <B>Be sure to tell all of your friends about it! your friends about it!</B> We <i>We Welcome Welcome Your Your Feedback Feedback</i> fondly, fondly, mcli <A HREF= "http://www.mcli.dist.maricopa.edu/"> mcli</A> </pre> Ch rng cc tag HTML khng c xem nh l khong trng; chng c b qua trong vng preformat. Mt s tc gi ca trang web s dng tag <pre>...</pre> vi cc k t xung dng bn trong thm nhng dng trng gia vn bn v hnh nh trong trang web ca h- nht l trong trng hp h cn nhiu dng trng hn so vi tag <p>. V d nh: HTML Kt qu Cheese was long since Cheese was long since abolished from the Orient. abolished from the Orient. <pre>
</pre> ...until Sir Longhorn arrived with the great Cheese Crusade of 1167. Thc tp t do
...until Sir Longhorn arrived with the great Cheese Crusade of 1167.
Thm vo mt bng hay mt s trong ti liu HTML ca bn s dng tag preformat. 10. Cc k t c bit Lm th no bn ni... >>> ??? ? Ch :Nu cc k t trn khng th hin cc du nhn hay cc du ph, th c ngha l web browser ca bn khng h tr b k t ISO. Bn nn b qua bi ny Mc ch Sau phn ny bn c th:

S dng m HTML cho nhng k t ISO Latin 1 hin th nhng du nhn cho nhng ch khng phi ting Anh (non-english letter). Vit nhng k t < and > trong HTML khi bn cn n trong mt ti liu. Thm nhng khong trng trong nhng ch v t trong mt ti liu
Bi hc
54
Lu : Nu bn khng c ti liu t nhng bi hc trc, bn c th download ngay by gi. Cc du nhn i khi c th bn cn s dng mt k t c bit trong mt ti liu HTML, mt du nhn hay mt du ph. Cc du ny c bit n theo ISO. Nhng k t c bit nh vy c nh du trong HTML di dng: &xxxx; Trong XXXX l tn m (code name) cho k t c bit . V d, trong phn "Terminology" ca bi Volcano, chng ta mun thm mt s gii thch cho mt thut ng k thut m t mt loi ring bit ca tin trnh bng n ca ni la. Thut ng l nuee ardente xut pht t mt t ting Php vi ngha l "m my nng rc" (glowing cloud) nhng pht m ng chng ta cn mt du nhn "sc" (acute), t xut hin l nu? ardente. Trong trng hp ny, chng ta thay th ch e u tin trong nuee bng m HTML ca ch "e" c du nhn sc é: nuée ardente tham kho, hy xem danh sch cc k t ISO. By gi chng ta s thm mt cu vo ti liu HTML ca chng ta m cu c s dng mt k t c du nhn: 1. M tp tin HTML l index.htm trong trnh son tho vn bn. 2. Bn di danh sch thut ng ca phn Volcanology Terminology thm vo: 3. 4. The term <I>nuée ardente,</I> or 5. "glowing cloud" was first used by La Croix (1904) 6. in his description of the volcanic flows he observed in 7. the 1902 eruption of Mt Pelée, a historically 8. active volcano on the island of Martinique. Ch : Chng ta s dng du nhn sc cho hai k t "e" trong cu ny. Trng c v l qu! Hy chc chn rng bn thay k t bng chui vit trn hin th c cng k t vi du nhn. 9. Lu v Reload li tp tin HTML. Escape Sequences ca HTML HTML cho du nhn l mt v d ca mt lp cc tag tng qut hn c gi l escape sequences. Trong qu trnh nhp vn bn HTML cho n gi, bn c th t hi chng ta s lm g khi cn s dng mt du < (nh hn) hoc mt du > (ln hn)? Hai k t ny cng vi du & (v) c mt ngha c bit trong HTML v khng th s dng nh mt k t nh vo c. Thay v nh trc tip chng, hy s dng escape sequences: < thay cho < > thay cho > & thay cho &
55
By gi chng ta hy p dng cc k hiu ny trong bi Volcano ca chng ta. Trong bi trc: chng ta thm mt bng lit k vi ni la cng vi khi lng vt cht phun ra t chng. Chng ta ni rng mt trong nhng s liu (500-600) cho Long Valley l khng c chnh xc lm (thng thng y l cc gi tr gn ng), v chng ta mun sa i tr ny thnh >450 & <700. lm iu ny: 1. M tp tin HTML index.htm trong trnh son tho 2. Bn di tiu Volumes of Some Well-Known Volcanic Eruptions, tm dng Long Valley trong bng: 3. 4. Long Valley, California pre-historic 500 - 600 v i n thnh: Long Valley, California pre-historic >450 & <700 Ch : Mc du chng ta s dng escape sequences bn trong mt preformatted text, hy ch mt web browser vn thng dch ng v hin th cc k t c bit ny. Nh vy, escape sequences c th s dng trong mi phn ca mt ti liu HTML k c cc tiu v lin kt anchor. 5. Lu v Reload tp tin HTML Nhng khong trng thm vo Nh bn thy mt web browser s b qua tt c nhng khong trng khng lin quan trong tp tin HTML ca bn. Tuy nhin, c nhng lc tht s chng ta mun c nhiu hn mt khong trng . Khi no vy? Mt vi ngi thch c hai khong trng theo sau mt du chm ht cu. Nu bn mun tht vo cu u tin ca mi on vn bn s lm sao? Lm th no c mt t n v tr cch xa phn cn li? Mt m HTML dnh cho vic thm vo mt k t trng l k t c bit c gi l "khong trng khng b ph hy" (nonbreaking space): Sau y l mt vi v d v cch s dng khong trng khng b ph hy: HTML Kt qu
Khong trng khng b ph hy c dng tri di cc k t trong mt t <b><tt> C H E E S E </tt></b> C H E E S E
Hai khong trng khng b ph hy c dng tht cc cu u ca on vn vo trong When Sir Longhorn had tragically died, no one was left to carry on his tradition. There was much sadness in the land. When Sir Longhorn had tragically died, no one was left to carry on his tradition. There was much sadness in the land. And no cheese. But then the young genius Sheila Colby discovered the missing ingredient. And once again, cheese was plentiful.
56
And no cheese. <p> But then the young genius Sheila Colby discovered the missing ingredient. And once again, cheese was plentiful. Mt khong trng na c thm vo sau cui mi cu When Sir Longhorn had tragically died, no one was left to When carry on his tradition. There was much sadness in the land. Sir Longhorn And no cheese. had tragically died, no one was left to carry on his tradition. But then the young genius Sheila Colby discovered the missing ingredient. And once again, cheese was plentiful. There was much sadness in the land. And no cheese. <p> But then the young genius Sheila Colby discovered the missing ingredient. And once again, cheese was plentiful. C th bn mun c kinh nghim vi cc cch s dng khc nhau cho khong trng khng b ph hy. By gi, chng ta s khng sa cc ti liu HTML ca chng ta, nhng nu mun, bn c th thm nhng m lm tht u dng cc cu m u ca tt c cc on vn qua vic s dng hai ln m khong trng khng b ph hy.
Kim tra li cng vic ca bn So snh trang Web ca bn vi v d mu bit ti liu nn xut hin nh th no. Nu trang web ca bn khng ging nh v d mu, hy kim tra li vn bn bn nh trong trnh son tho. Hy bo m bn vit ng cc escape sequence vi k t & v ; Thng tin b sung Di y l mt vi k t c bit c th hu ch cho bn: Tn Copyright Trademark Xem li Nhng vn nn xem li trong bi ny: 1. Trong HTML, cch no hin th k t ting c "umlaut" ( font>)? HTML © ® Kt qu ? ?
57
2. iu g s xy ra nu bn khng s dng mt escape sequence cho < and >? 3. Ti sao cn mt escape sequence cho k t &? 4. Lm th no c th tht cc on vn vo trong? Thc tp t do Trong vn bn HTML ca ring bn, thm vo mt t nc ngoi m t cn mt du nhn t bit, hay thm vo mt biu thc ton hc c s dng du < hay du >. Hoc l bn c th thm cc khong trng tht cc on vn vo trong. 11. Danh sch m t Danh sch m t (Descriptive List) l mt dng c bit ca danh sch:
danh sch o danh sch danh sch...
Mc ch Sau bi hc ny bn c th:

Xy dng danh sch cc mc cng vi khi vn bn m t n c tht vo trong. To mt danh mc sch bng danh sch m t.
Bi hc Lu : Nu bn khng c ti liu t nhng bi hc trc, bn c th download ngay by gi. Trong bi 6 chng ta bit cch to hai loi danh sch: c th t <ol>...</ol> v khng c th t <ul>...</ul>. By gi, chng ti s gii thiu mt dng th ba, danh sch m t. Khng ging nh nhng loi danh sch chng ta thy trc y, danh sch m t nh du cc mc ca n khng phi l mt du chm hoc mt s m bng dng trnh by tht vo trong ca n. Dng ca tag danh sch m t l : <dl> <dt> description title1 <dd> description description1 <dt> description title2 <dd> description description2 : : : <dt> description titleN <dd> description descriptionN </dl> Tag <dl> .... </dl> cha trong n nhiu cp tiu m t (description title) <dt> v s m t (description) <dd> Mt Web browser s to thnh mt danh sch vi mi m t c trnh by tht vo so vi tiu ca n. Khi nhn trong Web browser v d trn s trng ging nh sau:
58
description title1 description description1 description title2 description description2 : : description titleN description descriptionN Mt danh sch m t c th c s dng nh l mt t in (glossary) cc nh ngha, nhng trong v d chng ta, chng ta s dng n to mt th mc sch ngn cho bi Volcano Web: 1. M tp tin HTML index.htm trong trnh son tho. 2. Sau danh sch khng c th t ca tiu References nhp nh sau : 3. 4. <h3>Bibliography</h3> 5. Check your library for these books: 6. <dl> 7. <dt>Cas, R.A.F. and Wright, J. V. (1987). 8. <dd><I>Volcanic Successions: Modern and Ancient.</I> 9. London: Allen & Unwin. 10. 11. <dt>La Croix, A. (1904) 12. <dd><I>La Montagna Pelée et ses Éruptions.</I> 13. Paris: Masson 14. 15. <dt>Lipman, P.W. and Mullineaux (eds). (1981) 16. <dd><I>The 1980 Eruptions of Mount St. Helens, Washington. 17. </I>U.S. Geological Survey Professional Paper 1250. 18. </dl> Ch : Chng ta s dng mt s K t c bit cho du v ("&") trong tham kho u tin v du nhn cho tham kho th hai. Nu bn cha quen vi cc k t c bit ca HTML, xem li bi 10 19. Lu tr v Reload trong Web browser ca bn. Kim tra li cng vic ca bn So snh ti liu ca bn vi v d mu bit ti liu nn xut hin nh th no. Nu ti liu ca bn khng ging nh v d mu, hy kim tra li vn bn bn nh trong trnh son tho. ng qun cc tag <dl>... </dl> nh du ton danh sch. Li thng gp l qun chuyn i cc tag <dt> v <dd> Xem li Xem li nhng ch sau: 1. Danh sch m t khc vi danh sch c th t v danh sch khng c th t nhng im no? 2. Trong trng hp no bn c th phi s dng trong mt danh sch m t? 3. S khc nhau gia tag <dt> v tag <dd>? Thc tp t do
59
S dng danh sch m t thm mt bng thut ng hay mt danh mc sch trong trang HTML ca ring bn. Mt s thng tin thm Bn c th thm cc danh sch c th t v khng c th t vo bn trong mt danh sch m t. Ly v d, chng ta s to mt mt danh sch cc nhm khong cht chnh. Mi nhm c s m t cc tnh cht ca chng, cng vi mt danh sch con cc khong cht v chng c s dng trong x hi nh th no. Chng ta mun n c dng nh sau (ch trnh by mt t): Oxides Combinations of metal ions with Oxygen, comprises the major ores extracted in mining operations

Hematite (iron ore) Magnetite (iron ore, magnetic mineral) Corundum (gemstone, abrasive)
Sulfates Metal ions combine with the Sulfate ion (SO4), atomic structure sometimes can allow bonding of water molecules

Gypsum (plaster) Barite (drilling mud)
Dng HTML cho kt qu trn c dng: <dl> <dt><b>Oxides</b> <dd>Combinations of metal ions with Oxygen, comprises the major ores extracted in mining operations <ul> <li>Hematite (iron ore) <li>Magnetite (iron ore, magnetic mineral) <li>Corundum (gemstone, abrasive) </ul> <dt><b>Sulfates</b> <dd>Metal ions combines with the Sulfate ion (SO4), atomic structure sometimes can allow bonding of water molecules <ul> <li>Gypsum (plaster) <li>Barite (drilling mud) </ul> </dl>
12. Danh thip a ch v Lin kt E-Mail Trong bi ny bn s?o ra mt trang web ng mt -- tm lc bng mt on cui! Hy cho mi ngi gi n bn mt e-mail ngay t trong trang Web ca bn! Mc ch Sau bi hc ny bn c th:
Thm mt on cui (stylized footer) vo cui trang Web.
60
To mt lin kt siu vn bn gi e-mail
Bi hc Lu : Nu bn khng c ti liu t nhng bi hc trc bn c th download ngay by gi. Mt c im ng gi ca nhng trang Web l "footer" cui ca mt trang cung cp thng tin v tc gi v ti liu, c th l ngy c cp nht cui cng, cng nh l gi ti tc gi mt thng bo bng e-mail. y chnh l ni t tag address m trong khi vn bn c in trong dng mi di kiu ch nghing. Tht l mt tng hay trong footer c mt m t ngn gn, thng tin v quan h gia nhng trang Web ca bn. Mt vi thng tin hu ch l:

Tiu hay ch ca trang hin thi. Ngy n c to ra v cp nht. Ch quyn thch ng. Tn v e-mail cho tc gi ca trang Web. Tn v lin kt siu vn bn ti ngun gc/t chc.
Nh l mt v d, bn hy nhn footer cui mi trang Web ca ti liu hng dn ny. Trong qu trnh sng to ra nhng kiu ring ca bn, hy nhn th nhng trang Web khc thu thp thm nhng kin. Bt chc vn l cch tt nht tin b! Dng HTML ca tag address trng ging nh sau :
<address> text text text text text text text text text text text text text text text text text text </address> Lu rng tt c nhng HTML khc bn trong tag address u hp l, v th chng ta c th sa i n vi nhng tag in m, ngt dng v mt tag lin kt siu vn bn: HTML <address> <b>Page Title</b><br> Last Updated February 31, 1999<br> Web Page by Alan Levine (levine@maricopa.edu) <br> <a href="http://www.mcli.dist.maricopa.edu/"> Maricopa Community Colleges</a><br> </address> Kt qu Page Title Last Updated February 31, 1999 Web Page by Alan Levine (levine@maricopa.edu) Maricopa Community Colleges
By gi, gi s mt ngi no ang c trang Web ca bn v mun gi cho bn mt li ph bnh v trang Web ca bn. H s phi vit ra a ch e-mail, np mt chng trnh khc, v gi cho bn mt thng bo. C th gi e-mail t trong web browser ca bn c khng? c ch, hu ht cc web browser hin nay u c th lm iu ny! Cch lm iu ny l to mt lin kt siu vn bn vi loi l mailto trong URL (hy xem li bi 8b). To mt lin kt siu vn bn nh sau:
61
<a href="mailto:levine@maricopa.edu">send an e-mail to alan</a> Khi nhn vo dng ch send an e-mail to alan, Web browser s m ra mt mn hnh bn c th son mt thng bo v gi n n cho ti. Hn na, bn cn c th thm mt dng ch mc nhin (subject) cho thng bo e-mail: <a href="mailto:levine@maricopa.edu? subject=hi from lesson 12"> send an e-mail to alan</a> Hy th i! Hy gi cho ti mt thng bo! send an e-mail to alan Lu rng bn c th lm cho bt k mt dng ch (hay hnh nh) no hot ng nh l mt lin kt siu vn bn. V vy trong v d va ri, chng ta s sa i HTML c mt a ch internet to lin kt cho vic gi e-mail. HTML <address> <b>Page Title</b><br> Last Updated February 31, 1999<br> Web Page by Alan Levine <A HREF="mailto:levine@maricopa.edu"> (levine@maricopa.edu)</A> <br> <a href="http://www.mcli.dist.maricopa.edu/"> Maricopa Community Colleges</a><br> </address> Kt qu Page Title Last Updated February 31, 1999 Web Page by Alan Levine (levine@maricopa.edu) Maricopa Community Colleges
V cui cng chng ti ngh rng bn cng nn t URL ca trang vo trong footer. Ti sao vy? Khi mt ai in ra trang Web ca bn nhng cha vit li hoc lu li URL trong bookmark, c URL trn trang giy cho php mt s tham kho bng tay. Ch vic iu chnh v d trn mt cht (hy ch on HTML ny di tag <address>...</address>): <address> <b>Page Title</b><br> Last Updated February 31, 1999<br> Web Page by Alan Levine <A HREF="mailto:levine@maricopa.edu"> (levine@maricopa.edu)</A> <br> <a href="http://www.mcli.dist.maricopa.edu/"> Maricopa Community Colleges</a><br> </address> <p> <tt> URL: http://www.mcli.dist.maricopa.edu/tut/ </tt> Page Title Last Updated February 31, 1999 Web Page by Alan Levine (levine@maricopa.edu) Maricopa Community Colleges URL: http://www.mcli.dist.maricopa.edu/tut/
By gi n lc thm mt footer vo trang file HTML ca bn. i vi v d ny, chng ti gi s rng bn l "Lorrie Lava" mt Nh nghin cu ni la ti Big University (hon ton t do nu bn mun a thng tin ca bn vo v tr di y): 1. M tp tin HTML index.htm trong trnh son tho ca bn. 2. Ti cui trang Web (nhng trn nhng tag </body></html>), thm: 3. 4. <HR> 5. <address><B>Volcano Web</B> <br> 6. created by Lorrie Lava,
62
7. 8. 9. 10. 11. 12. 13. 14. <A HREF="mailto:lava@pele.bigu.edu"> lava@pele.bigu.edu</A><br> Volcanic Studies, <A HREF="http://www.bigu.edu/">Big University</A><p> <TT>last modified: April 1, 1995</TT> </address> <p> <tt>URL: http://www.bigu.edu/web/index.htm</tt> Lu : Chng ta s dng mt vi tag HTML m c xt n trong cc bi trc. Cng nn lu n tag <p> cui trang; iu ny chc chn rng dng cui ca vn bn lun lun c thy r. 15. Lu tr v Reload tp tin HTML.
Kim tra li cng vic ca bn So snh ti liu ca bn vi v d mu. Nu ti liu ca bn trng khc vi mu, hy xem li vn bn bn nhp trong trnh son tho. Xem li Xem li nhng ch sau: 1. Tag address dng lm g? 2. Tag address phi cui mt trang phi khng? 3. Lm th no bn to mt tag gi e-mail n bn? hoc n mt ngi khc? hoc cng vi dng ch ? Thc tp t do Thm mt danh thip a ch cng vi lin kt e-mail vo ti liu HTML ca ring bn. 13. Blockquote ! Vn cn mt tag HTML n gin khc sp xp li vn bn ca bn: Tag <blockquote> hi cc tag <p> v <br> "Chng ta lm g y?". Cc tag ny tr li "Khng r lm, nhng anh rt khc bit so vi chng ti!" Mc ch Sau bi hc ny bn c kh nng:

Chn mt khi vn bn c trnh by tht vo trong so vi phn thn vn bn. p dng nhng tag nh kiu bn trong mt vn bn c blockquote.
Bi hc Lu : Nu bn cha c ti liu t nhng bi hc trc, hy download ngay by gi. Theo cch vit truyn thng, mt on trch dn ca ba hoc nhiu cu c lm ni bt so vi on vn bn chnh bng cch trnh by nh mt khi vn bn c tht vo bn trong
63
(indented block of text). HTML cng c kh nng ny bng cch s dng tag <blockquote>....</<blockquote>:
<blockquote> "This is a long quotation from a very famous person. Since it is so long and interesting, it should really be set off from the rest of the text. This indicates clearly that the quote is from someone other than the writer." </blockquote> c nhn thy nh sau : "This is a long quotation from a very famous person. Since it is so long and interesting, it should really be set off from the rest of the text. This indicates clearly that the quote is from someone other than the writer." By gi chng ta s p dng tt c nhng g ca HTML chng ta hc trc y vo bn trong tag <blockquote>, chng hn nh trong v d sau y: <blockquote> <H2>A Manifesto</H2> This is a <B>long</B> quotation from a <A HREF="http://www.mcli.dist.maricopa.edu/alan/"> very famous person</A>. Since it is so long and interesting, it should really be <pre> set off</pre> from the rest of the text. <p> <I>This indicates</I>: <ul> <li>clearly that <li>the quote is from <li>someone other than the writer. </ul> </blockquote> cho kt qu nh sau: A Manifesto This is a long quotation from a very famous person. Since it is so long and interesting, it should really be set off from the rest of the text. This indicates:

clearly that the quote is from someone other than the writer.
Chng ta hy thm mt on trch dn vo trang Volcano Web. Chng ta s s dng blockquote trong phn ca nh t nhin hc ngi La m Pliny, ngi chng kin s hot ng li ca ni la Vesuvius vo nm 79 sau cng nguyn.
64
1. M tp tin HTML index.htm trong trnh son tho. 2. Bn di mc <h1>Volcano Web</h1>, thm nhng dng sau : 3. 4. <BLOCKQUOTE> 5. <B><I> 6. "Nature raves savagely, threatening the lands" 7. </I></B><br> 8. -- <A HREF="http://magic.geol.ucsb.edu/~fisher/pliny.htm"> 9. Pliny the Elder</A>, who died of asphyxiation after 10. observing the destruction of Pompeii by the 11. 79 A.D. eruption of Mount Vesuvius. 12. </BLOCKQUOTE> Ch : hy xem cch chng ta s dng kt hp c in m v in nghing (xem bi 5) lm sng ln on trch dn. Cch sang dng mi vi tag <br> (xem bi 4). Chng ta cng to siu lin kt cho "Pliny the Elder" n mt web site khc c nhiu thng tin hn v Pliny v cc quan st ca ng ta. Cng nn ch cch tag <blockquote> thm du ngt on trc v sau khi vn bn. V cui cng, Cc CH (ging nh bn ang xem) m chng ti s dng trong cc bi u dng n tag <blockquote>! 13. Lu tr v Reload tp tin HTML.
Kim tra li cng vic ca bn So snh trang ca bn vi v d mu. Nu ti liu ca bn trng khc vi mu, hy xem li vn bn bn nhp trong trnh son tho. Xem li Xem li nhng vn sau : 1. Tag <blockquote> dng lm g? 2. Ti sao khng cn tag <p> trc mt blockquote? Thc tp t do Hy to kinh nghim vi vic s dng tag <blockquote> trong trang Web ca bn. ng c ngh rng tag ny ch s dng cho vic trch dn. N c th kh hiu qu lm cho s trnh by trang web ca bn thm a dng. Tag <blockquote> l mt trong cc cch lm cho nhiu trang web khng phi l nhng on vn di dng v v. Mt vi tc gi s dng hai (hoc nhiu hn) tag <blockquote> lng vo nhau to ra hiu ng cha l. V d nh: <BLOCKQUOTE> <BLOCKQUOTE> <BLOCKQUOTE>"Oh, for more tags," he lamented. <p>Replied she, "Remember, dear, that while HTML may be limited in terms of control over page layout, there is a great deal of potential in creatively use
65
of the number of tags." </BLOCKQUOTE> /BLOCKQUOTE> </BLOCKQUOTE> c hin th nh sau: "Oh, for more tags," he lamented. Replied she, "Remember, dear, that while HTML may be limited in terms of control over page layout, there is a great deal of potential in creatively use of the number of tags." 14. Gp li (Lumping) hay Phn mnh (Splitting) Bn lm c mt home page! Mt vic ln! (Nhng ny bn! y mi ch l cng vic ging nh Hercule thi!) BY GI, nhng ngi bn ca ti i, y l lc chuyn mt "trang" vn bn di thnh nhng on thng tin ca "web" c ni vi nhau. Mc ch Sau bi ny, bn c th:

Chuyn mt trang web n thnh mt chui cc trang c lin kt vi nhau To ra mt trang mu (template) cho nhiu trang web Xy dng cc c tnh hoa tiu (navigational feature) ni nhiu trang web li vi nhau
Bi hc Lu : Nu bn cha c ti liu t nhng bi hc trc, hy download ngay by gi. Bn lm mt ngi gp li hay l mt ngi chia mnh? Khng phi? Hay c hai? t chc thng tin, i lc tt hn ht l "gp" chng li vi nhau; i lc tt hn ht li l "chia" chng thnh cc phn ring bit. Ko ln xung trong cc trang web di thng to ra s chn nn. Khi di, mt trang web cn tn nhiu thi gian np t mng xung nu so snh vi vic chia n thnh nhng trang nh hn. Trong nhiu trng hp, bn c th xc nh nhng im lun l "chia" thng tin thnh nhiu trang web. Tuy nhin, iu ny khng c mt cng thc chung, v kin cng khng ging nhau. Bn nn to s cn bng gia cc trang bng cch chia ni dung thnh cc phn u nhau trnh cho ngi c phi click qu nhiu khi mun n mt ni dung no . Cng l mt iu quan trng khi xy dng cc lin kt siu vn bn hay cc manh mi d nhn thy bn trong trang web gip ngi c tm c thng tin cn thit. Trc y chng ta va to c mt trang web vi mt lin kt n mt trang ngn hn. Trong bi 8d chng ta to ra mt danh sch cc lin kt nh l mt mc lc ni chng n cc anchor c t tn cho cc phn khc nhau ca bi Volcano Web. S phn on theo cch nh vy c th c xem l cc im ngt phn mnh mt trang n di thnh cc trang con. Cho n gi chng ta to ra mt th mc gi l volc trong c cha hai tp tin HTML (trang bi hc index.htm v trang th hai msh.htm). Chng ta cng to ra mt th mc th hai l pictures gi cc tp tin hnh nh.
66
By gi chng ta s phn chia tp tin Volcano Web n thnh mt chui cc trang web c lin kt vi nhau nh trong s ny. im vo ca n l trang mc lc/ba ti index.htm trong c lin kt n tt c cc phn khc ca bi hc:

Introduction [intro.htm] Volcano Terminology [term.htm] Volcanic Places in the USA [usa.htm] Volcanic Places on Mars
[mars.htm] Research Project [proj.htm]
Mi phn ca bi hc s lin kt ngc li phn mc lc v trang trc ca n. Cng nn ch n lin kt hai chiu gia usa.htm v msh.htm Ch : hon thnh bi hc ny, chng ta cn to thm mt s tp tin mi v cng phi thc hin nhiu ln thao tc chp/dn t tp tin bn ang lm vic. Hy chc chn rng bn bit r cch chuyn qua li gia cc chng trnh v ca s ti liu khc nhau trn my ca bn. iu u tin chng ta cn lm l to mt tp tin index.htm mi, c s dng lm trang "ba" ca bi Volcano Web: 1. Trc ht to mt bn sao ca tp tin index.htm v t tn l old.htm hay l mt tn no tng t nh vy. 2. By gi m li tp tin index.htm nguyn gc trong trnh son tho. T im ny tr i, y s l bi mi ca chng ta. 3. Chng ta s s dng li hnh nh, li m u, v bng mc lc trong trang u tin ny. lm iu , chng ta s xa i cc phn cn "ct" ra khi trang web. Xa b on t Introduction n References, tc l mi th trong: <hr> <h2><A NAME="intro">Introduction</A></h2> A <b>volcano</b> is a location where magma, or hot melted rock from within a planet, reaches the surface. : v : <dt>Lipman, P.W. and Mullineaux (eds). (1981) <dd><I>The 1980 Eruptions of Mount St. Helens, Washington. </I>U.S. Geological Survey Professional Paper 1250. </dl> Bn c th so snh tp tin HTML ca bn vi v d mu bit trang nn nh th no ti im ny. 4. By gi tm on vn c "In this Lesson..." Trc y, chng ta dng cc lin kt siu vn bn n anchor c t tn (tc l <a name="term">..</a>) trong cng mt ti liu (xem bi 8a). By gi chng ta s iu chnh cc lin kt anchor ny lin kt n mt trang web khc (m chng ta s to ra di y).
67
Tm on c dng: <B>In this Lesson...</B> <ul><i> <li><A HREF="#intro">Introduction</A> <li><A HREF="#term">Volcano Terminology</A> <li><A HREF="#usa">Volcanic Places in the USA</A> <li><A HREF="#mars">Volcanic Places on Mars</A> <li><A HREF="#project">Research Project</A></i> </ul> v iu chnh thnh: <B>In this Lesson...</B> <ul><i> <li><A HREF="intro.htm">Introduction</A> <li><A HREF="term.htm">Volcano Terminology</A> <li><A HREF="usa.htm">Volcanic Places in the USA</A> <li><A HREF="mars.htm">Volcanic Places on Mars</A> <li><A HREF="proj.htm">Research Project</A></i> </ul> Bn c th so snh tp tin HTML ca bn vi v d mu bit trang nn nh th no ti im ny. Ch : Bn cn hiu r s khc nhau gia mt lin kt c dng: <a href="#quest">go to questions</a> vi mt lin kt khc c dng: <a href="quest.htm">go to questions</a> Vic k tip cn lm l to cc tp tin ring cho cc phn trong bi ca chng ta. S d dng hn khi trc ht chng ta to ra mt tp tin mu (template file) ri sau hiu chnh cho cc trang web khc nhau. 1. Trong trnh son tho, to mt tp tin mi gi l temp.htm 2. Trong tp tin ny, nh vo on HTML sau (nu mun, bn c th chp li mt tp tin v d mu): HTML <html> <head> <title>XXXXXXXX</title> </head> <body> <H5>Volcano Web / <A HREF="index.htm">Index</A> / <A HREF="xxxx.htm">back</A> / <A HREF="xxxx.htm">next</A></H5> Ghi ch HEAD: Trong phn u ca mi ti liu, XXXXXXXX l tn ca phn
NAVIGATION: Ti nh mi trang chng ta s dng mt tiu nh (h=5) to ra cc lin kt hoa tiu (navigation link). im Index tr v trang ba chnh. Lin kt next v back n trang k tip v trang trc. Bn s phi in li tn tp tin thch hp cho xxxx.htm. Hy ch cch ny to ra mt hng dn nh cho mi trang web.
68
<h2>XXXXXXXX</h2> : : : <hr> <ADDRESS> <b><A HREF="index.htm"> Writing HTML</A> : XXXXXXXX </b><p> created by Lorrie Lava, <A HREF="mailto:lava@pele.bigu.edu"> lava@pele.bigu.edu</A> <br> Volcanic Studies, <A HREF="http://www.bigu.edu/"> Big University</A><p> <TT>last modified: April 1, 1995</TT> </ADDRESS> <p> HEADER: S dng tiu mc 2 cho cc mc ca trang.
ADDRESS FOOTER: Ch cch footer ch ra tn ca trang chnh (vi mt lin kt ngc v n) cng vi on vn ch ra tn ca phn hin ti XXXXXXXX. t tn trang y to ra mt hng dn nh cho thy v tr ca n trong cu trc web m chng ta to ra.
URL: Cn iu chnh dng ny ch ra <tt>URL: http://www.bigu.edu/web/xxxxxxxx.htm URL ca ti liu tng ng vi tn tp tin </tt> xxxxxxxx.htm ca n <p <body> </html> 3. n y, bn cn to ra 5 bn sao ca tp tin mu v thc hin cc iu chnh thch hp trong tng mu: Tn Tp tin intro.htm
Mc Introduction
Ghi ch V y l mc u tin, xa i dng <A HREF="xxxx.htm">back</A> trong phn hoa tiu
term.htm usa.htm mars.htm proj.htm
Volcano Terminology Volcanic Places in the USA Volcanic Places on Mars Research Project V y l mc cui cng, xa i dng <A HREF="xxxx.htm">next</A> trong phn hoa tiu
4. By gi, hy m tp tin index.htm c (m chng ta i tn l old.htm) trong trnh son tho. Vi mi tp tin mi to, bn cn chp li (copy) on HTML pha di mc <h2>...</h2> v dn (paste) vo tp tin mi tng ng. Ch rng trong Volcanic Places in the US v Research Projects c hai u c cc mc con s dng tiu <h3>...</h3>.
69
5. Cui cng, bn cn iu chnh lin kt trong tp tin msh.htm. Trc y, n quay v mt anchor c t tn trong bi chnh (mc Volcanic Places in the US) cn by gi n cn lin kt n tp tin usa.htm. M tp tin msh.htm trong trnh son tho v iu chnh: 6. <a href="usa.htm"> 7. <img src="../pictures/left.gif" alt="** "> 8. Return to <i>Volcano Web</i></a> Cng cho tng ng, bn nn iu chnh li phn footer nh sau: <HR> <ADDRESS> <B><A HREF="index.htm"> Volcano Web</A> : <A HREF="usa.htm"> Volcanic Places in the USA</A> : Mount St. Helens</B> <p> created by Lorrie Lava, <A HREF="mailto:lava@pele.bigu.edu"> lava@pele.bigu.edu</A><br> Volcanic Studies, <A HREF="http://www.bigu.edu/"> Big University</A><p> <TT>last modified: April 1, 1995</TT> </ADDRESS> <p> <tt>URL: http://www.bigu.edu/web/msh.htm</tt> <body> </html> Kim tra li cng vic ca bn So snh trang ca bn vi v d mu. Nu ti liu ca bn trng khc vi mu hay cc lin kt siu vn bn hot ng khng ng, hy xem li vn bn bn nhp trong trnh son tho. Trong bi ny chng ta to ra nhiu tp tin do vy rt d c li do nh sai. Xem li Cc vn nn xem li vi bi ny: 1. Cho bit vi tin li ca cc trang web ngn so vi mt trang web di? 2. iu g xy ra nu chng ta khng sa li lin kt siu vn bn trong tp tin msh.htm? 3. Cc c tnh hoa tiu m chng ta a vo bi l g? Thng tin b sung V nguyn tc, trang web ca bn s d c hn khi cc lin kt siu vn bn ng nht vo ni dung ca vn bn quanh n. iu ny tr nn quan trng hn khi bn to ra nhiu trang web c cc siu vn bn lin kt ln nhau. Hy so snh: In the spring of 1980, most people living in the vicinity of Mount St. Helens took heed to the scientists warning about an impending volcanic eruption. However, several were insistent on staying in their homes and sadly perished in the May 18 event. In that same year, measured increases in seismic recording devices caused scientists to warn of a possible event in Long Valley, California, and order a large evacuation of the Mammoth resort area. However, no
70
such event occurred, and residents were angrily resentful for what they perceived as a false warning that caused great economic loss. vi In the spring of 1980, most people living in the vicinity of Mount St. Helens took heed to the scientists warning about an impending volcanic eruption. (Click here to see a picture of Mount St. Helens) However, several were insistent on staying in their homes and sadly perished in the May 18 event. In that same year, measured increases in seismic recording devices caused scientists to warn of a possible event in Long Valley, California, and order a large evacuation of the Mammoth resort area. (Click here to see a seismometer) However, no such event occurred, and residents were angrily resentful for what they perceived as a false warning that caused great economic loss. Cc dng "Click here..." khng lm ph hy ngha ca dng vn bn, nhng on lin kt "here" khng c quan h g vi mc lin quan. Nh l mt ngh, trnh vit cc on tng t nh "click here to return to the home page". Thay v vy ch vit r mt lin kt, tc l <a href="home.htm">Home Page</a> - bn thn vic click c hiu ngm khi s dng web browser. Thc tp t do Hy xem li trang web bn ang thc hin. N c qu di khng? C th c nhng on m bn c th "tch" trang khng? Hy to ra trang ba/mc lc v cc lin kt thch hp cho phn lin kt hoa tiu gia chng. Sau to mu cho cc "trang con". By gi hy yu cu cc bn hay ng nghip ca bn xem cc trang web ca bn. H c thch cch "phn" trang hay "ghp" nhm ca bn khng? H c d dng bit c cch xem thng tin ca bn khng? 15. HTML "tiu chun" v "nng cao" Hy xt n mt thc t ca HTML --nhiu iu bn c th thc hin hn nhng chng cng lm cho HTML tr thnh khng tha "tiu chun" hn. Mc ch y l mt bi hc ngn v khng cn thc tp g ht! Sau bi ny bn c kh nng:
Quyt nh khi no dng nhng c im ca HTML m c th khng hot ng c cho tt c web browser.
Bi hc Trong bi 0, chng ta gii thiu v HTML "tiu chun". Trong nhng bi hc tip theo trong ti liu ny s ch cho bn cch s dng mt s tag HTML khc m c th khng thy c trn tt c cc Web browser. y chng ta ch xem qua mt vi tng trc khi bn bc vo nhng bi sau. Trc ht chng ta hy xem s qua v lch s ca n. Cch y kh lu ("trong mt thin h rt xa?")... vo khong nm 1990, World Wide Web l h thng c xy dng trn vn bn c nn tng da trn ngn ng HyperText Markup Language. Cc tag v s thng dch ca n da trn nhng chun (HTML 1.0) t bi mt t chc quc t (international committee). y chnh l cha kha cho "Web" tr nn "ph bin" (world wide) bi v theo nhng tiu chun ny, thng tin hon ton c lp vi h thng my tnh dng xem n.
71
Ngay c khi NCSA Mosaic xut hin mt cch t ngt vo nm 1993 nh l mt web browser th u tin, nhng tiu chun vn c da trn k t v c cp nht thnh HTML 2.0. Web tr nn ph bin, ph bin rng ri, ph bin mt cch in r. Nhng nh lp trnh bt u xy dng nhng Web browser c cung cp nhng chc nng ging nh Mosaic (bi v h phi h tr tt c cc tnh cht ca HTML c trong tiu chun quc t). Mt nhm ngi trong c cc nh pht trin Mosaic thnh lp mt cng ty mi c biu tng l "Mozilla" ("Mosaic" + "Godzilla"?) v to ra mt web browser mi tn l NetScape. Netscape nhanh hn so vi NCSA Mosaic. Tuy nhin, n pht trin trong i chng v n cha ng tt c nhng tnh cht ca HTML 2.0 CNG vi nhiu tag thm vo cho nhng th m bn khng th thc hin c trong HTML 2.0. Phn "m rng" (extensions) hay "nng cao" ny (enhancements) l nguyn nhn (v vn l mt nguyn nhn) ca s tranh ci ln gia nhng ngi lm ra chun HTML v nhng ngi thch cc c im m Netscape thm vo. Mozilla Netscape ht sc ph bin v nhanh chng chim lnh 3/4 th trng Web browser. By gi, trong HTML, bn c th t mu nn cho trang ca bn, to bng, t vn bn quanh hnh nh, v cn nhiu na. Bn cng tng nhn thy nhng trang web c cu "This page optimized for NetScape". Nhiu Web browser khc bt u h tr nhng c tnh ca Netscape "HTML 2.0+". Cng vi cc dch v gip trc tuyn c m ra trn Web, th trng browser ngy cng tr nn ng c (v hn n). y ban quc t i u vi mt tnh th lng nan, cng vi vic th trng tr nn rng ln l vic i hi nhng tag "khng chun" tr nn mt phn ca HTML. Khi nhng qui tc cho HTML 3.0 c pht trin, h bt u a vo hu ht (nhng khng phi l tt c) nhng tag c Netscape gii thiu. Tuy vy, qu trnh chun ho xem ra l qu chm i vi nhiu ngi. V cuc chin tr nn ln hn khi vo nm 1996 Microsoft gii thiu nhng tag HTML ring bit ca h. Nh vy HTML c tr thnh mt m hn n khng? bit thm thng tin v s cnh tranh ny, chng ti ngh bn tham kho n HTML 3.0 and NetScape. Nhng hot ng gn y nht c ngh l ca HTML 3.2, m trong cha ng hu ht cc c im c h tr bi nhng nh sn xut ln trn th trng hin nay, l Netscape v Microsoft. Cc pht biu gn y nht l s tho lun v cc chun nn c h tr trong tt c cc browser. Nhng nhng iu th c ngha g vi bn? l iu quan trng nht, khi bn l mt nh thit k trang Web, bn cn phi bit loi browser no m ngi c s phi s dng. C l bn l mt thy gio trong mt trng hc hoc bn ang lm vic trong mt cng ty m tt c mi ngi ang s dng cng mt loi browser no . Vy th bn c chc chn rng cc tag c bit bn ang s dng l khng c vn khng. Tuy nhin, thng thng bn vn "xut bn" (publishing) cc trang Web vo mt Internet server m khng c kin g v loi browser s c s dng. Bn c th thm nhng khuyn co c bit trong trang Web ca bn. Bn c th tun theo mt cch cht ch vi nhng chun c h tr rng ri bi tt c cc Web browser. Ngay c khi bn s dng nhng tag c bit, cng c vi cch thng dng khng gy ra s tn ph no cho nhng ngi s dng cc browser khc.
72
iu quan trng nht ... khng phi l vic quan tm n trang trng nh th no trn h thng ca bn! Ngi c c th c nhng Web browser khc nhau, c nhng phng ch khc nhau, s dng nhng tham kho mu khc nhau, kch c mn hnh khc nhau.. tt c nhng th c th gy ra s hin th khc nhau v kch thc, v dng trnh by so vi my ca bn. Nu bn c th th trang Web trn cc my tnh khc nhau, hy phng to v thu nh ca s ca browser, chuyn i phng chun. Tht l may mn, thit k nguyn thy ca HTML rt thong v d tha th cho mt s cc lut - nu mt browser bt gp mt tag m n khng bit x l hay trnh by nh th no, n d dng b qua cc tag ny. V d nh, xem nh l browser ca ti c h tr tag <drip>...</drip>. Ngha ca n l on vn bn trong s xut hin bnh thng ri sau t t "ri" xung y ca trang (ngi bin tp - TI TH LM CHO N I LN!), mt hiu ng l lng cho trang web ca ti: <drip><H2 align=center>Welcome</H2></drip> to my sloppy home page!. Look out for the puddles! hot ng ca n to ra mt s duyn dng trn browser t to ca ti. Trn browser ca bn khng c h tr c tnh ny, bn s thy: Welcome to my sloppy home page!. Look out for the puddles! Khi browser ca bn khng h tr tag ny n ch hon ton bng qua tag m khng to ra s ph hy hay thng bo sai no. l mt tng thng minh, ng khng? Khi chng ta tip tc cc bi hc nng cao ny, cc hng dn hi di v phc tp hn. Nhng bn s tip tc, ng ch! Xem li 1. Ti sao bn phi quan tm n cc tiu chun ca HTML ? 2. Trng hp no bn cm thy thoi mi khi s dng HTML khng chun? 3. iu g xy ra nu mt web browser bt gp mt tag m n khng hiu ? 16. Mu sc v Cu trc cho Nn ng bao gi cho trang Web ca bn c mt mu xm xt! Hy t m u S c hoc b tr mt cu trc nn no "pha sau" phn vn bn. Mc ch Sau bi hc ny bn c kh nng:

To mt mu nn c nh cho trang Web. Tnh c m di h thp lc phn cho mt gi tr mu. Thay i mu ca vn bn v nhng mc lin kt siu vn bn. To mt cu trc nn t mt tp tin hnh nh.
73
Bi hc Lu : Nu bn khng c ti liu ca bn t bi hc trc, hy download ngay by gi. Nn (background) ca trang Web - chnh l phn nn. Khi chng ta thm nhng mu sc khc nhau hoc ngay c nhng mu nn, bn nn nh n khng nh hng n vic c ca phn vn bn. Vi cc trang trong ti liu hng dn ny, chng ti s dng mt mu trng c nh cho nn to ra s r rng v phng nn khng gy ra nh hng n ni dung. Vi mt vi b sung cho tag <body> (c gii thiu trong bi 1), bn c th to ra mu nn cho trang Web ca bn. Nhng trc khi chng ti ch cho bn cch to ra mu sc thch th nh vy, chng ta phi ni s qua cc gi tr mu RGB (red green blue) v s th hin ca chng di dng s "thp lc phn". "Hex-Dec" v c bn v mu sc Trong mt web browser, bn c ty s dng 256 mu ca h thng to mu cho vn bn v nn. Mi mt mu c xc nh da trn cc gi tr Red- Green- Blue (RGB) ca n, ba s ny c gi tr t 0 n 255, mi mt s th hin cng ca thnh phn mu Red, Green, hay Blue cho mu ang xt. Gi tr ln nht ca c ba (R=255, G=255, B=255) cho ra mu trng v gi tr nh nht (R=0, G=0, B=0) cho ra mu en. Tt c nhng mu khc c biu din bi cc b ba RGB khc nhau. Tip theo y l mt phn phc tp. Thay v xc nh mt mu theo dng tng t nh "102,153,255" th mi s c chuyn t dng biu din theo c s h mi (l nhng s m hng ngy dng cc k s 0, 1, 2, 3, 4, 5, 6, 7, 8, 9) sang dng biu din theo c s h thp lc phn (dng cc k s 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F). Ti sao vy? V my tnh d s dng v d hiu s h thp lc phn hn. V vy i vi mu cho v d trn, chng ta s vit trong dng s thp lc phn l: "6699FF". Trong v d ny, "66" l tr ca mu Red, "99" l tr ca mu Green, v "FF" l tr ca mu Blue. Sau y l mt vi v d tr h thp lc cho cc mu khc nhau: Mu mu xx oo xx FFCCCC xx oo xx 33FF66 xx oo xx 663300 xx oo xx 000077 xx oo xx EEEEEE xx oo xx 444444 M 16 xx oo xx 3300FF xx oo xx AA0000 xx oo xx 9900FF xx oo xx FFFF00 xx oo xx 888888 xx oo xx 000000
Nhng, ng lo s v vic chuyn i h thng s m! C rt nhiu cng c trong bn ch cn click vo mt bng mu v chng s cho bit cch biu din h thp lc phn. Rt nhiu cng c mu nh vy c th tm thy trong Yahoo. Nhng tt hn th na, by gi rt nhiu browser h tr nhanh chng cho 16 mu sau (chng l cc mu ca VGA trn Windows):
74
xx oo xx aqua xx oo xx blue xx oo xx gray xx oo xx lime xx oo xx navy xx oo xx purple xx oo xx silver xx oo xx white Mu nn c nh Ch : Trc ht bn c th th kim tra bit c browser ca bn c h tr nhng mu nn c nh khng (solid color background). Vi Volcano Web ca chng ta, iu u tin chng ta s lm l thm mt mu nn vo tp tin index.htm. Trong HTML thm mt mu nn c nh cn iu chnh tag <body> nh sau: <body bgcolor=#XXXXXX> trong XXXXXX l dng biu din thp lc phn (c ch nh bi du # pha trc) ca mu c ch nh. Nu bn nh li, hnh chng ta s dng trong phn m u l hnh ni la trn mt nn en - v vy nu chng ta cng s dng mu en cho mu nn ca trang Web, hnh nh s rt ha hp vi trang Web ca chng ta: 1. M tp tin index.htm trong trnh son tho. 2. Tm tag <body> v thay i n thnh : <body bgcolor=#000000> 3. Lu tr v Np tp tin HTML trong Web browser ca bn Nu bn thc hin chnh xc nhng iu trn, browser ca bn s i mu nn thnh mt mu en c nh. Nhng bn c th nhn thy l bn khng th nhn thy c vn bn ca bn. Ti sao vy? , bi v mu mc nh cho ch cng l mu en, do bn bit rng bn c nhng ch mu en trn mt nn en! May mn thay, chng ta c thm nhng kh nng khc trong tag body thay i mu ca ch v nhng siu vn bn: <BODY BGCOLOR=#XXXXXX TEXT=#XXXXXX LINK=#XXXXXX VLINK=#XXXXXX> trong cc gi tr XXXXXX s xc nh:

xx oo xx black xx oo xx fuchsia xx oo xx green xx oo xx maroon xx oo xx olive xx oo xx red xx oo xx teal xx oo xx yellow
BGCOLOR = mu sc ca nn (mc nh l mu xm - grey) TEXT = mu ca ch trong thn vn bn (mc nh l en - black) LINK = Mu sc ca mt mc lin kt siu vn bn (mc nh l xanh - blue) VLINK = Mu sc ca mt mc siu vn bn xem (mc nh l tm - purple)
By gi bn c th thm cc gi tr mu ny thay i tag thnh: <BODY BGCOLOR=#000000 TEXT=#EEEEBB LINK=#33CCFF VLINK=#CC0000> Tag ny s cho nn mu en, ch mu vng, siu vn bn mu xanh dng sng, v siu vn bn xem mu .
75
Ch : th t ca cc mc trong tag <BODY> khng quan trng. By gi bn nn sa i cc tag <BODY> trong tt c cc tp tin HTML ca bn (cch nhanh v d dng l chp v dn v d trn cho mi tag <BODY>). Cu trc nn Lu : Trc ht c l bn hy th kim tra xem web browser ca bn c h tr cu trc nn khng. Mu sc c nh to thm vi bin i khc nhau cho trang Web - nhng bn c th i xa hn na bng cch thm cu trc nn (textured background). Bn s dng mt tp tin hnh nh nh (dng GIF hay JPEG) v browser s "lp" vo trang web cc bn sao lin tc nhau ca hnh nh ny. Vi iu bn cn phi nh l:

Kch c tp tin: Vic thm mt cu trc nn i hi mt hnh nh na phi c download. Chng ti ngh tp tin hnh nh nn c kch thc nh hn 10k. Kh nng c: Hy chn la! Rt nhiu tp tin sp t nn lm cho ngi c cm thy kh nhn thy ch. C gng s dng nhng mu rt sng (vi ch rt ti) hoc nhng mu tht ti (vi ch rt sng) - c ngha l hy chn tng phn cao gia nn v ch. Hiu qu: trong cc web browser u tin c s dng mu nn, trang s cha xut hin cho ti khi no mu nn c np xung - do s kt ni chm, ngi c c th phi ch hnh nh nn mt thi gian di trc khi nhn thy c mt thng tin no trn mn hnh! Tuy nhin, cc web browser sau ny download nn cui cng do trc tin trang s c mu xm, tip theo l vn bn v hnh nh xut hin, v cui cng l nn. HY GHI NH! Thi gian np trang s chm hn na (nu xt vi cc loi modem th h c) khi trang ca bn c c t server.
Trong phn ny ca bi hc, chng ti s to c hi bn c kinh nghim vi ba hnh nn khc nhau. Dng HTML cho vic thm mt tp tin hnh nn l : <body background="bgfile.gif"> trong bgfile.gif l tn ca tp tin hnh nh (c th s dng URL y hay tng i - xem bi 8a). Di y chng ta s lit k tn ca ba tp tin nn. Bn c th download tng ci (nu bn khng bit cch download hnh nh t mt trang web, xin tham kho bng tr gip Download Hnh nh) ca chng ti. Bn nn ct cc tp tin hnh nh trong directory/folder pictures trong vng lm vic ca bn: Blue Tile [bg.gif] Mt mu hnh vung c lp li: HTML: <body background="../pictures/bg.gif"> Tp tin v d c nn Blue Tile Volcano Text [vtext.gif] Vn bn ln c mu xm sng: HTML: <body background="../pictures/vtext.gif"> Tp tin v d vi nn l Volcano Text Legal Paper [paper.gif] Giy c k hng HTML: <body background="../pictures/paper.gif"> Tp tin v d vi nn l Legal Paper Bn cng c th sa i mu ca vn bn trong trang Web nh chng ti lm trong v d trn. Ly v d, nu bn mun ch mu cho nn Giy c k hng, chng ta c th vit li HTML sau: <body background="../pictures/paper.gif" text=##AA0000> s cho chng ta ch trn giy vng. Ch : C nhiu web browser c kh nng thay i mu mc nh - i khi mt ngi s dng c th c s a thch mt tp cc mu m nhng mu ny s lm nh hng n tp mu bn chn. V vy, chng ti ngh khi s dng mt tag nn bt k
76
no (mu c nh hay tp cu trc nn) th bn cng nn bao gm cc mu "bnh thng" - mu en cho phn ch vn bn, mu xanh dng cho lin kt siu vn bn v mu tm cho cc lin kt xem : <BODY TEXT=#000000 VLINK=#660099 LINK=#0000EE> Nu bn mun tm vi v d v cc tp tin cu trc nn, hy xem Kai's Power Tips Background Archives Kim tra li cng vic ca bn So snh trang ca bn vi v d mu. Nu trang ca bn trng khc vi mu hay cc lin kt siu vn bn hot ng khng ng, hy xem li vn bn bn nhp trong trnh son tho. Chng ta s gi li cc tp tin mu vi mu en c nh m chng ta thm vo phn u ca bi ny. Xem li Xem li nhng vn sau: 1. 2. 3. 4. Lm th no thm mu nn ng nht cho trang Web? Ti sao m mu li c vit trong dng m kh hiu nh #EE66CC? Lm th no thm mu cho vn bn trong trang Web? Gia <body bgcolor=#FFFFFF> v <body background="tiles.gif"> khc nhau nh th no? Thc tp t do Thm mt mu nn c nh hay mt tp tin cu trc nn cho (cc) trang web ca bn. Hi vi ngi khc xem h c c c vn bn vi mu nn bn chn khng. 17. ng lm cho ch nhp nhy! Bn mun to mt s ch c n tng trong trang Web ca bn phi khng? Hy da vo ni dung ca n hn l to s ch bng cch lm cho n tr nn nhp nhy mt cch r tin... Mc ch Sau bi hc ny bn s:
Khng bao gi s dng tag nhp nhy (blink tag).
Bi hc Ln u tin khi NetScape a ra web browser ca h, h thm vo mt tag vi mc ch l nhn mnh nhng t hoc nhng cm t quan trng. Tag ny lm cho chng nhp nhy trn trang Web. Cu trc ca tag nhp nhy khng khip ny nh sau :
77
<blink>Wow</blink> l mt du hiu m nhng ngi c kinh nghim xem trn web s ni "trnh xa trang ny i - ngi vit ra trang web ny ch mi hc HTML t ming giy bc ko cao su." Khng ni nhiu n cc l do rt n n v vic s dng n, hy trnh tt c nhng g ging nh sau:
y l mt vng NNG TRN Web
Tr phi bn mun xy dng mt dng nhch nhc cho cc trang web... Vng, y l quan im son tho ca chng ti. C tip tc v Hy tranh ci. 18. Trang tr cho Vn bn Bn khng ch c th thm mu sc cho nn m cn c th thm mu sc, i KCH THC, v ngay c phng ch cho cc phn xc nh ca vn bn! Bn phi tr ht bao nhiu y? Nhng HY CH MT CHT! By gi bn c th vit ch trn v di nh vi nhng cng thc ha hc v ton nh sau: CO2 + SO4-2 3x2 - 2y-1/2 = 4z Mc ch Sau bi hc ny bn c th:

Thay i kch c ca mt phn vn bn c ch nh trong mt trang Web. Thay i mu sc ca mt phn vn bn c ch nh trong mt trang Web. To ch vit trn v di cho vn bn trong mt trang Web. Ch nh phng cho nhng phn vn bn trong mt trang Web.
Bi hc Lu : Nu bn cha c ti liu t nhng bi hc trc, bn c th download ngay by gi. Vi HTML do NetScape v HTML 3.0 gii thiu, bn c thm mt vi kh nng nh dng na cho vn bn ca bn. c bit nht l, bn c th nh nhng kch c ch cng nh mu sc khc nhau cho vn bn. Khi s dng mt cch ng n, s nh dng vn bn c th lm ni bt cch trnh by trang Web. Khi s dng mt cch t do, chng c th to ra cc trang web trng rt hn n. Bn cng c th to ra ch vit trn v di c s dng trong biu thc ton hc, cng thc ha hc, hoc nh du cc ghi ch. Trong bi ny chng ti s gii thiu vi bn nhng tnh cht ny cng vi vi v d m bn s s dng sa i trang Volcano Web. Trc ht c th bn mun tham kho n trang kim tra phng ch bit c web browser ca bn c h tr nhng tag c s dng trong bi hc ny khng.
78
Kch c phng ch Tag <font size=N>...</font> do NetScape gii thiu c th c s dng t li kch c ca phng ch t N l 1 (nh nht) ti 7 (ln nht) vi c 3 l kch c bnh thng: C phng = 1 C phng = 2 C phng = 3 -- c ch thng C phng = 4 C phng = 5 C phng = 6 C phng = 7 Cn nh rng kch c tht ca ch cn ph thuc vo phng ch trn my tnh do ngi s dng chn cho web browser ca h -- bn ang iu chnh li kch c tng i so vi phng mc nh m h chn. Ch : Nu mt web browser khng h tr cho tag <font>, bn c th th nhng tag ca HTML 3.0: <BIG>...</BIG> <SMALL>...</SMALL> s cho bn t loi kch c hn nhng vn c th hu ch cho nhng browser . Dng HTML cho tag chnh c phng l: <font size=N>blah blah blah</font> trong N=1 ti 7. Tag phng c th c s dng chung vi nhng tag nh kiu ch khc (bi 5) hay bn trong cc tag tiu (bi 3). Mt cch s dng khc ca tag font l to ra mt s thay i kch c tng i: <font size=+1>blah blah blah</font> <font size=-2>blah blah blah</font> tc l, cc gi tr +N hoc-N cho bit dch chuyn (offset) so vi kch c phng hin ti. Chng thng c s dng cng vi mt tag khc: <basefont size=5> thay i c phng c bn (base font size) t gi tr mc nh ca n l 3 thnh mt gi tr khc. C th bn phi lm iu ny trong mt trang Web m c hu ht cc vn bn vi c ln hn hoc nh hn c phng chun. Vi cch ny, nu bn cn iu chnh mt phn nh ca trang, bn c th s dng tag chnh c phng tng i nh trn. im mnh ca vic s dng tag chnh c phng tng i (v d nh size=+2) so vi tag chnh c phng tuyt i (v d nh size=5) l chng ta c th d dng thay i c ca TT C vn bn trong trang bng mt tag <basefont>. Ch : tag <basefont> khng c tag ng li - n vn l c phng c s cho n khi mt tag <basefont> khc xut hin. Trc ht chng ta s s dng tag chnh c phng sa i tiu ca trang m u: 1. M tp tin index.html trong trnh son tho ca bn. 2. Trc y chng ta s dng mt tag tiu <h1>..</h1> nh dng cho tiu cho trang ny. By gi chng ta s s dng vi tag chnh c phng thay th to mt tiu c c hn hp. Thay i dng:
79
<h1>Volcano Web</h1> thnh: <p> <B><font size=+4>V</font><font size=+3>OLCANO WEB</font></B> Hy nhn cn thn chng ta lm g - V by gi tng c ln 4 n v so vi gi tr c bn, cn nhng k t khc (by gi di dng ch hoa) tng ln 3 n v so vi gi tr c bn. iu ny to thnh mt cch trnh by ca CH HOA NH (SMALL CAPS). Cng lu rng chng ta thm tag <b>...</b> lm tiu ni bt ln. V cui cng, bi v chng ta khng s dng tag tiu tag ny t to ra s ngt dng nh mc nh, chng ta phi thm tag <p> trong tiu trn p buc n xung dng mi (sau ny bn s thy khng cn v dng HTML k tip l mt <BLOCKQUOTE> v n t thm s ngt dng ca n - xem bi 13). 3. Tip theo, chng ta mun lm li ch thch ca Pliny ni bt hn mt cht na, v th chng ta s tng n ln thm mt c na: 4. <B><I><font size=+1>"Nature raves savagely, threatening the lands"</font></I></B><br> 5. Lu tr v Np li trong Web browser ca bn. Trc khi tip tc, chng ta s s dng tag chnh c phng sa i hai trang Web khc trong bi ca chng ta. l trang Volcanic Places in the USA (tp tin usa.html) v Research Project (tp tin proj.html) ang s dng tag <h2>...</h2> cho tiu chnh v tag <h3>...</h3> cho cc phn mc con. n trnh son tho v thay i mi s xut hin ca tag: <h3>blah blah blah</h3> thnh : <p> <font size=+1><B>blah blah blah</B></font><br> Lu l tag <p> lun lun thm mt dng mi cho vn bn theo sau v tag <br> to mt ngt dng (khng c dng trng) cho vn bn theo sau. Bn c nhn thy c s khc nhau gia vic s dng tag <font> v tag <hN> cho phn tiu khng? S nh dng khc nhau ny rt tinh t, nhng n cung cp cho bn - tc gi ca trang Web - mt cch nhn mi trong vic thit k trang Web. Nhng nh rng nu browser ca ngi c khng h tr tag chnh c phng, tt c chng s c nhn thy c ch bnh thng. Hai Phng php to Tiu <h3>...</h3> ...before the next great innovation that rocked the world of rotten milk. History of Longhorn Cheese <p><b><font size=+1> ...</font></b><br> ...before the next great innovation that rocked the world of rotten milk.
History of Longhorn Cheese Longhorn cheese was first discovered by Longhorn cheese was first discovered by Alister Longhorn in 1754 when he... Alister Longhorn in 1754 when he... Mu ca font
80
Trong bi 16, chng ti gii thiu nhng tag nh mu sc cho vn bn trong ton b trang Web cng vi vic biu din gi tr mu trong HTML. Bn cng c th thm nhng thuc tnh vo tag nh mu mt on vn bn xc nh bng cch s dng m h thp lc phn hoc tn ca 16 mu: <font color=red>...</font> <font color=#993459>...</font> <font color=lime>...</font> <font color=#002200>...</font> <font color=navy>...</font> <font color=#193467>...</font> Chng ta s khng i su vo nhng rc ri ca tag mu, nhng nh l mt v d, chng ta s i mu ca on VOLCANO WEB m chng ta xt trong trang ba. Nu bn vn cn nh, chng ta s dng mu cho vn bn ca trang ny l mu vng v chng ta s thay mu khc cho phn tiu : 6. M tp tin index.htm trong trnh son tho. 7. iu chnh dng cha ch VOLCANO WEB thnh nh sau: 8. <B><font size=+4 color=#FF66FF>V</font> <font size=+3 color=#DD0055>OLCANO WEB</font></B> 9. Lu tr v Reload trong Web browser. Ch : Cc thuc tnh size v color c th trong cng mt tag <font>. y kt qu lm cho ch "V" c mu vilt sng v tng c hn mt n v so vi cc ch khc. Ch trn v ch di (Superscript and Subscript) HTML 3.0 cho php bn vit cc biu thc ton hc, cng thc ha hc, hoc nhng biu thc khc vi superscript v/hay subscript. Nhng tag mi ny nng cao/h xung on vn bn "script" mt na dng v gim bt c ca n mt n v. Dng HTML cho nhng tag ny l: Superscripts / Subscripts HTML <sup>...</sup> <sub>...</sub> Kt qu superscript subscript
By gi chng ta s s dng cc tag ny cho trang Introduction ca chng ta: 10. M tp tin intro.htm trong trnh son tho. 11. Trc ht chng ta s s dng subscript vit mt vi cng thc ha hc. Sau cu cui cng ca on 2 ("Compare the history of human beings...'), thm cu s dng subscript sau: 12. Volcanoes were important contributors to 13. the early earth atmosphere by releasing 14. gases such as nitrogen (N<sub>2</sub>), 15. carbon dioxide (CO<sub>2</sub>), and ammonia (NH<sub>4</sub>). 16. By gi chng ta s s dng superscripts biu th mt tr lp phng. Bn di bng c to ra bng tag <pre>...</pre>, thm cu sau: 17. Note that volcanic eruptions that occurred
81
18. 19. 20. before historic times were several orders of magnitude larger (more than 1000 km<sup>3</sup> in erupted volume) than ones observed by humans.
21. Nu bn ch ct th ba ca bng, trc y chng ta s dng "km^3" ch ra "km3". Mc du on vn ny bn trong tag preformat, chng ta vn c th s dng tag superscript. i: Volume in km^3 thnh Volume in km<sup>3</sup> Dng phng (font face) Trong tiu chun HTML 3.2 hin nay c thm vi thng s cho tag ch ra dng phng dng cho vic hin th. Chc nng ny c th khng lm vic trn nhiu browser, v th bn c th th kim tra xem browser ca bn c h tr i dng phng khng. HTML cho vic ch nh mt dng phng l: <font FACE="font1,font2">some text Nu browser ca ngi c h tr c tnh font FACE v h c mt danh sch cc phng c ci t sn trn my tnh ca h, th vn bn s c hin th theo dng phng c ch nh. Ngc li, browser s s dng cng mt phng vi phn cn li ca trang web. Nu bn quyt nh s dng mt dng phng, bn nn s dng cc dng phng chun hoc l chc chn rng cc my tnh ca ngi dng ci t thm dng phng . By gi chng ta s iu chnh tag cho trang tiu t "Volcano Web" xut hin mt dng font khc: 22. M tp tin index.htm trong trnh son tho. 23. Sa i dng cha on vn VOLCANO WEB thnh: 24. <B><font face="Arial,Helvetica" 25. size=+4 color=#FF66FF>V</font> 26. <font face="Arial,Helvetica" size=+3 color=#DD0055>OLCANO WEB</font></B> 27. Lu tr v Reload trong Web browser . Ch : Chng ta ch nh cho browser chn phng Arial vi Windows, Helvetica cho Macintosh v/hay cc my tnh cha c ci t phng Arial. S dng tnh cht ny ca HTML vi s thn trng! Ngh thut s dng dng phng khc hon ton vi s lm dng chng! Kim tra li cng vic ca bn So snh trang web ca bn vi v d mu bit dng hin th ca n. Nu trang ca bn khc vi mu hay cc lin kt siu vn bn hot ng khng ng, hy xem li vn bn bn nh trong trnh son tho.
82
Xem li Xem li nhng ch sau: 28. Lm th no thay i c v mu sc ca mt phn vn bn trong mt trang Web? 29. Bn c th s dng dng HTML no nu browser khng h tr tag <font>...</font>? 30. Lm th no bn to c subscript trong HTML? 31. Lm th no to c mt khi vn bn c trnh by di mt dng phng xc nh? Thng tin b sung Di y l hai kiu na c cho php trong HTML 3.2 v c th ang c chp nhn trong web browser ca bn. Cc tag nh kiu HTML Kt qu <u>This is Underline...</u> <strike>This is Strike-through...</strike> This is Underline This is Strike-through
V cui cng, c mt im t nh v mu sc ca vn bn m mt lc no bn c th thy s hu ch. Trong bi 16, chng ta hc cch s dng tag <body> to mu cho nn, vn bn, v cc lin kt. Nu chng ta t mu mt khi vn bn vi tag <font> , n s ch tc ng ln phn thn vn bn, m khng tc ng ln cc lin kt siu vn bn - c ngha l chng vn c gi mu xanh mc nh hoc l mu c xc nh trong tag <body>. Mu Lin kt Mc nh HTML <font color=red> It was a long time after the sad death of <A HREF="http://www.longhorn.org/sir/"> Sir Longhorn</A> that someone was able to recreate his formula. Kt qu It was a long time after the sad death of Sir Longhorn that someone was able to recreate his formula.
Chng ta c th thay i mu ca lin kt siu vn bn bng cch t cc tag bn trong mt lin kt anchor. Lu rng iu ny ch c hiu qu cho cc lin kt cha c xem; mt khi bn thy trn mn hnh trang tng ng ca lin kt, n s c t bi mu lin kt xem, tc l mu tm mc nh: Mu Lin kt c Sa i <font color=red> It was a long time after the sad death of <A HREF="http://www.longhorn.org/sir/"> <font color=#228800>Sir Longhorn</font></A> that someone was able to recreate his formula. Thc tp t do It was a long time after the sad death of Sir Longhorn that someone was able to recreate his formula.
83
Th tm kinh nghim vi cc tag <font>...</font> trong trang web ring ca bn. Cng nn xem th n hot ng nh th no bn trong cc tag <hN>...</hN>. Tm kinh nghim vi vic s dng cc phng khc nhau, ngay c vi cc phng lung tung! Tm vi ch m bn ngh rng bn c th cn superscript hay subscript. Mt v d c th l cc ch thch - bn c th nh m s hay k t cho chng, sau lm cho mi ch thch thnh mt lin kt siu vn bn n mt vng ch thch (hay n mt trang ring c cc ghi ch chung):
... and after Linberger and Gordon's 1963 study12 on the effects of temperature on cheese maturation, Gange and Walters (1964)13 as well as Colby (1969)14 reached the same conclusion. blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
19. Easy Hard Rules Bn c b lng tng khng? y ch l mt trong cc thng s to ra phn chia nhng phn khc nhau ca mt trang Web. Mc ch Sau bi hc ny bn c th:

To nhng ng hard rule vi dy mng khc nhau. To nhng ng hard rule vi chiu rng khc nhau. To nhng ng hard rule khng c bng m.
Bi hc Lu : Chng ta s khng sa i trang Web ca chng ta trong bi hc ny - v th bn c th xem li v quyt nh s dng n nu bn mun c kinh nghim vi n. Trc ht bn c th xem qua trang kim tra xem web browser ca bn c h tr nhng tag trong bi ny hay khng. S m rng u tin cho HTML ca Netsacpe l cung cp mt vi thng s nh dng cho tag <hr> (Hard Rule) - xem bi 4). Mc nhin, NetScape Browser t ng hin th mt ng thng m ba chiu, c bng m trng tt hn l mt ng thng trong cc web browser trc . dy ca ng Kh nng u tin to ra nhng ng c dy khc nhau bng cch s dng thng s: <hr size=N> trong N l dy ca ng tnh bng s im. Chng ta hy xem vi v d thy c hiu ng (trong trang c nn trng nh trang ny hiu qu khng c r lm): <hr size=2> same as <hr> :
84
<hr size=8> :
<hr size=20> :
Chiu rng ca ng Thng s nh dng khc cho tag <hr> l iu chnh rng ca ng - khng cn thit phi tri n ngang ra ton b trang. Bn c th lm iu ny bng cch s dng dng sau: <hr width=X> <hr width=Z%> Trong X l s im ca chiu rng cn Z l t l phn trm ca trang hin hnh. Thng thng, chng ti ngh s dng dng t l phn trm v n s t iu chnh theo rng ca s browser ang c ngi c s dng (vi ngi s dng mn hnh c phn gii cao trong khi cc ngi khc ch c mn nh 13"). Sau y l mt vi v d (hy xem cch chng ta thm lun tag size): <hr width=80 size=10> :
<hr width=80% size=10> : Ch : Th co vo v/hay dn ra rng ca s web browser ca bn thy s khc nhau gia vic ch nh chiu rng theo s im tuyt i (width=80) so vi ch nh theo t l phn trm ca trang web (width=80%) <hr width=40% size=10> :
<hr width=5% size=10> :
Khng c bng Cui cng, c th c trng hp m bn khng mun bng ba chiu trn tag <hr>. N ch n gin nh sau: <hr width=80% size=6 noshade> :
Xem li Xem li nhng ch sau : 1. Lm th no thay i dy ca mt hard rule? 2. Lm th no thay i chiu rng ca mt hard rule? 3. Thuc tnh noshade bn trong tag <hr> to ra hiu ng g? Thc tp t do
85
To kinh nghim bng mt vi thuc tnh cho <hr> trong cc trang web ca bn. 20. Xt thm v S Chnh l Ti sao bn ch bn tri? ... khi no bn qua bn phi? hay l vo gia? Mc ch Sau bi hc ny bn c th:

To vn bn c canh vo gia trang. Sp xp chung hnh nh v vn bn. To vn bn c chnh l bn phi.
Bi hc Ch : Nu bn cha c ti liu t nhng bi hc trc, bn c th download by gi. Bn cng c th xem qua trang kim tra bit web browser ca bn c h tr nhng tag c s dng trong bi ny hay khng. S chnh l vn bn Khi m Web ngy cng pht trin, ngy cng xut hin thm cc yu cu cho vic iu khin cch trnh by ca trang. Mt trong nhng mun l nh dng vn bn sao cho n c sp xp ngay gia trang, hn l ch c canh l bn tri. y l mt trong nhng c tnh khc hn gia NetScape so vi HTML "tiu chun". NetScape gii thiu tag m rng <center>...</center> - tag ny sp xp mi th bn trong n ngay gia trang web. Dng nh n gy ra n tng hn? Vy th, bn hy ni vi mt nh lm chun rng s chnh l hng l mt c tnh. Dng HTML tng qut cho s sp xp vo gia l mt s bin i ca tag <p>: <p> blah blah blah <img src="file.gif"><br> blah blah </p> Lu rng y c tag ng </p>. Mi ln bn mun canh gia mt vi on vn bn, bn nh du chng bng <p align=center>...</p> Hin nay, hu ht cc loi browser v chun HTML 3.2 u h tr tag <center>...</center> ca NetScape. Nh rng nu browser khng h tr mt tag, n ch vic b qua. thy c hiu qu ca vic canh gia, hy so snh trong v d di y: Khng canh Gia Cheese In History Cheese was been there for many major events
86
When Magellan sailed through the narrow Straits, he was eating cheese. When the Allied troops landed in Europe, cheese was there. When Neil Armstrong stepped onto the moon, he had just had finished a cheese snack.
return to the cheese home page c canh Gia Cheese In History Cheese was been there for many major events When Magellan sailed through the narrow Straits, he was eating cheese. When the Allied troops landed in Europe, cheese was there. When Neil Armstrong stepped onto the moon, he had just had finished a cheese snack.
return to the cheese home page
Gi y chng ta s sa i trang ba ca chng ta (index.htm) bng cch s dng tag canh gia trn danh sch cc phn ca bi hc. Chng ta cng s to mt vi thay i ci thin s trnh by ca n. 1. M tp tin index.htm trong trnh son tho. 2. Tm phn sau: 3. <B>In this Lesson...</B> 4. <ul> 5. <i> 6. <li><A HREF="intro.htm">Introduction</A> 7. <li><A HREF="term.htm">Volcano Terminology</A> 8. <li><A HREF="usa.htm">Volcanic Places in the USA</A> 9. <li><A HREF="mars.htm">Volcanic Places on Mars</A> 10. <li><A HREF="proj.htm">Research Project</A> 11. </i> </ul> v thay th n bng on HTML sau: <p align=center> <font size=+1> <i> <A HREF="intro.htm">Introduction</A><br> <A HREF="term.htm">Volcano Terminology</A><br> <A HREF="usa.htm">Volcanic Places in the USA</A><br> <A HREF="mars.htm">Volcanic Places on Mars</A><br> <A HREF="proj.htm">Research Project</A><br> </i>
87
</font> </p> 12. Lu tr v Np li trong Web browser ca bn. Ch : Hy nhn mt cch cn thn nhng thay i m chng ta thc hin. Ton b phn ny c bao quanh trong tag <p align=center>..</p> ca s chnh l. Danh sch khng c th t m chng ta xy dng trong bi 6 c canh vo gia mt cch l ch - cc du bullet s b ln xn. V th chng ta s b i cu trc <ul> <li> ... <li> ... </ul>. Cc tag <br> cui mi dng s to mt ngt dng. V cui cng, chng ta thm mt tag <font>...</font> tng c vn bn. Nu mun bn c th s dng tag <center>...</center> thay cho tag <p align=center>...</p> Bn c th mun so snh tp tin HTML ca bn i vi v d mu bit c n nn xut hin nh th no. Mi tag tiu (header) <hN>...</hN> u c th canh gia bng cch thm mt thuc tnh nh sau: <hN align=center>blah blah blah</hN> By gi chng ta s s dng thuc tnh ny canh gia ta ca mi trang Web: 1. M tt c file HTML ca bn trong trnh son tho. 2. Vi mi mt trang, sa cha li vn bn xut hin gn nh trong tag <h1> hay tag <h2> theo nh v d di y cho tp tin intro.htm, thay i t: <h2>Introduction</h2> thnh <h2 align=center>Introduction</h2> 3. Lu tr v Reload trong Web browser ca bn. Ch : Cng c mt thuc tnh chnh l cho tag <hr> ph hp vi cc thng s khc m chng ta xem trong bi 19 "Easy Hard Rules". Khi bn ch nh mt chiu rng ngn hn cho mt hard rule, bn cng c th ch nh canh l cho n v bn phi hay bn tri (theo mc nh cc hard rule c canh vo gia trang): <hr size=8 width=60% align=right> s to ra: trong khi s dng canh l tri <hr size=8 width=60% align=left> s cho kt qu l: S sp xp gia Hnh nh v Vn bn Trong bi 7a chng ta xt cch t hnh nh vo trong trang Web ca chng ta v thy rng c th c mt dng vn bn c sp xp trn hoc cui mt hnh nh. Tuy nhin, cho n tn by gi, chng ta cha th c mt khi vn bn v mt hnh nh inline nm cnh nhau.
88
Vi vic thm thuc tnh align vo tag <img> gi y bn c th c ch nh hnh nh t sp v bn tri hay bn phi ca trang. Nhng hn th na chng ta c th c cc vn bn HTML khc "lp y" nhng khong trng quanh hnh. HTML thc hin iu ny l: <img src="filename.gif" align=right> <img src="filename.gif" align=left> Hy so snh hai v d sau y: khng c thuc tnh align align=bottom
Cheese In History Cheese was been there for many major events When Magellan sailed through the narrow Straits, he was eating cheese. When the Allied troops landed in Europe, cheese was there. When Neil Armstrong stepped onto the moon, he had just had finished a cheese snack. c vn bn i theo align=left Cheese In History Cheese was been there for many major events When Magellan sailed through the narrow Straits, he was eating cheese. When the Allied troops landed in Europe, cheese was there. When Neil Armstrong stepped onto the moon, he had just had finished a cheese snack. Hy co dn ca s browser ca bn thy cc hiu ng trong trang ca bn vi vic sp xp hnh nh/vn bn. Thm mt iu lu na. C khi vn bn hoc nhng mc khc c sp cng vi hnh nh kh ngn v bn mun y vn bn k tip xung bn di hnh nh. C mt thuc tnh cho tag <br> xo i s sp xp, v d nh: <br clear=left> <br clear=right> <br clear=all> s "xa" bt k s sp xp no c ci t trong tag <img> trc . Chng ti ngh bn lun lun s dng nhng tag ny bi v s sp xp s ph thuc rt nhiu vo phng ch trn browser ca ngi c v rng ca s browser ca h. By gi chng ta s tr li trang index.htm nh dng li phn m u. Hnh trng c v p, nhng n li chim qu nhiu hng trc khi cc vn bn c trnh by. Chng ta s s dng s sp xp hnh nh/vn bn t vn bn k cn bn hnh nh. 1. M tp tin index.htm trong trnh son tho. 2. Tm phn sau: 3. <img alt="A Lesson on:" src="../pictures/lava.gif"> 4. <p> 5. <B><font size=+4 color=#FF66FF>V</font>
89
6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. <font size=+3 color=#DD0055>OLCANO WEB</font></B> <BLOCKQUOTE> <B><I><font size=+1>"Nature raves savagely, threatening the lands"</font></I></B><br> -- <A HREF="http://magic.geol.ucsb.edu/~fisher/pliny.htm"> Pliny the Elder</A>, who died of asphyxiation after observing the destruction of Pompeii by the 79 A.D. eruption of Mount Vesuvius. </BLOCKQUOTE> In this lesson you will use the Internet to research information on volcanoes and then write a report on your results. v thay n bng: <img alt="A Lesson on:" src="../pictures/lava.gif" align=left> <B><I><font size=+1> "Nature raves savagely, threatening the lands" </font></I></B><br> -- <A HREF="http://magic.geol.ucsb.edu/~fisher/pliny.htm"> Pliny the Elder</A>, who died of asphyxiation after observing the destruction of Pompeii by the 79 A.D. eruption of Mount Vesuvius. <p> <B><font size=+4 color=#FF66FF>V</font> <font size=+3 color=#DD0055>OLCANO WEB</font></B> <p> In this lesson you will use the Internet to research information on volcanoes and then write a report on your results. <br clear=left> 19. Lu tr v Np li trong Web browser ca bn. Ch : Mi th gia tag <img... align=left> v tag <br clear=left> s c sp chung vi hnh nh - hnh bn tri v phn HTML trong cc v tr trng cn li. Chng ta cng cu trch dn ln u gy s ch . Vi dng trnh by ny, tag <blockquote> khng cn c hiu qu na, do vy n c xa b. Nu mun, bn c th so snh tp tin HTML ca bn vi v d mu bit ti y nn trnh by nh th no. Chnh l (Justification)/Sp xp (Alignment) vn bn Chng ta s thm mt tag sp xp na l tag "divisions" <div>...</div>, c gii thiu trong HTML 3.0. Tt c vn bn bn trong tag ny c chnh l da vo thuc tnh align: <div align=left>...</div> <div align=right>...</div> <div align=center>...</div> Lu rng thuc tnh center c hiu qu ging nh tag <center>...</center> ca NetScape. By gi chng ta s s dng tag ny lm cho on vn bn trong phn ghi ch m u ca trang ba c chnh l bn phi ca trang:
90
1. M tp tin index.htm trong trnh son tho. 2. Thm tag <div> and </div> nh di y: 3. <div align=right> 4. <B><I><font size=+1> 5. "Nature raves savagely, threatening the lands" 6. </font></I></B><br> 7. -- <A HREF="http://magic.geol.ucsb.edu/~fisher/pliny.htm"> 8. Pliny the Elder</A>, who died of asphyxiation after 9. observing the destruction of Pompeii by the 10. 79 A.D. eruption of Mount Vesuvius. 11. <p> 12. <B><font size=+4 color=#FF66FF>V</font> 13. <font size=+3 color=#DD0055>OLCANO WEB</font></B> </div> 14. Lu tr v Reload trong Web browser ca bn. Kim tra li cng vic ca bn So snh trang Web ca bn vi v d mu xem n nn xut hin nh th no. Nu trang ca bn khc vi mu hay cc lin kt siu vn bn khng hot ng ng, kim tra li vn bn bn nh vo trong trnh son tho. Xem li Xem li nhng ch sau : 1. Lm th no cho mt phn no trong trang web ca bn c canh vo gia? 2. Cch no ng nht lm cho mt hnh nh c sp xp bn l phi ca trang Web? 3. Lm cch no bn to ra mt vn bn c chnh l phi? 21. Bng (Table) Hy to mt bng...
Mt khi Bn
To
ra mt bng
...v hon tt cuc cch mng ha trn nhng trang Web thng thng
ban
s khng
Quay
B a o g i Li!
Mc ch Sau bi hc ny bn s c th:

Thit k mt bng vi nhng hng v ct vn bn trnh by theo dng li trn trang Web. Vit HTML to s trn ln phc tp gia hnh nh v vn bn. Vit HTML cho mt bng n trnh by cc ct d kin. To mt bng vi nhng c mu khc nhau.
Bi hc
91
Ch : Nu bn cha c ti liu t nhng bi hc trc, bn c th download ngay by gi. Bn cng c th xem trang kim tra bit web browser ang s dng c h tr cho nhng tag trong bi ny khng. Bng c gii thiu trong HTML 3.0 v c NetScape pht trin thm to ra mt hng thit k khc cho trang Web. Chng cung cp mt cu trc t chc nhng phn t HTML trong trang thnh dng "li" (grid). Mt trong nhng ng dng r rng nht ca bng l khi bn phi nh dng... mt bng theo tng ct! Nhng bng cng m ra mt chn tri mi cho nhiu kh nng trnh by trang khc nhau. Dng HTML cho bng trng c th rt phc tp - nhng chng ta s bt u mt cch n gin vi vic xy dng mt vi bng n gin trong bi Volcano Web. i vi nhng ngi mi bt u, hy nh k khi nim sau: Cc bng c xy dng bt u t phn t cao nht bn tri, tip theo xy dng cc phn t ca hng u tin, xong chuyn n hng th hai, xy dng cc phn t ca hng th hai.... --> --> --> --> --> --> ___________________________| | --> --> --> --> --> Chng ta gi mi li trong mt bng l mt phn t (cell) Nhng tag c bn ca Bng HTML cho cu trc c bn ca mt bng c trnh by nh di y: HTML <table border=1> <tr> <td>Row 1 col 1</td> <td>Row 1 col 2</td> <td>Row 1 col 3</td> </tr> <tr> <td>Row 2 col 1</td> <td>Row 2 col 2</td> <td>Row 2 col 3</td> </tr> <tr> <td>Row 3 col 1</td> <td>Row 3 col 2</td> <td>Row 3 col 3</td> </tr> </table> Thuc tnh border=1 trong tag <table> ch th cho browser v mt ng vin quanh bng vi dy l mt im. Lu rng mi mt hng c xc nh bi tag Table Row l <tr>...</tr>, ri sau mi phn t trong hng c nh ngha bi tag Table Data l <td>...</td>. Trong mi tag <td>...</td> c th c bt k loi tag no ca HTML m chng ta s dng trong ti liu ny - tiu , nh kiu, lin kt siu vn bn, hnh nh inline, v.v.... Trong tag ny bn cn c th s dng mt vi loi thuc tnh iu khin s chnh l ca cc thng tin trong phn t : Kt qu
Row 1 col 1 Row 1 col 2 Row 1 col 3 Row 2 col 1 Row 2 col 2 Row 2 col 3 Row 3 col 1 Row 3 col 2 Row 3 col 3
92
Chnh l theo chiu ngang <td align=left> Sp xp tt c cc thnh phn v bn tri ca cell (y l thuc tnh mc nh) <td align=right> Sp xp tt c cc thnh phn v bn phi ca cell <td align=center> Sp xp tt c cc thnh phn vo gia cell
Chnh l theo chiu dc <td valign=top> Sp xp cc thnh phn t nh cell xung di <td valign=bottom> Sp xp cc thnh phn t di cell ln trn <td valign=middle> Sp xp tt c phn t gia ca cell (y l thuc tnh mc nh)
Bn c th kt hp cc thuc tnh ny li vi nhau: <td align=left valign=bottom> Dng HTML ny s hin th mt phn t vi cc thnh phn dc theo bn tri v t di ln. Cc Hng v Ct Bng v d trn trng rt n gin v vung vc - ba hng v ba ct. By gi hy xem chng ta lm c g khi s dng cc tag thuc tnh colspan v rowspan trong tag <td>...</td>. HTML <table border> <tr> <td>Row 1 col 1</td> <td align=center colspan=2> Row 1 col 23</td> </tr> <tr> <td>Row 2 col 1</td> <td>Row 2 col 2</td> <td>Row 2 col 3</td> </tr> <tr> <td>Row 3 col 1</td> <td>Row 3 col 2</td> <td>Row 3 col 3</td> </tr> </table> c ri, chng ta bit mt phn t m rng trong hai ct - gi y, chng ta s to mt phn t m rng trong hai hng. Hy nh rng HTML xy dng bng t bn tri, bng qua hng, ri xung di, ri bng qua... HTML Kt qu Kt qu ** Lu n thuc tnh cho phn t th hai ca hng u tin - n m rng ra thnh 2 ct. Chng ta cng chnh vn bn vo chnh gia ca phn t ny ny.
Row 1 col 1
Row 1 col 2-3
Row 2 col 1 Row 2 col 2 Row 2 col 3 Row 3 col 1 Row 3 col 2 Row 3 col 3
93
<table border=1> <tr> <td>Row 1 col 1</td> <td align=center colspan=2> Row 1 col 23</td> </tr> <tr> <td>Row 2 col 1</td> <td valign=top rowspan=2> Row 2 col 2</td> <td>Row 2 col 3</td> </tr> <tr> <td>Row 3 col 1</td> <td>Row 3 col 3</td> </tr> </table> Vn cn mt vi iu phi xt n, nhng chng ta tm ngng cc v d minh ha y thc hin cng vic trn trang Web ca chng ta. Mt bng d liu Trong trang Introduction ca chng ta c mt bng ("Volumes of Some Well Known Eruptions") m chng ta to ra ln u tin trong bi 9 bng cch s dng tag preformat <pre>...</pre>. Gi y chng ta s ci thin n bng cch s dng tag table. 1. M tp tin intro.htm trong trnh son tho. 2. Xo b mi th bn trong tag <pre>...</pre> v c chnh n. 3. Thay vo chnh ch bng: 4. 5. <table border> 6. <tr> 7. <th>Eruption</th> 8. <th>Date</th> 9. <th>Volume in km<sup>3</sup></th> 10. </tr> 11. 12. <tr> 13. <td>Paricutin, Mexico</td> 14. <td align=center>1943</td> 15. <td align=center>1.3</td> 16. </tr> 17. 18. <tr> 19. <td>Mt. Vesuvius, Italy</td> 20. <td align=center>79 A.D.</td> 21. <td align=center>3</td> Row 1 col 1 Row 3 col 1 Row 1 col 2-3 Row 3 col 3 Row 2 col 1 Row 2 col 2 Row 2 col 3
94
22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. 36. 37. 38. 39. 40. 41. 42. 43. 44. 45. 46. 47. </tr> <tr> <td>Mount St. Helens,<br>Washington</td> <td align=center>1980</td> <td align=center>4</td> </tr> <tr> <td>Krakatoa, Indonesia</td> <td align=center>1883</td> <td align=center>18</td> </tr> <tr> <td>Long Valley, California</td> <td align=center>pre-historic</td> <td align=center>>450 & <700</td> </tr> <tr> <td>Yellowstone, Wyoming</td> <td align=center>pre-historic</td> <td align=center>400</td> </tr> </table> Ch : Hy nhn dng HTML u tin. Tag Table Header l <th>...</th> c kt qu ging y nh tag <td>...</td> ngoi tr l mi vn bn trong n u c in m v tt c cc thnh phn ca n u t ng c canh gia. 48. Lu tr v Np li trong Web browser. Bn c th so snh vi bn mu xem n nn xut hin nh th no ti lc ny. Ch : Bng c th xem khng c r khi s dng nn mu en. 49. By gi hy thm mt vi th vo trong bng ca chng ta. 50. Mt vi browser cho php bn ch nh mt vi thng s cho cc ng to ra bng. Chng l cc thuc tnh ca tag <table>: <table border=X cellpadding=Y cellspacing=Z> trong X l chiu rng (tnh bng im) ng vin bn ngoi ca bng. Thuc tnh cellpadding cho bit c bao nhiu "khong trng" gia khi bn trong phn t v vch ngn - tr Y cng ln cng lm cho cc phn t (cell) ln hn do "n thm" (padding). Thuc tnh cellspacing cho bit rng (tnh bng im) ca nhng ng bn trong bng phn chia cc phn t. Hy sa tag <table> ca bn thnh: <table border=3 cellpadding=4 cellspacing=8> 51. Tag <caption> t mt chui vn bn (c chnh vo gia theo chiu rng) nh l tiu cho bng. Hy sa i nhng dng trong bng ca bn thnh: 52. <table border=3 cellpadding=4 cellspacing=8> 53. <caption><b><font size=+1> 54. Volumes of Some Well-Known Volcanic Eruptions</font></b></caption>
95
Bn c th lng vo trong tag <caption> cc HTML khc; nhng phi nh l tag ny phi nm trong tag <table>...</table>. 55. V tng s thch th, hy t mu on vn trong tag <th>...</th> thnh mu cam ( bit thm v t mu cho vn bn, xem bi 19). iu chnh phn HTML cho hng u tin thnh: 56. <tr> 57. <th><font color=#EE8844>Eruption</font></th> 58. <th><font color=#EE8844>Date</font></th> 59. <th><font color=#EE8844>Volume in km<sup>3</sup></font></th> </tr> 60. V hy di chuyn bng ny vo gia trang. Nu browser ca bn c h tr tag <center>...</center>, th ch cn bao quanh bng bng tag ny. bit thm v chnh l cho vn bn, xem lesson 20. 61. Lu tr v Np li trong web browser ca bn. Bn c th so snh vi v d mu bit bng ny nn nh th no. Vn tt ch, phi khng? 62. Cui cng, chng ta s thm mt ct v pha bn tri - chng ta mun ghp nhm cc ni la phun li trong lch s (bn hng u tin) v cc ni la thi tin s (hai dng cui). By gi chng ta s thm mt phn t rng bng cch thm <th></th> vo hng u tin - l do ca vic lm ny s c lm r hn trong nhng bc sp ti khi chng ta xy dng ct mi ny . 63. <tr> 64. <th></th> 65. <th><font color=#EE8844>Eruption</font></th> 66. <th><font color=#EE8844>Date</font></th> 67. <th><font color=#EE8844>Volume in km<sup>3</sup></font></th> </tr> 68. Chng ta n dng u tin v thm mt phn t u tin m phn t ny s m rng ra 4 hng: 69. 70. <tr> 71. <td rowspan=4> 72. <font color=#EE8844> 73. <i>eruptions<br> 74. observed<br> 75. by humans</i> 76. </font></td> 77. <td>Paricutin, Mexico</td> 78. <td align=center>1943</td> 79. <td align=center>1.3</td> 80. </tr> Ch : Chng ta thm mt vi tag <br> ct u tin ny khng tr nn qu rng. Bn c th t nh gi khi b qua nhng tag ny. 81. V trong hng th nm, chng ta thm mt phn t m n c m rng trong hai hng: 82. 83. <tr> 84. <td rowspan=2> 85. <font color=#EE8844> 86. <i>inferred<br> 87. by study<br> 88. of deposits</i> 89. </font></td> 90. <td>Long Valley, California</td>
96
91. 92. <td align=center>pre-historic</td> <td align=center>>450 & <700</td> </tr>
93. Lu tr v Np li mt ln na trong browser ca bn. Bn c th so snh vi bi mu bit kt qu lc ny nn nh th no. y l tt c nhng g chng ta s thm vo bng ny. Bng khng nhn thy hay Bng Ma Mt bng cng vi nhng ng vin th rt tin li nhng i khi chng ta mun to nn mt s trnh by dng li v khng mun c cc ng vin. Chng ta gi l cc bng "ma" (phantom) v ngi c khng nhn thy r rng l mt bng. Mt bng ma c xy dng theo cch ging nh bng m chng ta thc hin trn ngoi tr tag <table> c dng nh sau: <table> hoc <table border=0> Trn mt vi browser, khi khng c thuc tnh border s lm cho n hin th mt bng khng c bt k ng vin no. Trn vi browser khc, bn cn phi ci t border l 0 im to ra hiu qu ny. Nu bn xem li phn gn u ca trang ny, tht s n l mt bng ma m trong c mt phn t ca n li l mt bng c ng vin! Tuy vy, chng ta hy c tip tc. lm v d, chng ta s nh dng li tp tin usa.htm (Volcanoes in the USA) thnh dng c hai ct. Thay v to cc on vn c sp t thng ng da theo rng ca trang, chng ta s lm chng ging nh bn phc ha sau: XXXXX [tiu ] XXXXX [tiu ]
xxxxx xxxxx xxxx xxx xx x xxxx [hnh xxx xx xxxxx xx xx xxx xx x x xx xx lin xxxx xxxxx xxxxx xxxx xxxxx xx _______ kt x xxxxx xxx xxxxx | img | n hnh | | |_____| ln] xxx xx xx [siu lin kt n hnh ln] Lu rng ct bn phi cng c mt hnh nm k bn, v chnh l mt siu lin kt n mt nh ln trong mt ca s ring (xem bi 8e). 1. M tp tin usa.htm trong trnh son tho. 2. Tm phn sau y: 3. 4. <font size=+1><B>Mount St Helens</B></font><br> 5. On May 18, 1980, after a long period of rest, 6. this quiet mountain in Washington provided 7. <a href="msh.htm">detailed observations</a> on 8. the mechanics of highly explosive eruptions. 9. 10. <p> 11. <font size=+1><B>Long Valley</B></font><br> 12. This field seismometer measures earthquakes 13. associated with subsurface volcanic forces and
97
14. 15. 16. 17. 18. may help to predict future events. It sits on a plateau known as the "Volcanic Tableland" formed by a major eruption 600,000 years ago.<p> <a href="../pictures/seismo.jpg"> <img src="../pictures/stamp.gif"> -- [full size image] --</a> v thay th n bng on HTML sau: <table cellpadding=6> <tr> <td><font size=+1><B>Mount St Helens</B></font></td> <td colspan=2><font size=+1><B>Long Valley</B></font></td> </tr> <tr> <td valign=top>On May 18, 1980, after a long period of rest, this quiet mountain in Washington provided <a href="msh.htm"> detailed observations</a> on the mechanics of highly explosive eruptions. </td> <td valign=top> This field seismometer measures earthquakes associated with subsurface volcanic forces and may help to predict future events. It sits on a plateau known as the "Volcanic Tableland" formed by a major eruption 600,000 years ago. </td> <td valign=top><a href="../pictures/seismo.jpg"> <img src="../pictures/stamp.gif"></a> </td> </tr> <tr> <td colspan=3 align=right> <a href="../pictures/seismo.jpg"> -- [full size image] --</td> </tr> </table> Ch : Hy xem cn thn dng HTML y. Tht s chng ta s dng mt bng c 3 ct - on vn u tin (Mount St Helens) trong ct bn tri. Cn ct bn phi bao gm mt ct vn bn v mt ct khc c mt nh nh. Hng di cng c chnh l phi v m rng trong 3 ct c dng ni lin kt siu vn bn n mt hnh nh ging nh hnh thu nh ny nhng ln hn. 19. Lu tr v Np li mt ln na trong web browser. Chia on mt danh sch di Mt cch s dng khc na ca bng l i dng cho mt danh sch di (to bi tag list , xem bi 6). Danh sch c ko di theo trang, v rt l c gi tr nu chng ta c th s dng thm c phn bn phi ca trang. Hiu qu l s chuyn dng ca danh sch:
98
Danh sch Di Ct 1 Ct 2 <ul> <li> xxx xx <li> xxxx x <li> xxx x xxx </ul> <ul> <ul> <li> xxxxxx <li> xxxxxx thnh <li> xxxx xxxx <li> xxxx xxxx <li> xxx x xxxx <li> xxx x xxxx <li> xxx xxxxx <li> xxx xxxxx </ul> <li> xx x xxxxx <li> xxx xx <li> xxxx x <li> xxx x xxx </ul>
By gi chng ta s chia danh sch cc ti nguyn trong trang Resource Projects ca chng ta (tp tin proj.htm). 1. M tp tin proj.htm trong trnh son tho. 2. Tm danh sch <ul>...</ul> bn di tiu References v nhp nh sau : 3. 4. <table> 5. <tr> 6. <td valign=top> 7. <ul> 8. <li><A HREF="http://www.avo.alaska.edu/"> 9. Alaska Volcano Observatory</A> 10. <li><A HREF="http://vulcan.wr.usgs.gov/home.html"> 11. Cascades Volcano Observatory</A> 12. <li><A HREF= 13. "http://www.dartmouth.edu/pages/rox/volcanoes/elecvolc.html"> 14. The Electronic Volcano</A> 15. <li><A HREF="http://www.geo.mtu.edu/volcanoes/"> 16. Michigan Tech Volcanoes Page</a> 17. <li><A HREF="http://www.geo.mtu.edu/eos/"> 18. NASA Earth Observing System (EOS) IDS Volcanology Team</A> 19. </ul> 20. </td> 21. <td valign=top> 22. <ul> 23. <li><A HREF= 24. "http://spso2.gsfc.nasa.gov/NASA_FACTS/volcanoes/volcano.html"> 25. NASA Facts: Volcanoes and Global Climate Change</A> 26. <li><A HREF= 27. "http://www.ngdc.noaa.gov/seg/hazard/hazards.html"> 28. NGDC Natural Hazards Data</a> 29. <li><a href= 30. "gopher://hoshi.cic.sfu.ca:5555/11/epix/topics/volcano"> 31. Volcano Listserv</a> 32. <li><a href= "http://www.soest.hawaii.edu/hvo"> 33. Volcano Watch Newsletter</a> 34. <li><a href= 35. "http://seawifs.gsfc.nasa.gov/JASON/HTML/EXPEDITIONS_JASON_6_home.html"> 36. JASON Project VI: Island Earth</a> 37. <li><A HREF="http://volcano.und.nodak.edu/"> 38. VolcanoWorld</A> 39. </ul> 40. </td> 41. </tr>
99
</table> Ch : chng ta ch ly danh sch i <ul>...</ul> v chia n thnh hai danh sch. Mi mt danh sch l mt phn t ca mt bng ma c mt hng v hai ct. 42. Lu tr v Reload trong Web browser. Bn c th so snh vi mu bit bng nn c dng nh th no ti y. Mu sc ca bng Mt vi browser hin nay h tr t mu bng, hng v nhng cell ca phantom table. Tht ra, chng ta s dng n trong sut ti liu ny - trong trang Gii thiu , trong Mc Lc, v trong cc bi khi trnh by cc v d HTML. Bn c th xem trang kim tra cui cng bit browser ca bn c h tr vic t mu cho bng khng. Chng ta s s dng m mu h thp lc phn bit trong bi 16 t mu nn ca nhng trang Web v trong bi 18 t mu ch. Di y l mt v d n gin v vic chn mu bgcolor=#FF0000 trong cc tag <table>: Phn ca Bng Dng HTML bng T mu nn cho ton bng <table bgcolor=#880000> hng t mu nn cho mt hng n <tr bgcolor=#880000> phn t t mu nn cho mt phn t <td bgcolor=#880000> By gi chng ta s thm mt vi mu cho bng d liu bn to trong trang "Introduction". Trong v d ca chng ta, n gin chng ta ch thm dng HTML lm cho cc phn t trong cc hng v ct tiu c mu xm sng hn mt cht so vi nn en. 1. M tp tin intro.htm trong trnh son tho. 2. Trc ht tm tt c tag <th> gi cc tiu ca ct: 3. 4. <th><font color=#EE8844>Eruption</font></th> 5. <th><font color=#EE8844>Date</font></th> 6. <th><font color=#EE8844>Volume in km<sup>3</sup></font></th> v thm thuc tnh t mu cc phn t ny thnh mu xm (#222222): <th bgcolor=#222222><font color=#EE8844>Eruption</font></th> <th bgcolor=#222222><font color=#EE8844>Date</font></th> <th bgcolor=#222222><font color=#EE8844>Volume in km<sup>3</sup></font></th> 7. By gi, tm hai tag t tn cho cc hng v t vi cng mu sc vo nh trn: 8. 9. <td bgcolor=#222222 rowspan=4> 10. <font color=#EE8844> 11. <i>eruptions<br>
100
12. observed<br> 13. by humans</i> 14. </font></td> 15. 16. : 17. : 18. : 19. <td bgcolor=#222222 rowspan=2> 20. <font color=#EE8844> 21. <i>inferred<br> 22. by study<br> 23. of deposits</i> 24. </font></td> 25. 26. Lu tr v Np li trong Web browser ca bn. Bn c th so snh vi mu bit bng nn xut hin nh th no ti y. Kim tra li cng vic ca bn So snh trang ca bn vi mu bit chng nn nh th no. Nu trang ca bn khc vi mu hoc cc lin kt siu vn bn hot ng khng ng, kim tra li vn bn bn nh trong trnh son tho. Cc bng tr nn phc tp rt nhanh, v vy nn kim tra li mt ln na xem cc hng v ct c hon ton ng khng. Xem li Xem li nhng ch sau cho bi ny: 1. 2. 3. 4. 5. Cc phn t ca tag bng c mt browser din dch theo th t no? S khc nhau gia tag <td>...</td> v tag <th>...</th> l g? Thuc tnh colspan=X lm g? Cch hot ng ca n? Lm th no to mt bng c cc cnh khng trng thy c? Lm th no t mu mt dng ca bng?
Thc tp t do Xem li trang web ca bn v tm cc v tr m bn thy bng s lm cho cch trnh by tt hn. Hay thm mt s vo trang web ca bn v s dng bng nh dng cho n. Th to bng vi cc phn t c t mu, hoc ging nh chng ti lm trong ti liu ny, s dng mu trong cc bng khng nhn thy c. 22. Xt thm v Hnh nh v Danh sch
Hy lm bc hi button hnh nh v
thot ra khi nhng hp d gy tc gin biu din nhng bullet cng thm vi vic thay i kiu s v
bao quanh cc
A. b. III. iv. 109. 110.
gi tr cc phn t trong danh sch
101
Mc ch Sau bi hc ny bn c th:

To mt hnh nh siu lin kt khng c ng vin xung quanh. Vit HTML cho mt danh sch khng c th t s dng cc du bullet khc nhau. To mt danh sch c th t c nh s bng ch hoa hay ch thng, hoc l nhng s La m ln hoc nh. Sa i mt danh sch c th t bt u nh s t mt tr dng bt k.
Bi hc Lu : Nu bn khng c ti liu t nhng bi hc trc, bn c th download ngay by gi. Bn cng c th xem qua trang kim tra bit browser ca bn c h tr cc tag c s dng trong bi ny khng. Khng c ng vin trn Hnh nh Siu lin kt Trong bi 8e chng ta bit lm th no mt hnh nh hot ng nh mt siu lin kt n nhng trang Web khc hay n mt bn sao ln hn ca hnh nh. Chng ta nhn thy l browser t mt hp ng vin quanh hnh nh, cho bit rng l mt "hyper" nh cc mc siu vn bn khc.
hot ng nh bt k mt lin kt siu vn bn no khc. Tuy nhin, ci hp i lc to ra s cn tr, nht l trong trng hp chng ta c mt hnh c sn ng vin khng vung vc. Ngi s dng v nguyn tc vn xc nh c mt hnh nh l "hyper" nu dng du nhy thay i khi di chuyn chut bng qua hnh nh (n thng chuyn thnh hnh "bn tay" khi trn mt lin kt hot ng c). Bn c th "b i" hp bao quanh bng cch thm thuc tnh vo tag <img...> nh sau: <a href="bigpict.gif"><img src="lilpict.gif" border=0> Trong v d ny, hnh nh lilpict.gif hot ng nh mt siu lin kt n mt hnh nh ln hn l bigpict.gif. Thuc tnh border=0 khng c ngha g c nu nh tag <img..> khng bn trong mt tag <a href=...</a> khc. Chng ta c hai ch trong bi Volcano Web ca chng ta c hnh nh inline siu lin kt Bn c nh u khng? Ci u tin trong tp tin usa.htm, trong mt hnh nh nh ca my o a chn lin kt n mt hnh nh ln hn. Ci th hai l du mi tn trong trang msh.htm quay li phn bi hc. 1. M c hai tp tin usa.htm v msh.htm trong trnh son tho. 2. Tm ra ni m chng ta t hnh nh nh c lin kt n th khc. 3. Sa i mi tag <img src=....> n l mt siu lin kt v c cha mt thuc tnh border=0 . Ly v d, trong tp tin msh.htm n s trng ging nh sau: 4. <a href="usa.htm"> 5. <img src="../pictures/left.gif" alt="** " border=0> Return to <i>Volcano Web</i></a> 6. Lu tr v Np li cc tp tin usa.htm v msh.htm trong browser ca bn.
102
7. Nu cc hnh nh khng cn ng vin v vn ni n ng ni cn thit khi bn click vo, cng vic ca bn coi nh xong. Cc bullet cho Danh sch Khng c Th t Trong bi 6 chng ta to cc danh sch khng c th t <ul>...</ul>. Web browser t ng t mt du bullet pha trc mi mc ca danh sch - v du bullet s t thay i nu chng ta to mt danh sch na bn trong mt danh sch. Vi vi loi browser bn c th ch nh trong HTML mt trong ba loi bullet s s dng bng cch thm thuc tnh vo tag <ul>: <ul type=xxxx> trong xxxx c th l:
o
type=circle type=square type=disc [bullet mc nh cho danh sch cp ngoi cng]
Hn th na! Bn c th thay i loi bn trong mt danh sch bng cch t mt thuc tnh type trong tag <li>: HTML <ul type=square> <li>this is item 1 <li>this is item 2 <li>this is item 3 <li type=circle> Hey! how about these bullets? <li>this is another item <li>and one more <li type=disc> Hey! how about these bullets? </ul> N nhn thy nh th no this is item 1 this is item 2 this is item 3 Hey! how about these bullets? this is another item and one more Hey! how about these bullets?
o o o
Lu rng loi c ch nh trong tag <li type=xxxx> vn c s dng cho tt c cc tag <li> tip theo cho n khi no mt loi bullet khc c chn. By gi, chng ta s thay i loi bullet trong trang Research Projects ca chng ta (tp tin proj.htm). 1. M tp tin proj.htm trong trnh son tho. 2. Dng u tin trong tp tin ny l mt danh sch c th t <ol>...</ol> nhng by gi chng ta i n thnh mt danh sch khng c th t vi bullet circle. Sa i li HTML cho danh sch u tin thnh: 3. 4. <ul type=circle> 5. <li>Type of volcano 6. <li>Geographic location 7. <li>Name, distance, and population of nearest major city 8. <li>Date of most recent eruption and date of most 9. destructive eruption 10. <li>Other events associated with the last eruption 11. (earthquakes, floods, mudslides, etc) </ul> 12. Lu tr v Np li tp tin ca bn trong browser. Bn c th so snh trang Web ca bn vi v d mu bit n nn xut hin nh th no ti y.
103
Cc kiu v Gi tr cho Danh sch C th t Khi chng ta to ra mt danh sch c th t <ol>...</ol> ln u tin trong bi 6, chng ta thy cch browser t ng nh s th t cho cc mc do tag <li> ch nh. Chng ta s lm g khi chng ta khng mun s dng cc s rp (1,2,3...)? Tt thi, y l cu tr li, s dng thuc tnh type=x bn trong cc tag <ol> v <li>: S Rp Ch Hoa Ch Thng S La M Ln S La M Nh <ol type=1> <ol type=A> <ol type=a> <ol type=I> <ol type=i> I. Ti u a. Ti u A. Ti u i. Ti u 1. Ti u tin! tin! tin! tin! tin! b. Ti th B. Ti th ii. Ti th 2. Ti th II. Ti th hai! hai! hai! hai! hai! c. Ti th C. Ti th iii. Ti th 3. Ti th III. Ti th ba! ba! ba! ba! ba! d. Ti th t! IV. D. Ti th t! Ti th t! 4. Ti th t! Ti th t! iv. e. Ti th E. Ti th v. Ti th 5. Ti th V. Ti th nm! nm! nm! nm! nm!
Chng ta thy mt v d ca vic s dng danh sch c th t bn trong mt danh sch c th t khc khi trnh by trang - vi thuc tnh type chng ta c th c nhng trang vi dng trnh by chun nh: I. Cheese in Pre-Historic time A. Africa 1. Afar Triangle 2. East Coast B. Asia C. Europe 1. France a. Cave paintings depicting cheese harvesting b. Burial rituals inferred from dried cheese remnants 2. British Isles D. North America Cheese in the Middle Ages A. King Arthur's Longhorn B. Sharp Cheddar for the Crusades Cheese in the Space Age
II.
III.
Mt th khc chng ta c th lm vi danh sch c th t l n bt u m t mt gi tr khng phi l 1. lm iu ny chng ta thm thuc tnh start=y vo tag <ol>. Lu rng ngay c chng ta s dng cc thuc tnh type=x khc, chng ta vn ch nh c gi tr bt u y theo dng nh "2, 3, 10, 100, ...". Hy xem vi v d sau: S Rp Ch Hoa Ch Thng S La M Ln S La M Nh <ol type=1 <ol type=A <ol type=a <ol type=I <ol type=i start=11> start=11> start=11> start=11> start=11> Ti th k. Ti th XI. 11. Ti th K. Ti th xi. Ti th 11! 11! 11! 11! 11! Ti th xii. l. Ti th XII. 12. Ti th L. Ti th Ti th 12! 12! 12! 12! 12! m. Ti th XIII. 13. Ti th M. Ti th Ti th Ti th xiii. 13! 13! 13! 13! 13! n. Ti th XIV. 14. Ti th N. Ti th Ti th Ti th xiv. 14! 14! 14! 14! 14! o. Ti th XV. O. Ti th Ti th 15. Ti th Ti th xv.
104
15! 15! 15! 15! 15!
V cui cng bn c th thay i th t s bn trong mt danh sch bng cch thm thuc tnh value=z vo tag <li>. Hy xem v d sau: HTML <ol type=A start=5><i> Important Cheese Laws</i><br> <li>Cheese Curing Act of 1905 <li>Milk Content Ruling of 1923 <p> <li value=12>Cheese Import Tariff of 1942 <li>Cheese Freshness Codes of 1942 <p> <li value=1>Cheese Values Act of 1789 N xem Nh th no Important Cheese Laws E. Cheese Curing Act of 1905 F. Milk Content Ruling of 1923 L. Cheese Import Tarif of 1942 M. Cheese Freshness Codes of 1942 A. Cheese Values Act of 1789
Khng th ni r lm (nht l trong v d ny) khi no bn c th cn phi s dng cc tag ny - ch cn nh rng bn c kh nng lm iu khi vit trang web ca bn. Chng ta s minh ha thm mt ln na trong trang Research Projects (tp tin proj.htm). Nu bn nh li trong bi v bng chng ta chia danh sch khng c th t ca nhng site cn tham kho thnh hai ct. Hy i n thnh mt danh sch c th t v s dng thuc tnh type lit k chng, s dng ch thng nh s th t. V tht s chng ta c n hai danh sch, hy xem cch ti sao chng ta quyt nh s dng thuc tnh start. 1. M tp tin proj.htm trong trnh son tho. 2. Hy tm bng chng ta to di phn References. Thay i c hai tag <ul> v </ul> thnh tag <ol type=a> v </ol> 3. By gi chng ta c 5 mc trong danh sch th nht, v th chng ta mun danh sch th 2 bt u nh s t 6. Sa i tag <ol> thnh: <ol type=a start=6> 4. Lu tr v Np li trong browser ca bn. So snh trang ca bn vi trang mu xem danh sch ca bn nn xut hin nh th no. Ct cc mc u tin c nh th t t "a" n "e" cn ct th hai t "f" n "k" Kim tra li cng vic ca bn So snh trang ca bn vi v d mu bit n nn xut hin nh th no. Nu trang ca bn khc vi mu, kim tra li cc vn bn bn nh trong trnh son tho. Xem li Xem li nhng ch sau : 1. Lm th no b c hp lin kt bao quanh mt hnh nh khi hnh nh ny l mt siu lin kt? 2. Lm th no thay i du bullet cho mt danh sch khng c th t ? 3. Browser c s dng cng mt du bullet cho tt c cc danh sch khng? Nu khng, lm th no i du bullet cho cc danh sch con? 4. Bn c th to mt danh sch m mi mc c nh th t bng mt s La m khng? Thc tp t do
105
Hy to kinh nghim vi cc kiu du bullet v nh s th t khc nhau cho danh sch trong trang web ring ca bn. Bn c ngh ra vi cch c nh cho cc tnh cht ny khng? Bn c th to ra cch trnh by phc tp nh dng trnh by "chun" khng? Mi iu v tag <ol>...</ol> by gi tr nn kh phc tp! 23. Bn Hnh nh Lin kt Hy lm cho cc phn khc nhau trong mt hnh nh inline hot ng nh mt lin kt da trn bn hnh nh ca client ... Mc ch Sau bi hc ny bn c th:

Hiu c s khc nhau gia tin trnh v pha server (server-side process) v tin trnh v pha client (client-side process). To c mt hnh nh inline c nhng phn khc nhau lm siu lin kt ti nhng trang Web, hnh nh, v nhng site khc trn Internet.
Bi hc Lu : Nu bn cha c ti liu t nhng bi trc, hy download ngay by gi. Bn cng c th xem trc trang kim tra bit browser ca bn c h tr nhng tag c s dng trong bi ny khng. Trong bi 7a chng ta bit lm th no vit HTML cho vic t mt hnh nh inline trong trang Web, v trong bi 8e chng ta cng bit rng c th lm cho ton b hnh nh hot ng nh l mt siu lin kt n mt mc c lin quan khc. T nhng ngy u tin ca Web, c mt cch nhng phn khc nhau trong mt hnh nh inline tr thnh siu lin kt -- c bit di tn gi l "Bn hnh nh lin kt" (clickable image map). Nhng mi cho n thi gian gn y, bn hnh nh lin kt vn i hi mt vi th c x l t trn web server. y l cch hot ng ca n: 1. Ngi c xem trang c bn hnh nh lin kt v... nhn vo phn thp nht bn phi ca hnh nh. 2. Web browser ni, "! Ti nhn c mt s nhn chut trn hnh ny! Ti gi mt thng bo n Web server - mt ngi no click vo ta ny ca hnh." 3. Web server ni, "Hmmm. Ti nhn c cc ta ca hnh ny - Cc ta ny c d tm trong mt tp tin do tp tin HTML qui nh... Tp tin ny ni, c ri, cc ta ny c tm thy trong mt vng ch nht v hy gi n ngi xem URL ny ca ti" Ri server gi thng tin ny li cho web browser. 4. Web browser ni, "ng ! server ni hy n URL ny - Chng ta i n !" y l mt tin trnh v pha server; mt tin trnh kh hiu qu v server c th x l n trong vi phn giy. Nhng n cng c ngha l s dng mt bn hnh nh lin kt lun lun phi truy xut vo server. Spyglass l browser u tin c kh nng x l vic tnh ton v truyn chnh xc URL da trn cc ta m vic ny c thc hin ngay bn trong phn HTML ca trang. y l mt tin trnh v pha client. Tt c vic lm chng ta va ni trn by gi ch c gii quyt nh vo browser v phn HTML ca trang! bit thm chi tit v bn hnh nh, hy xem Imagemap Help Page (IHiP).
106
Dng HTML cho mt bn hnh nh lin kt v pha client (client-side clickable image map) l: <img src="image.gif" usemap="#map_name"> trong image.gif l tn tp tin hnh nh v map_name l mt lin kt anchor (xem bi 8d) u trong cng tp tin HTML v c dng: <map name="map_name"> <area shape="rect" coords="x1,y1,x2,y2" HREF=URL1> <area shape="rect" coords="x1,y1,x2,y2" HREF=URL2> : : </map> Mi dng trong tag <map>...</map> xc nh mt vng "nng" khc nhau da trn cc to c ch nh bng coords=. Tr x1,y1 cho bit ta tnh theo chiu ngang v chiu cao ca im gc trn bn tri (tnh tng i so vi gc trn bn tri ca ton hnh nh), cn x2,y2 cho bit ta tnh theo chiu ngang v chiu cao ca im gc di bn phi. URL1, URL2, ... l cc URL (hoc tn tp tin cc b) cho vng tng ng khi c click. Ch : ch nh cc ta cho vng nng, bn cn s dng mt vi loi chng trnh ha. Yahoo c vi trnh tin ch khc gip bn lm vic ny d dng hn. Vi bi ny, chng ti s cung cp sn cc ta chnh xc cho bn. Trong bi ny chng ta s thm vo trang Volcano Terminology (tp tin term.htm) mt hnh nh ch ra cc cc ni la khc nhau hot ng li. Mi v tr trong hnh s to siu lin kt n mt web site bn ngoi. Ngoi ra chng ta s to thm hai lin kt na n cc tp tin ring (cc b). 1. Trc tin, bn cn chp li mt bn sao ca tp tin nh dng Trung tm Download Hnh nh Bi 23. Ct tp tin ny thnh volc.jpg v chc chn rng bn lu n vo trong subdirectory/folder pictures. 2. M tp tin term.htm trong trnh son tho. 3. Pha di on cui cng ("...a historically active volcano on the island of Martinique. <p>"), thm on HTML sau: 4. 5. There are many different types of volcanic eruptions and 6. landforms. They can be classified according to the degree 7. of "explosiveness" and the height of the eruption column: 8. <p> 9. <center> 10. <font size=+2> 11. Investigate each type by clicking on a picture 12. </font><br> 13. <img src="../pictures/volc.jpg" usemap="#volcmap" border=0> 14. <p> 15. </center> Ch : Chng ta thm vo mt hnh nh inline cng vi vic tham kho mt tp cc ta kt hp vi tn "volcmap". Tag <center>...</center> a hnh nh vo gia trang (xem bi 20). Thuc tnh border=0 bn trong tag <img> hy b vic th hin hp bao quanh hnh nh siu lin kt. 16. K tip chng ta s thm on HTML cho cc ta ca bn lin kt. on ny c th bt k ch no trong ti liu HTML - n l phn HTML khng c hin th
107
trong web browser. Chng ti ngh t n ngay di phn HTML bn thm vo trong bc va ri: 17. <map name="volcmap"> 18. <area shape="rect" href=" 19. http://volcano.und.nodak.edu/vwdocs/frequent_questions/grp7/europe/question308. html" 20. coords="48,46,204,153"> 21. <area shape="rect" href="explode.html" 22. coords="0,66,26,227"> 23. <area shape="rect" href="height.html" 24. coords="95,283,378,309"> 25. <area shape="rect" href="http://www.geo.mtu.edu/volcanoes/pinatubo/" 26. coords="321,154,468,261"> 27. <area shape="rect" href="http://www.geo.mtu.edu/~boris/STROMBOLI_main.html" 28. coords="172,155,318,274"> 29. <area shape="rect" href="http://www.soest.hawaii.edu/hvo/" 30. coords="36,155,168,276"> 31. <area shape="rect" href="http://www.geo.mtu.edu/volcanoes/santamaria/" 32. coords="90,3,343,123"> </map> Ch : Bn nn bit rng 5 trong 7 vng c nh ngha kt ni n cc site internet xa. Hai ci cn li n cc ti liu cc b m chng ta s to ra trong bc k tip. 33. Ct li tp tin term.htm. 34. By gi chng ta s to ra hai tp tin HTML na c lin kt t image map. To ra mt ti liu mi trong trnh son tho v t vo : 35. 36. <html> 37. <head> 38. <title>Explosiveness</title> 39. </head> 40. <BODY BGCOLOR=#000000 TEXT=#EEEEBB 41. LINK=#44DDFF VLINK=#00FF88> 42. <H5>Volcano Web / 43. <A HREF="index.htm">Index</A> / 44. <A HREF="term.htm">Volcano Terminology</A> / 45. </H5> 46. 47. <h1 align=center>Explosiveness</h1> 48. The <b>explosiveness</b> of an observed volcanic 49. eruption is estimated by the calculated force of 50. the eruption. Experiments have shown that when water 51. comes in contact with hot magma, the eruption is 52. much stronger- this is known as <b>hydro-volcanism</b>. 53. <p> 54. For pre-historic eruptions, the explosiveness is estimated 55. by the degree of fragmentation of small volcanic particles. 56. A more explosive eruption will "shatter" volcanic tephra 57. much more then a less explosive eruption. 58. <p> 59. <a href="term.htm"> 60. <img src="../pictures/left.gif" alt="** " border=0> 61. Return to <i>Volcano Web</i></a> 62. 63. <HR> 64. <ADDRESS> 65. <B><A HREF="index.htm">Volcano Web</A> :
108
66. 67. 68. 69. 70. 71. 72. 73. 74. 75. 76. 77. 78. 79. 80. <A HREF="term.htm">Volcano Terminology</A> : Explosiveness</B> <p> created by Lorrie Lava, <A HREF="mailto:lava@pele.bigu.edu"> lava@pele.bigu.edu</A><br> Volcanic Studies, <A HREF="http://www.bigu.edu/"> Big University</A><p> <TT>last modified: April 1, 1995</TT> </ADDRESS> <p> <tt>URL: http://www.bigu.edu/web/explode.htm</tt> <p> </body> </html> Ct li ti liu ny trong cng th mc vi cc tp tin HTML khc v gi n l explode.htm 81. By gi to ti liu th hai v a vo : 82. 83. <html> 84. <head> 85. <title>Height of Eruption Column</title> 86. </head> 87. 88. <BODY BGCOLOR=#000000 TEXT=#EEEEBB 89. LINK=#44DDFF VLINK=#00FF88> 90. <H5>Volcano Web / 91. <A HREF="index.htm">Index</A> / 92. <A HREF="term.htm">Volcano Terminology</A> / 93. </H5> 94. 95. <h1 align=center>Height of Eruption Column</h1> 96. The <b>height</b> of a volcanic eruption cloud 97. (in kilometers) is taken from direct observation 98. or from estimates based upon historic accounts. 99. <p> 100. For pre-historic eruptions, this scale is calculated 101. based upon the <b>dispersal</b> of the volcanic products102. i.e how far and wide they are scattered. Volcanic 103. eruptions that have very tall columns will spread 104. tephra far and wide. 105. <p> 106. <a href="term.htm"> 107. <img src="../pictures/left.gif" alt="** " border=0> 108. Return to <i>Volcano Web</i></a> 109. 110. <HR> 111. <ADDRESS> 112. <B><A HREF="index.htm">Volcano Web</A> : 113. <A HREF="term.htm">Volcano Terminology</A> : 114. Height of Eruption Column</B> <p> 115. 116. created by Lorrie Lava, 117. <A HREF="mailto:lava@pele.bigu.edu"> 118. lava@pele.bigu.edu</A><br> 119. Volcanic Studies, 120. <A HREF="http://www.bigu.edu/">
109
121. 122. 123. 124. 125. 126. 127. 128. Big University</A><p> <TT>last modified: April 1, 1995</TT> </ADDRESS> <p> <tt>URL: http://www.bigu.edu/web/height.htm</tt> <p> </body> </html>
Ct li ti liu ny trong cng th mc vi cc tp tin HTML v gi n l height.htm 129. By gi m tp tin term.htm trong browser ca bn. Hnh cc ni la khc nhau s xut hin v khi bn di chuyn chut qua cc vng khc nhau ca hnh nh hay vi ch cui trang, du nhc s phi chuyn thnh hnh "bn tay", ti URL ca vng "nng" cng phi c hin th. Bn nn kim tra trang web ca bn vi v d mu bit trang bn hnh nh lin kt nn c thy nh th no. iu cn xem li Cn nh rng y khng phi l s pht trin mi ca HTML, bn nn ngh n vic c nhng ngi xem s dng mt web browser khng h tr client-side image maps. Ti liu ca NetScape cho vi v d x l trng hp ny. Nu bn s dng bn hnh nh lin kt v pha server, bn c th dng n cho cc browser khng h tr vic thng dch v pha client, khi n phi tham kho n server. Chng ti s dng cch ny cho bn hnh nh lin kt ca chng ti ti Maricopa Community Colleges. Vi trng hp ca chng ta, chng ta c th to mt trang c bit thng bo cho cc web browser khng c h tr bn hnh nh lin kt v pha client: 1. Trc ht chng ta cn to mt tp tin HTML mi gi l nomap.htm. M tp tin ny trong trnh son tho v a vo : 2. 3. <html> 4. <head> 5. <title>No Image Map Available</title> 6. </head> 7. <BODY BGCOLOR = #000000 TEXT=#EEEEBB 8. LINK=#44DDFF VLINK=#00FF88> 9. <H5>Volcano Web / 10. <A HREF="index.htm">Index</A> / 11. <A HREF="term.htm">Volcano Terminology</A> / 12. </H5> 13. 14. <h1 align=center>Sorry!</h1> 15. Apparently your web browser does not support 16. client-side image maps. You can still reach the 17. i 18. nformation by following these links: 19. <ul> 20. <li><A HREF="explode.htm">Explosiveness</A> 21. <li><A HREF="height.htm">Height of Eruption Column</A> 22. <p> 23. <li><A HREF=" 24. http://volcano.und.nodak.edu/vwdocs/frequent_questions/grp7/europe/question308. html"
110
25. 26. >Surtseyan</A> <li><A HREF="http://www.geo.mtu.edu/volcanoes/santamaria/">PhreatoPlinian</A> 27. <li><A HREF="http://www.soest.hawaii.edu/hvo/">Hawaiian</A> 28. <li><A HREF="http://www.geo.mtu.edu/~boris/STROMBOLI_main.html">Strombolian</A> 29. <li><A HREF="http://www.geo.mtu.edu/volcanoes/pinatubo/">Plinian</A> 30. </ul> 31. <p> 32. <a href="term.htm"> 33. <img src="../pictures/left.gif" alt="** " border=0> 34. Return to<i>Volcano Web</i></a> 35. 36. <HR> 37. <ADDRESS> 38. <B><A HREF="index.htm">Volcano Web</A> : 39. <A HREF="term.htm">Volcano Terminology</A> : 40. No Image Map</B> <p> 41. 42. created by Lorrie Lava, 43. <A HREF="mailto:lava@pele.bigu.edu"> 44. lava@pele.bigu.edu</A><br> 45. Volcanic Studies, 46. <A HREF="http://www.bigu.edu/">Big University</A><p> 47. <TT>last modified: April 1, 1995</TT> 48. </ADDRESS> 49. <p> 50. <tt>URL: http://www.bigu.edu/web/nomap.htm</tt> 51. <p> 52. </body> </html> Ct li tp tin ny vi tn nomap.htm Ch : Hy xem cch chng ta cung cp cho ngi xem cng mt loi thng tin nh trong bn hnh nh lin kt. Mt trang web tt khng gii hn bt thng tin i vi mt ngi no c v h c quyn s dng cc loi browser khc nhau. 53. By gi m tp tin term.htm trong trnh son tho. 54. Tm dng sau: <img src="../pictures/volc.jpg" usemap="#volcmap" border=0> v thay n thnh <a href="nomap.htm"> <img src="../pictures/volc.jpg" usemap="#volcmap" border=0> </a> Ch : Bn c th phn tch thm v HTML ny - nu web browser c th hiu bn hnh nh lin kt v pha client, n s thc hin iu . Ngc li, ton b hnh nh l mt siu lin kt n trang nomap.htm page. 55. Ct li tp tin ny v Np li n vo web browser ca bn. Kim tra li Cng vic ca Bn
111
So snh cc trang web ca bn vi v d mu bit n nn xut hin nh th no. Nu cc trang ca bn khc vi trang mu hay cc lin kt siu vn bn hot ng khng ng, hy xem li cc vn bn bn nh vo trong trnh son tho. Xem li Cc vn nn xem li cho bi ny: 1. S khc nhau gia bn hnh nh lin kt v pha client v bn hnh nh lin kt v pha server? 2. Tag <map>...</map> dng lm g? 3. Bn gii quyt nh th no khi mt web browser khng hiu bn hnh nh lin kt v pha client? Thng tin b sung Ch rng s tham kho cc thng tin ta trong tag <map>...</map> khng nht thit phi trong cng mt ti liu HTML. Thuc tnh usemap= c th lin kt n mt tp tin HTML khc - v d nh: <img src="../pictures/buttonbar.gif" usemap="maps.htm#bmap3"> trong maps.htm c th l mt tp tin cha cc tag <map>...</map> cho mt vi tp tin. Bn c th lm c iu ny khng? Hy xt trng hp bn to ra vi (hay nhiu) trang m trn nh ca trang c mt hnh vi vi button lin kt n cc trang khc. Nu bn s dng cch ny, bn c th tham kho n ch mt hnh v mt tp tin c cc ta . Khi bn phi thay i thanh hoa tiu ca bn (mt hnh mi? mt s thay i URL cho mt button?) bn ch cn iu chnh mt tp tin! (so snh vi vic thay i cc tag <map>...</map> nu chng c thm vo mi trang web). Thc tp t do Tm ch trong trang web ca bn c th thm vo mt clickable image map trong bi hay trong phn hoa tiu. ng bao gi vt b ngay bn c! Bn phi lm th vi ln xc nh c cc vng "nng" (bn c th phng on nu bn tht s liu mng). Theo cc v d trong bi ny vit HTML cho bn hnh nh lin kt.

PHP Can Ban (Black Art)

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

PHP Can Ban (Black Art)

Uploaded by

Copyright:

Available Formats

1

Bi hc Chia on trong HTML

HTML and in the end it was all for naught.

Item 1 Item 2 Item 3

ch cn thm mt tag paragraph trc v sau tag image:

2. align=middle <img align=middle src="filename.gif">

3. align=bottom (mc nh) <img align=bottom src="filename.gif">

Kim tra li cng vic ca bn

space and carriage return characters count?

To mt bng cc vn bn c nh bin iu khin v tr ca vn bn trn mt trang khi tab v khong cch c xt n

danh sch o danh sch danh sch...

Gypsum (plaster) Barite (drilling mud)

Thm mt on cui (stylized footer) vo cui trang Web.

To mt lin kt siu vn bn gi e-mail

[mars.htm] Research Project [proj.htm]

Ghi ch V y l mc u tin, xa i dng <A HREF="xxxx.htm">back</A> trong phn hoa tiu

term.htm usa.htm mars.htm proj.htm

xx oo xx black xx oo xx fuchsia xx oo xx green xx oo xx maroon xx oo xx olive xx oo xx red xx oo xx teal xx oo xx yellow

Khng bao gi s dng tag nhp nhy (blink tag).

y l mt vng NNG TRN Web

<hr width=5% size=10> :

To vn bn c canh vo gia trang. Sp xp chung hnh nh v vn bn. To vn bn c chnh l bn phi.

return to the cheese home page

Row 1 col 2-3

A. b. III. iv. 109. 110.

gi tr cc phn t trong danh sch

type=circle type=square type=disc [bullet mc nh cho danh sch cp ngoi cng]

You might also like