html

HyperText Markup Languagehttp://ja.wikipedia.org/wiki/HyperText_Markup_Language

HTML タグ説明のホームページ例http://heo.jp/tag/　

1©2009 Minoru Uchida

HTML とは？ Web ページの正体

実は文字列で記述されたテキスト文書タグの基礎

タグ : 表示等の方法を設定するタグの表記

必ず開始タグと終了タグがある　　　例： <h1> 自己紹介のページ </h1> 例外もある　 <br>: 改行タグ

タグの入れ子タグの中にさらにタグを指定することができる

例： <h1><font color=“#ff0000> 自己紹介 </font> のページ </h1>

終了タグは先頭が” /”


例外もある　 <br>: 改行タグ : 単独で使う (/ を付けた終了タグ無し )


XHTML 以降は

・終了タグが必ず必要： <br> は以下のどちらかでなければならない <br> </br> <br />( 現在使われるブラウザは通常どちらでも正常に表示する )今後のために、今から作るページは必ず終了タグを付けて作成

・タグは全て小文字で書くこと( 現在使われるブラウザは通常大文字でも正常に表示することが多い )

HTML の作成基本タグ

HTML 文書　 <html> ヘッダ　 <head> タイトル　 <title> 本文　 <body>

保存拡張子は html または htm

<html> <head> <title> タイトル </title> </head><body>ここに表示したい文字を書く</body></html>

<html> <head> <title> タイトル </title> </head><body>ここに表示したい文字を書く</body></html>

test1.htm


html ファイルをメモ帳で編集する方法


IE9 の場合は「 ALT 」キーを

押すIE9 では「ファイル」が表示されていない

クリック

クリック

「メモ帳で編集」が無い場合


IE9 の場合

メモ帳を選択しておけば

画像画像の挿入

イメージタグ　 <img>

属性と値例： <img src=“xxx.jpg” />

属性は色々ある半角スペースで区切り、並べて記述。属性の順序は問わない。

例： <img src=“xxx.jpg” width=“xxx” height=“xxx” />

属性

値※ 属性の値は、「“」または「‘」でくくる

<html> <head> <title> タイトル </title> </head><body>写真 <img src=“1.jpg” /></body></html>

<html> <head> <title> タイトル </title> </head><body>写真 <img src=“1.jpg” /></body></html>

test2.htm



部品の作成 .ppt

テーブル<htlm><head><title>table</title></head><body><h1> テーブル </h1><table border="1"> <tr> <td> 枠 1 データ </td> <td> 枠 2 データ </td> <td> 枠 3 データ </td> </tr> <tr> <td>2 行目データ </td> <td>2 行目データ </td> <td>2 行目データ </td> </tr></table> </body></html>

Test3.htm


リンクリンク

アンカータグ　 <a> 例： <a href=“xxx.html”> リンク </a>

絶対パスと相対パス

<html> <head> <title> タイトル </title> </head><body>写真 <br><a href=http://www.code.u-air.ac.jp/><img src=“1.jpg /></a></body></html>

<html> <head> <title> タイトル </title> </head><body>写真 <br><a href=http://www.code.u-air.ac.jp/><img src=“1.jpg /></a></body></html>

test4.htm10©2009 Minoru Uchida

絶対パス、相対パス絶対パス <a href=“http://www.a.ac.jp/main/1.jpg> 写真 </a>

index.htm からみると自ディレクトリー内 <a href=“1.jpg”> 写真 </a>自分の下のディレクトリ <a href=“sub/3.jpg”> 写真 </a>自分の外のディレクトリ <a href=“../upf/3.jpg”> 写真 </a>

©2009 Minoru Uchida 11

index.htm

3.jpg 1.jpg 2.jpg

upfsub

main

「 .. 」は自分の場所の上位ディレクトリを示す。


作ってみましょう

test5.htm


① 図として写真を ppt に挿入 (20090310025.JPG) して大きさ調整② 図として写真を保存 ( たとえば png で )③ それを html に入れてみましょう④ 元のままのファイルを付けたらどうなるか確認してみましょう

test6.htm

デザインは CSS で設定データ本体は html

画面例 css 例

css ファイル名を変えてしまうと ?(css 無し )

簡単なプログラムを入れたい以下のような html はどう動くか ?

<html> <head> <title>java スクリプト </title> </head> <body> <FORM> <INPUT TYPE=button VALUE=" スクリプト " onClick=“alert(‘ 一般的に警告メッセージ’ )”> </FORM>

</body></html>

例 1

例 2

例 3

課題　自己紹介の html を作ってみましょう


html

Documents