3回目の講義&演習 ホームページ

最終変更:2008年5月1日15時19分


1.ホームページを作成する前に

	まずは「Mozilla」を使ってみましょう.

1.1 Mozilla: WWWブラウザ

	・WWW(World Wide Web)は,HyperMediaの概念をインターネットの
	  仕組みも使って実現したものです.

	・ホームページの中のアンダーバー「 ____ 」の部分をクリックすると
	  別のページが開きます(リンク).

	・「ファイル」「Webページを開く」のあと適当なURL
	  (Uniform Resource Locator)を入力すると,ホームページ等に
	  アクセスします.
		例: http://www.media.osaka-cu.ac.jp/~nakano/

	・今,見てるページは「ブックマーク」
	  「現在のページを追加」でブックマークに追加されます.

	・ブックマークには良く使うURLを登録します.
	  「ブックマーク」で登録されている
	  ブックマークが表示されるので,クリックすると
	  新しいWEBのページが開きます.


2.ホームページ(HTML)作成

2.1 HTMLの説明

	・ホームページはHTML(Hyper Text Markup Language)と呼ばれる
	  言語で記述しますが,簡単に言うと文章や画像等をTAGという
	  マークで囲んだりして見ためにわかりやすく表示させます.

	・ホームページの作成方法にはこの演習でやるように,(1)ワープロ
	  的に入力する方法と,(2)ワープロ等のアプリケーショソフト
	  ウェアがHTMLファイルを作成してくれる方法(WORD,EXCELや一太郎の
	  ようなソフトウェア)と,(3)HTMLエディタと言ってホームページを
	  作成するためにソフトウェアを使う方法があります.
	    いずれでやっても一長一短がありますが,(1)の方法は基本です
	  ので簡単なホームページを作る事は役に立ちます.

2.2 ホームページ作成

	・~/public_htmlフォルダーを作ります.

		パネルの左から3番目の「Konqueror」(ホーム)を開きます.
		メニューから「編集」「新規作成」「ディレクトリ」を
			選択します.
		名前の入力が要求されるので
			public_html
		と名前を替えます.
		「_」は「アンダーバー」キーといって,Shiftキー+「-」キーです.

	・~/public_html/index.htmlファイルを作成します.

		パネルの左から3番目の「Konqueror」(ホーム)を開きます.
		public_htmlディレクトリに移ります

		メニューから「編集」「新規作成」「HTMLファイル」を
			選択します.
		名前の入力が要求されるので
			index.html
		と名前を替えます.

		高機能エディタで簡単なHTMLファイルを作成して下さい.
		セーブする時は,「ファイル」「別名でセーブ」を選んで
			public_html
		の下に保存して下さい.但し「KWrite」で開くと文字コード
		が変わるので、「Konqueror」でファイルを選択して、
		右ボタンで「アプリケーションで開く」「その他」
		「エディター」「KWrite」で開いてください。

		「Konqueror」を使うと便利です.
		永田先生の解説も参考にして下さい.

		このファイルを作成すると,あなたのホームページが
			http://www.ex.media.osaka-cu.ac.jp/~a08sbxxx/
		で世界中から見る事が出来ます.
			a08sbxxxの所には自分の学籍番号が入ります.

	・http://www.ex.media.osaka-cu.ac.jp/%7Ea08sbxxx/
		の方が親切です.「~」キーのない人のために,,

	・index.html以外にxxxx.htmlのようなHTMLファイルを作成して,複数の
		追加のホームページが作成できます.この時以下の点に注意して
		下さい.

		・ファイル名に漢字を含んではいけない.
		・ファイル名に空白を選んではいけない.

	・以下はホームページのテンプレートです.

		<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
		<html>
		  <head>
		    <title>中野のページ</title>
		    <meta http-equiv="Content-Type" content="text/html;
		       charset=euc-jp">
		    <style></style>
		  </head>
		  <body>
		    中野秀男
		  </body>
		</html>

	・ホームページの作成法は最近多くの本もでています.

	永田先生の解説も参考にして下さい.

2.3 Mozillaで多くのホームページを見て下さい.

	・自分のホームページ作成のために多くのホームページを見て
	  下さい.

	・ホームページのHTMLファイルは,Mozillaで見たいホームページを
	  見たあとで,
		メニューから「表示」「ページのソース」
	  で出来ます.

