Εισαγωγή στην html
Εισαγωγή στην html

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

Για να γράψουμε κώδικα της γλώσσας HTML αρκεί να χρησιμοποιήσουμε έναν επεξεργαστή κειμένου όπως είναι το σημειωματάριο (notepad των Windows) ή το notepad++ το οποίο μας δίνει περισσότερες δυνατότητες. Προτείνουμε να χρησιμοποιήσετε το notepad++ το οποίο διατίθεται δωρεάν. Θα το βρειτε στη διεύθυνση https://notepad-plus-plus.org/.

Το πρώτο βήμα είναι να ανοίξουμε τον επεξεργαστή κειμένου.

Στη συνέχεια γράφουμε τις παρακάτω εντολές HTML:


<!DOCTYPE html>
<html>
<head>
<title>Html.gr tutorials</title>
</head>
<body>

<h1>This is the first Heading</h1>
<p>This is the first paragraph of the web page.</p>

</body>
</html>


Στη γλώσσα HTML οι ετικέτες συνήθως τοποθετούνται σε ζευγάρια. Δηλαδή πρώτα μπαίνει η ετικέτα ανοίγματος και μετά από λίγο ακολουθεί η ετικέτα κλεισίματος. Για παράδειγμα, ο κώδικας της σελίδας ξεκινάει με την ετικέτα <html> και κλείνει με την ετικέτα </html>. Επίσης το περιεχόμενο της σελίδας ξεκινάει με την ετικέτα <body> και κελίνει με την ετικέτα </body> ενώ ο τίτλος της ιστοσελίδας ξεκινάει με την ετικέτα <title> και κλείνει με την ετικέτα </title>.

Στη συνέχεια πρέπει να αποθηκεύσουμε το αρχείο. Πρέπει να κάνουμε «Αποθήκευση ως» και να επιλέξουμε τον τύπο αρχείου HTML. Ας υποθέσουμε οτι του δίνουμε το όνομα index τότε ως αποτέλεσμα θα δημιουργηθεί το αρχείο index.html.

