婚活LABより、ブライダルネットの期間限定クーポン配布中!!

第1回 WEBサイト作成講座 『HTMLの基礎中の基礎』

第1回 WEBサイト作成講座 『HTMLの基礎中の基礎』

これからWEBサイトを作ってみたい、ブログ運営してみたい、会社のホームページを作成してみたい。でもまったく作り方わからないという方を対象に、数回にわけて実際に簡単なサンプルとなるWEBサイトをサーバーにアップする手前まで一緒に作成していきながら学習していきたいと思います。読み進めて頂けば必ずWEBサイトを作成できるようになります。

また、最近ではwordpress等の様々なツールを作って簡単にホームページを作成することも可能ですが、カスタマイズする際に基礎を把握していないとつまずくことが多々あると思います。まずは基礎から学んでからツールを利用していくのが良いと思います。

今回はwindowsをベースとし当講座を進めていきますが、mac osの場合は適宜対応お願いします。

まずはHTMLから学ぼう。

まずは、WEBサイトを作成する上でほぼ必須のHTML(HyperTextMarkup Language)について解説します。

HTMLは、webページを作成する為に開発、使用される言語で、現在のほとんどのWEBサイトで使用されている言語です。マークアップ言語に分類され、World Wide Web Consortium(ワールド・ワイド・ウェブ・コンソーシアム)という略してW3Cと呼ばれる非営利団体によって標準化されています。

マークアップ言語とは・・・

マークアップ言語とは、視覚表現や文章構造などを記述するための言語のことであり、ざっくり簡単にいってしまうと、「ここには見出しが書かれています」といった人間が直感的に把握できる内容をタグや記号などで指定し、コンピューターに認識させる言語。

HTMLの記述方法

HTMLでは、半角の『<』と『>』の中に意味を持つ要素名と呼ばれる文字列を入力して記述します。これをタグと呼びます。例えば、見出しを表すh1を<>のなかに入れた場合『<h1>』となりその後に表示させたい内容を記述します。しかしこれだけではどこまでが見出しであるかブラウザが判断できないため、終了を表す『/』を、意味のある要素名と呼ばれる文字列とセットで入力した終了タグを最後に記述します。

例 <h1>ココは見出しです。</h1>

これで『<h1>』と『</h1>』の中身が見出しであることをブラウザに認識させることができ、ブラウザ上には『ココは見出しです。』と表示されます。この開始タグから終了タグまでを要素と呼びます。また、なかには終了タグがいらないものもあり、それらを空要素と呼び、改行を表す要素名brなどがそれにあたります。

HTML要素の各部名称の解説

上記でも少し説明しましたが、度々繰り返し出てくる言葉ですので、HTML要素の各部名称について以下の図にて解説します。

各要素の説明

①要素 開始タグから終了タグまで、要素の内容を含んだ情報の単位
②開始タグ 要素の始まりを明示的にしめしたタグ。 例 <p>
③終了タグ 要素の終わりを明示的に示したタグ。 例 </p>
④要素名 意味を持った文字列。例えば要素名を『p』とすると段落を表す。
⑤属性 要素名に対する設定を指定する文字列。プロパティー
⑥属性値 属性に対する値。設定情報。
空要素 終了タグを必要としない一連の要素

例えばh1要素と言われた場合、要素名をh1としたものの開始タグから終了タグまで全体を指します。

HTMLのバージョンについて

HTMLにはいくつかのバージョンが存在します。1999年にHTML4.01が策定されて以降、幅広く利用され普及されてきました。2008年、先に述べた非営利団、W3CによってHTML5の草案が出されて以降も、各ブラウザ対応状況に違いがあったことから長らく前バージョンのHTML4.01が利用されてきました。2014年にHTML5が勧告されてからは各ブラウザの対応も進み現在までHTML5が主流となっています。

これからHTMLについては学ぶ方は、迷わずHTML5(厳密には5.2)について学習する様にしてください。また、あまりに古い書籍やサイトで学習する場合はHTML5では非推奨、廃止となっている内容が含まれている場合もありますので注意してください。

HTMLファイルを作成しよう。

では実際に、HTMLをコーディングしていくファイルを作成しましょう。HTMLのファイル作成、コーディングするにはテキストエディタが必要です。テキストエディタとは文字情報のみのファイルを作成するソフトのことを指します。様々なプログラミング言語を用いてコードを記述する際に使われます。

テキストエディタを用意する

今回のファイルを作成する為だけであればWindows標準のテキストエディタ『メモ帳』でも構いません。

  1. デスクトップの空いているところを右クリック
  2. 新規作成
  3. テキストドキュメントをクリック
  4. 作成されたテキストファイルをクリック

上記の手順でメモ帳を新規作成することができます。

しかし、より優れた機能を持ったテキストエディタがオンライン上で入手できますので、そちらの使用をおすすめします。

今回の講座では、高機能で初心者の方にもわかりやすいNotepad++の使用をおすすめします。以後、Notepad++の使用を前提に進めていきます。

テキストエディタに最低限のコードを入力する

Notepad++(または任意のテキストエディタ)を起動し、ファイルタブから新規作成を選択し、新しいファイルを作成してください。次に作成した新しい空のファイルに以下のコードをペースト、または入力してください。

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>

任意の場所に「sample」ディレクトリを作成する。

ディレクトリを新規作成し、そこに先程コピー&ペースト、または入力して作成したファイルを保存するためのディレクトリを作成します。

ディレクトリを作成する場所はデスクトップ上でもDocument内でもどこでも構いませんが今回はファイル名に「sample」と付けてください。

フォルダの作成

ディレクトリとは・・・

厳密には少々違いがありますがわかりやすく言うとフォルダのことです。windowsやmacでは一般にフォルダという表現が使われていますね。

WEB全般ではファイルを整理し、フォルダを入れ子にして階層構造(ツリー構造)を作って管理する為、住所録という意味を持つディレクトリという表現が使われます。

よく使われる使用例に、ルートディレクトリやカレントディレクトリという言葉が使われます。それぞれ階層構造の一番上のディレクトリ、現在開いているディレクトリといった意味を持ちます。

「sample」ディレクトリにindex.hemlを保存する

上記で作成したディレクトリに先程コピー&ペースト、または入力したコードを下記の手順で保存します。

  1. Notepad++(テキストエディタ)のファイルタブから名前を付けて保存を選択
  2. 保存する場所(I)に先程作成した「sample」ディレクトリを指定
  3. ファイル名(N)に「index」と入力
  4. ファイルの種類(T)のプルタブから「Hyper Text Markup Language file(*.html・・・省略)」を選択
  5. 保存(S)をクリック

ファイル名をindex.htmlにする理由

ブラウザではディレクトリに直接要求があった場合、まずデフォルトドキュメントと呼ばれるファイルを探して表示します。index.htmlの他にもphpという動的なwebページを扱う言語に使うindex.phpもデフォルトドキュメントとして用意されています。基本的にwebサイトのトップページに使われ省略してURLが表示されます。

例えば、当サイトのトップページのurlに要求があった場合、そのままhttp://howto.logilab.jpと表示されます。厳密にはhttp://howto.logilab.jp/index.phpが読み込まれています。

以上でWEBサイトを作成する準備が整いました。次回からは先程コピーしたコードの説明と実際にサンプルサイトのトップページを作っていこうと思います。

第2回 WEBサイト作成講座 『必須要素の解説』

グループサイト。婚活LABより!婚活無料診断実施中!

CTA-IMAGE 簡単な質問に答えるだけですあなたに最適な婚活タイプが丸わかり!