自分のスキルアップの為に「覚書」つもりでこのページを作ってみました。楽しみながら遊び感覚でパソコンを 触ると、上達が早いような気がします。自分流にホームページを作って其れが動作したときは格別の気分です。 優越感を覚えるのは確かです。ここに記述している内容は管理人が「css」「html」を忘れないようにする為の 覚書です。
HTMLとは
WebページはHTME文書と言うファイル及び画像ファイル等で作られています。 HTML文書で使われているプログラミング言語が「HTML」です。 そして「HTML」を使うには基本的な「ルール」があります。この「ルール」を覚える必要が あります。しかしそんなに難しくありません。初歩からじっくり覚えましょう。
HTMLでは「<」「>」で括られた命令を記述する事により、画像や文字列をどの様に表示 するかを定義します。この命令をタグと言います。このタグは全て半角英数字で記述します。 大文字でも小文字でもどちらでも構いません。

概略以下の様に記述します。
<html>
<head>
<title>文字通りタイトル</title>
</head>
<body>
本文。表したい内容、画像などを記入します。
</body>
</html>
「html」と言うプログラミング言語で始めと終わりを括ります。
<html>〜</html>
「head」と言うセクションにそのページのタイトル等を記述します。
<head><title>文字通りタイトル</title></head>
「body」と言うセクションには文書、画像などを記述します。
<body>ページ内で書き表したい事柄、或いは画像などを貼り付けます。</body>
html言語
<html>
<head>
<title>htmlでホームページを作ろう</title>
</head>
<body>
<font size="大きさ"
color="#色"
face="フォント名">
楽しいホームページで友達の輪を<br>
パソコンを触りだしてから間もない、パソコン音痴の私ですが、ホームページ作りに挑戦してみました。<br>
それが出来たんですよ。
</font>
<img src="ファイル名"
align="位置"
align="縦位置"
hspace="左右の余白"
vspace="上下の余白"
width="画像の幅"
height="画像の高さ"
border="枠の太さ"
alt="画像の説明文">
<br clear="位置">
・サンプルです。
<img src="image/dog.jpg" align="left" width="375" height="200" border="2" style="filter:Alpha(style=3,opacity=100,finishopacity=0)>
<font size="3" color="#ffff00" face="MSゴシック">
ワンちゃん達の可愛い仕草を画像に納めてみました。ほんとによく動きますので、カメラに収めるのが、大変でした。
<br clear="all"> そうですよね、子犬ですもの好奇心旺盛、動くの当たり前ですよね。
</font>

</body>
</html>
<br>とは改行のことです。
適当な所で改行し文字列を見やすくしましょう。

fontの指定
・属性の前には半角スペースを挿入します。
・絶対値でのフォントサイズの指定
<font size="1から7までの整数、3が基準値">文字列</font>
・相対値でのフォントサイズの指定
<font size="±1から±6までの整数">文字列</font>
・<font color="#カラーコードまたは色の名前">文字列</font>
・<font face="フォント名">文字列</font>

★Webプラウザで表示できるフォントは、Webページを見る人のパソコンにインストールされているフォントだけが表示できます。

