HTML講座
トップページ > HTML講座 トップ > 第7章 細かな設定に挑戦

第7章 細かな設定に挑戦

今回は、前々回やった事なども踏まえて、さらに複雑なページを作成することが出来るようにしたいと思います。

ここでいう「複雑」とは、さらに細かい設定をすることが出来る、と言うことです。
決して「難しい」ということではないので、安心してください。

まずは、以前紹介した4種類以外のタグをいくつか簡単に紹介します。

「<br>タグ」 文章を改行するときに使います。
「<font>タグ」 文章(文字)の大きさを変更したり、色を変更したりします。
「<p>タグ」 段落を作るときに使います。
「<h1>タグ」〜「<h6>タグ」 見出しを作るときに使います。数字が小さいほど大きい見出しになりますが、「<h1>タグ」は1つのページに1つしか置けません。
「<hr>タグ」 水平線を入れるときに使います。
「<img>タグ」 画像を入れるときに使います。
「<a>タグ」 ハイパーリンクを入れるときに使います。
「<span>タグ」 インラインタイプのレイアウトコンテナを作るときに使います。
「<div>タグ」 ボックス型のレイアウトコンテナを作るときに使います。
「<pre>タグ」 ベタ書き(そのまま表示)するときに使います。
「<blockquote>タグ」 引用文を挿入するときに使います。

今のところ、このくらいで...

※ 現在では、HTMLの見栄えを良くする為にCSS(スタイルシート)を使います。
  CSSについては、また機会があれば「番外編」という形で追加していきます。

そのほかに「表(<table>タグ)」などがありますが、あとで詳しく解説します。

百聞は一見にしかず、ということで、一度、何も説明せずに使ってみます。
(以下のサンプルは、あくまでも一例です。参考程度にどうぞ。)

<html>
<head>
<title>ホームページのテスト</title>
</head>
<body bgcolor="#CCFFFF">
<h1>見出し1</h1><br>
<div>レイアウトコンテナ</div><br>
<h2>見出し2</h2><br>
<hr><br>
これから、ここに<br>
色々な文章を<br>
書いていきます。<br>
<br>
<hr><br>
<br>
<font color="#FF0000" size="+2">赤色の大きな文字</font><br>
<br>
<font size="-1">小さな文字</font><br>
<br>
<br>
<p>段落を入れます。<font color="#00FF00">緑色の文字</font><font size="-1">小さな文字</font></p><br>
<br>
<a href="http://kouza.hamuinu.com/html/">HTML講座 トップ</a><br>
<br>
</body>
</html>

上の例で説明していないことについて、詳しく説明します。

タグに関しては、説明したものしか使っていませんが、タグの要素に関してはまだですね。

「<body>タグ」では、色(color)など、
「<font>タグ」では、色(color)や大きさ(size)など、
「<a>タグ」や「<img>タグ」では、ファイルの場所など
(「<a>タグ」は(href)、「<img>タグ」は(src))を設定できます。

詳しくは、タグ事典をご覧ください。

他にも色々設定できるかもしれないので、怖がらずにぜひ一度試してみて下さい。
「習うより慣れろ」...です(たぶん)。

それから、「<p>タグ」の間に、「<font>タグ」や「<a>タグ」、「<img>タグ」を入れたり、
「<a>タグ」の間に、「<img>タグ」を入れたりなどの「入れ子構造」にすることも出来ます。

あともう1つ、「<a>タグ」と「<img>タグ」に関して詳しく説明していませんでした。
読者さんからの要望があったので、詳しく解説します。

画像を貼り付けるときは「<img>タグ」を使用します。

<img src="○○○">
(注意:○○○の部分は画像のアドレス(http://www.○○/など)です)

というタグを画像を貼り付けたい部分に記述して下さい。

リンクを張るときは「<a>タグ」を使用します。

<a href="○○○">□□□</a>
(注意:○○○の部分は画像を貼り付けるページのアドレス(http://www.○○/など)、□□□はそのページのタイトル等の文字列です)

というタグをリンクを張りたい部分に記述して下さい。

もし、文字の代わりに画像を使用したい場合は、□□□の部分に

<img src="○○○">

というタグを□□□の部分に記述して下さい。

少し文章がわかりにくくなってしまったかもしれません。ゴメンナサイ。
あまりにも説明しなければならないことが多すぎて...、うまくまとまりませんでした。

タグ事典に詳しく書いてあります。(たぶん)

この講座で学んだことを生かして、自分のホームページを作成してみるのもいいかもしれません。

もしホームページを作成したら、この講座の管理人までお知らせしてみてください。
もしかしたらそのホームページへリンクさせていただくかもしれません。

複雑にならないように、今回はこれくらいで...




[ ← 前へ ] [ 戻る ] [ 次へ → ]

(C)2006 はむ / AHD