ウルトラブログ | ULTRABLOG

HTMLについて(ホームページ作成に欠かせない基礎知識)

HTMLについて(ホームページ作成に欠かせない基礎知識)

ほぼ全てのWebサイトはHTMLから成り立っています。SNS・HTML形式の電子メールなども同様です。そもそも「HTML」とは何でしょうか?今回は「HTML」について分かりやすく説明していきます。

HTMLとは(ハイパーテキスト)

HTMLは「HyperText Markup Language」の略で、Webサイトの根幹の構造や基本的な情報に関する役割を持つ土台の言語です。

HTMLの編集画面
HTML

文章が序論、本論、結論で成り立つようにHTMLも決まりがあり、それに乗っ取って構成していきます。「タイトル」「見出し」「段落」などコンピューターが分かるようにHTMLで指示をし文章を構成していきます。

また文章だけではなく、ハイパーテキストの仕組みを利用してインターネット上の様々な情報(テキスト、画像、動画など)を関連付けて結びつけています。 またページから別ページを繋ぐ事(ハイパーリンク)も可能です。
HTMLはこのような「画像」「動画」「リンク」「音声」などのデータを埋め込むことが出来ます。

HTMLタグ

< >で囲まれた記号のことをHTMLタグと言い、HTMLタグで指示をして文章を構成していきます。
前のタグを「開始タグ」、後ろのタグを「終了タグ」と言います。終了タグの<の直後には「/」を入れて終了タグである事を示します。
HTMLタグにはそれぞれ意味があり、名称があります。

タグの名称

<h1></h1>:文書の大見出し
<h2></h2>:文書の中見出し
<h3></h3>:文書の小見出し
<p></p>:段落
その他、さまざまな役割のタグが存在します。

HTMLの全体構造

HTMLは基本的には上記のように文章の各構成要素をタグで囲ってその範囲が何であるかを示します。
全体構造も同様にタグを使って示します。

HTMLの文章の構造

<html></html>:HTML文書であることを宣言
<head></head>:文書のヘッダ情報(文書の説明やタイトルなどの情報)
<title></title>:文書のタイトル
<body></body>:文書の本文(内容)

HTMLにテキストを入力

HMTLのテキスト入力画面
HTMLで入力
HTMLのブラウザ表示画面
ブラウザで表示すると

上記はh1・h2・p要素のみで表示しています。そのためテキストのみで表示されています。img要素などのタグを入れる事で画像を貼り付ける事が可能です。またCSSをリンクすることでデザインなどの装飾が施されます。

CMSの利用

最近はCMSの利用が増えています。コスト削減やスピーディーで効率的にwebサイトの更新・管理が出来るためです。
CMSとは、専門的な知識が無くてもホームページ作成が可能で管理や更新も出来るシステムです。有名なのは「WordPress」(ワードプレス)「Joomla!」(ジュームラ)「Drupal」(ドルーパル)などがあります。
webブラウザ上で直接テキストを入力したり画像をアップロードしたりするだけなので、HTMLの学習する手間が省けます。

まとめ

ウェブサイト制作の基礎はHTMLとCSSです。
HTMLをある程度理解し、CSSでの装飾を把握したうえでCMSなどを利用して新規Webページを作成してみてはいかがでしょうか。
まずはドメイン取得から。

PICK UP