本章は、Webページの記述言語である(X)HTMLについての解説文です。後述するCSSリファレンスやJavaScriptリファレンスを利用するにあたって、最低限心得ておく必要のあるものを中心に解説していく。

用語については右側の語句(モバイルの場合は下部)をクリックすると説明ページ(IT用語辞典サイト)へ遷移します。

(X)HTMLリファレンス:目次sitemap-gif

1.HTMLの解説

HTMLとは、World Wide Web(以下、WWWといいます)上でコンテンツを表現するためのHyperText Markup Languageの略です。Languageでして、コンピュータ言語のひとつなのです。 簡単に言えば今ご覧になっている「ウェブページを記述するためのすんごいテキスト形式の記述言語」なのです。

HTMLは大きく、従来のHTML(基本的なもの)と、その拡張させたXHTMLに大別されます。この原稿を書いている時点では、表示してくれるブラウザの解釈の違いがあるため、一長一短あります。

最近は、HTML5が使えるようになりCSS3と共に注目が集まっている。

概論

「概論」といいつつ、長くなります…。

標準的なHTML4 (HTML4.01)について

本稿では、HTMLの基礎・基本を習得するにあたって、あなたが書こうとしているホームページ(ウェブサイト)作成の基本となるHTMLでどういったことができるのかの概論と、具体的な凡例で説明することにします。

HTMLで出来ること

WWWの主なリソース(情報資源)としては以下の4種類があります

  1. テキスト
  2. 画像
  3. 動画
  4. 音楽(音声)

です。これらをひとつのページにまとめたのが、ウェブページ(Web Page)です。また、これら複数のページを本のようにまとめた集合体(Web Page群)が置いてある場所をウェブサイト(Web Site)という。

ひとつのページは、テキストコンテンツを記述したファイル(.html)や、画像コンテンツ(.gif .jpg .png)など複数のファイルで構成することができます。

HTMLで記述された文書のことを、HTML文書(HTML Document)という。

HTMLの第一の目的は、文書(のコンテンツ)を構成することです。

HTML文書のコンテンツで最も重要なのが、テキスト(文章)です。このテキストに対して、「見出し」「段落」「リスト」「表」など、それぞれ構造化してマークアップ(修飾)するのです。

体表的な要素としては、H1要素、p要素、ol,li要素、table要素などがあります。

一昔前の流行では、段組やレイアウト「表」(TABLEタブを駆使して表現していましたが、現在ではタグはシンプルに本来の意味でのみ使用し、レイアウトや修飾はCSSで表現するつまり分離するのが常識となりつつあります。

HTMLを習得する

HTMLは、WWW上で使用する出版言語としての役割を持ち、コンピューター上(WindowsだけでなくMacやFreeBSD、UNIX等)のどんな環境(OSのバージョンであったり、ブラウザの種類及びバージョン等)でも見ることができかつ手軽に利用できることを前提に開発されたものです。

従って、HTMLデーターは特殊なフォーマットではなく、テキスト情報を簡単・簡潔に記述できて基本中の基本であるテキスト形式(フォーマット)を採用しています。

ではそのテキストファイルを編集してみましょう。っと、その前にテキストファイルを編集するソフトウェアには、以下の3種類のものがあります。

HTMLエディタの種類別 長所と短所
種別×
HTMLエディタ(パッケージ版)高機能、HTML言語を意識することなく、見たままの編集が可能。有償。プログラムが付与した属性など煩雑な記述となっており、あとから微調整等するのが難しい。
HTMLエディタ(フリーソフト)WYSIWYGとまではいかないが、タグを直接書くものが多いが入力支援機能が充実しており、構造化仕様に準拠したきれいなHTML文書が書ける。無償。サポート体制は過大に期待するな。タグ等の知識が必要。
テキストエディタハイライト表示はできる。簡単な修正がすぐできる。入力支援はチープ。WYSIWYG機能は当然ありません。

私の場合は、あまり参考にはならないと思いますが…、始めは他人の書いたHTMLのコンテンツやちょっとしたバグを修正することが多かったので、単純なテキストエディタで充分でした。ちなみに秀丸を利用してます。タグやコメント部分などの強調表示ができるので重宝してます。次第に自分のWebサイトを立ち上げるころには、専用のHTMLエディタを使えるようになった方が効率的なのは明らかなのですが、パッケージ版は独自機能があったり多機能すぎるため、使い勝手に慣れるのに時間かかりそうだし、コストパフォーマンス的に失敗したらもったいたいと思い、フリーソフトを利用することにしました。

私の場合、各ページのフッタ部にもあるとおり、Satoshi Suda 氏作成のリンクウェア:ez-HTMLを利用しています。

■ソフトウェアの紹介

  • 市販の「ウェブサイト制作ツール」(以下WYSIWYGと省略)は画像なども簡単に挿入でき、レイアウトなども簡単にできますが、その反面font要素を乱用したり何度も編集している間ゴミのようにタグが残ってしまうという問題点があります。 当ソフトウェアは主に手打ちでHTMLソースを記述する人向けのために開発されています。 また、WYSIWYGで制作したHTML文書のちょっとした編集などにも使う事ができます。
  • また、このHTMLエディタはほとんどすべての規格のHTML文法データを包括しているため、 適切な場所に適切な要素、属性、属性値を自動的に候補として出してくれるため、 文法にも正確で美しいソースをコーディングする事ができるのが特徴です
  • また、CGIなどの作成にも最新版から本格的に対応し始めました。 私がCGIのソースを書くときに非常に不便に感じたため、出来る限り手早くラクに操作できるか?という事を考慮して搭載しました。 基本的には私がCGIを書く時にHTMLもひとつでできたら便利かな?という事から搭載したものです。 ので、軽く編集するというよりもWeb制作ならこれひとつで事足りる…という事を今度は重視したいと思っています。

※Web Frontier ⇒ ez-HTML ⇒ ソフトウェアの紹介 の抜粋

筆者がez-HTML を使った感想:
 ■タグ入力の際、"<"を入れると記述可能な候補が出てくるので、DTDに合った構造化文書が無意識に簡単に書ける
 ■スタイルシートの編集がポップアップウィンドウで簡単に編集できるので便利。
 ■HTML文法検証(Another HTML-lint)がワンクリックで可能(設定がややこしいが…)。
 ■サーバーへの転送(FTP転送)がファイルごとにワンクリックで可能なこと。
 ■まぁ、とにかくW3Cの仕様にほぼ完全準拠しているのがよい。
などなど…


POWERD BY IT用語辞典

inserted by FC2 system