11-16 HTML (Part 1)

WEB PAGES - HTML
ΚΕΦ.8
Ευάγγελος Χρ. Ζιούλας (Καθηγητής Πληροφορικής)

WEB SERVER
Είναι µια εφαρµογή software που αναλαµβάνει την
αποστολή µιας ιστοσελίδας σε έναν αποµακρυσµένο
web browser που την ζητά
Ο web server είναι εγκατεστηµένος σε µία µηχανή που

ονοµάζεται host (ή server)
11/11/2010 Ε. Ζιούλας (Καθηγητής Πληροφορικής)

Πληροφορικής) 2
WEB BROWSER
(ΦΥΛΛΟΜΕΤΡΗΤΗΣ)
Αναλαµβάνει την σύνδεση µε ένα Web Server

ζητώντας του τη σελίδα που θέλουµε να
ανοίξουµε
Κάνει διερµηνεία (interpretation) των

εντολών html tags της σελίδας για να την
παρουσιάσει στην οθόνη όπως ακριβώς την
κατασκεύασε ο δηµιουργός της

ΕΠΙΚΡΑΤΕΣΤΕΡΟΙ WEB BROWSERS
Internet Explorer (Microsoft)

Netscape Navigator (Netscape)
Firefox (Mozilla)
Chrome (Google)
Safari (Apple)
Opera (Opera)
WEB PAGE
Είναι ένα απλό αρχείο κειµένου
Εκτός από κείµενο περιέχει και html

tags
Αυτά είναι ειδικές εντολές που

περιγράφουν στον web browser την
µορφή εµφάνισης του κειµένου στην
οθόνη
HTML TAGS
Τα html tags µεταξύ άλλων καθορίζουν :
το µέγεθος του κειµένου

τη γραµµατοσειρά
το χρώµα του κειµένου
το χρώµα ή την εικόνα του background
τη µορφή του κειµένου (bold, italics, underline)
τη µορφή των πινάκων
τους υπερσυνδέσµους (hyperlinks)
τις λίστες κειµένων

HTML (Hypertext Markup Language)
Είναι γλώσσα που περιγράφει µέσω html tags τον τρόπο
που µορφοποιείται µια ιστοσελίδα του Web
Αρχείο κειµένου HTML Εµφάνιση Ιστοσελίδας

(εντολές html tags) (µορφοποιηµένο κείµενο)
HTML TAG
Είναι κοµµάτι κώδικα που λέει στον web browser
πως να χειριστεί ένα κείµενο
Εναλλακτικά κάθε html tag ονοµάζεται και element
Κάθε tag ανοίγει µε µία εντολή εντός των συµβόλων

< > και κλείνει µε µία παρόµοια εντολή εντός </ >
Angle Brackets
π.χ. <body> l </body>
<html> l </html>
<center> l </center>
ΒΑΣΙΚΑ TAGS
<HTML> Είναι το πρώτο tag κάθε html αρχείου
Εξηγεί στον browser ότι ακολουθεί αρχείο html κώδικα
Η εµβέλεια της εντολής ακυρώνεται µε </html>
<HEAD> ∆ίνει πληροφορίες για το site που δεν φαίνονται στη σελίδα
π.χ. πληροφορίες που εµφανίζονται στις search engines
Κλείνει µε την εντολή </head>
<TITLE> Καθορίζει τον τίτλο της σελίδας όπως αυτός θα εµφανίζεται

στη γραµµή τίτλου του παραθύρου (ή στο bookmark)
Περιέχεται στο <body> tag και κλείνει µε την εντολή </title>
<BODY> Περιέχει το κυρίως σώµα που εµφανίζεται στην ιστοσελίδα

Ό,τι εµφανίζεται στην σελίδα µπαίνει µέσα στο tag αυτό
Κλείνει µε την εντολή </body>
ΠΑΡΑ∆ΕΙΓΜΑ
<html>
<head>
<title>My First Page</title>
</head>
<body>
Hello there. This is my first page!
</body>
</html>
Αρχείο µε κώδικα html Ιστοσελίδα µέσα από browser

