入門
始めに ホームページを手作りするのにはHTMLなんか知らなくても、HP作成ソフトがあれば全然平気です。
しかし、HTMLを理解することによって、さらに作成ソフトを使いこなしたり、作成ソフトに用意されていない機能を使ったり、ホームページを軽くしたりと、用途は果てしないので覚えておいて損はないのです。
HTMLって何？ ＨＴＭＬって何者？
HTMLとは 「Hyper Text Markup Language」 の英語略
どういうことかというと・・知らなくてもぜんぜん平気なことですから、難しいことは抜きにして次に進みましょう。
では、ＨＴＭＬをつくるのに必要な道具は何でしょう？
とりあえず、文字を入力するためのHTMLエディタ(テキストエディタ)が必要です。
ワープロソフトやウィンドゥズ付属のメモ帳・ワードパットでも作れます。
ただ、メモ帳等を使うよりいろいろな機能が盛りだくさんのHTMLエディタに慣れるのがベターだと思います。
HTMLエディタの中には、ボタンひとつで基本書式が用意されたり、タグが挿入できたり、Webで確認しながら作成出来たりと編集には何かと使いやすく出来てるものが多いので、是非使ってみてください。 フリーウェアでもたくさん出回ってますから是非検索して入手してください。
次に、作ったホームページをサーバーに送るために必要なＦＴＰソフトと呼ばれるものがなければいけません。
ロケットの発射台だと思っていただければよいかも知れません。
これもフリーフェアで出ています。 FFFTPなんかが良く使われているようです。
また、中にはＨＴＭＬエディタとFTPソフトが一緒になったものも出ています。
もうほとんどホームページ作成ソフトですね。 HomepageManager などが代表的なものです。
HTMLの構成を知ろう HTMLって実は簡単な構成になっているんです。下が基本書式です。
| <HTML> <HEAD> ページに関する指定を記述 </HEAD> <BODY> 実際にブラウザに表示される内容を記述 </BODY> </HTML> |
HTMLを構成するタグ
タグとは「<」と「>」の間にアルファベットで書かれている、決められた単語のようなもののことです。
タグは命令語なのでブラウザがそれを読み込むと、文字にしたり、画像を貼り付けたり、デザインを変更したりします。
タグの記述は半角のアルファベット。大文字でも小文字でもどちらでもＯＫです。
<HTML>〜</HTML>
はじめの<HTML>は「ここからＨＴＭＬ文書が始まります」という意味です。
そして最後の</HTML>は「ここでＨＴＭＬ文書は終わりです」という意味、「/」のマークは終わりを表わします。
<HEAD>〜</HEAD>
ヘッダと呼びます。<HEAD>〜</HEAD>の間に書かれた文書はブラウザには表示されません。
ここは、ＨＴＭＬ文書に関する情報やスタイル、スクリプトなどを記述するところです。
<BODY>〜</BODY>
<BODY>〜</BODY>の間にかこまれたところには実際にブラウザ上に表示するものを書くところ
つまり、ホームページでブラウザに表示されている全てのものは<BODY>〜</BODY>の間にかかれているのです。
どのホームページもＨＴＭＬ文を見ると必ずこのような形をしています。
実際にHTMLテキストをつくってみよう まず基本になる書式を一緒に書いてみましょう
メモ帳を使います (プログラム⇒アクセサリ⇒メモ帳)
| <HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML> |
「<」と「>」と「/」、英字もすべて半角です
この段階ではまだなにも表示されない白紙のページです。
書き終えたらまず保存をする準備をします。
まずHTMLを保存しておく専用フォルダを作っておきましょう。
場所はマイドキュメントなど、どこでもいいです。
作り方はマイコンピューターから作成する場所(ドライブやフォルダ)を表示させて、「ファイル」をクリックしたら「新規作成」から「新しいフォルダ」です。
フォルダの名前は「新しいフォルダ」から「homepage」のようにわかりやすい名前に変えておくと良いでしょう。
※インターネットでホームページを公開する場合、サーバーにアップロードするフォルダやファイルには日本語や全角のアルファベットは使えません。使える文字はすべて半角英数字なので、日頃からホームページ関連のファイルやフォルダには、半角英数字を使う習慣をつけましょう。
× ⇒ さくら.gif ＳＡＫＵＲＡ.gif (ローマ字全角大文字) ｓａｋｕｒａ.gif (ローマ字全角小文字)
次にちょっと確認です。
あなたのPCは、ファイルが表示されている画面で拡張子が見えていますか？
→ 
拡張子とは上の図でいう .htm のことです。
拡張子が見えていると、ファイルの種類を見分けたり、ファイルを作成したりするときにとても便利です。逆にこれが見えていないとファイル操作が思うように進みません。
表示のさせ方は、ツールバーの表示 → フォルダオプション → 表示 →
登録されているファイルの拡張子を表示しない のチェックをはずします
それではメモ帳で作成したファイルの保存をしましょう。
メモ帳の左上にあるファイルというところを左クリックして、「名前を付けて保存」を選んでください。
そこで、ファイル名のところに「index.htm」と半角英数字で書いて保存ボタンを押しましょう。
この保存した拡張子 「.htm」（.htmlでもよい）が、コンピューターに「ＨＴＭＬ文書ですよ」ということをわからせる命令です。これがないとコンピューターはHTMLだと判断しなくなり、クリックされてもブラウザを起動しなくなるのです。
今作った自分のホームページを見てみましょう。
インターネットにつながなくても自分の作ったページだけはブラウザで見ることができます。
保存したtest.htmをダブルクリックで開いてみましょう。ブラウザが立ち上がるはずです
＊チェック このようにできましたか？
※何も写っていないただのWebページです。
タイトルを入力しよう 前で作ったファイルを使います。
閉じてしまった方は開いてください。
開き方は、作ったファイルを選択(1回クリック)して → ファイル → プログラムから開く → notepad です
※右クリックメニューからでも同様にできます
タイトルを書きましょう。タイトルバーに表示されます。
| <HTML> <HEAD> <TITLE>花子のホームページ</TITLE> </HEAD> <BODY> </BODY> </HTML> |
<TITLE>〜</TITLE>
ページのタイトルを指定するところです。ここを指定するとブラウザのウインドウ上部のタイトルバーに表示されるだけでなく、他の人がお気に入りに登録する時に、ここで指定したタイトルで登録されたり、Googleなどの検索エンジンで検索されるときのキーワードになります。
タイトルは<HEAD>〜</HEAD>の間に入力します。タグは使えません。
ちなみにタイトルの記入がなくてもHTML文は成立します。
＊チェック このようにできましたか？
本文を書いてみよう つぎに実際にブラウザで表示される部分(本文)を書いてみましょう。
| <HTML> <HEAD> <TITLE>花子のホームページ</TITLE> </HEAD> <BODY> 花子のホームページにようこそ </BODY> </HTML> |
<BODY>〜</BODY>に文字を入力する
<BODY>〜</BODY>の間にかこまれたところには実際にブラウザ上に表示するものを書きます。
つまり、ホームページでブラウザに表示されている全てのものが<BODY>〜</BODY>の間にかかれているのです。 これが基本的なＨＴＭＬ文書の構造です。
この形はホームページの基本形だからしっかり覚えましょう。
はい これでもうＨＴＭＬ文の出来上がりです。いかがですか？簡単ですよね。
それでは次に、本文をいろいろ変化させるタグについてご説明します。
＊チェック このようにできましたか？
タグをつけてみよう 本文を太字にしてみましょう。
花子ホームページというところを太字にしてみます。
太字にする(命令する)タグは <B> です。
| <HTML> <HEAD> <TITLE>花子のホームページ</TITLE> </HEAD> <BODY> <B>花子のホームページ</B>にようこそ </BODY> </HTML> |
タグは通常、開始タグと終了タグというものがあって、この２つで囲んで記述します。
終了タグとは開始タグに「 / 」が入ったもののことです。ここまでと言う意味です。
ですから太字にしたい先頭の場所に<B>を、太字を終了させたい場所に</B>を記述します。
＊チェック このようにできましたか？
文字を斜めにしてみよう
今度は太字にしたところを斜体にしてみます。
斜体にする(命令する)タグは <I> です。
| <HTML> <HEAD> <TITLE>花子のホームページ</TITLE> </HEAD> <BODY> <B><I>花子のホームページ</I></B>にようこそ </BODY> </HTML> |
一度にふたつの命令をしたわけですけど、新しく挿入するタグは前に入れたタグの内側でも外側でもどちらでもかまいません。ただし、タグをつけられる要素に対して、開始タグと終了タグは同位置になければなりませんので注意してください。
ダメな例 <B><I>花子のホームページ</B></I>にようこそ
また、タグ見てのとおりタグは入れ子にできます。
文字を飾りたい命令(タグ)がＡとＢとＣ３つあった場合でも、入れ子にして書いていけばいいのです。
例：<タグＡ><タグＢ><タグＣ>文字</タグＣ></タグＢ></タグＡ>
※複数のタグを指定した場合、タグは要素に近い順で反映されます。たとえば上でいうと誤ってタグＡに赤色を指定、タグBに青色を指定したとします。ブラウザでは要素である文字に近い順に読み取りますので、青色で表示されるということになります。
＊チェック このようにできましたか？
ここまでが基本です。きちんと押さえたらあとは応用です、いろいろなタグについてご紹介します。
右のメニューから順にご覧ください。