HTMLについて。
ここではHTMLについて簡単に説明します。
あまり詳しく言うときりがないんで・・^^;
手抜きとか言うつっこみは無しと言う方針でお願いします。
全体的に非常に見づらいのは我慢してください・・(ぉ
ちなみに段落がやたらと多いのはxmpタグのせいなのでこれも勘弁してください・・(爆


HTMLのabout
HTMLとはHyperText Markup Languageの略で、
ブラウザというソフトで起動する飾り付けの出来るテキストです。
ソフトの説明書や友達とかとの情報交換にも使えますが、
インターネットで素晴らしい力を発揮します。
webページの大半がHTMLで作られています。

基本的にHTMLはタグ(tag)と言われる命令文で飾り付けをしていきます。
ゆえにプログラミングがさっぱりな人でもHTMLは組むことができます。
ちなみにタグは大文字でも小文字でも大丈夫です。

超簡単なHTMLなら30秒〜1分あれば作れます。
メモ帳を起動して、
<html><head><title></title></head><body>テスト</body></html>
これをコピー&ペースト(コピペ)してください。
(言うまでも無いですがコピペの仕方はウィンドウズの場合マウスでドラッグして選択したら右クリック+コピーして、
メモ帳で右クリック+貼り付けです。)
そしたらファイル→名前をつけて保存を選択して、
普通に名前をつけて保存するだけだとテキストドキュメントになるだけなので
名前の後ろに拡張子 .html か .htm をつけます。
仮に「test.html」という名前をつけてどっか適当な場所に保存します。
そうするとHTMLドキュメントとして保存されている筈です。
それを起動してみると、ブラウザが起動して、「テスト」と表示されていればOKです。
と、まぁHTMLはこんな感じです。

タグは、半角であれば大文字でも小文字でもかまいません。
ちなみにXHTMLというHTMLの後継のハイパーテキストでは
タグはすべて小文字なので、HTMLでも小文字を使う風潮があるようです。
通常タグは<開始タグ>〜</終了タグ>という形です。
中には終了タグを任意で省けるもの(<li>など)や、
終了タグを使わないもの(<br>や<img>など)もあります。
タグには要素(エレメント)なるものがあり、
タグの中に入っている文字、タグが要素となります。
要するにこのようなことです。

<html>  ←第1要素
    <head>  ←第2要素
        <title>      ←第3要素
        </title>    ←第3要素
    </head> ←第2要素
    <body>  ←第2要素
        <center>  ←第3要素
            <font size="3">   ←第4要素
            </font>              ←第4要素
        </center>  ←第3要素
    </body>  ←第2要素
</html>  ←第1要素

ちょっとわかりづらいですがこんな事です^^;
つまり第1要素の中のタグは第2要素であり第2要素の中のタグは第3要素であり・・・です。
多くの要素はブロック要素とインライン要素とにわけられます。
ブロック要素とは要素の前後に改行が入るタグをさします。
例は<form>,<table>,<address>などなどです。
インライン要素とは前後に改行が入らなくて文章中に使用できる物をさします。
例は<b>,<font>,<span>などなどです。
とりあえずタグの説明をしていきましょう。


1、土台作り
まずは何事も土台です。
HTMLに土台としていれる基本のタグを説明します。

HTML基本タグ

<html>〜</html>

このタグの中がHTMLである事を示します。
大元なので絶対入れましょう。
HTML以外でもできないことはないですがブラウザでは起動しないです。
それに加えてlang="ja"を入れて
<html lang="ja">
と言う風にすると言語が日本語として指定されて
このページを外国とかで見たりするときに役立ちます。
まぁ普通に見てるからには必要ないですけどね;
ヘッダ

<head>〜</head>

このタグの中がページの土台である事を示します。
これがないとまずいです。
タイトルタグやメタやページ全体のスプリクトはこの中に入れます。

メタ

<meta>〜</meta>

これはメタ情報をあらわすタグで、いろいろな情報を書き込みます。
最新のHTML4.01ではほぼ必須の項目です。 ヘッダの中に入れることで効果があります。
これはmetaだけでは動きません。
metaの後ろに
name、http-equiv、content、scheme、charset などを入れます。
nameはこのページの名前の情報を書き、http-equivはヘッダ名をいれ、
contentはそのメタの具体的なの内容を書き、schemeはヒントとして使用するスキーマを入れます。
charsetは主に言語を指定するのに使います。
メタは入れても入れなくても大丈夫ですが、
HTML4.0以降を使うなら、サポートを強化するために入れる事をお勧めします。
タイトル

<title>〜</title>

このタグの中がこのページのタイトルである事を示します。
ブラウザの上の方にでたりします。

ボディ

<body>〜</body>

このタグの中が本文です。
文字を書き込むときはここ中に入れます。
というより文字が見えるのははここの中しかありません^^;
付け加えるのはいろいろあります。
onlord や text や bgcolor などを良く使いますね。
例としては
<body bgcolor="#ffffff"></body>
とすると背景色が白になります。カラーコードについては後ほど説明します。



2、フォント
文字を見やすくするためにフォントを太字にしたり斜体にしたりできます。
いまはスタイルシート(CSS)が主流で見栄えも良く、
しかもHTML4.0の今は非推奨タグに指定されてしまいました。 しかしいちいちスタイルシートをやっていては非常に面倒です。
フォントタグは簡単に作れるので楽に文字を変える事ができます。
まぁ非推奨と言うことですがとりあえず頭に入れておいてください^^;
ちなみにに太字にするタグ「b」と斜体にするタグ「i」だけは4.0でも通常のタグです。

太字

<b>太字になります。</b>

サンプル
太字になります。
ちなみにbは「bold」の略です。意味は 大胆な、とかいうことですね。

斜体
<i>斜体になります。</i>

サンプル
斜体になります。
iは「italic」の略です。意味はそのまま「斜体」という意味です。

アンダーライン
<u>下線がつきます。</u>

サンプル
下線がつきます。
uはアンダーラインです。以外にこのタグはフェイクに使えたりもします。(何

消し線
<s>消し線がつきます。</s>

サンプル
消し線がつきます。
sはスラッシュです。以外に一人つっこみをするときに使いますな。(ぉ

文字の大きさ

<font size="数字">大きさを変更します。</font>

サンプル(大きさ5にした場合)
大きさを変更します。
数字の部分は1〜7までの7段階でつけます。
大体標準は3、4くらいです。

文字色

<font color="カラーコードまたは英字">文字色を変更します。</font>

サンプル(文字色赤にした場合)
文字色を変更します。
英字はしたい色の英語を入れればokです。カラーコードはまた後ほど。

フォント変更

<font face="フォント名">フォントを変更します。</font>

サンプル(フォントをHGS創英角ポップ体にした場合)
フォントを変更します。
やはり有名な明朝体にしようかな〜?って思いましたけど
ちょっとわかりづらかったのでポップ体にしました^^;
まぁ余談ですけど。
ちなみにHTML4.0ではフォントタグのような非推奨のタグは
「Deprecatedなタグ」といいます。
この種類のタグはHTMLの後継であるXHTMLでは廃止されているタグです。
XHTMLではスタイルシートのみのフォント変更になります。 でもまだXHTMLは一般的にそう使ってる人はいませんがね。
まぁフォントタグもいい面はあるんですが
やはり今はスタイルシートが主流ですね。
フォントタグ以上に高度な事ができます。
例えば影をつけて見たり、アニメーションがある文字にしてみたり、
などなどのきれいな文字が出来ます。
まぁ習得するまで結構むずかしいですが・・ スタイルシートの例はstyleやspanなどです。 たとえば
スタイルシート
って感じです。これは span で filter:shadow をつけた物です。
とりあえずHTMLの解説ですし説明するときりが無いのでちょっと伏せておきます(何



3、レイアウトタグ
ページを構成するために必要不可欠なタグを紹介します。

改行

ここに<br>改行を入れます。

サンプル

ここに
改行を入れます。

HTMLを組む時は一番使用頻度が高いタグです。
HTMLの場合はただエンターキーで改行するだけでは
見た目は改行されていても改行されていることにはなりません。
よってこのタグを使わなくては改行はできません
余談ですがこのタグは1秒以内に打てるようにしましょう。(ぉ

一行開けて改行

一行<p>開けます。

サンプル↓

一行

開けます。

このタグは<br>タグの二つぶんの効果を発揮します。
だったら<br>を二つつければいいじゃんって感じですが、
<br>と違うところは属性をつけられる所です。
<P ALIGN="left"></P>とすると改行する事に加えて段落を左に寄せる事ができます。
leftをcenterやrightにするとそろえる場所を変える事ももちろんできます。
ちなみにこれは<br>と違い並べて使う事はできません
つまり<p><p>としても4行は開きません。


段落を寄せる

<div Align="leftかcenterかright">段落を寄せます。</div>

サンプル(centerで中央寄せにした場合)
段落を寄せます。
言わなくてもわかると思いますが left=左 center=中央 right=右
です。
中央寄せの場合だけ、<center></center>というように一部を省く事もできます。
XHTMLでは<center></center>は使えません。

水平線

<hr>

サンプル(本当の水平線と勘違いしないために<Hr Width="50">として横幅50の水平線)
↑これ

ああタグをぐたぐた使ってるとわけがわかんなくなってくる・・(シャレじゃないよw
水平線をつけます。鋭魔は結構たくさん使ってます。このページにも腐るほどありますし。(ぉ
属性はかなりあります。
widthは横幅を指定します。 Alignは位置を指定します。
noshadeは影を無くします(属性値は必要ありません)。
sizeは太さを指定します。colorは色を指定します。
例えば
<hr align="left" noshade size="1" color="#ff0000>
とすると位置は左、影無し、太さ1、色は赤、と言うことです。

ルビ

<ruby><rb>五月蝿い</rb><rt>うるさい</rt></ruby>

サンプル
五月蝿いうるさい

ルビをふります。
ちなみにネットスケープではこの場合
五月蝿いうるさい
と表示されてしまうため、見る方の事を考えると
<ruby><rb>五月蝿い</rb><rp>(</rp><rt>うるさい</rt><rp>)</rp></ruby>
と言う風にするとIEの方は五月蝿いうるさい、NSの方は五月蝿い(うるさい)
となります。(すでにネットスケープで見ている方はどっちも同じに見えますが気にしないでください^^;)

引用

ここの部分を<blockquote>引用文として扱います。</blockquote>

サンプル ここの部分を
引用文として扱います。


ちょっとこのサンプルではわかりづらいですが、 引用文として指定すると上下左右に余白が出来て見やすくなります。
使用頻度は少ないですが知識として覚えておきましょう。

書いたままに

<pre>(ここの文が書いたままに表示されます。</pre>
サンプル(「書いたままに表示されます。」を一文字ずつ全角スペースを二行つけた場合(適当))
書  い  た  ま  ま  に  表  示  さ  れ  ま  す  。
とにかくタグを入れなくても書いたままに表示されると言うことです。 ちなみに < や > は特殊文字として判断されてしまうのでご注意ください。



4、属性とか
属性とは、簡単に言うとタグにつける物みたいなものです。
基本的に属性をつけるときはスペースを入れます。
属性値をつけるときはイコール(=)を入れて、任意でダブルクォーテーション(”)で囲みます。
ダブルクォーテーションは省ける場合があります。
ちなみにHTMLではあまり使いませんが、CCSやscriptなどでは
ダブルコーテーションの中にはアポストロフィー(’)を入れる事が出来ます。
簡略して説明すると、こうなります
<font size="5"></font>
これを例にとるとfontがタグ、sizeが属性名、"5"が属性値、
ということです。
属性の値が属性値にあたります。
手抜きですみません・・・



5、カラーコード
色をつけるタグの場合属性値に英文かカラーコードを使用します。
カラーコードとは #xxxxxx といったものです。
xの部分には00〜FFまでの16進数を使います。
16進数とは 0123456789ABCDEF を使う、数値の表し方の一つです。
ちなみに日常で使っている 0123456789 は10進数です。
おまけにコンピューターのすべては 01 の2進数で、できます。
まぁ進数については数学の本でも見てください^^;(何
本題に戻ります。
16進数の数字を6こ使うわけですが、
最初の二つがR値(赤)、次の二つがG値(緑)、最後の二つがB値(青)、となってます。
この三原色による組み合わせでカラーコードはできてます。
16進数は 小:0123456789ABCDEF:大 となってます。
つまりつまり数値が大きければ色の数値もあがります。
例えば #FFFFFFとするとR値は最大、G値も最大、B値も最大になり、色の三原色により黒になり、
#FF0000 とするとR値は最大、他はなし、となり原色の赤、
と言うことになります。 ちなみにFFの場合16×16で値は256という事になってます。
しかし F0 と 0F が同じかと言うと違います。
通常、数が大きい方が最初に来ます。
なので ○F0 ×0F と言うことです。
詳しくはとほほのWWW入門様のとほほの色入門・色見本の方を見てくださると非常に良くわかります。



随時更新していきます。
なのでこのタグねーよっていう突っ込みは禁止。(ぉ

戻るんですか?
SEO [PR] 爆速!無料ブログ 無料ホームページ開設 無料ライブ放送