ゆるあわ自習室 ゼロから『HTML』『CSS』編

ぜろから空いた時間に独学で!

#5ゼロからwebの基本「HTML」「CSS」編 〜5日目〜 『実際に入力してみる2(<title>要素など)』


「こんばんは」あるいは「おはようございます」それとも「こんにちは」

ゆーたろです。

前回は<html>要素とひと言入力してファイルに保存してプレビューする所までやったので、今回は<title>要素などもう少しいろんな要素を使ってみましょう。

 

今日の勉強のオトモ曲👇

 

リスポーン

リスポーン

  • Saucy Dog
  • ロック
  • ¥255
  • provided courtesy of iTunes
  • タイトルを入れてみよう

まず、<html>のすぐ下に<head></head>を書いてみましょう。

<head>〜</head> は「head要素」。(このHTML文書の情報を入れるところ)みたいです。
「head」はヘッド。頭という意味で、この部分に「ページのタイトル」「文字コード」「キーワード」などなど、いろいろな情報を入れることができるみたいです。

次は、<head>から</head>の間に、<title> </title>と書き、さらにその中に好きなタイトルを書いてみてください。

<title>〜</title> は「title要素」
「title」はタイトル。そのままの意味で、このHTML文書のタイトルをになります。

 

ここまでを保存してブラウザでプレビューしてみてください。
こんなふうに、いま書いたタイトルが表示されてますでしょうか?

※title要素は、今度説明する h1要素よりも、検索ロボットが重要視する、一番の要素だそうです。なのでtitle要素は重要

ちなみに「head要素」はHTML文書に関する情報を入れるところで「head要素」に書いた情報は「title要素」以外はブラウザで表示され内容です。

 

  • <body>要素を書いてみよう

「body」はボディは体です。ウェブページとして表示される実際の内容は「body要素」の中に書きます。

body要素は、レイアウトする内容の 言わば内容です。
body要素に色や画像を指定する事で、画面全体の背景を変えたり文字のサイズや色、行間、センター合わせか左寄せかなど、基本のレイアウト情報を指定することによりbody要素の中に書いた全部の要素に反映さセル事が出来ます。

 

早速<head>〜</head>の前回書いた内容を <body> </body> で囲んでおきましょう。

だいぶ形になって来た気がします。笑

 

  • 最後に

無理せずゆっくり今回はここまでにしましょう。

HTMLの要素は体の部分の名前になっているのでここまではけっこう覚えやすいですね!

 

次回 →「文書型宣言」

 

今回のおすすめ商品はこれ👇

夏は日焼け止め必須!2種類使い分けているのですが、こっち大切。