海岸通り

超、超、超、初心者のための手作りホームページ

2020-04-29

ホームページの作り方はいろいろありますがここではホームページを手書きで簡単に作成する手順をご案内をします。HTMLを手書き?となると難しそうですがタイトルにあるように超、超、超、初心者のためのHTMLをご案内します。せっかくホームページを作ってみようと思われたなら始めの作り方は簡単なものから慣れて世界へ情報を発信してみてください。そして「ホームページってこんな感じで見えているんか!」をなんとなくつかんでいただけたら嬉しいです。

my-pc-私の自作パソコン
(ついこの間まで使っていた筆者の自作パソコンです)
今の時代はCMS(コンテンツ マネージメント システム)を使って作るのが当たり前になってきましたが初心者には敷居が高いと思います。よく、かんたん、簡単とあるのは出来る人、使いこなせる人同士の話です。筆者もCMSは分かりませんでしたが手書きでサイト作成をしていましたので自然の流れでCMSへ移行することが出来ました。手書き作成はそんなメリットがあります。

超、超、超、初心者のためのホームページ作り方

まずは覚え方のこつですが
「なんでこうなるんだ!?」と考えず「こうなるんだ!」と思ってください。「じゃあ分からない時はどうするの」となるわけですが、そんな時は分からないとこは置いといてどんどん進んでいきましょう。後で「そうだったのか」となり全部つながります。途中で諦めた方の多くは「なぜ そうなるのか」と考える方が多いです。(筆者の経験からですが・・・)

上にも書きましたが「ホームページとはこんな感じで見えているのか・・・」が分かってもらうのが目的です。

TeraPadのダウンロード

TeraPadとはパソコンにインストールされている「メモ帳」の機能アップしたソフトのことと思ってください。これを使ってHTMLを書いていきます。

ダウンロードの前にTeraPadを入れるフォルダを作ってそのフォルダにインストールして下さい。
↓下のリンクからダウンロードしてください。

TeraPadをダウロードする

■ダウンロードできたら下のようなアイコンがあるのでダブルクリックでインストールして下さい。

■インストールできたら↓下のようなアイコンが出ていると思うのでそれをダブルクリックで開いてください。
tera-pad-アイコン

■ダブルクリックで起動して下の画面になります。
terapad起動画面
起動できました。^^

HTMLを書いていく

TeraPadが起動したらHTMLを書いていくのですがご安心を!下のHTMLをコピーして下さい。
起動したTeraPadの左上でカーソルが点滅しています。そこへ自分のカーソルもって行って右クリックして出てきたメニューから「貼り付け」をクリックで下のHTMLソースを貼り付けます。


<html>
<head>
<meta charset="utf-8">
<title>超、超、超、初心者のホームページ作成</title>
</head>
<body>
自分のホームページを世界に発信!
</bodyl>
</html>

上のHTMLソースの意味のご案内です。
HTMLのご案内

覚えなくてもいいです。やがて覚えてしまいますから・・・。

TeraPadに貼り付けたら好きなフォルダに保存します。

※フォルダーは自分が好きなところに好きな名前で作ってOKですがご案内を進める上で「homepage」と言う名前で保存してください。
TeraPad-HTMLの保存

※筆者も始めのうちは自分の好きな所が分かりませんでした。^^;
分からない時は「マイドキュメント」の中当たりがいいかと思います。要するに自分が一番分かりやすいところにフォルダーを作ったらいいです。「こうするのだ」と思ってください。

 

保存ボタンを押したら「名前を付けて保存」が開きます。

上で保存ボタンを押すと「名前を付けて保存」窓が開くので「index.html」として保存ボタンを押して保存します。
保存する時「保存する場所」は自分が作ったフォルダ「homepage」になっていることを確認して保存してください。
もし、保存するフォルダでない場合は「保存する場所」に表示されているフォルダ名の少し右にある「フォルダに上向きの矢印」アイコンを押して保存対象フォルダにして下さい。
※ファイル名も好きに決めていいのですが案内の都合上「index.html」に決めます。皆さんもファイル名は必ずindex.htmlとしてください。理由は後で分かりますからここでは飛ばします。そういうモノだと思ってください。
ファイルの保存の仕方

 

保存が出来たら「homepage」フォルダーをダブルクリック↓↓

出てきた「index.html」ファイルをダブルクリックでホームページが見えます

index.htmlをダブルクリックして下さい。

 

ホームページが見えた!

初めてのホームページが見えた
「たった一行!」なんと地味なホームページでしょうか・・・、というかがっかりされたりしているのではないでしょうか?
それに「自分が何をしているのか分からんぞ!」また、これがいったい何!?と思われた方など・・・。
筆者も始めはそうでした。こういうモノだと思ってください。

たった一行!されど一行なんですよ。
これに、背景と写真を表示できたら様変わりするんです。たった2つの追加だけです。これ以降もお楽しみに。

超、超、超、初心者のホームページ作成で世界へ情報発信しよう

何とか一行だけのホームページが見えたことと思います。ですが今の状態は自分のパソコンの中だけで見えているのです。世界はおろか隣の人にも見てもらえません。もうひと頑張りで簡単に世界へ情報発信できますからご安心して下さい。
それでは参りましょう。

FFFTPソフトのダウンロード

世界へ情報発信するにはインターネット上に繋がっている「サーバー」とモノのところに先ほど作成した「index.html」ファイルを置かなくてはなりません。このことをファイルを「アップロードする」といいます。じゃあアップロードしてみましょう。
アップロードが完了した時点でもう世界の人が見られるようになるんです。簡単ですね。

FFFTP ダウンロード

■FFFTP ファイル転送ソフトについて
FFFTPソフトをインストールしたために何か障害が起こる事があるかも知れませんので自己責任ということでお願いします。(何年も愛用しておりますが 一度もそのようなことはありません)
FFFTP曽田バナー
↑↑FFFTPソフト開発者 曽田様のサイトです。
下記曽田様の使用許諾もお読み下さい。↓↓

本ソフトウェアは、著作権者によって「現状のまま」提供されるものとし、 明示黙示を問わず、商品として通常期待される品質を備えているという保証や、 特定の目的に適合するとの保証を含め、何の保証もなされません。 事由や損害発生の原因の如何を問わず、且つ責任の根拠が契約、厳格責任、 不法行為(過失などを含む)であるかを問わず、仮にそのような損害が発生する 可能性を知らされていたとしても、本ソフトウェアの使用から発生した直接損害、 間接損害、偶発的な損害、特別損害、懲罰的損害または結果損害のいずれに 対しても(代替品またはサービスの調達、使用機会やデータ、利益の損失の 補償、または業務の中断に対する補償を含め)、著作権者は責任をいっさい負い ません。

読んでいただけましたら 自己責任でソフトをダウンロードしてください。
■FFFTP ファイル転送ソフトダウンロードとインストール
ハンドマーク
FFFTPソフトのダウンロード開始
↑↑FFFTPソフトのダウンロード開始をクリックして下さい。
ダウンロード出来たらダブルクリックでインストールして下さい。

今日はここまで・・・