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