【初心者向け】 HTMLの第一歩!書き方の基本を、画像を使って分かりやすく解説します

top-photo - programming -

Designed by pikisuperstar / Freepik

top-photo 2

HTML、、聞いたことはあるけど…何をするためのものなのか、よくわかりません。。。

この様な質問を持った方に向けて、初心者にも分かりやすい様に解説をしていきます。

この記事を読むことによって、HTMLへの理解が一気に深まり、3分後にはあなたもHTMLを扱うことができる様になります。

プログラミングの学習を始めていきたいと思っているけど、HTMLってそもそもなに?

そんな質問を解決するための記事になっています。
HTMLの基礎部分から、実際の使い方まで、難しい言葉を排除して分かりやすく説明します。

HTMLの基本

Webサイトは、色々な役割を持った言語がそれぞれの指示の元に働いて成り立っています。

html_photo
Designed by Freepik

その中の「 HTML 」がサイトの土台、つまり骨組みの役割を与えられているのです。

Yahooもgoogleも、普段皆さんが目にしているサイトも、HTMLの骨組みによって成り立っています。

サイトの裏側をのぞいてみよう

html_view
では、次は実際に使われている様子を見にいってみましょう!

top-photo 2

え?今まで何気なくインターネット使ってたけど、そんなのどこから見れるの?

サイトの裏側、つまり骨組み部分をのぞくためには、「GoogleChrome」が必要になります。

まだダウンロードしてないよって方はこちらで手順を説明します♪

GoogleChromeをダウンロードしてみよう

GoogleChromeのページへ。
 ↪︎こちらからとべます GoogleChrome

google-photo1

開いたらアイコンをダブルクリックしてGoogleChromeを起動させます。

このGoogleのアイコンは、今後扱いやすい場所に置いておくと便利ですね!
私はこのアイコンをデスクトップに置いてあります。

my-prof

google-photo2

GoogleChromeを開けたら、画面上で右クリックします。
すると画像の様になるので、「ページのソースを表示」をクリックします。

google-photo3

するとこの様な画面になるかと思います。

google-photo4

どうでしょう?

こちらが「ソースコード」というものです。HTMLをはじめとする様々な言語が働いている場所です。

top-photo 2

これを全部覚えるの、、、?すごく難しそう。。。

いえいえ、そんな身構える必要はないですよ♪
これからあなたが覚えていきたい言語の使い方や書き方は全てインターネット上に答えが載っています!

my-prof
POINT
全てを覚える必要はない。言語ごとの役割を覚える方が大切!

HTMLの書き方

html-kakikata

では実際に書いてみましょう!

そのためにはまず、テキストエディタと呼ばれるソフトをダウンロードします。

テキストエディタとは、プログラミング用にできたメモ帳といった感じのものです。

一言でテキストエディタといっても有料のもの、無料のものとたくさんありますが、これは無料のもので問題ありません。


HTMLで使うタグ

html-tag 2

こちらの画像にある、< > で囲まれている、htmltitleなどがタグと言われるものです。HTMLの書き方の基本ルールと一緒に説明していきます。

html

このように、タグで囲ってパソコンに指示を送っています。
そして、 < > 内に記載したタグの内容によって役割が変わります。

よく使うタグの種類としては

  • <p> = 文字に使用する。/li>
  • <img> = 画像に使用する。
  • <h1> = 見出しに使用する。

この他にもたくさんタグはありますが、よく使うものは割と決まっています。

その辺りは詳しくは学習サイトなどを利用してしっかりと学んでいきましょう!


タグの中にタグをいれていく

上記のように、タグ(赤)の中に、タグ(橙)や、タグ(黄)が収納されているかと思います。
この構造を『 入れ子構造 』と言います。


ここまでのHTMLの基本構造

HTMLは基本的な書き方が決まっています。
上記の画像に記載されている所までの構造を解説していきます。

  • <!DOCTYPE html> = 「このファイルはHTML文書です」という宣言。
  • <html> = 全てのコードを囲む。
  • <head> = Webサイトの情報を書き込む。
  • <body> = 画面に実際に表示させる情報を書き込む。

この書き方のルールは守っておかないと、パソコンが正しい情報を読み込むことができず、せっかく作ったWebサイトがうまく表示されなくなります。ここはしっかり抑えてくださいね♪

my-prof
POINT
  1. HTMLを書くなら無料テキストエディタがおすすめ!
  2. タグの種類によって役割がある。
  3. HTMLはタグの入れ子構造で成り立っている。

まとめ

いかがだったでしょうか?
ちょっと長くなってしまいましたが、 これからプログラミングを始めるのならHTMLの知識は必ず必要になってきますので、繰り返し読んで理解を深めていってくれたら嬉しいなと思います。

その後に学習サイトを利用して行けば、より理解度が深まっていくでしょう。

今回はHTMLの解説を画像を使いつつ解説いたしました。

コメント