HTMLとは一体何かについて勉強
こんにちは
sipelです。
今回はHTMLとは一体何なのかについてただただ書いていきます。
HTMLとは
HTMLとはHyper Text Mark Languogeの略です。
同じアルファベットで囲むことで書ける。
HTMLはハイパーリンクがあるからすごい。
ホームページは和製英語。
HTMLの環境
Text EditerとBrowserとWeb Server（これで公開できる）の環境があればHTMLが使えます。
Text Editerとは
メモ帳のことである。
オススメのメモ帳をいくつか紹介します。
・Atom←日本語がない
。Sublime Text←有料ソフト
デザインはCSSで作る
Browserとは
SafariやGoogle Chromeやfire foxやOperaやInternet Explorerのことである。
パソコンやスマホには必ず入っている。
HTMLは骨格、CSSは外見を作るイメージ。
タグの基礎知識
<～>～</～>で囲んで使う。
見出しは英語でHeading
段落は英語でParagraph
検索エンジンは一人のユーザーである。
開始タグと終了タグがある。
<～>がタグである。
HTMLの基本構造
<html>タグ
<head>タグ
<title>タグ
<body>タグ
で基本は構成される。この基本構造をまずは覚える。
HTMLの名前
半角英数字.htmlと必ずつけて保存する。
まとめ
例えばAtomというテキストエディターをインストールしそこにコードを書いていく、
書いたコードを新しいフォルダに保存し、その時に.htmlという名前を付けて保存する。
次にそのフォルダをダブルクリックして開くと、自動的に新しいブラウザが立ちあがり、コードが読まれ表示される。
基本の4つの要素が必要
<html> <head> <title> <body>の4つである。
HTMLの属性
HTMLの属性とはHTMLタグの後ろに書く。
例、<html lang="ja">
jaは日本語に指定という意味
この例が属性ということである。
属性の種類
・特定のみ
・すべて
の2種類がある。
すべての属性のことをグローバル属性といい
lang属性だけあるということだけで問題ない。
lang属性とは何語なのかというものを定義する属性
属性は開始タグの後に指定して書く。
まとめ
属性には2種類あって、グローバル属性にはとりあえずlang属性しかないという程度で問題ない。
HTMLバージョンについて
HTMLにはバージョンがあって
バージョンによって要素や属性が変わる。
現在はバージョン５である。（2019年時点）
そのバージョンについての歴史を少し書きます。
1999年 HTML4.01
HTMLは文章構造のみ、デザインはCSSに移行
2000年 XHTML1.0
XMLの文法で再定義されたHTML
2014年 HTML5
よりコンピュータにも理解しやすいHTML
W3Cという団体がHTMLを作っている。
DOCTYPE宣言とは
機械はバージョンがコードではわからないので
どのバージョンに基づいてコードを書いているのか最初に宣言する。
この宣言がDOCTYPE宣言である。
※HTML５では宣言する必要がない。
DTD←W3Cのウェブサイトにあるデータを見てバージョンの宣言の仕方を見る。
<!DOCTYPE HTML>を一番最初に書く。
HTML5の場合これだけでOK
DTDの種類
※HTML５以前のバージョンでコードを書く場合。
3種類ある。
・Strict
→仕様に従った厳格の仕様書
・Transitinal
→少し緩やかなDTD
・Framset
→フレーム用のDTD
それぞれW3Cのウェブサイトにあるコードをコピー、貼り付けしたらOK
まとめ
バージョンやDOCTYPE宣言はコンピュータに今からこのバージョンでコードを書きますよと教えるだけなので見た目の変化は何もない。
バージョンがあることと、基本HTML５でコードを書くことになると思うので、
一番最初に<!DOCTYPE HTML>と書くことだけ覚えたらOK。
文字コードについて
文字化けの原因は文字コードの違いから生まれる。
コンピュータは文字を数字で管理していて、
その割り当てられた数字を文字コードという。
その表を文字エンコーディングという。
例、UTF-8 shift-jisなどが文字エンコーディング
文字エンコーディングが違うので文字化けが起こる。
なので文字エンコーディングを指定してあげる必要がある。
文字コードの指定方法
<meta>というタグを使う。
<head>タグの中で使う。
例 <meta charset="UTF-8">と書く。
charsetは属性という意味。
終了タグが必要ないタグである。
この終了タグが必要ないタグを空要素（エンプティ要素）という。
※これはHTML５でのみ使える。それ以前のバージョンである場合、もっと書く必要がある。
まとめ
<meta charset="UTF-8">という形は丸暗記して使う。
文字化けの原因と上記の形を覚えれればOK。
sipel
