真面目にWebプログラミングを教えることを考えてみた【HTML】

こんちゃっす。あいじっとです。
HTMLというか、Web開発に関するコーチングをする機会が増えてきたので真面目に考えてみようと思いました。

noteではざっくり、何を教えないといけないかを書き綴ってみます。
書きながら考えます。

HTMLってなんなの？

Hyper Text Markup Languageの略称だったと思います。
マークアップ言語と言われるだけあって、一般的なプログラミング言語とは毛色の違う言語ですね。

役割としてはWebページの枠組みの部分です。
コンテンツを作る言語になります。
文章であったり、画像であったり、、、、、
多少は見た目を変えることができます。太字だったり、斜体だったり、見出しだったり。
ただ、様々な装飾をするには別の技術を使う必要が出てきますね。

どんな勉強をすればいいのか

私は、あれこれ覚えようとするより、自分が興味を持ったページを模写（？）してみたりするのが良いのかな？と。
覚えることはたくさんあるので、座学はしんどいと思います。

HTMLは「タグ」を打ちながら書いていくんですよね。
段落は

<p>内容</p>

箇条書きは

<ul>
　　<li>項目1</li>
　　<li>項目2</li>
　　<li>項目3</li>
</ul>

みたいな感じで、開始タグと終了タグの間にコンテンツを書いていく感じになりますが、このタグがたくさんあるんですよ。
なので、これを全部覚えるのはしんどいので、作りたいコンテンツに合わせて都度調べる感じで良いのかな？と。
数をこなしていれば自然と覚えるので、そうやって数をこなしてなんとなく覚えていきましょう、、、と。

それでも覚えておいた方がいいことくらいあるんじゃ？

とは言っても、いきなり入るのはきついと思うので、なんとなく知っておいた方がいいかなーってことをいくつか。

ブロック要素とインライン要素

段落を作るブロック要素と、行内のコンテンツになるインライン要素があります。
例えば、上で紹介した<p>タグですが、

<p>あいうえお</p><p>かきくけこ</p>

と書いても、Webページ上では2行で表示されます。
これは、pタグがブロック要素なのでpタグごとに段落が作られることによります。

改行とスペース

逆に、ソースコード上で改行してもWebページ上では改行されません。

<p>
　　あいうえお
　　かきくけこ
</p>

と書いても、Webページでは1行で表示されます。
変な話ですね。なので、それぞれの行をpタグで囲うか、<br>という改行を示すタグを書いて改行したりします。

絶対パスと相対パス

Webの勉強をすると「パス」という言葉が永遠に付き纏ってきます。
なので、パスについてはしっかりと理解しておいた方が良いかと。
絶対パスと相対パスを調べると、違いが出てくるので知っておくと良いと思います。

絶対パスはスタート地点からの道順で、相対パスは現在の位置からの道順です。
何も伝わらないと思いますが、ちょっと調べると納得がいくかと思います。

最後に

私はHTMLを書くのが非常に好きですし、他人のソースを見るのがとても楽しい言語だと思っています。
完成したページは一緒なのに、コードが全然違うみたいなことが結構あるので。

ただ、できること、かけることが多くて覚えるのは大変だと思います。
ひたすら手を動かして、慣れていくことが大事なのかな。と

なんだかんだ長くなっちゃいましたね。