コンピュータ中級B ～Javaプログラミング～第3回コンピュータと情報をやりとりするには?

(1)

コンピュータ

2C

～マルチメディア～

第

2回

Webページを作成するには?

(HTMLの基本2)

人間科学科コミュニケーション専攻

白銀

純子

(2)

第

2回の内容



HTMLの基礎(続き)

(3)

(4)

Webページを作るには?

1. HTMLファイルを作成する



タグを書いていく方法



Webページ作成ソフトウェアを使う方法

2. 決められたフォルダに

HTMLファイルを置く

作成したファイルの拡張子は

(5)

HTMLって何?(1)



Hyper Text Markup Languageの略



Hyper Text: ページからページでジャンプできる構造

(リンクをクリックすると別のページへジャンプ)



Markup Language: 「見出し」や「段落」などの

印付けをする言語

<h1>コンピュータの授業のページ</h1>

<p>コンピュータの授業に関する資料やお知らせを

掲載するページです。

</p>

「ここからここまでが見だし」

, 「ここからこ

こまでが段落」などの印

(6)

HTMLって何?(2)



Webページの構造を記述するための言語

(記述されたWebページを「

HTML文書

」と呼ぶ

)



構造

: 見出し, 段落, 箇条書き, 表, etc.



正しく印付けして書かれたファイルを、

Webブラウザが

内容を解釈して

Webページとして表示



W3Cという団体が、HTMLの規格を決定



「タグ」を使って構造を記述

(7)

タグって何

?



Webページの構造(「見出し」や「段落」など)を

表すために書く命令

(「見出し」などの印)



「

<abc>」のように、HTML文書の中で「<」と

「

>」で囲まれたもの



「

<abc>」と「</abc>」で文章を囲むことで、

Webページの構造を決定



「

<abc>」で「ここから」の意味



「

</abc>」で「ここまで」の意味

※タグは半角文字で書くこと

(8)

タグの共通規則

(1)



文章を囲む必要のあるタグは、「

<abc>」が文章の

開始タグ、「

</abc>」が終了タグ



「

<h1>」は一番大きな見出しの開始タグ



「

</h1>」は一番大きな見出しの終了タグ



「

<p>」は段落の開始タグ



「

</p>」は段落の終了タグ



文章を囲む必要のないタグは、終了タグを書かない

代わりに、「

<abc />」と記述



「

<br />」は文章を改行するためのタグ



「

<img />」は画像を入れるためのタグ

(9)

タグの共通規則

(2)



タグは内側から閉じる

(タグの入れ子構造)



<xxx>が<yyy>の前にある場合、</yyy>は</xxx>の前に

書く



カッコを閉じる関係

(「[{( )}]」)と同様

<abc>

<def>

<ghi>

</ghi>

</def>

<abc>

<def>

<ghi>

</def>

</ghi>

(10)

Webページの作成



まずは、タグを直接書く方法から



Jeditを利用



「

Finder

」

→「

アプリケーション

」

→「

Jedit X Folder

」

→「

Jedit X

」をダブルクリックする



「

ファイル

」

→「

新規

」で新しいファイルを作成



「

ファイル

」

→「

開く

」ですでに存在するファイルを開く

(11)

HTMLテンプレート(1)



HTMLテンプレート: HTMLを記述するときに

最低限必要な記述



HTMLファイルのテンプレートは、Webブラウザで

http://www.cis.twcu.ac.jp/~junko/MultiMedia/

(授業のページ)から、「HTML文書のテンプレート

(UTF-8用)

」をクリック

※自宅の

Windowsで作る場合は、「

HTML

文書のテンプレート(Shift-JIS用)

」をクリック

(12)

HTMLテンプレート(2)



表示されたテンプレートを全てマウスのドラッグ

&

ドロップで選択し、「

編集

」

→「

コピー

」をクリック



Jeditを出して、「

編集

」

→「

スタイルなしペースト

」を

クリック



テンプレートのコピー作業は、

