基本タグを書こう！

Webの森.com ホームページ作成支援サイト
基本
更新日:2011年10月22日
基本的な枠組み
<body>タグについて
表示してみよう
改行について
仕切り線
コメントアウト

基本的な枠組み

まず、ホームページを作るにあたって基本的な枠組みがあります。
- 書式 -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja-JP">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>ここにホームページのタイトルを入れてください</title>
</head>
<body>
ここに内容を記述していく
</body>
</html>
上記の<title>〜</title>でこのページのタイトルが付きます。
このページのタイトルは「Webの森.com - html編 基本タグを書こう！」になります。
DOCTYPE宣言
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> はDOCTYPE宣言と言い、この文章がどのバージョンのHTMLで作られているかをブラウザに伝えています。HTMLタグよりも前に書いてください。
日本語の指定
<html lang="ja-JP"> の属性のlangは、「日本で使われている日本語」のページですよと言うことです。見てる皆様の殆どは日本語の日本サイトだと思われますのでこのままで良いかと思います。
headの記述、文字コードの指定
<head>〜</head>の中には他にも様々なタグを入れることができます。その中で是非入れておいて欲しいタグが<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">です。これは文字コードを表しており、文字化け防止の為に指定しておいた方が良いでしょう。緑色の文字で文字コードを指定しています。基本このままで良いかと思いますが、文字化けする場合は変更してみると良いでしょう。値はShift_JIS、EUC-JP、UTF-8です。
他にもheadタグに様々なタグを記述できます。詳しくはこちらの<head>タグ内の記述をご覧下さい。
次に<body>〜</body>の中に、これからページの内容を記述していきます。
titleタグとbodyタグの解説図

<body>タグについて

今見ているページがあります。その内容は<body>〜</body>内に記述します。文字や画像など様々な要素を入れてページを作成していきます。
つまり、ページのメインとなる部分です。ホームページ作成の大部分はこの<body>〜</body>の中に記述していきます。

表示してみよう

まずは、簡単な記述をしアップロードして表示してみましょう。先ほどの基本タグだけでも表示されるはずです。トップページのファイル名は基本『index.html』になります。トップページのファイル名を指定しているレンタルサーバもありますので、使用方法や注意事項をちゃんと読んでからアップロードしましょう。
ファイル内容は<body>〜</body>の間の要素として好きな文字を書いて、そのファイルを『ファイル名.html』として保存してアップロードしてみましょう。指定のアドレスにちゃんと表示されれば準備完了です。

改行について

改行はとても簡単なタグになります。文字や画像などの改行に使います。
<br>
このタグを改行したい場所に書けばOKです。
・ここに文字<br>列があります。
このように改行タグを入れます。そうすると、
・ここに文字
列があります。
のように改行されて表示されます。

仕切り線

仕切り線を表示します。こちらも簡単なタグになります。
<hr>
このタグを仕切り線を置きたい場所に書けばOKです。
文字列１<hr>文字列２
このように仕切り線タグを入れます。そうすると、
文字列１
文字列２
のように仕切り線が表示されます。

コメントアウト

ブラウザつまりWebページに表示させない文字を書くことができます。
<-- ここにある文字をコメントアウトします。 -->
表示させたくない文字を、<-- -->で囲うだけです。さて問題はなぜ表示もしない文字を書く必要があるのでしょうか？それは、作者の説明、覚え書きなどに使用します。Webは一度作成したら終わりではなく、日々更新していく物です。後に自分で見て分かりやすく書くようにしましょう。
お願い
もしページの内容がお役に立てたら、ポチっと押して貰えると幸いです。
Powered by NINJA TOOLS
リンク
Yahoo! JAPAN
Google
ゲーム通販Navi
ゆりかご
DVD通販なび
ゲーム攻略委員会
SOMEDAY
Web作成関連紹介
ホームページ作成ソフト
ペイントソフト
Flash作成ソフト
参考書
素材集

正当なCSSです!