情報科学A

第8回 HTMLの基礎1

1情報科学A 第8回 HTMLの基礎1

文字を装飾させWebページを作成

情報科学A 第8回 HTMLの基礎12

今日やること

3情報科学A 第3回 HTMLの基礎1

練習１ 画像の表示（P.68）

「images」フォルダーがなければ作成し、

hansyaro.jpgをstuサーバよりダウンロードし

ておく

次ページを参考にページを作成する

</body>の直前行に以下を追加

<img src=“images/hansyaro.jpg”>

完成Webページは次ページ

ファイル名：Practice8-1.html

前回のやり方を参考に

4情報科学A 第3回 HTMLの基礎1

見出し（h1）

太字

日付の指定

強調

ファイル名：Practice8-1.html

5情報科学A 第8回 HTMLの基礎1

簡単なWebページの作成（P.52～）

先週のドキュメントを参考に、下のように表

示できるドキュメントを作成しましょう（ファイ

ル名をSample8-1.html）

6

簡単なWebページの作成

構文の意味は教科書（P.52～P.56）の通り

今作成したSample8-1.htmlを教科書を参考

に、下のように修正させましょう。

見出し（h1）

引用

定義語、略語のマークアップ

引用<q>

著作権要素

見出し（h1）

見出し（h1）

7情報科学A 第8回 HTMLの基礎1

簡単なWebページの作成

構文の意味は教科書（P.57）の通り

今作成したSample8-1.htmlを教科書を参考

に、下のように修正させましょう。

マーキング

8情報科学A 第8回 HTMLの基礎1

簡単なWebページの作成（P.52）

今作成したSample8-1.htmlの下に追加する

構文の意味は教科書（P.58～P.61）の通り

ルビ

下付き文字

上付き文字

9情報科学A 第8回 HTMLの基礎1

Excelグラフの挿入外国ISPと交換されるトラヒック（in/out）の

推移をグラフにする（平成21～25年）

グラフは折れ線グラフとする

http://www.soumu.go.jp/johotsusintokei/whitepaper/ja/h26/html/nc255320.html

ファイル名：Data8-1.xlsx データはここから↓

10情報科学A 第8回 HTMLの基礎1

Excelグラフの挿入Excelをアクティブにしておき、

「Fn+Alt+PrtSc」でキャプチャする

「ペイント」を立ち上げ、「Ctrl+v」でペースト

グラフだけ切り取り「Ctrl+c」でコピー

「ペイント」で新規作成し、 「Ctrl+v」でペー

スト

「images」フォルダに「Data8-1.jpg」で保存

※使用するPCによってキャプチャ方法が異なる場合がある

11情報科学A 第8回 HTMLの基礎1

練習2Data8-1.jpgを使用して下のようなページを

作成しましょう。 ファイル名：Practice8-2.html

<h1>

日付

定義、略語のマークアップ強調

太字

コピーライト表記

Data8-1.jpg

Webを使ってデータを収集しまとめる

12情報科学A 第8回 HTMLの基礎1

小課題次の条件を全て満たしたWebページを作成し

ましょう。（ファイル名：Syo_Kadai8-1.html）

トピックはなんでもOK。

タブにタイトルを付けること<title> 見出し要素を付けること<h1> 日付の表示<time> 略語のマークアップ<dfn> マーキング<mark> ルビ<ruby> 強調<em><strong> 画像を表示させる（Webなどから） Excelでデータをまとめグラフにしてグラフを挿入する

次回授業開始前までにstuサーバ

に提出

13情報科学A 第8回 HTMLの基礎1

小課題

サンプル