HTML入門講座｜ウェブサイトの構成について学ぼう | ページ 2

ウェブサイトを作ってみよう

ウェブサイトを作ってみよう

元になるコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="キーワード">
<meta name="description" content="ホームページの大まかな内容">
<title>タイトル</title>
</head>
<body>

</body>
</html>

うさタブ

上のコードを元に学習していくッピ！

【メモ帳】にコピーして用意するッピネ！

ホームページのキーワードを入力しよう

うさタブ

<head></head>の間にある

<meta name="keywords" content="キーワード">

に、ホームページのキーワードを入力してみるッピ！

ユウキ

<body></body>じゃないんだ？

うさタブ

そうある！

これは【メタタグ】といって、ホームページの見えない部分に使う設定タグッピよ～！

ユウキ

へ～　これがそうなのか！

うさタブ

試しに

<meta name="keywords" content="JavaScript,HTML,CSS,プログラミング学習">

と入力してみるッピ！

うさタブ

キーワードとキーワードの間に『 , 』を入れるのがミソッピ！

うさタブ

これは、

<meta name=”keywordsホームページにキーワードを設定します” content中身は=”JavaScript,HTML,CSS,プログラミング学習”>

ですという意味ッピ！

ユウキ

キーワードって？？

うさタブ

検索エンジンに、このホームページやブログはこういうものを扱ってますって教えてあげるものッピネ～！

うさタブ

ただ、近年はこのキーワードタグはあまり重要視されてないッピ。

それよりも、【見出し】やコンテンツのタイトルに<h1><h2>タグをきちんと設定して、

画像にキャプションやタイトルをちゃんと入力した方がよっぽど検索エンジンに有効ッピヨ～

ユウキ

ふーん・・・よくわからないけど、そんなもんなんだなぁ～

ホームページのディスクリプションを設定しよう

うさタブ

次は、<head></head>の

<meta name="description" content="ホームページの大まかな内容">

を書き換えてみるッピ！

うさタブ

これは、ディスクリプションといって、

記事の抜粋・・・大まかにどんな内容が書かれているかを書いたものッピ！

<meta name=”description”このページがどんな記事かを説明します content=　内容は“キャラの会話で楽しく学べるプログラミング学習サイト“>

という意味ッピ！

うさタブ

ここでは、

<meta name="description" content="キャラの会話で楽しく学べるプログラミング学習サイト">

と入力するッピネ～！

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="JavaScript,HTML,CSS,プログラミング学習">
<meta name="description" content="キャラの会話で楽しく学べるプログラミング学習サイト">
<title>タイトル</title>
</head>
<body>

</body>
</html>

ユウキ

できた～！

HTMLを宣言する

ユウキ

そういえばこの

<!DOCTYPE html>

って何なんだ？

ユウキ

今までこんなの、みたことなかったけど・・・

うさタブ

これはHTML宣言ッピね～！

<html>と一緒で、これはウェブページです！と説明するものッピよ～

ユウキ

へ～

ユウキ

じゃあこの

<html lang="ja">

の『lang=”ja”』ってなに？

うさタブ

これは　Language使用する言語は=Japanese日本語　って意味ッピネ！

日本語のウェブサイトという意味ッピ

文字コードを設定する

ユウキ

へー色んなのがあるんだな～

じゃあ次の

<meta charset="UTF-8">

って？？

うさタブ

これは文字コードを設定するタグッピネ～

これがないと、文字化けが起こってしまうッピよ～

ユウキ

何これ・・・読めないんだけど・・・

うさタブ

この文字コード、

<meta charset="UTF-8">

を設定しないとこうなってしまうッピ・・・

今まではわかりやすさを重視してたゆえ、記入をはぶいていたッピが、今後はちゃんとこのタグを入れるがッピよ～！

ユウキ

これは絶対に書かなきゃヤバイな～

タイトルを設定する

うさタブ

次はウェブページの『タイトル』を設定するッピネ！

ユウキ

タイトル？

うさタブ

ウェブページの左上にある、

↓の部分のことッピネ～！

ユウキ

これか～！

うさタブ

これは簡単ッピ！

<head><head>の中にある、

<title>タイトル</title>

　の部分を

<title>遊んで学んでジャンケンポン！</title>

に変更してみるッピ！

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="JavaScript,HTML,CSS,プログラミング学習">
<meta name="description" content="キャラの会話で楽しく学べるプログラミング学習サイト">
<title>遊んで学んでジャンケンポン！</title>
</head>
<body>

</body>
</html>