HTMLの指導

HTMLの指導
基本的な考え方

HTML




Stylesheet


Webブラウザで開くデータの書式
テキストファイル
構造を定義することが基本
Webページのデザインを定義
Javascript

Webページ上でプログラミング
こんなことができるーサンプルから学べ



File1 – 悪い例
File2 – Stylesheet での工夫
File3 – Javascript , Stylesheet を用いて工夫
WebページとStylesheet, Javascript のコードをみて、
• File1 の悪い点を指摘せよ。
• File2 の工夫を探し出し、そのコードも含めて解説せよ。
• File3 の工夫を探し出し、そのコードも含めて解説せよ。
なお、説明部分は『差分』でよい。
ソースコードは、工夫するとすべて見られる。レポートに整理
午前中！
１９日－２１日の予定

１９日午前

１９日午後


２０日午前
２０日午後

２１日午前
HTML etc のソースコード研究
課題あり（当日提出）
HTML, Stylesheet, Javascript
の最初の一歩
課題制作
Mindstorm大会見学
課題あり(２１日朝提出）
課題制作ｰ HTML終了
課題提出は９月７日
目標１：リンクサイト作成する。








本文の部分（HTML）とデザイン部分
（StyleSheet）は分離させる。
「メニュー」にはカテゴリーを表示する。
「タイトル」はカテゴリーごとに異なる。
「リンク」は、各カテゴリーに属するサ
イトへのリンクと、簡単な説明を表示
する。
「著作権表示」は©学籍番号・氏名
共通のスタイルシートを使用し、３枚
程度のページを作成すること。
ツリー構造のフォルダ構造を作ること。
簡単なJavascriptを用いたページを
入れること。
タイトル
メリンク
ニ
ュ
ー
著作権表示
目標２：JavaScriptで「整列」を理解させる
ためのコースを作る。





データ数は１００
乱数で０～１００の数値を
生成し、テキストボックス
に表示する。
最大値を探す。
バブルソートクイックソー
トのボタンをつける。
ソート方法がわかるような
表現にしても良い。
ＨＴＭＬの初歩
ＨＴＭＬの基本構造
<html>
<head>
<title>Page Title</title>
（ヘッダが入る）
</head>
<body>
（本文が入る）
</body>
</html>


本文がHTMLであること
を宣言する。
ヘッダの範囲を宣言する。




Titleはここに入れておく。
本文の範囲を宣言する。
「入れ子構造」
最後に拡張子 .html をつ
けて保存する。
本文を記述する１
<body>

<h1>大見出し</h1>

<p>文章が入ります。文章が
入ります。</p>

<h2>中見出し</h2>
<p>文章が入ります。文章が
入ります。</p>
<h3>小見出し</h3>
<p>文章が入ります。文章が
入ります。</p>
</body>
<body>～</body>の間
に次の内容を記述する。

文章構造としての「見出し」
（<h1>～<h3>）を記述する。
文章構造としての「段落」
（<p>～</p>）を記述する。
CSSを埋め込むことを前
提とする場合は「構造」に
注意する。
本文を記述する２
<ol>
<li><a
href="http://www.google.co.j
p/">Google</a></li>
<li><a
href="http://www016.sonet.ne.jp/sige-lab/">SigeLab</a></li>
<li><a href="http://blog.sonet.ne.jp/sigelab/">Blog.SigeLab</a></li>
</ol>

リスト構造とリンクを本文に加
える。



番号付リスト（<ol>～<li>）
リンク（<a>）
ファイル名をHTML2.htmlとし
て保存して、表示してみる。
装飾する







bgcolor=“#ColorCode”
バックカラーを指定する。
<center>~</center>
センタリングする。
<font size=“n”
color=“#Color”>~</font>
フォントの大きさと色を変更
する。
<b>~</b> 太字
<i>~</i> 斜体
<br>
強制改行
<img src=“Pass”>写真表示




表組み
<table>
<tr>
<td>Data１</td>
<td>Data２</td>
</tr>
</table>
width=“xx%” 表の幅指定
bgcolor=“#Color”
HTML3.html として保存
スタイルシートの第一歩
長所と定義方法
スタイルシートの特徴と長所

本文（文章構造・内容）とデザイン（スタイルシー
ト）の分離




デザインの自由度の向上


見出し（H1～H6）・段落（p）・リストetcのみのHTML
各タグのデザイン定義（CSS）
ID・クラスの定義とCSS
改行幅・左マージンなども設定可能
サイト全体に共通のデザインが定義可能


CSSファイルの入れ替えでデザイン変更が可能
テーブルデザインのサイト例
スタイルシートの埋め込み

別ファイルで定義（外部スタイルシート：指定）
ヘッダ中に、
<link rel=“stylesheet”
href=“stylesheet_name.css” type=“text/css”>

ヘッダ部分で定義（内部スタイルシート）
<style type=“text/css”>


本文中に定義（インラインスタイル）
例 <h2 style=“Define_Style”>小見出し</h2>
スタイルシートの記述

セレクタ { プロパティ : 値 ; ・・・・ }



タグ（セレクタの複数記述可）
h1 , h2 , p { color : #ff0000 ; }
#ID(例：menu)
CSSファイル内で#menu {スタイル定義 }で定義する。
HTMLファイル内に<div ID=“menu”>～</div>で定義
同じID名を複数配置することはできない。
クラス名（例 .hojihoji）
CSSファイル内で.hojihoji { スタイル定義 }で定義する
HTMLファイル内に<div class=“hojihoji”>～</div>で定
義
同じクラス名を複数配置することができる。
HTML2.htmlに
スタイルシートを埋め込むａ
<style type="text/css">
<!-h1 {
background-color: #000099;
color: #ffffff
}
h2 {
background-color: #ffccff;
color: #ff0099
}





ヘッダ部分、Title行の次から
記述する。
<style type=“text/css”>は
CSSであることの宣言
（コメントアウト）で
コードを挟んでおく。コードが
本文中に表示されないための
マナー
セレクタ { プロパティ :
値 ; ・・・・ } の形式
h1, h2 タグに対し、バックカ
ラーと文字色を指定している。
HTML2.htmlに
スタイルシートを埋め込むｂ
h3 {
background-color: #006633;
color: #99ff99
}
p{
line-height: 20pt;
font-size: 12pt
}
-->
</style>


h3 も h1, h2 同様の定義。
段落 <p> は



１行の高さを２０ポイントに
文字の大きさを１２ポイントに
定義する。このことにより、行
間が開いて読みやすくなる。
css2.html で保存して表示の
様子を確かめる。
css2.htmlで
本文の幅を制御する
<body>
<div id="wrapper">
｜
</div>
</body>
ヘッダ中に追加
#wrapper {
background-color: #ffcccc;
width: 80%
}


本文全体に wrapper というID
をつける。
<style>～</style>の内部に
wrapper で定義された範囲に
対するスタイルを定義する。



バックカラーを #ffcccc に
表示幅はブラウザの表示幅
に対して８０％
css3.html で保存して、表示
の変化を確かめる。
css3.htmlで
本文を中央に置く
#wrapper {
background-color: #ffcccc;
width: 80%;
margin-left: 10%
}


