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

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

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

Transcript

1 Σχεδίαση και Ανάπτυξη Ιστότοπων Η Γλώσσα HTML Παρουσίαση 4 η 1 Βελώνης Γεώργιος Καθηγητής

2 Περιεχόμενα Κανόνες σύνταξης της HTML Δομή σελίδας και βασικές ετικέτες Ιεραρχία (Hierarchy) Κανόνες σύνταξης της XHTML Κανόνες σύνταξης της HTML5 Έλεγχος εγκυρότητας κώδικα HTML 2

3 Κανόνες σύνταξης της HTML Η HTML (HyperText Markup Language) είναι η βασική γλώσσα ανάπτυξης ιστοσελίδων στο Διαδίκτυο. Χρησιμοποιείται για να την επισήμανση τμημάτων κειμένου, ώστε αυτό να εμφανίζεται καλύτερα μορφοποιημένο και επιπλέον επιτρέπει την ενσωμάτωση ήχου και εικόνων στις ιστοσελίδες. Αρχικά υποστήριζε μόνο την μορφοποίηση κειμένου, αλλά σε μεταγενέστερες εκδόσεις ενσωμάτωσε σχεδιαστικές τεχνικές κ.ά. Η γλώσσα χρησιμοποιεί ένα αριθμό από ετικέτες (tags), όχι μόνο για την μορφοποίηση του κειμένου, αλλά και για την δημιουργία συνδέσμων (links), για την εισαγωγή εικόνων, ήχου, βίντεο κ.ά. 3

4 Κανόνες σύνταξης της HTML Όταν ένας web browser ανοίγει ένα αρχείο HTML, τα tags μεταφράζονται σε κατάλληλα χαρακτηριστικά, με αποτελέσματα στην εμφάνιση και στην λειτουργικότητα της συγκεκριμένης σελίδας. Τα tags υπακούουν σε συγκεκριμένους κανόνες σύνταξης, ορισμένοι από τους οποίους είναι οι εξής: Όλες οι ετικέτες εσωκλείονται μεταξύ των χαρακτήρων «<» και «>». Κάθε τι που βρίσκεται μεταξύ των χαρακτήρων «<!- -» και «- ->», αποτελεί σχόλιο και δεν εμφανίζεται από το browser. Παράδειγμα: <!- - Αυτό είναι ένα σχόλιο - -> 4

5 Κανόνες σύνταξης της HTML Υπάρχουν δύο ειδών ετικέτες, οι απλές ετικέτες της μορφής <ετικέτα>, όπως η ετικέτα <br>, η οποία δηλώνει αλλαγή γραμμής στο κείμενο και οι διπλές. Οι διπλές ετικέτες είναι της μορφής <ετικέτα> </ετικέτα>, όπως οι ετικέτες <b> Έντονη γραφή </b>, όπου υπάρχει μία ετικέτα αρχής και μία ετικέτα τέλους. Οι διπλές ετικέτες συνήθως περιβάλλουν το κείμενο, τη διαμόρφωση του οποίου καθορίζουν. Η ετικέτα τέλους ακυρώνει την ισχύ της πρώτης ετικέτας και πάντα περιέχει το χαρακτήρα «/». Αυτό ισχύει για όλες τις διπλές ετικέτες. 5

