第8回 htmlの基礎1 - sugisaki/old/2016/pre/8class/...文字を装飾させwebページを作成...
TRANSCRIPT
![Page 1: 第8回 HTMLの基礎1 - sugisaki/old/2016/pre/8class/...文字を装飾させWebページを作成 情報科学A 第8回HTMLの基礎1 2 今日やること 情報科学A 第3回HTMLの基礎1](https://reader036.vdocuments.us/reader036/viewer/2022081613/5fbb7744ad8e241677589d8d/html5/thumbnails/1.jpg)
情報科学A
第8回 HTMLの基礎1
1情報科学A 第8回 HTMLの基礎1
![Page 2: 第8回 HTMLの基礎1 - sugisaki/old/2016/pre/8class/...文字を装飾させWebページを作成 情報科学A 第8回HTMLの基礎1 2 今日やること 情報科学A 第3回HTMLの基礎1](https://reader036.vdocuments.us/reader036/viewer/2022081613/5fbb7744ad8e241677589d8d/html5/thumbnails/2.jpg)
文字を装飾させWebページを作成
情報科学A 第8回 HTMLの基礎12
今日やること
![Page 3: 第8回 HTMLの基礎1 - sugisaki/old/2016/pre/8class/...文字を装飾させWebページを作成 情報科学A 第8回HTMLの基礎1 2 今日やること 情報科学A 第3回HTMLの基礎1](https://reader036.vdocuments.us/reader036/viewer/2022081613/5fbb7744ad8e241677589d8d/html5/thumbnails/3.jpg)
3情報科学A 第3回 HTMLの基礎1
練習1 画像の表示(P.68)
「images」フォルダーがなければ作成し、
hansyaro.jpgをstuサーバよりダウンロードし
ておく
次ページを参考にページを作成する
</body>の直前行に以下を追加
<img src=“images/hansyaro.jpg”>
完成Webページは次ページ
ファイル名:Practice8-1.html
前回のやり方を参考に
![Page 4: 第8回 HTMLの基礎1 - sugisaki/old/2016/pre/8class/...文字を装飾させWebページを作成 情報科学A 第8回HTMLの基礎1 2 今日やること 情報科学A 第3回HTMLの基礎1](https://reader036.vdocuments.us/reader036/viewer/2022081613/5fbb7744ad8e241677589d8d/html5/thumbnails/4.jpg)
4情報科学A 第3回 HTMLの基礎1
見出し(h1)
太字
日付の指定
強調
ファイル名:Practice8-1.html
![Page 5: 第8回 HTMLの基礎1 - sugisaki/old/2016/pre/8class/...文字を装飾させWebページを作成 情報科学A 第8回HTMLの基礎1 2 今日やること 情報科学A 第3回HTMLの基礎1](https://reader036.vdocuments.us/reader036/viewer/2022081613/5fbb7744ad8e241677589d8d/html5/thumbnails/5.jpg)
5情報科学A 第8回 HTMLの基礎1
簡単なWebページの作成(P.52~)
先週のドキュメントを参考に、下のように表
示できるドキュメントを作成しましょう(ファイ
ル名をSample8-1.html)
![Page 6: 第8回 HTMLの基礎1 - sugisaki/old/2016/pre/8class/...文字を装飾させWebページを作成 情報科学A 第8回HTMLの基礎1 2 今日やること 情報科学A 第3回HTMLの基礎1](https://reader036.vdocuments.us/reader036/viewer/2022081613/5fbb7744ad8e241677589d8d/html5/thumbnails/6.jpg)
6
簡単なWebページの作成
構文の意味は教科書(P.52~P.56)の通り
今作成したSample8-1.htmlを教科書を参考
に、下のように修正させましょう。
見出し(h1)
引用
定義語、略語のマークアップ
引用<q>
著作権要素
見出し(h1)
見出し(h1)
![Page 7: 第8回 HTMLの基礎1 - sugisaki/old/2016/pre/8class/...文字を装飾させWebページを作成 情報科学A 第8回HTMLの基礎1 2 今日やること 情報科学A 第3回HTMLの基礎1](https://reader036.vdocuments.us/reader036/viewer/2022081613/5fbb7744ad8e241677589d8d/html5/thumbnails/7.jpg)
7情報科学A 第8回 HTMLの基礎1
簡単なWebページの作成
構文の意味は教科書(P.57)の通り
今作成したSample8-1.htmlを教科書を参考
に、下のように修正させましょう。
マーキング
![Page 8: 第8回 HTMLの基礎1 - sugisaki/old/2016/pre/8class/...文字を装飾させWebページを作成 情報科学A 第8回HTMLの基礎1 2 今日やること 情報科学A 第3回HTMLの基礎1](https://reader036.vdocuments.us/reader036/viewer/2022081613/5fbb7744ad8e241677589d8d/html5/thumbnails/8.jpg)
8情報科学A 第8回 HTMLの基礎1
簡単なWebページの作成(P.52)
今作成したSample8-1.htmlの下に追加する
構文の意味は教科書(P.58~P.61)の通り
ルビ
下付き文字
上付き文字
![Page 9: 第8回 HTMLの基礎1 - sugisaki/old/2016/pre/8class/...文字を装飾させWebページを作成 情報科学A 第8回HTMLの基礎1 2 今日やること 情報科学A 第3回HTMLの基礎1](https://reader036.vdocuments.us/reader036/viewer/2022081613/5fbb7744ad8e241677589d8d/html5/thumbnails/9.jpg)
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 データはここから↓
![Page 10: 第8回 HTMLの基礎1 - sugisaki/old/2016/pre/8class/...文字を装飾させWebページを作成 情報科学A 第8回HTMLの基礎1 2 今日やること 情報科学A 第3回HTMLの基礎1](https://reader036.vdocuments.us/reader036/viewer/2022081613/5fbb7744ad8e241677589d8d/html5/thumbnails/10.jpg)
10情報科学A 第8回 HTMLの基礎1
Excelグラフの挿入Excelをアクティブにしておき、
「Fn+Alt+PrtSc」でキャプチャする
「ペイント」を立ち上げ、「Ctrl+v」でペースト
グラフだけ切り取り「Ctrl+c」でコピー
「ペイント」で新規作成し、 「Ctrl+v」でペー
スト
「images」フォルダに「Data8-1.jpg」で保存
※使用するPCによってキャプチャ方法が異なる場合がある
![Page 11: 第8回 HTMLの基礎1 - sugisaki/old/2016/pre/8class/...文字を装飾させWebページを作成 情報科学A 第8回HTMLの基礎1 2 今日やること 情報科学A 第3回HTMLの基礎1](https://reader036.vdocuments.us/reader036/viewer/2022081613/5fbb7744ad8e241677589d8d/html5/thumbnails/11.jpg)
11情報科学A 第8回 HTMLの基礎1
練習2Data8-1.jpgを使用して下のようなページを
作成しましょう。 ファイル名:Practice8-2.html
<h1>
日付
定義、略語のマークアップ強調
太字
コピーライト表記
Data8-1.jpg
![Page 12: 第8回 HTMLの基礎1 - sugisaki/old/2016/pre/8class/...文字を装飾させWebページを作成 情報科学A 第8回HTMLの基礎1 2 今日やること 情報科学A 第3回HTMLの基礎1](https://reader036.vdocuments.us/reader036/viewer/2022081613/5fbb7744ad8e241677589d8d/html5/thumbnails/12.jpg)
Webを使ってデータを収集しまとめる
12情報科学A 第8回 HTMLの基礎1
小課題次の条件を全て満たしたWebページを作成し
ましょう。(ファイル名:Syo_Kadai8-1.html)
トピックはなんでもOK。
タブにタイトルを付けること<title> 見出し要素を付けること<h1> 日付の表示<time> 略語のマークアップ<dfn> マーキング<mark> ルビ<ruby> 強調<em><strong> 画像を表示させる(Webなどから) Excelでデータをまとめグラフにしてグラフを挿入する
次回授業開始前までにstuサーバ
に提出
![Page 13: 第8回 HTMLの基礎1 - sugisaki/old/2016/pre/8class/...文字を装飾させWebページを作成 情報科学A 第8回HTMLの基礎1 2 今日やること 情報科学A 第3回HTMLの基礎1](https://reader036.vdocuments.us/reader036/viewer/2022081613/5fbb7744ad8e241677589d8d/html5/thumbnails/13.jpg)
13情報科学A 第8回 HTMLの基礎1
小課題
サンプル