HTML入門

HTML入門（旧版）

#01 HTMLとはなにか？

HTML

* 概要
- ホームページを作るための言語
- Hyper Text Markup Language

* 範囲
- HTML5
- 勧告
- caniuse.com

* ツール
- テキストエディタ
- ブラウザ（Google Chrome）

#02 初めてのHTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>初めてのHTML</title>
</head>
<body>
<p>こんにちは！</p>
</body>
</html>

#03 基本的なタグを覚えよう

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>初めてのHTML</title>
</head>
<body>
<!-- 
コメント 
コメント 
コメント 
コメント 
-->
<p>こんにちは！</p>
</body>
</html>

#04 meta､style､linkタグを使おう

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>初めてのHTML</title>
<meta name="description" content="初めてのHTML文書です。">
<style>
p { color: red; }
</style>
<link rel="stylesheet" href="mystyle.css">
<link rel="shortcut icon" href="favicon.ico">
</head>
<body>
<p>こんにちは！</p>
</body>
</html>

#05 h1-6､br､strong､hrタグを使おう

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>初めてのHTML</title>
</head>
<body>
<h1>大見出し</h1>
<h2>中見出し</h2>
<h3>小見出し</h3>
<p>こんにちは！<br>こんにちは！</p>
<p>こんにちは！</p>
<hr>
<p>こんにちは！</p>
<p>こんにちは！</p>
<p>こんにちは！</p>
<p><strong>こんにちは！</strong></p>
</body>
</html>

#06 ul､ol､liタグでリストを作ろう

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>初めてのHTML</title>
</head>
<body>
<ul><!-- Unordered List -->
<li>Apple</li><!-- List Item -->
<li>Banana</li>
</ul>
<ol><!-- Ordered List -->
<li>Apple</li>
<li>Banana</li>
</ol>
</body>
</html>

#07 tableタグで表組みを作ろう

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>初めてのHTML</title>
</head>
<body>
<!--
tr: table row （行）
th: table header
td: table data
-->
<table>
<thead>
<tr><th>name</th><th>2010</th><th>2011</th></tr>
</thead>
<tbody>
<tr><td>@taguchi</td><td>200</td><td>210</td></tr>
<tr><td>@fkoji</td><td>300</td><td>420</td></tr>
<tr><td>@dotinstall</td><td>500</td><td>380</td></tr>
</tbody>
</table>
</body>
</html>

#08 aタグでリンクしてみよう

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>初めてのHTML</title>
</head>
<body>
<p>こんにちは。</p>
<p><a href="http://google.com" target="_blank">Google</a></p>
<p><a href="hello.html">Hello</a></p>
<p><a href="#hello2">hello2</a></p>
<p>こんにちは。</p>
<p>こんにちは。</p>
<p>こんにちは。</p>
<p>こんにちは。</p>
<p>こんにちは。</p>
<p>こんにちは。</p>
<p>こんにちは。</p>
<p>こんにちは。</p>
<p>こんにちは。</p>
<p>こんにちは。</p>
<p>こんにちは。</p>
<p>こんにちは。</p>
<p>こんにちは。</p>
<p>こんにちは。</p>
<p>こんにちは。</p>
<p>こんにちは。</p>
<p>こんにちは。</p>
<p>こんにちは。</p>
<p>こんにちは。</p>
<p>こんにちは。</p>
<p>こんにちは。</p>
<p>こんにちは。</p>
<p>こんにちは。</p>
<p>こんにちは。</p>
<p>こんにちは。</p>
<p>こんにちは。</p>
<p>こんにちは。</p>
<p>こんにちは。</p>
<p>こんにちは。</p>
<p>こんにちは。</p>
<p>こんにちは。</p>
<p>こんにちは。</p>
<p>こんにちは。</p>
<p>こんにちは。</p>
<p>こんにちは。</p>
<p>こんにちは。</p>
<p>こんにちは。</p>
<p>こんにちは。</p>
<p>こんにちは。</p>
<p>こんにちは。</p>
<p id="hello2">hello 2 !!!</p>
<p>こんにちは。</p>
<p>こんにちは。</p>
<p>こんにちは。</p>
<p>こんにちは。</p>
<p>こんにちは。</p>
<p>こんにちは。</p>
<p>こんにちは。</p>
<p>こんにちは。</p>
<p>こんにちは。</p>
<p>こんにちは。</p>
<p>こんにちは。</p>
<p>こんにちは。</p>
<p>こんにちは。</p>
<p>こんにちは。</p>
<p>こんにちは。</p>
<p>こんにちは。</p>
</body>
</html>

