This article is a Private article. Only a writer and users who know the URL can access it.
Please change open range to public in publish setting if you want to share this article with other users.

More than 3 years have passed since last update.

基礎学習 HTML編

HTML

Last updated at 2020-08-30Posted at 2020-07-29

HTMLの基礎を学びましょう

概要そもそもHTMLとは

ホームページ(ウェブサイト)を作る技術。

正確にはホームページのそれぞれ１ページを構成してるウェブページを作る技術
ウェブページはハイパーテキストと呼ばれる技術で構成されています。
ハイパーテキストはクリックすると別のウェブページにジャンプする事ができる
ハイパーリンクを埋め込む事ができます。

さらに見出しやリスト（Wordと同じ機能）といった、文書構造も表現できます。

このハイパーテキストをマークアップという作成しやすい技術と融合し
HTML(HyperText Markup Language)が成り立っています。

マークアップとは、文書構造（テキスト）や視覚表現（装飾）などの情報を
タイトルや見出しなどの各構成要素に「タグ」と呼ばれる目印を使い
プログラムの様に表現する技法。

タグについては後ほど詳しく解説します。

詳細基本のHTMLの構成を理解しよう

基本のHTMLの構成

HTMLタグとHTMLを表現できる最低構成

タグとは

<h1>初めてHTMLでホームページ作ったよ</h1>

データをタグで挟むと様々な表現ができる
また、タグは終わりと始まりがある。
必ずしもタグを使わなきゃいけないという訳ではない

料理に置き換えると。。。
データは素材でタグは調理方法

じゃがいもをあげるとフライドポテト

このようになんらからのデータをタグだけでなく様々な手法で加工する事がプログラムの世界では物凄く多い
「エクセルの関数に似てるな」と感じた人は鋭いです。

全く同じ概念でプログラムはではこの様に「input → 処理 → output」という組み合わせで処理がされる事が殆どです。
メソッドや関数といった概念が同等になります。

なので、テキスト文書をメモ帳やワードで開くのも概念としては同じ

htmlタグより分かり易い見出しの例
h1タグを使って、挟んだ「初めてHTMLでホームページ作ったよ」という文字列に見出し効果を加工して適用した例
その直前の同じ文字列には何も効果が作用されていないのがわかる

初めてHTMLでホームページ作ったよ
<h1>初めてHTMLでホームページ作ったよ</h1>

HTMLを表現できる最低構成

ファイル名:index.html

なぜ、「index」?

トップページはプログラムの世界ではindexというファイル名、文字列を使う事が多いからです

拡張子がhtmlのファイルとhtmlタグが記述されていれば、最低限HTMLと認識はされます

<!DOCTYPE html>
<html>
</html>

解説

<!-- 文書がHTML5で作成されたものであることを宣言するためのDOCTYPE宣言 -->
<!DOCTYPE html>

<!-- ここからhtmlを書いていくスタートのタグ -->
<html>

<!-- ここまでhtmlを書いていくゴールのタグ -->
</html>

これだとわかりにくいですが順次この様に詳しく解説しますので、ご安心ください。

HTMLの構成.png

HTMLを表現できる最低構成にheadを追加する

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>HTMLチャレンジ</title>
  </head>
</html>

事前に「文字コード」をUTF8で保存しないと文字化けする
文字コードとは
大まかにいえば，文字をコンピュータで処理したり通信したりするために，文字の種類に番号を割り振ったものです。
OSによっても標準の文字コードが違ったりする

UTF8とは
パソコンで扱いやすく、世界中の多くのソフトウェアは、UTF-8に対応しています。そのため、「パソコンの世界共通語」と言っても過言ではありません。

解説

<!DOCTYPE html>
<html>

  <!-- ここから閲覧者に向けて表示されないコンテンツ
    (CSS、文字コード等)をまとめるための入れ物を書いていく
    headのスタートのタグ -->
  <head>

    <!-- 文字コードを UTF-8 に設定しています。
        UTF-8 には人類が使う言語の殆どの文字が含まれています。
        タグがペアになっていないものもあります -->
    <meta charset="utf-8">

    <!-- ページのタイトルを指定しています。 -->
    <title>HTMLチャレンジ</title>

  <!-- ここがheadのゴールのタグ -->
  </head>
</html>

HTMLを表現できる最低構成にheadを追加し更にbodyを追加して文字表示をしてみる

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>HTMLチャレンジ</title>
  </head>
  <body>
    初めてHTMLでホームページ作ったよ
  </body>
