Html μαθήματα

Μάθημα html από το σεμινάριο web designer / developer του Παν. Αιγαίου

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

Ο στόχος είναι να σας δείξουμε «πώς» να δημιουργήσετε την πρώτη σας ιστοσελίδα χωρίς να ξοδέψετε ολόκληρο το σεμινάριο εστιάζοντας πολύ στο «γιατί».

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

Τι είναι η HTML;

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

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

 

Η Ιστορία της HTML

 

Η HTML δημιουργήθηκε για πρώτη φορά από τον Tim Berners-Lee, τον Robert Cailliau και άλλους το 1989. Σημαίνει Hyper Text Markup Language. Hypertext σημαίνει ότι το έγγραφο περιέχει συνδέσμους που επιτρέπουν στον αναγνώστη να μεταβεί σε άλλα μέρη του εγγράφου ή σε άλλο έγγραφο εντελώς.

Η τελευταία έκδοση είναι γνωστή ως HTML5.

Η γλώσσα σήμανσης ή Markup Language είναι ένας τρόπος με τον οποίο οι υπολογιστές μιλούν μεταξύ τους για να ελέγχουν τον τρόπο επεξεργασίας και παρουσίασης του κειμένου. Για να γίνει αυτό, η HTML χρησιμοποιεί δύο πράγματα: ετικέτες και χαρακτηριστικά.

Τι είναι οι ετικέτες και τα χαρακτηριστικά;

Οι ετικέτες και τα χαρακτηριστικά είναι η βάση της HTML.  Δουλεύουν μαζί αλλά εκτελούν διαφορετικές λειτουργίες – αξίζει να αφιερώσετε 2 λεπτά για να καταλάβετε τη διαφοροποίηση των δύο.

 Τι είναι οι ετικέτες HTML;

 Οι ετικέτες χρησιμοποιούνται για τη σήμανση της έναρξης ενός στοιχείου HTML και συνήθως περικλείονται σε γωνιακές αγκύλες. Ένα παράδειγμα ετικέτας είναι: <h1>.

Οι περισσότερες ετικέτες πρέπει να ανοίξουν με <h1> και να κλείσουν με </h1> για να λειτουργήσουν.

Τι είναι τα Χαρακτηριστικά HTML;

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

Ένα παράδειγμα χαρακτηριστικού είναι:

<img src=”mydog.jpg”alt=”Μια φωτογραφία του σκύλου μου.”>

Σε αυτήν την περίπτωση, η πηγή εικόνας (src) και το κείμενο alt (alt) είναι χαρακτηριστικά της ετικέτας <img>.

Χρυσοί Κανόνες που πρέπει να θυμάστε

Η συντριπτική πλειοψηφία των ετικετών πρέπει να ανοίγουν με (<tag>) και να κλείνουν με (</tag>) με τις πληροφορίες του στοιχείου, όπως ο τίτλος ή ένα κείμενο να βρίσκονται ανάμεσα στις ετικέτες.

Όταν χρησιμοποιείτε πολλές ετικέτες, οι ετικέτες πρέπει να κλείνουν με τη σειρά με την οποία ανοίχθηκαν. Για παράδειγμα:

<strong><em>Αυτό είναι πολύ σημαντικό!</em></strong>

Επεξεργαστές HTML

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

HTML Notepad ++

Αυτό είναι το Σημειωματάριο Notepad ++. Δεν είναι κάτι το ιδιαίτερα αλλά κάνει τη δουλειά του μια χαρά.

 

Πλεονεκτήματα

• Διεπαφή χωρίς περισπασμούς
• Λειτουργία αυτόματης συμπλήρωσης
• Επιλογές προσθήκης για εκτεταμένες λειτουργίες.

Μειονεκτήματα

• Μπορεί να είναι δύσκολο για αρχάριους
• Καμία υποστήριξη για Mac.

Μην χρησιμοποιείτε το Microsoft Word ή οποιονδήποτε άλλο επεξεργαστή κειμένου όταν γράφετε κώδικα HTML, μόνο ένας επεξεργαστής HTML ή, τουλάχιστον, το ενσωματωμένο σημειωματάριο του υπολογιστή σας (απλό notepad) , είναι κατάλληλα για αυτή την εργασία.

