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