</html>

解説

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>HTMLチャレンジ</title>
  </head>

  <!-- ここから閲覧者に対して見せたいものすべてを含みます。
    文字、画像、ビデオ、ゲーム、再生できる音楽など、
    どんなものでものスタートのタグ -->
  <body>

    <!-- 文字列表示 -->
    初めてHTMLでホームページ作ったよ

    <!-- ここがbodyのゴールのタグ -->
  </body>
</html>

HTMLの基本状態からテキストのマークアップ、画像の表示、文書構造やハイパーリンクを追加していく
テキストのマークアップ
マークアップとは見出し、段落、リストを表現する仕組みです

見出し

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>HTMLチャレンジ</title>
  </head>
  <body>
    初めてHTMLでホームページ作ったよ

    <h1>初めてHTMLでホームページ作ったよ</h1>
    <h2>段落分けで文書構造を表現してくよ</h2>
    <h3>リストを作るよ</h3>
    <h4>画像も表示するよ</h4>
    <h5>HTMLらしく、ハイパーリンクも設定するよ</h5>
  </body>
</html>

解説


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>HTMLチャレンジ</title>
  </head>
  <body>

    <!-- 文字列表示 -->
    初めてHTMLでホームページ作ったよ

    <!-- ワードの見出し1みたいなもの -->
    <h1>初めてHTMLでホームページ作ったよ</h1>

    <!-- ワードの見出し2みたいなもの -->
    <h2>段落分けで文書構造を表現してくよ</h2>

    <!-- ワードの見出し3みたいなもの -->
    <h3>リストを作るよ</h3>

    <!-- ワードの見出し4みたいなもの -->
    <h4>画像も表示するよ</h4>

    <!-- ワードの見出し5みたいなもの -->
    <h5>HTMLらしく、ハイパーリンクも設定するよ</h5>
  </body>
</html>

段落

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>HTMLチャレンジ</title>
  </head>

  <body>
    <p>
        このページを作成する事で色々なHTMLの基礎機能をしる事ができるよ。HTMLは「HyperText Markup Language」の略で、今見てるページのようにホームページを作成できます。ホームページは文書構造を持ちます。その為リスト表示などができます。また、別のページにジャンプするように移動するハイパーリンク機能があります。
    </p>
    <p>
        Todoアプリで使う技術は何か想像しながら学ぶとベスト
    </p>
  </body>
</html>

解説

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>HTMLチャレンジ</title>
  </head>

  <body>
    <!-- ここから段落を分ける -->
    <p>
        このページを作成する事で色々なHTMLの基礎機能をしる事ができるよ。HTMLは「HyperText Markup Language」の略で、今見てるページのようにホームページを作成できます。ホームページは文書構造を持ちます。その為リスト表示などができます。また、別のページにジャンプするように移動するハイパーリンク機能があります。
    <!-- ここまで段落を分ける -->
    </p>

    <!-- ここから段落を分ける -->
    <p>
        Todoアプリで使う技術は何か想像しながら学ぶとベスト
    <!-- ここまで段落を分ける -->
    </p>
  </body>
</html>

多くのウェブのコンテンツはリストで出来ており、 HTML にはリストを表すための特別な要素が用意されています。
リストは最低 2 つの要素を組み合わせて生成します。主要なリスト形式として番号付きリストと番号なしリストがあります。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>HTMLチャレンジ</title>
  </head>

  <body>
    <ul>
        <li>いぬ</li>
        <li>ねこ</li>
        <li>さる</li>
    </ul>
  </body>
</html>

解説

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>HTMLチャレンジ</title>
  </head>

  <body>
    <!-- ここからリストのスタートのタグ。ulはunordered list（順序がないリスト） -->
    <ul>
        <!-- このようにliタグでアイテムを書いてく、liはlist item -->
        <li>いぬ</li>
        <li>ねこ</li>
        <li>さる</li>
    </ul>
  </body>
</html>

画像

書いたところに画像を埋め込みます。画像ファイルのパスを値に持つ src (source) 属性を指定する事によってその画像を表示できます。

<img src="画像ファイルの場所" alt="代替文字列" width="300" height="200">