∆ΗΜΙΟΥΡΓΙΑ ARXEIOY HTML
• Κάθε αρχείο µε κώδικα html πρέπει να

αποθηκεύεται έχοντας κατάληξη .htm
• Η δηµιουργία του µπορεί να γίνει εύκολα

µε έναν text editor όπως το Notepad
Create HTML on Web
http://htmledit.squarefree.com

ΚΑΝΟΝΑΣ TAGS
Κάθε TAG που ανοίγει µέσα σε κάποιο άλλο πρέπει
να κλείνει και πριν από αυτό π.χ.
<tag1><tag2> statements </tag2></tag1>
<tagA><tagΒ><tagC><tagD> statements </tagD></tagC></tagB></tagA>
Η διαδικασία που ακολουθείται βασίζεται στην τεχνική

LIFO (Last in – First out)
TAGS ΠΑΡΑΓΡΑΦΩΝ
<BR> Ο browser πάει στην αρχή της επόµενης γραµµής
Ονοµάζεται break και έχει παρόµοια χρήση µε το enter
Καθορίζει στον browser που τελειώνει µια γραµµή
∆εν χρειάζεται να κλείνει µε </BR>
<P> Εισάγει µια κενή γραµµή στο κείµενο και συνεχίζει στην
επόµενη παράγραφο
∆ηµιουργεί µια νέα παράγραφο
∆εν είναι υποχρεωτικό να κλείνει µε την εντολή </Ρ>
<HR> Εισάγει µια οριζόντια γραµµή στην σελίδα

Ονοµάζεται horizontal rule

<HTML>
<HEAD>
<TITLE>WEB PAGE DESIGN - BASIC
TAGS</TITLE>
</HEAD>
<BODY>
Hi, my name is John Gilson.<BR>
This is my first attempt at a Web page.<HR>
Here is my email address.
<P>jgilson@yahoo.com<HR>
Mail me whenever you have any problems.
<BR><BR><HR>
</BODY>
</HTML>

TAGS ΕΠΙΚΕΦΑΛΙ∆ΩΝ
<Η1> Τονίζουν τις επικεφαλίδες (headers) κάνοντάς τις bold
Καθορίζουν το µέγεθος των επικεφαλίδων
... Κλίµακα από Η1 (max size) µέχρι Η6 (min size)
<Η6> Κλείνουν πάντα µε tag τέλους π.χ. </H1>
<Η1>...</Η1>
<Η2>...</Η2>
<Η3>...</Η3>
<Η4>...</Η4>
<Η5>...</Η5>
<Η6>...</Η
6>...</Η6>

<HTML>
<HEAD>
<TITLE>HEADING LEVELS</TITLE>
</HEAD>
<BODY>
<H1>THIS IS H1.</H1> THIS IS NORMAL SIZE.
<H6>THIS IS H6.</H6> THIS IS NORMAL SIZE.<HR>
</BODY>
</HTML>

Ι∆ΙΟΤΗΤΕΣ (ATTRIBUTES)
• Κάποια tag µπορούν να γραφούν έχοντας µέσα τους
συγκεκριµένες ιδιότητες (attributes)
• Τα attributes τοποθετούνται µέσα στα tag έναρξης
π.χ.
<Η2 ALIGN = CENTER> a heading goes here </H2>
<P ALIGN=RIGHT> a paragraph or block of text goes here </P>
<HR size=5 width=100 align=center>

<HTML>
<HEAD>
<TITLE>2.Kefalaio</TITLE>
</HEAD>
<BODY>
<H1>Epikefalida gia H1 </H1>
<H3 align=right>Epikefalida gia H3 </H3>
Edw grafoume to keimeno pou theloume<P>
Proxorame stin epomeni seira afinodas mia
keni grammi</P>
<HR>
Apla grafoume to keimeno me BR<BR>
Proxorame stin epomeni seira</BR>
<HR size=5 width=100 align=center>
</BODY>
</HTML>
TAGS ΜΟΡΦΟΠΟΙΗΣΗΣ
<STRONG> Κάνει το κείµενο που ακολουθεί έντονο (bold)

