Pilnの記録帳

ベース、プログラミングのこと、思ったことを書きます。

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

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

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

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

 

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

piln.hatenablog.com

 

マイルール

 

  • 一日2講座以上やらない
        一日に何講座もやると分かった気になるが、実際には頭に入ってないことが多いため。
  • 最低でも一週間以内に次の講座をやる
        一週間以上あくとやる気が無くなるため。
  • 動画学習は基本的に使わない
        2時間も集中できない。2時間かかると考えただけでやる気が無くなるため。

 

 最初は、ソフトのインストールからスタート。「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

 

 

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

f:id:Piln:20180214231133p:plain

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

 

 今日覚えたこと

  • HTML:5と入力するとコードが入力される。(事前に名前をつけて保存)
  • <html lang=en> を <html lang="ja">に変更
  • <title> は ブラウザタブのタイトル、<body>が中の本文
  • <br> は 改行

プログラミング1日目:Consoleでの計算

今日からN予備校の「プログラミング入門 Webアプリ」の講座を始めることにした。

プログラミングは興味があったが、難しそうで今まで手をつけてこなかった。

一日一講座を目標に頑張っていこうと思う。

 

 マイルール

 

  • 一日2講座以上やらない
        一日に何講座もやると分かった気になるが、実際には頭に入ってないことが多いため。
  • 最低でも一週間以内に次の講座をやる
        一週間以上あくとやる気が無くなるため。
  • 動画学習は基本的に使わない
        2時間も集中できない。2時間かかると考えただけでやる気が無くなるため。

 初めにGoogle Chromeのインストール方法を説明してくれた。私には必要なかったが、とても親切だ。そしてGoogle ChromeのConsoleという機能を使って計算をした。

 この機能で入力するプログラミング言語JavaScriptという言語でWEBページを作るときによく使う言語みたいだ。説明を見て早速プログラミングの体験をする。

 今回は「alert」という関数をつかった。使い方は「alert(3+3)」という感じだ。そうすると下のようにダイアログ計算結果が出てくる。alert('こんにちは')のように打つとダイアログに「こんにちは」と出て来る。

f:id:Piln:20180212234941p:plain

   いろいろと計算をしてみる。足し算は「+」引き算は「-」掛け算は「*」割り算は「/」とWordと計算の仕方は同じみたいだ。ところが累乗をしようと「^」を使うとなぜか引き算になってしまう。調べたところ累乗は「**」と入力するようだ。試してみる。しっかりと計算される。当たり前なのだが、すごく嬉しい。

 

 問題をやって今日の講座は終了。練習問題も何も困ることなくすんなり解けた。発展問題として自分で好きな計算をしてみようとあるので、覚えたものをつかってみる。

 

   「alert(598+321-87*12/18+8**5)」と入力。数字は適当だ。すぐに答えが出る。実際に電卓で計算してみるとちゃんと合っている。これも当たり前なのだが、やはり嬉しい。

 

 とりあえず今日はここまで。今のところはプログラミングをしているという感じはないが、とても楽しい。映画に出てくるハッカーのような気分だ。しかし、「()」や「'」がすぐに打てない。タッチタイピングはある程度できると思っていたのだが数字が苦手のようだ。タッチタイピングもついでに練習しようと思う。

 

ptyping.com

 こちらのサイトでJavaScriptを選択してタイピング開始。結果はこちら。

f:id:Piln:20180213002117p:plain

 うーん。予想以上に遅い...。やはり記号が難しい。とりあえずタイピングは講座をやるごとに練習することに決めた。どのくらい早くなるか楽しみである。

 今日覚えたこと

  • alert()でダイアログがでる。
  • 「+」足し算、「-」引き算、「*」掛け算、「/」割り算、「**」累乗
  • 文字を出力するときは「''」で囲む。
 

すごいヤツ

今日は友達と夕飯を食べに行った。

食べに行くといっても近所のファミレスに行くだけなのだが、久しぶりに話したくなって誘った。

その友達は中学校から漫画を貸し合う仲で、今もよく遊んでいる。

とても不思議なヤツでとにかくアクティブだ。

休日になるとでかいホットケーキを作ろうとか、神輿を担ごうなどと誘ってくる。

普段インドアで誘われない限り家から出ない自分にいろいろな経験をさせてくれる。

 

そんな普段から元気に振る舞う友達だが、意外と心配性であることを私は知っている。

女の子を映画に誘って断られたこととかそういうことを心配そうに話すのである。

あまり彼は普段人に話さず、自分でいろいろ決めてしまうタイプなのでたまに相談されると無性に嬉しくなる。

今日はアメリカに行こうと考えているということを話してくれた。

特に理由はないが、行ってみたいということだった。

私も是非行ってみたいと思った。

なんとなく一度は経験したいものだ。

 

私はやりたいと思っていても自分ではやらない人間なので、この友達のように思い立ったらすぐ行動できるようになりたい。

この友達とずっと遊んでいれば彼みたいになれるだろうか。

 

なんとなく始めてみました。

こんにちは、Pilnです。

今まで日記をつけたことがなかったので、始めてみました。

書く内容はベースと思ったことがメインになりそうです。

プログラミングはこれから勉強を始めるところです。

深く考えないで気楽にやっていこうと思います。