ΜΕΡΟΣ ΔΕΥΤΕΡΟ MS FRONTPAGE Γιάννης Καζανίδης Τεχνολόγος Μηχανολόγος Μηχανικός MSc Πληροφορικής

Μέγεθος: px
Εμφάνιση ξεκινά από τη σελίδα:

Download "ΜΕΡΟΣ ΔΕΥΤΕΡΟ MS FRONTPAGE 2003. Γιάννης Καζανίδης Τεχνολόγος Μηχανολόγος Μηχανικός MSc Πληροφορικής"

Transcript

1 ΜΕΡΟΣ ΔΕΥΤΕΡΟ MS FRONTPAGE 2003 Γιάννης Καζανίδης Τεχνολόγος Μηχανολόγος Μηχανικός MSc Πληροφορικής

2 ΠΙΝΑΚΑΣ ΠΕΡΙΕΧΟΜΕΝΩΝ ΜΕΡΟΣ ΔΕΥΤΕΡΟ...2 MS FRONTPAGE ΙΣΤΟΣΕΛΙΔΕΣ Έννοια και δομή της ιστοσελίδας Περιεχόμενα και στοιχεία ιστοσελίδας Σύνδεσμοι Μέσα για την δημιουργία ιστοσελίδων Η Γλώσσα HTML Η Γλώσσα JAVA Σχεδιασμός και οργάνωση ιστοσελίδων Χρήσιμες συμβουλές για τη δημιουργία ιστοσελίδων Χρώμα - Εικόνες - Ήχος - Βίντεο - Animation ΚΕΦΑΛΑΙΟ ΔΕΥΤΕΡΟ ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML Γενικά Ετικέτες (Tags) Δομή μίας σελίδας HTML Τίτλος Επικεφαλίδες Παράγραφοι Οι Ετικέτες αναλυτικά ΚΕΦΑΛΑΙΟ ΤΡΙΤΟ ΕΙΣΑΓΩΓΗ ΣΤΟ FRONTPAGE Γενικά Προβολές του FrontPage Προβολή Σελίδας (Page View) Προβολή Καταλόγων (Folders View) Προβολή Πλοήγησης (Navigation View) Προβολή υπερσυνδέσμων (Hyperlinks View) Προβολή διεργασιών (Tasks View) Εργασίες στην Προβολή Πλοήγησης Επεξεργασία του τίτλου μιας σελίδας Εισαγωγή νέας σελίδας Μετακίνηση μιας σελίδας στο Site Διαγραφή μιας σελίδας Ιδιότητες και εισαγωγή διεργασίας σε σελίδες Επεξεργασία περιεχομένου σελίδας Άλλες εργασίες στον Front Page Explorer Ο Επεξεργαστής σελίδων του FrontPage Βασικές εργασίες στον Editor Εισαγωγή κειμένου Μορφοποίηση κειμένου Μορφές από Λίστες Μορφές Μετάβασης σε Σελίδα Εισαγωγή εικόνων Γραμμή εργαλείων Pictures Δημιουργία Image Map Μορφή Φόντου της Σελίδας Εισαγωγή Υπερσυνδέσμων Δημιουργία συνδέσμου προς μια σελίδα Δημιουργία συνδέσμου με χρήση σελιδοδεικτών Πίνακες Δημιουργία ενός πίνακα Προσθήκη γραμμών και στηλών Διαγραφή γραμμών και στηλών Χρήσιμες εργασίες της γραμμής εργαλείων (Table toolbar) και του μενού (Table) Εισαγωγή Web Component... 66

3 3.9.1 Interactive Button Marquees Hit Counter ΚΕΦΑΛΑΙΟ ΤΕΤΑΡΤΟ ΑΣΚΗΣΕΙΣ...70 Άσκηση Άσκηση Άσκηση Άσκηση Άσκηση Άσκηση Άσκηση Άσκηση

4 ΚΕΦΑΛΑΙΟ ΠΡΩΤΟ 1 ΙΣΤΟΣΕΛΙΔΕΣ 1.1 Έννοια και δομή της ιστοσελίδας Ο παγκόσμιος ιστός πήρε την ονομασία του από τον τρόπο σύνδεσης μεταξύ των εξυπηρετητών του. Στο Διαδίκτυο βρίσκονται συνδεδεμένα τα πάντα, δηλαδή οποιοσδήποτε υπολογιστής μπορεί να προσπελαστεί από οποιονδήποτε άλλον είναι συνδεδεμένος στο δίκτυο και μπορεί να ανακτηθεί οποιαδήποτε πληροφορία υπάρχει σ αυτόν. Οι σελίδες που βρίσκονται στον παγκόσμιο ιστό δημιουργούνται στην πλειοψηφία τους με τη χρήση μιας ειδικής γλώσσας μορφοποίησης γνωστής ως HTML (Hyper Text Markup Language). H γλώσσα αυτή είναι απλή στην εκμάθηση των βασικών της στοιχείων και επιτρέπει την ενσωμάτωση στο κείμενο συνδέσμων, γραφικών στοιχείων, πολυμέσων όπως κινούμενων εικόνων, video ή ήχου, καθώς και τη μορφοποίηση του κειμένου (μέγεθος και είδος γραμμάτων, στοίχιση παραγράφων κλπ) ώστε το αποτέλεσμα που προκύπτει να είναι οπτικά, λειτουργικό και ευχάριστο. 1.2 Περιεχόμενα και στοιχεία ιστοσελίδας Μία σελίδα στον ιστό περιέχει επικεφαλίδες, λίστες με κουκίδες και κείμενο, αλλά και τη δυνατότητα να καλεί άλλα μεγαλύτερα αρχεία, όπως εικόνες, γραφήματα, ήχο και βίντεο. Κάθε σελίδα του ιστού παρουσιάζει ένα προϊόν ή μία υπηρεσία και μπορεί να έχει τα παρακάτω στοιχεία: Εναν τίτλο Μία κύρια επικεφαλίδα Ενα κύριο γραφικό Βασικό κείμενο Συνδέσεις με άλλες σελίδες της τοποθεσίας

5 Συνδέσεις με άλλες τοποθεσίες Δυνατότητα αποστολής ηλεκτρονικού ταχυδρομείου από τους επισκέπτες της σελίδας Επιπρόσθετα στοιχεία όπως γραφικά φόντου, εικόνες, κουμπιά, κινούμενες εικόνες, βίντεο και ήχο. Μετρητή επισκέψεων, βιβλίο επισκεπτών και κυλιόμενα μηνύματα στο κάτω μέρος της σελίδας Φόρμες και γραφήματα που εμφανίζουν ενημερωμένα δεδομένα και πίνακες και διευκολύνουν οικονομικές συναλλαγές. Δυνατότητα πολυμέσων όπως προγράμματα ήχου και κίνησης. Εικόνα 1.1 Σελίδα υπερκειμένου

6 1.3 Σύνδεσμοι Κάθε σελίδα που εμφανίζεται στην οθόνη του υπολογιστή μπορεί να προσπελαστεί από άλλες σελίδες που βρίσκονται στον ίδιο ή σε διαφορετικό εξυπηρετητή με αυτόν που φιλοξενεί την αρχική σελίδα. Αυτό συμβαίνει, επειδή οι σελίδες που μεταφέρονται στον υπολογιστή μας δεν αποτελούν απλά κείμενο αλλά υπερκείμενο (hypertext). Σε αυτές τις σελίδες κάποιες λέξεις, προτάσεις ή ακόμα και εικόνες που αποτελούν συνδέσμους, οι οποίοι όταν επιλεγούν (κάνοντας κλικ επάνω τους με το ποντίκι), έχουν ως αποτέλεσμα την παραπομπή σε κάποια άλλη σελίδα μέσα στον παγκόσμιο ιστό. Για να καταλάβει ο χρήστης του ιστού αν κάποιο στοιχείο της σελίδας του αποτελεί σύνδεσμο ή όχι, αρκεί να μετακινήσει τον δείκτη του ποντικιού του πάνω σ αυτό και αν αυτός αλλάξει από βέλος σε χεράκι, τότε αυτό αποτελεί σύνδεσμο και κάνοντας κλικ πάνω του μπορεί να μεταφερθεί σε άλλη σελίδα. Κάποιος σύνδεσμος μπορεί να μην οδηγεί σε άλλη τοποθεσία ή σε άλλη σελίδα της ίδιας τοποθεσίας αλλά σε κάποιο αρχείο (εικόνα, έγγραφο, ήχο, εκτελέσιμο πρόγραμμα) που προσφέρεται από τον κατασκευαστή της σελίδας. 1.4 Μέσα για την δημιουργία ιστοσελίδων Οι γλώσσες που χρησιμοποιούνται για τη δημιουργία ιστοσελίδων είναι η HTML και, πιο πρόσφατα, η Java και η JavaScript. Οι δύο τελευταίες στην πραγματικότητα εμπλουτίζουν τις ιστοσελίδες. Η επικράτηση της χρήσης της HTML από τους χρήστες, οφείλεται στο γεγονός ότι είναι ιδιαίτερα απλή γλώσσα. Σήμερα υπάρχουν ειδικά πακέτα εφαρμογών που επιτρέπουν στους απλούς χρήστες να δημιουργούν ιστοσελίδες σε HTML, χωρίς την εκμάθηση του κώδικά της. Τα γνωστότερα είναι τα παρακάτω: HTML Assistant Pro, Hot Dog, Web Edit, Hot Metal Pro, GNNpress, Microsoft FrontPage Η Γλώσσα HTML Η γλώσσα HTML πήρε το όνομά της από τα αρχικά των λέξεων Hyper Text Markup Language (Γλώσσα Χαρακτηρισμού Υπερκειμένου). Bασίζεται στην SGML (Standard Generalization Markup Language), που είναι ένα μεγαλύτερο σύστημα επεξεργασίας εγγράφων. Η HTML είναι μια γλώσσα χαρακτηρισμού που δίνει στους φυλλομετρητές τη δυνατότητα της ανάγνωσης. Πρόκειται για γλώσσα περιγραφής της δομής ενός εγγράφου

7 και όχι της πραγματικής του παρουσίασης. Είναι με λίγα λόγια, μέθοδος κωδικοποίησης των δεδομένων για μια κατάλληλη παρουσίασή τους στο WWW. Την παρουσίαση αυτή την αναλαμβάνουν οι φυλλομετρητές οι οποίοι βασίζονται στη περιγραφόμενη από την HTML δομή. Για τη δημιουργία ιστοσελίδων με HTML χρησιμοποιούνται απλοί εκδότες (editors) κειμένου, επεξεργαστές κειμένου, ειδικοί εκδότες HTML, οι οποίοι έχουν ενσωματωμένες αρκετές λειτουργίες της HTML και ενσωματωμένοι εκδότες των φυλλομετρητών. 'Ενα έγγραφο γραμμένο στην γλώσσα HTML είναι ένα απλό ASCII κείμενο. Ο χρήστης που γνωρίζει τη γλώσσα χρησιμοποιεί εκδότες κειμένου ή εκδότες HTML. Διαφορετικά χρησιμοποιεί τον ενσωματωμένο εκδότη του φυλλομετρητή. Η δεύτερη επιλογή έχει δύο πλεονεκτήματα για το χρήστη. Αφενός δεν χρειάζεται να γνωρίζει τη γλώσσα HTML, γιατί ο κώδικας παράγεται αυτόματα την ώρα που σχεδιάζεται η ιστοσελίδα και αφετέρου μπορεί να "τρέξει" τη σελίδα στον ίδιο το φυλλομετρητή για να δει το αποτέλεσμα. Στην περίπτωση λοιπόν που κάποιος έχει την ικανότητα και τις γνώσεις στην γλώσσα HTML, μπορεί να κατασκευάσει με έναν απλό κειμενογράφο όμορφες σελίδες για το web. Η γλώσσα HTML παρουσιάζεται αναλυτικότερα σε επόμενο κεφάλαιο Η Γλώσσα JAVA H Java είναι μια αντικειμενοστραφής γλώσσα προγραμματισμού, που απελευθερώνει τους σχεδιαστές ιστοσελίδων από το να δημιουργούν περίπλοκες σελίδες. Λειτουργεί σε περιβάλλον δικτύου και προσφέρει στις ιστοσελίδες δυνατότητες πραγματικής αλληλεπίδρασης με τους χρήστες. Mε την Java μπορούμε να δημιουργήσουμε προγράμματα σύροντας αντικείμενα στην οθόνη αντί να γράφουμε περίπλοκο πρόγραμμα με το χέρι. Μοιάζει με την γλώσσα προγραμματισμού C++, και επιτρέπει στους προγραμματιστές να δημιουργούν μικρά αυτόνομα προγράμματα που μπορούν να εισαχθούν σε μια σελίδα του ιστού. Επίσης μπορούν να δημιουργηθούν φόρμες ή εισαγωγή στοιχείων σε βάσεις δεδομένων, χωρίς να απαιτεί από τον σχεδιαστή της φόρμας τη γνώση προγραμματισμού. Είναι συμβατή από όλους τους σύγχρονους φυλλομετρητές που μπορούν να χρησιμοποιούν μικρά προγράμματα Java (applets) σε οποιασδήποτε σελίδα σχεδιάστηκε με την HTML. Εκτός από τις γλώσσες HTML και JAVA υπάρχουν και άλλα μέσα για την δημιουργία ιστοσελίδων όπως τα προγράμματα Frontpage και FrontPage Express της Microsoft

8 Τα προγράμματα FrontPage και FrontPage Express πρόκειται για προγράμματα επεξεργασίας σελίδων HTML με οπτικό τρόπο. Μάλιστα το FrontPage Express είναι ενσωματωμένο στον Internet Explorer. Χρησιμοποιώντας αυτά τα προγράμματα μπορούμε με τον ίδιο τρόπο που γράφουμε ένα κείμενο και το μορφοποιούμε με κάποιον επεξεργαστή κειμένου μπορούμε να αλλάξουμε τη στοίχιση, τα χρώματα και να προσθέσουμε εικόνες, φόρμες και άλλα στοιχεία. Η δυνατότητα των φυλλομετρητών να λειτουργούν και εκτός σύνδεσης (off-line) με το δίκτυο, είναι πολύ χρήσιμη κατά τη διάρκεια της δημιουργίας και των δοκιμών των ιστοσελίδων. 1.5 Σχεδιασμός και οργάνωση ιστοσελίδων Ο όρος web site αναφέρεται σε ένα σύνολο ιστοσελίδων, οι οποίες είναι ιεραρχικά συνδεδεμένες πάνω σε ένα λογικό ιστό μιας ηλεκτρονικής τοποθεσίας. Ο σχεδιασμός των ιστοσελίδων μιας ηλεκτρονικής τοποθεσίας είναι μια σημαντική εργασία, στην οποία πρέπει να προβεί ο σχεδιαστής, γιατί θα αποτελέσει την πυξίδα πλοήγησής τους. Ο κάθε χρήστης ή συνδρομητής του Internet μπορεί να δημιουργήσει τη δική του ηλεκτρονική τοποθεσία. Η τοποθεσία αυτή τοποθετείται σε έναν εξυπηρετητή (web server) και είναι προσβάσιμη από όλους τους άλλους χρήστες. Το κάθε web site, ενώ δεν λειτουργεί απαραίτητα γραμμικά, πρέπει να δομηθεί με τέτοιο τρόπο ώστε να μην αποπροσανατολίζει τους χρήστες που το επισκέπτονται. Πρέπει να διαθέτει την δυνατότητα επιστροφής στην αρχική σελίδα. Την αφετηρία αποτελεί η αρχική σελίδα (home page), η οποία είναι η είσοδος για την περιήγηση στο web site. Η σελίδα αυτή περιέχει, περιληπτικά συνήθως, τα συνδεμένα δεδομένα στα οποία οδηγεί, είτε σε μορφή πίνακα, γραφικών κλπ. H περιήγηση γίνεται ακολουθώντας τους συνδέσμους (links). Η οργάνωση των ιστοσελίδων ακολουθεί τις γενικές αρχές σχεδιασμού ενός υπερμέσου. Διακρίνονται τρεις διαφορετικοί τρόποι οργάνωσης ιστοσελίδων. Η γραμμική (σειριακή), η ιεραρχική και η δικτυωτή οργάνωση. Στην πράξη, υπάρχουν συνδυασμοί ιεραρχικής και δικτυωτής δομής. Επίσης, το WWW παρέχει τη δυνατότητα να σύνδεσης ιστοσελίδων του

9 χρήστη με ιστοσελίδες που έχουν δημιουργηθεί από άλλους, αρκεί αυτός να γνωρίζει την URL διεύθυνσή τους. Στη γραμμική ή σειριακή οργάνωση οι σύνδεσμοι μεταφέρουν το χρήστη από τη μια σελίδα στην επόμενη με σειριακό τρόπο. Είναι η απλούστερη οργάνωση και χρησιμοποιείται σε ηλεκτρονικές τοποθεσίες των οποίων όλες οι ιστοσελίδες είναι ισοδύναμες. Η οργάνωση αυτή θυμίζει τη διαδικασία κάθετης παραγωγής ενός προϊόντος, το οποίο πρέπει να περάσει από όλα τα στάδια. Εικόνα 1.2 Γραμμική οργάνωση ιστοσελίδων Στην ιεραρχική οργάνωση, οι χρήστες διατρέχουν τη δομή από πάνω, όπου τα δεδομένα είναι γενικότερα και περιληπτικά, προς τα κάτω, όπου η παρουσίαση είναι περισσότερο εξειδικευμένη. Εξ αιτίας των πολλών επιπέδων, οι δημιουργοί πρέπει να είναι πολύ προσεχτικοί στο σχεδιασμό των συνδέσμων ώστε να διασφαλίζεται ο προσανατολισμός του επισκέπτη. Αρχική σελίδα Εικόνα 1.3 Ιεραρχική οργάνωση ιστοσελίδων

