こんにちは。
株式会社Lifeit（ライフイット）です。
Webサイトを制作するのに欠かせない『HTML』。
「HTMLとは？」「HTMLって何なの？」と感じているのではないでしょうか？
初心者の方でも分かるように解説していきます。
HTMLとは？
HTML（えいちてぃーえむえる）とは
「ハイパーテキスト・マークアップ・ランゲージ（Hyper Text Markup Language）」のことで、
ウェブページの土台を作るための言語です。
ウェブページに表示したい文章などウェブページの情報を
『独自のタグ』ではさむことでHTMLを書いていきます。
HTMLはウェブページのベース
インターネット上に公開されてるほとんどのウェブサイトはHTMLを使って作られています。
もちろん今見ているこのページにもHTMLが使われています。
HTMLはウェブページに無くてはならない土台です。
今読まれているこの文字もHTMLのファイル上に書いており、
文字だけでなく写真を表示させたいときにも、
HTMLに画像を読み込むためのコードを書きます。
HTMLによりウェブページの文字や画像が表示されております。
HTMLをブラウザで表示してみよう
HTMLはウェブを構成するための言語で、それを表示させているのがWebブラウザになります。
ブラウザには「Google Chrome、Microsoft Edge、Firefox、Safari」など様々な種類があります、
今回はシェア率の高い「Google Chrome」で解説します。
「HTMLがどのようなものなのか」は、実際に触ってみると分かってくると思います。
まずは少しだけ触れて見ていってみましょう。
サンプルのコードをブラウザで開いてみよう
HTMLを作成するために、以下の２つのツールを使います。
テキストエディタとして『メモ帳』
ブラウザとして『Google Chrome』
HTMLの書き方
HTMLは以下のように「文字とアルファベットや記号」を組み合わせて書きます。
複雑そうに見えますが、１つ１つおさえていくと、難しくはありません。
<!DOCTYPE html>
<html>
<head>
<title>Lifeitのウェブサイト</title>
<meta charset="UTF-8">
</head>
<body>
<h1>Webサイト制作の勉強をしよう！</h1>
<p>HTMLについて学びましょう</p>
</body>
</html>
テキストエディターに記述する
先ほどのサンプルコードをコピーしましょう。
<!DOCTYPE…から</html>までです。
Windowsｍなら「ctrl+C」、Macなら「command+C」もしくは、
対象全部選択して右クリック「コピー」などで、サンプルコードをコピーしてください。
テキストエディターに貼り付け
テキストエディターにコピーしたコードを貼り付けます。
Windowsｍなら「ctrl+V」、Macなら「command+V」
もしくは、右クリック「貼り付け」などで貼り付けます。
練習のためにキーボードで、コードを見て打っていっても良いです。
ファイルを保存
「Windows：ctrl+S」「Mac：command+S」をキーボードで押します。
すると、保存ウィンドウが開きます。
ここは重要です。
「test.html」というように、ファイル名の末尾は「.html」にして保存しましょう。
これにより書いたコードがHTMLファイルとして保存されます。
任意の場所にHTMLデータを保存してください。
これでHTMLファイルの保存ができました。
このファイルをブラウザで表示してみましょう。
ブラウザで表示
作成したHTMLデータをダブルクリックすると、規定のブラウザで作成したHTMLが開きます。
ブラウザでHTMLファイルが開かれました。
ブラウザではHTMLのコードは変換され「ウェブページ」としての状態で表示されます。
このようにHTMLの言語で書いたコードは、ブラウザで開けば変換して表示してくれます。
サーバーを借りるなどの大掛かりな手続きなどをしなくても、
自分のPCで練習して、テスト用のオリジナルウェブサイトを作ることは簡単にできます。
HTMLの中身を少し変えてみる
さきほどのHTMLファイルを少し変更し、ブラウザに反映させてみましょう。
テキストエディターで、HTML文の『<h1>と</h1>』に挟まれた文字を好きな言葉に変えてみましょう。
変更が出来たら上書き保存。
変更が反映される
すでに対象のデータでブラウザを開いていたら、ページの更新。
もし閉じてしまっていたら、対象のHTMLをダブルクリック。
すると、HTMLファイルで編集を行った文字変更が反映されたのが確認できます。
このようにテキストエディターとブラウザを使って
「HTMLを書き、ブラウザで確認…」という作業を繰り返してウェブページを作っていきます。
HTMLだけではウェブページは完成しない
とはいえあくまでもHTMLで書くのはウェブページの土台です。
HTMLだけで作られたウェブページだと文字と画像だけが並んだ単調なサイトになってしまいます。
まず『HTML』で土台を作り、『CSS』と呼ばれる言語でデザインやレイアウトを整えていきます。
CSSによりウェブページの文字や背景の色を変えたり、配置調整などができ、素敵なサイトを構成することができます。
『CSS』については、また別途でご紹介いたします。
最後に
『HTML』とはどのようなものなのか、またどのように使うのかについてご紹介しました。
まずはさわりからですが、これでいつも見ているブラウザに表示することが出来たかと思います。
ここからいろいろと、タグの追加や装飾などをしてサイトを作成していきます。
弊社では制作の請負サービスも承っております。
より詳しく丁寧にご説明もいたしますので、
オリジナルのページを作成をされたいなど場合はご連絡下さいませ。
