段落タグ
<p></p>

通常の段落タグ

全ての文章が、段落ごとに <p> と </p> の間に入っています。<p> と </p> の間にある文章が一段落として扱われます。段落の間には、一定のスペースが自動的にできるようになっています。

日本語と英単語の間には、見やすいように半角スペースをいれています。これは執筆者の好みによって異なるかもしれません。

スペースの狭い段落タグ

段落の下にスペースを入れたくない場合は、クラスを使って <p> </p> のかわりに <p class=npd> </p> とします。npd は no padding の略です。

実例

ページの一番上の部分は、以下のように記述されています。

<p>このページでは、ウェブサイト作成のための言語である html について、このサイトを作るために使っているタグ、ルールなどを中心にまとめています。</p>
<p><a href="https://px.a8.net/svt/ejp?a8mat=2TOYFQ+3NKVSA+2PEO+5YJRM" target="_blank" rel="nofollow">ココナラ </a> を通じて募集した記事、寄稿記事などを作って頂くときのガイドラインとしてご利用下さい。</p>

リンク
<a></a>

上の例にある <a href="https://px.a8.net/svt/ejp?a8mat=2TOYFQ+3NKVSA+2PEO+5YJRM" target="_blank" rel="nofollow">ココナラ </p> という部分が、ウェブサイトに欠かせないリンクです。

タグは a であり、href="" の " と " の間に、リンク先の URL を入れます。rel="nofollow" はちょっと細かいオプションなので、詳細は リンクの張り方 のページを参照して下さい。

見出しタグ
<h2> </h2>
<h3> </h3>

このサイトでは大小 2 種類の見出しを使っています。Reference も提出してもらうことになっているので、Reference セクションは少なくとも大きな見出しを使って区切ってもらう必要があります。

そのほか、内容に応じて見出しを使い、見やすい記事を作ってください。

実例: 下に二つ見出しがあります。

大きな見出し

小さな見出し

これらの見出しは、実際には次のように記述されています。

<h2>大きな見出し</h2>
<h3>小さな見出し</h3>

見出しのあとは自動的に改行され、一定のスペースが空きます。

改行タグ
<br />

詳細は こちら

段落タグと見出しタグの後には、自動的に改行が入ります。しかし、文章が詰まりすぎていると読みにくいので、それ以外にも改行を入れたい場合があります。

そんなときには <br /> を使います。これは特殊な html タグで、開始と終了がありません。<br /> と書くとその部分で強制改行になります。

実例: 上の段落の間が広く開いていますが、次のように 2 つの <br /> が間に挟まっています。

<p>段落タグと見出しタグの後には、自動的に改行が入ります。しかし、文章が詰まりすぎていると読みにくいので、それ以外にも改行を入れたい場合があります。</p><br /><br />
<p>そんなときには <br /> を使います。これは特殊な html タグで、開始と終了がありません。<br /> と書くとその部分で強制改行になります。</p>

記号

本文中に < という記号が出てくると、続く部分は html タグとして認識されてしまい、本文がちゃんと表示されなくなります。

上の段落は、html では次のように記述されています。

<p>本文中に &lt; という記号が出てくると、続く部分は html タグとして認識されてしまい、本文がちゃんと表示されなくなります。</p>

つまり < を表示したいときには &lt; という文字列を打つということです。もちろん全て半角です。> は &gt; で表示されます。

その他の記号は html 記号・特殊文字のコード表 にあります。とくにかっこ ( と ) はそれぞれ &#40; と &#41; で表されるので、これらを使って頂けると助かります。

かっこの記号が本文中にあっても < のように直ちにエラーにはなりませんが、あまり好ましくないとされています。

文字の強調

html 記号・特殊文字のコード表 に説明があります。

段落タグの中で、<strong>太字にする</strong> と書くと このように太字になります。よく使うのは以下です。

1. <i>斜体にする</i> → 斜体にする
2. <u>アンダーライン</u> → アンダーライン
3. ^{上付きにする} → ^{上付きにする}
4. _{下付きにする} → _{下付きにする}
5. <red>赤で強調</red> → 赤で強調
6. <ats>緑で少し強調</ats> → 緑で少し強調

red と ats は私が設定したオリジナルタグなので、このサイト以外では使えません。

箇条書き

番号付きの箇条書きと、点の箇条書きがあります。

番号付きの場合、<ol></ol> の中に <li></li> で項目を作るという形になります。上の欄の番号付き箇条書きの 1 - 3 番は、次のように記述されています。

<ol>
<li>&lt;i&gt;斜体にする&lt;i&gt; &rarr; <i>斜体にする</i></li>
<li>&lt;u&アンダーライン&lt;u&gt; &rarr; <u>アンダーライン</u>
<li>&lt;sup&上付きにする&lt;sup&gt; &rarr; ^{上付きにする}
</ol>

</i> の 終了タグ </li> は省略可能です。参考のため「斜体にする」の項目だけ </li> を入れてあります。番号は自動的につきます。

html タグとしての < と、本文中の記号としての < の違いにも注意してください。&rarr; は右向き矢印を表すコードです。

点で箇条書きにするときは、<ol></ol> のかわりに <ul></ul> を使います。

<ol class="pd"></ol> または <ul class="pd"></ul> とすると、箇条書きの後に少しスペースが入ります。段落が続くときによく使っています。

表

table タグ のページを参照して下さい。

画像

更新予定。<img src=""></img> として、" と " の間に画像ファイルのパスを入れます。