HTML

O
World Wide Web (WWW)
...
Tim Berners-Lee
HYPERTEXT PROJECT
1989
CERN: Conseil European

pour la Recherche Nucleaire
1990
1991 CERN

""
.
Hyperlinks = HyperText
(URL)
http://www.cs.uoi.gr/index.html
ftp://www.cs.uoi.gr/pub

.
.
Client-Server
(server)
"" (client)

server /
Internet
(server software)
Client-Server
client server
.
client-server
TCP/IP
Transmission Control Protocol (TCP)
Internet Protocol (IP)
WEB BROWSERS
browser
NCSA (National Center for

Supercomputing Applications) University of Illinois
MOSAIC
browser
1992-1993
Marc Andreessen

Browsers
Netscape
Internet Explorer
Amaya
HotJava ...
HTML: WEB
.
.
BROWSER.

.

.
HTML
<HTML>
<HEAD>
<TITLE> </TITLE>

</HEAD>
<BODY>
<H1> </H1>
HTML
. <P>
.
</BODY>
</HTML>
E (tags) HTLM

HTML
.

, ..: <H1> . </H1>
H <1>
,
.
H </1>
.
HTML
.
. HTML,
<P> </P>
( ).
<P> ... </P>
<P> .
HTML
/
.
HTML


: 

.

.
E & E
Browsers
.
,
.

.

HTML.
&
HTML ,
,
.
<TITLE> I </TITLE>

.
<Hn> </Hn>
(n = 1,2,,6)

ALIGN
<H1 ALIGN = CENTER> </H1>
"" .
:
ALIGN = LEFT
( )
ALIGN = CENTER ()
ALIGN = RIGHT
( )
ALIGN = LEFT

<P>

</P>

ALIGN
<P ALIGN = CENTER >

</P>
() .

(links)
H HTML
.

.

: <A> </A>
.
Anchor ()
...

, : grades, :
<A HREF = "grades"> </>
Browser
.
""
( "")
grades (
).
...
""
,
path, :
<A HREF = "depts/phys/grades"> </>

<A HREF = "../phys/grades"> </>

(server).
servers

server , :
<A HREF = "http://www.uoi.gr/grades"> B </>
URL.
(Universal Resource Locator)
:
xxxx://host.domain/path/filename
xxxx : http , gopher news,
WWW servers, Gopher servers, Usenet servers.
Email
:

<A HREF="MAILTO:iel@cs.uoi.gr"> </A>
Email
iel@cs.uoi.gr
:

.

. . zoo
lion
zoo lion
: < ="leon">lion </A>
:
<A HREF="zoo#leon"> </A>

.

: Fortran
:
<A NAME="calculations"> Fortran </A>

O :
<A HREF="#calculations"> </>

:
Apples
Oranges
: <UL> (unordered list)

: <LI> (list item)
:
<UL>
<LI> Apples
<LI> Oranges
</UL>

:
1. Apples
2. Oranges
3. Grapes
: <OL> <LI>
(OL = Ordered List)
<OL>
<LI> Apples <LI> Oranges <LI> Grapes
</OL>
-
<OL> .
<OL TYPE = 1>
<OL TYPE = >
<OL TYPE = a>
<OL TYPE = >

<OL TYPE = >
<OL TYPE = 1> <OL>
-
:
<OL TYPE=A> <LI> Apples <LI> Oranges> </OL>
.
. Apples
B. Oranges
:
<OL TYPE=> <LI> Apples <LI> Oranges> </OL>
. Apples
. Oranges
. . .
-
H START
<OL>
.
VALUE
<L>
. :
<OL START=3> <LI> Apples <LI> Oranges
<LI VALUE=7> Grapes <LI> Bananas </OL>

-
-
3. Apples
4. Oranges
7. Grapes
8. Bananas

<OL START=3>
<OL START=3 TYPE=A> :
C. Apples
D. Oranges
G. Grapes
H. Bananas
<OL START=3>
<OL START=3 TYPE=i> :
iii. Apples
iv. Oranges
vii. Grapes
viii. Bananas

