Microsoft PowerPoint - HTML.pptx

Size: px

Start display at page:

Download "Microsoft PowerPoint - HTML.pptx"

砚焚国
6 years ago
Views:

0 1 <HTML> index.htm, default.htm, abc.php, xyz.

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

$</head> browser <body> </body> </html> \n <p> <br>$ paragraph break HTML 4.

com" target ="_blank">yahoo</a> image <img

2 /: : <html> <head> <title> </title> </head> browser <body> </body> </html> \n <p> <br> paragraph break HTML hyperlink (anchor) Hot Mail Mr. Szeto <a href=" Mail</a> Yahoo <br> Mr. <a href=" <br> <a href=" 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

3 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> HTML <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

4 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 : myself.htm <p align="left"></p> <p align="center"></p> <p align="right"></p> <center> </center> Login: cs1xx 5A / / 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.

5 Hyper link & Book mark? <a href="#answer"></a> <blockquote> <p> <p> <blockquote> <p> <p> </blockquote> </blockquote> <a name="answer"> HTML 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

6 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 <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

7 <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 <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

8 : calendar.htm SUN MON TUE WED THU FRI SAT HTML : 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

9 <iframe name="frame01" src="chp1.htm" width="40%" height=400 align="top"> <iframe name="frame02" src="chp2.htm" align="left" scrolling="auto"> <iframe name="frame03" src="chp3.htm" iframeborder=1 scrolling="no"> <iframe name="frame04" src="chp4.htm" marginwidth=20 marginheight=20> HTML <img src="images/hkmap.jpg" usemap="#map1"> <map name="map1"> <area href="t1.htm" alt="map of Hong Kong" coords="0,0,50,50" target="main"> <area href="t2.htm" shape="circle" coords="100,100,20"> <area href="t3.htm" shape="rect" coords="0,200,100,270"> <area href="t4.htm" shape="poly" coords="150,200,100,250,200,250"> </map> HTML

10 <meta HTTP-EQUIV="REFRESH" content="10; url= <META HTTP-EQUIV="Site-Enter" content="revealtrans(duration=1.0,transition=15)"> <META HTTP-EQUIV="Site-Exit" content="revealtrans(duration=1.0,transition=16)"> <meta name="description" content="free Web tutorials" /> <meta name="keywords" content="html,css,xml,javascript" /> <meta http-equiv="content-type" content="text/html; charset=big5" /> HTML <marquee behavior="scroll"> 1</marquee> <marquee behavior="slide" direction="right" loop="infinite"> 2</marquee> <bgsound src="sound/school.mid" loop="-1"> <pre> pre-formatted text </pre> pre-formatted text HTML

11 <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 : form <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

12 <script> function test1(){ if(document.all.gender[0].checked==true) document.all.gender.value = document.all.gender[0].value; else document.all.gender.value = document.all.gender[1].value; function test2(){ alert( document.all.grade.selectedindex +" of " +document.all.grade.length); if(document.all.grade[0].selected==true) alert("a selected"); function test3(){ var msg = ""; for(i=0;i<document.all.subj.length;i++) if(document.all.subj[i].checked) msg += i+" "; alert(msg); HTML <body onload="init();"> <p>1. radio button:<p> <input type=radio name="gender" value=" " onclick="test1()" checked>male <input type=radio name="gender" value=" " onclick="test1()">female <p>2. text box:<p> <input type=text name=gender value=m size=2> <p>3. drop down list:<p> <select size="1" name="grade" onchange="test2()"> <option value="a">a</option> <option value="b">b</option> <option value="e" selected>e</option> </select> <p>4. check box:<p> <input type=checkbox name="subj" value="c" onclick="test3()" checked>c <input type=checkbox name="subj" value="java" onclick="test3()" >Java <input type=checkbox name="subj" value="pascal" onclick="test3()" >Pascal <p>5. textarea:<p> <textarea name=comments rows=7 cols=80>comments</textarea><p> </body> HTML

16 HTML - FORM <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

17 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

18 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

19 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);

20 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=" ">

p.2 1 <HTML> 2 3 <HEAD> 4 <TITLE> </TITLE> 5 </HEAD> 6 7 <BODY> 8 <H3><B> </B></H3> 9 <H4><I> </I></H4> 10 </BODY> </HTML> 1. HTML 1. 2.

p.2 1 <HTML> 2 3 <HEAD> 4 <TITLE> </TITLE> 5 </HEAD> 6 7 <BODY> 8 <H3><B> </B></H3> 9 <H4><I> </I></H4> 10 </BODY> </HTML> 1. HTML 1. 2. 2005-06 p.1 HTML HyperText Mark-up Language 1. HTML Logo, Pascal, C++, Java HTML 2. HTML (tag) 3. HTML 4. HTML 1. HTML 2. 3. FTP HTML HTML html 1. html html html cutehtmleasyhtml 2. wyswyg (What you see