htmlファイルの基本

授業で使ったプログラムのベースになるhtml

基本的なウェブページの例

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<style>
h1 {
  color: #262;
  background-color: #afa;
  border: 2px solid #595;
}
p {
  margin: 1% 2%;
}
</style>
<title>htmlファイルの基本</title>
</head>
<body>
<h1>htmlファイルの基本</h1>
<p>基本的なウェブページの例</p>
<!-- ここにもっとたくさん.... -->
</body>
</html>

この他に必要になるかも

cssを別ファイルにするときhead内に追加(ファイル名が例えばhogehoge.css)

<link rel="stylesheet" href="hogehoge.css">

javascriptを追加するとき追加

<script></script>

javascriptを別ファイルにするとき(ファイル名が例えばhogehoge.js)

<script src="hogehoge.js"></script>

大きな画像やpreタグを入れてスマホにも対応するページにするときの割と手軽な解決策(styleに追加)

img {
 max-width:100%;
}
pre {
 overflow: auto;
}

「次へ」とか「戻る」のサイト内リンクを入れる場所を作るとき

<nav></nav>

ページ末尾の作成日時や作成者名を入れる部分

<footer></footer>

構造について若干の解説

<!DOCTYPE html>: html5の取り決めで書いた文書であることを示す。冒頭に置く。DOCTYPEもhtmlも大文字・小文字のどちらでも良い。
<html lang="ja">: html文書の範囲を表す。通常はこの例のように<!DOCTYPE html>の直後に<!html>を書く。これが開始タグ。最後に</html>を書く。これが終了タグ。; 開始タグと終了タグで囲まれたものを要素という。; 開始タグにはlang="ja"という形で属性が加えられることがある。lang="ja"は使用言語が日本語であることを表す。言語属性は省略しても良い
<head>: html要素は2つの要素を持つ。head要素とbody要素である。head要素は見栄えや要素の振る舞いや他の文書との関係を設定する要素からなり、body要素は文字や画像など具体的な表示内容からなる。; htmlの構造を理解するために大切なものなので緑でマークして示した。置く場所が決められているので書かなくてもわかる場合があり、条件が揃えば省略も可能とされているが、必ず書くことにする。
改行について: 各タグの後には改行が入っているが、これは人が見やすくなるようにしているもので、ページの解釈の祭には無視される。html, head などの単語の途中に入れるなどの乱暴をしなければ、どこに改行を入れても、または改行を省いてタグをつなげるのも好みにしてよい。

head部に入れるもの

<meta charset="UTF-8">: ASCII文字以外の文字を使うときには文字コードを指定する必要がある。日本語の場合、Shift_JIS, euc-jpなどの選択肢があるが、UTF-8を強く勧める。大文字小文字の区別はない。; もちろんファイルの保存時の文字コードと合わせる必要がある。; title要素などASCII文字以外の文字が出現する前に指定する必要がある。; metaタグは開始タグだけで終了タグはない
<meta name="viewport" content="width=device-width">: スマートフォンなどでも見やすく表示させるために加える。html5の規約の範囲外(meta情報の追加という規約には合致する)。PCでの表示には影響がない。; スマートフォンに表示させることがないのであれば不要。; 最近のスマートフォンの画素数はPC並で横1024ピクセル程度あることが普通です。PC用のページをそのまま表示できます。ただしそうすると小さすぎて見難くなります(目が良くて先端が細いタッチペンがあれば使用可能かもしれません)。それをどう見せるかはスマートフォン側の問題でページの制作者の責任ではないと思うのですが。; とにかく、この指定でスマートフォンは自分が横360pxのデバイスであるかのように表示の大きさを修正します。device-widthが何を指すかは理解に苦しみますが、360pxであるかのように振る舞うというのは2017年の実際の調査に基づいた推測です。詳しくは手打ちhtml実験室を参照
<style>〜</style>: 各タグごとやクラスごとに大きさや色などの見栄えを指定するスタイルの記述をこの範囲にする。; かつては type="text/css" という属性を書く決まりであったが、html5で省略が可能と定められた。
<title>〜</title>: このページのタイトルを記入する。多くのブラウザでタイトルバーやタブに表示される。検索サイトで検索項目の見出しとして使用される。このページを代表する見出しになるようにする。
<link rel="stylesheet" href="hogehoge.css">: <style>〜</style>に書くcssの内容は、別のファイルに書きだしておけます。; 上の例ではhogehoge.cssという名前のファィルに書きだして、htmlファイルにはそれを使うことを指示するだけにしています。; これにより、共通なcssの内容をまとめて、ファイルの全体容量や通信量を押さえたり、ひとつのcssファイルを変えるだけで全部のページの見栄えを変更するなどということができるようになります。; ただし、モバイル環境など通信量に制限のある環境ではcssファイルが更新されたことをチェックする機構に問題があり、変更が有効になるのに時間がかかる場合が見受けられます。見栄えの試行錯誤中にはhtml内にcssを書くことをお勧めします。
<script>〜</script>: javascriptを追加するとき追加します。使い方はstyleに似ている。; かつては type="text/javascript" という属性を書く決まりであったが、html5で省略が可能と定められた。; styleはhead部に書くが、scriptはbody部にも書くことができる
<script src="hogehoge.js"></script>: javascriptを別ファイルにするとき(ファイル名が例えばhogehoge.js)にこうする。&など記号を書く時の誤解釈の心配がなくなるので、別ファイルにすることを勧める人もいる。

