情報技術演習Ⅰ 人文学研究のための情報技術入門 2011/12/01

Presentation on theme: "情報技術演習Ⅰ 人文学研究のための情報技術入門 2011/12/01"— Presentation transcript:

1 情報技術演習Ⅰ 人文学研究のための情報技術入門 2011/12/01
情報技術演習Ⅰ 人文学研究のための情報技術入門 2011/12/01 担当：林晋 TA:秋田慧

2 今回のテーマ 情報を発信する そのためにＨＴＭＬ超簡単入門とブログの作り方を学びます． 今までの演習で次のことを学習しました．
アーカイブなどのＷＥＢ上の情報を集める方法 デジカメなどで原資料から画像情報を作る方法 それをテキストに変換する方法 出来た電子情報を整理する方法 情報を集め，そして，加工することの粗筋を学習したので，次に情報をＷＥＢ上で発信する方法を学びます． そのためにＨＴＭＬ超簡単入門とブログの作り方を学びます． 2019/2/21

3 ＨＴＭＬ超簡単入門 WEBページは原理的に言うとHTML(Hyper Text Markup Language)というマークアップ言語というもので書かれています．今では，HTMLで書かれている部分はおまけ程度で，Javascript, Flash などが中心的な役割をしているページも少なくありませんが，一応，基本は HTML です． このHTMLファイルは，別にWEB用だけでなく，PowerPoint ファイルの代替物としても使えます．これは基本的には，WEB 以前からある技術のハイパーテキスト用の言語の一つです．ですからネットと関係なくHTMLファイルを自分のノートＰＣ上に置き，IE や FireFox などのWEBブラウザで PowerPoint ファイルを見るように見ることができます．PowerPoint の代わりに，これで研究発表をするというような人も実際にかなりいます． そこで，まず，インターネット（ＷＥＢ）と関係なくローカルにHTMLファイルを作って，ＩＥでそれを眺めてみましょう． 課題：　(a) インターネットと Web の関係を調べましょう．(b) 「ローカルに」の意味は？ 2019/2/21

4 HTMLファイルを作る　(1) メモ帳などのエディタを使って次のような内容のテキストファイル test.txt をつくりましょう．課題：エディタとは．ワープロとの違いは？ ＨＴＭＬ超簡単入門 フォント 普通　斜体　太字　下線 カラー 赤　青　黄 リスト　 ＡＡＡ　ＢＢＢ　ＣＣＣ <h1>ＨＴＭＬ超簡単入門</h1> <h2>フォント</h2> 普通　<i>斜体</i>　<b>太字</b>　<u>下線</u> <h2>カラー</h2> <font color="red">赤</font>　<font color="blue">青</font>　<font color="yellow">黄</font> <h2>リスト</h2> <ol><li>ＡＡＡ</li>　<li>ＢＢＢ</li>　<li>ＣＣＣ</li></ol> 2019/2/21

5 HTMLファイルを作る (2) test.txt を保存してダブルクリックしてみましょう．．． 特別なにも何もおきません．
では，extension の txt を html に書き換えてから，ダブルクリックしましょう．何が起きたか分かりますね？ <b>, <i> などはタグと呼ばれるもので，<b> … </b> のように対で使い，<b> が「左カッコ開く」，</b> が「右カッコ閉じる」だと理解すれば良いでしょう． <b>, <i>, <u> はそれぞれ bold, italic, underline をあらわしています． <h1>, <h2>,… は，見出し (header)のことで，1, 2,.. がレベルをあらわします． <ol> は番号つきのリストですが，<ul>にすると黒丸付きのリストになります．<li>はリストの各項目を指定するのに使います． リンクもこのようにして作れます．次の行を test.html に追加してみてください． <a href=" ダブルクリックするとブラウザーが起動されますので，メモ帳を起動して，そのウィンドウにドラッグします． 2019/2/21

6 HTMLファイルを作る　(3) 画像の追加も次でできます． 　 <img src=“画像のファイルのパス>．．．</img> パラグラムは <p>…</p>で囲みます． 強制的に改行するには <br>と書きます． 最近では, これら以外のタグが多く使われたページが増えていますが，文章の配置とか，背景色などを気にしなければ，簡単なＨＴＭＬのホームページは，今までに出てきたタグだけで大体書けてしまいます． 比較的基本的なタグしか使ってないページの例 これらのページに行き右クリックして「ページのソースを表示」を選ぶと，そのHTMLの中身をみることができます． さらに詳しいタグの説明は，次のページなどを参考にしてください．本も沢山でています． 参考ページ：１　２　３ 2019/2/21

7 課題5 提出期限： 12月02日 12:00 提出方法：susumu@shayashi.jp にメールで．
件名を“情報技術演習 課題5”とする． 提出すべきファイル kadai.html は添付ファイルとして送る． 今まで出てきたタグを使って，自己紹介をするHTMLファイル kadai.html を作ってください． このスライドでは説明してないタグなどを使っても構いません． 2019/2/21

