レポート２の提出期限は 6/22（水） 明日 6/17（金）3‒4 時限は美幌博物館の見学
バスロータリーに停車中のバスに乗車して集合

第10講

7/7は休講博物館情報・メディア論2022

ウェブページの作成

１．ウェブページ
１）ウェブページ

Blenderのデータを保存した／保存するはずだったフォルダを開いて待機

日本では「ホームページ」と呼ぶことが多い。ウェブページを閲覧するアプリ（ソフト）がブラウザ browser:browse 動詞 牛や鹿が木の新芽や若葉をちょんちょんっと食べる、下を向いて草を食べるは graze。エッジ
Edge やクロームj Chrome は商品名。
２）ウェブサイト
ウェブページの集まり
３）ホームページ
本来はブラウザ立ち上げ時に開くページのこと。
2．ウェブページを作る
１）テキストデータ
ウェブページの本体はテキストデータ。そこに画像や映像がリンクされており、ブラウザで見るとおなじみのイメージになる。エディタで文章を作り、拡張子をhtmlで保存すればブラウザで開ける。
２）専用アプリ専用アプリ（たとえばホームページビルダー）は、OS付属のファイル閲覧アプリ、ブラウザ、エディタを一体化したもの。逆にいえば、この３つのアプリをきちんとレイアウトして開けば十分に使える。
３）CMSの使用
WordPressが圧倒的シェア。農大公式サイトはConcrete5。ほかにもある
４）原始的タグ打ち
重要な点は、ファイル閲覧アプリ、ブラウザ、エディタのウィンドをきちんとレイアウトして開いておくこと
３．実際の作り方
次ページ以降【レポート３】
課題：オリジナルのウェブページを作成し、必要なファイルがすべて入ったフォルダを提出する
フォルダ名称：学籍番号（半角）、html ファイルの名称：index.html
ウェブページの構成：本文200字以上、図版２点以上、文章と図版は著作権を守ること
ウェブページの内容：自由。ただし、公序良俗［こうじょりょうぞく］に反しないこと＊ソースは独自ページを作成するための見本です。文章と写真、ページタイトルなどはオリジナルのこと。
提出先：授業用フォルダ＞提出用＞メディア論 2022＞レポート３
提出期限：7 月 14 日授業時間
公開：提出されたウェブページはインターネットで公開します。そのつもりで作成してください。著作権を侵害している、あるいは公序良俗に反していると認めた作品は非公開とし、提出放棄と見なします博物館情報論メディア論レポート３ ○○○○学科 00000000（学籍番号）□□ □□（氏名）データ見本<html><head><meta name="viewport" content="width=480"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta http-equiv="Content-Style-Type" content="text/css"><title>博物館情報メディア論レポート３：見本ページ</title><link rel="stylesheet"
type="text/css"
href="design-1.css"><style type="text/css"><!-body--></style></head><body><h1>博物館情報メディア論レポート３：見本ページ</h1><h2>季刊・北方圏129号掲載（2004）ノルウェーのクジラと捕鯨を巡る旅</h2><img src="hval3-1.jpeg" width="255" height="169" class="pright" alt="捕鯨者の像（サンデフィヨルド）"><p>2004年８月に訪問したノルウェーとストックホルムの旅行情報です。以前に北方圏センターが発行する『季刊・北方圏』129号（2004）に「ノルウェーのクジラと捕鯨を巡る旅」と口絵グラビア「捕鯨の国ノルウェー」として発表したものです。記事では博物館の展示や旅行情報も紹介しました。下のリンクで記事が読めます。
<br><small>写真：捕鯨者の像（サンデフィヨルド）</small></p><p>
訪問地は、オスロ Oslo、ドラーメン Dramen、テンスベルク Tønsberg、サンデフィヨルド Sandefjord、ベルゲン Bergen、ノーランド県チョッタ Tjotta i Norland、ロフォーテン諸島 Rofoten、ストックホルム
Stockholmなどです。日本の鯨類学のパイオニア小川鼎三『鯨の話』（中央公論社）で紹介されたヴェストフォ
ル県立博物館やストックホルム自然史博物館、Ｅ・シュライパー『鯨』（東京大学出版会）で「もっとも古い鯨類の絵」として紹介のあるロドイ Rødøy の岩壁、スコゲルヴェイン Skogerveienの岩絵を訪ねてきました。岩
絵の現場を日本語で紹介した、おそらく唯一の報告と思います。</p><img src="hval4-1.gif" width="255" height="284" class="pright" alt="ノルウェー訪問地地図"><p>見本ページの作成時の文字コードは「シフトＪＩＳ」だったため、去年までは地名が一部文字化けしていました。 ø が「ｿ」になっていたのです。現在は「UTF‒8」に変更したので大丈夫です。インターネットのノルウェ
ー情報は当然ですが圧倒的にノルウェー語が多く、英語での検索では十分な結果が得られません。地名などはノルウェー語で検索されると良い結果が得られますので、あえて原語を記載しています。なお、岩絵は英語ではペトログリフ petroglyph、ノルウェー語では helleristningerです。</p><p>
岩絵の場所を探すには、現地で求めた文献が役立ちました。</p><p><a href="http://nodaiweb.university.jp/muse/unisan/data/norsk/norskmuse.html" target="̲blank">本文とグラビア（別ページで開きます）</a></p><p>＜文献目標＞<br>宇仁義和．2004．ノルウェーのクジラと捕鯨を巡る旅．北方圏，129：12-15，口絵．北方圏センター．札幌．
</p>
<hr>
<div align="center"><small>Copyright (C) 2014 東京農業大学・博物館情報学研究室（オホーツクキャンパス／北海道）</small></div></body></html>レポートの提出はフォルダ。
このウェブページのフォルダの内容は下のとおり
hval.html
hval3-1.jpeg"
hval4-1.gif
見本ページは http://nodaiweb.university.jp/muse/joho̲mihon/hval.html

