無料動画レッスンで学ぶHTMLの勉強② Webデザイン系の職業訓練開始までに自習中
Webデザイン系の職業訓練を受けることになったので、
せっかくだし訓練開始までの期間に関連するスキルについて
予習しておこうと思い始めたコーディング(HTML)の勉強。
第2回目。
使った教材は、前回と同じドットインストールという動画を使った無料レッスン↓。
今日はこれの、第13回〜19回までの動画レッスンを受けた。
学んだ内容をつらつらと書いてみる。
適当なので若干範囲が前後しているかも。
第13回 strong、br、spanを使ってみよう
<strong></strong>:文字強調
<br>:改行
<span>:範囲を指定して属性をつけれる
第14回 aタグでリンクを設定しよう
<a href="~.html">なにか</a>:~.htmlへのリンクを作成
<a href="~.html" target="_blank">なにか</a>:別ウィンドウでリンクをひらく
<a href="#yutori">ゆとりへジャンプ</a>:ページ内リンクの作成
<span id="yutori">ゆとりここから</span>:ページ内リンク先の指定
第15回 imgタグで画像を表示させよう
<img src="~.jpg">:画像を表示
width:幅
height:高さ
alt:代替文字列(画像が表示されない時に出てくる文字)
を追記可能。
例
<img src="~.jpg" width="150" height="100" alt="ゆとりにーと">
第16回 tableタグで表組みを作ろう
<table>:table自体を作る
<thead>:tableのヘッダーをつくる
<tbody>:table本体をつくる
<tr>:table row
<th>:table header 見出し
<td>:table data
例
<table>
<thead>
<tr>
<th>Size</th><th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>S</td><td>150</td>
</tr>
<tr>
<td>M</td><td>200</td>
</tr>
<tr>
<td colspan="2">free for kids</td>
</tr>
</tbody>
</table>
で↓のようになる。
Size | Price |
---|---|
S | 150 |
M | 200 |
free for kids |
第17回 formタグでフォームを作ろう
<form>:フォーム作成
action:どこに送るか
method:get / post データを送る方式
<input>:ボタンを作る
text:一行のテキストボックス
submit:送信ボタン
name:名前情報を追加
size:サイズ
maxlength:最大文字数
value:デフォルトで表示される文字
例
<form action="survey.php" method="post">
<p>
メールアドレス:<input type="text" name="email" size="50" maxlength="4" value="メールアドレス@ゆとりにーと">
</p>
<p>
メールアドレス:<input type="submit" value="送信">
</p>
</form>
で↓のようになる。
(入力されたEメールアドレスにemailというnameがつけられてsurvey.phpに送られる。)
第18回 inputタグで入力部品を作ろう
<input>:ボタンを作る
password:パスワード入力欄
hidden:ページには表示させずに送信先になんらかの値を送りたい場合
placeholder:予め欄に記入される文字列。クリックで消える。
例
<form action="survey.php" method="post">
<p>
メールアドレス:<input type="text" name="email" size="50" placeholder="メールアドレス@ゆとりにーと">
</p>
<p>
ログイン:<input type="password" name="password" size="50" placeholder="Please input your email adress">
</p>
<input type="hidden" name="user_id" value="12345">
<input type="submit" value="送 信">
</p>
</form>
で↓のようになる。
第19回 textarea、buttonタグを使ってみよう
<input>:ボタンを作る
textarea:複数行のテキストボックス
button:sumitと異なり送信せず処理のみ行うボタンが作れる
cols:幅
rows:高さ
disabled:無効化
例
<form action="survey.php" method="post">
<p>
コメント:
<textarea name="comment" cols="40" rows="5">コメント記入</textarea>
</p>
<p>
<button type="submit"><strong>送信</strong></button>
<button type="button">送信せず処理のみ行うボタンを作れる</button>
</p>
<br>
<p>
ボタンの:<button type="submit" disabled>無効化もできる</button>
</p>
<p>
テキストボックスの:<input type="text" name="email" size="50" placeholder="無効化もできる" disabled>
</p>
</form>
で↓のようになる。