HTML入門

なるたけ正確なHTMLを書けるようお話するつもりですけど、詳しくはないです。

HTMLは、HyperText Markup Languageのことです。Markup、マーク付けは、要素によって付けます。書き方は、p要素なら、<p>〜</p>というふうに書きます。最初の<>で囲んだのを開始タグといい、スラッシュをつけた</>を終了タグといいます。要素をつかいたいところを、開始タグ〜終了タグでマークアップします。

よく使われる要素

よく使う、水平線(hr)、リスト(ul,ol,li)、アドレス(address)、強調(em,strong)について、おまけに画像(img),divについてお話します。

hr

水平線をひきます。<hr>というふうに使います。終了タグはありません。

リスト

番号付きリスト(ol)と、順不動リスト(ul)があります。開始タグ(<ol>,<ul>)と終了タグ(</ol>,</ul>)の間に、項目を<li></li>で示します。

ol,ulの中は、liしか入れられません。liの中はインラインを入れられます。

<ol>
 <li>コインを投げる</li>
 <li>先攻・後攻を決める</li>
 <li>先攻は、…</li>
</ol>
  1. コインを投げる
  2. 先攻・後攻を決める
  3. 先攻は、…

address

ふつう、この中に、メールアドレスを記入します。ブロックレベル要素です。この中にはインライン要素しか入れられません。

<a href="mailto:〜 とすると、ブラウザによっては、メーラーが起動します。

<address>
連絡は、<a href="mailto:rei@pop-cute.net">れい</a>まで
</address>
連絡は、れいまで

強調

一部の字句を強調したいときは、<em>〜</em>に強調したい字句を入れます。もっと強く強調したいときは、<strong>〜</strong>を使います。

HTMLでは、意味を<em>マークアップ</em>して、見た目は<strong>CSS</strong>で設定します。

HTMLでは、意味をマークアップして、見た目はCSSで設定します。

画像

<img src="画像のある場所" alt="画像の説明" width="横の長さ" height="縦の長さ">というふうに使います。altは必須なので、忘れずに付けましょう。意味のない飾りなら、alt=""でいいです。インラインなので、p,h1〜h6,div等内で使います。

<img src="image/cloud_011.jpg" alt="雲" width="80" height="80"> 雲

div

ブロック要素です。この中にブロック要素をいくつも入れてグループ化できます。div自体はなんの影響も与えません。スタイルを設定して使うことが多いです。

同じような要素に、spanというインライン要素があります。

あとがき

よく使いそうなものをかんたんに紹介しました。あとは、おいおい覚えていけばいいと思います。順番としては、滅多に使わない要素を覚えるよりも、よく使うCSSを覚えたほうがいいと思います。


次へ進みます。
前へ戻ります。
目次へ戻ります。


WebSite:ウェブページ作成はうす
WebMaster:人泣礼(Hitonaki Rei)

テレワークならECナビ Yahoo 楽天 LINEがデータ消費ゼロで月額500円〜!
無料ホームページ 無料のクレジットカード 海外格安航空券 海外旅行保険が無料! 海外ホテル