ウェブサイトを作ろう！1
・ウェブサイトとは？
・ウェブページのしくみ
ウェブサイトとは？
ウェブ（WEB）サイトとは、YouTube（ユーチューブ）などのことです。
例えば、YouTubeを開くと最初にこんなページが開きますね。
最初に開くページのことをウェブサイトの「トップページ」または「ホームページ」と言います。
トップページ
（ホームページ）
※日本ではウェブサイトのことを「ホームページ」と言う場合が多いですが、
正しくは「ウェブサイトの一番最初のページ」のことです。
ウェブサイトとは？
YouTubeの動画や文字などをクリックすると、画面の表示（ページ）が変わりますよね？
この一つ一つを「ウェブページ」と言います。
ウェブページ
ウェブページ
ウェブページ
ウェブページ
ウェブサイトとは？
この「トップページ」や「ウェブページ」を全部まとめて「ウェブサイト」と言います。
（ウェブサイトのことを「サイト」とだけ言う場合もあります）
トップページ
ウェブページ
ウェブサイト
（サイト）
ウェブページ
ウェブページ
ウェブページ
ウェブページは、何で出来てる？
つまり「ウェブページ」を一つ一つ作っていくことが、「ウェブサイトを作る」ということです。
では、ウェブページは「なにで出来ている？」のでしょうか？
それは下の3つです。
HTML
（エイチ ティ エム エル）
CSS
（シー エス エス）
JavaScript
（ジャバスクリプト）
基本的に、この3つでウェブページは作られます。
わかりやすくするために、ウェブページを別のものに、たとえてみましょう。
次のページに続きます。
形や意味をつける係
（構造をつくる）
見た目をととのえる係
動きをつける係
【紙ねんどで恐竜（きょうりゅう）をつくる】ときのことを考えてください。
「大きな口があり」「しっぽが長い」、そんな恐竜（きょうりゅう）です。
まずは形（構造：こうぞう）を作りますよね？これが HTML で
HTMLとは？
HTML
（エイチ ティ エム エル）
形や意味をつける係
（構造をつくる）
形が出来たら色をぬります。
これが CSS です。
CSSとは？
CSS
（シー エス エス）
見た目をととのえる係
さらに、魔法（プログラム）で恐竜を動けるようにしてみましょう。
これが JavaScript です。
この3つのイメージをつかんでおいてください。
JavaScriptとは？
JavaScript
（ジャバスクリプト）
動きをつける係
では、ここからは実際（じっさい）に作りながら、くわしく学んでいきます。
まず１つ目【 HTML（エイチティーエムエル）】です。
これは「形や意味をつける係」と言いましたが、どういうことかというと
「この文字は一番上に表示して」
「この文字は目立つように表示して」
「ここに画像を表示して」
みたいな「意味」を、コンピューターに教えるために使います。
この HTML が、ウェブページの本体ですので、非常に重要です。
実際（じっさい）に見てみた方がわかりやすいので、任天堂のサイトのHTMLを見てみましょう。
HTMLとは？
下のサイトが任天堂のサイトです。（2022年の画像です）
任天堂のサイト
HTMLとは？
このサイトも、当然 HTML で作られていますので、それを見てみます。
HTML を見る方法はカンタンです。
ウェブページの「何もないところ（文字とか画像がないところ）」を右クリックして、【 ページのソースを表示 】をクリックしてください。これでHTMLが表示できます。※どのサイトでも良いので、自分でやってみるとわかりやすいです。
なにやら、たくさんの英数字が表示されると思いますが、これが HTML です。
この HTML を元にして、ブラウザというソフト（今見ているソフト）が画面を表示しています。
これがウェブサイトの基本です。
HTMLとは？
ブラウザ
HTML
HTMLを
ブラウザにわたす
ブラウザが HTML どおりに画面に
表示する
さて、では HTML の中身をもう少し見てみましょう。
文字の多さに「げげぇ」と思う人もいるかも知れませんが、まぁ本格的なサイトなので、こんなもんです。
このコースが終わるころには、この文字がほとんど理解できるようになっています！
HTMLとは？
では HTML の書き方の説明です。
HTML は、
「意味をつけたい文字を、タグで囲（かこ）む」
という書き方をします。
「タグ」とは <title> や <head> と書かれているやつです。
<> が使われているやつですね。
次のページに続く。
HTMLとは？
タグ
文字
「任天堂ホームページ」という文字が <title> と </title> に、かこまれてますよね？
これは「"任天堂ホームページ"という文字」に「title（タイトル） というタグが付けている」ということです。
titleタグをつけることで、「"任天堂ホームページ"という文字は、このページのタイトルだぞ」という特別な意味がつけられることになります。
これが基本的な HTML の書き方です。
では、文字に意味をつけて、どうなるのでしょうか？
続きは次のページ。
HTMLとは？
この「ページのタイトル」という意味が付けられた「"任天堂ホームページ"という文字」は、普通に画面上に表示されるのではなく、特別な場所に表示されます。
それは、下の画像の場所です。（タブとよばれる場所です）
HTMLとは？
文字に意味をつけることによって、ブラウザが
「あ、この文字はページのタイトルなんやな！じゃあココに表示しよ！」と、考えてくれるのです。
このように「文字に意味をつけていく」ことが HTML を書くこということです。
お疲れ様でした
今回は ウェブサイトの仕組みや、HTML の書き方を学びました。
次回は、どんどん HTML を書いていきましょう。