==========
HTML入門
==========
ここではHTMLに関する基礎的な知識や書き方について解説していきます。
やってみよう!
===============
| 突然ですが、実際にHTMLファイルと呼ばれるものを作成してみましょう。
| 1. 今回のトレーニングで一番最初にインストールしたテキストエディタ(TeraPad, mi)を開いてください。
| 2. エディタに以下のコードを書き込んでください。
.. code-block:: html
Webページのタイトル
h1タグは一番大きな見出しになります
h2タグはその次に大きい見出しで
h3タグはその次に大きい見出しになります
pタグを使うと文書が書くことができます。
しかしhtmlファイルの方で改行しても出力時には改行されません。
改行するためには
という改行タグを使います。
Googleへのリンクも簡単に作れます。
strongタグを使用するとその名の通りストロングなものができます。
画像を貼付けるのもとても簡単です。
- 数字リスト
- 数字リスト
- 数字リスト
| 名前 |
フルーツ |
スポーツ |
| 田中 |
りんご |
サッカー |
| 鈴木 |
オレンジ |
野球 |
| 佐藤 |
ぶどう |
バスケ |
|
| 3. test.html という名前でデスクトップなど分かりやすい所に保存します。
| 4. test.html ファイルをダブルクリックします。
|
| ウェブブラウザが立ち上がりましたか？
| Internet Explorer, Google Chrome, Safari, Fire Fox, Opera等これらはすべてウェブブラウザと呼ばれるもので
| Webページを閲覧するためにHTMLファイルや画像・音楽ファイルなどを解析し、ユーザーに表示するためにアプリケーションです。
HTMLとは？
===============
HTMLは、Web上のドキュメントを作るためのマークアップ言語です。
**マークアップ言語とは？**
普通の文書に、構造を記述するための言語です。例えば・・・
.. code-block:: html
第一章
うんぬんかんぬん
第二章
うんぬんかんぬん
・あ
・い
第三章
これだと、人間にとっては視覚的には文書の構造が把握しやすい。
しかし、コンピュータ側から見た場合、文書の文脈を理解することができないため
これでは文書の構造を把握することができません。そこで・・・
.. code-block:: html
第一章
うんぬんかんぬん
第二章
うんぬんかんぬん
このようにすることにより、コンピュータが文書の構造を理解できるようにする言語のことをマークアップ言語と言います。
HTMLタグとは？
--------------
タグとは、HTMLで<と>に囲まれた、一つの指示の固まりです。
<と>で囲まれる開始タグで始まり、で囲まれる終了タグで終わります。
開始タグと終了タグではさまれた部分が内容となります。
例）
.. code-block:: html
強調部分です。
属性とは？
-----------
例えば、画像を表示するためのタグ「img」は単に
.. code-block:: html
![]()
と記述しても、表示する画像がどこにあるのか指定されていないため、画像が表示されません。
画像がどこにあるかを指定するためにimgタグに「src」という「属性」を追記します。
.. code-block:: html
imgタグは表示するべき画像を知ることができたので、画像を表示することができるようになります。
この様に「属性」をタグに追加することでタグに情報を与え、表示内容を制御することができます。
属性には種類が多数あります。
タグによって付与できる属性、付与できない属性、付与することが必須である属性があり、正しいHTMLを書くには適切な属性の記述がされている事が必要です。
HTMLの基本構造
----------------
HTMLにはこれらが必須となります。
****
文書がHTML5で作成されたものであることを示す宣言です。先頭に記述します。DOCTYPE宣言をしたからにはそのバージョンの仕様に正確に従うようにしましょう。
.. note::
DOCTYPE宣言はタグではありません。
****
HTML文書であることを示します。lang属性で言語を指定することができます。全てのHTMLタグはからの中に入れる必要性があります。直下にはとのみ使うことができます。
日本語の場合は
.. code-block:: html
****
headはHTML文書の情報などを記述を示すために使います。後述のmetaやtitleなどが中に入ります。
****
metaタグはHTMLの様々な情報を指定することができます。例えば文字エンコーディングを指定する場合はのように記述します。
.. note::
文字エンコーディングは必須ではありませんが、文字化け対策のために指定するようにしましょう。
****
titleタグはページのタイトルを指定することができます。
.. note::
タイトルはブラウザなど各種アプリケーションや検索エンジンに表示される名前になりますので、必ず指定しましょう。
**<body>**
bodyはhtmlの文書本体部分を指定するタグです。本文は必ず<body>から</body>の間に記述してください。
**HTML文書に最低限必須な記述**
.. code-block:: html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Webページのタイトル
本文はここに書きます。
主要なタグの紹介
=================
** - **
| -は見出しをつけるタグです。が最もランクの高い見出しで、が最もランクが小さい見出しになります。
|
**
**
|
は段落を示すタグです。
|
**
**
|
は改行するときに使います。
|
****
| はリンクを貼るときに使うタグです。href属性でリンク先を指定します。
| 例：
.. code-block:: html
地図はこちら
Googleはこちら
トップはこちら
****
| は重要な箇所に使います。
|
**![]()
**
| ![]()
は画像を表示するときに使います。src属性で画像のURLを指定することが必須です。
| 例：
.. code-block:: html
|
****
| は順序を入れ替えても文書の意味が変わらないリストに使います。リストの各項目は- タグを使用します。
.. code-block:: html
**
**
| は順序に意味があるリストに使います。リストの各項目は- タグを使用します。
.. code-block:: html
- 数字リスト
- 数字リスト
- 数字リスト
****
| は表を作るために使います。表の外側は、表の行は、表のセルは| を使います。 | の代わりに | を使うことにより、そのセルが見出しとして扱われます。
|
| 例：
.. code-block:: html
| 名前 |
フルーツ |
スポーツ |
| 田中 |
りんご |
サッカー |
| 鈴木 |
オレンジ |
野球 |
| 佐藤 |
ぶどう |
バスケ |
| ブラウザでの表示
|
.. raw:: html
| 名前 |
フルーツ |
スポーツ |
| 田中 |
りんご |
サッカー |
| 鈴木 |
オレンジ |
野球 |
| 佐藤 |
ぶどう |
バスケ |
.. warning::
タグは表であることを示すものです。tableタグを初め、HTMLは文書構造を示すためのものであり、デザインのため使ってはいけません。デザインはCSSを用いて行いましょう。
HTML課題 - 自分の好きなもの紹介ページ
=============================================
| HTMLがどのようなものか分かり始めましたか？
| 最初は覚えるタグが多く、難しく感じてしまいがちですが、何度も使っていくうちに自然と覚えていくでしょう。
|
| それではまず自分の好きな人物や趣味などを紹介する **自分の好きなもの紹介ページ** を作成してみましょう。
| 先ほどと同様にテキストエディタを開き、test.htmlやタグのリファレンスサイト等を参考にしながら制作してみてください。
| 見出し、リスト、テーブル、画像などを配置する、できるだけたくさんの種類のタグを使用することをオススメします。
| 文字の色や背景を変えたりと装飾が欲しくなるかもしれませんが、それらは次のチャプターで勉強します。
|
| HTMLファイルが完成したら `W3Cの検証サービス `_ を開き、作ったファイルをアップロードしてください。
| これは文法のエラーなどが無いか自動的にチェックしてくれるサービスです。エラー箇所が表示されたらそこを修正し、最終的にエラーが表示されないようにしましょう。
|
ここから :download:`制作例 ` がダウンロードできます。
HTMLのバージョンについて
=========================
HTML5はWorld Wide Web Consortium(略:W3C)が2014年の正式勧告に向けて策定している規格です。
今世紀入ってから最大の改定となります。
既に最新のブラウザーではHTML5の機能の多くが使うことができるようになっています。
.. note::
World Wide Web Consortium：Webで使われる技術の標準化を進めることを目的として設立された団体。慶應義塾大学湘南藤沢キャンパスに東アジアを担当する支部がある。
HTML4.01のDOCTYPE宣言：
.. code-block:: html
HTML5のDOCTYPE宣言：
.. code-block:: html
HTML5ではaudioやvideoなど、マルチメディアをHTMLから直接扱うことが可能になりました。
HTML5での動画再生の例：
.. code-block:: html
また、フォーム関連の新しい機能が多数追加されました。
HTML5でのフォームの例：
.. code-block:: html
ブラウザでの表示例：
.. raw:: html
.. note::
最新のChrome、Internet Explorer10で閲覧してください。
文書構造を示す言語としての性格も強化されており、
|