ホームページの作り方
最近は、簡単にページやブログを作ることができます。
昔に比べて非常に便利になった反面、根本的な質問をよく受けます。
これを読んで、基本的な概念を理解して頂ければ幸いです。
～メニュー～
●最初に
●ページを作る方法
●ファイルの書き方
●ＨＴＭＬの基本
●ページレイアウト
●フォント
●ＲＧＢ値（カラー）
●画像の貼り方
●ＢＧＭの貼り方
●リンク
●テーブル（表組）
●フレーム
●フォーム
●スクリプト
●最初に
ホームページは設計図ファイルでできてます。
パソコンはその設計図を読み、綺麗に表示します。
設計図ファイルはHTMLという論理構造でつくられており、白紙のファイルに自分で一からその論理構造を書き込んでページを作る。
HTML論理構造を用いることで、すべての人が思いどうりのページを作ることができるわけです。
つまりHPを作るということは、HTML論理構造に従い、ファイルに文章を書くことなのである。
なんてことはない、メモ帳の文書ファイルでＯＫ
また、そのファイルはホストと呼ばれるちょっといいコンピューターに置いてあります
ネットでＵＲＬを指定すると、ホストコンピューターが設計図ファイルをパソコンへ送ります。
パソコンはその設計図を読み、綺麗に表示するだけ。
「設計図ファイルはホストにある」これ重要です
だから
ページを見る、というのはホストに設計図を送ってもらうこと
ページを作る、というのはホストの設計図を書き直すこと
なのであります
初めはそれさえ理解すれば十分。
メニューへ
●ページを作る方法
前述したとおり、ページを作るとはホストの設計図を書き直すことです
設計図ファイルは、ホストのフォルダの中に作ります
方法は２通り
・自分のパソコンでファイルを作って、それをホストに転送する
（ホームページビルダーなんかがそう）
・ホストに直結してファイルを作る
（ブログなんかが、そんな感じ。最近の無料ホームページサーバーもこんな感じ。）
メニューへ
●ファイルの書き方
超基本的にやるとすれば、、
メモ帳を用意します
最初のページはファイル名を必ずindex.htmlとします
HTML形式で文章を書きます（下記は必ずいる文章）
<html>
<head>
<title>タイトルバーに表示される文字</title>
</head>
<body>
ブラウザに表示される部分（本文）
</body>
</html>
書けたら、それをホストのフォルダに保存してできあがり。
（転送する。ホームページビルダーの転送設定ではこれを行っているのです。）
（もちろんFTTTPというソフトを使って自分でやることもできます。）
メニューへ
●ＨＴＭＬの基本
HTMLの使い方は誰でも最初は悩むもの。
とりあえず悩んでないで、ネット上で検索して情報を手に入れたり、他の人のページを参考にすればいい。
（「ソースの表示」を選べばどのような設計図になっているか見ることができる。）
実際、そこらへんは根性。大変だが、自分で作る場合はそういう努力が必要。
本を買って勉強するのもいいかも。
自分は昔Justsystem出版の「タグ入門ガイド いますぐHTMLが使える本」を読んだりした。
～必要最低限のHTMLの知識～
・綺麗なページをつくるには
ファイルに普通に文章を書くだけでもいちおうページは作れるが、デザインされたページを作るには、文字のsize,color,positionなどを指定する必要がある。そのため活躍するのがHTML。HTMLで定義されたタグを文字と一緒に書き込むことで、ページをデザインする。
・HTMLの基本的構造
<html>
<head>
<title>タイトルバーに表示される文字</title>
</head>
<body>
・
・ブラウザに表示される部分（本文）
・
</body>
</html>
注；
タグは半角のみ、大文字・小文字は自由。
HTMLでファイルを作ったら、ファイル名に.htmlとつける。
ファイル名は半角英数文字で小文字に統一するのが良い。（８文字まで）
・覚えておくべきタグ
<html>
HTMLファイルの宣言
<title> ページのタイトルの指定
<body> 内容の指定
<br>
改行
<p> 段落
<hr> 枠線
<div> ブロック要素（文）の指定
<hn>
見だしの大きさ（n=1～6）
<font> テキスト（本文）の属性の指定
<img> 画像ファイルの貼り付け
<a> リンク文字の設定
<table> 表組の作成
<form>
入力フォームの定義
注；
これらのタグは単体で使用しても意味をなさない。
あくまで意味を記述したのみ。
他ページのソースを見るときに役立てて。
いきなりHTMLで一からファイルを書くのは難しいので、最初は、普通に書き込みするだけで機械が自動的にHPを作ってくれるサービスを利用するといい。いとも簡単に立派なHPができる。大抵パソコンにソフトが入ってる
メニューへ
●ページレイアウト
中央寄せ
<div align="center">ここに目的の文章</div>
右寄せ
<div align="right">ここに目的の文章</div>
改行
<br>
段落
<p>ここに目的の文章</p> （<p>は単体でも使用できる）
見出し
<h1>ここに見出し語</h1>
h1～h4くらいまであったような
太字
<B>太字</B>
斜体
<I>斜体</I>
下線
<U>下線</U>
リスト
<UL>
<LI>リスト１
<LI>リスト２
</UL>
番号付きリスト
<OL>
<LI>リスト１
<LI>リスト２
</OL>
説明付きリスト
<DL>
<DT>説明
<DD>内容
<DT>説明
<DD>内容
</DL>
- メニューへ
●フォント
文字の色とサイズの指定
<font="#ffffff" size="+1">ここに目的の文章</font>
色はＲＧＢ値かred,blue,green,white,yellowなどでも可
サイズは-2から+6まで
メニューへ
●ＲＧＢ値（カラー)
ああん#ff0000
ああん#990000
ああん#00cc00
ああん#009900
ああん#ffff00
ああん#999900
ああん#660000
ああん#0000ff
ああん#000099
ああん#ff00ff
ああん#990099
ああん#00ffff
ああん#009999
ああん#666666
ああん#cccccc
ああん#000000
白 #ffffff
メニューへ
●リンク
ページ（ファイル）へのリンク
<a href="index.html">ここにリンク名</a>
ファイル名を入れる
同じページ内でのリンク
<a href=#rarara>ここにリンク名</a>
<a name=rarara>リンクされるもの</a>
上のタグで指定したとこを押すと、下のタグで指定したとこに飛ぶ
ＵＲＬへのリンク
<a href="http://www.nda.ac.jp/index-j.html">ここにリンク名</a>
メニューへ
●画像の貼り方
<img src="p.jpg">
画像ファイル名を指定する
細かく指定するには
<IMG src="Email0001.jpg" width="678" height="447" border="0">
など
縦横の比が崩れるので、基本的にやんないほうがよろしいですな
メニューへ
●ＢＧＭの貼り方
いろんな方法がありますけんども
<EMBED src="history.mid" autostart="true" hidden="true" loop="true">
メニューへ
●テーブル
列の結合
<TABLE border="1">
<TBODY>
<TR>
<TD colspan="2">声の出し方</TD>←列の結合（２列くっつけるって意味）
</TR>
<TR>
<TD >雄</TD>
<TD >うぬぬ</TD>
</TR>
<TR>
<TD >雌</TD>
<TD >ららら</TD>
</TR>
</TBODY>
</TABLE>
行の結合
<TABLE border="1">
<TBODY>
<TR>
<TD rowspan="2">声の出し方</TD>←行の結合（２行くっつけるって意味）
<TD>男</TD>
<TD>むぅ</TD>
</TR>
<TR>
<TD>女</TD>
<TD>にゃ</TD>
</TR>
</TBODY>
</TABLE>
進化系
| 車名 | ホンダCB400F |
| 車両重量 kg | 前軸 | 87 |
| 後軸 | 96 |
| 計 | 183 |
<TABLE width="50%" border=1>
<TBODY>
<TR>
<TD bgColor=#ffff00 colSpan=4>車名</TD>
<TD color="#fffff0">ホンダCB400F</TD>
</TR>
<TR>
<TD bgColor=#ff8c00 colSpan=3 rowSpan=3>車両重量 kg</TD>
<TD bgColor=#ffa500>前軸</TD>
<TD color="#fffff0">87</TD>
</TR>
<TR>
<TD bgColor=#ffa500>後軸</TD>
<TD color="#fffff0">96</TD>
</TR>
<TR>
<TD bgColor=#ffa500>計</TD>
<TD color="#fffff0">183</TD><
/TR>
</TBODY>
</TABLE>
メニューへ
●フレーム
フレームのページを作るには、まずどのようにページを分割するかを指定するページをつくる
（これがリンクされるページ）
次に分割されたぺーじを個々に作る
つまり２分割なら、設計ページ１つ、内容ページ２つの計３つのファイルをつくる
設計図ファイルの作り方
<html>
<head>
<TITLE></TITLE>
</HEAD>
<FRAMESET rows="89%,11%">←分割指定（これは上下に分割）
<FRAME src="ue.html">
<FRAME src="sita.html">
<NOFRAMES>
<BODY>
<P>フレームをサポートしているブラウザで見てくださいませ</P>←任意
</BODY>
</NOFRAMES>
</FRAMESET>
</HTML>
左右で分割するなら
<FRAMESET cols="50%,50%">などとする
さらに縦横を両方に分割する場合は内容ファイルを設計図ファイルに換えて指定する
注意！！
フレームページに戻るとき、設計図ファイルにリンクを貼るとフレームの中にフレームができてしまう
戻るリンクを指定するときは内容ファイルにリンクを指定する
メニューへ
●スクリプト
説明するのは難しいので？
ってかよく分からないので簡単なものを載っけておきます
貼り付けモノはソースから見るとおかしくなるのでこのままコピーしてくららい
「マウスクリックでメッセージボックスを出す」
<BODY>を下記のようにする
<BODY onmousedown="alert('ふっ 効かんな');">
「画像等のイメージがクリックされたらメッセージボックスを出す」
下記を貼り付ける
<script language="JavaScript1.2">
/*
Disable right click script II (on images)- By Dynamicdrive.com
For full source, Terms of service, and 100s DTHML scripts
Visit http://www.dynamicdrive.com
*/
var clickmessage="二次転用されたら責任とれません"
function disableclick(e) {
if (document.all) {
if (event.button==2event.button==3) {
if (event.srcElement.tagName=="IMG"){
alert(clickmessage);
return false;
}
}
}
else if (document.layers) {
if (e.which == 3) {
alert(clickmessage);
return false;
}
}
else if (document.getElementById){
if (e.which==3&&e.target.tagName=="IMG"){
alert(clickmessage)
return false
}
}
}
function associateimages(){
for(i=0;i<document.images.length;i++)
document.images[i].onmousedown=disableclick;
}
if (document.all)
document.onmousedown=disableclick
else if (document.getElementById)
document.onmouseup=disableclick
else if (document.layers)
associateimages()
</script>
メニューへ
投稿
