ホームページの仕組み

(1)

分

かり

やすいホームページを

作ろう！

跡見学園女子大学

公開講座

文学部准教授

福田博同

(2)

1. ショートカットキー

2. ブログ等を試そう

3. ホームページの仕組み

4. XHTMLとCSS

5. W3C標準

6. 単語登録

• 5月12日

1. 見本に書き込む

2. スタイルで変更

3. 画像を作る

4. 音を作る

5. アップロードする

6. 分かりやすいホームページ

(3)

分かりやすいホームページを作ろう

2012年4月28日

レジュメ

１．ショートカットキー

入力の効率化、高齢者・障害者用、 Office のバージョンで操作が違うので、よく使うショートカットキーを示します。

２．ブログ等を試してみます

３．ホームページの仕組み

– ホームページ | ブログ | SNS 等の違い – HTMLの仕組みの理解休憩

１． XHTMLとCSS

XHTML文書とCSSの違いの理解 CSS：色や文字・レイアウトを指定する文書

２． W3C標準

高齢者・障害者にやさしい「世界標準」のXHTML文書のチェック方法を学びます。

３．単語登録

長い文字を1文字で呼び出す単語登録を学びます

(4)

分かりやすいホームページを作ろう

2011年5月14日

レジュメ

１．見本に書き込む見本のページの必要部分を書き直すことでホームページをつくります２．スタイルで変更スタイルシートで背景色を変えてみましょう３．画像を作る画像の作り方を学びます１．音を作るマイクで録音してみましょう２．アップロードする出来上がったホームページをアップしてみます３．まとめ

(5)

「色盲の人にもわかるバリアフリープレゼンテーション法」より岡部正隆･伊藤啓編よく使うショートカットキー ★スタート： Windowsキー（田キー） ★エクスプローラ：田にEキー ★画面切り替え： AltにTabキー ★漢字変換：スペースバー ★決定： Enterキー ★ファイル保存： CtrlにSキー ★別名保存： AltにFキー、Aキー ★終了： AltにF, XキーかCキー ★複写： CtrlにCキー ★切取： CtrlにXキー ★削除：範囲選択、Deleteキー ★貼付： CtrlにVキー ★復活： CtrlにZキー ★アドレス取得： AltにDキー ★ハイパーリンク： CtrlにKキー ★パソコン終了：田にUキー

(6)

ホームページ

と

ブログ

1. 元の文書、図、表、音、動画等を作る

2. HTML形式へ変換

3. 絵も音楽も文書もリンク

か埋め込み

4. プロバイダ等へファイル転送

5. ブラウザで読む

プロバイダ

つくる人

見る人

インターネット

目次へ

(7)

ホームページ

と

ブログ

1. サービス会社へメールアドレスで登録する

2. プロフィール等を設定

3. 指定方法に従って、画像、音楽、動画等を

アップロード

4. ブラウザで読む

プロバイダ

作る人

サービス会社

見る人

インターネット

(8)

ブログを作ろう

• 信用度

• セキュリティ

• アダルト不可

• 容量

• HTMLとCSSの変更

• スクリプト

• 独自ドメイン

• モバイル対応

• トラックバック

（リンクの自動通知）

• 広告非掲載

| 宣伝可

• RSS

(更新情報公開)

などで選択します。

サービス会社比較

目次へ

(9)

手続き

1. 安全なサイトから選ぶ

1. ブログ

例：

Hatena

ダイアリー

Blogger

Yahoo

!ブログ

twitter

2. SNS

例：

mixi

Facebook

Myspace

_(音楽系)

2. 申し込む、メールで確認、開設

3. 管理や設定でプロフィール設定

4. 日記を書く・投稿する

(10)

Hatena

ダイアリーで試してみよう

1. Hatena

ダイアリー

(リンク)

に行く

２．必要事項

を記入

(11)

Hatena

ダイアリーで試してみよう

3. 登録終了後、Hatenaダイアリーにログインする

(12)

Hatena

ダイアリーで試してみよう

5. 管理画面でデザインを選んだり

6. プロフィールを書きます

7. 記事を書きます

見本

(13)

Bloggerで試そう

1. Blogger

(link)

に

入ります

(14)

Bloggerで試そう

• Googleアカウント

取得後

Blogger

に入ります