Τώρα μπορούμε να κλείσουμε το notepad++. Στη συνέχεια κάνουμε διπλό κλικ στο αρχείο που μόλις δημιουργήσαμε (στο παράδειγμα το ονομάσαμε index.html. Τότε θα ανοίξει ο προεπιλεγμένος φυλομετρητής και θα εμφανίσει το αποτέλεσμα που φαίνεται στην παρακάτω εικόνα:

eigagogi-stin-kataskeyvi-istoselidon

Πάνω πάνω, στη γραμμή τίτλου βλέπουμε το περιεχόμενο της ετικέτας <title>. Στο σώμα του κειμένου βλέπουμε μια επικεφαλίδα και μια παράγραφο. Η επικεφαλίδα περιλαμβάνει το κείμενο της ετικέτας <h1> ενώ η παράγραφος περιλαμβάνει το περιεχόμενο της ετικέτας <p>.

Εάν θελήσουμε να κάνουμε διορθώσεις στην ιστοσελίδα που μόλις κατασκευάσαμε τότε ακολουθούμε την εξής διαδικασία:
Κάνουμε δεξί κλικ πάνω στο αρχείο index.html και επιλέγουμε «Edit with Notepad++». Τότε θα ανοίξει πάλι το notepad++.

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


<!DOCTYPE html>
<html>
<head>
<title>Html.gr tutorials</title>
</head>
<body>

<h1>This is the Heading</h1>
<p>This is the first paragraph of the web page.</p>

<h1>This is the second Heading</h1>
<p>This is the second paragraph of the web page.</p>

</body>
</html>


Στη συνέχεια αποθηκεύουμε το αρχείο HTML. Κλείνουμε ή ελαχιστοποιούμε το notepad++ και κάνυμε διπλό κλικ πάνω στο αρχείο html. Θα ανοίξει ο προεπιλεγμένος φυλλομετρητής και θα εμφανίσει το αποτέλεσμα που φαίνεται στην παρακάτω εικόνα:

apotelesma-html-sto-browserΜε αυτό τον τρόπο μπορούμε να φτιάξουμε όσα αρχεία html θέλουμε και να τα ανοίξουμε τοπικά από τον υπολογιστή μας.

 

Εάν θελήσουμε να ανεβάσουμε τα αρχεία αυτά στο internet τότε πρέπει να διαθέτουμε domain και hosting. Το domain είναι το όνομα χώρου στο οποίο θα δημοσιευτούν τα αρχεία μας. Το hosting είναι η υπηρεσία φιλοξενίας, δηλαδή κάποιος υπολογιστής που βρίσκεται μόνιμα στο internet και έχει τη δυνατότητα να παρουσιάσει τα αρχεία αυτά σε όποιον τα ζητήσει. Εάν θέλετε να μάθετε περισσότερα για τη φιλοξενία ιστοσελίδων ή αν θέλετε να αγοράσετε ποιοτικές υπηρεσίες φιλοξενίας ιστοσελίδων τότε μπορείτε να επισκεφθείτε την εταιρεία φιλοξενίας ιστοσελίδων: http://www.hoster.gr

Εφόσον αποκτήσετε domain και πρόσβαση σε υπηρεσία φιλοξενίας τότε θα λάβετε κωδικό ftp με τον οποίο μπορείτε να ανεβάσετε τα αρχεία σας στο internet. Aυτό ονομάζεται upload. Για να κάνετε upload μπορείτε να χρησιμοποιήσετε οποιοδήποτε λογισμικό ftp. Το πιο απλό είναι το λογισμικό filezilla. Διατίθεται δωρεάν στη διεύθυνση: https://filezilla-project.org/

Για να συνδεθείτε μέσω του fiulezilla με τον υπολογιστή που θα φιλοξενήσει την ιστοσελίδα σας θα πρέπει να γνωρίζετε τρεις παραμέτρους: ftp address, username και passsword. Αυτά θα σας τα δώσει η υπηρεσία φιλοξενίας.

Όταν ανοίξετε το filezilla τότε βλέπετε δυο παράθυρα. Στο αριστερό παράθυρο βλέπετε τα αρχεία που βρίσκονται στο δίσκο του υπολογιστή σας και στο δεξί παράθυρο τα αρχεία που βρίσκοντυαι στο δίσκο που φιλοξενεί την ιστοσελίδα σας. Για να ανεβάσετε ένα αρχείο από τον υπολογιστή σας θα πρέπει να κάνετε δεξί κλικ πάνω του και να πατήσετε «upload».

Για να δείτε το αρχείο θα πρέπει να ανοίξετε ένα φυλλομετρητή και να πληκτρολογήσετε το domain σας. Εδώ να τονίσουμε οτι το αρχείο θα πρέπει να ονομάζεται «index.html». Αλλιώς δεν θα εμφανιστεί στο internet. Όταν κάνουμε παραδείγματα τοπικά στον υπολογιστή μας τότε το όνομα αρχείου είναι αδιάφορο. Όταν όμως το ανεβάσουμε στο internet, τότε αυτό που θα ανοίξει πρώτο (όταν πατήσουμε το domain) θα είναι το αρχείο index.html. Στη συνέχεια μέσω συνδέσμων αυτό το αρχείο μπορεί να καλέσει άλλα αρχεία.

Η γλώσσα HTML είναι η βασική γνώση που είναι απαραίτητη οποιοσδήποτε αποφασίσει να ασχοληθεί με κατασκευή ιστοσελίδων. Πλέον όμως η τεχνολογία έχει προχωρήσει πολύ και οι ιστοσελίδες δεν κατασκευάζονται με τη γλώσσα html. Συνήθως χρησιμοποιούμε wordpress ή joomla για την κατασκευή ιστοσελίδων. Για την κατασκευή ηλεκτρονικών καταστημάτων χρησιμοποιείται το open cart ή το presta.

Εάν θέλετε να αναθέσετε σα κάποια εταιρεία την κατασκευή της ιστοσελίδας σας τότε η πρότασή μας είναι να επικοινωνήσετε με την εταιρεία dreamweaver.gr η οποία μπορεί να αναλάβει όχι μόνο την κατασκευή μιας εξαιρετικής ιστοσελίδας αλλά μπορεί επιλπέον να αναλάβει και την προώθησή της τόσοσ στο google όσο και στα κοινωνικά δίκτυα.