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

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

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

Transcript

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

2 Πίνακας περιεχομένων I. Η γλώσσα HTML Γνωριμία με την HTML Οι ετικέτες - tags της HTML Παράμετροι Δομή εγγράφου HTML Κεφαλίδα (head) Κυρίως σώμα (body) Εισαγωγή σχολίων σε έγγραφο HTML Ένα απλό HTML πρόγραμμα Μορφοποίηση κειμένου Παράγραφοι Επικεφαλίδες Μορφοποίηση χαρακτήρων Κεντράρισμα κειμένου Στοίχιση τμήματος σελίδας Γραμματοσειρά Λίστες Διατεταγμένες λίστες Μη διατεταγμένες λίστες Λίστες μέσα σε άλλες λίστες Ροή περιεχομένου Αλλαγή γραμμής Οριζόντιες γραμμές Εικόνες Γραμμή κειμένου δίπλα στην εικόνα Αναδίπλωση κειμένου δίπλα στην εικόνα (wrap text) Απόσταση κειμένου από εικόνα Άλλες παράμετροι Υπερσυνδέσεις Παραπομπές σε σελίδα στο Internet Παραπομπές σε σελίδα στον ίδιο δικτυακό τόπο Σελιδοδείκτες Αποστολή Εισαγωγή υπερσύνδεσης σε εικόνα Πίνακες Σχεδίαση ιστοσελίδων Σελίδα 1

3 I. Η γλώσσα HTML Η HTML είναι η γλώσσα που χρησιμοποιείται στον Παγκόσμιο Ιστό (World Wide Web) για δημοσιοποίηση πληροφοριών. Η HTML παρέχει τις εξής δυνατότητες: Δημοσιοποίηση εγγράφων με επικεφαλίδες, κείμενο, πίνακες, λίστες, εικόνες, κλπ. Ανάκτηση πληροφοριών στον Παγκόσμιο Ιστό με τη βοήθεια υπερσυνδέσεων και με ένα απλό κλικ. Σχεδίαση φορμών για δημιουργία αλληλεπίδρασης με απομακρυσμένους χρήστες, για χρήση στην αναζήτηση συγκεκριμένων πληροφοριών, για κρατήσεις, για παραγγελία προϊόντων, κλπ. Ενσωμάτωση βίντεο clips, ήχου και άλλων εφαρμογών σε έγγραφα. 1. Γνωριμία με την HTML Η HTML είναι μια γλώσσα που χρησιμοποιείται για τη συγγραφή ιστοσελίδων. Τα αρχικά HTML προέρχονται από τις λέξεις HyperText Markup Language. Η HTML ανήκει σε μια ευρύτερη κατηγορία γλωσσών που ονομάζονται SGML - Standard Generalisation Markup Languages. Οι γλώσσες αυτές (συμπεριλαμβανομένης της HTML) δεν είναι γλώσσες προγραμματισμού αλλά περιγραφικές γλώσσες, καθώς αποτελούνται από οδηγίες που καθορίζουν τον τρόπο εμφάνισης των στοιχείων μιας ιστοσελίδας (εννοώντας με τον όρο στοιχεία το κείμενο, τις εικόνες, τον ήχο κλπ., από τα οποία αποτελείται η ιστοσελίδα) και τον τρόπο κλήσης άλλων αρχείων ή εφαρμογών. Τα αρχεία σε γλώσσα HTML (τα οποία έχουν επέκταση.html ή.htm) είναι έγγραφα σε μορφή κειμένου και περιλαμβάνουν: 1. Το περιεχόμενο της ιστοσελίδας, δηλαδή τα στοιχεία της ιστοσελίδας τα οποία εμφανίζονται στην οθόνη. 2. Τις ετικέτες που υποδεικνύουν στο φυλλομετρητή (π.χ. στον Internet Explorer) πώς να παρουσιάσει το περιεχόμενο της ιστοσελίδας Οι ετικέτες - tags της HTML Οι οδηγίες εμφανίζονται με τη μορφή ετικετών (tags) και περικλείονται από τα σύμβολα < (άνοιγμα ετικέτας) και > (κλείσιμο ετικέτας). Σχεδίαση ιστοσελίδων Σελίδα 2

4 Οι ετικέτες εμφανίζονται συνήθως ως ζευγάρια, στην παρακάτω μορφή: <tag> περιεχόμενο </tag> όπου η ετικέτα <tag> δείχνει την αρχή και η </tag> το τέλος της ετικέτας. Τα tags μπορούν να γράφονται με κεφαλαία ή με πεζά γράμματα 1. Για παράδειγμα, η ετικέτα: <B> η σελίδα μου </B> εμφανίζει το περιεχόμενο «η σελίδα μου» με έντονα (bold) γράμματα. Υπάρχουν και κάποιες ετικέτες που εμφανίζονται μόνο με μια ετικέτα (δεν έχουν ετικέτα τέλους). Για παράδειγμα, η ετικέτα <BR> δείχνει αλλαγή γραμμής. Ετικέτες μπορούν να περιλαμβάνουν άλλες ετικέτες, αλλά πρέπει να παραμένουν εμφωλιασμένες (nested), δηλαδή αυτές που ανοίγουν πρώτες με την ετικέτα αρχής, να κλείνουν τελευταίες με την ετικέτα τέλους, όπως φαίνεται στο ακόλουθο σχήμα. Σωστό <tag1> <tag2> Λάθος <tag1> <tag2> </tag1> </tag2> </tag1> </tag2> Σχήμα 1: Δομή εμφωλιασμένων ετικετών 1.2. Παράμετροι Υπάρχουν ετικέτες που δέχονται παραμέτρους, οι οποίες παρέχουν επιπλέον πληροφορίες για τα στοιχεία του περιεχομένου μιας ιστοσελίδας. Για παράδειγμα: η ετικέτα <BODY BGCOLOR= RED > είναι το tag <BODY> με παράμετρο BGCOLOR που παίρνει τιμή RED. Δηλώνει ότι το χρώμα του φόντου της σελίδας πρέπει να 1 Στα παραδείγματα που αναφέρονται σε αυτές τις σημειώσεις, οι ετικέτες δίνονται με κεφαλαία γράμματα για να διακρίνονται πιο εύκολα από το υπόλοιπο περιεχόμενο. Σχεδίαση ιστοσελίδων Σελίδα 3

5 είναι κόκκινο. Άλλο παράδειγμα είναι: η ετικέτα <TABLE BORDER=0> που δηλώνει ότι ο πίνακας δεν θα έχει περίγραμμα. Οι παράμετροι μπαίνουν πάντα μόνο στα tag αρχής και έχουν τη μορφή: όνομα παραμέτρου = τιμή παραμέτρου Οι τιμές των παραμέτρων εμφανίζονται συνήθως σε εισαγωγικά, είτε απλά ( ) είτε διπλά ( ), εκτός από την περίπτωση που είναι αριθμοί (όπως το παραπάνω παράδειγμα με την παράμετρο BORDER) ή δεσμευμένες λέξεις (λέξεις που χρησιμοποιούνται από τη γλώσσα για να δηλώσουν κάτι συγκεκριμένο - τέτοιες λέξεις είναι και τα χρώματα, οπότε το tag BODY του παραδείγματος θα μπορούσε να γραφεί και ως <BODY BGCOLOR=RED>). Τα διπλά εισαγωγικά είναι τα πιο συνηθισμένα, αλλά σε περιπτώσεις που η ίδια η τιμή περιέχει διπλά εισαγωγικά είναι απαραίτητα τα απλά εισαγωγικά, για παράδειγμα: NAME= Νικολόπουλος Κώστας ( ο νεότερος ). 2. Δομή εγγράφου HTML Ένα έγγραφο HTML αρχίζει και τελειώνει με τα tags <HTML> και </HTML>, που χρησιμοποιούνται σαν κωδικοί αναγνώρισης του κειμένου ως HTML από το φυλλομετρητή. Η ιστοσελίδα αποτελείται από δύο βασικά τμήματα: της κεφαλίδας (head) και του κυρίως σώματος (body) Κεφαλίδα (head) Η κεφαλίδα προσδιορίζεται από το ζεύγος των tags <HEAD> και </HEAD> και περιέχει γενικές πληροφορίες σχετικά με την ιστοσελίδα, όπως τον τίτλο της ιστοσελίδας, τις λέξεις - κλειδιά που χρησιμεύουν σε μηχανές αναζήτησης (search engines) και άλλα στοιχεία που δεν αποτελούν περιεχόμενο της ιστοσελίδας. Στον πίνακα 1 παρουσιάζονται τα βασικότερα tags που μπορεί να περιλαμβάνει η κεφαλίδα μιας ιστοσελίδας. Πίνακας 1: Βασικά tags για το τμήμα της κεφαλίδας tag <TITLE> <SCRIPT> Λειτουργία Ορισμός τίτλου της ιστοσελίδας Καθορισμός scripting γλώσσας Σχεδίαση ιστοσελίδων Σελίδα 4

6 <STYLE> <META> <LINK> <ISINDEX> Ορισμός της βάσης αρχής για τον καθορισμό των σχετικών URLs Εισαγωγή μετα-πληροφορίας Ορισμός σχέσεων με άλλα κείμενα Για απλές περιπτώσεις αναζήτησης Το tag TITLE ορίζει τον τίτλο της ιστοσελίδας, που θα εμφανιστεί στη γραμμή τίτλου του παραθύρου στο φυλλομετρητή του επισκέπτη. Αν και δεν είναι υποχρεωτικό, κάθε ιστοσελίδα πρέπει να έχει το δικό της τίτλο και μάλιστα αυτός ο τίτλος να είναι λιτός αλλά και μεστός σε περιεχόμενο. Το tag SCRIPT ορίζει τη scripting γλώσσα της ιστοσελίδας, δηλαδή τη γλώσσα στην οποία έχουν αναπτυχθεί ειδικά προγράμματα (scripts) που συνοδεύουν την ιστοσελίδα ή που έχουν ενσωματωθεί στην ιστοσελίδα. Τα προγράμματα αυτά θα εκτελεστούν στον υπολογιστή του επισκέπτη της ιστοσελίδας είτε αμέσως μετά τη μεταφορά της ιστοσελίδας είτε σε κάποια άλλη στιγμή (π.χ. όταν γίνει μια κίνηση του mouse ή όταν πατηθεί κάποια υπερσύνδεση), παρέχοντας τη δυνατότητα εμπλουτισμού της ιστοσελίδας με δυναμικά και αλληλεπιδραστικά στοιχεία (π.χ. αλλαγή των περιεχομένων της ιστοσελίδας, επεξεργασία των στοιχείων που συμπληρώνονται σε μία φόρμα, σχηματισμός γραφικών στην οθόνη). Το tag META επιτρέπει τον ορισμό μετα-πληροφορίας, δηλαδή πληροφορίας σχετικά με το περιεχόμενο της ιστοσελίδας. Η μετα-πληροφορία αποτελείται από δύο στοιχεία: όνομα (name) και περιεχόμενο (content). Για παράδειγμα: <META NAME = keywords CONTENT= html, web, Internet, site > Ορισμός λέξεων - κλειδιών στην ιστοσελίδα <META NAME = description CONTENT = Στο site περιγράφεται η HTML και η χρήση της στην κατασκευή ιστοσελίδων για τον Παγκόσμιο Ιστό > Περιγραφή του περιεχομένου της ιστοσελίδας <META NAME = author CONTENT = Steve Davis > Ορισμός του συγγραφέα της ιστοσελίδας Όπως βλέπουμε, με το tag META αφ ενός με το name ορίζουμε μια ιδιότητα (στα παραπάνω παραδείγματα, οι ιδιότητες είναι, αντίστοιχα, keywords, description και author) και αφ ετέρου με το content δίνουμε μια τιμή στην ιδιότητα. Σχεδίαση ιστοσελίδων Σελίδα 5

