無料テンプレートでホームページ作成ウェブ講座 | 2008年02月

ウェブデザイナー的テンプレート
2008年02月

相互ブックマーク募集中

当サイトでは、Yahoo!ブックマークの相互ブックマークを募集中です!!

相互ブックマークとは、お互いのYahoo!ブックマークにブックマークし合うことです。
相互リンクのブックマーク版って感じです。。。)


YahooのIDを持っている人ならどなたでも利用できるYahoo!ブックマーク。
YahooのIDは無料で取得できます。

もし、Yahoo!ブックマークの相互ブックマークをして頂ける方は、
当サイトをブックマーク後、お問合せよりご連絡下さい。

こちらからもブックマーク致します^0^/

HTMLファイルとは!?&拡張子

HTMLファイルとは、
ホームページのデータファイルということはご存知ですか?
(拡張子は、×××.htm または ×××.html

みなさんお馴染みのWORDファイルは、×××.doc ですね?
エクセルファイルは、×××.xls
テキストファイルは、×××.txt
という感じです。

では、この拡張子とは何かご存知ですか?
(macユーザーの方はすみません)

拡張子とは分かりやすく簡単に言うと、
「パソコンがなんのデータファイルを理解する為のもの」なんです。
ファイル名にドット○○○と付きます。

では、ここで、1つ実践してみましょう。

今、現在のあなたのパソコン設定を確認してみます。
何を確認するのかというと
あなたのパソコンのファイル名の記述の設定確認です。

ファイル名に拡張子が無い人は、
以下の手順で拡張子を表示させて見てください。

1.スタートから「コントロールパネル」を選択
 (コントロールパネルは業界用語でコンパネです!!)
2.その中から「フォルダオプション」を選択
3.フォルダオプションタブの「表示」を選択
4.その中の「登録されている拡張子は表示しない」のチェックをはずす

これで、ファイル名に拡張子が表示されていると思います。


では、ここから実践本番です。

まず、デスクトップにサンプルファイルとして、
ファイル名が「test.txt」というファイルを作成して見て下さい。

そして、
このtest.txtをダブルクリックで開き、
そのファイルの中に、

<html> <head> <title>実践</title> </head> <body> おはよう!! </body> </html>

と記述して保存して下さい。
(コピー&貼り付けでOKです)
そして、
デスクトップ上でtext.txtを選択して、
このファイルの中身を確認しておいて下さい。
(書かれている内容は、次回説明します)

次に、ファイル名を変更してみます。
デスクトップ上のtext.txtを選択して、
短縮キーを利用する場合、キーボードの「F2」を押します。
そして、
ファイル名を「text.txt」→「text.html」でEnterを押して下さい。
すると、
「拡張子を変更しますか?」見たいな感じで、
聞かれますので、「はい」を選択します。

そして、
「text.html」を開いて見て下さい。
すると、

「おはよう!!」のみが
ブラウザ(InternetExplorer)で表示されていると思います。

TXTファイルだと、そのまま表示されたけど、
HTMLファイルだと、上記のように表示されたと思います。
(などは、HTMLタグと言われるもので、次回説明します)

これが、超基本的なHTMLファイルです。
このHTMLファイルをインターネット上にアップすれば、
あなたの作成したホームページが世界中の人に閲覧されることになります。


どうでしょうか!?
HTMLファイルは作成できたでしょうか?
実は、ホームページを作成するには、
HTMLファイルを作成してくれる優れたソフトがたくさんあります。
例えば、ホームページビルダーとかドリームウェーバーとか・・・。
でも、ここでは、実際にHTMLファイルを作成してもらって、
しっかりとWEBに関することを理解してもらう為、
極力ソフトを使った説明はしない予定です。

HTMLタグを使って、実際にHTMLを作成してみよう

前回は、HTMLファイルについて説明したので、
「拡張子がhtmlだったら、ホームページのデータファイルなんだ!!」
って感じで理解してくれたと思います。

では、今回は、その中身を理解して行きましょう。

まず、例として、HTMLファイルの中身に


<html> <head> <title>実践</title> </head> <body> おはよう!!<br> <a href="http://www.yahoo.co.jp">Yahoo!Japan</a> </body> </html>

と記述されているとします。

HTML(ホームページデータ)ファイルを記述する時には、
HTMLを記述する約束事がいくつかあります。

例で言うと、

まず、<>で囲まれたタグ(要素)というものがあります。
このタグによって囲まれた内容をプログラムが解釈して、
ブラウザ(Internet Explorer)で表示されます。

このタグさえ、理解すれば、
あなたは、WEBデザイナーの仲間入りです!!

HTMLタグの基本は、
<>   </ >という形です。
↑    ↑
開始タグ 終了タグ

分かりやすく説明すると、
「開始タグと終了タグの間のものは、タグの中に書かれた要素ですよ」
って言うことです。

例を挙げると、

<html> ~ </html>

これは、「開始タグから終了タグの間は、HTMLの記述です。」
って言うことになります。

なんとなく、分かって頂けましたか?

また、

<br /><title>実践</title>

これは、実践はタイトルタグに囲まれているので、
「このHTMLファイルのタイトルは、実践」
って言うことになります。

ちなみに、
タイトルとは、ウィンドウの上の部分(青い所)に表示されているやつ。

もうひとつ、
<a href="http://www.yahoo.co.jp">Yahoo!Japan</a>

これは、Yahoo!Japanは、<a>リンクタグに囲まれているので、
「Yahoo!Japanの部分は、リンク表示」
って言うことになります。

ちなみに、
href="http://www.yahoo.co.jp"とは、リンク先を指定するものです。


このようにHTMLを作成するには、タグで囲んで
リンクを貼ったり、文字を装飾したり、リストにしたり、
表にしたり、改行したりして、ホームページデータを作成していきます。


このタグの種類は、
とてもたくさんあって、ココでは、紹介しきれないので、
HTMLタグを紹介しているサイトの一部をココでは紹介しておきます。
時間の空いている時にでも見てみてください^0^/

画像のファイル形式

画像などは、
ホームページ上で表示させる為に知っておかなければいけません。

画像の種類は、
一般的に、GIF形式やJPG形式が一般的です。

そして、
画像ファイルはテキストファイルに比べて、
ファイルサイズが大きく、
ホームページ上に表示させるのに時間がかかる為、
ファイルサイズを小さくするを考える必要があります。


[代表的な画像ファイル]

■GIF形式
 ・拡張子  .gif
 ・色数   256色
 ・特徴   Graphics Interchange Format の略
       色数が少なくフィアルサイズを小さくすることができる。
 ・画像種類 イラスト、アイコン、ボタンなど

■JPG形式
 ・拡張子  .jpg
 ・色数   1670万色
 ・特徴   Joint Photographic Experts Group の略
       非可逆圧縮方式の為、圧縮後もとの画像に戻せない
       GIFファイルに比べて表示に時間がかかる
       (ブラウザが圧縮から復元を行う為)

■PNG形式
 ・拡張子  .png
 ・特徴   Portable Network Graphic の略
       フルカラーを使えて、高圧縮率

お気に入りボタン設置

お気に入りボタンを設置する方法。

お気に入りに登録してもらえば、リピーターとなってくれますよ。。。
アクセスアップには欠かせないパーツですね!!

<input type="button" class="favorite" onclick="window.external.addFavorite('■サイトURL■','★サイトのタイトル★')" value="お気に入りに追加" />

■サイトURL■にはURLを
★サイトのタイトル★には、タイトルを入れる。

ファイルの階層構造の管理

ホームページを作成するときに理解しておかなければいけないのが、
ファイルの管理です。

作成したファイルは、
フォルダ(ディレクトリ)と呼ばれるものに格納します。

ファイルが増えると整理する為に、
フォルダを作成して、また、そこに格納して整理します。

ホームページの作成では、
ファイルの置き場所を正確に把握しておく必要があるので、
このファイル管理はしっかり理解しておきましょう。


トップページ
  └image
  | └ロゴ画像
  | └写真画像
  └CSS
  | └スタイルシート
  └js
  | └jacascriptファイル
  └profile.html
  └sitemap.html
  └contact.html
     :

絶対パスと相対パス

パスとは、分かりやすく言うと、
指定したファイルやディレクトリまでの道のりのことです。
リンクを設置するときには分かっていないと
リンクを設置することはできません。


・絶対パス
 ⇒ フルパスとも言われ、その名の通りURL全てのこと。
   http://hp.riristyle.com/

・相対パス
 ⇒ 今の場所から、目的地の場所までの道のりのこと。
   ./    現在の場所を表す
   ./image/ 現在から階層が1つ下(image)を表す
   ../    現在から階層が1つ上を表す

phpでのメール送信

phpでのメール送信は、下記のソースをコピペして利用出来ます。

以下、4つの項目を設定して下さい。
$to = "■メール送信先のメルアド■";
$subject = "■メールのタイトル(メールの件名)■";
$body = "■メールの本文■";
$from = "■メール送信元のメルアド■";


ソースサンプル
//メール送信あて先 $to = "■メール送信先のメルアド■"; $subject = "■メールのタイトル(メールの件名)■"; $body = "■メールの本文■"; $from = "■メール送信元のメルアド■"; //メールヘッダー設定 $headers = "MIME-Version: 1.0\n"; $headers .= "Content-type: text/plain; charset=Shift_JIS\n"; $headers .= "X-Priority: 3\n"; $headers .= "X-MSMail-Priority: Normal\n"; $headers .= "X-Mailer: php-script\n"; $headers .= "From: $from\n"; $headers .= "Subject: $subject\n"; //メール送信 mail($to,$subject,$body,$headers);

スタイルシートの外部ファイル化

スタイルシートを外部ファイル化するには、
headタグ内にスタイルシートのファイルをリンクさせるだけでOKです!!

外部ファイル化することによって、
ソースがシンプルになり、
ホームページの運営が簡単になったり、
SEO効果がありますよ。

サンプルソース <link rel="stylesheet" href="スタイルシートのファイルパス" type="text/css"> 例 <link rel="stylesheet" href="./css/style.css" type="text/css">

【作成】【習得編】HTML・タグとは!?

HTMLの習得のコツは、自分で記述して、実践することです!!
これは、自信を持って言えます。
(個人差はあると思いますが・・・^^;)


HTMLのタグを自由に使えるようになれば、
75%はウェブデザイナー(ホームページ作成者・運営者)です!!

是非、めんどくさがらず自分でタグを記述して実践してみてください。
1週間後には、ウェブマスターになっていると思います!!



まず、HTMLファイルとは、ホームページのデータファイルということはご存知ですか?
(拡張子は、×××.htm または ×××.html)

みなさんお馴染みのWORDファイルは、×××.doc ですね?
エクセルファイルは、×××.xls
テキストファイルは、×××.txt
という感じです。


では、ここで、1つ実践してみましょう。

もし、自分のパソコンのファイル名に拡張子が表示されて無い場合は、
【準備】【環境編】ホームページを作成する前の基礎」を参照して
パソコンの設定を変更して下さい。

では、ここから実践本番です。

まず、デスクトップにサンプルファイルとして、
ファイル名が「test.txt」というファイルを作成して見て下さい。
右クリックでテキストファイル作成
[右クリックでテキストファイル作成]

そして、
このtest.txtをダブルクリックで開き、
そのファイルの中に、
<html> <head> <title>実践してみよう</title> </head> <body> おはよう!! </body> </html>
と記述して保存して下さい。
(コピー&貼り付けでOKです)
ソースを記述

そして、デスクトップ上でtext.txtを選択して、ファイル名を変更します。

デスクトップ上のtext.txtを選択して、
短縮キーを利用する場合、キーボードの「F2」を押します。
ファイル名変更

そして、ファイル名を「text.txt」→「text.html」でEnterを押して下さい。

すると、「拡張子を変更しますか?」って感じで、聞かれますので、「はい」を選択します。
拡張子を変更しますか?

そして、「text.html」をダブルクリックして、開いて見て下さい。

「おはよう!!」のみがブラウザ(InternetExplorer)で表示されていると思います。
ブラウザ(InternetExplorer)で表示

この今の作業がホームページを作成する超基本的な作業です。

これをネット上にアップすれば、
全世界中の人が「おはよう!!」というページを見ることが出来ます。

また、テキストファイル(text.txt)の時に記述した、
<html> <head> <title>実践してみよう</title> </head> <body> おはよう!! </body> </html> この英語や記号で書かれたものをソースと言います。
日本語に訳したら、「源、起源」みたいな意味です。
ホームページは、このソースによって、ネット上で表示されます。

このHTMLのソースは、タグというものによって作られていて、
このタグによって、ページの内容を把握します。

ですので、このタグさえ理解してしまえば、ホームページを作成できることになります。

fontタグ

font タグとは、なんとなく分かるかもしれませんが、
テキスト(フォント)の種類や大きさ、色などを指定します。


[フォントタグの主な属性]

フォントの種類 face
フォントの大きさ size
フォントの色 color


[使用例]
<font size="1">おはよう</font> <font color="#00FF00">おはよう</font> <font face="MS 明朝">おはよう</font> <font size="5" color="#FF0000">おはよう</font> <font size="7" color="#0000FF" face="MS 明朝">おはよう</font>
これらをコピー&貼り付けして、
実際の表示を確認してみてください。
フォント表示がそれぞれ変わっていると思います。

CGIとは

CGI読み方 「シージーアイ」
別名 なし
フルスペル 【Common Gateway Interface】

Webサーバが、Webブラウザからの要求に応じて、プログラムを起動するための仕組み。従来、Webサーバは蓄積してある文書をただ送出するだけであったが、CGIを使うことによって、プログラムの処理結果に基づいて動的に文書を生成し、送出することができるようになった。現在ではほとんどのWebサーバソフトがCGIに対応している。CGIはどのような開発言語でも使用できるが、実際にはPerlなどがよく使われる傾向にある。CGIに類似した技術にはSSIやASPなどがある。

HTMLとの違いは。。。

HTML・・・静的なもの
CGI・・・動的なもの

主にperl言語を使ってプログラムを記述するため、
CGIのプログラムを動かすには、
Webサーバーにperlがインストールされている必要がある。

レンタルサーバーなどを使用する場合には、
perlがサーバーに入っていることを確かめる必要があります。

【準備】【知識編】ホームページを作成する前の基礎

ホームページを作成する前に最低限知っておくことがあります。

まず、ホームページというのは、HTMLというデータで作られます。
(拡張子が .html.htmとなります)
IE

このHTMLを作成する時は、特別なソフトなどは不要です。
(メモ帳やテキストエディタで作成できます^0^/)

例えば、ワードやエクセルを作成する場合、
ウィンドウズオフィスのソフトをパソコンにインストールする必要がありますが、
HTMLを作成する場合は、特にソフトなどは不要です。
(作業を効率良くする為にソフトを使うことはありますよ^0^/)

ホームページを作成するソフトで有名なものは、
・ホームページビルダー
・Adobe Dreamweaver
などがあります。

そして、パソコン内でHTMLを作成した後、
インターネット上にアップロードします。

すると、パソコン内で作成したHTMLをネット上で見ることが出来ます。

だから、ホームページを作成する時は、
特に、専用のソフトが絶対必要という訳ではありません。

ある程度の知識さえあれば、誰でも簡単に作成出来ます!!
(最近、主婦の方でもよくホームページを立ち上げているのを見ると思います。。。)

その「ある程度の知識」というのが、HTMLタグというものです。
ただ、HTMLタグというのは、たくさんの種類、使い方があります。
(100以上のタグがあるかもしれません^^;)

でも、これらを全て覚える必要はありません。
(もちろん、自分も知りませんし、そんなにたくさんのタグは使いません!!)

タグを覚えるのは、10個前後ほどで良いです!!

10個前後のタグさえ覚えれば、
ホームページを自力で作成して、運営することが出来ます!!


なぜなら、タグというのは、扱い方が決まっています
だから、タグの扱い方さえ理解すれば、
ぶっちゃけ、タグなんて、1つも覚えなくても良いくらいです。

タグを使いたくなったら、ネットで調べれば、すぐに出てきます。
だから、
・頻繁に出てくるタグ(10個前後)
・タグの扱い方


を理解するだけでOKだということを知っておいて下さい。
自分も本業がウェブを制作するウェブデザイナーで、毎日ホームページ制作していますが、
そんなに、たくさんのタグを覚えていません^^;

タグを1つでも多く覚えるくらいなら、
ホームページのアクセスアップ ↑ の方法を調べた方が良いと思いますし、
特に必要ないと思っているので、これから特に習得しようとは思っていません!!

初めての方は、タグに対する抵抗感があるかと思いますが、
多少触って慣れれば、逆にホームページを作成するのが楽しくなってくると思います。

タグさえ理解すれば、あとは、あなたのデザインセンスだけです!!

【準備】【環境編】ホームページを作成する前の基礎

ホームページを作成する為の環境は、

ずばり・・・
パソコンとインターネットできる環境さえあればOKです!!

必要なソフトと言えば、
ネット上にHTMLをアップロードする為のソフトくらいです。
(アップロードする為のソフトFTPFFFTPが一般的です)
このFTPソフトも無料でネットからダウンロードできます。

だから、誰でもホームページを作成し、コストをかけずに運営できると思います^0^/


パソコンの設定について

ファイル名に拡張子が無い人は、
以下に従って、ファイル名に拡張子を表示させて下さい。

【1】スタートから「コントロールパネル」を選択
   (コントロールパネルは業界用語でコンパネです!!)

【2】その中から「フォルダオプション」を選択
  「フォルダオプション」を選択

【3】フォルダオプションタブの「表示」を選択
  「フォルダオプション」表示タブ

【4】その中の「登録されている拡張子は表示しない」のチェックをはずす
  チェックをはずす

ホームページ作成後、まずやること

ホームページを作成したら、
次に、ホームページに訪問者を集める為の工夫をします。
せっかくホームページを作成しても訪問者が無いと、
ホームページを開設した意味がないですからね。。。

で、まず、訪問者を集める為の第1段階として、
検索エンジンに登録するということを実施します。

実は、インターネット利用者のほとんどが、
Yahoo!JAPANやgoogleの検索エンジンを利用しています。

ということは、検索エンジンの検索結果に表示されれば、
ホームページに訪問者を呼ぶことが出来ます。

まず、検索エンジンの検索結果に表示される為に、
検索エンジンにサイト登録をします。

googleに登録

googleサイト登録
http://www.google.co.jp/addurl/?hl=ja&continue=/addurl


Yahooに登録

YahooIDでログイン後、
検索エンジン用ロボットの巡回先への推薦
http://submit.search.yahoo.co.jp/add/request

【tmp001】SEO無料シンプルテンプレート

第1弾が完成しました。



下記より、ダウンロードできますので、よろしくお願い致します。


⇒ テンプレート001

【アップロード】【FTP】HTMLファイルをアップロード

ホームページデータ(HTMLファイル)を作成したら、
その作成したファイルをインターネット上にアップします。

その際、利用するのがFTPFFFTPというソフト!!

このソフトは、自分のパソコンのファイルをサーバーにアップするソフトです。
ネットでフリー(無料)でダウンロードできるので、大変便利です。
↓こちらからダウンロード
http://www2.biglobe.ne.jp/~sota/ffftp.html
FTPのダウンロード

ダウンロード後、インストールをして、FTPを開くと、

FTPの設定
このような画面がでます。

ココの赤枠(ホスト名・ユーザー名・パスワード)を設定さえすれば、
次回からはいつでも簡単にネット上にアップできるようになります。

【ホスト名】接続する(アップする)サーバー名
【ユーザー名】このサーバーに接続するユーザー名
【パスワード】 このサーバーに接続するパスワード
この3つの情報があれば、FTPを使ってネット上(サーバー上)にファイルをアップできます。

(このFTP情報が分からないと、ネット(サーバー)にアップできません!!)

リンクについて

当サイトでは、リンクフリーとなっています。

ご自由にリンク設置して頂いても構いません。

リンクを設置して頂いたサイトには、お問い合わせ頂ければ、
素敵なプレゼントもご用意しています。
リンク設置して頂いた方は、お問い合わせよりご連絡下さい。

また、リンクを設置する際、下記情報をご利用下さい。

【サイト名】無料テンプレートでホームページ作成ウェブ講座
【URL】http://hp.riristyle.com/

バナー
無料テンプレートでホームページ作成ウェブ講座
88*31

テンプレートの利用方法

テンプレートの利用方法は・・・

テンプレート一覧より、
お好みのテンプレートをダウンロードして頂き、 自分用にカスタマイズして、ご利用頂きます。

当サイトにて、提供しているテンプレートは、
各ページを自分用にカスタマイズする必要があります。
(自分で運営する為にも自力でカスタマイズできることが必要です)

当サイトは、
『コストをかけずにホームページ運営する』ことを目標としていますので、
是非、カスタマイズにチャレンジして下さい^0^/

カスタマイズ方法については、各テンプレートの説明ページにて、ご紹介していますので、
そちらを参考にして下さい。

無料テンプレート利用規約

テンプレートをDL(ダウンロード)した時点で規約に同意したものとみなします。
また、利用規約は、予告なしに改訂することを了承ください。

カスタマイズについて

カスタマイズは、自由に行うことができます。
ただ、カスタマイズしたことによるバグなどはサポートできない場合があります。


著作権について

著作権は放棄していません。
テンプレートには、必ず当方へのリンクを設置させて頂いています。
リンク部分に関しては、改変・削除は固く禁止致します。

著作権表示を消したい方へ
どうしても著作権を表示させたくない場合は、管理人までご連絡下さい。
出来る限り対応したいと思います。
ただし、連絡が無いにもかかわらず、著作権表示が無い場合には、違反とみなします。


テンプレートの再配布について

より、多くの方にご利用頂きたい為、
当サイトのテンプレートは、再配布可能となっております。
ただし、再配布する際には、
お問い合わせより、ご連絡をお願い致します。
また、テンプレートの著作権は放棄していませんので、
著作権表示の改変・削除は絶対にしないで下さい。


免責事項

テンプレートを利用頂くことによるトラブル・バグ・不具合・データの紛失などに関しては、一切の責任をおいません。
自己の責任にて、ご利用ください。

利用者・モニター募集

テンプレートを活用して頂いた方の事例を紹介していく為、
現在、モニターを募集しています。

是非、お問い合わせより管理人にご連絡下さい。
様々な特典を用意しています。

初めての方へ

当サイトは、無料でテンプレートを配布しています。

なぜ、無料かと言うと、

『コストをかけずにホームページを運営する』
ということが、最大の目的だからです。

その為、テンプレートは、こちらで用意した無料のものを利用し、
そのテンプレートを使いながら、
自力でホームページを運営する為の知識・技術を身に付けることができます

ホームページをしっかりと運営して行くには、
WEB制作会社にお願いすることが一番良いですが、
コストをかけれない中小企業の方にはお勧めだと思います。

また、ホームページに関する知識や技術の習得にもご活用下さい。

なお、テンプレートに関しては、再配布を許可しております。
(再配布とは、ダウンロードしたテンプレートを加工して、再び配布することです)
ただし、著作権は放棄していませんので、著作権表示は改変・削除できません。

利用規約さえ、守って頂ければ、
テンプレートを加工して自分で利用しても、再配布しても構いません。

一人でも多くの方に、利用して頂く為に、是非、ご活用下さい。
よろしくお願いします。

ご利用ガイド

当サイトは、無料テンプレートを使用し、
ご利用・ご活用下さい。

テンプレートは、全て無料となっております。

また、テンプレートは、ご利用規約を守って頂ければ、
使い方は、自由です。

是非、ご活用下さい。

お困りの方へ

ホームページに関することで、お困りの方は、
お気軽にご連絡下さい。

テンプレートの編集・改変に関するご相談なども受け付けております。

また、ホームページの無料SEO相談も受け付けていますので、
是非、ご連絡下さい^0^/

【準備】【手順編】ホームページを作成・運営手順

【準備】【知識編】ホームページを作成する前の基礎
【準備】【環境編】ホームページを作成する前の基礎のところで、

「簡単そうだから自分でも出来そうだ!」と思いませんでしたか!?

分かってしまえば、超簡単です。
手品も同じ感じですね。。
タネが分かってしまえば簡単簡単!!

でも、いざ、ホームページを作成しようとしても何から始めればよいのか分からないと思います。

そこで、実践する前にホームページの作成・運営手順を説明したいと思います。
(ここでは、流れだけ説明するので作業の細かい内容は、以降で説明致します)

   まず、初めに、全くゼロから初めても良いのですが、
   テンプレートがあるので、せっかくだから使いましょう。
   ということで、テンプレート一覧から好きなものをダウンロードします。
   
【1】圧縮されたファイルをダウンロードしたら、それを解凍します
【2】htmlファイルを自分のホームページ用に更新します
【3】更新が完了したら、FTPを使ってファイルをネット上(サーバー)にアップします
【4】サーバーにアップしたものが実際に、ネットで見れるかURLを入力して確認します

   これで、ホームページ作成が完了!!
   
   以下は、ホームページに修正や追加があった場合・・・
   
【5】自分のパソコンの中にあるHTMLを修正します
【6】修正が完了したら、それをFTPを使ってアップします
   
   これで、ホームページ修正が完了!!

このような流れが基本的なホームページ作成と運営の流れです。

要は、『自分のパソコンでHTMLを作成して、ネットにアップする』これだけですね!!

流れが分かれば、あとは、

HTMLファイルさえしっかり作ることが出来れば、
ホームページの作成や修正・追加なども出来ます。

【作成】【実践編】HTML タグの記述

ここでは、HTMLの文書構造に関するタグを説明します。
<HTML>,<HEAD>,<BODY> の3種類のタグで文書の構造を定義します。


■ htmlタグ
  ⇒ HTML文書であることを宣言
  HTMLタグの開始タグと終了タグに囲まれた中に、
  HTMLが記述されています。という意味です。
<html> ~ </html>
■ headタグ
  ⇒ HTML文書のヘッダ情報を表す
  HTML文書のヘッダには、作者情報、キーワード、説明、タイトルなどを
  記述します。
<head> ~ </head>

  【使用例】   <head>   <meta http-equiv="Content-Type" content="">   <meta name="author" content="■■■">   <meta name="keywords" content="●●●,▲▲▲,■■■">   <meta name="description" content="ウェブデザイナーになろう!!">   <title>文書のタイトル</title>   <link rel="stylesheet" href="●●●.css">   </head> ■ metaタグ
  ⇒ HTML文書に関する情報(メタ情報)を指定する
  ・文字コード
  ・文書の作者「author」
  ・キーワード「keywords」
  ・文書の説明「description」
  ・検索ロボットの制御「robots」
  ・スタイルシート言語とスクリプト言語
  ・文書を作成したエディタ「generator」

■ bodyタグ
  ⇒ HTML文書が実際にブラウザ上に表示される部分を表す
<body> ~ </body>

今回紹介したタグで記述する使用例。

<html> <head> <meta http-equiv="Content-Type" content=""> <meta name="author" content="johnny"> <meta name="keywords" content="アフィリエイト,相互リンク"> <meta name="description" content="ウェブデザイナーになろう!!"> <title>実践</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>HTMLタグ</h1> おはよう!! </body> </html>
今回紹介したタグは、
実は、SEO(検索結果上位表示)でもとても重要になってきますので、
是非、ある程度は、理解しておいてください^0^/

« 2005年01月 | home | 2008年03月 »