1つのファイルに1回だけでOK

(13)

HTMLファイルの保存(1)



Jeditで

「

ファイル

」

→「

保存

」をクリック



ファイルを保存するフォルダを開き、ファイル名を入力



ファイル名は必ず

半角英数で



Webページを公開するときに日本語のファイルはよくないから



ファイル名に

スペースを入れないこと



Webページを公開するときにスペースが入っているとよくないから



ファイル名に拡張子「

.html

」を忘れないこと



Jeditの「エンコーディング」の欄を「

Unicode (UTF8)

」



「

UTF8」用のテンプレートを使うので、漢字コードの欄を

「

UTF8」にしないと、文字化けするから

(14)

HTMLファイルの保存(2)

「▼」をクリックすると、保存場所を

細かく指定できる

「漢字コード」の欄を

「

UTF8」にする

ファイル名

(半角英数でスペースを入れず、

拡張子「

.html」で名前をつける)

(15)

Webブラウザでの表示確認



Jeditで作成・保存したHTMLファイルは、

Webブラウザ(Safari)で表示し、内容を確認



Jeditは、タグなどのHTMLファイルの

命令を記述する

ために使う

ソフトウェア



Webブラウザは、作成したHTMLファイルが

どのように

表示されるかを確認するために使う

ソフトウェア

それぞれのソフトウェアを、何のために

利用するかをきちんと把握しておくこと

(16)

Webブラウザでの確認



Safariで「

ファイル

」

→「

ファイルを開く

」をクリックして、

HTMLファイルを選択する

(17)

HTMLファイルの作成作業

1. JeditでHTMLファイルの内容を編集し、保存する

2. Webブラウザの「

更新

」ボタンを押して、変更内容を

確認する



更新ボタン

:

※

Webページの作成は、JeditでHTMLファイルの内容を

編集して保存し、Webブラウザの「

更新

」ボタンを押して

内容を確認する、という作業を繰り返す

この繰り返しで

HTMLファイルを作っていく

(18)

Webページ作りの基礎(続き)

(19)

HTMLファイルを開く



Jeditで編集



「

Finder

」

→「

アプリケーション

」

→「

Jedit X Folder

」

→「

Jedit X

」をダブルクリックする



「

ファイル

」

→「

開く

」で作成途中のファイルを開く



Safariで表示確認



「

ファイル

」

→「

ファイルを開く

」をクリックして、作成途中の

(20)

head要素

(21)

head要素



その

HTMLファイルにとって、重要な情報を

書いておくためのタグ

(Webページの内容ではない)



HTMLファイルの文字コード



ブラウザのタイトル



著者の氏名



キーワード



etc.

<head>

(22)

<title></title>タグ



ウィンドウ最上部のタイトルを記述する部分

(ページのタイトルをつける)

この部分に

表示される

言葉を記述

(23)

(24)

ブロック要素

(1)



内容的なまとまりを表すタグ



HTML文書の構造を決定するタグ



見出し

, 段落, 箇条書き, 表, etc.



この種類のタグは、前後に改行が挿入

1つ1つが

ブロック要素

(25)

ブロック要素

(2)



ブロック要素のタグの中には

…



別のブロック要素を入れても良いもの



普通の文字だけか、インライン要素のみ入れても良いもの

タグの種類によってルールが違う

<abc>

<def>

</def>

</abc>

<abc>

defghijkl…

</abc>

<abc>の中に入れて良いもののルールは、<abc>が

何のタグであるかによって決まる



<def>がブロック要素であっても良いもの



<def>がインライン要素でなければならないもの

<abc>の中は、ただの文字とインライン要素の

組み合わせは

OKのものが多い

(26)

インライン要素

(1)



ブロック要素の中に書き、ブロック要素の内容を装飾

したり、追加的な意味を与えるためのタグ



強調

, 改行, リンク, etc.



この種類のタグは、前後に改行はなし

インライン要素

(強調)

(27)

インライン要素

(2)



インライン要素のタグの中には、別のインライン要素

