2007/06/25
高校生のためのHP検索上位HIT術27号 2007/6/25
★☆★☆★ 高校生のためのHP検索上位HIT術27号 2007/6/25 CSSファイルを使ったホームページの作成 ★☆★☆★ ■CSSファイルを使ったホームページの作成■ ■三郷北高校の「情報A」の授業の内容を公開します。 ホームページビルダーはCSSファイルに対応していないので、使いません。 変更は「NoEditor」といテキストエディタを使っています。 「NoEditor」は以下の窓の杜 - NoEditorで、無料で取得できます。 http://www.forest.impress.co.jp/lib/offc/document/txteditor/noeditor.html ●マイクロソフトのExpression Webは、CSSファイル対応のHP作成ソフトで、 学生向けのアカデミック版の価格は9800円です。（通常版が3万7800円） これを使うのは良いと思いますが、 説明はテキストエディタを使う事を前提としています。 ■見本の準備 http://www7a.biglobe.ne.jp/~mkun/css/css.htm に行って、１２個のHTMLファイルと、１個のCSSファイルを 一つのフォルダに保存してください。 下にスクロールして、１〜１３の作業を行ってください。 ●この時、生徒が良く間違えるのは、 １〜１２のHTMLファイルを開いた後で、すぐにIEから保存作業を行う事です。 必ず、IEの場合、上のほうの「表示」→「ソース」として、 表示されたHTMLソースを、メモ帳などのテキストエディタから、 「ファイル」→「名前をつけて保存」としてください。 ●この１２個のHTMLファイルと、１個のCSSファイルを、 適当なテキストエディタで変更していきます。 ■css11.htm（HTMLファイル）の解説 ●以下にcss11.htmの内容と★解説★を書きます。 理解できない事はメールか掲示板に書き込んでください。 mkun5love@gmail.com http://www2.rocketbbs.com/625/aikoi.html ●css11.htmの内容と★解説★ <html lang="ja">★使用言語はja日本語★ <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <meta http-equiv="Content-Style-Type" content="text/css"> <meta name="ROBOTS" content="NOINDEX" /> <title>ここは１１。タイトルは重要</title> ★<title></title>の中に検索で使われそうなキーワードを入れて、★ ★なおかつ、人間の興味を引くような文章に書き直してください。★ <link rel="stylesheet" href="base.css" type="text/css" /> ★スタイルシートに「base.css」を使うという宣言です。★ </head> <body>★ここからが、基本的にIEなどのブラウザに表示される部分です。★ ★divはdivisionの略で、分割された区分という意味ですが、授業では範囲と訳しています。★ ★idはid番号のidですが、授業では名前と訳しています。★ ｜<div id="header"><!-- header -->★<!-- -->の中はコメントで、実効性はありません。★ ｜★結局、上の文は「header」という名前の範囲がここから始まる。という意味です。★ ｜｜<div id="logo">★ここから「logo」という名前の範囲が始まる。という意味です。★ ｜｜<a href="http://www.google.co.jp/" target="_blank"><img src="google.gif" width="128px" ｜｜height="53px" alt="google" border="0"></a> ｜｜<br clear="both"> ｜｜googleへ ｜｜</div><!-- logo終了 --> ｜★ここで、「logo」という名前の範囲が終わります。 ｜｜<div id="hright">★ここから「hright」という名前の範囲が始まる。という意味です。★ ｜｜★hrightはheaderのrightという、私の造語です。 ｜｜<ul><span class=menutytle>■メインメニュー■</span> ｜｜<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> ｜｜<p> ｜｜《<B>私からのメッセージ</B>》<br /> ｜｜<b>優しい心</b>を、失わないでください。<br /> ｜｜<b>優しい心</b>の人は、勉強してください。<br /> ｜｜Ｓｔｕｄｙ ｆｏｒ ｙｏｕｒｓｅｌｆ ， ｜｜ａｎｄ ｆｏｒ ｙｏｕｒ ｌｏｖｉｎｇ ｓｏｍｅ ｂｏｄｙ． ｜｜</p> ｜｜</div><!-- hright終了 --> ｜★ここで、「hright」という名前の範囲が終わります。 ｜</div><!-- header終了 --> ★ここで、「header」という名前の範囲が終わります。 ★以下、<div>と</div>の対応を線で結んでください。★ ★次のような構造になっています。 ｜<body> ｜ ｜｜<div id="header"> ｜｜ ｜｜｜<div id="logo"> ｜｜｜</div> ｜｜ ｜｜｜<div id="hright"> ｜｜｜</div> ｜｜ ｜｜</div> ｜ ｜｜<div id="pagebody"> ｜｜ ｜｜｜<div id="navigation"> ｜｜｜</div> ｜｜ ｜｜｜<div id="content"> ｜｜｜</div> ｜｜ ｜｜</div> ｜ ｜｜<div id="footer"> ｜｜<div id="footer"> ｜ ｜</body> ★画面上では次のような構成になっています。★ ｜―body――――――――――――――――― ｜ ｜ ｜｜―header―――――――――――――｜｜ ｜｜―――― ――――――――――― ｜｜ ｜｜｜logo｜ ｜hright ｜ ｜｜ ｜｜｜ ｜ ｜■メインメニュー■｜ ｜｜ ｜｜―――― ――――――――――― ｜｜ ｜｜―――――――――――――――――｜｜ ｜ ｜ ｜｜―pagebody――――――――――｜ ｜ ｜｜――――――― ―――――― ｜ ｜ ｜｜｜navigation｜ ｜content ｜ ｜ ｜ ｜｜｜■サブ■ ｜ ｜<h1></h1>｜ ｜ ｜ ｜｜――――――― ―――-――− ｜ ｜ ｜｜―――――――――――――――｜ ｜ ｜ ｜ ｜｜―footer――――――――――――｜ ｜ ｜｜ ｜ ｜ ｜｜――――――――――――――――｜ ｜ ｜ ｜ ｜―――――――――――――――――――― <div id="pagebody"><!-- pagebody --> <div id="navigation"><!-- navigation --> <ul><span class=menutytle>■サブ メニュー■サブ メニュー</span> <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 --> <!-- ============================== -->★ここから★ ★各ページ毎に違う部分です、★ <h1>１章１課★中略★</h1> <br /> <h2>今回だけ★中略★</h2> <p> ★中略★ </p> <br /> <h2>あなたのする★中略★</h2> <p> ★中略★ </p> <p> ★中略★ </p> <!-- ============================== -->★ここまでを修正★ </div><!-- content終了 --> </div><!-- pagebody終了 --> <div id="footer"><!-- footer --> ★中略★ </div> <!-- footer終了 --> </body> </html> ----- 【次回の内容】 ■１２個のHTMLファイルと、１個のCSSファイルの解説。 原則、授業１時間分がメルマガ１号分になると思います。 ----- ========== M君の３つのメルマガ １【愛＞恋＞好きの物語】 高校生の恋愛物語 ２【高校生のためのHPアクセスアップ、検索上位HIT術】 「就職率の良い短大」「二次式の因数分解」「二次不等式の解法」 「バンクバンド」「１０００円札の謎」「検索 上位HIT」 を検索してみてください。M君のHPが上位でHITします。 この経験を基に、検索結果での優先順位のしくみを解説します。 ３【高校の英単語、数学、理科、社会、国語、進路情報】 勉強が好きになるノウハウ集。 「イースター島の神マケマケ」「女の子の名前の名付け方」 を検索してみてください。進路情報などもあります。 ========== 私のHP「グーグル検索とヤフー検索で上位HIT」 http://www7a.biglobe.ne.jp/~mkun/google/index.htm 以下のＨＰに４月３日以降の更新のリストがあります。 http://www7a.biglobe.ne.jp/~mkun/other/new.htm ご感想・ご要望は下記のいずれかへ。 mkun5love@gmail.com http://www2.rocketbbs.com/625/aikoi.html mixiの私のアドレス mixi.jp/show_friend.pl?id=5377274 ========== 配信中止は http://www.mag2.com/m/0000198720.html ==========