博物館情報メディア論レポート３の作業手順
１．準備作業
１）アプリの立ち上げ使用するアプリは、ブラウザ「クローム」、エディタ「メモ帳」、ファイル管理「エクスプローラー」の３つ。メモ
帳は左下の窓アイコン＞Windowsアクセサリ、または左下ルーペアイコンで「notepad」を検索する
２）窓設定
モニタ右半分をクローム、左上2/3をワード、左下1/3をエクスプローラーに割り当てる。メモ帳は次で３）ローカルディスク（手元のパソコン）に専用のフォルダ「media2021̲web̲学籍番号」を作成
ウェブサイトで使用するファイルやフォルダの名称は半角英数字のみ使用、大文字は使わない
３）フォルダの作成
エクスプローラーで My document にフォルダの適切な場所（フォルダ）に「media2021̲web̲学籍番号」
２．htmlソースのダウンロードと貼付
１）ブラウザ（クローム）で「博物館情報学研究室オリジナルサイト」を開く
２）URLに http://nodaiweb.university.jp/muse/joho̲mihon/hval.html と入力Enterを押す。
あるいは本pdfのURLをクリックしてページを表示する。入力の場合、研究室トップページのURLの末尾に青字部分を追記すればOK。 「 ̲ 」（アンダーバー）は半角／英数字モードでシフト＋ろキー
３）画面のどこかで右クリック＞ページのソースを表示、表示テキストを全選択 Ctrl + Ａ してコピー Ctrl + C４）コピーしたテキストをメモ帳に貼り付け
５）メモ帳＞書式＞右端で折り返す、を選択。見づらい場合はフォントを游ゴシックなどに変更してよい
３．htmlファイルの保存（エディタとファイル管理アプリ「エクスプローラー」）
１）ファイル名の設定
メモ帳＞ファイル＞名前を付けて保存
ファイル名：index.html
ファイルの種類：テキスト文書（*.txt）
右下の文字コード＞UTF-8＞
２）フォルダの選択
保存先はあらかじめ作成しておいた、media2021̲web̲学籍番号
あるいはこの段階で、適切なフォルダを選択＞新しいフォルダー「media2021̲web̲学籍番号」を作成
３）ファイル名の変更
エクスプローラーで見ると先ほど保存したファイルが「index.txt」になっているので「index.html」に書き換える
アラートが出るが「はい」をクリック
４）ブラウザによる確認
エクスプローラーから index.html を右クリック＞
プログラムから開く＞Google Chrome
リボンの場合、ホーム＞貼り付け＞右端のアイコン、マウスでは、右クリック＞テキストのみ保持

