ジョージの毎日

一日一日が特別な一日

夏休み自由研究パート3 「タグと属性」

こんにちは。夏休みなのに雨でテンションがガタ落ちしている、

ジョージです。

なんか、この気温はもはや夏休みじゃないですよね。( ;∀;)

 

っとまあ前置きはこれぐらいにして、やっていきましょう。

夏休み自由研究「プログラミング」。

 

本日、第三話なのですが今回の目標は

”タグ””属性”について知っていきたいと思います。

 

ここは難しく考えずに、

タグ・・・文章(ウェブ上で見える部分)を優しく包み込んで、

     アシストする。

と考えて行きましょう。

<!DOCTYPE html1>

      <head>

      <title>ジョージの毎日</title>

     </head>

</html>

 

この青くなっている部分がHTML文章なのですが、

一つずつ解説していきたいと思います。

 

<!DOCTYPE html1>について。

  この<!DOCTYPE html1>は語尾に”HTML”と書いてあるのが分かりますか?

  そうこの<!DOCTYPE html1>がこの文章はHTML文章だよ。

  という風にコンピューター?に言うタグなんです。

  

ポイント

タグは一番上にちょこんと置いておくだけでは全く機能しません。

何故かというと、タグで文章をはさんでいないからです。

どういう意味か正確に言うと、

上のHTMLタグでも同じことが言えますが、

このようにしないとタグは機能しません。

<タグ名>

文章

</タグ名>

このようにタグ名とタグ名で文章をサンドイッチして初めて、

タグ成立ですのでお気を付けください。

ポイントの最後に、とても難しいことを言いますが、

タグには上のはさむタグ名と全く同じにしないで、

はさむ場合があります。

その一つとしてHTMLタグなんかが分かりやすいです。

上は<DOCTYPE html1>という言葉ですが、

下は</html>ではさみます。

半角スラッシュ / も忘れないようにしてください。 

 

次に上の文であった、

<head>と<title>

ですが、この二つがあるだけで結構変わります。

それでは一つずつタグの意味を記載していきます。

 

<head>・・・そのウェブページの情報を入力する。

これの意味は、例えばウェブぺージに名前を付けたかったとすると、

まあ上の<title>タグを使うのですが、このタグをさらにタグで囲むのです。

それを形にした時の図がこちら。

 

<head>

<title>ジョージの毎日</title>

</head>

 

これを見たら分かると思いますが、これがタグをタグで囲むという

基本形です。

これをするのとしないのだとどう変わるのかというのを

具体的にすると、

そのページに名前が付けられるか付けられないかです。

付けないと昨日説明した、

HTML文章の名前がそのままウェブページの名前になってしまいます。

<title>のなかは自由に変えて良いです。

<title>のなかがそのページの名前になります。

 

 

次に属性です。

属性と言うのを簡単に説明すると、文章をアシストするのが

タグでしたが、属性はタグをアシストするものです。

要は、漫画家をアシストするアシスタントだと思ってくれればいいです。

では軽く例を挙げてみます。

<div style="bacground:skyblue;">

文章

</div>

これを例に挙げて説明しますと、

まず<div>がタグです。次に<style>が属性です。

この<style>の意味を言うと、

まず<style>をカタカナに治してみましょう。

スタイル・・・こうなりますよね?

間違っていたら小僧の戯言だと思って聞き流してください。

この属性は実にシンプルな意味です。

この意味を文章にまとめると、

<div>と</div>で囲んだところの背景の色が変わるよ~

・・・ということです。

<div>で広さを定義して、

<style>で<div>で囲っている所のスタイルを変えるよ。といって、

<bacground:skyblue;>で、背景を空色にしまーす。

という意味になっています。

簡単でしょう?

今日は囲ったところ全部を指定するタグをご紹介しましたが、

もうちょい・・・あと5日ぐらいかな?

したら一行をそのまま指定するやり方も出てくると思います。

 

それでは、読者登録よろしくお願いします!

それじゃあまた。