Web page を作ってみる 2016/11/16 《 大事な用語と基礎知識 》 Web に関すること WWW = World Wide Web URL = Uniform Resource Locator ⇒ インターネットにおける情報の「住所（アドレス）」 「Web ページ」・「ホームページ」・ 「トップページ」の違い Web ブラウザ (browser) Web page 閲覧ソフト。簡単に「ブラウザ」ともいう。 例： Internet Explorer (IE) ＝インターネットエクスプローラ 他にも、Firefox、Google Chrome、Opera, Safari、… HTML に関すること HTML = Hyper Text Markup Language HTML ファイル HTML 文書 ＝ 中身はただの文字だけの文書 HTML 文書をブラウザで開く ⇒ web page ＝ レイアウトや画像も表示される 拡張子は「.html」または「.htm」とする。保存する際に注意。 ファイル名 top page のファイル名は「index.html」にするのが、お約束。 HTML タグ(tag) HTML 中の命令。「<」と「>」ではさんで書く。 多くの場合、範囲を開始タグ「< >」と終了タグ「</ >」ではさむ。 例： <h1>大きな見出し</h1> 使用するフォルダー名・ファイル名 日本語（全角文字）は使わない。半角英数字といくつかの半角記号（- _ ~ など）だけ を用いる。空白は入れない。 ⇒ 小文字に統一しておくと分かりやすい。 使用する文字 本文中のタグなどは半角で書く。 大文字・小文字どちらを使う？ ⇒ どちらでもよいが、どちらかに統一しておく。 本文中に機種依存文字（機種によって文字が化けるもの）は使わない。 例：半角カナ、ローマ数字（ⅠⅡⅢ…）、丸付き数字（①②③…）など ←これらは日本語 Windows PC でしか表示されない可能性がある。 本文中に html 予約文字（半角の < > & など）を使うときは、特殊文字表記をする。 例： < .... < > .... > & .... & 改行と空白 段落が変わるときは、<p>タグを使う。 または、一つの段落を<p>タグと</p>タグではさんでもよい。 本文中に改行を入れても、web 表示では無視される。 → <br>タグを使う。 半角空白を続けて入れても、web 表示では無視される。→ 半角空白は 字下げ 適当に字下げ（インデント）して書くと分かりやすい。 ― 1 ― HTML ファイル作成に関すること Web ページ作成の基本的な考え方 Web ページは色々な環境（コンピュータシステム）で使われることを考慮する。 自分で見えているように、他の人も見えているとは限らない。 → 見え方を必要以上に閲覧者に押しつけない。 見かけよりも中身を重視。 ページデザインは、「統一」、「すっきり」している方がよい。 web page を作る際は、文書の構造が重要！ 構成をはっきりさせる。 エディタを使う エディタ（editor）：テキスト入力のためのソフト。テキストエディタともいう。 例： メモ帳、TeraPad、秀丸、・・・ メモ帳を開くには、 スタート ＞ すべてのプログラム ＞ アクセサリ ＞ メモ帳 既にあるファイルは、 右クリック＞送る＞メモ帳 TeraPad を開くには、 スタート ＞ すべてのプログラム ＞ ユーティリティ ＞ TeraPad 既にあるファイルは、 右クリック＞送る＞TeraPad IE（インターネットエクスプローラ）で開いているページの場合、 右クリック＞「ソースの表示」 でも簡単に html の内容を見ることができる。 html で文書入力 <html> HTML 文書の構造 <head> 作成例参照 ⇒ ⇒ ⇒ ⇒ ⇒ ⇒ ⇒ ⇒ ⇒ ⇒ ⇒ ⇒ ⇒ ⇒ </head> ページにタイトルを付ける <title>○○○○</title> ・・・<head>部分に書く <body> 見出し(heading)を作る <h1> ～ </h1>、<h2> ～ </h2>、・・ <h6>まで 6 段階 段落(paragraph)を作る </body> </html> <p> ～ </p> 改行(break)する <br> 水平線(horizontal rule)を引く <hr> 画像(image)を表示する <img src="画像ファイル名"> src は source の略 編集と保存、確認 TeraPad やメモ帳で html ファイルを編集 → 上書き保存 ⇒ IE で［最新の情報に更新］ボタン（再読込） → ページ表示が更新される 画像ファイルに関すること ファイルの種類 ブラウザで表示できるのは、jpg、gif、png。 → bmp は表示できないものもある。 ファイルのサイズ サイズに注意 → 画像のサイズ（縦横）だけでなく、ファイルサイズにも気を使う。 必要ならば画像編集ソフト（Irfanview、Jtrim など）で調整する。 ― 2 ― 実 習 ゼミで今までに作った作品の「作品集」を作ってみよう。 ① ドキュメント内のゼミのフォルダに web page 用のフォルダを作る。 今回は、 webpage とつけておこう。 ② 今までに、アニメーション GIF、スキャナー、デジカメなどで作成・編集した画像をフォルダー にコピーして集める。 jpg、gif、png などの形式のファイルにする。（bmp は避ける。） ファイルをコピーするときは、 コピー ＆ 貼り付け または Ctrl を押しながらドラッグ （ポインタに現れる＋ の印を確認する）。 ③ 画像のファイル名を半角英数字だけのものに変えておく。 ファイルの拡張子（ ．の後ろ）は変えないようにする。 ④ TeraPad を開く。 スタート ＞ すべてのプログラム ＞ ユーティリティ ＞ TeraPad ⑤ html 文書を作成する。 裏面の作成例を参考に。 ⑥ 名前を付けて保存する。 保存する場所は画像などを集めたフォルダーにする。 → Web ページの材料を全部一箇所にまとめておく。 ファイルの名前は、半角英数字だけを使う。 拡張子は「.html」とする。 今回は、 sakuhin.html とつけておこう。 ⑦ できた sakuhin.html をダブルクリックすると、インターネットエクスプローラが開いて、 web page が表示されるはず・・・。 画像のサイズ（横・縦のピクセル数）が大きすぎるときは、Irfanview などを使ってサイ ズ変更（リサイズ）して、保存し直す。 ⑧ html 文書を TeraPad で開いて、印刷する。→ 提出。 ファイルを TeraPad で開くには、 右クリック ＞ 送る ＞ TeraPad ― 3 ― web page 作成例 head にタイトルをつける 「PC マスターゼミ My 作品集」 など 本文にタイトルをつける 仕切り線を入れる → h1 → hr ジャンルごとに見出しをつける → h2 アニメーション GIF スキャナー取り込み レタッチ作品 などなど 各ジャンルの中に作品を載せる 作品名を書く → h3 画像を貼り付ける → img 説明文を書く → p 《 HTML 作成例 》 《 web page イメージ 》 ← h1 たいとる <html> <head> <title>たいとる</title> </head> 1116999 ○山△子 ここでは・・・・ <body> <h1>たいとる</h1> アニメーション編 ← hr <p>1116999 ○山△子</p> <p>ここでは私がゼミの時間に作った作品を紹介します。 頑張って作ったのでちゃんと見てね。</p> <hr> <h2>アニメーション編</h2> <h3>作品１： ○○○○～</h3> <img src="xxxxxx.gif"> <p>これはあれあれこれこれ、・・・・・</p> ← h2 作品１：○○○○～ ← h3 これはあれあれこれこれ・・・ ← hr スキャナー編 ← h2 作品１：○○○○～ <hr> <h2>スキャナー編</h2> <h3>作品１： ○○○○～</h3> <img src="xxxxxx.jpg"> <p>これはあれあれこれこれ、・・・・・</p> ← h3 これはあれあれこれこれ・・・ 作品２：○○○○～ <h3>作品２： ○○○○～</h3> <img src="xxxxxx.jpg"> <p>これはあれあれこれこれ、・・・・・</p> ← h3 これはあれあれこれこれ・・・ <hr> <h2>レタッチ編</h2> <h3>作品１： ○○○○～</h3> <img src="xxxxxx.jpg"> <p>これはあれあれこれこれ、・・・・・</p> ← hr レタッチ編 ← h2 ： </body> </html> ― 4 ―
© Copyright 2024 Paperzz
