【初心者】HTMLを独学で学ぶと”なるほど”が増える話

Learn HTML by yourself

【初心者】HTMLを独学で学ぶと”なるほど”が増える話

私達が美しい画像やプログラムなどを気軽にみているWebサイトですが、実はHTMLのテキストデータで成り立っています。このページもそのうちの一つです。

Webサイトを作るファイルに注目!

きれいなWebサイトを作り上げるには、様々なファイルデータを使っていますよね。

📁ファイルデータ

  • HTML…テキストで文書を作成
  • CSS…レイアウト
  • JavaScript…動的機能
  • jpg…ビットマップ形式の画像
  • mp3…音声データ(圧縮)
  • mp4…動画や音声などを記録するコンテナフォーマット

 

Webサイトを作るファイルの文字に注目!~×A,〇a~

Webサイトデータを作る時には、半角英数字をファイル名に使用します

ほとんどのサーバーは、全角文字や日本語に対応していません。もし全角文字や日本語でデータファイルを作成(できたら)した場合、せっかく作り上げたページを表示することができないということにもなりかねません。

ちなみに、私達がHTMLによって記述したデータは、サーバーにアップロード(データをサーバーに転送)することで、要求されたページを表示することができます。この時、ファイルエラーがおこったり、ファイルが破損したりすると、表示することができなくなるので、ファイル名を半角英数字で作成しておきます。

その他文字

ファイルデータを保存する時には、半角英数字以外にも使えるのが記号です。

  • ハイフン【-】
  • アンダースコア【_】
  • 全角スペース【 】
  • 半角スペース【 】

これらも半角であることが前提ですが、万が一エラーがでたり、保存ができなかったりした場合は、全角英数になっていることもありますので注意が必要です。

     〇 index.html  

×index.html(全角英数)

×インデックス.html(日本語) 

×index/html(スラッシュ)

×index#html(ハッシュタグ)

×index html(全角スペース)

×index html(半角スペース)

Webサイトを作るファイルの種類に注目!

データを保存する時には、種類ごとにわけて保存することが多いと思います。

📁jpg(画像)

📁css

📁javascript

名前はルールさえ守れば、自分が覚えやすいものでかまいません。

サイトマップを作ってファイル名を確定

サイトマップは、サイト全体のナビゲーションの役割を持っています。webサイトを作るにはある程度設計が必要になってきます。

(例)

  • どんなコンセプト?
  • どんな内容?
  • こうするともっとよくなるよ!

 

計画的にサイトを構築していくために、ページの数だけhtmlファイルを作成していきます。

HTMLサイトマップとは

サイトマップは、webサイトの中のページや優先順位、更新日付などが書かれたものです。サイトマップを設置することで、Googleにサイトの存在や更新を知らせることができます。

SEO対策のためにも、サイト・サイトマップを作成・更新したらGoogleサーチコンソールに登録しておきます。

📝HTMLファイルはメモ帳(notepad)が必要

メモ帳はWindowsであれば標準搭載しています。

HTMLファイルの作成

※タスクバーにある検索画面で「メモ帳」と入力しても良いです。

サイトマップを作ってファイル名をディレクトリにする

私たちがwebサイトを閲覧する時に一番初めに目にするトップページが、index.htmlです。

一般的な会社のサイトを例にあげてみると、

  • トップページ
  • 会社案内
  • 事業内容

などの情報を第一に目にすると思います。

例えば、URL:https://kirakirachange.comの場合、”kirakirachange.com”の”index.htmlを呼び出してくれているのです。この時、index.htmlは省略されています。

トップページには、このindex.htmlを最初の階層にします。

 

  1. トップページ(index.html)
  2. 会社案内フォルダ(company)

2-1.会社案内トップページ(index.html)

2-2.会社案内の画像フォルダ(jpg、images)

このように、ページ毎にディレクトリで管理できるようになるので、スマートな管理をすることができます。

サイトマップを作ってHTMLファイルをページ名にする

会社や特化したページ以外のWebサイトでは、ページ数が少ない場合もあります。

  1. 📁サイトマップ(index.html
  2. 📁サイト案内(site.html
  3. 📁サイト内容(sitemap.html

まとめ

webサイトを公開するためには、HTMLテキストデータをサーバーへアップロード(転送)することで目にすることができます。

テキストファイルや、データファイルをFTPソフトを利用してアップロードします。私は、【ロリポップ!】 を使っていて、その中でFTP機能が搭載されています。

多くの人が利用しているのは、FFTTPソフトで、定番ソフトを無料でダウンロードすることができるツールです。

ご存知の方も多いと思いますが、フリーソフトを配布している「窓の杜」が有名ですね。

きちんとファイルやフォルダを整理できていないと、私のようにすべての記事データを壊してしまう羽目になりますのでご注意願います。

 

コメント