超初心者プログラミング講座 第４回 ～HTMLも見てみよう！～
はじめに
前回、少しPHPのコードに触れるような形でechoして文章の出力などを投稿いたしました。
そこで、今回は一旦、HTMLの基本的な書き方というものを少し紹介していこうと思います。
そして、前回のechoの動作をHTML側でやってみるというやり方をしていきましょう！
１．HTMLとは？
正式な名称は
H＝Hyper（ハイパー）
T＝Text（テキスト）
M＝Markup（マークアップ）
L＝Language（ランゲージ）
という長い名前の頭文字をとって、HTMLと呼ばれています。
基本的にWEBブラウザで見ているページのほとんどが、実はこのHTMLで作られていると思っても間違いではないでしょう。
Yahooにしてもなんにしても、裏側を見ればHTMLを使われています。
２．WEBページの裏側を見てみよう！
ではここで、お好きなWEBページを開いてみてください。
なるべくシンプルなのがいいんですが、まぁとりあえずYahoo！なりなんなりなんでもいいです。
私はGoogleのChromeを使っていますので、そのサイトが表示されたら、Windowsの方はCtrl＋Uを押すと、別タグでもう、わけわかんないのがズラズラ出てくると思います。
これがソースコードです。
このソースコードはPHPのコードは基本的には見れません。
HTMLやCSS、JavaScriptといった、フロントエンドと呼ばれる、実際に見える部分の言語のコードが見えます。
PHPはバックエンド、サーバーサイドとかって呼ばれて、サーバー側でなんかしてるイメージです。
今はですね。こうやってコードが見えるというのを覚えておいてください。
３．実際に書いてみよう！
<?php
echo "ここはPHPのコードを書く場所だよ";
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>ここはHTMLを書く場所だよ</p>
</body>
</html>とりあえずこのように書いてみました。
前回まではPHPコードのみだったので、PHPの終了タグはいれていませんでしたが、今回はHTMLコードもあるので、終了タグを入れています。
４．コードの説明
ではざっと見ていきましょう。
HTMLの場合<__>で囲まれているのを「タグ」と呼ばれます。
そして、このタグでマークアップしていくというのがHTMLの書き方になるんですね。
①<!DOCTYPE html>
ドキュメントタイプを宣言する。これじゃわかんないですね。。。
ざっくり説明すると、同じように書いてはいるけど、実は書き方のVersionみたいのがあるんです。
今回のこの書き方の場合は、【HTML5】で書きますよっていう宣言になっています。
５なので当然HTML４とかあり、このタグであぁこれはHTML５なんだなってのがわかるようになっています。
ちなみに、Yahoo!Japanはこれです。
②<html lang="ja"></html>
①は宣言だけなので閉じタグはありません。
で、このタグですが、HTML文書であることを示すものになります。
えっ？上ので宣言したやん！ってなりますよねｗｗ
上のをとりあえず忘れていただいて、HTMLの開始タグは<html>なんだと覚えてください。
そして、HTMLは基本的にこの<html>~</html>までの間に書きます。
①HTMLのVersionはこれですよ
②ここからHTMLのコード使ってHTML文書書いていきますよ
こういうイメージです。
そして、見ていただくとわかりますしこの後説明しますが、基本的に<html>~</html>の中には<head>~</head>と<body>~</body>を順番に１つずつ、または、<head>~</head>と<frameset>~</frameset>を順番に１つずつのいずれかしか配置できません。
親要素、子要素とか入れ子とかっていう言葉がありますが、、、、
<html>という親要素の中には子要素としては上の<heade><body>しか入れれませんが、ここで勘違いをしてはいけません。
今回のコードでも<head>の中や<body>の中には何かしらあります。
そう、<html>から見れば<head>は子要素でも、その中のタグから見れば、<head>は親要素になるんです。
孫要素とかは、、、無いですｗｗ
今回<htmlの後にlang="ja"というのがついていますね。
なんとなく察しはつくと思いますが、lang=languageの略で、jaはjapaneseということですね。
言語は日本です！ってことです。
③<head>~</head>
では次にhead要素について説明しましょう。
HTMLというのは、基本的な枠としてHTMLの中にHEADとBODYという３種類のタグで構造を定義しています。
上のHTMLはここからここまでがHTMLですよという意味ですが、HEADに関しては、その文書のタイトルだったり、情報、検索用のキーワードとか、利用していくスタイルシート（CSS）とか、ようは情報を書いていくスペースと言いましょうか。
検索した時に、出てくる紹介文みたいのも、ここに書きます。
この情報に関しては<title>以外は基本的にソースコードを見ない限り表示はされません。
だからといって個人情報とかは載せちゃだめですよ。ソースコードを見ればわかるのでｗｗｗ
ただし、<title>だけは表示されます。タイトルということで、ブラウザなどを開くと上のタブにサイトの名前なり出てると思いますが、ようはそこです。
今回はDocumentとしているので、ブラウザで更新して確認すると、上がDocumentになってると思います。
そして、<meta>メタタグと呼ばれるものを一つ書いています。
今回のは文字コードの指定になります。
文書の文字コードは指定しておくと、文字化け防止などがあるので、基本的に必ず私は書いています。
その他情報と言いましたが、この<meta>タグを使って、キーワードの指定や、検索ロボットの制御などなど、、、、
結構なことができるというか設定できます。
全部するってのはさすがになんですが、いろいろ見てみるのも良いと思いますよ！
④<body>~</body>
では次に<body>タグですね。
文書の本体というか、実際にブラウザに表示させるスペースです。
実はこのnoteにしても今見ているこの場所！そう！この場所はbodyの中なんですよ♪
この中には結構いろんなことを書くことになるので、ここで今は説明は致しませんが、今回の<p>タグだけ説明しておきますね♪
⑤<p>~</p>
pというのはパラグラフのPなんですが、日本語でいうと、ひとつの段落という意味になります。
一行を<p>とするとかいろいろあるんですが、実際の表示は同じでも使っているタグが違うってことはよくあります。
HTMLの場合はそのタグが正しくマークアップされていれば、良いHTMLと評価され、適当だったり、使い方が正しくないと悪いHTMLと評価されることもあります。
５．ブラウザで表示してみよう！
とりあえず確認してみましょう。
プログラムは上から順にでしたね。
最初にPHPスペースのechoによる出力があり、HTMLスペースのBODY内のPタグの中の文字が出力されていますね。
HTML側ですが、実は、Pタグ無くても表示されます。見てみてください＾＾
６．PHPのechoをHTMLでしてみよう！
では、参考がてら、PHPのechoをHTML内でしてみましょう。
<?php
echo "ここはPHPのコードを書く場所だよ";
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>ここはHTMLを書く場所だよ</p>
<?php echo "これはHTMLの中でPHPスペース作って書いたよ"; ?>
</body>
</html>PHPスペースの書き方はあくまでもPHPなので、そのように書いてください。
セミコロンも必要です。
こういう感じで、できるんですね～＾＾￥
おわりに
今回はHTML側の大枠の説明をさせていただきました。
この大枠は覚えるしかない部分でもあるので、覚えておくと良いかと思います。
HTML内のPHPっていう部分はとりあえずこうやって開始タグと終了タグを使ってスペースをわけるというかやってるんですよっていうイメージが掴めればOKと思います。
本当は変数などの投稿予定でしたが、それは次回にしますね。
変数などにしてもHTML側に反映させるというのが基本です。
PHPだけでechoしながら表示出力ってのは無いですね。
PHPで取得したり整形したデータをHTMLで表示するっていう流れが基本ではあるので、今回とりあえずこういう部分を説明してみました！
では！次回！！
よろしければ、サポートしていただくと、こんな記事でもより気を引き締めてしっかりとした内容をかけるようにとモチベーションが上がります！ いろいろ楽しいことも書いていこうと思うので、ぜひ！サポートしてください！