9/22 ☼☂　HTML基本文章構造

HTML

管理フォルダー作成

Cドライブに自分の名前フォルダーを作る。

ブラウザ等インストール

  • Firefoxをインストール
  • HTML Validatorをインストール
  • Pearl Crescent Page Saver Basicをインストール
  • TeraPadをインストール

HTML Validator
FirefoxでHTMLの文法を検証するための拡張機能

Pearl Crescent Page Saver Basic
Firefoxで閲覧中のサイトのスクリーンショットをとることができるようになる拡張機能
Flashコンテンツも含めてキャプチャできる
ページ全体を保存出来るのが便利

HTMLを正しく表示させるための記述

ドキュメントタイプ(DOCTYPE)宣言
どのバージョンのHTMLで書かれたものなのかを示す。
XHTML1.0を継承している文章型。

<！DOCTYPE html>

XHTML1.0
現在もっとも普及している文章型。
Dreamweaverで書き出せる。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

metaタグを打つ
文字コードを指定する

<meta charset="UTF-8">

CSSとJavaScriptを指定する

<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type"content="text/javascript">

HTML基本文章構造を打つ

  • HTMLはこれが全ての基本となる。
  • h1〜h3までの語句は検索エンジンにかかるので重要。
  • h1〜h3はpタグの中をわかりやすい文章で表現する。
  • pタグの一番最初の言葉が最も検索される。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>ページタイトル</title>
</head>
<body>
<h1>結論：大見出し</h1>
<p>要約</p>
<h2>結論：検証</h2>
<p>解説</p>
<ul>
<li>検証の項目</li>
<li>検証の項目</li>
<li>検証の項目</li>
</ul>
<p>解説</p>
<ol>
<li>順序のある検証の項目</li>
<li>順序のある検証の項目</li>
<li>順序のある検証の項目</li>
</ol>
<p>
<img src="画像の住所" width="幅の数値" height="高さの数値"
alt="練習用の画像">
</p>
</body>
</html>

JavaScript・ActionScript2.0の演算

JavaScript
プログラミング言語
ブラウザで表示するウェブページの上で動きをつける事ができる。

ActionScript2.0
Flashに搭載されているプログラミング言語
FlashファイルとActionScriptファイルは別に作る。
ActionScriptファイルは後でTeraPadで修正できる。

※JavaScriptとActionScript2.0はほぼ同じことなので、同時に勉強するのが良い。

CSSでpreタグ部分をいろいろ直してみたが、全然表示がうまくいかない。
border: 1px solid #B9B8B4;を消しても枠が出るし、他にも設定し直すところがあるのかな？