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

作ろう！

跡見学園女子大学 公開講座

文学部准教授 福田博同

平成24年4月28日、5月12日

プレゼンタープレゼンテーションのノート分かりやすいホームページを作ろう！

目次

• 4月28日

1. ショートカットキー

2. ブログ等を試そう

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

4. XHTMLとCSS

5. W3C標準

6. 単語登録

• 5月12日

1. 見本に書き込む

2. スタイルで変更

3. 画像を作る

4. 音を作る

5. アップロードする

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

プレゼンタープレゼンテーションのノート4月28日ショートカットキーホームページの仕組みブログ等を試そうXHTMLとCSSW3C標準単語登録

5月12日見本に書き込むスタイルで変更画像を作る音を作るアップロードするまとめ

分かりやすいホームページを作ろう 2012年4月28日 レジュメ

１． ショートカットキー

入力の効率化、高齢者・障害者用、

Office のバージョンで操作が違うので、

よく使うショートカットキーを示します。

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

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

– ホームページ | ブログ | SNS 等の

違い

– HTMLの仕組みの理解

休憩

１． XHTMLとCSS

XHTML文書とCSSの違いの理解

CSS：色や文字・レイアウトを指定する文書

２． W3C標準

高齢者・障害者にやさしい「世界標

準」のXHTML文書のチェック方法を

学びます。

３． 単語登録

長い文字を1文字で呼び出す

単語登録を学びます

分かりやすいホームページを作ろう 2011年5月14日 レジュメ

１． 見本に書き込む

見本のページの必要部分を書き直すことで

ホームページをつくります

２． スタイルで変更

スタイルシートで背景色を変えてみましょう

３． 画像を作る

画像の作り方を学びます

１． 音を作る

マイクで録音してみましょう

２． アップロードする

出来上がったホームページをアップしてみます

３． まとめ

「色盲の人にもわかるバリアフリープレゼンテーション法 」より 岡部正隆･伊藤啓編

よく使うショートカットキー

★スタート： 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キー

プレゼンタープレゼンテーションのノートよく使うショートカットキー

★スタート：　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キー

http://night.nig.ac.jp/color/http://night.nig.ac.jp/color/

ホームページとブログ

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

2. HTML形式へ変換

3. 絵も音楽も文書もリンクか埋め込み

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

5. ブラウザで読む

プロバイダ

つくる人

見る人

見る人 インターネット

目次へ

プレゼンタープレゼンテーションのノートホームページとブログホームページ元の文書、図、表、音、動画等を作るHTML形式へ変換絵も音楽も文書もリンクか埋め込みプロバイダ等へファイル転送ブラウザで読む

ホームページとブログ

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

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

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

アップロード

4. ブラウザで読む

プロバイダ

作る人

サービス会社

見る人 インターネット

目次へ

プレゼンタープレゼンテーションのノートブログサービス会社へメールアドレスで登録するプロフィール等を設定指定方法に従って、画像、音楽、動画等をアップロードブラウザで読む

ブログを作ろう

• 信用度 • セキュリティ • アダルト不可 • 容量 • HTMLとCSSの変更 • スクリプト • 独自ドメイン

• モバイル対応 • トラックバック

（リンクの自動通知）

• 広告非掲載 | 宣伝可 • RSS

(更新情報公開)

などで選択します。

サービス会社比較

目次へ

プレゼンタープレゼンテーションのノートでは、ブログを作りましょう。自分でつくる方法もありますが、無料ブログサービスを選びましょう。

サービス会社とサービス内容が重要です。信用度セキュリティ アダルト不可容量HTMLとCSSの変更スクリプト独自ドメイン

モバイル対応 トラックバック（リンクの自動通知） 広告非掲載 | 宣伝可RSS (更新情報公開)

などで選択します。

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

1. ブログ 例： Hatenaダイアリー Blogger Yahoo!ブログ twitter

2. SNS 例： mixi Facebook Myspace (音楽系)

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

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

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

5. コメント、トラックバックに返信、スパム管理 目次へ

プレゼンタープレゼンテーションのノートメールアドレスが必要安全な無料サイトから選ぶ　Hatena Diary BloggerYahoo!ブログ等（見本:筆者）（見本:筆者）(見本 yahoo! Japan)　　申し込み、メールで確認、開設管理や設定でプロフィール設定日記を書く ・投稿するコメント、トラックバックに返信、スパム管理

