Lecture/CompPracR2003/12th のバックアップ(No.2)

バックアップ一覧
差分を表示
現在との差分を表示
現在との差分 - Visual を表示
ソースを表示
Lecture/CompPracR2003/12th へ行く。
- 1 (2003-12-15 (月) 02:36:30)
- 2 (2003-12-15 (月) 08:29:19)
- 3 (2003-12-15 (月) 13:07:58)

授業のページへ戻る

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

▲ ▼

Webページの作成

▲ ▼

Webページを作成する道具

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

▲ ▼

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

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

▲ ▼

HTML

▲ ▼

HTMLとは

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

▲ ▼

HTMLの書き方

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

▲ ▼

HTMLファイルの構造

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

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

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

▲ ▼

空白と改行の扱い

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

▲ ▼

記号の入力

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

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

▲ ▼

タグの種類

▲ ▼

雛形の作成

まず、Webページを保存するフォルダを作成しましょう。
- 「マイドキュメント」の中に、「public_html」というフォルダを作成してください。
メモ帳を使って、次のような雛形を作りましょう。
```
<html>
<head>

</head>
<body>

</body>
</html>
```

▲ ▼

タイトル

<title>...</title>

▲ ▼

見出し

<hn>...</hn>（nには1〜6の数字が入る）

▲ ▼

段落と改行

...
<hr>

▲ ▼

文字の装飾

...
...
...

▲ ▼

リンク

<a href="...">...</a>
<a name="...">...</a>

▲ ▼

箇条書き

<ul>...</ul>
<ol>...</ol>
<li>...</li>

▲ ▼

KAWANO's PukiWiki Plus! - Lecture/CompPracR2003/12th のバックアップ(No.2)

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

Webページの作成

Webページを作成する道具

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

HTML

HTMLとは

HTMLの書き方

HTMLファイルの構造

空白と改行の扱い

記号の入力

タグの種類

雛形の作成

タイトル

見出し

段落と改行

文字の装飾

リンク

箇条書き

属性の種類

背景や文字の色の設定

文字の大きさや色の設定

参考リンク

メニュー

大学関係リンク

今日の5件

最新の5件

KAWANO's PukiWiki Plus! - Lecture/CompPracR2003/12th のバックアップ(No.2)

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

Webページの作成

Webページを作成する道具

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

HTML

HTMLとは

HTMLの書き方

HTMLファイルの構造

空白と改行の扱い

記号の入力

タグの種類

雛形の作成

タイトル

見出し

段落と改行

文字の装飾

リンク

箇条書き

属性の種類

背景や文字の色の設定

文字の大きさや色の設定

参考リンク

メニュー

大学関係リンク

今日の5件

最新の5件

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