HTMLの基本と書き方の例
カウンターを設置する場合は、管理画面で発行された掲載用タグを使います。下記は一般のHTMLの例で、カウンターを動かすタグではありません。
HTMLのタグとページの基本構造
HTMLは文章の構造をタグで示します。headにはページ名や文字コード、bodyには見える内容を書きます。既存ページに部品を追加するときは文書全体を二重に入れません。
<!doctype html>
<html lang="ja">
<head><meta charset="UTF-8"><title>お知らせ</title></head>
<body><h1>お知らせ</h1><p>本文です。</p></body>
</html>文字リンクを作る・別のタブで開く
a要素のhrefに移動先を、開始タグと終了タグの間にリンクの名前を書きます。同じタブならtargetは不要です。別タブの例ではtarget="_blank"とrel="noopener"を付けています。URLと表示名はご自身のものに置き換えます。
<a href="https://example.com/news/">お知らせを見る</a>
<a href="https://example.com/news/" target="_blank" rel="noopener">お知らせ（別タブ）</a>画像を表示する・画像をリンクにする
imgのsrcに画像ファイルのURL、altに代替テキストを指定します。画像をクリックして移動させるには、imgをaで囲みます。リンク画像だけの場合、altは移動先や目的が伝わる言葉にします。
<img src="images/cat.jpg" alt="庭で眠る猫">
<a href="gallery.html"><img src="images/cat.jpg" alt="猫の写真一覧へ"></a>改行・段落・見出し・箇条書き
文章中で改行するにはbr、段落を分けるにはpを使います。通常のHTML本文ではソースの改行だけでは表示が改行されません。見出しはh1、h2などで階層を示し、箇条書きはul、番号付きの手順はolの中にliを書きます。
<h2>利用方法</h2>
<p>受付時間<br>平日 9時から</p>
<ol><li>ページを開く</li><li>説明を読む</li></ol>文字色・大きさ・中央揃え・画像の幅
見た目はCSSで指定します。colorは文字色、font-sizeは文字の大きさです。段落内の文字を中央に寄せるにはtext-align: centerを使います。画像を画面幅に収めたいときはmax-width: 100%とheight: autoを組み合わせます。
<p style="color: #a4430e; font-size: 1.2em; text-align: center;">お知らせ</p>
<img src="images/cat.jpg" alt="庭で眠る猫" style="max-width: 100%; height: auto;">ページ内のリンク・相対パスと絶対URL
同じページの見出しなどにidを付け、href="#同じID"でそこへ移動します。相対パスは現在の文書の場所が基準です。images/cat.jpgは同じ階層のimagesフォルダー、../は一つ上、/から始まるパスはサイトのルートが基準です。https://から始まる絶対URLはサイトを含めて指定します。
<a href="#help">使い方へ</a>
<h2 id="help">使い方</h2>表の書き方
表はtable、行はtr、見出しセルはth、データセルはtdです。列の見出しにはscope="col"を付けられます。
<table>
<tr><th scope="col">曜日</th><th scope="col">受付時間</th></tr>
<tr><td>月曜</td><td>9時から</td></tr>
</table>タグを文字として表示する・貼ったHTMLがそのまま見えるとき
タグを実行せず文字で見せるには、<を<、>を>、&を&と記述します。逆にタグがそのまま表示された場合は、通常のテキスト欄に貼っていないか、HTML編集欄か、記号が全角や文字参照になっていないかを確認します。画像が表示されない場合はsrcのパス・拡張子・大文字小文字と、画像が公開されているかを確認します。
<code><br></code>