画像の挿入、文字列の位置関係
・属性の前には半角スペースを挿入します。
・画像を挿入するには、挿入したい位置に<img>のsrc属性を入力し、画像のファイル名 あるいはURLを指定します。
〔画像のファイル名とは・・image(フォルダーの中の)/img.jpgなどの(ファイル)〕
〔画像のURLとは・・ホームページのアドレス名/ドライブ名/ホームページを格納しているフォルダー名/画像のファイル名〕
・align属性の位置は"left"と"right"です。文字列は"left"を指定すると画像の右に回りこみます。"right"を指定すると画像の左に回りこみます。
縦位置は"top""middle""absmiddle""bottom"の4種類があります。
・hspace属性はピクセル数で指定します。画像の左右に余白を作ります。
・vspace属性はピクセル数で指定します。画像の上下に余白を作ります。
・alt属性の画像の説明文は、マウスでポイントすると文字列が表示されます。
・<br>のclear属性は文字列の回り込みを解除します。"all"を指定すると<img>のalign属性の指定に関係なく文字列の回り込みを解除します。
・画像の幅、高さはピクセル数か比率(%)で表します。
<width="250" height="150">のように。
・画像の枠線の太さはピクセル数で表します。
<border="3">のように。
リンクの設定
・リンクとは、ページ内の画像或いは文字列から、ページ内の移動したい場所或いは 他のページを表示させる為の仕組みの事です。リンク先には電子メールアドレス、画像ファイル、その他のページなどを設定できます。
リンクのタグと属性です
a (ハイパーリンクの設定)の属性は以下です。
href...リンク先のファイル名、URLを指定する。
name...リンク先の参照明の指定。
target...リンク先のフレーム名或いはウィンドウを指定。
img (ページに画像を配置する)の属性は以下です。
src...配置する画像のURLを指定。
alt...画像をポイントすると表示されるテキストを指定。
align...画像と文字列の位置関係を指定。
border...画像の周りに表示される枠線の太さの指定。
width...画像の横幅を指定。
height...画像の高さの指定。
vspace...画像の左右の余白の指定。
hspace...画像の上下の余白の指定。
リンクを設定して置けばどこにでも瞬時に移動できます。「target="blank"」と、属性 を指定すれば「別ウィンドウ」で表示されます。
・電子メール送信のリンクを設定する。
<a href="mailto:電子メールのアドレス">文字列或いは画像</a>
設定されている文字列の色の変更
・リンク先を表示していない場合は「link」
・既にリンク先を表示している場合は「vlink」
・文字列をクリックしている場合は「alink」
ページ間のリンクの設定
<a href="hana.html">菜の花畑・房総編</a>
「菜の花畑・房総編」をクリックすると「hana.html」が表示する様にリンクを設定する。
ページ内の特定の部分にリンクの設定
<a href="#nanohana">菜の花</a>
<a name="nanohana">菜の花畑・房総編</a>
菜の花をクリックすると同じ ページ内の菜の花畑・房総編をWeb表示画面の先頭に表示される。

他のページへの指定位置にリンクの設定
<a href="hana.html#nanohana">菜の花</a>
<a name="nanohana">菜の花畑・房総編</a>
菜の花をクリックすると同じフォルダー内の「hana.html」にある菜の花畑・房総編を Web表示画面の先頭に表示される。
tableの設定
・HTMLは文字列を縦横に区切った表を作ることが出来ます。
表では「セル」ごとに幅や高さを自由に変更でき、セル内の
文字の位置の変更も出来、また表の外枠線の太さや背景色も
変更できるなどの、様々な設定が出来ます。
・tableの中にtableを作ることも出来ます。

☆table[表を定義する]
「属性」
width--表の幅を指定する
border--表の外枠線の太さを指定する
cellpadding--セルとセル内の余白を指定する
cellspacing--セルとセルの間隔を指定する
bgcolor--表の背景色を指定する
background--表の背景画像を指定する
align--表の位置を指定する
rules--罫線の形状を設定する
frame--外枠の形状を設定する
bordercolor--外枠の色を指定する

☆tr[表の行を作成]
「属性」
align--セル内のデーターの横方向の位置を指定する
valign--セル内のデーターの縦方向の位置を指定する
bgcolor--一行の背景色を指定する

☆th[見出しのセルを作成する(属性は"td"と同じ]

☆td[表のセルを作成する]
「属性」
rowspan--セルの縦方向の長さをセルの個数で指定する
colspan--セルの横方向の長さをセルの個数で指定する
align--セル内のデータの横方向の位置を指定する
valign--セル内のデータの縦方向の位置を指定する
bgcolor--セルの背景色を指定する
background--セルの背景画像を設定する
height--セルの高さを指定する
width--セルの幅を指定する
nowrap--セル内の文字列の改行を禁止する
基本的な「table」を作る
・<table>→表の作成
<tr>→行の作成
<td>セルa</td><td> セルb</td>→セルの作成
</tr>→行の作成
<tr>→行の作成
<td>セルc</td><td> セルd</td>→セルの作成
</tr>→行の作成
tableの作成
・<table border>
<tr><td> 文字列 </td><td> 文字列 </td></tr>
<tr><td> 文字列 </td><td> 文字列 </td></tr>
</table>
表の作成例
文字数で表が伸び縮みする

菜の花菜の花畑
黄色の絨毯房総編

表の大きさの指定
・<table border width="表の横幅">
横幅は「ピクセル数」或いは「比率 %」で表します。
作成例・width="300"

菜の花菜の花畑
黄色の絨毯房総編

表の中に表を作成例
・<table borde ><tr><td width="300"height="100">
<table border><tr><td width="200">菜の花</td>
<td>菜の花畑</td></tr><tr><td>黄色の絨毯</td>
<td>房総編</td></tr></table></td></tr></table>
菜の花菜の花畑
黄色の絨毯房総編

表に背景色を付ける
菜の花菜の花畑
黄色の絨毯房総編