10 Στη δικτυωτή οργάνωση, οι χρήστες διατρέχουν τη δομή από πάνω προς τα κάτω αλλά και οριζόντια. Μπορούν συνεπώς να προσπελάσουν απευθείας διαφορετικές σελίδες του ίδιου επιπέδου ή διαφορετικών επιπέδων. Εξ αιτίας των πολλών επιπέδων και της μεγάλης ποικιλίας των δυνατών διαδρομών, οι δημιουργοί πρέπει (όπως και στην ιεραρχική δομή) να είναι πολύ προσεχτικοί στο σχεδιασμό και τη χρήση των συνδέσμων ώστε ο χρήστης να μην αποπροσανατολίζεται. Αρχική σελίδα Εικόνα 1.4 Δικτυωτή οργάνωση ιστοσελίδων Υπάρχουν πολλά εργαλεία λογισμικού για τη δημιουργία των ιστοσελίδων. Ένα από αυτά είναι ο φυλλομετρητής Netscape Communicator που παρέχει, εκτός των άλλων, και τη δυνατότητα δημιουργίας ιστοσελίδων με την εφαρμογή Page Composer. 1.6 Χρήσιμες συμβουλές για τη δημιουργία ιστοσελίδων Τα ερωτήματα και οι προβληματισμοί που πρέπει να τεθούν πριν ξεκινήσει κανείς τη δημιουργία ιστοσελίδων είναι: Ποιος ο σκοπός της δημιουργίας του web-site; Για διαφημιστικούς λόγους της επιχείρησής μας, για λόγους προβολής κάποιου συγκεκριμένου προϊόντος, για προβολή του ίδιου μας τον εαυτού ή μήπως για να κάνουμε εντύπωση σε κάποιους;

11 Ποιο το επιθυμητό ακροατήριο; Θέλουμε η ιστοσελίδα μας να τραβά την προσοχή τυχαίων επισκεπτών ή απευθύνεται σε συγκεκριμένα άτομα; Τι είδος άτομα θέλουμε να είναι οι επισκέπτες της ιστοσελίδας μας; Ποιο το περιεχόμενο των σελίδων; Θέλουμε η σελίδα μας να παρέχει μια πληθώρα πληροφοριών ή απλώς να δίνει μια γεύση των πληροφοριών ή της εικόνας πον κρύβεται στην εταιρεία μας; Τα στοιχεία που πρέπει να προσέξει είναι τα παρακάτω: σωστή οργάνωση των σελίδων καλαισθησία σαφήνεια "ελαφριές" σελίδες (όχι "φόρτωμα" με πολλά γραφικά) εκμετάλλευση ολόκληρου του χώρου της σελίδας οθόνης έλεγχο ορθογραφίας. σωστή επιλογή φόντου και χρωμάτων. σωστές υποδείξεις. συνδέσμους για επιστροφή στην αρχική σελίδα. δοκιμή εμφάνισης ιστοσελίδων σε περισσότερους φυλλομετρητές. επιλογή ανάλυσης οθόνης κατά τη σχεδίαση. Αφού έχουμε αποκτήσει μια σαφή εικόνα τον περιεχομένου και της δομής, που θα έχουν oι ιστοσελiδες μας, θα πρέπει να μεταφέρουμε όλα αυτά τα στοιχεία και τις πληροφορίες σε μορφή, που θα μπορεί να διακινηθεί μέσα στο Internet. Τα βασικότερα στοιχεία που μπορούμε να συμπεριλάβουμε στις webσελίδες μας είναι τα ακόλουθα: Μορφοποιημένο κείμενο Εικόνες και γραφικά

12 Video Σύνδεσμοι προς άλλα έγγραφα Μουσική και ομιλία Διαλογικές φόρμες Πίνακες Εφαρμογές Βάσεων Δεδομένων Χρώμα - Εικόνες - Ήχος - Βίντεο - Animation Το χρώμα είναι ένα στοιχείο που μπορεί να προσδώσει στις σελίδες μια πιο ευχάριστη αισθητικά όψη. Οι εικόνες επίσης είναι απαραίτητο στοιχείο των ιστοσελίδων. Δεν πρέπει όμως να διαφεύγει το γεγονός ότι καταλαμβάνουν πολύ μεγάλο χώρο και αυτό έχει τις συνέπειές του κατά το "φόρτωμα" της σελίδας. Συνιστάται λογική χρήση εικόνων στις ιστοσελίδες. Πρέπει να αποφεύγονται οι μεγάλες διαστάσεις και να χρησιμοποιούνται μορφές εικόνων με καλή συμπίεση, ή, αυτές που δεν διογκώνουν πολύ τα αρχεία τους, π.χ. μορφής JPG και GIF. Ο ήχος συχνά είναι χρήσιμος στις ιστοσελίδες και μπορεί να αξιοποιηθεί σε πολλές περιπτώσεις και μορφές. Τέτοιες μορφές περιλαμβάνουν από την εκτέλεση απλών μουσικών κομματιών μέχρι τη μετάδοση εκπομπών σε πραγματικό χρόνο, από ραδιοφωνικούς σταθμούς συνδεδεμένους στο Internet. Αυτό επιτυγχάνεται με την υποβοήθηση ειδικού λογισμικού, όπως το RealPlayer, το οποίο λειτουργεί ως επιπρόσθετο πρόγραμμα από τους φυλλομετρητές. Ένα αρχείο ήχου wav 2 λεπτών καταλαμβάνει χώρο περίπου 10Mb ενώ ένα αρχείο mid ίδιου χρόνου καταλαμβάνει 20Kb. Αυτός είναι και ο λόγος που τα αρχεία μορφής mid χρησιμοποιούνται πάρα πολύ στο Internet. Το βίντεο είναι το "πιο δύσχρηστο" δεδομένο στο Internet. Τα αρχεία βίντεο, παρά τη συμπίεσή τους, είναι πάρα πολύ μεγάλα σε μέγεθος. Οι μορφές αρχείων βίντεο που χρησιμοποιούνται σήμερα είναι οι MPEG, AVI (Video for Windows της Microsoft), MOV (QuickTime της Apple).

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

14 ΚΕΦΑΛΑΙΟ ΔΕΥΤΕΡΟ 2 ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML 2.1 Γενικά Οι περισσότερες ιστοσελίδες που βλέπετε στο Internet δημιουργήθηκαν με τη χρήση της γλώσσας υπολογιστών που καλείται HTML (HyperText Markup Language). Για να δημιουργήσετε μια τοποθεσία στο Internet θα χρειαστεί να μάθετε τα βασικά της HTML. Είναι απλή στην εκμάθηση και με λίγη εξάσκηση θα δημιουργήσετε τοποθεσίες στο Internet αρκετά εύκολα. Η HTML δουλεύει με την εισαγωγή ετικετών μέσα σε κείμενο. Έτσι ένα αρχείο HTML μπορεί να γραφεί σε κάποιο συντάκτη κειμένου ή κάποιο πρόγραμμα επεξεργασίας κειμένου όπως το Word ή το Σημειωματάριο. Κάθε ετικέτα περιβάλλεται από γωνιακές αγκύλες (< >). Τα προγράμματα πλοήγησης δουλεύουν διαβάζοντας το κείμενο ενός αρχείου HTML και αποκωδικοποιώντας και εκτελώντας τις εντολές που περιέχονται μέσα στις ετικέτες. Οι ετικέτες καθορίζουν πώς θα γίνεται η εμφάνιση των περιεχομένων της σελίδας. 2.2 Ετικέτες (Tags) Tags λέμε τις ετικέτες που ορίζουν την αρχή και το τέλος μιας λειτουργίας. Περικλείονται σε σύμβολα μικρότερου-μεγαλύτερου: <ετικέτα>. Όταν το tag κλείνει, περιλαμβάνει επιπλέον και μια κάθετο: </ετικέτα>. Αυτό είναι όλο... Για παράδειγμα, η παρακάτω σειρά λέει στον φυλλομετρητή να εμφανίζει με έντονα γράμματα (b=bold) τη λέξη 'έντονα' και με πλάγια (i=italics) τη λέξη 'πλάγια': Η γραφή αυτή είναι με κανονικά γράμματα. Μπορώ να έχω <b>έντονα</b> ή και <i>πλάγια</i> Το αποτέλεσμα θα είναι το εξής: Η γραφή αυτή είναι με κανονικά γράμματα. Μπορώ να έχω έντονα ή και πλάγια

15 Τα tags μπορούν να περικλείουν άλλα, δεν πρέπει όμως να μπαίνουν διασταυρωμένα. Π.χ. Η δομή τύπου όπου τα τριάρια περικλείουν τα δυάρια και αυτά με τη σειρά τους τούς άσσους είναι σωστή, όχι όμως και η αυτή: όπου τα ζεύγη μπερδεύονται. Χρησιμοποιώντας τα πιο πάνω tags μαζί με αυτό που ορίζει την υπογράμμιση (u=underlined) μπορούμε να έχουμε συνδυασμούς όπως: Μπορώ να έχω <i><b>έντονα και πλάγια μαζί</b></i> ή <u><i>πλάγια και υπογραμμισμένα</i></u>. Μας δίνει: Μπορώ να έχω έντονα και πλάγια μαζί ή πλάγια και υπογραμμισμένα. 2.3 Δομή μίας σελίδας HTML Το πρόγραμμα που ακολουθεί αποτελεί ένα πολύ απλό παράδειγμα χρήσης της γλώσσας HTML και γράφτηκε με τη βοήθεια ενός διορθωτή κειμένου. <HTML> <HEAD> <TITLE> Ο Τίτλος μιας σελίδας HTML </TITLE> </HEAD> <BODY> </BODY> </HTML> <H1> Αυτή είναι μια σελίδα HTML </Hl> Όπως παρατηρούμε, η HTML έχει τρεις ετικέτες που χρησιμεύουν για να περιγράψουν τη συνολική δομή μιας σελίδας, ενώ ταυτόχρονα παρέχουν κάποια πληροφοριακά στοιχεία για

16 την σελίδα, όπως είναι ο τίτλος της, ο συγγραφέας της σελίδας κτλ. Οι ετικέτες αυτές είναι οι ακόλουθες: <HTML> Η ετικέτα < HTML> είναι η πρώτη ετικέτα που υπάρχει σε κάθε κώδικα HTML. Πληροφορεί ότι το περιεχόμενο του αρχείου είναι γραμμένο σε γλώσσα HTML. Όλο το κείμενο, καθώς και οι ετικέτες που βρίσκονται σε κάθε σελίδα HTML, θα πρέπει να βρίσκονται εντός της ετικέτας <HTML> ως εξής: <HTML>... το περιεχόμενο της σελίδας </HTML> <HEAD> Η ετικέτα <HEAD> είναι αμφίπλευρη. Πρόκειται για τον πρόλογο της σελίδας και προσδιορίζει το περιεχόμενο της. Υπάρχουν συγκεκριμένες ετικέτες HTML, όπως είναι για παράδειγμα η <TITLE >, που περιέχονται στην ετικέτα < HEAD> μιας σελίδας. Εκτός από τις συγκεκριμένες αυτές ετικέτες καμία άλλη ετικέτα δεν επιτρέπεται να εισάγεται μέσα στο πεδίο της <HEAD>. Ένα παράδειγμα που δείχνει τη χρήση της ετικέτας αυτής είναι το ακόλουθο: <HTML> <HEAD> </HEAD>. </HTML> <TITLE> Αυτός είναι τίτλος </TITLE> <BODY> To κυρίως σώμα μιας σελίδας HTML, το οποίο περιλαμβάνει το κείμενο, τους συνδέσμους με άλλες σελίδες, τις εικόνες κτλ., βρίσκεται εντός μιας αμφίπλευρης ετικέτας που λέγεται <BODY>. Επομένως, σε συνδυασμό και με τις άλλες ετικέτες, η σελίδα παίρνει την ακόλουθη μορφή: <HTML> <HEAD> <TITLE> Αυτός είναι τίτλος </TITLE> </HEAD> <BODY>

17 </BODY> </HTML> Κάθε ετικέτα HTML είναι εμφωλιασμένη (nested). Αυτό σημαίνει ότι ή ετικέτα <BODY> περιλαμβάνεται εντός της ετικέτας <HTML>. To ίδιο συμβαίνει και με την ετικέτα <HEAD>. Όλες οι HTML ετικέτες τοποθετούνται με ανάλογο τρόπο δίνοντας μορφή και συγκεκριμένα χαρακτηριστικά ή ιδιότητες στα κείμενα που περικλείουν Τίτλος Κάθε σελίδα HMTL χρειάζεται έναν τίτλο που να αντιστοιχεί στο περιεχόμενο της. Ο τίτλος χρησιμοποιείται από τους σελιδοδείκτες (bookmarks) του φυλλομετρητή, καθώς και από άλλα προγράμματα που κατασκευάζουν καταλόγους με σελίδες από τον Παγκόσμιο Ιστό. Για να δοθεί τίτλος σε μια σελίδα, θα πρέπει να χρησιμοποιηθεί η ετικέτα <TITLE>. Η ετικέτα <TITLE> είναι αμφίπλευρη και περιλαμβάνεται πάντα εντός της ετικέτας <HEAD>, όπως φαίνεται και στο ακόλουθο παράδειγμα: <HTML> <HEAD> <TITLE> Πληροφορική Ι </TITLE> </HEAD> <BODY> </BODY> </HTML> Σε κάθε σελίδα μπορεί να υπάρχει ένας μόνο τίτλος, και αυτός μπορεί να περιέχει μόνο απλό κείμενο, δηλαδή δεν μπορούν να εισάγονται άλλες ετικέτες μέσα στην ετικέτα <TITLE>. Όταν καλούμε μια σελίδα, ο τίτλος της σελίδας εμφανίζεται στον τίτλο του παραθύρου του φυλλομετρητή. Επίσης ο τίτλος προτείνεται για καταχώρηση στην προθήκη των αγαπημένων του φυλλομετρητη.

18 2.3.2 Επικεφαλίδες Οι επικεφαλίδες (Headings) χρησιμοποιούνται, για να δώσουν σε τμήματα κειμένου ένα ξεχωριστό στιλ. Η HTML παρέχει έξι επίπεδα από επικεφαλίδες, οι οποίες συντάσσονται με τον παρακάτω τρόπο : <Η1> Αυτό είναι το πρώτο επίπεδο επικεφαλίδας </Η1> <Η2> Αυτό είναι το δεύτερο επίπεδο επικεφαλίδας </Η2> <Η3> Αυτό είναι το τρίτο επίπεδο επικεφαλίδας </Η3> <Η4> Αυτό είναι το τέταρτο επίπεδο επικεφαλίδας </Η4> <Η5> Αυτό είναι το πέμπτο επίπεδο επικεφαλίδας </Η5> <Η6> Αυτό είναι το έκτο επίπεδο επικεφαλίδας </Η6> Το αποτέλεσμα των παραπάνω γραμμών κώδικα θα είναι αυτό : Οι αριθμοί των ετικετών (από Η1 μέχρι Η6) υποδηλώνουν το επίπεδο της επικεφαλί-δας. Οι επικεφαλίδες, όταν εμφανίζονται σε ένα φυλλομετρητή, έχουν ως αποτέλε-σμα να αποκτά το δικό του στιλ το κείμενο το οποίο περικλείουν. Αυτό σημαίνει ότι το κείμενο που περικλείεται έχει συγκεκριμένη γραμματοσειρά και ορισμένο μέγεθος, είναι πιθανώς κεντραρισμένο ή υπογραμμισμένο κτλ. Στο παράδειγμα που ακολουθεί τα κενά των εσοχών που εμφανίζονται από αριστερά στο κείμενο κάποιων επικεφαλί-δων θα αγνοηθούν, όταν αυτές θα εμφανιστούν μέσω κάποιου φυλλομετρητή. Αυτό συμβαίνει διότι οι ετικέτες περιλαμβάνουν

19 και την παράμετρο ALIGN, η οποία δίνει τη δυνατότητα για στοίχιση. Χαρακτηριστικά είναι τα παραδείγματα που ακολουθούν: Παράδειγμα ΙΙ <H1 ALIGN=CENTER> η επικεφαλίδα αυτή θα έχει κεντρική στοίχιση </H1> <H1 ALIGN = LEFT> η επικεφαλίδα αυτή θα έχει αριστερή στοίχιση </H1> <H1 ALIGN = RIGHT> η επικεφαλίδα αυτή θα έχει δεξιά στοίχιση </H1> Αποτέλεσμα: Παράδειγμα ΙΙΙ <html> <Head><title> HI... H6 </title></head> <body> <H1> Θεματικά Αντικείμενα στο Διαδίκτυο</H1 > <H2> Περιήγηση</H2 > <H2 > Ηλεκτρονικό Ταχυδρομείο( ) </H2 > <H2> Εισαγωγή στην HTML</H2> <H3 > Γενικά </H3 > <H3>Βασικές ετικέτες </H 3 > <H4>Η ετικέτα HTML</H4> <H4> Η ετικέτα BODY</H4> <H4>Η ετικέτα HEAD </H4> <H4>Η ετικέτα TITLE </H4> <H3> Προχωρημένες ετικέτες </H3> </body> </html>

20 Αποτέλεσμα Παράγραφοι Στις πρώτες εκδόσεις της γλώσσας HTML είχαμε τη χρήση της ετικέτας <Ρ>, προκειμένου να γίνεται διαχωρισμός των παραγράφων. Η ετικέτα αυτή ήταν μονόπλευρη, δηλαδή δεν υπήρχε το τελικό τμήμα </Ρ>. Όμως, στις πρόσφατες εκδόσεις η ετικέτα παρουσιάζεται ως αμφίπλευρη. Δηλαδή, είναι δυνατή η ύπαρξη του </Ρ> ως προαιρετικού τμήματος. Η ετικέτα <Ρ> εισάγει μια καινούρια γραμμή, γι' αυτό και χρησιμοποιείται από πολλούς, προκειμένου να εξασφαλίζεται κάποια απόσταση μεταξύ των παραγράφων. Αν θέλετε να βάλετε περισσότερες από μία ετικέτες σε ένα κείμενο, τότε η σωστή μορφοποίηση απαιτεί η ετικέτα που ανοίγει πρώτη να κλείνει τελευταία. Για παράδειγμα: <TAG1><TAG2> το κείμενο σας </TAG2></TAG 1> Δεν έχει σημασία πως μορφοποιείται το κείμενο στο διορθωτή. Ο φυλλομετρητής αγνοεί τη μορφοποίηση του διορθωτή και λαμβάνει υπόψη του μόνο τις ετικέτες. Ακολουθούν μερικά παραδείγματα:

