売れるネットショップのはじめかた

HTMLって何?? HTMLを使ってWEBページを作ってみよう!

2018年02月25日 日曜日
HTMLって何?? HTMLを使ってWEBページを作ってみよう!

ネットショップ運営でWEBに関わる仕事をしていると、
「HTML」や「CSS」という言葉をよく耳にするのではないでしょうか?

聞いたことあるけど、よくわかんない・・・!
WEBぺージを作るためのプログラムかなにか・・・??
実際に自分もHTMLとCSSを使えるようになってみたい!

そんなHTML・CSS初心者の方向けに、 今回は「HTML」に焦点を当てて、
簡単なHTMLの説明と、実際にHTMLを使ってWEBページを作ってみましょう!

 

HTMLとは

pose_necchuu_computer_man

Hyper Text Markup Language・・・ハイパーテキスト・マークアップ・ランゲージ

HTMLとはHyper Text Markup LanguageというWEBページを作成するために使う言語です。

Hyper Tex・・・?言語・・・?
いきなりそんなことを言われても、ピンとこないかと思います。

HTMLとは何かを一言で簡単に説明すると、
「見出し」「段落」などのWEBページの構成を定義するための言語です。

 

実際にHTMLを見てみよう!

言語?構成?っていったいどこに何をどんな風に書いているの・・・?

それでは実際にHTMLの正体を見てみましょう!
画面上で右クリックをし「ページのソースを表示」を押してみましょう。
するとこのような画面が開くかと思います。

ソース

これがHTMLの正体です。

いつも皆さんが見ているWEBページは、
実はこのようにHTMLという言語で書かれており、 Internet ExplorerやGoogle Chromeといったインターネットを見るための「ブラウザ」というアプリケーションで見ることによって、今見ているこのコラムページのようにWEBページとして表示がされるのです!

 

HTMLを書いてみたい!

HTMLという言語を書いて、WEBページを作成することを「コーディング」といいます。
それでは実際にコーディングするための準備をしましょう。

○ HTMLの基本

先ほど「ページのソースを表示」で見たように、
HTMLは

など様々な「タグ」といわれるものを使って、
WEBページの様々な構成を作っていきます。

タグにはそれぞれ意味があり、 今回は以下の4つのタグを使って、簡単なWEBページをつくって見ましょう。

   ・・・見出し

     ・・・段落
 ・・・画像を載せる
     ・・・リンクをつける

○ 準備するもの

・テキストエディタ
「メモ帳」などのテキスト編集を行うアプリケーションを利用します。

・ブラウザ
「Internet Explorer」や「Google Chrome」などのインターネットを見るためのアプリケーションを利用します。

メモ帳・chrome

 

実際にコーディングしていきましょう!

1.

タグで見出しを作成

それではメモ帳を開いて、

タグを使ってページの見出しを表示してみましょう!
まずはメモ帳に次のようにHTMLを記述します。

グリニッジ株式会社

 

2. 「test.html」という名前でファイルを保存

ファイル名を「test.html」という名前で保存しましょう。
「.html」とつけることにより、このファイルはHTMLのファイルですよ!と定義されます。

test.html

 

3. ブラウザで表示してみる

Google Cromeなどのブラウザを開きましょう。
ブラウザを開いたら、ブラウザ上に保存したtest.htmlをドラッグ&ドロップでもっていきます。

ブラウザ表示

すると・・・

「グリニッジ株式会社」とブラウザ上に表示されたでしょうか?
表示された方は、これであなたもHTMLデビュー成功です!

4. タグで画像を表示する

次はタグを使って画像を表示してみましょう!
test.htmlに次のように書いて保存しましょう。

グリニッジ株式会社

ブラウザをリロードしてみましょう。
画像が表示されれば成功です。

5.

タグで段落を作成

次は

タグを使って段落を作成します。
test.htmlに次のように書き足していきましょう。

グリニッジ株式会社

グリニッジ株式会社へようこそ!

グリニッジはインターネットでの商取引を高い水準の技術とノウハウで応援します。

ブラウザで再度表示すると2つの段落ができたかと思います!

6. タグでリンクを作成

最後にタグでリンクを作成してみましょう。
test.htmlはこれで完成です。

「コーポレートサイトはこちら」をクリックすると弊社コーポレートサイトにリンクされるようになりました。

 

最終的にこのようにブラウザにWEBページが表示されていれば完成です!

html

 

まとめ

いかがでしたでしょうか。
簡単な解説でしたが、実際にいつも見ているWEBページのHTMLを見て、
コーディングしてみることでHTMLについて少しでも理解が深まりましたら幸いです。

簡単にHTMLについてまとめると以下のようになります。

HTMLとはHyper Text Markup Languageという、
WEBページを作成するために使う言語で

など様々なタグを使って見出し、段落などのWEBページの構成を定義する

 

今回はご紹介できませんでしたが、WEBページの構成を作成したHTMLに色をつけたり、配置、サイズを変更したりなど、 WEBページのデザイン・レイアウト・見た目を定義していくための言語「CSS」についても今後ご紹介していこうと思います!


文字サイズサイズ小サイズ中サイズ大