マルチメディア:ホームページ制作技術入門

１．ホームページの基礎

質問１．ホームページって何？
ヒント：コンピュータリテラシーなど内容を復習


２．ホームページ作成と公開

2.1　ホームページ作成と公開の必要なもの

　　コンピュータ、作成ソフト、プロバイダー契約。

・コンピュータはＨＰ作成や閲覧に必要とするものです。
・作成ソフトは、ＨＰの作成やＨＰ用の画像や映像編集ソフトのことです。
・作成したＨＰを公開するには、ホームページサーバーが必要です。本学の教職員及び学生のＨＰは 本大学情報処理センターのＨＰサーバを通じて公開することが可能です。本学科教職員及び学生の ＨＰは学科独自のＨＰのサブページとして公開することが可能です。

2.2　ホームページの作成方法：

・専用ソフトで作成
初心者や、手っ取り早くホームページを作りたい人にはホームページの作成ソフトをおすすめします。 『ホームページ・ビルダー』などがあります。

・汎用ソフトで作成
Microsoft WordやPowerPointなどの汎用ソフトで文書を作って、Webページの形で保存ですれば、ホームページ 用のファイルが自動的に生成されます。
作ってみってください！

・ＨＴＭＬで作成
HTMLとは、Hyper Text Markup Language の略語で、ホームページを作成、編集するための言語です。 この言語で記述された文章ファイルをブラウザで読み込むとホームページとして見ることができます。

詳しくはＷｅｂ上のホームページ作成関連ページを参考してください。

2.3　ＨＴＭＬで簡単なホームページ作成
　HTMLの基本的な記述は下記の通りで、具体的な例を通じて説明します。
基本記述
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>


　例1:一番簡単な例

サンプル1のソース

<HTML>

<HEAD>

<TITLE>ホームページのサンプル1</TITLE>

<HEAD>

<BODY>

ＩＴ革命と電子情報工学科

</BODY>

</HTML>

基本記述の説明

HTML　<html>ページ全体</html>

この間にページのすべての内容を記入します。

HEAD　<head>ページに関する情報</head>

個人の情報やページのスタイルなど情報をを記入する場所です（初心者の方はとりあえず間にはなにも書かなくていいですね）。この部分に記入された内容はページに表示しません。

TITLE　<title>ページのタイトル</title>

ホームページのタイトルとは、お気に入りに追加した時に表示されるページ名、エキスプローラーの上に表示される文字です

BODY　<body>本文</body>

本文は、実際にページを開いた時に見える内容です。

説明：ホームページのソースファイルはMicrosoft Internet Explorerのメニュー「表示」→「ソース」から見られます。


　例2:少し充実なページ


　例3:ホームページに画像入り


　例4:他のページへのリンク


　例5:画像処理結果入り


　例6:映像編集結果入り


2.4 テーブルの作成
 
基本タグとその意味：
<table border="枠線の太さ"> 〜 </table>		表
<tr> 〜 </tr>					横一列（行）
<th> 〜 </th>					見出し
<td> 〜 </td>					セル
例：
<table border="2"><br>
<tr><th>氏名</th><th>性別</th><th>年齢</th></tr>
<tr><td>福岡　工大</td><td>男</td><td>22</td></tr>
<tr><td>電子　太郎</td><td>男</td><td>23</td></tr>
<tr><td>情報　えこ</td><td>女</td><td>22</td></tr>
</table>

作った表：
氏名性別年齢
福岡　工大男22
電子　太郎男23
情報　えこ女22

表のサイズの指定：
<table width="表の幅" height="表の高さ" border="枠線の太さ"> 〜 </table>

セルのサイズの指定：
<th width="セルの幅" height="セルの高さ" > 〜 </th>
<td width="セルの幅" height="セルの高さ" > 〜 </td>

セルのサイズを指定した表：
氏名性別年齢
福岡　工大男22
電子　太郎男23
情報　えこ女22

セル内の文字の位置の指定：
縦方向の指定：
<th valign="top" > 〜 </th>
<td valign="middle" > 〜 </td>
<td valign="bottom" > 〜 </td>

横方向の指定：
<th align="left" > 〜 </th>
<td align="center" > 〜 </td>
<td align="right" > 〜 </td>

氏名性別年齢
福岡　工大男22
電子　太郎男23
情報　えこ女22


2.4 ホームページ作成時の諸注意
１．ファイル名について

大学のWWWサーバは、UNIX-OSで運用しているためにファイル名の大文字・小文字が区別されます。 また、日本語ファイル名の使用はできません。
　　よって以下の条件にてホームページを作成されることを推奨します。

・HTMLファイルおよびHTML内のリンクするファイル名（HTML,画像等）は全て半角英小文字にて作成する。

・ホームページ公開時にWindows版などのFTPクライアントを用いてファイル転送する場合、すべて小文字で転送する。 設定の詳細については、お使いのFTPクライアントのマニュアルおよびヘルプを参照ください。

２．トップページのファイル名について

トップページのファイル名は、index.html　または　index.htm　としてください。
SSIを用いる場合は、index.shtmlとなります。

３．CGI(Common Gateway Interface)およびSSI(Server Side Include)について

CGI等でPerlを利用する場合は、以下のパスを用いてください。
/usr/local/bin/perl
SSIを用いる場合は、HTMLファイルの拡張子を.shtmlとしてください。
例）　index.shtml


４．相対アドレスについて

出来るだけ相対アドレスを使ってください。

Copyright (C)