ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML
H HTML αποτελείται από ετικέτες μέσα στα σύμβολα <> που καθορίζουν την εμφάνιση και τις ιδιότητες του κειμένου. Υπάρχουν δύο είδη ετικετών:
Διπλές ετικέτες: εμφανίζονται κατά ζεύγη
<Όνομα ετικέτας> Κείμενο </Όνομα ετικέτας>
π.χ. <H1> Κείμενο </Η1>
Απλές ετικέτες: δεν αποτελούν ζευγάρι
<Όνομα ετικέτας>
π.χ. <HR> που δημιουργεί μία οριζόντια γραμμή
Προσοχή! Όλες οι ετικέτες πρέπει να γράφονται στα Αγγλικά
Δομή μιας σελίδας HTML
<HTML>
<HEAD>
<TITLE> Τίτλος της σελίδας </TITLE>
</HEAD>
<BODY>
Περιεχόμενο σελίδας
</BODY>
Πώς δημιουργούμε έγγραφο HTML
Δημιουργούμε το έγγραφο HTML σε έναν απλό κειμενογράφο π.χ. Σημειωματάριο.
Δημιουργία της 1ης ιστοσελίδας
Γράφουμε τον παρακάτω κώδικα στο Σημειωματάριο
Αποθηκεύουμε σαν index.html
Εκτελούμε το αρχείο
<HTML>
<HEAD>
<TITLE> Η 1η μου ιστοσελίδα </TITLE>
</HEAD>
<BODY>
<H1>Τα Μεγαλύτερα γράμματα </H1>
<H2> Λιγότερο μεγάλα γράμματα </H2>
<H3> Μεγάλα γράμματα </H3>
<H4> Λίγο μικρά γράμματα </H4>
<H5> Λιγότερο μικρά γράμματα </H5>
<H6> Τα μικρότερα γράμματα </H6>
</BODY>
</HTML>
Ιδιότητες ετικετών
Πολλές ετικέτες έχουν ιδιότητες .
Οι ιδιότητες (attributes) των ετικετών είναι τιμές που δίνουν στην ετικέτα διάφορα χαρακτηριστικά. Κάθε μια από αυτές τις τιμές επιδρά διαφορετικά στην εμφάνιση ή την λειτουργία των ετικετών. Μια ιδιότητα μπαίνει αμέσως μετά το όνομα της ετικέτας και αποτελείται από το όνομα της και μια τιμή μέσα σε διπλά εισαγωγικά.
<Όνομα ετικέτας Ιδιότητα1=”Τιμή” Ιδιότητα2=”Τιμή”…..>
Π.χ. Η ετικέτα <HR> έχει τις ιδιότητες SIZE , WIDTH, ALIGN
Ας συμπληρώσουμε στην παραπάνω ιστοσελίδα κάτω από το <Η2> την
<HR> και μετά την
<HR SIZE=7 WIDTH=30% ALIGN=CENTER NOSHADE>
Σημαντικές ετικέτες
Εισαγωγή εικόνας:
Εισαγωγή συνδέσμου (link): <A HREF=”Η δ/νση του site “> Κείμενο </A>
Αναζητούμε και αποθηκεύουμε (με όνομα image.gif) στον ίδιο φάκελο με το έγγραφο html, μια εικόνα
Ας συμπληρώσουμε στην ιστοσελίδα μας κάτω από το <Η6> τις :
<IMG SRC=”image.gif”>
<A HREF=”http://www.sch.gr “> Πανελλήνιο Σχολικό Δίκτο </A>
Πολύ καλό site για την εκμάθηση της HTML
http://www.wlearn.gr/index.php/html-html-33
