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. ホームページの作成が主題です。
  • 費用:無料
  • 場所:三郷北高校 パソコン教室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で1回しか使えないが、classは何回も使える。*
<ul>
<li><a href="css11.htm">1章へ</a></li>
<li><a href="css21.htm">2章へ</a></li>
<li><a href="css31.htm">3章へ</a></li>
<li><a href="css41.htm">4章へ</a></li>
</ul>
*ul。unordered list。順序なしのリスト。*
*li。list item。リスト項目。*
*表示は以下のようになります。*
*・1章へ*
*・2章へ*
*・3章へ*
*テキスト「1章へ」は<a href="css11.htm">と</a>で囲まれているので、
下線が引かれ、クリックするとcss11.htmにジャンプする。*
<p>
*<p>パラグラフ、段落。前後に空白行が入る。*
《<b>私からのメッセージ</b>》<br />
*<b>bold、太字。*
*<br />break、改行。*
<b>優しい心</b>を、失わないでください。<br />
<b>優しい心</b>の人は、勉強してください。<br />
Study for yourself , and for your loving somebody.
</p>
</div><!-- hright終了 -->
</div><!-- header終了 -->
<div id="pagebody"><!-- pagebody -->
<div id="navigation"><!-- navigation -->
<span class="menutytle">■サブ メニュー■</span>
<ul>
<li><a href="css11.htm">1章1課へ</a>css11.htm</li>
<li><a href="css12.htm">1章2課へ</a>css12.htm</li>
<li><a href="css13.htm">1章3課へ</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="http://www7a.biglobe.ne.jp/~mkun/css/css.htm">
CSSファイルを利用したホームページの作成(インターネット上)にジャンプ</a>←ここは削除してください。
*ここまで不要*

</div> <!-- footer終了 -->
</body>
</html>

最後まで読んでいただいて、ありがとうございました。
↑CSSファイルを使ったホームページの作成2の一番上へ↑