[GR]HTML 100% μαθήματα..

Warrior · 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

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 ® ®

Κενό διάστημα (δεν επιτρέπει αναδίπλωση)

ΦΟΡΜΕΣ

Ορισμός φόρμας <FORM ACTION="URL" METHOD=GET|POST></FORM>

4.0 'Ανέβασμα' αρχείου <FORM ENCTYPE="multipart/form-data"></FORM>

Πεδίο εισαγωγής δεδομένων <INPUT TYPE="TEXT|PASSWORD|CHECKBOX|RADIO|

Όνομα πεδίου <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>

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 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>

Καλή επυτηχία..

Pinaepple · October 7, 2010

dwse credits.

dn fenete poli wreo gt ta title ine opos nane

k apla ekanes ena copy paste.

HellRanger · October 7, 2010

Είσαι σε λάθω section το σωστό είναι Guides & Tutorials. Και αν κοιτούσες λίγο θα έβλεπες πως έχει γίνει ήδη Share!

Request για μετακίνηση στο σωστό.

LioNtaraki · 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

Pinaepple · 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

Nosti21 · October 7, 2010

dn exw logia. wow.

ta 3erw idi afta ;)

MIMIS400 · 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

kokkinidisjim · October 7, 2010

ama kathises ke ta egrapses ola afta mono s prepi na s pire poli ora :P gj oreo guide...

Warrior · October 8, 2010

Παιδιά γιατί με κρίνετε ...ασχολούμε με πληροφορική εδώ και 3 χρόνια φυσικό είναι να ξέρω απο HTML...και θέλω να μιραστώ ότι γνωρίζω μαζί σας...

Pinaepple · 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

Nosti21 · 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

Pinaepple · October 8, 2010

tixeo dn nomizo.ara3e dn se katakrinoume. apla sou sxoliazoume to topic. :S

aplos gia na stamatisi ayto

bale Credits:

Warrior · October 9, 2010

Credits : Me.

MitsaKoSs · October 9, 2010

Credits : http://www.stratari.gr/html/index.html

Me tetia or8ografia pou exeis ,imouna sigouros oti dn to exeis grapsei esu.

[GR]HTML 100% μαθήματα..

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Posts

Topics