Download presentation
Presentation is loading. Please wait.
1
情報伝達・WWW・ソーシャルメディア CMSとHTMLの基礎
情報リテラシ応用 情報伝達・WWW・ソーシャルメディア CMSとHTMLの基礎
2
エディターを使用する TeraPadを起動する 「テラパッドの使い方」
3
表示＞編集モード＞フォント をクリックすると フォントを変更できる
4
表示＞編集モード＞HTM（H） をクリックすると タグが色づけされる。 IEのアイコンがメニューに表示されプレビューできる。
5
HTML文章 Web ページはHTML（Hyper Text Markup Language) で記述 表示される仕組み
文字のみで構成されるため、テキストエディターやワープロで作成 Webページ作成上の注意 タグは半角英数字 タグは大文字でも小文字でも良い 半角カタカナや特殊文字は文字化けする場合がある
6
＜TITLE＞ ２年A組の紹介 ＜/TITLE＞
開始タグ 要素の内容 終了タグ 要 素 ＜FONT SIZE=“5” COLOR=“blue” > 開始タグ 属 性 属 性 要 素 値
7
拡張子（かくちょうし） ｘｘｘｘ.ｈｔｍｌ または ｙｙｙｙ.ｈｔｍ 拡張子の表示(オプション)
8
htmlの構造 DTD宣言 ＜!DOCTYPE HTML ・・・・・・・ ＞ ＜HTML＞ ＜HEAD＞
＜TITLE＞ タイトル ＜/TITLE＞ ＜/HEAD＞ ＜BODY＞ この部分に表示したい内容を書く ＜/BODY＞ ＜/HTML＞ HEAD要素 BODY要素 HTML要素 DTD宣言
9
DOCTYPE宣言 バージョン5.0 <!DOCTYPE html> 参 考 バージョン４
参 考 バージョン４ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"> バージョン３ <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 3.0//EN"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
10
HTMLの基本を理解する ＜ｈ１＞ここに見出しを記述します＜/ｈ１＞
WEBページは、「HTML」と呼ばれるルールに則って記述していくことで具体的なページが形作られていきます。 タグ名は 「＜ 」と 「＞ 」 で囲む 終了タグは 「/ 」が加わる 表示する内容をタグと終了タグで囲む ＜ｈ１＞ここに見出しを記述します＜/ｈ１＞
11
HTMLの基本を理解する タグ内に属性を記述する場合がある ＜img src＝“Photo001．Jpg”＞
12
HTMLファイルを作ってみよう まずはトップページにあたる、「index.html」を作っていきます。 HTMLタグを入力する ＜ｈｔｍｌ＞
＜ｂｏｄｙ＞ ようこそ。このホームページは、私の身近にあるさまざまな日々の記録です。 ＜/ｂｏｄｙ＞ ＜/ｈｔｍｌ＞
13
保存時にファイルの種類を選択していないと、HTMLファイルではなく、テキストファイルで保存されますので注意しましょう！
「名前をつけて保存」する ファイル名「index.html」 「ファイルの種類」を必ず「HTMLファイル」にすること ブラウザを起動する 「ファイル」メニューから「開く」を選択する index.htmlを参照し、選択して開く 保存時にファイルの種類を選択していないと、HTMLファイルではなく、テキストファイルで保存されますので注意しましょう！
14
文字を表示させるには ＜ｐ＞タグ…段落を示すためのタグ ＜div＞タグ…特定の要素、あるいは複数の要素をまとめてグループ化する ＜ｈｔｍｌ＞
＜ｂｏｄｙ＞ ＜ｐ＞ ようこそ。このホームページは、私の身近にあるさまざまな日々の記録です。 ＜/ｐ＞ ＜ｄｉｖ＞ ＜/ｄｉｖ＞ ＜/ｂｏｄｙ＞ ＜/ｈｔｍｌ＞ ＜ｐ＞タグと＜div＞タグでは、ブラウザの表示方法がことなります。＜ｐ＞タグは、その周囲に余白が与えられますが、＜div＞タグは余白が与えられません
15
ページに見出しを表示させるには 見出しとなる文字は＜ｈ＞タグを使って表示します。＜ｈ＞タグは見出しのランクが6段階あり、文字の大きさが違います ＜ｐ＞タグの部分を＜ｈ＞タグに書き換えて見出しを作ります。 ＜ｈｔｍｌ＞ ＜ｂｏｄｙ＞ ＜ｈ１＞ ＡＰＥＲＩＴＩＦ． ＜/ｈ１＞ ＜ｄｉｖ＞ ようこそ。このホームページは、私の身近にあるさまざまな日々の記録です。 ＜/ｄｉｖ＞ ＜/ｂｏｄｙ＞ ＜/ｈｔｍｌ＞
16
文字を太く表示させるには ＜ｂ＞タグ…通常の文字よりも太字で表示される ＜strong＞タグ…文字を強調したいときに使う ＜ｈｔｍｌ＞
＜ｂｏｄｙ＞ ＜ｈ１＞ ＡＰＥＲＩＴＩＦ． ＜/ｈ１＞ ＜ｄｉｖ＞ ようこそ。このホームページは、私の身近にあるさまざまな日々の記録です。 ＜/ｄｉｖ＞ ＜ｂ＞皆さん、気軽に閲覧してください＜/ｂ＞ ＜/ｂｏｄｙ＞ ＜/ｈｔｍｌ＞ ＜strong＞タグは「より強調」、＜em＞タグは「強調｝
17
文字を斜体で表示させるには ＜ｉ＞タグ…斜体で表示される ＜ｅｍ＞タグ…文字を強調したいとき（斜体） ＜ｈｔｍｌ＞ ＜ｂｏｄｙ＞ ＜ｈ１＞
ＡＰＥＲＩＴＩＦ． ＜/ｈ１＞ ＜ｄｉｖ＞ ようこそ。このホームページは、私の身近にあるさまざまな日々の記録です。 ＜/ｄｉｖ＞ ＜ｂ＞皆さん、気軽に閲覧してください＜/ｂ＞ ＜ｉ＞ここで掲載されている写真や動画は、許可なく転用しないでください＜/ｉ＞ ＜/ｂｏｄｙ＞ ＜/ｈｔｍｌ＞
18
文字に下線を引くには ＜ins＞タグ…WEBページの更新内容を記載するときに利用する ＜ｂｏｄｙ＞ ＜ｈ1＞ ＡＰＥＲＩＴＩＦ． ＜/ｈ1＞
＜ｄｉｖ＞ ようこそ。このホームページは、私の身近にあるさまざまな日々の記録です。 ＜/ｄｉｖ＞ ＜ｂ＞皆さん、気軽に閲覧してください＜/ｂ＞ ＜ｉ＞ここで掲載されている写真や動画は、許可なく転用しないでください＜/ｉ＞ ＜br /＞ ＜ｉｎｓ＞ ※このホームページは、2014年9月1日から公開しています。 ＜/ｉｎｓ＞ ＜/ｂｏｄｙ＞ ＜/ｈｔｍｌ＞
19
文字の大きさを小さくするには ＜small＞タグ…通常よりもひとまわり小さく表示される ＜ｄｉｖ＞
ようこそ。このホームページは、私の身近にあるさまざまな日々の記録です。 ＜/ｄｉｖ＞ ＜ｂ＞皆さん、気軽に閲覧してください＜/ｂ＞ ＜ｉ＞ここで掲載されている写真や動画は、許可なく転用しないでください＜/ｉ＞ ＜ｉｎｓ＞ ※このホームページは、2014年9月1日から公開しています。 ＜/ｉｎｓ＞ ＜br /＞ ＜ｓｍａｌｌ＞※「ＡＰＥＲＩＴＩＦ」とは食前酒を意味します。＜/ｓｍａｌｌ＞ ＜/ｂｏｄｙ＞ ＜/ｈｔｍｌ＞
20
ウィンドウバーに文字を表示する ＜head＞タグ…HTMLに関するさまざまな情報を記述する ＜title＞タグ…ブラウザのウィンドウバーに表示される ＜html＞ ＜head＞ ＜title＞ ホームページ「APERITIF.」で御寛ぎください ＜/title＞ ＜/head＞ ＜ｂｏｄｙ＞ ＜ｈ1＞ ＡＰＥＲＩＴＩＦ． ＜/ｈ1＞ ＜ｄｉｖ＞ ようこそ。このホームページは、私の身近にあるさまざまな日々の記録です。
21
箇条書きリストを作るには ＜ul＞タグ…連番のない箇条書きリストが作れます。箇条書きの内容は＜li＞タグで 指定します。 ＜ｈ1＞ ＡＰＥＲＩＴＩＦ． ＜/ｈ1＞ ＜ｄｉｖ＞ ようこそ。このホームページは、私の身近にあるさまざまな日々の記録です。 ＜/div＞ ＜ul＞ ＜li＞プロフィール＜/li＞ ＜li＞日記＜/li＞ ＜li＞写真＜/li＞ ＜/ul＞
22
階層のある箇条書きを作るには 字下げ箇所でキーボードのTabキーを押す ＜ul＞ ＜li＞プロフィール＜/li＞ ＜li＞日記＜/li＞ ＜li＞過去の日記はこちら＜/li＞ ＜/ul＞ ＜li＞写真＜/li＞ ＜li＞風景＜/li＞ ＜li＞動物＜/li＞ ＜li＞人物＜/li＞ ＜li＞その他＜/li＞
23
プロフィールページを作る index.htmlをとじて、新しいページを作成します。「profile.html」で保存する。
＜html＞ ＜body＞ ＜h2＞Profile＜/h2＞ ＜div＞ 最近、自宅にブロードバンド環境と呼ばれるものを導入。WEBページにも興味が あったので、これを機会に自分だけのWEBページを開設しようと日夜奮闘してい ます。 ＜/div＞ ＜/body＞ ＜/html＞
24
ページに表示されないコメントを入力する コメント文とは…「＜！--」と「--＞」で囲まれた文字はコメント文として扱われます。囲まれている文字はブラウザに表示されません。 ＜html＞ ＜body＞ ＜！-- プロフィールを紹介するページ --＞ ＜h2＞Profile＜/h2＞ ＜div＞ 最近、自宅にブロードバンド環境と呼ばれるものを導入。WEBページにも興味が あったので、これを機会に自分だけのWEBページを開設しようと日夜奮闘してい ます。 ＜/body＞ ＜/html＞
25
ページ内に区切り線を引くには profile.htmlをとじて、新しいページを作成します。「diary.html」で保存する。
＜hr＞タグ…ページ内に区切り線を加えます。 ＜html＞ ＜body＞ ＜h2＞A DIARY＜/h2＞ ＜div＞ ＜h5＞6月12日＜/h5＞ ＜div＞今日はHTMLの勉強してました。少し理解できたかな。 そして晩御飯はカツカレー。カツ専用ソースをかけるとおいしかったです。 ＜ｈｒ＞ ＜/div＞ ＜/body＞ ＜/html＞
26
ページ内の区切り線に色をつける ＜hr＞タグでcolor属性を使えば、区切り線の色が指定できます。
＜html＞ ＜body＞ ＜h2＞A DIARY＜/h2＞ ＜div＞ ＜h5＞6月12日＜/h5＞ ＜div＞今日はHTMLの勉強してました。少し理解できたかな。 そして晩御飯はカツカレー。カツ専用ソースをかけるとおいしかったです。 ＜ｈｒ color=“red”＞ ＜/div＞ ＜/body＞ ＜/html＞
27
連番付きリストを作るには ＜div＞ ＜h5＞6月12日＜/h5＞ ＜div＞今日はHTMLの勉強してました。少し理解できたかな。 そして晩御飯はカツカレー。カツ専用ソースをかけるとおいしかったです。 ＜ｈｒ color=“silver”＞ ＜/div＞ 次に勉強する順序は以下の予定です。 ＜ol＞ ＜li＞特殊文字の表示＜/li＞ ＜li＞画像のリンク＜/li＞ ＜li＞連番付きリスト＜/li＞ ＜li＞リンク＜/li＞ ＜/ol＞ ＜/body＞ ＜/html＞
28
画像を表示させるには ＜div＞ ＜h5＞6月12日＜/h5＞ ＜div＞今日はHTMLの勉強してました。少し理解できたかな。 そして晩御飯はカツカレー。カツ専用ソースをかけるとおいしかったです。 ＜br /> ＜img src=“image/photo_2014_0929_01_s．jpg”＞ ＜ｈｒ color=“silver”＞ ＜/div＞ 次に勉強する順序は以下の予定です。 ＜ol＞ ＜li＞特殊文字の表示＜/li＞ ＜li＞画像のリンク＜/li＞ ＜li＞連番付きリスト＜/li＞ ＜li＞リンク＜/li＞ ＜/ol＞
Similar presentations
