いまさら聞けない「HTML」超入門

いまさら聞けない「HTML」超入門

はじめてのHTML

ウェブサイトを作るとき、どうしても学習する必要がある言語がHTMLです。

これは何かというと、様々なものをウェブブラウザ上で表示させるための言語で、基礎基本的な言語となっています。特にウェブ制作に関わりたい人やウェブデザイナーになりたい人にとっては、それぞれのしっかりとした特徴を捉えながら、どこでどれを使うかということを明確に覚える必要があるのです。

とはいえ、実はHTMLには様々なバージョンがあります。

今使われている主流のバージョンは大きく分けて3つあり、HTML4、XHTML、HTML5というものがあります。

まず、HTML4の場合です。

タグの数は多いのですが、非常に簡単にウェブサイトを作ることができるため多くの人が習得している言語でもあります。

特徴は様々な情報を表示したり整理したりすることもできるのですが、少し不十分な書き方ができてしまうため、HTMLを書く段階で困ってしまうこともしばしば起こっていました。

そこで、更に厳格でしっかりとした書き方ができる言語として、XHTMLが作られました。これはXMLという言語の特徴を活かし、更にこれまでのHTMLを書く人に対しても理解しやすい形で書けるようにしたものです。

書き方は厳格ですが、比較的内容がしっかりしているため書きやすく、なおかつHTML4との変更点はいろいろとありますが実務上困るようなことは数ヶ所程度で住みますので、非常に簡単に学習することができました。少し前まではこのXHTMLが書ける人が多かったようです。

最後に、最新のバージョンとしてHTML5があります。この特徴としては、まずはタグの種類が増えたことが最も大きなポイントとなります。

また、タグのそれぞれの意味も変わり、XHTMLやHTML4よりもできることはより多くなりました。ただ、その分覚えることは多くなり、またタグのそれぞれの種類や分類なども変わりました。

タグのそれぞれの使い分けの仕方もHTML4よりは厳格になったため、HTML5をやる際には必ずまたこれまでと違う知識が必要になるのです。

とはいえ、今の主流となっているのはHTML5なのです。

HTML5になることによって、音楽ファイルや動画ファイルの取り扱い、グラフィックやアニメーション、文書の定義位置なども明確になり、使い分けがさらに簡単になりました。また、最近はこれと平行してCSSも学習するのが主流です。

HTMLを学習したら、同時にCSSも学習しておきましょう。

HTMLでできること

HTMLはホームページを作るための言語ですが、ホームページのみならず広く利用が進んでいます。

HTMLのメリットはタグと呼ばれる学習コストの低い構文を利用できること、また、他の枠組みのみに徹した言語であり、装飾はCSS、動きはJavascriptやPHPなど複数の言語とのやりとりも可能な柔軟性があります。

ホームページ以外でのHTMLの利用は主にアプリケーションでの採用があります。WEBを利用するアプリケーションの中にはHTMLを使ってUIを作成できるものがあり、特にスマートフォン向けのアプリケーションでの利用が進んでいます。

スマートフォン向けのアプリケーション作成ではHTMLで枠組みを作成して、CSSで装飾、Javascriptで動きをつけるというホームページを作る際の一連の流れがそのまま利用できます。

また、タグについてもそのまま利用できる場合が多く、ホームページデザイナーの多くがスマートフォンアプリケーションの開発に参加しています。この仕組みはPhonegapで実現されており、TitaniummobileなどではUIの作成の際に一部のタグを利用できるなど幅広い環境での利用が進んでいます。

HTMLの学習についてはタグの理解とCSS、Javascriptなどの外部言語とのやり取りを学ぶことになりますが、タグの利用方法についてはXMLを参考にされていることもあり、さまざまな分野で利用できる考え方であり、学習のメリットは大変大きなものです。

また、デザインを学ぶ際にもHTMLを知っているメリットは大きくなっています。HTMLによる構造の使い方を学ぶメリットはプログラムの一旦を学ぶことであり、Javascriptなど他の言語を学ぶ際にも参考になります。

HTMLはホームページ用の言語として作成、発展してきていますが、HTML5の策定と共にホームページのみの言語ではなく、幅広いアプリケーション作成環境のための言語にステップアップしています。

ただし、CSSやJavascriptなどとの共存を重視した発展が行なわれており、発展するたびにシンプルになっていますが、対応するタグは増えており、さまざまな機能追加は順次行なわれ、特に動画、音声、アニメーションなどメディアを利用することを前提とした発展が行なわれています。

また、パソコンなどの大画面向きだけではなく、スマートフォン向けの画面での効率的な情報取得のための研究も引き続き行われています。

HTMLの基礎知識

HTMLは、Webサイトを構築する為のマークアップ言語であり、文章コンテンツにタグを加えて、HTMLファイルとして保存し、サーバにアップロードする事で、Webページとしてブラウザが解釈・表示する事が出来ます。

ブラウザでWebページを表示しますと、ブラウザが表示されているウィンドウの上部にタイトルが表示されます。

これは、HTMLのタイトルのタグを使う事で設定する事が出来ます。

HTMLのソースコードは、head部分とbody部分の二つに分けられます。