7 2.2. Κυρίως σώμα (body) Το κυρίως σώμα οριοθετείται από το ζεύγος των tags <BODY> και </BODY> και περιλαμβάνει το περιεχόμενο της ιστοσελίδας και ετικέτες για την εμφάνισή του. Οι βασικές παράμετροι της ετικέτας του κυρίως σώματος (δηλ. του tag <BODY>) παρουσιάζονται στον πίνακα 2. Πίνακας 2: Παράμετροι του tag <BODY> Παράμετρος BGCOLOR TEXT TOPMARGIN / LEFTMARGIN LINK / VLINK / ALINK BACKGROUND Λειτουργία Ορισμός χρώματος φόντου Ορισμός χρώματος των χαρακτήρων κειμένου Ορισμός απόστασης του περιεχομένου από πάνω και από αριστερά του παραθύρου Ορισμός χρώματος υπερσυνδέσεων: links, visited links, active links Προσδιορισμός εικόνας που θα εμφανίζεται ως φόντο Παραδείγματα: <BODY BGCOLOR = BLUE> Ορισμός του γαλάζιου ως χρώματος φόντου της ιστοσελίδας (ίδιο ακριβώς αποτέλεσμα θα είχαμε με το <BODY bgcolor = #0000ff >) <BODY BACKGROUND = GreenField.jpg TEXT = YELLOW> Ορισμός της εικόνας GreenField.jpg ως φόντου της ιστοσελίδας και του κίτρινου ως χρώματος του κειμένου της ιστοσελίδας Το κυρίως σώμα αποτελείται από ετικέτες που ορίζουν βασικές δομές κειμένου, το κείμενο ή το ίδιο το περιεχόμενο της ιστοσελίδας Εισαγωγή σχολίων σε έγγραφο HTML Υπάρχει η δυνατότητα εγγραφής σχολίων οπουδήποτε μέσα σε ένα έγγραφο HTML. Τα σχόλια στην HTML έχουν την ακόλουθη σύνταξη: <!-- αυτό είναι ένα σχόλιο --> Σχόλιο σε μία γραμμή Σχεδίαση ιστοσελίδων Σελίδα 6

8 <!-- αυτό το σχόλιο καταλαμβάνει πάνω από μία γραμμή --> Σχόλιο σε περισσότερες γραμμές Τα σχόλιά μας τα εισάγουμε μεταξύ των χαρακτήρων <!-- και --> (δηλαδή στη θέση «σχόλια» παραπάνω) και δεν έχουν κάποια ιδιαίτερη σημασία (δεν εμφανίζονται από τον φυλλομετρητή). Καλό είναι να μην εισάγονται παύλες -- ανάμεσα στα σχόλια για να μη δημιουργηθεί σύγχυση με τους χαρακτήρες κλεισίματος του tag Ένα απλό HTML πρόγραμμα Ακολουθεί ένα παράδειγμα απλού HTML προγράμματος, στο οποίο φαίνεται η βασική δομή ενός HTML εγγράφου. <HTML> <!--Απλό HTML πρόγραμμα--> <HEAD> <TITLE> Απλό HTML πρόγραμμα </TITLE> </HEAD> <BODY> Η πρώτη μου ιστοσελίδα </BODY> </HTML> 3. Μορφοποίηση κειμένου 3.1. Παράγραφοι Ο φυλλομετρητής δεν αναγνωρίζει τα διαστήματα μεταξύ των λέξεων ή μεταξύ των γραμμών στο κείμενο που γράφουμε σε HTML. Γι αυτό το λόγο, για την αλλαγή παραγράφου χρησιμοποιούμε ένα tag για να υποδεικνύουμε τη νέα παράγραφο, το <Ρ>. Η ετικέτα αυτή εισάγεται κάθε φορά που χρειάζεται το κενό μιας παραγράφου στο κείμενο και δε χρειάζεται αντίστοιχη ετικέτα κλεισίματος (δηλαδή το </P>). <BODY> Σχεδίαση ιστοσελίδων Σελίδα 7

9 <P> Αυτή είναι η πρώτη παράγραφος <Ρ> Αυτή είναι η δεύτερη παράγραφος <Ρ> Αυτή είναι η τελευταία παράγραφος </BODY> Το αποτέλεσμα θα εμφανιστεί στον φυλλομετρητή ως εξής: Παράμετροι Αν θέλουμε να στοιχίσουμε μία παράγραφο στο κέντρο, αριστερά, δεξιά ή και από τις δύο πλευρές μπορούμε να χρησιμοποιήσουμε την παράμετρο ALIGN με τις αντίστοιχες τιμές CENTER, LEFT, RIGHT ή JUSTIFY. <BODY> <P ALIGN=CENTER> η παράγραφος αυτή θα κεντραριστεί <P ALIGN=LEFT> η παράγραφος αυτή θα στοιχηθεί αριστερά <P ALIGN=RIGHT> η παράγραφος αυτή θα στοιχηθεί δεξιά <P ALIGN= JUSTIFY> η παράγραφος αυτή θα στοιχηθεί και από δεξιά και από αριστερά ώστε να ταιριάζει ακριβώς στο πλάτος της οθόνης </BODY> Σχεδίαση ιστοσελίδων Σελίδα 8

10 Το αποτέλεσμα θα εμφανιστεί στον φυλλομετρητή ως εξής: Σε περίπτωση που θέλουμε να εμφανίζεται κείμενο ακριβώς με τον τρόπο που το γράφουμε (όταν δηλαδή τα κενά που αφήνουμε είναι σημαντικά), τότε χρησιμοποιούμε την ετικέτα <PRE> Επικεφαλίδες Σε ένα κείμενο μπορούν να μπουν ενδιάμεσα επικεφαλίδες που ποικίλλουν σε μέγεθος από το 1 (το μεγαλύτερο) μέχρι το 6 (το μικρότερο). Τα αντίστοιχα tags είναι: <Ηn> που ανοίγει τη διαδικασία και </Ηn> που την κλείνει, όπου n=1,2,3,4,5 ή 6. <BODY> <H1> Επικεφαλίδα 1 </H1> <H2> Επικεφαλίδα 2 </H2> <H3> Επικεφαλίδα 3 </H3> <H4> Επικεφαλίδα 4 </H4> <H5> Επικεφαλίδα 5 </H5> <H6> Επικεφαλίδα 6 </H6> </BODY> Σχεδίαση ιστοσελίδων Σελίδα 9

11 Το αποτέλεσμα θα εμφανιστεί στον φυλλομετρητή ως εξής: Παράμετροι Οι παράμετροι είναι ίδιες με αυτές που είδαμε στις ετικέτες παραγράφων. Συγκεκριμένα, αν θέλουμε να στοιχίσουμε μία επικεφαλίδα στο κέντρο ή αριστερά ή δεξιά χρησιμοποιούμε την παράμετρο ALIGN με τις αντίστοιχες τιμές CENTER ή LEFT ή RIGHT. <H2 ALIGN=CENTER> Επικεφαλίδα 2 κεντραρισμένη </H2> <H4 ALIGN=RIGHT> Επικεφαλίδα 4 στοιχισμένη δεξιά </H4> <H6 ALIGN=LEFT> Επικεφαλίδα 6 στοιχισμένη αριστερά </H6> Το αποτέλεσμα θα εμφανιστεί στον φυλλομετρητή ως εξής: 3.3. Μορφοποίηση χαρακτήρων Όλες οι ετικέτες μορφοποίησης χαρακτήρων του κειμένου έχουν την εξής μορφή: <tag> κείμενο που θέλουμε να μορφοποιήσουμε </tag> Σχεδίαση ιστοσελίδων Σελίδα 10

12 Στον παρακάτω πίνακα αναφέρονται συνοπτικά τα σπουδαιότερα tags. Πίνακας 3: Τα βασικότερα tags της HTML tag <B> </B> <I> </I> <U> </U> <S> </S> ή <STRIKE> <ΕΜ> </ΕΜ> <STRONG> </STRONG> <SMALL> </SMALL> <BIG> </BIG> <TT> </TT> <SUB> </SUB> <SUP> </SUP> Περιγραφή εμφάνισης κειμένου Έντονο (bold) Πλάγιο (italic) Υπογραμμισμένο (underline) Διακριτά διαγραμμένο (strike through) Με έμφαση (παρόμοια με την πλάγια γραφή) Με έμφαση (παρόμοια με την έντονη γραφή) Με μικρότερα γράμματα από τη γραμματοσειρά που το περιβάλλει Με μεγαλύτερα γράμματα από τη γραμματοσειρά που το περιβάλλει Μορφή γραφής τηλέτυπου Τοποθετείται ελάχιστα πιο κάτω από το επίπεδο των υπόλοιπων γραμμάτων της γραμμής, σαν δείκτης (subscript) Τοποθετείται ελάχιστα πιο πάνω από το επίπεδο των υπόλοιπων γραμμάτων της γραμμής, σαν εκθέτης (superscript) Το τμήμα εγγράφου που ακολουθεί: <P><B>bold</B>, <I>italic</I>, <B><I>bold italic</i></b>, <TT>teletype text</tt>, and <BIG>big</BIG> and <SMALL>small</SMALL> text. θα εμφανιστεί στην οθόνη ως εξής: Όπως βλέπουμε, όταν θέλουμε περισσότερες από μια μορφοποιήσεις για το ίδιο κείμενο, πρέπει να χρησιμοποιήσουμε τα tags εμφωλιασμένα. Σχεδίαση ιστοσελίδων Σελίδα 11

13 3.4. Κεντράρισμα κειμένου Για να κεντράρουμε ένα κείμενο πρέπει να το περιβάλουμε με τα αντίστοιχα tags: <CENTER> που ανοίγει την διαδικασία και </CENTER> που την κλείνει. Οτιδήποτε περιέχεται μεταξύ των δύο ετικετών θα κεντραριστεί. <CENTER> το κείμενο θα κεντραριστεί </CENTER> Το αποτέλεσμα θα εμφανιστεί στον φυλλομετρητή ως εξής: 3.5. Στοίχιση τμήματος σελίδας Η ετικέτα <DIV>...</DIV> (Document Division element), στοιχείο της HTML 3.2, λειτουργεί με την παράμετρο ALIGN και αναφέρεται σε ένα τμήμα σελίδας, δηλαδή σε μια σειρά από επικεφαλίδες ή παραγράφους συνολικά (δηλαδή δεν χρειάζεται να επαναλάβουμε την παράμετρο ALIGN σε κάθε μια από τις ετικέτες). Το τμήμα της σελίδας που θα στοιχηθεί με την <DIV> μπορεί να περιέχει και ετικέτες εισαγωγής εικόνων. Στο παράδειγμα που ακολουθεί οι Επικεφαλίδες 1 και 3 και η Παράγραφος θα στοιχηθούν δεξιά. <DIV ALIGN=RIGHT><H1>Επικεφαλίδα 1</H1><H3>Επικεφαλίδα 3</H3> <P>Παράδειγμα για την ετικέτα DIV. Οι επικεφαλίδες και η παράγραφος θα στοιχηθούν δεξιά </DIV> Το αποτέλεσμα θα εμφανιστεί στον φυλλομετρητή ως εξής: Σχεδίαση ιστοσελίδων Σελίδα 12

14 3.6. Γραμματοσειρά Για να προσδιορίσουμε τα χαρακτηριστικά της γραμματοσειράς χρησιμοποιούμε την ετικέτα <FONT>, η οποία έχει τρεις βασικές παραμέτρους: SIZE: Προσδιορίζουμε το μέγεθος των γραμμάτων. Οι πιθανές τιμές είναι 1 (αντιστοιχεί σε μέγεθος γραμμάτων 8 στιγμές), 2 (αντιστοιχεί σε 10 στιγμές), 3 (αντιστοιχεί σε 12 στιγμές), 4 (αντιστοιχεί σε 14 στιγμές), 5 (αντιστοιχεί σε 18 στιγμές), 6 (αντιστοιχεί σε 24 στιγμές) και 7 (αντιστοιχεί σε 36 στιγμές). Επίσης, η τιμή της παραμέτρου SIZE μπορεί να είναι σχετική με την ισχύουσα τιμή, για παράδειγμα, SIZE = +3 ή SIZE = -1 (που σημαίνουν: μεγαλύτερο κατά 3 και μικρότερο κατά 1 από το ισχύον μέγεθος). ΠΡΟΣΟΧΗ! Η HTML δεν υποστηρίζει άλλα μεγέθη γραμμάτων από τα προαναφερθέντα. <P><font size=1>size=1</font> <font size=2> size=2</font> <font size=3> size=3</font> <font size=4> size=4</font> <font size=5> size=5</font> <font size=6> size=6</font> <font size=7> size=7</font> Το αποτέλεσμα των παραπάνω οδηγιών θα είναι: Παρακάτω εμφανίζονται τα αποτελέσματα χρήσης σχετικών μεγεθών στην παράμετρο SIZE της ετικέτας FONT, όταν το αρχικό μέγεθος είναι 3. Παρατηρήστε ότι τα τρία πρώτα μεγέθη είναι ίδια (τα -1 και 0 μετατρέπονται σε 1). Το αρχικό μέγεθος της γραμματοσειράς προσδιορίζεται από την ετικέτα BASEFONT (με χρήση της παραμέτρου SIZE). Οι αλλαγές που επιτυγχάνονται στη συνέχεια με τη χρήση σχετικών μεγεθών στην παράμετρο SIZE της ετικέτας FONT προσδιορίζονται με βάση την τιμή που έχει προσδιοριστεί στην ετικέτα BASEFONT. Αν δεν υπάρχει ετικέτα BASEFONT στο έγγραφο, τότε ως αρχικό μέγεθος θεωρείται το μέγεθος 3. Σχεδίαση ιστοσελίδων Σελίδα 13

15 COLOR: Προσδιορίζουμε το χρώμα των γραμμάτων. Τα χρώματα περιγράφονται είτε με τη συνήθη αγγλική ονομασία τους (π.χ. red, blue, white, green) είτε ως ποσοστό κόκκινου, πράσινου και μπλε σε δεκαεξαδικές τιμές από 0 μέχρι 255 (σύστημα RGB - Red, Green, Blue), π.χ. COLOR = #FF00FF, που σημαίνει 255 κόκκινο και 255 μπλε (αποτέλεσμα φούξια). Στον πίνακα που ακολουθεί εμφανίζονται τα ονόματα των χρωμάτων που μπορούν να χρησιμοποιηθούν ως τιμές της παραμέτρου COLOR και οι αντίστοιχες δεκαεξαδικές τιμές των χρωμάτων αυτών στο σύστημα RGB (για τα συγκεκριμένα 16 χρώματα, μπορεί να χρησιμοποιηθεί εναλλακτικά είτε το όνομα είτε η RGB τιμή του χρώματος, για άλλα χρώματα πρέπει να προσδιοριστεί η RGB τιμή). Πίνακας 4: Τα ονόματα των χρωμάτων και οι RGB τιμές τους Χρώμα Όνομα χρώματος RGB τιμή Χρώμα Όνομα χρώματος RGB τιμή Black # Green # Silver #C0C0C0 Lime #00FF00 Gray # Olive # White #FFFFFF Yellow #FFFF00 Maroon # Navy # Red #FF0000 Blue #0000FF Purple # Teal # Fuchsia #FF00FF Aqua #00FFFF FACE: Προσδιορίζουμε τον τύπο των γραμμάτων (γραμματοσειρά), που μπορεί να είναι και μια λίστα από διαφορετικές γραμματοσειρές, χωρισμένες μεταξύ τους με κόμμα (για την περίπτωση που κάποιος επισκέπτης δεν διαθέτει τη γραμματοσειρά που επιλέγουμε ως πρώτη). 4. Λίστες 4.1. Διατεταγμένες λίστες Για να εισάγουμε διατεταγμένες (δηλαδή αριθμημένες) λίστες χρησιμοποιούμε τις ακόλουθες ετικέτες: Σχεδίαση ιστοσελίδων Σελίδα 14

16 Το ζεύγος <OL> </OL>, που δηλώνουν την αρχή και το τέλος της διατεταγμένης λίστας, και Το <LI> πριν από κάθε στοιχείο της λίστας. Έστω το παρακάτω τμήμα εγγράφου HTML: <BODY> <OL> <LI> Πρώτο στοιχείο <LI> Δεύτερο στοιχείο <LI> Τρίτο στοιχείο </OL> </BODY> Θα εμφανιστεί στο φυλλομετρητή ως εξής: Για το tag <LI> δεν χρειάζεται να χρησιμοποιηθεί το αντίστοιχο κλείσιμο </LI>. Ο τύπος της αρίθμησης των στοιχείων μιας διατεταγμένης λίστας (αραβικοί αριθμοί, αγγλικά γράμματα και λατινικοί αριθμοί) μπορεί να οριστεί με την παράμετρο TYPE της ετικέτας OL ως εξής: Αραβικοί αριθμοί (1, 2, 3, ): <OL TYPE=1> Αγγλικά πεζά γράμματα (a, b, c, ): <OL TYPE=a> Αγγλικά κεφαλαία γράμματα (A, B, C, ): <OL TYPE=A> Λατινικοί πεζοί αριθμοί (i, ii, iii, ): <OL TYPE=i> Λατινικοί κεφαλαίοι αριθμοί (I, II, III, ): <OL TYPE=I> Όταν δεν υπάρχει η παράμετρος TYPE, χρησιμοποιούνται οι αραβικοί αριθμοί Μη διατεταγμένες λίστες Ομοίως με τις διατεταγμένες λίστες, για τις μη διατεταγμένες χρησιμοποιούμε τις ακόλουθες ετικέτες: Το ζεύγος <UL> </UL>, που δηλώνουν την αρχή και το τέλος της μη διατεταγμένης λίστας, και Το <LI> πριν από κάθε στοιχείο της λίστας. Σχεδίαση ιστοσελίδων Σελίδα 15

17 Έστω το παρακάτω τμήμα εγγράφου HTML: <BODY> <UL> <LI> Στοιχείο <LI> Στοιχείο <LI> Στοιχείο </UL> </BODY> θα εμφανιστεί στο φυλλομετρητή ως εξής: Τα ενδεικτικά σημάδια (κουκκίδες) κάθε στοιχείου μιας μη διατεταγμένης λίστας μπορούν να οριστούν με την παράμετρο TYPE της ετικέτας UL και να πάρουν τις εξής μορφές: Μαύρα δισκάκια (<UL TYPE=DISC>) Κυκλάκια (<UL TYPE=CIRCLE>) Τετραγωνάκια (<UL TYPE=SQUARE>) Όταν δεν υπάρχει η TYPE, οι κουκκίδες εμφανίζονται ως μαύρα δισκάκια Λίστες μέσα σε άλλες λίστες Μπορούμε να συμπεριλάβουμε μια λίστα μέσα σε μια άλλη λίστα, όπως φαίνεται στο παράδειγμα που ακολουθεί. Έστω το παρακάτω τμήμα εγγράφου HTML: <BODY> <UL> <LI> ΠΕΡΙΦΕΡΕΙΑ ΔΥΤΙΚΗΣ ΕΛΛΑΔΑΣ <UL> <LI> Νομός Αχαΐας <LI> Νομός Ηλείας <LI> Νομός Αιτωλοακαρνανίας Σχεδίαση ιστοσελίδων Σελίδα 16

18 </UL> <LI> ΠΕΡΙΦΕΡΕΙΑ ΠΕΛΟΠΟΝΝΗΣΟΥ <UL> <LI> Νομός Αρκαδίας <LI> Νομός Κορινθίας <LI> Νομός Αργολίδας <LI> Νομός Μεσσηνίας </UL> </UL> </BODY> θα εμφανιστεί στο φυλλομετρητή ως εξής: 5. Ροή περιεχομένου 5.1. Αλλαγή γραμμής Ο φυλλομετρητής δεν αναγνωρίζει τα διαστήματα που υπάρχουν στο κείμενο, αλλά ούτε και τις αλλαγές γραμμής που έχουν εισαχθεί. Για να αλλάξει η γραμμή στη ροή του κειμένου χρησιμοποιείται η ετικέτα <BR> (συντομογραφία του Break = σπάζω), για την οποία δεν χρειάζεται αντίστοιχη ετικέτα κλεισίματος. <BODY> Εδώ εισάγουμε κείμενο <BR> εδώ το κείμενο συνεχίζεται σε άλλη γραμμή </BODY> θα εμφανιστεί στο φυλλομετρητή ως εξής: Σχεδίαση ιστοσελίδων Σελίδα 17

19 Παρατηρήστε τη σχέση της ετικέτας <BR> με την <P>. Η <BR> αλλάζει γραμμή ενώ η <P> και αλλάζει γραμμή και αφήνει μια γραμμή κενή πριν ξεκινήσει η νέα παράγραφος. Δηλαδή, μια <P> ισοδυναμεί με δύο συνεχόμενα <BR> Οριζόντιες γραμμές Με τις οριζόντιες γραμμές μπορούμε να διαχωρίζουμε μεταξύ τους διάφορα τμήματα του κειμένου. Αυτό επιτυγχάνεται με την ετικέτα <ΗR> (συντομογραφία του Horizontal Rule), για την οποία δεν χρησιμοποιείται ετικέτα κλεισίματος. Στο tag <HR> μπορούν να χρησιμοποιηθούν οι εξής παράμετροι: η WIDTH που δηλώνει το μήκος της οριζόντιας γραμμής: οι τιμές που μπορεί να πάρει η παράμετρος WIDTH είναι είτε απόλυτες (σε pixel) είτε σχετικές (σε ποσοστό % της οθόνης), η SIZE που δηλώνει το πάχος της οριζόντιας γραμμής (σε pixel), η COLOR που δηλώνει το χρώμα της οριζόντιας γραμμής, η ALIGN για τη ρύθμιση της στοίχισης της γραμμής (η προεπιλεγμένη τιμή της είναι CENTER), η NOSHADE που δεν παίρνει τιμή, απλά δηλώνει ότι η γραμμή θα εμφανιστεί με συμπαγές χρώμα (δηλ χωρίς σκιά). Παραδείγματα: <HR WIDTH=70% SIZE=5 ALIGN=LEFT> Η γραμμή που θα εμφανιστεί θα είναι: Ενώ η γραμμή: θα εμφανιστεί ως εξής: <HR WIDTH=70% SIZE=3 NOSHADE> Σχεδίαση ιστοσελίδων Σελίδα 18

20 6. Εικόνες Η εισαγωγή εικόνας γίνεται με την ετικέτα: <IMG SRC="URL"> όπου URL είναι το όνομα του αρχείου - εικόνας (συμπεριλαμβάνει και το μονοπάτι που ακολουθείται από το φάκελο στον οποίο βρίσκεται αποθηκευμένη η ιστοσελίδα μέχρι το φάκελο στον οποίο είναι αποθηκευμένη η εικόνα). Για παράδειγμα, η ετικέτα <IMG SRC= image.gif > θα εμφανίσει στην οθόνη του φυλλομετρητή την εικόνα που είναι αποθηκευμένη στο αρχείο image.gif το οποίο βρίσκεται στον ίδιο φάκελο με το φάκελο που είναι αποθηκευμένη η ιστοσελίδα. Σε περίπτωση που ο φυλλομετρητής δεν βρει το αρχείο (δηλ, το URL) που έχει δοθεί στην ετικέτα <IMG>, θα εμφανίσει την εικόνα: Σε αυτή την περίπτωση, θα πρέπει να ελεγχθεί αν το όνομα του αρχείου έχει γραφεί σωστά Γραμμή κειμένου δίπλα στην εικόνα Μια εικόνα μαζί με μια γραμμή κειμένου μπορεί να συμπεριληφθεί σε μια επικεφαλίδα ή σε μια παράγραφο. Παραδείγματα: <P><IMG SRC="photo.jpg"> η εικόνα θα εμφανιστεί στο σημείο που υπάρχει η αντίστοιχη <BR>ετικέτα μέσα στο κείμενο Θα εμφανιστεί ως εξής: Επίσης, ο κώδικας: Σχεδίαση ιστοσελίδων Σελίδα 19

21 <Η2>η εικόνα <IMG SRC="photo.jpg">θα εμφανιστεί στο σημείο<br> που υπάρχει η αντίστοιχη ετικέτα μέσα στο κείμενο </Η2> θα εμφανιστεί ως εξής: Δεξιά και αριστερά της εικόνας θα υπάρχει ΜΟΝΟ ΜΙΑ γραμμή κειμένου. Αν η ετικέτα IMG δεν βρίσκεται μέσα σε παράγραφο ή επικεφαλίδα, θα εμφανιστεί μόνη της μέσα στη σελίδα, χωρίς να υπάρχει κάποιο κείμενο (ή κάτι άλλο, π.χ. άλλη εικόνα) δίπλα της. Η εικόνα μπορεί να τοποθετηθεί σε διάφορες θέσεις σχετικά με το επίπεδο της γραμμής κειμένου που υπάρχει δεξιά ή αριστερά της. Αυτό θα γίνει με την παράμετρο ALIGN, που παίρνει τιμές: TOP: η γραμμή κειμένου εμφανίζεται στο επάνω μέρος της εικόνας, MIDDLE: η γραμμή κειμένου εμφανίζεται στο μέσο της εικόνας, BOTTOM: η γραμμή κειμένου εμφανίζεται στο κάτω μέρος της εικόνας. <P><IMG SRC="photo.jpg" align=middle>επειδή η παράμετρος ALIGN έχει τιμή MIDDLE<BR> θα τοποθετήσει το μέσο της εικόνας στο ίδιο επίπεδο με τη γραμμή του κειμένου. Θα εμφανιστεί ως εξής: Σχεδίαση ιστοσελίδων Σελίδα 20

22 6.2. Αναδίπλωση κειμένου δίπλα στην εικόνα (wrap text) Για να επιτύχουμε την αναδίπλωση του κειμένου δίπλα σε μια εικόνα, πρέπει να δώσουμε στην παράμετρο ALIGN της ετικέτας IMG τιμές RIGHT, LEFT ή CENTER (οπότε η εικόνα εμφανίζεται αντίστοιχα δεξιά, αριστερά ή στο κέντρο του κειμένου) και η εικόνα να ακολουθείται από παράγραφο, λίστα, επικεφαλίδα ή άλλες εικόνες. Συγκεκριμένα: LEFT: η εικόνα εμφανίζεται αριστερά της γραμμής όπου βρίσκεται, CENTER: η εικόνα εμφανίζεται στο κέντρο της γραμμής όπου βρίσκεται, RIGHT: η εικόνα εμφανίζεται δεξιά της γραμμής όπου βρίσκεται. Θα εμφανιστεί ως εξής: <P><IMG SRC="photo.jpg" ALIGN=RIGHT> κείμενο Υπάρχουν όμως περιπτώσεις που θέλουμε η ροή κειμένου δεξιά ή αριστερά από μια εικόνα να μη φτάνει μέχρι το κατώτερο σημείο της εικόνας αλλά να διακόπτεται νωρίτερα. Στην περίπτωση αυτή, χρησιμοποιούμε την ετικέτα <BR> με παράμετρο CLEAR που μπορεί να πάρει τις εξής τιμές: LEFT: η ροή σταματά μέχρι να βρεθεί η πρώτη γραμμή που η αριστερή της άκρη είναι ελεύθερη, RIGHT: η ροή σταματά μέχρι να βρεθεί η πρώτη γραμμή που η δεξιά της άκρη είναι ελεύθερη, ALL: η ροή σταματά μέχρι να βρεθεί η πρώτη γραμμή που και οι δύο άκρες της είναι ελεύθερες (δηλαδή δεν τις καταλαμβάνει η εικόνα). Ειδικά για CLEAR=ALL, όταν βρεθεί η πρώτη γραμμή που και η δεξιά και η αριστερή άκρη της είναι ελεύθερη, η γραμμή θα επεκταθεί από την αριστερή μέχρι τη δεξιά πλευρά της οθόνης. Παράδειγμα αναδίπλωσης κειμένου.<p> Σχεδίαση ιστοσελίδων Σελίδα 21

23 <IMG SRC="photo.jpg" ALIGN = LEFT WIDTH= 70 LENGTH=70> <P> Η εικόνα εμφανίζεται στα αριστερά της οθόνης και το κείμενο αναδιπλώνεται στα δεξιά.<br> Για την αναδίπλωση χρησιμοποιήσαμε την παράμετρο align με τιμή left στην ετικέτα img.<br> Παρατηρούμε ότι το κείμενο εκτείνεται κατά μήκος όλης της δεξιάς πλευράς της εικόνας. <P> <IMG SRC="photo.jpg" ALIGN = LEFT WIDTH= 70 LENGTH=70> <P> Αν θέλουμε να διακόψουμε τη ροή του κειμένου που εμφανίζεται στα δεξιά της εικόνας <BR CLEAR=LEFT> θα χρησιμοποιήσουμε την ετικέτα BR με παράμετρο align και τιμή left ή right ή all.<br> Στο παράδειγμα αυτό δώσαμε την τιμή left και το κείμενο εμφανίστηκε στα αριστερά <B> κάτω </B> από την εικόνα. Το αποτέλεσμα του παραπάνω κώδικα είναι: 6.3. Απόσταση κειμένου από εικόνα Καθορίζεται με τις παραμέτρους VSPACE=Χ (κατακόρυφη απόσταση του κειμένου που βρίσκεται πάνω και κάτω από την εικόνα) και HSPACE=Χ (οριζόντια απόσταση του κειμένου που βρίσκεται δεξιά και αριστερά από την εικόνα). X είναι ο αριθμός των pixels που θέλουμε να έχει η απόσταση. <IMG SRC="image2.gif" VSPACE=20 HSPACE=15 ALIGN=RIGHT> Σχεδίαση ιστοσελίδων Σελίδα 22

24 6.4. Άλλες παράμετροι Παράμετρος ALT Χρησιμοποιείται για επισκέπτες που χρησιμοποιούν προγράμματα ανάγνωσης ιστοσελίδων τα οποία δεν έχουν τη δυνατότητα να εμφανίζουν εικόνες. Για να καλύψουμε αυτή την περίπτωση, χρησιμοποιούμε την παράμετρο ALT για να γράψουμε ένα μικρό περιγραφικό κείμενο που εμφανίζεται εναλλακτικά στη θέση της εικόνας και συνήθως επεξηγεί το περιεχόμενο της εικόνας. <IMG SRC="ypepthLogo.gif" ALT="[Υπουργείο Παιδείας]"> Παράμετρος BORDER Η παράμετρος BORDER χρησιμοποιείται για τον καθορισμό περιγράμματος στην εικόνα και παίρνει τιμές σε pixel που ορίζουν το πάχος του περιγράμματος. Αν δεν υπάρχει αυτή η παράμετρος, η εικόνα δεν θα έχει περίγραμμα. <IMG SRC="image2.gif" BORDER=1> Παράμετροι HEIGHT, WIDTH Οι παράμετροι HEIGHT και WIDTH ορίζουν το ύψος και το πλάτος της εικόνας, αντίστοιχα, σε pixels. Αν υπάρχουν και οι δύο παράμετροι σε μια ετικέτα IMG, πιθανότατα η εικόνα θα εμφανιστεί παραμορφωμένη (εκτός αν η αναλογία ύψους και πλάτους είναι ίδια με την αρχική αναλογία της εικόνας). Αν υπάρχει μόνο μία από τις δύο παραμέτρους, τότε η εικόνα θα εμφανιστεί με την τιμή που ορίζει η παράμετρος και με την αρχική αναλογία ύψους και πλάτους. Έστω ότι η εικόνα image2.gif έχει σχεδιαστεί με 200 pixel πλάτος και 300 pixel ύψος. Η ετικέτα <IMG SRC="image2.gif" BORDER=1 WIDTH=100 HEIGHT=200> θα εμφανίσει την εικόνα με περίγραμμα ενός pixel, πλάτος 100 pixel και ύψος 200 pixel (δηλαδή παραμορφωμένη, αφού θα εμφανιστεί με αναλογία 1 : 2, ενώ η κανονική αναλογία της εικόνας είναι 2 : 3). Η ετικέτα <IMG SRC="image2.gif" BORDER=2 WIDTH=100> θα εμφανίσει την εικόνα με περίγραμμα δύο pixel, ύψος 100 pixel και πλάτος 150 pixel (δηλαδή θα Σχεδίαση ιστοσελίδων Σελίδα 23

25 εφαρμόσει το μέγεθος των 100 pixel στο πλάτος της εικόνας και θα διατηρήσει την αρχική αναλογία πλάτους προς ύψος, 2 : 3). 7. Υπερσυνδέσεις Οι υπερσυνδέσεις (ή αλλιώς, παραπομπές) δημιουργούνται με την ετικέτα <A> με παράμετρο HREF. Η γενική μορφή της σχετικής ετικέτας εισαγωγής υπερσύνδεσης είναι: <A HREF="URL"> κείμενο υπερσύνδεσης </A> όπου URL είναι η θέση κάποιας ιστοσελίδας και αποτελεί το στόχο της υπερσύνδεσης. Το κείμενο της υπερσύνδεσης συνήθως εμφανίζεται στο φυλλομετρητή με έντονα μπλε γράμματα και υπογραμμισμένο (τα γράμματα αλλάζουν χρώμα - π.χ. γίνονται κόκκινα όταν ο χρήστης έχει επιλέξει να μεταβεί στην υπερσύνδεση) Παραπομπές σε σελίδα στο Internet Στην παράμετρο HREF θα γραφτεί η διεύθυνση της ιστοσελίδας του δικτυακού τόπου που θέλουμε να μεταβούμε συμπεριλαμβανομένου του αντίστοιχου πρωτοκόλλου που θα χρησιμοποιηθεί, π.χ. http. Μετάβαση στην αρχική σελίδα του δικτυακού τόπου του <A HREF=" TEI Πάτρας </A> Στον φυλλομετρητή θα εμφανιστεί ως εξής: 7.2. Παραπομπές σε σελίδα στον ίδιο δικτυακό τόπο Υπάρχουν δύο διαφορετικοί τρόποι να αναφερθούμε στη διεύθυνση του στόχου, δηλαδή της ιστοσελίδας που μεταβαίνουμε: μέσω απόλυτων ή σχετικών διευθύνσεων. Όταν χρησιμοποιούμε απόλυτες διευθύνσεις, δίνουμε όλο το μονοπάτι που χρειάζεται να ακολουθήσουμε για να βρούμε πού είναι αποθηκευμένη η ιστοσελίδα, για παράδειγμα: C:\myWebSite\mypages\part2.htm. Σχεδίαση ιστοσελίδων Σελίδα 24

26 Όταν χρησιμοποιούμε σχετικές διευθύνσεις, δίνουμε τη διεύθυνση σε σχέση με τη διεύθυνση της ιστοσελίδας. Παρακάτω αναφέρονται παραδείγματα για τη σχετική διεύθυνση. Κατά κανόνα, χρησιμοποιούμε σχετική διεύθυνση για καλύτερη μεταφερσιμότητα του δικτυακού τόπου μας, δηλαδή για την καλύτερη και ταχύτερη μεταφορά του δικτυακού τόπου από υπολογιστή σε υπολογιστή, χωρίς να χρειαστεί μεταβολή των αρχείων html που έχουμε δημιουργήσει. Παραδείγματα: Αν μεταβαίνουμε από τη σελίδα page1.html στη σελίδα page2.html, ανάλογα με τη σχέση των φακέλων στους οποίους ανήκουν, έχουμε: 1. Αν βρίσκονται στον ίδιο φάκελο: <A HREF = "όνομα αρχείου"> κείμενο υπερσύνδεσης </A> 2. Αν η page2.html βρίσκεται σε υποφάκελο του φακέλου της page1.html: <A HREF = "./υποφάκελος/mypage2.htm"> κείμενο υπερσύνδεσης </A> 3. Αν η page2.html βρίσκεται στον ανώτερο φάκελο (φάκελο-γονέα) του φακέλου της page1.html: <A HREF = "../mypage2.htm"> κείμενο υπερσύνδεσης </A> Για όλες τις άλλες περιπτώσεις, χρησιμοποιούμε συνδυασμό των παραπάνω περιπτώσεων Σελιδοδείκτες Για να ορίσουμε ένα σελιδοδείκτη, δηλαδή για να δώσουμε όνομα σε μια περιοχή της ιστοσελίδας μας όπου θέλουμε να οδηγεί μια υπερσύνδεση, χρησιμοποιούμε την ετικέτα <Α> με παράμετρο NAME στην οποία δίνουμε το όνομα του σελιδοδείκτη. Μπορούμε να δώσουμε όνομα είτε σε μια μεμονωμένη λέξη είτε σε ολόκληρο κείμενο. Παραδείγματα ορισμού σελιδοδείκτη: <A NAME="INET"> Internet </A> και Επιχειρήσεις Ονομάζουμε «ΙΝΕΤ» τη λέξη «Internet» μέσα στο κείμενό μας. <A NAME="IντΕπιχ"> Internet και Επιχειρήσεις </A> Ονομάζουμε «IντΕπιχ» το κείμενο «Internet και Επιχειρήσεις». Σχεδίαση ιστοσελίδων Σελίδα 25

27 Οι σελιδοδείκτες δεν είναι εμφανείς από τον φυλλομετρητή, δηλαδή δεν ξεχωρίζουν όπως οι υπερσυνδέσεις που εμφανίζονται με έντονα μπλε γράμματα υπογραμμισμένα. Η μετάβαση σε ένα σελιδοδείκτη θα γίνει με τον ίδιο τρόπο που περιγράψαμε παραπάνω, χρησιμοποιώντας, δηλαδή την ετικέτα <Α>, όπου όμως η παράμετρος HREF θα έχει σαν τιμή το όνομα του σελιδοδείκτη, με το σύμβολο # μπροστά από αυτό. Παράδειγμα παραπομπής σε σελιδοδείκτη: <A HREF="#INET "> κείμενο υπερσύνδεσης </A> Μεταβαίνουμε στον σελιδοδείκτη με το όνομα «ΙΝΕΤ» όταν αυτός βρίσκεται μέσα στην ίδια ιστοσελίδα. Αν ο σελιδοδείκτης βρίσκεται σε άλλη ιστοσελίδα από αυτή στην οποία εισάγεται η υπερσύνδεση, θα προηγηθεί η σχετική διεύθυνση στην οποία βρίσκεται η ιστοσελίδα. Δηλαδή, αν ο σελιδοδείκτης με το όνομα «ΧΧΧ» βρίσκεται σε άλλη ιστοσελίδα, η παραπομπή στον σελιδοδείκτη θα έχει την μορφή: <A HREF="path#ΧΧΧ"> κείμενο υπερσύνδεσης </A>, όπου path είναι το μονοπάτι που πρέπει να ακολουθηθεί για να βρεθεί αυτή η ιστοσελίδα. Παραδείγματα παραπομπής σε σελιδοδείκτη άλλης ιστοσελίδας: <A HREF=" κείμενο υπερσύνδεσης </A> Μεταβαίνουμε στον σελιδοδείκτη με το όνομα «ΙΝΕΤ» που βρίσκεται ορισμένος στη σελίδα « <A HREF="../anakoinoseis.html#INET"> κείμενο υπερσύνδεσης </A> Μεταβαίνουμε στον σελιδοδείκτη με το όνομα «ΙΝΕΤ» που βρίσκεται ορισμένος στη σελίδα «anakoinoseis.html» που βρίσκεται στον ανώτερο φάκελο (φάκελο-γονέα) της τρέχουσας ιστοσελίδας. Σχεδίαση ιστοσελίδων Σελίδα 26

28 7.4. Αποστολή Για να δημιουργήσουμε μια παραπομπή που θα ανοίγει στον υπολογιστή του χρήστη της ιστοσελίδας ένα παράθυρο σύνταξης με παραλήπτη τη διεύθυνση που επιθυμούμε, θα χρησιμοποιήσουμε την ακόλουθη μορφή: <Α υπερσύνδεσης</a>. Όταν ο χρήστης επιλέξει από τον φυλλομετρητή το «κείμενο υπερσύνδεσης», τότε το πρόγραμμα που χρησιμοποιεί στον υπολογιστή του θα ανοίξει ένα παράθυρο αποστολής όπου στο πεδίο ΠΡΟΣ: θα εμφανίζεται το ως παραλήπτη. Αν θέλουμε να εμφανίζει και το θέμα του , η σύνταξη θα είναι: <Α υπερσύνδεσης </A> 7.5. Εισαγωγή υπερσύνδεσης σε εικόνα Αν θέλουμε να ορίσουμε υπερσύνδεση σε μια εικόνα, η σύνταξη θα είναι: <A HREF="URL"><IMG SRC="image.gif"></A> Οι εικόνες που γίνονται υπερσυνδέσεις αποκτούν ένα λεπτό (συνήθως γαλάζιο) περίγραμμα. Αν δεν θέλουμε να υπάρχει αυτό το περίγραμμα, τότε χρησιμοποιούμε στην ετικέτα IMG την παράμετρο BORDER με τιμή Πίνακες Για τη δημιουργία πινάκων με HTML χρησιμοποιείται η ετικέτα <TABLE>. Η ίδια ετικέτα χρησιμοποιείται για τη διάταξη των στοιχείων / αντικειμένων από τα οποία αποτελείται μια σελίδα, γενικότερα, δηλαδή, για τη διάταξη (layout) της σελίδας. Στην HTML ένας πίνακας αποτελείται από ένα σύνολο από γραμμές (rows) που περιέχουν κελιά (cells) με ή χωρίς περιεχόμενο. Οι στήλες ορίζονται αυτόματα βάσει του αριθμού των κελιών που υπάρχουν σε κάθε γραμμή Το περιεχόμενο των κελιών μπορεί να είναι είτε επικεφαλίδες (headings), είτε δεδομένα (data). Η διαφορά είναι ότι στις επικεφαλίδες τα περιεχόμενα εμφανίζονται με έντονα (bold) γράμματα. Ο πίνακας μπορεί να έχει τίτλο (caption), που εμφανίζεται συνήθως πάνω από τον πίνακα, και περίγραμμα (border). Σχεδίαση ιστοσελίδων Σελίδα 27

29 Οι ετικέτες που χρησιμοποιούμε για τη δημιουργία πίνακα είναι οι ακόλουθες 2 : <TABLE> </TABLE> <TR> </TR> <TD> </TD> Η γενική μορφή είναι: <TABLE> <CAPTION> Τίτλος πίνακα </CAPTION> <TR> <TD> δεδομένα κελιού </TD> Ένα απλό παράδειγμα πίνακα χωρίς ορατό περίγραμμα που περιλαμβάνει μια σειρά, τέσσερα κελιά, το ένα από τα οποία είναι η επικεφαλίδα είναι το παρακάτω: <TABLE> <TR> <TH>ΕΠΙΚΕΦΑΛΙΔΑ</TH> <TD>ΔΕΔΟΜΕΝΑ</TD> <TD>ΔΕΔΟΜΕΝΑ</TD> <TD>ΔΕΔΟΜΕΝΑ</TD> </TR> </TABLE> Εμφάνιση: ΕΠΙΚΕΦΑΛΙΔΑ ΔΕΔΟΜΕΝΑ ΔΕΔΟΜΕΝΑ ΔΕΔΟΜΕΝΑ 2 Οι πρώτοι browsers απαιτούσαν υποχρεωτικά να υπάρχει εντολή τέλους σε κάθε μια από τις ετικέτες γραμμής, επικεφαλίδας και δεδομένων (</TR> </TH> </TD>). Σήμερα δεν είναι απαραίτητες, αλλά για λόγους συμβατότητας συνιστάται να τις χρησιμοποιούμε. Σχεδίαση ιστοσελίδων Σελίδα 28

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

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

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

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

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

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

Σχεδίαση ιστοσελίδων με τη γλώσσα HTML

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

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

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

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

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

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

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

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

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

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

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

Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS) Cascading Style Sheets (CSS) Τα Cascading Style Sheets προσφέρουν έναν εύκολο τρόπο για να ορίσουμε τη μορφοποίηση που επιθυμούμε να έχουν οι σελίδες μία τοποθεσίας του Παγκόσμιου Ιστού που δημιουργούμε.

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

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

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

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

