Lesson02 -HTML
目次
WEBの仕組み
コーディングに取り掛かる前に、基本的なWEBの仕組みについて理解しましょう！
WWW(World Wide Web)
直訳すると「世界中の蜘蛛の巣」ですが、インターネット上にある様々な情報と情報を結びつけている巨大なシステムのイメージで、1989年に発明されました。ハイパーテキスト（ページとページをリンクさせることができるテキスト）で作られた情報が繋がっています。Web、W3とも呼ばれます。
「インターネット」という言葉と混同しがちですが、WWWはインターネットの中に含まれるシステムのうちの一つです。
WWWを作っている主な要素
- ・HTML（マークアップ言語）
- ・HTTP（プロトコル）
- ・URL
HTML
Hyper Text Markup Languageの略で、コンピューターが文書の内容を理解できるよう「タグ付け」を行うことで情報に意味を持たせる（マークアップさせる）ための言語です。テキスト情報・画像情報・リンクの設置を行います。
色・大きさ、レイアウトなどの指定はCSS、マウスの操作に連動した動きなどはJavascriptという別の言語を記述することで表現することができます。
HTMLで文書（必要な情報）・CSSでそれを装飾・Javascriptで動きをつけるイメージです。
プロトコル
インターネット上で通信を行うときの手段や規則のことです。プロトコルにはいくつかの種類があり、代表的なものが以下です。
HTTP
ブラウザ⇄サーバーの間で情報のリクエスト・レスポンスを行うためのプロトコル。インターネット上でこのWebページを見たい（ブラウザ）・見せたい（サーバー）という通信のための規則のこと。
FTP
作ったデータをアップロードorダウンロードするなど、ファイルの転送をするための規則のこと。
「FTPクライアントソフト」という専用ソフトを使う
SSL
セキュリティの観点から、送っている情報を暗号化するための規則のこと。
例えば、お問合せフォームでの個人情報入力やECサイトでのクレカ情報などの入力後、情報を途中で盗み見されないように、サーバーに情報を送っている最中に暗号化しているSSLの設定がされていると、先頭に鍵マークがつき、「https://」というプロトコルになる
SMTP
メール送信のために使用（端末でメールを管理する方法、メールをダウンロードして一台の端末で確認/ PCのみでメールを管理するなど）
IMAP
メール受信のために使用（サーバー上でメールを管理する方法、メールをダウンロードせずに複数の端末で確認 / PC・スマホ・タブレットなどでメールを管理するなど）
URL
Webページがどこに存在しているかを表す住所のようなもの。また、ブラウザのアドレスバーに表示される文字列を指します
URLの仕組み
プロトコル種別://サーバー名/ディレクトリ名(存在する場合)/ファイル名
abc.co.jpというサーバーの中のaboutフォルダの中のabout.htmlへアクセス
日本の中の東京の中の新宿区 のようなイメージ
プロトコル種別
httpやhttps
サーバー名
・契約をすると任意の名前をつけることができる
・最初に割り振られる名前だと数字の羅列（IPアドレス）、検索がしにくい
ファイル名
どのページなのかを指す
ブラウザ
Webブラウザは各ベンダー（提供元）が様々なブラウザを提供しているため、ユーザーによって使用しているものが異なります。
また各ブラウザごとにレンダリングエンジン（表示のために使用されるエンジン）も異なるため、Web言語で同じ命令を出していてもブラウザごとに表示が異なることがあります。
ブラウザの種類とそのベンダー
- ・GoogleChrome (Google)
- ・Safari (Apple)
- ・Microsoft Edge (Microsoft)
- ・FireFox (Mozilla)
- ・Brave（Brave Software）
- ・Internet Explorer (Microsoft) ※2022年6月にサポート終了
Webページの表示状況を確認する場合、上記のような複数のブラウザで確認を行いましょう。
サーバー
ブラウザと同様、サーバーも様々な提供元が提供しています。サーバーによって速度・容量・できること（PHPやWordpressが使用できる / できないなど）が異なるので、目的や優先順位で使用するサーバーを選定します。
サーバーは専用のサーバーを設置する場合もありますが、管理による維持費などが返ってかかってしまうため、レンタルサーバーを利用することがほとんどです。レンタルサーバーには以下のようなものがあります。
ドメイン
サーバーに任意でつけられる名前のことです。通常サーバーにはIPアドレス（例：192.168.0.1のような数字の羅列）というものが割り振られますが、IPアドレスは数字となってしまうため、どのようなサイトかが分かりづらく、覚えにくいです。（ドメインが具体的な住所名なら、IPアドレスは緯度・経度のようなイメージです）
企業などが自サイトのアドレスを分かりやすくするため、通常「ドメイン」というものを利用します。（例：google.co.jp）
独自に考えたドメインは重複していなければレンタルすることが可能です。
ドメイン管理会社には以下のような会社があります。
どのサービスでドメインを取得するかによって、費用や使用できるドメインが変わってきます。
Visual Studio Codeのインストール
①下記のページにアクセスしてMac or Windows版を選んでダウンロードします
https://code.visualstudio.com/download
②Finderの「ダウンロード」に保存されていることを確認してダブルクリック内容を読んで「同意する」にチェックしたあと「次へ」を押します
③「デスクトップ上にアイコンを作成する」にチェックを入れて「次へ」
④「インストール」をクリック
⑤「完了」をクリックするとソフトが開きます。
ショートカット （VSCode）
作業をより効率的にするために順番に覚えていきましょう！
| 内容 | Mac | Win |
| 環境設定 | ⌘ + , | Ctrl + , |
| 新規ファイル作成 | ⌘ + N | Ctrl + N |
| 新規作成（新しいファイルを開く場合） | ⌘ + shift + N | Ctrl + shift + N |
| 複数行のペースト | option + shift + ↓ | Alt + shift + ↓ |
| ファイルを開く | ⌘ + O | Ctrl + O |
| ソフトを終了する | ⌘ + Q | Ctrl+shift+w |
HTMLの基礎ルール
HTMLはWEBページ作成の土台！基礎ルールをしっかり身に付けましょう
タグについて
- ・<h1> のように <>で囲まれているのがタグ
- ・<h1>見出し</h1> のように 開始タグと終了タグがある
- ・終了タグには必ず先頭に「/」スラッシュ
- ・終了タグがないものもある
- ・<p>これは<strong>テキスト</strong>です</p> タグは入れ子にすることができる
そのほか
- ・タグにはさまざまな種類があり、それぞれのタグごとに役割が決まっている
- ・タグによってブラウザでの表示の仕方が異なる
- ・大きさや色、余白など見た目の部分はCSSで修正していく
HTMLの保存ルール
- ・.htmlの前は半角英数字、記号の場合は-（ハイフン）もしくは_（アンダーバー）のみ使用可
- ・全角文字や記号、スペースの使用は不可です。
- ・index.htmlという名前をつけたページは、サーバーアップロード後トップページとして認識をされます
HTMLタグの種類
タグにはそれぞれ異なる役割があります
<head>
作成しているページの言語や、どのファイルを読み込ませるか、使用するフォントなど検索エンジンに必要な情報を書く範囲。ブラウザには表示反映されない
<meta>
検索エンジンやブラウザに読んでもらうためのメタデータ（＝文書の中身ではなく、文書自体についての情報）を書くための範囲。例えば、文字コードや文書自体のタイトル、ブラウザで検索したときに検索結果に表示される説明文など。
<title>
ブラウザ上で表示されるタイトルや、検索結果のタイトルとして表示される内容となります。ブックマークを保存するときの名前にもなります
<link>
参照したいファイルを読み込ませるために使います。例えばCSSやgoogleフォントなど
<body>
ブラウザに表示させる内容を記述する箇所。WEBページとして表示させたい内容をこの中に全て記述する。
外に記述してもブラウザで反映される場合があるが、文法エラーなのでやらないようにしましょう
<h1>〜<h6> 見出しタグ
見出しを表すタグで、数字が小さいほど重要度が高くなります。
<h1>はその文書の中で一番重要な内容なので、一つのHTMLの中で1つだけ書くのが原則。
<h2>〜<h6>は何度使ってもOKです。
また、必ず1〜6の数字の順番にタグを書きます。<h7><h8>…はありません
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
<p>
文章の段落（＝Paragraph）を書くときに使うタグです。
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
<ul>
順番が関係ない箇条書きのリストです（＝unordered-list）
代表的なのはトップページのグローバルナビゲーションなど
ulの中身は<li>以外記述することはできません。（※<li>の中ならOK）
「ユーエルエルアイ」のセットで覚えましょう
| よい例 | わるい例（文法エラー） |
| <ul> <li>リストのなかみ1</li> <li>リストのなかみ2</li> </ul> | <ul> <p>これはテキストです</p> <li>リストのなかみ1</li> <li>リストのなかみ2</li> </ul> |
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
<ol>
順番がある箇条書きのリストです（＝ordered-list）
<ul>と同様に中身は<li>のみ入れることができます。（※<li>の中ならOK）
「オーエルエルアイ」のセットで覚えましょう。
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
<dl>
用語やタイトルと、それを説明するための定義リストです。（＝definition-list）
例えば 原産国：イギリス お醤油：小さじ1 など
説明したい用語には<dt>、説明には<dd>タグを使います。
<dl>の中には<dt><dd>だけ書くことができます。
See the Pen Untitled by studio-nnc (@studio-nnc) on CodePen.