:
<DL> </DL> (Definition List)
<DT>
(Definition Term)
<DD>
(Definition Data)
<DL>
<DT> Fortran
<DD>
.
<DT> C
<DD>
.
</DL>

:
Fortran

.
C

.
" " .
<PRE> </PRE> (preformatted)

"" ( tabs )
. :
<PRE>
PROGRAM FARCEL
WRITE(*,*)'TEMPERATURE IN FAHRENHEIT ? '
READ(*,*) FAR
CELCIU = (FAR-32)*5./9.
WRITE(*,*) ' FAHRENHEIT', ' CELCIUS '
WRITE(*,*) FAR,CELCIU
END
</PRE>
E
<B> </B>
(bold) .
<I> </I>
(Italic) .
<CODE></CODE>
<SUP> </SUP>
<SUB> </SUB>
<U> </U>
<BIG> </BIG>
<SMALL></SMALL>

<B> B. Jones </B>
B. Jones
<BIG> B. Jones </BIG>
B. Jones
<I> B. Jones </I>
B. Jones
<CODE> B. Jones </CODE>
B. Jones
<B><U> B. Jones</U> </B>
B. Jones
, ...
<CENTER> </ CENTER >
.
<BR>
<HR>
<HR SIZE= >
<HR WIDTH= %>
a
.
<HR ALIGN= LEFT >
= CENTER = RIGHT
(, )
<HR NOSHADE>
HTML
HTML
GIF
JPEG
(scanners),
.
Y
gif jpeg.

,
( ).
H <IMG>
.
globe.gif <IMG>:
<IMG SRC = "globe.gif">

WIDTH HEIGHT:
<IMG SRC = "globe.gif" WIDTH = 200, HEIGHT = 100>
200 100 pixels.
<IMG SRC = "globe.gif" WIDTH = 50%, HEIGHT = 60%>
50% 60%
.
E ,
-

univ.gif
www.uoi.gr :
<A HREF="http://www.uoi.gr">
<IMG SRC="univ.gif ">
</A>
,
ALIGN= (top, middle,bottom).
<IMG SRC="univ.gif " ALIGN= TOP> ...

<BODY BACKGROUND = "stone.gif"> </BODY>

: stone.gif
<BODY BGCOLOR="color"> </BODY>
.
color = #RRGGBB RR, GG, BB

R,G,B (, , ).
: 0123456789ABCDEF
: <body bgcolor="#FF0000">
.

<font color="#rrggbb"> ... </font>

<font size= J > </font>
J = 1,2,,7
,
J=+3, x=-2 ( )

.
BASEFONT
<basefont size =J color = "#rrggbb" >
J = 1,2,,7
(default)

.
<HEAD> </HEAD>
.

<TABLE>
<CAPTION>The Bradys</CAPTION>
<TR>
<TD> Marcia </TD>
<TD> Carol </TD>
<TD> Greg </TD>
</TR>
<TR>
<TD> Jan </TD>
<TD> Alice </TD>
<TD> Peter </TD>
</TR>
<TR>
<TD> Cindy </TD>
<TD> Mike </TD>
<TD>Bobby </TD>
</TR>
</TABLE>
The Bradys
Marcia Carol Greg
Jan
Alice Peter
Cindy Mike Bobby

<TABLE>
</TABLE>
<CAPTION>
</CAPTION>
<TR> Table

Row
</TR>

<TD> Table

Data
</TD>

<TH>...</> <TD>
<TABLE BORDER="3" CELLSPACING="1" CELLPADDING="1">