Σχεδιασμός και Ανάπτυξη Ιστοτόπων. ΕΠΑ.Λ. ΑΛΙΜΟΥ Τομέας Πληροφορικής Κ. Φλώρος

Σχεδιασμός και Ανάπτυξη Ιστοτόπων. ΕΠΑ.Λ. ΑΛΙΜΟΥ Τομέας Πληροφορικής Κ. Φλώρος Σχεδιασμός και Ανάπτυξη Ιστοτόπων ΕΠΑ.Λ. ΑΛΙΜΟΥ Τομέας Πληροφορικής Κ. Φλώρος H γλώσσα HTML Άλλες Βιβλιογραφικές πηγές για HTML http://www.w3schools.com/html/ http://www.it.uom.gr/project/html2/lessons.html

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

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

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

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

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

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

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

ΒΑΣΙΚΕΣ ΑΡΧΕΣ ΣΧΕΔΙΑΣΜΟΥ ΕΦΑΡΜΟΓΩΝ

ΒΑΣΙΚΕΣ ΑΡΧΕΣ ΣΧΕΔΙΑΣΜΟΥ ΕΦΑΡΜΟΓΩΝ ΒΑΣΙΚΕΣ ΑΡΧΕΣ ΣΧΕΔΙΑΣΜΟΥ ΕΦΑΡΜΟΓΩΝ Βαγγελιώ Καβακλή Τμήμα Πολιτισμικής Τεχνολογίας & Επικοινωνίας 8 Μαρτίου 2001 Hypertext Markup Language (HTML)! Σε μια ιστοσελίδα μπορούν να εμφανίζονται διαφορετικά

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Κειµενογράφοι ετικετών

