【初心者向け】誰でもできるHTMLで簡単なWebページを作ろう！

Webページを作ってみたいと思う人は多いと思います。htmlを理解すると、自分で簡単に作ることができるので、ぜひ挑戦してみてください。

htmlでホームページを作りたいけどやり方がわからない。

タグのやり方さえ理解できれば簡単にホームページを作ることができ、簡単ですよ。実際に自分のＷｅｂページを作ってみましょう。

Webページってどのように作られているのか全く分からないので、簡単なものでお願いします。

では実際に5分程度で作れる簡単なWebページを作ってみましょう。ボタンを押すと画像を表示するWebページになります。

【記事の対象者】
　・htmlでとりあえずWebページを作ってみたい
　・初心者で、Webページを作成できるか不安な人
　・htmlの基礎を学びたい人

Contents

HTMLでWebページを作ろう！
1. HTMLの基礎知識
  - 基本的なタグについて
2. HTMLでWebページを作る手順

🚀 0円で現役エンジニアから学べる【Techスクールオンライン】のお申込みをお勧めします。このオンラインスクールでは、現役のエンジニアから直接学ぶことができ、プログラミングの基礎から高度なスキルまでを習得できます。しかも、今なら 0円で受講できるチャンスです。エンジニア転職を考えている方やプログラミングに興味がある方、新しいスキルを習得したい方に特におすすめです。

HTMLでWebページを作ろう！

HTMLの基礎知識

HTMLとは、Webページを作成するための言語です。HTMLでは、テキスト、画像、動画などのコンテンツを表示するためのタグを使用して、Webページを作成します。HTMLでは、タグを使用して、テキストや画像をレイアウトしたり、リンクを作成したりすることができます。また、CSSというスタイルシート言語を使用することで、見た目を整えたり、レイアウトを変更したりすることができます。HTMLは、Webページを作成するための基本的な言語なので、初心者でも学習しやすいです。

基本的なタグについて

<html>：文書を宣言する
<head>：文書のヘッダーを定義する
<title>：文書のタイトルを定義する
<body>：文書の本文を定義する
<h1>～<h6>：見出しを定義する
<p>：段落を定義する
<a>：リンクを定義する
<img>：画像を定義する
<ul>：順序なしリストを定義する
<ol>：順序ありリストを定義する

上記が基本的なタグ10個になります。開始タグと終了タグで挟み込むことにより、Web上に文字が表示されています。実際に作ってみましょう。

HTMLでWebページを作る手順

HTMLでWebページを作る手順は、以下のようになります。

テキストエディタでHTMLファイルを作成します
HTMLファイルにタグを追加します。
HTMLファイルを表示します。

これで、HTMLでWebページを作成する手順が完了します。HTMLを使用して、自分のWebページを作成してみましょう！

実際に画像を表示する簡単なコードを作成しました。

<!DOCTYPE html>
<html>
  <head>
    <title>HTMLでWebページを作ろう！</title>
  </head>
  <body>
    <h1>HTMLでWebページを作ろう！</h1>
    <p>
      このページでは、HTMLを使ってWebページを作成する方法を学びます。
    </p>
    <button onclick="showImage()">画像を表示する</button>
    <div id="image-container" style="display:none;">
      <img src="./img/1.png" alt="Example Image" />
    </div>
    <script>
      function showImage() {
        document.getElementById('image-container').style.display = 'block';
      }
    </script>
  </body>
</html>

こちらのコードをメモ帳などのテキストエディタで作成し、フォルダに保存してください。また、同じフォルダ内にimgフォルダを作成し、1.pngの画像ファイルを保存しています。sample.htmlをダブルクリックすると、このようにWebページが表示されます。