21 Παράδειγμα ΙV <P ALIGN=CENTER> η παράγραφος αυτή θα κεντραριστεί </P> <P ALIGN = LEFT> η παράγραφος αυτή θα έχει αριστερή στοίχιση </P> <P ALIGN = RIGHT> η παράγραφος αυτή θα έχει δεξιά στοίχιση </P> Αποτέλεσμα Παράδειγμα V <html> <head><title>p</title></head> <body> <h2> <P> URL σημαίνει Uniform Resource Locator-Ενιαία θέση Πόρου. Περιγρά φει με ακρίβεια το σημείο όπου βρίσκονται οι πληροφορίες. Εάν δώσετε ένα URL σε ένα φίλο που μένει στη διπλανή πόρτα ή σε έναν φίλο που μένει στην Αμερική, θα μπορέσουν και οι δυο να έχουν πρό σβαση στις ίδιες πληροφορίες στις οποίες έχετε πρόσβαση και εσείς με το ίδιο URL. </P> <P> Ο υπολογιστής σας δεν μπορεί να κολλήσει ιό κάνοντας απλώς κλικ σε μια σελίδα του WEB ακόμα κι αν αυτή έχει εικόνες, ήχο ή τρισδιάστατα αρχεία. Πρέπει όμως να προβληματιστείτε σχετι κά με την τοποθεσία από όπου μεταφέρετε προ γράμματα. </P> </h2> </body> </html>

22 Αποτέλεσμα: Κλείνοντας αυτή την ενότητα ας δούμε τη δομή μιας απλής σελίδας. Πρέπει να σημειωθεί πως τα tags παρουσιάζονται με τις κατάλληλες εσοχές γραμμής ώστε να φαίνεται που ανοίγει και που κλείνει το καθένα. Μπορείτε να γράψετε τον κώδικα στο σημειωματάριο, να αποθηκεύστε τον κάπου στο δίσκο σας με όνομα test.html και μετά να κάνετε διπλό κλικ στο αρχείο ώστε να το δείτε με τον φυλλομετρητή σας: <html> <head> <title>η πρώτη μου σελίδα</title> </head> <body> Μπορώ να έχω <i><b>έντονα και πλάγια μαζί</b></i> ή <u><i>πλάγια και υπογραμμισμένα</i></u>. </body> </html>

23 2.4 Οι Ετικέτες αναλυτικά Ακολουθούν συγκεντρωμένα οι περισσότερες από τις διαθέσιμες ετικέτες. Σε κάθε γραμμή θα βρείτε τα εξής: Στην πρώτη στήλη (όπου υπάρχει) αναγράφεται το πεδίο εφαρμογής της εντολής. Το 4.0 σημαίνει πως το tag λειτουργεί σε φυλλομετρητές έκδοσης 4 και μετά. Το NS και τα Ν1 κλπ σημαίνουν πως λειτουργεί μόνον σε NetScape. To ΜS σημαίνει πως λειτουργεί μόνον σε Microsoft Internet Explorer. Όπου δεν αναγράφεται τίποτε, το tag έχει γενική εφαρμογή. Στη δεύτερη στήλη και με έντονη γραφή, υπάρχει η περιγραφή του tag, Στην τρίτη, η σύνταξή του. Στην τέταρτη εμφανίζονται τυχόν σχόλια και διευκρινήσεις. Κάποιες αναγκαίες επεξηγήσεις: Το σύμβολο? δηλώνει αριθμό Τα σύμβολα $ και * δηλώνουν κάποιον αλφαριθμητικό χαρακτήρα (γράμμα) Τύπος εγγράφου <HTML></HTML> Τίτλος Επιφυλλίδα <TITLE></TITLE> <HEAD></HEAD> ΒΑΣΙΚΑ ΣΤΟΙΧΕΙΑ Ορίζει την αρχή και το τέλος Εμφανίζεται στη μπλε μπάρα του φυλλομετρητή. Πρέπει να βρίσκεται στην επιφυλλίδα Εδώ μπαίνει ο τίτλος, περιγραφή της σελίδας, τα styles και η java Bασικός Κορμός <BODY></BODY> το κύριο υλικό της σελίδας ΜΟΡΦΟΠΟΙΗΣΗ ΚΕΙΜΕΝΟΥ Έντονη γραφή <B></B> Δοκιμή Πλάγια γραφή <I></I> Δοκιμή 4.0 Υπογράμμιση <U></U> Δοκιμή Διαγραφή <STRIKE></STRIKE> Δοκιμή 4.0 Διαγραφή <S></S> Δοκιμή Εκθέτης <SUP></SUP> Βάση Δοκιμή Δείκτης <SUB></SUB> Βάση Δοκιμή Γραφομηχανή <TT></TT> Δοκιμή Προμορφοποιημένο Πλάτος προμορφοποιημένου <PRE></PRE> <PRE WIDTH=?></PRE> Εμφανίζει τα κενά διαστήματα όπως έχουν γραφεί Σε χαρακτήρες

24 Στοίχιση στο κέντρο <CENTER></CENTER> Στη θέση του χρησιμοποιείται πλέον το <DIV ALIGN="CENTER"></DIV> N1 Αναβοσβήσιμο <BLINK></BLINK> Δοκιμή Μέγεθος γραμμάτων <FONT SIZE=?></FONT> Με τιμές από 1 ως και 7 Αλλαγή μεγέθους γραμμάτων Χρώμα γραμμάτων 4.0 Επιλογή γραμματοσειράς N4 Επιλογή μεγέθους N4 Βάρος γραμμάτων 4.0 Βασικό μέγεθος γραμμάτων MS Κινούμενο κείμενο <FONT SIZE="+ -?"></FONT> <FONT COLOR="#$$$$$$"></FONT> <FONT FACE="***"></FONT> <FONT POINT-SIZE=?></FONT> <FONT WEIGHT=?></FONT> <BASEFONT SIZE=?> <MARQUEE></MARQUEE> Το χρώμα ορίζεται με τρεις (διψήφιους) δεκαεξαδικούς αριθμούς Με τιμές από 1 ως και 7 και προεπιλογή το 3. Ισχύει για όλη τη σελίδα. ΔΙΑΧΩΡΙΣΤΕΣ N Παράγραφος Στοίχιση παραγράφου Πλήρης στοίχιση παραγράφου Αλλαγή σειράς <P></P> <P ALIGN=LEFT CENTER RIGHT></P> <P ALIGN=JUSTIFY></P> <BR> Χωρίς αναδίπλωση <BR CLEAR=LEFT RIGHT ALL> Οριζόντια γραμμή <HR> Στοίχιση γραμμής <HR ALIGN=LEFT RIGHT CENTER> Δεν είναι απαραίτητο το κλείσιμο του tag N1 Πάχος γραμμής <HR SIZE=?> Σε pixels Πλάτος γραμμής <HR WIDTH=?> Σε pixels Πλάτος γραμμής <HR WIDTH="%"> Ως ποσοστό του πλάτους σελίδας Συμπαγής γραμμή <HR NOSHADE> Δίχως την τρισδιάστατη όψη Χωρίς αλλαγές σειράς N1 Αλλαγή γραμμής <NOBR></NOBR> <WBR> Επαναλαμβανόμενη εικόνα φόντου MS Υδατογράφημα ΦΟΝΤΟ ΚΑΙ ΧΡΩΜΑΤΑ <BODY BACKGROUND="URL"> <BODY BGPROPERTIES="FIXED"> Χρώμα φόντου <BODY BGCOLOR="#$$$$$$"> (order is red/green/blue) Βασικό χρώμα κειμένου <BODY TEXT="#$$$$$$"> Χρώμα συνδέσμων <BODY LINK="#$$$$$$"> Χρώμα συνδέσμων που έχουμε <BODY VLINK="#$$$$$$">

25 επισκεφτεί Ενεργός σύνδεσμος <BODY ALINK="#$$$$$$"> N, MS N1 N1 Συνδεσμοςπαραπομπή σε διεύθυνση Παραπομπή σε σημείο εγγράφου Παράθυρο όπου θα ανοίξει ο σύνδεσμος Ενέργεια με το κλικ Ενέργεια όταν περάσει το ποντίκι από πάνω Ενέργεια όταν φύγει το ποντίκι από πάνω Σύνδεσμος για αποστολή Καθορισμός τίτλου για Ορισμός θέσης για σύνδεσμο Εμφάνιση εικόνας Στοίχιση εικόνας Στοίχιση εικόνας σε σχέση με το κείμενο Εναλλακτικό κείμενο αντί της εικόνας ΣΥΝΔΕΣΜΟΙ, ΓΡΑΦΙΚΑ ΚΑΙ ΗΧΟΣ <A HREF="URL"></A> <A HREF="URL#***"></A> <A HREF="#***"></A> <A HREF="URL" TARGET="***"></A> Αν πρόκειται για άλλο έγγραφο Αν πρόκειται για το τρέχον έγγραφο <A HREF="URL" ONCLICK="***"></A> Javascript <A HREF="URL" ONMOUSEOVER="***"></A> Javascript <A HREF="URL" ONMOUSEOUT="***"></A> Javascript <A <A <A NAME="***"></A> Πρέπει να μπει? πριν από τη λέξη SUBJECT Για χρήση με την Παραπομπή (βλέπε παραπάνω) <IMG SRC="URL"> <IMG SRC="URL" ALIGN=TOP BOTTOM MIDDLE LEFT RIGHT> <IMG SRC="URL" ALIGN=TEXTTOP ABSMIDDLE BASELINE ABSBOTTOM> <IMG SRC="URL" ALT="***"> <IMG SRC="URL" WIDTH=? HEIGHT=?> Διαστάσεις εικόνας <IMG SRC="URL" WIDTH=% HEIGHT=%> Αν η εικόνα δεν εμφανιστεί Σε pixels Πλαίσιο εικόνας <IMG SRC="URL" BORDER=?> Σε pixels Κενός χώρος γύρω από την εικόνα Εναλλακτική εικόνα χαμηλής ανάλυσης Χάρτης εικόνας με συνδέσμους MS Video Clip MS Ήχος Χάρτης εικόνας χρήστη Τμήμα χάρτη <IMG SRC="URL" HSPACE=? VSPACE=?> <IMG SRC="URL" LOWSRC="URL"> <IMG SRC="URL" ISMAP> <IMG SRC="URL" USEMAP="URL"> <IMG DYNSRC="***" START="***" LOOP=?> <BGSOUND SRC="***" LOOP=? INFINITE> <MAP NAME="***"></MAP> Ως ποσοστό των διαστάσεων της σελίδας Σε pixels Συνήθως ασπρόμαυρη. Εμφανίζεται πρώτη και επικαλύπτεται από την κανονική. Απαιτεί script Περιγραφή χάρτη <AREA SHAPE="DEFAULT RECT CIRCLE POLY" COORDS=",,,"

26 N1 Ανανέωση περιεχομένου ή μεταπήδηση σε άλλη σελίδα N2 Ενσωματωμένο αντικείμενο N2 Μέγεθος αντικειμένου HREF="URL" NOHREF> <META HTTP-EQUIV="Refresh" CONTENT="χρόνος σε δευτερόλεπτα; URL=ονομασία σελίδας"> Μπαίνει μεταξύ <head> και </head>. Π.χ. <meta httpequiv="refresh" content="10;url=index.html"> <EMBED SRC="URL"> <EMBED SRC="URL" WIDTH=? HEIGHT=?> 4.0 Αντικείμενο <OBJECT></OBJECT> 4.0 Παράμετροι <PARAM> Π.χ. κάποιο flash animation Ορισμός πίνακα <TABLE></TABLE> ΠΙΝΑΚΕΣ 4.0 Στοίχιση πίνακα <TABLE ALIGN=LEFT RIGHT CENTER> Περίγραμμα πίνακα Περίγραμμα πίνακα Απόσταση (διάκενο) κελιών Εσωτερικό περιθώριο κελιών <TABLE BORDER></TABLE> <TABLE BORDER=?></TABLE> <TABLE CELLSPACING=?> <TABLE CELLPADDING=?> Υπαρκτό ή μη Oρισμός πάχους Επιθυμητό πλάτος <TABLE WIDTH=?> Σε pixels Ποσοστό πλάτους <TABLE WIDTH=%> Ποσοστό επί του πλάτους της σελίδας 4.0 Χρώμα πίνακα <TABLE BGCOLOR="$$$$$$"></TABLE> 4.0 Πλαίσιο πίνακα <TABLE FRAME=VOID ABOVE BELOW HSIDES LHS RHS VSIDES BOX BORDER></TABLE> 4.0 Χάρακας πίνακα <TABLE RULES=NONE GROUPS ROWS COLS ALL></TABLE> MS Χρώμα περιγράμματος MS Σκούρο περίγραμμα MS Ανοιχτόχρωμο περίγραμμα 4.0 N3 Σειρά πίνακα Στοίχιση σειράς πίνακα Κελί πίνακα Στοίχιση κελιού Κείμενο κελιού χωρίς αναδίπλωση Επέκταση σε στήλες Επέκταση σε σειρές Επιθυμητό πλάτος κελιού Πλάτος κελιού σε ποσοστό <TABLE BORDERCOLOR="$$$$$$"></TABLE> <TABLE BORDERCOLORDARK="$$$$$$"></TABLE> <TABLE BORDERCOLORLIGHT="$$$$$$"></TABLE> <TR></TR> <TR ALIGN=LEFT RIGHT CENTER MIDDLE BOTTOM> <TD></TD> Πρέπει να εμπεριέχεται σε ορισμό σειράς <TD ALIGN=LEFT RIGHT CENTER VALIGN=TOP MIDDLE BOTTOM> <TD NOWRAP> <TD COLSPAN=?> <TD ROWSPAN=?> <TD WIDTH=?> <TD WIDTH="%"> Σε pixels Επί του πλάτους του πίνακα

27 4.0 Χρώμα κελιού <TD BGCOLOR="#$$$$$$"> 4.0 N3 4.0 Επικεφαλλίδα στήλης Στοίχιση επικεφαλλίδας Επικεφαλίδα δίχως αναδίπλωση Επέκταση επικεφαλλίδας σε στήλες Επέκταση επικεφαλλίδας σε σειρές Επιθυμητό πλάτος επικεφαλλίδας Πλάτος σε ποσοστό Χρώμα κελιού επικεφαλλίδας <TH></TH> <TH ALIGN=LEFT RIGHT CENTER MIDDLE BOTTOM> <TH NOWRAP> <TH COLSPAN=?> <TH ROWSPAN=?> <TH WIDTH=?> <TH WIDTH="%"> 4.0 Σώμα πίνακα <TBODY> 4.0 Υποφυλλίδα πίνακα <TH BGCOLOR="#$$$$$$"> <TFOOT></TFOOT> 4.0 Επιφυλλίδα πίνακα <THEAD></THEAD> Επεξήγηση πίνακα <CAPTION></CAPTION> Στοίχιση επεξήγησης <CAPTION ALIGN=TOP BOTTOM LEFT RIGHT> 4.0 Στήλη <COL></COL> 4.0 Επέκταση στηλών <COL SPAN=?></COL> 4.0 Πλάτος στήλης <COL WIDTH=?></COL> 4.0 Πλάτος στήλης σε ποσοστό <COL WIDTH="%"></COL> 4.0 Ομάδα στηλών <COLGROUP></COLGROUP> 4.0 Επέκταση ομάδας στηλών <COLGROUP SPAN=?></COLGROUP> 4.0 Πλάτος ομάδας <COLGROUP WIDTH=?></COLGROUP> 4.0 Πλάτος ομάδας σε ποσοστό <COLGROUP WIDTH="%"></COLGROUP> Έντονα και με στοίχιση στο κέντρο Σε pixels Επί του πλάτους του πίνακα Προηγείται του THEAD> Απλή λίστα Συμπαγής λίστα <UL><LI></UL> <UL COMPACT></UL> ΛΙΣΤΕΣ To <LI> μπαίνει μπροστά από κάθε σειρά Τύπος κουκίδας <UL TYPE=DISC CIRCLE SQUARE> Για όλη τη λίστα Τύπος κουκίδας <LI TYPE=DISC CIRCLE SQUARE> Για τη σειρά και τις επόμενες Αριθμημένη λίστα Συμπαγής αριθμημένη λίστα <OL><LI></OL> <OL COMPACT></OL> Μορφή αρίθμησης <OL TYPE=A a I i 1> Μορφή αρίθμησης <LI TYPE=A a I i 1> Αριθμός έναρξης αρίθμησης <OL START=?> To <LI> μπαίνει μπροστά από κάθε σειρά Για όλη τη λίστα Για τη σειρά και τις επόμενες Για όλη τη λίστα

