Εργαλεία ανάπτυξης εφαρμογών internet Ι

IEK ΟΑΕΔ ΚΑΛΑΜΑΤΑΣ
ΤΕΧΝΙΚΟΣ ΕΦΑΡΜΟΓΩΝ ΠΛΗΟΦΟΡΙΚΗΣ
Εργαλεία ανάπτυξης εφαρμογών

internet Ι
HTML
Διδάσκουσα: Κανελλοπούλου Χριστίνα

ΠΕ19 Πληροφορικής
HTML
(HyperText Markup Language)
• Η γλώσσα που χρησιμοποιείται για την αναπαράσταση δεδομένων από

τους Browsers
•Τα δεδομένα ομαδοποιούνται και παρουσιάζονται ως έγγραφα
(ιστοσελίδες)
• Βασικά χαρακτηριστικά
• δυνατότητα μη γραμμικής πλοήγησης
• δυνατότητα διασύνδεσης με άλλα έγγραφα μέσω συνδέσμων
(hyperlinks)
Τρέχουσα έκδοση 4.01

 Έκδοση 5 - W3C Working Draft 23 October 2009
 Ένα HTML αρχείο είναι ένα αρχείο κειμένου που περιέχει markup tags
Τα tags λένε στον Web Browser πώς να παρουσιάσει το περιεχόμενο της σελίδας
Τα HTML αρχεία έχουν htm ή html καταλήξεις
Ένα HTML αρχείο μπορεί να δημιουργηθεί χρησιμοποιώντας έναν απλό text editor
(π.χ. notepad)
Παράδειγμα Απλής Σελίδας
<HTML>
<HEAD>
<TITLE>Παράδειγμα σελίδας HTML
</TITLE>
</HEAD>
<BODY>
<H1>Πολύ Απλό Παράδειγμα</H1>
<P>1η Παράγραφος</P>
<P>2η Παράγραφος</P>
</BODY>
</HTML>
Παρουσίαση
HTML – Σύνταξη
• Βασικό δομικό στοιχείο η ετικέτα (tag)
• Κάθε διακριτικό της HTML περικλείεται από το
μικρότερο και μεγαλύτερο σύμβολο < >
• Τα περισσότερα διακριτικά ομαδοποιούνται σε
ζεύγη. Το πρώτο δείχνει την αρχή και το δεύτερο το
τέλος επίδρασης του συγκεκριμένου διακριτικού.
Πχ <HTML>…</HTML>
• Λέξεις όπως τα HEAD, TITLE, και BODY
λέγονται elements και προσδιορίζουν τον τύπο
του tag
HTML – Σύνταξη
Ο Web browser αναγνωρίζει μόνο κείμενο και έγκυρες
ετικέτες (tags)
Ο Web browser αγνοεί μη εκτυπώσιμους χαρακτήρες

 Κενά, στηλοθέτες, αλλαγή γραμμής
Πρέπει να χρησιμοποιηθούν έγκυρα tags ή ειδικοί

χαρακτήρες:
 Κενό (Non-breaking space) →
Eξαιρέσεις & Eκπλήξεις
• Οι Browsers δεν υποστηρίζουν όλες τις

ετικέτες.
• Ετικέτες που δεν υποστηρίζονται, απλώς
παραβλέπονται.
•Ορισμένες ετικέτες μπορεί να πάψουν να
υποστηρίζονται.
•Συνέχεια προστίθενται νέες δυνατότητες
στην HTML.
• O browser, προσδιορίζει τον τρόπο εμφάνισης
μίας σελίδας βασισμένος στα tags
• Αγνοεί τον τρόπο μορφοποίησης του HTML,
δηλαδή τα enter, τα επιπλέον κενά και τις κενές
γραμμές
•Λαμβάνει υπ’όψιν το πλάτος και το ύψος του
παραθύρου του browser
•Εάν αλλάξετε το μέγεθος του παραθύρου τα
περιεχόμενα της Web σελίδας θα αλλάξουν ώστε
να προσαρμοστούν στο νέο μέγεθος
Eτικέτες (tags) HTML
•Είναι σημάδια που χρησιμοποιεί η HTML για να
καθορίσει τον τρόπο εμφάνισης του ενδιάμεσου
κειμένου.
• Οι ετικέτες συνήθως συντάσσονται σε ζεύγη,
π.χ.: <H1> …. </H1>
• H ετικέτα <Η1> καθορίζει ότι το κείμενο που
ακολουθεί, θα εμφανιστεί ως επικεφαλίδα πρώτου
μεγέθους.
•H ετικέτα </Η1> καθορίζει το τέλος του κειμένου
επικεφαλίδας.
Η HTML είναι αναπτυσσόμενη γλώσσα και
αλλάζει συνεχώς
Πχ. σε παλιότερη έκδοση της HTML, η

