三日坊主の「プログラミング」奮闘記 #7

第7回目:要素紹介

HTMLの要素には全部で108種類あります。しかし、プロのエンジニアでも全て覚えているわけではないようです。とは言っても、利用頻度が高いものが行く浸かるので、そこを勉強していこうと思います。

<!DOCTYPE html>
<html lang="ja">
   <head>
       <meta charset="UTF-8">
       <title>HTML5</title>
   </head>
   <body>
       文章の内容
   </body>
</html>

上のコードは第6回目で勉強したHTMLの基本構造です。
これから勉強するのは、上のコードの中の<body> </body>の中に入る要素です。

1. h 見出し要素

<h1>
    一番大きい見出し
</h1>

<h6>
    一番小さい見出し
</h6>

<h1> </h1> これは見出しを表します。hの隣に書く番号が小さいほどサイズが大きな見出しになります。基本的に主要な見出しであるほど小さな数字で書きます。

2. p 段落要素

<p>p要素は段落を表します。</p>
<p>文章の構造を明確にするためによく使います。</p>

paragraphの略でpと記述します。<p> </p>の間に書いた文章が1つの段落に収まります。最も多用する要素な気がします。

3. img 画像要素

<img src="image.png">

imgはimageの略で画像を表します。imgとsrcをセットで必ず使うので暗記です。srcの後に画像のアドレスを指定します。アドレスとは、どこにあるのか、場所のことです。基本的にはHTMLファイルのあるフォルダーに入れます。ちなみにimg要素には、終了タグが存在しません。p要素だと、<p>の後に</p>を入れて終了させますが、imgにはそれがありません。

4. a リンク要素

<a = href="www.google.co.jp"target="_blank"</a>

a要素は、ハイパーリンクを表します。文字や画像にリンクを設定して、クリックしたら別のWebページに飛べるようにしたりする際に使います。ブログとかでよくある、「続きはこちら」みたいなのに使えます。
href の後に、設定したいWebページのアドレスを書き、targetの後に新しいウィンドウで開くか、そのままそのページで開くか設定できます。新しいウィンドウで開く場合は、_blankと記述、その場で開く場合は、_selfと記述します。

5. ul li 箇条書き要素

<ul>
    <li>1番目</li>
    <li>2番目</li>
    <li>3番目</li>
</ul>

ul li 要素は、箇条書きを表します。これは必ずセットで出現するのでセットで暗記しましょう。主な使い方は上のように書きます。まず、<ul> </ul>で囲ってあげて、その中に好きな数だけ<li> </li>を入れることができます。

6. br 改行要素

<p>
    氏名<br>郵便番号<br>住所<br>電話番号<br>
</p>

br要素は、改行をする際に書くものです。パソコンは我々人間と違って、見た目みたいな視覚情報で判断しているわけではないので、必ずいちいちなんでも記述する必要があります。つまり、ワードで書くみたいにエンターを教えて開業するだけでは機能しないので、<br>を使います。
上のコードのように記述すると、それぞれの単語で改行が行われます。

以上です。時間があったら、それぞれCloud9で書いてみて実際にWebページを表示させるのが良いでしょう。

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

3

レイアレン

三日坊主の「プログラミング」奮闘記

コメントを投稿するには、 ログイン または 会員登録 をする必要があります。