imgはimageで画像という意味です
srcはsourceで源という意味です。ここではソースファイルつまり画像ファイルの場所を指定しています
altはalternaiteで代わりという意味です。ここではソースファイルが消えてしまった等のなんらかのトラブルで画像を表示出来ない場合に変わりの文字列を表示します
widthは幅という意味です。ここでは画像を表示する際の幅を指定しています
ウィズとワイズ
heightは高さという意味です。ここでは画像を表示する際の高さを指定しています

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>HTMLチャレンジ</title>
  </head>

  <body>
    <p>
        <img src="https://cdn.pixabay.com/photo/2019/04/17/21/02/dog-4135347_960_720.jpg" alt="いぬ" width="300" height="200">
        <img src="https://cdn.pixabay.com/photo/2019/04/02/09/37/cat-4097325_960_720.jpg" alt="ニャンコ" width="300" height="200">
        <img src="https://cdn.pixabay.com/photo/2016/05/16/02/46/snow-monkeys-1394883_960_720.jpg" alt="さる" width="300" height="200">
    </p>
  </body>
</html>

解説

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>HTMLチャレンジ</title>
  </head>

  <body>
    <p>
        <!-- ここで画像を表示する。src以降に画像のアドレスを指定する。alt以降に表示されない場合の代替文字を準備しておく。widthで横幅、heightで高さをピクセル数またはパーセントで指定する -->
        <img src="https://cdn.pixabay.com/photo/2019/04/17/21/02/dog-4135347_960_720.jpg" alt="いぬ" width="300" height="200">
        <img src="https://cdn.pixabay.com/photo/2019/04/02/09/37/cat-4097325_960_720.jpg" alt="ニャンコ" width="300" height="200">
        <img src="https://cdn.pixabay.com/photo/2016/05/16/02/46/snow-monkeys-1394883_960_720.jpg" alt="さる" width="300" height="200">
    </p>
  </body>
</html>

ハイパーリンク

リンクはとても重要です ―― これがウェブをひとつのウェブにします。リンクを追加するには、シンプルな要素 `` を使えばよいです。 a は "anchor" を省略したものです。
anchorは「錨、頼みの綱、力となるもの」という意味があります。

href以降にアドレスというホームページの住所を指定してください

会津わろ法則３回コース

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>HTMLチャレンジ</title>
  </head>

  <body>
    <a href="https://sites.google.com/d/1OYmJ3-RmiskUwphCd-8a0w1KHyXpaqeE/p/12z4WyW3e0GxYDDczzMg3DF7qEs-tTKGf/edit">会津わろ法則３回コース</a>
  </body>
</html>

解説

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>HTMLチャレンジ</title>
  </head>

  <body>
    <!-- ここでリンクを設定する。href以降にアドレスを指定し、タグの間に文字列を設定する -->
    <a href="https://sites.google.com/d/1OYmJ3-RmiskUwphCd-8a0w1KHyXpaqeE/p/12z4WyW3e0GxYDDczzMg3DF7qEs-tTKGf/edit">会津わろ法則３回コース</a>
  </body>
</html>
全部入り
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>HTMLチャレンジ</title>
  </head>

  <body>

    初めてHTMLでホームページ作ったよ

    <h1>初めてHTMLでホームページ作ったよ</h1>
    <h2>段落分けで文書構造を表現してくよ</h2>
    <h3>リストを作るよ</h3>
    <h4>画像も表示するよ</h4>
    <h5>HTMLらしく、ハイパーリンクも設定するよ</h5>

    <p>
        このページを作成する事で色々なHTMLの基礎機能をしる事ができるよ。HTMLは「HyperText Markup Language」の略で、今見てるページのようにホームページを作成できます。ホームページは文書構造を持ちます。その為リスト表示などができます。また、別のページにジャンプするように移動するハイパーリンク機能があります。
    </p>

    <p>
        Todoアプリで使う技術は何か想像しながら学ぶとベスト
    </p>

    <ul>
        <li>いぬ</li>
        <li>ねこ</li>
        <li>さる</li>
    </ul>

    <p>
        <img src="https://cdn.pixabay.com/photo/2019/04/17/21/02/dog-4135347_960_720.jpg" alt="いぬ" width="300" height="200">
        <img src="https://cdn.pixabay.com/photo/2019/04/02/09/37/cat-4097325_960_720.jpg" alt="ニャンコ" width="300" height="200">
        <img src="https://cdn.pixabay.com/photo/2016/05/16/02/46/snow-monkeys-1394883_960_720.jpg" alt="さる" width="300" height="200">
    </p>

    <a href="https://sites.google.com/d/1OYmJ3-RmiskUwphCd-8a0w1KHyXpaqeE/p/12z4WyW3e0GxYDDczzMg3DF7qEs-tTKGf/edit">会津わろ法則３回コース</a>
  </body>
