1-1:準備
基本用語
ドメインの取得
スペースの確保
デザインを考える
SEOを考える
2-1:HTMLの記述
htmlファイルの作り方
HTMLの基本骨格
HTMLの種類、META、言語
タイトルと著作権情報
文の構成を考える
画像の表示
リンクの設定
2-2:CSSの記述
CSSのHTMLへの組み込み
クラスの概念
文字の色とフォント
幅と高さの設定
文章の設定
文字の間隔・線
背景色・背景画像
2-3:CGI/アップロード
掲示板(BBS)の設置
カウンターの設置
サーバーへのアップロード
アクセス解析の導入
3:divでのレイアウト
divタグの使い方(前編)
リストの設定
divタグの使い方(後編)
インライン要素とブロック要素
floatの使い方
スクロールボックスの作成
アンカー(a)のスタイルの変更
4:tableでのレイアウト
Tableの構造を知る
Tableスタイルの変更
Tableでサイトを作る(前編)
Tableでサイトを作る(後編)
5:positionでのレイアウト
positionの構造を知る
HTMLファイル(原本)作成
positionで位置を決める
6:その他のテクニック
強調タグを使う
サムネイルの作成
三次元化する
スクロールバーの色を変える
7:Javascriptを使用する
プルダウンメニュー
(フォーム使用)の作成
プルダウンメニュー
(CSS使用)の作成
>>ホームページの作り方TOP >>リンクの設定
リンクは文字だけでなく、画像にも設定することができます。まずは最も基本的な構造を示します。<a href="">と</a>でくくるだけです。
<a href="sample.html">文字</a> <a href="http://www.google.ne.jp/">文字</a> <a href="../file/sample.html">文字</a> <a href="#nn">同一ページ内リンク</a> <a href="sample.html#nn">同一フォルダ内リンク</a> <a href="../file/sample.html#nn">別のフォルダ内へリンク</a> <a name="nn">フラグ</a> <a href="mailto:hamayu@nifty.com">メーラー起動</a> <a href="aaa.zip">ダウンロード</a> |
リンクで注意しないといけないのが階層です。
同じフォルダ内のページにリンクするのであればいいのですが、Aというフォルダから Bというフォルダの中のページにリンクしたい場合は、一番下のように記述します。
「..」は一つ前の階層に戻ることを意味するので 、一つ前に戻ってからfileという名前のフォルダのなかのsample.htmlを参照しています。
同一ページ内や他のフォルダのページ単位のリンクではなく、特定の場所へ飛ぶ場合は、 リンクボタンの方にはアドレスとリンク先で定義された名前を書き、リンク先にはフラグを立てておきます。
こうすることで 同一ページ内リンクという文字を押すとフラグという文字にリンクされます。
ここまでのサンプル
これを使用して先のページにリンクメニューを設置します。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html;charset=shift_jis"> <meta http-equiv="description" content="初心者が作るページです。"> <meta http-equiv="keywords" content="wakabagari,若葉狩り"> <title>Wakabagari(若葉狩り)</title> </head> <body> <img src="sho1.gif" alt="wakabagari" width="280" height="50"> |<a href="">HOME</a>|<a href="">PROGRAMING</a>|<a href="">TRAVEL</a>|<a href="">DISEASE</a>|<a href="">BBS</a>| <h1>Wakabagari</h1> <img src="fuukei1.jpg" alt="風景写真" width="500" height="180"> <h2>意味</h2> <p> 若葉狩りというのは紅葉狩りの若葉バージョンです。つまり、若葉を見に行くみたいなのりです。ただ、本来の意味は別のところ にあります。それは何かというと、みなさんは自動車につける若葉マークをご存知でしょうか?あれって初心者がつけますよね? ここまでくればわかるでしょう。すべてにおいて初心者なので、HPにくること=若葉狩りにくることみたいになるでしょう? それがこのサイト名の意味です。 </p> <h2>目的</h2> <p> 目的はというと、特にはないです。が、あえていえば、紅葉マークをつけることでしょうかね。自動車だってはじめは若葉マークだけど 1年後にマークははずれ、高齢者になると紅葉マークになるでしょう?それと一緒ですね。 <p> <address>Copyright(C)2007 Wakabagari all rights reserved.</address> </body> </html> |
講座内の画像を使って勉強したい場合は、右クリック→名前をつけて保存を選んでください。
ここまでのサンプル