Κειµενογράφοι ετικετών ΕΠΛ 012 Γλώσσα Μορφοποίησης HTML Πως κτίζουµε τις Ετικέτες Notepad ή άλλο TEXT editor Πού τα κάνουµε Save? Πώς τα οργανώνουµε Πώς τα βάζουµε δηµόσια online Τα αρχεία να τελειώνουν σε.html ή.htm Πως ξεκινούµε

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

Άσκηση 3 -Δηµιουργία ιστοσελίδων µε HTML µέρος 3 ο

Άσκηση 3 -Δηµιουργία ιστοσελίδων µε HTML µέρος 3 ο Άσκηση 3 -Δηµιουργία ιστοσελίδων µε HTML µέρος 3 ο Εικόνες στην HTML Oι εικόνες ορίζονται µε την ετικέτα . Η συγκεκριµένη ετικέτα δεν κλείνει (είναι λάθος το: ) ή µπορούµε να πούµε ότι ανοίγει

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

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

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

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

ΕΡΓΑΣΤΗΡΙΟ: ΤΕΧΝΟΛΟΓΙΕΣ ΠΛΗΡΟΦΟΡΙΑΣ ΚΑΙ ΕΠΙΚΟΙΝΩΝΙΑΣ ΣΤΟΝ ΤΟΥΡΙΣΜΟ. 2o ΕΡΓΑΣΤΗΡΙΟ ΜΟΡΦΟΠΟΙΗΣΗ ΣΤΗΝ HTML