</html>

<!-- 文書がHTML5で作成されたものであることを宣言するためのDOCTYPE宣言 -->
<!DOCTYPE html>

<!-- ここからhtmlを書いていくスタートのタグ -->
<html>

  <!-- ここから閲覧者に向けて表示されないコンテンツ
    (CSS、文字コード等)をまとめるための入れ物を書いていく
    headのスタートのタグ -->
  <head>

    <!-- 文字コードを UTF-8 に設定しています。
        UTF-8 には人類が使う言語の殆どの文字が含まれています。
        タグがペアになっていないものもあります -->
    <meta charset="utf-8">

    <!-- ページのタイトルを指定しています。 -->
    <title>HTMLチャレンジ</title>

  <!-- ここがheadのゴールのタグ -->
  </head>

  <!-- ここから閲覧者に対して見せたいものすべてを含みます。
    文字、画像、ビデオ、ゲーム、再生できる音楽など、
    どんなものでものスタートのタグ -->
  <body>

    <!-- 文字列表示 -->
    初めてHTMLでホームページ作ったよ

    <!-- ワードの見出し1みたいなもの -->
    <h1>初めてHTMLでホームページ作ったよ</h1>

    <!-- ワードの見出し2みたいなもの -->
    <h2>段落分けで文書構造を表現してくよ</h2>

    <!-- ワードの見出し3みたいなもの -->
    <h3>リストを作るよ</h3>

    <!-- ワードの見出し4みたいなもの -->
    <h4>画像も表示するよ</h4>

    <!-- ワードの見出し5みたいなもの -->
    <h5>HTMLらしく、ハイパーリンクも設定するよ</h5>

    <!-- ここから段落を分ける -->
    <p>
        このページを作成する事で色々なHTMLの基礎機能をしる事ができるよ。HTMLは「HyperText Markup Language」の略で、今見てるページのようにホームページを作成できます。ホームページは文書構造を持ちます。その為リスト表示などができます。また、別のページにジャンプするように移動するハイパーリンク機能があります。
    <!-- ここまで段落を分ける -->
    </p>

    <!-- ここから段落を分ける -->
    <p>
        Todoアプリで使う技術は何か想像しながら学ぶとベスト
    <!-- ここまで段落を分ける -->
    </p>

    <!-- ここからリストのスタートのタグ。ulはunordered list（順序がないリスト） -->
    <ul>
        <!-- このようにliタグでアイテムを書いてく、liはlist item -->
        <li>いぬ</li>
        <li>ねこ</li>
        <li>さる</li>
    </ul>

    <p>
        <!-- ここで画像を表示する。src以降に画像のアドレスを指定する。alt以降に表示されない場合の代替文字を準備しておく。widthで横幅、heightで高さをピクセル数またはパーセントで指定する -->
        <img src="https://cdn.pixabay.com/photo/2019/04/17/21/02/dog-4135347_960_720.jpg" alt="いぬ" width="300" height="200">
        <img src="https://cdn.pixabay.com/photo/2019/04/02/09/37/cat-4097325_960_720.jpg" alt="ニャンコ" width="300" height="200">
        <img src="https://cdn.pixabay.com/photo/2016/05/16/02/46/snow-monkeys-1394883_960_720.jpg" alt="さる" width="300" height="200">
    </p>

    <!-- ここでリンクを設定する。href以降にアドレスを指定し、タグの間に文字列を設定する -->
    <a href="https://sites.google.com/d/1OYmJ3-RmiskUwphCd-8a0w1KHyXpaqeE/p/12z4WyW3e0GxYDDczzMg3DF7qEs-tTKGf/edit">会津わろ法則３回コース</a>

    <!-- ここがbodyのゴールのタグ -->
  </body>
<!-- ここまでhtmlを書いていくゴールのタグ -->
</html>

さらに、ホームページでよく使うタグとウェブアプリではあまり使わないタグといった傾向は若干ながらある。
ホームページの方が使うタグが多く、ウェブアプリの場合はデータベースと連動させる為、リスト（もしくはテーブル）表示が多い。
その為、一気に全部覚えようとするのではなく、Todoアプリを作る場合はどんな機能が必要かという観点で拾ってく覚え方が効率的である

完成コードのダウンロード

first_steps_in_programming

GitHub Pagesを使ったホームページの公開方法について

リンク

参考サイト

MDN HTML の基本

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up