ετικέτα <P> συντασσόταν χωρίς </P>
• Σήμερα συντάσσεται ως <P> ... </P>
•Η <P> επιβάλλει αλλαγή παραγράφου.
• Στην HTML οι εντολές μπορούν να

γραφτούν με μικρά και/ή με κεφαλαία
γράμματα.
Σχόλια στην HTML

Σχόλιο είναι οτιδήποτε βρίσκεται ανάμεσα
στα: 
Τα σχόλια δεν εμφανίζονται στην σελίδα.

Χρησιμοποιούνται από τους συγγραφείς
σελίδων ως επεξηγήσεις.
Βασική δομή μιας σελίδας
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
strict.dtd">
<html>
<body>
This is my first web page.
</body>
</html>
DOCTYPE
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
strict.dtd">
 Δηλώνει την έκδοση της γλώσσας HTML

 Κάνει τον browser να συμπεριφέρεται σωστά
 Το κάνουμε copy/paste στην αρχή της σελίδας
Ετικέτες
<html>
…
</html>
 Κάθε ετικέτα έχει όνομα: html

 Κάθε ετικέτα πρέπει να ανοίγει: <html>
 Κάθε ετικέτα πρέπει να κλείνει: </html>
 Ανάμεσα στο άνοιγμα και το κλείσιμο βρίσκεται το
περιεχόμενο της ετικέτας.
Άνοιγμα ετικέτας html
<html>
<body>
This is my first web page.
Περιεχόμενο ετικέτας html
</body>
</html>
Κλείσιμο ετικέτας html

<html>, <head>, <title> και <body>
 <html>: Περιέχει μία ολόκληρη σελίδα

 <head>: Περιέχει meta-πληροφορίες για τη σελίδα
 <title>: Περιέχει τον τίτλο της σελίδας
 <body>: Περιέχει το περιεχόμενο της σελίδας
 Το <html> πρέπει υποχρεωτικά να περιέχει μόνο

<head> και <body>, με αυτή τη σειρά. Το <title>
πρέπει να περιέχεται στο <head>.
Ιεραρχία στις ετικέτες
 Μία ετικέτα μπορεί να περιέχεται ολόκληρη μέσα σε
μία άλλη.
 Πρόκειται για μια δενδρική δομή.
 Ό,τι ανοίγει πρώτο κλείνει τελευταίο (LIFO).
<html>
<body>
Η body περιέχεται στην html This is my first web page.
</body>
</html>
Η βασική ετικέτα HEAD
Η διπλή ετικέτα HEAD δηλώνει την επικεφαλίδα του εγγράφου
HTML.Περιλαμβάνει πληροφορίες για το έγγραφο όπως τίτλο, λέξεις
κλειδιά, περιγραφή και το φύλλο στυλ που μπορεί να χρησιμοποιηθεί
για τη μορφοποίηση του.
Title : ορισμός του τίτλου της σελίδας

Script : καθορισμός της scripting γλώσσας
Style : καθορισμός style sheet
Base : ορισμός της βάσης αρχής για τον καθορισμό των σχετικών urls
Meta : καθορισμός ζεύγους πληροφοριών
(όνομα/τιμή) - π.χ. εισαγωγή keywords
Link : ορισμός σχέσεων με άλλα κείμενα ή φύλλα στυλ
Μόνο η ετικέτα Title εμφανίζεται στην οθόνη του φυλλομετρητή.

