ホームページの作り方(メモ帳編) | Webクリエイターのデジタル日記

Webクリエイターのデジタル日記

パソコン&webデザインの四方山話

ホームページを作るハードルというのはきわめて低く、簡単な画像ソフトとメモ帳さえあれば作る事が出来ます。

基本的な「タグ」というのはこれだけダウンです。


メモ帳は「スタートメニュー」からすべてのプログラム→「アクセサリ」「メモ帳」と選ぶことで表示されます。


------------------------------


<html>

<head>

<title></title>

</head>

<body>


</body>

</html>


------------------------------

見て気がつくと思いますが、すべてが<>出始まり</>で終わっています。

コレが開始タグと終了タグというもので、基本になるのはこれだけです。


<html>と言う部分が、これがHTML文書であるという始めと終わりの宣言です。

<head>部分はヘッドと呼ばれ、この範囲内にJavaやCSSの記載をします。

<title>はタイトルでここに書いたものが,ブラウザの一番上に表示されるタイトルになります。

<body>無いに書いたものが,ブラウザの表示部分となりここに記入したものが表示されます。


上記タグをメモ帳にコピーし、先ずは<title>と</title>の間にタイトルを入れて見ましょう。ここでは「私のサイト」としてみます。


<body>内には「見出しタグ」や「段落」「画像」などで構成します。

<h1>~<h6>とh(ヘッダ)で始まるのが見出しタグで、章や節を作ります。


<h1>が大見出しで一つのHTMLファイル内にひとつとし、<h2>→<h3>→<h4>と順番につけていきます。

順番を逆にしたり,飛ばしたりするのはNGです。


<p>タグは(パラグラフ)段落タグで、一つの段落をこれで囲みます。

<img>(イメージ)タグは画像の表示をするタグです。


------------------------------


<html>

<head>

<title>私のサイト</title>

</head>

<body>

<h1>大見出しタグ</h1>

<p><img src="test.jpg" width="64" height="64" alt="test">段落のテスト</p>

</body>

</html>


------------------------------


このように入力出来たら、メモ帳を「test.html」のファイル名で保存しましょう。

「ファイル」から「名前をつけて保存」を選んで入力しましょう。

ファイル名がちゃんとhtmlになっていればアイコンがブラウザのものに変わります。拡張子を表示しない設定になっていると「test.html.txt」などになっていて、テキストファイルで保存されてしまいますのでちゃんとhtmlファイルで保存して下さい。

ここでは画像ファイルを作っていないので、このように表示されると思います。


Webクリエイターのデジタル日記-htmlの練習

ここでの画像は64×64pixのサイズで指定してありますから画像本体が無くてもその大きさを示しています。ブラウザによっては画像サイズを指定しても画像がないと大きさを表示しないものもあります。


画像を作って見たい方は、画像を扱えるソフト(ペイントでも可)で作って同じ階層に「test.jpg」で保存すれば表示されます。


今回はここまでチョキ