HTMLとは？超初心者向けに簡単にわかりやすく説明(漫画付)

プログラミング超初心者
『HTML？なんじゃそれ？どう読めばいいの？』

こんにちは、AWAKOJIです。

今日も薬剤師をしながらプログラミングの勉強をしています。

プログラミングを勉強し始めたときに、最初の方に出会う用語がHTMLです。

読み方はそのまま、『エイチティーエムエル』と読みます。

この記事では超初心者向けにHTMLとは何か？について簡単にわかりやすく説明します。

理解しやすいように、下手ですが漫画を最初につけました。この記事は、5分もかからず読むことができます。

この記事の内容
・漫画～HTMLとは？～
・HTMLとは何の略なの？
・HTMLとは文字の位置や大きさなどを指示できる
・あとがき

この記事の内容

漫画〜HTMLとは？〜
HTMLとは何の略なの？
HTMLとは文字の位置や大きさなどを指示できる
HTMLは似顔絵である
HTMLを実際に使ってみよう！
あとがき
【無料体験・全額返金】圧倒的に効率的なプログラミングスクール

漫画〜HTMLとは？〜

以上、超初心者向けにHTMLとは何かについて漫画で説明してみました。
ここからは、もう少しだけ詳しくHTMLについて説明しました。
よかったらご覧ください。

HTMLとは何の略なの？

プログラミングとはまったく別の世界で生きている僕でも、この単語は見たことがありました。

でも読み方はいまいちわかっていなかったです。

前述の通り、HTMLの読み方は『エイチティーエムエル』です

無知の僕は、少し前までエッチトムルって読んでいました・・・

このHTMLはなんの略かというと、

HyperText Markup Languageです。

HyperTextというのは、wordを使うときにたまに見かける単語です。文章などを他の場所と結び付けるための手段、つまり簡単にいえばリンクのことです。(Text：『文章』、Hyper：『超える』という意味)

Markupというのは、印をつけるという意味。

Languageが言語ですね。

これらを踏まえると、HTMLとは、リンクを印つけるための言語という意味になります。

HTMLとは文字の位置や大きさなどを指示できる

HTMLを使えば、リンクを張ることが可能です。

リンクを飛ばしたい文字の前後に、<a>という印(タグといいます)を付ければリンクを作れます。

しかし、HTMLが利用されるのはそれだけではありません。

<h1>というタグを付ければ、大きな文字を表示してタイトルを作ることができます。
hはheading、つまり見出しという意味です。

<p>というタグを付けれれば、段落を作ることができます。
pはparagragh、つまり段落という意味です。

<b>というタグを付ければ、文字を太字にすることができます。
bはbold、つまり太字という意味です。

このようにHTMLは、web上に表示される文字の位置や大きさなどを指示することができる言葉であることがわかります。

印の種類は約100種類ほどありますが主に使用されるものは決まっています。

HTMLは似顔絵である

HTMLは例えるなら似顔絵かなと僕は思っています。

顔の輪郭がwebページ、

そこに描く目や鼻や口が文章。

それらの大きさや場所を決めてくれるのがHTMLです。

さらにwebページのデザインを担当するのが、CSSという言語です。

CSSは化粧にあたると僕は思っています。

CSSについてはまた別記事で書こうと思います。

HTMLを実際に使ってみよう！

細かいルールは抜きにして実際に、HTMLを使ってみましょう！

windowsでしたらメモ帳を、macでしたらテキストエディットを開いてみましょう。

ここにタイトル、文章、文章内に太字とリンクを作ってみます。

<h1>プログラミングは楽しい</h1>
<p>プログラミングができれば自分の可能性が広がる。</p>
<p>AWAKOJIの<b>プログラミング記事</b>を参考にしましょう。</p>
<p>記事は<a href=”https://positivelifeshow.com/category/programming/”>こちら</a>プログラミング万歳！</p>

上記の文字列をメモ帳にコピー＆ペーストしてください。

これを拡張子htmlにして保存します。