ウェブサイトを簡単に作れる基礎知識

スポンサーリンク

ウェブサイトは基本的には「HTML」という言語でテキストファイルを作ります。そのテキストファイルをウェブ閲覧ソフトの「ウェブブラウザ」で開くと、ホームページとか言われるビジュアルなページとして見ることが出来ます。

htmlファイルをとりあえず作ってみる

ウェブサイトを簡単に作れる基礎知識「HTML」という言語で作るテキストファイルは簡単に作れます。
有名な「ホームページビルダー」とか、アフィリエイトサイト作成ツールとして有名な「シリウス」などの専用ソフトを使う必要はありません。
誰でも持っているパソコンに最初から入っているアプリケーションで作ることができます。

そのアプリケーションは・・・Windowsアクセサリーの「メモ帳」とか「ワードパッド」です。このアプリは文字(テキスト)ファイルを作る「テキストエディター」の一種です。

それでは「メモ帳」を使って htmlファイルを作ってみましょう。

メモ帳を開いて
『マイホームページ』と文字を打ちこみます。

『マイホームページ』の前後に「<html>」と「</html>」を入れることによって、このファイルは「htmlファイル」になります。そして保存する際には「****.html」というファイル名にします。

ここでは「test.html」としてみます。

ローカルのフォルダに「test.html」を保存します。
*管理人は既定のブラウザを「Google Chrome」にしていますので、ファイルのアイコンはChromeのアイコンになっています。

ローカルフォルダに保存した「test.html」をブラウザで開くと、ウェブサイトのように見ることができます。

ウェブサイトの構造はすべて同じ

htmlファイルをブラウザで閲覧するというこのサイトの構造は基本的にすべて同じです。
FacebookやTwitterなどのSNSサイトも同じです。

ユーザーが投稿したりコメントしたりするフォームに入力したテキストは、SNSのシステム内でコンテンツとして組み込まれHTML化されて出力されます。

ウェブサイトを作るということは、htmlファイルを作ることということを覚えておいて下さい。

ウェブサイトを作る時の約束事~htmlの記述

次にhtmlファイルを作る時に必ずやっておかなければいけない約束事について説明します。

htmlファイルの最初と最後に「<html>と</html>」を入れることはもうご存知だと思いますが、HTML言語にはバージョンがあり、現在使われているバージョンの中で最も新しいのが「HTML5」です。

現在インターネットで私たちが閲覧するウェブサイトは次の3つのバージョンのどれかを使用しています。

  • HTML4.01
  • XHTML1.0
  • HTML5

そこで、htmlファイルの一番最初に「doctype宣言」というものをします。
『html言語のバージョンは○○○○です』という宣言です。

HTML4.01
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” “http://www.w3.org/TR/html4/frameset.dtd”>
以上のいずれかを使用
XHTML1.0
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>
以上のいずれかを使用
また、「doctype宣言」の前に<?xml version=”1.0″ encoding=”UTF-8″?>のようにXML宣言をします
HTML5
<!DOCTYPE html>

「doctype宣言」の次に<html>を入力しファイルの最後に</html>を入れます。

ウェブサイトを作る時の約束事~headとbodyの記述

htmlファイルにはウェブブラウザでサイトの内容として見ることの出来ない部分があります。
外部デザインファイルへのリンクだとか、モバイル端末への対応方法だとか、サイトのコンテンツ以外の重要なことを記述する部分を「head」と言います。
実際にコンテンツとして見ることの出来る部分を「body」と言います。

<head>~</head>
<body>~</body>

を1セットにして1ページが出来上がります。

コメント