ΗΤΜL HTML σημαίνει HyperText Markup Language, είναι δηλαδή μια γλώσσα που μας επιτρέπει να μορφοποιούμε κάποιες πληροφορίες προκειμένου να εμφανιστούν με τον τρόπο που θέλουμε σε έναν φυλλομετρητή. Η HTML δεν είναι γλώσσα προγραμματισμού αλλά γλώσσα μορφοποίησης. Είναι μια περιγραφική γλώσσα, δηλαδή ένας ειδικός τρόπος γραφής κειμένου και κλήσης άλλων αρχείων ή εφαρμογών βασισμένος σε ειδικές ετικέτες (tags). Οι ετικέτες αυτές περικλείονται μέσα στα σύμβολα < και >. Οι ετικέτες περικλείουν μια πληροφορία που θέλουμε να μορφοποιήσουμε, υπάρχει δηλαδή μια ετικέτα που δηλώνει την αρχή της μορφοποίησης και μια που δηλώνει το τέλος. Η ετικέτα που δηλώνει το τέλος της μορφοποίησης είναι ίδια με την ετικέτα που δηλώνει την αρχή με την μόνη διαφορά ότι περιέχει και τον χαρακτήρα /. Η γενική μορφή μιας ετικέτας είναι: <ετικέτα> Κείμενο </ετικέτα> Π.χ. η οδηγία για να γίνει ένα κείμενο bold είναι: <b>το κείμενο που θα είναι bold </b> Αυτό ερμηνεύεται ως: <b> = (ότι βρεις από δω και πέρα θα το παρουσιάζεις σαν bold) </b> = (σταματάς να κάνεις bold ότι βρεις από δω και κάτω) Η HTML δεν "θέτει" περιορισμούς στο αν τα γράμματα της ετικέτας θα είναι κεφαλαία ή μικρά. Είναι όμως προτιμότερο να χρησιμοποιούμε μικρά γράμματα, γιατί πολλές φορές τα κεφαλαία Ελληνικά "μοιάζουν" με τα κεφαλαία Αγγλικά. Μπορεί όμως οπτικά να φαίνονται ίδια όμως πρόκειται για δύο διαφορετικά γράμματα, με αποτέλεσμα η εντολή να μην γίνεται κατανοητή από τον φυλλομετρητή και αυτός να την αγνοεί. Π.χ. Η ετικέτα για μια επικεφαλίδα είναι <h1> Επικεφαλίδα </h1>, αν "ξεχαστούμε" και γράψουμε την ετικέτα με κεφαλαία ελληνικά το οπτικό αποτέλεσμα στον κώδικα θα είναι <Η1> Επικεφαλίδα </Η1>. Εμείς δεν θα καταλάβουμε τη διαφορά, αλλά ο φυλλομετρητής θα την καταλάβει και θα αγνοήσει την ετικέτα. ΔΗΜΙΟΥΡΓΩΝΤΑΣ ΕΝΑ HTML ΑΡΧΕΙΟ Για να δημιουργήσουμε ένα html αρχείο θα πρέπει να χρησιμοποιήσουμε ένα απλό επεξεργαστή κειμένου. Ο επεξεργαστής που χρησιμοποείται συνήθως είναι το Σημειωματάριο (Notepad). Ανοίγουμε λοιπόν το σημειωματάριο και επιλέγουμε Αποθήκευση. Επιλέγουμε σημείο Αποθήκευσης και στην συνέχεια γράφουμε το όνομα που θέλουμε να δώσουμε στην ιστοσελίδα μας και δίνουμε την κατάληξη.html ή.htm. Αυτό που θα πρέπει
να προσέξουμε είναι στην επιλογή Save as type (Τύπος αρχείου), να επιλέξουμε από την λίστα All files (Όλα τα αρχεία), διαφορετικά το αρχείο μας θα αποθηκευτεί έχοντας σαν όνομα την ονομασία και την κατάληξη που του έχουμε δώσει, και σαν κατάληξη.txt. δηλαδή my_first_page.html.txt Μόλις δημιουργήσουμε το αρχείο μας, το πρώτο πράγμα που θα πρέπει να κάνουμε είναι να γράψουμε τις βασικές εντολές της HTML, τις οποίες πρέπει να περιέχει κάθε HTML αρχείο. Οι εντολές χωρίζονται σε αυτές που περικλείουν πληροφορίες που δεν εμφανίζονται στην οθόνη του φυλλομετρητή και σε αυτές που εμφανίζονται. Δηλαδή από τις ετικέτες που ανήκουν στο κεφάλι της σελίδας και περιέχουν πληροφορίες για την σελίδα και στο σώμα που περιέχονται πληροφορίες που εμφανίζονται στην οθόνη του φυλλομετρητή. Όλος ο κώδικας της HTML περιέχεται μέσα στις ετικέτες <html>... </html>. Μέσα σε αυτή περιέχονται οι ετικέτες <head>... </head> δηλαδή το "κεφάλι" της html και μετά η <body>... </body> δηλαδή το "σώμα" της σελίδας. <html> <head> <title> Η πρώτη μου Ιστοσελίδα </title> </head> <body>... </body> </html> Η ετικέτα <title> Η πρώτη μου Ιστοσελίδα </title> περιέχεται μέσα στην ετικέτα <head>... </head> και η πληροφορίες που περιέχονται μέσα σε αυτή (<title>)εμφανίζονται στην γραμμή τίτλου του φυλλομετρήτη και όχι μέσα σε αυτόν. ΒΑΣΙΚΑ ΣΤΟΙΧΕΙΑ Τύπος εγγράφου <HTML></HTML> Ορίζει την αρχή και το τέλος Τίτλος Επιφυλλίδα <TITLE></TITLE> <HEAD></HEAD> Εμφανίζεται στη μπλε μπάρα του φυλλομετρητή. Μπαίνει μεταξύ <head> και </head> Εδώ μπαίνει ο τίτλος, περιγραφή της σελίδας, τα styles και η java Bασικός Κορμός <BODY></BODY> το κύριο υλικό της σελίδας Έντονη γραφή Πλάγια γραφή Υπογράμμιση Επικεφαλλίδα Έντονη έμφαση Μεγάλα γράμματα Μικρά γράμματα Διαγραφή ΜΟΡΦΟΠΟΙΗΣΗ ΚΕΙΜΕΝΟΥ <B></B> <I></I> <U></U> <Hi></Hi> <STRONG></STRONG> <BIG></BIG> <SMALL></SMALL> <STRIKE></STRIKE> Δέχεται 6 ορισμούς: H1 ως και H6.Δημιουργεί διαφορετικού μεγέθους χαρακτήρες
Εκθέτης <SUP></SUP> Δείκτης Γραφομηχανή Προμορφοποιημένο Στοίχιση στο κέντρο <SUB></SUB> <TT></TT> <PRE></PRE> <CENTER></CENTER> Εμφανίζει τα κενά διαστήματα όπως έχουν γραφεί Μέγεθος γραμμάτων <FONT SIZE=i></FONT> Με τιμές i από 1 ως και 7 Χρώμα γραμμάτων Επιλογή γραμματοσειράς Κινούμενο κείμενο <FONT COLOR="#$$$$$$"></FONT> <FONT FACE="όνομα γραμματοσειράς"></font> <MARQUEE></MARQUEE>
Παράγραφος Στοίχιση παραγράφου Πλήρης στοίχιση παραγράφου Αλλαγή σειράς Οριζόντια γραμμή Χρώμα γραμμής Στοίχιση γραμμής <P> ΔΙΑΧΩΡΙΣΤΕΣ <P ALIGN=LEFT CENTER RIGHT></P> <P ALIGN=JUSTIFY></P> <BR> <HR> <HR COLOR="#$$$$$$"> <HR ALIGN=LEFT RIGHT CENTER> Πάχος γραμμής <HR SIZE=i> Σε pixels Πλάτος γραμμής <HR WIDTH=i> Σε pixels Πλάτος γραμμής <HR WIDTH="i%"> i = ποσοστό του πλάτους σελίδας Συμπαγής γραμμή <HR NOSHADE> Δίχως την τριδιάστατη όψη Επαναλαμβανόμενη εικόνα φόντου Υδατογράφημα ΦΟΝΤΟ ΚΑΙ ΧΡΩΜΑΤΑ <BODY BACKGROUND="Διαδρομή Αρχείου Εικόνας"> <BODY BGPROPERTIES="FIXED"> Χρώμα φόντου <BODY BGCOLOR="#$$$$$$"> Βασικό χρώμα κειμένου Χρώμα συνδέσμων Χρώμα συνδέσμων που έχουμε επισκεφτεί Ενεργός σύνδεσμος Απλή λίστα <BODY TEXT="#$$$$$$"> <BODY LINK="#$$$$$$"> <BODY VLINK="#$$$$$$"> Το <BODY ALINK="#$$$$$$"> ΛΙΣΤΕΣ <UL><LI><LI>...<LI></UL> Τύπος κουκίδας <UL TYPE=DISC CIRCLE SQUARE> Τύπος κουκίδας <LI TYPE=DISC CIRCLE SQUARE> Αριθμημένη λίστα Μορφή αρίθμησης <OL><LI><LI>...<LI></OL> <OL TYPE=A a I i 1> χρώμα ορίζεται με τρεις To <LI> μπαίνει μπροστά από κάθε στοιχείο της λίστας Για όλη τη λίστα Για το συγκεκριμένο στοιχείο της λίστας To <LI> μπαίνει μπροστά από κάθε στοιχείο της λίστας Για όλη τη λίστα
Μορφή αρίθμησης Αριθμός έναρξης αρίθμησης Λίστα επεξηγήσεων <LI TYPE=A a I i 1> <OL START=Αριθμός> Για το συγκεκριμένο στοιχείο της λίστας Για όλη τη λίστα <DL><DT><DD><DT><DD>...<DT><DD></DL> (<DT>=όρος, <DD>=επεξήγηση)
Εμφάνιση εικόνας Στοίχιση εικόνας Στοίχιση εικόνας σε σχέση με το κείμενο Εναλλακτικό κείμενο αντί της εικόνας Διαστάσεις εικόνας Πλαίσιο εικόνας Κενός χώρος γύρω από την εικόνα Ήχος Ανανέωση περιεχομένου ή μεταπήδηση σε άλλη σελίδα ΓΡΑΦΙΚΑ ΚΑΙ ΗΧΟΣ <IMG SRC="Διαδρομή Αρχείου Εικόνας"> <IMG SRC="URL" ALIGN=TOP BOTTOM MIDDLE LEFT RIGHT> <IMG SRC="Διαδρομή Αρχείου Εικόνας" ALIGN=TEXTTOP ABSMIDDLE BASELINE ABSBOTTOM> <IMG SRC="Διαδρομή Αρχείου Εικόνας" ALT="Κείμενο"> <IMG SRC="Διαδρομή Αρχείου Εικόνας" WIDTH=Αριθμός HEIGHT=Αριθμός> <IMG SRC="Διαδρομή Αρχείου Εικόνας" WIDTH=% HEIGHT=%> <IMG SRC="Διαδρομή Αρχείου Εικόνας" BORDER=Αριθμός> <IMG SRC="Διαδρομή Αρχείου Εικόνας" HSPACE=Αριθμός VSPACE=Αριθμός> <BGSOUND SRC="Διαδρομή Αρχείου Ήχου" LOOP=Αριθμός> <META HTTP-EQUIV="Refresh" CONTENT="χρόνος σε δευτερόλεπτα; URL=ονομασία σελίδας"> Π.χ. <meta http-equiv="refresh" content="10;url=index.html"> ΕΙΔΙΚΟΙ ΧΑΡΑΚΤΗΡΕΣ Αν η εικόνα δεν εμφανιστεί Σε pixels Ως ποσοστό των διαστάσεων της σελίδας Σε pixels Σε pixels Μπαίνει μεταξύ <head> και </head>. Loop=-1 Συνεχώς Μπαίνει μεταξύ <head> και </head> Κενό διάστημα
Συνδεσμοςπαραπομπή σε διεύθυνση Παραπομπή σε σημείο του ιδίου αρχείου Ορισμός θέσης για σύνδεσμο Παράθυρο όπου θα ανοίξει ο σύνδεσμος Σύνδεσμος για αποστολή email Καθορισμός τίτλου για email <A HREF="URL"> λέξη,φράση ή πολυμεσικό στοιχείο που θα εμφανίζεται και θα είναι ο σύνδεσμος</a> <A HREF="#***"> λέξη,φράση ή πολυμεσικό στοιχείο που θα εμφανίζεται και θα είναι ο σύνδεσμος </A> <A NAME="***"></A> <A HREF="URL" TARGET="***"> λέξη,φράση ή πολυμεσικό στοιχείο που θα εμφανίζεται και θα είναι ο σύνδεσμος </A> <A HREF="mailto: ***"> λέξη,φράση ή πολυμεσικό στοιχείο που θα εμφανίζεται και θα είναι ο σύνδεσμος </A> <A HREF=»mailto: ***?SUBJECT=***»> λέξη,φράση ή πολυμεσικό στοιχείο που θα εμφανίζεται και θα είναι ο σύνδεσμος </A> ΣΥΝΔΕΣΜΟΙ URL = Διεύθυνση ιστοσελίδας (http://www.όνομα.κατάληξη) ή όνομα αρχείου.html ή όνομα πολυμεσικού στοιχείου.κατάληξη (αν το αρχείο που καλείται βρίσκεται σε διαφορετικό κατάλογο θα πρέπει να γραφεί η απόλυτη διεύθυνση του στο δίσκο) ***= Όνομα σημείου μεσα σε αρχείο html που θα οδηγήσει ο σύνδεσμος ***=Καθορισμός ονόματος σημείου μεσα σε αρχείο html για χρήση της παραπομπής (βλέπε παραπάνω) ***=Όνομα παραθύρου ή πλαισίου που θα ανοίξει ο σύνδεσμος ***=Διεύθυνση ηλεκτρονικού ταχυδρομείου (όνομα χρήστη@server.κατάληξη). Εμφανίζεται στον παραλήπτη της εφαρμογής email Πρέπει να μπει? πρίν από τη λέξη SUBJECT. ***=διεύθυνση ηλεκτρονικού ταχυδρομείου (όνομα χρήστη@server.κατάληξη). Εμφανίζεται στον παραλήπτη της εφαρμογής email ***=λέξη ή φράση που θα εμφανίζεται στο θέμα της εφαρμογής email Registered TM Registered TM Copyright Copyright ΕΙΔΙΚΟΙ ΧΑΡΑΚΤΗΡΕΣ
Κενό διάστημα ΠΙΝΑΚΕΣ Ορισμός πίνακα <TABLE></TABLE> Στοίχιση πίνακα <TABLE ALIGN=LEFT RIGHT CENTER> Περίγραμμα πίνακα <TABLE BORDER></TABLE> Υπαρκτό ή μη Περίγραμμα πίνακα <TABLE BORDER=i></TABLE> i=πάχος περιγράμματος Απόσταση (διάκενο) κελιών Εσωτερικό περιθώριο κελιών Επιθυμητό πλάτος Ποσοστό πλάτους Χρώμα πίνακα Χρώμα περιγράμματος Γραμμή Πίνακα Στοίχιση περιεχομένου σειράς πίνακα Κελί πίνακα Στοίχιση περιεχομένου κελιού πίνακα (ορίζοντια κάθετα) Κείμενο κελιού χωρίς αναδίπλωση Επέκταση σε στήλες Επέκταση σε σειρές Επιθυμητό πλάτος κελιού Πλάτος κελιού σε ποσοστό Χρώμα κελιού <TABLE CELLSPACING=i> <TABLE CELLPADDING=i> <TABLE WIDTH=i> <TABLE WIDTH=i%> <TABLE BGCOLOR="$$$$$$"></TABLE> <TABLE BORDERCOLOR="$$$$$$"></TABLE> <TR></TR> i= Απόσταση κελιών i= Εσωτερικό περιθώριο κελιών i=επιθυμητό πλάτος πίνακα σε pixels i%=ποσοστό επί του πλάτους της σελίδας Το χρώμα ορίζεται με τρεις (διψήφιους) δεκαεξαδικούς αριθμούς ή με το όνομα του. Το χρώμα ορίζεται με τρεις (διψήφιους) δεκαεξαδικούς αριθμούς ή με το όνομα του. <TR ALIGN=LEFT RIGHT CENTER MIDDLE BOTTOM> <TD></TD> <TD ALIGN=LEFT RIGHT CENTER VALIGN=TOP MIDDLE BOTTOM> <TD NOWRAP> <TD COLSPAN=i> <TD ROWSPAN=i> <TD WIDTH=i> <TD WIDTH="i%"> <TD BGCOLOR="#$$$$$$"> Πρέπει να εμπεριέχεται σε ορισμό σειράς (<TR></TR>) i=αριθμός συγχωνευμένων κελιών προς τα δεξιά i=αριθμός συγχωνευμένων κελιών προς τα κάτω i=πλάτος κελιού σε pixels i= Πλάτος κελιού σε ποσοστό επί του πλάτους του πίνακα Το χρώμα ορίζεται με τρεις (διψήφιους)
δεκαεξαδικούς αριθμούς ή με το όνομα του. ΠΛΑΙΣΙΑ (Frames) Σελίδα με πλαίσια <FRAMESET></FRAMESET> Ύψος σειρών Ύψος σειρών Πλάτος στηλών Πλάτος στηλών Περίγραμμα Πλάτος περιγράμματος Χρώμα περιγράμματος Απόσταση (διάκενο) πλαισίων Ορισμός πλαισίου <FRAME> Έγγραφο που θα εμφανιστεί <FRAMESET ROWS="i,i,...,i"></FRAMESET> <FRAMESET ROWS="i%,i%,...,i%"></FRAMESET> <FRAMESET COLS = "i,i,...,i"></frameset> <FRAMESET COLS = "i%,i%,...,i%"></frameset> Αντί του <BODY> i=ύψος σειρών σε pixels i=ύψος σειρών σε ποσοστό. Άθροισμα των ποσοστών = 100% i= Πλάτος στηλών σε pixels <FRAMESET FRAMEBORDER="yes no"></frameset> <FRAMESET BORDER=i></FRAMESET> <FRAMESET BORDERCOLOR="#$$$$$$"></FRAMESET> <FRAMESET FRAMESPACING=i></FRAMESET> <FRAME SRC="URL"> Όνομα πλαισίου <FRAME NAME="***"> Πλάτος περιθωρίου <FRAME MARGINWIDTH=i> Ύψος περιθωρίου <FRAME MARGINHEIGHT=i> Εμφάνιση μπάρας κύλισης <FRAME SCROLLING="YES NO AUTO"> Σταθερό μέγεθος <FRAME NORESIZE> Περίγραμμα πλαισίου Χρώμα περιγράμματος <FRAME FRAMEBORDER="yes no"> <FRAME BORDERCOLOR="#$$$$$$"> i= Πλάτος στηλών σε ποσοστό. Άθροισμα των ποσοστών = 100% i=πάχος περιγράμματος Το χρώμα ορίζεται με τρεις (διψήφιους) δεκαεξαδικούς αριθμούς ή με το όνομα του. i=απόσταση πλαισίων Περιεχόμενο μεμονωμένου πλαισίου URL=Η διεύθυνση της ιστοσελίδας ή το όνομα του αρχειου που θα εμφανιστεί ***=όνομα του πλαισίου i= Πλάτος αριτερά και δεξιά i=ύψος πάνω και κάτω Χωρίς τιμή, μόνο δήλωση. Το χρώμα ορίζεται με τρεις (διψήφιους) δεκαεξαδικούς αριθμούς ή με το όνομα του. Ορισμός φόρμας Πλαίσιο κειμένου ΦΟΡΜΕΣ <FORM ACTION="URL" METHOD=GET POST></FORM> <INPUT TYPE="TEXT" NAME="***" VALUE="###"> ***=όνομα του πεδίου. ###=αρχική τιμή
Πλαίσιο Κωδικού Μέγεθος πεδίου Μέγιστο μέγεθος Τετράγωνο πεδίο Πολλαπλής επιλογής Κυκλικό πεδίο μονής επιλογής Προεπιλογή Απενεργοποίηση Πεδίο εισαγωγής δεδομένων Πεδίο εισαγωγής δεδομένων Λίστα επιλογής <INPUT TYPE="PASSWORD" NAME="***"> <INPUT SIZE=i> <INPUT MAXLENGTH=i> <INPUT TYPE="CHECKBOX" NAME="***"> <INPUT TYPE="RADIO" NAME="***"> <INPUT CHECKED> <INPUT DISABLED> <INPUT TYPE="SUBMIT" VALUE="***"> <INPUT TYPE="RESET" VALUE="***"> <SELECT></SELECT> ***=όνομα του πεδίου i=μέγεθος πεδίου σε χαρακτήρες i=μέγιστο πλήθος χαρακτήρων που μπορούν να πληκτρολογηθούν ***=όνομα του πεδίου. ***=όνομα του πεδίου. Όλα τα κυκλικά πεδία έχουν το ίδιο NAME Για τετράγωνα και κυκλικά πεδία τσεκαρίσματος. Εμφανίζονται προεπιλεγμένα. Για τετράγωνα και κυκλικά πεδία τσεκαρίσματος. Εμφανίζονται απενεργοποιημένα. κουμπί καταχώρησης. ***=όνομα του κουμπιού κουμπί ακύρωσης. ***=όνομα του κουμπιού Όνομα λίστας <SELECT NAME="***"></SELECT> ***=όνομα του πεδίου Αριθμός επιλογών Πολλαπλή επιλογή <SELECT SIZE=i></SELECT> <SELECT MULTIPLE> i=αριθμός επιλογών που εμφανίζονται Για περισσότερες από μία επιλογές Επιλογή <OPTION> </OPTION> Διαθέσιμα στοιχεία προς επιλογή Προεπιλογή <OPTION SELECTED> </OPTION> Τιμή επιλογής <OPTION VALUE="***"> </OPTION> ***=τιμή επιλογής Περιοχή κειμένου <TEXTAREA ROWS=i COLS=j NAME="***">...</TEXTAREA> i=αριθμός γραμμών, j=αριθμός στηλών. ***=όνομα του πεδίου....=εμφάνιση κειμένου μέσα στην περιοχή κειμένο