Embed Size (px)
Citation preview
1
Webページプログラミング
Dr. Anna Yamaguchi
Course URL:
http://www2.obirin.ac.jp/annay
2
Today’s plan
HTMLの記述（復習） 各種タグ
hyperlink・画像などの埋め込み
Practice2.html ファイル link + 画像購入
CSS（スタイルシート）の基礎
タグと属性の復習
Hyperlink
画像の埋め込み
付加情報
リスト
引用タグ・引用元タグ
上付き・下付き文字3
<a>タグ
<meta>タグ
<img>タグ
<blockquote>タグ
<cite>タグ
<ul>タグ<ol>タグ
href属性
src属性
alt属性
<li>タグ
4
Webアクセス全体の流れの概要
画像の挿入
Webページ上に画像を表示させるために使われるタグが<img>タグでsrc属性を使います。またalt属性を使って画像を説明します。
例） <img src=“photo/abc.jpg” alt=“画像１”>
5
現在編集中のHTML文書
photo
現在のディレクトリ
現在編集中のHTML文書
abc.jpg
6
<a href=”abc.html”> メインページ </a>
<a href=”../abc.html”> トップ </a>
現在のディレクトリ
現在編集中のHTML文書
abc.html
1つ上のディレクトリ
現在編集中のHTML文書
現在のディレクトリ
x.html
<a href=”photo/abc.jpg”> 画像１ </a>
photo
abc.jpg
現在のディレクトリ
現在編集中のHTML文書
相対パスにおけるディレクトリの変更
画像の挿入に関する注意 「フォーマット」
Webページで使用できる画像形式（フォーマット）は、通常JPEG形式とGIF形式とPNG形式です。
Windowsの標準形式でもあるBMPや、Mac OSのPictはホームページに使うには不向きなので形式変換をしたうえでGIFやJPEGとして挿入しましょう。
HTML4まではBMPはサポータされていなかったのでブラウザで表示されませんでした。
GIF・PNG：Webページに掲載する文字やイラストに最適
JPEG： Webページに掲載する写真に最適
BMP：ファイルが不必要に大きくなるのでWebには不向き 7
CSSによるデザインの記述
CSS（Cascading Style Sheet)はWebページの見た目（デザイン）を定義するための言語で、HTMLと併用してWebプログラミングに使われます。
8
CSSの分離HTMLで論理構造を記述するようにCSSでは視覚構造を記述します。
HTML…「構造」テキスト・リンク・画像などの構成
CSS（スタイルシート）…「装飾」ページのデザイン・スタイルの構成
9
なぜCSSを分離をするのか？
HTMLとCSSの分離によって論理構造と視覚構造を分けるメリットを考えてみましょう。
コードの管理のしやすさ
ブラウザ表示速度の向上
デザインフォーマットの統一
外部デザインの使用が可能
10
NEXT WEEK～
CSS分離はなぜ必要なのか
CSSの基本と記述方法の基礎続き
11
H.W.
HTMLとCSSの記述方法を復習
Practice2.html （2ハイパーリンク + 2画像）完成すること
スタイルシートについて教科書から読むこと
(103ページまで)
12
