このページの短縮URL(リンク用) 第09章:サイトの作成とハイパーリンク – オンライン無料パソコン講座 | PCセミナー

第09章:サイトの作成とハイパーリンク

第09章:サイトの作成とハイパーリンク」の学習内容です。

§09-01…サイトの作成とハイパーリンク・準備

(01) これからはサイトの構築を想定し、サイト内でページとページをリンクする方法を学習します。あなたがこれから作るサイトのコンテンツを保存するためのローカルフォルダー「ストロベリーショップ」をディスク内に作成してくださ...

§09-02…リンクの設定<a>

(01) 「index.htm」内の本文「愉快なスタッフ」をクリックしたら、「stuff.htm」に切り替わるようにリンクを設定します。文字列にリンク設定をする場合には、その文字列を<a>タグで囲みます。bo...

§09-03…リンク個所にCSSを設定

(01) リンク個所(<a>タグ内)の背景色を「#FFFF00」にします。以下のようなCSSを追加・更新してから各ページをブラウジングしてください。 a{ background-color:#FFFF00; ...

§09-04…下層ディレクトリの作成

(01) ひとつのフォルダーだけでWebページやCSSファイルなどを管理しても良いのですが、あまりファイル数が増えてくると管理が大変になります。そこでファイルを分別するフォルダー(ディレクトリ)を二つ作成します。イチゴ狩...

§09-05…上位ディレクトリから下位ディレクトリへのリンク

(01) このサイトのトップページ「index.htm」から、「gari」ディレクトリ内にある「garimain.htm」へのリンクを設定します。リンク文字列は「イチゴ狩り」です。下層ディレクトリのファイルを指定するには...

§09-06…下位ディレクトリから上位ディレクトリへのリンク

(01) 今度は逆に「garimain.htm」から上位ディレクトリにある「index.htm」へのリンクを設定します。上位のディレクトリにあるファイルをリンク先とするにはhref属性の値を「../ファイル名」とします。...

§09-07…上のディレクトリ内の他の下層ディレクトリへのリンク

(01) 今度は「seihin」ディレクトリ内に以下のようなソースのページ「seihinmain.htm」を作成してください。完成後はブラウジングしてください。 <?xml version="1.0" encodi...

§09-08…メールアドレスをリンク先にする

「access.htm」の「メールによるお問い合わせ」のリンク先をメールアドレス「xyz@exsample.com」にします。メールアドレスをリンク先にする際にはhref属性の値を「mailto:メールアドレス」とします...

§09-09…FFFTPを使った転送

(01) フリーソフトの「FFFTP」を使って、作成した「ストロベリーショップ」フォルダー内のコンテンツを全てWebサーバー・Webスペースに発行・転送します。「FFFTP」をインストールしている状態で、起動してください...