無料でホームページを作ってHTMLの基本を覚える
フリーソフトの ez-HTML をエディタとして使用して、スタイルシートを活用しながら基礎の基礎からホームページの作成をします。
誰かに（大手に）頼らなくてもあなた自身であなた好みのネットショップをオープンし、あなたが選んだ商品あるいはあなたが作った商品の魅力を伝え、それを欲しいと思ってくれる人に直接販売できるツールとして活用されています。
30日間の無料お試し期間が付きで月額875円〜というお手頃価格により、これまでに18万を超えるユーザー様からお申し込みいただいております。
■ホームページの置き場所を確保する
・無料レンタルサーバー
有料も含め、ホームページスペースの比較については、他のサイトを参照してください。
無料のホームページスペースについてはCGIが使用できないなどの制約がありますので、
ホームページ作成の目的や計画とホームページスペースの制約などをよく吟味して決めてください。
ちなみこのサイトは、CGIを使いたくなったときにプロバイダの無料ホームページスペースから、有料へ切り替えました。
有料レンタルサーバーも最近は激安なので、あとの引越しの手間を考えると最初から有料ってのも賢いかもしれません。
ただし、ドメイン取得代、初期費用などかかりますので、これを含めて目的に対して検討してください。
★月額105円〜/容量最大60ＧＢ/機能満載！ ロリポップ！レンタルサーバー ★
月額１２５円からの「 さくらのレンタルサーバ」
★ホームページスペース有効化（例）
プロバイダのホームページスペースを使用するには、有効化の手続きが必要となります。 各プロバイダの示す手順に基づいて手続きをしてください
- Toppa!UserToolsにアクセスし、アカウントIDと接続パスワードを入力して[ログイン]をクリック
- [プランおよびサービス設定]をクリック
- ホームページ利用設定の項目で[設定]ボタンをクリック
- 容量選択の画面で希望の容量を選択し、[次へ進む]ボタンをクリック
（無料で利用できるのは100MB） - 確認画面が表示さるので、[変更する]ボタンをクリック
■HTMLファイルを作成する
ただし、著作権法とか特許法に抵触しないように考慮、工夫してください。
下の1.、2.アンカーは、一番単純なページを表示します。
★ブラウザからHTMLファイルの中身をみる（IEの場合）
「表示」メニューの「ソース」、またはブラウザの右クリックの「ソースの表示」でHTMLファイルを見ることができます。- ソースを見たいページをブラウザで表示
- 「表示」メニューの「ソース」を実行
- この中身を全てコピーして、エディタの新規作成に貼り付ける
- トップページ「index.html」として保存すればHTMLファイルは完成
とりあえずは、エディタはメモ帳でも何でもいいです。貼り付けて保存してください。
メモ帳はWindowsなら、[スタート]-[すべてのプログラム]-[アクセサリ]-[メモ帳]で起動できます。
下の1.、2.アンカー表示後は、ブラウザの「戻る」で閉じてください。
な、なんとこの文だけでもちゃんと表示されるのです。気が楽になったでしょう？
ただし、こんなHTMLファイルじゃぁだめです。
<head>〜</head>とかはタグと言います。詳しくは後で勉強しましょう。
ヒント インターネット エクスプローラでメニューが表示されていない場合は 「Alt」キーを押すと表示されます。
参照
ブラウザを使ってHTML,CSS,JavaScriptのソースコードを閲覧する方法を説明しています。
★ソースコードを閲覧する
★お勧めのテキストエディタ
TeraPad がフリーソフトとしておすすめです。森の窓（TeraPad） からもダウンロードできます。
参考
HTMLエディタとしては、最終的にはこちらを推奨します。
★お勧めのHTMLエディタ
★HTMLファイルの簡単な修正
コピーしたままを表示しても面白くないので、中身をちょっと修正しましよう。上の2．から作ったファイルを修正します。
- 2.から作ったファイルをテキストエディタで開く
- <head>〜</head>中の「簡単なHTMLファイル」を好きな文に変更
- <body>〜</body>中の「ファイルの中身を表示しています。」を好きな文に変更
作ったHTMLファイルをブラウザで表示してみましょう。
<head>〜</head>の文はタイトルとして、<body>〜</body>の文は内容として表示されるはずです。
ソースコード
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title> タイトルを変えてみました</title>
</head>
<body> ボディも変えてみました</body>
★HTMLファイルをブラウザで表示する
保存したローカルの場所からブラウザで表示させます。- 作ったHTMLファイルを保存したフォルダをエクスプローラで開く
- HTMLファイルをダブルクリック
★TeraPadからブラウザ表示を行う
TeraPadでは直接ブラウザ表示の確認（プレビュー）ができます。- HTMLファイルをTeraPadで開く
- [ツール]メニュー-[Internet Explorer]を実行
■ファイルをFTP転送する
後で説明するHTMLエディターでもFTP転送ができますが、専用ソフトも用意しておいたほうがいいでしょう。
★お勧めのFTP転送クライアント
FFFTP がフリーソフトとしておすすめです。森の窓（FFFTP） さんからもダウンロードできます。
インストール後、ホストの設定を行い、アップロードを行います。
アップロードに成功したら、自分のホームページアドレスをブラウザに入力して見てみましょう。
ちゃんと表示されれば、ホームページはできたことになります。あとは中身です。
■FTP転送を行う
■HTMLファイルを編集する
この先は、下のお勧めのHTMLエディタを使ってホームページの中身を完成させていきます。
★お勧めのHTMLエディタ
・ ez-HTMLがフリーソフトとしておすすめです。森の窓（ez-HTML）さんからもダウンロードできます。
・ Microsoft Expression Web 4 (Free Version)が無料となりました。
★ez-HTMLを使用する
具体的なez-HTMLの使用方法と、これを用いた編集方法は
ez-HTMLの使い方
を見てください。
★Microsoft Expression Web 4を使用する
具体的なMicrosoft Expression Web 4の使用方法と、これを用いた編集方法は
Microsoft Expression Web 4の使い方
を見てください。
■無料テンプレートとフリー素材
★無料テンプレートを使用する
こちらで、無料テンプレートを公開しています。
ホームページ作成講座では、各ステップにサンプルコードがあります。 こちらも参照してください。
★フリー素材を使用する
こちらで、フリー素材を紹介しています。
おすすめフリー素材■無料でホームページを制作できるオンラインサービスを使ってみる
こちらはHTMLの習得はできません。逆にHTML、CSSを全く意識しないでホームページを作ることができます。
「たまちゃんのつぶやき」の 「無料でホームページを制作できるオンラインツールを使う」をご覧ください。
ez-HTMLについて学びたい方はこちら >>> ez-HTMLの使い方
HTMLの基礎について学びたい方はこちら >>> HTMLの基礎
CSSての基礎について学びたい方はこちら >>> CSSの基礎
ホームページ作成講座て学びたい方はこちら >>> ホームページ作成講座