BWD06-01 ～ 1 ～ Web デザイン基礎 坪倉、伊藤 日本文理大学 先週 – ガイダンス – Ｗｅｂの歴史 –HTML 基礎 今週 について（出席と課題提出） –HTML 画像、ハイパーリンク、文字書式.

Presentation on theme: "BWD06-01 ～ 1 ～ Web デザイン基礎 坪倉、伊藤 日本文理大学 先週 – ガイダンス – Ｗｅｂの歴史 –HTML 基礎 今週 について（出席と課題提出） –HTML 画像、ハイパーリンク、文字書式."— Presentation transcript:

1 BWD06-01 ～ 1 ～ Web デザイン基礎 坪倉、伊藤 日本文理大学 先週 – ガイダンス – Ｗｅｂの歴史 –HTML 基礎 今週 –@learn について（出席と課題提出） –HTML 画像、ハイパーリンク、文字書式

2 BWD06-01 ～ 2 ～ 復習 （ファイルと、パスとアドレス） Ｗｅｂページについて – 色々なファイルが構成されて、 1 つのＷｅｂページに ファイルについて 授業用ファイルの保存について – 授業用フォルダ z:\hypertext\____________ – 日付フォルダ z:\hypertext\ ____________ \ ____________ – ＵＲＬについて – （仮に上記日付フォルダに index.html があるとして） フォルダパス ファイルパス ＵＲＬ 名称 ( 拡張子 ) 内容利用ソフト HTML, HTM HTML ソースエディタ ( メモ帳,TeraPad,Jedit 等 ) JPG,GIF 画像ペイント,Photoshop,Illustrator 等 MID,WAV 音 Sol,Protools,TWE,GarageBand 等 MOV,WM,SWF 動画像 Flash,Premier,FinalCutPro 等

3 BWD06-01 ～ 3 ～ タイトル：練習１ 本文 練習１ ファイル名 ex1.html 復習 （ＨＴＭＬはじめ） タグについて – ＨＴＭＬ： （ Hypertext Markup Language ） – ＃＃ – ： ← このタイプは、今週沢山でてくる

4 BWD06-01 ～ 4 ～ Web ページの作成 (HTML) 第１課 プログラミングの基礎 複数行の入力 段落分割と改行 ～～ –( 段落分割 ) は、改行の後に空白行を追加する。 –( 改行 ) は改行の後に空白行を追加しない – 練習１ 下記のプログラムを入力し、動作を確認しなさい。 – ファイル名 ex01.html P と BR Ｐタグで囲まれている。 １行目 ２行目 行末に BR タグがついてる １行目 ２行目

5 BWD06-01 ～ 5 ～ Web ページの作成 (HTML) 画像 画像の追加 – 主な画像ファイルの種類 GIF : Graphics Ionterchange Format – イラストに多く使用される – 使用する色の数で圧縮 256 色まで使用可能 – 可逆性圧縮 – 透過 GIF 、アニメーション GIF – 拡張子.gif JPEG : Joint Photographic Experts Group – 写真に多く使用される – 圧縮率を指定して圧縮 – フルカラー使用可能 – 不可逆性圧縮 – 拡張子.jpg 名称 ( 拡張子 ) 内容 HTML HTML ソース JPG,GIF 画像 MID,WAV 音 MOV,WM,SWF 動画像

6 BWD06-01 ～ 6 ～ Web ページの作成 (HTML) 画像 画像の掲載 – 指定したファイルの画像をページに掲載 – 練習２ 講義用画像素材のページより、一枚、画像を本日の講 義ディレクトリに保存。下記のプログラムのページを確認しな さい。 ファイル名 ： ex02.html 画像ファイル名 ： – （画像を保存する時、ファイル名に注意） パス： z:\hypertext\ URL ： http://www.nbu.ac.jp/ ~ – 練習 2α 複数の写真を掲載しなさい 画像掲載の練習 画像掲載の練習

7 BWD06-01 ～ 7 ～ Web ページの作成 (HTML) 画像 背景の変更 – タグのオプションにより、背景の色、画像を指定可能 – 単色： 色の名前 （ただし、ブラウザーによって異なる場合がある） –red, blue, white, yeallow,green,lime,aqua,gray,teal 等 練習 3 右記のプログラムのページを確認しなさい。また３種類程度の色を 試しなさい。 – ファイル名 ： ex03.html – パス： z:\hypertext\ –URL ： http://www.nbu.ac.jp/ ~ 細かな色指定の方法 –16 進数 RGB 方式 – 各色 2 桁の 16 進数表記 (00~ff) – 表記例 #00ff00 – 練習 3α 練習２のページを 16 進表記にて 色指定しなさい 背景の練習 背景の練習 #00 ff 00 R G B

