本日は都合により 1915 までの退室お願いします

第９講

ウェブページの作成

１．ウェブページと言葉

博物館情報・メディア論2023

5914

6/28水3‒4時限はCP演習室で動画編集と撮影

１）ウェブページ
日本では「ホームページ」と呼ぶことが多い。ウェブページを閲覧するアプリ（ソフト）がブラウザ browser。
browse: 動詞 牛や鹿が木の新芽や若葉をちょんちょんっと食べる、下を向いて草を食べるは graze。エッジ
Edge やクローム Chrome は商品名。
２）ウェブサイト
ウェブページの意味のある集まり
３）ホームページ
本来はブラウザ立ち上げ時に開くページのこと。

2．ウェブページの仕組み
１）テキストデータ
ウェブページの本体はテキストデータ。そこに画像や映像がリンクされており、ブラウザで見るとおなじみのイメージになる。エディタ（Winだとメモ帳）で文章を作り、拡張子をhtmlで保存すればブラウザで開ける。
２）専用アプリとCMS
専用アプリ（たとえばホームページビルダー）は、OS付属のファイル閲覧アプリ、ブラウザ、エディタを一体化したもの。逆にいえば、この３つのアプリをきちんとレイアウトして開けば十分に使える。
htmlの記述を避けるため、あるいは複数人でウェブサイトを更新場合は、デザインや操作感を統一するためCMS（Contents Management System）を用いることが多い。WordPressが圧倒的シェア。農大公式サ
イトはConcrete5。CMSはサーバ側での対応が必要。
３）原始的タグ打ち
パソコン付属無料アプリだけで作成可能。重要な点は、ファイル閲覧アプリ、ブラウザ、エディタのウィンドをきちんとレイアウトして開いておくこと

３．画像
１）使える形式はjpgとpng、gifiPhoneのheicは使えない。
２）画像は適正サイズに加工する
写真はカメラのデータをそのまま使うとファイルサイズが大きく、ページの読み込みが遅くなるので、適切なピクセルサイズに変更する。それとは別に、ページ上での表示サイズをhtmlで書き込む。
３）拡張子は一致のこと
jpgについて拡張子は３桁のjpgと４桁のjpegの２種類が通用している。機能は同一だが、リンクの指定などの場合は一致が必要。１文字でも異なっているとリンクが無効になる。

４．動画
１）動画のページ埋め込み
サーバ内の動画やYouTube動画の埋め込みも可能。下のURLを参照
博物館情報メディア論レポート５：見本ページ

https://nodaiweb.university.jp/muse/data/webpages2022/49X20000/

２）使える形式はmp4とYouTube標準形式のmp4が使える。外部サイトのYouTubeを埋め込むことも可能。

５．参考サイト
１）タグの基本
HTMLの基本構成｜さきちんWEB

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

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

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

２）動画の埋め込みHTMLに動画埋め込みする方法を徹底解説！コピペできるサンプルコード付き - WEBCAMP MEDIA
https://web-camp.io/magazine/archives/75915

３）Chromeデベロッパーツール
無料のブラウザ（インターネット閲覧ソフト）Chromeでhtmlやcssの編集ができます。他人が作成したページも擬似的に編集できます。下のページの説明が親切です。
Google Chromeデベロッパーツールの基本的な使い方をわかりやすく解説
https://willcloud.jp/knowhow/dev-tools-01/【初心者必見】まずはこれだけ！デベロッパーツールの使い方【chrome】 - mogaBlog
https://mogablog.work/web/cording-console/【レポート５】オリジナルのウェブページを作成し、必要なファイルがすべて入ったフォルダを提出する
フォルダ名称：学籍番号（半角）、htmlファイルの名称：index.html
ウェブページの構成：本文200字以上、図版や動画２点以上。文章と図版動画はオリジナルのこと
ウェブページの内容：自由。ただし、公序良俗［こうじょりょうぞく］に反しないこと
画像ファイルのピクセルサイズは長辺1280px以下、埋め込み動画はおおよそ20MB以下とし、htmlファイルで適切なサイズを記述のこと

提出先：授業用フォルダ＞提出用＞メディア論2023
提出期限：６月２２日（木）授業時間
公開：提出されたウェブページは学生向けにインターネット公開します。そのつもりで作成してください。
著作権を侵害している、あるいは公序良俗に反していると認めた作品は非公開とし、提出放棄と見なします。
作成手順はmedia2023̲9-2.pdfおよびmedia2023̲9-3.pdfを参照。
昨年の提出作品

https://nodaiweb.university.jp/muse/data/webpages2022/webpages2022.html

博物館情報メディア論レポート５の作業手順
１．準備作業
１）アプリの立ち上げ使用するアプリは、ブラウザ「クローム」、エディタ「メモ帳」、ファイル管理「エクスプローラー」の３つ。
メモ帳は左下の窓アイコン＞Windowsアクセサリ、または左下ルーペアイコンで「メモ帳」を検索する
２）窓設定
モニタ右半分をクローム、左上2/3をワード、左下1/3をエクスプローラーに割り当てる。メモ帳は次で３）ローカルディスクに専用のフォルダを作成、適切なフォルダ名を与える
エクスプローラーで My document のフォルダの適切な場所（フォルダ）に専用のフォルダを作成する。フォルダ名は学籍番号（半角）とする。ファイルやフォルダの名称は半角英数字のみ使用、大文字や禁止記号は使わない
２．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＞
２）フォルダの選択
保存先はあらかじめ作成しておいた学籍番号フォルダ。あるいはこの段階で、適切なフォルダを選択＞新しいフォルダー「学籍番号」を作成
３）ファイル名の変更
エクスプローラーで見ると先ほど保存したファイルが「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/jpeg, gif, png。
２）画像ファイルの選択
エクスプローラーから画像ファイルを選択＞右クリック＞プログラムから開く
３）画像サイズの設定
ペイントの左上「サイズ変更」＞ピクセルを選択＞水平方向または垂直方向の一方だけを入力する＞OK
画像サイズが大きすぎると読み込みに時間が掛かるので長辺 1280px 以下とする
４）画像ファイルの保存
ペイントの左上「ファイル」＞名前を付けて保存＞上述３­６）で与えた名称にする（拡張子も忘れずに）
保存場所はフォルダー「学籍番号」。拡張子は元ファイルと同じこと（ただし、jpeg と jpg は交換可能）
６．スタイルシートの設定
１）データ取得
メモ帳の左上「ファイル」＞新規＞クロームに戻り、URLに
http://nodaiweb.university.jp/muse/joho̲mihon/design-1.css と入力（またはこのURLをクリック）＞全選択 Ctrl + A ＞コピー Ctrl
+ C ＞メモ帳「編集」＞貼り付け、または右クリック＞貼り付け＞
２）ファイル保存
メモ帳＞ファイル＞名前を付けて保存＞ファイル名：design-1.css、ファイルの種類：テキスト文書、文字コー
ド：UTF-8 保存場所はフォルダー「学籍番号」
３）スタイルの確認クロームで再読み込みする。正しく設定していれば背景色や見出し、画像の位置が設定される
４）カスタマイズ
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"> スマホ対応用のタグ