Ｗｅｂサイト作成・運営にチャレンジする人のためのポータルサイト www.ok-jp.com





Webサイト構築の基本

Webサイト構築の基本となる部分のチャレンジです。以下の別サイトを設置して情報を公開しています。

スポンサード リンク

ホームページ作りの初歩・基本

「体で覚えた初めてのホームページ作り」の中で、特に大切だと感じたことを、このページに系統立てて整理しています。 もう少し、細かいところも気になられる場合は、次のサイトもご活用下さい。

  • 体で覚えた初めてのホームページ作り

    HTMLやCSSやCGIについて全く知らなかった私が、ホームページ作成にチャレンジし始めたときに、困った ポイントを整理することを目的に作成したサイトです。

まず準備したいツール

圧縮・解凍ツール

インターネット上では、CGIやオープンソースなど、様々な便利なプログラムが配布されています。大体の場合、それらは、圧縮ファイルとして配布されているので、そのままでは使えません。そこで、 圧縮ファイルの解凍ツールが必要になってきます。

Lhaz v1.34 (圧縮解凍ツール)

ウインドウズのエクスプローラーでも解凍はできると思いますが、たぶん圧縮は出来ないのではないかと思います。私は、便利なので結構な頻度で使っていて、おすすめです。

ファイル転送ソフト

これは、ファイルを自分のサイトを公開しているサーバーに送信するためのソフトです。 通常のHTMLのファイルを送信する場合は、ホームーページ作成ソフトの付随しているファイル送信機能でなんら不自由を感じることは無いと思います 。

しかし、ちょっと色気が出てきて、CGIのプログラムを導入したり、オープンソースのソフトを導入し たくなったとき、サーバー上のファイルやソフトのアクセス権の変更が必要になっ たとき、きっと、このソフトのありがたみが理解できるだろうと思います。

 FFFTP Support Page.

基本の基本

トップページのファイル名

トップページのファイル名をどういう名称にするのかということは、初心者にとっては案外難関なことかもしれません。次のような名称にすると、『http://www.ドメイン/』というようにファイル名を指定しないでURLにアクセスしたとしてもトップページにアクセスされるようになります。

  • index.html
  • index.htm
  • index.shtml　（SSIを使用するときは、このような名称にするようです。）
  • index.php　　（PHPを使用するときは、このような名称にするようです。）
  • index.cgi　　（CGIを使用するときは、このような名称にするようです。）
サーバーの設定によって、これらの拡張子の表示の優先順位が決まっています。（.htaccessの設定で変更可能）　index.○○○という拡張子の異なるファイルをサーバーにアップロードしてしまうと、「トップページを修正しても、ブラウザで『http://www.ドメイン/』を指定しても修正が反映しない」なんて状況に陥って混乱してしまうかもしれないので注意が必要です。

HTML記述内容の大体の意味

HTMLソースのうち、画面本体（デザインや内容）以外の主な記述について簡単に説明します。
＜○○○＞ではじまり、それと対になる＜/○○○＞で終わるという作りになっています。ただし、<head>〜</head>内は定義を記述する部分ですのでこの限りではありません。

　

<html>
<head>
<title>タイトル</title>
・ブラウザのフレーム上部に表示されます。（記述していないときは、ブラウザにはURLが表示）
・また、検索エンジンの検索結果のタイトルにも用いられます。
・SEO対策に影響があるといわれています。

<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
・HTMLソースを保存している文字コード（データの形式）を指定します。（shift_jis・euc-jp・utf-8）
（HTMLを作成したときのエディタやホームページ作成ソフトで指定されています。）
・通常はあまり意識することはありませんが、入力フォームなどを使ってデータを他のプログラムなどにインターフェイスする場合、相手先が処理できる文字コードで指定しておく方が良いことがあります。
・文字コードを変更するときは、この部分の記述も該当のコードに変更するとともに、編集ソフトでソースを保存するときに、文字コードを指定して直す必要があります。

<meta name="description" content="ページの説明">
・ページの概要を説明しますが、通常はあまり目に触れることはありません。
・検索エンジンの検索結果で使用される場合もありますが、必ず使用されるというわけではありません。
・SEO対策に影響がある部分だといわれています。

<meta name="keywords" content="キーワード１,キーワード２・・・">
・ページのキーとなる言葉（キーワード）を指定します。
・SEO対策に影響があるといわれています。

<link href="style.css" rel="stylesheet" type="text/css">
・スタイルシートを指定します。
・mediaを指定（media="screen"やmedia="print"）することで、画面で見るときと印刷するときのスタイルを変更することができます。

</head>
<body>
・<body>と</body>の間に、サイトの内容をHTMLlのタグを用いて記述します。

</body>
</html>

リンク先URL表示場所のコントロール

リンク先URLのページをどこに表示するのかということも、私には難関でしたので紹介しておきます。 リンクのタグ<a>で指定するtarget="○○○○"で指定します。

アンカー

ページ内の特定の位置に移動する操作はリンクのタグ<a>を用いて行います。
移動させたい位置にあらかじめアンカーを設置しておきます。

<a id="top"></a>

移動元にリンクを設置します。

<a href="#top">このページのTOPへ</a>

参考になるサイト

HTMLタグとCSS

次のサイトが参考になります。

.htaccess

次のサイトが参考になります。

大体、次のような内容について解説されています。
  • IDとパスワードによるアクセス制限（Basic認証）
  • 特定のホストからのアクセス制限
  • 参照元（Referer）によるアクセス制限
  • 特定のユーザーエージェントからのアクセス制限
  • ブラウザ経由でのアクセス制限
  • リダイレクト
  • 404 File Not Foundなどのエラーページのカスタマイズ
  • index.cgiやindex.phpをトップページにする方法
  • SSIを「.html」で動かす方法
  • MIMEタイプ・文字コードの指定
    など




このページのTOPへ