HP作成 htmlタグで初心者でも無料で簡単に

以下の人を対象に作ってます．
  • とりあえずホームページを作りたい人．
  • 細かいテクニックはどうでもいい人．
簡単にホームページの作り方を説明します．
次に空手道部のホームページがどうやって出来ているか解説しています．
部活のホームページに使われているものしか説明してません．
＊全て素人の自己流の作り方です．変な事，無駄な事しているはずです．

目次

ホームページの基礎

ホームページ

ホームページ(HP)とは貴方が今見ているようなネット上でのページのことです．
ホームページを作るには「html」という言語のプログラムを自分で書かなければなりません．
ところで，テキストファイルのファイル名は「名前.txt」と書きます．
.以下の部分を「拡張子」と言い，そのファイルの種類によって正しく付けなければなりません．
ホームページの拡張子は「.html」です．
なので，ホームページのファイル名は「名前.html」としなければいけません．

タグ

タグというのはhtmlでホームぺージの表示の仕方などを命令する記号のことです．
タグは　<　と　>　の中に命令を書かきます．

例：< 命令 >

そして多くの場合タグ同士で命令したい部分を囲みます．

例：< 命令 > 命令したい部分 < /命令 >
＊このとき後ろのタグには「/」を付けます．

実際にタグがどう使われているか見てみましょう．
「Internet Explorer」などホームページを見るソフトを「ブラウザ」と言います．
ブラウザのメニューバーから表示→ソースとクリックするとそのページがタグでどう書かれているかわかります．
確認できましたか？ごちゃごちゃしてますが慣れれば大丈夫です．

準備物

とりあえず以下のソフトを準備してください．
名称 説明 ソフト
エディタ 「メモ帳」など文章やhtmlを書くソフトのことです．
紹介する「ez-HTML」はホームページ作りに便利な機能がたくさんあります．		 ez-HTML
ブラウザ 「Internet Explorer」などホームページを見るソフトのことです．
 好きなのを使ってください
ＦＴＰクライアント 作ったホームページを公開するためのソフトです．
詳しくは後で説明します．		 FFFTP

様々なタグ

htmlには様々なタグがあり，それらが組み合ってホームページができます．
ここでは，それらの中からメインとなるタグだけを説明していきます．
エディタ「ez-HTML」を用意して実際に作っていきましょう

●基本：html・head・body・title

ez-HTMLを起動し，ファイル→新規作成をクリックすると以下のようなソースが出てきます．
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title></title>
</head>
<body>

</body>
</html>

次にこれらにコメントを付けていきます．
コメントとは，<!-- と --> に囲まれた部分で表示には関係なく，タグの説明やメモを書きます．
様々なタグの説明をコメントに書いていきます．
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja"> <!--ここからhtml文章 言語は日本語(htmlの間に書かれたタグが有効になります)-->
<head> <!--ここから文章のヘッダ情報(タイトル等，このホームページの情報を書く)-->
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title></title> <!--このホームページのタイトル-->
</head> <!--ここまでヘッダ情報-->
<body> <!--ここから本文(bodyの間に書かれたことが表示されます)-->

</body> <!--ここまで本文-->
</html> <!--ここまでhtml文章-->
コメントを付けるとタグがどういう命令をしているか良くわかりますね．タグの説明はコメントの通りですが，良くわからなくてもそのまま使えば良いので問題ありません．
これがホームページの基本となります．どんなホームページでもこの4つのタグは必須です．
とりあえずはタイトルと本文を書いてみましょう．
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja"> <!--ここからhtml文章 言語は日本語(htmlの間に書かれたタグが有効になります)-->
<head> <!--ここから文章のヘッダ情報(タイトル等，このホームページの情報を書く)-->
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>空手マン</title> <!--このホームページのタイトル-->
</head> <!--ここまでヘッダ情報-->
<body> <!--ここから本文(bodyの間に書かれたことが表示されます)-->
オッス！！
オラ空手マン！！！！
</body> <!--ここまで本文-->
</html> <!--ここまでhtml文章-->
書いたらez-HTMLの下にある「プレビュー」ボタンをクリックするか，保存をしてファイルを実行をしてください．
私の実行結果はこのようになりました． うまくいってるように見えますが，改行が出来ていません．次は改行のタグを説明します．

●改行：br

改行のタグは非常に簡単です．改行したい所に<br>を書けば良いだけです．
このタグは単独で働きをするので</br>で挟んだりしなくでも大丈夫です．
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja"> <!--ここからhtml文章 言語は日本語(htmlの間に書かれたタグが有効になります)-->
<head> <!--ここから文章のヘッダ情報(タイトル等，このホームページの情報を書く)-->
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>空手マン</title> <!--このホームページのタイトル-->
</head> <!--ここまでヘッダ情報-->
<body> <!--ここから本文(bodyの間に書かれたことが表示されます)-->
オッス！！<br>
オラ空手マン！！！！<br>
</body> <!--ここまで本文-->
</html> <!--ここまでhtml文章-->
実行すると はい．改行ができました．
次は見出しを付けてみます．

●見出し：h1・h2・h3

●横罫線：hr

●表：table・tr・td

●ブロック・中央寄せ：div

●箇条書き:ul・li

●画像：img

●リンク：a

●フレーム：iframe

スタイルシート(css)

htmlタグを使ってホームページが出来ましたが，そのままだと見栄えがあまり良くありません．
そこで登場するのがスタイルシート(css：Cascading Style Sheets)です．
cssを使うことで表示を大きく変化させることができ，見栄えがぐっと良くなります．
ここではcssの使い方の説明をします．

JavaScript

ここまでで良い感じにホームページが出来たと思います．
しかしそれでも満足できないときはさらにJavaScriptと言うプログラムを追加します．
JavaScriptではクリックやドラッグなどマウスの動きで表示を変えたりすることができます．
部活のホームページではメニューの文字が反転する所に使われています．
ここではその部分だけ説明します．
その他興味がある人は他の詳しいサイトを見てください．

ホームページの公開

ホームページを作ってもネットに公開しなければ他の人に見てもらうことはできません．
ここではホームページをネットに公開する方法を説明します．

部活ホームページの説明

検索順位の上げ方(seo対策)

とりあえず，後継者が現れるまでには完成させます 2009/06/07
ねむい．今日はここまで．また今度．明日は８時から研究室で稲刈り（；＿；） 2009/09/23
徳島大学空手道部-部活(サークル)紹介ホームページ-
inserted by FC2 system