LoginSignup
0
0

More than 3 years have passed since last update.

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

Last updated at Posted at 2019-11-11

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

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

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

ペルソナ

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

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

内容

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

Key Word

  • 「index.html」
  • タグ

目次

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

Contents

1.HTMLを書いてみよう!

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

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

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

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

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

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

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

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

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

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

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

ファイル名がこのように変わったでしょうか?
Image from Gyazo

実際に書いてみる!

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

ではエディタ上に

index.html
<h1>Hello World</h1>

と書いてみましょう!

Image from Gyazo
こうですね!

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

index.html
<h1></h1>

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

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

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

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

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

Image from Gyazo

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

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

2.まとめ

今回のポイントは

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

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

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

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

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

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

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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0