双極くんの学び

双極くんが学んだことをご紹介します。

トップ > プログラミング学習 > コツコツゆっくりプログラミング学習part3（HTMLの基礎構造）頑張れ双極くん！

コツコツゆっくりプログラミング学習part3（HTMLの基礎構造）頑張れ双極くん！

プログラミング学習

f:id:kazufumitan:20220325202446j:plain

はい、どうもこんばんは。双極くんです。

今回ですけども、「プログラミング学習Part3」と言うわけで、HTMLの基礎構造について学んで行きたいと思います。

目次

 

HTMLの基礎

HTMLのファイルを作るのに必ず必要なタグが大きく４種類あります。

doctype

このHTMLファイルがどのようなHTMLで書かれているのか伝えるというタグです。

このHTML言語はこれまでに様々なバージョンアップを重ねて来ましたので、「このHTMLはどのバージョンのHTML言語で書かれているのものなのか」を示すのに必要なものです。

html

このタグの内側がHTMLの本文（内容）であることを伝えるものです。

その内側に書かなければいけない要素が以下の二つです。

このHTMLを解釈する上で必要な情報を書く場所を用意するタグです。

body

このHTMLファイルの文書の内容。つまりウェブページで見せたい内容を基本的に書くエリアがこのbodyというタグです。

では、実際に書いて行きましょう！

実際に書いてみましょう

まずは新しいファイルを用意しましょう

私はVScodeで新規ファイルを準備しました。

最初にdoctypeを書きます

これは、半角でスペースを作らずに書かなければならない、というルールがあります。

次のように書きます。

1<!doctype html>←(HTML５の場合はこのように記述します）

続けてhtmlタグを用意します

2

3<html>←htmlで書き始め

4</html>←htmlで閉じてあげます

HTML言語が日本語であることを示してあげます
  1. <!doctype html>
  2.  
  3. <html lang="ja">
  4.  
  5. </html>

このhtmlの内側にheadとbodyを用意するわけですが、これらがhtmlの内側にあることを分かりやすくするために、字下げ（インデント）をしておきましょう。

キーボードのTabを押すと、一つ字下げが出来ます。

headを用意します
  1. <!doctype html>
  2.  
  3. <html lang="ja">
  4. 　<head>
  5. 　</head>
  6. </html>
同様にbodyを用意します
  1. <!doctype html>
  2. 　
  3. <html lang="ja">
  4. 　<head>
  5. 　</head>
  6. 　<body>
  7. 　</body>
  8. </html>

このようにして、最低限必要な4つの要素を用意することが出来ました。

ファイルを保存します

保存するのに、今回はデスクトップに新しいフォルダを用意して、htmlと名前を付けました。

そして、ファイル名はindex.htmlとします。

多くのウェブサーバーがこのファイルindex.htmlを探す、という指示を持っていることが多いです。

ですので、最初に作るファイルはindex.htmlが多い、というルールを覚えておきましょう。

 

今回もこのルールに従ってファイル名はindex.htmlとして保存しておきましょう。

ただ、私たちが表示させたい内容はここにはまだ書かれていません。

この続きはまた次の回で学んで行きましょう。

まとめ

今回学んだのは最低限必要な4つの要素でした。

次回のHTMLの学習移行でも以下の記述が最低限必要になってくると覚えておきましょう。

  1. <!doctype html>
  2. 　
  3. <html lang="ja">
  4. 　<head>
  5. 　</head>
  6. 　<body>
  7. 　</body>
  8. </html>
学び

最初は1の楽しいを手に入れるために10のしんどいをする。

すると次第にその比重は変わっていく。

しんどいを続けた人に与えられる特権と言っても大袈裟ではない

1のしんどいが10の楽しいを生み出す。

ヒカル