Η ετικέτα BODY - παράμετροι
Η βασική ετικέτα BODY δηλώνει το περιεχόμενο του εγγράφου
HTML. Περιλαμβάνει όλο το κείμενο, τη μορφοποίηση,
συνδέσμους σε εικόνες και σε λοιπά πολυμεσικά στοιχεία , τα
οποία εμφανίζονται στον φυλλομετρητή.
Βασικές παράμετροι:
•bgcolor : το χρώμα του φόντου της σελίδας
•text : το χρώμα των χαρακτήρων του κειμένου
• link / vlink / alink : το χρώμα των links
• background : το URL της εικόνας που θα εμφανίζεται στο φόντο της
σελίδας
<body bgcolor=blue text=orange>
•Πχ.blue = #0000FF
Web Colors - RGB
Βασικά τμήματα HTML σελίδας
Στοιχεία ορισμού περιοχής
Επικεφαλίδες – <h1></h1>, …, <h6></h6>
Παράγραφοι - <p></p>
Λίστες - <ul>, <ol> <dl>
Φόρμες - <form></form>
Πίνακες - <table></table>
Οριζόντιες γραμμές - <hr>
Πλαίσια
Στοιχεία ορισμού κειμένου
Font style elements - <b></b>, <i></i>, <u></u>
Συνδέσμους - Links - <a></a>
Εικόνες - <img>
 Διακοπές κειμένου - <br>
Ειδικοί χαρακτήρες
•Ο χαρακτήρας < εισάγεται με <
•Ο χαρακτήρας > εισάγεται με >
•Ο χαρακτήρας & εισάγεται με &
•Ο χαρακτήρας “” εισάγεται με "
•Ο χαρακτήρας κενού (space) εισάγεται με
Να γράψετε τον κώδικα HTML που απαιτείται ώστε

να εμφανιστεί η ιστοσελίδα που ακολουθεί.
Παράδειγμα HTML αρχείου
<HTML>
<HEAD>
<TITLE> ΠΑΡΑΔΕΙΓΜΑ </TITLE>

</HEAD>
<BODY>
<H1> ΠΑΡΑΔΕΙΓΜΑ </H1>
<P> Τα αρχεία σε HTML είναι απλά αρχεία και μπορούν να
κατασκευαστούν από οποιονδήποτε συντάκτη κειμένου.
Τέλος. </P>
</BODY>
</HTML>
ΤΙΤΛΟΙ & ΕΠΙΚΕΦΑΛΙΔΕΣ
•Κάθε HTML έγγραφο, πρέπει να έχει ένα τίτλο, κυρίως γι
λόγους αναγνώρισης.
<TITLE> ΚΕIΜΕΝΟ ΤΙΤΛΟΥ </TITLE>
•Υποστηρίζονται επίσης επικεφαλίδες έξη μεγεθών.

<Hn> ΚΕΙΜΕΝΟ ΕΠΙΚΕΦΑΛΙΔΑΣ </Hn>
(n = 1,2,…,6)
Η <h1> χρησιμοποιείται 1 φορά.
Επόμενη πρέπει να βρίσκεται κάτω από προηγούμενη.
Δεν υπάρχει h7.
Παράδειγμα HTML αρχείου
<HTML>
<HEAD>
<TITLE> ΠΑΡΑΔΕΙΓΜΑ ΣΤΙΣ ΕΠΙΚΕΦΑΛΙΔΕΣ</TITLE>

</HEAD>
<BODY>
<H1> Αυτή είναι επικεφαλίδα επιπέδου 1 </H1>
<H4> Αυτή είναι επικεφαλίδα επιπέδου 4</H4>
<P>Τα αρχεία σε HTML είναι απλά αρχεία και μπορούν να
κατασκευαστούν από οποιονδήποτε συντάκτη κειμένου. </P>
</BODY>
</HTML>
Ιδιότητες ετικετών
 Εμφανίζονται στο άνοιγμα της ετικέτας μετά το
όνομα
 Κάθε ιδιότητα έχει όνομα και τιμή
 Όνομα από τιμή χωρίζονται με =
 Τιμή περιλαμβάνεται σε “εισαγωγικά”
 Μονά ή διπλά ό,τι προτιμάτε
 Οι ιδιότητες χωρίζονται με κενό από το όνομα της
ετικέτας και από τις άλλες ετικέτες.
<h1 align=“center”> Γεια σου κόσμε! </h1>
Άνοιγμα Κλείσιμο ετικέτας

