ホームページ作成で使用する言語

HTMLとCSSは、ホームページを作成するときに使う言語です。

HTMLは、文書を構造化するための言語で マークアップ言語といいます。CSSは、作成されたHTMLの見た目や装飾を整えるもので スタイルシート言語ともいいます。

それぞれ作成されたファイルは、HTMLファイル、CSSファイルといいます。

  • HTML・・・文書構造を定義する、骨組み・構造
  • CSS・・・見た目や装飾を整える、

構造化

文書の作成、例えば 社内や町内会のお知らせを作るなど、誰かに見てもらう際に大見出し、中見出し、文章、写真などと分かりやすい構造で作ることがあります。

HTMLもこれと同じように、大見出し、中見出し、小見出し、文章という構成を分かりやすく示すというのが基本となっています。

そのページは何のページなのか?何について書かれているのか?どういう構成になっているか?などです。

HTMLは、コンピューターのブラウザに分かるように記述するための言語です。

タグ

HTMLでは、タグというものを使って内容を定義することができます。

  • <head> </head>・・・サイトの基本的な情報を書く
  • <body> </body>・・・本文、サイトのメイン部分
  • <title> </title>・・・タイトル名、ページ名
  • <h1> </h1>・・・H1、大見出し
  • <h2> </h2>・・・H2、中見出し
  • <p> </p>・・・ひとつのまとまった文章、段落
  • <img>・・・画像

タグには他にも様々なものがあり、これらを組み合わせることでWebページが作成されています。

HTMLファイル

HTMLファイルは、メモ帳やテキストエディタで作成することができます。

メモ帳

保存するときに 拡張子を .htmlにします。こうすることでブラウザで読み込めるファイルになります。

ブラウザで表示

ブラウザのタブに <title>タグで囲った文字が表示されています。

またh1やh2のタグで囲ったところが 太字になり、pのタグで囲ったところが段落になっていることが分かります。

CSSファイル

色を付けたり 横幅を指定したり、装飾を行うのがCSSです。

CSSもメモ帳で作ることができます。HTMLのように決まった書き方があります。拡張子を .cssにして保存します。

CSSファイル作成

HTMLファイルに、CSSファイルを読み込む設定を追加します。CSSを外部ファイルとして読み込みます。

外部ファイル

編集後 ブラウザを開くと、CSSの設定が反映されていることが分かります。

編集後

このように HTMLとCSSはセットになっています。

HTMLファイルとCSS

HTMLに直接 色を指定したり、見た目を変更するような設定を行うこともできるのですが、現在は HTMLファイルとCSSファイルを分けて使われるのが主流となっています。

またHTMLとCSSには バージョンがあり、最新のバージョンはHTML5とCSS3になります。

ソース

ソースとは、源、水源という意味です。HTMLやCSS、プログラミング言語など記述されたものをソース、ソースコードといいます。

Webページやプログラムというのは、このソースによって動作しています。

ソース

Webページやプログラムが正しく動作しない、実行されないというときは、ソースを見直す、ソースを修正する作業が必要になります。

HTMLやCSSでは、ブラウザに正しく表示されない、レイアウトが崩れているというときは ソースに問題があることがほとんどです。