Παρόµοιο tag είναι το <B>l</B>
Κλείνει µε το tag </STRONG>
<EM> Κάνει πλάγια στοίχιση (Italics) στο κείµενο

∆ίνει έµφαση στο κείµενο (emphasizing)
Κλείνει µε το tag </ΕΜ>
<U> Υπογραµίζει το κείµενο που ακολουθεί

Κλείνει µε το tag </U>

TAGS ΣΤΟΙΧΙΣΗΣ
<CENTER> Στοιχίζει στο κέντρο το κείµενο που ακολουθεί

Παρόµοιο µε την εντολή <DIV align=CENTER>...<DIV>
Κλείνει µε το tag </CENTER>
<DIV align=RIGHT> Κάνει δεξιά στοίχιση στο κείµενο

Κλείνει µε το tag </DIV>
<DIV align=LEFT> Κάνει αριστερή στοίχιση στο κείµενο

Κλείνει µε το tag </DIV>
Περιττή εντολή αφού είναι προεπιλεγµένη η
στοίχιση να γίνεται πάντα από αριστερά
TAG ΜΕΓΕΘΩΝ
<FONT size = X >
Αλλαγή µεγέθους γραµµατοσειράς που ακολουθεί
Στη θέση Χ τοποθετείται ένας ακέραιος από 1 (min) έως 7 (max)
Κλείνει µε το tag </FONT>

TAGS ΧΡΩΜΑΤΩΝ FF FF FF
FF 00 00
<BODY BGCOLOR = “X X X”> 10 08 AB
00 00 00
Αλλαγή χρώµατος background της σελίδας
Επιλογή µεταξύ 4096 χρωµατικών αποχρώσεων
Στη θέση κάθε Χ τοποθετείται ένας 16-δικός αριθµός 00..FF
<FONT color = “X X X”>

Αλλαγή χρώµατος γραµµατοσειράς που ακολουθεί
Στη θέση κάθε Χ τοποθετείται ένας 16-δικός αριθµός 00..FF
Κλείνει µε το tag </FONT>
<BODY background = “file.jpg”>

Αλλαγή background από αρχείο εικόνας που επιλέγεται
Το αρχείο πρέπει να λήγει σε .jpg ή .gif
Το αρχείο θα βρίσκεται στον ίδιο φακελο µε το αρχείο .htm
<HTML>
<HEAD>
</HEAD>
<BODY BGCOLOR="FF FF FF">
<FONT COLOR="FF 00 00">Exrwmo keimeno</FONT><BR>
<FONT SIZE=1>Megethos grammatoseiras apo 1</FONT><BR>
<FONT SIZE=7>To megethos grammatwn einai 7</FONT><BR>
Aristera stoixismeno keimeno<BR>
<CENTER>Kedrika stoixismeno keimeno</CENTER><BR>
<DIV align=right>Dexia stoixismeno keimeno</DIV><BR>
<u>Ypogramismeno keimeno</u><BR>
<b>Tonismeno keimeno</b><BR>
<em>Plagiasmeno keimeno</em> <BR>
</BODY>
</HTML>

<HTML>
<HEAD>
</HEAD>
<BODY background=“sunset.jpg">
<FONT COLOR="FF 00 00">Exrwmo keimeno</FONT><BR>
<FONT SIZE=1>Megethos grammatoseiras apo 1</FONT><BR>
<FONT SIZE=7>To megethos grammatwn einai 7</FONT><BR>
Aristera stoixismeno keimeno<BR>
<CENTER>Kedrika stoixismeno keimeno</CENTER><BR>
<DIV align=right>Dexia stoixismeno keimeno</DIV><BR>
<u>Ypogramismeno keimeno</u><BR>
<b>Tonismeno keimeno</b><BR>
<em>Plagiasmeno keimeno</em> <BR>
</BODY>
</HTML>

ΚΕΝΟΣ ΧΑΡΑΚΤΗΡΑΣ
Non Braking Space
Εισαγωγή ενός κενού χαρακτήρα (space character)

Το σύµβολο & καλείται Ampersand
Η εντολή πρέπει πάντα να γράφεται µε πεζά
γράµµατα