ετικέτας
Περιεχόμενο ετικέτας
Όνομα ιδιότητας Τιμή ιδιότητας
<h1 align=“center”> Γεια σου κόσμε!</h1>
Ιδιότητα align
Στοίχιση επικεφαλίδας/ παραγράφου
Μια παράμετρος της επικεφαλίδας αλλά και της παραγράφου
είναι η ALIGNπου χρησιμοποιείται για την οριζόντια στοίχιση
του κειμένου και μπορεί να πάρει τις εξής τιμές:
ALIGN = ( LEFT |CENTER | RIGHT | JUSTIFY )
Πχ.
Για επικεφαλίδες
•<H1 ALIGN= “CENTER”> Αυτή η επικεφαλίδα θα έχει κεντρική στοίχιση</H1>
•<H1 ALIGN=“LEFT”> Αυτή η επικεφαλίδα θα έχει αριστερή στοίχιση</H1>
•<H1 ALIGN= “RIGHT”> Αυτή η επικεφαλίδα θα έχει δεξιά στοίχιση</H1>
Για παραγράφους
<P ALIGN= “CENTER”> Αυτή η παράγραφος θα έχει κεντρική στοίχιση</P>
<P ALIGN= “LEFT”> Αυτή η παράγραφος θα έχει αριστερή στοίχιση</P>
<P ALIGN= “RIGHT”> Αυτή η παράγραφος θα έχει δεξιά στοίχιση</P>
Παράδειγμα στοίχισης.
Να γράψετε τον κώδικα HTML που απαιτείται ώστε να εμφανιστεί η ιστοσελίδα που ακολουθεί.
τίτλος
Παράγραφοι
 Η HTML αγνοεί τις αλλαγές γραμμών και τα κενά.
 Πολλά κενά και αλλαγές γραμμών αντικαθίστανται
από ένα μόνο κενό.
Αυτή είναι η πρώτη μου σελίδα

Είμαι ενθουσιασμένος!
Αυτή είναι η πρώτη μου σελίδα Είμαι ενθουσιασμένος!

 <p>: Ορίζει μία παράγραφο (μνημονικό: paragraph)
<p>Αυτή είναι η πρώτη μου σελίδα</p>

<p>Είμαι ενθουσιασμένος!</p>
Αυτή είναι η πρώτη μου σελίδα

Είμαι ενθουσιασμένος!
 <br />: Ορίζει μία αλλαγή γραμμής (μνημονικό: break)
 Προσοχή: Δεν πρέπει να χρησιμοποιείται για

μορφοποίηση!
 Αυξομειώνουμε την κάθετη απόσταση με

μορφοποίηση μέσω CSS.
Λίστες
 Αριθμημένες: Σειρά έχει σημασία, χρήση <ol>
 Μη αριθμημένες: Σειρά δεν έχει σημασία, χρήση <ul>
(μνημονικά: ordered list, unordered list)
Ορισμών: <dl>
<li>: Ένα στοιχείο μίας λίστας (μνημονικό: list item)
 Πανομοιότυπος HTML κώδικας για την περιγραφή τους.
<ol>
<li>Πρώτο στοιχείο</li>
<li>Δεύτερο στοιχείο</li>
<li>Τρίτο στοιχείο</li>
</ol>
Λίστες
 Το <li> μπορεί να περιέχεται μόνο σε <ol> ή
<ul>
 Τα <ol> και <ul> μπορούν να περιέχουν μόνο

<li>
 To <dl> περιέχει <dt> και η περιγραφή
ορίζεται με την ετικέτα <dd>.
Λίστες
Αριθμημένες Μη αριθμημένες
 Mέρες της εβδομάδας  Λίστα για τα ψώνια
 Ρούχα που θα φορέσω  Μαθητές στο
 Νικητές της Formula 1 αμφιθέατρο
 Εκδόσεις του Photoshop  Οι e-mail διευθύνσεις
μου
 Αυτή η λίστα
Αριθμημένη λίστα: Μέρες
<ol> 1. Δευτέρα
<li>Δευτέρα</li>
<li>Τρίτη</li> 2. Τρίτη
<li>Τετάρτη</li>
3. Τετάρτη
<li>Πέμπτη</li>
<li>Παρασκευή</li> 4. Πέμπτη
<li>Σάββατο</li>
<li>Κυριακή</li> 5. Παρασκευή
</ol> 6. Σάββατο
7. Κυριακή
Μη αριθμημένη λίστα: Ψώνια
 Kinder Γαλακτοφέτες
<ul>
<li>Kinder Γαλακτοφέτες</li>  Kinder Bueno
<li>Kinder Bueno</li>
 Happy Hippo
<li>Happy Hippo</li>
<li>Αυγά Kinder</li>  Αυγά Kinder
<li>Kinder Delice</li>
<li>Kinder Duplo</li>
 Kinder Delice