2.4 自分が作成したHTMLファイルをMozillaを通して見ます.

	・Mozillaを起動させて,
		メニューから「ファイル」「Webページを開く」か
		直接,ウィンドウの上の白枠に書き込んでも良い.

	・自分のホームページの場合は(但し学籍番号をa08sbxxxと仮定)
		http://www.ex.media.osaka-cu.ac.jp/~a08sbxxx/
	  作成した,foo.htmlファイルの場合は
		http://www.ex.media.osaka-cu.ac.jp/~a08sbxxx/foo.html または
		http://www.ex.media.osaka-cu.ac.jp/~a08sbxxx/foo

	・HTMLファイルに変更加えた後で見る場合は,HTMLファイルを保存してから
	  Mozillaのメニューで
		「再読み込み」をクリック

2.5 htmlファイルを変更するには

	・一旦作成した

		index.html

	  のようなファイルの内容を修正するには,そのアイコンをダブル
	  クリックするのではなくて,高機能エディタ「ファイル」「開く」
	  でファイルを選択して下さい.

	・ワープロで~/public_html/index.htmlファイルを作成します.
	  
		例
			<html>

			<head>
			  <title>xxxxxx's Home Page</title>
			</head>

			<body>
			  私の名前はxxです.
			</body>

			</html>

		セーブする時は,「ファイル」「別名でセーブ」を選んで
			public_html
		の下に保存して下さい.

			index.htmlもpublic_htmlのように最初のホームページの
			ファイル名として決められた(default)名前です.

		このファイルを作成すると,あなたのホームページが
			http://www.ex.media.osaka-cu.ac.jp/~a08sbxxx/
		で世界中から見る事が出来ます.

	・index.html以外にxxxx.htmlのようなHTMLファイルを作成して,複数の
		追加のホームページが作成できます.この時以下の点に注意して
		下さい.
		・ファイル名に漢字を含んではいけない.
		・ファイル名に空白を選んではいけない.

	・ホームページの作成法は最近多くの本がでています.

		入門書:このクラスは沢山あります.気にいったものを選んで下さい.
		実用書:「ワンランク上のホームページのための最新HTML&CGI入門」
				エーアイ出版
		タグ集:「HTMLタグ辞典」翔泳堂


3. 簡単なHTML言語

3.1 HTMLとは

	・HTML(Hyper Text Makeup Language)は文章の構造を記述する言語です.
	  Makeupとは目印をつける事で,テキストに目印をつける事で
	  構造的な文章を作ります.

	・構造的とは,
		文字の大きさ等の設定が出来る
		ページのレイアウト,画像の張り込み,作表が出来る
		他のページやインターネット上の他のページが参照出来る
	  事です.

	・HTML言語は基本的にはTAGと呼ばれるもので文章をはさみます.
	  TAGにはいろいろなものがありますが,ここでは基本的なものだけを
	  書きます.

3.2 枠組

	・全体<html>

		HTMLの文章全体を<html>と</html>ではさみます.

	・ヘッダー部<head>とタイトル<title>

		タイトル等の頭の部分を<head>と</head>ではさみます.

		Mozillaなどのブラウザで見た時の上に出る表題を
		<title>と</title>ではさみます.

		基本的な形は
			<head>
				<title>タイトルだよ!</title>
			</head>
		となります.

	・ボディ部<body>

		ホームページの本体部は<body>と</body>ではさみます.

		このボディ部の中にいろいろな文章や絵をTAGを使いながら
		表現していきます.

3.3 いろいろなTAG

	・<hr>:横棒です.区切りに使います.
	・<hn>〜</hn>:見出しでnで文字の大きさを決めます.
		nは1から6まであって1が一番大きな文字ですが,見るブラウザに
		よって,その大きさは異なります.

			<h3>中野のホームページ!</h3>

	・<br>:そこで改行(Break Line)します.
	・<p>:段落(Paragraph)を表します.
	・<ul><li>..<li>..<li>..</ul>:マーク付きのリストです.

			<ul>
			  <li>りんご
			  <li>みかん
			  <li>バナナ
			</ul>
			
	・<ol><li>..<li>..<li>..</ol>:番号順のリストです.

			<ol>
			  <li>りんご
			  <li>みかん
			  <li>バナナ
			</ol>
			
	・<img src="ファイル名">:イメージを張り込みます.

			<img src="report2.jpg">

	・<a href="URL">説明文</a>:他のURLにリンクします

			<a href="http://www.ex.media.osaka-cu.ac.jp/~a04saxxx/">
				友達のホームページ</a>

		URLはUniform Resource Locatorの事です.
		httpの部分が使用するプロトコル(通信規約ですが,ここでは
			プログラムと思って下さい)です.他にftp等があります.
		//www....ac.jp/の部分は相手のコンピュータです.
		最後の/以下は相手のコンピュータの中でのフォルダーや
			ファイルを直接さします.
		フォルダーを指す場合には,そのフォルダーの中に
			index.html等のファイルを順に探してあればそれを
			出します.

