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

HTMLとは?超初心者向けに簡単にわかりやすく説明(漫画付)プログラミング超初心者 『HTML?なんじゃそれ?どう読めばいいの?』プログラミング超初心者
『HTML?なんじゃそれ?どう読めばいいの?』

こんにちは、AWAKOJIです。

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

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

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

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

理解しやすいように、下手ですが漫画を最初につけました。この記事は、5分もかからず読むことができます。
この記事の内容
・漫画~HTMLとは?~
・HTMLとは何の略なの?
・HTMLとは文字の位置や大きさなどを指示できる
・あとがき

スポンサーリンク

漫画〜HTMLとは?〜

HTMLとはHyperText Markup Languageの略
実際はリンクだけでなくwebサイト上に表示される文章の位置や大きさなどを支持するために使用される言語のこと
似顔絵に例えると顔のりんかくがwebサイト、顔のパーツが文章。パーツの位置や大きさを決めるのがHTML
ちなみにCSSと呼ばれる言語が見栄えを良くするための化粧に例えられる

以上、超初心者向けに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にして保存します。

あとはこのファイルを、ブラウザのURL入力欄にドラッグすればできあがりです。

あとがき

以上、HTMLとはなにかについて簡単に説明してみました。

プログラミングを勉強するのであればHTMLは必ず通らなければいけない道です。

でも他の言語と比べ難易度は低く理解しやすいです。

HTMLをエッチトムルと言っていた素人の僕が、30代から勉強してもスムーズに進めることができた言語です。

興味があれば、ぜひあなたもプログラミングの世界に来てください!

【無料体験・全額返金】圧倒的に効率的なプログラミングスクール

独学でプログラミングを勉強するのは大変じゃないですか?

  • ググるのが面倒
  • エラーの対応に1日消費
  • 重要なコードがわからない

お金はかからないものの、かなり効率が悪いです。

『Time is Money』
時間を節約し、効率的に勉強したいならプログラミングスクールを圧倒的におすすめします。
スクールに通って短期間で集中的に成長しちゃいましょう。

代表的なスクールは以下の2つ。

  • TechAcademy
    web系、アプリ系いずれもOK
    完全オンラインでプログラミングを学習したい方
  • テックキャンプ
    web系、アプリ系いずれもOK
    教室またはオンラインで学習したい方

この2つには以下のような特典もあります。

TechAcademy

  • 1週間の無料体験
  • 1コース申し込むと、もう1コースプレゼント

テックアカデミー

  • 1週間以内に申告あれば全額返金
  • 転職できなかったら全額返金

かなりお得です。

確かにどのスクールも本格的にやれば20~30万くらいかかります。
でも、スキルを身に付けて案件を受注してしまえばすぐに回収できる金額です。

目安の報酬をまとめておくと、

  • ランサーズ:1件10万くらい
  • 中小企業:1件30万くらい
  • 大手企業:桁違い

こんな感じです。
1ヶ月で回収できる料金をケチって、独学をつづけるのはセンスが悪いです。

この無料キャンペーンや全額返金制度はいつまで続くかわかりません。
なので、とりあえず試してみるのが良いかと思います。

TechAcademy:無料で1週間体験
テックキャンプ:全額返金制度

テックキャンプに関しては無料でカウンセリングを受けることができます。
プロのカウンセラーが個別に悩み聞いてくれるので、まずは話をしてみてもいいですね。
(下のバナーから詳細を見れます。)
受講料の割引もあるのでお得です。

スポンサーリンク

おすすめ記事

フォローする