TOP PAGEThe_use_of_HTMLDiaryManualSupport BBSWebLinkMail

BACK

 

ホームページを公開する

何が必要? ページを製作する 実際に作る テクニック? 掲示板を設置 アクセスアップ 注意する事 使えるソフト おこずかい 


透過GIF

何が必要?

ホームページ(以下ページ、Web Page が正確な表現らしい)を製作するには、何を揃えると良いか
一般的?なのが、市販のホームページ製作ソフトも使う場合、アイコンや画像ばど、Web用に使える素材などがソフトに入っていますので使いやすいです
予算を掛けないで製作する場合、必要なものは、OS付属のテキストエディタで十分です。
ツールを揃えるならフリーでメモ帳より高性能なテキストエディタもあります。
これには、タグと呼ばれる記述を覚える必要があります。タグについては、書籍、Webで検索掛けて調べてください
公開するには、一般的に、契約しているプロバイダやフリー、有料で公開するスペースを提供する場所(サーバー)に製作したHTMLを転送する必要があります。
サーバーに転送するソフトをFTPと呼びこのソフトも用意します。
ここで、注意する事は、公開するサーバーを利用するに当たっての注意点を事前に調べておく事も大事です。
せっかく作ったのに規約に反する、使用できない事がないようにします。(FTPで転送できない所もある)
また、公開する場所のサポート等も見るようにしましょう。サポートには、使用するソフトの転送例を書いてあったりしますので紹介してあるソフトを使うと、設定例を理解できるソフト(使用するソフトをダウンロードできるページへのリンクが貼られていたりします。)を利用すると設定で迷うことなく転送できる??

UP

透過GIF

ページを製作する

ここでは、Windowsでテキストエディタを使用した例で進めていきます。
一般的にホームページと呼ばれているものは、(アドレスの最後がhtml、htm)Hyper Text Markup Language(HTML)
ブラウザによるWebページの文字や画像などの表示を制御するためのマークアップ言語がHTMLと呼ばれ、このHTMLによって、書かれています。
HTMLは、Web上で詳しく紹介されたページや書籍(タグ辞典)で調べる事ができます。
製作には、メモ帳起動>HTML記述>拡張子htmlで保存>実際にブラウザで確認する作業の繰り返しになります。
保存したファイルを再編集する場合、Internet Explorerで開き、ツールバーの編集ボタンか、右クリックしソースの表示(V)>ソースを編集し保存>ブラウザの更新ボタンを押す。>確認の繰り返しです。(ソースの表示の仕方は、HTMLファイルをアプリケーションからテキストエディタで直接開く方法もあります。)
デザインについては、自分の琴線に触れたページをマネする事から始めといいでしょう
ただし、パクリはいけません。ここでのマネは、配色、画像、テキストの表示位置等を自分なりに似たように配置する事です。
例えば、CDジャケットのデザインが気に入ってとして、実際にHTMLで再現できるか解りませんが
実際に製作されているモノがあるので気に入ったページをお手本にデザインを似たものにできます。
ただし、デザインに力を入れて特定のブラウザに依存しないように注意しましょう。

UP

透過GIF

実際に作る

以下のタグをコピーアンドペーストでテキストエディタに貼り付けindex.htmlで保存してみましょう。
ちなみに、indexは、「http://公開するサーバー名/ユーザー名/」で終わったアドレスの場合最初に表示されるページの事です。
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=shift_jis">
<TITLE>サンプル</TITLE>
</HEAD>
<!--shift_jisは、文字コード。文字コード変えた場合変更-->
<BODY bgcolor="#660066" link="#cc0033" vlink="#66cccc" alink="#660066" text="#000000">
<!--ページ本文ここから-->
<P>テスト製作</P>
<Font color="red" size="5" face="MSPゴシック">表示されるかな??</Font><br>
<!--ページ本文ここまで-->
</BODY>
</HTML>
実際にコピペした部分(<BODY>〜</BODY>内)
UP

透過GIF

テスト製作

表示されるかな??

テスト製作をコピー&ペーストした部分

UP

透過GIF

テクニック?

良くあるテクニック

<Font color="#640000">グ</Font><Font color="#800000">ラ</Font>一文字ごとにフォント色を変えるサンプルは、見やすいようにテーブルで背景色を指定
テーブルの背景に色を使い文字色をBODYで指定した色を使う
<BODY bgcolor="#ff33ff">
<TABLE>
<tr><td bgcolor="#fff00"><Font size="4" color="#ff33ff">テーブルの背景に色を使い文字色をBODYで指定した色を使う</Font></td></tr>
</TABLE>
<CENTER>センタリング</CENTER>