ΕΡΓΑΣΤΗΡΙΟ: ΤΕΧΝΟΛΟΓΙΕΣ ΠΛΗΡΟΦΟΡΙΑΣ ΚΑΙ ΕΠΙΚΟΙΝΩΝΙΑΣ ΣΤΟΝ ΤΟΥΡΙΣΜΟ. 2o ΕΡΓΑΣΤΗΡΙΟ ΜΟΡΦΟΠΟΙΗΣΗ ΣΤΗΝ HTML ΕΡΓΑΣΤΗΡΙΟ: ΤΕΧΝΟΛΟΓΙΕΣ ΠΛΗΡΟΦΟΡΙΑΣ ΚΑΙ ΕΠΙΚΟΙΝΩΝΙΑΣ ΣΤΟΝ ΤΟΥΡΙΣΜΟ ΠΕΡΙΕΧΟΜΕΝΟ ΜΑΘΗΜΑΤΟΣ 2o ΕΡΓΑΣΤΗΡΙΟ ΜΟΡΦΟΠΟΙΗΣΗ ΣΤΗΝ HTML 1. Μορφοποίηση κειμένου Ετικέτες στυλ 2. Ιδιότητες ετικετών 3. Λίστες 4. Υπερσυνδέσεις

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

Πίνακες. ιδιότητες ετικέτας <tr>

