【HTML】まずはこれだけ！HTMLを書いてみよう Lv.1「まずは書いてみうよう」

今回からHTMLを実際に書いてみましょう！！

　わかりやすく解説します。

ペルソナ

• プログラミングをこれから勉強しようとしている方
• 初めてプログラミングを書こうと思っている方
• Webページを作ってみたい方

テキストエディタをまだ導入できていない方はこちらを参照してください

内容

HTMLがブラウザで表示される体験をしよう！
（今回は言語の詳細は省きます。）

Key Word

• 「index.html」
• タグ

目次

1.HTMLを書いてみよう！
2.まとめ

Contents

1.HTMLを書いてみよう！

前回まででテキストエディタを導入できたと思います。
ではVScodeを使って実際にHTMLを書いてみましょう！

まずはHTMlを書くのに必要なファイルを作っていきます！

①　VScodeを開き、新しくファイルを作る

導入したVScodeを開いてください。

開いたら、まずはcommnadキー + nを押してください。
すると新しくファイルが作成されたと思います。

上部のタブにUntitled-1というファイル名が出ていればOKです！

続いて、HTMLを作成するのに適切な拡張子を持ったファイル名に変更をします！

(拡張子の詳細はここでは省きますが、例えば画像の拡張子にはJPGやpngがあります。「ファイル名.JPG」の「JPG」の部分のことでこのファイルは「JPGという形式の画像ファイルですよ」と宣言しているものと思ってください。これがないと、ファイルを開こうと思ってもパソコンが、「このファイルはなんのファイルなの？」と混乱して開けなくなります。）

HTMLファイルの拡張子は基本的にhtmlです。
覚えやすいですね。

画面に戻っていただいて、先ほどのファイルを作成した状態で、commandキー + sを押してください。
するとドロップダウンでファイルを保存する場所、名前の変更・指定ができるボックスが出てきます。

今回は保存先を「デスクトップ」、ファイル名を「index.html」としましょう！

ファイル名がこのように変わったでしょうか？

②実際に書いてみる！

今回は言語の書き方の詳細は省きます。
まずは実際に書いてみたことがWeb上に表示されるんだということを体験してみましょう！！

ではエディタ上に

<h1>Hello World</h1>

と書いてみましょう！

こうですね！

何やら、「Hello World」という文字が

<h1></h1>

という文字に囲まれていますね。

これがタグと言われるもので文字の構造化をする役割を持っています。
構造化について知りたい方はまずはこれだけ！　HTMLを参考にしてください。

このタグは簡単にいうと見出しを作るタグになります。

ではブラウザ上に表示してみましょう！

③ブラウザで表示してみる！
ブラウザで表示する方法は色々ありますが、今回はドラッグして表示させましょう。

左がエディタ、右にGoogle Chromeを開いています。
エディタの「index.html」といタブをブラウザにドラッグ&ドロップしてみましょう。

うまくブラウザ上にHello Worldと表示されたでしょうか？

２.まとめ

今回のポイントは

HTMLを書いてブラウザに表示させるでした！

• HTMLというプログラミング言語がPCに認知される
• ブラウザを使用することで人間がみやすい形に変換してくれる

という体験ができたのではないでしょうか？

今回はHTMLの詳細ではなく、実際に書いたコードがブラウザ上で表示されるんだ
という体験をしてもらいました。

次回以降は、HTMLのタグの種類やルールを含めて詳しくお伝えしていきます！
これであなたもプログラマーとして一歩踏み出しましたね！！

一つずつ頑張っていきましょう！！

今回も最後までありがとうございました！！