Rubyの前にHTML・CSSを勉強した方がいいってネットに書いていたので
勉強することにしました。
今回はその中でもHTMLについてまとめていきたいと思います。
HTMLとは？
HTML（ハイパーテキストマークアップ言語）はプログラミング言語ではありません。これは、アクセスするWebページを構造化する方法をWebブラウザーに指示するマークアップ言語です。Web開発者が望むように、複雑にすることも単純にすることもできます。HTMLは一連の要素で構成されており、コンテンツのさまざまな部分を囲んだり、折り返したり、マークアップしたりして、特定の方法で表示または動作させるために使用します。囲んでいるタグは、コンテンツをハイパーリンクにして、別のページに接続したり、単語をイタリック体にしたりすることができます。たとえば、次のテキスト行について考えてみます。
出典：MDN Web Docs
もうわからない言葉いっぱい出てきたわ〜
まじ言語の違いは、どんな違いがあるんかな〜？？
マークアップ言語：視覚的表現や文章構造などを記述する言語
プログラミング言語：コンピュータに計算処理などの動作を指示するための言語
とりあえず、マークアップ言語でサイト作って、そのサイトプログラミング言語を使って動かすって感じやな！！
HTML要素の構造について
- 開始タグ：要素の名前で構成され、開始および終了の山括弧で囲まれている。要素が有効になる場所を示す。
- 終了タグ：要素名の前に「/」が入る、要素が終了する場所を示す
このように、HTML要素は、開始タグから始まり、内容を挟み、終了タグまでが一つの要素になっています。
HTMLドキュメントの構造
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>タイトル</title>
</head>
<body>
<p>＝＝＝＝本文＝＝＝＝</p>
</body>
</html>
HTMLドキュメントの構造は、MTMLの要素を階層構造に記述していく。
その中でも、head要素とbody要素が重要になります。
・<!DOCTYPE html>
DOCTYPE宣言：この文章がHTMLで書かれていることを宣言し文章の冒頭に書く
これは、決まり文句深い意味を考えず、とりあえず書けばいいみたいだ
・<html>
全てを囲む親要素でこの中に、head要素とbody要素があります。
head要素
head要素は、閲覧者に表示するコンテンツではありません。
検索結果に表示されるキーワードとページの説明が入り,
CSS,文字セットの宣言が含まれています。
<meta charset=”utf-8″>
ドキュメントの文字をutf-8に指定し、utf-8の文字エンコーディングで
HTML文書を書くことを宣言します。
これを書いていないと文字化けの原因となります。
・title要素
Webページのタイトルを記述します。
検索エンジンの結果ページに一覧表示されます。
body要素
こちらは、閲覧者に表示するコンテンツになります。
コンテンツを記述する際に使われる主なパーツは以下のようになります。
- 段落
- 改行
- 画像
- ページリンク
- 表
- フォーム
があります。それらについては次回以降まとめていきたいと思います。
まとめ
Rubyを勉強する前に、Rubyで動かされるマークアップ言語であるHTMLを勉強する必要があり、
そのHTMLの大まかな構造について自分なりにまとめてみました。
これが基本構造になるのでこれを雛形として覚えておく必要があります。
次回は、body要素で使う要素についてまとめて行きたいと思います。
ではまた！
コメント