Internet
Now Reading
2ο Μάθημα HTML-Βασικές Ετικέτες
0

2ο Μάθημα HTML-Βασικές Ετικέτες

by Ελένη Χαλικιά24 October, 2012

Περιγραφή Μαθήματος
Στο σημερινό μας μάθημα θα δείτε τις βασικές ετικέτες της HTML από σημασιολογική πλευρά, το πως μπορείτε να τις χρησιμοποιήσετε και μερικά παραδείγματα για να κατανοήσετε τις ετικέτες.

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

Όλες οι ετικέτες στην HTML έχουν την εξής μορφή:
<ονομασία ετικέτας>περιεχόμενο </ονομασία ετικέτας>

Η εξήγηση έχει ως εξής:
<ονομασία ετικέτας>: δείχνει ότι ανοίγει μια εντολή, δηλάδη ότι ανοίγει μια ετικέτα
</ονομασία ετικέτας>: δείχνει ότι κλείνει μια εντολή, δηλάδη ότι κλείνει μια ετικέτα

Σημασιολογία ετικετών
<html>: Την ετικέτα αυτή την χρησιμοποιούμε για να δηλώσουμε ότι ανοίγουμε την html και ότι έτσι πλέον μπορούμε να γράψουμε html κώδικα.   

</html>: Την ετικέτα αυτή την χρησιμοποιούμε για να δηλώσουμε ότι κλείνουμε την html και ότι δεν μπορούμε πλέον να συνεχίσουμε να γράφουμε html κώδικα.

<head>: Την ετικέτα αυτή την χρησιμοποιούμε για να δηλώσουμε ότι ανοίγουμε μέσα στην html την ετικέτα head, η οποία χρησιμεύει για να προσθέσουμε τον τίτλο της ιστοσελίδας μας.

</head>: Την ετικέτα αυτή την χρησιμοποιούμε για να δηλώσουμε ότι κλείνουμε μέσα στην html την ετικέτα head.
<title>: Την ετικέτα αυτή την χρησιμοποιούμε για να δηλώσουμε ότι ανοίγουμε μέσα στην ετικέτα head την ετικέτα title, η οποία είναι η ετικέτα για να προσθέσουμε τίτλο στην ιστοσελίδα μας.
</title>: Την ετικέτα αυτή την χρησιμοποιούμε για να δηλώσουμε ότι κλείνουμε μέσα στην ετικέτα head την ετικέτα title.
<body>:  Η ετικέτα αυτή είναι γνωστή ως το σώμα της html διότι εκεί μπαίνουν όλες οι επιπλέον ετικέτες για την δημιουργία και διαμόρφωση της ιστοσελίδα σας. Οπότε με αυτή την ετικέτα δηλώνουμε ότι ανοίγουμε το σώμα της html για να προχωρήσουμε παρακάτω.

</body>: Με την ετικέτα αυτή δηλώνουμε ότι θέλουμε να κλείσουμε το σώμα της html

Παράδειγμα 1
Αυτό είναι το πρώτο μας παράδειγμα για να δείτε την διαδικασία ανοίγματος και κλεισίματος της ετικέτας html.

<html>
Λοιπά στοιχεία…Λοιπές ετικέτες…
</html>

Παράδειγμα 2
Αυτό είναι το δεύτερο παράδειγμα μας για να δείτε την διαδικασία ανοίγματος και κλεισίματος της ετικέτας html και την εισαγωγή της ετικέτας head μέσα στον html κώδικα.

<html>
 <head>
    Λοιπά στοιχεία ετικέτας τίτλου
 </head>
</html>

Παράδειγμα 3
Αυτό είναι το τρίτο παράδειγμα μας για να δείτε την διαδικασία ανοίγματος και κλεισίματος της ετικέτας html, την εισαγωγή των ετικετών head και title μέσα στον html κώδικα.

<html>
 <head>
    <title>Ονομασία Τίτλου Ιστοσελίδας </title>
 </head>
</html>

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

Παράδειγμα 4
Αυτό είναι το τέταρτο παράδειγμα μας για να δείτε την διαδικασία ανοίγματος και κλεισίματος της ετικέτας html, την εισαγωγή των ετικετών head, title και body μέσα στον html κώδικα.

<html>
 <head>
    <title> Ονομασία Τίτλου Ιστοσελίδας </title>
 </head>
    <body>
       Λοιπά στοιχεία…
    </body>
</html>

Σε αυτό το παράδειγμα όταν τρέξετε το αρχείο σας θα διαπιστώσετε ότι η ιστοσελίδα σας εμφανίζει το περιεχόμενο “Λοιπά στοιχεία”, αλλά εμφανίζει και τον τίτλο στην καρτέλα της ιστοσελίδας σας όπως μπορείτε να δείτε στην παραπάνω εικόνα.

 

Επίλογος
Στο επόμενο μάθημα μας για την HTML θα δείτε τις ετικέτες μορφοποίησης κειμένου headings, paragraph και ποιο συγκεκριμένα τα εξής:
  • Σημασιολογία κάθε ετικέτας
  • Χρήση κάθε ετικέτας
  • Παραδείγματα κάθε ετικέτας

Κατέβασμα Μαθήματος
Κατεβάστε το δεύτερο μας μάθημα HTML στον υπολογιστή σας εντελώς δωρεάν σε μορφή pdf.

Download

Συντάκτης
Ελένη Χαλικιά
Τεχνικός Τεχνολογίας Internet
Τεχνικός Εφαρμογών Πληροφορικής

Comments

comments