name

T2V技術
Web製作ラボ
3
4/4 2012
hayashiLabo
T2V技術
HTML
まずは
HTMLとは何か
タグで囲んで文書を整える
<html>
<head>
<title>ホームページ</title>
</head>
<body>
<h1>基本のHTML</h1>
<p>ここが<b>本文</b>ですね。
基本ってわけだ。</p>
</body>
</html>
・大文字小文字どちらでも（小文字推薦）
・本文の空白、タブ、改行は無視
基本のHTMLテンプレート
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=shift-jis">
<title>タイトル</title>
</head>
<body>
ここが本文です
</body>
</html>
・HTML仕様のバージョンの指定（1行目）
・中身のタイプや文字コードなど指定(metaタグ)
HTMLタグと属性
<p align="center">二郎にそっくり</p>
要素
（Element, タグ）
値
（Value）
属性
（Attribute）
＝見え方などを調整できる
コンテンツ
（Contents）
・値はダブルクォーテーションorシングル
・属性は空白、タブ、改行が区切り
Web標準
Web標準（Web Standards）に則ってWebペ
ージを作ることが基本
• Web標準化団体というのがあって、そこで仕様を
決めて、勧告している
• W3C（World Wide Web Consortium）
• 最近はブラウザーも標準にしたがって作られる
ようになってきている
HTMLの仕様
HTML 4.01
HTML5
（現在）
（次世代）
HTMLタグ
h1, h2, h3, h4, h5, h6
見出し（大きい順）
フォントを大きくして前後に改行
<h1>はじめに</h1>
<h2>まずは</h2>
HTMLタグ
p
段落の指定
前後に一行分の改行が入る。
<p>入学に入社、引っ越しなど、なにかとお金のかかる
新年度。</p><p align="right">サラリーマンや学生に
とって、嬉しい競争が再開しそうだ。一度は収束する
かに思えた牛丼値引き合戦の火ぶたが、再び切って
落とされそうなのだ。</p>
・単なる改行を入れるにはbrを使
うこと
HTMLタグ
font
フォントの指定
属性： size（大きさ）、 face（フォント名）、 color（色）
<font size="7" face="HG行書体" color="red">
吾輩は猫である。名前はまだ無い。
</font>
・fontタグは無くなる方向
・スタイルシートを使う
HTMLタグ
b, i, u, s, rb...
太字、斜体、下線、消し線、ルビなど
<u>イノベーション・クリエーター</u>って<i>肩書き</i>
いくらなんでも<b>いやだー</b>
・文字装飾はスタイルシート推奨
HTMLタグ
br
改行
単独で機能
<br />とも書く
イノベーション・クリエーターって肩書き<br>いくらなんでもいやだー
・行間の調整には使わない方がいい
HTMLタグ
blockquote
引用・転載を示す
上下に改行が入りインデントされるのがふつう
・これは、元来、テキストの意味を指定するためのタグで、テキ
スト整形のためではないのに注意
・このように意味指定のためのタグは、strong, address, samp
などいろいろある。
・表示のされかたはブラウザマターになる
HTMLタグ
a
リンクの指定
知りたい人は<a href="coco.html">ココ</a>をクリック！
・aタグで囲まれたところにリンクを張る
・リンク部分はふつう青色に変わる（ブラウザマター）
・相対パス、絶対パス、mailtoなどがある
<a href="coco.html">相対</a>
<a href="http://hayashimasaki.net/index.html">絶対</a>
<a href="mailto:[email protected]">メール（今では使わない）</a>
HTMLタグ
a
リンクの指定
・name属性を使って文書の中にアンカーを打てる
・href="#name"を使ってそのアンカーの場所へ飛べる
・href="xxx.html#name"で別ファイルのアンカー場所にも飛べる
HTMLタグ
<h5>目次</h5>
<a href="#1">竹の子の皮</a><br>
<a href="#2">キャラメル</a><br>
<a name="1"><h2>竹の子の皮</h2><a>
<p>昔、小さかったころ、裏の竹林に生えている竹の
子の皮を一枚はいできて、これに味噌をちょっと乗せ
てから折りたたみ、それをちゅーちゅー吸っていたこと
があった。</p>
<a name="2"><h2>キャラメル</h2></a>
<p>キャラメルは、小さなロウ紙で包んであるけど、あ
れは一定の折り方が決まっているのだ。</p>
HTMLタグ
a
リンクの指定
知りたい人は<a href="coco.html" target="_blank">コ
コ</a>をクリック！
・target属性を使って、リンク先のウィンドウの開き方を変えられる
target="_blank"のときは新しいウィンドウが開く
target="_self"のときはそのウィンドウに表示
HTMLタグ
img
画像の表示
属性： alt（代替表示）、 width（横幅pixel）、 height（縦幅pixel）
<img src="china.jpg">
<img src="china.jpg" alt="写真１">
<img src="china.jpg" alt="写真１", width="" height="">
・altを入れること
・width, heightを入れた方が
表示が速いと言われている
HTMLタグ
table, tr, td
表組み
<table>
<tr>
<td>にんじん</td><td>たまねぎ</td>
</tr>
<tr>
<td>たけのこ</td><td>さといも</td>
</tr>
</table>
・ページレイアウトには使わないこと
HTMLタグ
属性： align, valign（表示位置）、 cellpadding、などなど
<table border="1" cellpadding="10" width="300" >
<tr bgcolor="#ff0000">
<td>にんじん</td><td>たまねぎ</td><td>きゅうり</td>
</tr>
<tr>
<td>たけのこ</td><td>さといも</td><td>しいたけ</td>
</tr>
<tr>
<td>はくさい</td><td>まいたけ</td><td>こまつな</td>
</tr>
</table>
・colspanとrowspanで連結
・width、heightでレイアウトできるんだが
HTMLタグ
ul, li
リスト
<ul>
<li>豆板醤</li>
<li>甜面醤</li>
<li>芝麻醤</li>
<li>沙茶醤</li>
</ul>
・CSS時代でもナビゲーションボタン
にやたら使う
・olというナンバリングしてくれる
タグもあり
・type属性： disc, circle, square
HTMLタグ
pre
整形済みテキスト表示
等幅フォントでそのまま表示
<pre>
E |------0--0---0------0--0---2-|-0-------------------B |----3-------------2----------|-----0--0---0--0----G |-/4-------------3------2---2-|0h1-------2---------D |-----------------------------|--------------------A |-----------------------------|--------2------2----E |-----------------------------|---------------2-----</pre>
・あんまり使わない・・・
HTMLタグ

コメントアウト

Download Report