3.4 注意

	・これ以外にもいろいろな便利なTAGがあります.

	・でもHTML自体も進化しており,まだどれが標準とは言えないのが
	  現状です.

	・ここで示したのは標準でどのブラウザでも見えますが,新しいTAG程
	  あるブラウザで見えるが他では見えないなど問題があります.

3.5 いろいろなTAG(続き)

	・<body text="#RRGGBB"       文字色の指定
		link="#RRGGBB"          リンク色の指定
		vlink="#RRGGBB"         行ったことのあるリンク色の指定
		alink="#RRGGBB"         リンクをクリックした時の色の指定
		bgcolor="#RRGGBB"       背景色の指定
		background="画像ファイル名">  背景に張る画像ファイルの指定

	色:#000000 黒; #FF0000 赤; #0000FF 青; #FF00FF 紫
	    #FFFFFF 白; #00FF00 緑; #FFFF00 黄; #00FFFF 青緑
	    aqua: 水色;  gray: 灰色;  navy: 紺色;  silver: 明灰色
	    black: 黒;   green: 緑;   olive: オリーブ色;  teal: 青緑色
	    blue: 青;  lime: 黄緑;  purple: 紫色;  white: 白
	    fuchsia: ピンク;  maroon: 茶色;  red: 赤;  yellow: 黄色	

	・<B></B> : 太文字
	・<I></I> : イタリック
	・<sup></sup> : 上付添字
	・<sub></sub> : 下付添字
	・<U></U> : アンダーライン
	・<S></S> : 取消線

	・<font color="#RRGGBB"> xxx </font> 文字の色の指定
	・<font size="1〜6"> xxx </font> 文字のサイズの指定(絶対)
	・<font size="+1"> xxx </font> 文字のサイズの指定(相対)

	・<h3 align="center"> xxx </h3> 見出しの位置
	・<p align="center"> xxx </p> 段落の位置
	     left: 左寄せ  center: 中央  right: 右寄せ

	・<img src="ファイル名" alt="説明"> 画像の説明


4.画像ファイル(GIMPで作成したもの)

	・作成したjpgファイルは,~/public_htmlフォルダーの下に置くと,
			<img src="foo.jpg">
	  のようにしてホームページに張れます.

	・絵にはGIMPのような「Paint」系のソフトだけでなく,「Draw」
	  系のWindows Draw 7(但しWindows 2000)
	  というソフトもあります.絵というよりは図を書くソフトです.


5.他のページへのリンク

	・他のページへのリンク
		<a href="intro.html">自己紹介</a>
	  のようにすれば,他のページにリンクできます.

	  intro.htmlはindex.htmlのようにワープロで作成して下さい.

	・友達のページをリンクするには,
		<a href="http://www.ex.media.osaka-cu.ac.jp/~a05sbxxx">
			友達のxxxx君だよ</a>
	  とします.a04sbxxxの部分は友達の学籍番号にして下さい.

	・インターネットのホームページにリンクするには,相手のURLを
	  探して,
		<a href="http://www.yahoo.co.jp">YAHOOのページ</a>
	  のようにして下さい.

	・ホームページを探すには検索エンジンのホームページが便利です.
		http://www.yahoo.co.jp		Yahoo
		http://www.goo.ne.jp		Goo


6.皆さんのホームページ集

	・この私の情報処理Iのホームページに皆さんのホームページ
	  一覧を作ります.


7.ホームページ作成上の注意

	・他人の著作物を著作者の許諾なしに複製してはならない.
	  また,ホームページに掲載してはならない.

	・他人の名誉を傷つけたり,誹ぼう・中傷してはならない.

	・ホームページに掲載した内容については,責任をもたなければならない.
	  掲載内容については訴えられる可能性もある.

	・ホームページの掲載内容が,他人の権利を害する恐れがあると
	  判断した場合は,修正もしくは削除を指示する事がある.
	  指示に従わない場合,強制的に削除することもありうる.


8.課題(今日中にやること)

	・自分のホームページ作りに参考になるようなページを見つけて,
	  そのHTMLファイルを調べる.

	・~/public_html/index.htmlの基本部分を仕上げて,Mozillaから
	  見えるようにする.


9.宿題

	・以下の条件のホームページを作成して下さい.
	必要条件は
		htmlファイルが3つ以上
		図や絵を含む事.
		他のURLにリンクを張る事.

	・最終の〆切は一応,6月末です.一応,5月末までにとりあえず作成を!