ゆとりニートの日記

理系院卒⇛就職⇛1年で退社。ノースキルでノージョブなゆとり世代ニートの日記。

無料動画レッスンで学ぶHTMLの勉強② Webデザイン系の職業訓練開始までに自習中

Webデザイン系の職業訓練を受けることになったので、

せっかくだし訓練開始までの期間に関連するスキルについて

予習しておこうと思い始めたコーディング(HTML)の勉強。

第2回目。

 

 

使った教材は、前回と同じドットインストールという動画を使った無料レッスン↓。

dotinstall.com

今日はこれの、第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>

で↓のようになる。   

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

で↓のようになる。

 

コメント:
ボタンの:テキストボックスの: 

 

最後に

テーブルとかフォームができると、たいしたことしてないはずなのに急にそれっぽく見えるなぁ。 

htmlの勉強してて思うのは、「こういうことが出来る」というのが分かるのは良いことだけど、肝心の「こういうサイトが作りたい」というのが空虚なので、そこをまずなんとかしないとなぁ。