Mάθημα 1ο εισαγωγή στην html

15
ΟΔΗΓΟΣ ΕΚΜΑΘΗΣΗΣ ΗΤML Copyright © 2013 Το προϊόν δημιουργήθηκε για καθαρά εκπαιδευτικούς σκοπούς και σχεδιάστηκε από: Σαρρής Ντίνος You created this PDF from an application that is not licensed to print to novaPDF printer (http://www.novapdf.com)

Transcript of Mάθημα 1ο εισαγωγή στην html

Page 1: Mάθημα 1ο εισαγωγή στην html

ΟΔΗΓΟΣ ΕΚΜΑΘΗΣΗΣ ΗΤML

Copyright © 2013

Το προϊόν δημιουργήθηκε για καθαρά εκπαιδευτικούςσκοπούς και σχεδιάστηκε από:

Σαρρής Ντίνος

You created this PDF from an application that is not licensed to print to novaPDF printer (http://www.novapdf.com)

Page 2: Mάθημα 1ο εισαγωγή στην html

ΕισαγωγήΕισαγωγή στιςστις έννοιεςέννοιες

1. Τι είναι HTML;

•Τι σημαίνουν τα αρχικά HTML;• Ποιος είναι ο ορισμός της ΗΤΜL;

2. Ποια η χρησιμότητα της ΗΤΜL;

• Σε τι εξυπηρετεί να γνωρίζει κανείς κώδικα HTML;

3. Πρώτη επαφή με σύνταξη σε ΗΜΤL

•Με ποιο πρόγραμμα θα δουλεύω ΗTML;

•Γενικά η Δομή της

Mάθημα 1ο-Εισαγωγή στην ΗTMLΤι θα δούμε σε αυτό το μαθημα:

You created this PDF from an application that is not licensed to print to novaPDF printer (http://www.novapdf.com)

Page 3: Mάθημα 1ο εισαγωγή στην html

1.Τι είναι HTML;

Πρώτα απ’όλα τι είναι htmlΗ HTML είναι η γλώσσα με την οποία

κατασκευάζουμε ιστοσελίδες.

Τα ακρωνύμια της HTML σημαίνουν στα αγγλικά HyperTextMarkup Language δηλαδή γλώσσα μορφοποίησηςυπερκειμένου* και είναι η βασική γλώσσα με την οποίαπραγματοποιείται η δόμηση σελίδων του Παγκόσμιου Ιστού.

You created this PDF from an application that is not licensed to print to novaPDF printer (http://www.novapdf.com)

Page 4: Mάθημα 1ο εισαγωγή στην html

Η html δεν είναι μια γλώσσα προγραμματισμού καθεαυτόν. Είναι μια περιγραφική γλώσσα, δηλαδή ένας ειδικός τρόποςγραφής κειμένου. Aποτελεί υποσύνολο της γλώσσας SGML (Standard Generalized Markup Language) που επινοήθηκε απότην IBM προκειμένου να λυθεί το πρόβλημα της μητυποποιημένης εμφάνισης κειμένων στα διάφορα υπολογιστικάσυστήματα. Ο φυλλομετρητής αναγνωρίζει αυτόν τον τρόπογραφής και εκτελεί τις εντολές που περιέχονται σε αυτόν. Αξίζεινα σημειωθεί ότι η html είναι η πρώτη και πιο διαδεδομένηγλώσσα περιγραφής της δομής μιας ιστοσελίδας.

Ορισμός

You created this PDF from an application that is not licensed to print to novaPDF printer (http://www.novapdf.com)

Page 5: Mάθημα 1ο εισαγωγή στην html

*Συντομη Ιστορική Αναδρομή γιαόσους ενδιαφέρονται*

Το 1990, ο Tim Berners-Lee από το CERN, το Ευρωπαϊκό επιστημονικό εργαστήριομοριακής φυσικής της Γενεύης, δημιούργησε ένα νέο πρωτόκολλο με το οποίο θαμπορούσαν να μεταφέρονται κάθε είδος αρχείου και αντικειμένου μέσα από το Διαδίκτυο. Το πρωτόκολλο αυτό ονομάστηκε HTTP (HyperText Transfer Protocol) και σηματοδότησετην αρχή του παγκόσμιου όπως το ξέρουμε σήμερα. Ο Tim πριν ακόμα πάει στο CERN είχε ήδη εργαστεί στην δημιουργία και προβολή κειμένων και είχε δημιουργήσει ήδη τοπρώτο σύστημα υπερκειμένου για προσωπική του χρήση το 1980.

Οι σελίδες που ήταν η βάση του παγκόσμιου ιστού ήταν γραμμένες στην πρώτη έκδοσητης γλώσσα HTML.

Το 1994 αναπτύσσεται το πρότυπο HTML 2.0 από ένα διεθνή οργανισμό (Internet Engineering Task Forse). H επόμενη έκδοση η 3.0 δεν έγινε αποδεκτή από τις Microsoft και Netscape οπότε γρήγορα αντικαταστάθηκε από την έκδοση 3.2 (1996). Η τελευταίαπεριελάμβανε πολλές από τις σημάνσεις, τα λεγόμενα tags, που είχαν εισάγει οι δύοεταιρίες. Η έκδοση 4.0 παρουσιάστηκε τον Ιούνιο του 1997.

Συνοπτικά, η HTML σε ένα πέρασμα από HTML, HTML+, HTML 2, HTML 3.2 καιτελικά , HTML 4. από μια απλή γλώσσα παρουσίασης κειμένων με μορφοποίησης έχεισήμερα δυνατότητες εμφάνισης κινούμενων γραφικών εικόνων και άλλων σπέσιαλ εφέ.

You created this PDF from an application that is not licensed to print to novaPDF printer (http://www.novapdf.com)

Page 6: Mάθημα 1ο εισαγωγή στην html

2.Ποια η χρησιμότητα της ΗΤΜL;

Οι ιστοσελίδες που επισκεπτόμαστε στοInternet δεν είναι τίποτε άλλο παρά αρχεία ταοποία περιέχουν κώδικα γραμμένο στηνγλώσσα HTML. Άρα αν κάποιος γνωρίζει νασυντάσει κώδικα από html τότε ξέρει ένα απότα βασικά συστατικά για να δημιουργήσει έναweb site.

You created this PDF from an application that is not licensed to print to novaPDF printer (http://www.novapdf.com)

Page 7: Mάθημα 1ο εισαγωγή στην html

3.Πρώτη επαφή με σύνταξη σε ΗΜΤL

Προκειμένου να γράψουμε στον κώδικα htmlτο μόνο που θα χρειαστούμε είναι έναςαπλός επεξεργαστής κειμένου (text editor) όπως το Σημειωματάριο (Notepad) τωνWindows ή το Kate των Linux είναι αρκετόγια να φτιάξουμε τις ιστοσελίδες μας.

You created this PDF from an application that is not licensed to print to novaPDF printer (http://www.novapdf.com)

Page 8: Mάθημα 1ο εισαγωγή στην html

Με ποιο πρόγραμμα θα δουλεύωΗTML;

Το πρόγραμμα που χρησιμοποιούμε στονοδηγό εκμάθησης λέγεται Notepad++ κιαποτελεί έναν αρκετά εύχρηστο (ΗΤΜL editor)επεξεργαστή HTML κώδικα. Μπορείτενα τον βρείτε στη καρτέλα «Χρησιμο Υλικο»και να τον μεταφορτώσετε δωρεάν στονυπολογιστή σας.

You created this PDF from an application that is not licensed to print to novaPDF printer (http://www.novapdf.com)

Page 9: Mάθημα 1ο εισαγωγή στην html

Δομή μιας απλής ΗΤΜL σελίδας

ΞΕΚΙΝΗΜΑΑς ξεκινήσουμε με ένα απλό παράδειγμα μιας ιστοσελίδας,

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

Αφού ανοίξετε τον επεξεργαστή της προτίμησής σαςπληκτρολογήστε τον κώδικα όπως ακριβώς τον βλέπετε<html><body>This is my first page.</body></html>

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

You created this PDF from an application that is not licensed to print to novaPDF printer (http://www.novapdf.com)

Page 10: Mάθημα 1ο εισαγωγή στην html

Για να μπορέσει η σελίδα να δημιουργηθεί θα πρέπει πρώτανα αποθηκευτεί ο κώδικας που δημιουργήσατε σε ένα αρχείο κιέπειτα να ανοιχτεί με το φυλλομετρητή σας είτε είναι ο internetexplorer,chrome κτλπ.

Πηγαίνουμε πάνω αριστερά και βρίσκουμε το μενού «Αρχείο»και αφού το κλικάρουμε βρίσκουμε την «Αποθηκευση ως»όπου επιλεγουμε το όνομα που θα του δώσουμε αλλά και τοντύπο του αρχείου . Θυμηθείτε να δώσετε στο αρχείο τον τύπο«Hyper text Markup Language file» τον οποίο θα βρείτε πολύεύκολα στο μενού κάτω ακριβώς από το όνομα πατώντας απλάτο πλήκτρο “H”.

Θυμηθείτε ταβήματα

You created this PDF from an application that is not licensed to print to novaPDF printer (http://www.novapdf.com)

Page 11: Mάθημα 1ο εισαγωγή στην html

Δημιουργία της πρώτης μαςσελίδας!

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

This is my first page.

You created this PDF from an application that is not licensed to print to novaPDF printer (http://www.novapdf.com)

Page 12: Mάθημα 1ο εισαγωγή στην html

Αυτοαξιολόγηση

Η ΗΤΜL είναι:1.μια γλώσσα που επιτρέπει την επεξεργασία

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

Για να δούμε αν μας έμειναν κάποια βασικά στοιχεία:

Προσπαθήστε να βρείτε τη σωστή απάντηση χωρίς ναανατρέξετε για βοήθεια στον οδηγό

You created this PDF from an application that is not licensed to print to novaPDF printer (http://www.novapdf.com)

Page 13: Mάθημα 1ο εισαγωγή στην html

Κώδικας HTML είναι:1. μια σειρά από μη επεξεργασμένα σύμβολα2. ένα σύνολο επεξεργαστών σελίδας3. ένα σύνολο στοιχείων και συμβόλων που

απαιτούνται για τη σύνταξη σελίδων4. μια ομάδα χαρακτηριστικών που είναι

εμφανή σε κάθε ιστοσελίδα καιτροποποιήσιμα από τον καθένα

Αυτοαξιολόγηση

You created this PDF from an application that is not licensed to print to novaPDF printer (http://www.novapdf.com)

Page 14: Mάθημα 1ο εισαγωγή στην html

Για να συντάξω κώδικα ΗΤΜL:1. χρειάζομαι ένα πρόγραμμα περιήγησης στο

διαδίκτυο όπως Chrome,Internet Explorer κ.α.2. χρειάζομαι αποκλειστικά προγράμματα επί πληρωμή

για τη δημιουργία εμφανίσιμων sites4.χρησιμοποιώ ένα πρόγραμμα web design

3. χρειάζομαι προγράμματα που είναι γνωστά ωςεπεξεργαστές κειμένου σαν το Νotepad κ.α.

Αυτοαξιολόγηση

You created this PDF from an application that is not licensed to print to novaPDF printer (http://www.novapdf.com)

Page 15: Mάθημα 1ο εισαγωγή στην html

Τέλος 1ου Μαθήματος

O οδηγός μαθημάτωνείναι μια προσφορά της

“Digital Learning”

Copyright © 2013

You created this PDF from an application that is not licensed to print to novaPDF printer (http://www.novapdf.com)