ソフトが作るＨＴＭＬ：ＨＴＭＬ基礎

＞トップページ　＞技術コラム　＞HTMＬ基礎

HTMLの基礎

ソフトが作るＨＴＭＬ

ホームページホーム画面

ホームページホームページビルダーが作成したＨＴＭＬを例として示します。デフォルトで作成したものです。

ホームページビルダーのＨＴＭＬ

上記画面のソースを下に示します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta name="GENERATOR" content="JustSystems Homepage Builder Version 16.0.10.0 for Windows">
<title>○○○○○○○○のホームページ</title>
<link rel="stylesheet" href="hpbparts.css" type="text/css" id="hpbparts">
<link rel="stylesheet" href="container_11Da_2c_top.css" type="text/css" id="hpbcontainer">
<link rel="stylesheet" href="main_11Da_2c.css" type="text/css" id="hpbmain">
<link rel="stylesheet" href="user.css" type="text/css" id="hpbuser">
</head>
<body id="hpb-template-11-04a-01" class="hpb-layoutset-01">
<div id="hpb-skip"><a href="#hpb-title">本文へスキップ</a></div>
<!-- container -->
<div id="hpb-container">
  <!-- inner -->
  <div id="hpb-inner">
    <!-- wrapper -->
    <div id="hpb-wrapper">
      <!-- page title -->
      <div id="hpb-title">
        <h1>Builder Home Page</h1>
        <h2>紹介文タイトル。紹介文タイトル。紹介文タイトル。</h2>
        <p>ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。ここに紹介文が入ります。</p>
      </div>
      <!-- page title end --><!-- main -->
      <div id="hpb-main">
        <!-- toppage -->
        <div id="toppage">
          <div id="toppage-item">
            <h3 class="hpb-c-index">ギャラリー</h3>
            <div class="item">
              <img src="top-img01.png" width="200" height="150" alt="イメージ01">
              <h4>PHOTO TITLE</h4>
              <p>ここに説明文が入ります。ここに説明文が入ります。ここに説明文が入ります。ここに説明文が入ります。</p>
            </div>
            <div class="item">
              <img src="top-img02.png" width="200" height="150" alt="イメージ02">
              <h4>PHOTO TITLE</h4>
              <p>ここに説明文が入ります。ここに説明文が入ります。ここに説明文が入ります。ここに説明文が入ります。</p>
            </div>
            <div class="item">
              <img src="top-img03.png" width="200" height="150" alt="イメージ03">
              <h4>PHOTO TITLE</h4>
              <p>ここに説明文が入ります。ここに説明文が入ります。ここに説明文が入ります。ここに説明文が入ります。</p>
            </div>
            <div class="item">
              <img src="top-img04.png" width="200" height="150" alt="イメージ04">
              <h4>PHOTO TITLE</h4>
              <p>ここに説明文が入ります。ここに説明文が入ります。ここに説明文が入ります。ここに説明文が入ります。</p>
            </div>
          </div>
          <div id="toppage-news">
            <h3><span class="en">information</span><span class="ja">お知らせ</span></h3>
            <dl>
              <dt>20**年*月*日
              <dd>ここに新着情報が入ります。ここに新着情報が入ります。ここに新着情報が入ります。ここに新着情報が入ります。ここに新着情報が入ります。
              <dt>20**年*月*日
              <dd>ここに新着情報が入ります。ここに新着情報が入ります。ここに新着情報が入ります。ここに新着情報が入ります。ここに新着情報が入ります。
              <dt>20**年*月*日
              <dd>ここに新着情報が入ります。ここに新着情報が入ります。ここに新着情報が入ります。ここに新着情報が入ります。ここに新着情報が入ります。
              <dt>20**年*月*日
              <dd>ここに新着情報が入ります。ここに新着情報が入ります。ここに新着情報が入ります。ここに新着情報が入ります。ここに新着情報が入ります。
              <dt>20**年*月*日
              <dd>ここに新着情報が入ります。ここに新着情報が入ります。ここに新着情報が入ります。ここに新着情報が入ります。ここに新着情報が入ります。
            </dl>
            <hr>
          </div>
          <div id="toppage-info">
            <h3><span class="en">profile</span></h3>
            <h4>○○○○○○○○</h4>
            <p>〒163-0000<br>
            東京都○○区○○○1-2-3<br>
            TEL.03-1234-0000<br>
            FAX.03-1234-0001</p>
            <hr>
          </div>
        </div>
        <!-- toppage end -->
      </div>
      <!-- main end -->
    </div>
    <!-- wrapper end --><!-- navi -->
    <div id="hpb-nav">
      <h3 class="hpb-c-index">ナビゲーション</h3>
      <ul>
        <li id="menu01"><a href="#"><span class="en">MENU1</span></a>
        <li id="menu02"><a href="#"><span class="en">MENU2</span></a>
        <li id="menu03"><a href="#"><span class="en">MENU3</span></a>
      </ul>
    </div>
    <!-- navi end -->
  </div>
  <!-- inner end --><!-- footer -->
  <div id="hpb-footer">
    <div id="hpb-footerMain">
      <p>copyright&copy;20XX&nbsp;Builder&nbsp;Home&nbsp;Page&nbsp;all&nbsp;rights&nbsp;reserved.</p>
    </div>
    <div id="footerExtra1">
      <div id="pagetop"><a href="#hpb-container">このページの先頭へ</a></div>
    </div>
  </div>
  <!-- footer end -->
</div>
<!-- container end --></body>
</html>

ホームページビルダー１６はスタイルシート対応となっているので、見栄えに関する部分はスタイルシートに書かれていますので、上記ホームページと同じ見え方をさせるにはスタイルシートを理解する必要があります。スタイルシートと一緒に説明すると混乱する恐れがあります。まずは、ＨＴＭＬに絞って説明していきます。

このページの先頭へ

バナースペース

カリンボウ株式会社

〒400-0862
山梨県甲府市朝気1-2-37
アルガハイツ101号室

E-MAIL info＠calimbo.jp
TEL 055-244-5909
FAX 055-236-9850

[1]ＨＴＭＬの基礎
１．１．ＨＴＭＬとは
１．２．ソフトが作るＨＴＭＬ
１．３．ＨＴＭＬの基本構造
１．４．<head>で使われるタグ
１．５．<body>で使われる基本なタグ
１．６．リスト
１．７．画像の表示
１．８．基本的な表を作る