SlideShare une entreprise Scribd logo
1  sur  16
Télécharger pour lire hors ligne
HyperText Markup Language
http://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>
”終了タグは先頭が /”
2©2009 Minoru Uchida
例外もある  <br>: 改行タグ : 単独で使う (/ を付けた終了タグ無し )
3©2009 Minoru Uchida
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
4©2009 Minoru Uchida
html ファイルをメモ帳で編集する方法
5©2009 Minoru Uchida
IE9 の場合は
「 ALT 」キーを
押す
IE9 では「ファイル」が
表示されていない
クリック
クリック
「メモ帳で編集」が無い場合
6©2009 Minoru Uchida
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
7©2009 Minoru Uchida
8©2009 Minoru Uchida
部品の作成 .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
9©2009 Minoru Uchida
リンク
 リンク
 アンカータグ  <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
絶対パス、相対パス
絶対パス
 <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
「 .. 」は自分の場所の上位ディレクトリを示す。
©2009 Minoru Uchida 12
作ってみましょう
test5.htm
©2009 Minoru Uchida 13
① 図として写真を 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 を作ってみましょう
©2009 Minoru Uchida 16

Contenu connexe

Tendances

20190424 ochiai kakunouyou
20190424 ochiai kakunouyou20190424 ochiai kakunouyou
20190424 ochiai kakunouyouShogo Horikawa
 
噴水企画Web講習会
噴水企画Web講習会噴水企画Web講習会
噴水企画Web講習会Kenta Moriuchi
 
20080823-TransformingPlainTextToHtml
20080823-TransformingPlainTextToHtml20080823-TransformingPlainTextToHtml
20080823-TransformingPlainTextToHtmlKoji SHIMADA
 
JavaScript&Firebug入門
JavaScript&Firebug入門JavaScript&Firebug入門
JavaScript&Firebug入門柴田 篤志
 

Tendances (6)

How to-write-book-by-markdown
How to-write-book-by-markdownHow to-write-book-by-markdown
How to-write-book-by-markdown
 
20190424 ochiai kakunouyou
20190424 ochiai kakunouyou20190424 ochiai kakunouyou
20190424 ochiai kakunouyou
 
噴水企画Web講習会
噴水企画Web講習会噴水企画Web講習会
噴水企画Web講習会
 
20080823-TransformingPlainTextToHtml
20080823-TransformingPlainTextToHtml20080823-TransformingPlainTextToHtml
20080823-TransformingPlainTextToHtml
 
JavaScript&Firebug入門
JavaScript&Firebug入門JavaScript&Firebug入門
JavaScript&Firebug入門
 
Html1
Html1Html1
Html1
 

En vedette

Presentación pozitojames
Presentación pozitojamesPresentación pozitojames
Presentación pozitojamesaitor6heat
 
Evaluation
EvaluationEvaluation
Evaluationharps123
 
Tasks!!!!
Tasks!!!!Tasks!!!!
Tasks!!!!ajeetrs
 
Two roads, one way #2
Two roads, one way #2Two roads, one way #2
Two roads, one way #2coastpastor
 
Electronic portfolio
Electronic portfolioElectronic portfolio
Electronic portfoliocmschlund
 
Kohti yhteistä toimintakyvyn arviointia Sillalla seminaari 0203 2012 anttila
Kohti yhteistä toimintakyvyn arviointia  Sillalla seminaari 0203 2012 anttilaKohti yhteistä toimintakyvyn arviointia  Sillalla seminaari 0203 2012 anttila
Kohti yhteistä toimintakyvyn arviointia Sillalla seminaari 0203 2012 anttilaHeidi Anttila
 
Energy Management Solutions That Reduce Costs
Energy Management Solutions That Reduce CostsEnergy Management Solutions That Reduce Costs
Energy Management Solutions That Reduce CostsBuilding Engines
 
Cropping assignment butler
Cropping assignment butlerCropping assignment butler
Cropping assignment butlerpleasured401
 
One Fat Sheep Gamification
One Fat Sheep GamificationOne Fat Sheep Gamification
One Fat Sheep GamificationCarl Pavletich
 
Ichci13 submission 104 (1)
Ichci13 submission 104 (1)Ichci13 submission 104 (1)
Ichci13 submission 104 (1)Saravana Kumar
 
A ENERXIA
A ENERXIAA ENERXIA
A ENERXIAevilig
 
もうアジャイルなんて言わないよ絶対 - Developers Summit 2012 FB -
もうアジャイルなんて言わないよ絶対 - Developers Summit 2012 FB -もうアジャイルなんて言わないよ絶対 - Developers Summit 2012 FB -
もうアジャイルなんて言わないよ絶対 - Developers Summit 2012 FB -Takao Oyobe
 
