Εισαγωγή Στη Γλώσσα Υπερκείμενου HTML 2

HTML
Client Server Web (1)

Requests
Client
Responses
Server
Client: web browser (IE, Mozilla Firefox )

Server: web server (Apache, IIS )
client server
HTTP (Hypertext Transfer Protocol)
Client Server Web (2)

3 TIER MODEL
Requests
Client
Responses
Data
Server
Data
Warehouse
Data Warehouse: DBMS (SQL, XML )

server ,
DMBS, ,
client
3

(1/2)
WWW
, ,
,

.
HTML

.

(1/2)
:
,
.

(, )

(, , video)

.
HTML
HyperText Markup Language

web browsers
: HTML
HTML
1
Hyper Text Markup Language

(HTML)

1990 SGML DTD 1992
(postscript)
HTML v4.0
80
(Style Sheets)

<author>

CLASS

<name>
<DIV CLASS
= author>
</name>
<email> costas@ionio.gr
</email>
</author>
SGML
<DIV CLASS = name>

</DIV>
<DIV CLASS = email> costas@ionio.gr </DIV>
</DIV>
HTML
HTML
(tag)
HTML <>
.

.
<HTML></HTML>, <IMG />
:

Tag Attributes
tag.
tag
< _attribute= >
<BODY bgcolor="#FFFFFF" >
10
Tags and Attributes

Tag ()
Attribute ( )
Elements-

Elements-
:

<b><i></i></b>
:

Attributes
attributes
,

: <element
attribute=value>
</element>
: <font color=red>
</font>
HTML
HTML
( )
HTML
<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY>

</BODY>
</HTML>
16
/
HTML (1/8)
HTML
,
HEAD BODY,

HTML.
Header
<head> HTML
<title>:
<base>:
pathnames
links
<link>:

