博物館情報論メディア論レポート３ ○○○○学科

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>見本ページは http://nodaiweb.university.jp/muse/joho̲mihon/hval.html

以下の部分は提出 pdf には不要
課題：オリジナルのウェブページを作成して１）データフォルダを提出、２）ページイメージとソースをワードに貼り付け pdf で提出、３）余力があれば教室でページを投影して紹介する
提出先：授業用フォルダ＞提出用＞メディア論 2021。授業時に提出できない場合は教務掲示のレポート提出
提出期限：データフォルダと発表は 7 月 15 日授業まで。pdf は 7 月 29 日まで。質問は対面で対応する
データフォルダ 名称：media2021̲web̲学籍番号、html、スタイルシート、画像のすべてのファイルを含むこと
pdf 名称：media2021̲web̲漢字氏名、「提出見本」の１­２ページに準じること
表 作成したページのソースを貼り付け。フォントサイズ8pt以上、行間を調節して片面に収める
裏 作成したページのスクリーンショット（ページ全体を入れ、ウインド枠まで含める、ウインドの形や文字サイズを調節してA4に収める。ウインド上端のURLは全部表示されるように窓の巾を調節し、かつ右窓の右端近くにカーソルを置きページタイトルがすべて表示された状態でスクリーンショットを撮ること）
ウェブページの内容：本文400‒800字程度、図版２点以上を含み、適切なデザイン・レイアウト、文章と写真はオリジナルな作品で適切にトリミングすること。内容は自由。
＊ソースは独自ページを作成するための見本です。文章と写真、ページタイトルなどはオリジナルのこと。

博物館情報メディア論レポート３の作業手順
１．準備作業
１）アプリの立ち上げ使用するアプリは、ブラウザ「クローム」、エディタ「メモ帳」、ファイル管理「エクスプローラー」の３つ。メモ
帳は左下の窓アイコン＞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

https://murashun.jp/article/programming/html/html-writing.html

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

http://sakichin.com/chapter01/chapter01̲step02̲02.html

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

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