- 追加された行はこのように表示されます。
- 削除された行は
このように表示されます。
!!!WEBサイト作成の基礎
!!HTMLの基礎
!HTMLは「タグ」で書く
HTMLの記述方法をマスターしましょう。難しいことは何もないです。
「タグ」というものがあるということと、表示したいものや使いたいものをタグで「囲む」ということがわかれば、半分はマスターしたようなものです。
*<■■■>で始まり、</■■■>で閉じるという仕組みです。
*２種類のタグを適用したいときは、入れ子構造になります。
**<■■■> <●●●> テキストや画像 </●●●> </■■■>
**<html> <body> テキストや画像 </body> </html>
**<p> <a href="http://www.google.com/">当サイト内容の<b>無断転載・複製</b>はご遠慮ください。</a> </p>
*ソースファイル内のスペースや改行は基本的に無視されます。
!最低限必要な記述
*htmlタグ
**<html> 〜 </html>
**ページの最初と最後に記述するタグです。
*headタグ
**<head> 〜 </head>
**headタグに囲まれた部分は、ブラウザの画面上には表示されません。主にtitleタグやmetaタグ等をこの部分に記述します。
*bodyタグ
**<body> 〜 </body>
**bodyタグに囲まれた部分が、ブラウザの画面上に表示されます。ページの内容はこの部分に記述していきます。
{{ref_text test.html}}
上記のHTMLを実際にWEBブラウザで表示すると以下のようになります。
下のファイルをブラウザで開いてください。
{{ref test.html}}
!これだけは知ってないとまずいタグ
*<p>
**段落（文章中の意味のまとまり）を指定することができます。
*<br>
**改行する。上でも書いた通り、ソースファイル上でのスペースと改行は無視されますので、改行したいポイントにこのタグを書いておく必要があります。
*<a>
**aタグでリンクを設定できます。このタグに囲まれた内容が、リンクボタンになります。
**<a href="http://www.google.com/">Google</a>
**<a href="index.html"><img src="sample.gif" alt="サンプル"></a>
*<img>
**imgタグで、画像を表示させることができます。
**<img src="sample.gif">
*<object>、<embed>
**FLASHファイルやMPEGファイルなどホームページに埋め込むタグとして現在一般的に使われているのはobjectタグとembedタグです。このタグで指定されたファイルはブラウザにインストールされたプラグインで再生されます。
**主に使われているファイルは、FLASH（.swf）、MPEG（.mpg）、QuickTime（.mov）、WAVE（.wav）、AU（.au）、MIDI（.mid）、AIFF（.aif）、RealAudio（.ra）など
**<embed src="example.swf" width="200" height="100">
!表の作成
'''<table> <tr> <td> <th>'''
表を作成するタグです。tableタグ、trタグ、td、thタグを組み合わせて使用します。
*tableタグ <table> 〜 </table>
**表全体を指定するタグです。
*trタグ <tr> 〜 </tr>
**行を指定するタグです。tableタグに囲まれた部分で使用します。
*tdタグ <td> 〜 </td>
**セルを指定するタグです。trタグに囲まれた部分で使用します。
*thタグ <th> 〜 </th>
**見出しを指定するタグです。trタグに囲まれた部分で使用します。
3列のセルを2行作ってみます
<table>
<tr>
<th>名前</th>
<th>学年</th>
<th>クラス</th>
</tr>
<tr>
<td>金八</td>
<td>３年</td>
<td>Ｂ組</td>
</tr>
</table>
,名前,学年,クラス
,金八,３年,Ｂ組
!リストの作成
'''<ul> <li>'''
ulタグでマーク付きリストを作れます。type属性を指定しない場合は、黒丸の付いたリストになります。
一般的なブラウザでは、リストの上下は1行分のスペースを空けて改行が行われ、左側はインデントされて表示されます。<li>タグは終了タグの</li>を省くことができます。
<ul>
<li>サーバーA社</li>
<li>サーバーB社</li>
<li>サーバーC社</li>
</ul>
*サーバーA社
*サーバーB社
*サーバーC社
'''<ol> <li>'''
上のulタグをolに変えると番号付きのリストになります。
<ol>
<li>サーバーA社</li>
<li>サーバーB社</li>
<li>サーバーC社</li>
</ol>
+サーバーA社
+サーバーB社
+サーバーC社
!!絶対パスと相対パス
画像ファイルの指定や他のページにリンク先のURL（アドレス）を指定するときに、絶対パスで指定するか、相対パスで指定するかを考える必要があります。
!絶対パス
WEBの場合の「絶対パス」とはhttp://〜〜〜から始まるアドレス指定のことです。どのサイトからでも指定することができますので、すべてのリンクを絶対パスで指定しても構いません（おすすめしませんが…）。自分のホームページ以外のサイトへリンクをするときは、「絶対パス」でなければなりません。
!相対パス
自分のホームページ内もしくは、自分の使っているサーバースペース内のファイルであれば、わざわざhttp://〜から書かなくても記述されているファイルからの相対的な位置関係を示すだけで、リンクすることができます。
*同じフォルダの中にあるファイルであれば、「ファイル名」を書くだけでＯＫです。
*１階層上のフォルダであれば、「../ファイル名」でＯＫ。
*１階層下のフォルダであれば、「フォルダ名/ファイル名」でＯＫ。
自分のホームページ内のファイルは普通は相対パスで指定するんですが、なぜかというとソースファイルがすっきりするという利点の他に、管理が楽だからです。フォルダ毎移動させれば、そのフォルダ内のアドレスはそのまま機能します。サーバーを他に移したときもあまり書き換えなくても機能するでしょう。
!!トップページはindex.htmlで
ホームページのデータが置かれているディレクトリ（フォルダ）にユーザーがアクセスしたときに、'''WEBブラウザは「index.html」を最初に探して表示する'''ようなルールになっています。
僕が取得しているドメイン名は「watersky.jp」ですが、例えば、ある人がhttp://watersky.jp/ をブラウザのアドレス欄に入力して実行したとします。すると、http://watersky.jp/が指定されているサーバー内のディレクトリを探して、その中にあるindex.htmlを自動的に表示するのです。ここで、index.htmlが存在していなかったらどうなるかというと、ディレクトリの中身が丸見えになってしまうのです。ディレクトリ内の画像ファイルやhtmlファイルが全て覗き見れる状態です。これは、セキュリティ的にもマズイですし、なにしろカッコワルイです。ですので、全てのディレクトリの中に空の（中に何も書いてない）index.htmlを置いておくことをオススメします。少なくとも、トップページはindex.htmlでなければなりません。
index.htmlがないディレクトリにアクセスするとどうなるか見てみましょう。
http://watersky.jp/a/test_site/
このように、ファイルが丸見えになってしまいます。
こちらには空のindex.htmlが置いてあります。
http://watersky.jp/a/
中身に何も書いてないindex.htmlを置いておくと、ディレクトリを直接覗くことはできなくなります。
!!できるだけ見栄えに関するデザインはCSS（スタイルシート）で
タグには様々なオプション機能があって、昔はHTMLタグだけでレイアウトやデザインをしていました。しかし、あまりにもタグが複雑になってしまったので、HTMLタグで見栄えをあれこれいじるのはやめようという方向になっています。そこで、様々な見栄えをいじるための仕組みとしてCSS (Cascading Style Sheets) が開発されました。HTMLタグは極力、文書内での構成要素を表すにとどめ、視覚的なデザインはCSSでやるという役割分担を意識するようにしてください。
*データの役割の指定…HTMLタグ
*データの装飾（色・形・レイアウト）…CSS
!!HTML作例
*[極力デザイン要素を省いたHTMLの作例|http://watersky.jp/a/test_site/test01.html]
*[上の作例に外部CSSファイルを適用した作例|http://watersky.jp/a/test_site/test03.html]
*[作例に使用したCSSファイル|http://watersky.jp/a/test_site/html_basic.css]
*[Flashビデオの貼り付け作例|http://watersky.jp/a/test_site/test02.html]
!!!WEBサイト作成支援いろいろ
!!WEB作成に便利なサイト
WEBサイトの作り方やHTML・CSSなどの書き方を教えてくれるWEBサイトや、HTML、CSSの構文が間違っていないかチェックしてくれるサイトなどがあるので、完成したらチェックしてみるといいと思います。
*[TAG<index>|http://tagindex.com/]
**知りたいタグをすばやく探せるサイト。CSS、JavaScriptも検索できる。
*[HTMLクイックリファレンス|http://www.htmq.com/]
**HTML作成時に役立つを情報を検索できるサイト。タグ、CSS、WEBカラー、優良デザインサイトなどが調べられる。
*[とほほのWWW入門|http://www.tohoho-web.com/]
**WEB作成に関する様々なことを調べられるサイト。CGIやJAVAなども扱っている。
*[CSS Validator|http://jigsaw.w3.org/css-validator/]
**URLを入力すると、正しいCSSの構文かどうかチェックできる。
*[Another HTML-lint|http://openlab.ring.gr.jp/k16/htmllint/]
**HTMLの文法が正しいかどうかチェックしてくれるサイト。
*[W3C|http://www.w3.org/]
**WEB技術の標準化を行う団体「World Wide Web Consortium」の公式サイト。
*[GIGAZINE -死ぬまでに見ておくべきCSSデザインサイト集まとめ-|http://gigazine.net/index.php?/news/comments/20070425_bestcss/]
**CSSによるデザインについてまとめたサイトをまとめた記事
!!WEB作成に便利なソフトウェア
Vectorなどのフリーウェア・シェアウェア配布サイトにいけばHTMLエディタなどの便利なソフトがいろいろあるので、使いやすいものを選んで使うといいと思います。もちろん、メモ帳などで書いてもいいのですが、タグをいちいち書くのは大変なので、実際に作成するときは、HTMLタグを半自動的に書き込んでくれるこれらのエディタは大変便利だと思います。HTMLの基本を学んだら積極的に使ってみてください。
*[Vector Windows用HTML作成ソフト ページ|http://www.vector.co.jp/vpack/filearea/win/net/htmledit/]
*[HTML Project2|http://www.vector.co.jp/soft/win95/net/se111772.html]
**Windows95/98/Me/XP上で動作する、HTML4.01/XHTML/CSS2のスタイルシートに完全対応したスタイル設定援助機能を特徴とするタグ挿入型エディタ
*[FFFTP|http://www.vector.co.jp/soft/win95/net/se061839.html]
**標準的なGUIを採用した、わかりやすいFTPクライアントソフト
*[Vector Macintosh用HTML作成ソフト ページ|http://www.vector.co.jp/vpack/filearea/mac/net/htmledit/]
*[Jedit4.0|http://www.vector.co.jp/soft/mac/writing/se163485.html]
**Mac定番テキストエディタ
!!サーバー
インターネット上でホームページを作るには、どこかにサーバースペースを持たなければならないですが、サーバーを持つ方法は3種類考えられます。
+有料のサーバーを使う（広告が入らないし、サービスも充実）
+無料のサーバーを使う（広告が入る）
+自分でサーバーをたてる（常時PCを起動し続ける必要があり、ネットワークやセキュリティについての知識も必要）
個人的に、一番オススメは有料サーバーです。広告が入るとやはり安っぽい感じがでますし、レイアウトにかなり制限がかかります。広告などが入ってもいいよ、というのであれば、無料サーバーでもいいかもしれません。自前のサーバーについてですが、この選択をする人であれば、僕があれこれ言う必要はないでしょう。
いくつか、サーバーを紹介しておきます。この他にもアクセスプロバイダ（so-netとかOCNとか）もインターネットアクセスのサービスの一つとして、サーバースペースを提供してるはずなので、自分が利用してるプロバイダのサービスを使ってもいいと思います。CGIが使えるかどうか、などサービス内容をよく見て選んでください。
*[Sakura Internet|http://www.sakura.ad.jp/]
**僕が借りてるレンタルサーバーの会社です。有料レンタル。
*[ロリポップ！|http://lolipop.jp/]
**ここも有料レンタルです。
*[infoseek isweb|http://isweb.www.infoseek.co.jp/]
**有料と無料を選べます。
*[Google Page Creator|http://pages.google.com/]
**Googleの無料ホームページ作成サービス。
**ブラウザ上で作業します。いくつかの雛形から選んで、そこにテキストや画像をはめ込んでいく手順になります。かなりお手軽にホームページの体裁を作ることができますが、単純にテキストと画像ファイルだけで構成されてるようなものしか作れません。Flashやムービーファイルを組み込むのはまだ無理そうです。凝ったものを作るというよりは、手間をかけずに急ぎでホームページを作らないといけない、というときにはサクっと作れて、独自のドメインも持てるので便利なサービスだと思います。ちょっと動作が不安定でよく落ちます…。
**[試しに作ってみました|http://watersky.jp.googlepages.com/home]
*[自宅サーバーを構築しよう|http://win.kororo.jp/]
**自宅サーバの作り方について解説してるサイトです。
