HTML入門編 宣言の書き出し
スポンサーリンク
何でもそうですが、スタート時には始める宣言などが必要です。
体育祭や運動会でも
「宣誓！我々はスポーツマンヒップにもっこり」
見たいなのがあったと思います。あれが、HTMLでも必要となります。
長くなるので以下続きから。
では、最初にメモ帳(自前のテキストエディタ)を起動させます。
そこに以下を記載。
---------------------------
<!DOCTYPE html>
---------------------------
単純に、ドキュメントのタイプはhtmlですよってやつです。
次に、以下を記述
---------------------------
<html lang="ja">
</html>
---------------------------
これはhtmlの言語は日本語で書かれてますよって意味。
"</html>"ってのは、<>で囲まれたのが</>で終わりって事。
要するに、<html lang="ja">で｢こっから日本語のHTMLが開始されます。｣って事で、</html>で｢HTML終わりました～｣って意味です。
今後、記述は<html>と</html>の間に記載していきます。
次の記載は<head>です。
このホームページの情報はここに記載されてますよーっていう合図みたいなものです。メールでも何でもそういった情報は実は<head>内にあります。
こいつを記載しましょう。
------------------------------
<head>
</head>
------------------------------
では、<head>と</head>の間にホームページの情報を記載します。
それにはいくつか種類がありますが、一つ目に<meta>を使用します。
------------------------------
<meta charset="Shift-JIS" />
-------------------------------
これは文字コードが"Shift-JIS"ですよってのを表してます。
まぁよく聞くのだとutf-8とかだと思いますが、要するに文字のタイプがどんなもんよ？って事です。今回はあえてShift-JISに設定してみます。
そしてここで一つあるのはかっこの最後にスラッシュがついてます。
別にこの内容の間に何か入るわけではないので</meta>ってのを略していると思ってください。
これが許される物がいくつかあります。改行も<BR>と言うのを使用するのですが、こいつも<BR />と記載しても文句言われません。
頭にだけ入れて置きます。
次にタイトル部分に文字を入れます。
---------------------------------
<title>ホームページのタイトル</title>
---------------------------------
はい、まんまです。
<title>と</title>の間にブラウザのタブ部分などに表示される物を入れます。
次なのですが、CSSのリセットを行います。
ブラウザ毎にCSSがあるそうで、使うブラウザによって表示の仕方がかわってしまうのでいったんリセットしてしまいましょうという物です。
yahooやgoogleで｢CSS reset｣などと検索すると出てきます。今回は、ファイルをダウンロードすんのも面倒なので検索して引っかかった有名どころでこちらを利用させていただきたいと思います。コピるだけ。
-------------------------------
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
-------------------------------
まぁ単純に言えばリンクでスタイルシートがテキスト形式でこの場所にあるから読み込んでね～って指示です。
ここまでで基本的なhead部分は完了です。
</head>の次に以下を入力しましょう。
-----------------------------------
<body>
ここにホームページを入力しましょう。
</body>
-------------------------------------
さぁ、これでベースとなる部分が出来ました。
<body>はその名の通り体です。ここにレイアウトやら文字やらリンクやらを記載していくとホームページとして表示されます。
以下が、上記を記載したものとなります。
------------------------------------------
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="Shift-JIS" />
<title>ホームページのタイトル</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
</head>
<body>
ここにホームページを入力しましょう。
</body>
</html>
------------------------------------------
テキスト保存する際に、形式を"すべて"に変更して、ファイル名を適当に｢base.html｣として保存してみましょう。
それをブラウザで開いて確認してみましょう！
上記サンプルの様に表示されましたでしょうか？
下部の[PR]は借りているサイトの広告なのでない状態で表示が本来の表示です。
次回は、CSSについて記載出来たらいいなぁ。
