基本編

作成しながら進めていきましょう

基本編は、ホームページを作成しながら進めていきましょう。HTMLコードNo1のindex.htmlのソースを表示してください。

Lesson1 タイトル

ホームページのタイトルを決めましょう。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_Jis">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>~</title>
<style type="text/css">
<!--
a:link { color: }
a:visited { color: }
a:hover { color: ; background-color: }
a:active { color: }
-->
</style>
</head>

<title></title> ⇒ 部分がタイトルです。<title>ホームページ</title>としたらタイトル部分に「ホームページ」と表示されます。

>> タイトル表示例

◇ さっそく練習してみましょう。

ソースの<title></title>に好きな名前をタイプしてみてください。

タイプ後、ファイル(ソース左上) ⇒ 上書き保存 ⇒ ブラウザ更新ボタンをクリック(左上の方にある緑ボタン)

注意:半角カタカナは、文字化けの原因になりますのでやめましょう。

Lesson2 タイプの練習

下のタグがホームページの基本となるタグです。

<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
  • <head>~</head> ⇒ ~の情報はブラウザに表示されません。
  • <body>~</body> ⇒ ~の情報がブラウザに表示されます。

<head>~</head>の中は、ほとんど記載情報が決まってますので、先にHTMLコードNo1に記載してあります。

あとは、<body>~</body>の中を充実させていきましょう。

◇ タイプの練習をしてみましょう。

<table border="1" cellspacing="1" cellpadding="5" width="550">
<tr><td>練習1</td><td>練習2</td></tr>
<tr><td>練習3</td><td>練習4</td></tr>
</table>

上記と同じ部分をソースから見つけてください。「練習3」の部分に文章を作成してみましょう。

>> タイプの練習をしましょう

下記のp strongなど要素と呼びます。要素を< >で囲んだ状態をタグと言います。下の5種類は利用頻度が多くなるので覚えておいてください。

  • <p>~</p> ⇒ 前後に1行文のスペースが空き改行されます。
  • <br> ⇒ 強制的に改行します。
  • <strong>~</strong> ⇒ ~部分が太字で強調されます。
  • <em>~</em> ⇒ ~部分が斜体で強調されます。
  • align="~" ⇒ 配置を設定。~部分にleft(左)center(中央)right(右)

作成のコツ:情報をタイプしたらマメに上書きしてブラウザで確認です。

Lesson3 文字の大きさの変更

ホームページも文字の大きさが一緒だとメリハリがないので、文字の大きさを変更してみましょう。

1. 見出しの設定
<h1>~</h1> ⇒ <h1>から<h6>まで設定できます。
2. 文字の大きさ
style="font-size:~" ⇒ ~部分に文字の大きさを設定します。
3. 個別に範囲指定
<span>~</span> ⇒ spanだけでは機能しないので、styleを指定。

>> 文字の大きさを設定

見出しはコンテンツの見出しに、それ以外は2、3番の方法を指定します。

Lesson4 色の変更

色は#6桁のカラーコードを設定します。カラーコードは、色の見本を参考にしてください。

◇ 背景色・文字色の変更

  • style="background-color:#*******" ⇒ 背景色の設定
  • style="color:#*******" ⇒ 文字色の設定

◇ リンク色の変更

  • a:link {background-color:#*******;} ⇒ 未訪問の背景色の設定
  • a:visited {background-color:#*******;} ⇒ 訪問済みの背景色の設定
  • a:hover {background-color:#*******;} ⇒ マウスを重ねた時の背景色
  • a:active {background-color:#*******;} ⇒ クリックした時の背景色
  • a:link {color:#*******;} ⇒ 未訪問(クリック前)の文字色の設定
  • a:visited {color:#*******;} ⇒ 訪問済み(クリック後)の文字色の設定
  • a:hover {color:#*******;} ⇒ マウスを重ねた時の文字色
  • a:active {color:#*******;} ⇒ クリックした時の文字色

>> 色を設定しましょう

Lesson5 テーブルの説明

下のコードをテーブルと呼びます。
<table border="1" cellspacing="1" cellpadding="5 width="550">~</table>

テーブルは数字の変更で色々な形に変化します。

  • <table>~</table> ⇒ テーブルを指定するタグです。
  • border="1" ⇒ 線の太さを指定。"0"にすると枠線がなくなります。
  • cellspacing="1" ⇒ 枠線に数字分だけ余白を入れます。
  • cellpadding="5" ⇒ 文字と枠線の間に数字分だけ余白を入れます。
  • width="550" ⇒ テーブルの横幅の長さを指定します。

使用例などは、以下で説明しています。

>> テーブルの形を変更と余白の設定

運営しようと思えば、ここまででもできますが、1ページでは少し寂しいので、次はページ数を増やしリンクに挑戦してみましょう。

次のページ >> 応用編

基本編、作成しながら進めていきましょう。パソコン付属のテキストエディタを利用した、初心者向け無料ホームページ作成方法の解説。無料hp作成の参考に!

ページTopヘ

Top >> 無料 ホームページ作成

Access Ranking!

  1. 無料 求人 派遣 土日のみ 単発
  2. 無料 海外旅行保険 クレジットカード 傷害
  3. 無料 アンケート
  4. 無料 クレジットカード 審査 甘い
  5. 無料 ホームページ作成 無料hp作成
  6. 無料 クレジットカード 初心者
  7. 無料 オリックスカード 審査
Copyright©2017 www.syousai.com.All rights reserved. XTML, CSS,