HTMLとは?

ITリテラシー学習
ITリテラシー学習

WEBサイトを作成するために必要なHTMLについて詳しく説明していきます。

HTMLとは

WEBサイトを作成するために開発されたマークアップ言語です。ソースコードを読み込むことで、WEBサイトを表示させています。私たちがブラウザで見ているWebページのほとんどは、HTMLで作られています。
またHTMLとは、Hyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)の略であり、拡張子は「.html」または「.htm」となります。

Google検索ページ

ソースコード
WEBサイトの裏側は下記のような文字で構成されています。この文字のことを「ソースコード」と言います。この文書をブラウザで読み込むことで、WEBサイトが表示されます。

Google検索ページのソースコード

ハイパーテキストとは

複数の文書を関連付けさせる(リンクさせる)概念のことです。そのハイパーテキストを作成するための代表的な言語がHTMLになります。またハイパーテキストを結びつける仕組みのことを「ハイパーリンク」と呼びます。

ハイパーリンクとは

WEBサイトでクリックすると違うページに移動するテキストや画像があります。そのリンクが「ハイパーリンク」です。そしてインターネット上に散らばっている膨大な情報を「ハイパーリンク」で繋げている仕組みが「WEB」になります。また「WEB」の正式名称は「WWW(World Wide Web)」です。

動的ページとは?

動的ページとは、アクセスしたときの状況に応じて異なる内容が表示されるWebページのことです。ユーザーが書き込むことで内容が増える掲示板サイトやブログ、または表示内容がユーザーごとに違うショッピングサイトや会員制サイトなどが動的ページになります。例えば、検索エンジンの仕組みですが、ユーザーの検索ワードを元にWebサーバが検索処理を実行します。HTMLファイルを作成した後、Webブラウザに戻すことで、ユーザーの入力した検索ワードに応じた最新の検索結果が表示されます。

Webページは「静的ページ」と「動的ページ」に分岐します。
・静的ページ
ユーザーがページにアクセスした際、すでに作成済みのHTMLページを表示する。

・動的ページ
ユーザーがページにアクセスするごとに、サーバーがHTMLページを生成し表示する。

その他動的ページの例)

・ユーザーが書き込むたびに内容が増減/変化する掲示板サイトページ
・CMS(コンテンツ・マネジメントシステム)を用いて構築されているブログページ
・Googleなどの検索サイトの結果表示ページ

マークアップとは

マークアップとは目印をつけるという意味で、文書に役割を与えます。例えば文書内では様々な体裁(見出し、段落、表組み、小見出し、リストなど)が存在します。役割を与えることで文書を構造化することができます。

要素(element)

この見出し・段落・リストなどの各部分のことを要素(element)と呼びます。HTMLでは各文書がどんな要素であるかをマークアップすることで、コンピュータが文書の構造を理解します。コンピュータに理解させることで、見た目や検索エンジンの表示に変化をもたらすことができます。

HTMLタグ

文書の構造はHTMLの重要な仕組みです。このマークアップをするために用いられるタグが「HTMLタグ」になります。

引用元:http://www.htmq.com/htmlkihon/001.shtml

POINT

htmlタグを使用して、文書に見出し・段落・リストなどの役割をマークアップすることで、文書が構造化されます。

menter_logo

[転職希望者限定]
『MENTER PERSONAL』
3ヶ月間 0円キャンペーン!!

「MENTER PERSONAL (メンターパーソナル)」は、ITスキルを身につけることでこれまで未経験であった職種への転職、副業、独立、スキルアップを支援するサービスです。
転職希望者に限り3ヶ月間サービスを0円でご利用頂けるキャンペーンを実施中!

*教材/リモート面談/転職支援サービスを提供
*キャンペーン適用条件1:WHITE㈱の転職支援サービス利用
*キャンペーン適用条件2:期間内に指定カリキュラムの受講
*適用条件に満たない場合はサービス提供中断させて頂く場合がございます(料金請求することはありませんのでご安心ください)

店舗販売員、飲食業などオフィスワーク未経験から転職も。
サービス詳細や転職成功者のストーリーを‍見る
*お問い合わせ時に「ブログを見た」と備考欄に入力ください。

menter_logo

[法人向け]
文系DX人材育成なら『MENTER』

「うちの会社はITリテラシーが低い...」
「DXを行うには人材育成から始めなくては...」
「自動化やAI理解できる社員が増えたらな...」

デジタルに強い人材育成を行うオンライン学習サービス『MENTER』が、そんなお悩みを解決します!

・マンガで楽しくインターネットについて学習
・ショートカットキーからAIの設計まで
・大手企業の導入事例/成功事例あり
・DX人材育成について相談/事例集請求/無料トライアル/ITリテラシー無料診断可能

MENTER紹介ページを‍見る
お問い合わせは ‍こちら

ITスキルアップ相談室

コメント

タイトルとURLをコピーしました