アマグラミング

プログラミング初心者が勉強したことを復習とメモがてら書いているだけです。

(03)<head> <body> <title> <p> ,インデント、保存の形式を学び、表示してみましょう。

さて、今回は簡単なものを表示させてみるところまで行きましょう。

まずは前回の確認をしましょう。

 

・<!DOCTYPE html>

HTML5で書いていると伝えている

・<>これをタグという。

タグには<>開始タグと</>終了タグがある

・<html lang="ja">

lang="ja"は日本語で書いていると伝えている。

・<meta charset="utf-8">

文字コードutf-8が推奨されていて、文字化けなどを防ぐ。

 

こんな感じでしたね。

さてさてでは今回はとりあえず

 

f:id:tiroru17:20170521234847p:plain

この内容がわかるまでいきましょう。

 

このなかでまだ説明されていないのは

<head>タグと<body>タグと<title>タグに、<p>タグですね。

そして、実はまだ他にもあります。

 

とりあえずひとつひとつ覚えていきましょう。

さてまずは<head>タグを説明しますね。

ここに書いているものは、実はWEBページに表示されるわけではありません。

ここは設定に関しての情報を書いているわけです。

<head>~</head>の中の<meta~~~>は文字コードの指定というのはわかっています。

 

では<title>~~~</title>は何の情報かというと、このページの

タイトルなわけです、<title>はタイトルというわけですからそのままですね。

具体的に言うと、ここです。

f:id:tiroru17:20170521235643p:plain

ブラウザの上部にある「タブ」と言われているところですね。

アマグラミングと書かれています。

これが<title>アマグラミング</title>の部分なわけです。

~~~の中にあなたの好きな文字を入れてください。

ここは全角でも、つまり日本語でも問題はありません。

というか問題があったら困りますが。

 

さて、しかしなぜ問題が起きないのでしょう?

utf-8文字コードに指定しているからですね。

と、言うわけで

<meta charset="utf-8">は<title>~</title>より前に書くわけです。

 

さて、<head>の説明に戻りますが

<head>の中に文字コードの指定とタイトルを指定して

</head>で囲んでいたわけです。

さてさて、もう一度上記の画像を見てみましょう。

 

f:id:tiroru17:20170521234847p:plain

 

これで半分くらいはわかりますね?

 

しかしお気づきの方も多いでしょうが、

<>(タグ)の始まる位置がそれぞれ違いますよね?

見た目のわかりやすさのためなのですが、

これをインデント(字下げ)と言います。

 

入れ子構造などと説明されるものが多いですが、

私は入れ子構造などという言葉は全く一般的ではないと思います。

これは階層的な表現だと考えるといいでしょう。

親子関係と言うほうがわかりやすいでしょうか。

 

<head>タグの件で言えば、</head>(headの終了タグ)までに

<meta~~>や<tittle>タグを囲んでいますよね。

これは<head>タグの中にあるわけなので、

上記のような字下げを行って、関係をわかりやすくしているのです。

 

では<body>タグの説明に行きましょう

<body>~~~</body>

の中には実際に表示したい内容を書きます。

画像では

<p>表示出来ているかな</p>

と書いています。

pはparagraph(段落)の略です。

これで文章を書くことが出来ます。

 

さて、この<p>タグは先の説明であった親子関係で言うと

<body>タグの子どもと言えます。

なので、インデントをします。

ところでインデントの仕方で一般的な方法は

タブキーを押すことです。スペースで字下げをしてもいいです。

Tabと書いてあるキーです。

こちらのほうが楽だと思うので、使ってみてください。

 

さて、長くなりましたし次で今回は終えましょう。

もう一度画像を御覧ください。

f:id:tiroru17:20170521234847p:plain

もう書いてあることは分かると思います。

 

さて実際にこれを表示してみましょう。

まずあなたの書いたHTMLを保存します。

ファイルから保存しましょう。

 

f:id:tiroru17:20170522024319p:plain

ファイル名はindex.htmlとして置きます。

これはサイトを作る上でもっとも基本となる名称ですが、

ここで重要なのは、.(ドット)htmlの部分です。

ドットは小さいので大きく表示しています。

この.htmlは拡張子と呼ばれる部分ですが、

この部分は必ずhtmlにしなければいけません。

 

どこに保存しても結構です、開いてみましょう

 

f:id:tiroru17:20170522025406p:plain

こんな感じで表示できました。

上のタブにアマグラムと書いてあります。

これは<head>タグの中に書いたものですね。

 

そして、ウェブ上では表示できているかな。

と表示されています。

これは<body>の中に書いたものですね。

 

うまく表示できました。

きちんとあなたが書いていれば、あなたもうまく表示されているはずです。

 

今回はここまでにしましょう。

 

 

tiroru17proguram.hatenablog.com