【エンジニア初級】初心者のためのHTML入門-ポイント3つ

今回は、エンジニア初級でHTMLを触った事がないという人向けに、HTMLについて説明します。

これからHTMLを勉強したい方はこの記事を見て勉強してみてください。

今回は入門編なので、以下の3つだけ覚えてください

HTMLのポイント3つ

HTMLって何?
HTMLはどうやって開発する?
HTMLはどうやって動かす?

1.HTMLって何?

まずは、HTMLとはなんぞや?という概要から学びましょう。

HTMLは、「HyperText Markup Language」の略です。

初めての人は、英語の連続で見ただけで嫌になるかもしれませんが、一番大事なのは以下部分です。

「Markup Language」

これはつまり、開発言語の一つで、マークアップ言語であると言っています。

マークアップ言語は、HTMLやXMLのような、タグで囲って意味を表現する開発言語を意味します。

タグで囲うって、どういうこと?と思うかもしれませんが、それは次に説明します。

今は、この言語を使えば、Webサイトの開発の初歩が学べると思って頂ければ結構です。

2.HTMLはどうやって開発する?

HTMLの概要を知ったら、次は開発方法を勉強しましょう。

HTMLの開発はとても簡単です。

テキストエディタさえあれば、開発できます。

デフォルトのテキストエディタアプリであれば、最初からパソコンに入っています。

Macであれば、アプリケーション > テキストエディット
Windowsであれば、メモ帳

まずは、皆さんのパソコンに入っているテキストエディタを開きましょう

今回は、本当に初級者向けなので動かし方は以下の3つだけ覚えてください。

ルール1: <html>というタグで囲う
ルール2: <html>の中に<body>というタグで囲う
ルール3: <body>の中に自分の好きな情報を書く!!

みなさんがやりたいのは、ルール3の自分の好きな情報を書くという点かと思います。

ルール1とルール2は、自分の好きなWebサイトを作るための最低限の準備だと思ってください。

それでは皆さんも、自分のテキストエディタで試してみましょう。

ルール1: <html>というタグで囲う

<html>
</html>

タグを囲う際に、終わりのタグは</html>のように先頭に「/」スラッシュを入れましょう。

ルール2: <html>の中に<body>というタグで囲う

<html>
  <body>
  </body>
</html>

わかりやすくするために、<html>タグの下段に半角スペースを2つ入れてますが、入れなくても動作はします。

ルール3: <body>の中に自分の好きな情報を書く!!

<html>
  <body>
    初めてのHTML
  </body>
</html>

本当は、bodyの中に直接文字を書くのではなく、<p>タグ等で囲う必要があるのですが、今回は入門なので、まずはこれだけで試してみましょう。

3.HTMLはどうやって動かす?

HTMLを書いたら、テキストを保存しましょう。

保存する際は、拡張子を「.html」にして保存します。名前は何でもいいですが例えば「sample.html」で保存してみましょう。

保存に成功したら、保存した「sample.html」を開いてみましょう。

右クリックでブラウザから開きましょう。

Macの場合は、このアプリケーションで開くを選び、好きなブラウザを選びましょう。
Windowsの場合は、このプログラムで開くを選び、好きなブラウザを選びましょう。

入力ミスをしていなければ、ブラウザで、こんな画面が表示されると思います。

ここまで成功した方はおめでとうございます。

無事、HTMLの最初の一歩を踏み出すことができました。

これから、より応用的な使い方の記事も紹介していくので、勉強したい方は是非、続きの記事もご覧ください。

===============

以上、初心者のためのHTML入門-ポイント3つについて解説してみました。

この情報が皆さんの人生のお役に立てれば幸いです。

エンジニアとして日本のITリテラシーを高めていきたいと共感して頂いた人は、是非このブログの拡散とyoutubeの方も見ていただけると嬉しいです。

記事を最後まで見ていただきありがとうございました。

執筆者: hiroエンジニア

hiroエンジニアのNote

【エンジニア初級】初心者のためのHTML入門-ポイント3つ

1.HTMLって何?

2.HTMLはどうやって開発する?

3.HTMLはどうやって動かす?