8 Google, YouTube とHTMLタグ
Google Book Search や YouTube で面白いと思った書籍，あるいは，そのページやフレーズ，そして，動画を見つけたら，それをHTMLファイルから簡単に引用することができます． たとえば，Google Book Search では書籍やページへのリンクはもちろん，テキスト版も使える場合は，フレーズ（領域）を指定して，その部分だけをHTMLに埋め込むこともできます． 下のURLの書籍を例にやってみましょう： このページを開き右上にある Link というアイコンをクリックします．すると， 次の様な（少し違う可能性があります）ＵＲＬが表示されます。 Paste link in or IM： Embed <ｃ frameborder="0" scrolling="no" style="border:0px" src=" width=500 height=500></iframe> 2019/2/21

9 Google Books へのリンクと埋め込み
Paste link in or IM の方は，このページのURLです． リンクのタグ <a href=“url をここに書く”>…</a>を使うと，この書籍の，このページへのリンクを作れます． では，Embed (埋め込み）の方は？ こちらの方では、<iframe …> というタグがつかわれています. このタグを使うと，自分のHTMLファイルの中に，このページを埋め込めます．つまり，Google Book Search を自分のページの一部にできるのです．どうなるか各自やってみてください 注. この説明の Embed は、英語の普通の単語の embed です．HTMLには　<embed …> というタグがありますが，そのことではありません．この embed タグを使うとページ単位ではなくオブジェクト単位(画像などのデータ単位）の埋め込みができます． この書籍の場合には，さらに Clip というものがあります．これをクリックすると，領域をマウスで指定できるカーソルがでてきますので，書籍上の領域を自由に指定してみましょう．そうするとやはり，リンク用のURLと，埋め込みようのタグがでてきますので，どうなるかテストしてみてください． Clip などは，特定の書籍だけについています．むしろ付いてない場合の方が多いので，無い場合は諦めましょう．（＾＾；） 2019/2/21

10 YouTubeでも YouTube にも同様の機能があります． このURLの動画をみてみましょう：
右上の方に，「URL」, 「埋め込み」というのが見えます．これで，一つ前のスライドで説明したことと同じことができますので，試してみてください．（つまり，自分のファイルの中で YouTube の動画が見えるのです．） これらの機能を使えば，自分のお気に入りの書籍や動画を一つのファイルに並べて記録することもできます． 2019/2/21

11 自分のブログを作る しかし，そういうHTMLファイルを作っても，そのままでは公開できません．公開するには自分のサイト，ページ，ブログなどを持つ必要があります． ブログはHTMLサイト（ページ）の特殊なものといえますが，標準のHTMLより作りやすい，ブログを，それも無料で使えるものを使ってみましょう． ブログも公開されるときは，HTMLに変換されていますが，書くときには別の形式のタグを使います． しかし，別途作ったHTMLを貼り付けて公開することができます．ただし，ブログのサービスごとに使えるタグが制限されているのが普通です．たとえば，Ameba ブログでは Google Book の埋め込みがうまく使えない場合があります．これらの制限はブログごとに違うので自分で確認しながら使いましょう． 2019/2/21

12 ブログサービスを選ぶ 無料で使えるブログは沢山あります．先に説明したように，それぞれのサービスで出来ること，出来ないことが違います．
Google Web Search で，「無料　ブログ」などのキーワードで探してみてください． よく分からないという人は，アメーバブログにしましょう． また，すでに自分のブログやＷＥＢページがある人は，それで構いません． 2019/2/21

13 自分のドメインを持つ 林のWEBサイトは， という自分専用のドメイン名を使っています．shayashi (s. hayashi) がドメイン名です． 自分専用のドメイン名がついたブログやWEBページを持つことは難しくありません 例えば： しかし，ドメインだけ取得しても，それを使うには，別途，貸しサーバ（レンタル・サーバ，ホスティング・サーバ）を借りるなどしなくてはなりませんし国内のサービスの場合，それなりの出費を覚悟する必要があります． ところが米国では，数年前からホスティング業界で価格競争が起きていて，月額4-5ドルほどで，容量無制限のサーバを借りることが可能です．また，ついでにドメイン取得も代行してくれたり，凄く簡単に高性能のブログが作れたり，という会社がたくさんあります． 必要なのは少しの英語力と，クレジットカードです．興味がある人は挑戦してみましょう． 2019/2/21

14 課題6 提出期限： 次回演習中 提出方法：林に直接見せる． 自分のブログかWebページを開設ください．
また，課題5で提出した kadai.html を，そのブログか Webページで掲示できるようにしておいてください． 2019/2/21