http://d.hatena.ne.jp/http://d.hatena.ne.jp/http://d.hatena.ne.jp/https://accounts.google.com/ServiceLogin?service=blogger&ltmpl=start&hl=ja&passive=86400&continue=http://www.blogger.com/homehttp://blogs.yahoo.co.jp/http://blogs.yahoo.co.jp/http://blogs.yahoo.co.jp/https://twitter.com/https://mixi.jp/https://www.facebook.com/index.php?stype=lo&lh=Ac-PqmardOfSfDA7http://jp.myspace.com/

Hatenaダイアリーで試してみよう 1. Hatenaダイアリー(リンク)に行く

２．必要事項を記入

目次へ

プレゼンタープレゼンテーションのノートメールアドレスが必要安全な無料サイトから選ぶ　Hatena Diary BloggerYahoo!ブログ等（見本:筆者）（見本:筆者）(見本 yahoo! Japan)　　申し込み、メールで確認、開設管理や設定でプロフィール設定日記を書く ・投稿するコメント、トラックバックに返信、スパム管理

http://d.hatena.ne.jp/http://d.hatena.ne.jp/http://d.hatena.ne.jp/

Hatenaダイアリーで試してみよう 3. 登録終了後、Hatenaダイアリーにログインする 4. ブログトップをクリックする

目次へ

プレゼンタープレゼンテーションのノートメールアドレスが必要安全な無料サイトから選ぶ　Hatena Diary BloggerYahoo!ブログ等（見本:筆者）（見本:筆者）(見本 yahoo! Japan)　　申し込み、メールで確認、開設管理や設定でプロフィール設定日記を書く ・投稿するコメント、トラックバックに返信、スパム管理

Hatenaダイアリーで試してみよう 5. 管理画面でデザインを選んだり 6. プロフィールを書きます 7. 記事を書きます 見本

目次へ

プレゼンタープレゼンテーションのノートメールアドレスが必要安全な無料サイトから選ぶ　Hatena Diary BloggerYahoo!ブログ等（見本:筆者）（見本:筆者）(見本 yahoo! Japan)　　申し込み、メールで確認、開設管理や設定でプロフィール設定日記を書く ・投稿するコメント、トラックバックに返信、スパム管理

http://d.hatena.ne.jp/artnavi/

Bloggerで試そう 1. Blogger(link)に

入ります • Googleアカウントに入ります

目次へ

https://accounts.google.com/ServiceLogin?service=blogger&passive=1209600&continue=http://www.blogger.com/home&followup=http://www.blogger.com/home&ltmpl=start

Bloggerで試そう • Googleアカウント

取得後Bloggerに入ります • レイアウトやテンプレートで

カスタマイズします ブログを表示してみましょう(例)

目次へ

http://artnavi.blogspot.jp/http://artnavi.blogspot.jp/http://artnavi.blogspot.jp/

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

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

2. HTML形式へ変換

3. 絵も音楽も文書もリンクか埋め込み

4. スタイルはスタイルシートファイル(CSS)で

5. プロバイダ等へファイル転送し公開

プロバイダ

見る人

サイト開設者

見る人 インターネット

目次へ

元の文書

• EditorでHTML文書を書く → 保存

• HTML-Editorで書く → 保存

• ワープロソフトで書く → 保存 → 変換

• プレゼンテーションソフトで書く→ 保存 → 変換

• 表計算ソフトで書く → 保存 → 変換

• ブログやSNSやWikiで書く → Web上で書く

サイト開設者

目次へ

原図ファイル 拡張子 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へ変換

詳細はノートを参照

サイト開設者

目次へ

プレゼンタープレゼンテーションのノートペイント形式で描く　　　　　　　　　　　拡張子Web用ファイル Photoshoppsd, bmp,tif等gif, jpg, pdf, png, svg等*Gimpbmp, psdgif, jpg, nmg, png, svg等　ペイントbmp, tifgif, jpg, png * Pixia*Az　Painter などドロー形式で描く Illustratorai, pdf, svgなど jpg, pdf, png, svg, tif等*Open Office.org : Draw Power Point ppt 　pdf　 に印刷　○　HTMLで出力　×*Open Office.org: Impress*Inkscape写真を撮るtiff, bmp, jpgjpgで出力

スキャナーで写すbmp, jpg, pdfjpg, pdf

PC画面を写すbmp, jpgjpgへ変換

* はフリーソフト

音ファイル 拡張子 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等

目次へ

動画ファイル 拡張子 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等

目次へ

元のファイル

• 静止画 • ペイントソフトで描く → ファイル名.jpg • ドローソフトで描く → ファイル名.jpg

• 動画 • Flashで描く → .swf • Premiereで変換 → .mpgや.gif(アニメ) • Realで変換 → .ｒｍ

• 音 • Midiソフトで作る → .mid • 録音をmp3で変換 → .mp3

