Black Friday • Black Friday •
β Επαλ Σχεδιασμος Ιστοτοπων
Εκπαιδευση

β επαλ, Σχεδιασμός και Ανάπτυξη Ιστοτόπων, HTML, CSS

5/5 - (2 votes)
β Επαλ Σχεδιασμος Ιστοτοπων

Β ΕΠΑΛ – ΣΧΕΔΙΑΣΜΟΣ ΚΑΙ ΑΝΑΠΤΥΞΗ ΙΣΤΟΤΟΠΩΝ

Περιεχόμενα Εμφάνιση

Κώδικας HTML, Kώδικας CSS Mέρος 1

Δύο βασικές γλώσσες που πρέπει να γνωρίζεται για την υλοποίηση μια ιστοσελίδας είναι η HTML(HyperText Markup Language) και η CSS (Cascading Style Sheets).

Άρα σε αυτό το άρθρο θα εξηγήσουμε τι είναι η html και η css. Που μπορούμε να πληκτρολογήσουμε τις πρώτες γραμμές κώδικα.

5/5 - (2 votes)

Ένα χρήσιμο άρθρο για καθηγητές και μαθητές για το βιβλίο της β ΕΠΑΛ “Σχεδιασμος και αναπτυξη Ιστοτοπων”. Στο κάτω μέρος θα βάλουμε βίντεο tutorial και σημαντικές ιστοσελίδες για την εκμάθηση html, css.

Ξεκινάμε με απλά ερωτήματα για την Β ΕΠΑΛ:

  1. Τι είναι παγκόσμιος ιστός (World Wide Web);
  2. Τι είναι HTML;
  3. Με ποια εργαλεία μπορούμε να κτίσουμε μία απλή ιστοσελίδα;
  4. Τι είναι υπερ-σύνδεση;
  5. Τι είναι τα tags?
  6. Ποια είναι τα σημαντικότερα tags;

β επαλ Σχεδιασμος Ιστοτόπων

Τι είναι παγκόσμιος ιστός (World Wide Web) – Β ΕΠΑΛ;

Στο βιβλίο “ΣΧΕΔΙΑΣΜΟΣ ΚΑΙ ΑΝΑΠΤΥΞΗ ΙΣΤΟΤΟΠΩΝ” της  Β ΕΠΑΛ, Παγκόσμιος ιστός είναι το σύνολο των ιστοσελίδων που συνδέονται στο διαδίκτυο. Κάθε ιστοσελίδα περιέχει όλες τις βασικές υπηρεσίες διαδικτύου που ξέρουμε. Περιέχει και βίντεο, μουσική, εικόνες, κείμενο και υπερ-κείμενο. Εφαρμογές: Internet Explorer, Google Chrome, Mozilla Firefox, Safari, Opera. Όλα αυτά τα προγράμματα λέγονται browsers.

Ο παγκόσμιος ιστός (αγγ.: World Wide Web ή www) είναι ένα ανοιχτό σύστημα διασυνδεδεμένων πληροφοριών και πολυμεσικού περιεχομένου, που επιτρέπει στους χρήστες του Διαδικτύου να αναζητήσουν πληροφορίες μεταβαίνοντας από ένα έγγραφο στο άλλο.[1].

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

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

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

Η τεχνολογία του ιστού δημιουργήθηκε το 1989 από τον Βρετανό Τιμ Μπέρνερς Λη, που εκείνη την εποχή εργαζόταν στον Ευρωπαϊκό Οργανισμό Πυρηνικών Ερευνών (CERN) στην Γενεύη της Ελβετίας. Το όνομα που έδωσε στην εφεύρεσή του ο ίδιος ο Lee είναι World Wide Web, όρος γνωστός στους περισσότερους από το “www“.

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

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

Αν σκεφτεί, όμως, κανείς τον βαθμό ιεράρχησης με τον οποίο λειτουργούν οι μηχανές αναζήτησης του ιστού, όπως για παράδειγμα το google, γίνεται εύκολα κατανοητό ότι στην πράξη κάτι τέτοιο δεν συμβαίνει, τουλάχιστον στον βαθμό που το είχε οραματιστεί ο Lee. Πηγή: wikipedia

Τι είναι HTML στο βιβλίο της Β ΕΠΑΛ;

Σημαίνει HyperText Markup Language και είναι η πιο απλή γλώσσα για κτίσιμο ιστοσελίδων. Με την HTML μπορείτε να δημιουργήσετε τον δικό σας ιστότοπο.

