ちひろの独り言(かっちり、ゆるっと。)

社会人1年生が自由気ままに。(ほぼ平日更新)

《第2回HTMLとCSS講座》

こんにちは、こんばんは。

今日は木曜日ですね!疲れが溜まるころです・・・。昨日はあまりに眠かったので、早く寝たいと思いカフェで勉強せずに帰ったのですが結局いつもと同じ時間になってしまいました。今日は勤務時間が長いのですが、体力はもうないので気力でなんとか乗り切るしかありませんね!!

 

《第2回HTMLとCSS講座》

 

さて、今回はHTML&CSS講座になります。今日も一緒に頑張っていきましょう(^^)

 

前回のHTML&CSS講座はこちら↓

chihiro-kk.hatenablog.com

 

f:id:chihiro-kk:20190514070503j:image

 

【HTMLに共通する部分って?】

 

さて、今日から少しずつ実践的なことを勉強していきましょう!まず、基本的なタグを見ていきましょう。どんなHTMLにも共通する部分です(^^)

 

f:id:chihiro-kk:20190516065718j:image

 

このようなかたちです。では、1つずつ見ていきましょう(^^)

 

◯DOCTYPE◯

 

一行目にある<!doctype html>は「DOCTYPE」と言います(DOCTYPE宣言とも言う。)。これはHTMLがどのバージョンで作成されているかを示すものです。現在最新のものはHTML5なのですが、<!doctype html>と表します(^^)ちなみに、以前のHTML4.01のときは<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">だったようです。長い〜・・・。

 

◯html要素◯

 

DOCTYPEに続くのはhtmlタグです。これは、必ず<html>で始まり</html>で終わります。どんなHTMLにも必ず入っているものなので、忘れないようにしましょう(^^)html要素がなんなのかという説明は少し難しいのですが、「一番大きな枠」と考えると良いかなと思います。これから説明するhead要素やtitle要素も枠と言えばそうなのですが、html要素はそれらを含む枠です。例えば、html要素が「日本」だとするならば、head要素は「都道府県」でtitle要素は「市町村」だというイメージです(^^)head要素やtitle要素についてはまたお話しします。また、ここには「属性」というものがつくことがあります。html要素に情報を追加するような意味です(^^)属性は様々なものがあるのですが、例として「lang」という「言語を指定する」という意味のある属性を使ってみましょう。

 

f:id:chihiro-kk:20190516065844j:image

 

「ja」というのは日本語という意味です。英語は「en」、韓国語は「ko」などいろいろあります(^^)こうすることで、外国の方から見たときに記述したHTMLが日本語で書かれていることが分かるのです。便利ですね!

 

◯head要素◯

 

こちらは少し長くなりそうなので次回お話しします(^^)

 

◯title要素◯

 

こちらはそんなに難しくありません。HTML文書のタイトルを入力します。これを入力すると検索エンジンの検索結果などに引っかかるようになるので、自然と閲覧数も上がるかもれしれませんね(^^)

 

本日はここまでです。間違いがあった場合には、コメント欄で教えていただけると嬉しいです!今日もお疲れ様でした(^^)

ではまた。

 

 

初めましての方はこちらもどうぞ↓

chihiro-kk.hatenablog.com