SHOP SIDE

ホームページの基礎知識
1分で作ろう!

まずホームページの仕組みを簡単に理解できるように、
簡易ホームページを作成してみましょう。



< 基本編 1分で作ろう! >

作業1: 用意するもの


・テキストエディタ

■ Windowsをご使用中の方は、次の手順でメモ帳を開いて下さい

「スタート」→「プログラム」→「アクセサリ」→「メモ帳

メモ帳

■ Macintoshをご使用中の方は、お手持ちのテキストエディタを開いて下さい。(よく分からないもので)


作業2: コピーして貼り付け

それではテキストエディタが用意できたら、早速作ってみましょう。
下の記述をコピーし、テキストエディタに貼り付けて下さい。

※<html>〜</html>をコピーします(内容の説明はページの最後)
※開始タグ< >〜終了タグ</> は全て半角英数です

<html>
<head>
<title>ようこそABCショップへ</title>
</head>

<body bgcolor="#0080FF" text="#FFFFFF">
<strong><font color="#FFFF00">

<p align="center">ようこそABCショップへ</font></strong></p>

<p align="center">ごゆっくりどうぞ</p>
</body>
</html>



作業3: HTML形式で保存します

コピーが終わったら、HTML形式で保存を行います。
「ファイル」→「名前を付けて保存」を選択して下さい。(Winの場合)

名前を付けて保存

続いて保存ファイル名を入力します。
ファイルの名前を、
index.html とします。
(必ず半角文字です。 ドット
. を忘れないようにして下さい)

名前を付けたら、デスクトップなどの分かりやすい場所に保存をして下さい。

ファイル名を付けて保存

 

確認: 保存したホームページを見てみます

では、保存したファイルをWクリックして開いて下さい。

先程コピーした<html>〜</html>がブラウザーに認識され、ホームページとして表示されたと思います。

ホームページはこういった仕組みでできています。
もちろん、先程コピーした<html>〜</html>のような記述は、ホームページ作成ソフトを使用すれば特に覚える必要はありません。

※ <html>〜</html>の間に書かれている記述のことをHTMLタグと呼び、文字の大きさや色、画像を貼ったり、リンクを貼ったりと、様々な指定方法が決められています。

それでは、続いて応用編をご覧になりたい方は、下の説明をご覧下さい。
       

 


< 応用編1 画像の貼り付け>

ホームページ作成ソフトを使用すると、画像の貼り付けや文字色、背景色の変更などはドラッグ&ドロップや、アイコンボタンの操作で簡単に行えます。ここでは、仕組みを少し理解していただくために、HTMLソースを手作業で変更し、実際のホームページの表示の変化を見ていただきたいと思います。

これが上手くいけば、ホームページ作りも少し楽しく感じるかもしれません。
(ホームページ作成ソフトを使用しなくても、こういった手入力のやり方で作成することもできます)

画像の貼り付け

それでは、先程作成したホームページに画像を表示させてみましょう。まず、下にある画像をデスクトップ(作成したHTMLファイルと同じ場所)に保存して下さい。

右クリックから保存

画像の上で右クリックをし、
「名前を付けて画像を保存」を選択します。(ファイル名:PC.GIF)

 

画像の貼り付けタグを追加する

先程<html>〜</html>をコピーした要領で、下の記述をコピーし、テキストエディタに貼り付けます。

<html>
<head>
<title>ようこそABCショップへ</title>
</head>

<body bgcolor="#0080FF" text="#FFFFFF">
<strong><font color="#FFFF00">

<p align="center">ようこそABCショップへ</font></strong></p>

<p align="center"><img src="pc.gif" width="86" height="62" alt="PC画像"></p>

<p align="center">ごゆっくりどうぞ</p>
</body>
</html>

赤文字の部分が、新たに画像を貼り付けるための指定です。

それでは、先程と同様にHTMLファイルとして保存をし、Wクリックして作成したホームページを開いて下さい。


画像が表示されない方は、画像の保存場所を確認して下さい。
画像はHTMLファイルと同じ場所に保存します。

<さらに応用>

1:現在画像がある場所に、img というフォルダを作成し、その中に画像を入れて下さい。

2:<img src="pc.gif" width="86" height="62" alt="PC画像">
の部分を、下記のように書き換えると、imgフォルダの中の画像が表示できます。

<img src="img/pc.gif" width="86" height="62" alt="PC画像">

img/ は、imgフォルダの中、という意味になります。


作成したホームページはインターネット上のホームページサーバーへ転送しますが、このようにフォルダを作成し、画像などをひとまとめに入れておくと管理がし易くなります。

 


< 応用編2 色の変更>

色の指定は、#FFFFFF などのように #****** という書式で入力します。この指定は16進数による色指定と呼ばれ、その他にもredやblack、blue、whiteといった指定方法もできます。

例)
#FFFFFF  =  white
#000000  = black
#FF0000  =  red
#0000FF  =  blue  ※white〜blueなどの時は#は入れません

参考: 「とほほのWEB入門」色見本サンプル

 

色の変更

それでは、実際に色を変更してみましょう。
作成したホームページでは、背景色は水色、文字の基本色は白で指定されています。

背景色を赤に変更

<body bgcolor="#0080FF" text="#FFFFFF">

<body bgcolor="#FF0000" text="#FFFFFF">


背景色は赤に変わりましたか?
このように、#****** の部分を変更すれば、簡単に色を変更することができます。基本編のホームページでは、色の指定箇所が3カ所ありますので、それぞれ色を変更してみて、色の組み合わせなどを試してみて下さい。



今回使用したHTMLタグ

<html> 
<head>
<title>ようこそABCショップへ</title>
</head>

<body bgcolor="#0080FF" text="#FFFFFF">
<strong><font color="#FFFF00">

<p align="center">ようこそABCショップへ</font></strong></p>

<p align="center"><img src="pc.gif" width="86" height="62" alt="PC画像"></p>

<p align="center">ごゆっくりどうぞ</p>
</body>
</html>


使用したHTMLタグの説明


<html>〜</html>
 HTMLの決まりごとです最初と最後に記入

<head>〜</head>
 ヘッダー部分:タイトルやサーチエンジン用の用語もここに書きます。スタイルシート、JAVAスクリプトなどの書き込みも。

<title>〜</title>
ページのタイトルです

<body bgcolor="#0080FF" text="#FFFFFF">
 BODYタグ部。 ページの基本文字色、基本リンク色、背景色、背景画像などをここで指定します。

<font color="#FFFF00">〜</font>
文字色の指定

<p align="center">〜</p>
 <p>〜</p>は改行、centerはセンタリング
 一行改行の場合には<br>と記述します。

<strong>〜</strong>
 このタグで挟まれた文字は強調文字(太字)になります。
 <b>〜</b>でも同じような表示になります。

<img src="pc.gif" width="86" height="62" alt="PC画像">
 画像の貼り付け指定です。img src=http://〜 とすると、他のサーバーにある画像も読み込むことができます。
alt=" "は画像の代替表示用の文字、マウスポインタを当てた時にも説明として表示されます。<img src="pc.gif">だけでも表示はできます。(終了タグはありません)


※< >は開始タグ、</ >は終了タグです。
< >〜</ >の間が指定範囲になります。 

 

このページのトップ

 

 

[ TOP ] [ 1分で作ろう!] [ 必要なもの ] [ 画像について ]

[ テクニック ] [ 注意する点 ] [ リンク集 ]

 

[ HOME ]

 

 


Copyright All Right Reserved(C), SHOPSIDE

 

 
SEO [PR] 爆速!無料ブログ 無料ホームページ開設 無料ライブ放送