• レイアウトやテンプレートで

カスタマイズ

します

ブログを表示してみましょう

_(例)

目次へ

(15)

本格的ホームページに挑戦

1. 元

の

文書

、

図

、

表

、

音

、

動画

等を

作る

2. HTML形式

へ

変換

3. 絵

も

音楽

も

文書

も

リンク

か埋め込み

4. スタイル

は

スタイルシートファイル

(CSS)

で

5. プロバイダ等

へ

ファイル転送

し

公開

プロバイダ

見る人

サイト開設者

見る人

インターネット

(16)

元の文書

• Editor

で

HTML文書

を書く

→

保存

• HTML-Editor

で書く

→

保存

• ワープロソフト

で書く

→

保存

→ 変換

• プレゼンテーションソフト

で

書く

→

保存

→ 変換

• 表計算ソフト

で

書く

→

保存

→ 変換

• ブログ

や

SNS

や

Wiki

で書く

→

Web上で書く

サイト開設者

目次へ

(17)

原図ファイル

拡張子

Web用ファイル

• ペイント形式で描く

ペイント

bmp, tif

gif, jpg, png

• ドロー形式で描く

Illustrator

ai, pdf, svgなど jpg, pdf, png, svg, tif等

Power Point

ppt

pdf に印刷 ○

HTMLで出力 ×

• 写真を撮る

tiff, bmp, jpg

jpgで出力

• スキャナーで写す

bmp, jpg, pdf

jpg, pdf

• PC画面を写す

bmp, jpg

jpgへ変換

詳細はノートを参照

サイト開設者

目次へ

(18)

音ファイル

拡張子

Web用ファイル

• 録音

マイク録音

WAV

ディジタル録音機

WAV, MP3

• DAW ソフトで作曲

Flashアニメーション FLA

SMILアニメーション BMP

3Dアニメーション

AVI

（代表的ファイル形式例を記載）

サイト開設者

Web用に変換

MP3, RA,

高スペック

PCと編集ソフトで変換

FLV, MPEG4-AVC/H.264 等

SWF, アニメーションGIF等

SMI

SWF, MPEG, MOV, QT, WMV等

目次へ

(19)

動画ファイル

拡張子

Web用ファイル

• ビデオ撮影

通常STD画質撮影 MPEG2,AVI

ハイビジョン

HVCSD撮影

MPEG4-AVC

• ソフトで描く

Flashアニメーション FLA

SMILアニメーション BMP

3Dアニメーション

BLENDほか

（代表的ファイル形式例を記載）

サイト開設者

コンバーターや編集ソフトで変換

QT, RM, SWF, WMV, H.264, MOV等

高スペック

PCと編集ソフトで変換

FLV, MPEG4-AVC/H.264 等

SWF, アニメーションGIF等

SMI

VRML, SWF,X3D等

目次へ

(20)

元のファイル

• 静止画

• ペイントソフトで描く

→

ファイル名

.jpg

• ドローソフトで描く

→

ファイル名

.jpg

• 動画

• Flashで描く

→ .swf

• Premiereで変換

→

.mpgや.gif(アニメ)

• Realで変換

→

.ｒｍ

• 音

• Midiソフトで作る

→

.mid

• 録音を

mp3で変換

→

.mp3

• Excel等

の直接変換

→ xml形式変換

サイト開設者

目次へ

(21)

HTML文書（ファイル名.html)

<html>

<head>

この文書の属性（著者だとかキーワードとか

スタイルとか）

</head>

<body>

見える部分図とかはすべてリンクで可能

</body>

</html>

サイト開設者

目次へ

(22)

HTML/XHTMLと CSS

（スタイルシート）

• HTMLは文書を、スタイルはCSSを使う。

– 理由：

文書と見映えの分離: アクセシビリティ、

SEO（検索エンジン対策）、メンテナンス性、

互換性

–

W3C（Webの仕様を決める団体）国際標準

• ユーザビリティ

/

筆者

目次へ

(23)

HTML, CSSのW3C標準チェック

1. W3C Markup Validation Service

2. Another HTML -lint gateway

/石野恵一郎氏

3. HAREL

/ NTT data

4. W3C CSS Validation Service

スタイルシートの検査

5. 色覚チェック

/ 岡部正隆氏、伊藤啓氏

