html の概要と目次

informatics/html/html_basic
ウェブサイト作成に関する上位ページです。
2017/03/19 更新

  1. html 文書の基本構造
    • ページの定義
    • html と css
    • html ソースのインデント
  1. 基本的な作業
    • イメージを読み込む
    • リンクを張る (詳細は html link)
    • 表を作る
    • iframeで外部ファイルを読み込む

広告

html 文書の基本構造

一般的なウェブサイトは、html (hyper-text mark-up language)という言語で記述されている。これは < と > で囲まれた文字列 (タグ)を命令と解釈し、それに従って文章のレイアウトを整える仕組み である。

タグは原則として 2 個で 1 組になっていて、/ がついているものが命令を閉じるタグである。いくつかタグの例を挙げてみると、

  • <html> と </html>: この 2 つのでタグ囲まれた部分が html で記述されているという意味。最初の <html> の開始命令が </html> で終了していると考える。
  • <br />: 改行を示すタグ。開始タグと閉じタグが一緒になっていると考える。
  • 単に「あいうえお」と書くと「あいうえお」になるが、<strong>あいうえお</strong>と書くと太字のあいうえおになる。

大体のブラウザには「ソースを表示」というコマンドがあり、ウェブサイトを記述している html を見ることができる。このサイトで主に使っている記述を このページ にまとめた。


ページの定義

html で書かれたページは、全体が <html> </html> で囲まれる構造になっており、大きく header と body に分かれている (3)。

header とはページのタイトル、スタイル、検索用キーワードなどを示す部分であり、ここに書かれた情報は基本的にページには表示されない

body とはページの内容が記述される場所である。これをまとめると、以下のような構造になる。

<html>
    <head>
        <title>ページのタイトル</title>
    </head>
    <body>
        <p> ここに記事の本文が記載される。p は段落を示すタグ。</p>
        <p> このように、複数の段落や見出しがここに書かれる。</p>
    </body>
</html>


html と css

例に挙げた改行や文字の太さだけでなく、ウェブサイトの見た目 (左右のカラム、背景色、フォントなど)は全て html 言語で記述されている。すると、このサイトのように同じレイアウトのページが複数ある場合には、全てのページにフォントや文字サイズを指定する命令が書かれていなければならないことになる。

これは無駄なことなので、複数のページにまたがるような情報は 1 つのファイルにまとめておき、必要に応じて各 html ページからそれを参照するという形がとられる。この情報が書かれているページを css という。


基本的な作業

画像を貼る

img タグを使用。

imageは、width="200px" と height="150px" のようなオプションで高さと幅を指定することができる。alt="alternative"とすると、画像が表示されないときにかわりに alternative という文字列が表示される。

リンクを張る

リンクを張るときは <a href="ファイルのパスまたはURL">リンクを張りたい文字列</a > のように a タグを使う。ファイルのパスまたは URL のあとに、属性を追加することができる。属性などの詳細は html: link の張り方 を参照。

表を作る

table タグ を使う。

<table>
<td>ここに 1 列目の内容</td>
<td>ここに 2 列目の内容</td>
<td>ここに 3 列目の内容</td>
</table>

iframe

iframe タグ は、他のサイトの内容を枠の中に表示させるタグである。たとえば Youtube 動画の埋め込みなど。

<iframe src="他のサイトの URL"> </ifrfame> のようにする。Youtube や Twitter のページにいけば、そのページからシェア用の iframe タグを取得できるはず。


広告

html の書き方に関する個人的メモ

サイトを作る過程で出来上がってきたマイルールのメモ。素人の独学なので「正しい」ことなのかどうかはわからない。

閉じタグの省略

箇条書きを閉じる </li> は省略できることがわかったので、これは書かない。わずかながらデータ通信量を減らせてエコだし、ファイルも見やすくなる。


html ソースのインデント

html ソースをインデントするかどうかについては、しない/タブでインデントする/スペースでインデントする、など色々な意見があるようで、インデントをつける派が優勢であるように思える (4)。しかし、インデントの目的は結局のところ「ソースを見やすくする」ことに尽きるようなので、どのようなインデントをつけるかは個人の好みによる (複数人でコードを管理しているような場合は、一定のルールが必要かもしれないが)。

例えば、必ずある html タグに対してまで上の例のようにインデントをつけるのは無駄に思える。また、以下のようなコードが美しいとは思えないので、このサイトでは「局所的に、自分が見やすいと思う程度にインデントをつける」 というルールで編集することにしている。





URL に .html をつけるかどうか

たとえばこのページの URL は https://ultrabem-branch3.com/informatics/html/html_basic.html で、末尾に .html がついている。これはどちらかというとクラシックなスタイルで、いまは .html のつかない URL が多いように思う。

URL を省略するメリットとして、以下の 2 点がある (5)。

  1. 動的なページを作るために、php のファイルに変更した際にも URL を同一に保つことができる。
  2. 短くて見やすい。

.html なしの方がわずかにメリットがあるが、SEO 的な問題はないようだ。このサイトは拡張子ありで始めてしまったので、変更はせずにこのままいくことにする。


広告

コメント欄

一言コメントをどうぞ! (基本500字まで - 100字のページもあるかも)


このコメント欄は各ページにあるので、いつ管理人がコメントを見ることになるのか分かりません。内容について質問がある場合は、下のリンク先のフォームから質問頂ければ、早めに返信するようにします。


References

  1. パス (URL)の指定方法. Web.
  2. 実際に段組を作ってみる. Web.
  3. ページ定義. Web.
  4. HTMLソースのインデントについて. Link.
  5. 個別ページのURLは拡張子htmlがつくほうが良いのか - URL正規化. Link: Last access 2018/03/19.