Microsoft PowerPoint - HTML.pptx

HTML 4/5 WWW (World Wide Web) HTML (HyperText Markup Language) HTML (text) (tags) (web browser) ( 50 ) : IE Firefox, Safari, Google Chrome, Edge HTML 4.0 1 <HTML> index.htm, default.htm, abc.php, xyz.asp <HEAD> <TITLE> </TITLE> <STYLE> </STYLE> <SCRIPT>javascript</SCRIPT> </HEAD> <BODY> 5A12 2874-3121,,,, </BODY> </HTML> TAG HTML 4.0 2

/: http://www.ablmcc.edu.hk/~scy/home/ : http://www.ablmcc.edu.hk/~scy/cprogram/ <html> <head> <title> </title> </head> browser <body> </body> </html> \n <p> <br> paragraph break HTML 4.0 3 hyperlink (anchor) Hot Mail Mr. Szeto <a href="http://www.homail.com">hot Mail</a> Yahoo <br> Mr. <a href="http://www.ablmcc.edu.hk/~scy/">szeto</a> <br> <a href="http://www.yahoo.com" target ="_blank">yahoo</a> image <img src="school.gif"> <img src="school.gif" align="left" width="10" height="15" alt="sch logo"> <img src="images/school.gif" align="right"> <img src="images/school.gif" align="center"> HTML 4.0 4

1-7 <font size="1">=1 </font><p> <font size="2">=2 </font><p> <font size="3">=3 </font> <p> <font size="4">=4 </font><p> <font size="5">=5 </font><p> <font size="6">=6 </font><p> <font size="7">=7 </font><p> <font size="99">=99 </font><p> <font size="+3">=+3</font><p> <basefont size="7" face="arial" color="#0000ff"> <font size="6" color="#ff0000" face="verdana">abc College</font> http://www.ablmcc.edu.hk/~scy/home/javascript/selcolor.htm HTML 4.0 5 <strong> Strong </strong> <b> Bold </b> <i> Italic </i> <u> Underline </u> <em> Emphasize </em> <sup> 3 Superscript </sup> <sub> 2 Subscript </sub> <tt> Teletype </tt> <big> Big </big> <small> Small <small> X<sup>3</sup> <p> y<sub>2</sub> y<sub>1</sub> X 3 y 2 y 1 HTML 4.0 6

Heading 1-6 <h1> Heading 1</h1> <h2> Heading 2</h2> <h3> Heading 3</h3> <h4> Heading 4</h4> <h5> Heading 5</h5> <h6> Heading 6</h6> <h1 align="center">html</h1> <hr> = horizontal line <hr size=5 width=50% align=center color=red noshade> HTML 4.0 7 : myself.htm <p align="left"></p> <p align="center"></p> <p align="right"></p> <center> </center> Login: cs1xx 5A12 2874-3121 / / table : (e.g. ) (/) HTML 4.0 8

Hyper link & Book mark? <a href="#answer"></a> <blockquote> <p> <p> <blockquote> <p> <p> </blockquote> </blockquote> <a name="answer"> HTML 4.0 9 Unordered List <ul> <li>hk</li> <li>kln</li> </ul> <ul type="disc"> <li>hk</li> <li>kln</li> </ul> <ul type="circle"> <li>hk</li> <li>kln</li> </ul> <ul type="square"> <li>hk</li> <li>kln</li> </ul> <ul> <li type="disc"> HK</li> <li type="circle">kln</li> <li type="square">nt</li> </ul> HK Kln HK Kln HK Kln HK Kln NT Ordered List <ol> <li>hk</li> <li>kln</li> </ol> <ol type="1" start="11"> <li>hk</li> 11. HK <li>kln</li> 12. Kln </ol> <ol type="i"> <li>i. HK</li> <li>ii. Kln</li> </ol> <ol type="a"> <li>a. HK</li> <li>b. Kln</li> </ol> <ol type="a"> <li value="2">hk</li> <li value="4">kln</li> <li value="6">nt</li> </ol> 1. HK 2. Kln i. HK ii. Kln a. HK b. Kln B. HK D. Kln F. NT HTML 4.0 10