<meta>: ,
-
<script>:
JavaScript, VBScript
<style>: CSS (Cascading Style
Body
<body>

HTML .
<body bgcolor=color text=color
link=color vlink=color
alink=color>
<body background=background.gif>
<body marginwidth=0 marginheight=0
leftmargin=0 topmargin=0>
/
HTML (2/8)
:
<hx ></hx>
x: 1 6. h1
/
.
:
.
:
browser.
/
HTML (3/8)
:
<a href=></a>
(
):
http://.
[: ]
file:///C:/...
[:
]
../../...
[: ]
:
.
/ HTML (4/8)
tag <a> (1)
<A HREF=adrress></>
adrress:

: ./index.html, ../pics/hello.html
: /var/www/mysite/index.html, C:\program files\... (BAD
PRACTICE)
URL
http://www.nurs.uoa.gr/
22
/ HTML (5/8)
tag <a> (2)

<a name=titles >Titles</a>
link
<a href=#titles> </a>
<a href=htpp://mysite.gr/conv.html#titles>
Attribute target: link

<a target="_blank" >
Attribute target: link

<a target="_self" >
23
/
HTML (4/6)
:
<b
></b>
:
<i
></i>
:
<u
></u>
/
HTML (5/6)

:

,

:
<b><i><u></u></i></b>.

.
/
HTML (6/6)
<p ></p>
:

.
<p>
<p></p></p> .
</p> ,
.

<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=iso8859-7 />
<TITLE> HTML </TITLE>
</HEAD>
<BODY>
<H1> </H1>
<P>1 </P>
<P>2 </P>
</BODY>
</HTML>
27
28
Tags
<h1> 1</h1>
<h2> 2</h2>
<h3> 3</h3>
<h4> 4</h4>
<h5> 5</h5>
<h6> 6</h6>
<b> </b>
<i> </i>
<u> </u>
<br>
<p> </p>
<center>
</center>
29
HTML (3)
K HTML (3)
<html>
<head>
<title>
HTML
</title>
</head>
<body>
<h2> HTML </h2>
<p>
<table border=0>
<tr><td>&nbsp</td></tr>
<tr><td><img src="/docs/tim.jpg" alt="Tim Berners-Lee"></td></tr>
<tr><td><font size=4>O Tim Berners-Lee, Web
<a href="http://www.w3.org" target="new">World Wide
Web Consortium</a></font></td>
</tr>
</table>
</body>
</html>
HTML (1/2)
:
<ol ></l>.
:
<li> </li>.
:
<ul ></ul>.
:
<li> </li>.
HTML (2/2)
:

.
(ol li ul li)
</li> .

.
li
/ .
(example 1)
<ul>
<li>item1</li>
<li>item2</li>
</ul>
<ul type="circle">
<li>item1</li>
<li>item2</li>
</ul>
<ul type="square">
<li>item1</li>
<li>item2</li>
</ul>
34
(example 2)
<ol>
<li> </li>
<li></li>
</ol>
<dl>
<dt>
<dd> 1
<dt>
<dd> 2
</dl>
35
(2)
(2)
<html>
<head>
<title>
HTML
</title>
</head>
<body>
<center>
<h2> HTML </h2>
<p>
</center>
<b><i> unordered list</i></b>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<b><i> ordered list</i></b>
<ol>
<li> </li>
<li> </li>
<li> </li>
<li> WWW</li>
<li> - </li>
</ol>
<b><i> definition list</i></b><p>
<dt>HTML
<dd>Hypertext Mark-up Language</dd>
</dt>
</body>
</html>
HTML (1/2)
: <body bgcolor=
>
: :
- 136 (

http://www.molly.com/molly/webdesign/1
36_colors.html
)
: )
RGB )
216
(
http://www.molly.com/molly/webdesign/co
HTML (2/2)
:
<body text = >

: <font color=
></font>

Tag <img>
<IMG SRC=___
HEIGHT=100 WIDTH=50 align=left alt=text
/>
http://www.w3schools.com/html/html_images.asp
40
HTML (1/5)
: <img
>.
:
src=_/_
width=_ _ pixels
height=__ pixels
alt=_
align=_ [
: left, right, center]
HTML (2/5)
:
</img>.

Web

browser.

.
HTML (3/5)

:
<a href= ><img src
></a>.
, browsers,

,
.

border=0
.
HTML (4/5)
:
<body background=_/
_>
HTML (5/5)
:
, 3,5
. 4,5 .
.
:
<a href=http://nurs.uos.gr>
<img src=eifel_tower.jpg width=4,5
height=3,5 align=center border=0>
</a>

:
<TABLE border=1>
<TR> <! -->
<TD> 1,1 </TD>
<TD> 1,2 </TD>
</TR> <!- -->
<TR>
<TD> 2,1 </TD>
<TD> 2,2 </TD>
</TR>
</TABLE>
http://www.w3schools.com/html/html_tables.asp
46
HTML (1/2)
,
:
:
<table
></table>
:
<tr ></tr>
:
<td ></td>
HTML (2/2)

:
<table>
<tr>
<td></td>
</tr>
</table>

:
<td bgcolor= ></td>
HTML Table
This code:
<TABLE>
<TR>
<TD>Name</TD>
<TD>Grade</TD>
</TR>
<TR>
<TD>Jane Smith</TD>
<TD>Senior</TD>
</TR>
</TABLE>
Will appear like this:
Name
Grade
Jane Smith
Senior
TR & TD Attributes
Align left, right, or center
Valign vertical alignment top, middle, or bottom
BGCOLOR background color
Width in pixels or percentage of total space available
Height in pixels or percentage of total space available
Examples:
<TR ALIGN=center VALIGN=middle BGCOLOR=#336677

WIDTH=50%>
<TD ALIGN=Left VALIGN=bottom BGCOLOR=#FFFFFF
WIDTH=25%>

<table width="100%" border="2"
cellpadding="12"
cellspacing="5"
bordercolor="#ECE9D8">
<tr>
<td rowspan="2">hello</td>
<td width="20%"> </td>
<td> </td>
</tr>
<tr>
<td>hello</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td colspan="2">hello</td>
</tr>
</table>
51
HTML
:
<hr>
:
<pre>
.</pre>
:
>
>
<
<
&
&
"
()
52

<FRAMESET COLS="*,*">
<FRAME SRC="Cell1.html" NAME="left">
<FRAME SRC="Cell2.html" NAME="right">
</FRAMESET>
<NOFRAMES>
<P>This web browser does not support
frames.</P>
</NOFRAMES>
53
54

client
server.
Tag <form> ( </form>)
Attributes
Action:
Method: HTTP
- GET POST ( )
<form action="myAction.php" method="get">
, textboxes tag
<input>
55

input
text
password
checkbox
radio
button
submit
reset
textarea
select
multiple
option
56
- Input
text:
<input type=text name=myTextBox value=test
text>
password:
<input type=password name=myPasswd>
checkbox:
<input type=checkbox name=myCheckBox
value=yes>
radio:
<input type=radio name=myRadio value=yes>
<input type=radio name=myRadio value=no>
57
Input (2)
button:
<input type=button name=MyButton
value=click me>
submit:
<input type=submit name=MySubmit
value=submit>
reset:
<input type=submit name=MyReset
value=reset>
58

textarea:
<textarea name=myTextarea>
Textarea</textarea>
select:
<select name=mySelect>
<option value=1>option 1</option>
<option value=2>option 2</option>
</select>
select ( ):
<select name=myMultiSelect multiple>
<option value=1>multiple option 1</option>
</select>
59

<form name="myForm" action="myAction.php" method="get">
<br>Textbox:<input type="text" name="myTextBox" value="test text">
<br>Password:<input type="password" name="myPasswd">
<br><input type="checkbox" name="myCheckBox" value="yes" checked>
"yes".
<br><input type="radio" name="myRadio" value="yes" checked> yes
<br><input type="radio" name="myRadio" value="no"> no
<br><input type="button" name="MyButton" value="click me">
<br><input type="submit" name="MySubmit" value="submit">
<br><input type="submit" name="MyReset" value="reset">
<br><textarea name="myTextarea"> Textarea</textarea>
<br><select name="mySelect">
<option value="1">option 1</option>
<option value="2">option 2</option>
</select>
<br><select name="myMultiSelect" multiple>
<option value="1">multiple option 1</option>
<option value="2">multiple option 2</option>
<option value="3" selected>multiple option 3</option>
</select>
<br>
</form>
60
61
HTTP GET/POST (1)

, browser
server
_=
textbox :<input type="text"
name="myTextBox />, Hello
myTextBox=Hello
62
HTTP GET/POST (2)

GET POST ?
POST: P
browser,
GET: url
http://www.di.uoa.gr/gr/anouncedept_detail.php?anno=1725
63

:
Edit ( ) -> View Source
html
tags.
:
<I> </>
<i> </i>
.
64
HTML5
HTML
HTML5

2004 Apple,
Mozilla Foundation
Opera software
2008

2011
34%
HTML5

Adobe

Flash
:

HTML5

(Chrome, Firefox, Internet Explorer, Safari,
Opera) HTML5
APIs,
HTML5
.
HTML 5 AOL,
Apple, Google, IBM, Microsoft, Mozilla,
Nokia, Opera,
.
HTML5;
HTML5
HTML.
HTML,
HTML 4.01, 1999,

.

plugins.
,
,
,
web.
HTML5 cross-platform.

Tablet, Smartphone,
Smart TV.
HTML5;

HTML, CSS, DOM JavaScript
plugins ( Flash)

,
HTML5

ML5;

CSS3

2D/3D

SQL

HTML5 Canvas
<canvas> HTML5

, on the fly,
scripting ( JavaScript).
Canvas
, ,
,
.
Browser
Internet Explorer 9 +, Firefox, Opera,

Chrome Safari
<canvas> .
: Internet Explorer 8
,
<canvas>
.

<canvas id="myCanvas" width="200"
height="100"
style="border:1px solid #000000;">
</canvas>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,150,80);

