Programming

HTMLを分かりやすく初心者に解説

うす
うす
ねぇ、ダツロボ君。HTMLって知ってる?
ダツロボ君
ダツロボ君
HTML?ソレハ、ナンデショウカ?
うす
うす
WEBサイトってほとんどがHTMLでできてるんだよー!
ダツロボ君
ダツロボ君
WEBサイトヲ作ルト、ナニガ嬉シイノデスカ?
うす
うす
何がって言われたらなんだろ。なんか楽しいし面白いじゃんw
ダツロボ
ダツロボ
・・・。

ソウナノデスネ。楽シイコトデアレバ、ワタシモ知リタイデス。

HTMLとはなんなのか。

まずは、参考になるサイトの引用からみていきましょう。

HTMLとは、Hyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)の略で、Webページを作るための最も基本的なマークアップ言語のひとつです。

普段、私たちがブラウザで観ているWebページのほとんどが、HTMLで作られています。

ダツロボ君
ダツロボ君
・・・ハイーパーテキスト・マークアップ・ランゲージ?

全ク分カリマセン・・・。

うす
うす
簡単に言うとただのテキストファイルだよ。

そのテキストファイルを「HTML」の形式(ルール)で書くとブラウザがいい感じに読み取って、WEBページのような表示にしてくれるんだよ。

ダツロボ君
ダツロボ君
・・・ソウナノデスカ。難シイデスネ。
うす
うす
確かに初めは、難しかったけど、実際に表示するとわかってくるよ!

HTMLの形式

基本のHTMLから理解していこう!

以下のコードが基本です。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="style.css" type="text/css">
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>
ダツロボ君
ダツロボ君
・・・ムリデス、ムリデス。
うす
うす
ダツロボ君頑張って!

HTMLは「<」と「>」 に囲まれている「タグ」と呼ばれているモノによってコードの役割が管理されているよ。

ダツロボ君
ダツロボ君
・・・タグ。

<!DOCTYPE html>ッテナンデスカ?

うす
うす
それは、HTML5の宣言だよ。「おまじない」みたいなものだから特に気にしなくてもいいよ。
うす
うす
あと、lang=”ja”ってのは、日本語がメインですよってこと。

charset=”UTF-8″は、「UTF-8」っていう文字コードで、基本的に全部「UTF-8」だし、これも「おまじない」と思っていいよ。

ダツロボ君
ダツロボ君
・・・分カリマシタ。毎回同ジヨウニ記述スレバイイノデスネ?
うす
うす
そうそう、そう言う感じ!それと、タグの説明は、下の表にまとめといたよ。
<html> HTMLの文書の宣言
<head> 文書のヘッダー情報(設定などを記述する場所)
 <link> CSSやJavaScriptのソースコードと紐付ける
<body> HTMLの文書の中身。WEBページとして表示される部分
<h1> ~ <h6> 見出しの設定:<h1>が一番大きく<h6>が一番小さい
<br> 改行
<p> 段落
<img> 画像を表示するのに使うよ
<input> テキストを入力したり、ボタンとしてテキストを出力したりできるよ
ダツロボ君
ダツロボ君
・・・ナルホド。
うす
うす
設定ファイルなどは、<link>に書いて、基本的に表示いじる部分は<body>タグだけだよ。
ダツロボ君
ダツロボ君
アリガトウゴザイマシタ。少シ理解デキマシタ!
うす
うす
今回はここまでにしておこう。また教えてあげるね!
ダツロボ君
ダツロボ君
ヨロシクオ願イシマス!