ドットインストール「HTMLの基礎」(2)

dotinstall

ドットインストールの「HTMLの基礎」の全22回が全部終わったので備忘録。

THE・自分だけわかりゃいいブログ。

  • html_basic_1.html

http://keito7.lolipop.jp/dotinstall/html_basic/html_basic_1.html

<!DOCTYPE html>
<html lamg="ja">
<head>
	<meta charset="UTF-8">
	<meta name="description" content="はじめてのHTMLです。">
	<meta name="keywords" content="はじめてのHTMLです。">
	<!--"description"は文書の説明、"keywords"はキーワード-->
	<title>はじめてのHTML</title>
	<link ref="stylesheet" href="mystyle.css">
	<link ref="shortcut icon" href="favicon.ico">
	<script src="myscript.js"></script>
<body>
	<!--今回は見出しと本文について学びます-->
	<h1>見出し<h1>
	<p>こんにちは！</p>
	<p>もっと！<br>こんにちは！</p>
	<p>Google検索は<a href="http://google.com/" target="_blank">こちら</a>から！</p>
	<!--targetは新しいタブから開いてくれるか否かを指定する-->	
	<img src="http://keito7.lolipop.jp/dotinstall/html_basic/keito7.JPG" width="153" height="153" alt="keito7のプロフ写真">
	<!--widthやheightは画像のプロパティの"情報"から見れるので入力しておく。altは画像の説明文-->
	<h2>香川真司の特徴！</h2>
	<ul>
	<li>はやい！</li>
	<li>うまい！</li>
	<li>髪型へん！</li>
	</ul>
	<!--ulは箇条書きリスト、olは番号付きリスト-->		
	
	<h3>リーガ得点データ</h3>
	<table>
	<tr><th>選手</th><th>2009年</th><th>2010年</th><th>2011年</th></tr>
	<tr><th>メッシ</th><td>34</td><td>31</td><td>16</td></tr>
	<tr><th>C・ロナウド</th><td>26</td><td>40</td><td>16</td></tr>
	</table>
	<!--thは見出し、tdは実データ-->
	
	<h4>お問い合わせフォーム</h4>
	<form action="contact.php" method="post" enctype="multipart/form-data">
	<p>お名前： <input type="text" name="name" size="20" maxlength="5" value="田中さん"></p>
	<!--nameはどういった名前で処理を渡すか。sizeは20文字分の幅にする、maxlengthは最大値、valueは初期値-->

	<p>メモ： <textarea name="memo" rows="5" cols="40">メモ</textarea></p>	
	<!--textareaは複数業入力のタグ。rowsは5行、colsは40文字を指定。-->

	<p>パスワード： <input type="password" name="password" size="20" maxlength="5" value="12345"></p>	
	<!--nameはどういった名前で処理を渡すか。sizeは20文字分の幅にする、maxlengthは最大値、valueは初期値。見えないようになっている。-->

	<p>ケータイ：
		 <input type="checkbox" name="mobile" value="1" checked> iPhone
		 <input type="checkbox" name="mobile" value="2" > Android
		 <input type="checkbox" name="mobile" value="3" > その他
	</p>	
	<!--valueの値がプログラムに送られる。最初からチェックした状態にしたい場合は末尾にcheckedを記載-->

	<p>性別：
		 <label><input type="radio" name="sex" value="1" checked> 男性</label>
		 <label for "female"><input type="radio" name="sex" id="female" value="2" > 女性</label>
		 <label><input type="radio" name="sex" value="3" > その他</label>
	</p>	
	<!--選択肢からどれかひとつを選ばせたい場合。最初からチェックした状態にしたい場合は末尾にcheckedを記載-->	
	<!--labelタグはラジオボタンとかチェックボックスの部品とラベルを結びつける役割。選択肢からどれかひとつを選ばせたい場合。書き方は2通りある。ボタンをクリックしなくてもラベルをクリックすればチェックを移すことができる-->

	<p>言語：
	<select name="language" size="4" multiple>
		<option value="ja">日本語</option>
		<option value="en">英語</option>
		<option value="fr">フランス語</option>
		<option value="sp">スペイン語</option>
		<option value="th" selected>タイ語</option>
		<option value="kr">韓国語</option>
	</select>
	</p>
	<!--初期値設定はselected。sizeでリストで表示させる行数を指定。multipleで複数選択可能に。-->	

	<p>写真：
		<input type="file" name="picture"></p>	
	<!--ファイルのアップロードタグ。画像を送る場合は、フォームタグにオプションをつける。enctype="multipart/form-data"-->
		<input type="hidden" name="user_id" value="555223">
	<!--ユーザに認識させないけどデータを送りたい際に使うタグ-->		

	<p><input type="submit" value="送信する！"></p>
	<!--フォームタグに記載された内容をプログラムに送信-->		
	<p><input type="button" value="汎用ボタン"></p>
	<!--フォームをsubmitではなく、javascript等で処理をさせたいときに使う-->		
	
	</form> 
</body>
</head>
</html>
  • html_basic_2.html

http://keito7.lolipop.jp/dotinstall/html_basic/html_basic_2.html

<!DOCTYPE html>
<html lamg="ja">
<head>
	<meta charset="UTF-8">
	<meta name="description" content="はじめてのHTMLです。">
	<meta name="keywords" content="はじめてのHTMLです。">
	<!--"description"は文書の説明、"keywords"はキーワード-->
	<title>はじめてのHTML</title>
	<link ref="stylesheet" href="mystyle.css">
	<link ref="shortcut icon" href="favicon.ico">
	<script src="myscript.js"></script>
</head>
<body>
	<!--
	div:汎用ブロック要素 => 前後に改行が入る
	span:汎用インライン要素 => 前後に改行が入らない
	※範囲を指定して、デザインやレイアウトを変えたいときに使う。
	
	id => ページ内に一つだけある要素
	class => ページ内に複数ある要素
	-->
	<h1>見出し</h1>
	<p>こんにちは！こんにちは！こんにちは！<span class="point">こんにちは！</span>こんにちは！</p>
	<p>こんにちは！</p>
	<p>こんにちは！こんにちは！<span class="point">こんにちは！</span>こんにちは！</p>	

	<h2>見出し</h2>
	<p style="color:red; border:1px solid #CCC;">こんにちは！こんにちは！こんにちは！</p>	
	<!--要素自体にstyle属性を指定して試してみることができる。正式にはstyleシートに記述すべき。-->
	
	<h3>見出し</h3>
	<p>pタグは&lt;p&gt;と書きます。</p>	
	<!--タグと衝突する文字は、文字参照と呼ばれ、特殊な書き方をしなければならない。-->
	
	<div id="main">
	<p>こんにちは！</p>
	<p>こんにちは！</p>
	<p>こんにちは！</p>
	<p>こんにちは！</p>
	
</body>
</html>