HTML1(Intro)
html入門
GUI（Graphical User Interface)による操作法の直観的な理解と同様に， CUI(Character User Interface)においても，メタファーによって 操作法を推測することができる．プログラミングにおいては このようなCUIによる操作が作業の大半を占めるため，その習得が スキルの基本となる．
ここではhtml(Hyper Text MarkUp Language)を題材にCUIでの コンテンツ作成スキルを身につける．
html(作業)
- Cygwinを開く
- touch first.html
- emacs first.html
- インターネットエクスプローラから C:\cygwin\home\Owner\html\tmp.htmlを開く．
最初のhtml.
>|html| <html>
<head> <title> Cafe Kobe </title> </head>
<body> <h1> Cafe Kobe </h1> <h2> Blend, $1.00 </h2> <p> smooth and mild coffee </p> </body>
</html>
| < |
html(構造)
htmlを初めとしたコンピュータに理解させる言語には厳密な文法がある． これをつねに意識しないとエラーがでてうまく表示されない．
- 要素とタグ
- 見出しや段落などの部品を「要素」という．その目印に「タグ」をつける．
>|html| <p> これは段落(paragraph)を表わすタグです．</p> 開始タグ 内容 終了タグ
| < |
- 入れ子
- タグを入れ子にするときには決して互い違いにしてはいけない．
- 属性
- 要素に，より詳細な情報を付け加える．
>|html| <h1 align="center">見出し(header)を真ん中(center)揃え(align)に．</h1> 属性名 属性値
| < |
style
カッコよく見せるためには，styleを使う． >|html| <html>
<head>
<title> Cafe Sanda </title>
<style type="text/css">
body {
background-color: #d2b48c;
margin-left: 20%;
margin-right: 20%;
border: 1px dotted gray;
padding: 10px 10px 10px 10px;
font-family: sans-serif;
}
</style>
</head>
<body> <h1> Cafe Sanda </h1> <h2> Blend, $1.30 </h2> <p> smooth and mild coffees from Brazil.</p> </body>
</html>
| < |
さらに統一的なスタイル指定をまとめておくためにcss(Cascading Style Sheets)を使う．
Keyword(s):
References:[FirstYearEducation]