HTMLとは?これを読めば初心者でも必ずHTMLが書ける!

web開発

2016/06/07

web開発

WEBプログラミングを学習するにあたって、ほとんどの人がまず最初に学習するのがHTMLです。

しかし、プログラミング初心者の人は「HTMLとは?」「HTMLって何なの?」と感じているのではないでしょうか?

この記事では、そんなプログラミング初心者の人でもHTMLが理解できるよう、難しい専門用語を使わずに、わかりやすい画像や具体例を使って解説していきます。

最後には、自分でHTMLを記述してブラウザに表示させるというHTML体験もご用意しました。

これを読み終えた頃には、HTMLとは?という疑問は解消され、簡単なHTMLを記述できるようになっているでしょう。ぜひ最後までお読みください!

HTMLとは?(初心者向け)

この章では、「HTMLとは?」について専門用語を使わずに画像と共に解説していきます。

ほとんどのWEBページはHTMLとCSSという言語でその見た目が作られています。

※CSSについては「CSSとは?これを読めば初心者でも必ずCSSが書ける!」をお読みください。

今あなたがご覧になっているudemyのページやYahoo!JapanなどのページもHTMLとCSSという言語によってその見た目が作られています。

HTMLとは1

基本的には、WEBページにある文字がHTMLであると考えて問題はありません。

下の画像で考えると、四角で囲った部分はHTMLで作られています。(厳密に言うとこれだけではないですが、今回はHTMLについて理解しやすくするために一部のみ紹介します。)

HTMLとは何かの解説画像

では、この文字はどうやって書かれているのでしょうか?HTMLの書かれ方を理解するためには「タグ」という概念の理解が必要です。

HTMLのタグとは?

タグとは何なのでしょうか?
一言でいうと、タグとは、「文字(テキスト)に意味を与えてあげる印のようなもの」と言えます。

下の例のように、文字をタグで囲ってあげることにより、ただの文字がh1(見出し)やp(段落)といった意味を持つようになります。

※最後のタグ(終了タグという)には「/」が入ることに注意してください。閉じ忘れなどがあると、表示が崩れたりする原因にもなります。

【例1】

<h1>HTMLを学習しよう!</h1>

※「HTMLを学習しよう!」という文字にh1(見出し)という意味が加わった。

h1のhは「heading(見出し)」のhです。

【例2】

<p>タグについて学習しよう!</p>

※「タグについて学習しよう!」という文字にp(段落)という意味が加わりました。

pは「paragraph」のpです。

上記のように、タグによって文字にさまざまな意味を持たせることができます。

見出しに使いたい文字がある時は、その文字を<h1></h1>で囲ってあげます。
段落に使いたい文字がある時は、その文字を<p></p>で囲ってあげます。

<h1></h1>や<p></p>以外にも、HTMLには多くのタグがあります。次にタグの中でよく使われる種類を幾つかご紹介します。

HTMLのタグの具体例

h1やp以外に、どんなタグがあるのでしょうか?今回は、よく使うタグをいくつか紹介します。

  • 箇条書きにする【<li>タグ】

文字を箇条書きにしたい時は<li>タグを使います。

但し、<li>タグを使う時には、<ul>タグで囲まなければいけません。

【例】

<ul>

<li>今日やること</li>

<li>明日やること</li>

</ul>

【結果】

・今日やること

・明日やること

 

  • 文字を太く(強調)する【<strong>タグ】

<strong>タグは文字を太くして、強調したい時に使います。

【例】

<strong>Hello HTML!!</strong>

【結果】

Hello HTML!!

他にもHTMLには多くのタグがあります。これからHTMLを学習していくと様々なタグに出会うことになるでしょう。

HTMLを体験しよう!

ここではみなさんにHTMLを体験して頂きます。だれでも簡単に体験できるので、ぜひ以下の手順に沿ってHTMLを体験してみてください♪

1.Windowsに標準搭載されているメモ帳を開きます。(macの場合は標準搭載されているテキストエディットをご使用ください。)

HTMLとは4

2.そして、メモ帳(テキストエディット)に今日学習したことを書いてみましょう!(※文字は自分の好きなことを記述して大丈夫です。)

HTMLとは5

3.左上にある「ファイル」をクリック⇒「名前を付けて保存」をクリックしましょう。

(macの場合は「ファイル」⇒「保存」です。)

HTMLとは6

4.すると、以下の画面が出てくるので、

①「デスクトップ」をダブルクリック

②ファイル名を「sample.html」にする(拡張子が「.html」であればファイル名は何でもかまいません。)

③ファイルの種類を「すべてのファイル」にする

(macの場合はフォーマット項目で「Webページ(.html)」を選択してください。)

④「保存」をクリック

HTMLとは7

5.すると、保存先であるデスクトップに下のアイコンが表示されます。(※Google Chromeではなく、Internet Exploreで表示される場合もあります。)

HTMLとは8

6.これをダブルクリックすると…

HTMLとは9

自分のブラウザに先ほど記述したHTMLが表示されました。

いかがでしたか?以上から、HTMLがどんなものなのかがお分かりいただけたかと思います。

udemyでは、HTML初心者向けにわかりやすい講座を開設しています。3時間でHTMLをマスターできる内容となっているので、ぜひ受講してHTMLをマスターしてください。

  

HTMLをはじめWeb開発のすべてが学べます。

初めての人の「HTML5」入門 - Udemy

初めての人の「HTML5」入門 - Udemy

「HTML5」はWebページを作るHTMLの5回目の大きな改定版。このコースではHTML5の成り立ちからマークアップとCSS3、そしてJavaSriptの基礎を実際にコードを書きながら一緒に学びます!このコースはそれらの導入編に該当します。

動画で学習する

  • シェア
  • ツイート
  • Poket
  • はてなブックマーク
  • フォロー
  • シェア
  • ツイート
  • Poket
  • はてなブックマーク
  • フォロー

関連記事