<CAPTION>The Bradys</CAPTION>
<TR>
<TD ALIGN = "center"> Agnes </TD>
<TD ALIGN = "center"> Wilma </TD>
<TD ALIGN = "center"> George </TD>
</TR>
<TR>
<TD ALIGN = "center"> Gwen </TD>
<TD ALIGN = "center"> Skippy </TD>
<TD ALIGN = "center"> Alvin </TD>
</TR>
<TR>
<TD ALIGN = "center"> Harry </TD>
<TD ALIGN = "center"> Melvin </TD>
<TD ALIGN = "center"> Joe </TD>
</TR>
</TABLE>
The Bradys
Agnes
Wilma
George
Gwen
Skippy
Alvin
Harry
Melvin
Joe

<TABLE BORDER="3" CELLSPACING="1"
CELLPADDING="1">
BORDER="3"

CELLSPACING="1"

CELLPADDING="1">

<TD ALIGN = "center"> Agnes </TD>
.
: "left", "center", "right"

1999-2000
Partial Subtotals 2001
Tax
TOTAL

<html><head><title>Strange</title></head>
<body>
<table bgcolor="lightblue" border="3">
<tr> <td colspan="3" align="center" >
<b>1999-2000</b></td> <th rowspan="3"
bgcolor="yellow">2001</th> </tr>
<tr><td bgcolor="red" rowspan="2"
valign="middle">Tax</td>
<td>Partial</td> <td> Subtotals </td></tr>
<tr> <td bgcolor="green" align="center"
colspan="2">TOTAL</td> </tr>
</table> </body> </html>
E
<html> <head> <title> Photos in Table </title></head>
<body bgcolor="silver"> <H1> Many Photos </H1>
<table border="0" bgcolor="black" cellspacing="0" >
<tr align=center >
<td> <IMG src="photos\dgp.jpg",HEIGHT=200> </td>
<td> <IMG src="photos\arly.jpg", HEIGHT=200> </td>
</tr>
<tr align=center>
<td><IMG src="photos\nikolop04.jpg" height=200></td>
<td><IMG src="photos\support.jpg" height=200></td>
</tr> </table> </body> </html>
Many Photos
(frames)

etscape
Internet Explorer
HTML 4.0 .
.

<>
TARGET = " "
<A HREF="grades.html" TARGET="new"></>
new,
.
HREF="grades.html"
.

<html> <head> </head> <body>
<h1> HI there </h1>
You can see your
<a href ="grades.html" target="new"> grades here</a>
</body></html>
grades.html
:
<html><head></head>
<body>
HI there
<UL>
<li>Math 19
You can see your grades here
<li>Phys 18
<li>Comp 16
<li>Lite 19
</UL>
</body></html>
HI there
You can see your grades here
Math 19
Phys 18
Comp 16
Lite 19
BASE
<BASE TARGET= "_" >
<HEAD> </HEAD>
.

,
TARGET .
<html><head><base target="profs"></head>
<body>
<UL>
<li> <a href=math.txt>Math 19 </a>
<li> <a href=phys.txt>Phys 18 </a>
<li> <a href=comp.txt>Comp 16 </a>
<li> <a href=lite.txt>Lite 19 </a>
</UL>
</body></html>
math.txt
phys.txt
comp.txt
lite.txt
Mathematics Professor: C. F.Gauss

Physics Professor: A. Einstein
Comp. Science Professor: A. Turing
Literature Professor: S. Bellow
FRAMESET &
FRAME
FRAMESET
,
.
FRAME

.
FRAMESET

COLS = " 1, 2,"

ROWS = " 1, 2,"
() :
pixels,

(*) .
<frameset COLS="110,30%,*">
</frameset>

. 110 pixels,
30% ,
.
110
270
520
270
110
<frameset ROWS="110,30%,*">
</frameset>
110 pixels,

30% ,
520

( )

.

.
FRAME
( )
FRAME
.
<html> <head> <frameset cols="30%,*">
<frame src="grades.html">
<frame src="tex8.gif" name="new">
</frameset></head></html>
.
30%
70% .

grades.html
SRC:
<frame SRC="grades.html">

tex8.gif
SRC:
<frame SRC="tex8.gif" name="new">

name="new",
new.
TARGET
<>
<html> <head> <frameset cols="30%,*">

