WEBページの構成要素

【WEBページの構成要素】

1. 　HTML　（構造）
2. 　CSS　（デザイン）
3. 　JavaScript　（動き）

ブログをテキストにしたい

ブログのソースは、タグだらけ。
プレーンなテキストファイルにしたい。

●htmlファイルとして保存する

1. ブログ上で右クリック
2. ソースの表示
3. ファイル＞上書き保存
4. htmlファイルができる

●htmlファイル → Textファイル変換

1. フリーソフト「HtoX32 1.73」をダウンロードしてインストール
2. 「HtoX32 1.73」を起動して、htmlファイルをドラッグアンドドロップ
3. きれいなテキストファイルが出来上がる

縦書き

拝啓

IE9対応、Chrome非対応。

ユー、とってもファンキーUTF-8

ユー、とってもファンキーUTF-8

ユー、とってもファンキーUTF-8

ユー、とってもファンキーUTF-8

ユー、とってもファンキーUTF-８

ユー、とってもファンキーUTF-8

ユー、とってもファンキーUTF-8

ユー、とってもファンキーUTF-8

敬具

＜!DOCTYPE html＞
＜html＞
＜head＞
＜meta charset="UTF-8"＞
＜style type="text/css"＞
p {writing-mode: tb-rl; color:blue;}
＜/style＞
＜/head＞
＜body＞
＜p＞
拝啓＜BR＞
IE9対応、Chrome非対応。＜BR＞
ユー、とってもファンキーUTF-8＜BR＞
ユー、とってもファンキーUTF-8＜BR＞
ユー、とってもファンキーUTF-8＜BR＞
ユー、とってもファンキーUTF-8＜BR＞
ユー、とってもファンキーUTF-８＜BR＞
ユー、とってもファンキーUTF-8＜BR＞
ユー、とってもファンキーUTF-8＜BR＞
ユー、とってもファンキーUTF-8＜BR＞
敬具＜BR＞
＜/p＞
＜/body＞
＜/html＞

cssの適用方法

1）外部のCSSファイル「HTML5.css」を呼び出す。
＜head＞
 ＜link rel="stylesheet" type="text/css" href="HTML5.css"＞
＜/head＞


2）HTML文書の内部にstyle要素を記述する。
＜head＞
 ＜style type="text/css"＞
  p {writing-mode: tb-rl; color:blue;}
 ＜/style＞
＜/head＞


3 ）スタイルを部分的に適用する
＜body＞
 ＜p style="color:blue; line-height:1.5;"＞
 ファンキー
 ＜/p＞
＜/body＞

縦書き表示

＜!DOCTYPE html＞
＜html＞
＜head＞
＜meta charset="UTF-8"＞
＜title＞繝ｦ繝ｼ縲√→縺｣縺ｦ繧ゅ?√ヵ繧｡繝ｳ繧ｭ繝ｼ＜/title＞


＜style type="text/css"＞
p {
writing-mode: tb-rl;
}
＜/style＞


＜/head＞
＜body＞
＜p＞繝ｦ繝ｼ縲√→縺｣縺ｦ繧ゅ?√ヵ繧｡繝ｳ繧ｭ繝ｼ＜/p＞
＜/body＞
＜/html＞

UTF-8

繝ｦ繝ｼ縲√→縺｣縺ｦ繧ゅ€√ヵ繧｡繝ｳ繧ｭ繝ｼ
UTF-8

WZでUTF-8

1. 表示＞オプション＞ファイル＞文字コードの自動判別をチェック
2. ファイル＞文書の情報＞文字コード＞文字コードをUTF-8＞適用

HTML5

＜!DOCTYPE html＞（ドキュメントタイプの宣言。HTML5の場合）

＜html＞（HTML開始宣言）

＜head＞（タイトルやメタ情報を記述する）
＜meta charset="UTF-8"＞
＜title＞HTML5のテスト＜/title＞
＜/head＞

＜body＞（本文を記述する）
＜p＞Grauers＜/p＞
＜/body＞

＜/html＞（HTML終了宣言）

---
＜!DOCTYPE html＞

＜html＞
＜head＞
＜meta charset="UTF-8"＞
＜title＞HTML5のテスト＜/title＞
＜/head＞
＜body＞
＜p＞Grauers＜/p＞
＜/body＞
＜/html＞