たまちゃんHTMLのおうち たまちゃんHTMLのおうち

無料でホームページ作成

ホーム> 無料でホームページ作成

メニュー




無料でホームページを作ってHTMLの基本を覚える

フリーソフトの ez-HTML をエディタとして使用して、スタイルシートを活用しながら基礎の基礎からホームページの作成をします。


PR
カラーミーショップはリアルな店舗を持っていなくても、ネットを通じて商品を販売する楽しみを多くの人に実感してもらうショッピングカートを目指しています。
誰かに(大手に)頼らなくてもあなた自身であなた好みのネットショップをオープンし、あなたが選んだ商品あるいはあなたが作った商品の魅力を伝え、それを欲しいと思ってくれる人に直接販売できるツールとして活用されています。
30日間の無料お試し期間が付きで月額875円〜というお手頃価格により、これまでに18万を超えるユーザー様からお申し込みいただいております。

■ホームページの置き場所を確保する

無料でホームページスペースを作るには、
 ・プロバイダーのホームページスペース
 ・無料レンタルサーバー

を使用する方法があります。

有料も含め、ホームページスペースの比較については、他のサイトを参照してください。

無料のホームページスペースについてはCGIが使用できないなどの制約がありますので、 ホームページ作成の目的や計画とホームページスペースの制約などをよく吟味して決めてください。
ちなみこのサイトは、CGIを使いたくなったときにプロバイダの無料ホームページスペースから、有料へ切り替えました。
有料レンタルサーバーも最近は激安なので、あとの引越しの手間を考えると最初から有料ってのも賢いかもしれません。
ただし、ドメイン取得代、初期費用などかかりますので、これを含めて目的に対して検討してください。

お勧め有料レンタルサーバー
  ★月額105円〜/容量最大60GB/機能満載! ロリポップ!レンタルサーバー ★
 月額125円からの「 さくらのレンタルサーバ

★ホームページスペース有効化(例)

プロバイダのホームページスペースを使用するには、有効化の手続きが必要となります。 各プロバイダの示す手順に基づいて手続きをしてください


  プロバイダが Toppa! の場合
  1. Toppa!UserToolsにアクセスし、アカウントIDと接続パスワードを入力して[ログイン]をクリック
  2. [プランおよびサービス設定]をクリック
  3. ホームページ利用設定の項目で[設定]ボタンをクリック
  4. 容量選択の画面で希望の容量を選択し、[次へ進む]ボタンをクリック
    (無料で利用できるのは100MB)
  5. 確認画面が表示さるので、[変更する]ボタンをクリック

このページのトップ

■HTMLファイルを作成する

一番簡単な方法は、ブラウザで表示しているものをテキストコピーするやり方です。
ただし、著作権法とか特許法に抵触しないように考慮、工夫してください。
下の1.、2.アンカーは、一番単純なページを表示します。

★ブラウザからHTMLファイルの中身をみる(IEの場合)

ブラウザからHTMLファイルの中身をみる  「表示」メニューの「ソース」、またはブラウザの右クリックの「ソースの表示」でHTMLファイルを見ることができます。
  1. ソースを見たいページをブラウザで表示
  2. 「表示」メニューの「ソース」を実行
  3. この中身を全てコピーして、エディタの新規作成に貼り付ける
  4. トップページ「index.html」として保存すればHTMLファイルは完成

 とりあえずは、エディタはメモ帳でも何でもいいです。貼り付けて保存してください。
 メモ帳はWindowsなら、[スタート]-[すべてのプログラム]-[アクセサリ]-[メモ帳]で起動できます。
 下の1.、2.アンカー表示後は、ブラウザの「戻る」で閉じてください。


1.日本最小のHTMLファイルを表示

な、なんとこの文だけでもちゃんと表示されるのです。気が楽になったでしょう?
ただし、こんなHTMLファイルじゃぁだめです。


2.文法に基づいた簡単なHTMLファイルを表示

<head>〜</head>とかはタグと言います。詳しくは後で勉強しましょう。


ヒント インターネット エクスプローラでメニューが表示されていない場合は 「Alt」キーを押すと表示されます。

参照
ブラウザを使ってHTML,CSS,JavaScriptのソースコードを閲覧する方法を説明しています。
★ソースコードを閲覧する

このページのトップ

★お勧めのテキストエディタ

  TeraPad がフリーソフトとしておすすめです。
  森の窓(TeraPad) からもダウンロードできます。

参考
HTMLエディタとしては、最終的にはこちらを推奨します。
★お勧めのHTMLエディタ

ez-HTMLの使い方については、こちら >>> ez-HTMLの使い方

このページのトップ

★HTMLファイルの簡単な修正

 コピーしたままを表示しても面白くないので、中身をちょっと修正しましよう。
 上の2.から作ったファイルを修正します。
  1. 2.から作ったファイルをテキストエディタで開く
  2. <head>〜</head>中の「簡単なHTMLファイル」を好きな文に変更
  3. <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ファイルをブラウザで表示する

 保存したローカルの場所からブラウザで表示させます。
  1. 作ったHTMLファイルを保存したフォルダをエクスプローラで開く
  2. HTMLファイルをダブルクリック

このページのトップ

★TeraPadからブラウザ表示を行う

 TeraPadでは直接ブラウザ表示の確認(プレビュー)ができます。
  1. HTMLファイルをTeraPadで開く
  2. [ツール]メニュー-[Internet Explorer]を実行
ヒント ツールバーのアイコン、またはショートカット[F11]キーでもブラウザ表示できます。

このページのトップ

■ファイルをFTP転送する

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の使い方
を見てください。

このページのトップ

■無料テンプレートとフリー素材

無料テンプレートとフリー素材を利用すれば、お金(と時間も?)をかけずにホームページの作成ができます。

★無料テンプレートを使用する

こちらで、無料テンプレートを公開しています。

無料テンプレート(札幌 IT ソリューションズ)

sample1 sample2 sample3 sample4 sample5 sample6 sample7

ホームページ作成講座では、各ステップにサンプルコードがあります。 こちらも参照してください。

このページのトップ

★フリー素材を使用する

こちらで、フリー素材を紹介しています。

 おすすめフリー素材

このページのトップ

■無料でホームページを制作できるオンラインサービスを使ってみる

Wix.comの無料で使用できるオンラインサービスで、ホームページを作成してみました。
こちらはHTMLの習得はできません。逆にHTML、CSSを全く意識しないでホームページを作ることができます。
「たまちゃんのつぶやき」「無料でホームページを制作できるオンラインツールを使う」をご覧ください。

このページのトップ

この後、
ez-HTMLについて学びたい方はこちら >>>     ez-HTMLの使い方
HTMLの基礎について学びたい方はこちら >>>   HTMLの基礎
CSSての基礎について学びたい方はこちら >>>   CSSの基礎
ホームページ作成講座て学びたい方はこちら >>> ホームページ作成講座

このページのトップ

参照させていただいたサイト様

このページのトップ