Table <table border=2> table row table data <tr> <tr> <tr> <tr> </table> <td>a1</td> <td>a2</td> <td>a3</td> <td>b1</td> <td>b2</td> <td>b3</td> <td>c1</td> <td>c2</td> <td>c3</td> <td>d1</td> <td>d2</td> <td>d3</td> row1 row2 row3 row4 column1 column2 column3 <td colspan=3> A1, A2, A3 </td> <td> B1 </td> <td rowspan=2> <td> B3 </td> <td> C1 </td> B2, C2 </td> <td> C3 </td> <td> D1 </td> <td> D2 </td> <td> D3 </td> HTML 4.0 11 <table width=80% border=1 align=center> <tr align=center> <td colspan=3>cell 1</td> <tr align=center> <td>cell 2</td> <td rowspan=2>cell 3</td> <td>cell 4</td> <tr> <td nowrap>cell 5</td> <td>cell 6</td> Cell 1 Cell 2 Cell 4 Cell 3 Cell 5 Cell 6 tr=table row align=center rowspan=2 2 colspan=3 3 td = table data nowrap </table> HTML 4.0 12

<table bgcolor=lavender cellpadding=5 cellspacing=10> <tr> <tr> 5A <tr> 25/12/1990 </table> <table border=1 cellpadding=5> <tr> <th>name:</th> <td>chan Tai Man</td> <tr> <th>class:</th> <td>f.7a</td> </table> border Name: Class: Chan Tai Man F.7A tr = table row th = head (bold, center) td = table data (column) HTML 4.0 13 <table width=60% border=0 cellpadding=2 cellspacing=3 align=center bgcolor=pink> <tr> <td width="20%" align="left" >cell 1</td> <td width="20%" align="center" >cell 2</td> <td width="20%" align="right" >cell 3</td> cell 1 cell 2 cell 3 cell 4 cell 5 cell 6 <tr> <td align="center" bgcolor=#ff0000>cell 4</td> <td align="center" bgcolor=#00ff00>cell 5</td> <td align="center" bgcolor=#0000ff>cell 6</td> </table> HTML 4.0 14

: calendar.htm SUN MON TUE WED THU FRI SAT 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 HTML 4.0 15 : calendar.htm : Hello there world. How are you today? s 1 %[^\n] scanf("%[^\n]", s) ; \n Hello there world. How are you today? 2 %[elho] scanf("%[elho]", s) ; elho Hello 3 %[^rw] scanf("%[^rw]", s) ; r w Hello the 4 %[^H] scanf("%[^h]", s) ; H : Introduction to C - cityu.htm TOC (+ ) HTML 4.0 16

