HTMLを最短で習得できる方法

HTML 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に移行したいと思ったのであった。