◆本日使用したタグと属性(辞典ページ数)
○<?xml> xhtmlを使用する際、一番最初に宣言を行うタグ(p.32) ○<!DOCTYPE> 文書型宣言文。どのバージョンでHTMLが作られているのかを宣言する。(p.23 XHTML) ○<html> html全体を囲うタグ(p.30) ○<head> 文書の情報、サーチエンジン向けのキーワードや説明、タイトル、利用するスタイルシート等 その文書に関する情報を記述(ブラウザには表示されない部分)(p.30) ○<meta> 文書に関する情報(メタ情報)を指定して、ブラウザや検索ロボットに知らせるためのタグ。(ブラウザには表示されない部分)(p.38) ○<title> ブラウザのタブ(もしくは、ウィンドウの上部)に表示させる(p.34) ○<body> 実際にブラウザで表示する部分(p.30) ○<h1>~<h6> 見出しタグ【ブロック】(p.54) ○<p> 段落、文章タグ【ブロック】(p.56) ○<br /> 改行タグ。開始・終了タグのセットではなく、一つだけで完結するタグ(空要素/空タグ)【インライン】(p.58) ○<hr /> 水平の罫線を表すタグ【ブロック】(p.77) ○<img> 画像を表示させるタグ(空要素/空タグ)【インラインブロック】(p.78) ・src 画像のURLを指定する属性(imgタグ) ・alt 代替テキスト属性(imgタグの属性/xhtmlの場合は必須項目) ・width 横幅を指定する属性(imgタグの属性/xhtmlの場合は必須項目) ・heigt 高さを指定する属性(imgタグの属性/xhtmlの場合は必須項目)
◆HTML/CSSとは?
【HTML】ファイルの拡張子は .html
HTMLとは、HyperText Markup Languageの頭文字をとったもの。
この名前を少し丁寧に解釈すると、「ハイパーテキストのための、文書に目印を付ける方法を定めた文法上の約束」
WEBページの骨格の部分を指定する言語。
ハイパーテキストとは?
複数の文書(テキスト)を相互に関連付け、結び付ける仕組みである。「テキストを超える」という意味から”hyper-“(~を超えた) “text”(文書)と名付けられた。テキスト間を結びつける参照のことをハイパーリンクと言う。
【CSS】ファイルの拡張子は .css
CSSとは、ウェブページのスタイル(デザイン)を指定するための言語。
WEBページの肉付けの部分言語。
※訓練で練習用に作成しているファイルに関しては、日本語でも構いませんが、実際の仕事では、ファイル名は、HTML、CSSとも半角英数字のみ使用。全角の日本語名は厳禁!半角スペースもNG!!
◆タグについて
HTML内の文章に意味付けをするもの。タグを付ける(ふる)事をマークアップという。
タグには、基本的に「開始タグ」と「終了タグ」がある。
「終了タグ」には、/(スラッシュ)が付きます。
例
<html>開始タグ
</html>終了タグ
タグは必ず入れ子(ネスト)で記述する。
空要素タグ
<img />や<br />や<hr />のように、要素内容を持たないタグを空要素と呼びます。
◆HTMLのバージョンについて
・HTML4 HTHLの基本となる、10年くらい前に使われていたバージョン
・XTHML 現在多く使われているバージョン
・HTML5 2014年最終草案〜秋に勧告候補
※バージョンによって文章型宣言(教科書/辞典 P.13)が変わってきます。
文章型宣言とは 文書型宣言は「正しい HTML の規格に則ってこの文書は書かれたものです」と
「宣言」するものです。
訓練では、最初は、XHTMLを勉強します。(後日、HTML5)
◆文章型宣言と表示コードについて
(教科書/辞典 P.23)
XHTML1.0 Strict DTD → HTMLのルールを厳しくする
XHTML1.0 Transitional DTD → これを一番使います。HTMLのルールはStrictより緩い
XHTML1.0 Frameset DTD → ほぼ使わない
◆文字化けを起こさせないためには?
1. 書類自体の文字コードをutf-8に設定。
2. HTMLファイル内にも
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
</head>
を記述。
※charset(キャラセット)=文字コードのこと。
タグの読み方(発音)
width(幅)
正しい発音:ウィドゥス、ウィトゥス
(よくある間違った発音 ワイズ、ウィズ、ウィツ)
height(高さ)
正しい発音:ハイト
(よくある間違った発音 ヘイト)
alt(代替テキスト)
正しい発音:オルト
(よくある間違った発音 アルト)
◆便利なブラウザの使い方
閉じてしまったタブを復活させる方法
Ctrl+Shift+T (IE/Firefox/Crome)
Ctrl+Z (safari)