HTML5 ;
. -
,
text-rendering .
banner. Flash
,
.

.
Emulators/Simulators.
JS.
(Charts & Graphs).

Flash, SVG,
HTML / CSS.
,
,
.

.

.
SVG HTML5
SVG Scalable Vector Graphics

SVG
Web
SVG XML

SVG
SVG W3C
SVG
zoom

<!DOCTYPE html>
<html>
<body>
<svg width="300" height="200">
<polygon points="100,10 40,180 190,60 10,60
160,180"
style="fill:lime;stroke:purple;stroke-width:5;fillrule:evenodd;" />
</svg>
</body>
</html>
SVG
Canvas
SVG

rendering(Google
Maps)

Png Jpg

rendering(
cross-Platform
)
.
,
; HTML5
,

web
.
http://codepen.io/suffick/pen/KrAwx

http://www.w3schools.com/html/
http://www.el.wikipedia.org/
http://www.pc-magazine.gr
CSS
Cascading Style Sheets
CSS
Cascading Style Sheets
style HTML
.
HTML
/ .
HTML elements / attributes

CSS /
.
2/3/2009
87
Cascading Style Sheets (CSS)

1996 CCS1 , 1998 CCS2 , 2011 CSS3 (1999)
( )
(statement) :
(selector) :
(declaration) :
1 { font-size : 13pt }
p{
font-size : 10pt ;
text-align : justify ;
}
blockquote { font-size : 90% }
CSS

