前回までで、VSコードの準備が完了しました。今回は実際にコードを入力し、ブラウザで確認してみるところまで進めてみたいと思います。
超初心者向けですので、ひとつずつ丁寧に進めていきますね。
基本コードの記入
まずは前回作成した「index.html」に「!」を入力してみてください。すると、基本フォーマットが表示されます。
HTMLは<○○>に始まり、</〇〇>で終わります。例えば、<html>~~~~</html>です。
<〇〇>は「〇〇タグ」と呼ばれ、<html>の中に<head>と<body>があります。
- headタグ：ブラウザ上に表示はされませんが、設定みたいなものです
- bodyタグ：ブラウザ上に表示される部分になります。
lang属性を変更しよう
「lang属性ってなに？」「何のために変更する必要があるの？」と思う方が多いでしょう。変更したからといって、すぐに大きな変化はないですが、
一言で言うと「HTMLを読み込んだコンピュータにどんな言語で記載しているのか認識させる」ことが目的です。
これによって、文字の誤表示（文字化け）を防ぐことができます。
具体的には<html lang=en>を<html lang=ja>に変更するだけです。
bodyタグにコードを書いていこう
それではbodyタグにコードを書いていきましょう。
サイトを作成するときは、大きく以下の3つに分けて考えます。
- Header：サイトの最上部にあり、ロゴやメニューリストを表示
- Main：サイトの中央部にあり、メインとなる記事を表示
- Footer：サイトの最下部にあり、コピーライトやリンクなどを表示
以下のコードを記載し、Googleブラウザにドラッグしてみましょう。右の様に表示されましたか？
様々なタグを駆使することで、思い通りの表現が出来る様になりますよ。
これだけでは味気ないですよね、、、次回はcssを使った装飾にチャレンジしていきたいと思います。
まとめ
はじめに「!」を入力することで、基本コードを省くことが出来ます。その中のlangタグを「ja」にすることで、文字化けを予防できます。
コードを書くときはBody内に書き、Header/Main/Footerにそれぞれかき分けて作成していきます。
この後も頑張って作成していきましょう。
コメント