HTMLの学習を開始！初心者でも割と理解しやすい！

本サイトの一部にはプロモーションを含みます。

Webプログラミングの学習を決意し、早速HTMLの学習からスタートしました。

どうも！非IT系社会人ことたっつーです！！

Web製作に必要なプログラミング言語はいくつかありますが、HTMLは最も基本になる部分を担っています。

wordpressでブログ製作をしているから、というわけでもないのですが、HTMLは比較的理解しやすい言語だと感じています。

学習はkindle unlimitedで見つけた参考書

今回のプログラミング学習にあたって使用している教材はこちらになります。

リンク

私はサブスク貧乏のためもちろんamazon kindle unlimitedにも加入していますが、結構色んなジャンルの本が読み放題なんですよね。当然のことながらプログラミング学習者向けの書籍も多数あります。

そんな中でもこの教材はWEBプログラミングに必要な言語が一冊でまるっとまとまっているということ。私のような初心者が導入に使う分にはぴったりなのではないでしょうか。

プログラミング学習に欠かせないのがテキストエディタ。参考書を読むだけでは永遠に身につかないので、自分の手を動かしてコードを記述していかなきゃね。

Windowsに元々存在している「メモ帳」でも編集は可能ですが、せっかくならそれっぽいソフトを使いたいということで調べてみると、プログラミングのコード記述に特化したテキストエディタで無料のソフトはたくさんあるみたいです。

そんな中でも私が選んだのはMicrosoftが無料提供しているVisual Studio Codeというエディタです。何よりもMicrosoft提供という安心感が決め手。

実際の画面はこんな感じ。ね、めちゃくちゃそれっぽくてテンション上がりません？

HTMLは、「タグ」というもので、<html>とか<body>とかで文章を挟んで、テキストに意味づけをしていく、というのが基本になります。

これは感覚を掴んでしまえば難しくありません。とにかく色んなカッコで挟んでいけばいいので、プログラミング的な概念もそんなにないような。

私の備忘録として、学習したHTMLのタグ一覧を記録しておきます。

タグ	意味
<html></html>	最初と最後につける
<head></head>	webブラウザにページの情報を伝えるためのもの。画面には表示されない
<title></title>	webページのタイトル
<body></body>	webページに表示される内容
<h1></h1>	見出し。h6まである
<p></p>	段落
<br>	改行
<img src=”ファイル名”>	画像
<a href=”リンク先アドレス”></a>	ハイパーリンク
<table> 　<tr> 　<th>又は<td> 　</tr> 　: </table>	テーブル
<form></form>	送信フォーム
<input type=”text” size=”文字数”>	普通の入力フィールド
<input type=”password” size=”文字数”>	パスワードの入力フィールド
<textarea cols=”横幅” rows=”行数”></textarea>	複数行入力テキストエリア
<input type=”checkbox”>	チェックボックス
<input type=”radio”>	ラジオボタン
<label for”関連付けるタグのID”></label>	チェックボックスやラジオボタンの横に表示するテキスト