第2回例題

タグを使って文字を表示する方法


●HTMLの基本的なルールの確認

 <HTML>は、「タグ」と呼ばれる命令語で書かれています。 半角の「<」と「>」でくくられた文字がタグと呼ばれる部分です。 メモ帳などを使ってこのタグ命令で書かれた文章をブラウザ(InternetExplorerなど)で読み込むと、 ブラウザがそのタグの意味を解釈して、文字を大きくしたり、カラフルなデザインを表示してくれるわけです。

↓は一番基本的なHTMLファイルをメモ帳とブラウザで表示したものです。

メモ帳とブラウザをデスクトップ上に並べて表示

<HTML> ← HTMLを開始する命令
<HEAD> ← ページの識別情報を記述する命令
<TITLE>嶋くんのホームページ</TITLE> ← ブラウザのタイトルバーに表示される文字
</HEAD> ← ページの識別情報記述を終了する命令
<BODY> ← 本文を開始する命令
嶋くんのホームページです。
</BODY> ← 本文を終了する命令
</HTML> ← HTMLを終了する命令

※ タグは半角英数字で入力しないと、通常の文字列として認識されるので注意してください。 上の解説例のタグは表示の都合上(^。^;)全角で入力してあります。


●タグを使って文字を表示する方法

◇<P>タグを使って文章を段落に

 <P>タグは、文章を一つの段落(Paragraph)としてまとめるためのタグです。 <P>と</P>で挟まれた文章の最後には空白行が1行挿入されて、一つの まとまった文章として表示されるようになります。

<P>タグを使って文章を段落に

◇<BR>タグを使って文章を改行

 <BR>タグは、文章を改行するタグです。<BR>タグは、タグを閉じる必要がありません。 改行したい位置に直接<BR>と入力します。

<BR>タグを使って文章を改行

◇<ALIN>オプションを使って文字列を右寄せに

 真ん中に寄せたいときは「center」に書き換えてください。

<ALIGN>オプションを使って文字列を右寄せに

◇<H1>タグを使って見出し文字の入力

 <H1>は、見出し文字を入力するタグです。見出しに設定された文字は、目立つように太字に なり、設定した文字列の上下に空白行が挿入されます。 文字の大きさは1から6までの数字を入力して決めます。

<H1>タグを使って見出し文字の入力

◇<B>タグを使って文字を太字に

 <B>タグは、文字を太字(Bold)にするタグです。 文字を斜めにするには、<I>〜</I>タグを使って文字を囲みます。

<B>タグを使って文字を太字に

◇<FONT>タグを使って文字の色を変更

 <FONT>タグは文章中の一部の文字の色や大きさを変更するためのタグです。 色の名前は「英語名」または「RGB値」を入力します。

<FONT>タグを使って文字の色を変更

◇<FONT>タグを使って文字を大きく

 <FONT>タグは、文章中の一部の文字に対して変更を加えるタグです。 文字の大きさは1から7までの数字を入力して決めます。 <H1>タグは、見出しを作成して文章を内容ごとに分ける(階層化)タグです。

<FONT>タグを使って文字を大きく

◇<UL><LI>タグを使って箇条書きで文章を入力

 <UL><LI>タグは、文章を箇条書きにするタグです。

 <UL><LI>タグを使って箇条書きで文章を入力

◇<DL><DT><DD>タグを使って用語を解説する箇条書きを入力

 <DL><DT><DD>タグは、用語とその説明からできている箇条書きを入力するタグです。

<DL><DT><DD>タグを使って用語を解説する箇条書きを入力

◇<BODY>タグを使って文字と背景の色を変更

 <BODY>タグに命令を追加して、ページ全体の文字の色と背景色を変更できます。 <BODY>タグに追加した命令は、ページ全体に反映されます。

<BODY>タグを使って文字と背景の色を変更


【ホ−ムペ−ジ制作の基礎の基礎(HTML入門)へ戻る】