Non-breaking space
AMPERSAND (&) Copyright © ©
COMMANDS Trademark ™

Registered ® ®
Less Than < <
Το σύµβολο & Greater Than > >

χρησιµοποιείται για να Ampersand & &
εκφράσουµε χαρακτήρες Quote " "
που δεν διαθέτει το
Apostrophe ' '
πληκτρολόγιο
Cent ¢ ¢
Euro € €
One quarter ¼ ¼
One half ½ ½
Three quarters ¾ ¾
LIST TAGS
Οι λίστες δίνουν έµφαση στο κείµενο µε 3 τρόπους:
UNORDERED LIST
Χρήση bullets
ORDERED LIST
Χρήση numbers
DEFINITION LIST
Χωρίς bullets - numbers
UNORDERED LIST TAGS
<UL> Εκκίνηση µιας unordered list (bulleted list)
Κλείνει µε το tag </UL>
<LI> Εισάγει ένα νέο αντικείµενο στην λίστα (list item)

∆εν χρειάζεται να κλείνει µε </LI>
<UL>
<LI>item
<LI>item
<LI>item
</UL>
<HTML>
<HEAD>
<TITLE>SAFETY TIPS </TITLE>
</HEAD>
<BODY>
<H2 ALIGN="CENTER">SAFETY
TIPS FOR CANOEISTS</H2>
<UL>
<LI>Be able to swim
<LI>Wear a life jacket at all times
<LI>Don't stand up or move around
<LI>Don't overexert yourself
<LI>Use a bow light at night
</UL>
</BODY></HTML>

<HTML>
<HEAD>
<TITLE>SAFETY TIPS</TITLE>
</HEAD>
<BODY>
<H2 ALIGN="CENTER">SAFETY TIPS
FOR CANOEISTS</H2>
<UL>
<LI>Be able to swim
<LI>Don't stand up or move around.
If canoe tips,
<UL>
<LI>Hang on to the canoe
<LI>Use the canoe for support and
<LI>Swim to shore
</UL>
</UL>
</BODY></HTML> Ιστοσελίδα µέσα από browser
Αρχείο µε κώδικα html

ORDERED LIST TAGS
<OL> Εκκίνηση µιας ordered list (numbered list)
Κλείνει µε το tag </OL>
<LI> Εισάγει ένα νέο αντικείµενο στην λίστα (list item)

∆εν χρειάζεται να κλείνει µε </LI>
<OL>
<LI>item
<LI>item
<LI>item
</OL>
<HTML>
<HEAD>
<TITLE>SAFETY TIPS </TITLE>
</HEAD>
<BODY>
<H2 ALIGN="CENTER">SAFETY
TIPS FOR CANOEISTS</H2>
<OL>
<LI>Be able to swim
<LI>Don't stand up or move around
</OL>
</BODY></HTML>

<HTML>
<HEAD>
<TITLE>SAFETY TIPS</TITLE>
</HEAD>
<BODY>
<H2 ALIGN="CENTER">SAFETY TIPS
FOR CANOEISTS</H2>
<OL>
<LI>Be able to swim
<LI>Don't stand up or move around.
If canoe tips,
<UL>
<LI>Hang on to the canoe
<LI>Use the canoe for support and
<LI>Swim to shore
</UL>
</OL>
</BODY></HTML>

