|
ホームページの作り方教室
|
<a href=マップ><img src=画像ファイル名 ismap></a> で指定します。
画像ファイル以外にイメージマップ(〜.map)を作成します。
形状 リンク先 x0座標,y0座標 x1座標,y1座標 ･･･ という形で指定します。
| ソースプログラム |
|---|
|
<a href="cmap.map"> <img src="cmap.gif" ismap border=0></a> |
| イメージマップ(cmap.map) |
|
circle link_1.htm 62,52 90,52 poly link_2.htm 134,42 165,70 165,94 103,94 103,70 rect link_4.htm 204,37 260,94 default links.htm |
| 画面表示 |
|
| ソースプログラム |
|---|
|
<img src="img/cmap.gif" usemap="#map" bordrer=0> <map name="map"> <area shape=circle coords="62,52,28" href="link_1.htm"> <area shape=polygon coords="134,42,165,70,165,94,103,94,103,70" href="link_2.htm"> <area shape=rect coords="204,37,260,94" href="link_4.htm"> <area shape=rect coords="0,0,289,109" href="link_s.htm"> </map> |
| 画面表示 |
|
|
| ソースプログラム | 画面表示 | |||||||||
|---|---|---|---|---|---|---|---|---|---|---|
|
<table border=0 cellpadding=0 cellspacing=0> <tr><td><img src="img/r3.gif"></td> <td><a href="link_1.htm"> <img src="img/r1.gif" border=0></a></td> <td><img src="img/r3.gif"></td></tr> <tr><td><a href="link_2.htm"> <img src="img/r4.gif" border=0></a></td> </td><td><img src="img/r3.gif"></td> <td><a href="link_3.htm"> <img src="img/r2.gif" border=0></a></td> </tr><tr><td><img src="img/r3.gif"></td> <td><a href="link_4.htm"> <img src="img/r0.gif" border=0></a></td> <td><img src="img/r3.gif"></td></tr> </table> |
|
| off | 入力のまま送信する。 |
| soft | 折り返して表示するが，改行は送信しない。 |
| hard | 折り返して表示し，改行も含んで送信する。 |
| ソースプログラム yahoo.co.jpによる検索 |
|---|
|
<img src="http://www.yahoo.co.jp/images/recip_sm.gif" align="left"> <form metod=GET action="http://search.yahoo.co.jp/bin/search"> <input size=30 name=p> <input type=submit value="Yahoo! 検索"> </form> |
| 画面表示 |
|
| ソースプログラム google による検索 |
|---|
|
<form method=GET action="http://www.google.com/search"> <table bgcolor=white> <tr><td> <a href="http://www.google.com/"> <img src="http://www.google.com/logos/Logo_40wht.gif" border=0 alt="Google" align="absmiddle"></a> <input type=text name=q size=31 maxlength=255 value=""> <input type=hidden name=hl value="ja"> <input type=submit name=btnG value="Google 検索"> </td></tr> </table> </form> |
| 画面表示 |
| ソースプログラム ドメイン情報の検索 |
|---|
|
<form action="http://whois.jprs.jp/" method=POST> <input type=hidden name=type value="DOM"> <input type=text name=key size=40> <input type=submit value="検索"> </form> |
| 画面表示 |
| ソースプログラム |
|---|
|
<form method=POST action="mailto:kibochan@urban.ne.jp"> <input type=submit value="一度だけ押して！"></form> |
| 画面表示 |
※<form>を<td>〜</td>の外に書くことによって，formの次の行が開きません。
| ソースプログラム |
|---|
|
<table><tr> <form method=GET action="cg.htm"> <td><input type=submit value="CGギャラリー"></td> </form> <form method=GET action="cg/dome0.htm"> <td><input type=submit value="スライドショー"></td> </form> </tr></table> |
| 画面表示 |
|
|
| ソースプログラム 感想のメール |
|---|
|
<form method=POST action="mailto:kibochan@urban.ne.jp"> 貴方の名前 <input name=name value="Guest"><br> 電子メール <input name=email size=30><br> 性 別 <input type=radio name=sex value=man>男 <input type=radio name=sex value=female>女 <input type=radio name=sex value=xx checked>不明<br> 年 齢 <select name=age> <option value=10>20未満 <option value=20>20代 <option value=30>30代 <option value=40>40以上 </select><br> 感 想<br> <textarea name=res rows=3 cols=54></textarea><br> <input type=reset value=" リセット "> <input type=submit value="メール送信"> </form> |
| 画面表示 |
name1=value1&name2=value2&name3=value3&...
※Netscape では <form enctype="text/plain" ...> と変換方法を指定すると符号化されません。
メールデコードCGIを利用すると読める形で送られてきます。
取り出すCGI(Common Gataway Interface)プログラムはシェルやPerlで簡単に記述することが出来ます。
CGIプログラムはシステム(ファイル)を破壊する事もあるので，管理人・プロバイダ と相談して下さい。
Windowsでは，
ClipDecoder for Windowsや
| ソースプログラム シェル |
|---|
|
#!/bin/sh IFS='&' set - $QUERY_STRING eval $* eval `/cgi-bin/cgiparse -init` eval `/cgi-bin/cgiparse -form` echo "Content-type: text/html" echo echo "<html>" echo "<head>" echo "<title>form</title>" echo "</head>" echo "<body>" echo NAME=$FORM_name echo EMAIL=$FORM_email echo RES=$FORM_res echo "</body>" echo "</html>" exit 0 |
| ソースプログラム Perl |
|---|
|
#!/usr/bin/perl print "Content-type: text/html\n\n"; print "<html>\n"; print "<head>\n"; print "<title>form</title>\n"; print "</head>\n"; print "<body>\n"; read(STDIN, $buffer, $ENV{'CONTENT_LENGTH'}); @pairs = split(/&/, $buffer); foreach $pair (@pairs) { ($name, $value) = split(/=/, $pair); $value =~ tr/+/ /; $value =~ s/%([a-fA-F0-9][a-fA-F0-9])/pack("C", hex($1))/eg; $FORM{$name} = $value; } print "name=$FORM{'name'}\n"; print "email=$FORM{'email'}\n"; print "res=$FORM{'res'}\n"; print "</body>\n"; print "</html>\n"; |
学校内のイントラネットで動作確認できました。
ゲストブック中の <!--begin--> 以下に降順に書き込まれます。
ゲストブックの属性は，誰もが読み書きできるようにします。
loginかrlogin(telnet)では"chmod 666 guestbook.htm"
ftpでは"ftp>quote site 666 guestbook.htm"とします。
| ゲストブック(guestbook.htm) |
|---|
|
<html> <head> <title>GuestBook</title> </head> <body> <!--begin--> </body> </html> |
| 入力フォーム(form.htm) |
|
<html> <head> <title>Add Guest Book</title> </html> <body> <form method=POST action="guest.pl"><pre> <b>Name : </b><input type=text name=name size=50> <b>E-mail : </b><input type=text name=email size=50> <b>URL : </b><input type=text name=url size=50> <b>Comment: </b> <textarea name=comments COLS=60 ROWS=6></textarea></pre> <input type=submit value="Write"> <input type=reset value="Reset"> </form> </body> </html> |
| CGIスクリプト(guest.pl) |
|
#!/usr/bin/perl # Guestbook program for WWW by Matt Wright Ver. 2.3.1 #Modifyed By kibochan require 'jcode.pl'; $guestbook= "guestbook.htm"; $date_command = "/usr/bin/date"; #$date = `$date_command +"%D %T %Z"`; chop($date); read(STDIN, $buffer, $ENV{'CONTENT_LENGTH'}); @pairs = split(/&/, $buffer); foreach $pair (@pairs) { ($name, $value) = split(/=/, $pair); $value =~ tr/+/ /; $value =~ s/%([a-fA-F0-9][a-fA-F0-9])/pack("C", hex($1))/eg; $value =~ s/<!--(.|\n)*-->//g; &jcode'convert(*value, 'sjis'); $FORM{$name} = $value; } &no_comments unless $FORM{'comments'}; &no_name unless $FORM{'name'}; open (FILE,"$guestbook") || die "Can't Open $guestbook: $!\n"; @LINES=<FILE>; close(FILE); $SIZE=@LINES; open (GUEST,">$guestbook") || die "Can't Open $guestbook: $!\n"; for ($i=0;$i<=$SIZE;$i++) { $_=$LINES[$i]; if (/<!--begin-->/) { print GUEST "<!--begin-->\n"; $FORM{'comments'} =~ s/\cM\n/<br>\n/g; print GUEST "<b>$FORM{'comments'}</b><br>\n"; if ($FORM{'url'}) { print GUEST "<a href=\"$FORM{'url'}\">$FORM{'name'}</a>"; } else { print GUEST "$FORM{'name'}"; } if ( $FORM{'email'} ){ print GUEST " \<<a href=\"mailto:$FORM{'email'}\">"; print GUEST "$FORM{'email'}</a>\>"; } print GUEST "<br>\n - $date<hr>\n\n"; } else { print GUEST $_; } } close (GUEST); &success; sub no_comments { print "Content-type: text/html\n\n"; print "<html><title>No Message!!</title>\n"; print "<body text=#ff0000>\n"; print "<center><h1>メッセージがありません</h1>\n"; print "もう一度やり直して下さい。<br>\n"; exit; } sub no_name { print "Content-type: text/html\n\n"; print "<html><title>No Name!!</title>\n"; print "<body text=#ff0000>\n"; print "<center><h1>名前がありません</h1>\n"; print "もう一度やり直して下さい。<br>\n"; exit; } sub success { print "Content-type: text/html\n\n"; print "<html><head><title>Thank You</title></head>\n"; print "<body>\n"; print "<center><h1>メッセージ<br>\n"; print "ありがとうございました</h1>\n"; print "<hr size=10>\n"; print "<b><pre>$FORM{'comments'}</b></pre>\n"; if ($FORM{'url'}) { print "<a href=\"$FORM{'url'}\">$FORM{'name'}</a>"; } else { print GUEST "$FORM{'name'}"; } if ( $FORM{'email'} ){ print GUEST " \<<a href=\"mailto:$FORM{'email'}\">"; print GUEST "$FORM{'email'}</a>\>"; } print GUEST "<br>\n - $date<hr>\n\n"; exit; } |
| ソースプログラム | 画面表示 | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
|
<html><head> <title>横分割</title> </head> <frameset cols="50%,*"> <frame src="frame1.htm"> <frame src="frame2.htm"> <noframes></noframes> </frameset> </html> |
| ||||||||||
|
<html><head> <title>縦分割</title> </head> <frameset rows="20,20,*"> <frame src="frame1.htm"> <frame src="frame2.htm"> <frame src="frame3.htm"> <noframes></noframes> </frameset> </html> |
| ||||||||||
|
<html><head> <title>縦横分割</title> </head> <frameset rows="1*,3*,1*"> <frame src="frame1.htm"> <frameset cols="*,*"> <frame src="frame2.htm"> <frame src="frame3.htm"> </frameset> <frame src="frame4.htm"> <noframes></noframes> </frameset> </html> |
| ||||||||||
<base target=フレーム名>
| 親フレーム(links.htm) |
|---|
|
<html> <head><title>リンク集</title></head> <fremset rows="74,*"> <frame src="link_0.htm" marginheight=2> <frame src="link_1.htm" name="link"> <noframes> <body> <a href="index.html">目次へ<br> <a href="link_1.htm">コンピュータ<br> <a href="link_2.htm">社会・経済<br> <a href="link_3.htm">広島の学校<br> <a href="link_4.htm">マスコミ<br> </body> </noframes> </frameset> </html> |
| 子フレーム(link_0.htm) |
|
<html> <head><title>リンク集</title></head> <body> <base target="link"> <a href="index.html" target="_top">目次へ<br> <a href="link_1.htm">コンピュータ<br> <a href="link_2.htm">社会・経済<br> <a href="link_3.htm">広島の学校<br> <a href="link_4.htm">マスコミ<br> </body> </html> |
| ソースプログラム |
|---|
|
<iframe src="kibochan.htm" width=300 height=200> </iframe> |
| ソースプログラム |
|---|
|
あなたは96年5月7日より <img src="/cgi-bin/common/Count.cgi?ft=0|frgb=128;0;128| tr=1|trgb=255;0;0|wxh=9;13|md=7|dd=D|st=5|sh=1| df=kibochan_1.dat" align=absmiddle> 番目です。 |
| 画面表示 |
|
あなたは96年5月7日より
|
| ソースプログラム |
|---|
|
あなたは96年5月7日より <img src="http://counter.digits.net/wc/-d/6/-r/-z/miyakou" align=absmiddle> 番目です。 |
| 画面表示 |
|
あなたは96年5月7日より
|
| アクセスカウントプログラム(count.pl) |
|---|
|
#!/usr/local/bin/perl $file="count.dat"; open( IN, "$file" ); $count = <IN>; close( IN ); $count ++; open( OUT, "> $file" ); printf OUT "%d", $count; close( OUT ); printf "%d", $count; |
| カウントされるファイル(html.shtml) |
|
<!--#config timefmt="%y/%m/%d" --> 今日は<!--#echo var="DATE_LOCAL" -->です。<br> 作成は<!--#echo var="LAST_MODIFIED" -->です。<br> あなたは<!--#exec cmd="cgi-bin/count.pl" -->番目です。<br> |
| ソースプログラム cg1.htm |
|---|
|
<html> <head> <title>スライドショー</title> <meta http-equiv="refresh" content="12; url=cg2.htm"> </head> <body text=white bgcolor=black> <center><img src="dome1.jpg"></center> </body> </html> |
|
x-euc-jp x-sjis iso-2022-jp iso-8859-1 us-ascii |
EUCコード シフトJIS JISコード ラテン 米国英語 |
UNIXで使われる パソコンで使われる インターネット(通常) 英語圏 米国 |
| ソースプログラム |
|---|
|
<html> <head> <title>タイトル</title> <meta http-equiv="Content-Type" content="text/html; charset=x-sjis"> </head> <body> シフトJISです。 </body> </html> |
| ソースプログラム |
|---|
|
<html> <head> <title>ホームページの作り方教室</title> <meta name="ROBOTS" <meta name="description" <meta name="keywords" lang="ja" </head> |
MSDOSプロンプト を起動します。| プロバイダー | ホスト名 | 転送先ディレクトリー |
|---|---|---|
| アーバン | ftp.urban.ne.jp | なし |
| @Nifty | ftp1.nifty.com等 | homepage |
| DION | ftp.d7.dion.ne.jp等 | htdocs |
| ハイホー | www.hi-ho.ne.jp | html |
| HEIWA-ネット | www.*.hiroshima-c.ne.jp | web |
| A:\>ftp ftp.urban.ne.jp | ftp.urban.ne.jpに接続(www) |
| User : | 自分のftp用IDを入力 |
| Passewd: | 自分のパスワードを入力 |
| ftp>pwd | 現在の場所(www)を確認 |
| ftp>ls | ファイル一覧(www)を表示 |
| ftp>lcd B:\WEB | B:\WEBから転送(local) |
| ftp>!dir | ファイル一覧(local)を表示 |
| ftp>ascii | アスキーモードに設定 |
| ftp>put index.htm index.html | index.htmをindex.htmlで送付 |
| ftp>mput html*.htm | html*.htm(複数)を一括送付 |
| ftp>get book.html book.htm | book.htmlをbook.htmで取得 |
| ftp>del book.html | book.htmlを削除 |
| ftp>mkdir img | imgディレクトリーを作成(www) |
| ftp>cd img | |
| ftp>lcd img | |
| ftp>binary | バイナリーモードに設定 |
| ftp>put maru.gif maru.gif | maru.gifを送付 |
| ftp>quit |
終了 |
 目次へ
|
発展編へ 
|
横分割 - Netscape