107

5 WEB

Web HTML Perl PHP

CGI Flash Plugin HTML

MIDI

Web HTML Web

5.1: HTML

HTML

HTML 5.1

Web

Web

HTML

Web 24

LAN

5 WEB 108

Blog Web Web Web

Blog PC

5.1 HTML

HTML HTML

html htm Windows

HTML Macintosh

HTML 1byte

! //

HTML

HTML

HEAD

HEAD

BODY

/BODY

/HTML

5 WEB 109

HTML

HTML

HTML

............... /

TITLE ......... /TITLE

A HREF=” ” ........ /A

BR IMG SRC=”....” HR SIAZE=2

H .... /H

1 6 FONT SIZE=”

” .... /FONT 1 7

CSS HTML

HTML CSS HTML

5.2 Web

HTML

Web

Web HomePageMill FrontPage

1.

2. 5.2

• Web

•

5 WEB 110

5.2: Web

5 WEB 111

3.

FTP

index.html

•”.” html HomePageMill

• GIF JPEG

gif jpg

PICT GIF

• Au AIFF

au aif

• MIDI MIDI mid

• MPEG Quick Time

mpg mov

4. HTML

5.

6. FTP

/home/ ID/public html

Web

Fetch FTP

7.

UNIX telnet

(a) telnet

(b) cd Web /public html

(c) chmod 644

8.

5 WEB 112

5.2.1 FRAME

HTML

Web

HTML Frame

Web Frame

TABLE

Web

5.3 html

html

30% 70%

hogehoge

hegehegemokuji

hogehoge

hegehege

hoge.html

mokuji

mokuji.htmlmakeframe.html

<FRAMESET=

</FRAMESET>

5.3:

Frame BODY /BODY

1. Window Frame

5 WEB 113

• FRAMESET (COLS= — ROWS=)

pixel(default),COLS=”20%,80%” rows=”20,50,*” *pixel

(FRAMEBORDER=”yes—no”)

BORDERCOLOR=””)

(NORESIZE)

• FRAME SRC=” ” (NAME=” ”)

NAME

• /FRAMESET

2. Frame html

• A HREF=” ” TARGET=”FRAME

” /A

TARGET

bland

parent

self

top

3. NOFRAME /NOFRAME Frame

FRAMESET

NOFRAME /NOFRAME

IE

•IFRAME SRC=” ”

(NAME= ”” WIDTH=”” HEIGHT=”” ALGIN=””)

/IFRAME

5 WEB 114

5.2.2 CSS)

HTML

HTML Web

HTML

CSS CSS

CSS

CSS

1.

H1 STYLE = ”font-style:italic; font-size:30pt;

background-color:Aqua; color: ff0000”

2.

STYLE TYPE = ”text/css” STYLE

3. HTML

.css HTML

LINK REL = STYLESHEET HREF = ” ”

TYPE = ”text/css”

CSS

CSS

CSS

• 12 14

P font-sizet:12pt; line-height:14pt;

color:Darkgreen;

5 WEB 115

•H2 font-style:italic;

background-color:Yellow;

•P margin:0;

CSS CLASS CLASS

CSS

CSS

P font-size:12pt/14pt;

text-indent:10 ;

.back color:Darkgreen;

.image background-image:url(mad.gif);

•P CLASS = ”back”

•P CLASS = ”image”

DIV SPAN

DIV

SPAN

CSS

CSS

CSS

CSS

CSS

web

Web

CSS

CSS

• CSS1 W3C

http://www.w3.org/pub/WWW/TR/REC-CSS1

5 WEB 116

• CSS2 W3C

http://www.w3.org/pub/WWW/TR/REC-CSS2

• WWW

http://tohoho.wakusei.ne.jp/www.htm

CSS

•• MS

••••

5 WEB 117

5.2.3 Web

Web

Web

1.

2.

form

HTML

FORM

CGI

action

CGI

HTTP CGI

Perl PHP shell Ruby

get post

CGI

GET

POST

POST GET

5 WEB 118

BASE64

JavaScript

action method

1. Java JavaScript Jscript

Web HTML

JavaScript

ImageReady

•(a)

(b)

(c)

(d)

(e)

(f)

i.

ii.

•(a)

(b)

(c)

(d) over

(e) over

(f)

(g)

(h)

(i)

5 WEB 119

(a)

• ImageReady

.

(a) .

2. Flash HTML

3. CGI SSI

HTML

form

Webmail

••

(a) http

(b) CGI

(c) CGI form Web

CGI SSI

Web CGI

JavaScript

JavaScript

Natscape

communications Netscape Navigator ver.2 java script