Δεύτερον, βεβαιωθείτε ότι έχετε εγκαταστήσει έναν αριθμό διαφορετικών προγραμμάτων περιήγησης, όπως το Chrome και ο Firefox, προκειμένου να κάνετε προεπισκόπηση της επερχόμενης δημιουργίας σας.

Δημιουργία Της Πρώτης σας HTML Ιστοσελίδας

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

Βασική κατασκευή μιας  ιστοσελίδας HTML

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

 

• <!DOCTYPE html> – Αυτή η ετικέτα καθορίζει τη γλώσσα που θα γράψετε στη σελίδα. Σε αυτήν την περίπτωση, η γλώσσα είναι HTML 5.
• <html> – Αυτή η ετικέτα σηματοδοτεί ότι από εδώ και πέρα ​​θα γράψουμε σε κώδικα HTML.
• <head> – Εκεί πηγαίνουν όλα τα μεταδεδομένα για τη σελίδα – πράγματα που προορίζονται κυρίως για μηχανές αναζήτησης και άλλα προγράμματα υπολογιστών.
• <body> – Εκεί πηγαίνει το περιεχόμενο της σελίδας.

Δομή HTML

 Έτσι είναι δομημένη οπτικά μία μέση σελίδα HTML σας.

Περαιτέρω ετικέτες

Μέσα στην ετικέτα <head>, υπάρχει μία ετικέτα που περιλαμβάνεται πάντα: <title>, αλλά υπάρχουν και άλλες που είναι εξίσου σημαντικές:

<title>

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

<meta>

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

Ας δοκιμάσουμε μια βασική ενότητα <head>:

 

<head>

<title>Η Πρώτη μου Ιστοσελίδα</title>

<meta charset=”UTF-8″>

<meta name=”description” content=Αυτό το πεδίο περιέχει πληροφορίες για τη σελίδα σας. Συνήθως έχει μήκος περίπου δύο προτάσεις.”>.

<meta name=”author” content=”Athanasios Davalas”>

</header>

Προσθήκη Περιεχομένου

Στη συνέχεια, θα κάνουμε την ετικέτα <body>. Το HTML <body> είναι το σημείο όπου προσθέτουμε το περιεχόμενο που έχει σχεδιαστεί για προβολή από ανθρώπινα μάτια.

Αυτό περιλαμβάνει κείμενο, εικόνες, πίνακες, φόρμες και οτιδήποτε άλλο βλέπουμε στο διαδίκτυο κάθε μέρα.

 

Πώς να προσθέσετε επικεφαλίδες HTML στην ιστοσελίδα σας

 

Στην HTML, οι επικεφαλίδες γράφονται στα ακόλουθα στοιχεία:

<h1>

<h2>

<h3>

<h4>

<h5>

<h6>

Όπως ίσως μαντέψατε, τα <h1> και <h2> πρέπει να χρησιμοποιούνται για τους πιο σημαντικούς τίτλους, ενώ οι υπόλοιπες ετικέτες θα πρέπει να χρησιμοποιούνται για δευτερεύουσες επικεφαλίδες και λιγότερο σημαντικό κείμενο.

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

 

Δημιουργία της Eπικεφαλίδας σας

 Ας το δοκιμάσουμε. Σε μια νέα γραμμή στον επεξεργαστή HTML, πληκτρολογήστε:

 

<h1>Καλώς ορίσατε στη σελίδα μου</h1>

 

Και πατήστε save. Θα αποθηκεύσουμε αυτό το αρχείο ως “index.html” σε ένα νέο φάκελο που ονομάζεται “η ιστοσελίδα μου”.

Η στιγμή της αλήθειας: Κάντε κλικ στο πρόσφατα αποθηκευμένο αρχείο και η πρώτη σας ιστοσελίδα θα ανοίξει στο προεπιλεγμένο πρόγραμμα περιήγησής σας. Μπορεί να μην είναι όμορφη αλλά είναι δική σας… όλο δική σας.

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

 

Πώς να Προσθέσετε Κείμενο στην HTML

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

