HTML入門 ~まずは基本を抑えよう~
こんにちは、ヨダナスです。
今日はWebエンジニアの登龍門?笑的なマークアップエンジニアに必須のスキル「HTML」についてです。
というわけで今日のトピックはこちら!
1.HTMLとは?
エンジニアを目指したことがない方には聞き馴染みが無いと思いますが、HTMLのソースは簡単に見ることができます。
どのサイトでも良いので、画面上で「右クリック→ソースの表示」をクリックしてみてください。
よくわからないけれども、英語と日本語が混ざったページが出てきたのでは無いでしょうか?
マークアップ言語と呼ばれる「HTML」を使用して、ホームページ上にあるテキストに意味を持たせているんですね。
2.HTMLはタグを使用する
いきなりなんのこっちゃだと思いますが、先ほどのソースをよくみてみてください。
一番わかりやすいのは<h1>や<h2>などだと思うのですが、見つけられますか?
そして、<h1>から始まった言葉は</h1>で締めくくられていませんか?
<h1></h1>は見出しタグで一番大きな見出しという意味なのですが、
<h1>ここから大見出しが始まるよ
</h1>ここまでが大見出しだよ
という意味を持ちます。
全てのタグにこの様に何かしらの意味があり、タグで囲むことによって囲んだ言葉に意味を持たせるのです。
タグの種類はたくさんあるので、全て覚える必要はありませんが、リファレンスを読めば基本的なことはわかるので、初めのうちはつど調べて行けば問題ないでしょう(僕が実際調べながらやってます笑)
リファレンスはこちら
https://developer.mozilla.org/ja/docs/Web/HTML
リファレンスは教科書的にも使用できるので、これからHTMLを学ぼうという方はぜひ一度目を通してみてください。
3.よくわからなくても、とりあえずオンライン学習をしてみよう
初めのうちは何をやってるかよくわからないかもしれませんが、とりあえず無料のオンライン学習サイトで勉強してみましょう。
HTMLの勉強なら、以前のブログで紹介しているオンライン学習サイトを使用すると良いと思います。
ponkotu-engineer.hatenablog.com
3.オンライン学習をなんとなくやり終えたら模写がおすすめ!
オンライン学習をなんとなーく終えたらなんどもやるのも良いのですが、次のステップに行った方が良いでしょう。
いきなり自分でサイト作成をするのは難しいので、とりあえずは自分がかっこいいと思うサイトのソースをみて最初から最後まで写してみましょう。
その際、わからないタグがあれば調べたり、ここでこういう風にしてるんだなということを感じましょう。
調べてもわからないことはとりあえずスキップ笑ここで完璧は無理です笑
周りにエンジニアの知り合いがいるのであれば聞いてしまっても良いかもしれませんね!
そんな感じでまずはコードを書くことに慣れていきましょう!
・・・ただHTMLだけじゃサイトは完成しないんですけどね😳
見た目をよく見せるためにCSSってのも必要になってきます笑
CSSの話はまた今度気が向いたときにでも!
ではまた明日!