メニューを開く

トップページ │ コラム │ そもそもHTMLって何?

コラム

そもそもHTMLって何?

ホームページを制作する上に欠かせないのが『HTML』という言語です。
最初はそのHTMLにもいくつか種類があるんだよ、という事を書こうと思ったのですが、そもそもHTMLがどういうものかから紹介した方が良いかなーと思い、今回のコラムになりました。

ホームページを作る上で基本中の基本となる『HTML』とはそもそも何なのか、それを紹介しようと思います!

HTMLとは?

HTMLとは、『HyperText Markup Language』(ハイパーテキスト・マークアップ・ランゲージ)の略で、各単語の頭文字を取って『HTML』ですね。
ホームページと言うのは基本的にこのHTMLという言語で作られています。

HTMLで作られていると言ってもイマイチ実感が湧かない……、どういうものか分からない……、と感じる方もいらっしゃるでしょう。
そのように思われたのなら、今ここで右クリックをしてみて下さい。
するとメニューがいくつか出てくると思うのですが、その中から『ページのソースを表示』を選択してみましょう。

column12_img1

すると何やら文字がびっしりと書かれた画面が出てきませんか?
これがHTMLの正体で、この画面いっぱいの文字がホームページを作っているんですね。
現在公開されているほぼ全てのホームページはこの『HTML』によって作られているので、色々とページのソースを見てみるのも面白いかもしれませんね。

『HyperText Markup Language』ってどんな意味?

ハイパーテキスト・マークアップ・ランゲージ、とかっちょいい名前が付いていますが、どういう意味でしょうか?
この『ハイパーテキスト』とは、名前の通りハイパーで高機能なテキストの事です。
具体的にどうハイパーなのかと言うと、ハイパーリンクという物を埋め込むことができ、これを埋め込むことで他のページへ移動する事の出来る『リンク』を張る事が出来ます。
ホームページを使った事があれば、メニューとか色の付いた文字とかをクリックして他のページに移動した事がありますよね。
それがリンクです。

次に『マークアップ』ですが、マークアップとは『印を付ける』という意味ですね。
HTMLは『タグ』と呼ばれるもので、文書の各部分に印を付けられています。
文書の一部分をタグで囲う事で、

  • ここからここまでが見出し
  • ここからここまでが1段落
  • ここからここまでが表
  • ここからここまでがリスト

と言ったように、部分部分をマークアップして役割を与える事が出来ます。
これを文書の全体に施す事で、ホームページが形になってくるのですね。

HTMLには種類がある

HTMLがホームページの形を作っていると紹介をしましたが、このHTMLには種類があります。
『HTML4.01』、『XHTML1.0』、『HTML5』、があり、それぞれ基本は同じでも細かい点で違いがあります。
これについては次回のコラムで詳しく紹介しようと思います。

実際にHTMLを作ってみよう

最後に、実際にHTMLを作ってみましょう。ファイルを作るだけであれば、作るのは意外と簡単です。
まず、パソコンのデスクトップか、フォルダの中で右クリックをしてみて下さい。メニューが出てきます。
メニューの中から『新規作成』をクリックして、『メモ帳』を作りましょう。メモ帳はいわゆるテキストエディタという物で、自由に文字や文書を書けるソフトですね。

メモ帳を開いたら左上の『メニュー』から、『名前を付けて保存』をクリックします。するとメモ帳を保存するためのウィンドウが出てきます。

column12_img2

まずは下部の『ファイルの種類』を『テキスト文書(*.txt)』から『すべてのファイル(*.*)』に切り替えましょう。
次にその下の『文字コード』を『UTF-8』にしておきます。この文字コードをUTF-8に変更しないままでいると、文字化けを引き起こす原因になりますのでご注意ください。

最後に『ファイル名』の部分を変更します。
初期状態では『新しいテキストドキュメント.txt』と書かれていますね。この『.txt』の部分が、このファイルはテキストファイルだと認識させています。
この『.txt』の部分を消して『.html』に書き換えるだけで、ファイルをテキストファイルからHTMLファイルに変更する事が出来ます。『新しいテキストドキュメント.html』という形ですね。

column12_img3

因みにこの『新しいテキストドキュメント』の部分は好きな名前に変更して構わないのですが、インターネットにアップロードする事を考えるのであれば、半角英数字で名前を付けるのが良いでしょう。
トップページであるのなら『index.html』という名前にしておくと後々楽かもしれません。

参考になったらツイートしてくれると嬉しいです!

他にもこんな記事があります




Copyright © 2015 YUKINEKO WEB DESIGN All Rights Reserved.