Εισαγωγή στην HTML Τα tags της HTML και τα γνωρίσματά τους
|
|
|
- Ξένων Σπηλιωτόπουλος
- 8 χρόνια πριν
- Προβολές:
Transcript
1 Εισαγωγή στην HTML Τα tags της HTML και τα γνωρίσματά τους Με την γλώσσα περιγραφής υπερ-κειμένου (HTML) μπορούμε να σχεδιάζουμε ιστοσελίδες. Η HyperText Markup Language βασίζεται στην SGML (Standard Generalized Markup Language), ένα πολύ μεγαλύτερο σύστημα επεξεργασίας εγγράφων. Ένα στοιχείο είναι ο βασικός παράγων μιας δομής ενός εγγράφου HTML. Μερικά παραδείγματα στοιχείων είναι οι επικεφαλίδες (headings), οι παράγραφοι κειμένου (paragraphs), οι λίστες (lists) και οι πίνακες (tables). Η HTML ορίζει επίσης στυλ χαρακτήρων όπως η έντονη γραφή (bold) και τα αποσπάσματα κώδικα (code). Τα στοιχεία μπορούν να περιλαμβάνουν απλό κείμενο, άλλα στοιχεία ή και τα δυο. Για να δηλώσει κανείς τα διάφορα στοιχεία σ ένα HTML έγγραφο χρησιμοποιεί τις ετικέτες (tags). Τα tags της HTML δηλαδή υποδεικνύουν τα στοιχεία, την δομή και την μορφοποίηση των σελίδων, καθώς επίσης και τις συνδέσεις υπερκειμένου προς άλλες σελίδες, ή προς αρχεία άλλων μορφών (πολυμέσα). Οι ετικέτες αποτελούνται από μια αριστερή γωνιακή παρένθεση (<), όνομα ετικέτας και από την αντίστοιχη δεξιά παρένθεση (>). Οι ετικέτες συνήθως απαντώνται ως ζεύγη (π.χ. <H1> και </H1>) για την επισήμανση της αρχής και του τέλους της εντολής που υποδηλώνει την ετικέτα. Ένα ζεύγος ετικετών αρχής / τέλους αποκαλείται επίσης στοιχείο της HTML (HTML element). Το tag αρχής ενεργοποιεί ένα χαρακτηριστικό και το tag τέλους, το οποίο έχει σαν πρόθεμα έναν χαρακτήρα /, το απενεργοποιεί. Κάποια στοιχεία μπορεί να περιλαμβάνουν και κάποιο χαρακτηριστικό (attribute) που παρέχει επιπλέον πληροφορία και περιλαμβάνεται στην ετικέτα της αρχής. Για παράδειγμα, μπορεί να προσδιορίσει κανείς την ευθυγράμμιση των εικόνων (πάνω, κάτω ή μέσον) περιλαμβάνοντας κατάλληλο χαρακτηριστικό στον πηγαίο HTML κώδικα για την εικόνα. Η HTML δεν είναι ευαίσθητη στα μικρά ή τα κεφαλαία. Το <TITLE> είναι ισοδύναμο με το <title>. Υπάρχουν όμως και κάποιες εξαιρέσεις. Όλες οι ετικέτες δεν υποστηρίζονται από όλους τους πλοηγούς στο internet. Όταν ένας πλοηγός συναντήσει ετικέτα που δεν την υποστηρίζει, απλά την αγνοεί. Το κείμενο που βρίσκεται ανάμεσα σε άγνωστες ετικέτες θα συνεχίσει να εμφανίζεται. Η HTML και η δομή μιας σελίδας Κάθε html έγγραφο θα πρέπει να περιλαμβάνει κάποιες καθορισμένες HTML ετικέτες (tags). Κάθε έγγραφο αποτελείται από το κείμενο της κεφαλίδας και του σώματος. Η κεφαλίδα περιλαμβάνει τον τίτλο και το σώμα περιλαμβάνει το κυρίως κείμενο που αποτελείται από παραγράφους, καταλόγους και άλλα στοιχεία. Οι πλοηγοί αναμένουν ειδική πληροφορία επειδή είναι προγραμματισμένοι σύμφωνα με τις προδιαγραφές της HTML και της SGML. Τα απαιτούμενα στοιχεία παρουσιάζονται στο παρακάτω δείγμα εγγράφου : <html> <head> <TITLE> A Simple HTML Example </TITLE> </head> <body> <H1> Learn HTML </H1>
2 <P> Welcome to the world of HTML. This is the first paragraph. </P> <P> This is the second paragraph </P> </body> </html> Μπορούμε σίγουρα να πούμε ότι το παραπάνω παράδειγμα μας δείχνει την γενική δομή ενός html εγγράφου. Εδώ ίσως παρατηρήσετε ότι κάθε tag της HTML είναι ένθετο. Δηλαδή αμφότερα τα tags αρχής και τέλους, <body> και </body>, είναι ένθετα μέσα στο ζεύγος των tags <html>. Το ίδιο ισχύει και για το ζεύγος των tags <head>. Όλα τα tags της HTML λειτουργούν κατά αυτόν τον τρόπο, σχηματίζοντας ξεχωριστές ένθετες ενότητες κειμένου. Θα πρέπει να είστε ιδιαίτερα προσεκτικοί, φροντίζοντας να μην υπάρχει επικάλυψη μεταξύ των ετικετών. Τα απαιτούμενα στοιχεία είναι οι ετικέτες <html>, <head>, <title> και <body> καθώς και οι αντίστοιχες ετικέτες τέλους. Για να μπορέσει κανείς να εκτελέσει αυτό το html πρόγραμμα κατά τον απλούστερο τρόπο πρέπει να κάνει τα εξής : 1 ) Γράφει το παραπάνω κείμενο σε έναν επεξεργαστή κειμένου (π.χ. Notepad). 2 ) Αποθηκεύει το κείμενο με κατάληξη.html ή.htm (ASCII μορφή). 3 ) Καλεί τοπικά έναν WWW πλοηγό (π.χ. Microsoft Explorer). 4 ) Από το μενού FILE εντοπίζει και επιλέγει το αρχείο.htm ή.html 5 ) Το ανοίγει και το αρχείο εκτελείται αμέσως. Για να δει κανείς ένα αντίγραφο του html αρχείου που ο πλοηγός έχει διαβάσει και δημιουργεί πληροφορία στο τρέχον παράθυρο του χρήστη, από το μενού View του πλοηγού μπορεί να κάνει την επιλογή Document Source για τον Navigator ή View Source για τον Explorer. Τα περιεχόμενα του αρχείου με όλες τις html ετικέτες, εμφανίζονται σε ένα νέο παράθυρο. Κατά αυτόν τον τρόπο μπορεί να έχει την εποπτεία έτοιμων html προγραμμάτων και να μάθει πράγματα που χρησιμοποιούν οι προχωρημένοι html χρήστες. Παρακάτω θα αναφέρουμε ορισμένες από τις html ετικέτες και ορισμένα παραδείγματα για να γνωρίσουμε την γλώσσα. Οι Ετικέτες Της HTML (Markup Tags) <HTML> </HTML> Το πρώτο tag που ελέγχει την δομή κάθε ιστοσελίδας. Το tag αυτό υποδεικνύει ότι το περιεχόμενο του συγκεκριμένου αρχείου περιέχει κώδικα γραμμένο με την γλώσσα HTML. Επίσης και η επέκταση του αρχείου (.html) δηλώνει το ίδιο. Όλο το κείμενο και οι εντολές της ιστοσελίδας θα πρέπει να τοποθετούνται μεταξύ του ζεύγους <html> </html>. <HEAD> </HEAD> Η ετικέτα της κεφαλίδας προσδιορίζει ότι οι γραμμές που περικλείονται ανάμεσα στην αρχή και στο τέλος της είναι ο «πρόλογος» για το υπόλοιπο του αρχείου. Το tag <head> αναγνωρίζει το πρώτο μέρος του HTML κωδικοποιημένου εγγράφου που περιέχει τον τίτλο (ο τίτλος αυτός εμφανίζεται ως μέρος του παραθύρου του πλοηγού). Γενικά υπάρχουν λίγα tags τα οποία τοποθετούνται στο τμήμα <head> μιας σελίδας. Τέλος δεν θα πρέπει να τοποθετείτε ποτέ κείμενο των σελίδων σας στο στοιχείο της κεφαλίδας.
3 <TITLE> </TITLE> Το στοιχείο του τίτλου περιλαμβάνει τον τίτλο του εγγράφου και αναγνωρίζει το περιεχόμενό του, συνολικά για όλο το έγγραφο. Ο τίτλος εμφανίζει στο πάνω μέρος του παραθύρου του πλοηγού στην μπάρα των τίτλων και όχι μέσα στο παράθυρο. Αυτός ο τίτλος είναι επίσης αυτό που εμφανίζεται σε κάποιου τον κατάλογο hotlist ή bookmark, για αυτό θα πρέπει να επιλέγεται κάτι το μοναδικό, το περιγραφικό και το σχετικά σύντομο. Επίσης ο τίτλος χρησιμοποιείται για να αναγνωρίζεται η σελίδα από τις μηχανές αναζήτησης. Γενικά ο τίτλος δεν μπορεί να ξεπερνά τους 64 χαρακτήρες. <BODY> </BODY> Το υπόλοιπο της σελίδας σας, συμπεριλαμβανομένου όλου του κειμένου και οποιουδήποτε άλλου περιεχομένου (συνδέσεις, εικόνες, κ.λ.π.), περικλείεται μέσα σε αυτό το tag (<body>). Η ετικέτα <body> μπορεί να πάρει τα παρακάτω χαρακτηριστικά / γνωρίσματα (body attributes) : BGCOLOR Καθορίζει το χρώμα του υπόβαθρου, χρησιμοποιώντας ένα όνομα ή μια δεκαεξαδική τιμή. BACKGROUND Καθορίζει μια εικόνα ως υπόβαθρο (wallpaper). TEXT Καθορίζει το χρώμα του κειμένου της σελίδας, χρησιμοποιώντας ένα όνομα ή μια δεκαεξαδική τιμή. LINK Καθορίζει το χρώμα των συνδέσμων της σελίδας, χρησιμοποιώντας ένα όνομα ή μια δεκαεξαδική τιμή. ALINK Καθορίζει το χρώμα των συνδέσμων της σελίδας όταν αυτοί επιλέγονται, χρησιμοποιώντας ένα όνομα ή μια δεκαεξαδική τιμή. Παράδειγμα :< BODY BGCOLOR = # TEXT = #FFFFFF LINK = #9690CC > <H1>-<H6> </H1>-</H6> Η HTML έχει έξι επίπεδα κεφαλίδων, αριθμούμενων από το 1 μέχρι το 6, με το 1 να είναι μεγαλύτερο. Οι κεφαλίδες τυπικά εμφανίζονται με μεγαλύτερα ή και πιο έντονες γραμματοσειρές από ότι το κανονικό κείμενο. Η πρώτη κεφαλίδα σε κάθε κείμενο θα πρέπει να έχει το σημάδι <H1>. Η σύνταξη του στοιχείου της κεφαλίδας είναι : <Hz> Κείμενο Επικεφαλίδας </Hz>, για z από 1 έως και 6. Δεν θα πρέπει να ξεπερνιέται η σειρά των κεφαλίδων στο κείμενο. Δεν θα πρέπει να ξεκινήσει κανείς με κεφαλίδα πρώτου επιπέδου και μετά να χρησιμοποιήσει κεφαλίδα τρίτου επιπέδου. <BR> Αυτή η ετικέτα εξαναγκάζει μια γραμμή χωρίς καθόλου κενά διαστήματα μεταξύ των γραμμών. Δηλαδή τοποθετείτε το υπόλοιπο κείμενο σε μια νέα γραμμή. Δημιουργείται μια αλλαγή γραμμής. (enter). <P> </P> Η ένδειξη έναρξης παραγράφου γίνεται με την ετικέτα <P> και η ένδειξη τέλους με την ετικέτα </P>. Στην ετικέτα αρχής παραγράφου είναι δυνατόν να περιληφθεί και το χαρακτηριστικό ALIGN = alignment όπου το alignment μπορεί να λάβει τις τιμές CENTER, LEFT και RIGHT. Σε αντίθεση με πολλούς επεξεργαστές κειμένου, οι χαρακτήρες αλλαγής γραμμής (carriage returns) στην HTML δεν είναι σημαντικοί και έτσι δεν έχει σημασία πόσο μεγάλες είναι οι γραμμές κειμένου. Πολλαπλά διαστήματα καταγράφονται ως ένα από το πρόγραμμα πλοήγησης. Δηλαδή ακόμα και αν υπάρχουν δυο χαρακτήρες αλλαγής γραμμής πριν το τέλος της παραγράφου στο πηγαίο αρχείο, το πρόγραμμα πλοήγησης τους αγνοεί και ξεκινά μια καινούρια παράγραφο μόνο όταν συναντά μια άλλη ετικέτα <P>. Για να διατηρηθεί η αναγνωσιμότητα στα αρχεία HTML, συνίσταται η τοποθέτηση επικεφαλίδων σε ξεχωριστές γραμμές καθώς και χρήση κενών γραμμών για τον διαχωρισμό τμημάτων και παραγράφων κειμένου. Αυτά τα επιπλέον κενά υποβοηθούν στην διόρθωση και τυχών τροποποίηση των αρχείων. Το πρόγραμμα
4 πλοήγησης θα αγνοήσει τα επιπλέον διαστήματα επειδή έχει δικούς του κανόνες για τα διαστήματα που δεν βασίζονται στα διαστήματα που υπάρχουν στο πηγαίο αρχείο. Η ετικέτα του τέλους </P> μπορεί να παραληφθεί. Το πρόγραμμα πλοήγησης αντιλαμβάνεται ότι υπάρχει πάντα ένα τέλος στην ετικέτα <P>. <ADDRESS> </ADDRESS> Μια «υπογραφή» για μια ιστοσελίδα. Εμφανίζετε συνήθως προς το τέλος κάθε εγγράφου και περιέχει πληροφορίες επαφής ή σημείωσης περί πνευματικών δικαιωμάτων και copyright. <CENTER> </CENTER> Κεντράρει όλο το περιεχόμενο μεταξύ των tags αρχής και τέλους. <BIG> </BIG> Κείμενο με μεγαλύτερη γραμματοσειρά από το περιβάλλον κείμενο. <SMALL> </SMALL> Κείμενο με μικρότερη γραμματοσειρά από το περιβάλλον κείμενο. <EM> </EM> Κείμενο με έμφαση. <STRONG> </STRONG> Κείμενο με εντονότερη έμφαση. <SUB> </SUB> Κείμενο σε μορφή δείκτη. <SUP> </SUP> Κείμενο σε μορφή εκθέτη. <TT> </TT> Κείμενο με γραμματοσειρά γραφομηχανής (μη-αναλογική γραμματοσειρά, όπως η courier). <S> </S> Κείμενο με διακριτή διαγραφή. <BLOCKQUOTE> </ BLOCKQUOTE > Ένα απόσπασμα κειμένου μεγαλύτερο από λίγες λέξεις. <DFN> </DFN> Ένας ορισμός, ή ένας όρος ο οποίος πρόκειται να εξηγηθεί στην συνέχεια. <KBD> </KBD> Κείμενο το οποίο θα πληκτρολογηθεί από τον χρήστη. <VAR> </VAR> Όνομα μεταβλητής. <NOBR> </NOBR> Το κείμενο που περικλείεται σε αυτό το ζεύγος tags δεν μπορεί να διαχωριστεί σε δυο γραμμές. <FONT> </FONT> Ιδιότητα SIZE : Το νέο μέγεθος γραμματοσειράς στο οποίο θέλετε να αλλάξετε το κείμενο, είτε από 1 έως 7. Ιδιότητα FACE : Το όνομα της νέας γραμματοσειράς στην οποία θέλετε να αλλάξετε το κείμενο. Μπορείτε να αναφέρεστε στην λίστα γραμματοσειρών. <BLINK> </BLINK> Αναγκάζει το κείμενο που περικλείει να αναβοσβήνει.
5 <B> </B> Έντονη γραφή κειμένου. <I> </I> Πλάγια γραφή κειμένου. <U> </U> Κείμενο με υπογράμμιση. <PRE> </PRE> Με αυτή την ετικέτα μπορείτε να μορφοποιείτε το κείμενο με την επιθυμητή εμφάνιση που εσείς θέλετε και αυτό θα παρουσιάζεται ακριβώς έτσι στο παράθυρο της εφαρμογής browser. Οποιοδήποτε στοιχείο δημιουργίας κενού χώρου τοποθετείτε μέσα στο κείμενο το οποίο περικλείεται μέσα στα tags <pre> και </pre>, διατηρείται στο τελικό αποτέλεσμα. Το προ-μορφοποιημένο κείμενο είναι ιδανικό για πράγματα όπως τα αποσπάσματα κώδικα, όπου θέλετε να τοποθετείτε σε εσοχή και να μορφοποιείτε τις γραμμές του κώδικα κατάλληλα. Επειδή μπορείτε επίσης να χρησιμοποιήσετε αυτό το tag για να στοιχίζετε το κείμενο χρησιμοποιώντας κενά διαστήματα, μπορείτε να το εκμεταλλεύεστε για την δημιουργία απλών πινάκων. Όταν δημιουργείτε κείμενο για το tag <pre>, μπορείτε να χρησιμοποιείτε tags δημιουργίας συνδέσεων και tags αλλαγής του στυλ χαρακτήρων, αλλά όχι tags χαρακτηρισμού ολόκληρων στοιχείων, όπως τα tags για τις κεφαλίδες ή τις παραγράφους του κυρίως κειμένου. Θα πρέπει να χωρίζετε τις γραμμές σας χρησιμοποιώντας τον χαρακτήρα αλλαγής γραμμής (enter, return), και να προσπαθείτε να κρατάτε τις γραμμές σας σε μήκος 60 ή λιγότερων χαρακτήρων (Δεδομένου ότι οι εφαρμογές browser δεν μπορούν να αναδιαμορφώσουν το προ-μορφοποιημένο κείμενο ώστε να χωρά μέσα στον διαθέσιμο χώρο, θα πρέπει να διασφαλίζετε ότι παραμένετε μέσα στα όρια). Το tag <pre> είναι επίσης θαυμάσιο για την γρήγορη και εύκολη ενσωμάτωση αρχείων απλού κειμένου, όπως τα μηνύματα ηλεκτρονικού ταχυδρομείου. Περικλείετε απλώς ολόκληρο το περιεχόμενο του μηνύματος μέσα στο ζεύγος των tags <pre> κι έχετε άμεσα το σωστό αποτέλεσμα στο html αρχείο. <HR SIZE = x WIDTH = y NOSHADE> Αυτή η ετικέτα εισάγει στο html έγγραφο έναν οριζόντιο χάρακα. Παράγει μια οριζόντια γραμμή το μήκος της οποίας καλύπτει το πλάτος του παραθύρου του προγράμματος πλοήγησης. Ο χάρακας είναι πολύ χρήσιμος για να διαχωρίζει τμήματα του εγγράφου. Αυτό το tag έχει τρία χαρακτηριστικά. Η πρώτη ιδιότητα είναι το size. Αυτή η ιδιότητα, το μέγεθος (size), καθορίζει το πάχος σε pixels της γραμμής. Η προεπιλεγμένη τιμή της είναι 2 και αυτό είναι επίσης το μικρότερο πάχος που μπορεί να έχει μια τέτοια γραμμή. Η ιδιότητα width (πλάτος) καθορίζει το πλάτος της γραμμής στην οριζόντια διεύθυνση. Μπορείτε να καθορίσετε είτε το ακριβές πλάτος σε pixels, είτε μια τιμή σαν ποσοστό επί του πλάτους της οθόνης, η οποία θα αλλάζει όταν αλλάζετε το μέγεθος του παραθύρου. Εάν χρησιμοποιήσετε τιμή πλάτους (width) μικρότερη από το πραγματικό πλάτος της οθόνης, μπορείτε επίσης να προσδιορίσετε την θέση αυτής της γραμμής με τη ιδιότητα align, στοιχίζοντας την αριστερά (align = left), δεξιά (align = right), ή στο κέντρο (align = center). Εξ ορισμού, οι γραμμές κεντράρονται στο παράθυρο. Τέλος, η ιδιότητα noshade λέει στην εφαρμογή browser να σχεδιάσει την γραμμή σαν απλή μαύρη γραμμή, χωρίς τρισδιάστατη σκίαση. <A> </A> Η ετικέτα που δείχνει το υπερκείμενο είναι το <a> από την λέξη anchor. Για την δημιουργία μιας σύνδεσης σε μία ιστοσελίδα, θα χρησιμοποιείτε το ζεύγος των tags <a>.</a>. Το tag αρχής <a>, περιλαμβάνει το όνομα του (a) και επιπλέον πληροφορίες σχετικές με την σύνδεση. Για να δοθούν αυτές οι επιπλέον πληροφορίες για την σύνδεση θα πρέπει να χρησιμοποιήσουμε κάποια γνωρίσματα-χαρακτηριστικά αυτής της ετικέτας.
6 Δυο είναι τα βασικά γνωρίσματα (attributes) αυτής της ετικέτας. Το χαρακτηριστικό HREF και το χαρακτηριστικό NAME. Δίνεται ένα παράδειγμα μιας διασύνδεσης υπερκειμένου με την χρήση αυτών των attributes : <A name= Up href= menu.html title= First Link > Link </A>. Το tag <a> έχει αρκετές ιδιότητες, συμπεριλαμβανομένων των rel, rev, shape, accesskey και title. Ωστόσο, οι περισσότερες από αυτές χρησιμοποιούνται μόνο από εργαλεία τα οποία παράγουν αυτόματα συνδέσεις μεταξύ των σελίδων, ή από εφαρμογές browser οι οποίες μπορούν να διαχειρίζονται τις συνδέσεις καλύτερα από τις περισσότερες άλλες εφαρμογές browser που κυκλοφορούν αυτή τη στιγμή. Τα πιο χρήσιμα attributes όμως είναι σίγουρα το href και το name. Η ιδιότητα HREF (Hypertext REFerence αναφορά υπερ-κειμένου) χρησιμοποιείται για τον καθορισμό του ονόματος ή της διεύθυνσης URL του αρχείου στο οποίο «δείχνει» η σύνδεση. Όμοια με τα περισσότερα tags της HTML, το tag δημιουργίας συνδέσεων έχει αντίστοιχο tag τέλους, το </a>. Το κείμενο που υπάρχει μεταξύ των tags αρχής και τέλους γίνεται η πραγματική σύνδεση, η οποία εμφανίζεται με κάποιο είδος τονισμού στην οθόνη. Αυτό είναι το κείμενο πάνω στο οποίο εσείς ή οι αναγνώστες σας μπορείτε να κάνετε κλικ (ή να το επιλέξετε σε εφαρμογές browser που δεν χρησιμοποιούν ποντίκι) για να μεταβείτε στο σημείο το οποίο προσδιορίζεται στην ιδιότητα href (στον προορισμό της σύνδεσης). Αντί να χρησιμοποιήσουμε κείμενο για να μεταβούμε στον προορισμό της σύνδεσης μπορούμε να χρησιμοποιήσουμε και εικόνα. Το tag <a> αποκαλείται συχνά και tag δεσμού (anchor tag), δεδομένου ότι μπορεί επίσης να χρησιμοποιείται για την δημιουργία δεσμών (συνδέσεων προς σημεία που βρίσκονται στην ίδια σελίδα). Οι δεσμοί (anchors) ή σελιδοδείκτες, είναι ειδικά σημεία μέσα σε έγγραφα, στα οποία μπορείτε να μεταβαίνετε με τη βοήθεια των συνδέσεων. Οι συνδέσεις μπορούν να σας μεταφέρουν σ αυτά τα ειδικά σημεία μέσα σε μια σελίδα, αντί να σας μεταφέρουν απλώς στην κορυφή της σελίδας. Για να καταλάβουμε τους συνδέσμους σε συγκεκριμένα τμήματα στο τρέχον έγγραφο θα δώσουμε το παρακάτω παράδειγμα : Για διασύνδεση στη διεύθυνση Part2 από κάποιο σημείο ενός εγγράφου σε ένα άλλο σημείο εντός του ίδιου εγγράφου θα πρέπει να γράψουμε τα εξής : <H2> <A HREF= #Part2 > Go to Link </A></H2>. Ακριβώς μετά θα πρέπει να εισαχθεί το σημάδι <H2> <A Name= Part2 > Link </A> <H2> στο σημείο του εγγράφου μας στο οποίο επιθυμούμε να μας μεταφέρει ο σύνδεσμός μας. Ωστόσο, η πιο κοινή χρήση του tag αυτού είναι για την δημιουργία συνδέσεων προς άλλες σελίδες. <IMG SRC = "x"> Οι εξωτερικές εικόνες (external images) είναι αποθηκευμένες ξεχωριστά από την ιστοσελίδα και φορτώνονται μόνο κατ απαίτηση, π.χ. σαν αποτέλεσμα της επιλογής μιας σύνδεσης. Οι ένθετες εικόνες εμφανίζονται σε μια ιστοσελίδα μαζί με το κείμενο και τις συνδέσεις, και φορτώνονται αυτόματα όταν φορτώνεται η ίδια η σελίδα. Τα περισσότερα προγράμματα πλοήγησης στο Web μπορούν να εμφανίζουν εικόνες δίπλα σε κείμενο (inline images ένθετες εικόνες) που βρίσκονται σε μορφή X bitmap (.xbm),.gif ή.jpeg. Και άλλες μορφές εικόνας μπορούν να ενσωματώνονται σε προγράμματα πλοήγησης π.χ. μορφή Portable Network Graphic (.PNG). Για κάθε εικόνα απαιτείται χρόνος για να επεξεργαστεί και επιβραδύνει την αρχική εμφάνιση ενός εγγράφου. Θα πρέπει κανείς με πολύ προσοχή να επιλέγει τις εικόνες σε ένα έγγραφο. Για να περιληφθεί μια εικόνα σε ένα έγγραφο θα χρησιμοποιήσουμε την ετικέτα <img> (το tag <img> δεν έχει tag τέλους). Τo tag <img> έχει πολλές ιδιότητες οι οποίες σας επιτρέπουν να εμφανίζετε και να χειρίζεστε με πολλούς τρόπους τις ένθετες εικόνες. Η πιο σημαντική ιδιότητα του tag <img> είναι η SRC. Η ιδιότητα SRC υποδεικνύει το όνομα αρχείου ή την διεύθυνση URL της εικόνας που θέλετε να συμπεριλάβετε, περικλειόμενη μέσα σε εισαγωγικά. Το όνομα
7 διαδρομής του αρχείου χρησιμοποιεί τους ίδιους κανόνες για την αναγραφή διαδρομών καταλόγων (pathnames) που ισχύουν και στην ιδιότητα HREF των συνδέσεων. Χρησιμοποιώντας την ιδιότητα ALT του tag <img> μπορείτε να καθορίσετε κείμενο το οποίο θα εμφανίζεται στην θέση της εικόνας στις εφαρμογές browser που δεν έχουν δυνατότητα εμφάνισης γραφικών. Αυτή η ιδιότητα περιέχει ένα αλφαριθμητικό με το κείμενο που θέλετε να εμφανίζεται στην θέση της εικόνας. π.χ. <img src= image.gif alt= [a flower] > <! > Σχόλια Οι Ετικέτες Της HTML Για Την Δημιουργία Λιστών (Lists) <UL> </UL> Μια μη-αριθμημένη λίστα, ή λίστα κουκίδων. Κάθε στοιχείο μιας τέτοιας λίστας ξεκινά με το tag <LI>. <OL> </OL> Μια αριθμημένη λίστα. Κάθε στοιχείο της λίστας ξεκινά με το tag <LI>. Σε αυτό το tag μπορούμε να έχουμε και δυο χαρακτηριστικά. Το attribute TYPE και το attribute START. Με το attribute TYPE καθορίζετε το είδος της αρίθμησης της λίστας. Με το attribute START καθορίζετε ο αριθμός με τον οποίον ξεκινά η αρίθμηση. <LI> </LI> Το tag για μεμονωμένα στοιχεία σε πολλά είδη λιστών : αριθμημένες λίστες, λίστες κουκίδων, λίστες μενού ή λίστες καταλόγων. Είναι υποχρεωτικό να κλείνει με το tag τέλους </LI> στην HTML. <DL> </DL> Μια λίστα γλωσσάριου ή ορισμών. Τα στοιχεία της λίστας αποτελούνται από ζεύγη : έναν όρο και τον ορισμό του. <DT> </DT> Το τμήμα ενός στοιχείου μιας λίστας γλωσσάριου που αναγράφει τον όρο. Είναι υποχρεωτικό να κλείνει με το tag τέλους </DT> στην HTML. <DD> </DD> Το τμήμα ενός στοιχείου μιας λίστας γλωσσάριου που αναγράφει τον ορισμό. Οι Ετικέτες Της HTML Για Την Δημιουργία Πινάκων (TABLES) Οι πίνακες είναι πολύ χρήσιμο εργαλείο για την παρουσίαση πληροφορίας. Ακόμη και η παρουσίαση κανονικών σελίδων Web μπορεί να ωφεληθεί από τους πίνακες. Ένας πίνακας έχει κεφαλές όπου γίνεται η επεξήγηση της πληροφορίας των γραμμών και στηλών καθώς και του κάθε κελιού. Για τους πίνακες έχουμε τις εξής ετικέτες : <TABLE> </TABLE> Αυτή η ετικέτα προσδιορίζει ένα πίνακα σε μορφή HTML. Εάν το χαρακτηριστικό BORDER είναι παρόν, τότε το πρόγραμμα πλοήγησης εμφανίζει τον πίνακα με πλαίσιο. <CAPTION> </CAPTION> Ορίζει τον τίτλο που παρατίθεται στον πίνακα. Η εξ ορισμού θέση του τίτλου είναι το κέντρο στην κορυφή του πίνακα. Το χαρακτηριστικό ALIGN = BOTTOM μπορεί να χρησιμοποιηθεί για να τοποθετηθεί ο τίτλος του πίνακα στο κάτω μέρος του.
8 <TR> </TR> Προσδιορίζει μια γραμμή πίνακα σε ένα πίνακα. Μπορεί να οριστούν εξ ορισμού χαρακτηριστικά για όλη τη γραμμή. ALIGN (LEFT, CENTER, RIGHT) και VALIGN (TOP, MIDDLE, BOTTOM). <TH> </TH> Ορίζει ένα κελί σαν κεφαλίδα. Εξ ορισμού το κείμενο σε αυτό το κελί τοποθετείται στο κέντρο με έντονα γράμματα. Τα κελιά επικεφαλίδας πίνακα μπορούν να περιλαμβάνουν άλλα χαρακτηριστικά για να αποφασίζουν τις ιδιότητες του κελιού ή τα περιεχόμενα του. <TD> </TD> Παρόμοια με την παραπάνω ετικέτα (<TH>) μόνο που εδώ δεν γράφουμε επικεφαλίδα μιας γραμμής ή μιας στήλης αλλά απλά περιεχόμενα ενός κελιού του πίνακα. Σε μία γραμμή του πίνακα (<TR>) μπορούμε να έχουμε πολλά κελιά που ορίζονται με τις ετικέτες (<TH>) και (<TD>). Χαρακτηριστικά ενός πίνακα Σημείωση : Τα χαρακτηριστικά που ορίζονται εντός των κελιών <TH> </TH> ή <TD> </TD> υπερβαίνουν την εξ ορισμού ευθυγράμμιση που ορίζεται με μια εντολή <TR> </TR>. Μπορούμε να έχουμε τα εξής χαρακτηριστικά : ALIGN (LEFT, CENTER, RIGHT) : Οριζόντια ευθυγράμμιση ενός κελιού. VALIGN (TOP, MIDDLE, BOTTOM) : Κάθετη ευθυγράμμιση ενός κελιού. COLSPAN = n : Ο αριθμός των στηλών που διαχωρίζεται ένα κελί. ROWSPAN = n : Ο αριθμός των γραμμών που χωρίζεται ένα κελί. NOWRAP : Περάτωση της περιβολής εντός ενός κελιού. Για να καταλάβουμε όμως όλα τα παραπάνω θα δώσουμε το παράδειγμα του παρακάτω πίνακα στον οποίον επεξηγείτε η χρήση των εντολών του : <TABLE> <TR> <TH> Περιεχόμενα κελιού </TH>.. <TH> Περιεχόμενα κελιού </TH> </TR> <TR> <TD> Περιεχόμενα κελιού </TD>. <TD> Περιεχόμενα κελιού </TD> </TR> : Αρχή ορισμού του πίνακα. : Πρώτη γραμμή : Πρώτο κελί στην πρώτη γραμμή (head). : Τελευταίο κελί στην πρώτη γραμμή (head). : Τέλος ορισμού της πρώτης γραμμής. : Αρχή ορισμού της δεύτερης γραμμής. : Πρώτο κελί στην δεύτερη γραμμή. : Τελευταίο κελί στην δεύτερη γραμμή. : Τέλος ορισμού της δεύτερης γραμμής.
9 <TR> <TD> Περιεχόμενα κελιού </TD>. <TD> Περιεχόμενα κελιού </TD> </TR> </TABLE> : Αρχή ορισμού της τελευταίας γραμμής. : Πρώτο κελί στην τελευταία γραμμή. : Τελευταίο κελί στην τελευταία γραμμή. : Τέλος ορισμού της τελευταίας γραμμής. : Τέλος ορισμού του πίνακα. Οι ετικέτες <TABLE> και </TABLE> θα πρέπει να περιβάλουν τον ορισμό όλου του πίνακα. Το πρώτο στοιχείο εντός το πίνακα είναι το σημάδι CAPTION το οποίο είναι κατ επιλογήν. Κατόπιν με την βοήθεια των <TR> και </TR> μπορεί να οριστούν τόσες σειρές όσες απαιτούνται. Εντός μιας γραμμής μπορεί να οριστεί οιαδήποτε αριθμός κελιών που ορίζονται με τις ετικέτες <TD>...</TD> και <TH> </TH>. Κάθε γραμμή ενός πίνακα, μορφοποιείται ξεχωριστά και ανεξάρτητα από τις προηγούμενες και επόμενες γραμμές. Πίνακες για μη πινακοποιημένη πληροφορία Ορισμένοι HTML συγγραφείς χρησιμοποιούν πίνακες για να παραστήσουν μη πινακοποιημένη πληροφορία. Για παράδειγμα, μπορούν να περιληφθούν και σύνδεσμοι στα κελιά του πίνακα, ορισμένοι συγγραφείς χρησιμοποιούν πίνακα χωρίς πλαίσιο για να δημιουργήσουν μια εικόνα από πολλές ξεχωριστές εικόνες. Τα προγράμματα πλοήγησης (browsers) που έχουν τη δυνατότητα εμφάνισης διαφορετικών εικόνων αποκρύπτοντας τις ενώσεις, μπορούν να εμφανίζουν την δημιουργούμενη εικόνα να φαίνεται ως ένα χάρτη από εικόνες (image map, δηλαδή μια εικόνα με διασυνδεδεμένα τεταρτημόρια). Ακόμα, και όταν χρησιμοποιούνται πλαίσια πινάκων είναι δυνατόν να δημιουργηθούν εντυπωσιακές εικόνες. Οι Ετικέτες Της HTML Για Την Συμπλήρωση Εντύπων (FILL OUT FORMS) Έντυπα στον παγκόσμιο ιστό επιτρέπουν στον αναγνώστη να αποστέλλει πληροφορία σ έναν εξυπηρετητή Web για κάποια δράση. Για παράδειγμα, υποθέστε ότι συγκεντρώνετε ονόματα και ηλεκτρονικές διευθύνσεις για να μπορείτε να αποστέλλετε πληροφορίες σε χρήστες που το επιθυμούν. Για κάθε άτομο που εισάγει το όνομα του και τη διεύθυνση του, απαιτείται να αποσταλεί κάποια πληροφορία και τα στοιχεία του αποκρινόμενου να προστεθούν σε μια βάση δεδομένων. Η επεξεργασία της εισερχόμενης πληροφορίας συνήθως γίνεται με ένα πρόγραμμα (script) γραμμένο σε perl ή σε άλλη γλώσσα που διαχειρίζεται κείμενο, αρχεία και γενικά πληροφορία. Εμείς πιο κάτω θα δώσουμε παράδειγμα και θα αναλύσουμε την visual basic script (VBScript). Ο προγραμματισμός εντύπου ακολουθεί τους ίδιους κανόνες όπως και όλες οι άλλες δομές της HTML. Η δυσκολία έγκειται στο πρόγραμμα που παραλαμβάνει την πληροφορία που υποβλήθηκε δια του εντύπου και εκτελεί την περαιτέρω επεξεργασία της πληροφορίας. Όταν η πληροφορία συλλέγεται με την βοήθεια ενός προγράμματος πλοήγησης, αποστέλλεται σ έναν HTTP εξυπηρετητή που είναι εξειδικευμένος στην HTML μορφή. Ο εξυπηρετητής ξεκινά ένα πρόγραμμα και αυτό σε HTML μορφή, που μπορεί να επεξεργαστεί την πληροφορία. Ένα απλό έντυπο Δίνεται ως παράδειγμα ο κώδικας για ένα απλό έντυπο :
10 < FORM ACTION = example.asp METHOD = POST > < INPUT TYPE = SUBMIT value = Submit Form > < /FORM > Ο κώδικας αυτός παράγει το στοιχειώδες έντυπο : Submit Form Τα στοιχεία και τα χαρακτηριστικά του κώδικα σε συντομία σημαίνουν τα παρακάτω : ACTION : Ποιο πρόγραμμα από τον εξυπηρετητή να κληθεί. METHOD : Πως θα γίνει η επικοινωνία με τον εξυπηρετητή. INPUT : Μια είσοδος στο έντυπο. TYPE = SUBMIT : Καθορίζει τον τύπο της εισόδου. value = Submit Form : Εμφανίζει το περιεχόμενο του κομβίου. Πατώντας το κουμπί (button) θα εμφανιστεί τι θα μεταδοθεί στον εξυπηρετητή. Κάθε στοιχείο ενός εντύπου έχει ένα NAME και μια VALUE. Το NAME παραμένει πάντα το ίδιο και το VALUE αλλάζει για να λαμβάνει την είσοδο του χρήστη. Όταν γίνεται η υποβολή του εντύπου (δηλαδή on Submit) όλα τα ζεύγη name / value αποστέλλονται στον εξυπηρετητή. Είναι δυνατόν πολλές είσοδοι να έχουν το ίδιο όνομα. Τότε πολλαπλές τιμές θα αποσταλούν στον εξυπηρετητή. ΕΤΙΚΕΤΕΣ ΠΟΥ ΧΡΗΣΙΜΟΠΟΙΟΥΝΤΑΙ ΓΙΑ ΤΗΝ ΔΗΜΙΟΥΡΓΙΑ ΕΝΤΥΠΩΝ <FORM> </FORM> Αυτή η ετικέτα περιβάλει ένα τμήμα ενός HTML εγγράφου το οποίο περιλαμβάνει στοιχεία τύπου HTML. Άλλες ετικέτες τύπου BODY μπορεί να υπάρχουν εντός ενός εντύπου και πολλαπλά έντυπα μπορεί να υπάρχουν σ ένα έγγραφο, αλλά όμως τα έντυπα δεν μπορούν να φωλιάζουν το ένα εντός του άλλου. Υπάρχουν δυο σημαντικά χαρακτηριστικά στα έντυπα. Το χαρακτηριστικό ACTION φανερώνει το URL της πύλης της διεργασίας, δηλαδή την θέση του προγράμματος που θα επεξεργαστεί το έντυπο. Το πρόγραμμα αυτό θα δεχτεί τα περιεχόμενα από το έντυπο με ένα από δύο διαθέσιμους τρόπους ανάλογα με την τιμή που έχει προσδιοριστεί στο χαρακτηριστικό METHOD. Το χαρακτηριστικό METHOD μπορεί να λάβει δυο τιμές : GET ή POST. Οι πύλες επικοινωνίας μπορούν να λάβουν τα δεδομένα απ ευθείας όταν η τιμή GET έχει δοθεί στο χαρακτηριστικό METHOD ή να ψάξουν για αυτά σε μια ειδική μεταβλητή εάν χρησιμοποιείται η τιμή POST. Παραδείγματα : <FORM METHOD=GET ACTION= > Τα περιεχόμενα του εντύπου αποστέλλονται απ ευθείας στη θύρα gate. <FORM ACTION= METHOD=POST> Τα περιεχόμενα του εντύπου τα παραλαμβάνει το πρόγραμμα register. <INPUT> (Χωρίς ετικέτα τέλους). Ορίζει ένα πεδίο εισόδου από όπου ο χρήστης μπορεί να εισάγει πληροφορία στο έντυπο. Κάθε πεδίο εισόδου προσδίδει μια τιμή σε μια μεταβλητή που έχει ένα καθορισμένο όνομα name και ένα καθορισμένο τύπο δεδομένων type. Παρατίθενται τα χαρακτηριστικά και οι πιθανές τιμές τους : 1 ) type = variable type. Το type μπορεί να πάρει εξής τις τιμές (variable types) : text (πεδίο που δέχεται δεδομένα χαρακτήρων), password (πεδίο που δέχεται δεδομένα χαρακτήρων αλλά αυτά δεν εμφανίζονται στην οθόνη επειδή το πεδίο είναι password),
11 checkbox (είναι πεδίο που είτε επιλέγεται είτε όχι), radio (είναι πεδίο που επιτρέπει επιλογή μόνο μιας από τις σχετιζόμενες τιμές), submit (είναι πεδίο που προσδιορίζει ένα κουμπί (button) που όταν ενεργοποιείται αποστέλλει το συμπληρωμένο έντυπο στον εξυπηρετητή), reset (ορίζει ένα κουμπί (button) που επαναφέρει τις μεταβλητές του εντύπου στις αρχικές τους τιμές), hidden (ορίζει ένα αόρατο πεδίο εισόδου του οποίου η τιμή αποστέλλεται μαζί με τις άλλες τιμές του εντύπου όταν αυτό υποβάλλεται. Χρησιμοποιείται για να μεταβιβαστεί πληροφορία από το ένα έντυπο στο άλλο), image (Ορίζει μια εικόνα εντός ενός εντύπου και επιστρέφει τις συντεταγμένες ενός κλικ του ποντικιού εντός της εικόνας). 2 ) name = textstring. Όπου textstring είναι ένα συμβολικό όνομα (που δεν εμφανίζεται) που αναγνωρίζει την μεταβλητή εισόδου όπως στο παράδειγμα : <input type= checkbox name= box >. 3 ) value = textstring. Όπου η σημασία του textstring εξαρτάται από την τιμή που λαμβάνει το type. Εάν type= text ή type= password, τότε το textstring είναι η αρχική τιμή για την μεταβλητή input. Τιμές για τα συνθηματικά δεν εμφανίζονται στην οθόνη του χρήστη. Οτιδήποτε εισάγεται από τον χρήστη θα αντικαταστήσει την αρχική τιμή που ορίζεται με αυτό το χαρακτηριστικό. Εάν type= checkbox ή type= radio, τότε το textstring είναι η τιμή που θα αποσταλεί στον εξυπηρετητή εάν οι τύποι έχουν επιλεγεί. Εάν type= reset ή type= submit, τότε το textstring είναι ένα όνομα που εμφανίζεται στο αντίστοιχο κουμπί (button) στη θέση των λέξεων submit ή reset. 4 ) checked. Δεν λαμβάνει καμία τιμή. Για τους τύπους type= checkbox και type= radio εάν το checked είναι παρόν τότε το πεδίο εισόδου έχει αρχική τιμή checked. 5 ) size = display_width. Όπου display_width είναι μια ακέραια τιμή που αναπαριστά τον αριθμό των χαρακτήρων στο πεδίο εισόδου των τύπων type= text ή type= password. 6 ) Maxlength = string_length. Είναι ο μέγιστος αριθμός χαρακτήρων που επιτρέπεται στους τύπους type= text ή type= password για τις τιμές των μεταβλητών. Αυτό το χαρακτηριστικό είναι επιτρεπτό για πεδία μιας γραμμής. <SELECT> </SELECT> Ορίζει και παρουσιάζει ένα σύνολο από επιλέξιμα στοιχεία ενός καταλόγου από τα οποία ο χρήστης μπορεί να επιλέξει ένα ή περισσότερα στοιχεία. Για κάθε στοιχείο του καταλόγου απαιτείται η ετικέτα <OPTION>. Δίνονται τα χαρακτηριστικά και οι τιμές τους για την ετικέτα <SELECT>. Name = textstring Όπου textstring είναι το συμβολικό όνομα για το πεδίο της μεταβλητής SELECT. Size = list_length Όπου το list_length είναι μια ακέραια τιμή που παριστάνει τον αριθμό των στοιχείων που διατίθενται για επιλογή και εμφανίζονται σε μια στιγμή. Multiple Εάν είναι παρόν, επιτρέπει την επιλογή περισσοτέρων από μιας τιμές. <OPTION> Εντός της δομής <SELECT> η ετικέτα <option> χρησιμοποιείται για να ορίσει τις πιθανές τιμές για το πεδίο <select>. Εάν το χαρακτηριστικό selected επιλεγεί τότε η τιμή option επιλέγεται εξ αρχής. Στο παρακάτω παράδειγμα και οι τρεις επιλογές είναι επιλέξιμες, όμως η επιλογή Bananas ισχύει εξ αρχής. <select name= catalog multiple> <option> Apples <option selected> Bananas <option> cherries </select>
12 <TEXTAREA> </TEXTAREA> Ορίζει ένα ορθογώνιο πεδίο όπου ο χρήστης μπορεί να εισάγει δεδομένα κειμένου. Μερικά χαρακτηριστικά και οι τιμές τους δίνονται παρακάτω: Name = textstring textstring είναι ένα συμβολικό όνομα που προσδιορίζει τη δομή <textarea> Rows = num_rows και Cols = num_cols Παριστάνουν τον αριθμό των γραμμών και τον αριθμό των χαρακτήρων που μπορούν να τεθούν και να εμφανίζονται σε κάθε γραμμή.
Η γλώσσα HTML. Επιμέλεια: Δέγγλερη Σοφία
Η γλώσσα HTML Επιμέλεια: Δέγγλερη Σοφία Υπερκείμενο Το δομικό χαρακτηριστικό του Παγκόσμιου Ιστού Ένα αρχείο Απλό κείμενο και υπερσύνδεσμοι Υπερσύνδεσμος Μετάβαση σε διάφορα άλλα έγγραφα Αποτελείται από
Άσκηση 6 Επαναληπτική Άσκηση HTML
Άσκηση 6 Επαναληπτική Άσκηση HTML ΕΤΙΚΕΤΕΣ HTML ΕΤΙΚΕΤΑ ΠΕΡΙΓΡΑΦΗ ΙΔΙΟΤΗΤΕΣ ΙΔΙΟΤΗΤΑ ΤΙΜΗ ΠΕΡΙΓΡΑΦΗ Βασικές Ορίζει τον τύπο του αρχείου Ορίζει ένα αρχείο HTML Ορίζει ένα τίτλο
Επαναληπτική Άσκηση ΕΤΙΚΕΤΕΣ HTML
Επαναληπτική Άσκηση ΕΤΙΚΕΤΕΣ HTML ΕΤΙΚΕΤΑ ΠΕΡΙΓΡΑΦΗ ΙΔΙΟΤΗΤΕΣ ΙΔΙΟΤΗΤΑ ΤΙΜΗ ΠΕΡΙΓΡΑΦΗ Βασικές Ορίζει ένα αρχείο HTML Ορίζει ένα τίτλο για το αρχείο Ορίζει το σώµα της background URL
Πληροφορική Τμήμα Σχεδιασμού & Τεχνολογίας Ξύλου & Επίπλου Αντώνιος Καραγεώργος Ευανθία Τσιλιχρήστου. Μάθημα 5 ο Τεχνολογίες Διαδικτύου: HTML I
Πληροφορική Τμήμα Σχεδιασμού & Τεχνολογίας Ξύλου & Επίπλου Αντώνιος Καραγεώργος Ευανθία Τσιλιχρήστου Μάθημα 5 ο Τεχνολογίες Διαδικτύου: HTML I Διαδικτυακή Εφαρμογή (1/2) Ως διαδικτυακή εφαρμογή μπορούμε
TEC510 Ανάπτυξη Δικτυακών Τόπων (Ε εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Γιώργος Μηλιώτης
TEC510 Ανάπτυξη Δικτυακών Τόπων (Ε εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Γιώργος Μηλιώτης Χειμερινό εξάμηνο 2011-2012 Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό
TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο)
TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Στέλλα Λάμπουρα Εαρινό εξάμηνο Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί
Εισαγωγη στην html. Η δομή μιας ιστοσελίδας (αρχείο html) Η βασική δομή ενός αρχείου html είναι η εξής: <html> <head>
Εισαγωγη στην html Ο παγκόσμιος ιστός (αγγ.: World Wide Web ή www) είναι η πιο δημοφιλής υπηρεσία που μας παρέχει το Διαδίκτυο (Internet) και είναι ένα σύστημα διασυνδεδεμένων πληροφοριών (κειμένου, εικόνας,
ΑΣΠΑΙΤΕ. ΠΡΑΚΤΙΚΗ ΑΣΚΗΣΗ 4α. Υπερκείμενο και HTML. Ημερομηνία :... Τμήμα :... Ονοματεπώνυμο :...
ΠΡΑΚΤΙΚΗ ΑΣΚΗΣΗ 4α Υπερκείμενο και HTML ΑΣΠΑΙΤΕ Ημερομηνία :... Τμήμα :... Ονοματεπώνυμο :... Η HTML (HyperText Markup Language) είναι η γλώσσα που χρησιμοποιείται για να περιγράψει τη δομή και τη διαμόρφωση
Ετικέτες HTML. <!-->: Τα σχόλια χρησιμοποιούνται για να γράφουμε σημειώσεις μέσα στον
Ετικέτες HTML : Τα σχόλια χρησιμοποιούνται για να γράφουμε σημειώσεις μέσα στον πηγαίο κώδικα για να διευκολύνουμε την επεξεργασία και την συντήρηση του αρχείου. Τα σχόλια δεν εμφανίζονται στην οθόνη
ΒΑΣΙΚΕΣ ΑΡΧΕΣ ΣΧΕΔΙΑΣΜΟΥ ΕΦΑΡΜΟΓΩΝ
ΒΑΣΙΚΕΣ ΑΡΧΕΣ ΣΧΕΔΙΑΣΜΟΥ ΕΦΑΡΜΟΓΩΝ Βαγγελιώ Καβακλή Τμήμα Πολιτισμικής Τεχνολογίας & Επικοινωνίας 8 Μαρτίου 2001 Hypertext Markup Language (HTML)! Σε μια ιστοσελίδα μπορούν να εμφανίζονται διαφορετικά
Συλλογή και Επεξεργασία Δεδομένων με Φόρμες
Συλλογή και Επεξεργασία Δεδομένων με Φόρμες Οι φόρμες αποτελούν τον πιο δημοφιλή τρόπο για τη συλλογή δεδομένων μέσω του World Wide Web (WWW). Επιτρέπουν στους χρήστες να επικοινωνούν με τη βοήθεια του
2. ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML ΓΙΩΡΓΟΣ ΓΙΑΝΝΑΚΑΚΗΣ, ΜΑΝΩΛΗΣ ΤΣΙΚΝΑΚΗΣ
2014 2. ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML ΓΙΩΡΓΟΣ ΓΙΑΝΝΑΚΑΚΗΣ, ΜΑΝΩΛΗΣ ΤΣΙΚΝΑΚΗΣ H HTML είναι μία γλώσσα σήμανσης και αποτελεί την κύρια γλώσσα δημιουργίας ιστοσελίδων του διαδικτύου. Είναι το ακρωνύμιο των λέξεων HyperText
Εισαγωγή στον Παγκόσμιο ιστό και στη γλώσσα Html. Χρ. Ηλιούδης
Εισαγωγή στον Παγκόσμιο ιστό και στη γλώσσα Html Χρ. Ηλιούδης Παγκόσμιος Ιστός (WWW) Ο Παγκόσμιος Ιστός (World Wide Web WWW), ή απλώς Ιστός, βασίζεται στην ιδέα των κατανεμημένων πληροφοριών. Αντί όλες
ΠΡΟΓΡΑΜΜΑΤΙΣΤΙΚΑ ΕΡΓΑΛΕΙΑ ΓΙΑ ΤΟ ΔΙΑΔΙΚΤΥΟ
ΠΡΟΓΡΑΜΜΑΤΙΣΤΙΚΑ ΕΡΓΑΛΕΙΑ ΓΙΑ ΤΟ ΔΙΑΔΙΚΤΥΟ Κεφάλαιο 4. Η γλώσσα HTML Επιμέλεια: Καραγιάννης Σπύρος Καθηγητής ΠΕ19 Βασικοί κανόνες σύνταξης HTML ομή σελίδας HTML Μορφοποίηση κειμένου Κατάλογοι Εισαγωγή
Α ΛΥΚΕΙΟΥ - ΕΦΑΡΜΟΓΕΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΜΑΪΟΣ 2019 ΕΝΔΕΙΚΤΙΚΕΣ ΕΡΩΤΗΣΕΙΣ ΚΑΤΑΝΟΗΣΗΣ
Το υλικό αυτό δίνεται στους μαθητές για τη σωστή μελέτη της διδαχθείσας ύλης του μέρους Β. Πρόκειται για ένα συμπαγή κορμό ερωτήσεων και ασκήσεων οι οποίες καλύφθηκαν κατά τη διάρκεια της έως τώρα σχολικής
Κεφάλαιο 4 HyperText Markup Language - HTML. Προγραμματιστικά εργαλεία για το διαδίκτυο Φίλιππος Κουτσάκας, Πολύγυρος 2013
Κεφάλαιο 4 HyperText Markup Language - HTML Προγραμματιστικά εργαλεία για το διαδίκτυο Φίλιππος Κουτσάκας, Πολύγυρος 2013 Τι είναι η HTML; Ένας τρόπος για να πεις στον σελιδομετρητή πώς να αναπαραστήσει
<HTML> <HEAD> <TITLE> <BODY>
ΑΣΚΗΣΗ 1 1. Ανοίξτε τον επεξεργαστή ιστοσελίδων 2. Αποθηκεύστε στο X:/mathimata/html/askiseis/ με όνομα askisi1b.html 3. Θα φτιάξουμε μια νέα ιστοσελίδα, χρησιμοποιώντας τις βασικές ετικέτες
Τεχνολογίες Διαδικτύου (Εξασκηθείτε στην HTML)
Τεχνολογίες Διαδικτύου (Εξασκηθείτε στην HTML) 1. Δημιουργία μιας απλής σελίδας HTML Ανοίξτε το Notepad ακολουθώντας τη διαδρομή Start All Programs Accessories Notepad Πληκτρολογήστε το ακόλουθο κείμενο:
ΠΡΟΓΡΑΜΜΑΤΙΣΤΙΚΑ ΕΡΓΑΛΕΙΑ ΓΙΑ ΤΟ ΔΙΑΔΙΚΤΥΟ. Κεφάλαιο 5. Αλληλεπιδραστικές ιστοσελίδες (χρήση ετικέτας <FORM> και η τεχνική CGI)
ΠΡΟΓΡΑΜΜΑΤΙΣΤΙΚΑ ΕΡΓΑΛΕΙΑ ΓΙΑ ΤΟ ΔΙΑΔΙΚΤΥΟ Κεφάλαιο 5. Αλληλεπιδραστικές ιστοσελίδες (χρήση ετικέτας και η τεχνική CGI) Επιμέλεια: Καραγιάννης Σπύρος Καθηγητής ΠΕ19 ΦΟΡΜΕΣ (FORM) Είναι ο κύριος
Πληροφορική Τμήμα Σχεδιασμού & Τεχνολογίας Ξύλου & Επίπλου Αντώνιος Καραγεώργος Ευανθία Τσιλιχρήστου. Μάθημα 6 ο Τεχνολογίες Διαδικτύου: HTML II
Πληροφορική Τμήμα Σχεδιασμού & Τεχνολογίας Ξύλου & Επίπλου Αντώνιος Καραγεώργος Ευανθία Τσιλιχρήστου Μάθημα 6 ο Τεχνολογίες Διαδικτύου: HTML II Εισαγωγή Εικόνων Οι φυλλομετρητές μπορούν να εμφανίσουν ένθετες
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 απαιτεί από τον Υποψήφιο να κατανοεί τις κύριες έννοιες της σχεδίασης και δημοσίευσης δικτυακών
Η Γλώσσα Προγραμματισμού του Internet HTML
Η Γλώσσα Προγραμματισμού του Internet HTML Η HTML και το Internet Κάθε σελίδα που εμφανίζεται στο Internet είναι ένα αρχείο γραμμένο με τη γλώσσα HTML (HyperText Markup Language, Γλώσσα Χαρακτηρισμού Υπερ-Κειμένου),
TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο)
TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Στέλλα Λάμπουρα Εαρινό εξάμηνο Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί
Άσκηση 5 -Δηµιουργία ιστοσελίδων µε HTML µέρος 5 ο
Άσκηση 5 -Δηµιουργία ιστοσελίδων µε HTML µέρος 5 ο HTML Φόρµες Για να δηµιουργήσουµε µια φόρµα στην οποία θα γράφουν σχόλια ή παρατηρήσεις οι επισκέπτες των σελίδων µας, χρειαζόµαστε την ετικέτα .
Σχεδιασμός και Ανάπτυξη Ιστοτόπων. ΕΠΑ.Λ. ΑΛΙΜΟΥ Τομέας Πληροφορικής Κ. Φλώρος
Σχεδιασμός και Ανάπτυξη Ιστοτόπων ΕΠΑ.Λ. ΑΛΙΜΟΥ Τομέας Πληροφορικής Κ. Φλώρος H γλώσσα HTML Άλλες Βιβλιογραφικές πηγές για HTML http://www.w3schools.com/html/ http://www.it.uom.gr/project/html2/lessons.html
Πίνακες HTML. Παναγιώτης Γαλάτης 1ο ΕΠΑΛ Ηρακλείου
Πίνακες HTML Παναγιώτης Γαλάτης 1ο ΕΠΑΛ Ηρακλείου Τι είναι Πίνακας Ένας πίνακας στοιχείων αποτελείται από γραμμές και στήλες. Το σημείο τομής μιας γραμμής και μιας στήλης ονομάζεται κελί (cell( cell).
Hyper Text Markup Language (HTML) που σημαίνει γλώσσα σήμανσης υπερκειμένου.
Hyper Text Markup Language (HTML) που σημαίνει γλώσσα σήμανσης υπερκειμένου. 1 η ΑΣΚΗΣΗ Οι HTML σελίδες είναι απλές σελίδες κειμένου και μπορούν να δημιουργηθούν από οποιοδήποτε πρόγραμμα επεξεργασίας
Αλεξιάδης Γεώργιος (ΠΕ86) -
11.1 Γενική Εισαγωγή στην HTML Τι είναι η HTML; HyperText Markup Language (Γλώσσα Χαρακτηρισμού Υπερ-Κειμένου) Βασίζεται στην SGML (Standard Generalized Markup Language) που είναι ένα πολύ μεγαλύτερο σύστημα
ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML ΣΧΟΛΙΚΟ ΒΙΒΛΙΟ ΚΕΦΑΛΑΙΟ 11 Ευάγγελος Χ. Ζιούλας (Καθηγητής Πληροφορικής)
http://www.zioulas.gr ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML ΣΧΟΛΙΚΟ ΒΙΒΛΙΟ ΚΕΦΑΛΑΙΟ 11 Ευάγγελος Χ. Ζιούλας (Καθηγητής Πληροφορικής) WEB SERVER Είναι μια εφαρμογή software που αναλαμβάνει την αποστολή μιας ιστοσελίδας σε
Διάλεξη 3η HTML intermediate
Διάλεξη 3η HTML intermediate Στέλιος Μόσχογλου Θεοδόσης Σουργκούνης Αντώνης Χρυσόπουλος I S S E L D e. c o. d e (Intelligent Systems & Software Engineering Lab) Στόχος της ώρας Επέκταση γνώσεων στην html
Τεχνολογίες Διαδικτύου - Εργαστήριο 1 ο
Τεχνολογίες Διαδικτύου - Εργαστήριο 1 ο 1. Δημιουργία μιας απλής σελίδας HTML Στον προσωπικό σας κατάλογο δημιουργήστε ένα φάκελο με όνομα HTML. Ανοίξτε το Notepad ακολουθώντας τη διαδρομή (Start All Programs
Περιεχόμενα. Λίγα λόγια από το συγγραφέα... 7
Περιεχόμενα Λίγα λόγια από το συγγραφέα... 7 Μέρος 1 1 Βασικοί όροι... 11 2 Βασική δομή κώδικα HTML... 25 3 Μορφοποίηση κειμένου... 39 4 Μορφοποίηση παραγράφων... 51 5 Εισαγωγή εικόνας... 63 6 Λίστες με
<a href="http://www.somepage.com/somepage.html">μετάβαση στο κείμενο</a>.
HTML Τα αρχεία της HTML έχουν ετικέτες (tags) που ορίζουν τη δομή και τη μορφοποίηση των ιστοσελίδων. Οι περισσότερες HTML ετικέτες τις συναντούμε ως ζεύγη τα οποία ενεργούν στα περιεχόμενα μεταξύ των
Εισαγωγή στην Επιστήμη Υπολογιστών. Εισαγωγή στην HTML. Άννα Κεφάλα Παναγιώτα Μιχόλια
Εισαγωγή στην Επιστήμη Υπολογιστών Εισαγωγή στην HTML Άννα Κεφάλα Παναγιώτα Μιχόλια Εργαστηριακές Σημειώσεις ΕΙΣΑΓΩΓΗ ΣΤΗ ΓΛΩΣΣΑ HTML ΜΕΡΟΣ Β': CSS ΚΑΙ FORMS 2 Cascading Style Sheets (CSS) Cascading Style
Προγραμματισμός Διαδικτύου
Πανεπιστήμιο Δυτικής Μακεδονίας Τμήμα Μηχανικών Πληροφορικής & Τηλεπικοινωνιών Προγραμματισμός Διαδικτύου Δρ. Μηνάς Δασυγένης mdasygenis@uowm.gr Τμήμα της παρουσίασης δημιουργήθηκε από τον κ. Παναγιώτη
Ποιες είναι οι κύριες ετικέτες που χρησιμοποιεί η HTML για την περιγραφή της συνολικής δομής μιας ιστοσελίδας;
Τι είναι η HTML; Η HTML είναι το ακρωνύμιο των λέξεων HyperText Markup Language, δηλαδή Γλώσσα Χαρακτηρισμού Υπερ Κειμένου και βασίζεται στη γλώσσα SGML, Standard Generalized Markup Language, που είναι
Νέες Τεχνολογίες στην Εκπαίδευση
Σχολή Εφαρμοσμένων Μαθηματικών και Φυσικών Επιστημών Εθνικό Μετσόβιο Πολυτεχνείο Νέες Τεχνολογίες στην Εκπαίδευση Μορφοποίηση κειμένου Στεφανέας Πέτρος Ζαμαρίας Βασίλης Άδεια Χρήσης Το παρόν εκπαιδευτικό
ΕΠΛ 012 Εισαγωγή στο Παγκόσμιο Πλέγμα Πληροφοριών
ΕΠΛ 012 Εισαγωγή στο Παγκόσμιο Πλέγμα Πληροφοριών World Wide Web (WWW) Θέματα Επεξεργασία δεδομένων στο Web Δημιουργία απλών σελίδων HTML Περιγραφή κάποιων XHTML στοιχείων (tags) Εξέλιξης του WWW Το WWW
Φόρμες. Γενικοί κανόνες. Η ετικέτα <form>
Φόρμες Οι φόρμες περιέχουν τα στοιχεία φόρμας στο οποία ένας χρήστης μπορεί να εισαγάγει δεδομένα τα οποία στη συνέχεια αποστέλλονται σε έναν εξυπηρετητή για παραπέρα επεξεργασία. Γενικοί κανόνες Για τις
Μάθηµα 3 Περ ε ισ ι σότ ό ε τ ρ ε α α γ ια ι α τ η τ η γ λώσ ώ σα α HTML
Μάθηµα 3 Περισσότερα για τη γλώσσα Περισσότερα για τη γλώσσα HTML Περιεχόµενα Επικεφαλίδες (Headings) Παράγραφοι Λίστες Μορφοποίηση κειµένου Σύνδεσµοι Επικεφαλίδες (Headings) Οι επικεφαλίδες επιτελούν
Βαρβάκειο Πρότυπο Γυμνάσιο
Παραδόσεις & εργαστηριακές ασκήσεις στην HTML Βαρβάκειο Πρότυπο Γυμνάσιο Σχολ. Χρονιά 2016-2017 Θ. Οτζάκογλου Εργαστήρι Πληροφορικής Σχολ. Έτος 2016 2017 Αν και δεν είναι μία ακόμη «γλώσσα προγραμματισμού»,
TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο)
TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Στέλλα Λάμπουρα Εαρινό εξάμηνο Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί
Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας
Πανεπιστήμιο Αιγαίου Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας Δικτυακά Πολυμέσα Ι (Β Έτος, 3ο εξ) Διάλεξη #5η: HTML: πίνακες (tables), πλαίσια (frames) Γαβαλάς Δαμιανός
Σχεδίαση ιστοσελίδων
Τ.Ε.Ι. Δυτικής Ελλάδας Σχολή Διοίκησης και Οικονομίας Τμήμα Διοίκησης Επιχειρήσεων - Πάτρα Σχεδίαση ιστοσελίδων Θεώνη Πιτουρά, Γιάννης Κουτσονίκος Σημειώσεις για το Εργαστήριο «Επιχειρηματικές δικτυακές
Κεφάλαιο 11: Εισαγωγή στην HTML. Εφαρμογές Πληροφορικής Κεφ. 11 Καραμαούνας Πολύκαρπος
Κεφάλαιο 11: Εισαγωγή στην HTML 1 11.1 Γενική εισαγωγή στην HTML Τι είναι η HTML HyperText Markup Language - Γλώσσα Χαρακτηρισμού Υπερ-Κειμένου είναι η βασική γλώσσα με την οποία πραγματοποιείται η δόμηση
Η λίστα <ol> (ordered list)
Λίστες (lists) Σε πολλά έγγραφα απαιτείται η παρουσίαση ή η καταγραφή στοιχείων σε μορφή λίστας. Για παράδειγμα, μια λίστα από ονόματα ή μια λίστα από προϊόντα. Τα στοιχεία μιας λίστας μπορεί να είναι
Βασίλειος Κοντογιάννης ΠΕ19
Ενότητα3 Επικοινωνία και Διαδίκτυο 11.1 Γενική Εισαγωγή στην HTML Τι είναι η HTML (HyperText Markup Language); Είναι μια γλώσσα σήμανσης (Markup) με την οποία πραγματοποιείται η δόμηση σελίδων του Παγκόσμιου
Πίνακες. ιδιότητες ετικέτας <tr>
Πίνακες ιδιότητες ετικέτας Ιδιότητα align στοιχίζει κατά την οριζόντια διεύθυνση τα περιεχόμενα μιας γραμμής του πίνακα αριστερά (left), δεξιά (right), στο κέντρο (center), ή με πλήρη στοίχιση (justify)
7-22 Οκτωβρίου Μία γιορτή δημιουργίας με κώδικα. Europe Code Week
7-22 Οκτωβρίου 2017 Μία γιορτή δημιουργίας με κώδικα @ #codeeu codeeu 7-22 October 2017 Europe Code Week Εισαγωγή στο Web Development HTML Λίγα λόγια... Η HTML είναι η βασική γλώσσα γραφής των ιστοσελίδων!
ΕΡΓΑΣΤΗΡΙΑΚΗ ΑΣΚΗΣΗ 1 ΜΕΛΕΤΗ ΚΑΙ ΕΦΑΡΜΟΓΗ ΔΗΜΙΟΥΡΓΙΑΣ HTML ΣΕΛΙΔΩΝ
ΕΡΓΑΣΤΗΡΙΑΚΗ ΑΣΚΗΣΗ 1 ΜΕΛΕΤΗ ΚΑΙ ΕΦΑΡΜΟΓΗ ΔΗΜΙΟΥΡΓΙΑΣ HTML ΣΕΛΙΔΩΝ 1. ΒΑΣΙΚΕΣ ΕΝΝΟΙΕΣ HTML ΣΕΛΙΔΩΝ Ας δούμε τι συμβαίνει όταν «μπαίνουμε» στο internet και επισκεπτόμαστε μια ιστοσελίδα. Για να μπούμε στο
TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο)
TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Στέλλα Λάμπουρα Εαρινό εξάμηνο Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί
11. Η γλώσσα HTML Πίνακες, Λίστες, Φόρμες
11. Η γλώσσα HTML Πίνακες, Λίστες, Φόρμες Σκοπός του Εργαστηρίου: Σκοπός της παρούσας εργαστηριακής άσκησης είναι η εμβάθυνση σε συχνά χρησιμοποιούμενες ετικέτες HTML, όπως οι πίνακες και οι λίστες, καθώς
Τι είναι η HTML; Τί είναι οι ετικέτες (tags); Πώς είναι μια ετικέτα (tag);
Τι είναι η HTML; Η HTML είναι το ακρώνυμο από το Hyper Text Markup Language που σημαίνει γλώσσα χαρακτηρισμού υπερκειμένου. Η χρήση μιας γλώσσας χαρακτηρισμού σημαίνει ότι γράφεται πρώτα το κείμενο και
ΕΠΛ 003: ΕΠΙΣΤΗΜΗ ΤΗΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΚΑΙ ΠΛΗΡΟΦΟΡΙΑΚΑ ΣΥΣΤΗΜΑΤΑ HTML
ΕΠΛ 003: ΕΠΙΣΤΗΜΗ ΤΗΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΚΑΙ ΠΛΗΡΟΦΟΡΙΑΚΑ ΣΥΣΤΗΜΑΤΑ HTML Στόχοι 1 Να δημιουργήσουμε υπερκείμενα με την Γλώσσα Επισημείωσης Υπερκειμένων (hypertext markup language, HTML). Υπολογιστικά συστήματα:
Νέες Τεχνολογίες στην Εκπαίδευση
Σχολή Εφαρμοσμένων Μαθηματικών και Φυσικών Επιστημών Εθνικό Μετσόβιο Πολυτεχνείο Νέες Τεχνολογίες στην Εκπαίδευση Εικόνα, κείμενο και εικόνα Στεφανέας Πέτρος Ζαμαρίας Βασίλης Άδεια Χρήσης Το παρόν εκπαιδευτικό
ΚΕΡΑΜΟΠΟΥΛΟΣ ΕΥΚΛΕΙΔΗΣ
ΚΕΡΑΜΟΠΟΥΛΟΣ ΕΥΚΛΕΙΔΗΣ H HTML είναι το ακρωνύμιο των λέξεων HyperText Markup Language (γλώσσα μορφοποίησης υπερκειμένου) και είναι η βασική γλώσσα δόμησης σελίδων του World Wide Web. 2 Βασικά χαρακτηριστικά
Πρακτικές συμβουλές κατά την πληκτρολόγηση ., ; :! ( ) " " Άνοιγμα και αποθήκευση εγγράφου Αρχείο, Άνοιγμα. Αρχείο / Αποθήκευση
Επεξεργαστής κειμένου Word 2003 Πρακτικές συμβουλές κατά την πληκτρολόγηση Για να αλλάξουμε παράγραφο πατάμε Enter. Για να αφήσουμε μία κενή γραμμή, πατάμε μία φορά το Enter. Για να γράψουμε την επόμενη
Άσκηση 3 -Δηµιουργία ιστοσελίδων µε HTML µέρος 3 ο
Άσκηση 3 -Δηµιουργία ιστοσελίδων µε HTML µέρος 3 ο Εικόνες στην HTML Oι εικόνες ορίζονται µε την ετικέτα . Η συγκεκριµένη ετικέτα δεν κλείνει (είναι λάθος το: ) ή µπορούµε να πούµε ότι ανοίγει
Προγραμματισμός Διαδικτύου ΕΡΓΑΣΤΗΡΙΟ. Τμ. ΔΕ- Χειμ
Προγραμματισμός Διαδικτύου ΕΡΓΑΣΤΗΡΙΟ Τμ. ΔΕ- Χειμ. 2014-15 Ετικέτες meta 2 Δε περιέχουν περιεχόμενο Έχουν 2 ιδιότητες. content: (υποχρεωτικό): Τα ίδια τα μετα-δεδομένα name: Συνήθως author, keywords και
Εξεταστέα Ύλη (Syllabus) Έκδοση 1.5
Εξεταστέα Ύλη (Syllabus) Έκδοση 1.5 Πνευματικά Δικαιώματα 2005 Ίδρυμα ECDL (ECDL Foundation www.ecdl.com) Όλα τα δικαιώματα είναι κατοχυρωμένα. Κανένα μέρος αυτού του εγγράφου δεν μπορεί να αναπαραχθεί
TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο)
TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Στέλλα Λάμπουρα Εαρινό εξάμηνο Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί
Στην τεχνολογία των CSS, οι κανόνες στυλ (style
Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #4 0 : CSS: Βασικές και προχωρημένες τεχνικές επιλογής, τα στοιχεία και , ψευδο κλάσεις και ψευδο επιλογείς Γαβαλάς Δαμιανός dgavalas@aegean.gr CSS κανόνες στυλ
Πρακτικές οδηγίες για την Επεξεργασία Κειμένου
11 Εργαλεία έκφρασης και δημιουργίας Επεξεργασία Κειμένου Α Γυμνασίου Πρακτικές οδηγίες για την Επεξεργασία Κειμένου Ένα πρόγραμμα επεξεργασίας κειμένου μας προσφέρει τη δυνατότητα να: προσθέτουμε, να
ΕΙΔΙΚΟΙ ΧΑΡΑΚΤΗΡΕΣ ΧΑΡΑΚΤΗΡΕΣ ΜΕ ΕΙΔΙΚΕΣ ΛΕΙΤΟΥΡΓΙΕΣ. ΠΙΝΑΚΑΣ ΚΩΔΙΚΩΝ ΔΙΑΦΥΓΗΣ Χαρακτήρας Κωδικός διαφυγής Ερμηνεία Συμβόλου & nbsp;
ΕΙΔΙΚΟΙ ΧΑΡΑΚΤΗΡΕΣ Υπάρχουν ειδικοί χαρακτήρες που δεν μπορούν να απεικονισθούν με απλές πληκτρολογήσεις (πατώντας ένα πλήκτρο ή ένα πλήκτρο και το Shift) αλλά μόνο με πιο περίπλοκους τρόπους (π.χ. πατώντας
ΕΡΓΑΣΤΗΡΙΟ: ΤΕΧΝΟΛΟΓΙΕΣ ΠΛΗΡΟΦΟΡΙΑΣ ΚΑΙ ΕΠΙΚΟΙΝΩΝΙΑΣ ΣΤΟΝ ΤΟΥΡΙΣΜΟ. 2o ΕΡΓΑΣΤΗΡΙΟ ΜΟΡΦΟΠΟΙΗΣΗ ΣΤΗΝ HTML
ΕΡΓΑΣΤΗΡΙΟ: ΤΕΧΝΟΛΟΓΙΕΣ ΠΛΗΡΟΦΟΡΙΑΣ ΚΑΙ ΕΠΙΚΟΙΝΩΝΙΑΣ ΣΤΟΝ ΤΟΥΡΙΣΜΟ ΠΕΡΙΕΧΟΜΕΝΟ ΜΑΘΗΜΑΤΟΣ 2o ΕΡΓΑΣΤΗΡΙΟ ΜΟΡΦΟΠΟΙΗΣΗ ΣΤΗΝ HTML 1. Μορφοποίηση κειμένου Ετικέτες στυλ 2. Ιδιότητες ετικετών 3. Λίστες 4. Υπερσυνδέσεις
Λίγα λόγια από το συγγραφέα Microsoft Word Δημιουργία νέου εγγράφου Το σύστημα Βοήθειας του Word...
ΕΝΟΤΗΤΑ 3 Περιεχόμενα Λίγα λόγια από το συγγραφέα... 7 91 Microsoft Word 2007... 9 92 Δημιουργία νέου εγγράφου... 20 93 Το σύστημα Βοήθειας του Word... 38 94 Μετακίνηση σε έγγραφο και προβολές εγγράφου...
Σχεδιασμός και Ανάπτυξη Ιστότοπων
Σχεδιασμός και Ανάπτυξη Ιστότοπων CSS: Ιδιότητες μορφοποίησης κειμένου Παρουσίαση 14 η 1 Βελώνης Γεώργιος Καθηγητής Browsers δοκιμών Οι δοκιμές έγιναν στους παρακάτω browsers και εκδόσεις τους: Google
Σχεδίαση και Ανάπτυξη Ιστότοπων. HTML Στοιχεία - Βασικές Ετικέτες Ειδικοί Χαρακτήρες Παρουσίαση 5 η. Βελώνης Γεώργιος Καθηγητής Πληροφορικής ΠΕ20
Σχεδίαση και Ανάπτυξη Ιστότοπων HTML Στοιχεία - Βασικές Ετικέτες Ειδικοί Χαρακτήρες Παρουσίαση 5 η 1 Βελώνης Γεώργιος Καθηγητής Σημασία συμβόλων HTML5 tags Obsolete tags: Μην αφήνετε αυτές τις ετικέτες
Blog στο Wordpress. Επιμέλεια: Δέγγλερη Σοφία
Blog στο Wordpress Επιμέλεια: Δέγγλερη Σοφία Περιεχόμενα Μετάβαση στο blog Σύνδεση ως διαχειριστής Πίνακας ελέγχου Εμφάνιση Ρυθμίσεις Άρθρα Σελίδες Πολυμέσα Σύνδεσμοι Widgets Μετάβαση στο blog Πληκτρολογούμε
Παρουσίαση και μορφοποίηση κειμένου
HTML [ετικέτες] Παρουσίαση και μορφοποίηση κειμένου Στην HTML σύμφωνα με τους κανόνες, κενές γραμμές και περισσότερα του ενός κενά μεταξύ λέξεων δεν λαμβάνονται υπόψη από τον φυλλομετρητή. Για αυτό το
Υπερσυνδέσεις (hyperlinks)
Υπερσυνδέσεις (hyperlinks) Οι υπερσυνδέσεις αποτελούν το δυναμικό στοιχείο σε ένα έγγραφο html. Με τις υπερσυνδέσεις είναι δυνατή, εύκολη και γρήγορη η μετάβαση ή η παραπομπή από ένα αρχείο html (πηγή)
ΕΠΕΞΕΡΓΑΣΙΑ ΚΕΙΜΕΝΟΥ. Κειμενογράφος WORD
ΕΠΕΞΕΡΓΑΣΙΑ ΚΕΙΜΕΝΟΥ Κειμενογράφος WORD ΣΚΟΠΟΣ Η ανάπτυξη δεξιοτήτων επεξεργασίας κειμένου ΠΡΟΤΑΣΕΙΣ ΚΑΙ ΡΥΘΜΙΣΕΙΣ Άνω περιθώριο (top margin) : 2.49cm Κάτω περιθώριο (bottom margin) :5.99cm Αριστερό περιθώριο
Προγραμματισμός Διαδικτύου
Πανεπιστήμιο Δυτικής Μακεδονίας Τμήμα Μηχανικών Πληροφορικής & Τηλεπικοινωνιών Προγραμματισμός Διαδικτύου Δρ. Μηνάς Δασυγένης mdasygenis@uowm.gr Τμήμα της παρουσίασης δημιουργήθηκε από τον κ. Παναγιώτη
Εισαγωγή στην πληροφορική
Τμήμα Μηχανικών Πληροφορικής & Τηλεπικοινωνιών Εισαγωγή στην πληροφορική Ενότητα 5: Εισαγωγή στην HTML (Μέρος Α) Αγγελίδης Παντελής Τμήμα Μηχανικών Πληροφορικής και Τηλεπικοινωνιών Άδειες Χρήσης Το παρόν
ΔΗ Μ Ι Ο ΥΡ Γ Ι Α W I K I με τ η χρήση τ η ς υπ ηρεσίας h t t p : /www.wik id ot.com /
ΔΗ Μ Ι Ο ΥΡ Γ Ι Α W I K I με τ η χρήση τ η ς υπ ηρεσίας h t t p : /www.wik id ot.com / 1. Τι είναι το wikidot Το wikidot είναι ένας δικτυακός τόπος στον οποίο κάθε χρήστης έχει το δικαίωμα να δημιουργήσει
Εργαλεία ανάπτυξης εφαρμογών internet Ι
IEK ΟΑΕΔ ΚΑΛΑΜΑΤΑΣ ΤΕΧΝΙΚΟΣ ΕΦΑΡΜΟΓΩΝ ΠΛΗΟΦΟΡΙΚΗΣ Εργαλεία ανάπτυξης εφαρμογών internet Ι HTML Διδάσκουσα: Κανελλοπούλου Χριστίνα ΠΕ19 Πληροφορικής HTML (HyperText Markup Language) Η γλώσσα που χρησιμοποιείται
Περιεχόμενα. Γαβαλάς Δαμιανός
Δικτυακά Πολυμέσα ΙΙ Διάλεξη #5 η : Τυπογραφία στο web Γαβαλάς Δαμιανός dgavalas@aegean.gr Περιεχόμενα Κατανόηση αρχών σχεδιασμού με γραμματοσειρές Κατανόηση των μονάδων μέτρησης που χρησιμοποιούνται στα
Πίνακες. ετικέτα <table>
Πίνακες ετικέτα σύνταξη κελί 1 κελί 2 κελί 3 κελί 4 : πίνακας : γραμμή : κελί Ιδιότητα border border : ορίζει
Εισαγωγή στην HTML (1)
Εισαγωγή στην HTML (1) Πανεπιστήμιο Πελοποννήσου Τμήμα Επιστήμης & Τεχνολογίας Τηλεπικοινωνιών Ευάγγελος Α. Κοσμάτος HTML HyperText Mark-up Language Καθορίζει τον τρόπο που ο browser εμφανίζει τα διάφορα
HTML... 1. Εισαγωγή στην HTML και τα CSS
HTML...... 1 Εισαγωγή στην HTML και τα CSS HTML...... 2 HTML. H HTML (HYPERTEXT MARKUP LANGUAGE), είναι µία γλώσσα η οποία «λέει» στον υπολογιστή πως θα πρέπει να εµφανίσει µία ιστοσελίδα. Τα αρχεία στα
Σταύρος Καουκάκης Ευτύχιος Βαβουράκης
ΠΑΝΕΠΙΣΤΗΜΙΟ ΚΡΗΤΗΣ 1 ο ΣΧΟΛΕΙΟ ΚΩΔΙΚΑ «Βασικά Θέματα Προγραμματισμού στην Ανάπτυξη Δυναμικών Διαδικτυακών Εφαρμογών» (Part 1) Σταύρος Καουκάκης Ευτύχιος Βαβουράκης 1 Λίγα Λόγια για το Σχολείο Μονάδες
Επεξεργασία κειμένου: Word 2003
Περιεχόμενα Λίγα λόγια από το συγγραφέα...7 Κεφάλαιο 1: Ρυθμίσεις γραμμών εργαλείων και μενού...9 Κεφάλαιο 2: Διαχείριση παραθύρων και προβολές...26 Κεφάλαιο 3: Εύρεση, αντικατάσταση, και μετάβαση σε συγκεκριμένο
TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο)
TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Στέλλα Λάμπουρα Εαρινό εξάμηνο Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί
Cascading Style Sheets (CSS)
Cascading Style Sheets (CSS) Τα Cascading Style Sheets προσφέρουν έναν εύκολο τρόπο για να ορίσουμε τη μορφοποίηση που επιθυμούμε να έχουν οι σελίδες μία τοποθεσίας του Παγκόσμιου Ιστού που δημιουργούμε.
Οδηγίες για προσθήκη Web Frames Tools to the Quick Access Bar σε μεταγενέστερη έκδοση του Word
Οδηγίες για προσθήκη Web Frames Tools to the Quick Access Bar σε μεταγενέστερη έκδοση του Word Επειδή οι μεταγενέστερες εκδόσεις του Word δεν περιλαμβάνουν στο μενού τη δυνατότητα δημιουργίας πολλαπλών
ΕΙΔΙΚΟΤΗΤΑ: ΤΕΧΝΙΚΟΣ ΕΦΑΡΜΟΓΩΝ ΠΛΗΡΟΦΟΡΙΚΗΣ ΜΑΘΗΜΑ: ΕΙΣΑΓΩΓΗ ΣΤΗΝ ΠΛΗΡΟΦΟΡΙΚΗ
ΕΙΔΙΚΟΤΗΤΑ: ΤΕΧΝΙΚΟΣ ΕΦΑΡΜΟΓΩΝ ΠΛΗΡΟΦΟΡΙΚΗΣ ΜΑΘΗΜΑ: ΕΙΣΑΓΩΓΗ ΣΤΗΝ ΠΛΗΡΟΦΟΡΙΚΗ (Σημειώσεις Word) ΕΚΠΑΙΔΕΥΤΕΣ: ΒΑΡΕΛΑΣ ΙΩΑΝΝΗΣ, ΠΟΖΟΥΚΙΔΗΣ ΚΩΝΣΤΑΝΤΙΝΟΣ MICROSOFT WORD (ΕΚΠΑΙΔΕΥΤΙΚΕΣ ΣΗΜΕΙΩΣΕΙΣ) ΠΕΡΙΕΧΟΜΕΝΑ
ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML. Decode, ISSEL. Θεοδόσης Σουργκούνης Αντώνης Χρυσόπουλος Στέλιος Μόσχογλου
ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML Θεοδόσης Σουργκούνης Αντώνης Χρυσόπουλος Στέλιος Μόσχογλου Decode, ISSEL Τμήμα Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών, Αριστοτέλειο Πανεπιστήμιο Θεσσαλονίκης Στόχος της ώρας
Επεξεργαστής Κειμένου: (Microsoft Word)
Επεξεργαστής Κειμένου: (Microsoft Word) Στο περιβάλλον εργασίας του επεξεργαστή κειμένου Microsoft Word εκτελούμε τις παρακάτω λειτουργίες: 1) Δημιουργία Νέου Εγγράφου: Η Δημιουργία ενός Νέου Εγγράφου
HTML 2. Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Π. Αγγελάτος Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών
HTML 2 Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Π. Αγγελάτος Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών Άδεια Χρήσης Το παρόν εκπαιδευτικό υλικό υπόκειται σε άδειες χρήσης
POWERPOINT 2003. Είναι το δημοφιλέστερο πρόγραμμα παρουσιάσεων.
POWERPOINT 2003 1. Τι είναι το PowerPoint (ppt)? Είναι το δημοφιλέστερο πρόγραμμα παρουσιάσεων. 2. Τι δυνατότητες έχει? Δημιουργία παρουσίασης. Μορφοποίηση παρουσίασης. Δημιουργία γραφικών. Δημιουργία
Περιεχόμενα. Εισαγωγή στο Word 2003...9. Βασικές μορφοποιήσεις κειμένων... 41. Κεφάλαιο 1. Κεφάλαιο 2
Περιεχόμενα Κεφάλαιο 1 Εισαγωγή στο Word 2003...9 Η οθόνη του Word... 9 Δημιουργία νέου εγγράφου... 14 Προσθήκη και διαγραφή κειμένου... 17 Πρώτα επιλογή, μετά εργασία... 18 Εύρεση και αντικατάσταση κειμένου...
ΕΡΓΑΣΤΗΡΙΑΚΗ ΑΣΚΗΣΗ 2 ΜΕΛΕΤΗ ΚΑΙ ΕΦΑΡΜΟΓΗ ΔΗΜΙΟΥΡΓΙΑΣ HTML ΣΕΛΙΔΩΝ ΣΥΝΔΕΣΜΟΙ
ΕΡΓΑΣΤΗΡΙΑΚΗ ΑΣΚΗΣΗ 2 ΜΕΛΕΤΗ ΚΑΙ ΕΦΑΡΜΟΓΗ ΔΗΜΙΟΥΡΓΙΑΣ HTML ΣΕΛΙΔΩΝ ΣΥΝΔΕΣΜΟΙ Στην άσκηση αυτή θα εμπλουτίσουμε την ιστοσελίδα που φτιάξαμε στην προηγούμενη άκηση με πίνακες, συνδέσμους και γραφικά. 1.
Νέες Τεχνολογίες στην Εκπαίδευση
Σχολή Εφαρμοσμένων Μαθηματικών και Φυσικών Επιστημών Εθνικό Μετσόβιο Πολυτεχνείο Νέες Τεχνολογίες στην Εκπαίδευση Επάλληλα φύλλα στυλ (CSS): Μια εισαγωγή Στεφανέας Πέτρος Ζαμαρίας Βασίλης Άδεια Χρήσης
Βασίλειος Κοντογιάννης ΠΕ19
Ενότητα3 Επικοινωνία και Διαδίκτυο 11.1 Γενική Εισαγωγή στην HTML Τι είναι η HTML (HyperText Markup Language); Είναι μια γλώσσα σήμανσης (Markup) με την οποία πραγματοποιείται η δόμηση σελίδων του Παγκόσμιου
Εισαγωγή εικόνων. ετικέτα <img>
Εισαγωγή εικόνων ετικέτα σύνταξη η ιδιότητα src καθορίζει ποια εικόνα θα εισαχθεί στη σελίδα η τιμή url είναι η πλήρης ή σχετική διαδρομή της εικόνας Παράδειγμα 1
Εισαγωγή στο Word. Κεντρική οθόνη του Word
Εισαγωγή στο Word Το Word είναι το δημοφιλέστερο πρόγραμμα επεξεργασίας κειμένου. Τα κύρια χαρακτηριστικά του είναι η εύκολη και γρήγορη δημιουργία και επεξεργασία εγγράφων. Κεντρική οθόνη του Word Το
ΕΡΓΑΣΤΗΡΙΟ: ΤΕΧΝΟΛΟΓΙΕΣ ΠΛΗΡΟΦΟΡΙΑΣ ΚΑΙ ΕΠΙΚΟΙΝΩΝΙΑΣ ΣΤΟΝ ΤΟΥΡΙΣΜΟ. 1o ΕΡΓΑΣΤΗΡΙΟ ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML
ΕΡΓΑΣΤΗΡΙΟ: ΤΕΧΝΟΛΟΓΙΕΣ ΠΛΗΡΟΦΟΡΙΑΣ ΚΑΙ ΕΠΙΚΟΙΝΩΝΙΑΣ ΣΤΟΝ ΤΟΥΡΙΣΜΟ ΠΕΡΙΕΧΟΜΕΝΟ ΜΑΘΗΜΑΤΟΣ 1. Ετικέτες (tags) 1o ΕΡΓΑΣΤΗΡΙΟ ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML 2. Δομή εγγράφου (αρχείου html) 3. Δημιουργία αρχείου html 4.
2. Επιλέξτε την σωστή ετικέτα HTML που προσφέρει το μεγαλύτερο φόντο κειμένου. <head> <heading> <h6> <h1>
ΤΜΗΜΑ ΗΛΕΚΤΡΟΝΙΚΗΣ Τομέας Υπολογιστικών Συστημάτων και Ελέγχου Τεχνολογίες Πολυμέσων - Εφαρμογές Δρ. Β. ΒΑΛΑΜΟΝΤΕΣ Ε-mail: vala@teiath.gr Να απαντήσετε στις παρακάτω ερωτήσεις. 1. Τι σημαίνουν τα αρχικά
Περιεχόμενα. Μέρος 1: Βασικές έννοιες Πληροφορικής και επικοινωνιών Μέρος 2: Χρήση υπολογιστή και διαχείριση αρχείων Πρόλογος...
Περιεχόμενα Πρόλογος...11 Μέρος 1: Βασικές έννοιες Πληροφορικής και επικοινωνιών... 13 1.1 Εισαγωγή στους υπολογιστές... 15 1.2 Μονάδες μέτρησης... 27 1.3 Οι βασικές λειτουργίες ενός ηλεκτρονικού υπολογιστή...
Εισαγωγή/ απομάκρυνση συμβόλων παραγράφου
3.3.2.1 Εισαγωγή/ απομάκρυνση συμβόλων παραγράφου Υπάρχει μία μικρή διαφορά μεταξύ της λέξης παράγραφος, όπως τη χρησιμοποιούμε εδώ και όπως κοινώς χρησιμοποιείται. Τεχνικά, μία παράγραφος είναι ένα μπλοκ,