1
Web ページ作成
2011/ 5/31
Web ページとは
ＩＴ用語事典 e-words より Web ページ 【web page】 読み方 ： ウェブページ WWW システムを使ってインターネット上で公開されている文書。Web ブラウザに一度 に表示されるデータのまとまりで、テキストデータやHTML によるレイアウト情報、文書 中に埋め込まれた画像や音声、動画などから構成される。インターネット上では本のよう に複数のWeb ページをひとまとめに公開するのが普通で、そのような Web ページのまとま りを Web サイトという。Web サイトは、本の表紙や目次に当たるトップページ(ホームペ ージ)とそこからリンクされた他の Web ページで構成される。
情報発信の道具として
Web ページは使われる。
Ｗｅｂページと言っても目的はさまざまである。 個人の趣味を扱ったＷｅｂページもあれば企業の運営する販売を目的としたＷｅｂペー ジなど、Ｗｅｂページの目的も多種多様だ。 Ｗｅｂページの制作ソフトウエアもあり、Ｗｅｂページの作成自体は難しくない。 ただそのホームページを多くの人に見てもらうこと、継続して見てもらうことは容易な ことではない。 ここではWeb ページを作ることを中心に進める。作成手順
準備（必要なもの）
１．テキストエディタ(メモ帳など) ２．ブラウザ（Internet Exprorer など）テーマ設定
Ｗｅｂページ作成・
改善
公開
ファイル転送
評価
2
HTML は本来文書の構造を定義。文書の見栄えはスタイルシートで記述
HTML
HyperText Markup Language
出典: フリー百科事典『ウィキペディア（Wikipedia）』
HyperText Markup Language（ハイパーテキスト・マークアップ・ランゲージ、HTML） は、ウェブ上のドキュメントを記述するためのマークアップ言語である。 ウェブの基幹的役割を持つ技術の一つで、HTML でマークアップされたドキュメントは ほかのドキュメントへのハイパーリンクを設定できるハイパーテキストであり、画像・リ スト・表などの高度な表現力を持つ。 HTML は現在 W3C による標準規格であるが、最近では後継規格である XHTML への置 き換えが進められている。
CSS
Cascading Style Sheets出典: フリー百科事典『ウィキペディア（Wikipedia）』
Cascading Style Sheets（カスケーディング・スタイル・シート、CSS）とは、HTML や XML の要素をどのように修飾（表示）するかを指示する仕様であり、W3C による勧告の 一つ。カスケード・スタイル・シートとも呼ばれる。文書の構造と体裁を分離させるとい う理念を実現する為に提唱されたスタイルシートの、具体的な仕様の一つ。 CSS は HTML で表現可能と考えられるデザインの大部分を実現できる要素を取り入 れつつ、新たなデザイン機能を備える。また、以下のような特徴を持つ。 ページを表示するメディアに合わせてスタイルシートを切り替えることで、メディアご とに表示を変化させることができる
実習
HTML
準備 ①実習のフォルダを作成する。半角で「ＨＴＭＬ」フォルダを作成する。 作成した文書はすべてこのフォルダに保存する。 つぎに、「ＨＴＭＬ」フォルダの中に「img」フォルダを作成する。画像はこの中に保存す る。 ②ファイルの拡張子を表示するように設定する。 ツール－フォルダオプション－表示－「登録されている拡張子は表示しない」のチェック をはずす。3 実習① test1.htm 基本的な構成 <html> <head> <title>ホームページの練習１ページ目</title> </head> <body> 初めてのホームページです。 </body> </html> 保存したらブラウザで読み出してみる。 実習② 修正 <html> <head> <title>ホームページの練習</title> </head> <body> 私の初めてのホームページです。 </body> </html> ブラウザで読み出してみる。 実習③ 改行 私の 初めてのホームページです。 実習④ 水平線 実習⑤太字 私の初めての<b>ホームページ</b>です。 実習⑥ 文字色 red,blue,green 私の初めての<font color=red>ホームページ</font>です。 実習⑦ 文字サイズ（１～７） テキストの一部分を<font size=5>大きな文字</font>にします。 実習⑧ 斜体 テキストの一部分を<i>斜体文字</i>にします。
4 実習⑨ 表組（テーブル） <table border=1> <tr><td>●</td><td>■</td><td>▲</td></tr> <tr><td>○</td><td>□</td><td>△</td></tr> </table> 実習⑩ リンク 他のサイト <a href="http://www.yahoo.co.jp/">Yahoo!</a> 実習⑪ リンク 他のページ test2.htm <html> <head> <title>ホームページの練習２ページ目</title> </head> <body>
<a href=test1.htm> test1.htm にリンクします。</a> </body> </html> 実習⑫ 画像貼り付け 「img」フォルダを作成しその中に画像を保存する。 test.htm に次の行を加える。 <img src="****-1.jpg" alt="ロゴ１"> 実習⑬ 画像リンク
<a href="test1.htm"><img src="****-1.jpg " border=0 alt="ロゴ１"></a> ＊以上「とほほのＷＷＷ入門」を参考にしています
5
スタイルシート
HTML の構造化
HTML の持つ本来の役割は、文書の論理構造をあらわすことである。 文書（テキスト）に対して、見出し・段組・表・リスト・リンクなどといった役割をマ ーク付けして、文書を構造化することがHTML の提供するメイン機能である。 現在では HTML を使って見栄えを記述することが普通になってしまったがもともと HTML は、見栄えではなく、文書構造のみを定義するマークアップ言語なのである。 そのため、見え方についてはスタイルシートを使うのが現在の流れである。 見出し ページ内のいちばん大きな文字であるタイトルには<h1>タグを使い、以下、中見出しに <h2>タグ、小見出しに<h3>タグといったように割り当てていく。 ページ内の見出しの順番や構造を踏まえ<h1>タグから順番に指定することで、ページの 構造がわかりやすくなる。見出しは<h1>から<h6>まである。スタイルシートとは－
Web ページの見え方を詳細に設定するための技術。 ①HTML 文書のサイズを大幅に縮小できる。 ②複数のページを一括で管理できる。 ③緻密なデザインを実現できる。 ④印刷用、携帯用、PDA 用などのさまざまなプラットフォームで情報を共有できる。 ⑤非推奨のHTML タグを使わなくてすむ。 ⑥アクセシビリティの向上スタイルシートの記述方法
セレクタ スタイルを適用する対象（スタイルシートを適用したいHTML タグ） プロパティ 色、フォントなど 値 赤、１５０％などセレクタ｛プロパティ：
値 ；｝
h2 { color : red;} １つのセレクタに複数のプロパティを適用することもできる。 その場合には ； のあとにそのまま プロパティ：値 を指定する。6
スタイルシートを
HTML 文書に適用する方法
①埋め込み式<head>タグ内に<style>タグを記述して、スタイルシートを記述する。 <head>
<meta http-equiv=”Content-Type” content=”text/html; charset=Shift_JIS”> <title>コンピュータ活用</title> <style type=”text/css”> <!— p { font-size: 13px; line-hight: 150% } --> </style> </head> ②インライン方式 <body>タグの中にある個別のタグに対して、直接スタイルシートを適用する。 <head>
<meta http-equiv=”Content-Type” content=”text/html; charset=Shift_JIS”> <body> <h1 style=”font-size: 18px;line-heigt: 150% ;”>コンピュータ活用</h1> ③外部リンク HTML ファイルとは別にスタイルシートのファイルを用意し、HTML ファイルからスタイ ルシートのファイルにリンクする。 <head>タグ内の情報として、<link>タグでスタイルシートファイルのパス（場所）を記述 し、スタイルシートファイルへのリンクであることを示すためにrel 属性と type 属性も合 わせて記述する。 同じスタイルを複数ページに対して使う場合に便利。
7
[実習]CSS インライン方式
（例）<h1 style=”font-size: 18px;line-heigt: 150% ;”>コンピュータ活用</h1> ■ <font size=n>よりも柔軟なフォントサイズを指定する <span style="font-size:20pt">大きなフォント</span> ■ テキストの背景色を指定する <span style="background:silver">背景色</span> ■ 下線の無いリンクテキストを表示する<a href="xxx.html" style="text-decoration:none">リンク</a>
■ 余白の挿入
<span style="margin:20px">20px の余白</span>
■ <font size=n>よりも柔軟なフォントサイズを指定する <span style="font-color:#00ff00">フォントの色の指定</span>
8
実習 スタイルシート
ここでは、③外部リンク方式でCSS を適用する。 WEB サーバ HTML CSS リクエスト レスポンスHTML 文書
<head><meta http-equiv=”Content-Type” content=”text/html; charset=Shift_JIS”> <title>コンピュータ活用</title>
<link href=”design.css” rel=”stylesheet” type=”text/css”> </head>
スタイルシートファイル(design.css)
p { font-size: 13px ; line-height: 150% ; } 記述例h2 {
color: red;
font-size: 150%;
}
body {
color: green;
background-color: #DED;
}
9
201106-1.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja"> <head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>ここにタイトルを入れる</title>
<link href="20101108.css" rel="stylesheet" type="text/css"> </head> <body> <!-- 見出し --> <h1>いちばん大きな見出しを入れる</h1> <!-- 見出し --> <hr> <h2>２番目に大きな見出しを入れる</h2> <p>本文<br> 本文<br> 本文</p> <h2>２番目に大きな見出し</h2> <p>本文 </p> </body> </html>
201106-2.css
body { color: green; background-color:#DED; } 代表的なブロック要素 <h1> ～ <h6> 見出しタグ <p> 段落タグ <blockquote> 引用タグ <ul>,<ol>,<li> リストに関するタグ <div> ブロック要素を作るタグ10
＊フリーソフトウエア
フリーソフトウエアは、コンピュータウイルスの感染の危険などセキュリティ上の問題 からやたらなところから持ってこない。また、使用に際しては著作権上の問題を起こさな いように注意する。ez-HTML
多彩な機能を備えたタグ挿入型 HTML エディター ①「窓の杜」からローカルディスクにダウンロードする。 http://www.forest.impress.co.jp/lib/inet/homepage/htmleditor/ezhtml.html11 ②自己解凍形式なのでローカルディスク D の中のフォルダ上でダブルクリックすると、解 凍する。解凍(展開)先を指定する。 ③新しくできたフォルダの中に、実行ファイルがあるのでショートカットを作り、デスク トップにおく。 ④デスクトップのショートカットをダブルクリックするとプログラムが実行される。 ⑤表示－スペシャルサイドバーの中のスタイルシートをチェックする。これで、スタイル シートの入力でも使えるようになる。 ＊通常は以上のようにするが、管理者権限がないとインストールできないので、講義用Web ページからダウンロードする。
12
ez-HTML を使ってみる
①起動する ②ファイル－新規作成。編集－折り返しの設定 [実習] 練習問題１ ＨＴＭＬとＣＳＳの構成を確かめる。13 [ＨＴＭＬ]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja"> <head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>コゲラ</title>
<link rel="stylesheet" type="text/css" href="kogera.css"> </head> <body> <h1>20101109</h1> <p>家を出てすぐのことだ。 <br>変わった鳥の鳴き声が聞こえた。 <br>しかも、すぐそばだ。 <br>フェンスとブロック塀ではさまれた細い路地だったが足を止めて声の方向を見た。 （中略） <br>姿は産毛のような柔らかい羽毛が多い幼鳥のようだった。 <br>ひょっこりと顔を出した様子がかわいい・・ </p> </body> </html> [ＣＳＳ] body { background-color:#eee ; width:640px ; margin-left: 200px; } h1 { font-size: 100%; color: blue; background: #ccc; } p { font-size: small; }
14 練習問題２ ＨＴＭＬ、ＣＳＳを完成させる。 ＊ファイル名はすべて半角にする。（全角文字が使えないサーバがある） [ｂｏｄｙ部分ＣＳＳ] body {background-color: #99FFFF; margin: 5em; } h1 {font-size:font-size: x-large; color: #FF3333; } p {width: 50%; line-height: 150%; }
img {float: left; margin-right: 10px; margin-bottom: 10px; } /*ボディの幅を指定*/ body { width: 850px; } [ナビバー部分 ＣＳＳ] /*ナビバー*/ li { float: left; margin-right: 5px; margin-left: 0px; background-color: #f0f0f0; border: 1px solid #000; text-align: center; width: 130px; height: 22px; }
