HTMLの基本構造を簡単解説 マンガでわかるHTML入門

公開日: : 最終更新日:2015/10/31 HTML

HTML基礎がマンガでわかる

HTMLちゃんはなぜ混乱しているの?

Webデザイン初心者わかば

HTMLちゃん、どうしたの!?
突然混乱して。


HTML

混乱するとも!
このメモの書き方じゃ文書の構造がわからないんだもん。


Webデザイン初心者わかば

このメモの書き方でも、私にはわかるけどな。
HTMLちゃんにわかるように書き換えてあげなくちゃ。


HTMLちゃんに構造を教えてあげよう

Webデザイン初心者わかば

そういえばこの前の記事「HTMLって何?簡単解説!」のマンガの中で、HTMLの基本形を教えてもらったわね。
まずはHTMLの基本形を書こうかしら。


HTMLの基本形

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>●●のページ</title>
  </head>
  <body>
    文章
  </body>
</html>

初めて見るタグが出てきましたね。

!doctipe htmlは、「これはHTMLファイルですよ」という宣言をしています。

meta charsetというタグは、HTML文書の文字のエンコーディングを指定しています。
ここでは「UTF-8という文字コードを使いますよ」という宣言をしています。

普段使っているニュースサイト、ネットショップ、チケット予約サイト、すべてのWebページは大方この基本構造で表示されています。

ためしに、どこかのWebページ上で、「右クリック→ソースを見る」をしてみよう。

上の基本形に比べて、中身がたくさん詰まっていてわかりにくいかもしれませんが、headタグがあって、bodyタグがあって、それらがhtmlタグでくるまれているという構造は同じはずですよ。

body要素の中にコンテンツを入れこんでいこう

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>おやつの場所のメモページ</title>
  </head>
  <body>
    おやつの場所

    甘いおやつ
    ドーナツ
    机の上にあります
    ケーキ
    冷蔵庫にあります

    からいおやつ
    おせんべい
    引き出しにあります 
  </body>
</html>
Webデザイン初心者わかば

HTMLの基本形の中に、文章を入れてみたよ!
これでどう?完璧でしょ?


HTML

わかばちゃん、自信があるのはいいんだけど、文章がどういう構造になっているのか、まださっぱりわからないよ。
Webページだとそのコードがどう表示されるか見てみてくれ〜!
こちらの記事で紹介したWebページ用テキストエディタ、なければパソコンにもともとついているメモ帳にそのコードを貼り付けてごらん


HTML基本1

Webデザイン初心者わかば

ファイル名の後ろに拡張子「.html」をつけて保存だね。


HTML基本2

Webデザイン初心者わかば

HTMLファイルを保存できたよ!


HTML

ばっちりだね!次はブラウザでそのファイルを開いてみよう。


Webデザイン初心者わかば

ぶ、ぶらうざって何…?


HTML

ブラウザっていうのは、一言でいうと「インターネット上のページを閲覧するためのソフト」だよ。

代表的なものに、Google Chrome、Firefox、Safari、Internet Explorerなどがあるよ。
Webで調べ物をしたり、ネット通販をしたりと、君もよく使ってると思うよ!


Webデザイン初心者わかば

そういうことね。私はFirefoxを使ってるよ。


HTML

そしたら、さっき作ったHTMLファイルの上で「右クリック→このアプリケーションで開く→Firefox(任意のブラウザ)」を開いてみてね。
Windowsのパソコンだと「右クリック→このプログラムで開く→任意のブラウザ」だったかな?Windowsの操作方法についてはまた確認して追記するね。


HTML基本3

HTML基本4

Webデザイン初心者わかば

おお〜、ブラウザ上で表示された!
って、なんじゃこりゃあ〜!たしかにこれじゃどこが見出しか・どこが段落かわからないわね


見出しと段落をHTMLでマークアップしよう

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>おやつの場所のメモページ</title>
  </head>
  <body>
    <h1>おやつの場所</h1>
	
    <h2>甘いおやつ<h2>
    <h3>ドーナツ</h3>
    <p>机の上にあります</p>
    <h3>ケーキ</h3>
    <p>冷蔵庫にあります</p>

    <h2>からいおやつ</h2>
    <h3>おせんべい</h3>
    <p>引き出しにあります</p> 
  </body>
</html>
Webデザイン初心者わかば

HTMLちゃん、これでどうかしら?


HTML基本5

HTML

わかる、わかるぞ!
わかばちゃん、文書構造をマークアップしてくれてありがとう!Webにこのファイルをアップしたときに、閲覧者・プログラム双方にとって親切なマークアップになったね。


Webデザイン初心者わかば

自分で作っといてなんだけど、簡素な仕上がりよね。Webデザイナーを目指すなら、見た目をもっと強化したいわ。もっとババーンとした、ぐぉんぐぉん動くような、おしゃれなページを作りたいんだけど。


HTML

わかばちゃん、見た目だけに捉われていてはいいWebサイトを作れないんだよ。
HTMLを正しく書く事は、SEO(検索エンジン最適化)っていうものにも関わってくるんだから、あなどれないのだよ。


HTML

次回は他のHTMLタグも学んでいくよ!


記事作成:湊川 あい
マンガ・イラスト:湊川 あい


The following two tabs change content below.

湊川 あい

湊川あい(みなとがわ あい) 絵を描くWebデザイナー。2014年より「マンガでわかるWebデザイン」をインターネット上に公開していたところ、出版社より声がかかる。 著書「わかばちゃんと学ぶWebサイト制作の基本」 Web連載「マンガでわかるGit」「わかばちゃんが行くオフィス訪問マンガ
  • Pocket       
  • このエントリーをはてなブックマークに追加

関連記事

image

マンガでわかるWebデザインが書籍化!全国の書店・アマゾンで発売

マンガでわかるWebデザインが本になりました! 「わかばちゃんと学ぶWebサイト制作の基本」 出

記事を読む

image

HTMLちゃんとCSSちゃんを擬人化するとこんな感じ

  ちょっとラクガキ。 HTMLちゃんとCSSちゃんの日常を描いてみました。

記事を読む

image

Web制作で使う言語たちを図解してみた HTML,CSS,JavaScript,PHP

HTML CSS JavaScript PHPの関係を図解してみた HTML 「HTML

記事を読む

eyecatch03

HTMLって何?簡単解説!マンガでわかるHTML入門

HTMLとは? 「自分でWebページを作るぞ!」となったときに、まず最初に必要なの

記事を読む

Message

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

C97RWxjVoAAdVdm
「マンガじゃなくてもGitぐらいわかるでしょ」と言われたことがあります

わかばちゃんと学ぶGit使い方入門 Web連載から始まった「マンガで

dakkou
マンガでわかるGitが書籍化!2017年4月21日 書店にて発売予定

マンガでわかるGitが書籍になります Web連載中の「マンガでわかる

tax_001
マンガでわかる確定申告 第1話 源泉徴収ってなあに?

第1話 源泉徴収ってなあに? 書籍「わかばちゃんと学ぶWebサイト制

HTMLちゃん
2016年ふり返り:本を出して会社を辞めてフリーランスになってました

湊川あいです。 Webデザイナーの傍ら、マンガや図解を取り入れた技術書

Gitコラボ漫画
【コラボマンガ】怖くない!黒い画面入門【 #シス管系女子 + #マンガでわかるGit 】

こんにちは!絵を描くWebデザイナーの湊川あいです。 普段 マンガでわ

→もっと見る

PAGE TOP