Warrior Posted October 7, 2010 Posted October 7, 2010 καλησπέρα παιδιά ..κσέρω ότι θα είναι δίσκολο αυτό αλλα θα σας μάθω τα πάντα για τα HTML ... Λοιπόν αρχήζουμε... Όταν βλέπουμε κάποια σελίδα στο διαδίκτυο, συνήθως επικεντρώνουμε την προσοχή μας στο λεκτικό ή οπτικό της περιεχόμενο. Σπάνια αναρωτιόμαστε πώς γίνεται και εμφανίζεται το υλικό αυτό στην οθόνη μας. H κοινά διαδεδομένη άποψη είναι πως το internet είναι μια τεράστια βιβλιοθήκη και η εικόνα που έχουν οι περισσότεροι ταυτίζεται με αυτήν του πραγματικού βιβλίου. Υποθέτουμε ίσως πως η σελίδα που βλέπουμε έρχεται στον υπολογιστή μας πάνω-κάτω όπως και η τηλεοπτική εικόνα. Στην πράξη, υπεύθυνος για την εμφάνισή της είναι ο browser μας (φυλλομετρητής: internet explorer, netscape, opera κλπ). Όταν πληκτρολογούμε σε αυτόν κάποιο url (διαδικτυακή διεύθυνση) ή κάνουμε κλικ σε κάποιο Link (υπερσύνδεσμο) τότε συμβαίνουν (περιληπτικά) τα εξής: * Η ονομαστική διεύθυνση που δώσαμε μεταφέρεται ως αίτημα στους servers (διακομιστές) της εταιρίας που μας προσφέρει σύνδεση στο Internet και αυτοί εντοπίζουν σε δικές τους ή άλλες βάσεις δεδομένων την αριθμητική διεύθυνση (IP) που αντιστοιχεί στο όνομα αυτό. * O υπολογιστής μας διασυνδέεται με αυτόν τον server και αρχίζουν να μεταφέρονται προς εμάς τα αναγκαία δεδομένα. * Τα δεδομένα αυτά περιλαμβάνουν: Την περιγραφή δομής της σελίδας, τα περιεχόμενα κείμενα και τις τυχόν εικόνες. * O browser μας συγκεντρώνει τα πιο πάνω στοιχεία και στήνει τη σελίδα στην οθόνη μας, H πρώτη και πιο διαδεδομένη γλώσσα περιγραφής της δομής μια ιστοσελίδας είναι η HTML (HyperText Markup Language). Η γλώσσα αυτή διαφέρει από τις προγραμματιστικές μια που απλά περιγράφει πού βρίσκεται τι και τίποτε παραπάνω. Νεώτερες γλώσσες είτε αυτόνομες είτε εξαρτώμενες από την HTML (όπως η java, η XML, το php ή το Asp) προχωρούν παραπέρα και επιτρέπουν πιο σύνθετη δομή, διαχείριση βάσεων δεδομένων και πολλά άλλα. Σε αυτές τις σελίδες θα προσπαθήσουμε να σας μυήσουμε στον τρόπο δημιουργίας ιστοσελίδων με τη χρήση κώδικα HTML. Υπάρχουν βέβαια πολλά προγράμματα που δημιουργούν σελίδες με απλό και παραστατικό τρόπο. Παρ' όλ' αυτά, η εμβάθυνση στον κώδικα επιτρέπει τη μεγαλύτερη κατανόηση του τί συμβαίνει κι επιτρέπει τη βελτίωση των δημιουργιών μας. To μόνο που θα χρειαστείτε είναι ένας απλός text editor όπως το σημειωματάριο των windows ή το Arachnophilia που χρησιμοποιώ πάντα. Ξεκινάμε με το πρώτο μας μάθημα. Τα υπόλοιπα θα προστίθενται σιγά-σιγά. Καλή δύναμη! ;-) 1. Tags λέμε τις μικρές 'εντολές' που ορίζουν την αρχή και το τέλος μιας λειτουργίας. Περικλείονται σε σύμβολα μικρότερου-μεγαλύτερου: <εντολή>. Όταν το tag κλείνει, περιλαμβάνει επιπλέον και μια κάθετο: </εντολή>. Αυτό είναι όλο... Για παράδειγμα, η παρακάτω σειρά λέει στον φυλλομετρητή να εμφανίζει με έντονα γράμματα (b=bold) τη λέξη 'έντονα' και με πλάγια (i=italics) τη λέξη 'πλάγια': Η γραφή αυτή είναι με κανονικά γράμματα. Μπορώ να έχω <b>έντονα</b> ή και <i>πλάγια</i>. Το αποτέλεσμα θα είναι το εξής: Η γραφή αυτή είναι με κανονικά γράμματα. Μπορώ να έχω έντονα ή και πλάγια. 2. Τα tags μπορούν να περικλείουν άλλα, δεν πρέπει όμως να μπαίνουν διασταυρωμένα. Π.χ. Η δομή τύπου 3 2 1 1 2 3 όπου τα τριάρια περικλείουν τα δυάρια και αυτά με τη σειρά τους τούς άσσους είναι σωστή, όχι όμως και η αυτή: 3 2 1 2 3 1 όπου τα ζεύγη μπερδεύονται. Χρησιμοποιώντας τα πιο πάνω tags μαζί με αυτό που ορίζει την υπογράμμιση (u=underlined) μπορούμε να έχουμε συνδυασμούς όπως: Μπορώ να έχω <i><b>έντονα και πλάγια μαζί</b></i> ή <u><i>πλάγια και υπογραμμισμένα</i></u>. Μας δίνει: Μπορώ να έχω έντονα και πλάγια μαζί ή πλάγια και υπογραμμισμένα. 3. Άλλα βασικά tags, απαραίτητα για τη σελίδα σας είναι τα: * <html> και </html> που ορίζουν την αρχή και το τέλος του κώδικα (της σελίδας) * <head> και </head> που ορίζουν την αρχή και το τέλος της κεφαλίδας όπου ορίζονται δεδομένα που θα δούμε αργότερα. * <title> και </title> που ορίζουν την αρχή και το τέλος του τίτλου της σελίδας (εμφανίζεται στη μπλε μπάρα του φυλλομετρητή). Το ποθετείται μέσα στα tags της κεφαλίδας. * <body> και </body> που ορίζουν την αρχή και το τέλος του 'σώματος' της σελίδας, του χώρου δηλαδή όπου θα υπάρχουν το κείμενο και οι εικόνες σας. 3. Τελειώνοντας, ας δούμε τη δομή μιας απλής σελίδας. Πιστεύω πως δε θα έχετε πρόβλημα να την κατανοήσετε. Σημειώνω πως τα tags παρουσιάζονται με τις κατάλληλες εσοχές γραμμής ώστε να φαίνεται που ανοίγει και που κλείνει το καθένα. Γράψτε τον κώδικα στο σημειωματάριο, αποθηκεύστε τον κάπου στο δίσκο σας με όνομα test.html και κάντε διπλό κλικ στο αρχείο ώστε να το δείτε με τον φυλλομετρητή σας: <html> <head> <title>Η πρώτη μου σελίδα</title> </head> <body> Μπορώ να έχω <i><b>έντονα και πλάγια μαζί</b></i> ή <u><i>πλάγια και υπογραμμισμένα</i></u>. </body> </html> Στη σελίδα αυτή έχω συγκεντρώσει τα περισσότερα από τα διαθέσιμα tags. Σε κάθε γραμμή θα βρείτε τα εξής: * Στην πρώτη στήλη (όπου υπάρχει) αναγράφεται το πεδίο εφαρμογής της εντολής. Το 4.0 σημαίνει πως το tag λειτουργεί σε φυλλομετρητές έκδοσης 4 και μετά. Το NS και τα Ν1 κλπ σημαίνουν πως λειτουργεί μόνον σε NetScape. To ΜS σημαίνει πως λειτουργεί μόνον σε Microsoft Internet Explorer. Όπου δεν αναγράφεται τίποτε, το tag έχει γενική εφαρμογή. * Στη δεύτερη στήλη και με έντονη γραφή, υπάρχει η περιγραφή του tag, * Στην τρίτη, η σύνταξή του. * Στην τέταρτη εμφανίζονται τυχόν σχόλια και διευκρινήσεις. Κάποιες αναγκαίες επεξηγήσεις: * Το σύμβολο ? δηλώνει αριθμό * Τα σύμβολα $ και * δηλώνουν κάποιον αλφαριθμητικό χαρακτήρα (γράμμα) ΒΑΣΙΚΑ ΣΤΟΙΧΕΙΑ Τύπος εγγράφου <HTML></HTML> Ορίζει την αρχή και το τέλος Τίτλος <TITLE></TITLE> Εμφανίζεται στη μπλε μπάρα του φυλλομετρητή. Πρέπει να βρίσκεται στην επιφυλλίδα Επιφυλλίδα <HEAD></HEAD> Εδώ μπαίνει ο τίτλος, περιγραφή της σελίδας, τα styles και η java Bασικός Κορμός <BODY></BODY> το κύριο υλικό της σελίδας ΟΡΙΣΜΟΣ ΔΟΜΗΣ Επικεφαλλίδα <H?></H?> Δέχεται 6 ορισμούς: H1 ως και H6 Στοίχιση επικεφαλλίδας <H? ALIGN=LEFT|CENTER|RIGHT></H?> Yποδιαίρεση κειμένου <DIV></DIV> Στοίχιση υποδιαίρεσης <DIV ALIGN=LEFT|RIGHT|CENTER|JUSTIFY></DIV> 4.0 Καθορισμένο περιεχόμενο <SPAN></SPAN> Παράθεση σημείωσης <BLOCKQUOTE></BLOCKQUOTE> Συνήθως με εσοχή παραγράφου 4.0 Σημείωση <Q></Q> "Για σύντομες σημειώσεις" Έμφαση <EM></EM> Συνήθως εμφανίζει πλάγια (italics) γράμματα Έντονη έμφαση <STRONG></STRONG> Συνήθως εμφανίζει έντονα (bold) γράμματα Κώδικας <CODE></CODE> Για παράθεση γραμμών κώδικα Δείγμα <SAMP></SAMP> Είσοδος από πληκτρολόγιο <KBD></KBD> Μεταβλητή <VAR></VAR> Ορισμός <DFN></DFN> Δε χρησιμοποιείται ευρέως Διεύθυνση συγγραφέα <ADDRESS></ADDRESS> Μεγάλα γράμματα <BIG></BIG> Μικρά γράμματα <SMALL></SMALL> 4.0 Παρεμβολή <INS></INS> Σημειώνει τις προσθήκες σε νέα έκδοση 4.0 Ώρα αλλαγής <INS DATETIME=":::"></INS> 4.0 Σχόλια <INS CITE="URL"></INS> 4.0 Διαγραφή <DEL></DEL> Σημειώνει τις διαγραφές σε νέα έκδοση 4.0 Ώρα διαγραφής <DEL DATETIME=":::"></DEL> 4.0 Σχόλια διαγραφής <DEL CITE="URL"></DEL> 4.0 Αρκτικόλεξο <ACRONYM></ACRONYM> 4.0 Σύντμηση <ABBR></ABBR> ΜΟΡΦΟΠΟΙΗΣΗ ΚΕΙΜΕΝΟΥ Έντονη γραφή <B></B> Δοκιμή Πλάγια γραφή <I></I> Δοκιμή 4.0 Υπογράμμιση <U></U> Δοκιμή Διαγραφή <STRIKE></STRIKE> Δοκιμή 4.0 Διαγραφή <S></S> Δοκιμή Εκθέτης <SUP></SUP> ΒάσηΔοκιμή Δείκτης <SUB></SUB> ΒάσηΔοκιμή Γραφομηχανή <TT></TT> Δοκιμή Προμορφοποιημένο <PRE></PRE> Εμφανίζει τα κενά διαστήματα όπως έχουν γραφεί Πλάτος προμορφοποιημένου <PRE WIDTH=?></PRE> Σε χαρακτήρες Στοίχιση στο κέντρο <CENTER></CENTER> Στη θέση του χρησιμοποιείται πλέον το <DIV ALIGN="CENTER"></DIV> N1 Αναβοσβήσιμο <BLINK></BLINK> Δοκιμή Μέγεθος γραμμάτων <FONT SIZE=?></FONT> Με τιμές από 1 ως και 7 Αλλαγή μεγέθους γραμμάτων <FONT SIZE="+|-?"></FONT> Χρώμα γραμμάτων <FONT COLOR="#$$$$$$"></FONT> Το χρώμα ορίζεται με τρεις (διψήφιους) δεκαεξαδικούς αριθμούς 4.0 Επιλογή γραμματοσειράς <FONT FACE="***"></FONT> N4 Επιλογή μεγέθους <FONT POINT-SIZE=?></FONT> N4 Βάρος γραμμάτων <FONT WEIGHT=?></FONT> 4.0 Βασικό μέγεθος γραμμάτων <BASEFONT SIZE=?> Με τιμές από 1 ως και 7 και προεπιλογή το 3. Ισχύει για όλη τη σελίδα. MS Κινούμενο κείμενο <MARQUEE></MARQUEE> Δοκιμή ΤΟΠΟΘΕΤΗΣΗ ΣΤΟΙΧΕΙΩΝ ΣΤΗ ΣΕΛΙΔΑ N3 Πολλές στήλες <MULTICOL COLS=?></MULTICOL> N3 Απόσταση (διάκενο) στηλών <MULTICOL GUTTER=?></MULTICOL> N3 Πλάτος στήλης <MULTICOL WIDTH=?></MULTICOL> N3 Διαχωριστής <SPACER> N3 Είδος διαχωριστή <SPACER TYPE=HORIZONTAL|VERTICAL|BLOCK> N3 Μέγεθος διαχωριστή <SPACER SIZE=?> N3 Διαστάσεις διαχωριστή <SPACER WIDTH=? HEIGHT=?> N3 Στοίχιση διαχωριστή <SPACER ALIGN=LEFT|RIGHT|CENTER> N4 Επίπεδο (layer) <LAYER></LAYER> N4 Όνομα επιπέδου <LAYER ID="***"></LAYER> N4 Θέση επιπέδου <LAYER LEFT=? TOP=?></LAYER> N4 Σχετική θέση επιπέδου <LAYER PAGEX=? PAGEY=?></LAYER> N4 Αρχείο προέλευσης επιπέδου <LAYER SRC="***"></LAYER> N4 Σειρά επικάλλυψης <LAYER Z-INDEX=?></LAYER> N4 Θέση επικάλλυψης <LAYER ABOVE="***" BELOW="***"></LAYER> N4 Διαστάσεις επιπέδου <LAYER HEIGHT=? WIDTH=?></LAYER> N4 Διαδρομή επιπέδου <LAYER CLIP=,,,></LAYER> N4 Εμφάνιση ή μη του επιπέδου <LAYER VISIBILITY=SHOW|HIDDEN|INHERIT></LAYER> N4 Φόντο επιπέδου <LAYER BACKGROUND="$$$$$$"></LAYER> N4 Χρώμα επιπέδου <LAYER BGCOLOR="$$$$$$"></LAYER> N4 Εσωτερικό επίπεδο <ILAYER></ILAYER> Δέχεται τις ίδιες παραμέτρους με το LAYER N4 Εναλακτικό περιεχόμενο <NOLAYER></NOLAYER> Imagemap ΣΥΝΔΕΣΜΟΙ, ΓΡΑΦΙΚΑ ΚΑΙ ΗΧΟΣ Συνδεσμος-παραπομπή σε διεύθυνση <A HREF="URL"></A> Παραπομπή σε σημείο εγγράφου <A HREF="URL#***"></A> Αν πρόκειται για άλλο έγγραφο <A HREF="#***"></A> Αν πρόκειται για το τρέχον έγγραφο 4.0 Παράθυρο όπου θα ανοίξει ο σύνδεσμος <A HREF="URL" TARGET="***"></A> 4.0 Ενέργεια με το κλικ <A HREF="URL" ONCLICK="***"></A> Javascript 4.0 Ενέργεια όταν περάσει το ποντίκι από πάνω <A HREF="URL" ONMOUSEOVER="***"></A> Javascript 4.0 Ενέργεια όταν φύγει το ποντίκι από πάνω <A HREF="URL" ONMOUSEOUT="***"></A> Javascript Σύνδεσμος για αποστολή email <A HREF="mailto:@"></A> N, MS Καθορισμός τίτλου για email <A HREF="mailto:@?SUBJECT=***"></A> Πρέπει να μπει ? πρίν από τη λέξη SUBJECT Ορισμός θέσης για σύνδεσμο <A NAME="***"></A> Για χρήση με την Παραπομπή (βλέπε παραπάνω) Εμφάνιση εικόνας <IMG SRC="URL"> Στοίχιση εικόνας <IMG SRC="URL" ALIGN=TOP|BOTTOM|MIDDLE|LEFT|RIGHT> N1 Στοίχιση εικόνας σε σχέση με το κείμενο <IMG SRC="URL" ALIGN=TEXTTOP|ABSMIDDLE|BASELINE|ABSBOTTOM> Εναλλακτικό κείμενο αντί της εικόνας <IMG SRC="URL" ALT="***"> Αν η εικόνα δεν εμφανιστεί Διαστάσεις εικόνας <IMG SRC="URL" WIDTH=? HEIGHT=?> Σε pixels <IMG SRC="URL" WIDTH=% HEIGHT=%> Ως ποσοστό των διαστάσεων της σελίδας Πλαίσιο εικόνας <IMG SRC="URL" BORDER=?> Σε pixels Κενός χώρος γύρω από την εικόνα <IMG SRC="URL" HSPACE=? VSPACE=?> Σε pixels N1 Εναλλακτική εικόνα χαμηλής ανάλυσης <IMG SRC="URL" LOWSRC="URL"> Συνήθως ασπρόμαυρη. Εμφανίζεται πρώτη και επικαλλύπτεται από την κανονική. Χάρτης εικόνας με συνδέσμους <IMG SRC="URL" ISMAP> Απαιτεί script <IMG SRC="URL" USEMAP="URL"> MS Video Clip <IMG DYNSRC="***" START="***" LOOP=?> MS Ήχος <BGSOUND SRC="***" LOOP=?|INFINITE> Χάρτης εικόνας χρήστη <MAP NAME="***"></MAP> Περιγραφή χάρτη Τμήμα χάρτη <AREA SHAPE="DEFAULT|RECT|CIRCLE|POLY" COORDS=",,," HREF="URL"|NOHREF> N1 Ανανέωση περιεχομένου ή μεταπήδηση σε άλλη σελίδα <META HTTP-EQUIV="Refresh" CONTENT="χρόνος σε δευτερόλεπτα; URL=ονομασία σελίδας"> Μπαίνει μεταξύ <head> και </head>. Π.χ. <meta http-equiv="refresh" content="10;URL=index.html"> N2 Ενσωματωμένο αντικείμενο <EMBED SRC="URL"> Π.χ. κάποιο flash animation N2 Μέγεθος αντικειμένου <EMBED SRC="URL" WIDTH=? HEIGHT=?> 4.0 Αντικείμενο <OBJECT></OBJECT> 4.0 Παράμετροι <PARAM> ΔΙΑΧΩΡΙΣΤΕΣ Παράγραφος <P></P> Δεν είναι απαραίτητο το κλείσιμο του tag Στοίχιση παραγράφου <P ALIGN=LEFT|CENTER|RIGHT></P> N Πλήρης στοίχιση παραγράφου <P ALIGN=JUSTIFY></P> Αλλαγή σειράς <BR> Χωρίς αναδίπλωση <BR CLEAR=LEFT|RIGHT|ALL> Οριζόντια γραμμή <HR> Στοίχιση γραμμής <HR ALIGN=LEFT|RIGHT|CENTER> Πάχος γραμμής <HR SIZE=?> Σε pixels Πλάτος γραμμής <HR WIDTH=?> Σε pixels Πλάτος γραμμής <HR WIDTH="%"> Ως ποσοστό του πλάτους σελίδας Συμπαγής γραμμή <HR NOSHADE> Δίχως την τριδιάστατη όψη N1 Χωρίς αλλαγές σειράς <NOBR></NOBR> N1 Αλλαγή γραμμής <WBR> ΛΙΣΤΕΣ Απλή λίστα <UL><LI></UL> To <LI> μπαίνει μπροστά από κάθε σειρά Συμπαγής λίστα <UL COMPACT></UL> Τύπος κουκίδας <UL TYPE=DISC|CIRCLE|SQUARE> Για όλη τη λίστα Τύπος κουκίδας <LI TYPE=DISC|CIRCLE|SQUARE> Για τη σειρά και τις επόμενες Αριθμημένη λίστα <OL><LI></OL> To <LI> μπαίνει μπροστά από κάθε σειρά Συμπαγής αριθμημένη λίστα <OL COMPACT></OL> Μορφή αρίθμησης <OL TYPE=A|a|I|i|1> Για όλη τη λίστα Μορφή αρίθμησης <LI TYPE=A|a|I|i|1> Για τη σειρά και τις επόμενες Αριθμός έναρξης αρίθμησης <OL START=?> Για όλη τη λίστα Αριθμός έναρξης αρίθμησης <LI VALUE=?> Για τη σειρά και τις επόμενες Λίστα επεξηγήσεων <DL><DT><DD></DL> (<DT>=όρος, <DD>=επεξήγηση) Συμπαγής λίστα επεξηγήσεων <DL COMPACT></DL> Λίστα επιλογών <MENU><LI></MENU> Πριν από κάθε σειρά Συμπαγής λίστα επιλογών <MENU COMPACT></MENU> Λίστα περιεχομένων <DIR><LI></DIR> Πριν από κάθε σειρά Συμπαγής λίστα περιεχομένων <DIR COMPACT></DIR> ΦΟΝΤΟ ΚΑΙ ΧΡΩΜΑΤΑ Επαναλαμβανόμενη εικόνα φόντου <BODY BACKGROUND="URL"> MS Υδατογράφημα <BODY BGPROPERTIES="FIXED"> Χρώμα φόντου <BODY BGCOLOR="#$$$$$$"> (order is red/green/blue) Βασικό χρώμα κειμένου <BODY TEXT="#$$$$$$"> Χρώμα συνδέσμων <BODY LINK="#$$$$$$"> Χρώμα συνδέσμων που έχουμε επισκεφτεί <BODY VLINK="#$$$$$$"> Ενεργός σύνδεσμος <BODY ALINK="#$$$$$$"> ΕΙΔΙΚΟΙ ΧΑΡΑΚΤΗΡΕΣ ειδικοί χαρακτήρες &#?; όπου ? είναι o κωδικός ISO 8859-1 < < > > & & " " Registered TM ® ® Registered TM ® ® Copyright © © Copyright © © Κενό διάστημα (δεν επιτρέπει αναδίπλωση) ΦΟΡΜΕΣ Ορισμός φόρμας <FORM ACTION="URL" METHOD=GET|POST></FORM> 4.0 'Ανέβασμα' αρχείου <FORM ENCTYPE="multipart/form-data"></FORM> Πεδίο εισαγωγής δεδομένων <INPUT TYPE="TEXT|PASSWORD|CHECKBOX|RADIO| FILE|BUTTON|IMAGE|HIDDEN|SUBMIT|RESET"> Όνομα πεδίου <INPUT NAME="***"> Τιμή πεδίου <INPUT VALUE="***"> Τσεκαρισμα <INPUT CHECKED> Για τετράγωνα και κυκλικά πεδία τσεκαρίσματος Μέγεθος πεδίου <INPUT SIZE=?> Σε χαρακτήρες Μέγιστο μέγεθος <INPUT MAXLENGTH=?> Σε χαρακτήρες 4.0 Κουμπί <BUTTON></BUTTON> 4.0 Όνομα κουμπιού <BUTTON NAME="***"></BUTTON> 4.0 Τύπος κουμπιού <BUTTON TYPE="SUBMIT|RESET|BUTTON"></BUTTON> 4.0 Προεπιλεγμένη τιμή <BUTTON VALUE="***"></BUTTON> 4.0 Ετικέτα <LABEL></LABEL> 4.0 Ετικέτα επιλοής <LABEL FOR="***"></LABEL> Λίστα επιλογής <SELECT></SELECT> Όνομα λίστας <SELECT NAME="***"></SELECT> Αριθμός επιλογών <SELECT SIZE=?></SELECT> Πολλαπλή επιλογή <SELECT MULTIPLE> Για περισσότερες από μία επιλογές Επιλογή <OPTION> Διαθέσιμα στοιχεία προς επιλογή Προεπιλογή <OPTION SELECTED> Τιμή επιλογής <OPTION VALUE="***"> 4.0 Ομαδοποίηση επιλογών <OPTGROUP LABEL="***"></OPTGROUP> Μέγεθος πεδίου εισαγωγής κειμένου <TEXTAREA ROWS=? COLS=?></TEXTAREA> Ονομασία πεδίου εισαγωγής κειμένου <TEXTAREA NAME="***"></TEXTAREA> N2 Αναδίπλωση κειμένου <TEXTAREA WRAP=OFF|HARD|SOFT></TEXTAREA> 4.0 Μέλη ομάδας <FIELDSET></FIELDSET> 4.0 Υπόμνημα <LEGEND></LEGEND> 4.0 Στοίχιση υπομνήματος <LEGEND ALIGN="TOP|BOTTOM|LEFT|RIGHT"></LEGEND> ΠΙΝΑΚΕΣ Ορισμός πίνακα <TABLE></TABLE> 4.0 Στοίχιση πίνακα <TABLE ALIGN=LEFT|RIGHT|CENTER> Περίγραμμα πίνακα <TABLE BORDER></TABLE> Υπαρκτό ή μη Περίγραμμα πίνακα <TABLE BORDER=?></TABLE> Oρισμός πάχους Απόσταση (διάκενο) κελιών <TABLE CELLSPACING=?> Εσωτερικό περιθώριο κελιών <TABLE CELLPADDING=?> Επιθυμητό πλάτος <TABLE WIDTH=?> Σε pixels Ποσοστό πλάτους <TABLE WIDTH=%> Ποσοστό επί του πλάτους της σελίδας 4.0 Χρώμα πίνακα <TABLE BGCOLOR="$$$$$$"></TABLE> 4.0 Πλαίσιο πίνακα <TABLE FRAME=VOID|ABOVE|BELOW|HSIDES|LHS|RHS| VSIDES|BOX|BORDER></TABLE> 4.0 Χάρακας πίνακα <TABLE RULES=NONE|GROUPS|ROWS|COLS|ALL></TABLE> MS Χρώμα περιγράμματος <TABLE BORDERCOLOR="$$$$$$"></TABLE> MS Σκούρο περίγραμμα <TABLE BORDERCOLORDARK="$$$$$$"></TABLE> MS Ανοιχτόχρωμο περίγραμμα <TABLE BORDERCOLORLIGHT="$$$$$$"></TABLE> Σειρά πίνακα <TR></TR> Στοίχιση σειράς πίνακα <TR ALIGN=LEFT|RIGHT|CENTER|MIDDLE|BOTTOM> Κελί πίνακα <TD></TD> Πρέπει να εμπεριέχεται σε ορισμό σειράς Στοίχιση κελιού <TD ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM> Κείμενο κελιού χωρίς αναδίπλωση <TD NOWRAP> Επέκταση σε στήλες <TD COLSPAN=?> Επέκταση σε σειρές <TD ROWSPAN=?> 4.0 Επιθυμητό πλάτος κελιού <TD WIDTH=?> Σε pixels N3 Πλάτος κελιού σε ποσοστό <TD WIDTH="%"> Επί του πλάτους του πίνακα 4.0 Χρώμα κελιού <TD BGCOLOR="#$$$$$$"> Επικεφαλλίδα στήλης <TH></TH> Έντονα και με στοίχιση στο κέντρο Στοίχιση επικεφαλλίδας <TH ALIGN=LEFT|RIGHT|CENTER|MIDDLE|BOTTOM> Επικεφαλίδα δίχως αναδίπλωση <TH NOWRAP> Επέκταση επικεφαλλίδας σε στήλες <TH COLSPAN=?> Επέκταση επικεφαλλίδας σε σειρές <TH ROWSPAN=?> 4.0 Επιθυμητό πλάτος επικεφαλλίδας <TH WIDTH=?> Σε pixels N3 Πλάτος σε ποσοστό <TH WIDTH="%"> Επί του πλάτους του πίνακα 4.0 Χρώμα κελιού επικεφαλλίδας <TH BGCOLOR="#$$$$$$"> 4.0 Σώμα πίνακα <TBODY> 4.0 Υποφυλλίδα πίνακα <TFOOT></TFOOT> Προηγείται του THEAD> 4.0 Επιφυλλίδα πίνακα <THEAD></THEAD> Επεξήγηση πίνακα <CAPTION></CAPTION> Στοίχιση επεξήγησης <CAPTION ALIGN=TOP|BOTTOM|LEFT|RIGHT> 4.0 Στήλη <COL></COL> 4.0 Επέκταση στηλών <COL SPAN=?></COL> 4.0 Πλάτος στήλης <COL WIDTH=?></COL> 4.0 Πλάτος στήλης σε ποσοστό <COL WIDTH="%"></COL> 4.0 Ομάδα στηλών <COLGROUP></COLGROUP> 4.0 Επέκταση ομάδας στηλών <COLGROUP SPAN=?></COLGROUP> 4.0 Πλάτος ομάδας <COLGROUP WIDTH=?></COLGROUP> 4.0 Πλάτος ομάδας σε ποσοστό <COLGROUP WIDTH="%"></COLGROUP> ΠΛΑΙΣΙΑ (Frames) 4.0 Σελίδα με πλαίσια <FRAMESET></FRAMESET> Αντί του <BODY> 4.0 Ύψος σειρών <FRAMESET ROWS=,,,></FRAMESET> Σε pixels ή %) 4.0 Ύψος σειρών <FRAMESET ROWS=*></FRAMESET> * = Σχετικό μέγεθος. Συνήθως όσο περισσεύει. 4.0 Πλάτος στηλών <FRAMESET COLS=,,,></FRAMESET> (pixels or %) 4.0 Πλάτος στηλών <FRAMESET COLS=*></FRAMESET> * = Σχετικό μέγεθος. Συνήθως όσο περισσεύει. 4.0 Περίγραμμα <FRAMESET FRAMEBORDER="yes|no"></FRAMESET> 4.0 Πλάτος περιγράμματος <FRAMESET BORDER=?></FRAMESET> 4.0 Χρώμα περιγράμματος <FRAMESET BORDERCOLOR="#$$$$$$"></FRAMESET> N3 Απόσταση (διάκενο) πλαισίων <FRAMESET FRAMESPACING=?></FRAMESET> 4.0 Ορισμός πλαισίου <FRAME> Περιεχόμενα μεμονωμένου πλαισίου 4.0 Έγγραφο που θα εμφανιστεί <FRAME SRC="URL"> 4.0 Όνομα πλαισίου <FRAME NAME="***"|_blank|_self|_parent|_top> 4.0 Πλάτος περιθωρίου <FRAME MARGINWIDTH=?> Αριτερά και δεξιά 4.0 Ύψος περιθωρίου <FRAME MARGINHEIGHT=?> Πάνω και κάτω 4.0 Εμφάνιση μπάρας κύλισης <FRAME SCROLLING="YES|NO|AUTO"> 4.0 Σταθερό μέγεθος <FRAME NORESIZE> 4.0 Περίγραμμα πλαισίου <FRAME FRAMEBORDER="yes|no"> 4.0 Χρώμα περιγράμματος <FRAME BORDERCOLOR="#$$$$$$"> 4.0 Περιεχόμενο εκτός πλαισίων <NOFRAMES></NOFRAMES> για φυλλομετρητές που δεν υποστηρίζουν πλαίσια 4.0 Εσωτερικό πλαίσιο <IFRAME></IFRAME> Όμοιες παράμετροι με το FRAME 4.0 Διαστάσεις <IFRAME WIDTH=? HEIGHT=?></IFRAME> 4.0 Διαστάσεις <IFRAME WIDTH="%" HEIGHT="%"></IFRAME> ΠΡΟΓΡΑΜΜΑΤΙΣΜΟΣ ΚΑΙ JAVA Πρόγραμμα <SCRIPT></SCRIPT> <SCRIPT SRC="URL"></SCRIPT> Είδος προγράμματος <SCRIPT TYPE="***"></SCRIPT> Γλώσσα προγράμματος <SCRIPT LANGUAGE="***"></SCRIPT> 4.0 Άλλο περιεχόμενο <NOSCRIPT></NOSCRIPT> Αν δεν υποστηρίζονται scripts Applet <APPLET></APPLET> Όνομα Applet <APPLET CODE="***"> Παράμετροι Applet <APPLET PARAM NAME="***"> Θέση Applet <APPLET CODEBASE="URL"> Ταυτότητα Applet <APPLET NAME="***"> Για αναφορά-παραπομπές Εναλλακτικό κείμενο <APPLET ALT="***"> Αν δεν υποστηρίζεται java Στοίχιση Applet <APPLET ALIGN="LEFT|RIGHT|CENTER"> Μέγεθος Applet <APPLET WIDTH=? HEIGHT=?> Σε pixels Απόσταση Applet από άλλα στοιχεία <APPLET HSPACE=? VSPACE=?> Σε pixels N4 Server Script <SERVER></SERVER> ΔΙΑΦΟΡΑ Σχόλιο <!-- *** --> Δεν εμφανίζεται. Πρόλογος <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> Κατάλογος αναζήτησης <ISINDEX> Αποστολή αναζήτησης <A HREF="URL?***"></a> Με κανονικό ? URL του αρχείου <BASE HREF="URL"> Πρέπει να βρίσκεται στην επικεφαλλίδα 4.0 Παράθυρο όπου θα κατευθύνονται οι σύνδεσμοι <BASE TARGET="***"> Πρέπει να βρίσκεται στην επικεφαλλίδα Σχετική σελίδα <LINK REV="***" REL="***" HREF="URL"> Πρέπει να βρίσκεται στην επικεφαλλίδα N4 Συνδεδεμένο αρχείο <LINK TYPE="***" SRC="***"></LINK> Meta Πληροφορίες <META> Πρέπει να βρίσκεται στην επικεφαλλίδα Ορισμός στυλ <STYLE></STYLE> Καλή επυτηχία.. Quote
Pinaepple Posted October 7, 2010 Posted October 7, 2010 dwse credits. dn fenete poli wreo gt ta title ine opos nane k apla ekanes ena copy paste. Quote
HellRanger Posted October 7, 2010 Posted October 7, 2010 Είσαι σε λάθω section το σωστό είναι Guides & Tutorials. Και αν κοιτούσες λίγο θα έβλεπες πως έχει γίνει ήδη Share! Request για μετακίνηση στο σωστό. Quote
LioNtaraki Posted October 7, 2010 Posted October 7, 2010 name ilikrinis diabasa mexri eki pou arxizoune ta kanonika codes Warrior ti ise leksiko ton html brabo pantos tora blepo parakato <STYLE></STYLE> pos to alazo mporis na me pis exo ucoz kai perni mono html kai thelo na alakso ta style alla den ta katafera exo kaim ena site me diskw kai thelo na matho apo tetio index.php Quote
Pinaepple Posted October 7, 2010 Posted October 7, 2010 name ilikrinis diabasa mexri eki pou arxizoune ta kanonika codes Warrior ti ise leksiko ton html brabo pantos tora blepo parakato <STYLE></STYLE> pos to alazo mporis na me pis exo ucoz kai perni mono html kai thelo na alakso ta style alla den ta katafera exo kaim ena site me diskw kai thelo na matho apo tetio index.php an 8es na ma8is kl html edw Quote
MIMIS400 Posted October 7, 2010 Posted October 7, 2010 kl min mou peis oti ekatses kai ta egraspses ola auta monos sou ..... Pffff para poly kalo guide gj kai apo emena Quote
kokkinidisjim Posted October 7, 2010 Posted October 7, 2010 ama kathises ke ta egrapses ola afta mono s prepi na s pire poli ora :P gj oreo guide... Quote
Warrior Posted October 8, 2010 Author Posted October 8, 2010 Παιδιά γιατί με κρίνετε ...ασχολούμε με πληροφορική εδώ και 3 χρόνια φυσικό είναι να ξέρω απο HTML...και θέλω να μιραστώ ότι γνωρίζω μαζί σας... Quote
Pinaepple Posted October 8, 2010 Posted October 8, 2010 Παιδιά γιατί με κρίνετε ...ασχολούμε με πληροφορική εδώ και 3 χρόνια φυσικό είναι να ξέρω απο HTML...και θέλω να μιραστώ ότι γνωρίζω μαζί σας... lipon ime 99% sigouros oti dn ine diko s. καλησπέρα παιδιά ..κσέρω ότι θα είναι δίσκολο αυτό αλλα θα σας μάθω τα πάντα για τα HTML ... Λοιπόν αρχήζουμε... exis pola la8i edw k or8ografika k apo ola eno mesa sto kimeno tpt Quote
Nosti21 Posted October 8, 2010 Posted October 8, 2010 lipon ime 99% sigouros oti dn ine diko s. καλησπέρα παιδιά ..κσέρω ότι θα είναι δίσκολο αυτό αλλα θα σας μάθω τα πάντα για τα HTML ... Λοιπόν αρχήζουμε... exis pola la8i edw k or8ografika k apo ola eno mesa sto kimeno tpt ++++++++++++ se afto. tixeo dn nomizo. Παιδιά γιατί με κρίνετε ...ασχολούμε με πληροφορική εδώ και 3 χρόνια φυσικό είναι να ξέρω απο HTML...και θέλω να μιραστώ ότι γνωρίζω μαζί σας... ara3e dn se katakrinoume. apla sou sxoliazoume to topic. :S Quote
Pinaepple Posted October 8, 2010 Posted October 8, 2010 tixeo dn nomizo.ara3e dn se katakrinoume. apla sou sxoliazoume to topic. :S aplos gia na stamatisi ayto bale Credits: Quote
MitsaKoSs Posted October 9, 2010 Posted October 9, 2010 Credits : http://www.stratari.gr/html/index.html Me tetia or8ografia pou exeis ,imouna sigouros oti dn to exeis grapsei esu. Quote
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.