【プログラミング初心者向け】HTMLについて解説していきます(*'ω'*)

f:id:CONPURO:20200909042538j:plain

 

みなさんこんにちは(*'▽')
今回はHTMLについてできるだけ詳しく解説していきます(*´ω`)
この記事を読むことで、HTMLについてある程度理解をすることができます。
この記事を書いた人はプログラミングを4ヶ月程度勉強しました。
まだまだ未熟ですが頑張ります(*'ω'*)

目次

 
HTMLの基礎

f:id:CONPURO:20200909042524j:plain

 
HTMLってそもそも何?


ウィキペディアには次のように書かれています。

 

HyperText Markup Languageハイパーテキスト マークアップ ランゲージ)は、ハイパーテキストを記述するためのマークアップ言語の1つ。略してHTML(エイチティーエムエル)と呼ばれることが多い。

 

   引用元:HyperText Markup Language - Wikipedia


ハイパーテキストというのは例えば、文書の中に他の文書につながるリンクが張ってあったり、画像をクリックすると動画が再生されるというようなものです。
普通のテキストの進化版だと思ってもらえれば十分だと思います(*´ω`)


マークアップ言語というのはタグ(<p>や<title>、このようなものがタグ)で囲んで表現をするというものだと思ってもらえればいいです。


つまりHTMLというのはハイパーテキストという普通のテキストの進化版のようなものを作るプログラミングマークアップ言語で、その表現方法として、タグというもので囲むという方法が用いられている。というような感じです。!(^^)!

 
HTMLを学ぶメリット

みなさんは、HTMLがどのようなものなのかは、なんとなく理解できたと思います。
次にHTMLを学ぶメリットについて解説します(*´ω`)


HTMLを学ぶメリットは

 

  • このような文章を書く
  • 見出しを付ける
  • このように箇条書きをする
  • 画像を張り付ける

 

などができるようになります。


他にもプログラミングってこういうものなんだと理解をすることができます。
とにかく学んでおいて損はないと思います( ..)φメモメモ

 
HTMLを書くために必要な環境

さあ、HTMLを書くぞを言う気持ちになっていると思いますが、HTMLを書くために必要な環境、つまり準備が必要になってきます。しかし、とても簡単ですぐにできます。


HTMLを書くために必要な準備は以下の通りです(*´ω`)

 

  1. パソコンを起動する。
  2. パソコンに入っているメモ帳アプリを開く。

 

簡単ですよね。
デスクトップ上にメモ帳アプリがない場合は、デスクトップの左下にある、ここに入力して検索というところがあると思います。そこにメモ帳と入力すれば
「メモ帳アプリ」と出てくるので、それをクリックすれば開くことができます。

 

HTMLタグで重要だと思うタグ8つ

HTMLはタグで囲んで表現すると書きました。
ここではHTMLで重要だと思うタグを8つほど紹介します(*´ω`)


<!DOCTYPE>
ドクタイプと読みます。このタグは、このHTMLがどのようなHTMLで書かれているかどのバージョンで書かれているのかを伝えます。HTMLにもいろいろなバージョンがあり、現在はHTML5というバージョンが良く使われています。HTMLを書くときに必ず必要なので、忘れずに書きましょう。

<html></html>
このタグは、このタグで囲まれているところがHTMLの内容だということを伝えます。つまりこのタグで囲まれている中にHTMLを書いていくということになります。このタグもHTMLを書くときに必ず必要です。

<head></head>
ヘッドタグといいます。このタグで囲まれているところは文書を解釈するときに必要なことを伝えます。例えば、このHTMLはどのような言語で書かれているのかのようなことを伝えます。これもHTMLを書くときに必ず必要です。

<body></body>
ボディタグといいます。このタグで囲まれているところは文書をどのように見せたいのか伝えます。例えば、どこが見出しなのか、画像はどこなのかなどを伝えます。これもHTMLを書くときに必ず必要です。

<meta>
メタタグといいます。このタグは文書の情報を伝えます。例えばこのタグがあることによって、文書の文字が文字化けしてしまうことを防ぎます。ちなみにこのタグは<meta>~~~</meta>の様には使わず、<meta>というように単独で書きます。

<title></title>
タイトルタグといいます。このタグは文書のタイトルを表示する時に必要です。

<p></p>
ピータグといいます。このタグは文書を書くのに必要です。

<img>
アイエムジータグといいます。このタグは、画像を張り付ける時に必要です。
このタグもメタタグと同じように単独で書きます。

 
HTMLの書き方

ここではHTMLの書き方について解説していきます(*´ω`)


例えば、「みなさん、こんにちは」この鍵カッコ内の文章をHTMLで書くと
次のようになります。

 

<p>みなさん、こんにちは</p>

 


<p>みなさん、こんにちは</p>というのは
この<p>と</p>に囲まれた「みなさん、こんにちは」の部分がひとつの段落、一つの文章であるという事を示しています。


HTMLは<>~~~</>のように囲み、そしてこの囲んでいる<>と</>がいろいろな意味を持っているのだと思ってください!(^^)!


HTMLは大体<>~~~</>という書き方をしますが、一部例外もあります。例えばさっき紹介した、「metaタグ」は情報をプログラムの情報を表しているだけなので、<meta>~~~</meta>のように囲わず、
<meta>だけを使えばいいというような感じですね(*´ω`)


保存に関して1つ注意しなければいけないところがあります。メモ帳アプリでHTMLを書いて保存するときはファイル名の最後に、「.html」(ドットエイチティーエムエル)という拡張子(かくちょうし)をつけなければいけません。例えば、「puroguramingu.html」のような感じで、ファイル名はなんでもいいのですが、後ろに拡張子を付けましょう。


.htmlの拡張子を付けないと、せっかくHTMLで書いたのに、コンピュータがこのファイルはHTMLのファイルではないと判断をしてしまうからです。なのでHTMLファイルには必ずhtml拡張子を付けましょう( ..)φメモメモ
  


コメント

プログラミングはほかの人と共同で作業をすることが多いです。なので、ほかの人が自分が作ったプログラムをみて、どこがどういう役割を持っているのかを理解してもらうことが大切です。そのためにプログラムのコード(<p>みなさんこんにちは</p>このようなものをコードという)の近くにコメントを書きましょう(*´ω`)


書き方としては次の通りです。

  

 

//「みなさん、こんにちは」を表示
<p>みなさん、こんにちは</p>

 

 

文字が薄くなっているところがコメントです。コメントの前には基本的に//(ダブルスラッシュ)を付けます。そうしないとコンピュータがプログラムだと認識してページが思ったように表示されなくなってしまいます( ..)φメモメモ

 

 

今回の記事は以上です。
ここまで読んでいただきありがとうございました(*'▽')