<li>Kinder Maxi</li>  Kinder Duplo
</ul>
 Kinder Maxi
Ιδιότητες λιστών
Παράδειγμα
<html>
<head>
<title> lista </title>
</head>
<body>
<ol type= "I" >
<li>Δευτέρα</li>
<li>Τρίτη</li>
<li>Τετάρτη</li>
<li>Πέμπτη</li>
<li>Παρασκευή</li>
<li>Σάββατο</li>
<li>Κυριακή</li>
</ol>
</body>
</html>
Παράδειγμα
<html>
<head>
<title> lista </title>
</head>
<body>
<ul type= "square">
<li>Kinder
Γαλακτοφέτες</li>
<li>Kinder Bueno</li>
<li>Happy Hippo</li>
<li>Αυγά Kinder</li>
<li>Kinder Delice</li>
<li>Kinder Duplo</li>
<li>Kinder Maxi</li>
</ul>
</body>
</html>
Εμφώλευση
 Η απλότητα και η δύναμη της HTML!
 Επιτρέπεται η εμφώλευση σε λίστες, παραγράφους,
κλπ.
<h1>Λόγοι που έρχομαι στο μάθημα</h1>
<ol>
<li>Για να εντυπωσιάσω:
<ul>
<li>Τη γάτα μου</li>
<li>Το σκύλο μου</li>
</ul>
</li>
<li>Για να μάθω</li>
<li>Για να γίνω διάσημος</li>
</ol>
Λόγοι που έρχομαι στο σεμινάριο
1. Για να εντυπωσιάσω:
 Τη γάτα μου
 Το σκύλο μου
2. Για να μάθω
3. Για να γίνω διάσημος
Να γράψετε τον κώδικα HTML που απαιτείται ώστε να εμφανιστεί η ιστοσελίδα που
ακολουθεί.
Επικεφαλίδα επιπέδου 1
<html>
<head>
<title> Συνδιασμός καταλόγων
</title>
</head>
<body>
<h1> Σύνθετος κατάλογος</h1>
<ol>
<li> Η γλώσσα HTML</li>
<ul>
<li> Συντάκτης HTML</li>
<li> Μορφή αρχείων</li>
</ul>
<li> Δημοσίευση ιστοσελίδας</li>
<ul>
<li> Ηλεκτρονική διεύθυνση </li>
<li> Μεταφορά αρχείων </li>
</ul>
</ol>
</body>
</html>
ακολουθεί.
Λίστες ορισμών – Definitions lists
<dl>
<dt>Αυτοκίνητο </dt>
<dd> Όχημα με 4 ρόδες </dd>
<dt>Μηχανή </dt>
<dd> Όχημα με 2 ρόδες </dd>
</dl>
Προκαθορισμένη "ως έχει" μορφή.
Η ετικέτα <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>
Ετικέτα hr
<hr> η ετικέτα αυτή μας επιτρέπει να δημιουργούμε μια

οριζόντια γραμμή στην σελίδα μας
Σύνδεσμοι
 <a>: Ορίζει ένα σύνδεσμο

 href: Ορίζει τον προορισμό ενός συνδέσμου
Ο προορισμός του συνδέσμου μπορεί να είναι:

