▼ 今すぐ、ホームページをつくろう!!

では早速ホームページを作ってみましょう。
メモ帳にHtmlを直接書いてブラウザで表示、その後の更新作業までについて説明しています。 非常に簡単な作業の流れを説明していますが、 「画像や飾りは一切要らない!」という人はここの説明だけで ホームページを作り上げる事ができます。

■作成方法

ホームページを作る方法は以下の2通りに分けることができます。

・ホームページ作成ソフト(オーサリングソフト)で作成する場合
ホームページ作成ソフトは、メーカー製ソフト、シェアウェア、フリーウェアがあります。
ホームページ作成ソフトには初心者向けでタグやスタイルートを自動で生成してくれる 作成支援型、また必要なタグをソースに追加するタグ入力支援型があります。タグ入力支援型の方はHtmlの知識が少し必要です。

・テキストエディタで作成する
テキストエディタを開いて(Windowsではメモ帳など)内容を直接入力する方法です。
ホームページはHtmlという言語とCssという手法を使い、文字情報の装飾やデザイン、レイアウトを行います。
当サイトは主にテキストエディタで作る人向けの情報を掲載しています。


■Webページの完成

最も簡単なホームページは 空のメモ帳に以下のHtmlソースを貼り付ける事で完成します。

<html>
<head>
<title>今日HTMLの宣言をしよう!</title>
</head>
<body>
今日HTMLの宣言をしよう!
</body>
</html>

メモ帳に貼り付けが終わったら index.html という名前で保存して下さい。
(ホームページ関連のファイル名は画像を含め全て任意の半角英数で名前を付けてください)
これでホームページの完成です。

(補足)

拡張子の変更手順( テキスト → Webページ )
・ここでは、ホームページのタイトル(title〜/title)と本文(body〜/body)を書いています。

■ブラウザで表示する

今作った index.html をブラウザで表示してみましょう。

「今日HTMLの宣言をしよう!」という文章が表示されます。
Web形式のファイル(index.html)をダブルクリックするとブラウザが起動します。


■修正(更新)する

ホームページは作った後で情報を追加したり、間違いを直したりする「更新」という作業が必要です。

「今日HTMLの宣言をしよう!」という文章を修正しましょう。更新はソースを開いて行います。
ソースはブラウザの「表示」→「ソース」を選択します。すると「メモ帳」が開きます。
また、ブラウザ上で「右クリック」→「ソースの表示」でも「メモ帳」を開く事が出来ます。
文章を次のように修正してみましょう。

<html>
<head>
<title>今日HTMLの宣言をしよう!</title>
</head>
<body>
宣誓!今すぐホームページを作ります!
</body>
</html>

[ファイル]→[上書き保存](ショートカットキー「ctrl」+「s」でも同じ)で保存します。
ブラウザの「更新」ボタンを押してください。(又はファンクションキーの「F5」)
今修正した内容が、ブラウザに反映されます。


■改行する

「宣誓!」の後に改行を入れてみましょう。
Htmlで改行を行うにはEnterキーなどを押して見た目を改行しても無駄です。

次のように「タグ」を入れて「上書き」した後「更新」ボタンを押してみてください。

宣誓!<br>今すぐホームページを作ります!

宣誓!
今すぐホームページを作ります!

今度は狙った場所で改行していることが分かります。


■太字にして強調する

今度はそのまま「宣誓!」を太字にしてみましょう。

<b>宣誓!</b><br>今すぐホームページを作ります!

<span style=font-weight:bold;>宣誓!</span><br>今すぐホームページを作ります!

宣誓!
今すぐホームページを作ります!

「更新」ボタンを押すとこのように太字で表示されます。

■色を変える

さらに「宣誓!」を赤色にしてみましょう。

<font color=red><b>宣誓!</b></font><br>今すぐホームページを作ります!

<span style=font-weight:bold;color:red;>宣誓!</span><br>今すぐホームページを作ります!

宣誓!
今すぐホームページを作ります!

「更新」ボタンを押すとこのように赤字で表示されます。

■文字の大きさ変える

「宣誓!」を文字サイズを大きくします。

<font size=4>宣誓!</font>今すぐホームページを作ります!

<span style=font-size:16pt;>宣誓!</span>今すぐホームページを作ります!

宣誓!今すぐホームページを作ります!


■文字にマーカーをつける

重要な文章「宣誓!」にマーカーをつけます。ポイントは背景色を変える事です。

<span style=background-color:#ffff00>宣誓!</span>今すぐホームページを作ります!

宣誓!今すぐホームページを作ります!


■見出しをつけてみる

文章の見出しを作ります。

<h3>今日から始めるウェブデザイン</h3> ●宣誓!今すぐホームページを作ります!

●今日から始めるウェブデザイン

宣誓!今すぐホームページを作ります!





「index.html」の作り方から、今後メインとなる文字装飾について解説しましたが、 どうでしたか?
冒頭でも書きましたが、画像や複雑なレイアウトが必要なければこのページに書かれている 内容だけで、Webページ1枚で構成されるオリジナルホームページを作ることができます。

次章からは、Webページの増やし方とホームページにおけるリンクの説明をしていきます。