ホーム > HTML講座 > HTML編 > 第7章 細かな設定に挑戦

第7章 細かな設定に挑戦

登録タグ: HTML タグ 属性


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

「<p>タグ」や「<h1>?<h6>タグ」、「<div>タグ」、「<pre>タグ」「<blockquote>タグ」などをブロック要素(タグ)といい、「<font>タグ」や「<a>タグ」、「<img>タグ」、「<span>タグ」などをインライン要素(タグ)といい、ブロック要素やインライン要素の中にインライン要素を入れ子にすることはできますが、インライン要素の中にブロック要素を入れ子にすることはできないので注意してください。

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

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

<img src="○○○">

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

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

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

<a href="○○○">□□□</a>

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

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

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

<img src="○○○">

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

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

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

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

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

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

← 前へ | 次へ →


カテゴリー:HTML編
2011/09/11 08:28:50 更新

Powered by AkiWiki. Wiki syntax is based on PukiWiki, and extends it.

スポンサード リンク

メニュー

HTML講座

HSP講座

Inkscape講座

スポンサード リンク