わきあいあいネット
現在時刻
基本10段階編

ステップアップ編

F r e e T o o l s
TeraPad
高機能なメモ帳で、フリーソフトです。タグを色分け表示が可能なので編集しやすく、 様々な文字コードで保存も可能なので、CGI,PHP作成にも向きます。
FFFTP
FTPソフトとしては、あまりにも有名です。操作性に優れ、いくつものサイトをまとめて管理できます。
FileZilla
表示が素早いのが売りのFTPソフトウェアです。タブで複数起動できるので便利です。著者も最近はこれに移行しました。
PHPエディター
プログラミング言語「PHP」の開発なら、これひとつで充分です。 もちろんこれでHTMLやCSSも含めて管理できますので、PHPを使用しない人でも、HTMLエディターとして使用しても便利です。
WampServer
PHPの開発環境。パソコン内(ローカル)でプログラムをテストしたり、PHPエディターにおけるエラー確認等に活躍。

高価な統合型開発環境を買うよりは、項目ごとに優良な無料プログラムを組み合わせた方が融通が利きます。


T i p s
大文字小文字
タグは大文字、データは小文字と使い分けるとコードが読みやすくなります。
しかし、その分入力の手間が増えます。 私は全て小文字で書いてます。

ファイル名にしても、拡張子にしても、webの世界では小文字しか認識されない場合が 多いです。文章以外は、常に英数小文字で入力するのが無難です。

例)
Japanだ.JPG→×
→FTPで認識されない。リンク作成時に混乱する。

japan.jpg→○
空白(スペース)
日本語入力と半角英数字の直接入力とでは、みかけが同じでも意味が全く違います。

<タグ>の中には半角スペースしか使えませんので注意して下さい。
例)
<br >→機能する
<br >→機能しない

7.テーブル(TABLEタグ)を配置

次は、表(テーブル)を配置します。
基本的に、TABLEタグはコードが長くなってしまうので
できるだけ <div> タグを使いたいところですが、
凝った配置にしたい場合に一番便利なのが、TABLEタグです。

<html>
<head></head>
<title>ここにページのタイトルを入れます</title>
<body bgcolor="white">
<div align="center">
<table border>
 <tr>
  <td>
   
1
  </td>
 </tr>
</table>

</div>
</body>
</html>

表示結果

さあ、そろそろ訳がわからなくなってきました。
ここでは、一つの枠の中に「1」という文字を入れただけです。

<tr>とは、横の並びのことです。
覚え方→("トラ"が横になって寝ている) <td>とは、その横の並びの中に入っている箱のことです。
覚え方→(物が入る"戸だ"!) わかりやすく図解してみました。

*文字や画像は<td></td>の中に直接入ります。

表(テーブル)の最も基本的な形 <table border>
 <tr>
  <td>1</td>
 </tr>
</table>

表示結果


*横3列にしたい場合、<td></td>を3つ作ります。

表(テーブル)のセルを横に3つ並べる時 <table border>
 <tr>
  <td>1</td><td>2</td><td>3</td>
 </tr>
</table>

表示結果


*縦2列にしたい場合、<tr></tr>を2つ作ります。

表(テーブル)を縦2列にしたい時 <table border>
 <tr>
  <td>1</td><td>2</td><td>3</td>
 </tr>
 <tr>

  <td>4</td><td>5</td><td>6</td>
 </tr>

</table>

表示結果

私もこの仕組みが頭に入るまでずいぶん苦労しました。
やはり図解に限る!

目次にもどる
Copyright © 2004-2017 w-i-i.net All Rights Reserved.