前HTMLのbodyの基礎練習
『【超初心者のHTMLのコツ】HTMLは人間を宇宙人に説明することと同じ』
いがいに簡単だったよ
【前回の授業】
[blogcard url=”https://kotsukalab.com/web/617”]うん、まずは簡単なところからやれば絶対サイトは作れるよ!
今回は、bodyは表示する部分だったけどheadを解説するよ
お願いします
このこうゆうサイトなんですよってgoogleの会社に頭からテレパシーを送るイメージ
コッツ!
IT コツカラボです。
今回の授業は<head>〜</head>
headタグです。
bodyタグ <body>〜</body>に書かれたものがブラウザ(インターネットのサイトを見るための窓のこと)に表示されるものでしたが
headタグ <head>〜</head>は違う使い方になります。
ではゆっくり学びましょう!
【悩み】 headタグの中には何のために書かれているかわからないものばかり
前回の<body>〜</body>
はまだ結果がでるからわかりやすかったけどheadって・・
何であんなにわかりにくいの・・
やっぱり1文ずつ意味があるんだよね
だからひとつひとつ覚えていくこれしかないんだけど
これ今後出てくる検索の上位に表示される方法につながるところだから覚えると検索1位になれるかもね!
やばい有名になりすぎでサイン書くの大変になるかも
今から床屋に行ってこ
前回<body>〜</body>に簡単なタグを打ち込んでみたけど、
非常にわかりやすいのはブラウザに表示される部分なので
結果が出力されるんです。
間違えたら間違えた結果が表示されるので
わかりやすいのです。
それに比べてheadタグは表示はしません。
では何を書いているの?
全世界に配信する時に
こんなサイトなんですと自己紹介することで
Googleという会社で作られている検索エンジン(みなさんが検索した結果を教えてくれる)にその自己紹介が全世界にお知られされるんです。
営業マンが
「私こうゆうものです」って言っているようなもんですよね。
もしくは寅さんですね。
「私、生まれも育ちも葛飾柴又です。帝釈天で産湯をつかい、姓は車、名は寅次郎、人呼んでフーテンの寅と発します。」
その内容をheadに書くんです。
寅さんがテレパシーを使って自己紹介しているイメージ。
head=頭の中から
Googleの会社にテレパシーで
「私の作ったこのサイトは◯◯◯何ですよ(念力集中)」
というイメージを持ってください。
【解決のコツ】HTMLの仕組みは人間の体の構造と同じ
headタグ <head>〜</head>
まずは下の基本ベースに少しずつ少しずつ追加していきます。
今回は超基礎講座なのでほんとにほんとの最低限のタグを入れます。
|
1 2 3 4 5 6 7 8 9 |
<!DOCTYPE html> <html> <head> 私のサイトはこんなサイト </head> <body> ブラウザ画面上に表示されるコンテンツ（文章、画像、表、動画、音楽)を指定する部分。 </body> </html> |
titleタグ<title>〜</title>
そのままタイトルですね。
寅さんの自己紹介でいうと
「私、生まれも育ちも葛飾柴又です。帝釈天で産湯をつかい、姓は車、名は寅次郎、人呼んでフーテンの寅と発します。そして『男はつらいよ』のタイトルがバーン!」
の「『男はつらいよ』のタイトルがバーン!」の部分ですね。
今回は「男はつらいよ」というタイトルでしたら
<title>〜</title>で挟めばOK!
|
1 2 3 4 5 6 7 8 9 |
<!DOCTYPE html> <html> <head> <title>男はつらいよ</title> </head> <body> ブラウザ画面上に表示されるコンテンツ（文章、画像、表、動画、音楽)を指定する部分です。 </body> </html> |
ブックマークをするときここに記述したタイトルがブックマークのタイトルなんです。
meta要素 <meta ◯◯◯◯>
「メタ」って言葉ご存知ですか?
めったに聞かないですよね
・・・めったに・・・メタに・・・
失礼しました。大事な時間をうばってしまいました。
「メタ認知」とか茂木健一郎さんが脳の仕組みでよく出てきた言葉なんです。
ウィキペディアでは
メタ認知は「客観的な自己」「もうひとりの自分」などと形容されるように、現在進行中の自分の思考や行動そのものを対象化して認識することにより、自分自身の認知行動を把握することができる能力である。メタ認知的知識とは、自分自身の状態を判断するための知識を指す。
wikipedia
えーっとよくわかりませんが自分自身はこんなんだよってことみたいですね。
サイトのhead内に
「私、生まれも育ちも葛飾柴又です。帝釈天で産湯をつかい、姓は車、名は寅次郎、人呼んでフーテンの寅と発します。そして『男はつらいよ』のタイトルがバーン!」
寅さんではなくmetaでいうと
「私、文字形式はUTF-8です。日本語をつかい、キーワードは◯◯◯、説明文は◯◯◯◯◯◯、著作人と発します。そして『◯◯◯』のタイトルがバーン!」
ちょっと表にまとめます。
| http-equiv | 文書の言語 |
| content | 日本語の文書の場合は ja を指定 |
| charset | 文書の文字コードを指定。 |
keywords | ページの内容を表すキーワードです。content属性の値に、カンマ（,）で区切りで複数のキーワードを入力できます。 検索キーワードをどのようにするか。 |
| description | ページの内容を指定。検索エンジンの結果に表示されるので検索した人はそれを見て、クリックするか判断する |
| author | 文書の著作者を指定。 |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <head> <meta http-equiv="content-language" content="ja"> <meta charset="UTF-8"> <meta name="keywords" content="男はつらいよ,寅さん,映画"> <meta name="description" content="『男はつらいよ』は、渥美清主演、山田洋次原作・監督のテレビドラマおよび映画シリーズである。"> <meta name="author" content="寅さん"> <title>男はつらいよ</title> </head> <body> ブラウザ画面上に表示されるコンテンツ（文章、画像、表、動画、音楽)を指定する部分です。 </body> </html> |
まだまだhead内に記述するものはあるのですが
まず基本を習得して、どんどん増やしていきましょう!
