WEBページの作り方－HTMLの書き方－
皆さん、こんにちは🌞
もう6月も下旬となり、梅雨明けまでもう少し！
じめじめして、スッキリしない天気が続いていますが
気持ちはスッキリ、体調管理をしながら過ごして
いきましょうね(*'ω'*)
前回は私の制作したWEBページのご紹介と
WEBページを制作するためにはテキストエディタ
というコードを書くツールをインストールする
ということをお話ししました！
始めてこの記事をご覧になる方・制作したWEBページを
ご覧になりたい方は下記URLより前回の記事をぜひ
見てみて下さいね！
(こんなWEBページが作れるのかと思って頂けると
思います(笑))
URL:WEBページを一緒に作ろう－1－ - nikusukixのブログ
さて、今回から本格的にWEBページを制作する上で
勉強していきましょう(^^)/
この記事で学べること！
- HTMLを使う時は
一番最初に<!DOCTYPE html>と言語宣言を
必ず行う(これをDOCTYPE宣言という)
-
言語宣言をした後は、<html>タグを使って
タグ内にコードを記述していく。
-
<html>タグ内：
コンピュータが理解する部分(<head>部分)と
人が見る部分(<body>部分)を分けてコードを
記述する。
目次
まずは文法を学んでいきましょう！
1.文法の勉強法
英語を勉強する時、文法を学んで使う練習をすることで
文法が身について、だんだんと文章を読んだり、
書いたり、話せるようになった思い出があること
でしょう！
これは、マークアップ言語を身につける上でも
同じです。
さあ、テキストエディタを開いて実際にコードを
入力しながら一緒に学んでいきましょう！
2.言語を使う宣言しよう
WEBサイトを制作する際は最初に使う言語の宣言を
しなければなりません。
HTMLという言語を用いてWEBサイトを作っていくので
まずはHTMLを使う宣言をします。
下記の手順に従って実際に作業をしてみましょう。
①『VSCode』を立ち上げ、上の『ファイル』
→『新規ファイル』の順でクリックする。
②使う言語を宣言する
WEBサイトを制作する際は最初に使う言語の宣言を
しなければなりません。
HTMLを使用するので、下記のように使う言語を
宣言しましょう！
上記のように
<!DOCTYPE html>と言語の宣言を行うことで
初めてコードを記述していくことが可能になります。
③デスクトップ上にHTMLファイルを保存する
フォルダを作成する
『デスクトップで右クリック』→『新規作成』
→『フォルダ』の順でHTMLファイルを保存する用の
フォルダを作成する。
フォルダ名はお好みですが、ここでは『ドキュメント』
とすることにしたいと思います。
④VSCodeでファイルに名前を付けて保存する
VSCodeで『ファイル』→『名前を付けて保存する』→
先ほど作成した『ドキュメント』フォルダを選択
→『common.html』と名前をつけて保存する。
※拡張子を.htmlとする事がポイントです！
3.<html>タグを使ってコードを記述をしていく
言語宣言をした後は、下記のように<html>タグを使って
タグ内にコードを記述していきます。
VSCodeでは<html>と入力すると、
自動で</html>と終了タグが入力されます。
そして、<html>と</html>の間で『Enterキ－』を
押して改行し、その中にコード書いていきます。
4.コンピュータが理解する部分と人間が見る部分を分けてコードを書く
WEBページではコンピュータが理解する
部分(<head>部分)と人が見る部分(<body>部分)を
分けてコードを記述するルールがあります。
<html>タグと同様に<head>、<body>と入力すると
自動で終了タグが入力されます。
そして、<html>タグと同様にタグの間で
『Enterキ－』を押して改行し、その中にコードを
書いていきます。
長い解説で疲れてしまいましたね(笑)
今回はここまでで終わりにしましょう(^_-)-☆
5.本日の文法まとめ
-
<!DOCTYPE html>と言語の宣言を行うことで
初めてコードを記述していくことが可能になる。
-
言語宣言をした後は、<html>タグを使って
タグ内にコードを記述していく。
-
<html>タグ内：
コンピュータが理解する部分(<head>部分)と
人が見る部分(<body>部分)を分けてコードを記述する。
次回は<head>、<body>タグ内の記述をしていこうと思います(^^♪
記事のご感想等頂けますと、今後の励みになりますので
お待ちしております！
応援宜しくお願いします↓
にほんブログ村