#09 imgタグで画像を表示させよう

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>初めてのHTML</title>
</head>
<body>
<img src="cart.jpg" width="500" height="283" alt="カートの写真です。" title="カートの写真">
</body>
</html>

#10 formタグでフォームを作ろう

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>初めてのHTML</title>
</head>
<body>
<form action="survey.php" method="post">
<p>名前：<input type="text" name="name" size="60" maxlength="5"></p>
<p>メモ：<textarea name="memo"></textarea></p>
<p><input type="submit" value="送信!"></p>
</form>
</body>
</html>

#11 いろいろなinputタグを使おう

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>初めてのHTML</title>
</head>
<body>
<form action="survey.php" method="post">
<p>名前：<input type="text" name="name" required></p>
<p>パスワード：<input type="password" name="password"></p>
<p><input type="hidden" name="user_id" value="32"></p>
<p>日付：<input type="date" name="birthday"></p>
<p>URL：<input type="url" name="url"></p>
<p>email：<input type="email" name="email"></p>
<p><input type="submit" value="送信!"></p>
</form>
</body>
</html>

#12 radio､checkbox､labelを使おう

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>初めてのHTML</title>
</head>
<body>
<form action="survey.php" method="post">
<p>
Colors:
<label><input type="radio" name="color" value="red">Red </label>
<input type="radio" name="color" value="blue" id="blue"><label for="blue">Blue</label>
<input type="radio" name="color" value="green">Green 
</p>
<p>
Colors:
<input type="checkbox" name="color" value="red">Red 
<input type="checkbox" name="color" value="blue">Blue 
<input type="checkbox" name="color" value="green">Green 
</p>
<p><input type="submit" value="送信!"></p>
</form>
</body>
</html>

#13 selectタグを使ってみよう

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>初めてのHTML</title>
</head>
<body>
<form action="survey.php" method="post">
<select name="color" size="5" multiple>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
</select>
<p><input type="submit" value="送信!"></p>
</form>
</body>
</html>

#14 div､spanとid､classについて

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>初めてのHTML</title>
</head>
<body>
<!--
スタイリング
div: 汎用ブロック要素（前後に改行が入る）
span: 汎用インライン要素（前後に改行が入らない）

id: その文書に一つだけの要素
class: 複数あってもよい
-->
<div id="main">
<p>こんにちは！こんにちは！</p>
<p>こんにちは！こんにちは！<span class="notice">こんにちは！</span></p>
</div>

<p>こんにちは！<span class="notice">こんにちは！</span></p>
<p>こんにちは！こんにちは！</p>
</body>
</html>

#15 文書構造を表すタグを使おう

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>初めてのHTML</title>
</head>
<body>
<!--
スタイリング
div: 汎用ブロック要素（前後に改行が入る）
span: 汎用インライン要素（前後に改行が入らない）

構造的
header
footer
nav
article
aside
section

-->

<div id="header">
<h1>起業日記</h1>
<nav>
home
profile
</nav>
</div>

<article>
<h2>リリース完了！</h2>
<p>うれしい！</p>
</article>

<aside>
<h3>このサイトについて</h3>
<p>@taguchiの起業日記です。</p>
</aside>

<footer>
copyright 2013 @taguchi
</footer>

</body>
</html>

#16 実体参照､style､scriptについて

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>初めてのHTML</title>
</head>
<body>
<!--
実体参照
style属性
script
-->
<p>これは&lt;p&gt;です。</p>
<p style="color:red;">こんにちは！</p>
<script src="myscript.js"></script>
</body>
</html>