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

Web Design: HTML, CSS – Part One
Εισαγωγικές έννοιες
(από τις διαφάνειες της συμβούλου ΠΕ86 Τζελέπη Σοφία)

Τι θα φτιάξουμε
Τι ακριβώς είναι η HTML
Σκελετός όλων των ιστοσελίδων.
Καθορίζει τη δομή και την

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

σελίδα του διαδικτύου, επιλέξτε
«Προβολή Πηγαίου Κώδικα" και θα
δείτε την HTML σε έναν πίνακα της
οθόνης σας.
Τι είναι η HTML;
HTML (HyperText Markup Language): Γλώσσα Σήμανσης Υπερκειμένου
Το Υπερκείμενο είναι κείμενο που

Ο υπολογιστής μπορεί να
εμφανίζεται σε έναν υπολογιστή ή σε μία
ερμηνεύσει απλό (raw) κείμενο
συσκευή και παρέχει πρόσβαση σε άλλο
που περιβάλλεται από στοιχεία
κείμενο μέσω συνδέσμων γνωστών ως
HTML.
υπερσύνδεσμοι.
Ας ξεκινήσουμε
Η εκμάθηση της HTML είναι το πρώτο βήμα στη
δημιουργία ιστότοπων.
Μπορούμε στη συνέχεια να ενσωματώσουμε

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

προσθήκης και τροποποίησης βασικού
περιεχομένου σε μια html ιστοσελίδα, όπως
κείμενο, εικόνες και βίντεο. Μην ανησυχείτε αν
οι ιστότοποι φαίνονται άσχημοι - απλά
αρχίζουμε.
Ερωτήματα
Γιατί χρειαζόμαστε να δομήσουμε ένα απλό κείμενο;
• Γρήγορη σάρωση σε περιεχόμενο για αναζήτηση σημαντικών στοιχείων
• Χρήστες με προβλήματα όρασης
• Απαίτηση των μηχανών αναζήτησης
Γιατί ο browser χρειάζεται να ξέρει τον τύπο του απλού κειμένου που θα εμφανίσει στις οθόνες
μας;
• Για να ξέρει τον τρόπο παρουσίασης
• Για να δημιουργήσει μία δομή που μπορούν να την χρησιμοποιήσουν άλλα προγράμματα
στη συνέχεια (screen readers)
http://brackets.io/ (Για σύνταξη html, css, javascript)
8
Τι πρέπει να θυμόμαστε;
Όλα αρχίζουνε με ένα < ……>

και τελειώνουν με ένα </…….>
9
Ζεσταινόμαστε
Πληκτρολογήστε το
όνομά σας μεταξύ των
<h1> </h1>
Ανατομία της HTML
The body
Όλο το περιεχόμενο που θέλουμε να εμφανιστεί στην ιστοσελίδα μας, το

τοποθετούμε μεταξύ των body tag
<body> </body>
Ιεραρχική Δομή της html
Η κατανόηση της ιεραρχίας HTML είναι

σημαντική επειδή τα υποκείμενα στοιχεία
μπορούν να κληρονομήσουν τη συμπεριφορά
και το στυλ από το γονικό τους στοιχείο. Θα
μάθετε περισσότερα σχετικά όταν ξεκινήσετε
να ενσωματώνετε CSS στα html αρχεία σας.
Div
Ένα από τα πιο δημοφιλή στοιχεία της HTML είναι το στοιχείο <div>. Το
στοιχείο μας βοηθά να χωρίζουμε τη σελίδα σε τμήματα. Αυτά τα τμήματα
είναι πολύ χρήσιμα για την ομαδοποίηση στοιχείων στη HTML σελίδα σας.
Div
Διαλέξτε ιεραρχία για την ιστοσελίδα σας.

Χαρακτηριστικά (attributes)
Μπορούμε να εμπλουτίσουμε τις ετικέτες

(tags) προσδίδοντάς τους διάφορα
χαρακτηριστικά. Κάθε χαρακτηριστικό
έχει ένα όνομα και μία τιμή. Τα
χαρακτηριστικά που αποδίδουμε στις
ετικέτες μας βοηθάνε στην παροχή
πληροφοριών και στην μορφοποίηση.
Μορφοποίηση κειμένου <em> <strong>
Μορφοποιείστε το κείμενο όπως φαίνεται

παρακάτω
Line break <br>
Μορφοποιείστε το κείμενο όπως φαίνεται
παρακάτω
Ευχαριστώ

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

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

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

Uploaded by

Copyright:

Available Formats

Web Design: HTML, CSS – Part One

(από τις διαφάνειες της συμβούλου ΠΕ86 Τζελέπη Σοφία)

Σκελετός όλων των ιστοσελίδων.

Καθορίζει τη δομή και την

Κάντε δεξί κλικ σε οποιαδήποτε

Το Υπερκείμενο είναι κείμενο που

Μπορούμε στη συνέχεια να ενσωματώσουμε

Προς το παρόν, θα επικεντρωθούμε στον τρόπο

Γιατί χρειαζόμαστε να δομήσουμε ένα απλό κείμενο;

• Γρήγορη σάρωση σε περιεχόμενο για αναζήτηση σημαντικών στοιχείων

• Χρήστες με προβλήματα όρασης

• Απαίτηση των μηχανών αναζήτησης

• Για να ξέρει τον τρόπο παρουσίασης

Όλα αρχίζουνε με ένα < ……>

Όλο το περιεχόμενο που θέλουμε να εμφανιστεί στην ιστοσελίδα μας, το

Η κατανόηση της ιεραρχίας HTML είναι

Διαλέξτε ιεραρχία για την ιστοσελίδα σας.

Μπορούμε να εμπλουτίσουμε τις ετικέτες

Μορφοποιείστε το κείμενο όπως φαίνεται

You might also like