LPI WDEを使いこなす #2: HTMLとウェブの基本

インターネットを閲覧するとき、私たちは1つのウェブページから別のウェブページへと移動し、無数の種類の情報を引き出したり、さまざまなサービスを利用したりする。それは、まるで巨大なバーチャル図書館を閲覧しているようなもので、各書籍はネットワーク上の他のページと相互接続されたウェブページに例えることができる。

ウェブページとは、エンドユーザーがアクセスできる様々な情報を含むデジタル文書である。しかし、どのようにしてこのような文書を作ることができるのだろうか？

HTMLの重要性

すべてのウェブページのベースにはHTML言語がある。80年代後半に生まれたこの言語は、HyperText Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の頭文字をとったものだ。HTMLは、ウェブページ内にどの要素を表示し、どのように配置するかを意味的に指定できる言語です。この言語を通して、私たちは以下のようなテキストを使ったリッチなユーザー体験を作り出すことができる：

• テキストの書式設定（タイトルや段落の作成、単語やテキストの一部を太字や斜体にする、など）
• 番号付きリストと番号なしリストの作成
• リンクの挿入
• 埋め込みコンテンツ（画像、音声、動画）の挿入
• ユーザーが記入して送信できるフォームを作成する
• テーブルの作成

各ウェブページは明確に定義された構造に従っており、それを構成する個々の部分には特定の意味があります： タイトル、段落、リスト、表、太字や強調の言葉は、適切なタグやラベル、つまりタグの内容をどのようにフォーマットして表示するかをブラウザーに指示するHTMLマーカーによって指定されます。

簡単な例です：

<p> Hello LPI! </p>

このようにして、ブラウザに表示される段落を定義する。段落要素の作成をブラウザに指示する対応するタグは “p “で、この場合、”<p>”が開始タグ、”</p>”が終了タグです。タグはウェブサイトの訪問者には見えませんが、開始タグと終了タグの間に含まれる「Hello LPI!

ご心配なく！最初は、HTMLで書くことは少し奇妙に思えるかもしれません。それでも、この言語に慣れてくると、簡単な文章を書いているように自然に感じられるようになります。何事もそうですが、とにかく練習あるのみです！

Linux Professional Institute (LPI)のWeb Development Essentials認定資格の学習では、ドキュメント内の重要な要素を定義する主なタグ、その意味、およびそのタグが参照する要素の詳細を指定するのに役立つ主な属性を理解することで、Webページを作成し、フォーマットする方法を学びます。

さて、何から始めようか？

HTML言語を学ぶことは、しばしばウェブ・プログラミングの世界への第一歩と考えられている。HTMLページを書くのに複雑なツールは必要なく、古典的なメモ帳のような一般的なテキストエディタ（FOSSでありたいならvimやKate）があればいい。

以下のようなツールもあります：

• Visual Studio Code: デバッグ、コード補完、バージョン管理などの追加機能を備えたマイクロソフトのシンプルなソースコードエディタ。自由にダウンロードでき、クロスプラットフォームで、柔軟性があり、ニーズに合わせて機能を拡張できる多くの拡張機能がある。初心者に最適。
• Komodo Edit: フリーでオープンソースの、非常にパワフルでカスタマイズ性の高いテキストエディタ。自動補完やインデントなどの古典的なコードエディター機能を備えていますが、残念ながらデバッグはサポートしていません。
• Sublime Text: マルチプラットフォーム、マルチ言語のソースコードエディタ。多数のプラグインを備えているため、汎用性が高く、あらゆるニーズに対応できる。期間無制限で無料で使用できますが、無料版では頻繁にアラートメッセージが表示され、プロ版への切り替えを促します。

こうすることで、主要なタグとその属性に慣れ、知識をできるだけ定着させることができます。HTML言語に慣れたら、今述べたようなテキストエディタを使って、その機能を探求することができます。このようなエディタの機能を発見することは、あなたの学習の道にとって非常に興味深いものになるでしょう。

マイクロソフトのVisual StudioやアップルのXcodeを聞いたことがあるでしょう。繰り返しになるが、FOSSの代替ツールはたくさんある： Eclipse、MonoDevelop、Apache NetBeansなどだ。

また、社会に出れば間違いなく出会うことになる、より洗練された完全な開発環境もある。これらは統合デスクトップ環境（IDE）と呼ばれ、開発者の生活を楽にし、1つのプログラムでサポートされながら、より効率的に作業できるように設計されている。統合開発環境は、プログラマーにテキストエディタと、ソフトウェア開発プロセス全体をカバーする多かれ少なかれ洗練されたツールを提供する： コードの作成と自動化、インテリジェントな補完、コンパイル、テスト、およびデバッグは、生産性を向上させ、より効率的なプログラマになることを可能にするIDEが提供する機能の一部です。

図1に示すように、コード・エディタの機能はIDEの機能のサブセットです。

次のステップ

前回の記事で説明したように、HTMLはCSSやJavaScriptと並んでフロントエンドのプログラミング言語であり、ウェブサイトのエンドユーザーから見える部分を作成し、クライアントサイドで処理するためです。ウェブページの構造と基本的な要素が定義されたら、グラフィックの観点からカスタマイズする必要があります。これを実現するのがCSS言語です。CSSは美的観点からウェブページをデザインし、表示する役割を担っており、HTMLを補完するものです。詳しくは次回のエピソードで。

<< このシリーズの前回の記事を読む