HOME ≫ Category 「初歩の初歩」 ≫ [1] [2]
ほーむぺーじ初歩の初歩 5
2008.07.05 ｜Category …初歩の初歩
「パス」について。「相対パス」「絶対パス」とか言われるものですが。
「ディレクトリ間でのファイルの位置関係を示す方法」。自分のホームページから他のサイトへのリンクとかには「URL」を使いますが、この所謂「パス」てのは自分のホームページ内に限って使うものだと思ってください（厳密には違うけど「ホームページ作成」の初歩段階ではそんな感じでＯＫ）。
「絶対パス」はひとまず置いといて、「相対パス」。
仮にホームページ用の「home」というフォルダを作り、画像もHTMLファイルも全部同じフォルダ内に置いてしまう場合。
◆例えば「index.html」に
・画像「001.gif」を表示させる時は
⇒<img src="001.gif" alt="画像説明">
・HTMLファイル「gallery.html」へのリンクを表示させる時は
⇒<a href="gallery.html">ギャラリーへ</a>
こんな感じで「index.html」に「src="ファイル名"」「href="ファイル名"」と、ファイル名だけ書き込む形で済みます。実はこの書き方が「パス」の最初の一歩。
最初の内はこんな風に１つのフォルダに全ファイル放り込むのが一番楽。しかしファイルが増えてくると、同じフォルダ内では同じファイル名が使えないとか、あのファイルどれだっけーとか、段々整頓するのが厳しくなってくるので、下層フォルダ（ディレクトリ）を作って管理するようになるのですが、その段階で「パス」を使いこなす必要が出てきます。
例えばこんなディレクトリ構成だとして。
◆「wwwフォルダのindex.html」に
・「imgフォルダ内の001.jpg」を表示させたい場合は
⇒<img src="img/001.jpg" alt="画像説明">
・「sub01フォルダ内のindex.html」をリンクさせたい場合は
⇒<a href="sub01/index.html">sub01へ</a>
と「wwwフォルダのindex.html」に書き込みます。
「src="フォルダ名/ファイル名"」「href="フォルダ名/ファイル名"」。
「現在地（wwwのindex.html）」から見て「同じ階層（フォルダ、ディレクトリ）」内の「xxフォルダ」内の「xx.xxファイル」へ、という書き方。これが「相対パス」。
※別の書き方で「src="./img/001.jpg"」「href="./sub01/index.html"」となりますが、「./（ピリオド・スラッシュ）」というのが「同じ階層内」という意味で、この「./」は省略可能。
◆さて「sub01フォルダ内のindex.html」に
・「sub01フォルダ内のimgフォルダ内の001.jpg」を表示させたい場合は
⇒<img src="img/001.jpg" alt="画像説明">
・「sub01フォルダ内のpage1.html」をリンクさせたい場合は
⇒<a href="page1.html">ページ01へ</a>
となります。さっきまでと要領は同じですな。
◆同じく「sub01フォルダ内のindex.html」に
・「wwwフォルダ内のimgフォルダ内の001.jpg」を表示させたい場合は
⇒<img src="../img/001.jpg" alt="画像説明">
・「wwwフォルダ内のindex.html」をリンクさせたい場合は
⇒<a href="../index.html">トップページメニューへ</a>
・「sub02フォルダ内のindex.html」をリンクさせたい場合は
⇒<a href="../sub02/index.html">sub02へ</a>
※「../（ピリオド・ピリオド・スラッシュ）」というのが「１階層上」の意味。２階層上なら「../../」となります。
文字で説明読んでも分かりにくいかと思いますが、実際に作って試すとすんなり分かるかも。要領飲み込めるまで、れっつとらい。
「絶対パス」というのはピリオド使わないスラッシュ「/」から始まる書き方ですが、ホームページ初心者にはスルー推奨かも。自分のパソで適当にフォルダ作ったホームページをレンタルWebサーバにアップするには、相対パスのが楽だったりします。相対パスを自然に書けるなら、絶対パスの概念も分かるんではないかなーとか（概念自体は単純）。「ルートディレクトリ」とか、サイトのディレクトリのスタート地点の認識が必要になるのですが、Webサーバスペースレンタル屋さんによって扱いが色々な感じで把握が（とゆーか説明が）面倒。解説サイト様によっては「URL（http://〜）」使うのが絶対パスという説明をされてるところもあるですが、実際はちと違うもの。のはず。
例として、この忍者ブログでテンプレートHTMLに「<a href="/">トップページへ</a>」と書くと、「自分のブログ」の一番最初（トップ）のページへのリンク、「<a href="/Category/0/">カテゴリー０へ</a>」で「カテゴリー０」へのリンクとなるのですが、これが「絶対パス」な書き方。「スタート地点（トップページ）」を「"/"」として、下層ディレクトリへと単純に一方向に下がる書き方なのでした。
ほーむぺーじ初歩の初歩 4
2008.06.22 ｜Category …初歩の初歩
HTMLファイルが作れたら、どしどしページを増やしますな。index.htmlを目次ページにして、写真の展示ページに日記ページに掲示板や…ぼんやりとでも「ホームページ」の形が頭に浮かぶかと思いますが、それを「サイトマップ」として意識してみましょう。サイトの構造図。
その段階で耳にするかもしれない、「ディレクトリ」とか「（絶対 or 相対）パス」などについて。
「ディレクトリ」てのは、パソ画面では「フォルダ」として見えたりする、パソがファイルを整頓するための構造でございますが。
（OS9で見た図）
仮に「www」というホームページ用のフォルダを作ったら。その中に「index.html」ファイル、画像ファイル用の「img」フォルダ、下層コンテンツ用の「sub1」「sub2」フォルダを作り…という具合に作っていきますが、このフォルダが「ディレクトリ」。
※ファイルやフォルダの名前は、半角英数字で分かり易ければ何でもよいのです。写真展示の「gallery」フォルダとか、日記は「diary」フォルダとか。
ツリー表示にするとこんな感じ。
www┳index.html ┣common.css ┣common.js ┣img┳01.gif ┃ ┣02.jpg ┃ ┗xxx.jpg ┣sub1┳index.html ┃ ┣page1.html ┃ ┣page2.html ┃ ┗img┳xxx.gif ┃ ┗xxx.gif ┗sub2┳index.html
以下略。こんな感じでサイト構造を考えて、htmlでリンクリンクー。の時に必要なのが「パス」ですが。
…えーと本日はタイムアウト。続きはまた。
ほーむぺーじ初歩の初歩 3
2008.06.13 ｜Category …初歩の初歩
「ホームページ」の中身について。ブログその他でも基本は同じ。
まずは「HTMLファイル」。
「HTML」と呼ばれるマークアップ言語（タグ）で書かれたテキストファイル。ファイル名の拡張子を「.html」 or 「.htm」にして保存すれば、それがHTMLファイル。
【HTML】の基本
<html>
<head>
<title>ページタイトル</title>
</head>
<body>
ページの内容
</body>
</html>
最小限これだけを「メモ帳」などのテキストエディタで打って、適当に半角英数字で「xxx.html」と名前をつけて保存。はい、HTMLファイルが１ページ分出来上がりました。
※「index.html」と名前をつけると、大体それが「サイト（のディレクトリ内）の入口ページ」として扱われます。ブラウザのアドレス（URL）でファイル名を省略した時には、大概「index.html」という名前のファイルが表示される仕様になっていることがほとんど。「ホームページ」の“ホームページ”ですね。
大雑把なタグ説明
<html>：今から「HTML」始めまーす。
<head>～</head>：主にブラウザや検索エンジン等へお知らせする為のページ説明部分でーす。
<body>～</body>：ブラウザの画面で見える、肝心の中身部分でーす。
</html>：これで「HTML」終わりまーす。
簡単。
<head>～</head>内には、最低限<title>～</title>（ページタイトル…ブラウザの一番上の部分に表示される情報）があれば十分。外部CSSやJavascriptとかも使うよーという場合はここにその旨書き込むことになります。
<body>～</body>内が肝心の中身ですが、この間で主に使うタグは
- <a href="xxx.html">～</a>：他のページなどへの「リンク」のタグ。
- <img src="xxx.jpg" alt="画像説明文">：ページに「画像」を貼るタグ。
- <p>～</p>：段落。本文テキスト部分など。 画像やリンクはこの中に入れられる。
- <br>：強制改行。段落内での改行などに使う。あまり多用するのはHTML的にはよくないらしい。
- <hr>：罫線。最近は使われてるのをあまり見なくなったなぁ。
- <h1>～</h1>：大見出し（１ページに１回だけ使う）。使わなくても可。
- <h2>～</h2>：中見出し。以下<h3><h4><h5><h6>…と小見出しがある。ページ内で何回使っても可。使わなくても可。
これだけ覚えておけば大体事足りるという。他にも色々なタグがあるけど、真面目にHTMLタグを覚えたい場合は「html タグ」とかでぐぐって専門の解説サイト様を探しましょう。
「HTML」というのは基本的に、ごく簡単な言葉の決まりごと。一定の作法の下で作文するような感じ。
えー、でもブラウザで「ソース」見ると、訳の分からないこと一杯書いてあるけど？
はい、それはほとんどが「飾り」です。偉い人には（以下略）というのは冗談として、基本だけ押さえとくと、ややこしそうなソースもそのうち何となく読めるようになります。
ほーむぺーじ初歩の初歩 2
2008.06.07 ｜Category …初歩の初歩
自分のサイト、個人的な「ホームページ」を作りたい。となると、最初にどうすればいいか。
【ホームページ作成】の大雑把な手順
- ホームページの「アドレス（URL）」を確保。（ 「アカウント作成」とか言われる作業）
- ホームページの「中身（HTML等）」を作る。
- 作った「中身」を「アドレス」の中（サーバスペース）にFTPなどでアップロード。 公開。
1. アドレス確保（アカウント作成）
まず、何処にホームページを作るか、ということですが。
ホームページ作るの初めてで。。という場合、最初は「契約したプロバイダのサイト」に行ってみるのをお薦め。大手だと、プロバイダ会員向けに無料のホームページスペースと作成サービスが確保されてるとこが大半。プロバイダサイトのサービスメニューに「ホームページ」というのがあるはず。初手はそこに突入するのが一番簡単。大概、作り方の手順を丁寧に説明してくれてるので悩む必要なし。テンプレートが用意されていて、HTMLとか知らなくてもOKな作成サービスがあるとこも多い。この場合、上記の２と３は省略（手順に従えば出来てることになる）。CGIが使えたり、簡単作成サービスがあったのに無くなったという少々マニアック？なとこもあったりします。
プロバイダのとこに無かった…とか、それじゃ物足りない〜と思うようになった場合に、それ以外の無料ホームページスペース（忍者ホムペとか）を探すとよいのです。もっと本格的に…なら、有料サーバをレンタルとか。
※プロバイダのとこのでも分からなかった。。という場合は…ホームページ作るのに向いてなかったということで、諦めましょう。ブログやってみる？
2. 中身作成
どんな内容にするかは決まってるとして（決まってないのにホームページ作りたいと思うはずもなし）、どうやって「ホームページ」の中身を作るか。
- 市販のホームページ作成（Webオーサリング）ソフトを買ってくる
- 「メモ帳」などのテキストエディタでタグを打つ
２択。タグとかって覚える気無いしー、という方は１。せっかくだから基本から覚えとくと後々便利だよね、仕事にできるかもだし、という前向きな方は２。ちなみに、市販のソフト使いこなすのもタグ覚えるのも、手間自体はさほど変わらないと思うのでした。向き不向きはあるけど。
１⇒IBMの「ホームページ・ビルダー」やAdobe（未だにMacr○mediaと言ってしまうが）「Dreamweaver」とかが有名。自分は林檎使いだしビルダーは使ったことないですが（余談として昔はタグがアレで評判だったとかむにゃむにゃ）。購入後は、作成ソフトの説明や解説サイト様等をよくお読みの上、慣れてください。で終了。市販の作成ソフトにはアップロード機能も大概ついてるはずなので、３段階目もソフトにお任せ。
２⇒パソに最初から付属してるソフトだけで作れるので、高価なソフトを買ったはいいが使いこなせなくて損したーな気分にはならない。こちらでの作成方法を以降別記事にて。
どちらの場合も、htmlファイルをメインに、画像やCSSやスクリプトやプログラムファイルとか諸々で飾り、リンクで繋げて行く。基本は同じでございます。
「HTML」とは「HyperText Markup Language（はいぱーてきすと・まーくあっぷ・らんげーじ）」。「ハイパーテキスト（ちょー文書）」てのは、ちょーリンクされてる感じの文書。ですからに。（※死語超訳）
3. アップロード（公開）
さて、市販ソフト使うにしても、メモ帳使うにしても、作った中身はまだあなたのパソコンの中だけにしか存在しません。
作成したホームページの内容を、実際に皆に見てもらうためには、「アップロード」。
市販のソフト利用の場合はソフトの説明に従ってください、ということで。
タグ打ってhtmlファイルとか作ったよーな場合は、「FTP（File Transfer Protocol）」（「ftp://」から始まる通信方法）用のツール（FTPクライアントソフト）を使って、取得したホームページスペースにファイル転送します。
Winの「FFFTP」（フリーウェア）、Macの「Fetch」（シェアウェア）とかが昔から有名。Fetchは使ったことないけど、FFFTPは流石の便利さ。動作軽いし。
「FTP」の機能は、フリーのhtml作成補助ソフトとかについてたりすることもあり。実はOS本体デフォルトにFTPの機能はあったりするんだけど（IEとか使ってFTP通信出来る）、何かあまり知られて無さそう？分かりにくいのか不便なのか。
ごちゃごちゃ言ってますが、はい、以上で「ホームページ」出来上がりました。
１で取得した自分のホームページのアドレス（「http://」から始まる）をブラウザに打ち込んでみて、ちゃんと表示されてれば万事OK。友人知人にアドレスを知らせて、これであなたもサイトマスター。
無意味に説明長いけど、実際は３段階（場合によっては１段階）だから、難しく考える前にGoGo。
ほーむぺーじ初歩の初歩 1
2008.05.30 ｜Category …初歩の初歩
「ホームページ」というか「（Web）サイト」について。
日本では「ホームページ」という呼称が誤用かつ曖昧な意味で相当広まって定着してしまってるようですが、その辺はまぁアバウトに。自分としては、個人がプライベートに作ってみました〜な「サイト」を「ホームページ」と呼ぶ認識。
大雑把な構造とか
「HTML」とかで書かれた１ファイル（拡張子「.html」若しくは「.htm」）を基本１ページとして、何ページかを各々リンクさせて一纏まりになったものが「サイト」。Webブラウザで見てるのは大概これ。一般的に言う「ホームページ」「ブログ」もサイトの一種というか一部。
HTMLファイルとか「サイト」の中身は一般家庭のパソコン（「ローカル」などと呼ばれる）で簡単に作れるけど、「Webサーバ」にアップロードしないとWebに公開したことにならない（Webサイトとして成立しない）。逆を言えばWebサーバにアップした段階で基本的にはWebに公開されたことになる。
※よくある誤解※「Webに公開」したということと「検索エンジンに登録される」ということは全く別のこと。また、検索エンジンに引っかからなくてもWeb（全世界）に公開してるのにかわりはないということは忘れてはイケナイ。
Webサーバって何よ？どこよ？というとこれが色々あるわけで。インターネットというのが基本この膨大な数のWebサーバを連結したものなので。無料ホームページ（ブログ）サービスとかやってるとこは皆それぞれが所有してるWebサーバ（の一部）を貸し出してくれているのですな。
有料レンタルサーバは無料よりも色々出来ることが多いけど、その分色々面倒だったり難しかったりなのでここでは割愛。自分でサーバ立てるような人はこんなとこ見てるわけが無いので更に割愛。
んなことはいいから「ホームページ」ってどうやって作るのさ。については次回。