web デザイン基礎 坪倉、伊藤 日本文理大学
DESCRIPTION
Web デザイン基礎 坪倉、伊藤 日本文理大学. 先週 ガイダンス Ｗｅｂの歴史 HTML 基礎 今週 @learn について（出席と課題提出） HTML 画像、ハイパーリンク、文字書式. 復習 （ファイルと、パスとアドレス）. Ｗｅｂページについて 色々なファイルが構成されて、 1 つのＷｅｂページに ファイルについて 授業用ファイルの保存について 授業用フォルダ z:\hypertext\____________ 日付フォルダ z:\hypertext\ ____________ \ ____________ ＵＲＬについて - PowerPoint PPT PresentationTRANSCRIPT
BWD06-01 ～ 1～
Web デザイン基礎坪倉、伊藤
日本文理大学
先週–ガイダンス–Ｗｅｂの歴史–HTML 基礎
今週–@learn について（出席と課題提出）–HTML 画像、ハイパーリンク、文字書式
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 等
BWD06-01 ～ 3～
<html><head> <title> タイトル：練習１</title></head><body>本文</body></html>
練習１ ファイル名 ex1.html
復習（ＨＴＭＬはじめ）
• タグについて– ＨＴＭＬ： （ Hypertext Markup Language ）– < ＊ > ＃＃ </ ＊ >– < ＊ > ： ← このタイプは、今週沢山でてくる
BWD06-01 ～ 4～
Web ページの作成 (HTML)第１課 プログラミングの基礎複数行の入力段落分割と改行
• <p> ～～ </p>– ( 段落分割 ) は、改行の後に空白行を追加する。
•
• <br>– ( 改行 ) は改行の後に空白行を追加しない
– 練習１ 下記のプログラムを入力し、動作を確認しなさい。– ファイル名 ex01.html <html>
<head> <title>P と BR</title> </head> <body><P> Ｐタグで囲まれている。 </P><P> １行目２行目 </P>行末に BR タグがついてる <br>１行目 <br> ２行目 <br> </body></html>
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 動画像
BWD06-01 ～ 6～
Web ページの作成 (HTML)画像
• 画像の掲載– <img> 指定したファイルの画像をページに掲載
– 練習２ 講義用画像素材のページより、一枚、画像を本日の講義ディレクトリに保存。下記のプログラムのページを確認しなさい。• ファイル名 ： ex02.html• 画像ファイル名 ：
– （画像を保存する時、ファイル名に注意）• パス： z:\hypertext\• URL ： http://www.nbu.ac.jp/ ~
– 練習 2α 複数の写真を掲載しなさい
<html> <head> <title> 画像掲載の練習 </title> </head><body>画像掲載の練習 <br><img src=“ 画像ファイル名“ ></body></html>
BWD06-01 ～ 7～
Web ページの作成 (HTML)画像
• 背景の変更– <body> タグのオプションにより、背景の色、画像を指定可能– 単色： <body bgcolor=“ 色指定” >
• 色の名前（ただし、ブラウザーによって異なる場合がある）– 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 <body bgcolor=“#00ff00”>– 練習 3α 練習２のページを 16進表記にて
色指定しなさい
<html> <head> <title> 背景の練習 </title
> </head><body bgcolor="red">背景の練習 <br></body></html>
#00 ff 00
R G B
BWD06-01 ～ 8～
Web ページの作成 (HTML)ハイパーリンク
• ハイパーリンク：他のWeb ページへのリンクを「ハイパーリンク」と呼ぶ
• アンカータグ <a> 文字列 </a>– 例） <a href=”http://www.nbu.ac.jp”> 日本文理大 </a>
• 練習 4 下記のプログラムのページを確認しなさい。– ファイル名： ex01.html
– パス： z:\hypertext\
– URL ： http://www.nbu.ac.jp/ ~
• 練習 4α ４つ程度サイトをリストアップし、各サイトへのリンクを張りなさい。
• 練習 4α２ <a> タグで囲む文字を画像に変えてみなさい
<html> <head> <title> ハイパーリンク </title> </head><body>ハイパーリンク <br><a href="http://www.nbu.ac.jp"> 日本文理大学 </
a></body></html>
BWD06-01 ～ 9～
Web ページの作成 (HTML)ハイパーリンク
• 絶対指定：他のサイトへのリンク、必ず http://から始まる。– 例： <a href=”http://www.nbu.ac.jp”> 日本文理大 </a>– 指定アドレスは世界中で通用する
• 相対指定：同じサイト内でのリンク、 http://から始めない。– 指定アドレスは、同サイト内でだけ使える。アドレスの指定は短く済む– 例：
• 同じフォルダ内に site.html, page.html がある場合– <a href=”site.html”>サイト </a>– <a href=”page.html”> ページ </a>
• 1つ上の階層に up.html がある場合– <a href=”../page.html”> ページ </a>
• フォルダ内にフォルダ「 down」があり、その中に shita.html がある場合– <a href=”down/page.html”> ページ </a>
MY PAGE
BWD06-01 ～ 10～
Web ページの作成 (HTML)文字書式• フォントの属性（ページ全体）
– フォントの色 ： <body text=“ 色指定” >
• 例１） <body text=“red”>
• 例２） <body text=“#ff0000”>
– リンクの色： <body link=“ 色指定” alink=“ 色指定” vlink=“ 色指定” >
• link : クリックしてない , alink : クリック中 , vlink : クリック後• 例） <body link=“blue” alink=“#ff0000” vlink=“#00ff00”>
– デフォルト（標準）のフォント (basefont タグ以降の文字への指定 )
• 例） <basefont face=“verdana, helvetica, arial”>
– デフォルトのサイズ (basefont タグ以降の文字への指定 )
• 例） <basefont size=“4”>
– 複数属性の設定• 例） <basefont face=“ “ color=“ “ size=“ “>
BWD06-01 ～ 11～
Web ページの作成 (HTML)文字書式• 文章内での個々の属性の設定
– 文字書式タグによる簡単な効果• 各種文字書式タグで囲む事により、属性を変更できる。
– 練習３：• 左下の表を埋め、右下のソースを打ち込みページを確認しなさい。• （他に必要なタグは各自で追加すること）• ファイル名： ex03.html
スタイル タグ太字斜体強調表示取り消し線中央揃え
文字書式 <br>
<b>太字 </b>
<i>斜体 </i>
<strong>強調表示 </strong>
<s>取り消し線 </s>
<center>中央揃え </center>
BWD06-01 ～ 12～
Web ページの作成 (HTML)文字書式• 文章内での個々の属性の設定
– <font> タグ font タグでは、文章中の文字に対し、文字サイズ、色など、細かな設定が可能となる。各種の設定には属性タグを用いる
– 例： <font color=“#0000ff” size=“+1”> 文字 </font>
説明 属性タグ文字サイズ size
色 color
フォント font
BWD06-01 ～ 13～
提出課題– 私のリンク集というテーマでページを作ってくださ
い。• ４項目程度のリンク• 各項目に対して、コメントをつけてください。• 各行の文字サイズを変更すること
– 好き嫌い、利用頻度 等• コメントの文字列に好きな色をつけてください
NBU ： 日本文理大
Yahoo ： ポータルサイト
Amazon : 本屋さん
BWD06-01 ～ 14～タグのまとめ (Web ページの制作 基本タグ )
タグ / で閉じ
る ?説明
<title> ○
<body> ○
< h1>〜 <h6>
○
<br>
<p>
<li>
<ul> ○
<ol> ○
<!-- -->
BWD06-01 ～ 15～
Web ページの作成 (HTML)プログラミングの基礎
4. ネットワーク構成と URL について• nbu では、 Z:\hypertext以下が個人のホームページ用領域として設定
• URL: http://www.nbu.ac.jp/ ~ ログインＩＤ / ファイル名– 例）– 学籍番号 0124001– ログインＩＤ ss124001– ファイルパス Z:\hypertext\bwd\20050410\index.html
– URL http://www.nbu.ac.jp/ ~s124001/bwd/20050410/index.html
• ファイルパスからＵＲＬに変換してください• URL http://
\\→→//
フォルダパス（ディレクトリパス）
ファイルパス
URL
BWD06-01 ～ 16～
Web ページの作成 (HTML)画像
• 背景の追加– 繰り返し画像の背景– 背景： <body background=“ 画像ファイル名” >– 練習 3 講義用画像素材のページより、一枚、画像を本日の講
義ディレクトリに保存。下記のプログラムのページを確認しなさい。• ファイル名 ： ex03.html• 画像ファイル名 ： • パス： z:\hypertext\• URL ： http://www.nbu.ac.jp/ ~
<html> <head> <title> 背景画像の練習 </title> </head><body background=“ 画像ファイル
名” >背景画像の練習 <br></body></html>
BWD06-01 ～ 17～
Web ページの作成 (HTML)ハイパーリンク
• 画像への指定：文字列以外に画像を用いる– <a href=“ “> 画像の指定 </a>– 例： <a href=“http://www.nbu.ac.jp”><img src=“photo.jpg”></a>
• 同一ページの別の場所へのリンク– <a name=“ “> ：アンカータグの name属性– 例
<a href=“#link”>Linkへ移動～色々な行があって～<a name=“link”> ここから LINK 集です <
/a>