Πίνακες. ιδιότητες ετικέτας <tr> Πίνακες ιδιότητες ετικέτας Ιδιότητα align στοιχίζει κατά την οριζόντια διεύθυνση τα περιεχόμενα μιας γραμμής του πίνακα αριστερά (left), δεξιά (right), στο κέντρο (center), ή με πλήρη στοίχιση (justify)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Εργαλεία Ανάπτυξης Εφαρμογών Internet. Δ.Ι.Ε.Κ. Γλυφάδας Τεχνικός Εφαρμογών Πληροφορικής

Εργαλεία Ανάπτυξης Εφαρμογών Internet. Δ.Ι.Ε.Κ. Γλυφάδας Τεχνικός Εφαρμογών Πληροφορικής Εργαλεία Ανάπτυξης Εφαρμογών Internet Δ.Ι.Ε.Κ. Γλυφάδας Τεχνικός Εφαρμογών Πληροφορικής Το πρότυπο CSS Α Μέρος 2 CSS (Cascading Style Sheets)(1) Ορίζουν την εμφάνιση των στοιχείων σε ένα έγγραφο HTML.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Η Γλώσσα Προγραμματισμού του Internet HTML

Η Γλώσσα Προγραμματισμού του Internet HTML Η Γλώσσα Προγραμματισμού του Internet HTML Η HTML και το Internet Κάθε σελίδα που εμφανίζεται στο Internet είναι ένα αρχείο γραμμένο με τη γλώσσα HTML (HyperText Markup Language, Γλώσσα Χαρακτηρισμού Υπερ-Κειμένου),

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

Σχεδίαση και Ανάπτυξη Ιστότοπων

Σχεδίαση και Ανάπτυξη Ιστότοπων Σχεδίαση και Ανάπτυξη Ιστότοπων HTML Καθορισμός Χρωμάτων και Γραμματοσειρών σε μια ιστοσελίδα Παρουσίαση 7 η Βελώνης Γεώργιος Καθηγητής 1 Σημασία συμβόλων HTML5 tags. Obsolete tags: Μην αφήνετε αυτές τις

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

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

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

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

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

Σχεδιασμός και Ανάπτυξη Ιστότοπων Σχεδιασμός και Ανάπτυξη Ιστότοπων CSS: Ιδιότητες μορφοποίησης κειμένου Παρουσίαση 14 η 1 Βελώνης Γεώργιος Καθηγητής Browsers δοκιμών Οι δοκιμές έγιναν στους παρακάτω browsers και εκδόσεις τους: Google

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

ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML ΣΧΟΛΙΚΟ ΒΙΒΛΙΟ ΚΕΦΑΛΑΙΟ 11 Ευάγγελος Χ. Ζιούλας (Καθηγητής Πληροφορικής)

ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML ΣΧΟΛΙΚΟ ΒΙΒΛΙΟ ΚΕΦΑΛΑΙΟ 11 Ευάγγελος Χ. Ζιούλας (Καθηγητής Πληροφορικής) http://www.zioulas.gr ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML ΣΧΟΛΙΚΟ ΒΙΒΛΙΟ ΚΕΦΑΛΑΙΟ 11 Ευάγγελος Χ. Ζιούλας (Καθηγητής Πληροφορικής) WEB SERVER Είναι μια εφαρμογή software που αναλαμβάνει την αποστολή μιας ιστοσελίδας σε

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

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

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

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

Εργαλεία ανάπτυξης εφαρμογών internet Ι

Εργαλεία ανάπτυξης εφαρμογών internet Ι IEK ΟΑΕΔ ΚΑΛΑΜΑΤΑΣ ΤΕΧΝΙΚΟΣ ΕΦΑΡΜΟΓΩΝ ΠΛΗΟΦΟΡΙΚΗΣ Εργαλεία ανάπτυξης εφαρμογών internet Ι HTML Διδάσκουσα: Κανελλοπούλου Χριστίνα ΠΕ19 Πληροφορικής HTML (HyperText Markup Language) Η γλώσσα που χρησιμοποιείται

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

1. <body> 2. <header> 3. <h1> My Page </h1> 4. </header> 5. <section>

1. <body> 2. <header> 3. <h1> My Page </h1> 4. </header> 5. <section> Ενδεικτικές ερωτήσεις 1. Τι σημαίνουν τα αρχικά CSS 2. Τι σημαίνουν τα αρχικά HTML 3. Ποια η διαφορά μεταξύ Internet και Web; a. Είναι το ίδιο b. Το Web είναι μια υπηρεσία του διαδικτύου 4. Ποια η διαφορά

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

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

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

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

Εργασία 11 η Πίνακες (βασικές ετικέτες, βασικές ιδιότητες) 1. Στο Σημειωματάριο πληκτρολογήστε τον παρακάτω κώδικα:

Εργασία 11 η Πίνακες (βασικές ετικέτες, βασικές ιδιότητες) 1. Στο Σημειωματάριο πληκτρολογήστε τον παρακάτω κώδικα: Εργασία 11 η Πίνακες (βασικές ετικέτες, βασικές ιδιότητες) 1. Στο Σημειωματάριο πληκτρολογήστε τον παρακάτω κώδικα: εισαγωγή εικόνων

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

Η Βίβλος των CSS - Μέρος 3 Το Box Model, τα Περιθώρια και τα Περιγράμματα

Η Βίβλος των CSS - Μέρος 3 Το Box Model, τα Περιθώρια και τα Περιγράμματα Η Βίβλος των CSS - Μέρος 3 Το Box Model, τα Περιθώρια και τα Περιγράμματα Το Box Model Το box model στα CSS περιγράφει τα πλαίσια (boxes) που δημιουργούνται για τα στοιχεία (elements) της HTML. Το box

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

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

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

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

CSS Εργαστήριο 1. Εισαγωγή - Σύνταξη - Εφαρμογή στην HTML

CSS Εργαστήριο 1. Εισαγωγή - Σύνταξη - Εφαρμογή στην HTML CSS Εργαστήριο 1. Εισαγωγή - Σύνταξη - Εφαρμογή στην HTML Εισαγωγή Το CSS (Cascading Style Sheets ή Επικαλυπτόμενα Φύλλα Στυλ) μας επιτρέπει να αλλάξουμε τον τρόπο με τον οποίο παρουσιάζονται τα στοιχεία

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

Προγραμματισμός Διαδικτύου

