Εργαλεία ανάπτυξης εφαρμογών 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> </html> </body> This is my first web page.

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 <html> <body> This is my first web page. </body> </html> Κλείσιμο ετικέτας html

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

Ιεραρχία στις ετικέτες Μία ετικέτα μπορεί να περιέχεται ολόκληρη μέσα σε μία άλλη. Πρόκειται για μια δενδρική δομή. Ό,τι ανοίγει πρώτο κλείνει τελευταίο (LIFO). Η body περιέχεται στην html <html> <body> 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> <H2> Αυτή είναι επικεφαλίδα επιπέδου 2 </H2> <H3> Αυτή είναι επικεφαλίδα επιπέδου 3 </H3> <H4> Αυτή είναι επικεφαλίδα επιπέδου 4</H4> <H5> Αυτή είναι επικεφαλίδα επιπέδου 5 </H5> <H6> Αυτή είναι επικεφαλίδα επιπέδου 6 </H6> <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> <li>δευτέρα</li> <li>τρίτη</li> <li>τετάρτη</li> <li>πέμπτη</li> <li>παρασκευή</li> <li>σάββατο</li> <li>κυριακή</li> </ol> 1. Δευτέρα 2. Τρίτη 3. Τετάρτη 4. Πέμπτη 5. Παρασκευή 6. Σάββατο 7. Κυριακή

Μη αριθμημένη λίστα: Ψώνια <ul> <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> Kinder Γαλακτοφέτες Kinder Bueno Happy Hippo Αυγά Kinder Kinder Delice Kinder Duplo 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>

Να γράψετε τον κώδικα HTML που απαιτείται ώστε να εμφανιστεί η ιστοσελίδα που ακολουθεί.

Λίστες ορισμών Definitions lists <dl> </dl> <dt>αυτοκίνητο </dt> <dd> Όχημα με 4 ρόδες </dd> <dt>μηχανή </dt> <dd> Όχημα με 2 ρόδες </dd>

Προκαθορισμένη "ως έχει" μορφή. Η ετικέτα <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 που απαιτείται ώστε να εμφανιστεί η ιστοσελίδα που ακολουθεί. παράγραφος

Λύση <html> <head> <title>δημιουργία συνδέσμων </title> </head> <body> <p>αυτός είναι ο πρώτος μου υπερσύνδεσμος </p> <a href = "http://www.google.com"> Δείτε εδώ </a> </body> </html>

Να γράψετε τον κώδικα HTML που απαιτείται ώστε να εμφανιστεί η ιστοσελίδα που ακολουθεί.

Λύση <html> <head> <title>δημιουργία συνδέσμων </title> </head> <body> <p>αυτός <a href = "http://www.google.com"> εδώ</a> είναι ο πρώτος μου υπερσύνδεσμος </p> </body> </html>

Να γράψετε τον κώδικα 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 που απαιτείται ώστε να εμφανιστεί η ιστοσελίδα που ακολουθεί. παράγραφος

Άσκηση ομαδική Δημιουργείστε με την ομάδα σας μια ιστοσελίδα σε 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-meicon.png" alt= follow spring width= 200 height= 200 /> </body> </html>

Παράδειγμα εικόνας αποθηκευμένης στον ίδιο φάκελο <html> <head> <title>εικόνες </title> </head> <body> <img "top" src= " 558331_10200353759784573_1302068770 _n.jpg" alt ="me" width = "300" high= "300" /> </body> </html>

Εικόνα - υπερσύνδεσμος <html> <head> <title>εικόνες </title> </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> έχει τίτλο Το νέο βιβλίο του 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= αριθμός ή % > Καθορίζει το πλάτος απόλυτα ή σε ποσοστό της σελίδας. <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