プログラミング

Webprogram

 プログラミングで頭の体操

プログラミングはZ80で2進数のアセンブラから始めて、就職して最初に買ったパソコンがシャープのMZ-2000、そのあとは数年ごとにパソコンは買い換えましたが、仕事には使っても、当時のプログラミング環境は今と比べ物にならないくらい大変なものでした。

自由な時間ができたので、プログラムをいちから再確認しようと始めてみれば??現在はいろんな言語があることに圧倒され、半年くらいプログラミング学習で有名なドットインストールの教材を見まくって選んだのがWebプログラムです。

このWebプログラムの魅力は、ブラウザで確認できるので、覚えた内容がすぐに実践できること。

瀬戸市の紹介ページをHTMLで書いてみると。

イメージですが、数行でページが完成します。

プログラムはエックスサーバーに置いて、ファイル転送ソフトはCyberduckを使用しています。WordPressのテーマはやるなら高機能がいいのでAFFINGERを選択しました。

手始めにはやっぱりHTMLの記述からですが。パソコンの画面に直線を初めて引けたときの感動を忘れない世代にはすべてが別世界のようです。

画面に文字を表示するって、今は当たり前のようにできます。

たとえば。こんにちは! ってメモ帳とかに打ち込み、名前の拡張子を .html で保存すれば。そのファイルをクリックするだけで、Webブラウザで こんにちは! CSSで形も色も自由に表示できてしまいます。自分はこれでやる気がわいてきました!

基本的なタグを使った表示です。

実行したコード

<h1>Heading One 見出し1</h1><h2>Heading Two 見出し2</h2>

<h3>Heading Three 見出し3</h3>

<h4>Heading Four 見出し4</h4>

<h5>Heading Five 見出し5</h5>

<h6>Heading six 見出し6</h6>

実行したコード

 <p> pragraphは段落という意味、この中に記事を書き込めば良い<br>
   適当な文字数で改行の&lt;br&gt;を入れて改行すると見やすい。<br>
  今日の出来事や、思った事。なんでも良いので書き留めることが重要<br>
   記憶は書き留めることによって、<strong>目からも吸収する</strong>ことができる<br>
  例えば新型肺炎に対して、学校を<em>3</em>月2日から春休みまで休校にする<br>
   びっくりする内容ではあるが、<em>本当に実行される</em>、まるで映画のようだ。
 </p>

実行したコード

  <p>アンオーダーリスト</p>
  <ul>
     <li>List Item 1</li>
     <li>List Item 2</li>
     <li>List Item 3</li>
     <li>List Item 4</li>
   </ul>
   <p>オーダーリスト</p>
   <ol>
     <li>List Item 1</li>
     <li>List Item 2</li>
     <li>List Item 3</li>
     <li>List Item 4</li>
   </ol>

実行したコード

 <table>
     <thead>
       <tr>
         <th>Name</th>
         <th>Email</th>
         <th>Age</th>
       </tr>
     </thead>
     <tbody>
       <tr>
         <td>yasubay</td>
         <td>mail@kokoroyasuku.com</td>
         <td>18</td>
       </tr>
       <tr>
         <td>makoro</td>
         <td>mail.makoro@kokoroyasuku.com</td>
         <td>8</td>
       </tr>
       <tr>
         <td>nanai</td>
         <td>mail.nanai@kokoroyasuku.com</td>
         <td>6</td>
       </tr>
     </tbody>
   </table>

少し興味が出てきたのでHTMLの基礎から学んでみようと思います。

上の構成が一般的なサイトの配置みたいなので、HTMLタグを
使って書いていこうと思います。

2020年2月16日