6. aDesigner

/ 浅川千恵子氏グループ

7. W3Cフィード検証サービス

(RSS等の検査)

暗号化したページ

https

は

http

を1から3等で調べましょう目次へ

(24)

Head部例

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head>

<

title

>

ここにタイトルを書きます

</title>

<meta name=“

keywords

” content=“

キーワード１

,キーワード2

” /> <!-- 複数の場合,で区切

ります。漢字も_{OK -->}

<meta name=“

description

” content=“

ここにページの説明文を書きます

" /> <meta name=“

author

” content=“

ここにあなたの名を書きます

" />

<meta name=“

date

” content=“

2012年4月28日, 更新：2012年5月12日

" /> <meta http-equiv="Content-style-Type" content="text/css" />

<link rel="

stylesheet

" type="text/css" href="

konSiro120HdKotei.css

" media="tv,screen,print“ />

</head>

コメント文

(25)

Body部例

<

body

>

<

div

id="header">

<

img

src=“

zuNoName.jpg

” alt=“

説明文

”

width

=“44”

height

=“33” />

<a href=“index.html”>ト

ップページの名へ

_</a>

_{| <a href=“shumi.html”>趣味</a> | <a href=“nikki.html”>日記 </a>}

|<span class=“chu”>著者</span> </div> <div id="main">

<p>

<span class="chu">ここはトップページの名</span> </p>

<h2>

このページの見出し_</h2>

箇条書き

を書くときは

ul

を使います。下をみましょう

<br />

<ul> <li>ヘルプ集</li> <li>日記</li> </ul> </div> </body> </html>

DIVは一区切り

spanは、ある部分

図が出来たらファイル名を変えます

a hrefは、リンク

pは、段落

hは、階層

br / は改行

(26)

階層の理解

• フォルダ

yourhome

–

HTML文書

Index.html

• 図ファイル

: jpg

や

png

• 音

: mp3

や

mid

等

– フォルダ

mihon

• HTML文書

Index.html

• HTML文書

link.html等

• フォルダ

oto 等

– フォルダ

kyouzai

• HTML文書 Index.html • PDF文書

accessibleWebSiteMake.pdf

<a href=“mihon

/

index.html”>見本</a>

<a href=“mihon/oto/prelude1.mid”>音楽</a>

<a href=“

../

index.html”>トップへ</a>

(27)

単語登録

（良く使うフレーズ）

• CtrlにF10キー → W（単語登録） →

単語を入れ、読みを入れ、

ok

• <a href=“”> </a>

あ

（リンク）

• <img src=“” width=“” height=“” alt=“” align=“left” />

い

（画像；

srcはファイル名、

altは図の説明、align回り込み）

• <ul> <li> </li> </ul>

う

（箇条書きリスト）

• <ol> <li> </li> </ol>

お

（段落番号付きリスト）

• <p> </p>

ぴ

（段落）

• <hr />

ふ

（罫線）

• <br />

ぶ

（改行）

• <br clear=“all” />

ぶ

（回り込みクリアし改行）

• <li></li>

り

（リスト）

(28)

スタイルを選ぶ・作る

• 紺地に白文字・リンク黄色・文字

120%行間1.4

• 紺地に白文字・リンク黄色・Ⅱ型文字

120%行間1.4

• 薄肌地に黒文字・文字

120%行間1.4

詳細はスタイルシートを勉強する必要があります

Header

main

_menu

_main1

_Main２

_menu

(29)

元ファイル作成方法

• 図：ペイントソフト

で

描く

→ 拡張子pngとかjpg

• 図：ドローソフト

で

描く

• 図：携帯カメラ等

で

写す

→ jpgで送る

• 動画：

Flash

で

描く

• 動画：ビデオ

を

Real形式

や

Flash形式

に

変換

(30)

元ファイル作成方法

• 音：

MIDIソフト

で

作

る

• 音：録音

→ mp3変換

• データベース：

Excel, Access→ Webページ

で

保存

• 電子文書：

word

や

一太郎

や

PowerPoint

を

Acrobat

で

印刷

=PDF文書

(31)

元ファイル作成

方法：

図ペイントで描く

スタート（

Windowsキー）

プログラム

(pキー)

アクセサリー

ペイント

(32)

ペイント

キャンバスサイズ、円の書き方

