HTMLタグを手打ちしての作り方

パソコン上でホームページを作成してからアップロードする場合、何らかの作成ソフトを使用するケースが多いと思いますが、htmlタグの知識があれば、メモ帳などでもタグを手打ちしながら作ることができます。

■Windows付属のメモ帳で作る方法

①まず、「右クリック - 新規作成 - フォルダー」でパソコン上に「フォルダ」を作成します。
このフォルダ内にhtmlファイルやcssファイルを作成していきます。
名前は何でもかまいません。

フォルダ作成

②次に、メモ帳でHTMLタグを打ち込んでいき、トップページのindex.htmlファイルを作成します。

タグを手打ち

③完成したら「ファイル - 名前を付けて保存」を選択。
④ファイル名を「index.html」と入力し、
⑤ファイルの種類で「すべてのファイル」を選択。
⑥文字コードを「UTF-8」で指定し、①で作成したフォルダ内に「保存」します。

UTF-8で保存

⑦同様に、拡張子「小文字英数.css」でスタイルシートも作成します。
画像も使用する際は「image」や「img」などのフォルダも作成し、そちらに入れておきます。

サイト作成完了

取りあえずはこれで完成ですが、これらのファイルをまったくのゼロから作成するのは難しいと思いますので、テンプレートのサンプルなどを参考にして作成していくとよいでしょう。

パソコン上でサイトが完成したら、ホームページスペースのpublic_htmlフォルダに、これらのファイルをFTP接続などでアップロードします。アップロードする際は、①のフォルダごとではなく、「中身のファイルとフォルダ」をアップロードします。

完了したらホームページのURLにアクセスし、サイトが表示されるのを確認しましょう。

ファイルを修正する際も、メモ帳の「ファイル - 開く」、「ファイルの種類 - すべてのファイル」で選択し、文字コードを「UTF-8」に指定して修正することができます。

けれども、このWindows付属のメモ帳は、基本的に「.txt」のテキストファイルを作成するためのツールですので、htmlファイルの作成にはあまり向いていません。

文字コードについても「euc-jp」などはありませんし、ちょっとしたミスで文字化けしてしまうことも多いです。また、「右端で折り返す」にチェックを入れながら作成していると、変なところで改行が入ってしまうこともあります。

そのような意味で、Windows付属のメモ帳で作るのはお勧めではないです。

■テキストエディタを使っての作り方

手順については同じなのですが、メモ帳ではなく、テキストエディタを使うと便利です。
このテキストエディタにもいろいろありますが、「TeraPad」という無料のテキストエディタが使いやすいと思います。

TeraPad

このツールは保存できる文字コードの種類が多く使いやすいです。UTF-8で保存する場合、「UTF-8」と「UTF-8N」の2種類がありますが、「UTF-8N」を選ぶとよいでしょう。

ちなみに、このパソコン上で作る際のCSSの設定についてですが、CSSファイルを「絶対リンク」で指定しても、サーバー上にアップロードするまではデザインの確認ができません。

そのような場合は、パソコン上の同一フォルダ内にCSSを入れておき、「相対リンク」で指定しながら作成すると確認作業も捗るでしょう。