<frame src="grades.html">
<frame name="new">
</frameset></head></html>
grades.html
<html><head><base target="new"></head>
<body>
<UL>
<li><a href="math.txt"> Math 19</a>
<li><a href="phys.txt"> Phys 18</a>
<li><a href="comp.txt"> Comp 16</a>
<li><a href="lite.txt"> Lite 19</a>
</UL>
</body></html>
Math 19
Phys 18
Comp 16
Lite 19
Math 19
Phys 18
Comp 16
Lite 19
Mathematics Professor: C. F.Gauss
Math 19
Phys 18
Comp 16
Lite 19
Physics Professor: A. Einstein
Math 19
Phys 18
Comp 16
Lite 19
Comp. Science Professor: A. Turing
Math 19
Phys 18
Comp 16
Lite 19
Literature Professor: S. Bellow

<FRAME SROLLING = option>
option = AUTO, NO, YES

<FRAME NORESIZE>

<FRAME RGINHEIGHT = number>

<FRAME RGINWIDTH = number>

<META>
<HEAD></HEAD>
" " (MA)

, ,

Browser

<> .
<META> ...
<META NAME="XXX" CONTENT="YYY">
XXX :
description
keywords
generator
copyright
expires
author
YYY

<META NAME="description" CONTENT="Graphics">

<META NAME="keywords" CONTENT="Paint,Brush">
""
<META NAME="generator" CONTENT="NotePad">

<META NAME="copyright" CONTENT="IBM2000">
copyright
<META NAME="expires" CONTENT="11 May 2000">

<META NAME="author" CONTENT="Homer">

<META>
<META HTTP-EQUIV="XX" CONTENT="YY">

expires
Wed, 26 Feb 1977 08:21:37 GMT
pragma
no-cache
refresh
2; URL= http://www.cs.uoi.gr/
set-cookie
cookievalue=2; path=/
window-target _top
content-type
text/html; charset=iso-8859-7

<META HTTP-EQUIV="expires"
CONTENT="Wed, 26 Feb 1977 08:21:37 GMT">
<META HTTP-EQUIV="pragma"
CONTENT="no-cache">
Browser
.
<META HTTP-EQUIV="refresh"
CONTENT="2; URL= http://www.cs.uoi.gr/ ">
2 sec "" URL

<META HTTP-EQUIV="window-target"
CONTENT="_top">
.
frames ""
.
<META HTTP-EQUIV="content-type"
CONTENT="text/html; charset=iso-8859-7 ">
Browser

file1.html, :
CONTENT="1; URL= file2.html ">
file2.html, :
CONTENT="1; URL= file3.html ">
... ...
. . .

present

: index.html index.htm
/ Solaris
:
public_html 755
. . .
present
public_html

755
login :
csst0188,
:
www.cs.uoi.gr/~csst0188/present/
Cascading Style Sheets

(CSS)
?
" "

, .
.

.

Netscape Navigator 4.0
Microsoft Internet Explorer 4.0

Emacs
Arena
Amaya
. . .

<STYLE> </STYLE>
<head> </head>
<HEAD> <TITLE> CSS Example </TITLE>
<STYLE TYPE="text/css">
H1 {font-size: 32pt; color: red}
H2 {font-size: 24pt; color: blue}
</STYLE>
</HEAD>

<STYLE>
HTML.
H1 {font-size: 32pt; color: red}

<1>
32
.
H2 {font-size: 24pt; color: blue}
<2>

TAG {_1: ; _2: ; }
TAG HTML , :
1
BODY
P

P {text-indent: 3em ; color: red; font-size:
18pt }
(<P></P>),
3
.
.
18 .
Classes

.

