HTML入門¶
ここではHTMLに関する基礎的な知識や書き方について解説していきます。
やってみよう!¶
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Webページのタイトル</title>
</head>
<body>
<h1>h1タグは一番大きな見出しになります</h1>
<h2>h2タグはその次に大きい見出しで</h2>
<h3>h3タグはその次に大きい見出しになります</h3>
<p>pタグを使うと文書が書くことができます。
しかしhtmlファイルの方で改行しても出力時には改行されません。<br>
改行するためには<br>という改行タグを使います。
<a href="http://www.google.co.jp">Google</a>へのリンクも簡単に作れます。<br>
strongタグを使用するとその名の通り<strong>ストロング</strong>なものができます。<br>
画像を貼付けるのもとても簡単です。</p>
<img src="http://www.uhero.co.jp/common/images/logo.png" />
<ul>
<li>普通のリスト</li>
<li>普通のリスト</li>
<li>普通のリスト</li>
</ul>
<ol>
<li>数字リスト</li>
<li>数字リスト</li>
<li>数字リスト</li>
</ol>
<table>
<tr>
<th>名前</th>
<th>フルーツ</th>
<th>スポーツ</th>
</tr>
<tr>
<td>田中</td>
<td>りんご</td>
<td>サッカー</td>
</tr>
<tr>
<td>鈴木</td>
<td>オレンジ</td>
<td>野球</td>
</tr>
<tr>
<td>佐藤</td>
<td>ぶどう</td>
<td>バスケ</td>
</tr>
</table>
</body>
</html>
HTMLとは？¶
HTMLは、Web上のドキュメントを作るためのマークアップ言語です。
マークアップ言語とは？
普通の文書に、構造を記述するための言語です。例えば・・・
第一章
うんぬんかんぬん
第二章
うんぬんかんぬん
・あ
・い
第三章
これだと、人間にとっては視覚的には文書の構造が把握しやすい。 しかし、コンピュータ側から見た場合、文書の文脈を理解することができないため これでは文書の構造を把握することができません。そこで・・・
<h1>第一章</h1>
<p>うんぬんかんぬん</p>
<h1>第二章</h2>
<p>うんぬんかんぬん</p>
<ul>
<li>あ</li>
<li>い</li>
</ul>
このようにすることにより、コンピュータが文書の構造を理解できるようにする言語のことをマークアップ言語と言います。
HTMLタグとは？¶
タグとは、HTMLで<と>に囲まれた、一つの指示の固まりです。 <と>で囲まれる開始タグで始まり、</と>で囲まれる終了タグで終わります。 開始タグと終了タグではさまれた部分が内容となります。
例）
<strong>強調部分です。</strong>
属性とは？¶
例えば、画像を表示するためのタグ「img」は単に
<img>
と記述しても、表示する画像がどこにあるのか指定されていないため、画像が表示されません。 画像がどこにあるかを指定するためにimgタグに「src」という「属性」を追記します。
<img src="hogehoge.gif" />
imgタグは表示するべき画像を知ることができたので、画像を表示することができるようになります。 この様に「属性」をタグに追加することでタグに情報を与え、表示内容を制御することができます。
属性には種類が多数あります。 タグによって付与できる属性、付与できない属性、付与することが必須である属性があり、正しいHTMLを書くには適切な属性の記述がされている事が必要です。
HTMLの基本構造¶
HTMLにはこれらが必須となります。
- <!DOCTYPE html>
文書がHTML5で作成されたものであることを示す宣言です。先頭に記述します。DOCTYPE宣言をしたからにはそのバージョンの仕様に正確に従うようにしましょう。
ノート
DOCTYPE宣言はタグではありません。
- <html>
HTML文書であることを示します。lang属性で言語を指定することができます。全てのHTMLタグは<html>から</html>の中に入れる必要性があります。直下には<head>と<body>のみ使うことができます。
- 日本語の場合は
<html lang="ja">
- <head>
- headはHTML文書の情報などを記述を示すために使います。後述のmetaやtitleなどが中に入ります。
- <meta>
metaタグはHTMLの様々な情報を指定することができます。例えば文字エンコーディングを指定する場合は<meta charset=”UTF-8”>のように記述します。
ノート
文字エンコーディングは必須ではありませんが、文字化け対策のために指定するようにしましょう。
- <title>
titleタグはページのタイトルを指定することができます。
ノート
タイトルはブラウザなど各種アプリケーションや検索エンジンに表示される名前になりますので、必ず指定しましょう。
- <body>
- bodyはhtmlの文書本体部分を指定するタグです。本文は必ず<body>から</body>の間に記述してください。
HTML文書に最低限必須な記述
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Webページのタイトル</title> </head> <body> 本文はここに書きます。 </body> </html>
主要なタグの紹介¶
- <h1> - <h6>
- <h1>-<h6>は見出しをつけるタグです。<h1>が最もランクの高い見出しで、<h6>が最もランクが小さい見出しになります。
- <p>
- <p>は段落を示すタグです。
- <br>
- <br>は改行するときに使います。
- <a>
- <a>はリンクを貼るときに使うタグです。href属性でリンク先を指定します。例：
<a href="map.html">地図はこちら</a>
<a href="http://www.google.co.jp">Googleはこちら</a>
<a href="../index.html">トップはこちら</a>
- <strong>
- <strong>は重要な箇所に使います。
- <img>
- <img>は画像を表示するときに使います。src属性で画像のURLを指定することが必須です。例：
<img src="hogehoge.gif" />
- <ul>
- <ul>は順序を入れ替えても文書の意味が変わらないリストに使います。リストの各項目は<li>タグを使用します。
<ul>
<li>普通のリスト</li>
<li>普通のリスト</li>
<li>普通のリスト</li>
</ul>
- <ol>
- <ol>は順序に意味があるリストに使います。リストの各項目は<li>タグを使用します。
<ol>
<li>数字リスト</li>
<li>数字リスト</li>
<li>数字リスト</li>
</ol>
- <table>
- <table>は表を作るために使います。表の外側は<table>、表の行は<tr>、表のセルは<td>を使います。<td>の代わりに<th>を使うことにより、そのセルが見出しとして扱われます。例：
<table>
<tr>
<th>名前</th>
<th>フルーツ</th>
<th>スポーツ</th>
</tr>
<tr>
<td>田中</td>
<td>りんご</td>
<td>サッカー</td>
</tr>
<tr>
<td>鈴木</td>
<td>オレンジ</td>
<td>野球</td>
</tr>
<tr>
<td>佐藤</td>
<td>ぶどう</td>
<td>バスケ</td>
</tr>
</table>
名前 フルーツ スポーツ 田中 りんご サッカー 鈴木 オレンジ 野球 佐藤 ぶどう バスケ 警告
<table>タグは表であることを示すものです。tableタグを初め、HTMLは文書構造を示すためのものであり、デザインのため使ってはいけません。デザインはCSSを用いて行いましょう。
HTML課題 - 自分の好きなもの紹介ページ¶
ここから 制作例 がダウンロードできます。
HTMLのバージョンについて¶
HTML5はWorld Wide Web Consortium(略:W3C)が2014年の正式勧告に向けて策定している規格です。 今世紀入ってから最大の改定となります。 既に最新のブラウザーではHTML5の機能の多くが使うことができるようになっています。
ノート
World Wide Web Consortium：Webで使われる技術の標準化を進めることを目的として設立された団体。慶應義塾大学湘南藤沢キャンパスに東アジアを担当する支部がある。
HTML4.01のDOCTYPE宣言：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML5のDOCTYPE宣言：
<!DOCTYPE html>
HTML5ではaudioやvideoなど、マルチメディアをHTMLから直接扱うことが可能になりました。
HTML5での動画再生の例：
<video src="example.mp4"></video>
また、フォーム関連の新しい機能が多数追加されました。
HTML5でのフォームの例：
<form action="submit.php" method="post"> <input type="range" name="range"> <input type="submit" value="送信"> </form>
ブラウザでの表示例：
ノート
最新のChrome、Internet Explorer10で閲覧してください。
文書構造を示す言語としての性格も強化されており、 <header>、<footer>、<section>、<article>などが追加されました。 これにより、<div id=”header”>など何もかも<div>タグにならずにより正確に表現できるようになりました。
便利なショートカットキー紹介¶
| 動作 | ショートカットキー | 説明 |
|---|---|---|
| 全選択 | Ctrl + A | テキストやファイルを全選択する |
| コピー | Ctrl + C | 選択した範囲のテキストやファイルをコピーする |
| 切り取り | Ctrl + X | 選択した範囲のテキストやファイルを切り取る |
| 貼り付け | Ctrl + V | コピー・切り取りしたものを貼り付け・ペーストする |
| 検索 | Ctrl + F | ファイル内やWebページ内で検索をかける |
| 新規作成 | Ctrl + N | テキストエディタ等のアプリケーションで新規作成をする |
| 更新 | Ctrl + R | ブラウザで開いているページを更新・リロードする |
| 保存 | Ctrl + S | テキストエディタで編集中のファイルを上書き保存する |
| 新しいタブ | Ctrl + T | ブラウザで新しいタブを開く |
| 戻る | Ctrl + Z | 直前の作業を取り消す |
