プログラミング自主学習 DAY86 HTML
Extension
VSCodeには、Chromeのように応用アプリケーションを設置できる機能があります。
そのような機能をExtensionといいます。
今日はLive Server(Go Live), Community Material Theme, Community Material Themeなどをインストールしてみました。
Eclipseのように、ただのメモ帳ではなく、テーマを設定したり、ファイルのフォーマットによりアイコンを作ってくれてファイルが多い場合もわかりやすいです。
以前から、VSCodeは使った経験はありますが、Extensionは使ったことがなかったので、とても便利でした。便利なツールを使いこなうことが効率性にもいいと思いますので、ぜひ使ってみましょう！
HTML
基礎知識
<a href="http://google.com" target="_blank">
Go to google.com
</a>
tag : <tag>を付けて、**contentをmark-up(構造化)**します。
tagがなければ、ただのテキストファイルに過ぎません。
基本的には<tag>``</tag>という形ですが、<img>の場合はself-closingタグですので、contentを閉めるタグは不要です。
attribute : tagの中にあるものです。contentの特徴をより豊にするイメージです。<a>tagは href(hはhypertext, refはreference）というattributeとセットです。
content: htmlで表示するためのデーター。必ずtagの中に囲まれる必要があります。
構造作り
HTMLを作成する時は基本的なルールがあります。
- まずは、<!DOCTYPE html>を付けます。
- 次は、
<html>``</html>を付けます。 -
<html>の中に<head>,<body>を入れます。contentはbodyに入れれば、オッケーです。🙆
head
<html lang="kr"> : html tagのlang attributeを設定することで、Googleなどの検索エンジンと連携できる。SEO対策では必修かもしれません！
<link rel="shortcut icon" href="img/photo.jpg" /> : relはrelationという意味で、linkタグのhref attributeの値, つまりURLとどのような関係性を持っているか定義するタグです。
その他にも、<meta property="" content="" />など様々なタグがあることが分かりました。
<meta />タグもself-closingタグでattributeのみ入るタグで、ウェブサイトの属性情報、
追加情報を設定するタグです。
直接、contentとしては見えていませんでした、我々の生活に密接な関連があるコードが色々ありまして、とても不思議でした。
Discussion