タイトルタグはhead部分に記述し、head部分には、metaタグでキーワードや著作権者名や概要などを書いておく事も可能です。

また、外部CSSのリンク先を指定する場合には、link要素を使って指定を行います。 style要素を使えば、HTMLコードに直接CSSを記述する事も出来ますし、script要素を使えば、外部JavaScriptやスクリプトをソースコードに記述する事も出来ます。

HTMLの基本知識としては、head部分とbody部分でどのようなタグが使えるかを把握しておく事が大切であり、それぞれのタグには、意味があるという事を理解していく必要があります。 基本知識を押さえて、ソースコードを書いていきますと、文章にそれぞれの意味を持った要素にしていく事が出来ます。

CSSを使ってデザインを分離させたり、スクリプトを外部化する事によって、HTMLソースコードが見易くなり、メンテナンスがしやすくなります。

タイトルは、Webサイトの顔になる部分ですので、コンテンツ内容にマッチしたタイトルを用意しておくと良いでしょう。

基本を押さえてHTMLページが作成出来るようになれば、検索エンジンへの最適化も考慮して、検索エンジンのクローラに渡す情報を整理していくと良いでしょう。

書籍で習得したり、HTMLのリファレンスページなどを閲覧すれば、多くの基本的な知識を得られます。

最近のブラウザには、開発者向けのツールが搭載されていますので、これを使えば、リアルタイムでCSSを適用して効果を確認出来たり、どのコンテンツが読み込みに時間が掛かっているのかを把握する事が出来ます。

br要素は改行で使われ、p要素は段落を分ける時に使われますが、文章の構成によって、このようなHTMLの要素を使い分けていけば、ソースコード自体に意味を持たせる事ができ、メンテナンスをする時にも分かりやすくなります。

知っておきたいHTMLの基本用語

Webサイトを構築する時に基本的な技術として、HTMLのソースコードを記述するというものがあります。

HTMLは、文章の構成に合わせて、意味のあるタグを付け加えて、ブラウザにWebページとして認識させられるようにする為のファイルを作成する為のマークアップ言語です。

各要素には、段落や改行、画像埋め込みなどの機能が搭載されており、タグを使う事で要素の機能を使えるようになります。

要素には、属性が用意されており、属性に様々な値を追加していく事によって、要素に変化を与える事が出来ます。

画像を埋め込むタグであるimgには、ソースを指定する為のsrc属性が用意されているように、細かな設定を行えるように色々な属性が用意されていますので、必要に応じて使っていくと良いでしょう。

HTMLには、CSSやJavaScriptやSVGといった物を追加する事ができ、styleタグでCSSを導入する事でデザインやレイアウトを指定する事ができ、scriptタグを使う事で、JavaScriptによる動的なコンテンツ作りも可能になります。

HTMLソースコードは、修正や変更を加える事が多々ありますので、スクリプトやCSSを外部ファイルとして分離しておく事が有効であり、メンテナンスを行う時に修正や変更を行い易い環境を構築する事が出来ます。

HTMLを記述するには、テキストエディタがあれば、直ぐに出来ます。

作成したファイルをブラウザで開けば、作ったWebサイトの内容を確認する事が出来ますが、より効率良く開発を行いたいのであれば、Webオーサリングソフトを導入するのが有効です。 プレビュー機能やエラー表示機能などが搭載されており、ワープロ感覚でWebページを作成していく事も出来ます。

大規模なサイトの開発を行うようになれば、このようなソフトウェアを使っていれば便利です。 テキストエディタは、Webオーサリングツールに比べて、動作が軽快ですので、作成したい時にいつでも呼び出せるといったメリットがあります。

テキストエディタには、HTMLのタグ部分を色分けしてくれる機能を搭載していたり、規格通りに書く事が出来ているのかを確認する事が出来る機能が搭載されている物もありますので、このようなテキストエディタを導入しておけば、Webオーサリングツールが無くても、HTMLソースコードを作成するのに不便を感じないでしょう。

要素と属性の理解を深めるだけで、HTMLの機能を最大限に使っていく事が出来ます。

追記

小難しい言葉が非常に多く並んでしまいましたが、実際に手を動かして見ることが一番です。動画サイト等を参考にしながら学びを深めて、実際に出来上がったサイトを見ることの喜びは大きな財産となります。 これを機会に是非サイトを自身の手で作ってみてください。

無料相談会に参加する

未経験からでもクリエイティブクラスのプログラマを目指せる環境 プログラミングスキルだけでなく、より包括的なビジネススキルを学べる場と聞くと、上級者向けという印象を持つかもしれません。 Creator’s Hiveの受講者の9割がプログラミング未経験者です。

受講中はもちろんのこと、卒業後の就職・転職まで、万全のサポート体制を整えているため、未経験からプログラマに転職を希望されている方にもオススメです。

Creator’s Hiveプログラマ養成所の無料説明会に参加しよう!
 無料説明会を随時行っており、個別の相談も大歓迎です。

無料相談会に参加する

LEAVE A REPLY

*
* (公開されません)

CAPTCHA


*

COMMENT ON FACEBOOK