1. Εξωτερική ιστοσελίδα
2. Μια άλλη σελίδα μέσα στον ίδιο φάκελο
3. Μι α άλλη σελίδα μέσα σε υποφάκελο
4. Μια άλλη σελίδα σε ανώτερο φάκελο
5. Παραπομπή σε e - mail
Σύνδεσμοι σε ιστοσελίδα
<a href=“http://htmldog.com”>Μάθε HTML!
</a>
Μάθε HTML!
ακολουθεί.
παράγραφος
Λύση
<html>
<head>
<title>Δημιουργία συνδέσμων </title>
</head>
<body>
<p>Αυτός είναι ο πρώτος μου υπερσύνδεσμος
</p>
<a href = "http://www.google.com"> Δείτε εδώ </a>
</body>
</html>
ακολουθεί.
Λύση
<html>
<head>
<title>Δημιουργία συνδέσμων </title>
</head>
<body>
<p>Αυτός <a href = "http://www.google.com">
εδώ</a> είναι ο πρώτος μου υπερσύνδεσμος
</p>
</body>
</html>
ακολουθεί.
Επικεφαλίδα
επιπέδου1
Εισαγωγή
γραμμής
Λύση
<html>
<head>
<title> Λίστες και υπερσύνδεσμοι </title>
</head>
<body>
<h1> Αυτές είναι οι αγαπημένες μου ιστοσελίδες </h1>
<ol>
<li> Κοινωνικής δικτύωσης </li>
<ul type= "square">
<li> <a href = "http://www.facebook.com"> Facebook </a> </li>
<li> <a href = "http://www.twitter.com"> Twitter </a> </li>
<li> <a href = " http://www.linkedin.com"> Linkedin </a></li>
</ul>
<hr>
<li> Ενημέρωσης </li>
<ul type = "disc">
<li> Η εφημερίδα Ελευθερία της Καλαμάτας. <a href = "http://www.eleftheriaonline.gr"> Δείτε εδώ
</a></li>
<li> Η εφημερίδα Το πρώτο θέμα.<a href = "http://www.protothema.gr"> Επισκεφτείτε την </a>
</li>
<li> Η ειδησιογραφική ιστοσελίδα newsbomb. <a href = "http://www.newsbomb.gr"> Δείτε εδώ. </a>
</li>
</ul>
<hr>
<li> Εύρεσης εργασίας</li>
<ul>
<li> Η σεδίδα του ΟΑΕΔ. Δείτε την <a href = "http://www.oaed.gr"> εδώ</a>. </li>
<li> Οι σελίδες: <a href = "http://www.kariera.gr"> Καριέρα</a>, <a href = "http://www.proson.gr">
Προσόν</a>,
<a href = "http://www.skywalker.gr"> Skywalker </a>
</ul>
</body>
</html>
Σύνδεσμοι σε σελίδα που βρίσκεται
μέσα στον ίδιο φάκελο
<a href =“ όνομα αρχείου ">πχ. Εδώ
</a>
<html>
<head>
<title>Δημιουργία συνδέσμων
</title>
</head>
<body>
<p>Αυτός είναι ο πρώτος μου
υπερσύνδεσμος </p>
<a href="sindesmos.html"> εδώ </a>
</body>
</html>
Σύνδεσμοι σε σελίδα που βρίσκεται σε
άλλο υποφάκελο
<a href=“/υποφάκελος/mypage2.htm”>...</a>
Σύνδεσμοι σε σελίδα που βρίσκεται σε

ανώτερο φάκελο
<a href="../mypage2.htm”>...</a>
<a href ="../../mypage1.htm”>...</a>
Παραπομπή σε email
<a
href=“mailto:xristinakanel@gmail.com">...
</a>
ακολουθεί.
παράγραφος
Άσκηση – ομαδική
Δημιουργείστε με την ομάδα σας μια ιστοσελίδα σε HTMLκαι ζητήστε από μια άλλη
ομάδα να σας γράψει τον κώδικα της.
Η σελίδα σας θα πρέπει να περιέχει :

1. Τίτλο
2. Επικεφαλίδες (όποιου επιπέδου εσείς επιθυμείτε)
3. Παράγραφο
4. Λίστες (αριθμημένες, μη αριθμημένες)
5. Συνδέσμους σε εξωτερικές ιστοσελίδες και παραπομπή σε e-mail.
Μπορείτε να χρησιμοποιήσετε όποια στοίχιση εσείς επιθυμείτε και όποια αρίθμηση

και bullets θέλετε.
Ανεβάστε printscreen της σελίδας που δημιουργήσατε στο αντίστοιχο θέμα στο forum
«Θέματα html».
Εικόνες στο web
Χρήση Χρώματα Μέγεθος
JPG Φωτογραφίες Πολλά Μικρό
PNG Γραφικά Πολλά Μέτριο
GIF Γραφικά 256 Ελάχιστο
Εικόνες
 <img>: Περιγράφει μία εικόνα
 src: Το αρχείο της εικόνας ως διεύθυνση
(υποχρεωτικό)
 alt: Μία περιγραφή της εικόνας (υποχρεωτικό)
 width: Μήκος εικόνας σε pixels
 height: Μήκος εικόνας σε pixels
 Η ετικέτα <img> δεν περιλαμβάνει περιεχόμενο.

