Βασίλειος Κοντογιάννης ΠΕ19
|
|
|
- Έρις Μαγγίνας
- 6 χρόνια πριν
- Προβολές:
Transcript
1
2 Ενότητα3 Επικοινωνία και Διαδίκτυο
3 11.1 Γενική Εισαγωγή στην HTML Τι είναι η HTML (HyperText Markup Language); Είναι μια γλώσσα σήμανσης (Markup) με την οποία πραγματοποιείται η δόμηση σελίδων του Παγκόσμιου Ιστού. Με αυτή τη γλώσσα ένα απλό κείμενο γράφεται με ειδικό τρόπο με τη χρήση ειδικών ετικετών (tags) συνιστώντας έτσι ένα υπερκείμενο ιστοσελίδα το οποίο συνήθως περιέχει συνδέσμους (links) προς άλλα υπερκείμενα. Έτσι η γνώση πλέον στο Διαδίκτυο προσπελάζεται όχι σειριακά αλλά με τον τρόπο που λειτουργεί ο ανθρώπινος εγκέφαλος. Ο browser ανακτά τον κώδικα HTML των ιστοσελίδων, διαβάζει - διερμηνεύει τις ετικέτες και παρουσιάζει μορφοποιημένη την ιστοσελίδα στην οθόνη μας. Η HTML από το 1990 που δημιουργήθηκε μαζί με το πρωτόκολλο HTTP για τη μεταφορά των ιστοσελίδων (Tim Berners Lee) έχει περάσει από τις εκδόσεις HTML, HTML+, HTML2, HTML3.2, HTML4.0, HTML5. Ποια είναι η βασική δομή μιας HTML σελίδας; ανοίγει ετικέτα κλείνει
4 11.1 Tutorial HTML5 (1/ ) H HTML5 είναι μια σημαντικά βελτιωμένη έκδοση σε σχέση με τις HTML4.01 και XHTML1. Για παράδειγμα διαθέτει νέες ετικέτες audio και video για την υποστήριξη πολυμέσων κάθε μορφής. ΒΑΣΙΚΟΙ ΟΡΟΙ tag: ό,τι περικλείεται σε brackets < > συμπεριλαμβανομένων κι αυτών. Παράδειγμα: <title> </body> Ένα tag που το όνομα του ξεκινάει με / είναι ένα closing tag, ενώ κάθε άλλο καλείται opening tag. element:εμπεριέχει ένα opening tag, κάποιο περιεχόμενο(content) και το αντίστοιχο closing tag. Παράδειγμα: <title> Example Document </title> (αυτό ονομάζεται title element) Υπάρχουν κάποια elements που έχουν μόνο opening tag: Παράδειγμα: <br> (αλλαγή γραμμής) attribute: αν υπάρχει τοποθετείται στο opening tag μετά το όνομα αυτού. Ξεκινάει με το attribute name, ακολουθείται από το = κι έπειτα από την τιμή του attribute μέσα σε " " Παράδειγμα: <h1 id="main"> Main section </h1>
5 11.1 Tutorial HTML5 (2/ ) Ακολουθεί ένα παράδειγμα εγγράφου html και επεξήγηση βασικών elements: Για να είναι ευανάγνωστος ο κώδικας το opening και closing tag των elements που εκτείνονται σε περισσότερες από μία γραμμές είναι στοιχισμένα. <html> το ριζικό element του εγγράφου όπου εμπεριέχεται και όλος ο κώδικας του. Μέσα σε αυτό υπάρχουν 2 ενότητες head section και body section που καθορίζονται με τα αντίστοιχα elements Το head section περιέχει βασικές πληροφορίες για το έγγραφο. Στο παράδειγμά μας περιέχει ένα <meta...> element με την attribute charset που έχει τιμή utf-8 και προσδιορίζει πώς θα αποκωδικοποιεί ο φυλλομετρητής τους χαρακτήρες του εγγράφου. Επίσης περιέχει ένα <title> element του οποίου το περιεχόμενο καθορίζει τον τίτλο της καρτέλας όπου ανοίγεται το αρχείο στο φυλλομετρητή. Το body section περιέχει το κυρίως περιεχόμενο του html εγγράφου. Όλες τις πληροφορίες που θα εμφανιστούν στο φυλλομετρητή. Εδώ ένα <p> element, μια παράγραφο με κείμενο
6 11.1 Tutorial HTML5 (3/ ) Χρήση κειμένου σε html έγγραφα <p> element χρησιμοποιείται για τον ορισμό μιας παραγράφου. Μεταξύ 2 παραγράφων υπάρχει εξ' ορισμού μεγαλύτερο διάστημα απ' ότι μεταξύ 2 γραμμών. Το κείμενο των παραγράφων προσαρμόζεται στο μέγεθος του παραθύρου του φυλλομετρητή κατά την εμφάνιση του εγγράφου και αν χρειάζεται εμφανίζεται σε επόμενες γραμμές Χαρακτήρες αλλαγής γραμμής και κενά αγνοούνται. Έτσι ο κώδικας στα δεξιά δίνει το ίδιο αποτέλεσμα με τον κώδικα στα αριστερά.
7 11.1 Tutorial HTML5 (4/ ) Χρήση κειμένου σε html έγγραφα <br> element. Έχει μόνο opening tag και χρησιμοποιείται για την αλλαγή γραμμής χωρίς ορισμό άλλης παραγράφου. Ειδικός χαρακτήρας που εισάγει ένα κενό σε κείμενο <h1>...</h1> element. Ορίζει την επικεφαλίδα με το πιο μεγάλο μέγέθος. Επικεφαλίδες ορίζονται μέχρι επίπεδο <h6>
8 11.1 Tutorial HTML5 (5/ ) Μορφοποίηση κειμένου σε html έγγραφα. Τι πρέπει να κάνουμε αν θέλουμε να στοιχίσουμε τις επικεφαλίδες ή να αλλάξουμε τη γραμματοσειρά ή το μέγεθος ή το χρώμα τους; Ο καλύτερος τρόπος είναι αυτό να γίνει με την τεχνολογία Cascading StyleSheets Η τεχνολογία CSS είναι πολύ σημαντική στη σχεδίαση ιστοσελίδων διότι χρησιμοποιείται για τη δημιουργία style και τη μορφοποίηση έτσι κειμένου όσον αφορά τη στοίχιση, τη γραμματοσειρά, το μέγεθος, το χρώμα. Με αυτήν μπορεί να οριστεί background color ή image, να στοιχιθούν αντικείμενα ή να σχεδιαστούν περιγράμματα γύρω από αντικείμενα. Οι κανόνες μορφοποίησης συχνότερα βρίσκονται σε εξωτερικό.css αρχείο, αλλά μπορούν να ενσωματώνονται και στο ίδιο το.html αρχείο μέσα σε opening tags
9 11.1 Tutorial HTML5 (6/ ) Εισαγωγή εικόνων σε ιστοσελίδες <img...>: element χωρίς closing tag για την εισαγωγή εικόνας σε html έγγραφο. Χρειάζεται ο προσδιορισμός ορισμένων attributes όπως: src="pathtofilename" (απαραίτητο) alt="alternatetext" (προαιρετικό, εμφανίζεται όταν δεν μπορεί να εμφανιστεί η εικόνα) title="titletext" (προαιρετικό, εμφανίζεται ως tooltip όταν το ποντίκι περάσει από πάνω της) width="nopx" (προαιρετικό, φαίνεται η εικόνα με πλάτος nopx pixels) height="nopx" (προαιρετικό, φαίνεται η εικόνα με ύψος nopx pixels) border="nopx" (προαιρετικό, η εικόνα περιβάλλεται από περίγραμμα πάχους nopx pixels) src="pathtofilename" Η τιμή pathtofilename μπορεί να υποδηλώνει σχετική διεύθυνση ή απόλυτη διεύθυνση. Παραδείγματα σχετικών διευθύνσεων: "smily.png", το αρχείο βρίσκεται στον ίδιο φάκελο με την ιστοσελίδα "images/smily.png", το αρχείο βρίσκεται στον υποφάκελο images που βρίσκεται στον ίδιο φάκελο με την ιστοσελίδα "../smily.png", το αρχείο βρίσκεται στον προηγούμενο φάκελο από αυτόν της ιστοσελίδας Παράδειγμα απόλυτης διεύθυνσης: "
10 11.1 Tutorial HTML5 (6/ ) Εισαγωγή εικόνων σε ιστοσελίδες
11 11.1 Tutorial HTML5 (6/ ) Εισαγωγή συνδέσμων σε ιστοσελίδες προς άλλες ιστοσελίδες. <a...> content </a>: anchor element για την εισαγωγή υπερσυνδέσμου. Εδώ χρειάζεται ο προσδιορισμός του attribute href href="pathtowebpage" Η τιμή pathtowebpage μπορεί να υποδηλώνει σχετική ή απόλυτη διεύθυνση ιστοσελίδας. Ότι αναγράφεται στο content αυτό θα είναι η ενεργή λέξη ή φράση που θα μπορεί να μας οδηγήσει στην ιστοσελίδα προορισμού. Μπορεί όμως αυτό να είναι και μια εικόνα!!!
12 11.2 HTML5 Πρόκειται για την πιο εξελιγμένη μορφή της HTML που χρησιμοποιείται για τη δημιουργία web applications. Σε συνδυασμό με τεχνολογίες όπως η Javascript οι φυλλομετρητές μπορούν να εκτελέσουν εφαρμογές που είναι εφάμιλλες των εφαρμογών που εγκαθίστανται στον προσωπικό υπολογιστή. Ακόμη, ένα ενδιαφέρον χαρακτηριστικό είναι η αξιοποίηση της HTML5 σε εφαρμογές που χρησιμοποιούνται σε φορητές συσκευές, όπως ταμπλέτες και κινητά τηλέφωνα. Με αξιοποίηση της τεχνολογίας CSS οι εφαρμογές αυτές μπορούν να προσαρμόζονται στις διαστάσεις της οθόνης και να εμφανίζουν με προσαρμοσμένο τρόπο το περιεχόμενο της εφαρμογής (responsive web design). Επίσης προσφέρει: Νέες ετικέτες για σημασιολογικό διαχωρισμό των μερών του εγγράφου (header, section, article, nav) Νέες ετικέτες για εισαγωγή ήχου (audio), βίντεο (video) Νέες δυνατότητες σχεδίασης (canvas), μεταφοράς απόθεσης (drag&drop) Εμπλουτισμένα στοιχεία για φόρμες Ενσωματωμένη διαχείριση διανυσματικών γραφικών.svg
13 11.1 Tutorial HTML5 (7/ ) Εισαγωγή audio σε ιστοσελίδες. Νέα δυνατότητα της HTML5. Δεν υποστηρίζεται από παλιές εκδόσεις των φυλλομετρητών. Επίσης επειδή δεν υποστηρίζονται όλοι οι τύποι αρχείων από όλους τους φυλλομετρητές καλύτερα να χρησιμοποιείται η σύνθετη μορφή του element η οποία παρέχει εναλλακτικούς τύπους στον browser να αναπαράξει. Σημειωτέον ότι ο.ogg τύπος αναπαράγεται από τους δημοφιλείς chrome και mozilla. Απαιτείται ή το attribute controls Απλή μορφή: (με το οποίο φαίνονται τα κουμπιά <audio src="mysound.mp3"></audio> χειρισμού) ή το autoplay ώστε να παίξει ο ήχος. Σύνθετη μορφή: Το attribute loop είναι για να παίζει <audio controls autoplay loop> ο ήχος κατ' επανάληψη. <source src="mysound.ogg" type="audio/ogg"> To attribute autoplay είναι για να <source src="mysound.mp3" type="audio/mpeg"> ξεκινάει ο ήχος αυτόματα. Δεν υποστηρίζεται ο τύπος αρχείου... </audio>
14 11.1 Tutorial HTML5 (7/ ) Εισαγωγή video σε ιστοσελίδες. Νέα δυνατότητα της HTML5. Δεν υποστηρίζεται από παλιές εκδόσεις των φυλλομετρητών. Επίσης επειδή δεν υποστηρίζονται όλοι οι τύποι αρχείων από όλους τους φυλλομετρητές καλύτερα να χρησιμοποιείται η σύνθετη μορφή του element η οποία παρέχει εναλλακτικούς τύπους στον browser να αναπαράξει. Σημειωτέον ότι ο.ogg τύπος αναπαράγεται από τους δημοφιλείς chrome και mozilla. Ο.mp4 αναπαράγεται από Chrome, IE και Safari. Απλή μορφή: Απαιτείται ή το attribute controls <video src="myvideo.mp4"></video> (με το οποίο φαίνονται τα κουμπιά χειρισμού) ή το autoplay ώστε να Σύνθετη μορφή: παίξει το βίντεο. <video controls autoplay loop> Το attribute loop είναι για να παίζει <source src="myvideo.ogg" type="video/ogg"> το βίντεο κατ' επανάληψη. <source src="myvideo.mp4" type="video/mp4"> To attribute autoplay είναι για να Δεν υποστηρίζεται ο τύπος αρχείου... ξεκινάει το βίντεο αυτόματα. </video>
15 11.1 Tutorial HTML5 (7/ ) Νέα tags και elements στην HTML5 για το σημασιολογικό διαχωρισμό των μερών και τη δημιουργία ενός καλά δομημένου html εγγράφου φαίνονται παρακάτω: Όλα τα συγκεκριμένα elements μπορούν να περιέχουν άλλα elements μέσα τους. Συνήθως η δομή του εγγράφου είναι ως εξής: Μέσα στο <body> ξεκινάμε με το <header> (περιοχή τίτλων) ακολουθεί το <nav> (η περιοχή πλοήγησης), το <main> (κυρίως σώμα), μέσα στο main βρίσκονται τα <section> (ενότητες) και μέσα στα <section> βρίσκονται τα <article> (άρθρα). Τέλος ακολουθεί το <footer> που είναι το υποσέλιδο του εγγράφου. <header>, εδώ γκρουπάρονται elements με εισαγωγικό ρόλο για το έγγραφο <nav>, με αυτό δημιουργείται μια περιοχή με τα βασικά links της ιστοσελίδας μας <main>, εδώ είναι το κυρίως σώμα της ιστοσελίδας <section>, με αυτό δημιουργούνται ενότητες στο κυρίως μέρος της ιστοσελίδας μας <article>, σε αυτό αναφέρεται μια διακριτή πληροφορία μιας ενότητας <footer>, εδώ γκρουπάρονται elements κυρίως σχετικά με επικοινωνία, copyright κλπ <aside>, χρησιμοποιείται για περιεχόμενο ξεχωριστό από αυτό του εγγράφου αλλά σχετιζόμενο. Χρησιμοποιείται για τη δημιουργία sidebar.
16 11.1 Tutorial HTML5 (9/ )
17 11.3 Ενσωμάτωση κώδικα Πολλές σελίδες παρέχουν τρόπους ενσωμάτωσης περιεχομένου τους σε άλλες ιστοσελίδες (π.χ. youtube, google drive, weebly κ.α). Η κυριότερη ετικέτα που χρησιμοποιείται για ενσωμάτωση περιεχομένου είναι η iframe, η οποία υποστηρίζει μεταξύ των άλλων ιδιότητες καθορισμού μεγέθους και η οποία λειτουργεί ως ένα κομμάτι ξεχωριστής πλοήγησης μέσα σε μια ιστοσελίδα. Δεν απαιτείται καμία γνώση, για να μπορέσει κανείς να ενσωματώσει περιεχόμενο. Αρκεί να γίνει αντιγραφή του κώδικα ενσωμάτωσης και επικόλληση στο έγγραφο HTML της ιστοσελίδας μας. Άσκηση1: Ενσωματώστε σε μία από τις προηγούμενες ασκήσεις που έχετε φτιάξει, ένα video από το youtube. Άσκηση2: Ενσωματώστε σε μία από τις προηγούμενες ασκήσεις που έχετε φτιάξει, ένα quiz από το googledrive.
18 11.4 Καθορίζοντας τη μορφή CSS (1/2) Γλώσσα σήμανσης για τον καθορισμό της εμφάνισης εγγράφων HTML. Περιλαμβάνει κανόνες διάταξης και μορφοποίησης των στοιχείων ενός εγγράφου HTML, ανεξάρτητους του περιεχομένου και συνήθως σε ξεχωριστά αρχεία με επέκταση.css Η σύνδεση ενός html εγγράφου με ένα αρχείο.css γίνεται με το element <link...> που τοποθετείται ως περιεχόμενο στο <head> element του html εγγράφου: <head>... <link rel="stylesheet" type="text/css" href="style.css"> </head> Εδώ το αρχείο style.css πρέπει να βρίσκεται στον ίδιο φάκελο με το html έγγραφο
19 11.4 Καθορίζοντας τη μορφή CSS (1/2) Άσκηση με.css αρχείο Θέλουμε η ιστοσελίδα με τα "ΝΕΑ" που φτιάξαμε πριν 3 διαφάνειες, και η οποία εμφανίζεται όπως την εικόνα στα αριστερά, να εμφανίζεται τελικά όπως την εικόνα στα δεξιά:
20 11.4 Καθορίζοντας τη μορφή CSS (2/2) Πληκτρολογήστε τον διπλανό κώδικα σε ένα επεξεργαστή κειμένου και αποθηκεύστε το ως style.css. Στη συνέχεια συνδέστε τον κώδικα της ιστοσελίδας "ΝΕΑ" που φτιάξατε σε προηγούμενη άσκηση με το συγκεκριμένο αρχείο μορφοποίησης.
21 Συγκεντρωτικά Βασικές ετικέτες της HTML <a> Δημιουργεί σύνδεσμο σε τοποθεσία δικτύου ή σε αρχείο π.χ. <a href=" <head> Περιοχή όπου ορίζονται γενικές πληροφορίες για την ιστοσελίδα όπως <title>, <script>, <link> ή οδηγίες προς τον browser <b> Ορίζει έντονα γράμματα <hr> Τραβάει μια οριζόντια γραμμή <html> Ορίζει στον browser ότι πρόκειται για HTML <embed> Ενσωμάτωση πολυμεσικών στοιχείων π.χ. <embed src="test.mov" width="90" height= 90 > <big> ή <small> Κάνει το κείμενο μεγαλύτερο - μικρότερο <img> Εισάγει εικόνα π.χ. <img src= myimage.jpg width= 100 height= 80 alt= η εικόνα μου <blink> Κάνει το κείμεyνο να αναβοσβήνει <p> Ορίζει παράγραφο και αλλάζει γραμμή <body> Ορίζει την περιοχή κυρίως περιεχομέν <style> Ορίζεται στην περιοχή <head> για το layout της ιστοσελίδας. π.χ. <style type="text/css"> h1{text-align: center; font-style: italic} p{color:#ff0000} </style> <br> Αλλάζει γραμμή <sub>,<sup> Ορίζει δείκτη, εκθέτη <center> Στοιχίζει στο κέντρο <audio> <audio controls><source src="mysound.mp3"/></audio> <font> Ορίζει ιδιότητες γραμματοσειράς π.χ. <font face="arial">font</font>, <font color="#0000ff">color</font>, <font size="4">size</font> <table>, <tr>, <td> Φτιάχνει πίνακα στην ιστοσελίδα π.χ. <table> <tr> <td>κελί11</td> <td>κελί12</td> </tr></table> <h1> -<h6> Ορίζει επικεφαλίδες κειμένου <video> (HTML5) (HTML5) Εισάγει ένα video π.χ. <video src= myvideo.mp4 width= 320 height= 240 controls</video> Βασίλειος Κοντογιάννης ΠΕ19
22 11.1 Γενική Εισαγωγή στην HTML εξοικείωση με συγγραφή Άσκηση: Γράψτε στον επεξεργαστή κειμένου τον παρακάτω HTML κώδικα και αποθηκεύστε με όνομα myfirst.html Δοκιμάστε να εφαρμόσετε ένα άλλο στυλ στην ιστοσελίδα που φτιάξατε γράφοντας στην περιοχή <head> το παρακάτω: <link rel="stylesheet" type="text/css" href = "mystyle.css">
23 Είστε τυχεροί! Με τα εργαλεία που υπάρχουν πλέον δεν χρειάζεται να γράφετε κώδικα HTML και.css
Βασίλειος Κοντογιάννης ΠΕ19
Ενότητα3 Επικοινωνία και Διαδίκτυο 11.1 Γενική Εισαγωγή στην HTML Τι είναι η HTML (HyperText Markup Language); Είναι μια γλώσσα σήμανσης (Markup) με την οποία πραγματοποιείται η δόμηση σελίδων του Παγκόσμιου
Ποιες είναι οι κύριες ετικέτες που χρησιμοποιεί η HTML για την περιγραφή της συνολικής δομής μιας ιστοσελίδας;
Τι είναι η HTML; Η HTML είναι το ακρωνύμιο των λέξεων HyperText Markup Language, δηλαδή Γλώσσα Χαρακτηρισμού Υπερ Κειμένου και βασίζεται στη γλώσσα SGML, Standard Generalized Markup Language, που είναι
Κεφάλαιο 11: Εισαγωγή στην HTML. Εφαρμογές Πληροφορικής Κεφ. 11 Καραμαούνας Πολύκαρπος
Κεφάλαιο 11: Εισαγωγή στην HTML 1 11.1 Γενική εισαγωγή στην HTML Τι είναι η HTML HyperText Markup Language - Γλώσσα Χαρακτηρισμού Υπερ-Κειμένου είναι η βασική γλώσσα με την οποία πραγματοποιείται η δόμηση
Αλεξιάδης Γεώργιος (ΠΕ86) -
11.1 Γενική Εισαγωγή στην HTML Τι είναι η HTML; HyperText Markup Language (Γλώσσα Χαρακτηρισμού Υπερ-Κειμένου) Βασίζεται στην SGML (Standard Generalized Markup Language) που είναι ένα πολύ μεγαλύτερο σύστημα
Η γλώσσα HTML. Επιμέλεια: Δέγγλερη Σοφία
Η γλώσσα HTML Επιμέλεια: Δέγγλερη Σοφία Υπερκείμενο Το δομικό χαρακτηριστικό του Παγκόσμιου Ιστού Ένα αρχείο Απλό κείμενο και υπερσύνδεσμοι Υπερσύνδεσμος Μετάβαση σε διάφορα άλλα έγγραφα Αποτελείται από
<a href="http://www.somepage.com/somepage.html">μετάβαση στο κείμενο</a>.
HTML Τα αρχεία της HTML έχουν ετικέτες (tags) που ορίζουν τη δομή και τη μορφοποίηση των ιστοσελίδων. Οι περισσότερες HTML ετικέτες τις συναντούμε ως ζεύγη τα οποία ενεργούν στα περιεχόμενα μεταξύ των
Εισαγωγη στην html. Η δομή μιας ιστοσελίδας (αρχείο html) Η βασική δομή ενός αρχείου html είναι η εξής: <html> <head>
Εισαγωγη στην html Ο παγκόσμιος ιστός (αγγ.: World Wide Web ή www) είναι η πιο δημοφιλής υπηρεσία που μας παρέχει το Διαδίκτυο (Internet) και είναι ένα σύστημα διασυνδεδεμένων πληροφοριών (κειμένου, εικόνας,
Εισαγωγή στον Παγκόσμιο ιστό και στη γλώσσα Html. Χρ. Ηλιούδης
Εισαγωγή στον Παγκόσμιο ιστό και στη γλώσσα Html Χρ. Ηλιούδης Παγκόσμιος Ιστός (WWW) Ο Παγκόσμιος Ιστός (World Wide Web WWW), ή απλώς Ιστός, βασίζεται στην ιδέα των κατανεμημένων πληροφοριών. Αντί όλες
Α ΛΥΚΕΙΟΥ - ΕΦΑΡΜΟΓΕΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΜΑΪΟΣ 2019 ΕΝΔΕΙΚΤΙΚΕΣ ΕΡΩΤΗΣΕΙΣ ΚΑΤΑΝΟΗΣΗΣ
Το υλικό αυτό δίνεται στους μαθητές για τη σωστή μελέτη της διδαχθείσας ύλης του μέρους Β. Πρόκειται για ένα συμπαγή κορμό ερωτήσεων και ασκήσεων οι οποίες καλύφθηκαν κατά τη διάρκεια της έως τώρα σχολικής
Πληροφορική Τμήμα Σχεδιασμού & Τεχνολογίας Ξύλου & Επίπλου Αντώνιος Καραγεώργος Ευανθία Τσιλιχρήστου. Μάθημα 5 ο Τεχνολογίες Διαδικτύου: HTML I
Πληροφορική Τμήμα Σχεδιασμού & Τεχνολογίας Ξύλου & Επίπλου Αντώνιος Καραγεώργος Ευανθία Τσιλιχρήστου Μάθημα 5 ο Τεχνολογίες Διαδικτύου: HTML I Διαδικτυακή Εφαρμογή (1/2) Ως διαδικτυακή εφαρμογή μπορούμε
CSS Εργαστήριο 1. Εισαγωγή - Σύνταξη - Εφαρμογή στην HTML
CSS Εργαστήριο 1. Εισαγωγή - Σύνταξη - Εφαρμογή στην HTML Εισαγωγή Το CSS (Cascading Style Sheets ή Επικαλυπτόμενα Φύλλα Στυλ) μας επιτρέπει να αλλάξουμε τον τρόπο με τον οποίο παρουσιάζονται τα στοιχεία
ΚΕΦΑΛΑΙΟ 11. Εισαγωγή στην HTML. ΚΕΦΑΛΑΙΟ 11 Εισαγωγή στην HTML. Α Γενικού Λυκείου
Α Γενικού Λυκείου 93 Διδακτικές ενότητες 11.1 Γενική εισαγωγή στην HTML 11.2 Η HTML5 11.3 Ενσωμάτωση (Embedding) 11.4 Καθορίζοντας την εμφάνιση CSS Διδακτικοί στόχοι Σκοπός του κεφαλαίου είναι οι μαθητές
ΕΠΛ 003: ΕΠΙΣΤΗΜΗ ΤΗΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΚΑΙ ΠΛΗΡΟΦΟΡΙΑΚΑ ΣΥΣΤΗΜΑΤΑ HTML
ΕΠΛ 003: ΕΠΙΣΤΗΜΗ ΤΗΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΚΑΙ ΠΛΗΡΟΦΟΡΙΑΚΑ ΣΥΣΤΗΜΑΤΑ HTML Στόχοι 1 Να δημιουργήσουμε υπερκείμενα με την Γλώσσα Επισημείωσης Υπερκειμένων (hypertext markup language, HTML). Υπολογιστικά συστήματα:
<HTML> <HEAD> <TITLE> <BODY>
ΑΣΚΗΣΗ 1 1. Ανοίξτε τον επεξεργαστή ιστοσελίδων 2. Αποθηκεύστε στο X:/mathimata/html/askiseis/ με όνομα askisi1b.html 3. Θα φτιάξουμε μια νέα ιστοσελίδα, χρησιμοποιώντας τις βασικές ετικέτες
Σταύρος Καουκάκης Ευτύχιος Βαβουράκης
ΠΑΝΕΠΙΣΤΗΜΙΟ ΚΡΗΤΗΣ 1 ο ΣΧΟΛΕΙΟ ΚΩΔΙΚΑ «Βασικά Θέματα Προγραμματισμού στην Ανάπτυξη Δυναμικών Διαδικτυακών Εφαρμογών» (Part 1) Σταύρος Καουκάκης Ευτύχιος Βαβουράκης 1 Λίγα Λόγια για το Σχολείο Μονάδες
Cascading Style Sheets (CSS)
Cascading Style Sheets (CSS) Τα Cascading Style Sheets προσφέρουν έναν εύκολο τρόπο για να ορίσουμε τη μορφοποίηση που επιθυμούμε να έχουν οι σελίδες μία τοποθεσίας του Παγκόσμιου Ιστού που δημιουργούμε.
Βαρβάκειο Πρότυπο Γυμνάσιο Εργαστήρι Πληροφορικής Σχολ. Έτος Φύλλο Εργασίας 5
Φύλλο Εργασίας 5 HTML: Χρήση των Cascading Style Sheets (CSS) για τον έλεγχο της εμφάνισης των στοιχείων της html Με τη χρήση CSS πετυχαίνουμε να ελέγξουμε περισσότερο αποτελεσματικά και κυρίως ταχύτερα
Εισαγωγή σε HTML και CSS. Παναγιώτης Τσαρχόπουλος
Εισαγωγή σε HTML και CSS Παναγιώτης Τσαρχόπουλος Περιεχόμενα Εισαγωγικές έννοιες Ορολογία και σύνταξη Κείμενο σε HTML έγγραφα Σύνδεσμοι Ψηφιακές - Ευφυείς Πόλεις - Εισαγωγή σε HTML και CSS 2 Εισαγωγικές
Σχεδιασμός και Ανάπτυξη Ιστοσελίδων ΙΙ ΙΕΚ ΤΡΙΑΝΔΡΙΑΣ ΓΡΑΦΙΣΤΑΣ ΕΝΤΥΠΟΥ ΚΑΙ ΗΛΕΚΤΡΟΝΙΚΩΝ ΜΕΣΩΝ. CSS - Cascading Style Sheets
Σχεδιασμός και Ανάπτυξη Ιστοσελίδων ΙΙ ΙΕΚ ΤΡΙΑΝΔΡΙΑΣ ΓΡΑΦΙΣΤΑΣ ΕΝΤΥΠΟΥ ΚΑΙ ΗΛΕΚΤΡΟΝΙΚΩΝ ΜΕΣΩΝ CSS - Cascading Style Sheets Τι είναι τα CSS; Τα CSS (Διαδοχικά Φύλλα Στυλ) αποτελούν ένα πολύ καλό εργαλείο
ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML ΣΧΟΛΙΚΟ ΒΙΒΛΙΟ ΚΕΦΑΛΑΙΟ 11 Ευάγγελος Χ. Ζιούλας (Καθηγητής Πληροφορικής)
http://www.zioulas.gr ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML ΣΧΟΛΙΚΟ ΒΙΒΛΙΟ ΚΕΦΑΛΑΙΟ 11 Ευάγγελος Χ. Ζιούλας (Καθηγητής Πληροφορικής) WEB SERVER Είναι μια εφαρμογή software που αναλαμβάνει την αποστολή μιας ιστοσελίδας σε
HTML Εργαστήριο 4. Εισαγωγή βίντεο και ήχου
HTML Εργαστήριο 4. Εισαγωγή βίντεο και ήχου HTML5 Εισαγωγή video Η HTML 5, το νέο πρότυπο για την HTML, υποστηρίζει την εισαγωγή βίντεο και ήχου χωρίς να απαιτείται κάποιο πρόσθετο πρόγραμμα, όπως για
Σχεδιασμός και Ανάπτυξη Ιστοτόπων. ΕΠΑ.Λ. ΑΛΙΜΟΥ Τομέας Πληροφορικής Κ. Φλώρος
Σχεδιασμός και Ανάπτυξη Ιστοτόπων ΕΠΑ.Λ. ΑΛΙΜΟΥ Τομέας Πληροφορικής Κ. Φλώρος H γλώσσα HTML Άλλες Βιβλιογραφικές πηγές για HTML http://www.w3schools.com/html/ http://www.it.uom.gr/project/html2/lessons.html
γενικό ΛΥΚειο Νέων ΜΟΥΔανιών ΕΦΑΡΜΟΓΕΣ ΠΛΗΡΟΦΟΡΙΚΗΣ Α ΛΥΚΕΙΟΥ Διδάσκων Καθηγητής: Γιώργος Μαλακούδης
Διδάσκων Καθηγητής: Γιώργος Μαλακούδης email: gmalakoudi@sch.gr Περιεχόμενα ΔΡΑΣΤΗΡΙΟΤΗΤΑ 1: Δημιουργία της 1 ης μας σελίδας!... 2 ΔΡΑΣΤΗΡΙΟΤΗΤΑ 2: Επικεφαλίδες και παράγραφοι... 3 ΔΡΑΣΤΗΡΙΟΤΗΤΑ 3: Κείμενο,
7-22 Οκτωβρίου Μία γιορτή δημιουργίας με κώδικα. Europe Code Week
7-22 Οκτωβρίου 2017 Μία γιορτή δημιουργίας με κώδικα @ #codeeu codeeu 7-22 October 2017 Europe Code Week Εισαγωγή στο Web Development HTML Λίγα λόγια... Η HTML είναι η βασική γλώσσα γραφής των ιστοσελίδων!
Υπερσυνδέσεις (hyperlinks)
Υπερσυνδέσεις (hyperlinks) Οι υπερσυνδέσεις αποτελούν το δυναμικό στοιχείο σε ένα έγγραφο html. Με τις υπερσυνδέσεις είναι δυνατή, εύκολη και γρήγορη η μετάβαση ή η παραπομπή από ένα αρχείο html (πηγή)
ΒΑΣΙΚΕΣ ΑΡΧΕΣ ΣΧΕΔΙΑΣΜΟΥ ΕΦΑΡΜΟΓΩΝ
ΒΑΣΙΚΕΣ ΑΡΧΕΣ ΣΧΕΔΙΑΣΜΟΥ ΕΦΑΡΜΟΓΩΝ Βαγγελιώ Καβακλή Τμήμα Πολιτισμικής Τεχνολογίας & Επικοινωνίας 8 Μαρτίου 2001 Hypertext Markup Language (HTML)! Σε μια ιστοσελίδα μπορούν να εμφανίζονται διαφορετικά
Άσκηση 6 Επαναληπτική Άσκηση HTML
Άσκηση 6 Επαναληπτική Άσκηση HTML ΕΤΙΚΕΤΕΣ HTML ΕΤΙΚΕΤΑ ΠΕΡΙΓΡΑΦΗ ΙΔΙΟΤΗΤΕΣ ΙΔΙΟΤΗΤΑ ΤΙΜΗ ΠΕΡΙΓΡΑΦΗ Βασικές Ορίζει τον τύπο του αρχείου Ορίζει ένα αρχείο HTML Ορίζει ένα τίτλο
Η Βίβλος των CSS. Εισαγωγή στα CSS
Η Βίβλος των CSS Εισαγωγή στα CSS Τα Διαδοχικά Φύλλα Στυλ (CSS, Cascading Style Sheets) αποτελούν ένα πολύ καλό εργαλείο για να μπορούμε να αλλάζουμε την εμφάνιση και τη διάταξη (layout) των ιστοσελίδων
1. <body> 2. <header> 3. <h1> My Page </h1> 4. </header> 5. <section>
Ενδεικτικές ερωτήσεις 1. Τι σημαίνουν τα αρχικά CSS 2. Τι σημαίνουν τα αρχικά HTML 3. Ποια η διαφορά μεταξύ Internet και Web; a. Είναι το ίδιο b. Το Web είναι μια υπηρεσία του διαδικτύου 4. Ποια η διαφορά
HTML Εργαστήριο 5. Δομή εγγράφου
Ετικέτα HTML 5 HTML Εργαστήριο 5. Δομή εγγράφου 1. Αρχικά, θα πρέπει να ορίσετε ότι η σελίδα που ακολουθεί είναι τύπου html 5. Αυτό μπορεί να επιτευχθεί προσθέτοντας στην δομή που ήδη γνωρίζετε και πριν
Διαδίκτυο: Ιστορία, Δομή, Υπηρεσίες
Διαδίκτυο: Ιστορία, Δομή, Υπηρεσίες 1 η Ερώτηση (Ορισμός): Τι είναι το Διαδίκτυο; Διαδίκτυο είναι το παγκόσμιο δίκτυο όλων των επιμέρους δικτύων που έχουν συμφωνήσει σε κοινούς κανόνες επικοινωνίας και
Σπουδές 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
Φόρμες. Γενικοί κανόνες. Η ετικέτα <form>
Φόρμες Οι φόρμες περιέχουν τα στοιχεία φόρμας στο οποία ένας χρήστης μπορεί να εισαγάγει δεδομένα τα οποία στη συνέχεια αποστέλλονται σε έναν εξυπηρετητή για παραπέρα επεξεργασία. Γενικοί κανόνες Για τις
Κεφάλαιο 4 HyperText Markup Language - HTML. Προγραμματιστικά εργαλεία για το διαδίκτυο Φίλιππος Κουτσάκας, Πολύγυρος 2013
Κεφάλαιο 4 HyperText Markup Language - HTML Προγραμματιστικά εργαλεία για το διαδίκτυο Φίλιππος Κουτσάκας, Πολύγυρος 2013 Τι είναι η HTML; Ένας τρόπος για να πεις στον σελιδομετρητή πώς να αναπαραστήσει
Σε αυτό το μάθημα θα ασχοληθούμε με τη βελτίωση της εμφάνισης ενός ιστοτόπου, αλλά και τον εύκολο χειρισμό όλων των αλλαγών τις οποίες επιθυμούμε να
Σε αυτό το μάθημα θα ασχοληθούμε με τη βελτίωση της εμφάνισης ενός ιστοτόπου, αλλά και τον εύκολο χειρισμό όλων των αλλαγών τις οποίες επιθυμούμε να κάνουμε μέσω ενός εξωτερικού αρχείου.το αρχείο αυτό
Βασικά στοιχεία του CSS
Βασικά στοιχεία του CSS Περιεχόμενα Τι είναι CSS Πλεονεκτήματα CSS μορφοποίησης Συντακτικό του CSS Ιδιότητες CSS Εφαρμογή CSS κανόνων Επικάλυψη CSS κανόνων 2 Μορφοποίηση με HTML Η HTML είναι σχεδιασμένη
Hyper Text Markup Language (HTML) που σημαίνει γλώσσα σήμανσης υπερκειμένου.
Hyper Text Markup Language (HTML) που σημαίνει γλώσσα σήμανσης υπερκειμένου. 1 η ΑΣΚΗΣΗ Οι HTML σελίδες είναι απλές σελίδες κειμένου και μπορούν να δημιουργηθούν από οποιοδήποτε πρόγραμμα επεξεργασίας
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 απαιτεί από τον Υποψήφιο να κατανοεί τις κύριες έννοιες της σχεδίασης και δημοσίευσης δικτυακών
Γλώσσες Σήµανσης (Markup Languages) Τεχνολογία ιαδικτύου και Ηλεκτρονικό Εµπόριο
Γλώσσες Σήµανσης (Markup Languages) Τεχνολογία ιαδικτύου και Ηλεκτρονικό Εµπόριο 1 Γλώσσες Σήµανσης Γλώσσες σήµανσης: Αρχικά για τον καθορισµό εµφάνισης σελίδων, γραµµατοσειρών. Στη συνέχεια επεκτάθηκαν
Σε αυτό το µάθηµα θα ασχοληθούµε µε τη βελτίωση της εµφάνισης ενός ιστοτόπου, αλλά και τον εύκολο χειρισµό όλων των αλλαγών στην εµφάνιση της σελίδας
Σε αυτό το µάθηµα θα ασχοληθούµε µε τη βελτίωση της εµφάνισης ενός ιστοτόπου, αλλά και τον εύκολο χειρισµό όλων των αλλαγών στην εµφάνιση της σελίδας µέσω της τεχνολογίας των ιαδοχικών Φύλλων Στυλ (cascading
Ετικέτες HTML. <!-->: Τα σχόλια χρησιμοποιούνται για να γράφουμε σημειώσεις μέσα στον
Ετικέτες HTML : Τα σχόλια χρησιμοποιούνται για να γράφουμε σημειώσεις μέσα στον πηγαίο κώδικα για να διευκολύνουμε την επεξεργασία και την συντήρηση του αρχείου. Τα σχόλια δεν εμφανίζονται στην οθόνη
Περιεχόμενα. Λίγα λόγια από το συγγραφέα... 7
Περιεχόμενα Λίγα λόγια από το συγγραφέα... 7 Μέρος 1 1 Βασικοί όροι... 11 2 Βασική δομή κώδικα HTML... 25 3 Μορφοποίηση κειμένου... 39 4 Μορφοποίηση παραγράφων... 51 5 Εισαγωγή εικόνας... 63 6 Λίστες με
2. ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML ΓΙΩΡΓΟΣ ΓΙΑΝΝΑΚΑΚΗΣ, ΜΑΝΩΛΗΣ ΤΣΙΚΝΑΚΗΣ
2014 2. ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML ΓΙΩΡΓΟΣ ΓΙΑΝΝΑΚΑΚΗΣ, ΜΑΝΩΛΗΣ ΤΣΙΚΝΑΚΗΣ H HTML είναι μία γλώσσα σήμανσης και αποτελεί την κύρια γλώσσα δημιουργίας ιστοσελίδων του διαδικτύου. Είναι το ακρωνύμιο των λέξεων HyperText
Σταύρος Καουκάκης Ευτύχιος Βαβουράκης
ΠΑΝΕΠΙΣΤΗΜΙΟ ΚΡΗΤΗΣ 1 ο ΣΧΟΛΕΙΟ ΚΩΔΙΚΑ «Βασικά Θέματα Προγραμματισμού στην Ανάπτυξη Δυναμικών Διαδικτυακών Εφαρμογών» (Part 1) Σταύρος Καουκάκης Ευτύχιος Βαβουράκης 1 Λίγα Λόγια για το Σχολείο Μονάδες
Προγραμματισμός Διαδικτύου
Πανεπιστήμιο Δυτικής Μακεδονίας Τμήμα Μηχανικών Πληροφορικής & Τηλεπικοινωνιών Προγραμματισμός Διαδικτύου Δρ. Μηνάς Δασυγένης mdasygenis@uowm.gr Τμήμα της παρουσίασης δημιουργήθηκε από τον κ. Παναγιώτη
Εργασία 11 η Πίνακες (βασικές ετικέτες, βασικές ιδιότητες) 1. Στο Σημειωματάριο πληκτρολογήστε τον παρακάτω κώδικα:
Εργασία 11 η Πίνακες (βασικές ετικέτες, βασικές ιδιότητες) 1. Στο Σημειωματάριο πληκτρολογήστε τον παρακάτω κώδικα: εισαγωγή εικόνων
ΚΕΡΑΜΟΠΟΥΛΟΣ ΕΥΚΛΕΙΔΗΣ
ΚΕΡΑΜΟΠΟΥΛΟΣ ΕΥΚΛΕΙΔΗΣ H HTML είναι το ακρωνύμιο των λέξεων HyperText Markup Language (γλώσσα μορφοποίησης υπερκειμένου) και είναι η βασική γλώσσα δόμησης σελίδων του World Wide Web. 2 Βασικά χαρακτηριστικά
Βαρβάκειο Πρότυπο Γυμνάσιο
Παραδόσεις & εργαστηριακές ασκήσεις στην HTML Βαρβάκειο Πρότυπο Γυμνάσιο Σχολ. Χρονιά 2016-2017 Θ. Οτζάκογλου Εργαστήρι Πληροφορικής Σχολ. Έτος 2016 2017 Αν και δεν είναι μία ακόμη «γλώσσα προγραμματισμού»,
Στην τεχνολογία των CSS, οι κανόνες στυλ (style
Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #4 0 : CSS: Βασικές και προχωρημένες τεχνικές επιλογής, τα στοιχεία και , ψευδο κλάσεις και ψευδο επιλογείς Γαβαλάς Δαμιανός dgavalas@aegean.gr CSS κανόνες στυλ
Τεχνολογίες Διαδικτύου - Εργαστήριο 1 ο
Τεχνολογίες Διαδικτύου - Εργαστήριο 1 ο 1. Δημιουργία μιας απλής σελίδας HTML Στον προσωπικό σας κατάλογο δημιουργήστε ένα φάκελο με όνομα HTML. Ανοίξτε το Notepad ακολουθώντας τη διαδρομή (Start All Programs
Γαβαλάς Δαμιανός dgavalas@aegean.gr. Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #3 0 : Εισαγωγή στacascading Style Sheets (CSS)
Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #3 0 : Εισαγωγή στacascading Style Sheets (CSS) Γαβαλάς Δαμιανός dgavalas@aegean.gr Επικαλυπτόμενα Φύλλα Στυλ (Cascading Style Sheets, CSS) Η (X)HTML προσδιορίζει τη βασική
Τι είναι η HTML; Τί είναι οι ετικέτες (tags); Πώς είναι μια ετικέτα (tag);
Τι είναι η HTML; Η HTML είναι το ακρώνυμο από το Hyper Text Markup Language που σημαίνει γλώσσα χαρακτηρισμού υπερκειμένου. Η χρήση μιας γλώσσας χαρακτηρισμού σημαίνει ότι γράφεται πρώτα το κείμενο και
Στοιχεία ορισμού θέσης (Positioning Elements)
Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #7 0 : Ορισμός θέσης σε διατάξεις (positioned layouts). Γαβαλάς Δαμιανός dgavalas@aegean.gr Στοιχεία ορισμού θέσης (Positioning Elements) Οι ιδιότητες τοποθέτησης των CSS
ΑΣΠΑΙΤΕ. ΠΡΑΚΤΙΚΗ ΑΣΚΗΣΗ 4α. Υπερκείμενο και HTML. Ημερομηνία :... Τμήμα :... Ονοματεπώνυμο :...
ΠΡΑΚΤΙΚΗ ΑΣΚΗΣΗ 4α Υπερκείμενο και HTML ΑΣΠΑΙΤΕ Ημερομηνία :... Τμήμα :... Ονοματεπώνυμο :... Η HTML (HyperText Markup Language) είναι η γλώσσα που χρησιμοποιείται για να περιγράψει τη δομή και τη διαμόρφωση
ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML. Decode, ISSEL. Θεοδόσης Σουργκούνης Αντώνης Χρυσόπουλος Στέλιος Μόσχογλου
ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML Θεοδόσης Σουργκούνης Αντώνης Χρυσόπουλος Στέλιος Μόσχογλου Decode, ISSEL Τμήμα Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών, Αριστοτέλειο Πανεπιστήμιο Θεσσαλονίκης Στόχος της ώρας
Μαθηματικά Λογισμικά και Γλώσσες Αναπαράστασης Γνώσης
Μαθηματικά Λογισμικά και Γλώσσες Γεώργιος Χρ. Μακρής 20 Απριλίου 2015 Γλώσσες Σήμανσης (Annotation ή Markup Languages) Για την αποθήκευση δομημένης πληροφορίας χρησιμοποιούνται γλώσσες σήμανσης. Η δομημένη
ΕΡΓΑΣΤΗΡΙΟ: ΤΕΧΝΟΛΟΓΙΕΣ ΠΛΗΡΟΦΟΡΙΑΣ ΚΑΙ ΕΠΙΚΟΙΝΩΝΙΑΣ ΣΤΟΝ ΤΟΥΡΙΣΜΟ. 4o ΕΡΓΑΣΤΗΡΙΟ ΕΙΚΟΝΕΣ ΣΤΗΝ HTML
ΕΡΓΑΣΤΗΡΙΟ: ΤΕΧΝΟΛΟΓΙΕΣ ΠΛΗΡΟΦΟΡΙΑΣ ΚΑΙ ΕΠΙΚΟΙΝΩΝΙΑΣ ΣΤΟΝ ΤΟΥΡΙΣΜΟ ΠΕΡΙΕΧΟΜΕΝΟ ΜΑΘΗΜΑΤΟΣ 1. Εικόνες 2. Ασκήσεις 4o ΕΡΓΑΣΤΗΡΙΟ ΕΙΚΟΝΕΣ ΣΤΗΝ HTML 1. Εικόνες 1. Οι μορφές (format) των εικόνων που μπορείτε
ΠΡΟΓΡΑΜΜΑΤΙΣΤΙΚΑ ΕΡΓΑΛΕΙΑ ΓΙΑ ΤΟ ΔΙΑΔΙΚΤΥΟ
ΠΡΟΓΡΑΜΜΑΤΙΣΤΙΚΑ ΕΡΓΑΛΕΙΑ ΓΙΑ ΤΟ ΔΙΑΔΙΚΤΥΟ Κεφάλαιο 2. Το περιβάλλον του παγκόσμιου Ιστού Επιμέλεια: Καραγιάννης Σπύρος Καθηγητής ΠΕ19 Πλεονεκτήματα παγκόσμιου Ιστού Εξυπηρετητής Ιστού & Ιστοσελίδες Κύριες
Νέες Τεχνολογίες στην Εκπαίδευση
Σχολή Εφαρμοσμένων Μαθηματικών και Φυσικών Επιστημών Εθνικό Μετσόβιο Πολυτεχνείο Νέες Τεχνολογίες στην Εκπαίδευση Επάλληλα φύλλα στυλ (CSS): Μια εισαγωγή Στεφανέας Πέτρος Ζαμαρίας Βασίλης Άδεια Χρήσης
CSS. Εισαγωγή & Βασικές έννοιες. Cascading Style Sheets. Επικαλυπτόμενα φύλλα στυλ
CSS Εισαγωγή & Βασικές έννοιες Cascading Style Sheets Επικαλυπτόμενα φύλλα στυλ Περιεχόμενα Τι είναι CSS Πλεονεκτήματα CSS μορφοποίησης Συντακτικό του CSS Ιδιότητες CSS Εφαρμογή CSS κανόνων Επικάλυψη CSS
( Απάντηση: Ο τόνος βρίσκεται δεξιά από το γράμμα Λ. ) ( Απάντηση: Κρατάμε πατημένο το πλήκτρο Shift και πατάμε το πλήκτρο 8. )
1 Επεξεργασία Κειμένου OpenOffice writer Απόσπασμα Μάθημα: Γλώσσα, Τάξη: Δ Ενότητα 2: «Ρώτα το νερό τι τρέχει» Θυμόμαστε: Ποιο πλήκτρο είναι ο τόνος; ( Απάντηση: Ο τόνος βρίσκεται δεξιά από το γράμμα Λ.
Τεχνολογίες Διαδικτύου (Εξασκηθείτε στην HTML)
Τεχνολογίες Διαδικτύου (Εξασκηθείτε στην HTML) 1. Δημιουργία μιας απλής σελίδας HTML Ανοίξτε το Notepad ακολουθώντας τη διαδρομή Start All Programs Accessories Notepad Πληκτρολογήστε το ακόλουθο κείμενο:
Σχεδιασμός και Ανάπτυξη Ιστότοπων
Σχεδιασμός και Ανάπτυξη Ιστότοπων CSS: Ιδιότητες μορφοποίησης κειμένου Παρουσίαση 14 η 1 Βελώνης Γεώργιος Καθηγητής Browsers δοκιμών Οι δοκιμές έγιναν στους παρακάτω browsers και εκδόσεις τους: Google
ΠΡΟΓΡΑΜΜΑΤΙΣΤΙΚΑ ΕΡΓΑΛΕΙΑ ΓΙΑ ΤΟ ΔΙΑΔΙΚΤΥΟ
ΠΡΟΓΡΑΜΜΑΤΙΣΤΙΚΑ ΕΡΓΑΛΕΙΑ ΓΙΑ ΤΟ ΔΙΑΔΙΚΤΥΟ Κεφάλαιο 4. Η γλώσσα HTML Επιμέλεια: Καραγιάννης Σπύρος Καθηγητής ΠΕ19 Βασικοί κανόνες σύνταξης HTML ομή σελίδας HTML Μορφοποίηση κειμένου Κατάλογοι Εισαγωγή
Εισαγωγή στην HTML. Κεφ. HTML + CSS
Εισαγωγή στην HTML Κεφ. HTML + CSS Συστατικά καλής Ιστοσελίδας α) HTML για το Περιεχόμενο β) CSS για τη μορφοποίηση γ) Javascript για διαδραστικότητα Παράδειγμα Ολυμπιακός Πανιώνιος ΠΑΟΚ Παναθηναϊκός Ξάνθη
Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας
Πανεπιστήμιο Αιγαίου Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας Δικτυακά Πολυμέσα Ι (Β Έτος, 3ο εξ) Διάλεξη #5η: HTML: πίνακες (tables), πλαίσια (frames) Γαβαλάς Δαμιανός
Σχεδιασμός και Ανάπτυξη Ιστότοπων
Βελώνης Γεώργιος Καθηγητής Σχεδιασμός και Ανάπτυξη Ιστότοπων Εισαγωγή στα CSS (Cascading Style Sheets) Παρουσίαση 13 η 1 Βελώνης Γεώργιος Καθηγητής Περιεχόμενα Εισαγωγή Πλεονεκτήματα χρήσης των CSS Βασικοί
Περιεχόμενα. Γαβαλάς Δαμιανός
Δικτυακά Πολυμέσα ΙΙ Διάλεξη #5 η : Τυπογραφία στο web Γαβαλάς Δαμιανός dgavalas@aegean.gr Περιεχόμενα Κατανόηση αρχών σχεδιασμού με γραμματοσειρές Κατανόηση των μονάδων μέτρησης που χρησιμοποιούνται στα
3. ΕΙΣΑΓΩΓΗ ΣΤΟ CSS ΓΙΩΡΓΟΣ ΓΙΑΝΝΑΚΑΚΗΣ, ΜΑΝΩΛΗΣ ΤΣΙΚΝΑΚΗΣ
2014 3. ΕΙΣΑΓΩΓΗ ΣΤΟ CSS ΓΙΩΡΓΟΣ ΓΙΑΝΝΑΚΑΚΗΣ, ΜΑΝΩΛΗΣ ΤΣΙΚΝΑΚΗΣ Εισαγωγή Το CSS (Cascading Style Sheets) είναι αρχεία με κατάληξη.css τα οποία καθορίζουν την μορφοποίηση των ιστοσελίδων. Μέσω αυτών επιτυγχάνεται
ΣΧΕΔΙΑΣΜΟΣ ΠΡΟΣΑΡΜΟ- ΣΤΙΚΩΝ ΙΣΤΟ- ΤΟΠΩΝ
ΣΧΕΔΙΑΣΜΟΣ ΠΡΟΣΑΡΜΟ- ΣΤΙΚΩΝ ΙΣΤΟ- ΤΟΠΩΝ 4.1. Εισαγωγή Το παρόν κεφάλαιο πραγματεύεται τις αρχές του προσαρμοστικού σχεδιασμού στον ιστό. Εξηγεί την ανάγκη που οδήγησε στην επινόηση του προσαρμοστικού σχεδιασμού
ΕΡΓΑΣΤΗΡΙΑΚΗ ΑΣΚΗΣΗ 2 ΜΕΛΕΤΗ ΚΑΙ ΕΦΑΡΜΟΓΗ ΔΗΜΙΟΥΡΓΙΑΣ HTML ΣΕΛΙΔΩΝ ΣΥΝΔΕΣΜΟΙ
ΕΡΓΑΣΤΗΡΙΑΚΗ ΑΣΚΗΣΗ 2 ΜΕΛΕΤΗ ΚΑΙ ΕΦΑΡΜΟΓΗ ΔΗΜΙΟΥΡΓΙΑΣ HTML ΣΕΛΙΔΩΝ ΣΥΝΔΕΣΜΟΙ Στην άσκηση αυτή θα εμπλουτίσουμε την ιστοσελίδα που φτιάξαμε στην προηγούμενη άκηση με πίνακες, συνδέσμους και γραφικά. 1.
Πληροφορική Τμήμα Σχεδιασμού & Τεχνολογίας Ξύλου & Επίπλου Αντώνιος Καραγεώργος Ευανθία Τσιλιχρήστου. Μάθημα 6 ο Τεχνολογίες Διαδικτύου: HTML II
Πληροφορική Τμήμα Σχεδιασμού & Τεχνολογίας Ξύλου & Επίπλου Αντώνιος Καραγεώργος Ευανθία Τσιλιχρήστου Μάθημα 6 ο Τεχνολογίες Διαδικτύου: HTML II Εισαγωγή Εικόνων Οι φυλλομετρητές μπορούν να εμφανίσουν ένθετες
Επαναληπτική Άσκηση ΕΤΙΚΕΤΕΣ HTML
Επαναληπτική Άσκηση ΕΤΙΚΕΤΕΣ HTML ΕΤΙΚΕΤΑ ΠΕΡΙΓΡΑΦΗ ΙΔΙΟΤΗΤΕΣ ΙΔΙΟΤΗΤΑ ΤΙΜΗ ΠΕΡΙΓΡΑΦΗ Βασικές Ορίζει ένα αρχείο HTML Ορίζει ένα τίτλο για το αρχείο Ορίζει το σώµα της background URL
10. Εισαγωγή στην HTML
10. Εισαγωγή στην HTML Σκοπός του Εργαστηρίου: Σκοπός της παρούσας εργαστηριακής άσκησης είναι η εισαγωγή στη γλώσσα HTML και η ανάδειξη του γεγονότος ότι πρόκειται για μία πολύ απλή τεχνολογία. Θα χρησιμοποιήσετε
Σχεδίαση και Ανάπτυξη Ιστότοπων
Σχεδίαση και Ανάπτυξη Ιστότοπων Η Γλώσσα HTML Παρουσίαση 4 η 1 Βελώνης Γεώργιος Καθηγητής Περιεχόμενα Κανόνες σύνταξης της HTML Δομή σελίδας και βασικές ετικέτες Ιεραρχία (Hierarchy) Κανόνες σύνταξης της
Σχεδίαση ιστοσελίδων
Τ.Ε.Ι. Δυτικής Ελλάδας Σχολή Διοίκησης και Οικονομίας Τμήμα Διοίκησης Επιχειρήσεων - Πάτρα Σχεδίαση ιστοσελίδων Θεώνη Πιτουρά, Γιάννης Κουτσονίκος Σημειώσεις για το Εργαστήριο «Επιχειρηματικές δικτυακές
Οδηγίες κατασκευής Ιστοσελίδων µε το πρόγραµµα FRONTPAGE 2003
Οδηγίες κατασκευής Ιστοσελίδων µε το πρόγραµµα FRONTPAGE 2003 Μάθετε σε 10 βήµατα να φτιάχνετε τις δικές σας ιστοσελίδες Βήµα 1ο ΕΕππιιµµέέλλεειιαα:: ΣΣάάββββααςς ΟΟββααδδίίααςς Σε αυτό το βήµα θα χρησιµοποιήσετε
Εισαγωγή στην HTML (1)
Εισαγωγή στην HTML (1) Πανεπιστήμιο Πελοποννήσου Τμήμα Επιστήμης & Τεχνολογίας Τηλεπικοινωνιών Ευάγγελος Α. Κοσμάτος HTML HyperText Mark-up Language Καθορίζει τον τρόπο που ο browser εμφανίζει τα διάφορα
Πίνακες HTML. Παναγιώτης Γαλάτης 1ο ΕΠΑΛ Ηρακλείου
Πίνακες HTML Παναγιώτης Γαλάτης 1ο ΕΠΑΛ Ηρακλείου Τι είναι Πίνακας Ένας πίνακας στοιχείων αποτελείται από γραμμές και στήλες. Το σημείο τομής μιας γραμμής και μιας στήλης ονομάζεται κελί (cell( cell).
Σχεδίαση και Ανάπτυξη Ιστότοπων. HTML Στοιχεία - Βασικές Ετικέτες Ειδικοί Χαρακτήρες Παρουσίαση 5 η. Βελώνης Γεώργιος Καθηγητής Πληροφορικής ΠΕ20
Σχεδίαση και Ανάπτυξη Ιστότοπων HTML Στοιχεία - Βασικές Ετικέτες Ειδικοί Χαρακτήρες Παρουσίαση 5 η 1 Βελώνης Γεώργιος Καθηγητής Σημασία συμβόλων HTML5 tags Obsolete tags: Μην αφήνετε αυτές τις ετικέτες
Europe Code Week 7-22 Οκτωβρίου Μία γιορτή δημιουργίας με κώδικα
Europe Code Week 7-22 Οκτωβρίου 2017 7-22 October 2017 Μία γιορτή δημιουργίας με κώδικα @CodeWeekEU #codeeu codeeu Εισαγωγή στο Web Development CSS Λίγα λόγια... Η γλώσσα CSS χρησιμοποιείται για τη μορφοποίηση
Εργαλεία Ανάπτυξης Εφαρμογών Internet. Δ.Ι.Ε.Κ. Γλυφάδας Τεχνικός Εφαρμογών Πληροφορικής
Εργαλεία Ανάπτυξης Εφαρμογών Internet Δ.Ι.Ε.Κ. Γλυφάδας Τεχνικός Εφαρμογών Πληροφορικής Το πρότυπο CSS Α Μέρος 2 CSS (Cascading Style Sheets)(1) Ορίζουν την εμφάνιση των στοιχείων σε ένα έγγραφο HTML.
Δραστηριότητα 9 Δημιουργία και διαχείριση blog μέσω του Blogger. Δημιουργία ιστολογίου
Δραστηριότητα 9 Δημιουργία και διαχείριση blog μέσω του Blogger Δημιουργία ιστολογίου 1. Ανοίξτε το φυλλομετρητή Google Chrome, πληκτρολογήστε στη γραμμή διευθύνσεων τη διεύθυνση www.blogger.com και πατήστε
Σχεδιασμός και ανάπτυξη ενός Web Site. Αθ. Ανδρούτσος
Σχεδιασμός και ανάπτυξη ενός Web Site Αθ. Ανδρούτσος 1. Εισαγωγή Με τον όρο Web-based εφαρμογή εννοούμε ένα σύνολο τεχνολογιών με κοινό χαρακτηριστικό την δυνατότητα επικοινωνίας μέσω του πρωτοκόλλου http
Η Βίβλος των CSS - Μέρος 3 Το Box Model, τα Περιθώρια και τα Περιγράμματα
Η Βίβλος των CSS - Μέρος 3 Το Box Model, τα Περιθώρια και τα Περιγράμματα Το Box Model Το box model στα CSS περιγράφει τα πλαίσια (boxes) που δημιουργούνται για τα στοιχεία (elements) της HTML. Το box
Διάλεξη 2η Εισαγωγή στο CSS
Διάλεξη 2η Εισαγωγή στο CSS Στέλιος Μόσχογλου Θεοδόσης Σουργκούνης Αντώνης Χρυσόπουλος I S S E L D e c o d e (Intelligent Systems & Software Engineering Lab) Στόχος της ώρας Τι είναι το CSS? Γιατί να χρησιμοποιήσω
ΕΠΛ 012 Εισαγωγή στο Παγκόσμιο Πλέγμα Πληροφοριών
ΕΠΛ 012 Εισαγωγή στο Παγκόσμιο Πλέγμα Πληροφοριών World Wide Web (WWW) Θέματα Επεξεργασία δεδομένων στο Web Δημιουργία απλών σελίδων HTML Περιγραφή κάποιων XHTML στοιχείων (tags) Εξέλιξης του WWW Το WWW
TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο)
TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Στέλλα Λάμπουρα Εαρινό εξάμηνο Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί
Περιεχόμενα. Γαβαλάς Δαμιανός Τρέχον status της HTML
Δικτυακά Πολυμέσα ΙΙ Διάλεξη #2 η : Βασικές έννοιες σχεδιασμού στο web Γαβαλάς Δαμιανός dgavalas@aegean.gr Περιεχόμενα Τρέχον status της HTML Μετάβαση από την HTML στην XHTML Κλέ Καλές πρακτικές συγγραφής
2. Επιλέξτε την σωστή ετικέτα HTML που προσφέρει το μεγαλύτερο φόντο κειμένου. <head> <heading> <h6> <h1>
ΤΜΗΜΑ ΗΛΕΚΤΡΟΝΙΚΗΣ Τομέας Υπολογιστικών Συστημάτων και Ελέγχου Τεχνολογίες Πολυμέσων - Εφαρμογές Δρ. Β. ΒΑΛΑΜΟΝΤΕΣ Ε-mail: vala@teiath.gr Να απαντήσετε στις παρακάτω ερωτήσεις. 1. Τι σημαίνουν τα αρχικά
Cascading Style Sheets
Cascading Style Sheets CSS είναι το ακρωνύµιο του Cascading Style Sheets (Επικαλυπτόµενα φύλλα στυλ). CSS είναι µια γλώσσα style δηλ. µια γλώσσα η οποία καθορίζει τη εµφάνιση HTML εγγράφων. Για παράδειγµα,
Animation με χρήση HTML 5. Στέλιος Σκουρλής
Animation με χρήση HTML 5 Στέλιος Σκουρλής Τι είναι η HTML???? Με απλά λόγια, μία ιστοσελίδα (HTML αρχείο) ) είναι ένα αρχείο κειμένου που δημιουργήθηκε χρησιμοποιώντας Hypertext Markup Language (HTML)
ΕΠΛ 003: ΕΠΙΣΤΗΜΗ ΤΗΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΚΑΙ ΠΛΗΡΟΦΟΡΙΚΑ ΣΥΣΤΗΜΑΤΑ
ΕΠΛ 003: ΕΠΙΣΤΗΜΗ ΤΗΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΚΑΙ ΠΛΗΡΟΦΟΡΙΚΑ ΣΥΣΤΗΜΑΤΑ Δρ. Κουζαπάς Δημήτριος Πανεπιστήμιο Κύπρου - Τμήμα Πληροφορικής Παγκόσμιος Ιστός Στόχοι 1 Να εξηγήσουμε τι είναι ο Παγκόσμιος Ιστός και πώς
Άσκηση 5 Firefox Αποθήκευση αρχείων
Άσκηση 5 Firefox Αποθήκευση αρχείων Παρουσίαση Γραμμών Εργαλείων Ανοίγουμε τον περιηγητή ιστού Firefox. Αποθήκευση εικόνων Ανοίγουμε την σελίδα www.google.gr Στην πάνω αριστερά γωνία κάνουμε αριστερό κλικ
Οδηγίες Στο σημερινό εργαστήριο θα αρχίσετε να χρησιμοποιείτε βασικές οδηγίες μορφοποίησης της ιστοσελίδας σας (κάτι που έχουμε αποφύγει έως τώρα!).
Εργαστήριο #8 Τι πρέπει να έχετε ολοκληρώσει από το προηγούμενο εργαστήριο. Το σημερινό εργαστήριο είναι ανεξάρτητο από τα προηγούμενα, επειδή όμως θα ζητηθεί να ανακυκλώσετε υλικό από εκείνα, βεβαιωθείτε
Σχεδόν όλες οι ιστοσελίδες βασίζονται σε μεγάλο βαθμό σε πίνακες. Για να εισάγουμε έναν πίνακα επιλέγουμε από το μενού Insert->Table.
DreamWeaver - Άσκηση 4η Πίνακες Παρακάτω θα δούμε πως μπορούμε να δημιουργούμε και να επεξεργαζόμαστε πίνακες, μια πολύ βασική δομή. Θα δούμε πως γίνεται εισαγωγή πίνακα, ένωση κελιών του πίνακα, προσθήκη
Κατασκευή ιστοσελίδων με το FrontPage2003
Γραμμή τίτλου Γραμμή μενού Γραμμή εργαλείων Μορφοποίηση Εικόνα Εφέ DHTML Κατασκευή ιστοσελίδων με το FrontPage2003 Παράθυρο εργασιών Όταν ανοίγουμε το FrontPage, ανοίγει αυτόματα μία νέα σελίδα. (Στο FrontPage
Πίνακες. ετικέτα <table>
Πίνακες ετικέτα σύνταξη κελί 1 κελί 2 κελί 3 κελί 4 : πίνακας : γραμμή : κελί Ιδιότητα border border : ορίζει
Κείμενο ASCII Unicode - HTML. Κωδικοποίηση ASCII / Unicode HTML
Κείμενο ASCII Unicode - HTML Κωδικοποίηση ASCII / Unicode HTML Κείμενο και Τυπογραφία Αναπαράσταση κειμένου Αρχικά οι ανάγκες των προγραμμάτων απαιτούσαν ένα περιορισμένο σύνολο κωδικοποιημένων χαρακτήρων
ΚΕΦΑΛΑΙΟ 12. Η μάθηση στο Διαδίκτυο. ΚΕΦΑΛΑΙΟ 12 Η μάθηση στο Διαδίκτυο. Α Γενικού Λυκείου
Α Γενικού Λυκείου ΚΕΦΑΛΑΙΟ 12 Η μάθηση στο Διαδίκτυο 103 ΚΕΦΑΛΑΙΟ 12 Η μάθηση στο Διαδίκτυο Διδακτικές ενότητες 12.1 Η μάθηση στο Διαδίκτυο 12.2 Πλατφόρμες λογισμικού για τη μάθηση στο Διαδίκτυο Διδακτικοί