Προγραμματισμός Διαδικτύου Πανεπιστήμιο Δυτικής Μακεδονίας Τμήμα Μηχανικών Πληροφορικής & Τηλεπικοινωνιών Προγραμματισμός Διαδικτύου Δρ. Μηνάς Δασυγένης mdasygenis@uowm.gr Τμήμα της παρουσίασης δημιουργήθηκε από τον κ. Παναγιώτη

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

Διάλεξη 2η Εισαγωγή στο CSS

Διάλεξη 2η Εισαγωγή στο CSS Διάλεξη 2η Εισαγωγή στο CSS Στέλιος Μόσχογλου Θεοδόσης Σουργκούνης Αντώνης Χρυσόπουλος I S S E L D e c o d e (Intelligent Systems & Software Engineering Lab) Στόχος της ώρας Τι είναι το CSS? Γιατί να χρησιμοποιήσω

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

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

3. ΕΙΣΑΓΩΓΗ ΣΤΟ CSS ΓΙΩΡΓΟΣ ΓΙΑΝΝΑΚΑΚΗΣ, ΜΑΝΩΛΗΣ ΤΣΙΚΝΑΚΗΣ 2014 3. ΕΙΣΑΓΩΓΗ ΣΤΟ CSS ΓΙΩΡΓΟΣ ΓΙΑΝΝΑΚΑΚΗΣ, ΜΑΝΩΛΗΣ ΤΣΙΚΝΑΚΗΣ Εισαγωγή Το CSS (Cascading Style Sheets) είναι αρχεία με κατάληξη.css τα οποία καθορίζουν την μορφοποίηση των ιστοσελίδων. Μέσω αυτών επιτυγχάνεται

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

CSS 1. Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Δ. Ζήνδρος Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών

CSS 1. Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Δ. Ζήνδρος Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών CSS 1 Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Δ. Ζήνδρος Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών Άδεια Χρήσης Το παρόν εκπαιδευτικό υλικό υπόκειται σε άδειες χρήσης Creative

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

ΕΡΓΑΣΤΗΡΙΟ: ΤΕΧΝΟΛΟΓΙΕΣ ΠΛΗΡΟΦΟΡΙΑΣ ΚΑΙ ΕΠΙΚΟΙΝΩΝΙΑΣ ΣΤΟΝ ΤΟΥΡΙΣΜΟ. 4o ΕΡΓΑΣΤΗΡΙΟ ΕΙΚΟΝΕΣ ΣΤΗΝ HTML

ΕΡΓΑΣΤΗΡΙΟ: ΤΕΧΝΟΛΟΓΙΕΣ ΠΛΗΡΟΦΟΡΙΑΣ ΚΑΙ ΕΠΙΚΟΙΝΩΝΙΑΣ ΣΤΟΝ ΤΟΥΡΙΣΜΟ. 4o ΕΡΓΑΣΤΗΡΙΟ ΕΙΚΟΝΕΣ ΣΤΗΝ HTML ΕΡΓΑΣΤΗΡΙΟ: ΤΕΧΝΟΛΟΓΙΕΣ ΠΛΗΡΟΦΟΡΙΑΣ ΚΑΙ ΕΠΙΚΟΙΝΩΝΙΑΣ ΣΤΟΝ ΤΟΥΡΙΣΜΟ ΠΕΡΙΕΧΟΜΕΝΟ ΜΑΘΗΜΑΤΟΣ 1. Εικόνες 2. Ασκήσεις 4o ΕΡΓΑΣΤΗΡΙΟ ΕΙΚΟΝΕΣ ΣΤΗΝ HTML 1. Εικόνες 1. Οι μορφές (format) των εικόνων που μπορείτε

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

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 απαιτεί από τον Υποψήφιο να κατανοεί τις κύριες έννοιες της σχεδίασης και δημοσίευσης δικτυακών

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

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

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

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

Εισαγωγή σε HTML και CSS. Παναγιώτης Τσαρχόπουλος

Εισαγωγή σε HTML και CSS. Παναγιώτης Τσαρχόπουλος Εισαγωγή σε HTML και CSS Παναγιώτης Τσαρχόπουλος Περιεχόμενα Εισαγωγικές έννοιες Ορολογία και σύνταξη Κείμενο σε HTML έγγραφα Σύνδεσμοι Ψηφιακές - Ευφυείς Πόλεις - Εισαγωγή σε HTML και CSS 2 Εισαγωγικές

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

Σχεδίαση και Ανάπτυξη Ιστότοπων. HTML Στοιχεία - Βασικές Ετικέτες Ειδικοί Χαρακτήρες Παρουσίαση 5 η. Βελώνης Γεώργιος Καθηγητής Πληροφορικής ΠΕ20

Σχεδίαση και Ανάπτυξη Ιστότοπων. HTML Στοιχεία - Βασικές Ετικέτες Ειδικοί Χαρακτήρες Παρουσίαση 5 η. Βελώνης Γεώργιος Καθηγητής Πληροφορικής ΠΕ20 Σχεδίαση και Ανάπτυξη Ιστότοπων HTML Στοιχεία - Βασικές Ετικέτες Ειδικοί Χαρακτήρες Παρουσίαση 5 η 1 Βελώνης Γεώργιος Καθηγητής Σημασία συμβόλων HTML5 tags Obsolete tags: Μην αφήνετε αυτές τις ετικέτες

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

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

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

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

Πώς δημιουργούμε απλούς πίνακες

Πώς δημιουργούμε απλούς πίνακες Αναζήτηση Πώς δημιουργούμε απλούς πίνακες Η οδηγία χρησιμοποιείται για να δημιουργούμε πίνακες αλλά και για να έχουμε μεγαλύτερη έλεγχο στο στήσιμο μιας σελίδας. Μερικοί όροι που πρέπει να γνωρίζετε

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

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

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

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

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

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

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

ΕΡΓΑΣΤΗΡΙΟ: ΤΕΧΝΟΛΟΓΙΕΣ ΠΛΗΡΟΦΟΡΙΑΣ ΚΑΙ ΕΠΙΚΟΙΝΩΝΙΑΣ ΣΤΟΝ ΤΟΥΡΙΣΜΟ. 1o ΕΡΓΑΣΤΗΡΙΟ ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML

ΕΡΓΑΣΤΗΡΙΟ: ΤΕΧΝΟΛΟΓΙΕΣ ΠΛΗΡΟΦΟΡΙΑΣ ΚΑΙ ΕΠΙΚΟΙΝΩΝΙΑΣ ΣΤΟΝ ΤΟΥΡΙΣΜΟ. 1o ΕΡΓΑΣΤΗΡΙΟ ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML ΕΡΓΑΣΤΗΡΙΟ: ΤΕΧΝΟΛΟΓΙΕΣ ΠΛΗΡΟΦΟΡΙΑΣ ΚΑΙ ΕΠΙΚΟΙΝΩΝΙΑΣ ΣΤΟΝ ΤΟΥΡΙΣΜΟ ΠΕΡΙΕΧΟΜΕΝΟ ΜΑΘΗΜΑΤΟΣ 1. Ετικέτες (tags) 1o ΕΡΓΑΣΤΗΡΙΟ ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML 2. Δομή εγγράφου (αρχείου html) 3. Δημιουργία αρχείου html 4.

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

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

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

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

Σε αυτό το µάθηµα θα ασχοληθούµε µε τη βελτίωση της εµφάνισης ενός ιστοτόπου, αλλά και τον εύκολο χειρισµό όλων των αλλαγών στην εµφάνιση της σελίδας

