CSSファイルを使ったホームページの解説2

CSSファイルを使ったホームページの作成を、三郷北高校では行っています。三郷北の「情報A」の授業の内容を公開します。

検索上位表示されるホームページの作り方。無料公開講座

  • 費用：無料
  • 場所：埼玉県三郷市三郷北高校
  • 日時：7月26、27、8月2、3の土日、4日間の13時〜16時。
  • 内容：CSSファイルの使い方。検索で上位ヒットする方法。検索エンジンの仕組み。HTMLタグと検索順位の関係

ホームページの作り方に関する無料公開講座

  • 講座名：テキストエディタを使ったホームページの作成
  • 講座内容予定：
    1. 12月27日（土）1時〜4時。NoEditorの使い方。
    2. 12月28日（日）〃。HTMLタグについて。
    3. 1月4日（日）〃。検索で上位表示されるホームページの作成。
    4. ホームページ・ブログの作成経験がある方に最適です。
    5. ホームページの作成が主題です。
  • 費用：無料
  • 場所：三郷北高校　パソコン教室５階

css11.htm（HTMLファイル）の解説2

以下にcss11.htm（HTMLファイル）の内容と★解説★を書きます。
理解できない事は掲示板に書き込んでください。
http://www2.rocketbbs.com/625/aikoi.html

css11.htmの内容と★解説★2

＜body＞
＜div id="header"＞＜!-- header --＞
＜div id="logo"＞
＜a href="http://www.google.co.jp/" target="_blank"＞
＜img src="google.gif" width="128" height="53" alt="google" /＞googleへ
＜/a＞
*target="_blank"と指定すると、リンクをクリックした時、別ウィンドウで表示されます。*
*＜a href=＞と＜/a＞に、＜img＞タグとテキスト「googleへ」が囲まれているので、図形とテキストのどちらをクリックしても、指定先(href)にジャンプします。*
*width="128"図形の幅を128pxに height="53"高さを53pxにします。*
*幅と高さを指定しないと元の大きさで表示されます。*
*どちらか一つだけを指定すると、もう一つは自動的に計算されます。*
*alt="google" altはalternativeの略で、二者択一、代替手段の意味*
*図形が表示されない環境で、"google"という文字が代替される*
*目が見えない人には、特別のソフトにより、"google"という音が発音される*
*altの指定は最重要課題。*
*特に説明の必要がない→アイコンなどは、alt=""でも可。*
＜/div＞＜!-- logo終了 --＞
＜div id="hright"＞
＜span class="menutytle"＞■メインメニュー■＜/span＞
*spanは期間、幅という意味ですが、授業では範囲と訳しています。divとほぼ同じ意味。*
*divはブロックレベル要素、spanはインライン要素*
*class。授業では名前と訳していますが、idとほぼ同じ意味。*
*idは一つのHPで１回しか使えないが、classは何回も使える。*
＜ul＞
＜li＞＜a href="css11.htm"＞１章へ＜/a＞＜/li＞
＜li＞＜a href="css21.htm"＞２章へ＜/a＞＜/li＞
＜li＞＜a href="css31.htm"＞３章へ＜/a＞＜/li＞
＜li＞＜a href="css41.htm"＞４章へ＜/a＞＜/li＞
＜/ul＞
*ul。unordered list。順序なしのリスト。*
*li。list　item。リスト項目。*
*表示は以下のようになります。*
*・１章へ*
*・２章へ*
*・３章へ*
*テキスト「１章へ」は＜a href="css11.htm"＞と＜/a＞で囲まれているので、
下線が引かれ、クリックするとcss11.htmにジャンプする。*
＜p＞
*＜p＞パラグラフ、段落。前後に空白行が入る。*
《＜b＞私からのメッセージ＜/b＞》＜br /＞
*＜b＞bold、太字。*
*＜br /＞break、改行。*
＜b＞優しい心＜/b＞を、失わないでください。＜br /＞
＜b＞優しい心＜/b＞の人は、勉強してください。＜br /＞
Ｓｔｕｄｙ　ｆｏｒ　ｙｏｕｒｓｅｌｆ ， ａｎｄ　ｆｏｒ　ｙｏｕｒ　ｌｏｖｉｎｇ　ｓｏｍｅｂｏｄｙ．
＜/p＞
＜/div＞＜!-- hright終了 --＞
＜/div＞＜!-- header終了 --＞
＜div id="pagebody"＞＜!-- pagebody --＞
＜div id="navigation"＞＜!-- navigation --＞
＜span class="menutytle"＞■サブ　メニュー■＜/span＞
＜ul＞
＜li＞＜a href="css11.htm"＞１章１課へ＜/a＞css11.htm＜/li＞
＜li＞＜a href="css12.htm"＞１章２課へ＜/a＞css12.htm＜/li＞
＜li＞＜a href="css13.htm"＞１章３課へ＜/a＞css13.htm＜/li＞
＜/ul＞
＜/div＞＜!-- navigation終了 --＞
＜div id="content"＞＜!-- content --＞
＜!-- ============================== --＞
*この間は自由に変更しても、変な事は起こりません。*
＜!-- ============================== --＞
*＜div＞と＜/div＞のセットを変更するのは慎重に*
＜/div＞＜!-- content終了 --＞
*＜!-- コメント --＞の間はコメントなので、削除してもかまいません。*
＜/div＞＜!-- pagebody終了 --＞
＜div id="footer"＞＜!-- footer始まり --＞
*フッターの部分は全部削除しても大丈夫です。*
＜ul＞
＜li id="sitemap"＞　＜a href="map.htm"＞sitemap＜/a＞　＜/li＞
＜li id="info"＞　＜a href="bbs.htm"＞bbs＜/a＞　＜/li＞
＜/ul＞
*ここから*
＜a href="https://www7a.biglobe.ne.jp/~mkun/css/css.htm"＞
CSSファイルを利用したホームページの作成（インターネット上）にジャンプ＜/a＞←ここは削除してください。
*ここまで不要*
＜/div＞ ＜!-- footer終了 --＞
＜/body＞
＜/html＞

最後まで読んでいただいて、ありがとうございました。