Final evaluation.1
Final evaluation.1Final evaluation.1
Final evaluation.1harps123
 

En vedette (20)

Presentación pozitojames
Presentación pozitojamesPresentación pozitojames
Presentación pozitojames
 
Evaluation
EvaluationEvaluation
Evaluation
 
Tasks!!!!
Tasks!!!!Tasks!!!!
Tasks!!!!
 
ΑΓΙΟ ΟΡΟΣ
ΑΓΙΟ ΟΡΟΣΑΓΙΟ ΟΡΟΣ
ΑΓΙΟ ΟΡΟΣ
 
Two roads, one way #2
Two roads, one way #2Two roads, one way #2
Two roads, one way #2
 
Code accesssecurity
Code accesssecurityCode accesssecurity
Code accesssecurity
 
Visual resume 2
Visual resume 2Visual resume 2
Visual resume 2
 
Electronic portfolio
Electronic portfolioElectronic portfolio
Electronic portfolio
 
Welcome!
Welcome!Welcome!
Welcome!
 
Kohti yhteistä toimintakyvyn arviointia Sillalla seminaari 0203 2012 anttila
Kohti yhteistä toimintakyvyn arviointia  Sillalla seminaari 0203 2012 anttilaKohti yhteistä toimintakyvyn arviointia  Sillalla seminaari 0203 2012 anttila
Kohti yhteistä toimintakyvyn arviointia Sillalla seminaari 0203 2012 anttila
 
Sprint review
Sprint reviewSprint review
Sprint review
 
Bab 2 06601244204
Bab 2   06601244204Bab 2   06601244204
Bab 2 06601244204
 
Energy Management Solutions That Reduce Costs
Energy Management Solutions That Reduce CostsEnergy Management Solutions That Reduce Costs
Energy Management Solutions That Reduce Costs
 
Cropping assignment butler
Cropping assignment butlerCropping assignment butler
Cropping assignment butler
 
One Fat Sheep Gamification
One Fat Sheep GamificationOne Fat Sheep Gamification
One Fat Sheep Gamification
 
Ichci13 submission 104 (1)
Ichci13 submission 104 (1)Ichci13 submission 104 (1)
Ichci13 submission 104 (1)
 
Abc2015 winterkobe
Abc2015 winterkobeAbc2015 winterkobe
Abc2015 winterkobe
 
A ENERXIA
A ENERXIAA ENERXIA
A ENERXIA
 
もうアジャイルなんて言わないよ絶対 - Developers Summit 2012 FB -
もうアジャイルなんて言わないよ絶対 - Developers Summit 2012 FB -もうアジャイルなんて言わないよ絶対 - Developers Summit 2012 FB -
もうアジャイルなんて言わないよ絶対 - Developers Summit 2012 FB -
 
Final evaluation.1
Final evaluation.1Final evaluation.1
Final evaluation.1
 

Similaire à Html

電技研Web講習
電技研Web講習電技研Web講習
電技研Web講習So Murata
 
Htmlの基本
Htmlの基本Htmlの基本
Htmlの基本SD Labo
 
html5講座 (初心者向け)
html5講座 (初心者向け)html5講座 (初心者向け)
html5講座 (初心者向け)Kohki Nakaji
 
HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5
HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5
HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5George Harada
 
Html part1
Html part1Html part1
Html part1job one
 
今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップSwapSkills
 
101210 supreme web adobe seminar Nagoya
101210 supreme web adobe seminar Nagoya101210 supreme web adobe seminar Nagoya
101210 supreme web adobe seminar Nagoyatamotsu toyoda
 

Similaire à Html (10)

電技研Web講習
電技研Web講習電技研Web講習
電技研Web講習
 
Htmlの基本
Htmlの基本Htmlの基本
Htmlの基本
 
HTML入門
HTML入門HTML入門
HTML入門
 
html5講座 (初心者向け)
html5講座 (初心者向け)html5講座 (初心者向け)
html5講座 (初心者向け)
 
HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5
HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5
HTML5など社内勉強会 Vol.1 - HTML, CSS, HTML5
 
Html part1
Html part1Html part1
Html part1
 
今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ今からハジメるHTML5マークアップ
今からハジメるHTML5マークアップ
 
101210 supreme web adobe seminar Nagoya
101210 supreme web adobe seminar Nagoya101210 supreme web adobe seminar Nagoya
101210 supreme web adobe seminar Nagoya
 
Html noise reduction
Html noise reductionHtml noise reduction
Html noise reduction
 
HTML
HTMLHTML
HTML
 

Plus de Minoru Uchida

