💪

HTML -タグ,属性-

2022/04/25に公開約1,300字4件のコメント

初めに

今日、プログラミングスクールでHTMLを習ったので、復習も兼ねて記録していこうと思います!
勿論、Pythonも同時並行で勉強していきます。

ちなみに、HTMLVScodeで動かしています。
とても使いやすく、これからプログラムを書くときは大変お世話になりそうだと思いましたね。
(タグの終わりや候補を出してくれるので助かりました。)

HTMLとは

Webページの内容を書くために作られた言語
Webページは、様々な種類のHTMLタグによって構成される。

つまり、普段見ているWebページは、裏側を見るとHTMLを使って書かれているということです。

いつも何気なく閲覧していましたが、これからWebページを見るときの着眼点が変わりそうだと思いました。

HTMLの記述について

タグ

タグは、<タグ名></タグ名> のように記述する。
最初のタグを開始タグ、後のタグを終了タグと言う。

実際に、h1タグ(見出しを作るために必要なタグ) を使って書いてみます。

<h1>タグの説明</h1>

この場合、h1タグで囲まれたものが見出しとして表示されます!

また、開始タグと終了タグのペアのことを要素と言います。

さらに、要素の中に要素を含めることも可能で、その場合、中にある要素を子要素、外にある要素を親要素と言います。
(子要素を持つことができない要素を、空要素と呼びます。)

属性

それぞれの要素に付ける追加の情報を属性という。
属性は必ず開始タグに記述し、書き方は、属性名="属性の値" となる。

この場合、属性とダブルクォーテーションで囲われている属性の値はペアとなります!
タグのところでも学びましたが、HTMLではこのペアという考え方は大事そうですね。

実際に、h1タグclass属性(要素にクラス名を指定する属性)、imgタグ(画像を載せるために必要なタグ)にはsrc属性(画像などの場所を指定する属性)をそれぞれつけて書いてみます。

<h1 class="page-title">タイトル</h1>
<img src="sample.png">

属性の値に、ダブルクォーテーションをつけることを忘れないように注意ですね!

また、要素に対して、属性は複数つけることができます

<img class="page-image" src="sample.png">

しかし、同じ属性は1つの要素に対して1つまでなので、そこも注意が必要です。

おまけ

macでは「command⌘ + S」で状態を保存できるので、VSCodeでコードを一時的に保存する際にとても便利でした!

今日はあまり時間が取れず、習ったこともあまりアウトプットできなくて残念でしたが、時間がある時にコツコツ勉強を進めていこうと思います。
それでは!

Discussion

HTMLは一見複雑に見えて敬遠してましたが、
開始タグ 属性名="属性の値" 終了タグ
が基本なのですね。
タグを書くのが面倒に思いましたが、そこはVScodeが上手に手伝ってくれるのでいいですね!
自分も挑戦してみたいです。

コメントありがとうございます!
構造は基本的に決まっていて、あとはどう組み合わせるのかという感覚です!
htmlを勉強するなら一緒にcssを勉強するのをおすすめします。
htmlが骨ならcssは肉だと思っていて、両方あって初めて真価を発揮します!
お時間に余裕がございましたら、一緒に挑戦しましょう😊

cssも食わず嫌いで避けていたので、いつか挑戦したいですね。両方をうまく使いこなせばプレゼン資料を作れると目にしたことがあります。パワポがなくてもプレゼンできる環境は憧れますね。

cssができるだけで一気に見栄えが良くなるので、自分も頑張って勉強していきます!

ログインするとコメントできます