HTML

【プログラミング初心者のためのHTML講座】第1回目:Webページの仕組みについて

たくぞー
たくぞー
プログラミングを勉強していく上で欠かせないHTMLというマークアップ言語について、4回に分けて開設していきます。もちろん最後まで無料!すべて受講すればHTMLの基礎について完全に理解できます!

第1回目:Webページの仕組みについて

こんにちは!たくぞー(Instagram:takuzo0405)です。

Web制作をしていく上で絶対に欠かせないHTMLについて、全4回に分けて開設していきたいと思います。

プログラミング言語としてまず初めに必ず触れる言語になりますので、最後まで受講してマスターしてしまいましょう。

最後まで無料で受講可能です!

それではさっそく始めていきたいと思います。

Webページの仕組みって?

まずはWebページの仕組みについて解説していきます。

Webページというのは、Webサーバーとドメインによって成り立っています。

Webサーバーというのは聞きなれた言葉でいうとレンタルサーバーですね。

僕の場合、Xサーバーでサーバーをレンタルして、お名前.comでドメインを契約しています。

Xサーバー広告
お名前ドットコム広告

「takuzo-blog.com」というドメインを契約しているのですが、ユーザーが「takuzo-blog.com」にアクセスがあった場合は、このドメインが紐付けされているXサーバーからデータを取得してきます。

どういうことか、試しにWebサーバーへデータをアップしてみましょう。

サーバーにデータを置いてみよう

この動画ではWindowsのパソコンを使っていますので、ffftpというソフトを使ってサーバーにデータを置いてみたいと思います。

場所は「takuzo-blog.com」→「public.html」→「html」という新規フォルダを用意して、この中にデータを置いていきます。

ftp参考画像1 ftp参考画像2

ftp参考画像3

ちなみに現時点では何もファイルデータを置いていないため、Googleで「takuzo-blog.com/html」と検索しても何も見つかりません。

ftp参考画像4

ここに、あらかじめ用意していたファイルをアップロードして、Googleを更新してみると、

ftp参考画像5

はい!このように表示されました。

ftp参考画像6

「takuzo-blog.com/html」にアクセスしたので、Webサーバーからデータを引っ張って来た状態になります。

ここでよく勘違いしてしまうのが、アクセスしたユーザーがデータを見に行っている訳ではありません。

ユーザーのパソコン、あるいはスマートフォンでデータを受け取っています。

Caches(キャッシュ)って聞いたことあると思いますが、ブラウザで一度表示したページのデータ(HTMLや画像)を一時的に保存しておく機能がありますよね。

頻繁に訪れるページなどは、キャッシュが保存されているおかげで、素早く表示することが可能になっています。

ところで、いまアップしたこのファイル、改行も何もされていない文章なので読みづらいですよね。

タイトルなんかも少し大きくして見分けが付くようにしていきたい。

先ほどサーバーにアップしたデータというのは特に何もHTMLとしてマークアップしていないものになります。

そうなると、Webサーバーというのはここがタイトルなんだな、とかここで改行したい、という処理を自動でやってくれる訳ではありません。

ブラウザとしてはただ単にWebサーバーから返って来たデータをそのまま表示しているだけになります。

なので、タイトルを少し大きくしたいとか、改行したいという場合は、Webサーバーに置いているファイルの方で書いてあげる必要があります。

これがHTMLのことです。

マークアップしてみよう

では、このファイルを見やすくするために、簡単にHTMLでマークアップして見たいと思います。

まず、見出しとなる部分にはh1~h6まであるタグを使ってマークアップしていきます。

「たくぞーブログ」に関してはこのページの一番大きな見出しとなるので、h1タグを使って、このようにマークアップしていきます。

ftp参考画像7

大抵のタグにはこのように開始タグと「/」が入っている終了タグがセットになっていて、この間にテキストが入ることで適用されます。

書けましたら、コマンド+Sでファイルを保存して、Webサーバーへ再アップして見ましょう。

ftp参考画像8

「takuzo-blog.com/html」を右上の再読み込みボタンから、再読み込みします。

ftp参考画像9

はい!たくぞーブログの部分がh1タグの元々持っている性質によってこのような見た目にすることができました。

ftp参考画像10

検証ツールで見てみよう

ここで、検証ツールと呼ばれるツールを見てみましょう。

表示方法はブラウザによって異なりますがGoogleChromeの場合は、右クリックして「検証」を選択します。

すると、このように右側にHTMLのソースコードと呼ばれるものが表示できました。

ftp参考画像11

検証ツールのセレクトツールを使って先ほどマークアップしたタイトルを見てみましょう。

ちゃんとh1タグでマークアップされていることが確認できると思います。

ftp参考画像12

まとめ:第2回へ続く

このように、HTMLというのは、ブラウザがここはタイトルですよ、ここは改行するところですよ、といったように指示をするための言語のことです。

では今回はここまででHTML講座の第1回目を終わりたいと思います。

第1回目の講座では、

  • Webページの仕組みについて
  • Webページがユーザーどのようにして表示されるのか
  • HTMLのタグについて

を解説していきました。

では次の講座でお会いしましょう。

【プログラミング初心者のためのHTML講座】第2回目:タグの属性についてこんにちは!フリーランスWebデザイナーのたくぞーです。未経験から3ヶ月で案件獲得した僕が【全4回】コーディングを勉強したい初心者・入門者向けの基礎HTML講座を無料で提供!今回は第2回目、タグの属性について解説していきます!...
Web Sense
「正しいコードが書けていないかも」
「ホームページ制作の独学に限界を感じている」
「HTML・CSSをマスターして単価を上げたい」

そんなお悩みをこれ一つで解決!
本格ホームページを作りたい方はこちら

『Web Sense』公式ページ