HTMLの基本
動作確認環境:Python3.6 / macOS 10.13.6
HTMLとは
HTMLとは、Webページを作るための言語のひとつで
・ページの内容となるテキスト
・そのテキストが何であるか
(例えば、見出しなのか本文なのかとか)
を一括りにしたデータで構成するファイルである。
テキストをどのように表示するか、や
レイアウト情報は
(例えば、フォントや色、表示位置など)
HTMLを補完する存在であるCSSに記述する。
内容とレイアウト情報を切り離したことで
様々な装置で文書ファイルを取り扱うことが
出来るようになる。
HTMLの基本的な構成
HTMLは、文書としてのテキストに
「要素」と「属性」を付加したファイルである。
要素と属性
要素とは、内容となるテキストをタグで囲んで
その内容がなんであるかを示すもの。
また、属性とは、要素の補足的な情報として
定義するもの。
以下の例の場合
内容は、あいうえお
それから
<p></p>が段落を表す「要素」であり
langが言語コードを表す「属性」である。
<p lang="ja">あいうえお</p>
HTMLの大枠構造
HTMLには、ページ全体を示すための大枠構造がある。
<!DOCTYPE html> <html> <head> <title>ページタイトル</title> </head> <body> ページの内容 </body> </html>
・文書の先頭に、<!DOCTYPE html>を書く。
・その直後、文章全体をhtml要素(<html>と</html>)で括る。
・HTMLタグの中にhead要素(<head>と</head>)と
body要素(<body>と</body>)をひとつずつ入れる。
head要素
ページそのものの情報を示す要素を入れる。
body要素
Webページの内容全体を入れる。
グローバル属性
HTMLにはどの要素にでも共通して使用できる属性がある。
・id属性
要素に対して固有の名前を付ける。
・class属性
要素に対して種類を示す名前を付ける。
・title属性
要素に対しての補足情報で、ツールチップで表示される。
・hidden属性
非表示とする。
・tabindex属性
タブキーによる移動の順序
HTMLにCSSを組み込む
・link要素
head要素内でlink要素を使い
外部スタイルシートを読み込ませる。
複数指定可、media属性の指定可
・style要素
head要素内に直接記述する。
・style属性
HTMLファイル内に直接CSSを書き込む。
一時的部分的にテストするときなどで使用。