• Excel等の直接変換 → xml形式変換

サイト開設者

目次へ

HTML文書（ファイル名.html) この文書の属性（著者だとかキーワードとか スタイルとか） 見える部分 図とかはすべてリンクで可能

サイト開設者

目次へ

HTML/XHTMLと CSS（スタイルシート）

• HTMLは文書を、スタイルはCSSを使う。 – 理由： 文書と見映えの分離: アクセシビリティ、 SEO（検索エンジン対策）、メンテナンス性、

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

• ユーザビリティ / 筆者

目次へ

http://www2.mmc.atomi.ac.jp/~artnavi1/help/index.htmlhttp://www2.mmc.atomi.ac.jp/~artnavi1/help/index.htmlhttp://www2.mmc.atomi.ac.jp/~artnavi1/help/index.html

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等で調べましょう

目次へ

プレゼンタープレゼンテーションのノートW3C Markup Validation ServiceAnother HTML -lint gateway /石野恵一郎氏HAREL / NTT dataW3C CSS Validation Service スタイルシートの検査色覚チェック / 岡部正隆氏、伊藤啓氏aDesigner / 浅川千恵子氏グループW3Cフィード検証サービス　(RSS等の検査)

暗号化したページ　httpsはhttpを1から3等で調べましょう

http://validator.w3.org/http://htmllint.itc.keio.ac.jp/htmllint/htmllint.htmlhttp://harel.nttdata.co.jp/wact/inputProc/inputUrlBL.dohttp://jigsaw.w3.org/css-validator/validator.html.jahttp://jfly.iam.u-tokyo.ac.jp/html/manuals/pdf/color_blind_J.ppthttp://www.eclipse.org/actf/downloads/tools/aDesigner/index.phphttp://validator.w3.org/feed/

Head部例

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

コメント文

目次へ

Body部例

ト

ップページの名へ | 趣味 | 日記 |著者

ここはトップページの名

このページの見出し 箇条書きを書くときはulを使います。下をみましょう
ヘルプ集 日記

DIVは一区切り

spanは、ある部分

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

a hrefは、リンク

pは、段落

hは、階層

br / は改行

目次へ

階層の理解 • フォルダ yourhome

– HTML文書 Index.html • 図ファイル: jpgやpng • 音: mp3やmid 等

– フォルダ mihon

• HTML文書 Index.html • HTML文書 link.html等 • フォルダ oto 等

– フォルダ kyouzai

• HTML文書 Index.html

• PDF文書 accessibleWebSiteMake.pdf

見本 音楽

トップへ

目次へ

単語登録 （良く使うフレーズ） • CtrlにF10キー → W（単語登録） →

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

• あ （リンク）

•

い （画像；srcはファイル名、

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

• う （箇条書きリスト）

• お （段落番号付きリスト）

•

ぴ （段落）

• ふ （罫線）

•
ぶ （改行）

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

• り （リスト） 目次へ

スタイルを選ぶ・作る

• 紺地に白文字・リンク黄色・文字120%行間1.4

• 紺地に白文字・リンク黄色・Ⅱ型文字120%行間1.4

• 薄肌地に黒文字・文字120%行間1.4

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

Header Header

main menu main1 Main２ menu

目次へ

元ファイル作成方法

• 図：ペイントソフトで描く→ 拡張子pngとかjpg

• 図：ドローソフトで描く

• 図：携帯カメラ等で写す→ jpgで送る

• 動画：Flashで描く

• 動画：ビデオをReal形式やFlash形式に変換

目次へ

プレゼンタープレゼンテーションのノート図：ペイントソフトで描く→　拡張子pngとかjpg図：ドローソフトで描く図：携帯カメラ等で写す→　jpgで送る動画：Flashで描く動画：ビデオをReal形式やFlash形式に変換

元ファイル作成方法

• 音：MIDIソフトで作る

• 音：録音→ mp3変換

• データベース：Excel, Access→ Webページで

保存

• 電子文書：wordや一太郎やPowerPointを

Acrobatで印刷=PDF文書

目次へ

プレゼンタープレゼンテーションのノート元ファイル作成方法音：MIDIソフトで作る音：録音→　mp3変換データベース：Excel, Access→　Webページで保存電子文書：wordや一太郎やPowerPointを　Acrobatで印刷=PDF文書

元ファイル作成方法： 図ペイントで描く

スタート（Windowsキー） プログラム(pキー)

アクセサリー ペイント

目次へ

プレゼンタープレゼンテーションのノート元ファイル作成方法：　図ペイントで描く

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

キャンパス色とサイズ 円や四角等の書きかた

目次へ

