親方インフォ　簡単ホームページ作成講座

もっと楽しく！
インターネットショッピング！
便利なページを創りましょう！

CONTENTS

◆Top
◆Shopping
◆オンラインカジノ
◆アフィリエイトを始めよう！
◆ホームページ作成
◆フリー素材集
◆懸賞情報をチェック
◆Search&Link
◆ホームページ製作
◆Gallery
◆BBS
◆Fishing
◆リンク集
◆Profile
◆ゲームセンター

古本・ブランド・PC等300万商品を激安ショッピング！

サーチ:
Keyword:

簡単ホームページ作成講座

※用語解説のリンクにつきましては、「　ＩＴ用語辞典　e-Words　（株式会社インセプト）」　様の許可を得てリンクしています。下記の検索窓もご利用ください。

　｜index｜１｜２｜３｜４｜５｜６｜７｜８｜

まずは文字を表示してみよう

　HTMLファイルの基本要素は、次のタグから成り立っています。

Sample

<HTML>
<HEAD>
<TITLE>タイトル</TITLE>
</HEAD>
<BODY>
ここの文字が表示されます
</BODY>
</HTML>

1.html

上のソースをメモ帳に入力（面倒くさい人はコピー）してみましょう。<HTML>←これらがタグと言われるものです。半角文字で入力してください。大文字と小文字は関係有りませんので、<HTML>と<html>は同じに扱われます。
　入力が終わりましたら、名前を付けて保存をします。任意の場所でかまいませんが、今後いろいろなファイルを作ってゆきますので、デスクトップ等にフォルダを作成しておきましょう。今回は、デスクトップに「HTML」というフォルダを作成し、「1.html」と言うファイル名で保存してみます。ファイルの拡張子には、「．html」または、「．htm」とします。半角英数字で入力してください。デスクトップにできたフォルダを開くとこんな感じになると思います。1.htmlをダブルクリックすると、ブラウザが起動し、このように表示されます。

　 <HTML>～</HTML>：このドキュメントがHTMLで書かれている事を宣言しています。
　 <HEAD>～</HEAD>：ドキュメントに関する情報を記述します。後ほど触れる事にします。
　 <TITLE>～</TITLE>：このページのタイトルを記述します。ブラウザ左上部に表示されます。「お気に入り」や「ブックマーク」に追加すると、このタイトルが付きます。分かりやすいタイトルを付けるよう心がけましょう。
　 <BODY>～</BODY>：ここがメインのドキュメントになります。<BODY>タグの間に記載されたものがブラウザに表示されます。

　 HTMLタグはこれが基本形になります。基本は、
<○○>（開始タグ　start tag）で始まり、</○○>（終了タグ　end tag）スラッシュを付けて終了します。終了タグは省略（元々無いものもある）できる事もあります。

タグは、半角文字で入力すれば、大文字、小文字は関係ないと書きました。現在の HTML の規格では大文字、小文字の区別はしていません。しかし、次世代の HTML の規格である XHTML では、タグは必ず小文字で記述するよう統一されるようです。現在 W3C が仕様策定しています。
　なぜ XHTML が必要なのかと言うと、元々 XML に準拠して作られた HTML ですが、独自の拡張が進み XML と一部整合性が取れなくなってしまったからのようです。
　XHTML では、見栄えに関するタグ（等）は廃止、全てCSSで指定するようになり、終了タグの無いタグ（ 等）にも終了タグが付くようになるようです。
　XHTML の詳細については、IT用語辞典の解説をお読みください。

　このサイトのタグの表示には、大文字を使用していますが、小文字だとブラウザに表示した時に文字間隔が詰まりすぎ、見にくい為です。いちいち大文字で記述するのは面倒くさいですし、メリットはありませんから、小文字で打つようにしてください。私も実際のページ作りでは勿論小文字を使用しています。

改行しよう

<body>タグの中に文字を書けばブラウザに表示される事が分かりました。でも、それだけではどんどん横に文字列が伸びていくだけで、とても見難いページになってしまします。適当なところで改行を入れてみましょう。改行タグは です。

Sample

<HTML>
<HEAD>
<TITLE>これは見にくいよ</TITLE>
</HEAD>
<BODY>
ただ単に文字を入れていくだけだと、
どんどんどんどん文字は横に広がっていくよ。
テキストエディタで入力する分には「Enter」キーを
押せば改行してくれるけど、ブラウザに表示すると
一行に繋がってしまうよ。

そんな時は タグを使いましょう。
終了タグは無いから、改行したい所に入れてね。
</BODY>
</HTML>

2.html

上のソースを前にやった要領でメモ帳にコピーして、「2.html」とでも名前を付けて保存、ダブルクリックしてブラウザに表示してみましょう。ただ単に横に文字が繋がっていって（ブラウザの幅まで）しまいます。これでは見難いですね。 タグを付けたのが下のソースです。

Sample

<HTML>
<HEAD>
<TITLE>改行するとこんな感じ</TITLE>
</HEAD>
<BODY>
ただ単に文字を入れていくだけだと、 
どんどんどんどん文字は横に広がっていくよ。 
テキストエディタで入力する分には「Enter」キーを 
押せば改行してくれるけど、ブラウザに表示すると 
一行に繋がってしまうよ。 

そんな時は＜BR＞タグを使いましょう。 
終了タグは無いから、改行したい所に入れてね。 
</BODY>
</HTML>

3.html

違いが分かりましたか？上記の例では空白行を作るのに タグを2度書いていますが、段落をつくる場合はタグを使えます。

Sample

<HTML>
<HEAD>
<TITLE>改行するとこんな感じ</TITLE>
</HEAD>
<BODY>
ただ単に文字を入れていくだけだと、 
どんどんどんどん文字は横に広がっていくよ。 
テキストエディタで入力する分には「Enter」キーを 
押せば改行してくれるけど、ブラウザに表示すると 
一行に繋がってしまうよ。

そんな時は＜BR＞タグを使いましょう。 
終了タグは無いから、改行したい所に入れてね。 
</BODY>
</HTML>

4.html

ちなみに、 をタグに変えると、一切改行しなくなります。横スクロールって、見てる側はイライラするので、あまり使わないと思いますが…。

Sample

<HTML>
<HEAD>
<TITLE>改行しない</TITLE>
</HEAD>
<BODY>

ただ単に文字を入れていくだけだと、
どんどんどんどん文字は横に広がっていくよ。
テキストエディタで入力する分には「Enter」キーを
押せば改行してくれるけど、ブラウザに表示すると
一行に繋がってしまうよ。

そんな時は＜BR＞タグを使いましょう。
終了タグは無いから、改行したい所に入れてね。

</BODY>
</HTML>

5.html

｜INDEX｜１｜２｜３｜４｜５｜６｜７｜８｜