初めてのHTML　-超まとめ- ＠TWクラブ【BloodyRosary】製作


さて、ここまでいっぱい書いてきたが、このサイトの『基本的なタグ<p>』の
始めに言ったように、

そもそも、どんなサイトを作りたいんよ？？？


筆者が代わりに作るなんてことも出来ないし、ましてや思い通りのサイトが
自動で出来ちゃう高性能な超AIツールもない。


ただし、サンプルはいくらでもある。むしろ全サイトのメニューバーの表示から
ソースってのを選べば、そのサイトのHTML文が見れる。

このサイトよりももっと親切な説明をしてくれるサイトだっていくらでもある。

その中から自分に必要な情報だけを取り出し、うまく利用する。


それがすべてです。
このサイトに、貴方が必要だと思っていた情報があれば幸いです。

さて。


超まとめというからには、まとめましょうｗ
今まで作ってたものを全部置きます。


まず、おなじみ『test.html』。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja-JP">
<head>

<link rel="stylesheet" href="default.css" type="text/css">
<link rel="prev" href="index.html">
<link rev="made" href="mailto:mai_tukamoto@infoseek.jp">

<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

<title>

ようこそ、このサイトへ

</title>

</head>
<body>

<h1>今日の一言</h1><br>

<p>
ぶっちゃけ眠い。２１時には眠いわ。<br>
本当は２０時には寝たいけどな（爆ステ<br>
</p>

<br>

<a href="test2.html">次のページへ</a>

</body>
</html>

『title』から上は、決まり文句みたいなもの。

『body』で囲んだ部分が本文。サイトの画面に出てくる場所。

赤く書いたところが、自由に書いていいところ。
（自由っつってもタグとか忘れちゃいかんよｗ）

『h1』が見出し　 （h1からh6まであり、h1が一番でかい）
『p』が文章
『img』が画像　　（「src」がファイル名指定、「alt」が表示名、「width,height」がそれぞれ幅、高さ）
『br』が改行
『a』がリンク　　（「href」がリンク先のURL指定）


それぞれ『html』『head』『title』『body』や、
『h1』『p』『a』の終了タグ（スラッシュ(/)がついたやつ）を忘れずに。





続いて『test2.html』

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja-JP">
<head>

<link rel="stylesheet" href="default.css" type="text/css">
<link rel="prev" href="index.html">
<link rev="made" href="mailto:mai_tukamoto@infoseek.jp">

<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

<title>

ここは次のページだ

</title>

</head>
<body>

<h1>昨日の一言</h1><br>

<p>
俺を信じろ、アル！<br>
</p>

<p>一昨日以前の一言</p>
<table border=1 summary="item">
<tr>
<td>１週間前</td><td>雷がいい感じ。</td>
</tr>
<tr>
<td>１ヶ月前</td><td>七転八倒、火車も涼しく。</td>
</tr>
<tr>
<td>半年前</td><td>泣けばいいさ。大声上げて。</td>
</tr>
</table>

</body>
</html>

test2.htmlは、test.htmlのリンク先である。
test.htmlにある『a href』で指定されている。

ここで新しく出たのが『table』。
『border』で枠線の太さを設定。
『summary』で適当な名前を設定。

『tr』が行で、行内には『td』という列が複数存在できる。
例の場合、３行、２列のテーブルが出来上がる。




続いてスタイルシートの『default.css』

body {
color : #808040;
background-color: #000000;
font-family: 'ＭＳゴシック';
}
a:link {
color: #008040;
}
a:visited {
color: #804000;
}
a:active {
color: #ff8000;
}
.font20 {
display:inline;
font-size: 20pt;
}
table {
background-color : #000000;
}


タグの名前と｛｝で囲った中に、そのタグをどういったレイアウトにするかを
定義できる。

『color』は文字色。RGB１６進数の数値で表す。（色の参考サイト　RGB変換　）

『background-color』は背景の色。これもRGB１６進数の数値。

『font-family』はフォント。

『a:link』は通常のリンク時の設定

『a:visited』読み込み済みのリンク時の設定

『a:active』クリックされた瞬間のリンク時の設定

ドット(.)で始まるやつは、「タグ名に依存しないクラス名を指定」している。
『<p class="font20">』や、『<a href="なんちゃら～" class="font20">』などで設定できる。

書いてはいないが、『table.white』などと指定すると、
「タグ名に依存するクラス名を指定」できる。
『white』というクラスは、『table』のタグでのみ使うことができる。
『<table border=1 summary="item" class="white">』など。



以上。こんな感じのを作ってきた。
成果物としては　↓　な感じで出来ていると思う。


imgのフォルダにはneko.jpgが入っている。
指定するときには『img/neko.jpg』だったね。

画面としてはこんな感じ。

↓





最後にHTMLチェックのサイト。
筆者はこのサイトを基準に作り上げてきたといっても過言ではない。


HTMLチェック


一通りサイトを作り終わったら、これでHTML文をチェックする癖をつけよう。

以上です。

あ～名残惜しい！まだタグもスタイルシートも
いっぱいあるのに！！（お腹いっぱいです


まぁ、基本は全部教えた（基本なのか、あれ）ので、
後は個人で改良しかない。こちらから提供できるものはもうなさそうよ；ｗ；



まぁ、雑談程度に次のページに、名残惜しいところをまとめました。

よければ見ていってくれ；ｗ；


次へ(HTML雑談会)


前へ(スタイルシート)


目次へ



別館TOPに戻る

ブログに戻る

初めてのHTML -超まとめ- ＠TWクラブ【BloodyRosary】製作

初めてのHTML　-超まとめ- ＠TWクラブ【BloodyRosary】製作