プレゼンタープレゼンテーションのノートペイント　キャンバスサイズ、円の書き方

ペイント スプレーとバケツ

スプレー バケツ 円と色

目次へ

プレゼンタープレゼンテーションのノートペイント　スプレーとバケツ

ペイント 保存

ファイル 別名保存 保存場所 デスクトップ 自分のフォルダ zuのフォルダ ファイル種類 すべてにして 拡張子jpg ！bmpではない 動画等様々な「作り方」はArtNaviの「インターネットプレゼンテーション入門」を 目次へ

プレゼンタープレゼンテーションのノートペイント　保存ファイル別名保存

保存場所デスクトップ自分のフォルダzuのフォルダ

ファイル種類すべてにして拡張子jpg

http://artnavi.web.infoseek.co.jp/school/animator/index.html

静止画像の埋め込み方

ArtNavi1 → ユーザビリティ → Webサイト作成→ HTMLファイル作成 → 図の埋め込み

を参照 • 静止画の作成 • ペイントソフト • ドローソフト • カメラで撮影 • OCRで読み込む • パソコン画面を複写

目次へ

プレゼンタープレゼンテーションのノート静止画像の埋め込み方

ArtNavi1 → ユーザビリティ → Webサイト作成→　HTMLファイル作成 → 図の埋め込みを参照静止画の作成ペイントソフトドローソフトカメラで撮影OCRで読み込むパソコン画面を複写

http://www2.mmc.atomi.ac.jp/~artnavi1/help/webSiteMake/zu02.htmlhttp://www2.mmc.atomi.ac.jp/~artnav1/help/webSiteMake/paint01.htmlhttp://www2.mmc.atomi.ac.jp/~artnavi1/help/webSiteMake/draw01.htmlhttp://www2.mmc.atomi.ac.jp/~artnavi1/help/webSiteMake/camera01.htmlhttp://www2.mmc.ac.jp/~artnavi1/help/webSiteMake/ocr01.htmlhttp://www2.mmc.ac.jp/~artnavi1/help/webSiteMake/ocr01.htmlhttp://www2.mmc.atomi.ac.jp/~artnavi1/help/webSiteMake/capture01.html

元ファイル作成方法： 音ファイル

ArtNavi1 → 芸術工房 → 音楽 → 「作ろう♪インターネットで芸術音楽を」 ＭＭＬで作曲 MIDIで作曲 録音と音の編集

目次へ

プレゼンタープレゼンテーションのノート元ファイル作成方法：　音ファイルArtNavi1 → 芸術工房 → 音楽 → 「作ろう♪インターネットで芸術音楽を」ＭＭＬで作曲MIDIで作曲録音と音の編集

http://www2.mmc.atomi.ac.jp/~artnavi1/workshop/makeMusic/index.htmlhttp://www2.mmc.atomi.ac.jp/~artnavi1/workshop/makeMusic/03index.htmlhttp://www2.mmc.atomi.ac.jp/~artnavi1/workshop/makeMusic/04index.htmlhttp://www2.mmc.atomi.ac.jp/~artnavi1/workshop/makeMusic/04index.htmlhttp://www2.mmc.atomi.ac.jp/~artnavi1/help/makeSound/index.html

音声・動画の埋め込み方

ArtNavi1 → ユーザビリティ → Webサイト作成→ HTMLファイル作成 → 音・動画の埋め込みを参照

・リンク再生 ・音(MIDI)埋め込み ・音(MP3)埋め込み ・動画の埋め込み ・動画(RealMedia)埋め込み ・動画(Flash)埋め込み ・動画(YouTube)埋め込み

目次へ

プレゼンタープレゼンテーションのノート音声・動画の埋め込み方ArtNavi1 → ユーザビリティ → Webサイト作成→　HTMLファイル作成 → 音・動画の埋め込みを参照�・リンク再生�・音(MIDI)埋め込み�・音(MP3)埋め込み �・動画の埋め込み�・動画(RealMedia)埋め込み�・動画(Flash)埋め込み�・動画(YouTube)埋め込み�

