<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!--文字コードの指定--> <title>三田猫物語</title> <!--ページのタイトル--> </head> <header> <h1>三田の猫たち</h1> <!-- h1 は見出し (大きく表示) --> </header> <body> 三田の猫について紹介します. <!--ここが文書の本体--> </body> </html> |
... <body> <hr> <!--横線; 閉じる</hr>は不要--> <h2>三田の野良猫たち</h2> <p> <!--段落 (パラグラフ)--> 三田にはいろいろな野良猫が住んでいます. </p> <p> あ!<br>こんなところにも. <!--</br>は改行--> </p> <hr> </body> ... |
... <body> <hr> <h2>三田の野良猫たち</h2> <p> 三田にはいろいろな野良猫が住んでいます. <ul> <li>黒猫</li> <li>白猫</li> <li>三毛猫</li> </ul> </p> <p> あ!<br>こんなところにも. <ol> <li>キッピーモール</li> <li>横山駅</li> <li>三田駅</li> </ol> </p> <hr> </body> ... |
... <body> ... <table border="1"> <tr> <th>種類</th> <th>午前</th> <th>午後</th> </tr> <tr> <td>黒猫</td> <td> 3</td> <td>6</td> </tr> <tr> <td>白猫</td> <td> 9</td> <td>4</td> </tr> <tr> <td>三毛猫</td><td> 4</td> <td>7</td> </tr> </table> ... </body> ... |
... <body> ... <img src="photo2.jpg" width="60%"> ... </body> ... |
... <body> ... <a href="http://www.kuronekoyamato.co.jp/">黒猫と言えば</a> ... </body> ... |
HTML ファイル (および図や写真のファイル) を Web サーバーにアップロードすれば, ホームページが完成する
<html>
<!DOCTYPE html>
<head>
<meta charset="utf-8"> <!--文字コードの指定-->
<title>三田猫物語</title> <!--ページのタイトル-->
<style type="text/css">
h2 { color: blue; } /* h2の色を青に設定 */
</style>
</head>
... |
...
<style type="text/css">
h2 { color: blue; } /* h2の色を青に設定 */
h1 {
background-color: blue; /* バックを青に */
color: white; /* フォントを白に */
}
</style>
... |
セレクタ {
プロパティ: 値;
プロパティ: 値;
...
} |
...
<style type="text/css">
h2 { color: blue; } /* h2の色を青に設定 */
h1 {
background-color: blue; /* バックを青に */
color: white; /* フォントを白に */
font-size: 300%; /* 文字を大きく */
text-align: center; /* 中央揃え */
padding: 20px; /* 枠を大きく */
}
</style>
... |
<style type="text/css">
...
table { /* table にスタイルを設定*/
font-size : 100%; /* 文字の大きさ (本文と同じに) */
border: 0.2em solid black; /* 枠線の幅, 形状, 色 */
border-collapse: collapse; /* 枠線を2重にしない */
margin: 0.4em 0em 0.4em 0em; /* 表の外側のスペース (上右下左) */
}
</style> |
<style type="text/css">
...
table { /* table にスタイルを設定*/
font-size : 100%; /* 文字の大きさ (本文と同じに) */
border: 0.2em solid black; /* 枠線の幅, 形状, 色 */
border-collapse: collapse; /* 枠線を2重にしない */
margin: 0.4em 0em 0.4em 0em; /* 表の外側のスペース (上右下左) */
}
table th { /* table の th にスタイルを設定*/
border: 0.1em solid black; /* 枠線の幅, 形状, 色 */
border-bottom: 0.2em solid black; /* 下線を太くする */
padding: 0.1em 0.3em 0.1em 0.3em; /* 線と中身の間隙 (上右下左) */
}
</style> |
<style type="text/css">
...
table { /* table にスタイルを設定*/
font-size : 100%; /* 文字の大きさ (本文と同じに) */
border: 0.2em solid black; /* 枠線の幅, 形状, 色 */
border-collapse: collapse; /* 枠線を2重にしない */
margin: 0.4em 0em 0.4em 0em; /* 表の外側のスペース (上右下左) */
}
table th { /* table の th にスタイルを設定*/
border: 0.1em solid black; /* 枠線の幅, 形状, 色 */
border-bottom: 0.2em solid black; /* 下線を太くする */
padding: 0.1em 0.3em 0.1em 0.3em; /* 線と中身の間隙 (上右下左) */
}
table td { /* table の td にスタイルを設定*/
border: 0.1em solid black; /* 枠線の幅, 形状, 色 */
padding: 0.1em 0.3em 0.1em 0.3em; /* 線と中身の間隙 (上右下左) */
text-align: right; /* 右揃え */
}
</style> |
<style type="text/css">
...
...
</style>
<script type="text/javascript">
<!--
function h1Col(col)
{
var h1 = document.getElementById("header1");
h1.style.backgroundColor = col;
}
//-->
</script>
</head> |
<header> <h1>三田の猫たち</h1> <!-- h1 は見出し (大きく表示) --> </header> |
<header>
<h1 id="header1">三田の猫たち</h1>
<input type="button" value="赤" onclick="h1Col('red')"> <!--ボタン-->
<input type="button" value="青" onclick="h1Col('blue')"> <!--ボタン-->
<input type="button" value="緑" onclick="h1Col('green')"> <!--ボタン-->
</header> |
<script type="text/javascript">
<!--
function h1Col(col)
{
var h1 = document.getElementById("header1");
h1.style.backgroundColor = col;
}
function inc(cell)
{
var c = document.getElementById(cell);
var v = c.innerHTML;
v++;
c.innerHTML = v;
}
//-->
</script>
</head> |
<table border="1">
<tr> <th>種類</th> <th>午前</th> <th>午後</th> </tr>
<tr><td>黒猫</td><td id="c11" onclick="inc('c11')"> 3</td><td id="c12" onclick="inc('c12')">6</td></tr>
<tr> <td>白猫</td> <td> 9</td> <td>4</td> </tr>
<tr> <td>三毛猫</td><td> 4</td> <td>7</td> </tr>
</table> |
科目名: コンピュータ演習A 課題: R1 番号: 9999 … 学籍番号の下4桁 氏名: 関学 太郎 作成: 20oo年oo月oo日 ---------------------------------------- 今週の演習の感想 １２３４５６７８９０１２３４５６７８９０１２３４５６７８９０ 30文字×5行以上記述すること 高校で習ったので簡単すぎた. 初めてなので操作に慣れず難しかった. もっと〜について教えて欲しい. |