ページメニューはこちら！

2013年4月2日

このエントリーをはてなブックマークに追加
Check

HTMLって何？ – ホームページの超入門編① –

前書き：
ずっとやってみたいと思った企画『ホームページ制作教室』を行なって行きたいと思います。
正直、仕事の合間にやっていく感じなので更新頻度とかあまり多くないかもしれませんが、出来る限りやっていこうと思います！
HubStyleのクライアント様に、『ホームページってこうなってるんだぁ』って思って頂けたら、よりホームページが身近なものに感じてくれるのではと思いました。もちろん、弊社のクライアント様じゃなくても、大歓迎です！

さて今日は第一回目なので、これからホームページの超基礎を学ぶにあたって必要なツールと参考になる公式サイトの紹介、そして一言文章をホームページとして表示出来るまでを書いていこうと思います。

1.HTMLとは何か？

皆さんが普段ご覧になっているホームページは、HTMLという言語にて書かれています。HTMLとは、HyperText Markup Language（ハイパーテキスト マークアップ ランゲージ）の略なのですが、ここまでは今は覚えなくて大丈夫です。
で、それが何かというと…まずはこれをクリックしてみて下さい！

いかがですか？わけの分からない文字が出てきたと思います。これがHTMLです。実際に、皆さんが普段見ているホームページは、実はこういう訳のわからない言葉で書かれています。それをブラウザ（IE、Firefox,Chromeなどホームページを見るソフト）が、HTMLやCSSの情報を元にきまった法則に則して表示しているんです。ちなみに先ほど出てきたHTMLの文章（ソースと呼ばれます）は、Yahoo！JAPANさんのトップページのホームページのものです。

つまりホームページをつくるということは、このHTMLソースコードを書いていくということになります。ということは、このHTMLソースを覚えれば、簡単なホームページは出来るということです。なぜ『簡単なホームページ？』かというと、実際凝ったホームページは、このHTMLを基本としそれにプラスして『CSS』や『JavaScript』など様々な言語も多く使用しています。

2.HTMLを覚えるにあたって必要なもの

ざっくりとHTMLについて説明しました。まぁここでは『ふぅ～ん』って感じでさらっと読み流してくれたらいいかと思います。
さて、ではHTMLを覚えていくにあたり必要なものをご説明します。といっても、何も特別なソフトが必要になるわけではありません。もちろん、WEBデザイナーさんやコーダーさん（HTMLなどの言語を駆使し、ソースコードを専門で書いている人）は、それぞれ自分にあったソフトを使っています。

では、実際に必要なものは以下
・テキストエディタ
・ブラウザ（Firefoxを使用します。）
以上、２点でOKです。
上記２点はなんでもOKなので、テキストエディタはWindowsならメモ帳、Macならテキストエディットとかでも大丈夫です！ブラウザも「Firefox」ではなく、「IE」や「Safari」でもOKです！ただ、若干ブラウザによって見え方が異なります。テキストエディタもネットで検索すると便利で使いやすいものが沢山無料でありますので、興味ある方は探してみて下さい。

3.実際に、『こんにちは！』という文字をブラウザで表示してみよう！

実際に、ブラウザに「こんにちは」と表示してみたいと思います。
まずは、テキストエディタを開いて次のように文字を入力してください。

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>

では、これの簡単な説明です。まず1行目の

<!doctype html>

この文章は、『HTMLの言語で書かれた文章ですよ』という宣言文になります。これを書くことでブラウザは「これはHTMLで書かれてるな」って分かります。

<html lang="ja">

次に2行目のこの暗号のようなものは、『このHTMLは日本語（ja）ですよ』という意味を持っています。

<head>
<meta charset="utf-8">
<title></title>
</head>

そして次にくる3行目から6行目まではheadタグと呼ばれるもので囲みます。ここには、このホームページの『タイトル』や『キーワード』など文章の情報を記述する場所になります。実際には、ブラウザ上にホームページとしては、表示されない部分です。
ちなみに記述の仕方は、<head>で始まり、</head>で閉じます。

では、まずHEAD要素にタイトルを入れてみましょう！タイトルの記述の仕方は、<title>と</title>の間に、言葉を入れたらOKです。ここでは、『ホームページの超入門』といれてみましょう。

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ホームページの超入門</title>
</head>
<body>
</body>
</html>

こうですね！今の段階では、何をやってるか意味不明かと思いますがとりあえずどんどん行きましょう！
次に<body>と</body>で囲まれた部分、これはBODY要素といい実際にブラウザに表示される場所になります。つまりここに文字を書くと表示されるということです！では、『こんにちは！』と書いてみましょう！

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ホームページの超入門</title>
</head>
<body>
<p>こんにちは！</p>
</body>
</html>

「ん？？？<p>と</p>で囲まれてる！？」と思われましたか。ここでは、まず何も考えずに<p>こんにちは！</p>と書いてみましょう！

4.ブラウザで表示してみよう！

これでできましたよ！あとはこのテキストを保存して、ブラウザで開くだけでOKです。
さて保存の仕方なのですが、テキストエディタで保存を選択します。

保存する際は、名前をindexとし拡張子を.htmlとし一旦デスクトップにでも保存して下さい。
パソコンの設定によっては、拡張子が出ない場合もあります。もし拡張子を表示したいなら、こちらのサイトが参考になると思います。
ファイルの拡張子を表示するには? byマイクロソフト

保存したアイコン

するとこうなりますよね？
次に保存したそのアイコンを、ダブルクリックしてみてください。

こんな感じで表示されれば成功です！

すこし長くなってしまいましたが、ホームページの超入門第一回目でした。次回は、タグについて色々紹介していきたいと思います！

プロのデザイナーが教えるホームページレッスン好評受付中！

ホームページ制作の入門から中級者・上級者向けのPHPやJavaScriptのプライベートレッスンを行なっています。複数人でのグループレッスンもOK！これから『全くの初心者だけどホームページを作ってみたい』という方や『もっとスキルアップしたい！』という方大歓迎です。
詳しくは、お問い合わせフォーム又はお電話【092-571-6208 】にて

Leave a Comment