28 Αριθμός έναρξης αρίθμησης Λίστα επεξηγήσεων Συμπαγής λίστα επεξηγήσεων <LI VALUE=?> <DL><DT><DD></DL> <DL COMPACT></DL> Για τη σειρά και τις επόμενες (<DT>=όρος, <DD>=επεξήγηση) Λίστα επιλογών <MENU><LI></MENU> Πριν από κάθε σειρά Συμπαγής λίστα επιλογών Λίστα περιεχομένων Συμπαγής λίστα περιεχομένων <MENU COMPACT></MENU> <DIR><LI></DIR> <DIR COMPACT></DIR> Πριν από κάθε σειρά Ορισμός φόρμας 4.0 'Ανέβασμα' αρχείου Πεδίο εισαγωγής δεδομένων Όνομα πεδίου Τιμή πεδίου Τσεκαρισμα ΦΟΡΜΕΣ <FORM ACTION="URL" METHOD=GET POST></FORM> <FORM ENCTYPE="multipart/form-data"></FORM> <INPUT TYPE="TEXT PASSWORD CHECKBOX RADIO FILE BUTTON IMAGE HIDDEN SUBMIT RESET"> <INPUT NAME="***"> <INPUT VALUE="***"> <INPUT CHECKED> Για τετράγωνα και κυκλικά πεδία τσεκαρίσματος Μέγεθος πεδίου <INPUT SIZE=?> Σε χαρακτήρες Μέγιστο μέγεθος <INPUT MAXLENGTH=?> Σε χαρακτήρες 4.0 Κουμπί <BUTTON></BUTTON> 4.0 Όνομα κουμπιού <BUTTON NAME="***"></BUTTON> 4.0 Τύπος κουμπιού <BUTTON TYPE="SUBMIT RESET BUTTON"></BUTTON> 4.0 Προεπιλεγμένη τιμή <BUTTON VALUE="***"></BUTTON> 4.0 Ετικέτα <LABEL></LABEL> 4.0 Ετικέτα επιλοής <LABEL FOR="***"></LABEL> Λίστα επιλογής <SELECT></SELECT> Όνομα λίστας <SELECT NAME="***"></SELECT> Αριθμός επιλογών <SELECT SIZE=?></SELECT> Πολλαπλή επιλογή <SELECT MULTIPLE> Επιλογή Προεπιλογή Τιμή επιλογής 4.0 Ομαδοποίηση επιλογών Μέγεθος πεδίου εισαγωγής κειμένου Ονομασία πεδίου εισαγωγής κειμένου <OPTION> <OPTION SELECTED> <OPTION VALUE="***"> <OPTGROUP LABEL="***"></OPTGROUP> <TEXTAREA ROWS=? COLS=?></TEXTAREA> <TEXTAREA NAME="***"></TEXTAREA> Για περισσότερες από μία επιλογές Διαθέσιμα στοιχεία προς επιλογή

29 N2 Αναδίπλωση κειμένου <TEXTAREA WRAP=OFF HARD SOFT></TEXTAREA> 4.0 Μέλη ομάδας <FIELDSET></FIELDSET> 4.0 Υπόμνημα <LEGEND></LEGEND> 4.0 Στοίχιση υπομνήματος <LEGEND ALIGN="TOP BOTTOM LEFT RIGHT"></LEGEND> Επικεφαλλίδα Στοίχιση επικεφαλλίδας Yποδιαίρεση κειμένου Στοίχιση υποδιαίρεσης 4.0 Καθορισμένο περιεχόμενο Παράθεση σημείωσης <H?></H?> ΟΡΙΣΜΟΣ ΔΟΜΗΣ <H? ALIGN=LEFT CENTER RIGHT></H?> <DIV></DIV> <DIV ALIGN=LEFT RIGHT CENTER JUSTIFY></DIV> <SPAN></SPAN> <BLOCKQUOTE></BLOCKQUOTE> Δέχεται 6 ορισμούς: H1 ως και H6 Συνήθως με εσοχή παραγράφου 4.0 Σημείωση <Q></Q> Για σύντομες σημειώσεις Έμφαση Έντονη έμφαση Κώδικας Δείγμα Είσοδος από πληκτρολόγιο Μεταβλητή <EM></EM> <STRONG></STRONG> <CODE></CODE> <SAMP></SAMP> <KBD></KBD> <VAR></VAR> Συνήθως εμφανίζει πλάγια (italics) γράμματα Συνήθως εμφανίζει έντονα (bold) γράμματα Για παράθεση γραμμών κώδικα Ορισμός <DFN></DFN> Δε χρησιμοποιείται ευρέως Διεύθυνση συγγραφέα Μεγάλα γράμματα Μικρά γράμματα <ADDRESS></ADDRESS> <BIG></BIG> <SMALL></SMALL> 4.0 Παρεμβολή <INS></INS> 4.0 Ώρα αλλαγής <INS DATETIME=":::"></INS> 4.0 Σχόλια <INS CITE="URL"></INS> 4.0 Διαγραφή <DEL></DEL> 4.0 Ώρα διαγραφής <DEL DATETIME=":::"></DEL> 4.0 Σχόλια διαγραφής <DEL CITE="URL"></DEL> 4.0 Αρκτικόλεξο <ACRONYM></ACRONYM> 4.0 Σύντμηση <ABBR></ABBR> Σημειώνει τις προσθήκες σε νέα έκδοση Σημειώνει τις διαγραφές σε νέα έκδοση

30 ΠΛΑΙΣΙΑ (Frames) 4.0 Σελίδα με πλαίσια <FRAMESET></FRAMESET> Αντί του <BODY> 4.0 Ύψος σειρών <FRAMESET ROWS=,,,></FRAMESET> Σε pixels ή %) 4.0 Ύψος σειρών <FRAMESET ROWS=*></FRAMESET> * = Σχετικό μέγεθος. Συνήθως όσο περισσεύει. 4.0 Πλάτος στηλών <FRAMESET COLS=,,,></FRAMESET> (pixels or %) 4.0 Πλάτος στηλών <FRAMESET COLS=*></FRAMESET> 4.0 Περίγραμμα <FRAMESET FRAMEBORDER="yes no"></frameset> 4.0 Πλάτος περιγράμματος 4.0 Χρώμα περιγράμματος N3 Απόσταση (διάκενο) πλαισίων 4.0 Ορισμός πλαισίου <FRAME> 4.0 Έγγραφο που θα εμφανιστεί <FRAMESET BORDER=?></FRAMESET> * = Σχετικό μέγεθος. Συνήθως όσο περισσεύει. <FRAMESET BORDERCOLOR="#$$$$$$"></FRAMESET> <FRAMESET FRAMESPACING=?></FRAMESET> <FRAME SRC="URL"> Περιεχόμενα μεμονωμένου πλαισίου 4.0 Όνομα πλαισίου <FRAME NAME="***" _blank _self _parent _top> 4.0 Πλάτος περιθωρίου <FRAME MARGINWIDTH=?> Αριστερά και δεξιά 4.0 Ύψος περιθωρίου <FRAME MARGINHEIGHT=?> Πάνω και κάτω 4.0 Εμφάνιση μπάρας κύλισης <FRAME SCROLLING="YES NO AUTO"> 4.0 Σταθερό μέγεθος <FRAME NORESIZE> 4.0 Περίγραμμα πλαισίου 4.0 Χρώμα περιγράμματος 4.0 Περιεχόμενο εκτός πλαισίων <FRAME FRAMEBORDER="yes no"> <FRAME BORDERCOLOR="#$$$$$$"> <NOFRAMES></NOFRAMES> 4.0 Εσωτερικό πλαίσιο <IFRAME></IFRAME> 4.0 Διαστάσεις 4.0 Διαστάσεις <IFRAME WIDTH=? HEIGHT=?></IFRAME> <IFRAME WIDTH="%" HEIGHT="%"></IFRAME> για φυλλομετρητές που δεν υποστηρίζουν πλαίσια Όμοιες παράμετροι με το FRAME

31 N3 Πολλές στήλες N3 Απόσταση (διάκενο) στηλών N3 Πλάτος στήλης N3 Διαχωριστής N3 Είδος διαχωριστή N3 Μέγεθος διαχωριστή N3 Διαστάσεις διαχωριστή N3 Στοίχιση διαχωριστή N4 Επίπεδο (layer) N4 Όνομα επιπέδου N4 Θέση επιπέδου N4 N4 Σχετική θέση επιπέδου Αρχείο προέλευσης επιπέδου ΤΟΠΟΘΕΤΗΣΗ ΣΤΟΙΧΕΙΩΝ ΣΤΗ ΣΕΛΙΔΑ <MULTICOL COLS=?></MULTICOL> <MULTICOL GUTTER=?></MULTICOL> <MULTICOL WIDTH=?></MULTICOL> <SPACER> <SPACER TYPE=HORIZONTAL VERTICAL BLOCK> <SPACER SIZE=?> <SPACER WIDTH=? HEIGHT=?> <SPACER ALIGN=LEFT RIGHT CENTER> <LAYER></LAYER> <LAYER ID="***"></LAYER> <LAYER LEFT=? TOP=?></LAYER> <LAYER PAGEX=? PAGEY=?></LAYER> <LAYER SRC="***"></LAYER> N4 Σειρά επικάλλυψης <LAYER Z-INDEX=?></LAYER> <LAYER ABOVE="***" N4 Θέση επικάλλυψης BELOW="***"></LAYER> N4 Διαστάσεις επιπέδου N4 Διαδρομή επιπέδου N4 Εμφάνιση ή μη του επιπέδου N4 Φόντο επιπέδου N4 Χρώμα επιπέδου <LAYER HEIGHT=? WIDTH=?></LAYER> <LAYER CLIP=,,,></LAYER> <LAYER VISIBILITY=SHOW HIDDEN INHERIT></LAYER> <LAYER BACKGROUND="$$$$$$"></LAYER> <LAYER BGCOLOR="$$$$$$"></LAYER> N4 Εσωτερικό επίπεδο <ILAYER></ILAYER> Δέχεται τις ίδιες παραμέτρους με το LAYER

32 ΚΕΦΑΛΑΙΟ ΤΡΙΤΟ 3 ΕΙΣΑΓΩΓΗ ΣΤΟ FRONTPAGE 3.1 Γενικά Το Microsoft FrontPage είναι ένα εργαλείο συγγραφής ιστοσελίδων το οποίο επιτρέπει την δημιουργία δικτυακών τόπων μέσω της μεθόδου «αυτό που βλέπεις είναι αυτό που παραλαμβάνεις» (What You See Is What You Get WYSIWYG). Αυτό σημαίνει ότι μπορείτε να προβάλλετε μία ιστοσελίδα στο FrontPage όπως θα εμφανιζόταν στον Internet Explorer και να την επεξεργαστείτε χωρίς να είναι απαραίτητη η γνώση εξειδικευμένου HTML κώδικα. Στις επόμενες παραγράφους θα δούμε τον τρόπο με τον οποίο μπορούμε να φτιάξουμε μια ιστοσελίδα με τη χρήση του προγράμματος Microsoft FrontPage. Υπάρχουν πολλά προγράμματα με τα οποία μπορούμε να κάνουμε τις ίδιες εργασίες. Θα χρησιμοποιήσουμε το συγκεκριμένο γιατί είναι από τα πιθανότερα να βρείτε εγκατεστημένο σε κάποιον υπολογιστή όπου θα κληθείτε να δουλέψετε. Η επιφάνεια εργασίας του FrontPage ακολουθεί σχεδιαστικά την φιλοσοφία που ακολουθείται στα προγράμματα της ίδιας εταιρίας (Εικόνα 3.1). Στο αριστερό και μεγαλύτερο κομμάτι της οθόνης είναι ο χώρος σχεδιασμού της σελίδας ενώ στα δεξιά εμφανίζεται το παράθυρο εργασιών όπως και στην υπόλοιπη σουίτα εφαρμογών του Microsoft Office. Το προκαθορισμένο όνομα της κενής ιστοσελίδας η οποία δημιουργείται από το Microsoft Frontpage 2003 είναι new_page_1.html. Η δημιουργία μίας σελίδας ξεκινάει δηλώνοντας το επιθυμητό όνομα και ορίζοντας τον φάκελο όπου θα αποθηκεύονται όλα τα αρχεία μας.

33 Εικόνα 3.1 Το περιβάλλον του Microsoft FrontPage 2003 Για το περιβάλλον του FrontPage 2003 συντομογραφικά εξηγούνται τα παρακάτω Εργαλείο/Εντολή Θέση Περιγραφή Κάτω αριστερά Επιλέγεται η προβολή παραθύρου, δηλαδή με ποιόν τρόπο θέλουμε να συντάξουμε το αρχείο html: Design: Ότι γράφω αυτό θα εμφανίζεται στον φυλλομετρητή, δηλαδή WYSIWYG (What You See Is What You Get Αυτό Που Βλέπεις Αυτό Θα Πάρεις) Split: Το κάτω μισό παράθυρο είναι όπως το Design, και το επάνω μισό εμφανίζεται ο html κώδικας. Code: Εμφανίζεται μόνο ο κώδικας (για χρήστες που θέλουν να κάνουν την ιστοσελίδα γράφοντας μόνο κώδικα). Preview: Προεπισκόπηση ιστοσελίδας σε εσωτερικό φυλλομετρητή του FP2003 (Δεν χρειάζεται να έχουμε πρώτα σώσει το αρχείο). Η προεπισκόπηση μπορεί να γίνει και με εξωτερικό φυλλομετρητή, πχ. Internet Explorer, πατώντας F12 ή, αρκεί να

34 Επάνω οριζόντια εργαλειοθήκη Μορφοποίησης (formatting) έχουμε σώσει και τις τελευταίες αλλαγές που έχουμε κάνει στο αρχείο. Περιέχει τα γνωστά από το word εργαλεία μορφοποίησης κειμένου. Μια από τις διαφορές που παρατηρεί κανείς, είναι στα διαθέσιμα μεγέθη γραμματοσειράς, όπου υπάρχουν 8 τυποποιημένα μεγέθη από τα οποία μπορούμε να επιλέξουμε. Επάνω από το παράθυρο επεξεργασίας περιεχομένου ιστοσελίδων Βασική εργαλειοθήκη (Standard) Με τη μορφή σελιδοδεικτών (ετικετών) εμφανίζονται τα αρχεία html που έχουμε ανοιχτά στο FP2003 και επεξεργαζόμαστε. Οι ετικέτες έχουν το όνομα του αρχείου html, και όταν υπάρχει αστερίσκος στο τέλος (*) σημαίνει ότι έχει γίνει κάποια αλλαγή στο συγκεκριμένο αρχείο αλλά δεν έχει σωθεί ακόμα. Τα γνωστά από το word εργαλεία: - Νέο αρχείο, Άνοιγμα αρχείου, Αποθήκευση - Αποκοπή, Αντιγραφή, Επικόλληση, Αντιγρ.Μορφοποίησης - Αναίρεση, Ακύρωση αναίρεσης -//- Δημιουργία Πίνακα -//- Δημιουργία επιπέδου (Layer). Τα επίπεδα (Layers) στο FP2003 είναι το αντίστοιχο των πλαισίων κειμένου στο word. Δηλαδή, όπου σχεδιάσουμε ένα layer και γράψουμε κείμενο, γραφικά κτλ, έκει ακριβώς θα παρουσιάζεται και στον φυλλομετρητή ιστοσελίδων. Μπορούμε να έχουμε τοποθετήσει περισσότερα του ενός Layer σε ένα αρχείο HTML, αρκεί να προσέξουμε τις επικαλύψεις μεταξύ τους. -//- Εισαγωγή εικόνας από αρχείο. -//- Εμφάνιση εργαλειοθήκης σχεδίασης (όμοια με το word). -//- Εισαγωγή Υπερσύνδεσης (hyperlink). Για να δημιουργήσουμε ένα hyperlink (ή αλλιώς link) επιλέγουμε πρώτα το κείμενο ή/και την εικόνα που θέλουμε να αντιστοιχεί στο link, και κατόπιν πατάμε το εικονίδιο αυτό και ακολουθούμε τον οδηγό. Πίνακας 3.1 Κουμπιά στο FrontPage

35 3.2 Προβολές του FrontPage Το FrontPage περιλαμβάνει μία λίστα από μορφές προβολής της εργασίας μας. Μέσω του μενού View μπορούμε να επιλέξουμε τις διάφορες μορφές προβολής (views), που θα έχει η εργασία μας στην οθόνη (Εικόνα 3.2). Οι προβολές αυτές μπορούν να επιλεχθούν και από τις συντομεύσεις στο κάτω μέρος της οθόνης (Εικόνα 3.3 Συντομεύσεις για τις διαθέσιμες προβολές του FrontPageΕικόνα 3.3) Το FrontPage προσφέρει στον χρήστη επτά διαφορετικούς τρόπους προβολής κατά την επεξεργασία του site μας. Οι διάφορες μορφές προβολής, που μπορούμε να επιλέξουμε, είναι οι ακόλουθες: Page view: Προβάλεται μία συγκεκριμένη σελίδα Folders view: Προβολή Φακέλων Remote Web Site View: Για σύνδεση σε μία απομακρυσμένη ιστοσελίδα Reports: Διάφορες αναφορές Navigation view: Προβολή Πλοήγησης Hyperlinks view: Προβολή Υπερσυνδέσμων Tasks view: Προβολή διεργασιών Παρακάτω θα παρουσιαστούν αναλυτικότερα οι κυριότερες από αυτές. Εικόνα 3.2 Το μενού με τις διαθέσιμες προβολές του FrontPage

36 Εικόνα 3.3 Συντομεύσεις για τις διαθέσιμες προβολές του FrontPage Προβολή Σελίδας (Page View) Στην προβολή σελίδας το FrontPage εμφανίζει μία συγκεκριμένη σελίδα σε τέσσερις διαφορετικές μορφές οι οποίες εμφανίζονται στο κάτω μέρος του παραθύρου: Design: Αυτή η προβολή είναι η προεπιλεγμένη και παρουσιάζει την εργασία μας στην γνωστή μορφή WYSIWYG (What Υou See Is What Υou Get: Ότι βλέπεις αυτό θα πάρεις). Σε αυτή την μορφή κατά την επεξεργασία της σελίδας μας βλέπουμε ταυτόχρονα και την εμφάνιση, που θα έχει αργότερα στην πραγματικότητα (εκτός από μερικά στοιχεία). Code: Σε αυτή την προβολή εμφανίζεται το κανονικό περιεχόμενο της σελίδας μας στην γλώσσα υπερκειμένου. Όλες οι μορφοποιήσεις και τα λοιπά στοιχεία, που περιέχονται στην σελίδα μας, βρίσκονται στην πραγματικότητα στο αρχείο μας γραμμένες στην μορφή της γλώσσας του Ιστού. Οι γνώστες της ειδικής αυτής γλώσσας θα μπορούσαν να επεξεργαστούν τις σελίδες τους και σε αυτήν την προβολή. Split: Σε αυτή την προβολή η οθόνη του FrontPage χωρίζεται στα δύο εμφανίζοντας ταυτόχρονα τον κώδικα HTML αλλά και την μορφή σχεδίασης Preview: Στην καρτέλα αυτή δεν μπορούμε να επεξεργαστούμε την σελίδα μας, παρά μόνο να δούμε περίπου πως θα εμφανίζεται στους Φυλλομετρητές (Browsers). Αν πάλι έχουμε εγκατεστημένο κάποιου Browser και θέλουμε να δούμε την εμφάνιση της εργασίας μας σε αυτόν πρέπει να δώσουμε την επιλογή File Preview Ιn Browser που βρίσκεται στο κυρίως μενού και στην βασική γραμμή εργαλείων.

