Μαθήματα HTML για αρχάριους

Στη σειρά μαθημάτων για HTML θα μάθετε πως να γράφετε κώδικα HTML εύκολα και γρήγορα. Τα μαθήματα που ακολουθούν είναι απλά και δεν απαιτούν την προηγούμενη τεχνογνωσία.

Στο τέλος αυτών των μαθημάτων θα είστε σε θέση να κατασκευάσετε απλές σελίδες βασισμένες αποκλειστικά σε γλώσσα σήμανσης HTML.

Τι είναι η HTML;

Η γλώσσα σήμανσης HTML είναι μια γλώσσα προγραμματισμού που έχει σχεδιαστεί για να περιγράφει το περιεχόμενο μιας ιστοσελίδας με κατάλληλες για αυτό το σκοπό εντολές (ετικέτες).

Το όνομα της προκύπτει από τα αρχικά των λέξεων Hyper Text Markup Language.

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

Ετικέτες της HTML

Οι “εντολές” της HTML αποκαλούνται HTML ετικέτες. Οι ετικέτες είναι ειδικές λέξεις που περιβάλλονται από αγκύλες όπως για παράδειγμα η ετικέτα <html>. Οι περισσότερες ετικέτες είναι σε ζευγάρια όπως για παράδειγμα η ετικέτα <div></div>. Η πρώτη ετικέτα σε ένα ζεύγος ετικετών αποκαλείτε ετικέτα έναρξης, ενώ η δεύτερη ετικέτα αποκαλείτε ετικέτα τερματισμού. Εναλλακτικές ονομασίες για την ετικέτα έναρξης και τερματισμού στη διεθνή κοινότητα είναι οι ετικέτες start tag, end tag και opening tags και closing tags.

Έγγραφα HTML – Ιστοσελίδες

Τα έγγραφα HTML είναι ουσιαστικά οι γνωστές σε όλους μας ιστοσελίδες. Τα έγγραφα HTML αποτελούνται από ετικέτες της HTML και καθαρό κείμενο.

Ο σκοπός ενός περιηγητή διαδικτύου (όπως είναι για παράδειγμα ο Internet Explorer, ο Firefox, ο Chrome κα.) είναι να διαβάσουν (να κάνουν Render) ένα HTML έγγραφο και να το προβάλουν ως ιστοσελίδα. Ο περιηγητής διαδικτύου δεν προβάλει τις ετικέτες της HTML, αλλά χρησιμοποιεί τις ετικέτες για να προβάλει κατάλληλα το περιεχόμενο σαν σελίδα.

Ας δούμε στα γρήγορα ένα παράδειγμα:

<html>
<body>
<h1>Η επικεφαλίδα του εγγράφου μου</h1>
<p>Εδώ περνάω το περιεχόμενο μιας παραγράφου.</p>
</body>
</html>

Δείτε το παράδειγμα ζωντανά

Επεξήγηση του παραδείγματος

Το κείμενο μεταξύ των ετικετών <html> και </html> περιέχει το σύνολο του εγγράφου της ιστοσελίδας. Είναι ουσιαστικά οι ετικέτες οριοθέτησης της αρχής και του τέλους του εγγράφου. Να σημειωθεί πως έξω από αυτές τις ετικέτες δεν πρέπει να υπάρχει άλλο περιεχόμενο εκτός από σχόλια (τα σχόλια θα τα καλύψουμε σε επόμενο μάθημα).

Το κείμενο μεταξύ των ετικετών <body> και </body> είναι αυτό που εμφανίζεται στους Web Browsers (όπως Chrome, Safari, Internet Explorer, κα.).

Το κείμενο μεταξύ των ετικετών <h1> και </h1> αναπαρίσταται σαν επικεφαλίδα.

Τι κείμενο μεταξύ των ετικετών <p> και </p> αναπαρίσταται σαν μια απλή παράγραφος.

[COL size=”one_half”] [/COL] [COL size=’one_half’ last=’last’]

[/COL]