HTMLを最短で習得できる方法
WEB上におけるページは、pdfなどの一部を除き、全てHTMLで作られてます。
このページを見ている人は、そのHTMLを学習しようとしている人たちだと思います。
- お店や企業のホームページ
- CMS用のテンプレート
- ブログ用のテンプレート
- wordpress のテンプレート
- WEBエンジニアに興味のある人?
ページをもう少しかっこよくしたい?
最短で習得::5分?いや秒速でしょ
このページでは、HTMLを最短で理解できる方法を教えます。
HTMLとは、プログラミング言語ではありません。気持ちの持ち方としては、極端な話をすると、「文字や文章を飾り付けするための言語」であると思っても大丈夫です。(マークアップ言語の一種)
装飾機能にプラスアルファしたものがHTML(ハイパーテキスト・マークアップ言語)です。
実は、この「ハイパーテキスト」というところがミソで、「ハイパーリンク」の埋め込みによって、世界中のドキュメントをリンクできるところが最大の特徴です。
プログラミング言語ではないので、基本的に簡単です。
ゆっくり読んでも、簡単に習得できます!!
「ハイパーリンク」については、後述。
学習の仕方を変えましょう!
学習方法を間違えて、無駄な事してませんか?
みなさん、HTMLのタグを1つずつ覚えようとしてませんか?
HTMLは、たくさんのタグがあります。
それを全て覚えようなんて事は無駄なので、今すぐやめましょう!
学習の仕方を変えましょう!
最短でHTMLを使いこなせる方法を教えます。
基本パターンを理解しよう!
まず、以下の基本パターンを理解してください。
このパターンは、HTML5になってから世界中の全てのページで共通です。
一般的なページに、必須なタグを指定しています。
※タグの属性については省略して書いています。(詳細は後述)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ページのタイトル</title>
</head>
<body>
コンテンツ本文
</body>
</html>
ハイライトしている行番号5,8だけが変わってきます。
「コンテンツ本文」のところにページの中身を詰めて、膨らませていくイメージになります。
どうですか? 簡単でしょう?
metaタグ
metaタグには、いろんな種類を記載できます。
ここのページで書いてある「metaタグ」は、文字コードに関してだけ指定しています。
「このHTMLはutf-8という文字コード体系で記述しています」ということを示していて、このHTMLを解釈するブラウザが参照して表示します。
シフトJISで書いてあるのに、[utf-8です」と指定すると、文字化けして表示されることになります。
賢いブラウザでは、その記述を信用せずに、しっかり「なんだ、このページは、シフトJISじゃん」と解釈して表示してくれることもあります。
しかし、別の環境では文字化けして表示されたりするから、エンジニアとしては迷惑な話で、ちゃんと文字化けしてくれた方がいいと思うことも多い。
ページの概要を書くための description などは一般的に追加します。
SEOを重視する場合は、かなりのmetaタグを追加することが多い。
それらは、HTML辞典などがあるので、ググってみてください。
とても詳細に書いてあるサイトが複数あります。
このページの後半に、参考リンクを貼り付けておきます。
※このmetaタグの解説についても、別途ページを用意していこうと思います。
コンテンツ本文
後は、8行目の「コンテンツ本文」のところですね。
ここをどういう構成にするのか?
企業のホームページや、なんらかの販売をしている店舗・ショップのホームページ、ブログページ、SNSなどの会員サイト、サイトによって中身が変わってきます。
HTMLの殆どは、ここが重要になってきて、かなりの量を入れ込むことになります。
文字の色付、大きさ変更、飾り付けなどは、スタイルシート(CSS)という別の手法で行います。
昔は、 font タグというのを使ってましたが、現在はCSSで行うのが一般的で、HTML5になってからは、fontタグは非推奨(廃止)になったようです。
写真やイラストは?
WEBページで特色があるのは、写真やイラストなどの画像ですね。
それらは、 img タグというものを使って表現できます。
動画の埋め込みも簡単になってきました。動画は、imgタグではなくて、videoタグというものを使います。(昔は、flashなどの埋め込みオブジェクト形式で、objectタグというものを使っていた)
ページのリンクは?
WEBページで最大の特徴は、ハイパーリンクと言われるものです。
別のページや、別のサイトへの案内のための情報を埋め込むことができます。
ユーザは、その「リンク」をクリックするだけで、該当のページを表示することができます。
WEBが現在のように爆発的に人気を得たのは、このハイパーリンクのおかげです。始まりは、「研究者のための文書があちこちに点在しているが、これらを簡単に共有できないか?」から始まったそうです。
しかも、1つのサーバに存在しているだけではなくて、遠隔地のサーバにも存在している文書も含めて簡単に参照できないか? ということだったようだ。
これらについても、今後、別途紹介したい。
ページの動的表示(DOM操作)
動的に表示内容を変えたり、動画のようにアニメーションにするには、JavaScript というプログラムで書き換えたりします。(DOM操作)
「コンテンツ本文」に使う、様々なタグについては、別セクションにして紹介していきたいと思います。
様々なタグ
HTML5になってから、新しくできたタグがいろいろあります。
面白いものでは、canvas タグです。JavaScriptなしでアニメーションを実現できます。JavaScriptのライブラリであるSVGライブラリなどを使うとCADソフトでさえ実現できます。
これらも別セクションで紹介していきたいと思います。
習得のポイント
ポイントとしては、これらのタグの順序と入れ子の関係、タグの意味を理解することです。
タグを覚えなくても大丈夫です。
どのページでも同じ構成なので、コピペで使いまわしになるのが普通です。
DOCTYPEタグ(1行目)
まずは、1行目。ここは、HTML5では必須です。
「開始タグ」「終了タグ」というのはなく、「単独タグ」の形で先頭に必ず必要です。
このタグの前に、改行コードなどを入れるのはNGです。
※PHPなどでHTMLを吐き出す時は注意しましょう。
このタグのところは、昔はどうだったか?
歴史があるので、かなり面倒でした。
これからHTMLを始める上では、その知識は不要です。
興味があれば調べてみるのもいいでしょう。
WEBエンジニアを目指すなら、一通り目を通しておいた方がいいです。HTML5以前の古い記述のHTMLをメンテすることもあると思います。
HTMLタグ(2,10行目)
「開始タグ」と「終了タグ」がセットになっています。
「開始タグ」と「終了タグ」の間に、後述の「HEADタグ」と「BODYタグ」を入れ子にして記述します。
他のタグを書かないようにしましょう。
HEADタグ(3,6行目)
「開始タグ」と「終了タグ」がセットになっています。
「開始タグ」と「終了タグ」の間に、「metaタグ」や「titleタグ」などを入れ子にして記述します。
書けるタグの種類は数多くありません。
表示されたページには現れない属性などを配置します。
「titleタグ」以外は、「metaタグ」が殆どで、以下のようなものを記述します。
- 言語(日本語です)
- 文字コード(シフトJISやEUC、UTF-8)
- ページの概要
ページには表示されませんが、割と重要なタグがあります。
BODYタグ(7,9行目)
「開始タグ」と「終了タグ」がセットになっています。
「開始タグ」と「終了タグ」の間に、ページの殆どを記述していくことになります。
手法としては、まとまった単位をブロックとして書いていきます。
ブロックをまとめ上げるタグとしては、「divタグ」が多くなります。
HTML5になってからは、「headerタグ」、「footerタグ」、「navタグ」「articleタグ」、「sectionタグ」など、ブロックに意味づけできるようなタグが増えてきました。
使わなくてもページ構成できますが、SEO上は意義があると思われます。
まとめ
どうですか? 簡単でしょ?
覚えなくてもいいです。
理解が大事です。
「そんなタグあったな」程度でも十分です。
全てのページで使うので、そのうちに覚えてしまいます。
ここで書いた事を基本として、ページ構成を考えながら内容を膨らませていきます。
とりあえず、このページで学習するのものは、今回は以上です。
あとがき(独り言)
いやぁ~ wordpress で書いていくのに一苦労。
普段使わないから、意味不明な動作をしてくれて、イライラしまくり。
このサイトの立ち上げ易さと生産性を考えて、wordpressを使い始めたのだけど、失敗したかも知れない。w
ある程度の構成がまとまってきたら、MODxに移行したいと思ったのであった。