本文の幅が８０％なので、残
りの半分のマージンを左側に
取る。
css4.html として保存し、表示
して変化を確かめる。
css4.htmlから
スタイルシートを外部に追い出すａ
<style type="text/css">
<!-#wrapper {
background-color: #ffcccc;
｜
p{
line-height: 20pt;
font-size: 12pt
}
-->
</style>


スタイルシートの定義中のコメ
ントで囲んでいる部分を切り
取り、テキストエディタに貼り
つける。
貼りつけたコードは、ファイル
名 css5.css で保存する。
css4.htmlから
スタイルシートを外部に追い出すｂ
<style type="text/css">

</script>
 JavaScriptのコードが入る宣言をしておいて、コメント行
としてJavaScriptのコードを記述している。
ヘッダ記述のJavaScript １ａ
<html>
<head>
<title>JS Test</title>
<script
language=“JavaScript”>
<!-function msg1(){
alert(“Page Loaded”);
}
function msg2(){
alert(“Button Pushed”);
}
//-->
</script>
</head>

HTML宣言
ヘッダの宣言
ページタイトルの設定
JavaScriptのコードを書く宣言

はHTMLのコメント文

msg1()の定義
alertボックスを表示する。

msg2()の定義
alertボックスを表示する。



ヘッダ記述のJavaScript １b
<body bgcolor=“#ffcc99”
onLoad=“msg1()”>
<form name=“form1”>
<input type=“button”
value=“Click!”
onClick=“msg2()”>
</form>
</body>
</html>



