こんにちは！
このブログでは、これからHTMLを学びたい初心者の方に向けて、
やさしく・わかりやすく解説していきます。
今回は、「HTMLってなに？」というところから、基本の書き方まで紹介します。
パソコンやプログラミングが初めてでも読めるように、やさしい言葉で説明していきますね！
もくじ
HTMLとは？
「HTML（エイチ・ティー・エム・エル）」は、Webページを作るための言葉（言語）です。
「HyperText Markup Language（ハイパーテキスト・マークアップ・ランゲージ）」の略で、
簡単に言うと、Webページの“骨組み”をつくるものです。
たとえば、私たちが見ている「ホームページ」や「ブログ」、
「YouTube」や「Google」も、土台はHTMLでできています。
なぜHTMLが必要なの？
スマホやパソコンで見るWebページには、
「見出し」や「文章」、「画像」、「リンク」など、
いろいろな情報がきれいに並んでいますよね。
でも、実はパソコンは“ただの情報のかたまり”をそのままでは理解できません。
たとえば、
「これは見出しですよ」
「ここに画像を表示してください」
「この文字をクリックすると別のページに行けますよ」
と、どの情報がどんな意味を持っているのかを伝える“ルール”が必要なのです。
そこで活躍するのがHTMLです！
HTMLは、Webページに表示する内容を「タグ」という命令で囲むことで、
「これは見出し」「これは文章」「ここに画像を入れてね」
とパソコンに指示を出すための言葉なんです。
基本構造
HTMLは、こんなふうに書きます：
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>はじめてのHTML</title>
</head>
<body>
<h1>こんにちは！</h1>
<p>これが、はじめてのHTMLページです。</p>
</body>
</html>
すると画面には…
と表示されました。これら書き方を使い、画面に表示させていきます。
用語の説明
<!DOCTYPE html>：これは「HTMLのページですよ」とパソコンに伝えるおまじない。<html>：HTMLのスタートとゴールを囲むタグ。<head>：ページの情報（タイトルなど）を書く場所。<title>：タブに表示されるページの名前。<body>：画面に見える部分を作るところ！<h1>：大きな見出し。<p>：文章（パラグラフ）を書くときに使います。
これらのタグがあるからこそ、私たちはきちんとした形でWebページを見られるのです。
もしHTMLがなかったら、文字や画像のデータがぐちゃぐちゃに並ぶだけで、
どこが見出しなのか、どこがリンクなのかすら分からない「謎のページ」になってしまいます。
さらに詳しい書き方は別の機会に解説いたしますね。
実際にHTMLを書いてみよう！
よく使われているVS Code（無料のソフト）を使って、先ほどのコードをそのまま書いて、
名前を「index.html」にして保存し、表示してみましょう。
1.Visual Studio Codeをインストールする
- Googleで「VS Code」と検索して、公式サイトからダウンロード＆インストール。
2.新しいファイルを作る
- VS Codeを開いて、「ファイル」→「新しいファイル」をクリック。
- さきほどのHTMLコードを入力します。
3.ファイルを保存する
- 「ファイル」→「名前を付けて保存」で、
- ファイル名を
index.htmlにして、デスクトップなど好きな場所に保存。
4.ブラウザで開く
- 保存した
index.htmlファイルをダブルクリック！ - あなたが作ったWebページが表示されます！
自分だけのWebページが表示されるはずです！
よく使うタグ紹介
| タグ | 意味 | 使い方の例 |
|---|---|---|
<h1>～<h6> | 見出し | <h2>見出しです</h2> |
<p> | 文章 | <p>こんにちは</p> |
<a> | リンク | <a href="https://google.com">Google</a> |
<img> | 画像 | <img src="neko.jpg" alt="ネコの画像"> |
<ul><li> | 箇条書き | <ul><li>りんご</li></ul> |
これはあくまでHTMLの基本の書き方です。これらのタグをたくさん組み合わせてHPの画面を作成していきます。
まとめ
HTMLは、Webページの基本となる大切な言葉です。
最初はむずかしく感じるかもしれませんが、ルールさえ覚えれば、
だんだん楽しくなってきます！
このブログでは、これからも少しずつ、HTMLやWebのことをやさしく解説していくので、
ぜひお気に入りにしておいてくださいね！
オススメの教材です！
CSSとは？HTMLにデザインを加えるスタイルシートの基本の記事もチェック！
