html 基本パーツ

今回はhtmlを初めて触ったので基本パーツとかを簡単にまとめて行こうかなと思います。 参考資料はudemyのThe Web Developer Bootcampコースです。

簡単パーツ

h タグ

<h1>h1 tag</h1>
<h2>h2 tag</h2>
<h3>h3 tag</h3>
<h4>h4 tag</h4>
<h5>h5 tag</h5>
<h6>h6 tag</h6>

p タグ

<p>p tag</p>

a タグ

<a href="URL">リンク先へ</a>

img タグ

<img src="画像のURLまたはパス">

ol タグ

<ol>
  <li>HTTP Requests</li>
  <li>IP Address</li>
  <li>Servers</li>
</ol>

ul タグ

<ul>
  <li>list 1</li>
  <li>list 2</li>
  <li>list 3</li>
</ul>

table タグ

<table border="1">
  <thead>
    <th>Name</th>
    <th>Age</th>
    <th>Breed</th>
  </thead>
  <tbody>
    <tr>
      <td>Rusty</td>
      <td>2</td>
      <td>Mutt</td>
    </tr>
    <tr>
      <td>Wyatt</td>
      <td>13</td>
      <td>Golden</td>
    </tr>
  </tbody>
</table>

form タグ編

formタグはログイン画面などで入力した文字などをリクエスト先に送信する際に使用する。 タグにはたくさんの属性があり、属性はkeyとvalueで指定することができる。入力したテキストなどをリクエストで送信する際に属性を指定することでリクエストの内容を変更することができる。

textarea タグ

<form>
  <textarea name="paragraph" rows="8" cols="80"></textarea>
  <button type="submit">go!</button>
</form>

リクエスト内容:paragraph=abc rowsとcolsでテキストエリアの大きさを調整できる

select タグ

<form>
  <select name="color">
    <option value="red">RED</option>
    <option value="yellow">YELLOW</option>
    <option value="BLUE">blue</option>
  </select>
  <button type="submit">go!</button>
</form>

リクエスト内容:color=red

radio button タグ

<form>
  <label for="dogs">Dogs:</label>
  <input name="petChoice"id="dogs" type="radio"
   value="DOGS">

  <label for="cats">Cats:</label>
  <input name="petChoice"id="cats" type="radio"
   value="CATS">

  <button type="submit">go!</button>
</form>

リクエスト内容:petChoice=CATS

input タグ

<form>
  <label for="username">Email:</label>
  <input id="username"type="email" name="username" placeholder="email"
  required>

  <label for="password">password:</label>
  <input id="password"type="password" name="password" placeholder="password"
  required>

  <button type="submit">go!</button>
</form>

リクエスト内容:username=test%40gmal.com&password=pass required: 入力しないとフォームでリクエストできない type="email": emailの書式じゃないと認識されない placeholder="email": テキストフィールドに薄く文字が出る password:: 今はあまり関係ないがあとあと使用する。id="password"とfor="password"で結びつけている。