見出し画像

【第３回】知識ゼロの大学生2人が擬似ウェブサイト作ってみた。

MAKE MORE

前回はテキストエディタをインストールして、HTMLを扱うための環境構築まで進んだ。

ということで、今回からやっとプログラミングらしい内容に入っていく。

今日はコードを書いてホームページの枠組みを作ることを目標にする。
ホームページにタイトルをつけるだけなので、この記事で紹介するコードを表示させてもホームページ自体は白紙になってしまうが…


HTML

まずは「今からHTMLのコードを書きます！」という宣言をしなければならない。パソコンも言葉にしてくれないとわからないみたい。

これをDOCTYPE宣言というらしい。HTMLのバージョンだとか色々あるみたいだが、とりあえず下のコードを一番上に書けば問題なさそうだ。

<!DOCTYPE html>

これをコピーしても、練習がてら自分で打ってみてもいいのでとりあえずHTMLで書くよ！とだけ叫んでおく。ちなみに大文字小文字の区別はないみたい。

タグ

HTMLの最大の特徴は、なんでもかんでも「タグ」で挟むことである。
ページのタイトルも、表示する文章も、コード全体でさえも挟みまくる。

基本的に開始タグは<〇〇>、終了タグは</〇〇>である。終了タグがない場合もあるが、それは次回以降出てきたら触れる。
Visual Studio Codeを使っていたら開始タグを入力すれば自動的に終了タグも書いてくれるので心配いらないが、「/（スラッシュ）」を入れ忘れると機能しないので注意！

具体的なタグを下で紹介する。

HTMLタグ

まずは基本中の基本。最初から最後までHTMLで書くのだから、最初から最後まで全部HTMLタグで挟む。（DOCTYPE宣言は外に出しておく。）

ついでにこのHTMLは日本語で書かれているよ、というのも宣言しておく。
方法としては、HTMLの開始タグの中に「lang="ja"」と書く。
言語コードは英語なら「en」、中国語なら「zh」などと決まっている。

HTMLのタグでは、langは「language」、jaは「Japanese」、enは「English」、zhは「Zhongguo（中国）」というようにたびたび略語が出てくるので覚えやすそうだ。

<!DOCTYPE html>
<html　lang="ja">

</html>

headタグ

headタグの中に書いた文字はページ上には表示されないが、ブラウザや検索エンジンに指示を出す役割がある。

headタグの中に書くべきコードはいくつかあるが、今回は文字コードとtitleタグだけにとどめておく。

文字コード

とはいえ私はまだ文字コードは、「文字や記号を表示させるために一つ一つ識別番号をつけたもの」というくらいしか理解していない。
HTML5では「UTF-8」が推奨されているようなので、これを指定しておく。

これがないと文字化けする可能性があるのでheadの開始タグのすぐ後に書いておく。

<head>
<meta charset="UTF-8">
</head>

headタグの中に「<meta charset="UTF-8"> 」と書けば指定できる。
metaとはブラウザや検索エンジンに指示を出すタグで、charsetは文字コードを指定する。

titleタグ

ページタイトルは、ホームページの一番上に表示される文字ではない。
Googleなどの検索ページで表示されたり、パソコンの画面上部のタブに表示されたりする。

<title>
<!-- お好きなタイトル -->
</title>

ちなみに<!-- -->で挟んだ文字は「コメントアウト」といってコードに全く影響しないので、メモなどに使える。これをコピーするなら、2行目はまるまる消してください。タイトル書いたつもりがただのメモに成り下がります。

このシリーズでは「MAKE MORE」というタイトルのホームページを作っていくので

<title>MAKE MORE</title>

と書いてみた。
ここに書いた文字がページのタイトルになる。

ここまで書けたらパソコンにファイルを保存する。
どんな名前をつけてもいいが、末尾を「.html」にするのを忘れずに！しつこいくらい「これはHTMLファイルだ」とパソコンに教えてあげる。

まとめ

今回紹介したタグを全部書くと

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>MAKE MORE</title>
</head>

となる。
これは日本語でUTF-8という文字コードで書かれたMAKE MOREというタイトルのHTMLファイル、ということになる。

保存したファイルをブラウザで開くと

アイコンどうやって設定するんだろ。

このようなタブができるはずだ。

今回はここまでできていれば完璧なので、中身を作っていく準備ができた。


とんでもない牛歩で申し訳ないですが、ゆっくり更新していくのでぜひ次回も読んでいただけると嬉しいです。

この記事が気に入ったらサポートをしてみませんか？