情報スキル活用 第２週 基礎技術ー２ ： Ｗｅｂページの基本形
フリーソフト一覧 Webページの制作にあたって作業に使用するPCに組み込んでおくと 便利なフリーのソフトの所在をあげておきます。 (1) HTMLエディター ： Cresent Eve 所在 http://www.kashim.com/eve/ (2) 画像編集 ： GIMP 2 所在 http://gimp.softonic.jp/ (3) アニメ画像作成 : Giam 所在 http://furumizo.net/tsu/giamd.htm (4) 画像透過 : GP_10days 所在 http://www.vector.co.jp/soft/dl/win95/art/se479311.html (5) 画像カッター Snipping Tool ： Windowsのアクセサリ一覧 FunFunCutter ： http://www.vector.co.jp/magazine/softnews/100119/n1001191.html (6) ファイル解凍 : Lhaplus 所在 http://www.vector.co.jp/soft/dl/win95/util/se169348.html (7) テキストエディター : TeraPad 所在 http://www5f.biglobe.ne.jp/~t-susumu/library/tpad.html
開発環境の設定 開発環境の設定 これから、講義の進展に伴って、２段階（２種類）のWebページを作ります。 これらの作品を保存するために、つぎの２種類のﾌｫﾙﾀﾞを作りましょう。 「Kiso」と「Seisaku」の二つです。 3
Webページ作成 PCの画面上にWebコードを入力するための テキストエディター Terapad を開き、右のコードをタイプして、 ファイル名 sakuhin_01.html として、ﾌｫﾙﾀﾞ「Kiso」内に保存しなさい。 そのファイルを起動すれば、 閲覧ソフト（IE) が開きます。 <!DOCTYPE html> <html> </html>
① タイプして ② ﾒﾆｭｰ「ﾌｧｲﾙ」から「名前を付けて保存」 ③ ﾌｫﾙﾀﾞ「Kiso」の中に ﾌｧｲﾙ名 ： sakuhin_01.html で保存します。
sakuhin_01.htmlを起動 拡張子「.html」は 閲覧ｿﾌﾄ「IE」に関連付けられている。 Webページの内容（コンテンツ）表示域
準備 ： Terapad と IE の画面を並べて表示 <html> と </html> の間に を挿入
HTML文書 文書型宣言 <!DOCTYPE…… WebページはHTMLというプログラム言語で記述します。 H ： Hyper ハイパー T ： Text テキスト M ： Markup マークアップ L ： Language ランゲージ 文章の構造や見栄えに関する指定を 文章とともにテキストファイルに記述するための言語 をいい、 この言語で記述されたものをHTML文書といいます。 HTMLの最新仕様の詳細については、次回講義で説明します。
HTML文書を構成する要素 HTML文書（Webページ）は、文書や画像を表現する要素で構成されています。 要素は、つぎの形をしています。 ＜開始タグ＞［内容］＜／終了タグ＞ タグは具体的には、要素名が使われます。 たとえば、比喩的に表現すれば、つぎのように説明できます。 ＜一番大きい文字でタイトル表示＞ ← 開始 この部分は大きい文字のタイトルだ！ ← 内容 ＜／一番大きい文字でタイトル表示＞ ← 終了
html要素，head要素，body要素について ｈｔｍｌ要素の 開始タグ（<html>）は、文書の最初の行 終了タグ（</html>）は、文書の最終の行 を表します。 <html> ： </html>
html要素，head要素，body要素について body要素より前に記述し、Webページの制御を司る他の要素を記述します。 <head> : ← 画面を制御する要素を記述 </head>
html要素，head要素，body要素について head要素に続いて記述し、Webページの画面に表示されるデータの要素を記述します。 <head> : </head> <body> ： ← 文章や画像、他ページへのリンクなど </body>
Webページ画面のタイトルバー
Webページへの文章表示 IE画面に表示される。
HTMLエディター「Crescent Eve」で作成した例 プレビュー画面 HTML入力画面