(1) <html>,,,,, <> ( ) (/ ) (2) <!DOCTYPE html> HTML5 (3) <html> HTML (4) <html lang= ja > html (ja) (5) JavaScript CSS (6) <meta charset= shift jis >

Size: px

Start display at page:

Download "(1) <html>,,,,, <> ( ) (/ ) (2) <!DOCTYPE html> HTML5 (3) <html> HTML (4) <html lang= ja > html (ja) (5) JavaScript CSS (6) <meta charset= shift jis >"

いつややがい
9 years ago
Views:

1 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  (sample0.html) (A) 1

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

3 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>  <font color="purple" align="left"> <h2> </h2> <font color="blue"> <h3> </h3> <font color="green"> <p> </p> <p> </p> <p> </p> sample1.html 3

4 (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> (font) font face = fantasy : cursive : HG : serif : sans-serif : monospace : PC 3.2 <a href=" URL"> </a> <a href=" </a> YouTube 1. YouTube 2. [ ] 3. [ ] 4. HTML 4

1 (font) font face = fantasy : cursive : HG : serif : sans-serif : monospace : PC 3.

5 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=" <font face="serif"><h1> </h1></a> <iframe width="336" height="252" src=" frameborder="0" allowfullscreen></iframe> </center> 5

face="fantasy"> <h1> The fundamental things apply as time goes by.

6 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

7 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

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

9 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

value; var str2=document.getelementbyid("display"); if(str1) str2.innerhtml= +str1+ ; else str2.

10 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

370px; top: 400px; </style> function onclick(){ var str1=document.getelementbyid("txt").value; var str2=document.

11 <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=" frameborder="0" allowfullscreen></iframe> </center> </div2> 11

id="display"></p> </form> </center> </div1> <div2> <center> <iframe width="420" height="315"

コンピュータサイエンス 1. ウェブの基本

コンピュータサイエンス 1. ウェブの基本 1. Chris Plaintail May 18, 2016 1 / 27 1 2 HTML HTML 3 CSS style 2 / 27 HTML HTML HTML HTML CSS HTML CSS 3 / 27 4 / 27 HTML HTML, CSS HTML, CSS http, https file CSS HTML CSS.html PC file:// PC.html 5 /