Όταν γράφουμε κείμενο σε HTML, έχουμε επίσης μια σειρά άλλων στοιχείων που μπορούμε να χρησιμοποιήσουμε για να ελέγξουμε το κείμενο ή να το κάνουμε να εμφανιστεί με έναν συγκεκριμένο τρόπο.

Άλλα βασικά στοιχεία

Είναι τα ακόλουθα:

 

Στοιχείο           Σημασία                      Σκοπός

<b>                  Έντονο                        Επισήμανση σημαντικών πληροφοριών

<strong>          Ισχυρό                         Παρόμοια με την έντονη γραφή, για να επισημάνετε το βασικό κείμενο

<i>                   Πλάγια                        Για να δηλώσετε κείμενο

<em>               Τονισμένο Κείμενο     Χρησιμοποιείται συνήθως ως υπότιτλοι εικόνας

<mark>           Σημειωμένο κείμενο   Επισημάνετε το φόντο του κειμένου

<small>           Μικρό κείμενο            Για συρρίκνωση του κειμένου

<strike>           Κείμενο που διαγράφεται Για να τοποθετήσετε μια οριζόντια γραμμή στο κείμενο

<u>                  Υπογραμμισμένο κείμενο Χρησιμοποιείται για συνδέσμους ή επισημάνσεις κειμένου

<ins>               Εισαγόμενο κείμενο   Εμφανίζεται με υπογράμμιση για να εμφανιστεί ένα εισαγόμενο κείμενο

<sub>              Κείμενο με δείκτη       Τυπογραφική στιλιστική επιλογή

<sup>              Υπεργραφικό κείμενο Ένα άλλο τυπογραφικό στυλ παρουσίασης

Αυτές οι ετικέτες πρέπει να ανοίγουν και να κλείνουν γύρω από το εν λόγω κείμενο.

Ας το δοκιμάσουμε. Σε μια νέα γραμμή στον επεξεργαστή HTML, πληκτρολογήστε τον ακόλουθο κώδικα HTML:

<p>Καλώς ορίσατε στην ολοκαίνουργια ιστοσελίδα <em>μου</em>. Αυτή η ιστοσελίδα θα είναι το <strong>νέο μου<strong> σπίτι στο διαδίκτυο.</p>

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

Πώς να Προσθέσετε Συνδέσμους στην HTML

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

Οι σύνδεσμοι περιλαμβάνονται σε ένα χαρακτηριστικό που ανοίγει η ετικέτα <a>. Αυτό το στοιχείο είναι το πρώτο που συναντήσαμε και χρησιμοποιεί ένα χαρακτηριστικό και έτσι φαίνεται διαφορετικό από τις ετικέτες που αναφέρθηκαν προηγουμένως.

 

Η Ετικέτα Άγκυρα

 Η ετικέτα ανοίγματος <a> (ή άγκυρα) είναι γραμμένη με τη μορφή:

<a href =”https://dreamweaver.gr/”>Το κείμενο του συνδέσμου σας εδώ</a>

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

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

Εάν χτίζετε τον δικό σας ιστότοπο, πιθανότατα θα έχετε όλες τις σελίδες σας σε επαγγελματικο web hosting. Σε αυτήν την περίπτωση, οι εσωτερικοί σύνδεσμοι στον ιστότοπό σας θα <a href =”mylinkedpage.html ”>Συνδέονται εδώ</a>.

Ας Δημιουργήσουμε μια Ετικέτα Άγκυρας

Ας το δοκιμάσουμε. Δημιουργήστε ένα αντίγραφο του κώδικα από την τρέχουσα σελίδα index.html. Αντιγράψτε/επικολλήστε το σε νέο παράθυρο στον επεξεργαστή HTML.

Αποθηκεύστε αυτήν τη νέα σελίδα ως “page2.html” και βεβαιωθείτε ότι έχει αποθηκευτεί στον ίδιο φάκελο με τη σελίδα index.html. Στο page2.html προσθέστε τον ακόλουθο κώδικα:

 

<a href =”http://www.google.gr”>Google</a>

Αυτό θα δημιουργήσει έναν σύνδεσμο προς το Google στη σελίδα 2. Πατήστε αποθήκευση και επιστρέψτε στη σελίδα index.html. Σε μια νέα γραμμή στο index.html προσθέστε τον ακόλουθο κώδικα:

