CODE

【HTML基礎】HTMLの基礎と基本的な書き方

HTMLの基礎と基本的な書き方

 

プログラミング初心者で、これからHTMLとCSSの勉強を始めようとしている。
HTMLとCSSの勉強を始めたいけど、何から勉強すればいいのか分からない。

 

こういった方向けの記事です。

 

本記事のテーマ

HTMLの概念と基本的な書き方を理解する

作業すること

  • テキストエディタにHTMLのコードを書いてみる
  • HTMLのコードをブラウザで開いてみる

 

読者さんへのメッセージ

本記事は全くプログラミング経験がない方で、これからWeb制作を始める、もしくはWeb制作を通してプログラミングの勉強を始めようとしている方に向けた記事です。

また、現役の理系大学生や文系出身でエンジニア、Webデザイナー、Webディレクターに就職予定の方にもお読みいただける内容です。

HTMLとはどのようなものなのか、どうやって書いていくのかを説明していきます。

ほとんどパソコンを触ったことがない方でもわかるように解説していきます。

では、さっそく見ていきましょう。

 

①HTMLとは

HTMLの画像

 

HTMLとは「Hyper Text Markup Language(ハイパー・テキスト・マークアップ・ランゲージ)」の略で、Webページの土台を作るための言語です。

 

Webページに表示したい文章や情報を「<」と「>」で囲まれた「タグ」と呼ばれる特殊な文字列で囲んで書いていきます。

「タグ」には様々な種類があり、それぞれに意味があります。タグで文字列を囲むことで、「ここは見出しです」「ここはリンクで、クリックするとそのページに飛びます」とコンピューターに命令をしています。

 

このように、コンピューターがそのWebページの構造を理解できるようにすることがHTMLの役割です。

と言ってもなんだかよく分からないですよね?笑

実際に少し触ってみると分かってくると思うので、ちょっとだけ一緒にコードを書いてみましょう!

 

②HTMLを書いてみよう

テキストエディタに書かれたHTML

 

ここからは2つのツールを使います。まだ準備ができてない方は、「HTMLとCSSの勉強に必要なツールを揃えよう【10分で完了】」をどうぞ。

 

準備するもの

  • テキストエディタ (この記事ではAtomを使います)
  • ブラウザ (この記事ではGoogle Chromeを使います)

 

サンプルコードをブラウザで表示してみよう

さっそくテキストエディタを開いてコードを書いていきましょう。

 

Atomのオープン

テキストエディタを開きます。Atomの場合、このページにコードを書いていきます。

 

サンプルコード1

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページのタイトル</title>
</head>
<body>
<h1>見出し1</h1>
<p>ここに文章を表示</p>
</body>
</html>

次にこちらのサンプルコードをテキストエディタに書いてみましょう。

 

サンプルコード1の記述

実際にテキストエディタに書くときは、このようにインデント(字下げ)して書くと、後から自分が書いたコードが見やすくなります。

 

サンプルコード1の保存

HTMLを書いたら、ファイルを保存します。上部メニューの[File]→[Save]をクリックします。

ショートカットキーを使う場合はWindowsならCtrl+Sキー、Macならcommand+Sキーを押しましょう。

基本的なショートカットキーは使えると便利なので、この際に覚えておくといいでしょう。

 

サンプルコード1の保存先とファイル名

ファイル名は「test.html」としましょう。

末尾に.htmlをつけると書いたコードがHTMLファイルとして保存されます。保存先はわかりやすくデスクトップにしておきましょう。

 

サンプルコード1のブラウザ表示

デスクトップに作成した「test.html」のファイルをダブルクリックするか、「test.html」のファイルをブラウザの上にドラッグ&ドロップすると、Webブラウザが立ち上がり、上のように表示されます。

 

ブラウザではHTMLのコードは変換され「ウェブページ」としての状態で表示されます。

 

ブラウザには<body>~</body>で囲まれた部分の「見出し1」と「ここに文章を表示」が表示されます。またブラウザの見出し部分に、<title>~</title>で囲まれた部分の「ページのタイトル」が表示されます。

 

コードを書き換えてみよう

先ほどの「test.html」を少し書き換えて、ブラウザに反映させてみましょう。

 

サンプルコード1の修正

「test.html」の<title>と</title>、<h1>と</h1>、<p>と</p>に囲まれた文を好きなように変えてみましょう。

 

サンプルコード1の修正後

文を書き換えたらWindowsならCtrl+Sキー、Macならcommand+Sキーで上書き保存します。

 

サンプルコード1のブラウザを更新

上書き保存ができたら、ブラウザのページを再読み込みします。

WindowsならF5キー、Macならcommand+Rキーで再読み込みのショートカットキーです。

 

サンプルコード1の修正をブラウザ表示

再読み込みすると「test.html」で行った文字の変更が反映されました。

このように「HTMLを書き、ブラウザで確認・・・」という作業を繰り返してWebページを作っていきます。

 

③HTMLの基本文法とタグ

HTMLのタグの写真

