【初心者】Javascript学習を始めるために、HTMLを用意しよう!

プログラミング

Javascriptの勉強をスタートしたい!

cssの勉強をスタートしたい!

こんな方に向けての記事です。この記事では、

  • HTMLファイルの作成
  • HTMLのコード入力・説明
  • ブラウザで成果物の確認

HTMLファイルとは?

JTMLとは簡単に言うと、Webページの見た目をつくる言語です。

JavascriptにHTMLが必要な理由

Javascriptの学習を始めたい方も、まずはHTMLを作る必要があります。

なぜなら、JavaScriptはWebページに動的な操作を加えるものだからです。

見た目をつくるHTMLをまず、作らないといけません

本記事で、Javascript学習の準備が全て終わるので、頑張りましょう!

手順① フォルダ・ファイルの作成 

まずは、PCの好きな場所に、フォルダを作成してください

次に、VisualStudioCode(以下VSC)を開いて、「フォルダを開く」を選択してください!

そして、先ほど作ったフォルダを選択してください。

すると、開いているエディターに作成フォルダが表示されます。
そこにある、「新しいファイル」を選択してください

ファイル名は 
『index.html』
として保存します。

『〜.html』とすると、簡単にhtmlファイルが作れます!

すると、画面に、index.htmlの編集画面が開かれます。
ファイルにアイコンが表示されているのは、『拡張機能』を入れているからです。
方法は後に紹介していきますので、今は気になさらずに!

作成フォルダの中身をみてください。
同じようにindex.htmlが作成されているはずです。
つまり、このファイルをVSCで編集しているというだけの話です!

手順③ HTMLコード作成 (チートを使います)

さて、準備は整いました。ここからVSCの本気をお見せします。

えっ、今まで十分本気だったはずじゃ、、

ここからです!
まずは、index.htmlに『html:5』と入力してください。
すると下に予測変換みたいなのが出ると思います。

この状態で Tabキーを押してみてください。
すると一瞬で↓のようになります

どひゃぁー!!なんだこれは!一瞬で呪文が出てきたぞ。

はい、実はこれ、htmlで最低限必要なコードです。
それを一瞬で用意してくれているのです!

ここで出てくるタブ( <>で囲われている物 )は覚えなくて構いません。
HTMLに最低限必要なものだと理解だけしておいてください。

<head>と</head>に挟まれている部分は、サイトの情報を表しています。例えば<tilte>と</title>の間にはサイトタイトルが入ります。                            
 

さて、では↓画像の通り、
『<h1>イージーな人生を歩みたい!</h1>』
と、指定の位置に入れてください。

<body>と</body>の間にはサイトに表示したい内容を書き込みます。
HTMLではこのように <>と</>で囲むことにより、タブに意味を持たせます。

“h1″は見出しを表します。
それでは実際にみてみましょうか!

手順④ 実際にブラウザで確認する

まず、ファイルを保存してください。
MACの方は『⌘S』、Windowsの方は『Ctrl+S』です。
↓画像の●がなくなれば保存できています。

保存ができたら、『index.html』をブラウザで開きましょう。
私は、GoogleChromeで開きます。

これが出れば成功です。
せっかくなので、もう一つ追加してみましょう。

↓画像と同じ位置に
『<p>知識をつけて、楽に生きる</p>』と入れてください。

それでは、同じ手順で、保存→ブラウザ確認です!

さっきよりも小さい文章が表示されました!
<p>は段落を表しています。
どうでしょう?

まだ完全には理解できていないけど、なんとなくはわかったよ!

HTMLの知識はさておき、Javasciptの学習を始めよう!

さて、これでJavascriptの学習準備が整いました。以下の記事へ進みましょう!!

【初心者】JavaScriptの使い方。0からプログラムを動かすまで解説
JavaScriptとはJavaScriptのコードサンプルJavaScriptのブラウザ確認ここら辺について触れていきます。JavaScriptで、メッセージを表示させるまでを解説していきます。この記事に...

プログラミング学習をしたいなら、Javascriptを学ぶべきです。

HTMLは厳密にはプログラミング言語ではないので一旦無視です。

HTMLは、JavaScript学習の準備にすぎませんので、学習対象ではありません。

でもまだHTMLのことよくわかってないよ。。

それでもJavascriptの学習を始めてください。

HTMLの知識は後からすぐについてきます。

  • プログラミングを基礎から学んでみたい
  • プログラミングを体験したい
  • プログラミングスキルを高めたい

それなら、HTMLの学習へ進むのではなく、是非Javascriptの学習を始めましょう!

【初心者】JavaScriptの使い方。0からプログラムを動かすまで解説
JavaScriptとはJavaScriptのコードサンプルJavaScriptのブラウザ確認ここら辺について触れていきます。JavaScriptで、メッセージを表示させるまでを解説していきます。この記事に...

↑の記事では、Javascriptを動かすまで行います!ではっ!

コメント