body部に入れるもの

<h1>〜</h1>: 見出。見出しのレベルは1〜6まで。つまりh1〜h6まである。大見出し、中見出し、小見出し...と使い分ける。あらかじめ文字の大きさで差別化されているが、これはブラウザが勝手にやっていること。cssで好みに指定する。
<p>〜</p>: 本文の段落。原稿用紙に書く原稿を思い出せば字下げをする文章の区切り。; 一般のブラウザでは行間を少し余計に空けることで段落の区切りを画面に表す。字下げをしたければcssで指定する必要がある。; 普通のタグ内ではどれもそうだが、pタグ内で改行しても文章は改行されない。改行したい場合は、段落を区切る。どうしても同じ段落内で改行する必要があるのなら、<br>タグを挿入する。
<br>: <br>タグは終了タグのないタグである。; 表示する場所の幅に合わせて改行して表示するというのがhtmlのポリシーなのである。
基本は英語用: 複数の半角スペースは1つのスペースに集約されるし、改行も1つのスペースとみなされる。これはスペースで区切られた単語から文章が作られる英語に便利なようになっていると考えれば納得の行く仕様である。西洋起源のワープロも輸入当初はこのような設計になっていて、スペースを入れて文字間を空けようとして思い通りにならなかった経験があるかもしれないが、これが原因である。
<pre>〜</pre>: 「改行や字下げを人間側が考えるから勝手に加工するな」というタグがある。これがpreタグである。; プログラムリストなどを掲載する場合に便利です。; これを使う場合は、行がウィンドウからはみ出した場合の対処を考えておかなければなりません。
bodyに書くその他のタグ: リストのための ol, ul, li, dl, dt, dd; 表のための table, tr, td など; セクションわけのための article, aside, nav, section; その他 div, address, footer, a, b, i, span, img など; どこにでも書いてありそうな内容はここでは省きます。
<nav>〜</nav>: 「次へ」とか「戻る」のサイト内リンクを入れる場合、メニューのような役割をもたせる時にこれで囲みます。
<footer>〜</footer>: ページ末尾の作成日時や作成者名を入れる部分をこれで囲みます。

style内部の解説

まず、こういう形をしています

セレクタ{プロパティ名:値;}

セレクタは、指示を適用する対象を選択するものです。

プロパティは色や幅など対象が持っている属性の種類を指します。

値はプロパティに指定する値です。値は数値だけでなく、種類や「する/しないのどちらか」を指定するという場合もあります。

セレクタも説明すると大変ですが、とりあえずタグ名ごとと考えてください。

プロパティと値の組み合わせもたくさんありますが、とりあえず下の例を押さえて慣れておきましょう。

color: #262;: 文字色。カラーコードは3桁または6桁の16進数で指定する(別の方法もある)。RGBの順
background-color: #afa;: 背景色。カラーコードはcolorと同じ
border: 2px solid #595;: 枠線。2pxは線幅、solidは線種、カラーコードはcolorと同じ。スペースで区切る
margin: 1% 2%;: 枠線の周りの余白。2つの場合は上下と左右。3との場合は上/右左/下、4つの場合は上/右/下/左。スペースで区切る
max-width:100%;: スマートフォンに大きな(横360px以上)画像を表示させることがなければ、しばらくは考えなくて良い; imgなど表示に使える幅いっぱい(100%)まで縮小するというcssの指示。これより小さい時は拡大しない。width:100%;だと常に合わせるため拡大・縮小してしまう。
overflow: auto;: スマートフォンに長い行のpreを表示させることがなければ、しばらくは必要としない知識; preなど表示に使える幅を超える要素の時、visible(はみだして表示), scroll(スクロール), hidden(非表示), auto(ブラウザ依存) から選択できる。奇妙だがデフォルトがautoでなくvisibleになっている。細かな部分ではブラウザによるが、preタグの場合、visibleはページ全体の幅が拡大されて全体がスクロールになる。scrollは、はみ出す要素だけがスクロールになるという違いがある。Firefoxの場合scrollだとx,y両方のスクロールバーの領域を用意してしまうが、autoでは必要なものだけ用意する。意味としてはauto-scrollという解釈なのかもしれない。