ノウハウ

【第3回】ウェブサイト制作講座／初心者でも安心！10ステップでホームページを作ろう！

目次

第3回：第1歩：ホームページの骨組みを作る（HTML）

前回は、ホームページ制作に必要な道具と材料について解説しました。

今回は、いよいよホームページ制作を始めていきましょう！

まず、ホームページの骨組みとなるHTML（HyperText Markup Language）について解説します。

HTMLとは

HTMLは、Webブラウザにどのようにコンテンツを表示するかを指示するための言語です。HTMLには、見出し、文章、画像、動画などの要素を配置するためのタグが用意されています。

HTMLの基本構造

HTMLの基本構造は以下の通りです。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ホームページのタイトル</title>
</head>
<body>
  <h1>ホームページの見出し</h1>
  <p>本文</p>
  <img src="image.jpg" alt="画像の説明">
</body>
</html>

HTMLタグの種類

HTMLには、様々なタグがあります。代表的なタグは以下の通りです。

  • 構造を示すタグ
    <html>, <head>, <body>, <div>, <span>など
  • 見出しを示すタグ
    <h1>, <h2>, <h3>, ..., <h6>
  • 文章を示すタグ
    <p>, <br>, <hr>など
  • リストを示すタグ
    <ul>, <ol>, <li>など
  • 表を示すタグ
    <table>, <tr>, <th>, <td>など
  • 画像を示すタグ
    <img>
  • リンクを示すタグ
    <a>

HTMLコードの書き方

HTMLコードは、テキストエディタを使って記述します。コードを記述する際には、以下の点に注意する必要があります。

  • タグは必ず半角英数字で記述する
  • タグの開始タグと終了タグを必ず対にする
  • 属性は半角英数字で記述し、スペースで区切る

例

<h1>ホームページの見出し</h1>
<p>本文です。この文章は段落タグで囲まれています。</p>
<img src="image.jpg" alt="画像の説明">

まとめ

今回は、ホームページの骨組みとなるHTMLについて解説しました。

次回は、HTMLを使って簡単なホームページを作ってみましょう！

トピックス
ノウハウ
タグ
HTML、ホームページ作成
前の記事
【第2回】ホームページ制作講座／初心者でも安心！10ステップでホームページを作ろう！
2024.05.31
次の記事
【第4回】ウェブサイト制作講座：初心者でも安心！10ステップでホームページを作ろう！
2024.06.02