Contenu connexe
Plus de Minoru Uchida (20)
Html
- 2. HTML とは?
Web ページの正体
実は文字列で記述されたテキスト文書
タグの基礎
タグ : 表示等の方法を設定する
タグの表記
必ず開始タグと終了タグがある
例: <h1> 自己紹介のページ </h1>
例外もある <br>: 改行タグ
タグの入れ子
タグの中にさらにタグを指定することができる
例: <h1><font color=“#ff0000> 自己紹介 </font> の
ページ </h1>
”終了タグは先頭が /”
2©2009 Minoru Uchida
- 3. 例外もある <br>: 改行タグ : 単独で使う (/ を付けた終了タグ無し )
3©2009 Minoru Uchida
XHTML 以降は
・終了タグが必ず必要: <br> は以下のどちらかでなければならない
<br> </br>
<br />
( 現在使われるブラウザは通常どちらでも正常に表示する )
今後のために、今から作るページは必ず終了タグを付けて作成
・タグは全て小文字で書くこと
( 現在使われるブラウザは通常大文字でも正常に表示することが多い )
- 4. 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
4©2009 Minoru Uchida
- 7. 画像
画像の挿入
イメージタグ <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
7©2009 Minoru Uchida
- 10. リンク
リンク
アンカータグ <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.htm
10©2009 Minoru Uchida
- 11. 絶対パス、相対パス
絶対パス
<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
upf
sub
main
「 .. 」は自分の場所の上位ディレクトリを示す。
- 13. ©2009 Minoru Uchida 13
① 図として写真を ppt に挿入 (20090310025.JPG) して大きさ調整
② 図として写真を保存 ( たとえば png で )
③ それを html に入れてみましょう
④ 元のままのファイルを付けたらどうなるか確認してみましょう
test6.htm
- 15. 簡単なプログラムを入れたい
以下のような html はどう動くか ?
<html>
<head>
<title>java スクリプト </title>
</head>
<body>
<FORM>
<INPUT TYPE=button VALUE=" スクリプト "
onClick=“alert(‘ ’一般的に警告メッセージ )”>
</FORM>
</body>
</html>
例 1
例 2
例 3