わきあいあいネット
現在時刻
基本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 >→機能しない

1.まずは、基本の骨組みを覚えます。

HTMLの仕組みは単純です。複雑に考えればきりがありませんが、
入り組んだコードは管理が大変になりますし、サーチエンジンにも嫌われてしまいます。
またHP作成ソフトを使うと、無駄なコードが自動挿入されてしまい、
思いがけず長いコードになってしまう危険がありますので、
やはりHTMLも蕎麦も「手打ち」が一番!

<html>
<head></head>
<title>ここにページのタイトルを入れます</title>
<body>
ここに内容を記述していきます。
</body>
</html>

表示結果

上の緑の枠内の文字全体をマウスでドラッグして選択し、
右クリックで コピー(C) を選びます。(これで内容が記憶される)
メモ帳を起動し、
右クリックで 貼り付け(P) を選びます。
内容が表示されたら、 1.htm という名前で保存します。(半角英数)

これはHTMLという言語です。
内容を<タグ>ではさみ込んで記述する形式です。
はさみ方は
  • 横方向:<>内容<>
  • 縦方向: <>内容<>
どちらでも構いません。
<html>ホームページが始まりますよ
<head>特別な事を指定しますよ</head>
<title>ここにページのタイトルを入れます</title>
<body>本文が始まりますよ
ここに内容を記述していきます。
       ・
       ・
       ・
</body>本文が終わりますよ
</html>ホームページが終わりますよ


ステップアップ! 詳細設定を追加しよう!


文字コード、キーワード、概要を追加します。

<html>
<head></head>
<title>ここにページのタイトルを入れます</title>
<meta http-equiv="Content-Type content="text/html;charset=shift_jis">
<meta name="keywords" content="キーワード1,キーワード2,キーワード3">
<meta name="description" content="このホームページの概要">
<body>
ここに内容を記述していきます。
</body>
</html>

・charset=shift_jis:この行は「shift_jis」の部分だけが変化します。

・キーワードの後は「,」(半角コンマ)で区切ります。

・概要は自由に日本語で記述します。できるだけ詳細な記述を心がけます。

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