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

Size: px

Start display at page:

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

せせらゆのもと
9 years ago
Views:

1 1. Chris Plaintail May 18, / 27

2 1 2 HTML HTML 3 CSS style 2 / 27

3 HTML HTML HTML HTML CSS HTML CSS 3 / 27

4 4 / 27

5 HTML HTML, CSS HTML, CSS http, https file CSS HTML CSS.html PC file:// PC.html 5 / 27

6 HTML 6 / 27

7 HTML < =" "> </ > < =" "> style id class 7 / 27

8 HTML <!DOCTYPE html> html head body <!DOCTYPE html> <html lang="ja"> <head>... </head> <body>... </body> </html> 8 / 27

9 HTML sample-1.html <!DOCTYPE html> <html lang="ja"> <head> <title> </title> <meta charset="utf-8"> <link rel="stylesheet" href="example.css"> <script src="example.js"></script> </head> <body>... </body> </html> 9 / 27

10 HTML 1 meta utf-8 2 meta 3 link script 4 HTML L A TEX 10 / 27

11 HTML sample-2.html <!DOCTYPE html> <html lang="ja"> <head>... </head> <body> <h1> </h1> <p> <a href=" <a href="sample-01.html"> </a> <img src="photo-001.jpg" alt=" " width="480"> </p> </body> </html> 11 / 27

12 HTML sample-3.html <!DOCTYPE html> <html lang="ja"> <head>... </head> <body> <h2> </h2> <table> <tr><td> </td><td> </td></tr> <tr><td> </td><td> </td></tr> <tr><td> </td><td> </td></tr> </table> </body> </html> 12 / 27

13 HTML sample-4.html <body> <h2> </h2> <ul> <li> <ul> <li> </li> <li> </li> </ul> </li> <li> </li> </ul> </body> 13 / 27

14 HTML sample-5.html <body> <h3> </h3> <form action="sample.php" methot="post"> <input type=" "><br> <input type="password"><br> <input type="tel"><br> <input type="text"><br> <input type="submit" value=" "> <input type="reset" value=" "> </form> <button> </button> </body> 14 / 27

15 HTML sample-6.html <form action="sample.php" methot="post"> <select id="language" name="language"> <option value="en"> </option> <option value="de"> </option> <option value="fr"> </option> <option value="ja" selected> </option> <option value="zh"> </option> </select> </form> 15 / 27

16 HTML sample-7.html <form action="sample.php" methot="post"> <select id="contact" name="contact" multiple size="5"> <option value=" " selected> </option> <option value="tel" selected> </option> <option value="fax" selected> </option> <option value="postal" selected> </option> <option value="office"> </option> </select> </form> 16 / 27

value="email" selected> </option> <option value="tel" selected> </option> <option

17 HTML 5 6 form 7 table button input HTML 8 HTML 9 HTML 17 / 27

18 CSS 18 / 27

19 style CSS <style> <link> sample-8.html <!DOCTYPE html> <html lang="ja"> <head><meta charset="utf-8"></head> <body> <h1 style=color:red;font-size:12px;"> </h1> <p style="color:blue;font-size:10px;"> style </p> <h1 style=color:red;font-size:12px;"> </h1> </body> </html> 19 / 27

20 CSS style <style> <link> sample-9.html <html lang="ja"> <head> <style> p {color:blue; font-size:10pt;} </style> </head> <body> <p> </p> </body> </html> 20 / 27

21 CSS style <style> <link> sample-10.html <html lang="ja"> <head> <link rel="stylesheet" href="ex-01.css"> </head> <body> <p> </p> </body> </html> ex-01.css p {color:blue; font-size:10pt;} 21 / 27

22 CSS { : ;} p {color:blue; font-size:10pt;} pt, cm, mm, in, pt, pc px, em, ex, % black, gray, silver, white, blue, red, green,... rgb #ffffff(white) #000000(black) 10 CSS 22 / 27

23 CSS margin padding border 11 7 html CSS 23 / 27

24 p {color:blue;} * * {color:bule;} class. p.xxx {color:blue;} id #id p#yyy {color:blue;} :link a:link {color:blue;} :visited a:visited {color:blue;}, h1, h2 {color:blue;} p a{color:blue;} > ul > li {color:blue;} + h1 + p {color:blue;} 24 / 27

25 #ID{ : } id <style> p#ex-1{color:red;} p#ex-2{color:blue;} p#ex-3{color:green;} </style>... <p id="ex-1"> ex-1 </p> <p id="ex-2"> ex-2 </p> <p id="ex-3"> ex-3 </p> <p id="ex-3"> ID (ex-3) 1 </p> 25 / 27

26 class. { : }. { : } <style> p.ex-1{color:red;}.ex-2{font-size:15pt;} *.ex-3{color:green;font-size:15pt;} </style>... <p> </p> <p class="ex-1"> </p> <p class="ex-2"> </p> <p class="ex-2"> </p> <h3 class="ex-2"> </h3> <h3 class="ex-3"> </h3> 26 / 27

27 Yes : color, font-size No : border, margin, padding inherit div.ex-1 {border:1px solid #000000;} p.ex-2 {border:inherit;} <h3 class="ex-1"> </h3> <div> <p class="ex-2"> (ex-1 ) </p> </div> 27 / 27

コンピュータサイエンス 4. ウェブプログラミング

コンピュータサイエンス 4. ウェブプログラミング 4. Chris Plaintail 2014 1 / 43 1 HTML CSS 2 JavaScript DOM jquery 3 4 PHP SQL PHP SQL 2 / 43 HTML HTML CSS HTML Ajax (Asynchronous JavaScript + XML) PHP SQL 3 / 43 HTML, CSS http, https CSS HTML CSS.html