DEFINITION LIST TAGS
<DL> Εκκίνηση µιας definition list (χωρίς bullets-
numbers)
<DL>
Κλείνει µε το tag </DL> <DT>item
<DD>description
<DD>description
<DD>description
<DT> Εισάγει ένα νέο όρο (κατηγορία) στην <DT>item
λίστα (definition term) <DD>description
∆εν χρειάζεται να κλείνει µε </DT> <DD>description
<DD>description
<DT>item
<DD>description
Εισάγει νέο αντικείµενο κατηγορίας <DD>description
<DD> <DD>description
(definition description)
</DL>
∆εν χρειάζεται να κλείνει µε </DD>
<HTML>
<HEAD>
<TITLE>TRIP PLANNING</TITLE>
</HEAD>
<BODY>
<H2 ALIGN="CENTER">SUMMER CAMPING
TRIP PLANNING</H2><HR>
<DL>
<DT>Winter
<DD>Write for maps and travel brochures
<DD>Read camping books
<DD>Prepare budget and equipment list
<DT>Spring
<DD>Visit camping shows
<DD>Buy essential items
<DD>Make reservations
<DT>Week Before Trip
<DD>Have vehicle serviced
<DD>Vaccinate pets
<DD>Buy traveler's cheques
<DD>Cancel newspaper and other deliveries
<DT>Day before trip
<DD>Load vehicle
</DL>
</BODY></HTML>
Ιστοσελίδα µέσα από browser
ΑΛΛΑΓΗ BULLETS
Υπάρχουν τριών ειδών bullets σε µία unordered list
Αυτές καθορίζονται µε το attribute TYPE ως εξής
item 1
<UL TYPE = square > item 2
item 3
o item 1
<UL TYPE = circle > o item 2
o item 3
item 1
<UL TYPE = disc > item 2 default
item 3
TABLES
Οι πίνακες αποτελούν έναν εύκολο τρόπο οργάνωσης και
διαχείρισης µεγάλου όγκου δεδοµένων
Επιτρέπουν στον χρήστη να εντοπίζει εύκολα την πληροφορία

που αναζητά
Οι περισσότεροι browsers υποστηρίζουν τους πίνακες (από την

έκδοση HTML 3.2 και πέρα)

TABLE TAGS
<TABLE> Εκκίνηση ενός πίνακα (table)
Κλείνει µε το tag </TABLE>
<TR> Εισάγει µία νέα γραµµή στον πίνακα (table row)

∆εν χρειάζεται να κλείνει µε </TR>
<TD> Εισάγει ένα νέο κελί στη γραµµή του πίνακα (table data)
∆εν χρειάζεται να κλείνει µε </TD>

TABLE TAGS ΕΜΦΑΣΗΣ
<ΤΗ> Εισάγει µια επικεφαλίδα σε κελί του πίνακα (table header)
Κάνει το κελί bold και center
Κλείνει µε </ΤΗ>
<CAPTION> Εισάγει µια επικεφαλίδα στην αρχή του πίνακα (caption)

Για τοποθέτηση στο τέλος <CAPTION ALIGN = BOTTOM>
Κλείνει µε </CAPTION>

BORDER ATTRIBUTE
(border width in number of pixels)
<TABLE BORDER = 1> <TABLE BORDER = 10>

ΚΕΝΟΣ ΧΑΡΑΚΤΗΡΑΣ
<TD> </TD> <TD> </TD>
Η εισαγωγή κενού χαρακτήρα σε ένα κελί, έχει διαφορετική

εµφάνιση από την µη εισαγωγή καµίας τιµής

<HTML>
<HEAD>
<TITLE>VOLUNTEER SCHEDULE</TITLE>
</HEAD>
<BODY>
<CENTER>
<TABLE border=5 width=50%>
<CAPTION><B>VOLUNTEER SCHEDULE</B></CAPTION>
<TR><TH> </TH><TH>9 A.M.</TH>
<TH>12 P.M.</TH><TH>2 P.M.</TH></TR>
<TR><TD><B>NURSERY</B></TD><TD>John
</TD><TD>Mary</TD><TD>Marcia</TD></TR>
<TR><TD><B>SECURITY</B>
<TD>Kimberly</TD><TD>George</TD><TD>Ken</TD></TR>
<TR><TD><B>TICKETS</B>
<TD>Jacob</TD><TD>Nancy</TD>
<TD>Adam</TD></TR>
</TABLE>
</CENTER>
</BODY>
</HTML>


