HTMLとは
Webページの裏側を見る
Hyper Text Link（ハイパーテキストリンク）
HTMLの種類
HTMLファイルの作り方
リンクを表示する
画像を表示する
段落分けを行う
HTMLで覚えておきたいタグ一覧

HTMLとは 、Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の略で、Webページを作るための最も基本的なマークアップ言語のひとつです。
　普段、私たちがブラウザで観ているWebページのほとんどが、HTMLで作られています。
　
Webページの裏側を見る
　Webページが「言語」で書かれているといっても、直感的にはわかりずらいですよね。
　画面上で右クリックをし、「ページのソースを表示」を押してみましょう。
　

すると、以下のように英語がずらっと並んだ画面が表示されるかと思います。

並んでいる英語の文字は、ソースコードと呼びWebページ内の表示や動作を命令することができます。
　このように、Webページの正体はHTMLタグを使って構成されている文書であり、これがブラウザで読み込まれることで、Webページが表示されるのです。
　ソースコードは、あらゆるWebページで見ることができるので、試しにいくつか見てみるといいでしょう。
　
Hyper Text Link（ハイパーテキストリンク）
　ハイパーテキストとは、その名の通り、高機能なテキストのことです。
　どう高機能かというと、文書中の指定箇所にリンクを貼ることができ、ほかのページに移動することができます。この機能を、Hyper Text Link（ハイパーテキストリンク）と言います。
　

また、マークアップとは「しるしをつける」という意味ですが、これは、裏側のソ−スがHTMLタグを使って表記されていることに基づいています。
　HTMLタグによってタイトルや小見出し、リスト表示といった具合に、文書のなかで特定の部分に意味を持たせ、全体を構造化していきます。

< >で囲まれたものがタグです。
　
HTMLの種類
　HTMLには「HTML」「XHTML」「HTML5」など、いくつか種類があり、使えるタグに違いがあります。使いたいタグに応じて、HTMLのバージョンを確認しておいたほうがいいでしょう。
　リンクは他のページの場所。マークアップはタイトルや見出し、ページにある画像などを指定してあげる方法のことなんだ。合わせてソースコードと言います。
　
HTMLファイルの作り方
　最後に、HTMLファイルの作り方ですが、「.html」という拡張子をつけることで、HTMLファイルであることをコンピュータが認識してくれます。（例 index.html）
　以下では、HTMLのタグの中で、リンク・画像・段落分けなどよく使用するタグについて基本的な書き方を解説します。ブラウザでの実際の表示も確認できるので、初めてHTMLに触れる方は、ぜひご覧ください。
　
リンクを表示する
　リンクを作成した場所へページが移動しました。
　リンクを作成するには
　<a> タグを使用します。
<a>タグの書き方
　<a href=" リンク先へのパス "> リンクを貼るテキストや画像
　</a>hrefの属性値(“”内)にリンク先の絶対パス (https://〜で始まるもの) あるいは相対パス (現在の位置を基準としたもの) を入力します。
　最後に必ず終了タグ
　</a>を入力します。
　
使用例
　実際に
　<a>タグを使用してテキストにリンクを貼ります。
　 https://coolors.co/
　今回は「Coolors」というサイトへのリンクを繋げてみます。
　<!DOCTYPE html>
　<html>
　<head>
　<meta charset="utf-8" />
　<link rel="stylesheet" href="sample.css" type="text/css">
　</head>
　<body>
　<a href="https://coolors.co/">リンク
　</a>
　</body>
　</html>a href〜の部分の””内にパスを入力します。ここではCoolorsへのリンク(絶対パス)を入力しています。
　画面ではこのように表示されます。テキストの部分をクリックします。

リンクを作成した場所へページが移動しました。

画像を表示する
　画像を表示させるには
　<img> タグを使用します。
<img>タグの書き方
　<img src=" 画像ファイルへのパス ">srcの属性値(“”内)に画像の絶対パスあるいは相対パスを入力します。
　
　<img>タグには終了タグは存在しません。
　
使用例
　実際に画面に画像を表示させます。
　今回は”img_1.png”という名前の画像ファイルをHTMLと同じディレクトリ内にアップロードし、それを表示させます。
　<!DOCTYPE html>
　<html>
　<head>
　<meta charset="utf-8" />
　<link rel="stylesheet" href="sample.css" type="text/css">
　</head>
　<body>
　<img src="img_1.png">
　</body>
　</html>
　同じディレクトリ内に画像ファイルがある場合は、ファイル名だけを入力すると相対パスとして繋げることができます。
　画面ではこのようになります。
　指定した画像ファイルが表示されました。

段落分けを行う
　段落を分けるには
　 タグを使用します。
タグの書き方
　 段落の内容
　ひとつの段落としたい部分を
　
　で囲みます。
　
使用例
　実際にテキストを2つに段落分けしてみます。
　<!DOCTYPE html>
　<html>
　<head>
　<meta charset="utf-8" />
　<link rel="stylesheet" href="sample.css" type="text/css">
　</head>
　<body>
　 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
　
　 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
　
　</body>
　</html>それぞれの文章を
　
　内に入れます。
　画面ではこのようになります。
　前の段落と次の段落との間に、一行分の間が表示されます。

HTMLで覚えておきたいタグ一覧
　その他サイトの基本的な構成で使用することのあるいくつかのタグを紹介します。

タグ	役割	説明
<h1>- 　<h6>	見出しを作成	見出しの部分に使用します。このタグの中の部分は強調され、大きく表示されます。　<h1>が一番大きく表示され、　<h2>→ 　<h6>となるほどに小さな見出しになります。
<ol>・　<li>	順番のあるリストを作成	順番のあるリストを作成するタグで、サイトのメニューなどを形成するのに役立ちます。　<ol>がリスト全体を、　<li>が各項目を作成します。
<ul>・　<li>	順番のないリストを作成	順番のないリストを作成するタグで、サイトのメニューなどを形成するのに役立ちます。　<ul>がリスト全体を、　<li>が各項目を作成します。
<form>	入力フォームを作成	サイト内に入力フォームを作成するタグです。　入力された情報の処理はPHPなど他の場所で行います。