Εικόνες
<img
src=“cake.gif”
alt=“The cake is not a lie…”
width=“200”
height=“200” />
Παράδειγμα εικόνας από το διαδίκτυο
<html>
<head>
<title>Εικόνες </title>
</head>
<body>
<img src="
http://icons.iconarchive.com/icons/xenia/seas
ons-tweeting/128/spring-flower-follow-me-
icon.png"
alt=“follow spring”
width=“200”
height=“200” />
</body>
</html>
Παράδειγμα εικόνας αποθηκευμένης
στον ίδιο φάκελο
<html>
<head>
</head>
<body>
<img "top" src= "
558331_10200353759784573_1302068770
_n.jpg"
alt ="me"
width = "300"
high= "300" />
</body>
</html>
Εικόνα - υπερσύνδεσμος
<html>
<head>
</head>
<body>
<a href = "http://ictforall.eu"> <img "top" src= "
558331_10200353759784573_1302068770_n.jpg"
alt ="me"
width = "300"
high= "300" />
</a>
</body>
</html>
Στοίχιση εικόνας
Με την ιδιότητα < align=“top”> στην ετικέτα
<img>.
Mπορούμε να διαλέξουμε μεταξύ TOP, MIDDLE ή

ΒΟΤΤΟΜ.
Άσκηση - ατομική
Δημιουργείστε μια στατική ιστοσελίδα η οποία θα περιέχει πληροφορίες για τον

εαυτό σας. Ακολουθείστε το παράδειγμα που σας δίνεται.
Ανεβάστε το .html αρχείο της σελίδας σας στο αντίστοιχο θέμα στο forum «Θέματα
html».
Σχετικά με την στοίχιση του κειμένου και αρίθμηση ακολουθείστε το παράδειγμα

που ακολουθεί.
1.Τίτλος
Άσκηση - ατομική
2.Επικεφαλίδα
Δημιουργείστε μια στατική ιστοσελίδα η οποία θα περιέχει πληροφορίες 1
για τον
εαυτό σας. Ακολουθείστε το παράδειγμα που σας δίνεται.
3.Επικεφαλίδα 2
4.Εμφωλευμένη λίστα. Αριθμημένη – μη

αριθμημένη
5.Εισαγωγή εικόνας και υπερσύνδεση σε

ιστοσελίδα
6.Εισαγωγή υπερσύνδεσης. Σύνδεσμος σε εξωτερική σελίδα

7.Εισαγωγή υπερσύνδεσης. Σύνδεσμος σε email.
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> έχει τίτλο …
•Το νέο βιβλίο του <I> B. Jones </I> έχει τίτλο …
• Το νέο βιβλίο του <CODE> B. Jones </CODE> έχει
τίτλο …
• Το νέο βιβλίο του <B><U> B. Jones</U> </B> έχει
τίτλο …
Κεντράρισμα, αλλαγή γραμμής ...
<CENTER> … </ CENTER > Κεντράρει στην σελίδα
οτιδήποτε υπάρχει ανάμεσα.
<BR> Επιβάλλει αλλαγή γραμμής
<HR> Τοποθετεί μια οριζόντια γραμμή
Έχει παραμέτρους:
<HR SIZE= “αριθμός”> Καθορίζει το πάχος
<HR WIDTH= “αριθμός ή %”> Καθορίζει το πλάτος απόλυτα
ή σε ποσοστό της σελίδας.
<HR ALIGN= “LEFT”> Καθορίζει την θέση της γραμμής
ή = CENTER ή = RIGHT (αριστερά, κέντρο ή δεξιά)
<HR NOSHADE> Μη σκιασμένη γραμμή.
Επιπλέον εντολές
•<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>
μέρος της σελίδας.
Φόντο σελίδας
<BODY BACKGROUND = "stone.gif"> … </BODY>
Το φόντο της σελίδος καθορίζεται από την εικόνα
του αρχείου: stone.gif
<BODY BGCOLOR="color"> … </BODY>
Καθορίζει το χρώμα του φόντου.
color = #RRGGBB όπου RR, GG, BB διψήφιοι
δεκαεξαδικοί αριθμοί για τις εντάσεις των
χρωμάτων R,G,B (Κόκκινο, Πράσινο, Μπλε).
Τα ψηφία του δεκαεξαδικού είναι: 0123456789ABCDEF
Πχ : <body bgcolor="#FF0000">
κάνει το φόντο της σελίδας κόκκινο.
Βιβλιογραφία
Καμμάς Σ., Διαδικτυακές σημειώσεις μαθήματος «Εργαλεία ανάπτυξης
εφαρμογών Ιντερνέτ Ι», 2012.
Πρέντζα Α., σημειώσεις μαθήματος «Προγραμματισμός Παγκόσμιου Ιστού»,
πανεπιστήμιο Πειραιώς 2009.
www. w3schools.com

