Lecture/CompPracR2003/12th - KAWANO's PukiWiki Plus!

授業のページへ戻る

コンピュータ演習（再）第12回

▲ ▼

Webページの作成

▲ ▼

Webページを作成する道具

アプリケーションソフト
ワープロソフトなど、本来は別の目的に使用するソフトの中には、簡単なWebページを作るための機能があるものがあります。
ホームページ作成ソフト
Webページを作成専用のソフトで、作成・編集するためのさまざまな機能をもっています。また、サーバへのデータの転送や画像データの作成・編集機能がある、高機能なものもあります。
テキストエディタ
Webページはテキストファイルですので、専用のソフトがなくても作成することができます。Windowsの「メモ帳」やMacintoshの「Simple Text」でも、十分作成することができます。

▲ ▼

テキストエディタを使うメリット・デメリット

メリット
- HTMLなどのWWWに関する技術の勉強になる
- 余計なデータが勝手に書き込まれない（見やすいファイル）
- ブラウザによる表示の違いなどを意識して作成できる
デメリット
- HTMLなどのWWWに関する技術をある程度理解する必要がある
- 作業に慣れるまで、作るのに時間がかかる
- 専用ソフトとは違い...
  - HTMLを自分で入力しなければならない
  - 入力中に出来上がりを確認できない（ソフトの切り替えが必要）

▲ ▼

HTML

▲ ▼

HTMLとは

Hyper Text Markup Languageの略で、Webページを作るためのコンピュータ言語
文書にマーク（タグ）をつけて...
- 文章の意味（役割）を指定「○○から××までを見出しにする」
- 表示のしかたを指定「○○から××までを太字にする」
- ハイパーリンクを設定「ほかのファイルへジャンプする」
HTMLの例
- HTML（<b>や</b>は太字というタグ）
```
これは<b>HTML</b>のサンプルです。
```
- ブラウザで表示
  これはHTMLのサンプルです。
ファイル名は必ず半角文字で、拡張子は「.html」か「.html」

▲ ▼

HTMLの書き方

タグ(tag)
- 文章に意味や表示の仕方を指定するために使うマークを使う
  - 「<」と「>」で囲まれた文字列（タグ名）
  - タグ名は半角文字で、大文字と小文字の区別なし
- 開始タグ（<...>）と終了タグ（</...>）で囲まれた部分が指定される
```
<h1>今回の内容</h1>
```
  - 終了タグのないものもある
```
<hr>, <br>
```
- タグの入れ子ができる
  - 字下げを使って、タグの組み合わせがわかりやすく
```
<body>
  <p>
    この中は<b>段落</b>です。
  </p>
</body>
```
属性(attribute)
- タグの機能を細かく設定するもの（属性のないタグもある）
  - 文字の大きさや色、線の太さや色など
- 複数の属性を指定することができる（属性名="値"）
```
これは<font size="5" color="red">重要</font>です。
```

▲ ▼

HTMLファイルの構造

HTMLファイルの構造は、たいてい次のようになっています。

<html>
<head>
  <title>タイトル</title>
</head>
<body>
  コンテンツ
</body>
</html>

<html>...</html>（HTML要素）
- そのファイルがHTML文書であることを示す
<head>...</head>（ヘッダ要素）
- HTML文書の情報（本でいえば、題名や著者、発行日など）
<title>...</title>
- Webページのタイトル名（タイトルバーに表示）
<body>...</body>（ボディ要素）
- Webページとして表示される内容（コンテンツ）

▲ ▼

空白と改行の扱い

空白
- 半角スペースは、何文字入力しても、ブラウザでは一文字の空白文字として表示
- 全角スペースは、入力した数だけの空白文字（全角）としてて表示
改行
- <br>タグで改行する位置を指定する
  - HTMLファイルの中で改行しても、ブラウザでは一文字の空白文字として表示
```
ここで改行します<br>ここで改行します
```

▲ ▼

記号の入力

「<」は「>」などは、タグなどのHTMLが使用する記号とみなされてしまいます。そこで、次のようにして、一部の記号を入力します。

記号	HTMLでの入力
＜	＆lt;
＞	＆gt;
＆	＆amp;
”	＆quot;
（空白）	＆nbsp;

▲ ▼

HTML文書の作成

▲ ▼

雛形の作成

まず、Webページを保存するフォルダを作成しましょう。
- 「マイドキュメント」の中に、「public_html」というフォルダを作成してください。

メモ帳を使って、次のような雛形を作りましょう。

<html>
<head>
  <title>Welcome to My Web Page!</title>
</head>
<body>

</body>
</html>

<title>...</title>
- Webページのタイトルを設定します。
タイトルに「「わたし」の街」と設定してください。

▲ ▼

見出し

<hn>...</hn>（nには1〜6の数字が入る）
- 見出しを設定します。
- 大きさが最も大きいh1から、最も小さいh6までの6段階あります。
  - 本で例えると、h1は題名や章見出し、h2は節見出し、h3は項見出し