http://www2.mmc.atomi.ac.jp/~artnavi1/help/webSiteMake/otolink.htmlhttp://www2.mmc.atomi.ac.jp/~artnavi1/help/webSiteMake/otoMidi.htmlhttp://www2.mmc.atomi.ac.jp/~artnavi1/help/webSiteMake/otoMidi.htmlhttp://www2.mmc.atomi.ac.jp/~artnavi1/help/webSiteMake/otoMidi.htmlhttp://www2.mmc.atomi.ac.jp/~artnavi1/help/webSiteMake/otoMp3.htmlhttp://www2.mmc.atomi.ac.jp/~artnavi1/help/webSiteMake/otoMp3.htmlhttp://www2.mmc.atomi.ac.jp/~artnavi1/help/webSiteMake/otoMp3.htmlhttp://www2.mmc.atomi.ac.jp/~artnavi1/help/webSiteMake/douga01.htmlhttp://www2.mmc.atomi.ac.jp/~artnavi1/help/webSiteMake/douga03.htmlhttp://www2.mmc.atomi.ac.jp/~artnavi1/help/webSiteMake/douga03.htmlhttp://www2.mmc.atomi.ac.jp/~artnavi1/help/webSiteMake/douga03.htmlhttp://www2.mmc.atomi.ac.jp/~artnavi1/help/webSiteMake/douga04.htmlhttp://www2.mmc.atomi.ac.jp/~artnavi1/help/webSiteMake/douga04.htmlhttp://www2.mmc.atomi.ac.jp/~artnavi1/help/webSiteMake/douga04.htmlhttp://www2.mmc.atomi.ac.jp/~artnavi1/help/webSiteMake/douga05.htmlhttp://www2.mmc.atomi.ac.jp/~artnavi1/help/webSiteMake/douga05.htmlhttp://www2.mmc.atomi.ac.jp/~artnavi1/help/webSiteMake/douga05.html

アップロードする 1. メールアドレスが必要

2. 安全な無料サイトから選ぶ – Yahoo Geocities Google apps等

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

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

5. ファイル転送 FFFTPなどのソフトで転送

目次へ

プレゼンタープレゼンテーションのノートアップロードメールアドレスが必要安全な無料サイトから選ぶ　Yahoo GeocitiesGoogle apps等　申し込み、メールで確認、開設管理や設定でプロフィール設定ファイル転送　FFFTPなどのソフトで転送

http://geocities.yahoo.co.jp/serviceshttp://www.google.com/apps/intl/en/business/faq.html

セキュアページ : 緑のhttps等

• ウィルスページの被害にあわせないよう

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

– 信頼できる「認証局」を選ぶ

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

– オランダのDigiNotar事件 （記事：INTERNET WATCHより)

– 偽OCN事件(記事：フィッシング対策協議会)

• チェックする習慣を

目次へ

プレゼンタープレゼンテーションのノートウィルスページの被害にあわせないよう口座番号や本人特定情報を暗号化するサービスを選択信頼できる「認証局」を選ぶ信頼できる「認証局」も偽証明書を発行したことがあるオランダのDigiNotar事件 （記事：INTERNET WATCHより)偽OCN事件(記事：フィッシング対策協議会)　チェックする習慣を

http://internet.watch.impress.co.jp/docs/news/20110906_475443.htmlhttp://internet.watch.impress.co.jp/docs/news/20110906_475443.htmlhttps://www.antiphishing.jp/news/alert/ocn2011824.html

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

• ターゲットを絞る – 日常日記だけ – 多趣味でも１つの趣味だけ

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

• 1ページに詰め込まない – ALTAIR(link)で朗読してもらって5分以内

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

プレゼンタープレゼンテーションのノート分かりやすいホームページターゲットを絞る日常日記だけ多趣味でも１つの趣味だけほかの趣味は、それぞれ違うサイトに1ページに詰め込まないALTAIR(link)で朗読してもらって5分以内

http://www.normanet.ne.jp/~altair/

分かりやすいホームページを�作ろう！　　目次分かりやすいホームページを作ろう　2012年4月28日　レジュメ分かりやすいホームページを作ろう　2011年5月14日　レジュメ「色盲の人にもわかるバリアフリープレゼンテーション法 」より ホームページとブログホームページとブログブログを作ろう手続きHatenaダイアリーで試してみようHatenaダイアリーで試してみようHatenaダイアリーで試してみようBloggerで試そうBloggerで試そう本格的ホームページに挑戦元の文書原図ファイル拡張子Web用ファイル音ファイル拡張子Web用ファイル動画ファイル拡張子Web用ファイル元のファイルHTML文書（ファイル名.html)HTML/XHTMLと CSS（スタイルシート）HTML, CSSのW3C標準チェックHead部例Body部例階層の理解単語登録　（良く使うフレーズ）スタイルを選ぶ・作る元ファイル作成方法元ファイル作成方法元ファイル作成方法：　図ペイントで描くペイント　キャンバスサイズ、円の書き方ペイント　スプレーとバケツペイント　保存静止画像の埋め込み方元ファイル作成方法：　音ファイル音声・動画の埋め込み方アップロードするセキュアページ : 緑のhttps等分かりやすいホームページ