HTMLを書いていこう！

2022年06月29日

WEBサイト制作

#HTML

こんにちは！
上毛印刷WEB制作担当のソーヤです。

今回は実際にHTMLを書いていきましょう！

HTMLファイルを作成しよう

ではまず「Visual Studio code」をダウンロードしましょう。
◆ダウンロード
https://azure.microsoft.com/ja-jp/products/visual-studio-code/

上記のURLに行くとダウンロードできます。
ダウンロードしましたら、インストールしましょう。

インストールしましたか？
うまくいきましたらVisual Studio codeを立ち上げてください。
そうしたらこんな黒い画面が立ち上がりましたか？

いい感じです！
ではその画面でcommand + nキーを押してください。（windowsの方はctrl + n）
そうするとUntitle-1というファイルが生成されたと思います。
このファイルを.htmlファイルにしましょう。

言語を選択という箇所をクリックしてください。

そうしたらこのようなメニューが出てきます。

メニュー内にあるHTML（html）をクリックしてください。

そうするとUntitled-1.htmlというファイルが生成されるので、
index.htmlという名前に変更してデスクトップに保存してください。
保存の仕方はcommond + sキーです。（windowsの方はctrl + s）
できましたら、
デスクトップにwebsiteというフォルダを作成してindex.htmlを格納してください。
これでHTMLを書く準備ができました！！

HTMLを書きましょう!

早速websiteフォルダにあるindex.htmlをVisual Studio codeで開いてみてください。
ドラッグ&ドロップすると開きます。

さあ、どうでしょうか。
何も書かれていませんね。

そうです。
これからこの記事を見ているあなたがHTMLを書いていくからです。
ではまず

<!DOCTYPE html>

と書いてください。

あ・・・コピペしちゃダメですよ。
ちゃんと自分の手でキーボードを打ってください。

ちなみにですが、コードを見て写すという行為をエンジニア達は
写経と呼んでいます。
写経すること自体に賛否ありますが、僕は最初のうちは目が慣れることも必要だと思うので全然賛成派です。

では書き終わったら次は

<html lang="ja"></html>

と書いてください。
書きましたら、

<html lang="ja">



</html>

こんな感じに改行してください。
そうしたら改行した中に

<head></head>

と書いてください。

一旦今のHTMLがどうなっているか確認しましょう。

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


</html>

どうですか？
ちゃんと書けていますか？

では、次にheadを改行してください。

<head>


</head>

そして改行した中に

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website</title>

これを書いてください。

また全体を確認しましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website</title>
</head>
</html>

どうですか？
ついていけてますか？

では次に一番下の一個手前/headの下に

<body></body>

と書いてください。
で改行してください。

<body>

</body>

いよいよ大詰めです・・・
改行させたbodyの中に

<h1>Hello World!</h1>

と書いてください。

今のHTMLはこうなっているはずです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website</title>
</head>
<body>
<h1>Hello world!</h1>
</body>
</html>

これでWEBサイトが作れました！
・・・は言い過ぎですが、
WEBサイトの卵が完成しました！
どんなものが出来上がっているかブラウザで確認しましょう！

今編集しているindex.htmlをお使いのブラウザにドラッグ&ドロップしてみてください。
デカデカと白地にHello world!と書かれていると思います。

大成功ですね！