次のように見出しを設定しましょう。

 <h1>「わたし」の街</h1>
 <h2>はじめに</h2>
 <h2>メニュー</h2>

▲ ▼

段落と改行

<p>...</p>
- 段落を設定します。
- ひとまとまりの（意味のある）文章に使います。
- 改行や連続した半角文字の空白は、半角文字の空白一文字にしかならないことに注意しましょう。
<br>
- 改行を設定します。
- 段落のなかで、強制的に改行するときに使います。

「<h2>はじめに</h2>」のあとに、次のように入力しましょう。

 <p>このWebページは、「コンピュータ演習」の授業で作成したものです。</p>

「<h2>メニュー</h2>」のあとに、次のように入力しましょう（○○には自分の名前や出身地を入力）。
```
 <p>
   ここでは「わたし」○○が育った<br>○○県○○市について紹介します。
 </p>
```
「</body>」の前の行に、区切り線を入れましょう。

▲ ▼

文書の装飾

<b>...</b>
- 太字を設定します。
<i>...</i>
- 斜体を設定します。
<hr>
- 指定した行に区切り線（水平線）を設定します。
自分の名前や出身地の名前を太字や斜体に設定してみましょう。
```
<b>兵庫 太郎</b>, <i>兵庫県加古川市</i>
```

▲ ▼

箇条書き

<ul>...</ul>、<ol>...</ol>
- 箇条書きを設定します。
- ulタグは番号なし、olタグは番号つきの箇条書きに使います。
<li>...</li>
- 箇条書きの中の項目を設定します。
- liタグは、次のようにul、olのタグの中の項目に使います。
```
 <ol>
   <li>ひとつめ</li>
   <li>ふたつめ</li>
 </ol>
```
<dl>...</dl>, <dt>...</dt>, <dd>...</dd>
- 説明つき箇条書きを設定します。
- dlタグの中に、項目名（dtタグ）とその説明（ddタグ）を書きます。
```
 <dl>
   <dt>項目1</dt>
   <dd>項目1の説明</dd>
   <dt>項目2</dt>
   <dd>項目2の説明</dd>
 </dl>
```

「〜ついて紹介します。</p>」のあとに、次のように入力しましょう。

 <ul>
   <li>「わたし」について</li>
   <li>「街」について</li>
   <li>「わたし」と「街」</li>
 </ul>

▲ ▼

リンク

<a href="...">...</a>
- 他のWebページにジャンプするリンクを設定します。
- 「href="」と「"」の間にリンク先のURLを指定し、「">」と「</a>」の間にリンクさせる文字を設定します。
- 次のようにすると、Yahoo! JAPANにジャンプします。
```
<a href="http://www.yahoo.co.jp/">Yahoo! JAPAN</a>
```
- 次のようにすると、メーラーが起動して、hoge@aaa.bbb.cc.jpへのメールを送るウィンドウが開きます。
```
<a href="mailto:hoge@aaa.bbb.cc.jp">メールはこちらへ</a>
```
「<hr>」の下の行に、次のように大学のサイトへのリンクを設定しましょう。
```
 <a href="http://www.hyogo-dai.ac.jp/">兵庫大学のページへ</a>
```
箇条書きの項目に、次のようなリンクを設定してください。
- 「わたし」について：prefile.htmlへのリンク
- 「街」について：town.htmlへのリンク
- 「わたし」と「街」：memory.htmlへのリンク

▲ ▼

署名

<address>...</address>
- 制作者の名前やメールアドレスなどの連絡先、著作権に関する情報を設定します。

</body>の前の行に、次のように入力してください（○○は自分のメールアドレス）。

 <hr>
 <address>
 制作年月日: 2003-12-17; 更新年月日: 2003-12-17<br>
 <a href="mailto:○○">○○＾</a>
 </address>

KAWANO's PukiWiki Plus! - Lecture/CompPracR2003/12th

コンピュータ演習（再）第12回

Webページの作成

Webページを作成する道具

テキストエディタを使うメリット・デメリット

HTML

HTMLとは

HTMLの書き方

HTMLファイルの構造

空白と改行の扱い

記号の入力

HTML文書の作成

雛形の作成

見出し

段落と改行

文書の装飾

箇条書き

リンク

署名

参考リンク

メニュー

大学関係リンク

今日の5件

最新の5件

KAWANO's PukiWiki Plus! - Lecture/CompPracR2003/12th

コンピュータ演習（再） 第12回

Webページの作成

Webページを作成する道具

テキストエディタを使うメリット・デメリット

HTML

HTMLとは

HTMLの書き方

HTMLファイルの構造

空白と改行の扱い

記号の入力

HTML文書の作成

雛形の作成

見出し

段落と改行

文書の装飾

箇条書き

リンク

署名

参考リンク

メニュー

大学関係リンク

今日の5件

最新の5件

コンピュータ演習（再）第12回