37 Εικόνα 3.4 Διαφορετικές μορφές για την προβολή σελίδας Προβολή Καταλόγων (Folders View) Η προβολή αυτή μας θυμίζει την εφαρμογή της Εξερεύνησης των Windows με μία μικρή διαφορά. Εμφανίζεται το κομμάτι του σκληρού δίσκου, από το οποίο έχει ορισθεί η ρίζα της ιστοσελίδας μας και κάτω. Εικόνα 3.5 Προβολή καταλόγων

38 Στο δεξιό άκρο του παραθύρου εμφανίζονται τρία κουμπιά (Εικόνα 3.6) με τα οποία μπορούμε να προσθέσουμε μία νέα σελίδα, φάκελο ή να πλοηγηθούμε μία θέση πάνω στους καταλόγους. Εικόνα 3.6 Επιλέγοντας μία ιστοσελίδα από αυτές που εμφανίζονται (με διπλό κλικ) επανερχόμαστε πάλι στην προβολή σελίδας από όπου μπορούμε να την τροποποιήσουμε Προβολή Πλοήγησης (Navigation View) Η προβολή αυτή χρησιμοποιείται πιο συχνά, κατά την διαδικασία δημιουργίας των σελίδων μας. Με αυτή την προβολή μπορούμε να δούμε σε δενδρική μορφή τη δομή των ιστοσελίδων μας και να προσθέσουμε, τροποποιήσουμε ή διαγράψουμε κάποια συγκεκριμένη ιστοσελίδα.

39 Εικόνα 3.7 Προβολή πλοήγησης Προβολή υπερσυνδέσμων (Hyperlinks View) Η προβολή αυτή μας δείχνει τους υπερσυνδέσμους που βρίσκονται σε κάθε σελίδα του site μας. Στο κέντρο της οθόνης εμφανίζεται η επιλεγμένη σελίδα μας, έχοντας στα αριστερά της τις σελίδες, που την περιέχουν σαν σύνδεσμο και στα δεξιά της τις σελίδες, που η ίδια περιέχει σαν συνδέσμους. Τα βελάκια, που έχουν κατεύθυνση από τις σελίδες αριστερά (που περιέχουν συνδέσμους προς την τρέχουσα επιλεγμένη σελίδα) προς την κεντρική σελίδα και από αυτήν σελίδα προς τις σελίδες δεξιά (που περιέχονται σαν υπερσύνδεσμοι στην τρέχουσα σελίδα) μας δίνουν μια γραφική άποψη της εργασίας μας.

40 Εικόνα 3.8 Προβολή υπερσυνδέσμων Προβολή διεργασιών (Tasks View) Σε αυτή την προβολή το FrontPage μας δίνει την δυνατότητα να έχουμε στην διάθεσή μας σε μορφή λίστας τις εργασίες, που χρειάζονται για να ολοκληρώσουμε την δημιουργία του web site μας. Για να προσθέσουμε μια διεργασία στην λίστα μας θα πρέπει να εκτελέσουμε την επιλογή File New Task... Το πλαίσιο διαλόγου που εμφανίζεται περιέχει τα ακόλουθα στοιχεία: 3.3 Εργασίες στην Προβολή Πλοήγησης Έχοντας επιλέξει την προβολή πλοήγησης εμφανίζεται το web-site μας σε γραφική μορφή. Εμφανίζονται, σε έναν γραφικό χάρτη, οι σελίδες που περιέχονται στο site μας και μάλιστα με μια ιεραρχική δομή. Στον χώρο αυτό γίνεται η σχεδίαση της δομής των σελίδων που θα αποτελέσουν το site μας. Οι σελίδες παρουσιάζονται σε μορφή παραλληλογράμμων,

41 συνδεδεμένων μεταξύ τους, περιέχοντας τον τίτλο της σελίδας στο κέντρο. Στην αρχή της ιεραρχίας βρίσκεται η αρχική μας σελίδα (Home Page), η οποία περιέχει τις υπόλοιπες σελίδες. Όπως παρατηρούμε στο παράδειγμά μας (Εικόνα 3.7) το παραλληλόγραμμο της αρχικής σελίδας στο κάτω μέρος περιέχει το σύμβολο πλην (ή αντίστοιχα συν), που θα μπορούσε να συρρικνώσει ή αντίστοιχα να εκτείνει, την γραφική απεικόνιση της ιεραρχικής δομής του web-site. Σε αυτό το σημείο προτείνουμε την ταυτόχρονη προβολή της λίστας φακέλων που απαρτίζουν το site μας στο αριστερό μέρος της οθόνης (Εικόνα 3.9). Αυτό επιτυγχάνεται από το μενού View Folder List. Μετά από αυτή την επιλογή στο αριστερό μέρος της οθόνης θα βλέπουμε τους φακέλους και τα αρχεία, που περιέχονται στην εργασία μας. Η μορφή και η διάταξη αυτή των φακέλων και των αρχείων είναι ίδια με την μορφή, που συναντήσαμε και περιγράψαμε αναλυτικότερα παραπάνω στην Προβολή Φακέλων. Να θυμηθούμε ότι όταν βρισκόμαστε σε έναν υποφάκελο, μπορούμε με την αντίστοιχη επιλογή της γραμμής εργαλείων (Up One Level) να ανέβουμε ένα επίπεδο πάνω. Εικόνα 3.9 Προβολή πλοήγησης με ταυτόχρονη προβολή των φακέλων και των αρχείων του site

42 3.3.1 Επεξεργασία του τίτλου μιας σελίδας Υπάρχουν διάφοροι τρόποι να αλλάξουμε τον τίτλο μιας σελίδας, ο πιο απλός είναι να επιλέξουμε την σελίδα και να κάνουμε απλό κλικ πάνω στον τίτλο της, ή με δεξί κλικ στην σελίδα και επιλογή της επιλογής Rename, ή τέλος με το πλήκτρο F2. Αφού έχουμε αλλάξει το όνομα κάνουμε κλικ σε οποιοδήποτε σημείο ή πατάμε το Enter για να ενεργοποιηθεί η αλλαγή μας. Εδώ θα πρέπει να αναφέρουμε, ότι με την αλλαγή του τίτλου μιας σελίδας δεν αλλάζουμε το πραγματικό όνομα της σελίδας, δηλαδή του αρχείου, που περιέχει την σελίδα αυτή. Αν για παράδειγμα αλλάξουμε τον τίτλο της αρχικής μας σελίδας (Εικόνα 3.9), το αρχείο που θα την περιέχει θα εξακολουθεί να ονομάζεται index.htm Εισαγωγή νέας σελίδας Για να εισάγουμε μια νέα σελίδα στο site μας επιλέγουμε πρώτα την σελίδα στην οποία θα είναι υποκείμενη η νέα σελίδα και κατόπιν εκτελούμε την επιλογή Εισαγωγής νέας σελίδας (New Page) από την γραμμή εργαλείων, ή από το μενού File New Page, ή τέλος με δεξί κλικ πάνω στην σελίδα και επιλογή New Page. Σε όλες τις περιπτώσεις δημιουργείται μια νέα σελίδα υποκείμενη στην επιλεγμένη, που είναι διαμορφωμένη ήδη με το προεπιλεγμένο Θέμα (Theme). Αν δεν έχουμε επιλεγμένη καμιά σελίδα, τότε η νέα σελίδα θα ανήκει στο ανώτατο επίπεδο (Τορ Page), όπου ανήκει και η αρχική μας σελίδα Μετακίνηση μιας σελίδας στο Site Όταν σε ένα site μια σελίδα δεν είναι στην σωστή θέση, τότε μπορούμε να την πάρουμε από το σημείο που βρίσκεται και να την τοποθετήσουμε σαν υποκείμενη σε κάποια άλλη, ή να την τοποθετήσουμε στο ανώτατο επίπεδο. Η διαδικασία της μετακίνησης γίνεται απλά με το να επιλέξουμε την συγκεκριμένη σελίδα και να την σύρουμε με το ποντίκι (αριστερό πλήκτρο κρατημένο πατημένο) στην σελίδα, που θα είναι υπερκείμενή της, ή στην αρχική σελίδα, αν θέλουμε να είναι στο ανώτατο επίπεδο. Ένας άλλος γνωστός τρόπος είναι αυτός της Αποκοπής (Cut) από την παρούσα θέση και της Επικόλλησης (Paste) στην νέα θέση. Οι γνωστές εργασίες της Αντιγραφής (Copy), Αποκοπής (Cut) και Επικόλλησης (Paste),

Η γλώσσα HTML. Επιμέλεια: Δέγγλερη Σοφία

Η γλώσσα HTML. Επιμέλεια: Δέγγλερη Σοφία Η γλώσσα HTML Επιμέλεια: Δέγγλερη Σοφία Υπερκείμενο Το δομικό χαρακτηριστικό του Παγκόσμιου Ιστού Ένα αρχείο Απλό κείμενο και υπερσύνδεσμοι Υπερσύνδεσμος Μετάβαση σε διάφορα άλλα έγγραφα Αποτελείται από

Διαβάστε περισσότερα

HTML = HyperText Markup Language

HTML = HyperText Markup Language HTML = HyperText Markup Language Η Γλώσσα προγραμματισμού HTML χρησιμοποιεί τις παρακάτω εντολές: ΒΑΣΙΚΑ ΣΤΟΙΧΕΙΑ 1 Τύπος εγγράφου 2 Τίτλος 3 Επιφυλλίδα Ορίζει

Διαβάστε περισσότερα

Άσκηση 6 Επαναληπτική Άσκηση HTML

Άσκηση 6 Επαναληπτική Άσκηση HTML Άσκηση 6 Επαναληπτική Άσκηση HTML ΕΤΙΚΕΤΕΣ HTML ΕΤΙΚΕΤΑ ΠΕΡΙΓΡΑΦΗ ΙΔΙΟΤΗΤΕΣ ΙΔΙΟΤΗΤΑ ΤΙΜΗ ΠΕΡΙΓΡΑΦΗ Βασικές Ορίζει τον τύπο του αρχείου Ορίζει ένα αρχείο HTML Ορίζει ένα τίτλο

Διαβάστε περισσότερα

Πληροφορική Τμήμα Σχεδιασμού & Τεχνολογίας Ξύλου & Επίπλου Αντώνιος Καραγεώργος Ευανθία Τσιλιχρήστου. Μάθημα 5 ο Τεχνολογίες Διαδικτύου: HTML I

Πληροφορική Τμήμα Σχεδιασμού & Τεχνολογίας Ξύλου & Επίπλου Αντώνιος Καραγεώργος Ευανθία Τσιλιχρήστου. Μάθημα 5 ο Τεχνολογίες Διαδικτύου: HTML I Πληροφορική Τμήμα Σχεδιασμού & Τεχνολογίας Ξύλου & Επίπλου Αντώνιος Καραγεώργος Ευανθία Τσιλιχρήστου Μάθημα 5 ο Τεχνολογίες Διαδικτύου: HTML I Διαδικτυακή Εφαρμογή (1/2) Ως διαδικτυακή εφαρμογή μπορούμε

Διαβάστε περισσότερα

Επαναληπτική Άσκηση ΕΤΙΚΕΤΕΣ HTML

Επαναληπτική Άσκηση ΕΤΙΚΕΤΕΣ HTML Επαναληπτική Άσκηση ΕΤΙΚΕΤΕΣ HTML ΕΤΙΚΕΤΑ ΠΕΡΙΓΡΑΦΗ ΙΔΙΟΤΗΤΕΣ ΙΔΙΟΤΗΤΑ ΤΙΜΗ ΠΕΡΙΓΡΑΦΗ Βασικές Ορίζει ένα αρχείο HTML Ορίζει ένα τίτλο για το αρχείο Ορίζει το σώµα της background URL

Διαβάστε περισσότερα

ΗΤΜL ΔΗΜΙΟΥΡΓΩΝΤΑΣ ΕΝΑ HTML ΑΡΧΕΙΟ

ΗΤΜL ΔΗΜΙΟΥΡΓΩΝΤΑΣ ΕΝΑ HTML ΑΡΧΕΙΟ ΗΤΜL HTML σημαίνει HyperText Markup Language, είναι δηλαδή μια γλώσσα που μας επιτρέπει να μορφοποιούμε κάποιες πληροφορίες προκειμένου να εμφανιστούν με τον τρόπο που θέλουμε σε έναν φυλλομετρητή. Η HTML

Διαβάστε περισσότερα

Περιεχόμενα. Λίγα λόγια από το συγγραφέα... 7

Περιεχόμενα. Λίγα λόγια από το συγγραφέα... 7 Περιεχόμενα Λίγα λόγια από το συγγραφέα... 7 Μέρος 1 1 Βασικοί όροι... 11 2 Βασική δομή κώδικα HTML... 25 3 Μορφοποίηση κειμένου... 39 4 Μορφοποίηση παραγράφων... 51 5 Εισαγωγή εικόνας... 63 6 Λίστες με

Διαβάστε περισσότερα

Ref.: SLWS 1 5Copyright 2005 The European Computer Driving Licence Foundation Ltd Σελίδα 1 από 7

Ref.: SLWS 1 5Copyright 2005 The European Computer Driving Licence Foundation Ltd Σελίδα 1 από 7 The European Computer Driving Licence Foundation Ltd Σελίδα 1 από 7 ΣΤΟΧΟΙ ΕΞΕΤΑΣΗΣ Η ενότητα ECDL WebStarter απαιτεί από τον Υποψήφιο να κατανοεί τις κύριες έννοιες της σχεδίασης και δημοσίευσης δικτυακών

Διαβάστε περισσότερα

Υπερσυνδέσεις (hyperlinks)

Υπερσυνδέσεις (hyperlinks) Υπερσυνδέσεις (hyperlinks) Οι υπερσυνδέσεις αποτελούν το δυναμικό στοιχείο σε ένα έγγραφο html. Με τις υπερσυνδέσεις είναι δυνατή, εύκολη και γρήγορη η μετάβαση ή η παραπομπή από ένα αρχείο html (πηγή)

Διαβάστε περισσότερα

Οδηγίες για προσθήκη Web Frames Tools to the Quick Access Bar σε μεταγενέστερη έκδοση του Word

Οδηγίες για προσθήκη Web Frames Tools to the Quick Access Bar σε μεταγενέστερη έκδοση του Word Οδηγίες για προσθήκη Web Frames Tools to the Quick Access Bar σε μεταγενέστερη έκδοση του Word Επειδή οι μεταγενέστερες εκδόσεις του Word δεν περιλαμβάνουν στο μενού τη δυνατότητα δημιουργίας πολλαπλών

Διαβάστε περισσότερα

<HTML> <HEAD> <TITLE> <BODY>

<HTML> <HEAD> <TITLE> <BODY> ΑΣΚΗΣΗ 1 1. Ανοίξτε τον επεξεργαστή ιστοσελίδων 2. Αποθηκεύστε στο X:/mathimata/html/askiseis/ με όνομα askisi1b.html 3. Θα φτιάξουμε μια νέα ιστοσελίδα, χρησιμοποιώντας τις βασικές ετικέτες

Διαβάστε περισσότερα

Εισαγωγή στο πρόγραμμα Microsoft word 2003

Εισαγωγή στο πρόγραμμα Microsoft word 2003 Εισαγωγή στο πρόγραμμα Microsoft word 2003 Έναρξη 1. Εκκίνηση του προγράμματος Για να ξεκινήσουμε το Word, πατάμε στο κουμπί Εναρξη και από το μενού που εμφανίζεται επιλέγουμε Προγράμματα και Microsoft

Διαβάστε περισσότερα

Εισαγωγη στην html. Η δομή μιας ιστοσελίδας (αρχείο html) Η βασική δομή ενός αρχείου html είναι η εξής: <html> <head>