読み込みが終わったら
msg1()を実行する。
フォームの開始（form[0]）
ボタンを表示して、ボタンに
は Click! と表示する。ク
リック時には msg2() を実
行する。
データの受け渡し（promptを用いる）ａ
<html>
<head>
<title>JS Test_2</title>
<script
language="JavaScript">
<!-function plus(a,b){
return a+b;
}
//-->
</script>
</head>

function plus は、本文中の
promptダイヤログから、変数
a , b で値をうけとり、a+b の
計算値を戻す（return）。
データの受け渡し（promptを用いる）b
<body bgcolor="#ffcc99">
<script
language="JavaScript">
<!-a=parseInt(prompt("a="));
b=parseInt(prompt("b="));
i=plus(a,b);
document.write(i);
//-->
</script>
</body>
</html>




バックカラーを指定して、
テキスト入力ダイヤログを表
示（ prompt ）して、受け取っ
た値を整数値へ変換
（ parseInt ）してから変数 a ,
b へ代入する。
a , b の値を関数 plus へ渡す。
戻り値を変数 i に代入する。
i の値を書き出す。
（ document.write(i) ）
データの受け渡し２：テキストボックスから入力
<script language="JavaScript">
<!-function calc(){
var a,b;
a=document.forms[0].eleme
nts[0].value-0;
b=document.forms[0].elements
[1].value-0;
document.forms[0].elements
[2].value=add(a,b);
}
function add(x,y){
var x,y;
return x+y;
}
//-->
</script>

関数 calc() を定義する。





a , b を変数として定義
変数 a に、最初の form 定義範
囲（ form[0] ）の第一テキストボッ
クス（ element[0] ）の値（ value ）
を数値化して（ -0 ）代入する。
変数 b も同様
a , b の値を関数add に渡し、結
果を form[0] の第３テキストボッ
クスに表示する。
２つの値を受け取る関数 add を
定義する。


引数を変数 x , y で受け取る。
和 x+ｙを計算して戻す。
データの受け渡し２：テキストボックスから入力
<body bgcolor="#ffffff">
<form action="#">
a=<input type="text">,
b=<input type="text"><br>
a+b=<input type="text"><br>
<input type="button"
value="calculate"
onClick="calc()">
</form>
</body>



背景色を白に指定
form[0] を開始
テキストボックスを４つ表示。



a=
a+b= は計算結果の表示用
ボタンを、calculate と表示。
クリック時には関数calc() を
呼び出す。
HTML指導の問題点
全角スペースと半角スペース



原因
ソースコードの空白の調整に使う際に、全角・半
角の切り替えを見失っている。
症状
半角スペースはHTML表示上無視されるが、全
角スペースは表示される。<table>タグ中に入っ
ていると、表の外部に表示される。
対処
エディタで、全角スペース１個を、半角スペース２
個で置換する。
(file_name).html.txt



原因
メモ帳で作成して保存する際に、ファイルの種類
がデフォルトで「テキスト文書」となっているため、
自動的にファイル名の後に .txt をつけてしまう。
症状
HTMLファイルのはずがTXTファイルと認識され
る。
対処
拡張子を強制的に変更する。「ファイルが使えな
くなるかもしれません」の脅しに屈しない。
全角文字のファイル名



原因
全角文字でテキストを入力したまま、「名前をつ
けて保存」を実行している
症状
.html の部分が全角になっているとブラウザが立
ち上がらないが、他には大きな問題にはならな
い。ただし、Internetに出す際には使わないのが
慣例。そのように指導する。
対処
ファイル名を修正する。
作業中のファイルをいくつも表示する



原因
ソースの変更＞上書き保存＞ブラウザで再読込
＞・・・の過程で、いちいちブラウザからソースを
表示している。
症状
最新のソースコードがどれだかわからなくなる。
最悪の場合、新しいコードを古いコードで上書き
してしまう。
対処
一度、メモ帳をすべて閉じる。次に、最新の表示
になっているブラウザから、コードを表示する。
ファイル間のリンクがうまくいかない

原因



症状


相対パスでリンクが書かれていない。
相対パスを正しく理解していない。
ローカルでは正しくつながっていたのに、サーバーに
おくとつながらなくなる。
対処



リンクを相対パスで正確に書かせる。
相対パスを正確に理解させる。
それ以前にファイル名を間違えているケースが多い。

Download Report