HTML メモ
<Doctype ～> 文書定義を宣言
（文書構造を定義する。表・見出し・段落・リスト・画像）
<html>～</html> エチティエムエル
HTML/XHTMLで書かれていることを宣言。
HTMLファイルであることを示す。ホームページ全体を囲むタグ
<head>～</head> ヘッダ
タイトルなどの文書情報を示す。キーワード・サイトの説明・文字コード、製作者情報など。mataタグ入力部分（タイトルタグの前に。言語を伝えてから）。
※meta 終了コード無し
<title>～</title> タイトル
WEB閲覧時のタイトルバーやタブバーに表示される。またブックマークやページ保存される際のタイトルにもなる（分かりやすいタイトルが良い）。検索する際の検索結果にタイトルとして表示。
html｛ head（title meta）body（h ul(li) ol(li) p(br)）｝
<body>～</body> ボディ
表示される部分・内容
<h1>～</h1> エイチワン 見出し、小見出し。
数字部分は、1～6まで。h1は一番大きいが、文字サイズを大きくさせるためのタグに非ず。大見出しのh1であっても、同ページに複数使用可。終了タグを忘れずに。
文字サイズを大きくする際は→（font-size:;）
文章ばかりにならないように、見出しを入れると分かりやすい。改行なども適度に。
<p>～</p> ピー 段落 一つの段落にまとめる
文章や画像が中に入る。段落の上下に一行空白ができる。文章を入力する際は、直接でなく、<p></p>で囲むようにする。改行でなく折り返しは、ブラウザが自動的に行う。
※本文は必ずpで囲む。
<br> ビーアール 改行 入力部分で改行する。
<ul> ユーエル リストを囲み、範囲を示す。
<li></li> エルアイ
</ul> 箇条書き、リスト （終了タグ省略可）内容によっては、情報が伝わりやすく。
番号の場合は、<ol></ol> オーエル 順番のあるリスト「1．」「2．」…
リンク（p、リスト、hの中にも可。タグの内側に）
target 同一ページが良いとされている。特に同サイト内ではできるだけ同じ方がいい。強制的に全画面表示、手前に表示するなどの動作は不快になるもと。
表
<a href="値">○○</a>
a：タグ名 href：属性名（リンク先を指定する）
<a>～</a> アンカー <p><h1><ul>などの項目の中に入れるようにする。
属性：href エイチレフ
href="URL"
属性が必要なタグ → imgタグ（画像ファイルを指定）
画像
ファイル名は小文字で（表示されないことがある）
サイズは大きさに気をつける（デジカメ写真をそのままだとかなり大きくなる。支障がないなら、画面サイズに合わせてサイズも小さく。サムネイルの使用など）
サーバー量に限りがあるなら、不必要に大きなサイズは避けたほうがいい。
アイコン 見た目で、できるだけ分かりやすく。
小見出し
id="名前" アイディ
※id属性の名前は重複させない。どのタグにも付けられる。
・ページ内リンク
id、 name
・同ページの見出しにリンクを張る href="#名前"
使い方例→ 同ページ内で特定の部分へ（スクロールの手間をなくす、分かりやすい）、ページトップへ、違うページの指定先へ
・相対パス（同サーバー内で使用できる）
・絶対パス（http://ではじまるURLのこと）
同フォルダ内→「ファイル名」をそのまま指定。
フォルダ内のファイル→「フォルダ名」/「ファイル名」
フォルダの階層が違う場合→../「ファイル名」
../ 一つ上の階層
../../ 二つ上の階層
●ディレクトリ ファイル・フォルダの整理
ファイル名は半角英数字、他、使用できても頭には駄目なのもある→
・拡張子ごとに分ける（見た目がすっきりと整理できる・どのページに関連しているかが分かりにくくなる時も）
・ページごとに分ける（関連が分かりやすい・同ファイルが重複する時も）
css img（image） script
●メール
<a href="mailto:メール@アドレス">メール</a>
クリックでメールソフトが起動。
ただ@があると、自動的にメール収集される場合があり、直接記載は控えたほうが無難
公開用と分ける
無料で利用できるメール（ヤフー、Gメール、Hotメール、他、）
※利用がないと、登録が消されてしまうのもある
●FFFTP（File Transfer Protocol）
→ディレクトリ publichtml
index.html が必要。
きちんと転送されているか、ファイルと、表示の確認。エラーで途中までしか転送されてない時もある。
無料サーバーだと、一定期間、ログインしない・更新しないなどで削除されるところもある。かと思うと延々とある所もある。
※ミラーリングアップロード
→作成ファイルを追加したり、書き換えたり、削除したり、をしてくれる。
●文字の強調
em エム → 斜体で表記される（CSS無指定時）
strong ストロング より強い強調 → 太字で表記される（〃）
●実体参照
特別な文字を示すための記号として扱われるため、そのままでは使ってはいけない。
< > &全角の＜＞＆はそのまま使うことができる。
●拡張子
画像ファイル .bmp .gif .jpg .png
スタイルシートファイル .css
JavaScriptファイル .js
HTMLファイル .html.htm
どちらも同じ。/で終る際、ディレクト内が丸見えにならない（見えるかどうかは、サーバーにもよる）
.pdf
テキストファイル .txt
Shockwave Flash .swf
圧縮ファイル .lzh .zip
●仕様の協議決定―W3C（略） 非営利団体
1997.12/18 HTML4.0 勧告
1998.4/24 改定
1999.12/24 HTML4.01 正式に勧告
文書だけでなく見栄えを指定するように、現在使用されている。スタイルシート非推奨。
↓新技術の登場、能力の限界が指摘される。
Webno発展や状況の変化に対応するため、バージョン（HTML4.01 の数字部分）構造と見栄えの分離など。
1998年 XML勧告 → extensible（拡張可能）
SGML（マークアップ言語のサブセットとして考案）
拡張性、汎用性に優れた
・アプリケーションのデータ形式を問わずに、データをやり取りできる。
・必要なデータだけ取り出して再利用
・新たな要素を定義して、データ処理が可能
↓柔軟に応用が利く。
HTMLをXMLの文法で定義しなおした。
XHTML（略）の標準化
2000.1/26 XHTML1.0 勧告
2002.8/1 XHTML1.0 仕様改定
SeconEdition が公開
SGML HTML
サブセット ↓ ↓ 再定義
XML XHTML
拡張性、柔軟性を導入。目的→使い勝手のよい手段を作ること。
見栄えを分離させる→ソースが簡潔に。正しく構造化（扱いやすく）
XHTML1.0 は、HTML4.01 を定義しなおしたバージョン。
従来のブラウザとの互換性も考慮している。大幅な変更は無し。要素、属性の追加無し。HTMLから移行しやすい仕様。
●HTML （略 の頭文字。ハイパーテキストマークアップ言語）
Webページの文書を記述するために開発された言語のこと。
目的→コンピュータ環境に依存しない統一した規格。
ネット上で情報を共有するため
H-T-（文書間の移動ができる）
M-L-（しるし付け）
「独自拡張タグ」 W3Cで定義されいないタグ
各ブラウザメーカーが独自に追加した。
共通してサポートされるものと、特定のブラウザのみの動作と様々。
※仕様はあまり適切ではない。
・XHTML・HTML Basic 携帯端末対象
機能が小さい要素セットにモジュール化されたXHTML1.1
●単位
www （World Wide Web）
URL （Uniform Resource Locator）
httpe://サーバー名/○/●.html
●→ファイル名
■拡張子の表示の仕方
フォルダオプション → タブ「表示」 → ファイルおよびフォルダ「登録されている拡張子は表示しない」のチェックをはずす。
※sample.html の拡張子部分、この場合の「.html」を消すと、表示が上手くいかなくなる。
●終了タグを省略できる要素
colgroup dd dt li option p td tfoot th theat tr
tbody（条件有り）
※より正しい文書を作成するためには省略しないで、記述した方がいい。
（XHTML では、省略できない）
●空要素 内容を持たない開始タグのみ
area base basefont br col frame hr input img isindex link meta param
XHTMLでは、終了タグが必要なので、
<要素名/ >
<要素名>～<要素名/> の形は、ブラウザによってはサポートしていない。
CSSファイル
スタイルシート
これを利用することで、HTMLファイルの変更をせずに、デザインの修正が簡単に。ページ数が多ければ多いほど、便利に感じる。
p { color : #000080 ;}
｛ ｝→ プロパティと値を囲む（幾つでも可）、p →セレクタ（デザインの対象）、color→プロパティ（どの効果か）、 :→コロン（区切り）、 #000080→値（どんな効果か） 、;セミコロン（区切り）、セミコロンや ｝は抜け落ちてしまうと、表示が上手くできなくなる場合があるので注意。
HTML上にも記載できるが、編集の手間。
<style type="text/css">
この部分に記載
</style> スタイル
type属性を付けて、スタイルシートの種類がcssであることを指定。終了タグを忘れる、HTMLファイルの最後までがスタイルシートと見なされてしまい、ブラウザ上で表示されなくなる。
●線
border-widh 太さ
border-style スタイル、形
border-color 色
●位置揃え
text-aligh :left/right/center;
●表 table テーブルタグ（表の範囲）
border="0" （線）、cellpadding セルパディング（余白）
tr ティーアール
td （データ）
th （見出し用セル、太文字・中央揃え）
trの間に↑
width ウィズ（幅を指定できる）
height ハイト（高さ）
※セルの内容が優先される。表示できないということは無いということ。
<tr>
<th></th>
<td></td>
</tr>
caption キャプション tableの直後に説明文。
下に表示したいときは、<caption align="bottom">
→行 （一つ単位はセル）
↓列 （枠・余白）
■線のスタイル
border-style: ●;
none 非表示。太さ0。重なり合う場合→他値優先。初期値
hidden 非表示。太さ0。重なり合う場合→この値が優先
solid 1本線
double 2本線
groove 立体的に窪んだ線
ridge 立体的に隆起した線
inset 上左が暗く、下右が明るく表示。立体的に窪んだように表示
outset 上左が明るく、下右が暗く表示。立体的に隆起したように表示
dashed 破線
dotted 点線
■ショートカットキー
編集
<Doctype ～> 文書定義を宣言
（文書構造を定義する。表・見出し・段落・リスト・画像）
<html>～</html> エチティエムエル
HTML/XHTMLで書かれていることを宣言。
HTMLファイルであることを示す。ホームページ全体を囲むタグ
<head>～</head> ヘッダ
タイトルなどの文書情報を示す。キーワード・サイトの説明・文字コード、製作者情報など。mataタグ入力部分（タイトルタグの前に。言語を伝えてから）。
※meta 終了コード無し
<title>～</title> タイトル
WEB閲覧時のタイトルバーやタブバーに表示される。またブックマークやページ保存される際のタイトルにもなる（分かりやすいタイトルが良い）。検索する際の検索結果にタイトルとして表示。
html｛ head（title meta）body（h ul(li) ol(li) p(br)）｝
<body>～</body> ボディ
表示される部分・内容
<h1>～</h1> エイチワン 見出し、小見出し。
数字部分は、1～6まで。h1は一番大きいが、文字サイズを大きくさせるためのタグに非ず。大見出しのh1であっても、同ページに複数使用可。終了タグを忘れずに。
文字サイズを大きくする際は→（font-size:;）
文章ばかりにならないように、見出しを入れると分かりやすい。改行なども適度に。
<p>～</p> ピー 段落 一つの段落にまとめる
文章や画像が中に入る。段落の上下に一行空白ができる。文章を入力する際は、直接でなく、<p></p>で囲むようにする。改行でなく折り返しは、ブラウザが自動的に行う。
※本文は必ずpで囲む。
<br> ビーアール 改行 入力部分で改行する。
<ul> ユーエル リストを囲み、範囲を示す。
<li></li> エルアイ
</ul> 箇条書き、リスト （終了タグ省略可）内容によっては、情報が伝わりやすく。
番号の場合は、<ol></ol> オーエル 順番のあるリスト「1．」「2．」…
リンク（p、リスト、hの中にも可。タグの内側に）
target 同一ページが良いとされている。特に同サイト内ではできるだけ同じ方がいい。強制的に全画面表示、手前に表示するなどの動作は不快になるもと。
表
<a href="値">○○</a>
a：タグ名 href：属性名（リンク先を指定する）
<a>～</a> アンカー <p><h1><ul>などの項目の中に入れるようにする。
属性：href エイチレフ
href="URL"
属性が必要なタグ → imgタグ（画像ファイルを指定）
画像
ファイル名は小文字で（表示されないことがある）
サイズは大きさに気をつける（デジカメ写真をそのままだとかなり大きくなる。支障がないなら、画面サイズに合わせてサイズも小さく。サムネイルの使用など）
サーバー量に限りがあるなら、不必要に大きなサイズは避けたほうがいい。
アイコン 見た目で、できるだけ分かりやすく。
小見出し
id="名前" アイディ
※id属性の名前は重複させない。どのタグにも付けられる。
・ページ内リンク
id、 name
・同ページの見出しにリンクを張る href="#名前"
使い方例→ 同ページ内で特定の部分へ（スクロールの手間をなくす、分かりやすい）、ページトップへ、違うページの指定先へ
・相対パス（同サーバー内で使用できる）
・絶対パス（http://ではじまるURLのこと）
同フォルダ内→「ファイル名」をそのまま指定。
フォルダ内のファイル→「フォルダ名」/「ファイル名」
フォルダの階層が違う場合→../「ファイル名」
../ 一つ上の階層
../../ 二つ上の階層
●ディレクトリ ファイル・フォルダの整理
ファイル名は半角英数字、他、使用できても頭には駄目なのもある→
・拡張子ごとに分ける（見た目がすっきりと整理できる・どのページに関連しているかが分かりにくくなる時も）
・ページごとに分ける（関連が分かりやすい・同ファイルが重複する時も）
css img（image） script
●メール
<a href="mailto:メール@アドレス">メール</a>
クリックでメールソフトが起動。
ただ@があると、自動的にメール収集される場合があり、直接記載は控えたほうが無難
公開用と分ける
無料で利用できるメール（ヤフー、Gメール、Hotメール、他、）
※利用がないと、登録が消されてしまうのもある
●FFFTP（File Transfer Protocol）
→ディレクトリ publichtml
index.html が必要。
きちんと転送されているか、ファイルと、表示の確認。エラーで途中までしか転送されてない時もある。
無料サーバーだと、一定期間、ログインしない・更新しないなどで削除されるところもある。かと思うと延々とある所もある。
※ミラーリングアップロード
→作成ファイルを追加したり、書き換えたり、削除したり、をしてくれる。
●文字の強調
em エム → 斜体で表記される（CSS無指定時）
strong ストロング より強い強調 → 太字で表記される（〃）
●実体参照
特別な文字を示すための記号として扱われるため、そのままでは使ってはいけない。
< > &全角の＜＞＆はそのまま使うことができる。
●拡張子
画像ファイル .bmp .gif .jpg .png
スタイルシートファイル .css
JavaScriptファイル .js
HTMLファイル .html.htm
どちらも同じ。/で終る際、ディレクト内が丸見えにならない（見えるかどうかは、サーバーにもよる）
テキストファイル .txt
Shockwave Flash .swf
圧縮ファイル .lzh .zip
●仕様の協議決定―W3C（略） 非営利団体
1997.12/18 HTML4.0 勧告
1998.4/24 改定
1999.12/24 HTML4.01 正式に勧告
文書だけでなく見栄えを指定するように、現在使用されている。スタイルシート非推奨。
↓新技術の登場、能力の限界が指摘される。
Webno発展や状況の変化に対応するため、バージョン（HTML4.01 の数字部分）構造と見栄えの分離など。
1998年 XML勧告 → extensible（拡張可能）
SGML（マークアップ言語のサブセットとして考案）
拡張性、汎用性に優れた
・アプリケーションのデータ形式を問わずに、データをやり取りできる。
・必要なデータだけ取り出して再利用
・新たな要素を定義して、データ処理が可能
↓柔軟に応用が利く。
HTMLをXMLの文法で定義しなおした。
XHTML（略）の標準化
2000.1/26 XHTML1.0 勧告
2002.8/1 XHTML1.0 仕様改定
SeconEdition が公開
SGML HTML
サブセット ↓ ↓ 再定義
XML XHTML
拡張性、柔軟性を導入。目的→使い勝手のよい手段を作ること。
見栄えを分離させる→ソースが簡潔に。正しく構造化（扱いやすく）
XHTML1.0 は、HTML4.01 を定義しなおしたバージョン。
従来のブラウザとの互換性も考慮している。大幅な変更は無し。要素、属性の追加無し。HTMLから移行しやすい仕様。
●HTML （略 の頭文字。ハイパーテキストマークアップ言語）
Webページの文書を記述するために開発された言語のこと。
目的→コンピュータ環境に依存しない統一した規格。
ネット上で情報を共有するため
H-T-（文書間の移動ができる）
M-L-（しるし付け）
「独自拡張タグ」 W3Cで定義されいないタグ
各ブラウザメーカーが独自に追加した。
共通してサポートされるものと、特定のブラウザのみの動作と様々。
※仕様はあまり適切ではない。
・XHTML・HTML Basic 携帯端末対象
機能が小さい要素セットにモジュール化されたXHTML1.1
●単位
| pt | ポイント（1pt＝1/72インチ） |
| px | ピクセル（ディスプレイの解像度によって表示の大きさが変わる） |
| ％ | パーセント（現在の大きさに対する割合） |
| em | イーエム（font-sizeプロパティの値を1とする） |
| ex | イーエックス（xの高さを1とする） |
| pc | パイカ（1pc＝12pt） |
www （World Wide Web）
URL （Uniform Resource Locator）
httpe://サーバー名/○/●.html
●→ファイル名
■拡張子の表示の仕方
フォルダオプション → タブ「表示」 → ファイルおよびフォルダ「登録されている拡張子は表示しない」のチェックをはずす。
※sample.html の拡張子部分、この場合の「.html」を消すと、表示が上手くいかなくなる。
●終了タグを省略できる要素
colgroup dd dt li option p td tfoot th theat tr
tbody（条件有り）
※より正しい文書を作成するためには省略しないで、記述した方がいい。
（XHTML では、省略できない）
●空要素 内容を持たない開始タグのみ
area base basefont br col frame hr input img isindex link meta param
XHTMLでは、終了タグが必要なので、
<要素名/ >
<要素名>～<要素名/> の形は、ブラウザによってはサポートしていない。
CSSファイル
スタイルシート
これを利用することで、HTMLファイルの変更をせずに、デザインの修正が簡単に。ページ数が多ければ多いほど、便利に感じる。
p { color : #000080 ;}
｛ ｝→ プロパティと値を囲む（幾つでも可）、p →セレクタ（デザインの対象）、color→プロパティ（どの効果か）、 :→コロン（区切り）、 #000080→値（どんな効果か） 、;セミコロン（区切り）、セミコロンや ｝は抜け落ちてしまうと、表示が上手くできなくなる場合があるので注意。
HTML上にも記載できるが、編集の手間。
<style type="text/css">
この部分に記載
</style> スタイル
type属性を付けて、スタイルシートの種類がcssであることを指定。終了タグを忘れる、HTMLファイルの最後までがスタイルシートと見なされてしまい、ブラウザ上で表示されなくなる。
●線
border-widh 太さ
border-style スタイル、形
border-color 色
●位置揃え
text-aligh :left/right/center;
●表 table テーブルタグ（表の範囲）
border="0" （線）、cellpadding セルパディング（余白）
tr ティーアール
td （データ）
th （見出し用セル、太文字・中央揃え）
trの間に↑
width ウィズ（幅を指定できる）
height ハイト（高さ）
※セルの内容が優先される。表示できないということは無いということ。
<tr>
<th></th>
<td></td>
</tr>
caption キャプション tableの直後に説明文。
下に表示したいときは、<caption align="bottom">
→行 （一つ単位はセル）
↓列 （枠・余白）
■線のスタイル
border-style: ●;
none 非表示。太さ0。重なり合う場合→他値優先。初期値
hidden 非表示。太さ0。重なり合う場合→この値が優先
solid 1本線
double 2本線
groove 立体的に窪んだ線
ridge 立体的に隆起した線
inset 上左が暗く、下右が明るく表示。立体的に窪んだように表示
outset 上左が明るく、下右が暗く表示。立体的に隆起したように表示
dashed 破線
dotted 点線
■ショートカットキー
| F5 | 最新情報に更新 |
| Alt＋F4 | フォルダを閉じる、終了 |
| Ctrl＋H | 置換 |
| Ctrl＋A | 全て選択 |
| Ctrl＋X | 切り取り |
| Ctrl＋C | コピー |
| Ctrl＋V | 貼り付け |
| Ctrl＋N | メモ張の新規作成 |
| Ctrl＋S | 上書き保存 |
| Ctrl＋Esc | スタートメニューの表示 |
| Ctrl＋O | ファイル開く |
0 件のコメント:
コメントを投稿