8 BWD06-01 ～ 8 ～ Web ページの作成 (HTML) ハイパーリンク ハイパーリンク： 他の Web ページへのリンクを「ハイパーリンク」と呼ぶ アンカータグ 文字列 – 例） 日本文理大 練習 4 下記のプログラムのページを確認しなさい。 – ファイル名： ex01.html – パス： z:\hypertext\ –URL ： http://www.nbu.ac.jp/ ~ 練習 4α ４つ程度サイトをリス トアップし、各サイトへのリンクを 張りなさい。 練習 4α ２ タグで囲む文字 を画像に変えてみなさい ハイパーリンク ハイパーリンク 日本文理大学

9 BWD06-01 ～ 9 ～ Web ページの作成 (HTML) ハイパーリンク 絶対指定：他のサイトへのリンク、必ず http:// から始まる。 – 例： 日本文理大 – 指定アドレスは世界中で通用する 相対指定：同じサイト内でのリンク、 http:// から始めない。 – 指定アドレスは、同サイト内でだけ使える。アドレスの指定は短く済む – 例： 同じフォルダ内に site.html, page.html がある場合 – サイト – ページ 1 つ上の階層に up.html がある場合 – ページ フォルダ内にフォルダ「 down 」があり、その中に shita.html がある場合 – ページ MY PAGE

10 BWD06-01 ～ 10 ～ Web ページの作成 (HTML) 文字書式 フォントの属性（ページ全体） – フォントの色 ： 例１） 例２） – リンクの色 ： link : クリックしてない, alink : クリック中, vlink : クリック後 例） – デフォルト（標準）のフォント (basefont タグ以降の文字への指 定 ) 例） – デフォルトのサイズ (basefont タグ以降の文字への指定 ) 例） – 複数属性の設定 例）

11 BWD06-01 ～ 11 ～ Web ページの作成 (HTML) 文字書式 文章内での個々の属性の設定 – 文字書式タグによる簡単な効果 各種文字書式タグで囲む事により、属性を変更できる。 – 練習３： 左下の表を埋め、右下のソースを打ち込みページを確認しなさい。 （他に必要なタグは各自で追加すること） ファイル名： ex03.html スタイルタグ 太字 斜体 強調表示 取り消し線 中央揃え 文字書式 太字 斜体 強調表示 取り消し線 中央揃え

12 BWD06-01 ～ 12 ～ Web ページの作成 (HTML) 文字書式 文章内での個々の属性の設定 – タグ font タグでは、文章中の文字に対し、文字サイズ、 色など、細かな設定が可能となる。各種の設定には属性タグを 用いる – 例： 文字 説明属性タグ 文字サイズ size 色 color フォント font

13 BWD06-01 ～ 13 ～ 提出課題 – 私のリンク集というテーマでページを作ってくださ い。 ４項目程度のリンク 各項目に対して、コメントをつけてください。 各行の文字サイズを変更すること – 好き嫌い、利用頻度 等 コメントの文字列に好きな色をつけてください NBU NBU ： 日本文理大 Yahoo Yahoo ： ポータルサ イト Amazon Amazon : 本屋さん

14 BWD06-01 ～ 14 ～ タグのまとめ (Web ページの制作 基本タ グ ) タグ / で閉 じる ? 説明 ○ ○ 〜 ○ ○ ○

15 BWD06-01 ～ 15 ～ Web ページの作成 (HTML) プログラミングの基礎 4. ネットワーク構成と URL について nbu では、 Z:\hypertext 以下が個人のホームページ用領域として設定 URL: http://www.nbu.ac.jp / ~ ログインＩＤ / ファイル名 – 例） – 学籍番号 0124001 s – ログインＩＤ s124001 – ファイルパス Z:\hypertext\bwd\20050410\index.html –URL http://www.nbu.ac.jp/ ~ s124001/bwd/20050410/index.html ファイルパスからＵＲＬに変換してください URL http:// \→/\→/\→/\→/ フォルダパス （ディレクトリ パス） ファイルパ ス URL

16 BWD06-01 ～ 16 ～ Web ページの作成 (HTML) 画像 背景の追加 – 繰り返し画像の背景 – 背景： – 練習 3 講義用画像素材のページより、一枚、画像を本日の講義 ディレクトリに保存。下記のプログラムのページを確認しなさ い。 ファイル名 ： ex03.html 画像ファイル名 ： パス： z:\hypertext\ URL ： http://www.nbu.ac.jp/ ~ 背景画像の練習 背景画像の練習

17 BWD06-01 ～ 17 ～ Web ページの作成 (HTML) ハイパーリンク 画像への指定 ：文字列以外に画像を用いる – 画像の指定 – 例： 同一ページの別の場所へのリンク – ：アンカータグの name 属性 – 例 Link へ移動 ～色々な行があって～ ここから LINK 集です