<a href =”*folder(s)*/page2.html”>Σελίδα2</a>

Βεβαιωθείτε ότι η διαδρομή του φακέλου προς το αρχείο (page2.html) είναι σωστή. Πατήστε αποθήκευση και κάντε προεπισκόπηση την index.html στο πρόγραμμα περιήγησής σας.

Εάν όλα είναι σωστά, τότε θα δείτε έναν σύνδεσμο που θα σας μεταφέρει στη δεύτερη σελίδα σας. Στη δεύτερη σελίδα, θα υπάρχει ένας σύνδεσμος που θα σας μεταφέρει στο google.gr.

Πώς να Προσθέσετε Εικόνες στην HTML ιστοσελίδα σας

 Στον σύγχρονο ψηφιακό κόσμο, οι εικόνες είναι το παν. Η ετικέτα <img> έχει όλα όσα χρειάζεστε για να εμφανίσετε εικόνες στον ιστότοπό σας. Όπως το <a> στοιχείο άγκυρας, το <img> περιέχει επίσης ένα χαρακτηριστικό.

Το χαρακτηριστικό διαθέτει πληροφορίες για τον υπολογιστή σας σχετικά με την πηγή, το ύψος, το πλάτος και το alt κείμενο της εικόνας.

Στυλ και Μορφές

 Ιδιότητα Εικόνας

Μπορείτε να ελέγξετε τον τύπο αρχείου μιας εικόνας κάνοντας δεξί κλικ στο στοιχείο και επιλέγοντας “Ιδιότητες”. Μπορείτε επίσης να ορίσετε περιγράμματα και άλλα στυλ γύρω από την εικόνα χρησιμοποιώντας το χαρακτηριστικό τάξη. Ωστόσο, αυτό θα το καλύψουμε σε μεταγενέστερο σεμινάριο.

Οι τύποι αρχείων που χρησιμοποιούνται γενικά για αρχεία εικόνων στο διαδίκτυο είναι: .jpg, .png, και (όλο και λιγότερο) .gif.

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

Η ετικέτα <img> κανονικά γράφεται ως εξής:

<img src=”yourimage.jpg” alt=”Περιγράψτε την εικόνα” height=”X” width=”X”>

Ας το δοκιμάσουμε.

 Δημιουργήστε τη Δική σας Εικόνα με Εναλλακτικό Κείμενο

 Μην φοβάστε να παίξετε με τον δοκιμαστικό κώδικα – είναι ένας πολύ καλός τρόπος για να διασκεδάσετε ενώ μαθαίνετε. Αποθηκεύστε μια εικόνα (μορφής .jpg, .png, .gif) της επιλογής σας στον ίδιο φάκελο όπου έχετε αποθηκεύσει τα index.html και page2.html. Ονομάστε αυτήν την εικόνα “testpic.jpg”.

Σε μια νέα γραμμή στον επεξεργαστή HTML εισαγάγετε τον ακόλουθο κώδικα:

 

<img src=”testpic.jpg” alt=”Αυτή είναι μια δοκιμαστική εικόνα” height=”42″ width=”42″>

 

Πατήστε αποθήκευση και κάντε προεπισκόπηση της σελίδας index.html στο πρόγραμμα περιήγησής σας.

 

Πώς να Φτιάξετε μια Λίστα HTML

 

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

 

Ταξινομημένη Λίστα

Η πρώτη είναι μία <ol>: Αυτή είναι μια ταξινομημένη λίστα περιεχομένων. Για παράδειγμα:

• Ένα στοιχείο
• Ένα άλλο στοιχείο
• Άλλο ένα πηγαίνει εδώ.

Μέσα στην ετικέτα <ol> παραθέτουμε κάθε στοιχείο της λίστας μέσα στις ετικέτες <li> </li>.

Για παράδειγμα:

<ol>

<li>Ένα στοιχείο </li>

<li>Ένα άλλο στοιχείο </li>

<li>Άλλο ένα πηγαίνει εδώ </li>

</ol>

Μη ταξινομημένη Λίστα

