HTML/CSS2-1 HTMLの基本

HTMLとはいったいなんでしょう?

HyperText Markup Language(ハイパーテキスト マークアップ ランゲージ)の略で、Web上の文書を記述するためのマークアップ言語のことです。

と言われて理解できる方は、少しでもHTMLを勉強されている方だと思います。

普段何気なく見ているWebページですが、Webページを見るには、PCやスマホ用のブラウザを使います。ブラウザにもさまざまな種類があるので、このブラウザに対してこういう風なことを表示させてくださいという命令を出すための記述を行う必要がある場合があります。

これは、文書のある部分と別の文書を「関連づける」ことをハイパーリンク(あるいは単にリンク)といい、その機能を持つ文書のことを「ハイパーテキスト」と呼んでいます。HTMLはネットワークでつながった世界中の文書を関連づけ、それを有益な情報としてコンピュータで分析できるようにする役割を担っています。

HTMLの「マークアップ」とは、このような目的で設計された文書をコンピュータがうまく分析できる形にするための印付けの方法です。HTMLは、コンピュータの機種に関係なく機能することを目指してつくられたので、全てを普通の文字で表現するテキスト形式ファイルになっています。

文書を構造として捉えることで、コンピューターの機能に依存しないで、表示させたい情報を表示させることができます。そのためHTMLにおいては、文書を「見出し」「段落」「箇条書き」といった文書のパーツの組合せとして扱います。そして、これらの要素をコンピュータに理解できるようにマークアップしていく約束が、HTMLのソースコードなのです。

HTMLの仕様はW3C(World Wide Web Consortium)という団体が定めており、ほぼ全てのウェブページはHTML及びその派生のXHTMLで記述されています。

これからWeb制作をするために、Sublime textをダウンロードしていると思います。

すでにFirefoxでいくつかのサイトのHTMLやCSSもコピーしてソースコードを見るという練習もしているかもしれませんね。

次から本格的なHTMLファイルを作成するのですが、ファイル操作を覚える上でも一つ重要な設定があります。

拡張子を見える状態にすることが必要です。拡張子というのは、〇〇.html △△.CSSという .(ドット)の後についているファイルの種類を示すものです。

拡張子を表示するには、スタートボタンをクリックし、コントロールパネルを開きます。

フォルダーオプションをクリックし、表示をクリックします。

スライドバーを下まで下げ、「登録されている拡張子は表示しない」のチェックを外して OK をクリックします。

html1

これで拡張子が表示される設定に変更されました。エクスプローラーを開いてファイル名に拡張子がついているか確認してください。

拡張子ありの状態になっていればOKです。

HTMLにはバージョンがあり、現時点で最新のものはHTML5になります。HTML5 は、プロプライエタリなプラグインとして提供されているリッチインターネットアプリケーションのプラットフォーム(JavaFX、Adobe Flash、Microsoft Silverlight 等)を置き換えることを標榜しており、ウェブアプリケーションのプラットフォームとしての機能やマルチメディア要素が実装されています。そのため、現在はHTML5でのソースコードを書けることが必要となりますので、ここではHTML4などの情報も入れつつ、HTML5でのソースコードの記述を学習していきます。

 

Scroll Up