【初心者】htmlを最速で表示させる。シンプルかつ具体的な手順。

プログラミング

HTMLを体験してみたい。

HTMLの勉強を始めたから、自分でも何か作ってみたい、、

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

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

ここまでいきます。この記事の手順で、HTMLの学習を完全スタートできます!

ややこしい事はいたしません!軽い気持ちでついてきてください!

今回は私がサポートします!頑張りましょう!

手順① エディタのインストール

HTMLを、始めるには、テキストエディタが必要になります。
以下の参考記事に、おすすめのエディタである『Visual Studio Code』のインストール方法を載せています。まだの方はこちらからインストールしてきてください!

【初心者】プログラミング学習を始めるのに必要なアプリはこれだけ!
プログラミング学習を始めたいけど、どんなアプリが必要なの?プログラミングって難しいアプリが必要そう、、こういった方に向けての記事です。結論からいうと、プログラミング学習を始めるのに必要なものは、『テキストエディタ』...

テキストエディタは、HTML(プログラム)を書き込むノートみたいなものです!
以下に『Visual Studio Code』のすごさをざっと紹介します!

  • 完全無料
  • コードの自動補完がある
  • ファイルやフォルダの管理が簡単
  • 軽量でサクサク動く

良くわからないけど、とにかくすごい事はわかった!
『Visual Studio Code』でHTMLを始めるよ!

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

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

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

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

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

ファイル名は 
『index.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></h1>』の中に文字を入れています。
“h1″は見出しを表します。
それでは実際にみてみましょうか!

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

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

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

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

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

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

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

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

もう、HTMLの学習は始まっています

ここまで、HTMLの学習スタートをまとめました。内容をまとめると、

  • 『html:5』と入力し、htmlの準備コードを整える
  • HTMLは、タブ<>で囲むことにより、コードを形成する
  • タブは様々な種類があり、使い分けることにより、WEBサイトを作れる

こんな感じです。これだけ理解できれば、十分HTMLコーダーの仲間入りです。普通の人は知らないですからね。

あとは、いろんなタブを覚えたり、デザインを整えるCSS言語の勉強が必要になりますね。

そこで次回は、CSS言語の学習準備を整えましょう!

【初心者】CSSって 何?でも大丈夫! CSSのやり方をシンプルに解説。
CSSファイルの用意CSSの記述ブラウザでの確認本記事では、このあたりに触れていきます。なお、この記事では、↓でつくったHTMLを使います。まだの方は、以下記事からHTMLファイルの準備をしてくださ...

それではまた次回!

コメント