Πως είναι ο html κώδικας

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Λίγα λόγια τι είναι η κάθε γραμμή κώδικα. Η <!DOCTYPE html> δήλωση ορίζει ότι αυτό το έγγραφο είναι ένα έγγραφο HTML5. Το <html> στοιχείο είναι το ριζικό στοιχείο μιας σελίδας HTML.

To <head> στοιχείο περιέχει μετα-πληροφορίες σχετικά με τη σελίδα HTML. To <title> στοιχείο καθορίζει έναν τίτλο για τη σελίδα HTML (ο οποίος εμφανίζεται στη γραμμή τίτλου του προγράμματος περιήγησης ή στην καρτέλα της σελίδας).

To <body> στοιχείο ορίζει το σώμα του εγγράφου και είναι ένα σκέλος για όλα τα ορατά περιεχόμενα, όπως επικεφαλίδες, παραγράφους, εικόνες, υπερσυνδέσμους, πίνακες, λίστες κ.λπ.

Το <h1> στοιχείο ορίζει μια μεγάλη επικεφαλίδα και τέλος το  <p> είναι το στοιχείο που ορίζει μια παράγραφο. Παράδειγμα.

Με ποια εργαλεία μπορούμε να κτίσουμε μία απλή ιστοσελίδα στο σχολείο, Β ΕΠΑΛ;

Με απλό ή σύνθετο επεξεργαστή κειμένου (notepad, notepad++, word). Το αρχείο θα πρέπει να αποθηκευτεί ως αρχείο ιστοσελίδας με κατάληξη html. Υπάρχουν άπειρα εργαλεία για ιστοσελίδες, θα αναφέρουμε κάποια. Όπως Microsoft Frontpage, Netscape Composer, Coffee Cup, Hot Dog, Arachnophilia, HomeSite, Visual Studio Code, Quick Edit και Macromedia Dreamweaver. Εμείς συχνά χρησιμοποιούμε το Dreamweaver και στα σχολεία το Notepad ++.

Τι είναι υπερ-σύνδεση;

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

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

Το συνδεδεμένο κείμενο είναι αυτό που είναι γνωστό ως κείμενο αγκύρωσης . Για παράδειγμα, όταν κάνετε κλικ στη φράση “anchor text” στην προηγούμενη πρόταση, σας κατευθύνει σε μια σελίδα που περιέχει τον ορισμό ενός anchor text.

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

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

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

Είναι ζωτικής σημασίας για τη βελτίωση του SEO ενός ιστότοπου, μαζί με το προφίλ backlink του.

Τι είναι τα tags σε html κωδικα, css κώδικα?

Είναι η βασικότερες εντολές της html που μας δίνει την αρχή και το τέλος κάποιας μορφοποίησης ιστοσελίδας. Κάποια από αυτά είναι

Το στοιχείο <font> χρησιμοποιήθηκε για τον καθορισμό τυπογραφικών στυλ εμφάνισης. Έχει καταργηθεί και οι γραμματοσειρές θα πρέπει να έχουν στυλ με CSS.

Το στοιχείο <strong> χρησιμοποιείται για τον προσδιορισμό κειμένου που έχει μεγαλύτερη σημασία από το περιβάλλον κείμενο. Από προεπιλογή, όλα τα προγράμματα περιήγησης αποδίδουν κείμενο <strong> με έντονη γραμματοσειρά.

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

Το στοιχείο <form> χρησιμοποιείται για τη δημιουργία μιας φόρμας HTML. Το στοιχείο <form> δεν δημιουργεί στην πραγματικότητα πεδία φόρμας, αλλά χρησιμοποιείται ως γονικό κοντέινερ για να κρατήσει πεδία φόρμας όπως στοιχεία <input> και <textarea>.

Το στοιχείο <br> χρησιμοποιείται για την εισαγωγή μιας αλλαγής γραμμής ή μεταφοράς-επιστροφής μέσα σε ένα γονικό στοιχείο, όπως μια παράγραφο, χωρίς να ξεσπάσει από το γονικό κοντέινερ.

Το στοιχείο <tr> χρησιμοποιείται για την ομαδοποίηση των τιμών <th> ή <td> σε μία μόνο γραμμή επικεφαλίδων πίνακα ή τιμών δεδομένων. Το στοιχείο <tr> μπορεί να είναι άμεσο θυγατρικό ενός στοιχείου <table> ή να είναι ένθετο σε ένα γονικό στοιχείο <thead>, <tfoot> ή <tbody>.

Θα ακολουθήσει και δεύτερο άρθρο για την css. Stay Tuned…..

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

Avatar of XNWeb Team
XNWeb Team