HTML HTML HyperText Markup Language (Markup Language) (< > ) 1 sample0.html ( ) html sample0.html <!DOCTYPE html> <html lang="ja"> <meta charset="shift_jis"> <title></title> // JavaScript <!-- HTML --> (sample0.html) (A) 1
(1) <html>,,,,, <> ( ) (/ ) (2) <!DOCTYPE html> HTML5 (3) <html> HTML (4) <html lang= ja > html (ja) (5) JavaScript CSS (6) <meta charset= shift jis > shift jis utf-8 IE( ) (7) <title> </title> ( ) (8) JavaScript ( ) // // (9) <! > 2
2 sample0.html sample1.html <title> sample1.html <!DOCTYPE html> <html lang="ja"> <meta charset="shift_jis"> <title>html </title> // JavaScript <font color="red"> <!-- --> <h1 align="center"> HTML</h1> <!-- <h1> <h6> --> <font color="purple" align="left"> <h2> </h2> <font color="blue"> <h3> </h3> <font color="green"> <p> </p> <p> </p> <p> </p> sample1.html 3
(1) <font> red( ), orange( ), yellow( ), green( ), blue( ), black( ), gray( ), white( ) R( ) G( ) B( ) 1 =8 2 8 = 256 red "#ff0000" (2) align( ) left, center right (3) (paragraph) <p> </p> 3 3.1 (font) font face = fantasy : cursive : HG : serif : sans-serif : monospace : PC 3.2 <a href=" URL"> </a> <a href="http://www.aomori-u.ac.jp/"> </a> YouTube 1. YouTube 2. [ ] 3. [ ] 4. HTML 4
5. sample2.html sample2.html <!DOCTYPE html> <html lang="ja"> <meta charset="shift_jis"> <title></title> // JavaScript <center> <font face="fantasy"> <h1> The fundamental things apply as time goes by. </h1> <font face="hg "> <h2> </h2> <a href="http://www.aomori-u.ac.jp/"> <font face="serif"><h1> </h1></a> <iframe width="336" height="252" src="https://www.youtube.com/embed/epszkpnucv8" frameborder="0" allowfullscreen></iframe> </center> 5
4 (form) <input> sample3-1.html <!DOCTYPE html> <html lang="ja"> <meta charset="shift_jis"> <title></title> // JavaScript <form name="f1"> <input type="text" size="30"> <!-- --> <input type="button" name="btn" value=" "> </form> JavaScript 6
5 JavaScript (1) sample3-1.html web JavaScript Web (sample3-2.html) sample3-2.html <html> <title> </title> function onclick(){ var str1=document.getelementbyid("txt").value; var str2=document.getelementbyid("display"); str2.innerhtml= +str1+ ; <form name="f1"> <input type="text" size="30" id="txt"> <input type="button" name="button" value=" " onclick="onclick()"> <p id="display"></p> </form> (1) <p id= display ></p> (2) txt, display (id) <input type= text size= 30 id= txt > 7
<p id= display ></p> (3) onclick JavaScript onclick() <input type= button name= button value= onclick= onclick() > (4) (value) str1 var str1=document.getelementbyid( txt ).value; (5) <p id= display ></p> str2 var str2=document.getelementbyid( display ); str2 (6) str2 +str1+ str2.innerhtml= +str1+ ; 8
6 JavaScript (2) sample3-2.html script if(str1) str2.innerhtml= +str1+ ; else str2.innerhtml = ; sample3-3.html <html> <title> (2)</title> function onclick(){ var str1=document.getelementbyid("txt").value; var str2=document.getelementbyid("display"); if(str1) str2.innerhtml= +str1+ ; else str2.innerhtml = ; <form name="f1"> <input type="text" size="30" id="txt"> <input type="button" name="button" value=" " onclick="onclick()"> <p id="display"></p> </form> 9
7 (sample3f.html) <html> <title> </title> <style> div1{ position:absolute; left: 300px; top: 0px; div2{ position:absolute; left: 370px; top: 400px; </style> function onclick(){ var str1=document.getelementbyid("txt").value; var str2=document.getelementbyid("display"); if(str1){ str2.innerhtml= <h3> + <font face="cursive">the answer, my friend, is blowing in the wind. + The anser is blowing in the wind. </h3> ; else{ str2.innerhtml = <font color="red"><b> </b> ; <div1> <center> 10
<h2><font face="serif"> </h2> <form name="f1"> <textarea type="text" rows="5" cols="60" id="txt" ></textarea> <input type="button" name="button" value=" " onclick="onclick()"> <p id="display"></p> </form> </center> </div1> <div2> <center> <iframe width="420" height="315" src="https://www.youtube.com/embed/vwwgrjjimxa" frameborder="0" allowfullscreen></iframe> </center> </div2> 11