特定のスペースを作る
縦30ピクセル、横300ピクセル透過GIF透過GIF30×300ピクセルでイデント中
<IMG src="画像の場所/名前.拡張子" width="300" height="30" alt="縦30ピクセル、横300ピクセル透過GIF">
文字で表現が、難しい場合画像で代用する
特定の機種に依存するテキストなど機種依存文字
テキストテーブルの背景画像の上にテキスト表示
丸い角などは、HTMLでの表現が難しい

上のサンプル
<TABLE>
<tr><th colspan="6" background="./06.gif" width="67" height="67"><Font size="2">テキスト</Font></th><td>テーブルの背景画像の上にテキスト表示<br>
丸い角などは、HTMLでの表現が難しい</td></tr>
</TABLE>

Java Script、Cascade Style Sheetを使うとHTMLで表現できない動きがあるページができるがブラウザによる依存が多い

編集時に役立つ事
ソースは、できるだけ一行で書く、これは、好みですが、ソースは、できれば見やすく書いておいた方が編集時に便利です。
画像、ファイルは、フォルダ分けすると編集に便利。欠点は、アドレスが長くなる(このページは、webフォルダに入ってます。TOPからすると前略/web/beginner.htmlになってるのがわかると思います。)
また、http:や/(スラッシュ)で始まる絶対パスは、特に必要にならなお場合できるだけ使用を避けた方がいいかも
<!--コメントタグ活用する-->コメントタグを書くと編集時便利です。

製作時のテクニック
よく使うタグを単語登録すると製作が早くなる
コピペを活用する(上部の各ページへのリンク先等同じで長い部分)
デザインを統一する場合<BODY〜>まで製作し、各ページごとに名前を変えて保存すると速い??

UP
透過GIF

掲示板を設置

BBSなどは、CGIと呼ばれるプログラムを使用します。
CGIプログラムは、フリーで配布されている場所も多いですが使用するには、ページを設置する場所がCGIの使用を許可している必要があります。
CGIの設置は、ほとんどの場合使用できませんが、レンタルで使用する事ができます。「レンタルBBS」などの単語で検索して探してください

UP
透過GIF

アクセスアップ

アクセスアップするには、検索エンジンに登録やWeb上での宣伝が必要になります。
宣伝は、普段良く行く場所でのBBSなどに作ったので見てねなどと書き込みの最後にアドレスを書いたりすると良いでしょう
検索エンジンは、有料で複数の登録をしてくれる場所がありますが、ここまで無料にこだわってないけど無料で複数の登録できる場所を紹介します。
http://ippatsu.net/TARO/(一発太郎)ここは、有料サイトほど登録数は多くないですが一般的な検索サイトに登録できます。(ただし、企業専用やアダルトページは登録できないサイトあり)
使用には、http://email-check.net/でメールを登録する必要がありますが便利です。
<META NAME="keywords" CONTENT="キーワード1,キーワード2">タグでロボット対策もしておくといいでしょう
そして、もっとも簡単でアクセスが増えるには、相互リンクが有効です。
相互リンクしましょうとかかれているページの条件を満たし管理人に連絡すると完了です。
ただし、複数のサイトと別々に連絡しないといけないので手間がかかりますが・・・
UP

透過GIF

注意する事

制作上の注意する事は、ブラウザに依存しない、一般的に多く利用されている ブラウザ
Internet ExplorerとNetscape Navigatorで動作確認し最適(推奨)環境をページ内に書く書く
まあ、特定のブラウザに依存しないページを製作する事を心がけたほうがいいかも知れませんが依存する場合『○○以外では、制作上意図して表示がされない可能性があります。』と書いておくと逃げ道(爆)
運営する上で書いておくと良い文章は、以下のような物があります。
無断転載禁止
不具合発見した場合連絡ください
と書いておくと吉
UP

透過GIF

ページ製作に使えるソフト

HTMLエディタでgoogle検索
検索
テキストエディタ フリーでgoogle検索
検索
Windows用高性能なフリーFTPソフト
FFFTP

動画も再生できる画像ビューワー。トリミング、減色、リサイズなど画像編集が可能
ViX

UP

おこずかい

LinkShare アフィリエイト
UP

著作権情報.GIF