学習力トレーニング」の普及(初等中等教育)
学習力トレーニング」の普及(初等中等教育)学習力トレーニング」の普及(初等中等教育)
学習力トレーニング」の普及(初等中等教育)Minoru Uchida
 
学習力トレーニング」の普及(企業)
学習力トレーニング」の普及(企業)学習力トレーニング」の普及(企業)
学習力トレーニング」の普及(企業)Minoru Uchida
 
学習力トレーニング」の普及(大学)
学習力トレーニング」の普及(大学)学習力トレーニング」の普及(大学)
学習力トレーニング」の普及(大学)Minoru Uchida
 
Learning based society
Learning based societyLearning based society
Learning based societyMinoru Uchida
 
学習活動の構造化とデザイン
学習活動の構造化とデザイン学習活動の構造化とデザイン
学習活動の構造化とデザインMinoru Uchida
 
学習活動の構造化とデザイン
学習活動の構造化とデザイン学習活動の構造化とデザイン
学習活動の構造化とデザインMinoru Uchida
 
学習からみた基本
学習からみた基本学習からみた基本
学習からみた基本Minoru Uchida
 
ムービーメーカー
ムービーメーカームービーメーカー
ムービーメーカーMinoru Uchida
 

Plus de Minoru Uchida (20)

名札立て
名札立て名札立て
名札立て
 
学習力トレーニング」の普及(初等中等教育)
学習力トレーニング」の普及(初等中等教育)学習力トレーニング」の普及(初等中等教育)
学習力トレーニング」の普及(初等中等教育)
 
学習力トレーニング」の普及(企業)
学習力トレーニング」の普及(企業)学習力トレーニング」の普及(企業)
学習力トレーニング」の普及(企業)
 
学習力トレーニング」の普及(大学)
学習力トレーニング」の普及(大学)学習力トレーニング」の普及(大学)
学習力トレーニング」の普及(大学)
 
Power point movie
Power point moviePower point movie
Power point movie
 
Learning based society
Learning based societyLearning based society
Learning based society
 
Contents ws
Contents wsContents ws
Contents ws
 
写真と動画
写真と動画写真と動画
写真と動画
 
学習活動の構造化とデザイン
学習活動の構造化とデザイン学習活動の構造化とデザイン
学習活動の構造化とデザイン
 
学習活動の構造化とデザイン
学習活動の構造化とデザイン学習活動の構造化とデザイン
学習活動の構造化とデザイン
 
学習からみた基本
学習からみた基本学習からみた基本
学習からみた基本
 
ムービーメーカー
ムービーメーカームービーメーカー
ムービーメーカー
 
ナレーション
ナレーションナレーション
ナレーション
 
Producer
ProducerProducer
Producer
 
部品の作成
部品の作成部品の作成
部品の作成
 
E ppt
E pptE ppt
E ppt
 
我子を分析3
我子を分析3我子を分析3
我子を分析3
 
我子を分析2
我子を分析2我子を分析2
我子を分析2
 
我子を分析1
我子を分析1我子を分析1
我子を分析1
 
我子を分析1
我子を分析1我子を分析1
我子を分析1
 

Html

  • 1. HyperText Markup Language http://ja.wikipedia.org/wiki/HyperText_Markup_Language HTML タグ説明のホームページ例 http://heo.jp/tag/  1©2009 Minoru Uchida
  • 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
  • 5. html ファイルをメモ帳で編集する方法 5©2009 Minoru Uchida IE9 の場合は 「 ALT 」キーを 押す IE9 では「ファイル」が 表示されていない クリック クリック
  • 6. 「メモ帳で編集」が無い場合 6©2009 Minoru Uchida IE9 の場合 メモ帳を選択 しておけば
  • 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
  • 9. テーブル <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 9©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 「 .. 」は自分の場所の上位ディレクトリを示す。
  • 12. ©2009 Minoru Uchida 12 作ってみましょう test5.htm
  • 13. ©2009 Minoru Uchida 13 ① 図として写真を ppt に挿入 (20090310025.JPG) して大きさ調整 ② 図として写真を保存 ( たとえば png で ) ③ それを html に入れてみましょう ④ 元のままのファイルを付けたらどうなるか確認してみましょう   test6.htm
  • 14. デザインは CSS で設定  データ本体は html 画面例 css 例 css ファイル名を変えてしまうと ?(css 無し )
  • 15. 簡単なプログラムを入れたい  以下のような html はどう動くか ? <html> <head> <title>java スクリプト </title> </head> <body> <FORM> <INPUT TYPE=button VALUE=" スクリプト " onClick=“alert(‘ ’一般的に警告メッセージ )”> </FORM> </body> </html> 例 1 例 2 例 3