⚙️

【初心者向け】Webサイトの仕組みと最初のHTMLを書いてみよう その2

に公開
CSS
HTML
プログラミング初心者
web開発
tech

みなさん、こんにちは。
「ゼロから学ぶWeb制作」シリーズ、やっていきましょう。
その1を見ていない方は先にそちらを見てから今回のものをやりましょう。

初めてのHTMLを書いてみよう！

それでは始めて行きます。
HTMLは「タグ」と呼ばれる命令でWebページの骨組みを作ります。
タグは <タグ名> のように書き、終了タグは </タグ名> の形で閉じます。

何を言ってるんだ？となっている人が多いと思うのでまず実際のHTMLを見てみましょう。

sample
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>はじめてのWebページ</title>
  </head>
  <body>
    <h1>こんにちは！私のWebページへようこそ</h1>
    <p>ここはHTMLの勉強を始めた記念すべき最初のページです。</p>
  </body>
</html>

上記が基本的なHTMLになります。

コードの意味をひとつずつ理解しよう

  • <!DOCTYPE html>
    → 「これはHTML5で書かれたページですよ」という宣言です。必ず最初に書きます。
  • <html> ～ </html>
    → HTML文書の開始と終了を示します。この中に全ての内容を書きます。
  • <head> ～ </head>
    → ページの「頭の部分」です。
    → ページタイトルや文字コードなど、見えない情報を入れます。
  • <meta charset="UTF-8">
    → 日本語を正しく表示するための設定です。
  • <title> ～ </title>
    → ブラウザのタブに表示されるタイトルです。
  • <body> ～ </body>
    → ページに表示される内容をここに書きます。
    → 今回は <h1>（見出し） と <p>（段落） を使っています。

実際にHTMLを書いてみる

それではHTMLを書いてみましょう！

手順

  1. デスクトップなどに web-study というフォルダを作成。
  2. その1でインストールをしたVScodeで 先ほど作成したファイルを開く。
  3. VScodeの右側を右クリックして「新しいファイル…」をクリックして index.html を作成する。
  4. index.html の中に下記HTMLをコピペする。
index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>はじめてのWebページ</title>
  </head>
  <body>
    <h1>こんにちは！私のWebページへようこそ</h1>
    <p>ここはHTMLの勉強を始めた記念すべき最初のページです。</p>
  </body>
</html>


5. コピペしたら Ctrl + S で保存する。
6. 保存した index.html をファイルでダブルクリックしてChromeで開く。（VScodeの中でダブルクリックしても開けません。）

7. このように表示されていたら成功です！

※ 表示がうまくいっていない人は保存されているかVScodeで確認してください。

これであなたのWeb制作の第一歩は成功です！🎉

HTMLのタグはたくさんあるので下記を参考にして色々試してみてください。
参考：
https://hmaster.net/htmllist.html
https://developer.mozilla.org/ja/docs/Web/HTML/Reference/Elements

まとめ

  • HTMLはWebページの骨組みを作る言語
  • 最初はVSCodeでファイルを作り、ブラウザで表示するだけでOK
  • 今日のゴール：「自分のHTMLファイルを作り、ブラウザで表示できた」

次回予告

次回は 「よく使うHTMLタグまとめ」 を紹介します。

  • 見出し・段落・リンク・画像の使い方
  • HTMLの基本タグを組み合わせてページを少し賑やかにする

Discussion