<HTML>
<HEAD><TITLE>Programma</TITLE>
</HEAD><BODY>
<TABLE width="100%" border=1>
<TR><TH>&nbsp</TH><TH>Mo</TH><TH>Tu</TH>
Αρχείο µε <TH>We</TH><TH>Th</TH><TH>Fr</TH></TR>
κώδικα html <TR><TD><CENTER><B>1.</B></CENTER></TD>
<TD><CENTER>Mathematics</CENTER></TD>
<TD><CENTER>German</CENTER></TD>
<TD><CENTER>Gymnastic</CENTER></TD>
<TD><CENTER>History</CENTER></TD></TR>
<TR><TD><CENTER><B>2.</B></CENTER></TD>
<TD><CENTER>German</CENTER></TD>
<TD><CENTER>English</CENTER></TD>
<TD><CENTER>Gymnastic</CENTER></TD>
<TD><CENTER>German</CENTER></TD></TR>
<TR><TD><CENTER><B>3.</B></CENTER></TD>
<TD><CENTER>Informatics</CENTER></TD>
<TD><CENTER>English</CENTER></TD>
<TD><CENTER>Theology</CENTER></TD>
<TD><CENTER>Theology </CENTER></TD></TR>
</TABLE>
</BODY>
</HTML>


CELL SPACING
<TABLE BORDER = 1 CELLSPACING = 5>
CELL SPACING (επηρεάζει το περιθώριο µεταξύ των κελιών σε pixels)

το default cell spacing είναι 2 pixels
CELL PADDING
<TABLE BORDER = 1 CELLPADDING = 15>
CELL PADDING (επηρεάζει την απόσταση της τιµής του κελιού από τις
άκρες του σε pixels)
<HTML><HEAD>
<TITLE>VOLUNTEER SCHEDULE</TITLE>
</HEAD><BODY>
<CENTER>
<TABLE BORDER="3" CELLSPACING="0" CELLPADDING="3" WIDTH=100%>
<CAPTION><STRONG>VOLUNTEER SCHEDULE </STRONG></CAPTION>
<TR><TD WIDTH = 40%>
<TH WIDTH = 20%>9 A.M.
<TH WIDTH = 10%>12 P.M.
<TH>2 P.M.
<TR><TH>NURSERY
<TD ALIGN = CENTER>John
<TD ALIGN = CENTER>Mary
<TD ALIGN = CENTER>Marcia
<TR><TH>SECURITY
<TD ALIGN = RIGHT>Kimberly
<TD ALIGN = RIGHT>George
<TD ALIGN = RIGHT>Ken
<TR><TH>TICKETS<TD>Jacob<TD>Nancy<TD>Adam
</TABLE></CENTER></BODY></HTML>


<HTML><HEAD><TITLE>VOLUNTEER SCHEDULE</TITLE>
</HEAD><BODY> <CENTER>
<TABLE BORDER=3 CELLSPACING=0 CELLPADDING=3 WIDTH=100%>
<CAPTION><B>VOLUNTEER SCHEDULE</B></CAPTION>
<TR BGCOLOR="FF FF CC">
<TD> <TH>9 A.M. <TH>12 P.M. <TH>2 P.M.
<TR ALIGN="CENTER">
<TH BGCOLOR="FF FF CC">NURSERY
<TD>John <TD>Mary <TD>Marcia
<TR ALIGN="CENTER">
<TH BGCOLOR="FF FF CC">SECURITY
<TD>Kimberly <TD>George <TD>Ken
<TR ALIGN="CENTER">
<TH BGCOLOR="FF FF CC">TICKETS
<TD>Jacob <TD>Nancy <TD>Adam
</TABLE></CENTER></BODY></HTML>



11-16 HTML (Part 1)

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

11-16 HTML (Part 1)

Uploaded by

Copyright:

Available Formats

WEB PAGES - HTML

Ευάγγελος Χρ. Ζιούλας (Καθηγητής Πληροφορικής)

Ο web server είναι εγκατεστηµένος σε µία µηχανή που

11/11/2010 Ε. Ζιούλας (Καθηγητής Πληροφορικής)

Αναλαµβάνει την σύνδεση µε ένα Web Server

Κάνει διερµηνεία (interpretation) των

11/11/2010 Ε. Ζιούλας (Καθηγητής Πληροφορικής)

Internet Explorer (Microsoft)

Εκτός από κείµενο περιέχει και html

Αυτά είναι ειδικές εντολές που

το µέγεθος του κειµένου

11/11/2010 Ε. Ζιούλας (Καθηγητής Πληροφορικής)

