ｉｔ研修講座

ＩＴ研修講座 NPO 法人全国女性シェルターネット企画講座 WEBサイト作成

ホームページの構成要素
ＨＴＭＬ　
.html .htm (.cgi .php .jsp)
ＣＳＳ
.css
画像ファイル
.jpg .gif .png
javascript
.js
css img js index.html layout.css side.css image01.gif image02.gif rollover.js iepngfix.js / inquiry about index.html index.html root

ＵＲＬと絶対パスと相対パス
URL
http://annulus.jp/temp/index.html
絶対パス
/var/www/vhosts/greenapple.jp/httpdocs/
相対パス
./index.html ../temp/index.html

HTMLの基本構成要素
<html>
<head>
</head>
<body>
</body>
</html>
HTML HTMLで記述されたドキュメントであることを宣言 head HTMLファイルの情報を記述 body ブラウザに表示する内容

タグの基本ルール
<p class=“velue”> 内容がここに入ります </p>
要素名属性名値属性開始タグ終了タグ要素

タグの基本ルール2
開始タグと終了タグ　 <p>~</p> <br /> <img src=“~” />
属性と値
値は「“」で囲む
ファイル名は半角英数で。記号は「 - 」か「 _ 」が使えます
ソースは小文字で記述する
タグはまたがない　 × <p> 今日は <b> いい </p></b> てんきです。
コメントは 
ブロック要素とインライン要素

DOCTYPE宣言
ＤＯＣＴＹＰＥ宣言
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="jp" lang="jp">
バージョン
HTML4.01 Strict/HTML4.01 Transitional/HTML4.01 Frameset
XHTML1.0 Strict/XHTML1.0 Transitional/XHTML1.0 Frameset/
XHTML1.1
標準準拠モードと過去互換（後方互換）モード
http://spreadsheets.google.com/pub?key=pbrvd2wQKc03fJ5QWgYr-Cw&gid=3
タイトル
<title> ~ </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
キーワード
<meta name=“keywords” content=“ ー , ー , ー” />
<meta name=“description” content=“ ～ " />

W3C
World Wide Web Consortium （ワールド・ワイド・ウェブ・コンソーシアムは World Wide Web で使用される各種技術の標準化を推進する為に設立された標準化団体、非営利団体。略称は W3C （ダブリュースリーシー）。 MIT や CERN が中心となって 1994年 10月1日発足。2007年現在、MIT/LCS、 ERCIM 、慶應義塾大学が中心となって活動している。

XHTMLとは
2000 年 1 月 26 日に W3C の勧告となった XHTML （ Extensible HyperText Markup Language ） [XHTML10] は、素朴な文書構造記述言語として発展してきた（あるいは混乱してきた） HTML に、 XML[XML1] の持つ柔軟性、拡張性を取り入れたものです。 HTML は SGML の実装の一つで、書式にそれなりに自由度がありましたが、 XHTML は XML の実装であるため、書式が厳密になっています（ XML は、 SGML の書法をシンプルで厳密なものにすることで、アプリケーションの開発や互換性をとりやすくした）。

文章を構成する基本のタグ
見出し
<h1>~</h1>
<h2>~</h2>
<h3>~</h3>
<h4>~</h4>
<h5>~</h5>
<h6>~</h6>

文章を構成する基本のタグ3
リスト
<ul><li>~</li> <li>~</li> </ul>
定義リスト
<dl><dt> ~ </dt><dd> ~ </dd></dl>
表
<table><tr><th></th><td></td></tr></table>

文章を構成する基本のタグ2
段落
<p>~</p>
改行
<br />
ブロック
<div>~</div>

課題1
次の文章を以下の DOCTYPE と、 meta タグ、基本のタグを使用して HTML にしてください。

鎌倉の隠れカフェ大佛次郎茶亭　
大佛次郎茶亭は鎌倉、大佛次郎記念館の中にあるカフェです。
作家、大佛次郎氏の書斎兼茶亭、大正 9 年に建てられた茅葺きの木造平屋建で昭和 27 年に大佛氏が購入。通常は土日・祝日だけカフェとして営業。
メニュー
コーヒー
紅茶
チーズケーキ
あんみつ
インフォメーション
住所　鎌倉市雪ノ下 1-11-22 アクセス　鎌倉駅から徒歩 10 分
copy right(c)2008 osaragi café. All Rights Reserved.

ＣＳＳ　カスケーディングスタイルシート
CSS を HTML ファイルに組み込む方法は 3 種類
1.Style 要素を使って head 内に指定する
2.Style 属性を使って要素に直接指定する
3.Link 要素で外部の css ファイルをリンクさせる

1.Style 要素を使って head 内に指定する
ＨＴＭＬファイル内の head 内のソース
<head>
<style type=“text/css”>

</style>
</head>

2.Style 属性を使って要素に直接指定する
HTML ファイル内の body 内のソース
<body>
<h1 style=“color:#ff0000”>見出し</h1>
<p>このように<span style=“color:#ffff00”>ＨＴＭＬ要素に直接スタイルを定義</span>します。</p>
</body>

