11月29日(水)2コマ目

 今日、やったこと

  • [練習問題]ペンギン
  • [練習問題]ふぐ
  • [練習問題]クジラ

今日の練習問題

正解例を挙げておきます。

[練習問題]ペンギン

練習１

HTML

変更なし。

style.css


練習2

HTML

３つの<p>タグにIDを設定。


style.css


練習3

HTML

３つの<p>タグのうち上と下の<p>タグには同じクラスを設定。


style.css


練習4

HTML

変更なし。

style.css


練習5

HTML

変更なし。

style.css


練習6

HTML

変更なし。

style.css


練習7

HTML

変更なし。

style.css


練習8

HTML

変更なし。

style.css


[練習問題]ふぐ

演習１

style.css


演習2

style.css


演習3

style.css


演習4

style.css


演習5

style.css


演習6

style.css


演習7

style.css


[練習問題]クジラ

style.css


次回は

評価用課題を作ってもらいます。

身近な出来事や自分の趣味や好きなことなど自分でテーマを決めてホームページを作ってもらいます。


このブログの人気の投稿

10月4日（水）2コマ目

イメージ
今日、やったこと ホームページはなにでできている？ HTML タグ 簡単なHTMLファイル作成 画像を表示する 今日のホワイトボード ホームページはなにでできている？ ホームページはWebブラウザ(Google Chrome、Microsoft Edge、Apple Safari等)を使って表示する。このWebブラウザはHTMLファイルの中身をHTMLのルールに従って表示する。 ということで、 　 ホームページを作る = HTMLファイルを作る です。 HTML Hyper Text Markup Languageの略。 HTMLはデータに意味を持たせるためのタグを決めている。 データにこのタグを使って意味づけをしたファイルがHTMLファイル。 結局、この授業はHTMLのタグを理解して使いこなすことが目的。 なお、HTMLファイルのファイル名は～.html。.htmlをつけることでこのファイルはHTMLファイルだと認識される。 図　WebブラウザとHTMLファイル タグの基本 <h1>がタグ。HTMLではいろいろなタグが定義されている。 タグには役割が決められている。 <h1>タグは見出し。 <p>タグは段落。 多くのタグは開始タグ(<h1>や<p>)と終了タグ(</h1>や</p>)がペアになっている。 <h1>と</h1>で挟まれたデータが見出しになる。見出しなので、Webブラウザは大きな字で表示する。 図　HTMLのタグ HTMLファイルの構造 HTMLファイルは<html>タグで始まり、</html>タグで終了する。 <html>と</html>の中に ヘッダー部になる<head>タグと</head>タグ 本文部になる<body>タグと</body>タグ がある。 Webブラウザに表示されるのは<body>～</body>。 図　HTMLファイルの構造 画像を表示する 画像ファイルを表示するには<img>タグを使う。 <img>タグにはsrc属性があり、このsrc属性で表示したい画像ファイル名を指定する。 wi...
続きを読む

1月17日(水)2コマ目

イメージ
今日、やったこと リンク 今日のホワイトボード リンク リンクとはクリックすると別ページを表示したり、同じページの別の場所を表示する仕組み。 <a>タグで作ります。<a>タグのhref属性で移動先を指定します。 別ページに移動する場合 <a>タグのhref属性に移動先ファイルを指定します。 図　<a>タグで別ページへ移動 同じページ内で移動する場合 まず、移動先にIDを指定します。 <a>タグのhref属性には移動先のIDを指定します。IDの指定は　 #ID名 　です。 図　<a>タグで同じページ内を移動 target属性 リンクをクリックして移動する際、移動先ページを同じタブに表示するか、新規タブに表示するかコントロールできる。 target属性値 表示 _blank 新規タブに表示 _self デフォルト。同じタブに表示 練習問題 リンクの課題ですが、テーブルも使っています。 図　練習問題　ヒント 正解例をあげておきます。 1ページ目(index.html) 写真は表形式(2行x3列)で表示。 リンクの表示内容を写真にすることで、写真をクリックすると各犬の説明ページへ移動。 秋田犬のページ(akita.html) index.htmlにて秋田犬の写真をクリックすると表示される秋田犬のページ。 説明は横方向に2セルを結合したセル。colspan属性で結合を指定。 甲斐犬のページ(kai.html) index.htmlにて甲斐犬の写真をクリック...
続きを読む