Αρχείο κειµένου HTML Εµφάνιση Ιστοσελίδας

Εναλλακτικά κάθε html tag ονοµάζεται και element

Κάθε tag ανοίγει µε µία εντολή εντός των συµβόλων

<TITLE> Καθορίζει τον τίτλο της σελίδας όπως αυτός θα εµφανίζεται

<BODY> Περιέχει το κυρίως σώµα που εµφανίζεται στην ιστοσελίδα

Αρχείο µε κώδικα html Ιστοσελίδα µέσα από browser

11/11/2010 Ε. Ζιούλας (Καθηγητής Πληροφορικής)

• Κάθε αρχείο µε κώδικα html πρέπει να

• Η δηµιουργία του µπορεί να γίνει εύκολα

11/11/2010 Ε. Ζιούλας (Καθηγητής Πληροφορικής)

<tag1><tag2> statements </tag2></tag1>

<tagA><tagΒ><tagC><tagD> statements </tagD></tagC></tagB></tagA>

Η διαδικασία που ακολουθείται βασίζεται στην τεχνική

<HR> Εισάγει µια οριζόντια γραµµή στην σελίδα

11/11/2010 Ε. Ζιούλας (Καθηγητής Πληροφορικής)

Αρχείο µε κώδικα html Ιστοσελίδα µέσα από browser

11/11/2010 Ε. Ζιούλας (Καθηγητής Πληροφορικής)

11/11/2010 Ε. Ζιούλας (Καθηγητής Πληροφορικής)

Αρχείο µε κώδικα html Ιστοσελίδα µέσα από browser

11/11/2010 Ε. Ζιούλας (Καθηγητής Πληροφορικής)

<Η2 ALIGN = CENTER> a heading goes here </H2>

<P ALIGN=RIGHT> a paragraph or block of text goes here </P>

<HR size=5 width=100 align=center>

11/11/2010 Ε. Ζιούλας (Καθηγητής Πληροφορικής)

<STRONG> Κάνει το κείµενο που ακολουθεί έντονο (bold)

<EM> Κάνει πλάγια στοίχιση (Italics) στο κείµενο

<U> Υπογραµίζει το κείµενο που ακολουθεί

11/11/2010 Ε. Ζιούλας (Καθηγητής Πληροφορικής)

<CENTER> Στοιχίζει στο κέντρο το κείµενο που ακολουθεί

<DIV align=RIGHT> Κάνει δεξιά στοίχιση στο κείµενο

<DIV align=LEFT> Κάνει αριστερή στοίχιση στο κείµενο

11/11/2010 Ε. Ζιούλας (Καθηγητής Πληροφορικής)

<FONT color = “X X X”>

<BODY background = “file.jpg”>

Αρχείο µε κώδικα html Ιστοσελίδα µέσα από browser

Αρχείο µε κώδικα html Ιστοσελίδα µέσα από browser

&nbsp; Non Braking Space

Εισαγωγή ενός κενού χαρακτήρα (space character)

11/11/2010 Ε. Ζιούλας (Καθηγητής Πληροφορικής)

COMMANDS Trademark ™ &#153;

Το σύµβολο & Greater Than > &gt;

<LI> Εισάγει ένα νέο αντικείµενο στην λίστα (list item)

Αρχείο µε κώδικα html Ιστοσελίδα µέσα από browser

11/11/2010 Ε. Ζιούλας (Καθηγητής Πληροφορικής)

<LI> Εισάγει ένα νέο αντικείµενο στην λίστα (list item)

Αρχείο µε κώδικα html Ιστοσελίδα µέσα από browser

11/11/2010 Ε. Ζιούλας (Καθηγητής Πληροφορικής)

Αρχείο µε κώδικα html Ιστοσελίδα µέσα από browser

Επιτρέπουν στον χρήστη να εντοπίζει εύκολα την πληροφορία

Οι περισσότεροι browsers υποστηρίζουν τους πίνακες (από την

11/11/2010 Ε. Ζιούλας (Καθηγητής Πληροφορικής)

Non Braking Space

COMMANDS Trademark ™

Το σύµβολο & Greater Than > >