HTML文の書き方

■観光案内 ■行政案内 ■企業紹介 ■お店紹介

■イベント ■各種募集 ■会員紹介 ■サークル

ホームページの制作方法へBack

HTML文の書き方

基本構文
最初の留意点
文字の大きさと修飾
文字の位置
整形済みテキストの表示
引用文
箇条書き
罫線

基本構文
HTMLはタグ（tag）によって書かれます。これは開始タグ<-----> と、終了タグ</-----> のふたつでひとつの命令になることがほとんどです。ホームページの基本の構文はこのようになります。

<HTML>
<HEAD>
<TITLE>ホームページのタイトル</TITLE>
</HEAD>
<BODY>
<!--ここから本文が始まる>**********
*********<!--ここまでで本文が終わる>
</BODY>
</HTML>

この構文だけをシンプルテキストにコピーして、「XXX.htm」と保存し、それをブラウザで開けば、ホームページの形式になります。

最初の留意点　TOP
ファイル名前はxxx.htm、またはxxx.hymlにします。
<BODY><!--ここから本文が始まる>**********
*********<!--ここまでで本文が終わる></BODY>の赤字の部分に文章や画像等のホームページの内容が入ります。
サーバがUNIXですと大文字と小文字を別と判断して認識します。Macintoshサーバですと同じものとして認識はしますが、わかりやすさも考えてできるだけそろえた方がいいでしょう。
改行は<BR>で行います。HTML上で改行を行っても、<BR>を入れておかないとホームページ上では改行にならないので注意しましょう。段落を区切るときは＜P＞を使います。HTML上で数行開けても、<P>を入れておかないと空きを作れないので注意しましょう。
<　>　&　"　の半角文字は、そのままでは使用できません。これはHTMLタグとして認識する為です。どうしても必要な場合はネームエンティティという記述方法で、 <は <　>は >　&は &　"は "と書きます。この記述を行っているページでも、 <は <として記述しています。
DeWAの長井アクセスポイントであれば、トップページは「home.htm」にしましょう。カウンターなどをつける際に便利です。

文字の大きさと修飾　TOP
<BODY>-----</BODY>の間にホームページの中身を入力してゆきます。先に紙などに大体のレイアウトをメモしておくと作業がしやすいでしょう。
見出し

見出し1
<H1>見出し1</H1>

見出し2
<H2>見出し2</H2>

見出し3
<H3>見出し3</H3>

見出し4
<H4>見出し4</H4>

見出し5
<H5>見出し5</H5>

見出し6
<H6>見出し6</H6>

文字の修飾
ボールド <B>ボールド</B>

イタリック <I>ボールド</I>

等幅フォント <TT>等幅フォント</TT>

アドレス
<ADDRESS>アドレス</ADDRESS>

引用文
<BLOCKQUOTE>引用文</BLOCKQUOTE>

プリフォーマット
<H6>見出し6</H6>

メニュー
<MENU>メニュー</MENU>

番号
<OL>番号</OL>

定義
<DL>定義</DL>

用語
<DL>用語</DL>

文字の大きさ
+3の大きさ <FONT SIZE=+3>+3の大きさ</FONT>

+2の大きさ <FONT SIZE=+2>+2の大きさ</FONT>

+1の大きさ <FONT SIZE=+1>+1の大きさ</FONT>

通常 -----

-1の大きさ <FONT SIZE=-1>-1の大きさ</FONT>

-2の大きさ <FONT SIZE=-2>-2の大きさ</FONT>

主な色
白：#FFFFFF 黒：#000000 赤：#FF0000 緑：#00FF00

青：#0000FF 黄：#FFFF00 紫：#FF00FF 水：#00FFFF

灰：#AAAAAA 橙：#FF5500 青灰：#7777AA 蛍緑：#00FF11

＜例＞たとえば、<H2><FONT COLOR="#FF0000">見出し2</FONT></H2>と書くと、

見出し2

と、なります。また、文章中でこの部分だけ色を変更する場合は、文章中で<FONT COLOR="#0000FF">この部分だけ色を変更する</FONT>
のように書きます。必ず<XXX></XXX>というようにタグで囲むのを忘れないで下さい。

文字の位置　TOP
文字の位置は
<CENTER>-----</CENTER>,<DIV ALIGN="LEFT">-----</DIV>,<DIV ALIGN="RIGHT">-----</DIV>によって自由に変えることができます。また、各種の整形によってよりみやすいホームページを作成することができます。例を下記に入力します。

<CENTER></CENTER>　センタリング（中央）
<CENTER>センタリング</CENTER>

<DIV ALIGN="LEFT"></DIV>　左寄せ
<DIV ALIGN="LEFT">左寄せ</DIV>

左寄せ<DIV ALIGN="RIGHT"></DIV>　右寄せ
<DIV ALIGN="RIGHT">右寄せ</DIV>

整形済みテキストの表示　TOP
<PRE>-----</PRE>を使用します。

<PRE>
このタグで囲んだ文章などは、スペース、改行、タブなどがそのまま表示されます。（！等幅フォントで表示になります）

</PRE>

引用文
<BLOCKQUOTE>-----</BLOCKQUOTE>を使用します。他からの引用文などを書くときに使用します。この間の文は、ブロックと考えられ、上に１行、下に１行、左側にインデント、右側にある程度のスペースがあけられます。
<BLOCKQUOTE>---引用文にあたります--</BLOCKQUOTE>

整形済みテキストの表示　TOP
<PRE>-----</PRE>を使用します。

<PRE>
このタグで囲んだ文章などは、スペース、改行、タブなどがそのまま表示されます。（！等幅フォントで表示になります）

</PRE>

箇条書き　TOP
通常の箇条書き　<UL><LI><LI>-----</UL>を使用します。
　<UL>
　箇条書きの種類
　<LI>項目にブリット（黒丸）がつく箇条書き
　<LI>こんな箇条書きになります
　<LI>項目の羅列に便利です
　</UL>

と入力すると下記のようになります。

箇条書きの種類　
項目にブリット（黒丸）がつく箇条書き　
こんな箇条書きになります　
項目の羅列に便利です

番号付き箇条書き　TOP
<OL><LI><LI>-----</OL>を使用します。

<OL>箇条書きの種類
<LI>項目に番号が付く箇条書き
<LI>こんな箇条書きになります　
<LI>項目の羅列に便利です
</OL>
と入力すると下記のようになります。

箇条書きの種類

項目に番号が付く箇条書き
こんな箇条書きになります
項目の羅列に便利です

用語表示の箇条書き　<DL><DT><DD>-----</DL>を使用します。

　<DL>
　<DT>箇条書きの種類
　<DD>用語表示の箇条書き
　<DT>こんな箇条書きになります
　<DD>項目の羅列に便利です
　</DL>　

箇条書きの種類　
用語表示の箇条書き　
こんな箇条書きになります　
項目の羅列に便利です　

罫線　TOP
<HR>でひけます。このタグには</HR>は必要なく、単独で罫線になります。
<HR>

と入力すると

陰影なし
<HR ALIGN=LEFT NOSHADE>

中央寄せ75％長さ
<CENTER><HR WIDTH="75%"></CENTER>

右寄せ50％長さ
<P ALIGN=RIGHT><HR ALIGN=RIGHT WIDTH="50%">

中央寄せ50ピクセル
<CENTER><HR SIZE="50" WIDTH="50"></CENTER>

中央寄せ35*20ピクセル長さ
<CENTER><HR SIZE="20" WIDTH="35" NOSHADE></CENTER>

	■観光案内	■行政案内	■企業紹介	■お店紹介
	■イベント	■各種募集	■会員紹介	■サークル