HTMLとは?

html 画像

※このWeb教材で扱っているWord Pressは、少し複雑とはいえ、プログラミングなしで、HTMLの知識も不要です。

例えば、この様な文章があったとします。でもHTMLという単語の意味が解らないと、学習の理解度が減速してしまいます。決して、WEbコンテンツ分野の専門家になる必要はないのですが、この講座で使っている用語の意味くらいは何となくでいいので、覚えていってもらいます。上記、HTMLという単語の場合は、HyperText Markup Languageという少し長い単語の集まりの省略形で、ウェブページを作成するために開発された言語の事を指します。

・「H」=Hyper
・「T」=Text
・「M」=Markup
・「L」=Language

【例1】

<h1>Word Pressを習得しよう!</h1>

※「Word Pressを習得しよう!」という文字にh1(見出し)という意味が加わった。

h1のhは「heading(見出し)」のhです。

【例2】

<p>HTMLについて学習しよう!</p>

※「HTMLについて学習しよう!」という文字にp(段落)という意味が加わりました。

pは「paragraph」のpです。

ハイパーテキストでは、ウェブページから別のウェブページにリンクをはったり、 ウェブページ内に画像・動画・音声などのデータファイルをリンクで埋め込むことができます。そして、目印をつける(Markup)というのは、文書の各部分が、どのような役割を持っているのかを示すということです。 例えば、見出し・段落・表・リストなど、文書の中で各部分が果たしている役割が分かるように目印をつけます。

個人的には、MarkupというよりはMark Sandwichと呼んだ方がわかり易い様なきがしますが、こうした見出し・段落・表・リストなどの文書内の各部分を要素(element)と呼びます。

Languageは言語という意味で、普段使っている単語はLanguageぐらいなので、初めて聞いた時は、なんのこっちゃ!・・・という印象が脳内でおきますね。こんな風に、自分でホームページを作り込んでいく道中には、沢山の初めて聞くか、聞いた事はあるけどよく意味の解らない言葉に遭遇します。そこを、あまり深堀りしないで、かと言って、無視しないである程度でいいので、理解しながら進んでいく姿勢が大事になります。

僕たちが読んだり書いたりする文章は「タイトル」「見出し」「段落」などの要素から成り立っています。


普段は意識していませんが、人間は文章を読むと「これがタイトルだな」「ここからは別の段落」など構造を理解できますが、コンピューターにはその判断ができません。そこで、文章に「ここがタイトルだよ」「ここは段落だよ」などの目印をつけてあげると、コンピューターにも文章構造が理解できるようになるのです。このように、どの文がどの要素にあたるのかを明確に示す、つまり文章構造を定義づけることが「マークアップ」です。でも、HTMLの仕組み的には、マークUPというよりは、該当文字列を暗号で挟み込むのでMark Sandwichという感じです。

webdesign

ハイパーテキストとはなにか?

ハイパーリンクが挿入できる高機能なテキストのことです。ハイパーリンクとは「クリックすると別のページに行ける仕組み」のことで、単に「リンク」とよばれることの方が多い様です。実は、ハイパーリンクは「別ページへの宛先」以外にも、さまざまなデータを埋め込むことができます。画像や動画、音声などのデータファイルもテキスト内に組み込めるのです。

ハイパーテキストはこの仕組みによって豊かな情報を表示できるため、単なるテキストではなく「ハイパー」なテキストとよばれているのです。ハイパーという言葉も、ハイパーリンクという言葉も日常生活では滅多に聞かないし、使いません。テキストだって正確な意味を普段あまり意識していませんが、 言葉によって編まれたものという意味を持ちます。

ハイパーテキストをマークアップする、つまりHTMLを使うことによって、コンピューターは豊富な情報を理解できるようになります。読者さんのあなたが今このページを閲覧しているウェブブラウザは、HTMLを読み込んで処理することで、人間に読める形でウェブページを表示しているのです。ちなみに、ウェブブラウザとは、アプリケーションソフトの事で、筆者はグーグルクロームとファイアーフォックスを利用しています。

HTMLに関しては、これくらいの理解度で十分です。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です