Σε αυτό το µάθηµα θα ασχοληθούµε µε τη βελτίωση της εµφάνισης ενός ιστοτόπου, αλλά και τον εύκολο χειρισµό όλων των αλλαγών στην εµφάνιση της σελίδας Σε αυτό το µάθηµα θα ασχοληθούµε µε τη βελτίωση της εµφάνισης ενός ιστοτόπου, αλλά και τον εύκολο χειρισµό όλων των αλλαγών στην εµφάνιση της σελίδας µέσω της τεχνολογίας των ιαδοχικών Φύλλων Στυλ (cascading

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

Μάθηµα 3 Περ ε ισ ι σότ ό ε τ ρ ε α α γ ια ι α τ η τ η γ λώσ ώ σα α HTML

Μάθηµα 3 Περ ε ισ ι σότ ό ε τ ρ ε α α γ ια ι α τ η τ η γ λώσ ώ σα α HTML Μάθηµα 3 Περισσότερα για τη γλώσσα Περισσότερα για τη γλώσσα HTML Περιεχόµενα Επικεφαλίδες (Headings) Παράγραφοι Λίστες Μορφοποίηση κειµένου Σύνδεσµοι Επικεφαλίδες (Headings) Οι επικεφαλίδες επιτελούν

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

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

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

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

ΕΡΓΑΣΤΗΡΙΑΚΗ ΑΣΚΗΣΗ 2 ΜΕΛΕΤΗ ΚΑΙ ΕΦΑΡΜΟΓΗ ΔΗΜΙΟΥΡΓΙΑΣ HTML ΣΕΛΙΔΩΝ ΣΥΝΔΕΣΜΟΙ

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

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

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

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

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

CTEC-153: ΥΠΟΛΟΓΙΣΤΙΚΑ ΦΥΛΛΑ

CTEC-153: ΥΠΟΛΟΓΙΣΤΙΚΑ ΦΥΛΛΑ ΜΑΘΗΜΑ 5 ΣΤΟΧΟΙ: 1. Μορφοποίηση Αριθμών 2. Αλλαγή Μεγέθους Και Τύπου Γραμματοσειράς 3. Χρησιμοποίηση Πλάγιων, Έντονων, Υπογραμμισμένων Χαρακτήρων 4. Αλλαγή Χρώματος Γραμματοσειράς 5. Παράθυρο Διαλόγου

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

Εισαγωγή στην πληροφορική

Εισαγωγή στην πληροφορική Τμήμα Μηχανικών Πληροφορικής & Τηλεπικοινωνιών Εισαγωγή στην πληροφορική Ενότητα 5: Εισαγωγή στην HTML (Μέρος Α) Αγγελίδης Παντελής Τμήμα Μηχανικών Πληροφορικής και Τηλεπικοινωνιών Άδειες Χρήσης Το παρόν

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

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

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

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

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

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

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

CSS. Εισαγωγή & Βασικές έννοιες. Cascading Style Sheets. Επικαλυπτόμενα φύλλα στυλ

CSS. Εισαγωγή & Βασικές έννοιες. Cascading Style Sheets. Επικαλυπτόμενα φύλλα στυλ CSS Εισαγωγή & Βασικές έννοιες Cascading Style Sheets Επικαλυπτόμενα φύλλα στυλ Περιεχόμενα Τι είναι CSS Πλεονεκτήματα CSS μορφοποίησης Συντακτικό του CSS Ιδιότητες CSS Εφαρμογή CSS κανόνων Επικάλυψη CSS

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

Εισαγωγή στην HTML (2)

Εισαγωγή στην HTML (2) Εισαγωγή στην HTML (2) Πανεπιστήμιο Πελοποννήσου Τμήμα Επιστήμης & Τεχνολογίας Τηλεπικοινωνιών Ευάγγελος Α. Κοσμάτος Εικόνες Βασικοί τύποι εικόνων στην HTML gif jpg bmp (μεγάλο μέγεθος αρχείου) tiff (μεγάλο

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

ΕΠΛ 003: ΕΠΙΣΤΗΜΗ ΤΗΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΚΑΙ ΠΛΗΡΟΦΟΡΙΑΚΑ ΣΥΣΤΗΜΑΤΑ HTML

ΕΠΛ 003: ΕΠΙΣΤΗΜΗ ΤΗΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΚΑΙ ΠΛΗΡΟΦΟΡΙΑΚΑ ΣΥΣΤΗΜΑΤΑ HTML ΕΠΛ 003: ΕΠΙΣΤΗΜΗ ΤΗΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΚΑΙ ΠΛΗΡΟΦΟΡΙΑΚΑ ΣΥΣΤΗΜΑΤΑ HTML Στόχοι 1 Να δημιουργήσουμε υπερκείμενα με την Γλώσσα Επισημείωσης Υπερκειμένων (hypertext markup language, HTML). Υπολογιστικά συστήματα:

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

ΕΡΓΑΣΤΗΡΙΟ ΠΛΗΡΟΦΟΡΙΚΗ I. 3o ΕΡΓΑΣΤΗΡΙΟ ΕΠΕΞΕΡΓΑΣΙΑ ΜΕ ΤΟ WORD

ΕΡΓΑΣΤΗΡΙΟ ΠΛΗΡΟΦΟΡΙΚΗ I. 3o ΕΡΓΑΣΤΗΡΙΟ ΕΠΕΞΕΡΓΑΣΙΑ ΜΕ ΤΟ WORD ΠΕΡΙΕΧΟΜΕΝΟ ΜΑΘΗΜΑΤΟΣ ΕΡΓΑΣΤΗΡΙΟ ΠΛΗΡΟΦΟΡΙΚΗ I 3o ΕΡΓΑΣΤΗΡΙΟ ΕΠΕΞΕΡΓΑΣΙΑ ΜΕ ΤΟ WORD 1. Προσθήκη στηλών σε τμήμα εγγράφου 2. Εσοχή παραγράφου 3. Εισαγωγή Κεφαλίδας, Υποσέλιδου και Αριθμού Σελίδας 4. Εισαγωγή

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

Σχεδόν όλες οι ιστοσελίδες βασίζονται σε μεγάλο βαθμό σε πίνακες. Για να εισάγουμε έναν πίνακα επιλέγουμε από το μενού Insert->Table.

Σχεδόν όλες οι ιστοσελίδες βασίζονται σε μεγάλο βαθμό σε πίνακες. Για να εισάγουμε έναν πίνακα επιλέγουμε από το μενού Insert->Table. DreamWeaver - Άσκηση 4η Πίνακες Παρακάτω θα δούμε πως μπορούμε να δημιουργούμε και να επεξεργαζόμαστε πίνακες, μια πολύ βασική δομή. Θα δούμε πως γίνεται εισαγωγή πίνακα, ένωση κελιών του πίνακα, προσθήκη

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

1 ο Εργαστήριο Συντεταγμένες, Χρώματα, Σχήματα

1 ο Εργαστήριο Συντεταγμένες, Χρώματα, Σχήματα 1 ο Εργαστήριο Συντεταγμένες, Χρώματα, Σχήματα 1. Σύστημα Συντεταγμένων Το σύστημα συντεταγμένων που έχουμε συνηθίσει από το σχολείο τοποθετούσε το σημείο (0,0) στο σημείο τομής των δυο αξόνων Χ και Υ.

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

Αλλαγή της εμφάνισης κειμένου: μέγεθος γραμματοσειράς, είδος γραμματοσειράς

Αλλαγή της εμφάνισης κειμένου: μέγεθος γραμματοσειράς, είδος γραμματοσειράς 3.3.1.1 Αλλαγή της εμφάνισης κειμένου: μέγεθος γραμματοσειράς, είδος γραμματοσειράς Γραμματοσειρές Η λέξη γραμματοσειρά αναφέρεται στο στυλ που εμφανίζονται τα γράμματα. Παρακάτω ακολουθούν κάποια παραδείγματα,

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

Στην τεχνολογία των CSS, οι κανόνες στυλ (style

Στην τεχνολογία των CSS, οι κανόνες στυλ (style Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #4 0 : CSS: Βασικές και προχωρημένες τεχνικές επιλογής, τα στοιχεία και , ψευδο κλάσεις και ψευδο επιλογείς Γαβαλάς Δαμιανός dgavalas@aegean.gr CSS κανόνες στυλ

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

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

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

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

ΕΠΛ 012 Εισαγωγή στο Παγκόσμιο Πλέγμα Πληροφοριών

ΕΠΛ 012 Εισαγωγή στο Παγκόσμιο Πλέγμα Πληροφοριών ΕΠΛ 012 Εισαγωγή στο Παγκόσμιο Πλέγμα Πληροφοριών World Wide Web (WWW) Θέματα Επεξεργασία δεδομένων στο Web Δημιουργία απλών σελίδων HTML Περιγραφή κάποιων XHTML στοιχείων (tags) Εξέλιξης του WWW Το WWW

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

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

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

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

Αλεξιάδης Γεώργιος (ΠΕ86) -

Αλεξιάδης Γεώργιος (ΠΕ86) - 11.1 Γενική Εισαγωγή στην HTML Τι είναι η HTML; HyperText Markup Language (Γλώσσα Χαρακτηρισμού Υπερ-Κειμένου) Βασίζεται στην SGML (Standard Generalized Markup Language) που είναι ένα πολύ μεγαλύτερο σύστημα

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

7-22 Οκτωβρίου Μία γιορτή δημιουργίας με κώδικα. Europe Code Week

7-22 Οκτωβρίου Μία γιορτή δημιουργίας με κώδικα. Europe Code Week 7-22 Οκτωβρίου 2017 Μία γιορτή δημιουργίας με κώδικα @ #codeeu codeeu 7-22 October 2017 Europe Code Week Εισαγωγή στο Web Development HTML Λίγα λόγια... Η HTML είναι η βασική γλώσσα γραφής των ιστοσελίδων!

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

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

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

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

Το απεικονιστικό μοντέλο μορφοποίησης των CSS

Το απεικονιστικό μοντέλο μορφοποίησης των CSS Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #6 0 : CSS: Χρήση των ιδιοτήτων του κουτιού (box properties). Διάταξη σελίδων Γαβαλάς Δαμιανός dgavalas@aegean.gr Το απεικονιστικό μοντέλο μορφοποίησης των CSS Περιγράφει

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

Εισαγωγή στην HTML. Κεφ. HTML + CSS

Εισαγωγή στην HTML. Κεφ. HTML + CSS Εισαγωγή στην HTML Κεφ. HTML + CSS Συστατικά καλής Ιστοσελίδας α) HTML για το Περιεχόμενο β) CSS για τη μορφοποίηση γ) Javascript για διαδραστικότητα Παράδειγμα Ολυμπιακός Πανιώνιος ΠΑΟΚ Παναθηναϊκός Ξάνθη

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

Πτυχιακή Εργασία. Ηλεκτρονικό εμπόριο & Σημασιολογικός ιστός. Χρησιμοποιείστε για το κείμενο γραμματοσειρά courier 12 με στοίχιση πλήρης

Πτυχιακή Εργασία. Ηλεκτρονικό εμπόριο & Σημασιολογικός ιστός. Χρησιμοποιείστε για το κείμενο γραμματοσειρά courier 12 με στοίχιση πλήρης Πτυχιακή Εργασία Ηλεκτρονικό εμπόριο & Σημασιολογικός ιστός Χρησιμοποιείστε για το κείμενο γραμματοσειρά courier 12 με στοίχιση πλήρης Άσκηση 3 1 Αρίθμηση σελίδων Κάντε διπλό κλικ στην περιοχή της κεφαλίδας

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

Εισαγωγή εικόνων. ετικέτα <img>

Εισαγωγή εικόνων. ετικέτα <img> Εισαγωγή εικόνων ετικέτα σύνταξη η ιδιότητα src καθορίζει ποια εικόνα θα εισαχθεί στη σελίδα η τιμή url είναι η πλήρης ή σχετική διαδρομή της εικόνας Παράδειγμα 1

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

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

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

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

Η Βίβλος των CSS. Εισαγωγή στα CSS

Η Βίβλος των CSS. Εισαγωγή στα CSS Η Βίβλος των CSS Εισαγωγή στα CSS Τα Διαδοχικά Φύλλα Στυλ (CSS, Cascading Style Sheets) αποτελούν ένα πολύ καλό εργαλείο για να μπορούμε να αλλάζουμε την εμφάνιση και τη διάταξη (layout) των ιστοσελίδων

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

ΕΘΝΙΚΟ ΜΕΤΣΟΒΙΟ ΠΟΛΥΤΕΧΝΕΙΟ. Σηµειώσεις για τη γλώσσα HTML (HyperText Markup Language)

ΕΘΝΙΚΟ ΜΕΤΣΟΒΙΟ ΠΟΛΥΤΕΧΝΕΙΟ. Σηµειώσεις για τη γλώσσα HTML (HyperText Markup Language) ΕΘΝΙΚΟ ΜΕΤΣΟΒΙΟ ΠΟΛΥΤΕΧΝΕΙΟ ΣΧΟΛΗ ΗΛΕΚΤΡΟΛΟΓΩΝ ΜΗΧΑΝΙΚΩΝ ΚΑΙ ΜΗΧΑΝΙΚΩΝ ΥΠΟΛΟΓΙΣΤΩΝ Σηµειώσεις για τη γλώσσα HTML (HyperText Markup Language) ιδάσκων Αν. Καθηγητής Ι.Σ.Βενιέρης Αθήνα, Ιανουάριος 2003 1

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

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

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

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

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

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

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

Επεξεργαστής Κειμένου: (Microsoft Word)

Επεξεργαστής Κειμένου: (Microsoft Word) Επεξεργαστής Κειμένου: (Microsoft Word) Στο περιβάλλον εργασίας του επεξεργαστή κειμένου Microsoft Word εκτελούμε τις παρακάτω λειτουργίες: 1) Δημιουργία Νέου Εγγράφου: Η Δημιουργία ενός Νέου Εγγράφου

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

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

Σπουδές CAD, Πληροφορικής, Οικονομίας, Διοίκησης και D.T.P. με Σύστημα διδασκαλίας facetoface Copyright 2009-2012 -SYSTEM- All rights reserved 2/159 ΠΕΡΙΕΧΟΜΕΝΑ Μάθημα 1: New - Save Μάθημα 2: Εισαγωγή στη CSS Μάθημα 3: Τρόπος Σύνταξης Μάθημα 4: Σχόλια Μάθημα 5: ID Μάθημα 6: Class Μάθημα 7: Background

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

> μεγαλύτερο <= μικρότερο ή ίσο < μικρότερο == ισότητα >= μεγαλύτερο ή ίσο!= διαφορετικό

> μεγαλύτερο <= μικρότερο ή ίσο < μικρότερο == ισότητα >= μεγαλύτερο ή ίσο!= διαφορετικό 5 ο Εργαστήριο Λογικοί Τελεστές, Δομές Ελέγχου Λογικοί Τελεστές > μεγαλύτερο = μεγαλύτερο ή ίσο!= διαφορετικό Οι λογικοί τελεστές χρησιμοποιούνται για να ελέγξουμε

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