コピペすれば...たったこれだけHTML本格入門
今回はHTMLをファイルとしてきちんと仕上げていきます。
と言ってもほとんどが決まり文句なので、そのままコピペするだけでOKです。
基本は前回の通りでいいんですが、ちょっとだけ他にも書かないといけない決まりごとのようなものがあります。
コピペでOK
早く次に進みたい人は下の部分をコピペするだけでOKです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
理解すべき点は
1. <title></title>の間にサイトのタイトルを入れる
2. <body>と</body>の間に本文を入力していく
という2点だけです。
下で説明するそれぞれの内容は最初は理解しなくても問題ないのですが、長い目で見ると役に立つので興味がある人は読んでみてください。
htmlの全体像
HTMLの全体像は下ようになっています。
htmlの大枠をつくる
まず、今書いているのはHTMLなので、これはHTMLですよというのを書く必要があります。
これはタイトルを<h1>と</h1>で囲むのと同じ要領です。
<html>と</html>で囲みます。
実際には、この最初の方には、「日本語で書いていますよ。」ということまで入れて最初の<html>は<html lang="ja">とします。
つまり、
<html lang="ja">
ここにHTMLの中身を書く
</html>
のように書きます。
htmlの中身
<html lang="ja"></html>の中は2つのパートに分かれます。
1. head
2. body
の2つです。
1のheadには、記事のタイトルや本文以外の情報を色々入れ込みます。
例えば、ブラウザの上のタブのところに表示されるタイトルもここに書きます。
そして、bodyには記事などのメイン部分を入れます。
これまでと同じように
headの部分は<head>と</head>、
bodyの部分は<body>と</body>
で囲みます。
つまり、
<html lang="ja">
<head>
ここにいろんな情報をかく
</head>
<body>
ここに記事などメイン部分を書く
</body>
</html>
のように書きます。
このままだとちょっとぐちゃぐちゃしすぎているので、実際には次のようにちょっとずらしてわかりやすくします。
<html lang="ja">
<head>
ここにいろんな情報をかく
</head>
<body>
ここに記事などメイン部分を書く
</body>
</html>
こうすると、何の中に何が入っているか分かりやすくなりますね。
このようにずらすことを"インデント"といいます。
<body></body>の中に前回書いた
<h1>エディターへの挑戦！</h1>
<p>今日はエディターに挑戦しています。</p>
を入れてみましょう。
すると、
<html lang="ja">
<head>
ここにいろんな情報をかく
</head>
<body>
<h1>エディターへの挑戦！</h1>
<p>今日はエディターに挑戦しています。</p>
</body>
</html>
となります。
あとは、
headの部分に
<meta charset="UTF-8">
と
<title>サイト名</title>
を入れましょう。
<meta charset="UTF-8">は、文字コードというものを指定しているのですが、ちょっと難しい上に他で使うことはなく、理解せずにコピペして問題ないため、説明は割愛します。
<title>サイト名</title>は先ほど書いたブラウザのタブに表示される部分です。他にもFacebookやtwitterなどにリンクをはったときに表示されます。
"サイト名"の部分は自分の名前や組織名など好きな名前を入力してください。
ここでは「プログラミング学習ブログ」とします。
この2行
<meta charset="UTF-8">
<title>プログラミング学習ブログ</title>
をheadの中に入れると
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>プログラミング学習ブログ</title>
</head>
<body>
<h1>エディターへの挑戦！</h1>
<p>今日はエディターに挑戦しています。</p>
</body>
</html>
となります。最後に、1行目に書く決まりになっている、
<!DOCTYPE html>
を入れれば完成です！
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>プログラミング学習ブログ</title>
</head>
<body>
<h1>エディターへの挑戦！</h1>
<p>今日はエディターに挑戦しています。</p>
</body>
</html>
最初はちょっと大変なように感じるかもしれませんが、titleの中身以外は全部そのまま毎回使えるので、実際に書くときには、
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
の部分をコピペして、titleを埋めたあとに、bodyのところに本文を書くということをすればいいだけなので、このコピペする部分だけどこかに保存していれば、かなり楽に書けます。
準備はここまでです。
いよいよ次回は、bodyの中にコンテンツを入れ込んでいきましょう。
次回でhtmlの基本はおしまいです！
この記事が気に入ったらサポートをしてみませんか？