Σημειώσεις HTML
Πέμπτη, 18 Δεκέμβριος 2014 08:14 | Τελευταία Ενημέρωση στις Πέμπτη, 18 Δεκέμβριος 2014 08:23 | 
| 
| 
ΗΤΜ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> |
Δέχεται 6 ορισμούς: H1 ως και H6.Δημιουργεί διαφορετικού μεγέθους χαρακτήρες |
|
|
|
Έντονη έμφαση |
<STRONG></STRONG> |
|
|
|
|
Μεγάλα γράμματα |
<BIG></BIG> |
|
|
|
|
Μικρά γράμματα |
<SMALL></SMALL> |
|
|
|
|
Εκθέτης |
<SUP></SUP> |
|
|
|
|
Δείκτης |
<SUB></SUB> |
|
|
|
|
Στοίχιση στο κέντρο |
<CENTER></CENTER> |
|
|
|
|
Μέγεθος γραμμάτων |
<FONT SIZE=i></FONT> |
Με τιμές i από 1 ως και 7 |
|
|
|
Χρώμα γραμμάτων |
<FONT COLOR="όνομα"></FONT> |
Γράφουμε το όνομα του χρώματος. |
|
|
|
Επιλογή γραμματοσειράς |
<FONT FACE="όνομα γραμματοσειράς"></FONT> |
|
|
|
ΔΙΑΧΩΡΙΣΤΕΣ |
|||
|
|
Παράγραφος |
<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 NOSHADE> |
Δίχως την τριδιάστατη όψη |
|
ΦΟΝΤΟ ΚΑΙ ΧΡΩΜΑΤΑ |
|||
|
|
Επαναλαμβανόμενη εικόνα φόντου |
<BODY BACKGROUND="Διαδρομή Αρχείου Εικόνας"> |
|
|
|
Υδατογράφημα |
<BODY BGPROPERTIES="FIXED"> |
|
|
|
Χρώμα φόντου |
<BODY BGCOLOR="όνομα"> |
Το χρώμα ορίζεται με το όνομα του. |
|
|
Βασικό χρώμα κειμένου |
<BODY TEXT="όνομα"> |
Το χρώμα ορίζεται με το όνομα του. |
|
ΛΙΣΤΕΣ |
|||
|
|
Απλή λίστα |
<UL><LI><LI>...<LI></UL> |
To <LI> μπαίνει μπροστά από κάθε στοιχείο της λίστας |
|
|
Τύπος κουκίδας |
<UL TYPE=DISC|CIRCLE|SQUARE> |
Για όλη τη λίστα |
|
|
Τύπος κουκίδας |
<LI TYPE=DISC|CIRCLE|SQUARE> |
Για το συγκεκριμένο στοιχείο της λίστας |
|
|
Αριθμημένη λίστα |
<OL><LI><LI>...<LI></OL> |
To <LI> μπαίνει μπροστά από κάθε στοιχείο της λίστας |
|
|
Μορφή αρίθμησης |
<OL TYPE=A|a|I|i|1> |
Για όλη τη λίστα |
|
|
Μορφή αρίθμησης |
<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=Αριθμός> |
Σε pixels |
||||
|
<IMG SRC="Διαδρομή Αρχείου Εικόνας" WIDTH=% HEIGHT=%> |
Ως ποσοστό των διαστάσεων της σελίδας |
||||||
|
ΕΙΔΙΚΟΙ ΧΑΡΑΚΤΗΡΕΣ |
|||||||
|
|
Κενό διάστημα |
|
|
||||
ΣΥΝΔΕΣΜΟΙ |
|||
|
|
Συνδεσμος-παραπομπή σε διεύθυνση |
<A HREF="URL"> λέξη,φράση ή πολυμεσικό στοιχείο που θα εμφανίζεται και θα είναι ο σύνδεσμος</A> |
URL = Διεύθυνση ιστοσελίδας (http://www.όνομα.κατάληξη) ή όνομα αρχείου.html ή όνομα πολυμεσικού στοιχείου.κατάληξη (αν το αρχείο που καλείται βρίσκεται σε διαφορετικό κατάλογο θα πρέπει να γραφεί η απόλυτη διεύθυνση του στο δίσκο) |
|
|
Παραπομπή σε σημείο του ιδίου αρχείου |
<A HREF="#***"> λέξη,φράση ή πολυμεσικό στοιχείο που θα εμφανίζεται και θα είναι ο σύνδεσμος </A> |
***= Όνομα σημείου μεσα σε αρχείο html που θα οδηγήσει ο σύνδεσμος |
|
|
Ορισμός θέσης για σύνδεσμο |
<A NAME="***"></A> |
***=Καθορισμός ονόματος σημείου μεσα σε αρχείο html για χρήση της παραπομπής (βλέπε παραπάνω) |
|
|
Παράθυρο όπου θα ανοίξει ο σύνδεσμος |
<A HREF="URL" TARGET="***"> λέξη,φράση ή πολυμεσικό στοιχείο που θα εμφανίζεται και θα είναι ο σύνδεσμος </A> |
***=Όνομα παραθύρου ή πλαισίου που θα ανοίξει ο σύνδεσμος |
|
ΠΙΝΑΚΕΣ |
|||
|
|
Ορισμός πίνακα |
<TABLE></TABLE> |
|
|
|
Στοίχιση πίνακα |
<TABLE ALIGN=LEFT|RIGHT|CENTER> |
|
|
|
Περίγραμμα πίνακα |
<TABLE BORDER=i></TABLE> |
|
|
|
Απόσταση (διάκενο) κελιών |
<TABLE CELLSPACING=i> |
i= Απόσταση κελιών |
|
|
Εσωτερικό περιθώριο κελιών |
<TABLE CELLPADDING=i> |
i= Εσωτερικό περιθώριο κελιών |
|
|
Επιθυμητό πλάτος |
<TABLE WIDTH=i> |
i=Επιθυμητό πλάτος πίνακα σε pixels |
|
|
Ποσοστό πλάτους |
<TABLE WIDTH=i%> |
i%=Ποσοστό επί του πλάτους της σελίδας |
|
|
Χρώμα πίνακα |
<TABLE BGCOLOR="όνομα"></TABLE> |
Το χρώμα ορίζεται με τρεις (διψήφιους) δεκαεξαδικούς αριθμούς ή με το όνομα του. |
|
|
Χρώμα περιγράμματος |
<TABLE BORDERCOLOR="όνομα"></TABLE> |
Το χρώμα ορίζεται με τρεις (διψήφιους) δεκαεξαδικούς αριθμούς ή με το όνομα του. |
|
|
Γραμμή Πίνακα |
<TR></TR> |
|
|
|
Στοίχιση περιεχομένου σειράς πίνακα |
<TR ALIGN=LEFT|RIGHT|CENTER|MIDDLE|BOTTOM> |
|
|
|
Κελί πίνακα |
<TD></TD> |
Πρέπει να εμπεριέχεται σε ορισμό σειράς (<TR></TR>) |
|
|
Στοίχιση περιεχομένου κελιού πίνακα (ορίζοντια ? κάθετα) |
<TD ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM> |
|
|
|
Κείμενο κελιού χωρίς αναδίπλωση |
<TD NOWRAP> |
|
|
|
Επέκταση σε στήλες |
<TD COLSPAN=i> |
i=αριθμός συγχωνευμένων κελιών προς τα δεξιά |
|
|
Επέκταση σε σειρές |
<TD ROWSPAN=i> |
i=αριθμός συγχωνευμένων κελιών προς τα κάτω |
|
|
Επιθυμητό πλάτος κελιού |
<TD WIDTH=i> |
i=Πλάτος κελιού σε pixels |
|
|
Πλάτος κελιού σε ποσοστό |
<TD WIDTH="i%"> |
i= Πλάτος κελιού σε ποσοστό επί του πλάτους του πίνακα |
|
|
Χρώμα κελιού |
<TD BGCOLOR="όνομα"> |
Το χρώμα ορίζεται με τρεις (διψήφιους) δεκαεξαδικούς αριθμούς ή με το όνομα του. |