web デザイン基礎 坪倉、伊藤 日本文理大学
Post on 31-Dec-2015
39 Views
Preview:
DESCRIPTION
TRANSCRIPT
BWD06-01 ~ 1~
Web デザイン基礎坪倉、伊藤
日本文理大学
先週–ガイダンス–Webの歴史–HTML 基礎
今週–@learn について(出席と課題提出)–HTML 画像、ハイパーリンク、文字書式
BWD06-01 ~ 2~
復習(ファイルと、パスとアドレス)
• Webページについて– 色々なファイルが構成されて、 1 つのWebページに
• ファイルについて
• 授業用ファイルの保存について– 授業用フォルダ z:\hypertext\____________– 日付フォルダ z:\hypertext\ ____________ \ ____________
– URLについて– (仮に上記日付フォルダに index.html があるとして)
• フォルダパス• ファイルパス• URL
名称 ( 拡張子 ) 内容 利用ソフト
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> タイトル:練習1</title></head><body>本文</body></html>
練習1 ファイル名 ex1.html
復習(HTMLはじめ)
• タグについて– HTML: ( Hypertext Markup Language )– < * > ## </ * >– < * > : ← このタイプは、今週沢山でてくる
BWD06-01 ~ 4~
Web ページの作成 (HTML)第1課 プログラミングの基礎複数行の入力段落分割と改行
• <p> ~~ </p>– ( 段落分割 ) は、改行の後に空白行を追加する。
•
• <br>– ( 改行 ) は改行の後に空白行を追加しない
– 練習1 下記のプログラムを入力し、動作を確認しなさい。– ファイル名 ex01.html <html>
<head> <title>P と BR</title> </head> <body><P> Pタグで囲まれている。 </P><P> 1行目2行目 </P>行末に BR タグがついてる <br>1行目 <br> 2行目 <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> 指定したファイルの画像をページに掲載
– 練習2 講義用画像素材のページより、一枚、画像を本日の講義ディレクトリに保存。下記のプログラムのページを確認しなさい。• ファイル名 : 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 右記のプログラムのページを確認しなさい。また3種類程度の色を試しなさい。– ファイル名 : ex03.html– パス: z:\hypertext\– URL : http://www.nbu.ac.jp/ ~
• 細かな色指定の方法– 16進数 RGB方式– 各色 2桁の 16進数表記 (00~ff)– 表記例 #00ff00 <body bgcolor=“#00ff00”>– 練習 3α 練習2のページを 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つ程度サイトをリストアップし、各サイトへのリンクを張りなさい。
• 練習 4α2 <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=“ 色指定” >
• 例1) <body text=“red”>
• 例2) <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)文字書式• 文章内での個々の属性の設定
– 文字書式タグによる簡単な効果• 各種文字書式タグで囲む事により、属性を変更できる。
– 練習3:• 左下の表を埋め、右下のソースを打ち込みページを確認しなさい。• (他に必要なタグは各自で追加すること)• ファイル名: 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~
提出課題– 私のリンク集というテーマでページを作ってくださ
い。• 4項目程度のリンク• 各項目に対して、コメントをつけてください。• 各行の文字サイズを変更すること
– 好き嫌い、利用頻度 等• コメントの文字列に好きな色をつけてください
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/ ~ ログインID / ファイル名– 例)– 学籍番号 0124001– ログインID ss124001– ファイルパス Z:\hypertext\bwd\20050410\index.html
– URL http://www.nbu.ac.jp/ ~s124001/bwd/20050410/index.html
• ファイルパスからURLに変換してください• 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>
top related