４．htmlファイルの作成（エディタ「メモ帳」での作業） 先に５や６に進んでもよい１）ページタイトルの書き換え 上から４行目 <title><と/title> で囲まれた文字列を書き換える
２）見出しの書き換え 上部の <h1>と</h1> と <h2>と</h2> で囲まれた文字列を書き換える <p>と</p> が段落に相当する。 <p>と</p> 内部での改行は <br> のタグを入れる
３）本文の置き換え 複数箇所ある <p>と</p> で囲まれた文章を自作文章に置き換える。
４）ハイパーリンクの設定 下部にある<a href="http://nodaiweb.university.jp/muse/unisan/data/norsk/norskmuse.html" の URL（青色部分）を目指すページのものに置き換える。「本文とグラビア」の部分を目的とするページタイトルまたは適切な名称にする
５）署名の設定 最下部の <small>と</small>で囲まれた文字列を適切に書き換える
６）画像の設定 見本では２か所<img src="hval3-1.jpeg" width="255" height="169" class="pright" alt="捕鯨者の像（サンデフィヨルド）"><img src="hval4-1.gif" width="255" height="284" class="pright" alt="ノルウェー訪問地地図">
画像のファイル名は hval3-1.jpeg および hval4-1.gif であるので、適切な名称に書き換える。
画像の表示サイズは width="255" height="169" と width="255" height="284" であるので適切に設定する。幅のみ、高さのみの設定も可能。両方設定した場合、縦横比の変化に注意する。
画像の名称（＝読み上げソフトによる音声に反映される）は alt="捕鯨者の像（サンデフィヨルド）" と alt="ノルウェー訪問地地図" であるので適切な名称とする。
画像の配置は class="pright" としている。これは後述のスタイルシートで設定する。このままであれば右寄せになる。左寄せ pleft、中央寄せ pcenter
５．画像ファイルの設定と保存
１）画像ファイルのコピー
ウェブページで用いる写真や図の画像ファイルを選択し、フォルダー「media2021̲web̲学籍番号」にコピーする。
選択可能なファイル形式は jpg, gif, png。
２）画像ファイルの選択
エクスプローラーから画像ファイルを選択＞右クリック＞プログラムから開く
３）画像サイズの設定
ペイントの左上「サイズ変更」＞ピクセルを選択＞水平方向または垂直方向の一方だけを入力する＞OK
画像サイズが大きすぎると読み込みに時間が掛かるので長辺 1024px 以下とする
４）画像ファイルの保存
ペイントの左上「ファイル」＞名前を付けて保存＞上述３­６）で与えた名称にする（拡張子も）保存場所はフォルダー「media2021̲web̲学籍番号」
拡張子は元ファイルと同じこと（ただし、jpeg と jpg は交換可能）
６．スタイルシートの設定
１）データ取得
メモ帳の左上「ファイル」＞新規＞クロームに戻り、URLに
http://nodaiweb.university.jp/muse/joho̲mihon/design-1.css と入力（またはこのURLをクリック）＞全選択 Ctrl + A ＞コピー Ctrl

+ C ＞メモ帳「編集」＞貼り付け、または右クリック＞貼り付け＞
２）ファイル保存
メモ帳＞ファイル＞名前を付けて保存＞ファイル名：design-1.css、ファイルの種類：テキスト文書、文字コー
ド：UTF-8 保存場所はフォルダー「media2021̲web̲学籍番号」
３）スタイルの確認クロームで再読み込みする。正しく設定していれば背景色や見出し、画像の位置が設定される
４）カスタマイズ
body{padding-left:25px; padding-right:25px; color:#000000; background-color:#ffffee}

color:#000000 文字色、６桁の数字はRGBの輝度
background-color:#ffffee 背景色、６桁の数字はRGBの輝度
ネットのカラーコード一覧表などを参考に設定してみる
HTML,CSS カラーコード一覧表 ｜ 背景色や文字色の設定

http://www.netyasun.com/home/color.html

h1{font-size:x-large; color:#990000;}h2{font-size:small; padding:2px; background-color:#ffdead}h3{font-size:small}font-size: 文字の大きさ。ここでの設定は相対値
padding 余白
span.name {font-weight:bold} <span>〜</span>で囲った部分をインライン要素としてグループ化する
p{line-height:160%}
line-height 行間設定

hr{height:2px color:#cc9900}
水平線。height: 高さ、color: 色

img.pleft{float:left; margin-right:12px; margin-bottom:6px}

img.pright {float:right; margin-right:12px; margin-bottom:6px}
img.pcenter {display:block; margin-left:auto; margin-right:auto}
画像の位置。float:left 左寄せ、float:right; 右寄せ
６．htmlファイルの修正
１）メモ帳での立ち上げ
エクスプローラーから index.html を右クリック＞プログラムから開く＞別のプログラムを選択＞メモ帳２）クロームでの立ち上げ
エクスプローラーから index.html を右クリック＞プログラムから開く＞Google Chrome３）修正の方法 左上のメモ帳で修正＞保存 Ctrl + S ＞クロームで再読み込みして確認 繰り返す
画像サイズや縦横比などを正しく（思ったとおりに）修正＊重要 <meta name="viewport" content="width=480"> スマホ対応用のタグ
タグについては次のページを参考にしてくださいHTML の書き方 | murashun.jp

HTMLの基本構成｜さきちんWEB

https://murashun.jp/article/programming/html/html-writing.html
http://sakichin.com/chapter01/chapter01̲step02̲02.html

はじめてのhtml入門 文字の色の変え方 - ほぷしぃ

http://www.isl.ne.jp/it/html/html̲005.html