ppt - 日本文理大学

Webデザイン基礎
坪倉、伊藤
日本文理大学
先週
–ガイダンス
–Ｗｅｂの歴史
–HTML基礎
今週
–@learnについて（出席と課題提出）
–HTML 画像、ハイパーリンク、文字書式
BWD06-01 ～1～
BWD06-01 ～2～
復習（ファイルと、パスとアドレス）
• Ｗｅｂページについて
– 色々なファイルが構成されて、1つのＷｅｂページに
• ファイルについて
名称(拡張子)
内容
利用ソフト
HTML, HTM
HTMLソース
エディタ(メモ帳,TeraPad,Jedit等)
JPG,GIF
画像
ペイント,Photoshop,Illustrator等
MID,WAV
音
Sol,Protools,TWE,GarageBand等
MOV,WM,SWF
動画像
Flash,Premier,FinalCutPro等
• 授業用ファイルの保存について
– 授業用フォルダ z:\hypertext\____________
– 日付フォルダ
z:\hypertext\ ____________ \ ____________
– ＵＲＬについて
– （仮に上記日付フォルダにindex.htmlがあるとして）
• フォルダパス
• ファイルパス
• ＵＲＬ
BWD06-01 ～3～
復習（ＨＴＭＬはじめ）
• タグについて
– ＨＴＭＬ：（ Hypertext Markup Language ）
– <＊> ＃＃ </＊>
– <＊> ： ← このタイプは、今週沢山でてくる
練習１ファイル名 ex1.html
<html>
<head>
<title>タイトル：練習１</title>
</head>
<body>
本文
</body>
</html>
BWD06-01 ～4～
Webページの作成(HTML)
第１課プログラミングの基礎
複数行の入力
段落分割と改行
• ～～
– (段落分割)は、改行の後に空白行を追加する。
•
•
 
– (改行)は改行の後に空白行を追加しない
–
–
練習１下記のプログラムを入力し、動作を確認しなさい。
ファイル名 ex01.html
<html>
<head>
<title>PとBR</title>
</head>
<body>
Ｐタグで囲まれている。
１行目
２行目
行末に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>
画像掲載の練習 
<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進表記にて
色指定しなさい
#00 ff 00
RGB
<html>
<head>
<title>背景の練習</title>
</head>
<body bgcolor="red">
背景の練習 
</body>
</html>
Webページの作成(HTML)
BWD06-01 ～8～
ハイパーリンク
•
ハイパーリンク：他のWebページへのリンクを「ハイパーリンク」と呼ぶ
•
アンカータグ <a>文字列</a>
– 例）<a href=”http://www.nbu.ac.jp”>日本文理大</a>
•
練習4 下記のプログラムのページを確認しなさい。
– ファイル名： ex01.html
– パス： z:\hypertext\
– URL： http://www.nbu.ac.jp/ ~
<html>
•
練習4α ４つ程度サイトをリス
<head>
トアップし、各サイトへのリンクを
<title>ハイパーリンク</title>
</head>
張りなさい。
•
練習4α２ <a>タグで囲む文字
ハイパーリンク 
を画像に変えてみなさい
<a href="http://www.nbu.ac.jp">日本文理大学</a>
<body>
</body>
</html>
Webページの作成(HTML)
BWD06-01 ～9～
ハイパーリンク
• 絶対指定：他のサイトへのリンク、必ずhttp://から始まる。
– 例：<a href=”http://www.nbu.ac.jp”>日本文理大</a>
– 指定アドレスは世界中で通用する
MY PAGE
• 相対指定：同じサイト内でのリンク、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>
Webページの作成(HTML)
BWD06-01 ～10～
文字書式
• フォントの属性（ページ全体）
– フォントの色：<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
スタイル
タグ
文字書式 
太字
太字
斜体
斜体
強調表示
取り消し線
中央揃え
強調表示
<s>取り消し線</s>
<center>中央揃え</center>
BWD06-01 ～12～
Webページの作成(HTML)
文字書式
• 文章内での個々の属性の設定
– タグ fontタグでは、文章中の文字に対し、文字サイズ、色など、
細かな設定が可能となる。各種の設定には属性タグを用いる
説明
属性タグ
文字サイズ
size
色
color
フォント
font
– 例：文字
BWD06-01 ～13～
提出課題
– 私のリンク集というテーマでページを作ってください。
• ４項目程度のリンク
• 各項目に対して、コメントをつけてください。
• 各行の文字サイズを変更すること
– 好き嫌い、利用頻度等
• コメントの文字列に好きな色をつけてください
NBU ：日本文理大
Yahoo
：ポータルサイト
Amazon : 本屋さん
BWD06-01 ～14～
タグのまとめ(Webページの制作基本タグ)
タグ
/で閉
じる?
<title>
○
<body>
○
< h1>
〜<h6>
○
 

<li>
<ul>
○
<ol>
○

説明
BWD06-01 ～15～
Webページの作成(HTML)
プログラミングの基礎
4. ネットワーク構成とURLについて
•
nbuでは、Z:\hypertext以下が個人のホームページ用領域として設定
•
URL: http://www.nbu.ac.jp/ ログインＩＤ/ファイル名
– 例）
– 学籍番号 0124001
– ログインＩＤ s124001
– ファイルパス Z:\hypertext\bwd\20050410\index.html
~
– URL http://www.nbu.ac.jp/
フォルダパス（ディレクトリパス）
~s124001/bwd/20050410/index.html
ファイルパス
URL
•
•
\→/
ファイルパスからＵＲＬに変換してください
URL http://
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=“画像ファイル名”>
背景画像の練習 
</body>
</html>
Webページの作成(HTML)
BWD06-01 ～17～
ハイパーリンク
• 画像への指定：文字列以外に画像を用いる
– <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>

Download Report