java script

java

5 WEB 120

java script html

js script JavaScript

NOSCRIPT /NOSCRIPT

JavaScript

SCRIPT TYPE=”text/JavaScript” src=”hogehoge.js”

//

/SCRIPT

NOSCRIPT

JavaScript

/NOSCRIPT

Document Object Model

web

HEAD

meta http-equiv = ”Content-Script-Type” content = ”text/JavaScript”

SCRIPT TYPE = ”text/JavaScript”

!

var today = new Date();

var memorial month = new Number();

var memorial day = new Number();

var img ord = new Image();

var img memo = new Image();

IMG ORD = ”ordinary day.gif”; //

IMG MEMO = ”memorial day.gif”; //

MEMORIAL MONTH = ”7”; //

MEMORIAL DAY = ”7”; //

function isMemorialDay()

document.thisImage.src = IMG ORD;

5 WEB 121

if((MEMORIAL MONTH == (today.getMonth()) + 1)

(MEMORIAL DAY == today.getDate()))

document.thisImage.src = IMG MEMO;

//

/SCRIPT

/HEAD

BODY onLoad = ”isMemorialDay()”

! thisImage

IMG name = thisImage

/BODY

;

//

/ / JavaScript

JavaScript .

var new

create

JavaScript C if else, swith, do, while, for, goto

GUI onClick, onDblClick, onKeyDown,

onKeyPress, onKeyUp, onMouseDown, onMouseUp, onMouseOver, onMouseOut, on-

MouseMove, onLoad, onUnload, onFocus, onBlur, onSubmit, onReset, onChange, on-

Resize, onMove, onDragDrop, onAbort, onError, onSelect

html

H2 FORM /H2

FORM NAME = ”form1” METHOD = ”post”

INPUT TYPE = ”text” NAME = ”textfieldNum1”

INPUT TYPE = ”text” NAME = ”textfieldNum2”

INPUT TYPE = ”button” VALUE = ” ”

onClick = ”doMultipule()”

INPUT TYPE = ”text” NAME = ”textfieldResult”

5 WEB 122

VALUE = ”0”

/FORM

onClick doMultiple()

meta http-equiv = ”Content-Script-Type” content = ”text/javascript”

SCRIPT LANGUAGE = ”JavaScript”

!

//

function doMultipule()

document.form1.textfieldResult.value =

document.form1.textfieldNum1.value

document.form1.textfieldNum2.value;

//

/SCRIPT

textfieldNum1 textfieldNum2 value

textfieldResult value

JavaScript

JavaScript

•http://msdn.microsoft.com/workshop/default.asp

• Netscape

http://developer.netscape.com/docs/manuals/JavaScript.html

• JavaScript WWW

http://tohoho.wakusei.ne.jp/www.htm

•

Date getHour()

today.getMonth() ...

document.body.backgroud

...

5 WEB 123

•BMI

18.5 25

form value

str - 0

parseInt(str)

parseFloat(str)

5 WEB 124

5.2.4 Web MIDI YAMAHA MIDPULG

Web MIDI

MIDI

MIDI MIDI

MIDI

A HREF=” .mid” /A

PLUGIN Web

HTML

PLUGIN YAMAHA

MIDPLUG west.mid MIDI

EMBED SRC=”west.mid” WIDTH=150 HEIGHT=40 Panel=0 AU-

TOSTART=FALSE REPEAT=FALSE

YAMAHA MIDPLUG

WIDTH= HEIGHT= MIDPULG

Panel= 0

AUTOSTART=

TRUESE FALSE

REPEAT= TRUESE

STOP

FALSE

5.2.5 FTP

Web FTP FTP

FFFTP

FFFTP

1. FFFTP

2. 5.4 FFFTP

3. 5.5

•

5 WEB 125

5.4: FFFTP

• FTP

benten.cmp.aichi-fam-u.ac.jp

• FTP

ID

s

• FTP

• ...

•

• PASV

• OK

FFFTP

1. 5.4

2. 5.6

3.

5 WEB 126

5.5: FFFTP

5.6: FFFTP

5 WEB 127

4.

5.2.6 Web UNIX

Mac-

intosh OS

Macintosh OS

. .. . cd

,ls ..

./public html

public html

../public html

public html

. ..

/

UNIX

ID

r: w: x:

ls -la

2 2 2 w 2 1

2 x 2 0 1 1

4+0+0=4

4+2+0=6 0+0+1=1

ID

chmod chmod

644 index.html

chmod chmod 644

ls ls -la

cd cd

rm rm rm -rf

5 WEB 128

mv mv mv

mkdir mkdir