Εργαλεία ανάπτυξης εφαρμογών internet Ι

Uploaded by

Copyright:

Available Formats

You might also like

Εργαλεία ανάπτυξης εφαρμογών internet Ι

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

Εργαλεία ανάπτυξης εφαρμογών internet Ι

Uploaded by

Copyright:

Available Formats

IEK ΟΑΕΔ ΚΑΛΑΜΑΤΑΣ

ΤΕΧΝΙΚΟΣ ΕΦΑΡΜΟΓΩΝ ΠΛΗΟΦΟΡΙΚΗΣ

Εργαλεία ανάπτυξης εφαρμογών

Διδάσκουσα: Κανελλοπούλου Χριστίνα

• Η γλώσσα που χρησιμοποιείται για την αναπαράσταση δεδομένων από

Τρέχουσα έκδοση 4.01

Ο Web browser αγνοεί μη εκτυπώσιμους χαρακτήρες

Πρέπει να χρησιμοποιηθούν έγκυρα tags ή ειδικοί

• Οι Browsers δεν υποστηρίζουν όλες τις

Πχ. σε παλιότερη έκδοση της HTML, η

• Στην HTML οι εντολές μπορούν να

Τα σχόλια δεν εμφανίζονται στην σελίδα.

 Δηλώνει την έκδοση της γλώσσας HTML

 Κάθε ετικέτα έχει όνομα: html

Κλείσιμο ετικέτας html

 <html>: Περιέχει μία ολόκληρη σελίδα

 Το <html> πρέπει υποχρεωτικά να περιέχει μόνο

Title : ορισμός του τίτλου της σελίδας

Μόνο η ετικέτα Title εμφανίζεται στην οθόνη του φυλλομετρητή.

Να γράψετε τον κώδικα HTML που απαιτείται ώστε

<TITLE> ΚΕIΜΕΝΟ ΤΙΤΛΟΥ </TITLE>

•Υποστηρίζονται επίσης επικεφαλίδες έξη μεγεθών.

<h1 align=“center”> Γεια σου κόσμε! </h1>

Άνοιγμα Κλείσιμο ετικέτας

Όνομα ιδιότητας Τιμή ιδιότητας

<h1 align=“center”> Γεια σου κόσμε!</h1>

Αυτή είναι η πρώτη μου σελίδα

Αυτή είναι η πρώτη μου σελίδα Είμαι ενθουσιασμένος!

<p>Αυτή είναι η πρώτη μου σελίδα</p>

Αυτή είναι η πρώτη μου σελίδα

 Προσοχή: Δεν πρέπει να χρησιμοποιείται για

 Αυξομειώνουμε την κάθετη απόσταση με

<li>: Ένα στοιχείο μίας λίστας (μνημονικό: list item)

 Πανομοιότυπος HTML κώδικας για την περιγραφή τους.

 Τα <ol> και <ul> μπορούν να περιέχουν μόνο

<hr> η ετικέτα αυτή μας επιτρέπει να δημιουργούμε μια

 <a>: Ορίζει ένα σύνδεσμο

Ο προορισμός του συνδέσμου μπορεί να είναι:

Σύνδεσμοι σε σελίδα που βρίσκεται σε

Η σελίδα σας θα πρέπει να περιέχει :

Μπορείτε να χρησιμοποιήσετε όποια στοίχιση εσείς επιθυμείτε και όποια αρίθμηση

 Η ετικέτα <img> δεν περιλαμβάνει περιεχόμενο.

Mπορούμε να διαλέξουμε μεταξύ TOP, MIDDLE ή

Δημιουργείστε μια στατική ιστοσελίδα η οποία θα περιέχει πληροφορίες για τον

Σχετικά με την στοίχιση του κειμένου και αρίθμηση ακολουθείστε το παράδειγμα

4.Εμφωλευμένη λίστα. Αριθμημένη – μη

5.Εισαγωγή εικόνας και υπερσύνδεση σε

6.Εισαγωγή υπερσύνδεσης. Σύνδεσμος σε εξωτερική σελίδα

<basefont size =J color = "#rrggbb" >

You might also like