キャンパス色とサイズ

円や四角等の書きかた

(33)

ペイント

スプレーとバケツ

スプレー

バケツ

円と色

(34)

ペイント

保存

ファイル

別名保存

保存場所

デスクトップ

自分のフォルダ

zuのフォルダ

ファイル種類

すべてにして

拡張子

jpg

！

bmpではない

動画等様々な「作り方」はArtNaviの「

インターネットプレゼンテーション入門

」を

目次へ

(35)

静止画像の埋め込み方

ArtNavi1 → ユーザビリティ → Webサイト作成→

HTMLファイル作成 → 図の埋め込み

を参照

• 静止画の作成

• ペイントソフト

• ドローソフト

• カメラで撮影

• OCRで読み込む

• パソコン画面を複写

目次へ

(36)

元ファイル作成

方法：

音ファイル

ArtNavi1 → 芸術工房 → 音楽 →

「作ろう♪インターネットで芸術音楽を」

ＭＭＬで作曲

MIDIで作曲

録音と音の編集

目次へ

(37)

音声・動画の埋め込み方

ArtNavi1 → ユーザビリティ → Webサイト作成→ HTML

ファイル作成

→ 音・動画の埋め込み

を参照

・

リンク再生

・

音

(MIDI)埋め込み

・

音

(MP3)埋め込み

・

動画の埋め込み

・

動画

(RealMedia)埋め込み

・

動画

(Flash)埋め込み

・

動画

(YouTube)埋め込み

(38)

アップロードする

1. メール

アドレス

が必要

2. 安全な無料サイトから選ぶ

–

Yahoo Geocities

Google apps

等

3. 申し込み、メールで確認、

開設

4. 管理や設定で

プロフィール

設定

5. ファイル転送

FFFTP

などのソフト

で

転送

(39)

セキュアページ

:

緑の

https

等

• ウィルスページ

の

被害

に

あわせない

よう

– 口座番号

や本人特定情報を暗号化するサービスを選択

– 信頼できる「認証局」

を選ぶ

• 信頼できる「認証局」も偽証明書を発行したことがある

– オランダの

DigiNotar事件（記事：

INTERNET WATCHより

)

– 偽

OCN事件(記事：

フィッシング対策協議会

)

• チェックする習慣を

(40)

分かりやすいホームページ

• ターゲットを絞る

– 日常日記だけ

– 多趣味でも１つの趣味だけ

• ほかの趣味は、それぞれ違うサイトに

• 1ページに詰め込まない

–

ALTAIR(

link

)で朗読してもらって5分以内

目次へ授業終了：ご不明な点はartnvi8200＠yahoo.co.jp

ホームページの仕組み

分

かり

やすいホームページを

作ろう！

跡見学園女子大学

公開講座

文学部准教授

福田博同

目次

1.

ショートカットキー

2.

ブログ等を試そう

3.

ホームページの仕組み

4.

XHTMLとCSS

5.

W3C標準

6.

単語登録

1.

見本に書き込む

2.

スタイルで変更

3.

画像を作る

4.

音を作る

5.

アップロードする

6.

分かりやすいホームページ

分かりやすいホームページを作ろう

2012年4月28日

レジュメ

１． ショートカットキー

２． ブログ等を試してみます

３． ホームページの仕組み

１． XHTMLとCSS

２． W3C標準

３． 単語登録

分かりやすいホームページを作ろう

2011年5月14日

レジュメ

ホームページ

と

ブログ

1. 元の文書、図、表、音、動画等を作る

2. HTML形式へ変換

3. 絵も音楽も文書もリンク

か埋め込み

4. プロバイダ等へファイル転送

5. ブラウザで読む

プロバイダ

つくる人

見る人

見る人

インターネット

ホームページ

と

ブログ

1. サービス会社へメールアドレスで登録する

2. プロフィール等を設定

3. 指定方法に従って、画像、音楽、動画等を

アップロード

4. ブラウザで読む

プロバイダ

作る人

サービス会社

見る人

インターネット

ブログを作ろう

• 信用度

• セキュリティ

• アダルト不可

• 容量

•

HTMLとCSSの変更

１．ショートカットキー

２．ブログ等を試してみます

３．ホームページの仕組み

３．単語登録

4. 日記を書く・投稿する

_(例)