ΣΧΕΔΙΑΣΜΟΣ & ΑΝΑΠΤΥΞΗ ΙΣΤΟΤΟΠΩΝ
Ο κώδικας HTML
Τρόπος εργασίας
Τι είναι html; (έιτς-τι-εμ-ελ)
Είναι τα αρχικά των λέξεων HyperText Markup Language και είναι η πιο απλή γλώσσα για το κτίσιμο ιστοσελίδων
Τι είναι τα tags (ετικέτες);
Είναι οι βασικότερες εντολές της html που μας δίνει την αρχή και το τέλος κάποιας μορφοποίησης ιστοσελίδας.
Ποια είναι τα σημαντικότερα tags (ετικέτες);
Τρόπος εργασίας
- Γράφουμε τον κώδικα της ιστοσελίδας με το συντάκτη κειμένου
- Αποθηκεύουμε με την κατάληξη html (ως ιστοσελίδα)το αρχείο του κώδικα
- Ανοίγουμε το αρχείο του κώδικα με το φυλλομετρητή για να δούμε το αποτέλεσμα.
Τι είναι html; (έιτς-τι-εμ-ελ)
Είναι τα αρχικά των λέξεων HyperText Markup Language και είναι η πιο απλή γλώσσα για το κτίσιμο ιστοσελίδων
Τι είναι τα tags (ετικέτες);
Είναι οι βασικότερες εντολές της html που μας δίνει την αρχή και το τέλος κάποιας μορφοποίησης ιστοσελίδας.
Ποια είναι τα σημαντικότερα tags (ετικέτες);
- <HTML> … </HTML> που καθορίζουν τα όρια μιας ιστοσελίδας
- <HEAD> … </HEAD> που δίνουν επικεφαλίδα σε μία ιστοσελίδα
- <BODY> … </BODY> που είναι το σώμα μίας ιστοσελίδας
Παράδειγμα σε κώδικα html
Παρατηρούμε ότι στον κώδικα, περιλαμβάνονται μερικά σύμβολα: < , >, / , ! καθώς και μερικές λέξεις/ετικέτες (html, head, body, title).
Όλα εδώ έχουν τη σημασία τους.
Όταν μια γραμμή του κώδικα ξεκινάει με <! Και τελειώνει με > σημαίνει ότι ό,τι είναι γραμμένο μέσα σε αυτό, αποτελεί σχόλια και δεν εκτελείται από τον κώδικα. Άρα είναι γραμμένο σαν εξήγηση στον προγραμματιστή. Αυτός είναι ένας χρήσιμος τρόπος για να γράφουμε τις σημειώσεις μας για να καταλάβουμε κάτι την επόμενη φορά που θα δούμε τον κώδικα, πχ. τι κάνει αυτό το πρόγραμμα κλπ.
Επίσης παρατηρούμε ότι οι ομάδες ετικετών εμφανίζονται πάντα μέσα σε γωνίες <…>, και μάλιστα όταν κλείνει η ομάδα, η ετικέτα βρίσκεται μέσα σε γωνίες αλλά και την πλάγια </…>.
Άρα η / μετά την γωνιά, οριοθετεί την λήξη της ετικέτας.
Π.χ. <body> κείμενο </body>
Όλα εδώ έχουν τη σημασία τους.
Όταν μια γραμμή του κώδικα ξεκινάει με <! Και τελειώνει με > σημαίνει ότι ό,τι είναι γραμμένο μέσα σε αυτό, αποτελεί σχόλια και δεν εκτελείται από τον κώδικα. Άρα είναι γραμμένο σαν εξήγηση στον προγραμματιστή. Αυτός είναι ένας χρήσιμος τρόπος για να γράφουμε τις σημειώσεις μας για να καταλάβουμε κάτι την επόμενη φορά που θα δούμε τον κώδικα, πχ. τι κάνει αυτό το πρόγραμμα κλπ.
Επίσης παρατηρούμε ότι οι ομάδες ετικετών εμφανίζονται πάντα μέσα σε γωνίες <…>, και μάλιστα όταν κλείνει η ομάδα, η ετικέτα βρίσκεται μέσα σε γωνίες αλλά και την πλάγια </…>.
Άρα η / μετά την γωνιά, οριοθετεί την λήξη της ετικέτας.
Π.χ. <body> κείμενο </body>
ΠΡΟΣΟΧΗ!
Ο κώδικας HTML δεν είναι ευαίσθητος σε κεφαλαία και μικρά , αλλά είναι σημαντικό το αλφάβητο, που χρησιμοποιείται το Λατινικό. Δηλαδή δεν παίζει ρόλο αν ο κώδικας είναι γραμμένος με κεφαλαία ή μικρά αλλά πρέπει να είναι γραμμένος με αγγλικούς χαρακτήρες. Για να μην γράψουμε λάθος λέξεις, σε μερικές εντολές που μοιάζουν και στις δυο γλώσσες, προτείνουμε να γράφουμε με ΜΙΚΡΑ που φαίνονται ευκολότερα.
Π.χ. : HTM (htm) ενώ -> ΗΤΜ (ητμ)
Που βρίσκουμε την ιστοσελίδα μας όταν αυτή φιλοξενηθεί;
Η ιστοσελίδα μας θα έχει τη μορφή:
http://www.όνομα_του_παροχέα.gr/όνομα_ιστοσελίδας.htm
Ο κώδικας HTML δεν είναι ευαίσθητος σε κεφαλαία και μικρά , αλλά είναι σημαντικό το αλφάβητο, που χρησιμοποιείται το Λατινικό. Δηλαδή δεν παίζει ρόλο αν ο κώδικας είναι γραμμένος με κεφαλαία ή μικρά αλλά πρέπει να είναι γραμμένος με αγγλικούς χαρακτήρες. Για να μην γράψουμε λάθος λέξεις, σε μερικές εντολές που μοιάζουν και στις δυο γλώσσες, προτείνουμε να γράφουμε με ΜΙΚΡΑ που φαίνονται ευκολότερα.
Π.χ. : HTM (htm) ενώ -> ΗΤΜ (ητμ)
Που βρίσκουμε την ιστοσελίδα μας όταν αυτή φιλοξενηθεί;
Η ιστοσελίδα μας θα έχει τη μορφή:
http://www.όνομα_του_παροχέα.gr/όνομα_ιστοσελίδας.htm
Μερικές από τις βασικές ετικέτες (tags) που χρησιμοποιούμε στην HTML φαίνονται παρακάτω: