完全初心者のプログラミング学習記録(2)Webページを作ってみる

こんにちは。

プログラミング完全初心者で40代中年のオッサンが、無謀にもこの年齢からプログラミングを学習してみようということで、そのプログラミング学習の復習を兼ねて備忘録的にブログで残していきたいと思います。

こんなにのんびりと学習してると、10年経っても身についてない気もしますが、、、

それはさておき、今回は簡単なWebページを作ってみたいと思います。

学習環境
  • MacBook Pro (15-inch, 2016)  mac OS:10.15
  • ブラウザ:Google Chrome
この記事を読んで得られる効果

Webページとはこのようにして作られるという事が理解できます。

プログラミング学習記録(2)Webページを作ってみる

今回のテーマは、VS  Codeを使って、簡単なWebページを作ってみたいと思います。

見出し、本文、画像、を表示させるだけの簡素なページです。

それでは順番にやっていきます。

VS Codeの設定はこちら↓↓
完全初心者のプログラミング学習記録(1)VS Codeの設定

1.VS CodeでWebページを書く準備をする

VS Codeの新規ウィンドウを起動します。

 

 

ページが2枚重なるマークを押すとサイドバーの表示・非表示を切り替えることが出来ます。

「Open Folder」をクリックして、Finderの画面を開きます。

 

 

今回、僕はあらかじめ「Programming」という練習用のフォルダを作っておきました。

その「Programming」フォルダを選択し、さらにその中に新規フォルダを作成します。

新規フォルダの名前は、「training」にしました。

作成したら、「開く」をクリック

 

 

そうすると、「TRAINING」という階層ができるので、右横の新規ファイル作成ボタンをクリック

この新規作成ファイルが、今から作成するWebページになります。

 

 

新規ファイル名の入力枠が出てくるので、「index.html」と入力して、キーボードのReturnを押します。

Webサイト構築時など、ページの名称は「index.html」に設定するのが一般的。

 

 

これで、ウィンドウの右側に、編集画面が出てきました。

これからここにページ内に表示させるテキストを書き込んでいきます。

 

 

一応、TRAININGフォルダの直下に作成した「Index.html」をFinderから確認してみます。

無事に、trainingフォルダ内に、index.htmlファイルが作成されています。

 

 

2.見出しを書く

見出しタグ <h1> を入力すると、</h1> が自動入力されます。

 

 

<h1>と</h1>の間に、「こんにちは」と入れてみます。

ちなみに、<h1> を開始タグ   </h1> を終了タグと呼びます。

<h1>こんにちは</h1> のように、文章をタグで囲うことをマークアップすると呼びます。

3.本文を書く

2行目に、<p> タグを書くと、これも同様に </p> が自動入力されます。

<p> と </p>の間に、「これからプログラミングを勉強します」と入力してみます。

この<p>タグは、段落に使うタグで、最もよく使われるタグの一つです。

4.Webページとして表示してみる

Webページとして表示してみる方法は簡単で、VS Codeで編集中のタブ(index.html)をブラウザ(Google Chrome)のタブにドラッグするだけ。

 

 

ちゃんと表示されました( ・∇・)

「こんにちは」が<h1>の見出しタグ部分、「これからプログラミングを勉強します」が<p>タグの本文部分ですね。

 

5.画像を入れる

次に画像を入れていこうと思います。

1.で作成した、trainingフォルダをFinderで開いて、その直下に「img」というフォルダを作成します。

そしてその「img」フォルダの中に、あらかじめ用意しておいた画像ファイル(programmer.png)を格納します。

 

 

続いて、VS Codeで編集していきます。

<img src=”img/programmer.png” width=”150″ height=”150″>

<イメージソースは、imgフォルダ内の「programmer.png」を指定、幅を150、高さを150にします> と書いてあげます。

なお、src、width、height など、タグの中に書き込むオプション的なものを、タグの属性と呼びます。

そして、width=”150″ height=”150″ など、前の属性と次の属性の間には、半角スペースを入れますが、width=”150″ など、属性の詳細を指定する場合はスペースは入れません。

 

 

先ほどのブラウザで見てみます。

更新ボタンを押すと、設定した画像が現れました。

では、今回はここまでにしようと思います。

最後までご覧いただきありがとうございましたm(_ _)m

 

参考サイト:ブログのテーマも購入させていただき、情報サイトとしても活用させていただいております。

初心者向けHTML入門:書き方の基本とタグの使い方

1 COMMENT

現在コメントは受け付けておりません。