または文字しか入れてはならない



ブロック要素を入れてはならない



ブロック要素の中であれば、どのブロック要素に

入れても良い

(28)

本文を書く場所

(29)

<body></body>タグ(1)



Webページの本文を記述する部分



<body>～</body>の外にWebページの内容を

書いてはならない



<body>～</body>に直接インライン要素を書いては

ならない

→必ず別のブロック要素のタグで囲んで書くこと

(30)

<body></body>タグ(2)



Webページの本文を記述する部分



<body>タグは、1つのファイルに1セットのみ

この部分に

表示される

内容を記述

(31)

(32)

見出しをつけるには

?(タグ)



見出し

: 文章の章や節のタイトル

一番大きな見出し

2番目に大きな見出し

3番目に大きな見出し

4番目に大きな見出し

5番目に大きな見出し

6番目に大きな見出し

(33)

見出しをつけるには

?(例)

<h1>白銀純子 - 講義

のページ

- </h1>

<h2>受け持っている

授業

</h2>

<h3>コンピュータ1

(34)

文章はどこに書く

?



<body>～</body>の間(<h1>～</h1>の

下など

)に、<p></p>で囲んで書く

※

<p>～</p>で、段落を

区切る

※

<p>～</p>で囲まずに

文章を書いてはならない

<p>ここでは、東京女子

大学での授業の

....</p>

(35)

文献などを引用するには

?



引用する文章を

<blockquote>～</blockquote>で

囲んで書く



引用部分は、普通の段落と区別するために、

左右に余白が入って表示される

<blockquote>コンピュータは

決して

…</blockquote>

(36)

箇条書き

(リスト)をしたい!(タグ)



番号をつけない場合



<ul>～</ul>と<li>～</li>を利用



<ul>～</ul>で、箇条書き全体を囲む



<li>～</li>で、1つ1つの項目を囲む



番号をつける場合



<ol>～</ol>と<li>～</li>を利用



<ol>～</ol>で、箇条書き全体を囲む



<li>～</li>で、1つ1つの項目を囲む

(37)

箇条書きをしたい

!(例)

～番号をつけない場合～

<ul>

<li>電子メールでの...</li>

<li>ホームページを...</li>

<li>自分でホームページを...</li>

</ul>

(38)

箇条書きをしたい

!(例)

～番号をつける場合～

<ol>

<li>電子メールでの...</li>

<li>ホームページを...</li>

<li>自分でホームページを...</li>

</ol>

(39)

表を作るには

?(タグ)



<table>, <tr>, <td>タグを利用



表全体を

<table>～</table>で囲む



引数

: summary



値

: 何のための表かの説明



1行分を<tr>～</tr>で囲む(行: セルの横の並び)



1つ1つのセル(マス)を<td>～</td>で囲む

<tr>

</tr>

</table>

縦の並びに

必要な数だけ書く

横の並びに

必要な数だけ書く

(40)

表を作るには

?(例)

<table

summary=“スケジュール”

border="1">

<tr>

</tr>

...

</table>

セルとセルの間に太さ「

1」の

線を引く

(border: 引数, “1”: 値)

(41)

内容ごとにページ内を区切るには

?



内容的な区切り

: 内容ごとに<div>タグで囲む



ページの左側にメニュー、右側に内容を表示するような

場合に利用することが多い



後日学習するスタイルシートと組み合わせて利用

することが多い

(42)

内容ごとにページ内を区切るには

?(例)



(1)・(2)・(3)のように区切っている



(1)・(2)・(3)の順で、HTMLファイル内にタグが書かれ

ている

(1)

(2)

(43)

内容ごとにページ内を区切るには

?(例)

<div>

<ul>

<li><a href="./NotePC.html">専攻推奨ノートPCとは</a></li>

<li><a href="./FreeSoftware.html">ソフトウェア一覧</a></li>

</ul>

</div>

(1)

(44)

内容ごとにページ内を区切るには

?(例)

(2)