3.Link 要素で外部の css ファイルをリンクさせる
HTML
<head>
<link href=“style.css” rel=“stylesheet” type=“text/css” />
</head>
CSS
h1{ color:#ff0000;}

ＣＳＳの基本
要素名｛プロパティ：値；｝
h1{
color:blue;
}
コメント
　　 /* コメント */
※ ソースを記述する際、スペースはいれないように
（ css html とも）
セレクタ

複数のプロパティをまとめる定義方法
h1{
color:blue;
font-size:14px;
}
h1,h2{
margin-bottom:30px;
}

セレクタの種類
基本セレクタ　（ div や p などの HTML 要素に）
p{font-size:14px;}
クラスセレクタ ( 複数要素に )
CSS
p.blue{color:blue;} .red{color:red;}
HTML
<p class=“blue”> 青 </p>
<p class=“red”> 赤 </p>

セレクタの種類2
ＩＤセレクタ（一つの要素だけに）
CSS
#main{
width:300px;border:1px solid #ccc;
}
HTML
<div id=“main”>
グレーの枠がついた 300 ｐｘの箱です。
</div>

擬似クラス
クラスやＩＤでは表現できない性質について設定できるセレクタ
擬似クラスは「 : 」にあらかじめ決められた予約語を組み合わせて定義します。
-CSS
a:link{color:red;}
a:visited{color:green;}
a:hover{color:yellow;}
a:active{color:blue;}
-HTML
<a href=“#”> リンク </a>

子孫セレクタ
特定の要素の子要素、または子孫の要素にスタイルを適用させます。要素との間には半角スペースで区切って指定する。
CSS
p span{color:#fff0000;}
p .red{color:#ff0000;}
HTML
<p> 入れ子になった <span> ところが </span> 子孫です </p>
<p> 重なっているところが <strong class=“red”> 子孫 </strong> なわけです。 </p>

課題2
テキストを装飾しましょう。
CSS ファイルを作成して、さきほど作成した HTML ファイルからリンクをはってください。
CSS は以下を参考にして記述してみましょう。
見出しを工夫して目立たせてください。
メニューとインフォメーションには別々のクラスセレクタを設定してください。
ページ全体の背景にも色をつけてください。

余白
margin(マージン）
マージンとは、要素を囲む領域（ボックス）の外側の余白のことをいいます。
padding(パディング）
パディングは、要素を囲む領域（ボックス）の内側の余白のことで、その要素の内容とボーダーとの余白のことをいいます。

マージン
margin:0 10px 0 20px;
margin:0 auto;
margin:15px;
margin-top:10px;
margin-bottom:0;
margin-left:20px;
margin-right:5px;

パディング
padding:0 10px 0 20px;
padding :0 auto;
padding :15px;
padding -top:10px;
padding -bottom:0;
padding -left:20px;
padding -right:5px;

課題3
テキストの余白を調整してみましょう。
さきほどの HTML を使用して、ページ全体と見出しとフッター（コピーライト）に余白をいれてみましょう。
パディングとマージンの違いに注意してください。

ボックスの構造
ボックスモデル
高さ height 幅 width 内容を表示する領域 padding border margin

課題4
「大佛次郎茶亭は鎌倉、大佛次郎記念館の中にあるカフェです。～アクセス鎌倉駅から徒歩 10 分」までを大きなひとつのボックスで囲って、背景色を入れて、余白をいれてみましょう。ボックスの設定は ID セレクタで cont という名称にしてください。ボックスは margin を使用して中央寄せにしてください。
また、「メニュー　コーヒー　紅茶　チーズケーキ　あんみつ」と「インフォメーション　住所　鎌倉市雪ノ下 1-11-22 　アクセス　鎌倉駅から徒歩 10 分」もそれぞれボックスで囲って、それぞれ背景色をいれて、余白をつけましょう。ボックスの設定は ID セレクタでメニューは menu 、インフォメーションは info としてください。

課題5
画像を加工してみましょう
http:// www.picnik.com /
image.jpg を幅 327px 　高さ 327px にトリミング（カット）して、 image02.jpg で保存してください。
画像は img フォルダを作成して、そこに入れてください。

画像について
jpg
gif
png

画像の張り込み
<img src=“URL” width=“—px” height=“—px” alt=“ 画像の説明” />

回り込み
回り込みを指定
float:left;
float:right;
回り込みを解除
clear:left;
clear:right;
clear:both;

課題6
画像を貼り付けて、文字を回り込みさせましょう。
メニューより下は回りこみを解除させましょう。
画像には border をつけてください。色は白で、幅は 10px です。
背景に画像をいれてみましょう。
「インフォメーション」から class=”type02” をはずして、「インフォメーション」のみに css を反映させる仕方を考えましょう。（子孫セレクタを利用しましょう）

リンクをはる
リンクをはる
< a href=“URL”> テキスト </a>
メーラーを起動するリンク
<a href=“mailto: メールアドレス” >address</a>
サイト内リンク
<a name=“ ～ " id=“ ～ "></a>
<a href=“# ～” > テキスト </a>

課題7
ページ内リンクをはってみましょう。
コピーライトの上、 #cont ボックス内に「▲ページトップに戻る」というテキストをいれて、ページ上部に移動するようにリンクをつけてください。
リンク名は「 top 」としてください。

2段組レイアウト
div（ボックス）をfloatで並べる
float:left; width:400px; margin:0 10px 0 0; float:right; width:200px; width:630px; padding:10px;

課題8
課題 7 で使用した
最終デザイン .jpg のようなページを作成しましょう。

ｉｔ研修講座

by annulus

Accessibility

Categories

Upload Details

Usage Rights

Statistics

ｉｔ研修講座 Presentation Transcript