Ο δεύτερος τύπος λίστας που μπορεί να θέλετε να συμπεριλάβετε είναι μία <ul> μη ταξινομημένη λίστα. Αυτή είναι περισσότερο γνωστή ως λίστα με κουκκίδες και δεν περιέχει αριθμούς. Ένα παράδειγμα αυτής είναι:

<ul>

<li>Αυτή είναι </li>

<li>Μία Μη Ταξινομημένη </li>

<li>Λίστα </li>

</ul>

Λίστα Ορισμών

Τέλος, μπορεί να θέλετε να συμπεριλάβετε μια λίστα ορισμών <dl> στη σελίδα σας. Ένα παράδειγμα λίστας <dl> έχει ως εξής:

HTML

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

 

<dl>

<dt>Στοιχείο</dt>

<dd>Ο ορισμός πηγαίνει εδώ</dd>

</dl>

Ας το δοκιμάσουμε. Ανοίξτε το index.html και σε μια νέα γραμμή, εισαγάγετε τον ακόλουθο κώδικα HTML:

 

<p>Αυτή η ιστοσελίδα θα έχει τα ακόλουθα οφέλη για την επιχείρησή μου:</p>

<ul>

<li>Αυξημένη επισκεψιμότητα </li>

<li>Διεθνή προσέγγιση χρηστών </li>

<li>Ευκαιρίες προώθησης </li>

</ul>

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

Πώς να Προσθέσετε Πίνακες στην HTML

 Πίνακες HTML

Οι πίνακες μπορούν να διαμορφωθούν με διάφορους τρόπους – το Codepen.io προσφέρει ζωντανές προεπισκοπήσεις για να παρακολουθείτε τις αλλαγές. Ένας άλλος τρόπος για να διατηρήσετε την ιστοσελίδα σας καθαρή και τακτοποιημένη είναι μέσω της χρήσης ενός πίνακα.

Μην χρησιμοποιείτε πίνακα για τη διάταξη της ιστοσελίδας σας. Οι μηχανές αναζήτησης το μισούν αυτό και γενικά είναι μια κακή ιδέα. Απλώς… μην το κάνετε.

Δείτε το μάθημα μας για την CSS, αντ\’ αυτού. Αυτό είναι σίγουρα το πιο περίπλοκο μέρος αυτού του σεμιναρίου, ωστόσο, η εκμάθησή του σίγουρα θα αποδώσει μακροπρόθεσμα.

Έχοντας αυτό υπόψη, οι πίνακες εξακολουθούν να είναι ένας χρήσιμος τρόπος για να παρουσιάσετε περιεχόμενο στη σελίδα σας.

Από τι αποτελείται ένας πίνακας;

Όταν σχεδιάζουμε έναν πίνακα πρέπει να ανοίξουμε ένα στοιχείο με την ετικέτα ανοίγματος <table>. Μέσα σε αυτήν την ετικέτα, δομούμε τον πίνακα χρησιμοποιώντας τις γραμμές πίνακα, <tr> και τα κελιά, <td>. Ένα παράδειγμα πίνακα HTML έχει ως εξής:

<table>

<tr>

<td>Σειρά 1 – Στήλη 1 </td>

<td>Σειρά 1 – Στήλη 2</td>

<td>Σειρά 1 – Στήλη 3</td>

</tr>

<tr>

<td>Σειρά 2 – Στήλη 1</td>

<td>Σειρά 2 – Στήλη 2</td>

<td>Σειρά 2 – Στήλη 3</td>

</tr>

</table>

Αυτό θα δημιουργήσει έναν πίνακα 2 σειρών με 3 κελιά σε κάθε σειρά. Οι πίνακες μπορεί να γίνουν αρκετά περίπλοκοι.

Ετικέτες Πίνακα

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

 

Ετικέτα Πίνακα           Σημασία                      Τοποθεσία                           

<thead>                       Κεφάλι            Πίνακα           Κορυφή του πίνακα

<tbody>                      Σώμα πίνακα               Περιεχόμενο του πίνακα

<tfoot>                        Πόδια πίνακα              Κάτω μέρος του πίνακα

<colgroup>                 Ομάδα Στηλών            Μέσα στον πίνακα

<th>                             Κεφαλίδα πίνακα        Κελί δεδομένων για την επικεφαλίδα του πίνακα

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

 

