Μάθημα : Α' Λυκείου | Εφαρμογές Πληροφορικής -

Α' Λυκείου | Εφαρμογές Πληροφορικής -

EL49190 - ΝΙΚΟΣ ΛΥΜΠΕΡΤΑΣ

Ενότητες μαθήματος

01. HTML - Ετικέτες (tags) και δομή σελίδας (<html> <head> <body>)

Εισαγωγή - Ιστοσελίδα (webpage... 02. HTML - Η πρώτη μου σελίδα...

Η html είναι μια γλώσσα σήμανσης, δηλαδή καθορίζει τον τύπο του περιεχομένου της ιστοσελίδας (πχ. Αυτό είναι μια επικεφαλίδα, το άλλο είναι μια παράγραφος, μια εικόνα κλπ). Για να το καταφέρει αυτό διαθέτει τις ετικέτες (tags) μέσα στις οποίες περικλείεται το περιεχόμενο. Κάθε tag χρησιμοποιεί τα σύμβολα< >, έχει ένα όνομα και οι περισσότερες από αυτές έχουν start tag και end tag. 

 

Παράδειγμα:

<title> Μαθήματα html </title>

 

Η τελική ετικέτα (end tag) διαφέρει από την αρχική (start tag) στο ότι προσθέτουμε το σύμβολο / ακριβώς πριν το όνομα. Στο παράδειγμα μας έχουμε:

<title> : Start Tag

Μαθήματα html : Περιεχόμενο - Content

</title> : End Tag

 

Τα τρία στοιχεία αυτά μάζί αποτελούν ένα html element. 

Τα html elements συνήθως έχουν αυτή τη δομή, δηλαδή

Αρχή (start tag) - Content - Τέλος (end tag)

 

O κώδικας html του παραδείγματος έχει σαν αποτέλεσμα, το περιεχόμενο (κείμενο 2 λέξεων) να θεωρηθεί τίτλος της σελίδας και να εμφανίζεται στην καρτέλα στο πάνω μέρος του web browser. 

 

Προσοχή: Είναι πολύ σημαντικό να μην ξεχνάμε τα end tags. Τις περισσότερες φορές ένα τέτοιο λάθος έχει πολύ δυσάρεστα αποτελέσματα.

 

<html> .. </html>

Το πιο βασικό tag. Το πρώτο που ανοίγει και το τελευταίο που κλείνει σε κάθε ιστοσελίδα.

Έτσι κάθε ιστοσελίδα είναι ένα μεγάλο html element που ξεκινάει με το start tag <html> και τελειώνει με το end tag </html>, που είναι πάντα η τελευταία γραμμή του κώδικά μας. 

 

<head> .. </head> και <body> .. </body>

Τα 2 κύρια elements κάθε ιστοσελίδας. Ανοίγουν και τα δύο μέσα στο <html>.

Στο <head> θα βάλουμε αργότερα κώδικα που προσφέρει διάφορες πληροφορίες για τη σελίδα μας (όπως το <title>). Το <head> πρέπει να κλείσει πριν ανοίξει το <body> στο οποίο θα μπει στη συνέχεια το κύριο περιεχόμενο της σελίδας. 

 

Κάθε αρχείο που θα δημιουργήσουμε λοιπόν θα έχει την παρακάτω δομή:

<html> (1η γραμμή)

    <head> (2η γραμμή)

         ...

    </head>

    <body>

        ...

    </body> (προτελευταία γραμμή)

</html> (τελευταία γραμμή)

 

Περισσότερα στο w3schools