FFFTP作者サイト  FFFTP最新版ダウンロード

メモ帳で簡単ホームページ

ホームページは専用のソフトがなくても簡単に作成することができます。

つまりテキストエディタさえあれば作成することができるのです。今回はメモ帳を使い、ホームページ作成を練習してみたいと思います。

最低限の記述でホームページを作成しますのでおおまかな流れをつかんでみてください。(実際は文書型宣言の選択や文字コードの設定、CSSの使い方、SEO対策など色々勉強する必要があります。)

ホームページの基本

ホームページの基本


<html>
<head>
<title></title>
</head>
<body>
本文
</body>
</html>


これがホームページの基本となる骨組みです。
コピーしてメモ帳に貼り付けて下さい。

貼り付けができたら名前を付けて保存します。
この時名前を「index.html」と付けて下さい。
ちなみにindex.htmlと名前を付けたファイルはそのディレクトリ(フォルダ)のトップページになります。
保存先は任意のフォルダでOKです。

保存したファイルを開いてみましょう!
「index.html」をダブルクリックしてブラウザで確認してみてください。
現時点ではこのように表示されますサンプル

<head>~</head>にはホームページの情報を記述します。ここではtitle要素を使っています。これはホームページのタイトルを記述する部分になります。試しにtitle要素の中身に「テストホームページ」と入力してみましょう。
<html>
<head>
<title>
テストホームページ</title>
</head>
<body>
本文
</body>
</html>

入力ができたら、更新ボタンまたはF5キーを押してください。
ブラウザで確認してみるとブラウザの上の部分やタブの部分にタイトルが表示されているのが分かります。サンプル

<body>~</body>にはホームページの本文を記述します。
それでは見出しを記述してみましょう。見出しはh1~h6要素を使用します。注意しなければならないのはh1は1回しか使えないこと。h2以降は複数回使えるが、断層的に使わなくてはいけないということです。分かりやすく言うと本の目次のように使うという事です。

<html>
<head>
<title>テストホームページ</title>
</head>
<body>
<h1>テストホームページ</h1>
<h2>ホームページについて</h2>
<h3>練習1</h3>
<h3>練習2</h3>
<h3>練習3</h3>
<h2>リンク集</h2>
<h3>練習1</h3>
<h3>練習2</h3>
<h3>練習3</h3>

</body>
</html>


完成サンプル

h1が一番大きく、h6が一番小さい文字になります。h1~h6要素を使うと自動的に上下に空白が入り、改行されます。このような要素をブロックレベル要素と言います。

次に段落を作ってみましょう!段落p要素を使います。

<html>
<head>
<title>テストホームページ</title>
</head>
<body>
<h1>テストホームページ</h1>
<h2>ホームページについて</h2>
<h3>練習1</h3>
<p>段落の練習</p>
<p>段落の練習</p>
<p>段落の練習</p>

<h3>練習2</h3>
<p>段落の練習</p>
<p>段落の練習</p>
<p>段落の練習</p>

<h3>練習3</h3>
<p>段落の練習</p>
<p>段落の練習</p>
<p>段落の練習</p>

<h2>リンク集</h2>
<h3>練習1</h3>
<h3>練習2</h3>
<h3>練習3</h3>
</body>
</html>


完成サンプル

p要素も上下に空白が入り、改行されていますね。段落を作るp要素もブロックレベル要素になります。

次に改行する方法について説明します。ブロックレベル要素は自動的に改行されるのですが、普通の文字列や画像などのインライン要素は改行されません。インライン要素を改行するにはbr要素を使用します。p要素の練習1の部分を編集して改行の確認をしてみましょう。

<html>
<head>
<title>テストホームページ</title>
</head>
<body>
<h1>テストホームページ</h1>
<h2>ホームページについて</h2>
<h3>練習1</h3>
<p>
あいうえお<br>
かきくけこ<br>
さしすせそ

</p>
<p>段落の練習</p>
<p>段落の練習</p>
<h3>練習2</h3>
<p>段落の練習</p>
<p>段落の練習</p>
<p>段落の練習</p>
<h3>練習3</h3>
<p>段落の練習</p>
<p>段落の練習</p>
<p>段落の練習</p>
<h2>リンク集</h2>
<h3>練習1</h3>
<h3>練習2</h3>
<h3>練習3</h3>
</body>
</html>


完成サンプル

<br>のように終了タグが必要ないものを空要素と言います。

空要素は水平線を挿入するhr要素や画像を挿入するimg要素などがあります。



どうでしたか?

簡単でしょ!(^^)

この時点で、文字だけのホームページは作れちゃいます!
あとはサーバーにアップロードすれば公開することもできるんです。



ちょっとでもホームページ作成に興味を持った人は是非、いろいろ挑戦してみてください。

次回予告

次回は文字の装飾について練習したいと思います。


更新は未定です。

FTPとは?  FFFTPダウンロード  FFFTP設定方法  FFFTP転送方法  FFFTP使い方 
inserted by FC2 system