プログラミング2日目:HTMLでのホームページ作成

プログラミング2日目です。

ソフトを使い始めてプログラミングをやっているなって感じになってきました。

　今回はHTMLを使ってホームページを作成していきます。ホームページは、「ホームページビルダー」というソフトを使って作ったぐらいであまり作ったことはないです。

　前回の記事はこちらです。

　最初は、ソフトのインストールからスタート。「Visual Studio Code」というソフトです。今日はこのソフトを使ってプログラミングをしていきます。今回も丁寧にソフトのインストール方法を教えてくれます。前回と違って今回はわからないことだらけなのでとても助かります。

f:id:Piln:20180214222343p:plain

　インストールが終わったらソフトの起動。かっこいいですね。さっそくHTMLを作成していきます。保存をしてコードを打ち始めます。指示されたとおりに新規ファイルを保存し、「html:5」と入力していきます。

f:id:Piln:20180214223047p:plain

　青い枠が表示されTabキーを押すと

f:id:Piln:20180214223217p:plain

　一度にコードが入力されます。テンプレートとして保存されているみたいで、いちいち入力しなくても大丈夫みたいです。

　言われたとおりにコードを編集し、google chromeで確認していきます。

f:id:Piln:20180214224238p:plain

　しっかりと表示されました。とてもシンプルですが、自分の手で書いたコードがホームページになるのはうれしいですね。

　次に練習課題をやります。今回の課題は「<br>」というタグをつかって俳句をホームページに表示させます。

f:id:Piln:20180214224634p:plain

　課題もすぐに終わりました。今のところは、わからないところも無くサクサクできるので楽しいです。これも教え方がいいからかもしれません。

　最後に発展課題として自分の好きなものを作ります。今回は私の好きな食べ物をHTMLファイルに書いていきます。

f:id:Piln:20180214225510p:plain

　覚えた「<br>」を使って作ってみました。やっぱり自分のものを作るのが一番楽しいですね。今回はタグを全く使っていないのでとてもシンプルですが、次はいろいろなタグを使って作るようなので、もう少しキレイなものになるかもしれません。楽しみです。

　余談ですが、Windows10のスナップ機能を使うと講座をみながらできるので、とてもやりやすいです。

f:id:Piln:20180214230310p:plain

　今回のタイピングはHTML５を選択してみました。

f:id:Piln:20180214231133p:plain

　前回よりも記録が落ちてる...。たまたま出来が悪かっただけだと信じたいですね。N予備校のプログラミング講座は章仕立てになっているので、章が終わるごとにタイピングの結果をグラフにしたいと思います。右肩上がりのグラフになっていればいいのですが...。

Pilnの記録帳