6 Κανόνες σύνταξης της HTML Ορισμένες ετικέτες μπορεί να ακολουθούνται από παραμέτρους, οι οποίες διευκρινίζουν τη λειτουργία τους. Για παράδειγμα, η ετικέτα <body> μπορεί να εμφανιστεί και με παραμέτρους, όπως το χρώμα φόντου της σελίδας (π.χ. <body bgcolor= #cccccc>), το χρώμα των συνδέσμων κ.ά. Στην προκειμένη περίπτωση, χρησιμοποιώντας την παράμετρο bgcolor, ορίζεται το χρώμα του υπόβαθρου της σελίδας σε γκρίζο. Αν δεν χρησιμοποιούσατε παράμετρο, τότε το χρώμα του υπόβαθρου θα ήταν λευκό, το οποίο και αποτελεί την προκαθορισμένη ρύθμιση της ετικέτας <body>. Οι ετικέτες μπορεί να γράφονται με πεζά ή κεφαλαία γράμματα της λατινικής αλφαβήτου. Είναι καλό πάντως να υπάρχει μία ομοιομορφία στον τρόπο γραφής, ώστε ο κώδικας να είναι ευανάγνωστος. 6

7 Κανόνες σύνταξης της HTML Κενές γραμμές, καθώς και περισσότερα του ενός κενά μεταξύ των λέξεων στο κείμενο, που περιλαμβάνει μια ιστοσελίδα δε λαμβάνονται υπόψη. Ο κώδικας HTML πρέπει να εσωκλείεται μέσα στις ετικέτες <html> και </html>. Η ιδιότητα lang μπορεί να εφαρμοστεί σε όλες τις ετικέτες της HTML5, ενώ στην HTML 4.01 δε μπορεί να χρησιμοποιηθεί με τις ετικέτες <base>, <br>, <frame>, <frameset>, <hr>, <iframe>, <param> και <script>. Η χρήση της γίνεται για να δηλωθεί η γλώσσα μιας ιστοσελίδας ή ενός τμήματός της. Αυτό έχει ως στόχο να βοηθήσει τα spiders των μηχανών αναζήτησης στη συλλογή πληροφοριών, τη μορφοποίηση της σελίδας και την τεχνολογία ανάγνωσης της οθόνης, για την υποβοήθηση ατόμων με προβλήματα στην όραση, π.χ. <html lang="el">. 7

8 Κανόνες σύνταξης της HTML Όλα τα έγγραφα της HTML, καθώς και της XHTML, πρέπει να έχουν μια δήλωση <!DOCTYPE> η οποία ορίζει τον τύπο του εγγράφου (DTD - Document Type Definition). Η δήλωση <! DOCTYPE> δεν είναι μια ετικέτα HTML, αλλά μια οδηγία στο web browser για την έκδοση της HTML, στην οποία είναι γραμμένη σελίδα. Για το λόγο αυτό, δε πρέπει να συνοδεύεται από tag κλεισίματος και δε κάνει διάκριση πεζών-κεφαλαίων. Στην HTML 4.01, η δήλωση <! DOCTYPE> αναφέρεται σε έναν DTD, επειδή η έκδοση αυτή βασίστηκε στην SGML. Το DTD καθορίζει τους κανόνες για τη γλώσσα σήμανσης, έτσι ώστε οι browsers να παρουσιάζουν σωστά το περιεχόμενο. 8

9 Κανόνες σύνταξης της HTML Η ανατομία ενός DOCTYPE 9

10 Κανόνες σύνταξης της HTML Το HTML, όπως και το XHTML στάνταρτ ορίζει τρεις τύπους ορισμού εγγράφου (DTD), όπου ο πιο κοινός είναι ο Transitional. Οι άλλοι δύο είναι ο Strict και ο Frameset. HTML 4.01 Strict: Αυτός ο τύπος περιέχει όλα τα στοιχεία και τις ιδιότητες της HTML, αλλά δε περιλαμβάνει στοιχεία που έχουν καταργηθεί, όπως οι ετικέτες <font>, <cite> κ.λπ., ενώ και τα frames (πλαίσια) δεν είναι επίσης επιτρεπτά. Παράδειγμα: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " 10

11 Κανόνες σύνταξης της HTML HTML 4.01 Transitional: Είναι ο κατάλληλος τύπος, όταν σε ένα έγγραφο γίνεται χρήση και ετικετών που έχουν αποκλειστεί από το πρότυπο της HTML 4.01, όπως οι <font>, <cite> κ.λπ. Τα frames δεν είναι επιτρεπτά, όπως και με τον τύπο Strict. Παράδειγμα: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " HTML 4.01 Frameset: Αυτός ο τύπος είναι ισοδύναμος με το HTML 4.01 Transitional, με τη διαφορά ότι τα πλαίσια είναι επιτρεπτά. Παράδειγμα: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" " 11

12 Δομή σελίδας και βασικές ετικέτες Όπως προαναφέρθηκε, ο κώδικας κάθε σελίδας HTML αρχίζει με την ετικέτα <HTML> και τελειώνει με την </HTML>. Μεταξύ αυτής της διπλής ετικέτας γράφεται ο κώδικας της HTML σελίδας και πριν τη δήλωσή της ετικέτας καλό θα είναι να προηγείται η ετικέτα <!DOCTYPE>. Ο ρόλος της απλής αυτής ετικέτας, είναι να αναγνωρίσει ο browser ότι το κείμενο που περιέχει είναι κώδικας HTML, έτσι ώστε να το ερμηνεύσει ανάλογα. Ο κώδικας HTML αποτελείται από δύο βασικά τμήματα: την επικεφαλίδα και το κυρίως σώμα της σελίδας. Η επικεφαλίδα ορίζεται μέσα σε διπλή ετικέτα <HEAD> και </HEAD>, ενώ το κυρίως σώμα της σελίδας ορίζεται μέσα στη διπλή ετικέτα <BODY> και </BODY>. 12

13 Δομή σελίδας και βασικές ετικέτες Η επικεφαλίδα συνήθως περιγράφει το περιεχόμενο της σελίδας. Ο τίτλος της σελίδας, ο οποίος εμφανίζεται στο πάνω μέρος του browser, περιέχεται στην επικεφαλίδα και μέσα στη διπλή ετικέτα <TITLE> </TITLE>. Παράδειγμα: <head> <title> Εδώ τοποθετείται ο τίτλος της σελίδας </title> </head> Το κυρίως σώμα της σελίδας ξεκινά αμέσως μετά την επικεφαλίδα και περιλαμβάνει όλα τα συστατικά στοιχεία της σελίδας, όπως κείμενο, εικόνες, ήχους, συνδέσμους κ.λπ. 13

14 Δομή σελίδας και βασικές ετικέτες HTML κώδικας Επικεφαλίδα Κυρίως Σώμα <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <html lang="el"> <head> </head> <body> </body> </html> <title>η πρώτη σελίδα</title> <meta charset="utf-8" /> Η πρώτη μου σελίδα στο Διαδίκτυο 14

15 Δομή σελίδας και βασικές ετικέτες Κείμενο σελίδας Τίτλος σελίδας Οπτικό αποτέλεσμα μετάφρασης κώδικα από έναν browser Σημείωση: Η δήλωση <meta charset="utf-8"/> στο τμήμα <head>, είναι απαραίτητη για την άμεση κωδικοποίηση της σελίδας στην Ελληνική γλώσσα από το browser. 15

16 Δομή σελίδας και βασικές ετικέτες Κείμενο σελίδας Τίτλος σελίδας Αποτέλεσμα απεικόνισης κειμένου στην Ελληνική γλώσσα από έναν browser, με παράληψη της δήλωσης <meta charset="utf-8"/> 16

17 Ιεραρχία (Hierarchy) Στην HTML, κάθε στοιχείο αποτελεί «απόγονο» (descendant) κάποιου άλλου στοιχείου, εκτός από το στοιχείο <html>, που αποτελεί πρόγονο (anchestor) για κάθε στοιχείο στη σελίδα σας. Το κάθε στοιχείο μπορεί να έχει και δικούς του απογόνους, εκτός αν πρόκειται για μονές ετικέτες (self closing στοιχεία), όπως η img και η input, οι οποίες δε διαθέτουν tag κλεισίματος (end tag). Έτσι διαμορφώνεται μια ιεραρχία, η οποία αποτελεί το DOM tree (Document Object Model tree). Παράδειγμα Ιεραρχίας 17

18 Ιεραρχία (Hierarchy) 18 Document Object Model tree

19 Ιεραρχία (Hierarchy) Παράδειγμα: <html> <head> <title>παράδειγμα DOM</title> </head> <body> <h1>σχολείο</h1> <p>1ο ΕΠΑΛ Κατερίνης</p> </body> </html> head html body title h1 p #text #text #text To DOM tree του παραδείγματος 19

20 Ιεραρχία (Hierarchy) Ανάλυση του κώδικα HTML του παραδείγματος (διαφ. 19): <html> είναι ο κόμβος ρίζα και δεν έχει γονείς <html> είναι ο γονιός των <head> και <body> <head> είναι το 1 ο παιδί του <html> <body> είναι το τελευταίο παιδί του <html> Και <head> έχει ένα παιδί <title> <title> έχει ένα παιδί (το κείμενο) "Παράδειγμα DOM" <body> έχει δύο παιδία <h1> και <p> <h1> έχει ένα παιδί (το κείμενο) "Σχολείο" <p> έχει ένα παιδί (το κείμενο) "1ο ΕΠΑΛ Κατερίνης" <h1> και <p> είναι αδέλφια 20

21 Κανόνες σύνταξης της XHTML Η XHTML είναι ότι και η HTML μιας και αποτελεί απλά επέκταση αυτής. Πιο συγκεκριμένα αποτελεί συνδυασμό με την XML, με τη διαφορά ότι ακολουθεί κάποιους επιπλέον αυστηρούς κανόνες δόμησης κυρίως. Σήμερα όλοι οι browsers είναι συμβατοί και μπορούν να «διαβάσουν» XHTML κώδικα, ενώ όλο και περισσότερες ιστοσελίδες χρησιμοποιούν το πρότυπο της XHTML ή της HTML5, αντί αυτού της HTML. Οι κανόνες σύνταξης που υπακούει η XHTML είναι οι παρακάτω: Ετικέτες, ιδιότητες και τιμές γράφονται με πεζούς χαρακτήρες. Παράδειγμα: <p align="center"> μπλα... μπλα...</p> 21

22 Κανόνες σύνταξης της XHTML Οι τιμές των ιδιοτήτων θα πρέπει να εσωκλείονται σε διπλά εισαγωγικά. Παράδειγμα: <hr align="center" size="7" width="50%"/> Όλες οι XHTML ετικέτες πρέπει να κλείνουν. Μερικές ετικέτες όπως η <br>, η <img>, και η <input> δεν έχουν ετικέτα τέλους. Στην περίπτωση αυτή, βάζουμε «/» πριν το δεξιό κλείσιμο της ετικέτας. Παράδειγμα: <img src="./logo.gif" border="2"/><br/> Οι XHTML ετικέτες πρέπει να είναι σωστά φωλιασμένες (η πρώτη που ανοίγει, κλείνει τελευταία). Παράδειγμα: <b><i><u>μαθαίνω XHTML</u></i></b> 22

23 Κανόνες σύνταξης της XHTML Ο κώδικας XHTML, όπως και αυτός της HTML, πρέπει να εσωκλείεται από μια ετικέτα-ρίζα, δηλαδή οτιδήποτε γράφεται μέσα στον κώδικα πρέπει να υπάρχει μέσα στις ετικέτες <html> και </html>. Η ιδιότητα lang μπορεί να εφαρμοστεί σχεδόν σε όλες τις ετικέτες της XHTML και προσδιορίζει τη γλώσσα, στην οποία είναι γραμμένο το κείμενο. Παράδειγμα: <html xmlns=" lang="el" xml:lang="el"> 23

24 Κανόνες σύνταξης της XHTML Η HTML 4.01 ορίζει την ιδιότητα (attribute) name, για τα στοιχεία a, applet, frame, iframe, img και map. Στην XHTML, στη θέση της ιδιότητας name χρησιμοποιείται η ιδιότητα id. Παράδειγμα: <img src= "myface.gif" id="pic1"/> Η σύντμηση δεν επιτρέπεται στην XHTML, όπως σε ορισμένες περιπτώσεις στην HTML, όπου μπορείτε να παραλείψετε την τιμή μιας ιδιότητας, όταν αυτή είναι ίδια με την ιδιότητα. Παράδειγμα XHTML: <input type="radio" checked="checked"/> Παράδειγμα HTML: <input type="radio" checked/> 24

25 Κανόνες σύνταξης της XHTML HTML XHTML compact compact="compact" checked checked="checked" declare declare="declare" readonly readonly="readonly" disabled disabled="disabled" selected selected="selected" defer defer="defer" ismap ismap="ismap" nohref nohref="nohref" noshade noshade="noshade" nowrap nowrap="nowrap" multiple multiple="multiple" noresize noresize="noresize" Συντμήσεις των ιδιοτήτων που υπάρχουν στην HTML και οι αντιστοιχίσεις τους στην XHTML 25

26 Κανόνες σύνταξης της XHTML Όλα τα έγγραφα της XHTML πρέπει να έχουν μια δήλωση DOCTYPE, η οποία ορίζει τον τύπο του εγγράφου. Επίσης πρέπει να υπάρχουν τα στοιχεία html, head και body και το στοιχείο title πρέπει να βρίσκεται μέσα στο στοιχείο head. 26

27 Κανόνες σύνταξης της XHTML Το XHTML στάνταρτ ορίζει επίσης τρεις DTD, τους Transitional, Frameset και Strict. XHTML 1.0 Strict: Χρησιμοποιήστε το όταν θέλετε να τηρήσετε πραγματικά τους κανόνες του προτύπου της XHTML 1.0. Σε αυτού του τύπου τα έγγραφα, μπορείτε να χρησιμοποιήσετε ετικέτες XHTML αλλά και κώδικα CSS, σύμφωνα με το πρότυπο της XHTML 1.0. Επίσης σε αυτό το DTD δεν θα πρέπει να έχετε ετικέτες, οι οποίες έχουν αποκλειστεί από το πρότυπο της HTML 4.01 (<base>, <br>, <frame>, <frameset>, <hr>, <iframe>, <param> και <script>). Παράδειγμα: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " DTD/xhtml1-strict.dtd"> 27

28 Κανόνες σύνταξης της XHTML XHTML 1.0 Transitional: Χρησιμοποιήστε το, όταν θέλετε να χρησιμοποιήσετε στο έγγραφό σας και ετικέτες που έχουν αποκλειστεί από το πρότυπο της HTML 4.01, όπως οι <font>, <cite> κ.λπ. Παράδειγμα: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " xhtml1/dtd/xhtml1-transitional.dtd"> XHTML 1.0 Frameset: Χρησιμοποιήστε το, όταν θέλετε να χρησιμοποιήσετε frames, τα οποία δε συνιστά το πρότυπο της XHTML 1.0. Παράδειγμα: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" " xhtml1/dtd/xhtml1-frameset.dtd"> 28

29 Κανόνες σύνταξης της XHTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" lang="el" xml:lang="el"> <head> <title>η πρώτη σελίδα</title> <meta charset="utf-8"/> </head> <body> Η πρώτη μου σελίδα στο Διαδίκτυο </body> </html> 29 XHTML κώδικας

30 Κανόνες σύνταξης της HTML5 Λόγω των εντυπωσιακών της δυνατοτήτων, είναι σχεδόν βέβαιο ότι η HTML5 θα είναι το μέλλον στον Παγκόσμιο Ιστό. Στην HTML5 δεν υπάρχουν πολλοί νέοι κανόνες σύνταξης, παρά μόνο κάποιες αλλαγές σε παλιούς, όπως: Είναι περισσότερο ευέλικτη όσον αφορά στη σύνταξή της. Για παράδειγμα, δε κάνει διάκριση πεζών-κεφαλαίων (case insensitive) και επιτρέπει τέσσερις διαφορετικές μορφές σύνταξης των ιδιοτήτων. Τύπος Empty Unquoted Παράδειγμα <input type="text" value="html" disabled> <input type="text" value=html> Double-quoted <input type="text" value="html 5"> Single-quoted <input type="text" value='html 5'> 30

31 Κανόνες σύνταξης της HTML5 Η δήλωση doctype έχει μια μοναδική μορφή. Παράδειγμα: <!DOCTYPE html> Δεν χρειάζεται να χρησιμοποιήσετε Τύπο για τις συνδέσεις και τα Scripts. Παραδείγματα: <link rel="stylesheet" href="path/to/stylesheet.css"> αντί για <link rel="stylesheet" href="path/to/stylesheet.css" type="text/css"> <script src="path/to/javascript.js"> </script> αντί για <script type="text/javascript" src="path/to/javascript.js"> </script> 31

32 Κανόνες σύνταξης της HTML5 <!DOCTYPE html> <html lang="el"> <head> </head> <body> <title> Η πρώτη σελίδα </title> <meta charset="utf-8"/> Η πρώτη μου σελίδα στο Διαδίκτυο </body> </html> 32 Μορφή ενός HTML5 εγγράφου

33 Έλεγχος εγκυρότητας κώδικα HTML (Markup Validation Service) Για τον έλεγχο της εγκυρότητας του HTML κώδικα της σελίδας σας, μπορείτε να κάνετε χρήση ενός από τα πολλά ειδικά sites, που μπορείτε να βρείτε και να χρησιμοποιήσετε στο Διαδίκτυο. Για παράδειγμα, ένα από αυτά είναι το site του W3C, που είναι ο υπεύθυνος οργανισμός για την εξέλιξη της HTML: Κατά την επίσκεψή σας στο site, έχετε να επιλέξετε τον τρόπο ελέγχου της εγκυρότητας του κώδικά σας, μέσα από τις τρεις επιλογές: Πληκτρολογώντας το URI (Uniform Resource Identifier) στο κατάλληλο πλαίσιο. Ανεβάζοντας το html αρχείο για έλεγχο. Άμεσα, επικολλώντας τον κώδικα html στο κατάλληλο πλαίσιο. 33

34 Έλεγχος εγκυρότητας κώδικα HTML (Markup Validation Service) 34 Αρχικό παράθυρο του Markup Validation Service της W3C

35 Έλεγχος εγκυρότητας κώδικα HTML (Markup Validation Service) 35 Άμεσος έλεγχος εγκυρότητας κώδικα HTML

36 Έλεγχος εγκυρότητας κώδικα HTML (Markup Validation Service) 36 Επισήμανση εσφαλμένου κώδικα HTML

37 Έλεγχος εγκυρότητας κώδικα HTML (Markup Validation Service) 37 Επισήμανση εσφαλμένου κώδικα HTML

38 Έλεγχος εγκυρότητας κώδικα HTML (Markup Validation Service) Στο Διαδίκτυο μπορείτε να βρείτε επίσης εφαρμογές, δωρεάν ή μη, οι οποίες πραγματοποιούν έλεγχο της εγκυρότητας του κώδικά σας, όπως το CSE HTML Validator Lite. 38 Περιβάλλον εφαρμογής CSE HTML Validator Lite

39 Πηγές Προγραμματιστικά Εργαλεία για το Διαδίκτυο: Σχολικό βιβλίο W3schools ( WLearn ( 39

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

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

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

Η γλώσσα XHTML: διαφορές με HTML, μετατροπή

Η γλώσσα XHTML: διαφορές με HTML, μετατροπή Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #2 0 : Εισαγωγή στην XHTML Γαβαλάς Δαμιανός dgavalas@aegean.gr Στόχοι εργαστηρίου Η γλώσσα XHTML: διαφορές με HTML, μετατροπή HTML εγγράφων σε XTML, Έλεγχος εγκυρότητας

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Σχεδιασμός και Ανάπτυξη Ιστότοπων Βελώνης Γεώργιος Καθηγητής Σχεδιασμός και Ανάπτυξη Ιστότοπων Εισαγωγή στα CSS (Cascading Style Sheets) Παρουσίαση 13 η 1 Βελώνης Γεώργιος Καθηγητής Περιεχόμενα Εισαγωγή Πλεονεκτήματα χρήσης των CSS Βασικοί

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

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

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

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

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

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

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

Γλώσσες Σήµανσης (Markup Languages) Τεχνολογία ιαδικτύου και Ηλεκτρονικό Εµπόριο

Γλώσσες Σήµανσης (Markup Languages) Τεχνολογία ιαδικτύου και Ηλεκτρονικό Εµπόριο Γλώσσες Σήµανσης (Markup Languages) Τεχνολογία ιαδικτύου και Ηλεκτρονικό Εµπόριο 1 Γλώσσες Σήµανσης Γλώσσες σήµανσης: Αρχικά για τον καθορισµό εµφάνισης σελίδων, γραµµατοσειρών. Στη συνέχεια επεκτάθηκαν

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

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

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

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

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

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

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

Περιεχόμενα. Γαβαλάς Δαμιανός Τρέχον status της HTML

Περιεχόμενα. Γαβαλάς Δαμιανός Τρέχον status της HTML Δικτυακά Πολυμέσα ΙΙ Διάλεξη #2 η : Βασικές έννοιες σχεδιασμού στο web Γαβαλάς Δαμιανός dgavalas@aegean.gr Περιεχόμενα Τρέχον status της HTML Μετάβαση από την HTML στην XHTML Κλέ Καλές πρακτικές συγγραφής

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Γαβαλάς αµιανός

Γαβαλάς αµιανός Πανεπιστήµιο Αιγαίου Σχολή Κοινωνικών Επιστηµών Τµήµα Πολιτισµικής Τεχνολογίας Και Επικοινωνίας ικτυακά Πολυµέσα Ι (Β Έτος, 3ο εξ) Εργαστήριο #1ο: Εισαγωγή στην HTML Γαβαλάς αµιανός dgavalas@aegean.gr

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

ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML. Decode, ISSEL. Θεοδόσης Σουργκούνης Αντώνης Χρυσόπουλος Στέλιος Μόσχογλου

ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML. Decode, ISSEL. Θεοδόσης Σουργκούνης Αντώνης Χρυσόπουλος Στέλιος Μόσχογλου ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML Θεοδόσης Σουργκούνης Αντώνης Χρυσόπουλος Στέλιος Μόσχογλου Decode, ISSEL Τμήμα Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών, Αριστοτέλειο Πανεπιστήμιο Θεσσαλονίκης Στόχος της ώρας

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

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

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

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

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

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

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

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

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

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

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

ΚΕΡΑΜΟΠΟΥΛΟΣ ΕΥΚΛΕΙΔΗΣ ΚΕΡΑΜΟΠΟΥΛΟΣ ΕΥΚΛΕΙΔΗΣ H HTML είναι το ακρωνύμιο των λέξεων HyperText Markup Language (γλώσσα μορφοποίησης υπερκειμένου) και είναι η βασική γλώσσα δόμησης σελίδων του World Wide Web. 2 Βασικά χαρακτηριστικά

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

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

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

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

HTML 1. Στόχος της ώρας 11/3/2014. Εισαγωγή της γλώσσας HTML σε αρχάριο επίπεδο:

HTML 1. Στόχος της ώρας 11/3/2014. Εισαγωγή της γλώσσας HTML σε αρχάριο επίπεδο: HTML 1 Στόχος της ώρας Τι είναι HTML και CSS; ιαχωρισμός περιεχομένου/μορφοποίησης Πότε χρησιμοποιούμε το ένα και πότε το άλλο; Εισαγωγή της γλώσσας HTML σε αρχάριο επίπεδο: Βασική σύνταξη, ετικέτες Τίτλοι,

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

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

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

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

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

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

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

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

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

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

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

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

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

Περιεχόμενο και μορφοποίηση. Πότε χρησιμοποιώ το ένα και πότε το άλλο.

Περιεχόμενο και μορφοποίηση. Πότε χρησιμοποιώ το ένα και πότε το άλλο. ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML Περιεχόμενα Τι είναι HTML και CSS; Περιεχόμενο και μορφοποίηση. Πότε χρησιμοποιώ το ένα και πότε το άλλο. Βασική δομή της HTML. XML DOCTYPE Τίτλοι, παράγραφοι, επικεφαλίδες Λίστες, σύνδεσμοι,

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

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

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

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

Εισαγωγή στην Επιστήμη Υπολογιστών. Εισαγωγή στην HTML. Άννα Κεφάλα Παναγιώτα Μιχόλια

Εισαγωγή στην Επιστήμη Υπολογιστών. Εισαγωγή στην HTML. Άννα Κεφάλα Παναγιώτα Μιχόλια Εισαγωγή στην Επιστήμη Υπολογιστών Εισαγωγή στην HTML Άννα Κεφάλα Παναγιώτα Μιχόλια Εργαστηριακές Σημειώσεις ΕΙΣΑΓΩΓΗ ΣΤΗ ΓΛΩΣΣΑ HTML ΜΕΡΟΣ Β': CSS ΚΑΙ FORMS 2 Cascading Style Sheets (CSS) Cascading Style

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

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

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

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

Σήμανση και Μορφοποίηση: HTML και CSS

Σήμανση και Μορφοποίηση: HTML και CSS Κεφάλαιο 4 ο Σήμανση και Μορφοποίηση: HTML και CSS Για την παρουσίαση της πληροφορίας στον Παγκόσμιο Ιστό (World Wide Web) α- παιτείται μία γλώσσα που να είναι κατανοητή από όλους, ένα είδος δημόσιας μητρικής

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

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

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

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

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

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

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

Φόρμες. Γενικοί κανόνες. Η ετικέτα <form>

Φόρμες. Γενικοί κανόνες. Η ετικέτα <form> Φόρμες Οι φόρμες περιέχουν τα στοιχεία φόρμας στο οποία ένας χρήστης μπορεί να εισαγάγει δεδομένα τα οποία στη συνέχεια αποστέλλονται σε έναν εξυπηρετητή για παραπέρα επεξεργασία. Γενικοί κανόνες Για τις

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

Σταύρος Καουκάκης Ευτύχιος Βαβουράκης

Σταύρος Καουκάκης Ευτύχιος Βαβουράκης ΠΑΝΕΠΙΣΤΗΜΙΟ ΚΡΗΤΗΣ 1 ο ΣΧΟΛΕΙΟ ΚΩΔΙΚΑ «Βασικά Θέματα Προγραμματισμού στην Ανάπτυξη Δυναμικών Διαδικτυακών Εφαρμογών» (Part 1) Σταύρος Καουκάκης Ευτύχιος Βαβουράκης 1 Λίγα Λόγια για το Σχολείο Μονάδες

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

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

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

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

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

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

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

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

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

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

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

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

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

Γιώργος Χρ. Μακρής. Σύγχρονες Γλώσσες Σήμανσης του Διαδικτύου. Αναπαράσταση Μαθηματικών κειμένων στο διαδίκτυο. Η Γλώσσα MathML

Γιώργος Χρ. Μακρής. Σύγχρονες Γλώσσες Σήμανσης του Διαδικτύου. Αναπαράσταση Μαθηματικών κειμένων στο διαδίκτυο. Η Γλώσσα MathML Σύγχρονες Γλώσσες Σήμανσης του Διαδικτύου. Αναπαράσταση Μαθηματικών κειμένων στο διαδίκτυο. Η Γλώσσα MathML Γιώργος Χρ. Μακρής Θεσσαλονίκη, Μάρτιος 2012 Αναπαράσταση Μαθηματικών Κειμένων στο διαδίκτυο

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

ΠΑΝΕΠΙΣΤΗΜΙΟ ΠΑΤΡΩΝ ΤΜΗΜΑ ΜΗΧΑΝΙΚΩΝ Η/Υ & ΠΛΗΡΟΦΟΡΙΚΗΣ ΔΙΠΛΩΜΑΤΙΚΗ ΕΡΓΑΣΙΑ ΜΕΘΟΔΟΙ ΒΕΛΤΙΣΤΟΠΟΙΗΣΗΣ ΚΑΙ ΠΡΟΣΑΡΜΟΣΤΙΚΟΤΗΤΑΣ ΕΦΑΡΜΟΓΩΝ ΓΙΑ ΤΟ MOBILE WEB

ΠΑΝΕΠΙΣΤΗΜΙΟ ΠΑΤΡΩΝ ΤΜΗΜΑ ΜΗΧΑΝΙΚΩΝ Η/Υ & ΠΛΗΡΟΦΟΡΙΚΗΣ ΔΙΠΛΩΜΑΤΙΚΗ ΕΡΓΑΣΙΑ ΜΕΘΟΔΟΙ ΒΕΛΤΙΣΤΟΠΟΙΗΣΗΣ ΚΑΙ ΠΡΟΣΑΡΜΟΣΤΙΚΟΤΗΤΑΣ ΕΦΑΡΜΟΓΩΝ ΓΙΑ ΤΟ MOBILE WEB ΠΑΝΕΠΙΣΤΗΜΙΟ ΠΑΤΡΩΝ ΤΜΗΜΑ ΜΗΧΑΝΙΚΩΝ Η/Υ & ΠΛΗΡΟΦΟΡΙΚΗΣ ΔΙΠΛΩΜΑΤΙΚΗ ΕΡΓΑΣΙΑ ΜΕΘΟΔΟΙ ΒΕΛΤΙΣΤΟΠΟΙΗΣΗΣ ΚΑΙ ΠΡΟΣΑΡΜΟΣΤΙΚΟΤΗΤΑΣ ΕΦΑΡΜΟΓΩΝ ΓΙΑ ΤΟ MOBILE WEB ΒΕΡΡΑ ΜΑΡΙΑ Α.Μ. 3065 ΕΠΙΒΛΕΠΩΝ ΚΑΘΗΓΗΤΗΣ: ΘΕΟΔΩΡΟΣ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Κείμενο ASCII Unicode - HTML. Κωδικοποίηση ASCII / Unicode HTML

Κείμενο ASCII Unicode - HTML. Κωδικοποίηση ASCII / Unicode HTML Κείμενο ASCII Unicode - HTML Κωδικοποίηση ASCII / Unicode HTML Κείμενο και Τυπογραφία Αναπαράσταση κειμένου Αρχικά οι ανάγκες των προγραμμάτων απαιτούσαν ένα περιορισμένο σύνολο κωδικοποιημένων χαρακτήρων

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

Μαθηματικά Λογισμικά και Γλώσσες Αναπαράστασης Γνώσης

Μαθηματικά Λογισμικά και Γλώσσες Αναπαράστασης Γνώσης Μαθηματικά Λογισμικά και Γλώσσες Γεώργιος Χρ. Μακρής 20 Απριλίου 2015 Γλώσσες Σήμανσης (Annotation ή Markup Languages) Για την αποθήκευση δομημένης πληροφορίας χρησιμοποιούνται γλώσσες σήμανσης. Η δομημένη

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

Cascading Style Sheets

Cascading Style Sheets Cascading Style Sheets CSS είναι το ακρωνύµιο του Cascading Style Sheets (Επικαλυπτόµενα φύλλα στυλ). CSS είναι µια γλώσσα style δηλ. µια γλώσσα η οποία καθορίζει τη εµφάνιση HTML εγγράφων. Για παράδειγµα,

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

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

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

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

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

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

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

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

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

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

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

Εισαγωγή στην HTML (1) Εισαγωγή στην HTML (1) Πανεπιστήμιο Πελοποννήσου Τμήμα Επιστήμης & Τεχνολογίας Τηλεπικοινωνιών Ευάγγελος Α. Κοσμάτος HTML HyperText Mark-up Language Καθορίζει τον τρόπο που ο browser εμφανίζει τα διάφορα

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

ΑΝΑΠΑΡΑΣΤΑΣΗ ΓΝΩΣΗΣ ΣΤΟΝ ΠΑΓΚΟΣΜΙΟ ΙΣΤΟ

ΑΝΑΠΑΡΑΣΤΑΣΗ ΓΝΩΣΗΣ ΣΤΟΝ ΠΑΓΚΟΣΜΙΟ ΙΣΤΟ ΑΝΑΠΑΡΑΣΤΑΣΗ ΓΝΩΣΗΣ ΣΤΟΝ ΠΑΓΚΟΣΜΙΟ ΙΣΤΟ XML (extended Markup Language) Ι. Χατζηλυγερούδης ΕΙΣΑΓΩΓΗ SGML (Standard Generalized Markup Language) Διεθνές πρότυπο ορισμού μεθόδων αναπαράστασης πληροφοριών

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

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

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

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

Βασικά στοιχεία του CSS

Βασικά στοιχεία του CSS Βασικά στοιχεία του CSS Περιεχόμενα Τι είναι CSS Πλεονεκτήματα CSS μορφοποίησης Συντακτικό του CSS Ιδιότητες CSS Εφαρμογή CSS κανόνων Επικάλυψη CSS κανόνων 2 Μορφοποίηση με HTML Η HTML είναι σχεδιασμένη

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

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

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

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

HTML... 1. Εισαγωγή στην HTML και τα CSS

HTML... 1. Εισαγωγή στην HTML και τα CSS HTML...... 1 Εισαγωγή στην HTML και τα CSS HTML...... 2 HTML. H HTML (HYPERTEXT MARKUP LANGUAGE), είναι µία γλώσσα η οποία «λέει» στον υπολογιστή πως θα πρέπει να εµφανίσει µία ιστοσελίδα. Τα αρχεία στα

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

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

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

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

2. Επιλέξτε την σωστή ετικέτα HTML που προσφέρει το μεγαλύτερο φόντο κειμένου. <head> <heading> <h6> <h1>

2. Επιλέξτε την σωστή ετικέτα HTML που προσφέρει το μεγαλύτερο φόντο κειμένου. <head> <heading> <h6> <h1> ΤΜΗΜΑ ΗΛΕΚΤΡΟΝΙΚΗΣ Τομέας Υπολογιστικών Συστημάτων και Ελέγχου Τεχνολογίες Πολυμέσων - Εφαρμογές Δρ. Β. ΒΑΛΑΜΟΝΤΕΣ Ε-mail: vala@teiath.gr Να απαντήσετε στις παρακάτω ερωτήσεις. 1. Τι σημαίνουν τα αρχικά

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

Γαβαλάς Δαμιανός dgavalas@aegean.gr. Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #3 0 : Εισαγωγή στacascading Style Sheets (CSS)

Γαβαλάς Δαμιανός dgavalas@aegean.gr. Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #3 0 : Εισαγωγή στacascading Style Sheets (CSS) Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #3 0 : Εισαγωγή στacascading Style Sheets (CSS) Γαβαλάς Δαμιανός dgavalas@aegean.gr Επικαλυπτόμενα Φύλλα Στυλ (Cascading Style Sheets, CSS) Η (X)HTML προσδιορίζει τη βασική

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

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

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

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

Διαχείριση Πληροφοριών στο Διαδίκτυο. Εργαστήριο 2

Διαχείριση Πληροφοριών στο Διαδίκτυο. Εργαστήριο 2 Διαχείριση Πληροφοριών στο Διαδίκτυο Εργαστήριο 2 Τεχνολογικό Εκπαιδευτικό Ίδρυμα Καβάλας Σχολή Διοίκησης & Οικονομίας Τμήμα Διαχείρισης Πληροφοριών Διδάσκων Μαρδύρης Βασίλειος, Διπλ. Ηλ. Μηχανικός & Μηχ.

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

Τεχνολογίες Παγκόσμιου Ιστού. 1η διάλεξη

Τεχνολογίες Παγκόσμιου Ιστού. 1η διάλεξη Τεχνολογίες Παγκόσμιου Ιστού 1η διάλεξη Χαρακτηριστικά Μαθήματος Μάθημα προγραμματισμού (και όχι μόνον) Μπορεί να εξελιχθεί σε εφιάλτη αν δεν έχετε καλή γνώση και αρκετή εμπειρία προγραμματισμού (Java)

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

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

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

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

Συλλογή και Επεξεργασία Δεδομένων με Φόρμες

Συλλογή και Επεξεργασία Δεδομένων με Φόρμες Συλλογή και Επεξεργασία Δεδομένων με Φόρμες Οι φόρμες αποτελούν τον πιο δημοφιλή τρόπο για τη συλλογή δεδομένων μέσω του World Wide Web (WWW). Επιτρέπουν στους χρήστες να επικοινωνούν με τη βοήθεια του

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

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

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

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

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

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

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

Σημασιολογικός Ιστός (Semantic Web) - XML

Σημασιολογικός Ιστός (Semantic Web) - XML Πανεπιστήμιο Πειραιώς Τμήμα Ψηφιακών Συστημάτων Σημασιολογικός Ιστός (Semantic Web) - XML 4/10/2016 Δρ. Ανδριάνα Πρέντζα Αναπληρώτρια Καθηγήτρια aprentza@unipi.gr Πανεπιστήμιο Πειραιά Τμήμα Ψηφιακών Συστημάτων

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

Διαδίκτυο: Ιστορία, Δομή, Υπηρεσίες

Διαδίκτυο: Ιστορία, Δομή, Υπηρεσίες Διαδίκτυο: Ιστορία, Δομή, Υπηρεσίες 1 η Ερώτηση (Ορισμός): Τι είναι το Διαδίκτυο; Διαδίκτυο είναι το παγκόσμιο δίκτυο όλων των επιμέρους δικτύων που έχουν συμφωνήσει σε κοινούς κανόνες επικοινωνίας και

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

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

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

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

της πληροφορίας Λίνα Μπουντούρη Εθνικό Κέντρο Τεκμηρίωσης 13ο ΠανελλήνιοΣυνέδριοΑκαδημαϊκών Βιβλιοθηκών - Κέρκυρα 2004

της πληροφορίας Λίνα Μπουντούρη Εθνικό Κέντρο Τεκμηρίωσης 13ο ΠανελλήνιοΣυνέδριοΑκαδημαϊκών Βιβλιοθηκών - Κέρκυρα 2004 example Αξιοποιώντας την τεχνολογία XML στη διαχείριση της πληροφορίας Λίνα Μπουντούρη Εθνικό Κέντρο Τεκμηρίωσης 13ο ΠανελλήνιοΣυνέδριοΑκαδημαϊκών Βιβλιοθηκών - Κέρκυρα 2004 Πρότυπα και XML Πρότυπα ενιαίο

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

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

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

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

«Σχεδιαστής ιστοσελίδων και εφαρμογών (Front End Web Developer)»

«Σχεδιαστής ιστοσελίδων και εφαρμογών (Front End Web Developer)» «Σχεδιαστής ιστοσελίδων και εφαρμογών (Front End Web Developer)» Εισαγωγή Εισαγωγικό Σημείωμα Οι σημειώσεις αυτές δεν είναι εμπορικό προϊόν. Συντάχθηκαν για τους ωφελούμενους του έργου «ΘΕΩΡΗΤΙΚΗ ΚΑΤΑΡΤΙΣΗ,

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

Θέματα Προγραμματισμού Διαδικτύου ~ HTML ~

Θέματα Προγραμματισμού Διαδικτύου ~ HTML ~ Θέματα Προγραμματισμού Διαδικτύου ~ HTML ~ Στελιος Σφακιανάκης Εαρινό 2019 Αυτή η εργασία χορηγείται με άδεια Creative Commons Αναφορά Δημιουργού - Μη Εμπορική Χρήση - Παρόμοια Διανομή 1 Προγραμματισμός

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

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

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

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

WEB HTML. Web HTML MIDI. Web 5.1: HTML LAN

WEB HTML. Web HTML MIDI. Web 5.1: HTML LAN 107 5 WEB Web HTML Perl PHP CGI Flash Plugin HTML MIDI Web HTML Web 5.1: HTML HTML HTML 5.1 Web Web HTML Web 24 LAN 5 WEB 108 Blog Web Web Web Blog PC 5.1 HTML HTML HTML html htm Windows HTML Macintosh

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

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

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

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

HTML Εργαστήριο 5. Δομή εγγράφου

HTML Εργαστήριο 5. Δομή εγγράφου Ετικέτα HTML 5 HTML Εργαστήριο 5. Δομή εγγράφου 1. Αρχικά, θα πρέπει να ορίσετε ότι η σελίδα που ακολουθεί είναι τύπου html 5. Αυτό μπορεί να επιτευχθεί προσθέτοντας στην δομή που ήδη γνωρίζετε και πριν

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

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

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

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

Μαθηματικά Λογισμικά και Γλώσσες Αναπαράστασης Γνώσης

Μαθηματικά Λογισμικά και Γλώσσες Αναπαράστασης Γνώσης Μαθηματικά Λογισμικά και Γλώσσες Δρ. Γεώργιος Χρ. Μακρής 18 Μαΐου 2018 Αναπαράσταση Μαθηματικών Κειμένων στο διαδίκτυο (υπάρχουσα κατάσταση) Περίπτωση 1: Όλο το κείμενο παρέχεται στη ιστοσελίδα με ειδική

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

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

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

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

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

ΕΠΛ 003: ΕΠΙΣΤΗΜΗ ΤΗΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΚΑΙ ΠΛΗΡΟΦΟΡΙΚΑ ΣΥΣΤΗΜΑΤΑ ΕΠΛ 003: ΕΠΙΣΤΗΜΗ ΤΗΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΚΑΙ ΠΛΗΡΟΦΟΡΙΚΑ ΣΥΣΤΗΜΑΤΑ Δρ. Κουζαπάς Δημήτριος Πανεπιστήμιο Κύπρου - Τμήμα Πληροφορικής Παγκόσμιος Ιστός Στόχοι 1 Να εξηγήσουμε τι είναι ο Παγκόσμιος Ιστός και πώς

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

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

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

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

Εισαγωγή στην Επιστήμη Υπολογιστών. Εισαγωγή στην HTML. Άννα Κεφάλα Παναγιώτα Μιχόλια

Εισαγωγή στην Επιστήμη Υπολογιστών. Εισαγωγή στην HTML. Άννα Κεφάλα Παναγιώτα Μιχόλια Εισαγωγή στην Επιστήμη Υπολογιστών Άννα Κεφάλα Παναγιώτα Μιχόλια Εργαστηριακές Σημειώσεις ΕΙΣΑΓΩΓΗ ΣΤΗ ΓΛΩΣΣΑ HTML Τί θα δούμε.. Τί είναι η HTML. Σε τί χρησιμεύει. Εκδόσεις. Tags, elements, attributes

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

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

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

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

ΕΠΛ 003: ΕΙΣΑΓΩΓΗ ΣΤΗΝ ΕΠΙΣΤΗΜΗ ΤΗΣ ΠΛΗΡΟΦΟΡΙΚΗΣ. Παγκόσμιος Ιστός

ΕΠΛ 003: ΕΙΣΑΓΩΓΗ ΣΤΗΝ ΕΠΙΣΤΗΜΗ ΤΗΣ ΠΛΗΡΟΦΟΡΙΚΗΣ. Παγκόσμιος Ιστός ΕΠΛ 003: ΕΙΣΑΓΩΓΗ ΣΤΗΝ ΕΠΙΣΤΗΜΗ ΤΗΣ ΠΛΗΡΟΦΟΡΙΚΗΣ Παγκόσμιος Ιστός Στόχοι 1 Να εξηγήσουμε τι είναι ο Παγκόσμιος Ιστός και πώς μπορεί να μας διευκολύνει στις δραστηριότητές μας. Να περιγράψουμε σύντομα την

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

Σταύρος Καουκάκης Ευτύχιος Βαβουράκης

Σταύρος Καουκάκης Ευτύχιος Βαβουράκης ΠΑΝΕΠΙΣΤΗΜΙΟ ΚΡΗΤΗΣ 1 ο ΣΧΟΛΕΙΟ ΚΩΔΙΚΑ «Βασικά Θέματα Προγραμματισμού στην Ανάπτυξη Δυναμικών Διαδικτυακών Εφαρμογών» (Part 1) Σταύρος Καουκάκης Ευτύχιος Βαβουράκης 1 Λίγα Λόγια για το Σχολείο Μονάδες

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

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

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

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

ΤΕΧΝΟΛΟΓΙΕΣ ΣΧΕΔΙΑΣΗΣ ΔΙΑΔΙΚΤΥΑΚΟΥ ΤΟΠΟΥ (Web Site Design Technologies)

ΤΕΧΝΟΛΟΓΙΕΣ ΣΧΕΔΙΑΣΗΣ ΔΙΑΔΙΚΤΥΑΚΟΥ ΤΟΠΟΥ (Web Site Design Technologies) ΕΠΛ 012 ΤΕΧΝΟΛΟΓΙΕΣ ΣΧΕΔΙΑΣΗΣ ΔΙΑΔΙΚΤΥΑΚΟΥ ΤΟΠΟΥ (Web Site Design Technologies) Διδάσκων Καθηγητής: Δημήτριος Τσουμάκος Εαρινό Εξάμηνο 2010 Βασικές Πληροφορίες Πότε: Δευτέρα & Πέμπτη 10:30-12μμ Πού: ΧΩΔ01

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

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

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

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