完全初心者のプログラミング学習記録(3)HTMLの基礎的なタグ

四十肩の意味がわからなかった頃に戻りたい。

どうも、こんにちは。

プログラミング完全初心者の40代中年オッサンが、まさかこの年齢からプログラミングを学習してみようということで、そのプログラミング学習の復習を兼ねてブログに残しています。

今の僕には調べながらでも読み書きが難しいプログラミングですが、調べながらであれば読み書きが出来るようになることがまずはゴールと考えています。

オッサンのチャレンジが、これからプログラミングを学習しようとされている、どなたかの励みになれば嬉しいです。

プログラミング学習目的
  • WordPressのデザインを独自にカスタマイズできるようになりたい
  • プログラミング学習をブログのメインテーマにしていきたい
  • リストラされた時のために何かスキルを身につけておきたい・・・
学習環境
  • MacBook Pro (15-inch, 2016)  Mac OS  10.15
  • ブラウザ:Google Chrome
  • エディタ:Visual Studio Code
この記事を読んで得られる効果

HTMLで記述をするにあたり、最もベーシックなタグの構成(書き方)を理解できます

HTMLを記述する際、最も基礎的なタグ4つ

HTML文章を構成するための最も基礎的なタグ4つを順番に復習していきます。

DOCTYPE 宣言 <!DOCTYPE html>

前回復習した、「完全初心者のプログラミング学習記録(2)Webページを作ってみる」では、<h1>タグ、<p>タグ、<img>タグだけで、練習ページを作成しました。

ただ本来のHTMLページ作成においては、『今からHTMLページを書いていきます』ってことを、予め宣言しておく必要があります。

そこで使うタグが、<!DOCTYPE html>です。

画像の1行目部分です。

HTML文章を書くときは、基本的に開始タグと終了タグで挟まれますが、この宣言に関しては、閉じタグ</>がありません。

DOCTYPEについて詳しい説明はこちらのサイトを参照させていただきました。

参考 <!DOCTYPE>Chrono Drive

すべてのコードは<html>タグ内に書く

HTML文章では、文章の開始から終了までの範囲を htmlタグで囲んであげる必要があります。

そして、開始タグの中には言語の属性を加えてあげます。

言語 = 日本語 という形で以下のように記載します。 

lang=”ja”

<html>タグ

<html lang=”ja”>

htmlタグの内側にheadタグやbodyタグなどを書いていきます

</html>

情報を記載する<head>タグ

HTML文章は、headと呼ばれる部分と、bodyと呼ばれる部分に分かれます。

headにはそのHTMLを構成するための情報を記載します。

コンピュータに理解してもらうための情報なので、サイト訪問者(閲覧者)には見てもらう必要はなく、ブラウザでは表示されない部分になります。(※ただし、<tilte>タグだけはブラウザ上で表示されます)

<headl>タグ

<head>

フォントやCSSファイルの読み込み設定や

<meta>タグ、<link>タグ、<title>タグ などを記載します

ただし、<title>タグに関してはブラウザ上に表示されます

</head>

本文を記載する<body>タグ

<body>タグで囲われた部分は、ブログで言えば、まさにサイト訪問者に読んでいただく部分になります。

<body>の内側で、<h>タグや、<p>タグ、<img>タグなど、文章を構成していくタグを使って本文を書いていきます。

<bodyl>タグ

<body>

<h1>こんにちは</h1>

<p>これからプログラミングを勉強します</p>

<img src=”img/programmer.png” width=”150″ height=”150″>

</body>

コードを書くときは段落をつけて見やすくする

タグの中でも最も外側にあるのは、htmlタグです。

htmlより内側のタグは、内包される階層ごとに段落をずらして見やすい表記にしていきます。

htmlの中にある、<head>と<body>は同じ階層なので、同じ高さになります。

<head>や<body>の内側に書かれるコードは、内包されるため一段内側にずれます。

このように書かなければ、コードが正しく反映しないわけではないですが、見やすくするためにこのようにする事が一般的ということです。

<html lang=”ja”>
  <head>
 
  </head>
  <body>
     <h1>こんにちは</h1>

まとめ

<!DOCTYPE html>
<html>
<head>
<body>

今回はこの4つの基本タグを学習しました。

(正確には、DOCTYPEは宣言であってタグではないのですが、ご了承ください)

ページ冒頭に載せた画像のコードをもう一度、記載をしたいと思います。

こちらのコードで書いたものが、ブラウザでは下の画像のように表示されます。

(※imgsrcで指定している場所は僕のPCのローカルフォルダです。)

HTML

<!DOCTYPE html>
<html lang="ja">
  <head>
 
  </head>
  <body>
     <h1>こんにちは</h1>
     <p>これからプログラミングを勉強します</p>
     <imgsrc="img/programmer.png"width="150"height="150">
  </body>
</html>

今回の学習で参考にさせていただいたサイト

今回お世話になったサイト

初心者向けHTML入門:書き方の基本とタグの使い方

参考 HTML辞典Chrono Drive 参考 はじめてのHTMLドットインストール