さっきはサンプルコードを使ってHTMLファイルを作成しましたが、今度はそのHTMLファイルをどのようなルールで書き進めていくのかを覚えていきましょう。

 

HTMLのタグ

サンプルコードでは「<○○>」や「</○○>」という呪文のような物が使われていました。

この「○○」はタグと呼ばれる物で、HTMLでは文や画像をこのタグで挟んで記述していきます。

 

タグにはたくさんの種類があり「どのタグで挟むか」によって挟まれた部分の役割が変わってきます。

 

「<>」で囲まれた最初に書かれる方を「開始タグ」、それに「/」が加えられ「</>」で囲まれた、後に書かれる方を「終了タグ」と言います。

 

そして開始タグから終了タグまでの1つのかたまりを要素と言います。

HTMLタグの説明

 

タグの中にあるタグ

HTMLでは開始タグと終了タグの間に別のタグが入ってることが多いです。

 

先ほどのサンプルコードだと<html>タグの中に<head>タグと<body>タグが、さらにその中の<head>タグには<title>タグが入っています。

また、<body>タグの中には<h1>タグと<p>タグが入っています。

 

このような構造は入れ子呼びます。入れ子にする場合は、必ず手前にあるタグから順に終了タグを書きます。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>プログラミング学習</title>
</head>
<body>
<h1>HTMLについて</h1>
<p>これからHTMLの学習を始めましょう!</p>
</body>
</html>

 

タグに情報を書き加える

タグによっては、開始タグに中にそのタグのについての追加情報を書くこともあります。

 

この情報の種類のことを属性と言い、タグ名の後に半角スペースを空けて書いていきます。

また、その情報の内容のことをと言い、「"(ダブルクォーテーション)」で囲んで書きます。

 

例えば、<a>タグはリンクを作るためのタグですが、リンク先のURLは開始タグの中にhref属性を使って記述します。

HTMLタグに情報を加える

 

href属性を使ってリンクを指定してみよう

試しにこのHARUHIblogのトップページへのリンクを書いてみましょう。

<a href="https://haruhinet.com/">HARUHIblogへ!</a>

こちらのコードを「test.html」の</p>のすぐ後に書きたしてみましょう。

 

サンプルコードにリンクを書き加えてみる

上書き保存して、ブラウザを更新すると、、、

 

リンクをブラウザに表示

リンクが貼られましたね!試しにクリックしてリンク先に飛んでみましょう。

このサイトのトップページに飛びます。

 

④HTMLファイルの基本構造

HTMLファイルの構造

 

次に、さきほどブラウザで表示させたコードを順番に見ていきましょう。

 

<!DOCTYPE html>

<!DOCTYPE html>はDoctype(ドクタイプ)宣言と言い、そのページがどのバージョンのHTMLで、どの仕様に合わせて作られているかを書いています。

本記事は最新で現在主流の「HTML5」というバージョンで解説していき、一般的に指定がなければHTMLはHTML5のことを指します。

決まり文句のようにとらえて、HTMLファイルの1番はじめには宣言を書くようにしましょう。

 

<html>~</html>

Doctype宣言のすぐ後に記述します。

これはHTMLの文章だということを表しており、「lang」はWebページの言語を指定できる部分で、「ja」はJapaneseの略です。

つまり日本語の文章であることを示しています。

これも決まり文句のようなものでHTMLファイルを作成するときには必ず書く必要があります。

 

<head>~</head>

この部分はページのタイトルや説明文、使用する外部ファイルのリンクなど、ページの情報を記述しています。ブラウザには表示されません。

 

<meta charset="UTF-8">

これは文字コードを「UTF=8」にするという意味です。

これが正しく表記されていないと文字化けして、うまく文字が表示されない場合もあるので、必ず正しく表記しましょう。

 

<title>~</title>

ページのタイトルを記述します。

この名前がブラウザのタブや、ユーザーがWebサイトをブックマークしたり、検索したときのページタイトルとして表示されます。

 

<body>~</body>

HTML文書の本体部分です。

ここにコンテンツを入力することで、実際にブラウザ上で表示されます。

つまりWebサイトのページになる部分です。

「Webページの内容は<body>内に書かれる」と頭に入れておきましょう。なお、<body>タグは基本的に1ページに1回しか使うことができません。

 

理解できてなくても大丈夫!

ここまでの内容で、「いまいち理解できないな、、、」「全然覚えられる気がしない、、、」って思ってる方、多いですよね。笑

とくに後半はちょっと大変だったと思います。

 

それでも全く問題ありません!

 

プログラミング学習を進めるにあたって大切なことは、「よく分からなくてもとりあえず進むこと」です。

今は初めて見る内容だったりするので、少し難しく感じるかもしれませんが、学習を進めていくうちに少しずつ理解が深まるのがプログラミング学習だと思います。

 

今回の内容もせいぜい20%理解できれば十分なので、少し休憩して次に進みましょう!

次は、HTMLのよく使うタグを紹介していきます。

 

-CODE

Copyright© HARUHIblog , 2021 All Rights Reserved Powered by AFFINGER5.