, , ,
, &
,
(..
)

89
CSS
:
<p class=emph>
. </p>
<p class=norm>
. </p>
----------------------------------------------------------------------.emph { font-weight : bold }
(type) :
(attribute) :
class id
(contextual) :

<p>

<p> </p>
</p>
----------------------------------------------------p p { font-color : red }
CSS
CSS
Inline styles

<H1 style=font-size: 15pt ; font-weight: bold> </H1>
Embedded style sheets

Linked style sheets

link rel=stylesheet type=text/css href=style.css/>
CSS
CSS 3 : selector, property value:
selector {property:value}
selector element/tag , property

, value
.
:
body {background-color:black}
p {font-family:"sans serif"}
"" .
p {text-align:center;color:red}
; .
h1,h2,h3,h4,h5,h6 {color:green}
.
2/3/2009
92
CSS HTML
3 :
style sheet ( )
, CSS web site.
CSS <link> tag <head>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css"/>
</head>
style sheet - head ( )

<head>
<style type="text/css>
h1 {color:black}
p {margin-left:20px}
body {background-image:url("images/back40.gif")}
</style>
</head>
Inline style ( )
<p style="color:black;margin-left:20px">This is a paragraph.</p>
2/3/2009
93

<html>
<head>
<style type="text/css">
body { backgroundcolor:green; }
h1 {color:orange; textalign:center;}
p {color:blue;fontsize:20px;}
</style>
</head>
<body>
<h1>CSS example!</h1>
<p>This is a
paragraph.</p>
</body>
</html>
2/3/2009
94
CSS
Background
Border and outline
Dimension
Font
List
Margin
Padding
Positioning
Table
Text
:
http://www.w3schools.com/css/css_reference_atoz.asp
2/3/2009
95
CSS Classes
CSS classes
HTML
CSS:
HTML:
.center {text-align:center}
<div class=center>
<p class=center>
elements:
CSS:
p.under {text-decoration:underline}
p.center {text-align:center}
HTML:
<p class=center under>
2/3/2009
96
CSS IDs
styles
elements IDs
HTML.
html element
id.
:
style: #para1 {text-align:center;color:red;}
element: <p id=para1>
classes IDs!
2/3/2009
97
CSS
CSS
.
:
.aclass h3 {}
A <h3> elements element class=aclass.
table.aclass tr {magrin:20px;}
A <tr> elements element <table>
class=aclass.
2/3/2009
98

<html>
<head>
<style type="text/css">
p { color:blue; text-align:center; }
.marked { background-color:blue; }
.marked p { color:white; }
</style>
</head>
<body>
<p>This is a blue, center-aligned
paragraph.</p>
<div class="marked">
<p>This p element should not be blue.</p>
</div>
<p>p elements inside a "marked" classed
element keeps the alignment style, but has
a different text color.</p>
</body>
</html>
2/3/2009
99
CSS
Measurement Values ( )
%
px pixel
in inch
cm centimeters
mm milimeters
em 1em font size
Color Values
: .. white, blue, green .
rgb(x,x,x) : .. rgb(255,0,0)
HEX : .. #ff0000
2/3/2009
100
To CSS Box Model

