カテゴリ:HP講座( 3 )

HP講座vol.3 テーブルタグ・フレームタグ

画像タグも含めてお送りします(待てコラ

画像を載せるときのタグ
<img src=☆>
☆には保存している画像の名前を入れてください。
例えばここにずっと置いてるSS画像を載せようと思ったら
<img src=soraneko.jpg>
となります。保存名は適当でOKです。
HPで表示できるものは「jpg」「gif」「png」が多いです。
「png」の場合、MACでは映らないことがあるらしいのでなるべく「jpg」「gif」を。
※画像を入れるときもなるべく半角がお薦め。全角でやった場合は知りません(待

テーブルタグ
「ややこしいから嫌いっ」と思いながら実際に本家サイト(特にリンク)で多用しているものです。
<table>
<tr>
<td>入れたい内容</td>
</tr>
</table>

たったこれだけです。縦横させたい時は
<tr>
<td>入れたい内容</td>
</tr>
この部分をいじります。この場合は縦に増えます。
横に増やす場合
<td>入れたい内容</td>
ここに同じタグを打ち込みます。
ただし、これでテーブルを増やす場合のみ最初の<table>は
<table rules="☆">
となります。☆はどう表示したいのかを表す単語(none,rows,cols,all)のどれかを入れてください。
どういう風になるかは実際に試しましょう。
ちなみに、本家サイトのリンクで使用しているタグはIdentityさんの「web item HTML Tips」から参照しています。

フレームタグ
まず、HP講座vol.1でやったタグを用意します。
この時、<body></body>のタグは外します。

<html>
<head>
<title>タイトル</title>
</head>
<frameset cols="★">
<frame src="☆" name="■">
<frame src="☆" name="□">
<noframes>フレーム未対応ブラウザではご覧になれません</noframes>
</frameset>
</html>
★=分割するサイズの指定(%,*またはピクセル数)
☆=表示するそれぞれのファイル名
■=分割した窓の任意の名前(例、hidari)
□=同上(例、migi)
タグ講座・HTMLタグであそぼうより引用、一部訂正

このタグでは横にフレーム(別ページ)が開くようになっています。
サンプルは本家サイトの小説置き場です。
フレームを作る場合、ファイルは2つ用意しておかないとフレームは出来ないので注意してください。

縦の場合
<frameset cols="★">
太字にした部分をrowsに変えます。

縦横同時に表示したい場合や、他のタグを使いたい方はタグ講座・HTMLタグであそぼうで見ると便利です。
ここで説明するより数倍分かり易いかと思います。
Identityさんではタグ以外にもいろいろ配布していらっしゃるようなので一見の価値アリですよん。
[PR]
by nonbirisoraru | 2005-10-25 09:56 | HP講座

HP講座vol.2 アップロード

えーと、前回書かなかったのですが、コメントから指摘があったんでつけたし。
トップページ、俗に言う最初のページですが、「index.html」または「index.htm」でないとトップページにはなりません。
フレームにする場合も同様です。入り口を作ろうと思っている方はご注意あれ。
ちなみにサンプルはギルドサイトのソース見てください(待)

では、普段使い慣れてるFTPをご紹介します。FFFTPです。
リンクを張ってあるので飛んでみてください。

ではまずFTPのダウンロードから。
1.リンクから飛ぶ
FTPダウンロードページへ飛ぶようにリンクしてあります。

2.動作環境を確認する
PCがWINDOWSという方は問題ありません。
※MACの方は検索でMAC対応アップローダーを探すか、アップローダー付きのサーバーをお借りしてください。

3.ダウンロードする
「ダウンロード」と書かれた下にリンクが張ってあるファイルがあります。
それを自分のPCへダウンロードします。

4.インストールする
ダウンロードが済むと、次はインストールです。まず、保存したファイルを開きます。
次に、保存したFTPファイルを開き、インストールします。
これが完了するとデスクトップ上に「FFFTP」のロゴアイコンが出てきます。

5.接続設定
まず、ホスト名(ユーザー名)、サーバーのホスト、パスワード、開きたいファイルを決めます。
ホスト名・ホスト・パスワードは借りたサーバーの指定があった場合、そちらの指示通りに入れてください。
この作業は初回のみです。
次に、先ほど設定したファイルを開きます。
一度消してしまった方も、上記した作業がきちんと出来ていたら、「接続」を押してファイルを開いてください。
左側にファイルの中身が出てくれば正常に作動している証拠です。

6.いよいよアップロード
アップロードしたいファイルを選び、右クリックします。
そこから「アップロード」を選びます。初回であればそのまま右側に表示されます。
右側に表示されるとアップロード終了です。
これでHPがWEBに公開されました。

※更新の仕方
PC内で書き換えたHTML文書(HPの土台)をそのまま上書き保存、6の手順でアップロードします。
その際に、「このデータは既にアップロードされています」等のメッセージが出たら、「上書きしてアップロード」を選択します。
後はアップロードがきちんと出来たかをWEBで確認すれば更新完了です。

分かりにくかったら指摘お願いしますよ~。
[PR]
by nonbirisoraru | 2005-10-19 09:48 | HP講座

HP講座vol.1 タグ打ちサイトの作り方

えーと、前に行っていたサモチャの友人からHPヘルプが来たので、説明しまふ。
一応基本的な部分だけ取り出します。たいていタグ打ちなら検索すれば出てくるしね。
私の場合、メモ帳でサイトを作っているのでメモ帳で制作するサイトをご紹介します。

1.メモ帳を開く
これは基本ですよん。ワードパッドでも同様だと思います…。

2.タグを打つ
では基本のHTMLタグを打ち込みます。
<html>
<head>
<title>タイトル</title>
</head>
<body>
ここに画像・文章を入れます。
</body>
</html>
大文字でもタグは認識されるので、小文字・大文字問わずに打ち込んでください。
「毎回打ち込むのが面倒だっ!」と言う方は辞書登録を。

3.HTML化する
さて、ここでだいたいのサイトの土台が出来たところで保存します。
保存名は「○.html」としてください。○の部分は半角で分かり易くかつ自分の好きな名前を。
※ここで全角や平仮名・片仮名にするとHTML化されず、「ネットでも使えるよ~」というマークのアイコンになりません。
(ちなみにマークは「アドレス」を出したり、お気に入りに入れたときにでるものと同様のものです)

これで基本のタグ打ちは終了です。
明日はアップロードの仕方と、アップローダーを紹介しますね。
[PR]
by nonbirisoraru | 2005-10-18 09:53 | HP講座