<html> <head> <LINK REL="StyleSheet" HREF="global.css" TYPE="text/css"> <style type="text/css"> style sheet font {color:blue; font-size:20 #D1 {color:red; font-size:30 #D2 {color:rgb(255,0,0); font-size:30.c1 {color:green; font-size:40 th, td {font-family: "lucida console"; font-size:10pt; white-space: nowrap; </style> </head> <body> <font>html tag</font> <font id=d1> </font> <font class=c1> </font> <span style={color:navy> Special <span id=d2> </span> </body> </html> </span> HTML 4.0 21 : form http://www.ablmcc.edu.hk/~scy/home/javascript/form.htm <form name="form1" method="post" action="register.php"> </form> <input type="hidden" name="level" value="f.7"> <input type="text" name="name" size="36" value="chan Tai Man"> <input type="password" name="pwd" size="10" value="123456"> <textarea name="comment" rows="3" cols="40">comments</textarea> <input type="checkbox" name="elective" value="ca">computer <input type="checkbox" name="elective" value="ms">maths <input type="radio" name="sex" value="m" checked>male <input type="radio" name="sex" value="f">female <select size="1" name="yob" style="font-size: 12pt"> <option value="4" selected>1984</option> <option value="5">1985</option> <option value="6">1986</option> </select> <input type="submit" value="submit" name="b1"> <input type="reset" value="reset" name="b2"> HTML 4.0 22

HTML - FORM 11-20 21-30 31- <input type=text name=sname > <select> <option></option> <option></option> </select> <input type=radio name=gender > <input type=radio name=gender > <input type=checkbox name=age > <input type=checkbox name=age > <input type=checkbox name=age > () 18 <textarea> </textarea> 18 <input type=button value="" > 1 HTML - FORM sname <input type=text value=" " name=sname > <input type=button value="" onclick="change()" > <script> function change(){ document.all.sname.value = ""; </script> num 37 Y result function checkprime javascript http://www.w3schools.com/js/default.asp http://gwydir.demon.co.uk/jo/javascript/ http://www.javascriptkit.com/jsref/ 2

mstatus title Ms <select name = "mstatus" onchange = "update()" > </select> <option value = "S" >Single </option> <option value = "M" >Married </option> <input type=text name=title value="ms" readonly> <script> function update(){ if (document.all.mstatus.selectedindex == 0) else </script> document.all.title.value = "Ms"; document.all.title.value = "Mrs"; 3 <input type=radio <input type=radio name=gender name=gender title Ms onclick="change()" onclick="change()" checked> > <input type=text name=title value="ms" readonly> <script> function change(){ </script> if (document.all.gender[0].checked == true) else document.all.title.value = "Sir"; document.all.title.value = "Madam"; 4

ICT BASF VA () result <input type=checkbox <input type=checkbox <input type=checkbox name=subj name=subj name=subj onclick="change()" onclick="change()" onclick="change()" >ICT >BASF >VA <textarea name=result rows=5 cols=50> </textarea> <script> function change(){ var s=""; if (document.all.subj[0].checked == true) if (document.all.subj[1].checked == true) if (document.all.subj[2].checked == true) document.all.result.value = s; </script> s+=" \n"; s+="\n"; s+="\n"; 5 var turn=0, empty=-1; var box = new Array(10); // 0=o, 1=x function chgimg(obj){ // e.g.cell1 var n=obj.name.charat(4); obj.src = "o.jpg"; obj.src = "x.jpg"; function whowins(){ return 0; // O wins return 1; // X wins return 9; // ties return -1; // continue function init(){ for(i=1;i<10;i++){ box[i] = empty; // -1 document.all.cell1.src = "blank.jpg"; turn = 0; function endgame(n){ if(n ) alert("ties."); else alert("o wins."); init(); <img src="blank.jpg" name="cell1" onclick="chgimg(this)"> : <img src="blank.jpg" name="cell9" onclick="chgimg(this)"> blackjack HCF/LCM 6

HTML (image) 1. <img src="card0.png" width=100> <img src="card1.png">... <img src="card51.png"> Javascript 2. <script> for(i=0;i<52;i++) document.write('<img src=" ">'); </script> <img src="cardback.png"> 3. Display cards for(i... document.write('<img src=" ' ' ">'); 4. array <script> var num = new Array(52); // int num[52]; var card = new for(i=0;i<52;i++) num[ ]= ; </script> 5. Shuffle 洗牌 <script> for(i=0;i<52;i++){ do{ n = while(num[ ] ); num[ ] = </script> card[ ] = 6. display 顯示 <script> for(i=0;i<52;i++){ </script> document.write('<img src=" ' ' ">'); 7. n = rand()%52; n = Math.floor(Math.random()*52);

8. onclick event <script> var num = new Array(52); var card = new Array(52); var curr=0; for(i=0;i<52;i++) num[i]= ; // int num[52]; // current 目前 for(i=0;i<52;i++){ do{ n = Math.floor(Math.random()*52); while(num[ ]<1); num[ ]=0; card[ ]= ; function chgpic(){ document.all.mycard. = "card"+ +".png"; curr++; </script> <img src="cardback.png" width=200 name= onclick=" ">