html element
(box)
css

2/3/2009
Margin :
border.
/ transparent.
Border :
padding
content.
Padding :
content.

background.
Content :

:
width:250px;
padding:10px;
border:5px solid gray;
margin:10px;
Total width= 300px!!
101
Grouping
Grouping

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

<1>, <2> <3>

sans-serif.
PseudoPseudoclasses
classes
Anchor
Anchorpseudopseudoclasses
classes
A:link {color: red}

A:visited {color: green; font-size: 85% }
A:hover {color: black}
A:active { color: blue; font-size: 125% }
:
,
,
, , 85%
, 125%
CSS
CSS

HTML
<LINK>.
: mystyles.css,
:
body {color: #0000FF;
font-family: arial;}
h1 {font-style: oblique;
font-size: 32pt; color: red}
p {font-family: serif; font-size: 24pt }
CSS: <link>
<html> <head>
<title> CSS </title>
<link href="mystyles.css"

type="text/css"
:
rel="stylesheet">
</head>
<body>
<h1> Relativity </h1>
<p>
The principle of relativity is relative and
cannot be made absolute
</p>
This is very interesting
</body></html>
PHP
PHP
Hypertext Preprocessor (http://www.php.net)
, scripting ( php
pc )
web server
, HTML (,
)
web interface
107
PHP ()
3
L
.
:
scripts
.
PHP ()
2.
"<?php"
"?>"tag
tag.
tag.
PHP ()
3. o Web
Serer .
PHP (V)
L
Web Server.

Web
Browser. notepad
Windows.

.
script web server
.

.
WAMP.
PHP (V)
- script
'Hello World'
web browser.
script web serer,

web browser 'Hello World'.
script
, , script
L. tags L
script.
tags ML tags .
web serer

L

.php web serer, script
.
script WWW web serer
index.php URL
http://localhost/index.php web browser
PHP (VII)
L

.

web serer
"Hello World".
1
HTML.
2 4 tag
.
script 3
print
web browser.

PHP ()
Requests
Responses
Data
Server
Data
Warehouse
1. O browser web server

HTML forms
2. O web server php
3. web server
(3 tier)
4. HTML
116
client
PHP ()
1.
2.
3.
web server module php
.php
php html
<?php
// php
?>

<? Php
includemy_library.php';
?>
117
PHP - Variables

$
$myVar = hello world!;

echo $myVar;
118
PHP - Variables
<?php
$bool = TRUE;// a boolean
$str= "foo";// a string
$int= 12;// an integer
echo gettype($bool); // prints out "boolean"
echo gettype($str);// prints out "string"
// If this is an integer, increment it by four
if (is_int($int)) {
$int += 4;
}
// If $bool is a string, print it out
// (does not print out anything)
if (is_string($bool)) {
echo "String: $bool";
}
?>
119

<body>
<?php
$myVar = hello world!;
echo $myVar;
echo <br><b>".
$myVar."</b>";
?>
</body>
120
Arrays
<?php
$arr = array("foo" => "bar", 12 => true);
echo $arr["foo"]; // bar
echo $arr[12];// 1
$colors = array('red', 'blue', 'green', 'yellow');
foreach ($colors as $color) {
echo "Do you like $color?\n";
}
/* output:
Do you like
Do you like
Do you like
Do you like
*/
?>
red?
blue?
green?
yellow?
121
PHP
If
if ($a > $b)

print "a
} elseif ($a
print "a
} else {
print "a
}
{
is bigger than b";
== $b) {
is equal to b";
is smaller than b";
While
$i = 1;
while ($i <= 10):
print $i;
$i++;
endwhile;
122
PHP - Functions
<?php
function square ($num)
{
return $num * $num;
}
echo square (4);
// outputs '16'.
?>
123

GET:
$_GET[( )]
POST:
$_POST[( )]
124

<form action="welcome.php" method="get">
Name: <input type="text" name="name">
Age: <input type="text" name="age">
<input type="submit">
</form>
Welcome <?php echo $_GET["name"]; ?><br>
You are <?php echo $_GET["age"]; ?> years old!
125

:
<?php $file=fopen("welcome.txt","r"); ?>
:
while(!feof($file))
{
echo fgets($file). "<br>";
}
:
fclose($file);
126
Sessions
client
login?
username?
?
web server client (Ip address/agent)

session ID
()
session
To

127
Sessions
1.
start session (
login)
session_start();
2.

$_SESSION['views']=1;
3.
session
if(isset($_SESSION['cart']))
4.
session
unset($_SESSION['views']);
5.
session ( log out)

session_destroy();
128

http://www.w3schools.com/html/default.
asp
http://www.w3schools.com/js/default.asp
http://www.w3schools.com/php/default.a
sp
http://www.php.net/manual/en/
129

bundle install, Apache, PHP etc
Appserv
http://www.appservnetwork.com/index.php
WAMP
http://www.wampserver.com/en/
XAMP
http://www.apachefriends.org/en/xampp.html
NVU (html editor)

http://nvudev.com/index.php
PHP Text DB API

http://www.c-worker.ch/txtdbapi/index_eng.php
130
()
()

+ CSS
Cascading Style Sheet (CSS).

www.csszengarden.com
()
()

.

web server .
vs
Dynamic VS Static
Websites

()

()
Local Web Servers
WAMP
Windows
http://www.wampserver.com/en/
UNIFORM SERVER
MAMP
LAMP
XAMPP
http://www.wampserver.com/wamp5.chm
http://www.uniformserver.com
http://www.uniformserver.com/doc/index.htm
Apple Mac
http://www.mamp.info/en/mamp.ht
OSX
ml
Linux
Linux
http://www.mamp.info/en/help.html
Mac,
http://apachefriends.org
http://www.apachefriends.org/en/faq-
Windows, Linux, Solaris
xampp.html
- CMS -

(Content Management System CMS);

CMS ' ;

CMS
.

.

.
Content Management Systems (CMS)

- (Content
Management System)

,

CMS ()
(computer s/w
application)

.
, ,
,
:
= , , , ,
,

versioning

(repository)
CMS ()

,
HTML
,
web (HTML )
web ( ,

web )
CMS Content Management

Systems

Modular - plugins
template
Browser-based , software

.
, (
/ /
)
Open Source CMS
Joomla! http://www.joomla.com
Drupal http://www.drupal.org
Typo3 http://www.typo3.org
Xoops http://www.xoops.org
Wordpress (Blog CMS) http://www.wordpress.org
Liferay Portal (Java) http://www.liferay.com/
Alfresco http://www.alfresco.com/
Plone http://plone.org/

Εισαγωγή Στη Γλώσσα Υπερκείμενου HTML 2

Uploaded by

Document Information

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 2

Uploaded by

Copyright:

Available Formats

HTML

Client Server Web (1)

Client: web browser (IE, Mozilla Firefox )

Client Server Web (2)

Data Warehouse: DBMS (SQL, XML )

Hyper Text Markup Language

<DIV CLASS = name>

Tags and Attributes

Attribute target: link

Attribute target: link

Will appear like this:

<TR ALIGN=center VALIGN=middle BGCOLOR=#336677

HTTP GET/POST (1)

HTTP GET/POST (2)

Internet Explorer 9 +, Firefox, Opera,

(Charts & Graphs).

SVG Scalable Vector Graphics

Cascading Style Sheets (CSS)

Embedded style sheets

Linked style sheets

selector element/tag , property

style sheet - head ( )

To CSS Box Model

A:link {color: red}

script web serer,

1. O browser web server

web server module php

if ($a > $b)

web server client (Ip address/agent)

session ( log out)

NVU (html editor)

PHP Text DB API

Local Web Servers

Windows, Linux, Solaris

Content Management Systems (CMS)

CMS Content Management

Open Source CMS

You might also like