Ας Φτιάξουμε έναν Πίνακα

Μεταβείτε σε μια νέα γραμμή στη σελίδα index.html μέσα στον επεξεργαστή κειμένου. Εισαγάγετε τον ακόλουθο κώδικα HTML:

<table>

<tr>

<td>Σειρά 1 – Στήλη 1</td>

<td>Σειρά 1 – Στήλη 2</td>

</tr>

<tr>

<td>Σειρά 2 – Στήλη 1</td>

<td>Σειρά 2 – Στήλη 2</td>

</tr>

</table>

Πατήστε αποθήκευση και κάντε προεπισκόπηση στο πρόγραμμα περιήγησής σας. Συγχαρητήρια: Τα καταφέρατε!

Πώς να Κλείσετε Ένα Έγγραφο HTML

Φτάσατε στο τέλος του απόλυτου σεμιναρίου μας για αρχάριους HTML. Το τελευταίο βήμα που πρέπει να ολοκληρώσουμε είναι να κλείσουμε τις ετικέτες <body> και <html> στο τέλος κάθε σελίδας χρησιμοποιώντας τον ακόλουθο κώδικα HTML:

 

</body>

</html>

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

Τι έπεται;

Τώρα μπορείτε να χρησιμοποιήσετε αυτήν τη γνώση για να δημιουργήσετε τις δικές σας ιστοσελίδες που περιέχουν αυτές τις δυνατότητες και να τις συνδέσετε μεταξύ τους.

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

Η δύναμη να σχεδιάσετε τη δική σας ιστοσελίδα είναι τώρα στα χέρια σας.

Αντιμετώπιση Προβλημάτων

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

Μάθημα html

Index.html / Κώδικας Αντιμετώπισης Προβλημάτων:

 

<!DOCTYPE html>

<html>

<head>

<title>Η πρώτη μου ιστοσελίδα</title>

<meta charset=”UTF-8″>

<meta name=”description” content=”Αυτή είναι η πρώτη μου ιστοσελίδα. Περιλαμβάνει πολλές πληροφορίες για τη ζωή μου.”>

</head>

<body>

<h1>Καλώς ορίσατε στην ιστοσελίδα μου</h1>

<p>Καλώς ορίσατε στην ολοκαίνουργια ιστοσελίδα <em>μου</em>.</p>

<p>Αυτή η ιστοσελίδα θα είναι ο <strong>νέος</strong>χώρος μου στο διαδίκτυο.</p>

<a href =”/page2.html”>Σελίδα2</a>

<img src=”testpic.jpg” alt=”Αυτή είναι μια δοκιμαστική εικόνα” height=”42″ width=”42″>

<p>Αυτή η ιστοσελίδα θα έχει τα ακόλουθα οφέλη για την επιχείρησή μου:</p>

<ul>

<li>Αυξημένη επισκεψιμότητα </li>

<li>Διεθνή προσέγγιση χρηστών </li>

<li>Ευκαιρίες προώθησης </li>

</ul>

<table>

<tr>

<td>Σειρά 1 – Στήλη 1</td>

<td>Σειρά 1 – Στήλη 2</td>

</tr>

<tr>

<td>Σειρά 2 – Στήλη 1</td>

<td>Σειρά 2 – Στήλη 2</td>

</tr>

</table>

</body>

</html>

page2.html Κώδικας Αντιμετώπισης Προβλημάτων:

 

<!DOCTYPE html>

<html>

<head>

<title>Η πρώτη μου ιστοσελίδα</title>

<meta charset=”UTF-8″>

<meta name=”description” content=” Αυτή είναι η πρώτη μου ιστοσελίδα. Περιλαμβάνει πολλές πληροφορίες για τη ζωή μου.”>

</head>

<body>

<h1>Καλώς ορίσατε στην ιστοσελίδα μου</h1>

<p> Καλώς ορίσατε στην ολοκαίνουργια ιστοσελίδα <em>μου</em>.</p>

<p> Αυτή η ιστοσελίδα θα είναι ο <strong>νέος</strong>χώρος μου στο διαδίκτυο.</p>

<a href =”http://www.google.gr”>Google</a>

</body>

</html>