html の概要: 文書の構造と基本的な作業

UB3/informatics/html/html_basic

このページの最終更新日: 2021/07/08

  1. html 文書の基本構造
    • ページの定義
    • html と css
  2. 基本的な作業
    • イメージを読み込む
    • リンクを張る
    • 表を作る
    • iframe で外部ファイルを読み込む
  3. html の書き方に関する個人的メモ
    • 閉じタグの省略
    • html ソースのインデント
    • URL に .html をつけるかどうか

広告

html 文書の基本構造

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

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

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

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


ページの定義: header と body

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 という。文法の詳細は css のページ に。


基本的な作業

画像を貼る

img タグを使用。詳細は img タグのページ へ。

<img class="cent" src="../../images_public/statistics/Dice.png" width="150" alt="サイコロ画像">

のような形。src で画像ファイルのパス、width で幅を指定。alt では画像が表示されないときにかわりに表示する文字列を指定できる。

リンクを張る

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

ファイルのパスを指定すれば、ファイルダウンロードリンクとなる。

表を作る

table タグ を使う。

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

箇条書き (リスト) を作る

ol または ul というタグを使い、各アイテムは li で指定する。つまり以下のような形になる。

<ul>
<li>ここに 1 個目の内容</li>
<li>ここに 2 個目の内容</li>
<li>ここに 3 個目の内容</li>
</ul>

ol は番号の箇条書き、ul は点などの箇条書き。詳細は 箇条書き (リスト) の作り方 のページへ。

iframe

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

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


広告

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

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

閉じタグの省略

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


html ソースのインデント

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

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





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

301 リダイレクト のページに移動しました。


広告

References

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

コメント欄

各ページのコメント欄を復活させました。スパム対策のため、以下の禁止ワードが含まれるコメントは表示されないように設定しています。レイアウトなどは引き続き改善していきます。「管理人への質問」「フォーラム」へのバナーも引き続きご利用下さい。

禁止ワード: http, the, м (ロシア語のフォントです)


このページにコメント

Name:


Comment:



これまでに投稿されたコメント

Date Name Comment