1と2の間辺りからはじめるHTML講座大体の感じを教えて

もくじ
目次を飛ばして本文へ
博士Ｈ：

そいじゃ、早速書いてみようかの。
生徒Ａ：

もうですか！？
生徒Ｂ：

（やりぃっ）
博士Ｈ：

論より実践じゃ。
基礎だけ知っておいて、
「あ、これいい」と思ったページの構造を見て、
それをまねて使っていくのじゃ。

「学ぶ」という単語も
もとは「まねぶ」から来ておってじゃな、
これは勉強の真髄なのじゃな。
生徒Ｂ：

博士。
博士Ｈ：

なんじゃ？
生徒Ｂ：

頭打った？(真剣)
・・・暫くお待ちください。・・・
生徒Ａ：

博士、専用のフォルダを作っておいたほうが
良いですよね。
博士Ｈ：

そうじゃな、
ファイルをどこへ保存したか分からないでは、
ちぃと困るでの。
生徒Ｂ：

よぉし、んじゃ、ええと、
カタカタカタカタ
あれ? 平仮名になっちまった。
これはこれでナウいか。
[ほめぱげ]と名付けられたフォルダ
生徒Ａ：

・・・Σ(￣[ ￣；
博士Ｈ：

では始めに、ちょいと便利な事を言うのじゃ。
実はタグに使う半角英数字は、
大文字でも小文字でも良いのじゃよ。
生徒Ｂ：

本当！？
博士Ｈ：

本当じゃよ。
じゃが、基本的に、区別がないのは
要素名と属性名だけだと思ってくれい。
生徒Ｂ：

楽になるな〜。
生徒Ａ：

博士、どうしても大文字で打ちたい人は、
どうするんですか？
博士Ｈ：

そういう人は、
ShiftキーとCaps Lockキーを
同時にポンしてみるのじゃ。
ホレ、Shiftキー無しで
大文字が出るようになったじゃろ。
この状態では、Shiftキーを押すと
小文字が出るようになっとるんじゃ。

元に戻したいときは、
Shift＋Caps Lockをもう一度ポンするのじゃ。
生徒Ａ：

ふーん、有難うございました。
博士Ｈ：

本題じゃ。

一番始めに<html>、
一番最後に</html>。
コレで、文全体がHTML文書である事を示すわけじゃよ。

極端な話、これだけでも良いのじゃ。

次のように書いてみるのじゃ。
ワープロソフトで書いてはいかんぞ。
テキストエディタで書くんじゃぞ。

 
<html>
　　はっはっは、ワタシはスーパーマン。
</html>
博士Ｈ：

書いた文章をテキトーな名前で保存して、
そのファイルの拡張子を「html」に変えるじゃ。
アイコンが変わったじゃろ?
InternetExplorer か Netscape のロゴマークが付いた
アイコンに変わったかの?

変わっとったら成功じゃ。

それじゃ、ファイルをダブルクリックしてみるのじゃ。
ホレホレ、簡単じゃろ？
生徒Ｂ：

はーかーせー、拡張子変えたら、
メモ帳で開けなくなったジャン。
いちいち拡張子、戻さなくちゃなんないの?
博士Ｈ：

幾つか方法があるの。

  1. メモ帳を開いておいて、
    そこにファイルをドラッグ&ドロップ
  2. メモ帳から、[ファイル]→[開く]で、
    [すべてのファイル]を選択、
    目的のファイルを[開く]
  3. デスクトップにメモ帳へのショートカットを作って、
    そこへファイルをドラッグ&ドロップ
  4. [送る]にメモ帳を追加して、
    右クリックでファイルを[送る]
  5. InternetExplorerなら、
    [表示]→[ソース]として
    メモ帳を起動

個人的には、5つ目がお奨めじゃ。
メモ帳以外のテキストエディタを使っておるなら、
小細工が必要じゃがの。
生徒Ａ：

[送る]にメモ帳を追加するのって、どうやるんですか?
博士Ｈ：

[C:\Documents and Settings\ユーザ名\SendTo]
(WindowsMe、98は[C:\Windows\SendTo])フォルダに
メモ帳のショートカットを置くのじゃ。

さて、話を戻そうかの。
これだけではさすがに心もとないで、
色々くっつけてみるのじゃな。
骨組を見ていくことにしようかの。

 
<html>
<head>
  ここには、
  ブラウザに関連する要素など、
  主にメイン画面に直接関係しない事を書くんじゃ。
</head>
<body>
  直接、表示画面に関係してくる部分じゃ。
</body>
</html>
博士Ｈ：

こうなっておる。

フレームっちゅうやつが最近はやっとるそうじゃが、
これは、構造がちょいと違うのじゃ。
フレームってどーなってるの？で紹介するが、
セッカチさんは、先に見に行っても良いぞ。
生徒Ａ：

へーーφ(.. )かきかき
博士Ｈ：

因みに上の図では、html要素の中に
head要素とbody要素が入っておるじゃろ。
これをhead、bodyがhtmlに
入れ子(ネスト)になっている、
というんじゃよ。
生徒Ｂ：

あー、上書き保存が面倒になってきた。
博士Ｈ：

[Ctrl]+[S]で簡単に上書き保存できるぞい。
生徒Ｂ：

コントロール？？
博士Ｈ：

キーボードの左下か右下にあるじゃろ。
それと[S]([と])を一緒に押すのじゃ。

少し前のWindowsじゃったり他のOSじゃと、
これに対応しとらんかも知れんのぉ。
そういう時は、他のテキストエディタを使ってみるとええ。
言語解説の「テキストエディタ」の項で
少しばかり紹介しておるぞ。

次回は、<head>と</head>の間に
書くものについて説明するぞい。
＜タグってどんなもの？[P] ヘッダに書き込むものって？[N]＞
▲見出しへ戻る
最終更新日：2003年11月24日
Copyright © 2001-2003 ばあど All Rights Reserved.