HTML 第一歩

HTMLの基礎

概論 HTML の意味的変化

昔：　「ホームページ」を
　　（手入力で）デザインするための言語
今：
1. （Webサイトを構成する）
  スタイル記述やプログラムも含めて１つにまとめる　「容器」
  （右図）
2. （他の言語で構成されたページを、自動変換することで、 Webサーバからクライアントに送信する形に）最終的に生成された形式
  （下図）

現代人が知っておくべきこと

WORDなどのワープロソフトを使うときに、「スタイル」を活用すること
（HTMLを書くときにも共通の原理）

NG:　図のように該当箇所に直接フォントなどの指示をしないこと		OK: スタイルを設定し、スタイル毎の書式を指示するといい

HTMLの文法と構成の概要（および昔と今の変化）

HTML

文法の概要：文書を構成する各要素にタグを付与することにより、
- （昔）各要素の外見を指示する
- （今）各要素の文書内での役割を指示する
必要なタグ：
- （昔）<html> <head> <body>
- （今）先頭に <!doctype html> <= これは正確にはHTMLのタグではなく、HTML（HTML5）であることの宣言
コンテナ（としてのHTML)に含まれるもの
<style> タグの中に、CSS（という言語）によるスタイル記述（各要素をどんなルールでレンダリング=表示するか）
<script> タグの中に、JavaScript等のプログラミング言語による、動作記述
なお、この両者はいずれも、下記の両方の構成方法を併用できる。
- HTMLファイルの中に上記タグで挟んでインラインで書く
- 外部ファイルを引用する
HTMLの記述例や、ページ内の各要素に付与されたスタイル、プログラムについてチェックするために、
　ブラウザで以下のようなツールは使いこなしておくといい。 1.　ソース表示 2.　開発ツール

CSS

CSSとは

スタイル記述（の、ルール）、の集合体
セレクタ（CSSセレクタ）でそのルールの対象となる要素を指定し、
その右（の、ブレース{ }内）に、スタイル指示（CSS属性とその値）を並べる。
情報源：
- 「CSS」で検索すると入門やリファレンスのサイトは多数ある
- 「情報処理概論」でも扱っているので読んでおくこと

（前述のワードでの原理と同様に）NGな使い方：

<!doctype html>

<font size=30pt>
あいうえお
</font>

<span bgcolor=#900> かきくけこ
</span>

以下のようなHTML文法要素は（これを例として使った入門サイトなども残存しているが）今は無効または非推奨の扱いになっている

<font> <i> <b> などの表示方法を指示するタグ
bgcolor, color などの、要素の表示方法を指示する属性

CSSの使用例

（以下の内容に準ずるHTMLファイルを自分で作成して開いてみるか、
このソースファイルを表示させてみて下さい。

<!doctype html>
<meta charset=utf-8>
<!-- 文字エンコーディングはエディタに依存 -->

<!-- CSS部分で表示ルールを指示-->
<style>
p {color:red;}
.yel{background-color: yellow}
#rgt{text-align:right;color:blue;}
</style>


黒い文字
<p>あいうえお</p>
<p class=yel>さしすせそ</p>
<p>かきくけこ</p>
<p class=yel>なにぬねの</p>
<p id=rgt>右より</p>

なお上記のutf-8の部分は、utf-8で保存するエディタを使うときの例であり、
メモ帳、 TeraPad等のエディタ（をWindowsで特にエンコーディング指示なしで使う場合）では、Shift_JIS とすること。

HTMLに変換して使う言語

HTMLに変換する言語は、大別すると、２つの領域で使われている。

原稿執筆のための言語：
- ページ全体でなくその中で使われる記事の執筆に有効
- HTMLに限らずPDFなどの印刷向けフォーマットにも出力できるシステムであることが多い
- 専用エディターや、リアルタイムで変換してプレビューしながら編集できるプラグイン等を持つエディタ等がある。
- markdown が広く使われているが、
  いくつかの拡張や方言があることによる混乱があるようだ。　　
- 最近はasciidocも注目されている　 * 他に、Wiki文法などもある。
テンプレートエンジン（とテンプレート書式）
- Webアプリケーションでは、プログラムが生成した様々なデータを、ひな形の中に埋め込むことで、ページ（HTML)を生成する、という方法が広く使われる。
- そのひな形（テンプレート）の書き方として、
  1. HTMLを概ねそのまま使い、データを埋め込むための疑似タグにより機能拡張しているもの
    php, ERB など（処理記述のためのプログラミング言語毎に様々なものがある）
  2. HTMLの要素記述をHTMLのタグの形でない文法で記述できるもの
    インデンテーションで構造を表現する Slim, Pug(Jade) をここではお薦めとして紹介する

テンプレートの例

前述のHTML部分を、pug(jade) や slimで記述する例

p あいうえお
p.yel さしすせそ
p かきくけこ
p.yel なにぬねの
p#rgt 右より

比較してみて、以下のようなことに気づかれただろうか。

記述量が少ない
終了タグを書かなくていい
クラスやidを、CSSと同じ書き方（CSSセレクタ）で指定できる