.
:
H1.norm { color: #0000FF; font-size: 24pt
}
H1.enh
{ color: #FF2288; font-size: 32pt

1.
norm
enh
:
<H1 class = norm> </H1>
<H1 class = enh > VI </H1>
,
HTML. :
.norm { color: #0000FF; font-size:
24pt }
.enh { color: #FF2288; font-size:
} :
32pt
<H1 class = norm> </H1>

<P class = enh > VI </P>

ID
(ID selector).
#pib {color: black; font-size: 40pt }
:
<h1 id=pib > </h1>
<p id=pib > </p>
Contextual selectors
:
P EM { background: yellow }
: !!!
:
<P> <EM> </EM> </P>

<html><head>
<style>
P EM { background: yellow }
</style>
</head>
<body>
<h1> </h1>
<p>
This is an <em> emphasized piece of text </em>
and it is treated specially
</p>
Isn't it great ?
<P> <em> INDEED </em> !!! </p>
</body></html>
This is an emphasized piece of text and it is treated specially

Isn't it great ?
INDEED !!!
Grouping

. .:
H1, H2, H3 {color: red;
font-family:sans-serif}

<1>, <2> <3>

sans-serif.
Pseudo-classes
: Anchor pseudo-classes
A:link {color: red}
A:active { color: blue; font-size: 125% }
A:visited {color: green; font-size: 85% }
:

125%
85%
-
:
P:first-line {font-variant: small-caps;
font-weight: bold}
P:first-letter {font-size: 300% ; float: left}

.

Font
Color & Background
Text
Box
FONT
Font-Family
Font-Style
Font-Variant
Font-Weight
Font-Size
Font
Font-Family
Font-family: Name1, Name2, , Generic1, Generic2,
P {Font-Family: Arial, Times, serif}
Name1, Name2
Generic1,
Generic1, :
serif
Times
sans-serif
Arial
cursive
Zapf-Chancery
fantasy
Western
monospace
Courier
Font-Style
Font-Style: XXX
: XXX :
normal
italic
oblique
H1 { font-style: oblique }
P { font-style: normal }
Font-Variant
Font-Variant: XXX
: XXX :
normal
small-caps
H1 { font-variant:small-caps }
Font-Weight
Font-Weight: XXX
: XXX :
normal
bold bolder lighter
100 200 900
H1 { font-weight: 800 }
P { font-weight: 300 }
Font-Size
Font-Size: XXX
: XXX :
xx-small x-small small medium large xlarge xx-large
larger smaller
A pt in (points/inches)
%
P { font-size: 90% }
Font
Font: XXX
: XXX :
font-style font-variant font-weight
font-size/line-height
P { font: italic bold 12pt/14pt Times, serif }
...

Word Wide Web (WWW).
:
http://www.w3.org/
http://netspace.students.brown.edu/users/dwb/www-authoring.html
http://www.wnetc.com/technical/html.html
http://oneworld.wa.com/htmldev/devpage/dev-page1.html
Y HTML,
( ) ( )
.

HTML

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML

Uploaded by

Copyright:

Available Formats

O

World Wide Web (WWW)

CERN: Conseil European

NCSA (National Center for

<P ALIGN = CENTER >

<A HREF = "depts/phys/grades"> </>

<A NAME="calculations"> Fortran </A>

<A HREF="#calculations"> </>

: <UL> (unordered list)

<OL TYPE = >

<OL TYPE = 1> <OL>

<HR SIZE= >

<HR WIDTH= %>

<HR ALIGN= LEFT >

<TABLE BORDER="3" CELLSPACING="1" CELLPADDING="1">

<A HREF="grades.html" TARGET="new"></>

Mathematics Professor: C. F.Gauss

COLS = " 1, 2,"

<html> <head> <frameset cols="30%,*">

Mathematics Professor: C. F.Gauss

Physics Professor: A. Einstein

Comp. Science Professor: A. Turing

Literature Professor: S. Bellow

option = AUTO, NO, YES

<FRAME RGINHEIGHT = number>

Cascading Style Sheets

Microsoft Internet Explorer 4.0

H1 {font-size: 32pt; color: red}

{ color: #FF2288; font-size: 32pt

<H1 class = norm> </H1>

This is an emphasized piece of text and it is treated specially

P {Font-Family: Arial, Times, serif}

You might also like