Εισαγωγη στην html. Η δομή μιας ιστοσελίδας (αρχείο html) Η βασική δομή ενός αρχείου html είναι η εξής: <html> <head> Εισαγωγη στην html Ο παγκόσμιος ιστός (αγγ.: World Wide Web ή www) είναι η πιο δημοφιλής υπηρεσία που μας παρέχει το Διαδίκτυο (Internet) και είναι ένα σύστημα διασυνδεδεμένων πληροφοριών (κειμένου, εικόνας,

Διαβάστε περισσότερα

Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας

Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας Πανεπιστήμιο Αιγαίου Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας Δικτυακά Πολυμέσα Ι (Β Έτος, 3ο εξ) Διάλεξη #5η: HTML: πίνακες (tables), πλαίσια (frames) Γαβαλάς Δαμιανός

Διαβάστε περισσότερα

Εισαγωγή στον Παγκόσμιο ιστό και στη γλώσσα Html. Χρ. Ηλιούδης

Εισαγωγή στον Παγκόσμιο ιστό και στη γλώσσα Html. Χρ. Ηλιούδης Εισαγωγή στον Παγκόσμιο ιστό και στη γλώσσα Html Χρ. Ηλιούδης Παγκόσμιος Ιστός (WWW) Ο Παγκόσμιος Ιστός (World Wide Web WWW), ή απλώς Ιστός, βασίζεται στην ιδέα των κατανεμημένων πληροφοριών. Αντί όλες

Διαβάστε περισσότερα

ΤΕΙ ΚΑΒΑΛΑΣ. Πτυχιακή εργασία ΕΙΣΑΓΩΓΗ. Μιλτιάδης Κακλαμάνης

ΤΕΙ ΚΑΒΑΛΑΣ. Πτυχιακή εργασία ΕΙΣΑΓΩΓΗ. Μιλτιάδης Κακλαμάνης Σελίδα 1από ΤΕΙ ΚΑΒΑΛΑΣ Πτυχιακή εργασία Δικτυακή Εφαρμογή διαχείρισης ηλεκτρονικών εγγράφων υπηρεσίας. ΕΙΣΑΓΩΓΗ Μιλτιάδης Κακλαμάνης Σελίδα 2από Κατάλογος περιεχομένων ΕΙΣΑΓΩΓΗ...1 Σχετιζόμενα πρόσωπα...3

Διαβάστε περισσότερα

Νέες Τεχνολογίες στην Εκπαίδευση

Νέες Τεχνολογίες στην Εκπαίδευση Σχολή Εφαρμοσμένων Μαθηματικών και Φυσικών Επιστημών Εθνικό Μετσόβιο Πολυτεχνείο Νέες Τεχνολογίες στην Εκπαίδευση Πίνακες Στεφανέας Πέτρος Ζαμαρίας Βασίλης Άδεια Χρήσης Το παρόν εκπαιδευτικό υλικό υπόκειται

Διαβάστε περισσότερα

Α ΛΥΚΕΙΟΥ - ΕΦΑΡΜΟΓΕΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΜΑΪΟΣ 2019 ΕΝΔΕΙΚΤΙΚΕΣ ΕΡΩΤΗΣΕΙΣ ΚΑΤΑΝΟΗΣΗΣ

Α ΛΥΚΕΙΟΥ - ΕΦΑΡΜΟΓΕΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΜΑΪΟΣ 2019 ΕΝΔΕΙΚΤΙΚΕΣ ΕΡΩΤΗΣΕΙΣ ΚΑΤΑΝΟΗΣΗΣ Το υλικό αυτό δίνεται στους μαθητές για τη σωστή μελέτη της διδαχθείσας ύλης του μέρους Β. Πρόκειται για ένα συμπαγή κορμό ερωτήσεων και ασκήσεων οι οποίες καλύφθηκαν κατά τη διάρκεια της έως τώρα σχολικής

Διαβάστε περισσότερα

ΑΣΠΑΙΤΕ. ΠΡΑΚΤΙΚΗ ΑΣΚΗΣΗ 4α. Υπερκείμενο και HTML. Ημερομηνία :... Τμήμα :... Ονοματεπώνυμο :...

ΑΣΠΑΙΤΕ. ΠΡΑΚΤΙΚΗ ΑΣΚΗΣΗ 4α. Υπερκείμενο και HTML. Ημερομηνία :... Τμήμα :... Ονοματεπώνυμο :... ΠΡΑΚΤΙΚΗ ΑΣΚΗΣΗ 4α Υπερκείμενο και HTML ΑΣΠΑΙΤΕ Ημερομηνία :... Τμήμα :... Ονοματεπώνυμο :... Η HTML (HyperText Markup Language) είναι η γλώσσα που χρησιμοποιείται για να περιγράψει τη δομή και τη διαμόρφωση

Διαβάστε περισσότερα

ΥΠΗΡΕΣΙΕΣ ΔΙΑΔΙΚΤΟΥ Explorer & Outlook 2013

ΥΠΗΡΕΣΙΕΣ ΔΙΑΔΙΚΤΟΥ Explorer & Outlook 2013 ΥΠΗΡΕΣΙΕΣ ΔΙΑΔΙΚΤΟΥ Explorer & Outlook 2013 1. Δίκτυα Υπολογιστών και Διαδίκτυο... 3 1.1. Όροι Και Έννοιες... 3 1.2. Ασφάλεια Στο Διαδίκτυο... 5 2. Περιήγηση στον Παγκόσμιο Ιστό 7 Το Περιβάλλον Ενός Φυλλομετρητή...

Διαβάστε περισσότερα

Σχεδιάζοντας Εφαρμογές για το Διαδίκτυο

Σχεδιάζοντας Εφαρμογές για το Διαδίκτυο FrontPage 2003 Πρακτικός Οδηγός Χρήσης Το FrontPage είναι ένα πρόγραμμα δημιουργίας ιστοσελίδων και δικτυακών τόπων που επιτρέπει το σχεδιασμό ιστοσελίδων μέσα από γραφικό περιβάλλον αλλά και την ταυτόχρονη

Διαβάστε περισσότερα

Ποιες είναι οι κύριες ετικέτες που χρησιμοποιεί η HTML για την περιγραφή της συνολικής δομής μιας ιστοσελίδας;

Ποιες είναι οι κύριες ετικέτες που χρησιμοποιεί η HTML για την περιγραφή της συνολικής δομής μιας ιστοσελίδας; Τι είναι η HTML; Η HTML είναι το ακρωνύμιο των λέξεων HyperText Markup Language, δηλαδή Γλώσσα Χαρακτηρισμού Υπερ Κειμένου και βασίζεται στη γλώσσα SGML, Standard Generalized Markup Language, που είναι

Διαβάστε περισσότερα

Ετικέτες HTML. <!-->: Τα σχόλια χρησιμοποιούνται για να γράφουμε σημειώσεις μέσα στον

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

Διαβάστε περισσότερα

TEC510 Ανάπτυξη Δικτυακών Τόπων (Ε εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Γιώργος Μηλιώτης

TEC510 Ανάπτυξη Δικτυακών Τόπων (Ε εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Γιώργος Μηλιώτης TEC510 Ανάπτυξη Δικτυακών Τόπων (Ε εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Γιώργος Μηλιώτης Χειμερινό εξάμηνο 2011-2012 Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό

Διαβάστε περισσότερα

Πρακτικές οδηγίες για την Επεξεργασία Κειμένου

Πρακτικές οδηγίες για την Επεξεργασία Κειμένου 11 Εργαλεία έκφρασης και δημιουργίας Επεξεργασία Κειμένου Α Γυμνασίου Πρακτικές οδηγίες για την Επεξεργασία Κειμένου Ένα πρόγραμμα επεξεργασίας κειμένου μας προσφέρει τη δυνατότητα να: προσθέτουμε, να

Διαβάστε περισσότερα

Λίγα λόγια από το συγγραφέα Κεφάλαιο 1: Microsoft Excel Κεφάλαιο 2: Η δομή ενός φύλλου εργασίας... 26

Λίγα λόγια από το συγγραφέα Κεφάλαιο 1: Microsoft Excel Κεφάλαιο 2: Η δομή ενός φύλλου εργασίας... 26 Περιεχόμενα Λίγα λόγια από το συγγραφέα... 7 Κεφάλαιο 1: Microsoft Excel 2002... 9 Κεφάλαιο 2: Η δομή ενός φύλλου εργασίας... 26 Κεφάλαιο 3: Δημιουργία νέου βιβλίου εργασίας και καταχώριση δεδομένων...

Διαβάστε περισσότερα

Hyper Text Markup Language (HTML) που σημαίνει γλώσσα σήμανσης υπερκειμένου.

Hyper Text Markup Language (HTML) που σημαίνει γλώσσα σήμανσης υπερκειμένου. Hyper Text Markup Language (HTML) που σημαίνει γλώσσα σήμανσης υπερκειμένου. 1 η ΑΣΚΗΣΗ Οι HTML σελίδες είναι απλές σελίδες κειμένου και μπορούν να δημιουργηθούν από οποιοδήποτε πρόγραμμα επεξεργασίας

Διαβάστε περισσότερα

2. ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML ΓΙΩΡΓΟΣ ΓΙΑΝΝΑΚΑΚΗΣ, ΜΑΝΩΛΗΣ ΤΣΙΚΝΑΚΗΣ

2. ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML ΓΙΩΡΓΟΣ ΓΙΑΝΝΑΚΑΚΗΣ, ΜΑΝΩΛΗΣ ΤΣΙΚΝΑΚΗΣ 2014 2. ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML ΓΙΩΡΓΟΣ ΓΙΑΝΝΑΚΑΚΗΣ, ΜΑΝΩΛΗΣ ΤΣΙΚΝΑΚΗΣ H HTML είναι μία γλώσσα σήμανσης και αποτελεί την κύρια γλώσσα δημιουργίας ιστοσελίδων του διαδικτύου. Είναι το ακρωνύμιο των λέξεων HyperText

Διαβάστε περισσότερα

Βαρβάκειο Πρότυπο Γυμνάσιο

Βαρβάκειο Πρότυπο Γυμνάσιο Παραδόσεις & εργαστηριακές ασκήσεις στην HTML Βαρβάκειο Πρότυπο Γυμνάσιο Σχολ. Χρονιά 2016-2017 Θ. Οτζάκογλου Εργαστήρι Πληροφορικής Σχολ. Έτος 2016 2017 Αν και δεν είναι μία ακόμη «γλώσσα προγραμματισμού»,

Διαβάστε περισσότερα

ΠΡΟΓΡΑΜΜΑΤΙΣΤΙΚΑ ΕΡΓΑΛΕΙΑ ΓΙΑ ΤΟ ΔΙΑΔΙΚΤΥΟ

ΠΡΟΓΡΑΜΜΑΤΙΣΤΙΚΑ ΕΡΓΑΛΕΙΑ ΓΙΑ ΤΟ ΔΙΑΔΙΚΤΥΟ ΠΡΟΓΡΑΜΜΑΤΙΣΤΙΚΑ ΕΡΓΑΛΕΙΑ ΓΙΑ ΤΟ ΔΙΑΔΙΚΤΥΟ Κεφάλαιο 4. Η γλώσσα HTML Επιμέλεια: Καραγιάννης Σπύρος Καθηγητής ΠΕ19 Βασικοί κανόνες σύνταξης HTML ομή σελίδας HTML Μορφοποίηση κειμένου Κατάλογοι Εισαγωγή

Διαβάστε περισσότερα

POWERPOINT 2003. Είναι το δημοφιλέστερο πρόγραμμα παρουσιάσεων.

POWERPOINT 2003. Είναι το δημοφιλέστερο πρόγραμμα παρουσιάσεων. POWERPOINT 2003 1. Τι είναι το PowerPoint (ppt)? Είναι το δημοφιλέστερο πρόγραμμα παρουσιάσεων. 2. Τι δυνατότητες έχει? Δημιουργία παρουσίασης. Μορφοποίηση παρουσίασης. Δημιουργία γραφικών. Δημιουργία

Διαβάστε περισσότερα

Πρακτικές συμβουλές κατά την πληκτρολόγηση ., ; :! ( ) " " Άνοιγμα και αποθήκευση εγγράφου Αρχείο, Άνοιγμα. Αρχείο / Αποθήκευση

Πρακτικές συμβουλές κατά την πληκτρολόγηση ., ; :! ( )   Άνοιγμα και αποθήκευση εγγράφου Αρχείο, Άνοιγμα. Αρχείο / Αποθήκευση Επεξεργαστής κειμένου Word 2003 Πρακτικές συμβουλές κατά την πληκτρολόγηση Για να αλλάξουμε παράγραφο πατάμε Enter. Για να αφήσουμε μία κενή γραμμή, πατάμε μία φορά το Enter. Για να γράψουμε την επόμενη

Διαβάστε περισσότερα

Πίνακες. ετικέτα <table>

Πίνακες. ετικέτα <table> Πίνακες ετικέτα σύνταξη κελί 1 κελί 2 κελί 3 κελί 4 : πίνακας : γραμμή : κελί Ιδιότητα border border : ορίζει

Διαβάστε περισσότερα

ΑΝΤΙΓΡΑΦΗ ΑΡΧΕΙΟΥ ΣΕ ΔΙΣΚΕΤΑ ΑΝΤΙΓΡΑΦΗ ΑΡΧΕΙΟΥ ΑΠΟ ΔΙΣΚΕΤΑ. Από τον κατάλογο που εμφανίζεται επιλέγω: Αποστολή προς Δισκέτα (3,5)

ΑΝΤΙΓΡΑΦΗ ΑΡΧΕΙΟΥ ΣΕ ΔΙΣΚΕΤΑ ΑΝΤΙΓΡΑΦΗ ΑΡΧΕΙΟΥ ΑΠΟ ΔΙΣΚΕΤΑ. Από τον κατάλογο που εμφανίζεται επιλέγω: Αποστολή προς Δισκέτα (3,5) ΑΝΤΙΓΡΑΦΗ ΑΡΧΕΙΟΥ ΣΕ ΔΙΣΚΕΤΑ ΑΝΤΙΓΡΑΦΗ ΑΡΧΕΙΟΥ ΑΠΟ ΔΙΣΚΕΤΑ Τοποθετώ μια δισκέτα στον οδηγό τη δισκέτας του υπολογιστή. Τοποθετώ τη δισκέτα που έχει το αρχείο μου στον οδηγό τη δισκέτας του υπολογιστή.

Διαβάστε περισσότερα

Πλοήγηση www / Με τον Internet Explorer

Πλοήγηση www / Με τον Internet Explorer Πλοήγηση www / Με τον Internet Explorer Περιεχόμενα 1.Eισαγωγή 2.Το περιβάλλον του Internet Explorer 3.Οδηγίες πλοήγησης 4.Αποθήκευση αρχείων 5.Αγαπημένα 6.Ασφαλής σύνδεση 7.Διακομιστής μεσολάβησης 1.Εισαγωγή

Διαβάστε περισσότερα

Blog στο Wordpress. Επιμέλεια: Δέγγλερη Σοφία

Blog στο Wordpress. Επιμέλεια: Δέγγλερη Σοφία Blog στο Wordpress Επιμέλεια: Δέγγλερη Σοφία Περιεχόμενα Μετάβαση στο blog Σύνδεση ως διαχειριστής Πίνακας ελέγχου Εμφάνιση Ρυθμίσεις Άρθρα Σελίδες Πολυμέσα Σύνδεσμοι Widgets Μετάβαση στο blog Πληκτρολογούμε

Διαβάστε περισσότερα

Σχεδιάζοντας Εφαρμογές για το Διαδίκτυο

Σχεδιάζοντας Εφαρμογές για το Διαδίκτυο Το περιβάλλον εργασίας Ανοίγοντας την Ελληνική Έκδοση του FrontPage, για πρώτη φορά, η εικόνα που θα συναντήσουμε είναι αυτή της Εικόνας 1 με τα Μενού Εντολών και τη Γραμμή Εργαλείων, στο πάνω μέρος της

Διαβάστε περισσότερα

TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο)

TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Στέλλα Λάμπουρα Εαρινό εξάμηνο Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί

Διαβάστε περισσότερα

Οδηγίες κατασκευής Ιστοσελίδων µε το πρόγραµµα FRONTPAGE 2003

Οδηγίες κατασκευής Ιστοσελίδων µε το πρόγραµµα FRONTPAGE 2003 Οδηγίες κατασκευής Ιστοσελίδων µε το πρόγραµµα FRONTPAGE 2003 Μάθετε σε 10 βήµατα να φτιάχνετε τις δικές σας ιστοσελίδες Βήµα 1ο ΕΕππιιµµέέλλεειιαα:: ΣΣάάββββααςς ΟΟββααδδίίααςς Σε αυτό το βήµα θα χρησιµοποιήσετε

Διαβάστε περισσότερα

<a href="http://www.somepage.com/somepage.html">μετάβαση στο κείμενο</a>.

<a href=http://www.somepage.com/somepage.html>μετάβαση στο κείμενο</a>. HTML Τα αρχεία της HTML έχουν ετικέτες (tags) που ορίζουν τη δομή και τη μορφοποίηση των ιστοσελίδων. Οι περισσότερες HTML ετικέτες τις συναντούμε ως ζεύγη τα οποία ενεργούν στα περιεχόμενα μεταξύ των

Διαβάστε περισσότερα

Σημειώσεις στο PowerPoint

Σημειώσεις στο PowerPoint Σημειώσεις στο PowerPoint Τι είναι το PowerPoint; Το PowerPoint 2010 είναι μια οπτική και γραφική εφαρμογή που χρησιμοποιείται κυρίως για τη δημιουργία παρουσιάσεων. Με το PowerPoint, μπορείτε να δημιουργήσετε

Διαβάστε περισσότερα

ΕΡΓΑΣΤΗΡΙΟ FRONT PAGE 2

ΕΡΓΑΣΤΗΡΙΟ FRONT PAGE 2 ΕΡΓΑΣΤΗΡΙΟ FRONT PAGE 2 Μάθαµε στο προηγούµενο µάθηµα πώς να δίνουµε ονόµατα στις ιστοσελίδες µας, να βάζουµε χρώµα και γραφικά, ή ακόµα να δηµιουργούµε υπερσυνδέσµους σε κείµενο και εικόνες. Σήµερα µεταξύ

Διαβάστε περισσότερα

ΕΙΔΙΚΟΤΗΤΑ: ΤΕΧΝΙΚΟΣ ΕΦΑΡΜΟΓΩΝ ΠΛΗΡΟΦΟΡΙΚΗΣ ΜΑΘΗΜΑ: ΕΙΣΑΓΩΓΗ ΣΤΗΝ ΠΛΗΡΟΦΟΡΙΚΗ

ΕΙΔΙΚΟΤΗΤΑ: ΤΕΧΝΙΚΟΣ ΕΦΑΡΜΟΓΩΝ ΠΛΗΡΟΦΟΡΙΚΗΣ ΜΑΘΗΜΑ: ΕΙΣΑΓΩΓΗ ΣΤΗΝ ΠΛΗΡΟΦΟΡΙΚΗ ΕΙΔΙΚΟΤΗΤΑ: ΤΕΧΝΙΚΟΣ ΕΦΑΡΜΟΓΩΝ ΠΛΗΡΟΦΟΡΙΚΗΣ ΜΑΘΗΜΑ: ΕΙΣΑΓΩΓΗ ΣΤΗΝ ΠΛΗΡΟΦΟΡΙΚΗ (Σημειώσεις Word) ΕΚΠΑΙΔΕΥΤΕΣ: ΒΑΡΕΛΑΣ ΙΩΑΝΝΗΣ, ΠΟΖΟΥΚΙΔΗΣ ΚΩΝΣΤΑΝΤΙΝΟΣ MICROSOFT WORD (ΕΚΠΑΙΔΕΥΤΙΚΕΣ ΣΗΜΕΙΩΣΕΙΣ) ΠΕΡΙΕΧΟΜΕΝΑ

Διαβάστε περισσότερα

Κατασκευή ιστοσελίδων με το FrontPage2003

Κατασκευή ιστοσελίδων με το FrontPage2003 Γραμμή τίτλου Γραμμή μενού Γραμμή εργαλείων Μορφοποίηση Εικόνα Εφέ DHTML Κατασκευή ιστοσελίδων με το FrontPage2003 Παράθυρο εργασιών Όταν ανοίγουμε το FrontPage, ανοίγει αυτόματα μία νέα σελίδα. (Στο FrontPage

Διαβάστε περισσότερα

Τι είναι η HTML; Τί είναι οι ετικέτες (tags); Πώς είναι μια ετικέτα (tag);

Τι είναι η HTML; Τί είναι οι ετικέτες (tags); Πώς είναι μια ετικέτα (tag); Τι είναι η HTML; Η HTML είναι το ακρώνυμο από το Hyper Text Markup Language που σημαίνει γλώσσα χαρακτηρισμού υπερκειμένου. Η χρήση μιας γλώσσας χαρακτηρισμού σημαίνει ότι γράφεται πρώτα το κείμενο και

Διαβάστε περισσότερα

Γεωργάκης Αριστείδης ΠΕ20

Γεωργάκης Αριστείδης ΠΕ20 1 Εκκίνηση για πρώτη φορά Όπως συμβαίνει και με τις υπόλοιπες εφαρμογές του OpenOffice, έτσι και το Impress μπορούμε να το εκκινήσουμε μέσω της συντόμευσης που εγκαθίσταται αυτόματα στην επιφάνεια εργασίας

Διαβάστε περισσότερα

Λίγα λόγια από το συγγραφέα Κεφάλαιο 1: Βάσεις δεδομένων και Microsoft Access Κεφάλαιο 2: Microsoft Access

Λίγα λόγια από το συγγραφέα Κεφάλαιο 1: Βάσεις δεδομένων και Microsoft Access Κεφάλαιο 2: Microsoft Access Περιεχόμενα Λίγα λόγια από το συγγραφέα... 7 Κεφάλαιο 1: Βάσεις δεδομένων και Microsoft Access... 9 Κεφάλαιο 2: Microsoft Access 2002... 20 Κεφάλαιο 3: Το σύστημα Βοήθειας του Microsoft Office ΧΡ... 36

Διαβάστε περισσότερα

Microsoft PowerPoint 2007

Microsoft PowerPoint 2007 Information Technology Services and Solutions Σύμβουλοι Μηχανογράφησης και Εκπαίδευσης Στεφ. Σκουλούδη 27, Καλλίπολη, Πειραιάς 210 45 38 177 http://www.itss.gr/ Microsoft PowerPoint 2007 Κωνσταντίνος Κωβαίος

Διαβάστε περισσότερα

ΕΠΕΞΕΡΓΑΣΙΑ ΚΕΙΜΕΝΟΥ. Κειμενογράφος WORD

ΕΠΕΞΕΡΓΑΣΙΑ ΚΕΙΜΕΝΟΥ. Κειμενογράφος WORD ΕΠΕΞΕΡΓΑΣΙΑ ΚΕΙΜΕΝΟΥ Κειμενογράφος WORD ΣΚΟΠΟΣ Η ανάπτυξη δεξιοτήτων επεξεργασίας κειμένου ΠΡΟΤΑΣΕΙΣ ΚΑΙ ΡΥΘΜΙΣΕΙΣ Άνω περιθώριο (top margin) : 2.49cm Κάτω περιθώριο (bottom margin) :5.99cm Αριστερό περιθώριο

Διαβάστε περισσότερα

7.Α.1 Παρουσιάσεις. 7.Α.2 Περιγραφή περιεχομένων της εφαρμογής

7.Α.1 Παρουσιάσεις. 7.Α.2 Περιγραφή περιεχομένων της εφαρμογής Μάθημα 7ο Πολυμέσα 7.Α.1 Παρουσιάσεις Οι παρουσιάσεις είναι μια εφαρμογή που χρησιμεύει στην παρουσίαση των εργασιών μας. Αποτελούν μια συνοπτική μορφή των εργασιών μας. Μέσω δημιουργίας διαφανειών, μορφοποιήσεων

Διαβάστε περισσότερα

Blog στο Wordpress. Επιμέλεια: Δέγγλερη Σοφία

Blog στο Wordpress. Επιμέλεια: Δέγγλερη Σοφία Blog στο Wordpress Επιμέλεια: Δέγγλερη Σοφία Περιεχόμενα Μετάβαση στο blog Σύνδεση ως διαχειριστής Πίνακας ελέγχου Εμφάνιση Ρυθμίσεις Άρθρα Σελίδες Πολυμέσα Σύνδεσμοι Μετάβαση στο blog Πληκτρολογούμε στη

Διαβάστε περισσότερα

PowerPoint Ένα εργαλείο παρουσίασης

PowerPoint Ένα εργαλείο παρουσίασης Εργασία 7η 2 Αρκετοί πιστεύουν πως η επιτυχία μιας παρουσίασης είναι δεδομένη εάν ο παρουσιαστής κατέχει το θέμα που πρόκειται να παρουσιάσει και είναι σε θέση να χειρίζεται ί ά άνετα έ ένα πρόγραμμα ό

Διαβάστε περισσότερα

Σχεδίαση ιστοσελίδων

Σχεδίαση ιστοσελίδων Τ.Ε.Ι. Δυτικής Ελλάδας Σχολή Διοίκησης και Οικονομίας Τμήμα Διοίκησης Επιχειρήσεων - Πάτρα Σχεδίαση ιστοσελίδων Θεώνη Πιτουρά, Γιάννης Κουτσονίκος Σημειώσεις για το Εργαστήριο «Επιχειρηματικές δικτυακές

Διαβάστε περισσότερα

Εξεταστέα Ύλη (Syllabus) Έκδοση 1.5

Εξεταστέα Ύλη (Syllabus) Έκδοση 1.5 Εξεταστέα Ύλη (Syllabus) Έκδοση 1.5 Πνευματικά Δικαιώματα 2005 Ίδρυμα ECDL (ECDL Foundation www.ecdl.com) Όλα τα δικαιώματα είναι κατοχυρωμένα. Κανένα μέρος αυτού του εγγράφου δεν μπορεί να αναπαραχθεί

Διαβάστε περισσότερα

ΟΔΗΓΙΕΣ ΚΕΙΜΕΝΟΓΡΑΦΟΥ 2007

ΟΔΗΓΙΕΣ ΚΕΙΜΕΝΟΓΡΑΦΟΥ 2007 1. ΓΡΑΜΜΗ ΜΕΝΟΥ ΟΔΗΓΙΕΣ ΚΕΙΜΕΝΟΓΡΑΦΟΥ 2007 2. ΓΡΑΜΜΗ ΕΡΓΑΛΕΙΩΝ Κάθε μενού έχει τις δικές της δυνατότητες, όπως για παράδειγμα μόλις πατήσετε το κουμπί κεντρική βγαίνουν τα εικονίδια των δυνατοτήτων που

Διαβάστε περισσότερα

Σπουδές CAD, Πληροφορικής, Οικονομίας, Διοίκησης και D.T.P. με Σύστημα διδασκαλίας facetoface

Σπουδές CAD, Πληροφορικής, Οικονομίας, Διοίκησης και D.T.P. με Σύστημα διδασκαλίας facetoface Copyright 2012-2015 -SYSTEM- All rights reserved 2/180 ΠΕΡΙΕΧΟΜΕΝΑ Μάθημα 1: Εισαγωγή στο Dreamwever Μάθημα 2: Γραμμές εργαλείων document Μάθημα 3: Προετοιμασία τοποθεσίας ιστού Μάθημα 4: Ορισμός τοπικής

Διαβάστε περισσότερα

Βιωματικό εργαστήριο ηλεκτρονικών υπολογιστών. Οργάνωση εκπαιδευτικού υλικού με Η/Υ από δραστηριότητες στο Δημοτικό και στο Νηπιαγωγείο.

Βιωματικό εργαστήριο ηλεκτρονικών υπολογιστών. Οργάνωση εκπαιδευτικού υλικού με Η/Υ από δραστηριότητες στο Δημοτικό και στο Νηπιαγωγείο. Βιωματικό εργαστήριο ηλεκτρονικών υπολογιστών. Οργάνωση εκπαιδευτικού υλικού με Η/Υ από δραστηριότητες στο Δημοτικό και στο Νηπιαγωγείο. Εισηγητής : Χρήστος Μανώλης δάσκαλος Θεσσαλονίκη Οκτώβριος - Δεκέμβριος

Διαβάστε περισσότερα

Microsoft Excel Κεφάλαιο 1. Εισαγωγή. Βιβλίο εργασίας

Microsoft Excel Κεφάλαιο 1. Εισαγωγή. Βιβλίο εργασίας Περιεχόμενα Κεφάλαιο 1 Microsoft Excel 2010... 7 Κεφάλαιο 2 Η δομή ενός φύλλου εργασίας... 19 Κεφάλαιο 3 ημιουργία νέου βιβλίου εργασίας και καταχώριση δεδομένων... 24 Κεφάλαιο 4 Συμβουλές για την καταχώριση

Διαβάστε περισσότερα

Βασίλειος Κοντογιάννης ΠΕ19

Βασίλειος Κοντογιάννης ΠΕ19 Ενότητα3 Επικοινωνία και Διαδίκτυο 11.1 Γενική Εισαγωγή στην HTML Τι είναι η HTML (HyperText Markup Language); Είναι μια γλώσσα σήμανσης (Markup) με την οποία πραγματοποιείται η δόμηση σελίδων του Παγκόσμιου

Διαβάστε περισσότερα

Εισαγωγή στην HTML Τα tags της HTML και τα γνωρίσματά τους

Εισαγωγή στην HTML Τα tags της HTML και τα γνωρίσματά τους Εισαγωγή στην HTML Τα tags της HTML και τα γνωρίσματά τους Με την γλώσσα περιγραφής υπερ-κειμένου (HTML) μπορούμε να σχεδιάζουμε ιστοσελίδες. Η HyperText Markup Language βασίζεται στην SGML (Standard Generalized

Διαβάστε περισσότερα

Περιεχόμενα. Εισαγωγή στο Word Βασικές μορφοποιήσεις κειμένων Κεφάλαιο 1. Κεφάλαιο 2

Περιεχόμενα. Εισαγωγή στο Word Βασικές μορφοποιήσεις κειμένων Κεφάλαιο 1. Κεφάλαιο 2 Περιεχόμενα Κεφάλαιο 1 Εισαγωγή στο Word 2007...9 Η οθόνη του Word... 9 Δημιουργία νέου εγγράφου... 15 Προσθήκη και διαγραφή κειμένου... 18 Πρώτα επιλογή, μετά εργασία... 20 Εύρεση και αντικατάσταση κειμένου...

Διαβάστε περισσότερα

ΓΙΑΝΝΕΝΑ & ΣΥΓΧΡΟΝΗ ΔΗΜΙΟΥΡΓΙΑ ΔΙΑΧΕΙΡΙΣΗ ΓΙΑΝΝΕΝΑ & ΣΥΓΧΡΟΝΗ ΔΗΜΙΟΥΡΓΙΑ

ΓΙΑΝΝΕΝΑ & ΣΥΓΧΡΟΝΗ ΔΗΜΙΟΥΡΓΙΑ ΔΙΑΧΕΙΡΙΣΗ ΓΙΑΝΝΕΝΑ & ΣΥΓΧΡΟΝΗ ΔΗΜΙΟΥΡΓΙΑ ΓΙΑΝΝΕΝΑ & ΣΥΓΧΡΟΝΗ ΔΗΜΙΟΥΡΓΙΑ ΔΙΑΧΕΙΡΙΣΗ Περιγραφή και επεξήγηση της χρήσης του χώρου διαχείρισης της ιστοσελίδας για τους καλλιτέχνες 1 Περιεχόμενα Είσοδος στο χώρο διαχείρισης...3 Επεξεργασία της σελίδας

Διαβάστε περισσότερα

Περιεχόμενα. Περιεχόμενα...v

Περιεχόμενα. Περιεχόμενα...v Περιεχόμενα Περιεχόμενα...v Κεφάλαιο 1: Ρυθμίσεις γραμμών εργαλείων και μενού...1 Κεφάλαιο 2: Διαχείριση παραθύρων και προβολές...18 Κεφάλαιο 3: Εύρεση, αντικατάσταση, και μετάβαση σε συγκεκριμένο στοιχείο...35

Διαβάστε περισσότερα

Κεφάλαιο 11: Εισαγωγή στην HTML. Εφαρμογές Πληροφορικής Κεφ. 11 Καραμαούνας Πολύκαρπος

Κεφάλαιο 11: Εισαγωγή στην HTML. Εφαρμογές Πληροφορικής Κεφ. 11 Καραμαούνας Πολύκαρπος Κεφάλαιο 11: Εισαγωγή στην HTML 1 11.1 Γενική εισαγωγή στην HTML Τι είναι η HTML HyperText Markup Language - Γλώσσα Χαρακτηρισμού Υπερ-Κειμένου είναι η βασική γλώσσα με την οποία πραγματοποιείται η δόμηση

Διαβάστε περισσότερα

Τεχνολογίες Διαδικτύου - Εργαστήριο 1 ο

Τεχνολογίες Διαδικτύου - Εργαστήριο 1 ο Τεχνολογίες Διαδικτύου - Εργαστήριο 1 ο 1. Δημιουργία μιας απλής σελίδας HTML Στον προσωπικό σας κατάλογο δημιουργήστε ένα φάκελο με όνομα HTML. Ανοίξτε το Notepad ακολουθώντας τη διαδρομή (Start All Programs

Διαβάστε περισσότερα

Θέματα 1,2 ης εβδομάδας

Θέματα 1,2 ης εβδομάδας ΠΛΗΡΟΦΟΡΙΚΗ Ι Θέματα 1,2 ης εβδομάδας Περιβάλλον εργασίας Word, Μορφοποίηση Γραμματοσειράς, Μορφοποίηση Παραγράφου Εξάσκηση σε βασικά κείμενα Τι είναι το MS-WORD Είναι ένα πρόγραμμα επεξεργασίας κειμένου,

Διαβάστε περισσότερα

ΕΠΕΞΕΡΓΑΣΙΑ ΚΕΙΜΕΝΟΥ

ΕΠΕΞΕΡΓΑΣΙΑ ΚΕΙΜΕΝΟΥ ΕΠΕΞΕΡΓΑΣΙΑ ΚΕΙΜΕΝΟΥ 1. ΒΑΣΙΚΕΣ ΛΕΙΤΟΥΡΓΙΕΣ ΚΑΙ ΠΕΡΙΒΑΛΛΟΝ ΕΦΑΡΜΟΓΗΣ ΕΠΕΞΕΡΓΑΣΙΑΣ ΚΕΙΜΕΝΟΥ 1.1. Χειρισµός εγγράφων 1.1.1. ηµιουργία, Άνοιγµα, Κλείσιµο, Αποθήκευση εγγράφου 1.1.2. Αποθήκευση εγγράφου µε

Διαβάστε περισσότερα

Πίνακες HTML. Παναγιώτης Γαλάτης 1ο ΕΠΑΛ Ηρακλείου

Πίνακες HTML. Παναγιώτης Γαλάτης 1ο ΕΠΑΛ Ηρακλείου Πίνακες HTML Παναγιώτης Γαλάτης 1ο ΕΠΑΛ Ηρακλείου Τι είναι Πίνακας Ένας πίνακας στοιχείων αποτελείται από γραμμές και στήλες. Το σημείο τομής μιας γραμμής και μιας στήλης ονομάζεται κελί (cell( cell).

Διαβάστε περισσότερα

Πληροφορική Τμήμα Σχεδιασμού & Τεχνολογίας Ξύλου & Επίπλου Αντώνιος Καραγεώργος Ευανθία Τσιλιχρήστου. Μάθημα 6 ο Τεχνολογίες Διαδικτύου: HTML II

Πληροφορική Τμήμα Σχεδιασμού & Τεχνολογίας Ξύλου & Επίπλου Αντώνιος Καραγεώργος Ευανθία Τσιλιχρήστου. Μάθημα 6 ο Τεχνολογίες Διαδικτύου: HTML II Πληροφορική Τμήμα Σχεδιασμού & Τεχνολογίας Ξύλου & Επίπλου Αντώνιος Καραγεώργος Ευανθία Τσιλιχρήστου Μάθημα 6 ο Τεχνολογίες Διαδικτύου: HTML II Εισαγωγή Εικόνων Οι φυλλομετρητές μπορούν να εμφανίσουν ένθετες

Διαβάστε περισσότερα

1. Τα τμήματα της επιφάνειας εργασίας των Windows

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

Διαβάστε περισσότερα

1. O FrontPage Explorer

1. O FrontPage Explorer 1. O FrontPage Explorer Στο παρελθόν, ο δηµιουργός µιας θέσης Ιστού έπρεπε να παρακολουθεί µόνος του τον τρόπο σύνδεσης των σελίδων του. Με το FrontPage Explorer µπορείτε να δηµιουργείτε ιστούς και να

Διαβάστε περισσότερα

1. Άνοιγμα Και Κλείσιμο Της Εφαρμογής Φυλλομετρητή Ιστού (Internet Explorer)

1. Άνοιγμα Και Κλείσιμο Της Εφαρμογής Φυλλομετρητή Ιστού (Internet Explorer) ΔΙΑΔΙΚΤΥΟ (INTERNET) ΣΤΟΧΟΙ: 1. Άνοιγμα Και Κλείσιμο Μιας Εφαρμογής Φυλλομετρητή Ιστού (Internet Explorer) 2. Παρουσίαση Μιας Ιστοσελίδας 3. Διακοπή Και Ανανέωση Μιας Ιστοσελίδας (Stop and Refresh) 4.

Διαβάστε περισσότερα

[συνέχεια του εγγράφου Word 2]

[συνέχεια του εγγράφου Word 2] [συνέχεια του εγγράφου Word 2] Συνεχίζουμε την πρακτική μας άσκηση πάνω στο έγγραφο που δημιουργήσαμε την προηγούμενη εβδομάδα και το οποίο αποθηκεύσαμε στον φάκελο με το όνομά μας, με το όνομα: Word 2x.

Διαβάστε περισσότερα

Οδηγός χρήσης Joomla 3.0

Οδηγός χρήσης Joomla 3.0 Οδηγός χρήσης Joomla 3.0 Περιεχόμενα 1. Γενικές λειτουργίες άρθρων 2. Δημιουργία νέου/επεξεργασία άρθρου 3. Δημιουργία κουμπιού 2013 1. Γενικές λειτουργίες άρθρων Συνδεόμαστε στο περιβάλλον διαχείρισης

Διαβάστε περισσότερα

Κεφάλαιο 4 HyperText Markup Language - HTML. Προγραμματιστικά εργαλεία για το διαδίκτυο Φίλιππος Κουτσάκας, Πολύγυρος 2013

Κεφάλαιο 4 HyperText Markup Language - HTML. Προγραμματιστικά εργαλεία για το διαδίκτυο Φίλιππος Κουτσάκας, Πολύγυρος 2013 Κεφάλαιο 4 HyperText Markup Language - HTML Προγραμματιστικά εργαλεία για το διαδίκτυο Φίλιππος Κουτσάκας, Πολύγυρος 2013 Τι είναι η HTML; Ένας τρόπος για να πεις στον σελιδομετρητή πώς να αναπαραστήσει

Διαβάστε περισσότερα

Περιεχόμενα. Κεφάλαιο 1 Εισαγωγή στο PowerPoint...9. Κεφάλαιο 2 Εργασία με κείμενο... 39

Περιεχόμενα. Κεφάλαιο 1 Εισαγωγή στο PowerPoint...9. Κεφάλαιο 2 Εργασία με κείμενο... 39 Περιεχόμενα Κεφάλαιο 1 Εισαγωγή στο PowerPoint...9 Βασικές έννοιες... 10 Το παράθυρο του PowerPoint... 13 Δημιουργία νέας παρουσίασης... 15 Βασικές εργασίες με διαφάνειες... 22 Προβολές παρουσίασης...

Διαβάστε περισσότερα

Global Kids 3. Syllabus

Global Kids 3. Syllabus Global Kids 3 Syllabus Το εγκαταστημένο λογισμικό που απαιτείται για την εξεταστική διαδικασία του προγράμματος Globlakids 3 είναι: Microsoft Windows Σουίτα Microsoft Office GlobalCert A.E. Σόλωνος 108,

Διαβάστε περισσότερα

Περιεχόμενα. Μέρος 1: Βασικές έννοιες Πληροφορικής και επικοινωνιών Μέρος 2: Χρήση υπολογιστή και διαχείριση αρχείων Πρόλογος...

Περιεχόμενα. Μέρος 1: Βασικές έννοιες Πληροφορικής και επικοινωνιών Μέρος 2: Χρήση υπολογιστή και διαχείριση αρχείων Πρόλογος... Περιεχόμενα Πρόλογος...11 Μέρος 1: Βασικές έννοιες Πληροφορικής και επικοινωνιών... 13 1.1 Εισαγωγή στους υπολογιστές... 15 1.2 Μονάδες μέτρησης... 27 1.3 Οι βασικές λειτουργίες ενός ηλεκτρονικού υπολογιστή...

Διαβάστε περισσότερα

Παρουσίαση και μορφοποίηση κειμένου

Παρουσίαση και μορφοποίηση κειμένου HTML [ετικέτες] Παρουσίαση και μορφοποίηση κειμένου Στην HTML σύμφωνα με τους κανόνες, κενές γραμμές και περισσότερα του ενός κενά μεταξύ λέξεων δεν λαμβάνονται υπόψη από τον φυλλομετρητή. Για αυτό το

Διαβάστε περισσότερα

11. Η γλώσσα HTML Πίνακες, Λίστες, Φόρμες

11. Η γλώσσα HTML Πίνακες, Λίστες, Φόρμες 11. Η γλώσσα HTML Πίνακες, Λίστες, Φόρμες Σκοπός του Εργαστηρίου: Σκοπός της παρούσας εργαστηριακής άσκησης είναι η εμβάθυνση σε συχνά χρησιμοποιούμενες ετικέτες HTML, όπως οι πίνακες και οι λίστες, καθώς

Διαβάστε περισσότερα

Περιεχόμενα. Μέρος 1: Βασικές έννοιες της πληροφορικής... 13. Πρόλογος... 11

Περιεχόμενα. Μέρος 1: Βασικές έννοιες της πληροφορικής... 13. Πρόλογος... 11 Περιεχόμενα Πρόλογος... 11 Μέρος 1: Βασικές έννοιες της πληροφορικής... 13 1.1 Windows XP... 15 1.2 Επιφάνεια εργασίας... 19 1.3 Γραμμή εργασιών... 24 1.4 Χειρισμός παραθύρων... 30 1.5 Μενού... 36 1.6

Διαβάστε περισσότερα

Το διαδίκτυο είναι ένα δίκτυο που αποτελείτε από πολλά μικρότερα δίκτυα υπολογιστών.

Το διαδίκτυο είναι ένα δίκτυο που αποτελείτε από πολλά μικρότερα δίκτυα υπολογιστών. Κεφάλαιο 2 Με το διαδίκτυο μπορεί κάποιος: να κάνει έρευνα, να ψωνίσει για διάφορες υπηρεσίες και προϊόντα, να δει καιρικούς χάρτες, να πάρει φωτογραφίες, ταινίες, και διάφορες άλλες πληροφορίες που βρίσκονται

Διαβάστε περισσότερα

Περιεχόμενα. Εισαγωγή στο Word 2003...9. Βασικές μορφοποιήσεις κειμένων... 41. Κεφάλαιο 1. Κεφάλαιο 2

Περιεχόμενα. Εισαγωγή στο Word 2003...9. Βασικές μορφοποιήσεις κειμένων... 41. Κεφάλαιο 1. Κεφάλαιο 2 Περιεχόμενα Κεφάλαιο 1 Εισαγωγή στο Word 2003...9 Η οθόνη του Word... 9 Δημιουργία νέου εγγράφου... 14 Προσθήκη και διαγραφή κειμένου... 17 Πρώτα επιλογή, μετά εργασία... 18 Εύρεση και αντικατάσταση κειμένου...

Διαβάστε περισσότερα

Πρόλογος... 7 ΕΙΔΙΚΟΣ ΕΦΑΡΜΟΓΩΝ ΠΛΗΡΟΦΟΡΙΚΗΣ

Πρόλογος... 7 ΕΙΔΙΚΟΣ ΕΦΑΡΜΟΓΩΝ ΠΛΗΡΟΦΟΡΙΚΗΣ ΠΕΡΙΕΧΟΜΕΝΑ Πρόλογος... 7 ΕΙΔΙΚΟΣ ΕΦΑΡΜΟΓΩΝ ΠΛΗΡΟΦΟΡΙΚΗΣ ΘΕΜΑΤΙΚΗ ΕΝΟΤΗΤΑ Α Δομή και λειτουργία προσωπικού υπολογιστή...11 ΘΕΜΑΤΙΚΗ ΕΝΟΤΗΤΑ Β Δομή και χρήση λειτουργικών συστημάτων DOS, UNIX και λειτουργικού

Διαβάστε περισσότερα

ΕΙΔΙΚΟΙ ΧΑΡΑΚΤΗΡΕΣ ΧΑΡΑΚΤΗΡΕΣ ΜΕ ΕΙΔΙΚΕΣ ΛΕΙΤΟΥΡΓΙΕΣ. ΠΙΝΑΚΑΣ ΚΩΔΙΚΩΝ ΔΙΑΦΥΓΗΣ Χαρακτήρας Κωδικός διαφυγής Ερμηνεία Συμβόλου & nbsp;

ΕΙΔΙΚΟΙ ΧΑΡΑΚΤΗΡΕΣ ΧΑΡΑΚΤΗΡΕΣ ΜΕ ΕΙΔΙΚΕΣ ΛΕΙΤΟΥΡΓΙΕΣ. ΠΙΝΑΚΑΣ ΚΩΔΙΚΩΝ ΔΙΑΦΥΓΗΣ Χαρακτήρας Κωδικός διαφυγής Ερμηνεία Συμβόλου & nbsp; ΕΙΔΙΚΟΙ ΧΑΡΑΚΤΗΡΕΣ Υπάρχουν ειδικοί χαρακτήρες που δεν μπορούν να απεικονισθούν με απλές πληκτρολογήσεις (πατώντας ένα πλήκτρο ή ένα πλήκτρο και το Shift) αλλά μόνο με πιο περίπλοκους τρόπους (π.χ. πατώντας

Διαβάστε περισσότερα

Οδηγός γρήγορης εκκίνησης

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

Διαβάστε περισσότερα

Επεξεργασία κειμένου: Word 2003

Επεξεργασία κειμένου: Word 2003 Περιεχόμενα Λίγα λόγια από το συγγραφέα...7 Κεφάλαιο 1: Ρυθμίσεις γραμμών εργαλείων και μενού...9 Κεφάλαιο 2: Διαχείριση παραθύρων και προβολές...26 Κεφάλαιο 3: Εύρεση, αντικατάσταση, και μετάβαση σε συγκεκριμένο

Διαβάστε περισσότερα

ΤΟ MICROSOFT FRONTPAGE 2002

ΤΟ MICROSOFT FRONTPAGE 2002 Πώςς ξξεεκκι ιννάάςς ττο ππρόγγρααμμαα ααυυττό ΤΟ MICROSOFT FRONTPAGE 2002 Το Microsoft FrontPage είναι ένα πρόγραμμα που χρησιμοποιείται κυρίως για κατασκευή ιστοσελίδων. Μπορείς όμως να φτιάξεις την

Διαβάστε περισσότερα

Μενού Προβολή. Προβολές εγγράφου

Μενού Προβολή. Προβολές εγγράφου Μενού Προβολή Προβολές εγγράφου Το Word παρέχει πέντε διαφορετικού είδους προβολές στον χρήστη, οι οποίες και βρίσκονται στο μενού Προβολή (View). Εναλλακτικά μπορούμε να επιλέξουμε το είδος προβολής που

Διαβάστε περισσότερα

Δημιουργία ενός κενού πίνακα

Δημιουργία ενός κενού πίνακα 3.4.1.1 Δημιουργία ενός κενού πίνακα Ένας πίνακας αποτελείται από έναν αριθμό γραμμών και στηλών που δημιουργούν ένα πλέγμα. Σε αυτό το πλέγμα είναι πιθανή η ύπαρξη ή μη περιθωρίων. Κάθε κελί του πίνακα

Διαβάστε περισσότερα

Η λίστα <ol> (ordered list)

Η λίστα <ol> (ordered list) Λίστες (lists) Σε πολλά έγγραφα απαιτείται η παρουσίαση ή η καταγραφή στοιχείων σε μορφή λίστας. Για παράδειγμα, μια λίστα από ονόματα ή μια λίστα από προϊόντα. Τα στοιχεία μιας λίστας μπορεί να είναι

Διαβάστε περισσότερα

Τεχνολογίες Διαδικτύου (Εξασκηθείτε στην HTML)

Τεχνολογίες Διαδικτύου (Εξασκηθείτε στην HTML) Τεχνολογίες Διαδικτύου (Εξασκηθείτε στην HTML) 1. Δημιουργία μιας απλής σελίδας HTML Ανοίξτε το Notepad ακολουθώντας τη διαδρομή Start All Programs Accessories Notepad Πληκτρολογήστε το ακόλουθο κείμενο:

Διαβάστε περισσότερα

Λίγα λόγια από το συγγραφέα Microsoft Word Δημιουργία νέου εγγράφου Το σύστημα Βοήθειας του Word...

Λίγα λόγια από το συγγραφέα Microsoft Word Δημιουργία νέου εγγράφου Το σύστημα Βοήθειας του Word... ΕΝΟΤΗΤΑ 3 Περιεχόμενα Λίγα λόγια από το συγγραφέα... 7 91 Microsoft Word 2007... 9 92 Δημιουργία νέου εγγράφου... 20 93 Το σύστημα Βοήθειας του Word... 38 94 Μετακίνηση σε έγγραφο και προβολές εγγράφου...

Διαβάστε περισσότερα

Κεφάλαιο 1 Χρήση προτύπου 2. Κεφάλαιο 2 Τροποποίηση μιας παρουσίασης 9. Κεφάλαιο 4 Προσθήκη αντικειμένων 26. Κεφάλαιο 5 Ειδικά εφέ 35

Κεφάλαιο 1 Χρήση προτύπου 2. Κεφάλαιο 2 Τροποποίηση μιας παρουσίασης 9. Κεφάλαιο 4 Προσθήκη αντικειμένων 26. Κεφάλαιο 5 Ειδικά εφέ 35 Περιεχόμενα Κεφάλαιο 1 Χρήση προτύπου 2 Κεφάλαιο 2 Τροποποίηση μιας παρουσίασης 9 Κεφάλαιο 3 Εφαρμογή σχεδίων 19 Κεφάλαιο 4 Προσθήκη αντικειμένων 26 Κεφάλαιο 5 Ειδικά εφέ 35 Κεφάλαιο 6 Κουμπιά ενεργειών

Διαβάστε περισσότερα

Γραφήματα. Excel 2003

Γραφήματα. Excel 2003 Γραφήματα Excel 2003 Ορολογία Τίτλος γραφήματος Σειρά δεδομένων Υπόμνημα Κατηγορίες Ετικέτες Δείκτες Περιοχή γραφήματος Περιοχή σχεδίασης γραφήματος Γραμμές πλέγματος Οδηγός γραφημάτων Για τη δημιουργία

Διαβάστε περισσότερα

Εργασία-3: Παρουσίαση Εργασίας. Ομάδα Α. Προετοιμασία Αναφοράς

Εργασία-3: Παρουσίαση Εργασίας. Ομάδα Α. Προετοιμασία Αναφοράς Εργασία-3: Παρουσίαση Εργασίας Ομάδα Α. Προετοιμασία Αναφοράς Αρκετοί πιστεύουν πως η επιτυχία μιας παρουσίασης είναι δεδομένη εάν ο παρουσιαστής κατέχει το θέμα που πρόκειται να παρουσιάσει και είναι

Διαβάστε περισσότερα

Π Ε Ρ Ι Ε Χ Ο Μ Ε Ν Α

Π Ε Ρ Ι Ε Χ Ο Μ Ε Ν Α Π Ε Ρ Ι Ε Χ Ο Μ Ε Ν Α 1 Windows 8.1 1.1 Βασικές Έννοιες Πληροφορικής και Επικοινωνιών Εισαγωγή 19 Τι είναι ο Ηλεκτρονικός Υπολογιστής 20 Κατηγορίες Υπολογιστών 21 Κύρια μέρη ενός Προσωπικού Υπολογιστή

Διαβάστε περισσότερα

Μάθημα 3ο. Διαχείριση αρχείων

Μάθημα 3ο. Διαχείριση αρχείων Μάθημα 3ο Διαχείριση αρχείων Σελίδα 36 από 106 3.1 Εισαγωγή Συμπληρώνοντας την έννοια της χωρητικότητας, που είδαμε σε προηγούμενη ενότητα, όσο πιο πολύ δουλεύουμε με τον υπολογιστή, τόσο πιο πολλά αρχεία

Διαβάστε περισσότερα

ΔΗΜΙΟΥΡΓΙΑ ΣΧΗΜΑΤΩΝ. 1) Προβολή Γραμμές εργαλείων Σχεδίαση. ΜΑΘΗΜΑ 5 ο : ΣΧΗΜΑΤΑ-ΕΙΚΟΝΕΣ-ΕΞΙΣΩΣΕΙΣ 1

ΔΗΜΙΟΥΡΓΙΑ ΣΧΗΜΑΤΩΝ. 1) Προβολή Γραμμές εργαλείων Σχεδίαση. ΜΑΘΗΜΑ 5 ο : ΣΧΗΜΑΤΑ-ΕΙΚΟΝΕΣ-ΕΞΙΣΩΣΕΙΣ 1 ΣΧΗΜΑΤΑ-ΕΙΚΟΝΕΣ-ΕΞΙΣΩΣΕΙΣ ΔΗΜΙΟΥΡΓΙΑ ΣΧΗΜΑΤΩΝ Για τη δημιουργία σχημάτων στο WORD χρησιμοποιείται η γραμμή εργαλείων της σχεδίασης. Τα βήματα που μπορεί να ακολουθήσετε για να εμφανίσετε τη γραμμή εργαλείων

Διαβάστε περισσότερα

ΕΡΩΤΗΣΕΙΣ στην επεξεργασία κειμένου (Word)

ΕΡΩΤΗΣΕΙΣ στην επεξεργασία κειμένου (Word) 1. Πώς δημιουργούμε ένα νέο έγγραφο; 2. Πώς αποθηκεύουμε ένα έγγραφο στη δισκέτα μας; 3. Μπορείτε να περιγράψετε τη βασική οθόνη του Word;. 4. Τι ακριβώς κάνει το εργαλείο ζουμ; 5. Ποιους κανόνες ακολουθεί

Διαβάστε περισσότερα