Webの勉強をしようPart2 - ポリウッドザコゲボク

つい興がのってまとめないまま進んでしまった…
結局自分で何か作らないと忘れてしまうのは重々承知だが、
一旦ここまでのことをまとめてみる。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>ドットインストール</title>
        <meta name="description" content="プログラミング学習サービスのドットインストールです">
        <link rel="icon" href="favicon.ico">
    </head>
    <body>
        <!-- memo -->
        <img src="img/logo.png" width="300" height="50" alt="ドットインストールのロゴです">
        <h1>ドットインストール</h1>
        <p>プログラミング学習サービスです！</p>
        <ul>
            <li><a href="#about">このサービスについて</a></li>
            <li><a href="#history">沿革</a></li>
        </ul>

        <h2 id="about">このサービスについて</h2>

        <h2 id="history">沿革</h2>
        <table>
            <thead>
                <tr>
                    <th>年</th>
                    <th>出来事</th>
                </tr>
            </thead>
            <tbody>
                <td>2014</td>
                <td>会社設立</td>
            </tbody>
            <tbody>
                <td>2016</td>
                <td>サイトリニューアル</td>
            </tbody>
        </table>
        <p>&lt;br&gt;あはは</p>
        <pre>
            <code>
                &lt;p&gt;ここで一句。
                いますぐに&lt;br&gt;
                はじめてみよう&lt;br&gt;
                HTML&lt;br&gt;
                &lt;/p&gt;
            </code>
        </pre>

        <h2>主な特徴</h2>
        <ul>
            <li>すごい</li>
            <li>やばい</li>
            <li>つよい</li>
        </ul>

        <h2>使い方</h2>
        <ol>
            <li>動画を見る</li>
            <li>コードを書く</li>
            <li>コードを改造する</li>
        </ol>
        <h2>よく聞かれる質問</h2>
        <dl>
            <dt>質問A</dt>
            <dd>回答A</dd>
            <dt>質問B</dt>
            <dd>回答B</dd>
        </dl>
        <p><a href="#">先頭へ戻る</a></p>
    </body>
</html>

widthとheight

画像のサイズを調整するのに使っている。
imgタグの中にこれを書くことで画像の表示サイズを設定できる（pixel単位）

alt

altタグも同様にimgタグの中に記述する。
altは画像が何らかの理由で表示されなかった場合に表示するテキスト。
音声読み上げブラウザで読み上げられるものでもある。

strong

上述のHTML内では削除してしまっているが、文章を強調表示するときに使用する。
strongタグで囲われたテキストは太字で表示される。

blockquote

文章をどこかから引用してきたときに使う。
正直インデントが入るだけなのでぱっと見では使う必要があるか分からない。
このblockquoteタグにはciteというパラメータを一緒に記述でき、そこに引用元のURLを書いておくのがルールらしい。

<blockquote cite="https://hogehoge~">
<p>これは引用文だよ</p>
</blockquote>

こんな感じ。

hr

ホリゾンタルタグ。話題が変わったところや、他の項目に移る前にこれを入れておくと横線が表示される。
このとき、解説で「あくまで文章の意味の変化を表したいときに書いてください。」「デザインのつもりで入れてしまうと、今後学習するCSSとのすみ分けができないので」みたいな話が入った。
これがこの3日間HTMLの勉強をしていて一番強く印象に残ったところで、あくまでHTMLは「文書をかく」のが目的であって、「デザイン」とかはCSSという考え方をはっきり持っておこうと思った。
この辺の境を曖昧にしてしまうと、後からレイアウトや文書に変更を加えたくなったときに「あれ、これだけ動きが違う！どこに書いたんだ？」と焦ることになる。
これはC#の勉強の時にクラスごとの意味付けをはっきりさせなかったせいで大いに手こずった経験から、その重要さがよく分かった。
strongも含め、見た目をかっこよくしたいときにはCSSの方で解決するんだということを強く意識しておきたい。

実態参照

小難しいワードだが、簡単に言うと「記号とかがHTMLの機能に関連したものと判断されないようにするための書き方をしようね」ということだった。
タグを表す不等号であれば

< なら &lt;
> なら &gt;

と書かないといけない。

pre

HTML文書内では、テキストはすべてpタグで囲ったり、brタグなどで改行をしたりと細かく文書の形式を指定しなければならない。
「めんどくせ～～」ってなったときは表示させたい文章をそのまま書いた後、
preタグで囲ってしまうと手っ取り早い。
以下のような感じ。

<pre>
やっほっほ
    わっはっは
ひっひっひ
</pre>

これは以下のように表示される





やっほっほ

    わっはっは

ひっひっひ

はい。
長いので一旦区切って、次に回す。