HTML tutorial: Εύκολη δημιουργία ιστοσελίδων

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

Συνεχίζοντας από την εισαγωγή που κάναμε στο προηγούμενο άρθρο, όπου μιλήσαμε για τις βασικές ετικέτες της HTML <html>, <head>, <title>,<body> και το πώς βάζουμε σχόλια γράφοντας τα μεταξύ <!-- και -->, σήμερα θα δούμε τις διάφορου μεγέθους επικεφαλίδες(headings), τις παραγράφους, τις λίστες και πως φτιάχνουμε ένα σύνδεσμο(link) είτε είναι προς μια ιστοσελίδα στο internet είτε σε φωτογραφία.

Πηγαίνετε τώρα στην σελίδα αυτή και αφού αναγνωρίσετε τις ετικέτες που μάθατε κάνοντας δεξί κλικ και επιλέγοντας "View page source" ή "Προβολή προέλευσης" ή "Προβολή πηγαίου κώδικα" ανάλογα με τον περιηγητή σας, προσπαθείστε να καταλάβετε τι κάνουν οι διάφορες ετικέτες <h1>, <h2> και <h3>.


Οι επικεφαλίδες(headings) στη γλώσσα HTML

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

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

<h1> έως <h6>

Όταν τις χρησιμοποιούμε, διότι θα δούμε σε επόμενα άρθρα πως μπορούμε να ορίσουμε δικό μας μέγεθος με style sheets, χρησιμοποιούμε συνήθως τα μεγέθη

<h1>, <h2> και <h3> άντε και <h3>

Το h1 είναι το μεγαλύτερο και το h6 το μικρότερο σε μέγεθος.

Προσοχή χρειάζεται σε ένα είδος ιεραρχίας που πρέπει να ακολουθούμε στα μεγέθη των επικεφαλίδων. Αν βάλαμε ως h1 τον αρχικό μας τίτλο, σαν υπότιτλο χρησιμοποιούμε h2. Τώρα, πολλά h2 μπορούν να χρησιμοποιηθούν το ένα μετά το άλλο(σαν υποεπικεφαλίδες πχ παραγράφων). Μετά μπαίνουν τα h3 οπότε "δεν υπάρχει γυρισμός" στα h1, h2 πλέον στο ίδιο άρθρο(ή σελίδα). Βέβαια το h1 όπως είναι, χωρίς τροποποίηση μεγεθους, είναι πολύ μεγάλο και μη καλαίσθητο.


Παράγραφοι

Η ετικέτα <p> ορίζει μία παράγραφο. όπως στο MS Word, Όπως στο Word πατάμε enter για να περάσουμε στην επόμενη παράγραφο, εδώ στην HTML αρχίζουμε την παράγραφο με ένα

<p>

για να πούμε στον περιηγητή(browser) μας ότι "ξεκίνα μια παράγραφο και εγώ απλώς θα γράψω το περιεχόμενο της". Κλείνουμε κάθε παράγραφο με ένα

</p>

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


Οι λίστες



Παρακάτω βλέπετε μια unordered λίστα:


  • HTML
  • CSS
  • Δημιουργία ιστοσελίδων
  • XHTML
Κα τώρα μια ordered


  1. PC
  2. Windows
  3. Ubuntu
  4. Προγράμματα
Κλείστε τώρα το σημειωματάριο ή άλλο editor με τον οποίο βλέπατε τον κώδικα HTML της ιστοσελίδας που σας έδωσα πριν.

Πηγαίνετε σε αυτήν την ιστοσελίδα και όταν ανοίξει κάντε δεξί κλικ επιλέξτε "View page source" ή "Προβολή προέλευσης" ή "Προβολή πηγαίου κώδικα" ανάλογα με τον περιηγητή σας.

Βρείτε στον κώδικα το κομμάτι που ξεκινά με

<ul>

έχει πολλά <li>

και καταλήγει σε

</ul>

Αυτό το κομμάτι μας δημιουργεί μια μη ταξινομημένη λίστα. Κάθε στοιχείο της λίστας είναι μεταξύ

<li></li>

και όλα τα στοιχεία της λίστας βρίσκονται μεταξύ

<ul></ul>

Παρακάτω στον κώδικα HTML που μελετάτε βρείτε το κομμάτι που αρχίζει με

<ol>

και καταλήγει σε

</ol>

Αυτή είναι μια ταξινομημένη λίστα.Κάθε στοιχείο της λίστας είναι μεταξύ

<li></li>

και όλα τα στοιχεία της λίστας βρίσκονται μεταξύ

<ol></ol>

Και οι λίστες, όπως είπαμε για τις παραγράφους και επικεφαλίδες, δημιουργούν αυτόματα κάποιο κενό μεταξύ λίστας και προηγούμενου(και επόμενου) στοιχείου που πληκτρολογούμε(ή τοποθετούμε).


Σύνδεσμοι(link) στο internet



Η ίδια η ύπαρξη του internet στηρίζεται στην ύπαρξη των συνδέσμων(links). Ένα σύνδεσμο θα τον συναντήσουμε ως


Πρόσθεσε επιτέλους την αναζήτηση Youtube

ή ως φωτογραφία link



Το πρώτο link, text link, το φτιάχνουμε γράφοντας


διορθωωμένο κείμενο:

<a href="http://sotostips.blogspot.com/2009/01/youtube-firefox-site-mozilla.html">Πρόσθεσε επιτέλους την αναζήτηση Youtube</a>

Με href="..." ορίζουμε τη διεύθυνση που "κοιτά" το link. Γράφουμε το κείμενο που θα εμφανίζεται στην ιστοσελίδα, και θα είναι πλέον σύνδεσμος, μεταξύ a href="..." και a όπως βλέπουμε, ακριβώς, πάνω.

Τις φωτογραφίες link, που αν τις κλικάρεις σε πάνε σε κάποια διεύθυνση στο internet, όπως και το link κειμένου τις φτιάχνουμε γράφοντας
<a href="www.siteyouwanttogoto.com"><img src="http://www.blogger.com/yourprettypicture.jpg" /></a>
Έγχρωμο κείμενο συνδεσμου
<a href="http://www.google.gr" style="color:yellow;"><GOOGLE</a>


Για να ανοίγει ο σύνδεσμος σε νέο παράθυρο ή καρτέλα προσθέστε και το target="_blank"