HTML5 超入門

mindia Inc.
Engineer
Tatsuya Tobioka

Today's Goal.

HTMLとは何か？をなんとなく。
CSSとJSもついでに。
HTMLとCSSを触ってみる。

Agenda

僕とHTMLの出会い
HTMLとは
書いてみよう

僕とパソコン

今でこそ、

趣味：プログラミング
仕事：プログラミング

という感じですが、小学校の時はパソコンの授業が大嫌いでした。

HTMLとの出会い

インターネットが世間に普及し始めようとしていた中学1年生の時、
兄が学校から1冊の本を持って帰って来ました。

HTML2(3だったかも?)入門

その内容を見よう見まねで動かしてみた時、「おぉ！」ととても感動したことを覚えています。
以降、HTMLその他を真剣に勉強するようになり、今に至ります。

追体験①

以下の内容を test.html という名前で保存して、ブラウザで開いてみましょう。

ほげほげ
<hr />
ふがふが

追体験②

以下の内容を test2.html という名前で保存して、ブラウザで開いてみましょう。

<marquee>こんにちは</marquee>

どうでしたか？

ちなみに、今までこの感動を理解してもらえたことをありません^^;

※ なぜ感動したか？

htmlファイル　→　変換 →　Webページ

これをレンダリングと言います。
この概念が頭になかったから衝撃を受けたんだと思っています。

ちなみに、プログラムも実は同じです。

ソースファイル　→　変換 →　プログラム

要は、以下の流れです。

あるファイル　→　変換されて →　目的のものができる

これを理解できたこの体験は僕にとって大きかったと思います。

つまり、

HTMLが出来るとプログラミングが出来る！

というわけで頑張りましょう！！

HTMLとは

Hyper Text Markup Language

文書（ハイパーテキスト）の構造を記述するマークアップ言語

ハイパーテキスト？

テキストを超えたテキスト。

大それた名前ですが、リンクでつながる文書のことです。

要はWebブラウザで見る文書だと思って下さい。

マークアップ言語？

こんな感じで"タグ"と呼ばれるもので囲いながら書いていく文書のことです。

<strong>強調！</strong>

文書の構造？

例えば以下のもの。

ここは見出し
ここは段落
ここは箇条書き
ここは画像

こういうのをタグ付けしていきます。

おまけ

HTML5って？

HTML5はHTMLの5つ目のバージョンです。（現在策定中）

HTMLには歴史があり、バージョン3まではカオスの時代で、4である程度安定しました。

その後、XHTMLという機械にも読みやすい仕様を目指しましたが、人間に不評で失敗しました。

HTML5はそのあたりの反省を踏まえて、すっきりした仕様になっています。

また、Webアプリケーション向けの機能も多く取り込まれていますが、
今日のところは忘れて問題ありません。

早速触ってみよう

今日は例として皆さんのプロフィールページを作ってみましょう！

ひな形

まずは、以下の内容を test3.html として保存して下さい。

<!DOCTYPE html>
<head>
  <title>自分の名前</title>
</head>
<body>
</body>
</html>

この白紙のページが最後には素敵なプロフィールページになっているはずです！

見出しをつけよう

それではコンテンツを作って行きましょう

<body>

と

</body>

の間に書きます。

<h1>自分の名前</h1>

を追加してみましょう！

段落を作ろう

段落はpタグで囲います。

見出しの次に追加してみましょう。

<p>なにかひとこと</p>

箇条書きしてみよう

箇条書きはulとliで書きます。

h2で小見出しもつけてみましょう。

<h2>趣味</h2>
<ul>
  <li>1つ目の趣味</li>
  <li>2つ目の趣味</li>
</ul>

表を作ってみよう

tableタグを使うと表を作れます。

trで囲まれたものが1行。td、thが1つのセルになります。
thは見出し、tdはその他の普通のデータに使います。

<h2>自分年表</h2>
<table border="1">
  <tr>
    <th>19XX</th>
    <td>○○</td>
  </tr>
  <tr>
    <th>20XX</th>
    <td>××</td>
  </tr>
</table>

リンクと画像

リンクはa, 画像はimgタグを使います。

<h2>facebook</h2>
<p>

  <!-- テキストリンク -->
  <a href="http://www.facebook.com/tobioka">facebookへ</a><br />

  <!-- 画像リンク -->
  <a href="http://www.facebook.com/tobioka">
    <img src="http://a4.sphotos.ak.fbcdn.net/hphotos-ak-ash2/73967_101092553295118_100001831204392_4358_4744651_n.jpg" />
  </a>

</p>

文字化け解消

<meta charset="UTF-8" />

<meta charset="Shift_JIS" />

どうだったでしょうか？

意外と簡単でしたか？それとも難しかったでしょうか？？

htmlにはこの他にもたくさんタグがあります。
"html5 リファレンス"などで検索するとたくさんサイトが出てきますので、
参考にしてバリバリ書いて勉強していって下さい。

このままじゃちょっと見た目が残念。

CSSで飾ってみましょう

CSS？

CSSは文書を装飾するための言語です。

早速書いちゃおう

cssはhtmlとは別のファイルで書きます。
（html内に書く方法もありますが、あまり推奨されないので割愛します。）

<head>〜</head>

の中に書きます。

<link rel="stylesheet" href="style.css" />

見出しに色をつけてみよう

style.css を以下の内容で保存して下さい。

h1 {
  color: red;
}

後は検索＆質疑応答形式で。

ちょっと動きをつけてみたい？

そんな時はJavaScriptです。

bodyの閉じタグ直前に以下を、

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

body内に以下を書いてみましょう。

<input type="button" value="あいさつ！" id="hello" />

script.js

何も考えずにコピペしてみましょう。

window.addEventListener('load', function(e) {
  document.getElementById('hello').addEventListener('click', function(e) {
    alert('こんにちは！');
  }, false);
}, false);

いよいよ公開してみよう

FC2ホームページ

Cyberduck

実は・・・

このスライドもHTMLで出来ているんです！

頑張ればここまで出来る！！

以上

ありがとうございました。