1月22日(水)2コマ目

今日、やったこと

リンク(<a>タグ)

今日のホワイトボード

リンク

リンクはクリックすると別ページが表示されたり、同じページの別の場所が表示される仕組み。

<a>タグのhref属性に移動先を指定する。

別ページを表示するリンク

下図のような２つのページ間を行き来できるリンクを作成。

図　2ページ間を行き来する

page1.html

"2ページ目へ"に<a>タグを追加。クリックするとpage2.htmlを表示するため、href属性にpage2.htmlを指定。

page2.html

"もどる"に<a>タグを追加。クリックするとpage1.htmlを表示するため、href属性にpage1.htmlを指定。


同じページ内にジャンプ

最近のWebページはスマホで見ることを前提としているので、タテに長い。
見たい内容にすぐ移動できるようにページトップに各項目へのリンクが用意されているケースが多い。

page3.html

移動先にidをつける。
<a>タグのhref属性は移動先のIDを指定。IDなので、#ID名になる。
図　同じページ内の別の場所へジャンプ

練習問題

ヒントです。
図　ヒント
トップページ(index.htmlと秋田犬のページ(akita.html)だけ正解例をあげておきます。

index.html


akita.html


次回は

画面のレイアウト


 

このブログの人気の投稿

1月15日(水)2コマ目

イメージ
今日、やったこと 表をつくる 今日のホワイトボード 表の行と列 行は横方向、列は縦方向。 図　表の行と列 表を作る <table>タグで表が始まり、</table>で表が終わる。 <tr>タグで行が始まり、</tr>で行が終わる。=> <tr>タグで行を作る <td>タグでセルが始まり、</td>でセルが終わる。=> <td>タグでセルを作る 図　<table>タグ、<tr>タグ、<td>タグ セルを結合する colspan=”セル数" で（セル数-1)個の右隣のセルを結合する。  rowspan=”セル数" で（セル数-1)個の下のセルを結合する。  〇結合前 図　結合前 〇colspanで右隣のセルを結合 結合すると、表からはみ出すセルがあるので注意！！ ※結合すると言うより、セルを追加して結合するイメージが正解。 図　colspanで右隣のセルを結合 〇rowspanで下側のセルを結合 colspanと同じように、結合すると表からはみ出すセルがあるので注意！！ 図　rowspanで下側のセルを結合 練習問題 正解例をあげておきます。 練習1 練習2 練習3 練習4 練習5 練習6 練習7 練習8 練習...
続きを読む

10月16日(水)2コマ目

イメージ
今日、やったこと [練習問題]ぼくの名前はソラタロウ 今日のホワイトボード [練習問題]ぼくの名前はソラタロウ 前回から2週間空いたため、リハビリをしながら練習問題をしてもらいました。 今日のタグ 改行の<br>タグ、横罫線の<hr>タグ、画像ファイル表示の<img>タグを使いました。 図　<br>タグ、<hr>タグ、<img>タグ 正解例をあげておきます。 次回は フォントの色や大きさを変えます。 
続きを読む

12月18日(水)2コマ目

イメージ
今日、やったこと HTMLファイルからデザイン設定を分離する 今日のホワイトボード HTMLファイルからデザイン設定を分離する 複数のHTMLファイルで同じデザインにするには<style></style>の中身を一緒にする必要がある。 が、1ファイルだけ編集を忘れたり、そもそも重複しているので無駄。 そこで、１つのファイル(style.css)にデザイン定義を行い、HTMLファイルはそのデザイン定義ファイル(style.css)を読み込む方法がよく使われる。 図　デザイン設定を別ファイルへ サンプル [変更前]HTMLファイル内でデザイン定義 今までと同じ。 [変更後]デザイン定義ファイル(style.css) <style></style>内のデザイン定義をこのファイルに引っ越し。 [変更後]HTMLファイル <style></style>を削除。 かわりにデザイン定義ファイルstyle.cssを読み込むために<link>タグを追加。 次回は 練習問題「ふぐ」のつづき。  
続きを読む