T2V 技術 Web 製作ラボ 4/4 2012 hayashiLabo 3. T2V 技術 HTML まずは.

Presentation on theme: "T2V 技術 Web 製作ラボ 4/4 2012 hayashiLabo 3. T2V 技術 HTML まずは."— Presentation transcript:

1 T2V 技術 Web 製作ラボ 4/4 2012 hayashiLabo 3

2 T2V 技術 HTML まずは

3 HTML とは何か ホームページ 基本の HTML ここが 本文 ですね。 基本ってわけだ。 タグで囲んで文書を整える ・大文字小文字どちらでも（小文字推薦） ・本文の空白、タブ、改行は無視

4 基本の HTML テンプレート タイトル ここが本文です ・ HTML 仕様のバージョンの指定（ 1 行目） ・中身のタイプや文字コードなど指定 (meta タグ )

5 HTML タグと属性 二郎にそっくり 属性 （ Attribute ） ＝見え方などを調整できる 要素 （ Element, タグ） 値 （ Value ） コンテンツ （ Contents ） ・値はダブルクォーテーション or シングル ・属性は空白、タブ、改行が区切り

6 Web 標準 Web 標準（ Web Standards ）に則って Web ページを作ることが基本 Web 標準化団体というのがあって、そこで仕 様を決めて、勧告している W3C （ World Wide Web Consortium ） 最近はブラウザーも標準にしたがって作られ るようになってきている

7 HTML の仕様 HTML 4.01 （現在） HTML5 （次世代）

8 HTML タグ h1, h2, h3, h4, h5, h6 見出し（大きい順） フォントを大きくして前後に改行 はじめに まずは

9 HTML タグ p 段落の指定 前後に一行分の改行が入る。 入学に入社、引っ越しなど、なにかとお金の かかる新年度。 サラリーマン や学生にとって、嬉しい競争が再開しそうだ。一 度は収束するかに思えた牛丼値引き合戦の火ぶた が、再び切って落とされそうなのだ。 ・単なる改行を入れるには br を使 うこと

10 HTML タグ font フォントの指定 属性： size （大きさ）、 face （フォント名）、 color （色） 吾輩は猫である。名前はまだ無い。 ・ font タグは無くなる方向 ・スタイルシートを使う

11 HTML タグ b, i, u, s, rb... 太字、斜体、下線、消し線、ルビなど イノベーション・クリエーター って 肩書き いくらなんでも いやだー ・文字装飾はスタイルシート推奨

12 HTML タグ br 改行 単独で機能 とも書く イノベーション・クリエーターって肩書き いくらなんでもいやだー ・行間の調整には使わない方がいい

13 HTML タグ blockquote 引用・転載を示す 上下に改行が入りインデントされるのがふつう ・これは、元来、テキストの意味を指定するためのタグ で、テキスト整形のためではないのに注意 ・このように意味指定のためのタグは、 strong, address, samp などいろいろある。 ・表示のされかたはブラウザマターになる

14 HTML タグ a リンクの指定 知りたい人は ココ をクリック！ ・ a タグで囲まれたところにリンクを張る ・リンク部分はふつう青色に変わる（ブラウザマタ ー） ・相対パス、絶対パス、 mailto などがある 相対 絶対 メール（今では使わない）

15 HTML タグ a リンクの指定 ・ name 属性を使って文書の中にアンカーを打てる ・ href="#name" を使ってそのアンカーの場所へ飛べる ・ href="xxx.html#name" で別ファイルのアンカー場所にも飛 べる

16 HTML タグ 目次 竹の子の皮 キャラメル 竹の子の皮 昔、小さかったころ、裏の竹林に生えている 竹の子の皮を一枚はいできて、これに味噌をちょ っと乗せてから折りたたみ、それをちゅーちゅー 吸っていたことがあった。 キャラメル キャラメルは、小さなロウ紙で包んであるけ ど、あれは一定の折り方が決まっているのだ。

17 HTML タグ a リンクの指定 知りたい人は ココ をクリック！ ・ target 属性を使って、リンク先のウィンドウの開き方を変え られる target="_blank" のときは新しいウィンドウが開く target="_self" のときはそのウィンドウに表示

18 HTML タグ img 画像の表示 属性： alt （代替表示）、 width （横幅 pixel ）、 height （縦幅 pixel ） ・ alt を入れること ・ width, height を入れた方が 表示が速いと言われている

19 HTML タグ table, tr, td 表組み にんじん たまねぎ たけのこ さといも ・ページレイアウトには使わないこと

20 HTML タグ 属性： align, valign （表示位置）、 cellpadding 、などなど にんじん たまねぎ きゅうり たけのこ さといも しいたけ はくさい まいたけ こまつな ・ colspan と rowspan で連結 ・ width 、 height でレイアウトできるんだが

21 HTML タグ ul, li リスト 豆板醤 甜面醤 芝麻醤 沙茶醤 ・ CSS 時代でもナビゲーションボタ ン にやたら使う ・ ol というナンバリングしてくれる タグもあり ・ type 属性： disc, circle, square

22 HTML タグ pre 整形済みテキスト表示 E |------0--0---0------0--0---2-|-0--------------------------| B |----3-------------2----------|-----0--0---0--0------0-----| G |-/4-------------3------2---2-|0h1-------2-----------------| D |-----------------------------|----------------------------| A |-----------------------------|--------2------2------2-----| E |-----------------------------|---------------2------2-----| ・あんまり使わない・・・ 等幅フォントでそのまま表示

23 HTML タグ コメントアウト