12月20日(水)2コマ目

今日、やったこと

  • [練習問題]表
  • 箇条書き

今日のホワイトボード

[練習問題]表

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

練習　その1


練習　その2


練習　その3


練習　その4


練習　その5


練習　その6


練習　その7


練習　その8


練習　その9

図　表の練習　その9



箇条書き

箇条書きは下表の<ul>タグと<li>タグを使います。

タグ 役割、意味
<ul>タグ 箇条書きの始まり、終わり
<li>タグ 箇条書きの各項目
図　箇条書きの<ul>タグ、<li>タグ


箇条書きのマーカー

<ul>タグに項目名”list-style-type”でマーカーの種類を指定できます。

デフォルトは●。

図　箇条書きのマーカーを変更

以下は箇条書きのマーカーは○に変更。



以下は２つの箇条書きのマーカーをそれぞれ変更。


次回は

年明けです。

箇条書きのおさらい＋練習問題からスタート予定。


 

このブログの人気の投稿

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...
続きを読む

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 次回は 評価用課題を作ってもらいます。 身近な出来事や自分の趣味や好きなことなど自分でテーマを決めてホームページを作ってもらいます。
続きを読む

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にて甲斐犬の写真をクリック...
続きを読む