[目次]
HTMLとCSS | Webプログラミング!(2019年度)
HTML
- Hypertext Markup Language
- 要素, タグ, 属性, 値
- URI,絶対URL,相対URLによるリンク
- ハイパーリンク
- html,head,title,body,h1,ul,ol,li,a,img
- table, tr, th, td
- index.html (index.html.txtではない) と Directory Index
- ブラウザのなどで世の中のWebページのソースを観察できる. また, HTMLの誤りを発見するのにも使える.
- Google Chrome のとき
- Firefoxのとき Firebug, Validator Firebug add-on.ツール>Web開発>Firebug
- W3C Markup Validation Service
- "HTML Validator"
やってみよう
- ol, ul, img, a (絶対および相対指定)を含む index.html を TeraPadで作り, ブラウザで開いてみよう
- tableで表を着くってみよう.
- 下の例のように, headでUTF-8を指定する場合は, TeraPad で
- そのhtml文書と画像を WinSCP で に置いてみよう. 方法
- 参加者のページからWeb ブラウザで見てみよう. 他の人にブラウザで見てもらおう. スマートフォンや携帯で見てみよう.
- swallow上の絶対path /home/t012345/public_html/local/A.html
- URL http://swallow.math.ryukoku.ac.jp/~t012345/local/A.html
サンプル
サンプルindex.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<!-- この中はコメント. Windows などで文字コードを指定して保存できないときは UTF-8 でなく Shift_JIS で -->
<meta http-equiv="content-style-type" content="text/css" />
<link rel="stylesheet" href="plain.css" type="text/css" />
<title>かものページ</title>
</head>
<body>
<h1>かも</h1>
<p>テキストテキストテキスト</p>
<h2>まがも</h2>
<h2>かるがも</h2>
<ul>
<li id="yodogawa">淀川のかるがも</li>
<li id="setagawa">瀬田川のかるがも</li>
<li><span id="biwako">琵琶湖</span>のかるがも
<div id="chikubujima">竹生島</div>
<div id="okishima">沖島</div>
</li>
</ul>
<img src="pinga.gif" alt="Pinga"/>
<a href="second.html">かものページ</a>
<a href="http://www.a.math.ryukoku.ac.jp/~junta/">松木平先生のページ</a>
</body>
</html>
plain.css
#yodogawa {
display:none;
}
#setagawa {
background-color: red;
}
#biwako {
background-color: red;
}
#okishima {
color: green;
font-size: x-large;
}
#chikubujima {
background-color: red;
}CSS
- Cascade Style Sheet
- 属性:値
- セレクタ: 要素, クラス, id
やってみよう
- さっきのHTML文書で, フォントサイズ指定, フォアグラウンド, バックグラウンド色指定してみよう
参考
- Webアプリケーション構築入門（第2版） - 実践！Webページ制作からマッシュアップまで
p.30-50
- 奥村晴彦先生 HTML5とCSS3
- 奥村晴彦先生 はじめてのHTML5
- 奥村晴彦先生 はじめてのCSS
