HTMLとは

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

<タグ属性=”値”>テキスト</タグ>
<タグ>

使用するHTML

HTML5（草案・caniuse.com参照）

主な構造・headの中身

sample1

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

<!DOCTYPE html>　文書宣言
<html lang="ja">　日本語
隠しコメント

headの中身

<meta charset="utf-8">　文字コードの指定
<meta name="description" content="初めてのHTML文書です。"> 　検索エンジンのために正確に書くこと
<style> p{ color: red;} </style>　スタイルの指定（文字）
<link rel="stylesheet" href="mystyle.css">　スタイルシートの指定
<link rel="shortcut icon" href="favicon.ico">　ファビコンの指定

bodyの中身

文字関連

見出し
<h1>大見出し</h1> <h2>中見出し</h2> <h3>小見出し</h3>

改行
<p>こんにちは！<br>こんにちは！</p>

強調
<p><strong>こんにちは！</storong></p>

ライン
<hr>

リスト関連

リスト（ul：Unordered List：番号なし）
<ul> <li>apple</li> <li>banana</li> </ul>

リスト（ol：Ordered List：番号あり）
<ol> <li>apple</li> <li>banana</li> </ol>

li：list Item

表関連

表
<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>

tr： table row（行）
th： table header
td： table data

リンク関連

aタグのリンク
<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 id="hello2">hello 2 !!!</p>

画像関連

<img src="cart.jpg" width="500" height="283" alt="カートの写真です。" title="カートの写真">

縮小も可能
alt＝アクセシビリティを高める
title＝マウスオーバーで表示

入力部品関連 formの中身

form始まり・情報の送り先の指定
<form action="survey.php" method="post">

form終わり
</form>

一行
<p>名前：<input type="text" name="name" size="68" maxlength="5" required></p>
* maxlength：最大数
* required：必須入力

テキストエリア
<p>メモ：<textarea name="memo"></textarea></p>

パスワード
<p>パスワード：<input type="password" name="password"></p>

隠しデータ
<p><input type="hidden" name="user_id" value="32"></p>
（user_idという名前で値32がsurvey.phpに送られる）

日付
<p>日付：<input type="date" name="birthday"></p>

URL
<p>URL：<input type="url" name="url"></p>

E-mail
<p>email：<input type="email" name="email"></p>

※上記3つはHTML5仕様

ラジオボタン
<p> Colors: 　<input type="radio" name="color" value="red">Red 　<input type="radio" name="color" value="blue">Blue 　<input type="radio" name="color" value="green">Green </p>
※1つだけ

チェックボックス
<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> <label><input type="radio" name="color" value="red">Red</label> </p>

遠くのテキスト部分をクリックしても選択できる
<p> <input type="checkbox" name="color" value="blue" id="blue"><label for="blue">Blue</label> </p>

プルダウンメニュー
<select name="color" size="5" multiple> <option value="red">Red</option> <option value="blue">Blue</option> <option value="green">Green</option> </select>

size：一気に選択肢を見れる
multiple：複数選択

送信ボタン
<p><input type="submit" value="送信！"></p>

特定の範囲だけをスタイリングする

div：汎用ブロック要素（前後に改行が入る）
span：凡庸インライン要素（前後に改行が入らない）
⇒特定の範囲だけスタイリングすることができる
id：その文書に一つだけしか使えない
Class：複数に使える

スタイリングはスタイルシートで学ぶ

div
<div id="main"> <p>こんにちは！こんにちは！</p> <p>こんにちは！こんにちは！</p> </div>
※前後に改行を入れてスタイリング

span
<p>こんにちは！<span class="notice">こんにちは！</span></p> <p>こんにちは！こんにちは！</p>
※囲った部分のみスタイリング

構造関連

header
footer
nav
article
aside
section

header
<header> <h1>起業日記</h1> 　　<nav> 　　　　home 　　　　profile 　　</nav> </header>

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

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

divでの指定
<div id="header"> 　　<h1>起業日記</h> 　　　<nav> 　　　　home 　　　　profile 　　　</nav> </div>

その他

実体参照（要検索）
<p>これは<p>です。</p>

style属性
<p style="color:red;">こんにちは！</p>
※基本的にHTMLは構造を示すものでデザインするものではない、書くべきではない

script
<script src="myscript.js"></script>
※bodyタグの一番最後に書くこと

HTML入門（akiinu）