10日で出来るWeb製作 2日目 HTML タグ編

こんばんは!KOSEN’s阿部です!
本日はドットインストールHTML編より#5~#10まで進んでいきます!
タグをマスターして様々な表現を行っていきましょう!
Here we GO!!!

1.HTML body内に入るタグ!
昨日記載した<body>〜</body>の中に様々なタグ(付加情報)を入れることで様々な機能を付加することができます。
そのタグに関して、書き方と使い方を下記に記載していきます!
1-1.見出し
<h1>大見出し</h1>

h1が大見出しで文字が大きく、数値が大きくなると文字も小さくなっていきます。

記載例

  1. <!– 今回はコメント、見出しと本文、改行について学びます –>
  2. <h1>大見出し</h1>
  3. <p>こんにちは!</p>
  4. <p>もっと<br>こんにちは!</p>

1-2.画像の挿入
<img src=”">

srcには画像のファイル名、width:横幅の設定、height:縦幅の設定、altには画像の説明などを入れることで詳細に設定することが可能です。

※数値や画像ファイルを入力する際には” ”でくくるようにしましょう!

記載例

  1. <h1>大見出し</h1>
  2. <p>こんにちは!</p>
  3. <img src=”omlet.jpeg” width=”180″ height=”240″ alt=”オムレツの画像です。”>

1-3.リンクの貼り方
<a href=”http://google.com”>りんくはこちら</a>

<a href>〜</a>は他ページへのリンクを飛ばす時に使います。hrefにリンク先のURLを入力することで、リンク先を設定することができます。

記載例

  1. <h1>大見出し</h1>
  2. <p>サンプル</p>
  3. <p>Google検索は<a href=”http://google.com” target=”_blank”>こちら</a></p>
  4. <a href=”http://google.com” target=”_blank”><img src=”sample.jpeg” ></a>
  5. <p>別のページは<a href=”other.html”>こちら</a>!</p>

1-4.リストの作り方
<ul>〜</ul>: Unordered List (順序のないリスト) → 箇条書きリスト
(Ex. ・サイトウさん ・アベさん)

<pl>〜</ol>: Ordered List (順序のあるリスト) → 番号付きリスト
(Ex. 1.サイトウさん 2.アベさん)

<li>〜</li>: List Item (リストの項目)

1-5.表の作り方
<table>〜</table>:表を作成する時に用います

<th>〜</th>:タグは表のセルの中でも特に強調したい場合などの見出し用のセルに使用します。見出しにしたい<td>タグをこの<th>に置換します。<th>タグで囲まれた文字はセル内の中央に表示され、多くのブラウザでは太字になります。

記載例

  1. <table>
  2. <tr><th>部署名</th><th>2010年</th><th>2011年</th><th>2012年</th></tr>
  3. <tr><th>営業1課</th><td>200</td><td>210</td><td>230</td></tr>
  4. <tr><th>営業2課</th><td>400</td><td>240</td><td>380</td></tr>
  5. </table>

他にも動画タグ<video>〜</video>であったり様々なタグがあります!
全部覚えられないよ〜という方にもご安心!
こちなのHTMLタグ辞典
などを参考にしてみて下さいね!

次は3日目!頑張っていきましょう!!

参考:ドットインストール、HTMLタグ辞典


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>