<div>

<ul>

<li><a href="./NotePC.html">専攻推奨ノートPCについて</a></li>

<li><a href="./FreeSoftware.html">ソフトウェア一覧</a></li>

</div>

(45)

内容ごとにページ内を区切るには

?(例)

<div>

<h1>コミュニケーション専攻推奨ノートPC</h1>

<p>このページでは、東京女子大学現代教養学部人間科学科コミュニケーション専攻で

2004年度から導入したノートPC制度についての情報を掲載しています。

</p>

...

</div>

(46)

インライン要素

(47)

改行するには

?



<br />タグを書く(文章を囲む必要のないタグ)

(48)

<, >, &, "を書くときは?



半角の「

<」, 「>」, 「&」, 「"」は、HTML文書では特殊

な文字なので、そのまま書いてはいけない



「

<

」

: 「

<

」と書く



「

>

」

: 「

>

」と書く



「

&

」

: 「

&

」と書く



「

"

」

: 「

"

」と書く

(49)

リンクをするには

?(タグ)(1)



リンクをするタグ



タグ名

: <a>



引数

: href



値

: リンクするファイル名またはURL



<a href="

xxxx

">

yyyy

</a>

リンクの説明

リンクするファイルのありかまたは

URL

例えば

...

(50)

リンクをするには

?(タグ)(2)



引数「

href」の値



URL



リンク元のファイル

(<a>タグを書くファイル)から見た

リンク先のファイルのありか

リンク元のファイルがある

フォルダ

リンク元のファイル

(例えば「test.html」)

「

File」というフォルダ

sample.html

リンク先のファイルのありか

:

File/sample.html



フォルダ「

A」の中にファイル「f」があるという関係を「A/f」と表す

(「/」で、「～フォルダの中に」という意味)



フォルダ「

A」の中にフォルダ「B」があるという関係も「A/B」と表す



フォルダ「

A」が入っているフォルダを「..」と表す

ファイルのありかの表し方

test.htmlからsample.htmlにリンクをしたい場合

(51)

リンクをするには

?(例)

または

<a href="./Computer1/"> コンピュータ1....</a>

コンピュータ1....</a>

(52)

図や絵を入れるには

?



HTMLファイルとは別のファイルに、図や絵のファイルを

用意する



HTMLファイルの中に、「<img />」というタグを使って

図や絵のファイルの名前を書き込む

(53)

図や絵を入れるには

?(タグ)



図や絵を入れるタグ



タグ名

: <img />



文章を囲む必要のないタグ



引数その

1: src



値その

1: 貼り付ける画像のファイル名



引数その

2: alt



値その

2: 画像ファイルの内容の説明



何らかの事情で画像が表示されなかったときなどに代わりに表示

される言葉

<img src="

xxxx

" alt="yyyy

" />

(54)

図や絵を入れるには

?(例)

(55)

図を描くには

?(1)



(今回は)OmniGraffleを利用



Finder→「

アプリケーション

」

→「

OmniGraffle

」を

ダブルクリック

(56)

図を描くには

?(2)



描画



ツールバーの各ボタンを押し、表示されるメニューから

描きたい図形を選択



キャンバスでマウスをドラッグ

&ドロップで描画

(57)

図を描くには

?(3)



色の設定



ツールバーの「選択ツール」を選択し、描いた図形を選択



図形の線の色の設定は、「スタイル」ウィンドウの「ラインと

図形」ボタンを押して設定



図形の塗りつぶしは、「スタイル」ウィンドウの「フィル」ボタン

ラインと図形

線の色の設定

フィル

塗りつぶしの

色の設定

(58)

図を描くには

?(4)



図をファイルに保存



メニューバーの「

ファイル

」

→「

書き出し

」をクリックし、

拡張子として「

.png

」をつけてファイル名を入力



ファイル名は必ず半角英数で、スペースを入れずにつけること

コンピュータ中級B ～Javaプログラミング～ 第3回 コンピュータと情報をやりとりするには?