HyperText Mark-up Language (HTML)
|
|
- Ἀλαλά Ζάνος
- 7 χρόνια πριν
- Προβολές:
Transcript
1 Πρόγραμμα Σπουδών στις Επιστήμες της Αγωγής και της Εκπαίδευσης HyperText Mark-up Language (HTML) Εαρινό Εξάμηνο Αθανάσιος Ανδρούτσος 1
2 World Wide Web Μοντέλο Λειτουργίας Web Server/HTTP Server Mozilla Chrome Safari IE Web Client αίτηση/request HTTP απάντηση/reply IP Διευθ. & Hostname.html Αρχική Σελίδα index.htm IP Διεύθυνση Ονοματοδοσία (URL) Αποθήκη Αρχείων DNS 2
3 Web Σελίδες Περιεχόμενο (Content) + Μορφοποίηση Περιεχόμενο = Πολυμεσικό περιεχόμενο + Υπερκείμενο Κείμενο Εικόνα/κινούμενη εικόνα/βίντεο Ήχος Υπερκείμενο Μορφοποίηση Πολυμέσα Σύνδεσμοι Κείμενο: Γραμματοσειρά, μέγεθος, χρώμα, στοίχιση Εικόνες: Διαστάσεις εικόνας, εναλλακτικό κείμενο Περιεχόμενο μορφοποίηση (από λογική άποψη) Μπορεί και από φυσική άποψη (διαφορετικά αρχεία) για ευελιξία 3
4 HTML Γλώσσα για τον ορισμό του περιεχομένου και της μορφοποίησης των Web σελίδων Το συντακτικό αποτελείται από ένα σύνολο από ετικέτες (markup tags) Τα tags χρησιμοποιούνται για τον προσδιορισμό και την μορφοποίηση του περιεχομένου 4
5 Πρώτο Έγγραφο Begin End <!DOCTYPE html> <html> <head> </head> <body> </body> </html> HTML tags Προσδιορίζει ότι το έγγραφο είναι HTML <meta charset= UTF-8 > <title>η πρώτη σελίδα μου</title> <h1>η πρώτη μου επικεφαλίδα</h1> <p>η πρώτη μου παράγραφος</p> Σώμα εγγράφου Ζεύγη: Opening/Closing tag HTML5: <!DOCTYPE html> - UTF-8 default encoding Not case sensitive Επικεφαλίδα 5
6 Συντάκτες κειμένου Για την συγγραφή HTML μπορεί να χρησιμοποιηθεί οποιοσδήποτε απλός συντάκτης κειμένου. Παράδειγμα Notepad ή Notepad++ Συγγραφή Αποθήκευση ως.htm ή.html Άνοιγμα (εμφάνιση) σε οποιονδήποτε browser (Chrome/Mozilla/IE) 6
7 Βασικά στοιχεία HTML για τη συγγραφή περιεχομένου Επικεφαλίδες <h1> έως <h6> <h1> Η επικεφαλίδα μου</h1> Παράγραφοι <p> <p>η παράγραφός μου</p> Σύνδεσμοι <a href= >Οικ. Παν. Αθηνών</a> Εικόνες <img src= opa.jpg alt= ΟΠΑ width= 200 height= 100 > Τα tags μπορούν να περιέχουν και ιδιότητες (attributes) Μερικά στοιχεία δεν έχουν closing tag 7
8 Ιδιότητες (Attributes) Όλα τα στοιχεία HTML μπορούν να έχουν ιδιότητες για να προσδιορίζουν επιπλέον χαρακτηριστικά Παραδείγματα <html lang= gr > <p lang= en >Greece<p> <p title= AUEB >Athens Univ. Econ Business<p> <a href= >Οικ. Παν. Αθηνών</a> <img src= opa.jpg alt= ΟΠΑ width= 200 height= 100 > Πάντα ορίζονται στο αρχικό tag 8
9 <head> Περιέχει metadata, δηλ. δεδομένα που προσδιορίζουν τη μορφή των δεδομένων και δεν εμφανίζονται <title> <style> Internal CSS <link> External CSS <meta charset="utf-8"> 9
10 Επικεφαλίδες (Headings) <h1> Επικεφαλίδα πρώτου επιπέδου</h1> <h2> Επικεφαλίδα δευτέρου επιπέδου</h2> κλπ μέχρι <h6></h6> Χρήση και Χρησιμότητα Δομή Εγγράφου Αναζήτηση και αρχειοθέτηση από μηχανές αναζήτησης Όχι για μορφοποίηση (π.χ. Bold) <hr> οριζόντια γραμμή (horizontal rule) 10
11 Παράγραφοι <p> Ερμηνεύεται (από τους browsers) ως μία κενή γραμμή πριν και μία μετά Κενά και αλλαγές γραμμής αγνοούνται (θεωρούνται ως ένα κενό) Για ρητή αλλαγή γραμμής χρησιμοποιούμε το <br> (break) Για διατήρηση της δομής του περιεχομένου με τα κενά και τις αλλαγές γραμμής χρησιμοποιούμε το tag <pre></pre> Σχόλια <!-- Εδώ σχόλια --> 11
12 Μορφοποίηση Προεπιλεγμένο (default) στυλ Λευκό παρασκήνιο, μαύρα γράμματα, μέγεθος 12 Ιδιότητα style - style= property:value Μπορούμε να ορίσουμε styles μέσα σε tags ως ιδιότητα, στο <head> ως internal CSS και σε εξωτερικό αρχείο.css που διασυνδέουμε με το.html 12
13 Βασικό Styling Γραμματοσειρά Τύπος. style= font-family:verdana Μέγεθος. style= font-size:30px χρώμα γραμματοσειράς style= color:red style= text-align:center Bold <b></b>, italic <i></i>, underline <ins></ins> Παραδείγματα <body style="background-color:yellow"> <h1 style="color:blue">είμαι μπλε επικεφαλίδα</h1> <p style="color:green">είμαι πράσινη παράγραφος</p> <p><b>έντονα γράμματα</b>.</p> 13
14 Cascading Style Sheets (CSS) Σημεία εισαγωγής Styling Inline. Μέσα στα opening tags με το style ως ιδιότητα Internal. Μέσα στο <head> External. Σε εξωτερικό αρχείο CSS και στη συνέχεια link μέσα στο <head> Συντακτικό CSS Στοιχείο html { CSS_ιδιότητα:CSS_τιμή ; CSS_ιδιότητα:CSS_τιμή} 14
15 Παράδειγμα CSS - Internal <!DOCTYPE html> <html> <head> <style> body {background-color:aliceblue} h1 {color:cadetblue} p {color:chicolate} </style> </head> <body> <h1>this is a heading</h1> <p>this is a paragraph.</p> </body> </html> 15
16 CSS - Μορφοποίηση κειμένων Γραμματοσειρά. Font-family Μέγεθος. Font-size Χρώμα γραμματοσειράς. Color 16
17 Παράδειγμα <!DOCTYPE html> <html> <head> <style> h1 { color:cornflowerblue; font-family:serif; font-size:300%; } p { color:aliceblue; font-family:courier; font-size:24px; } </style> </head> <body> <h1>μορφοποίηση Επικεφαλίδας με CSS</h1> <p>μορφοποίηση παραγράφου με CSS</p> </body> </html> 17
18 CSS - Μορφοποίηση περιγραμμάτων κειμένου Κάθε κείμενο στην HTML έχει γύρω του ένα περίγραμμα με μέγεθος 0px (0 pixels) και επομένως δεν είναι ορατό border:1px κάνει το περίγραμμα ορατό με μέγεθος 1px Για να μορφοποιήσουμε περαιτέρω το περίγραμμα Μορφή γραμμής περιγράμματος: solid, dashed, κλπ Χρώμα περιγράμματος: black, red, blue, κλπ padding: κενό μεταξύ γραμμάτων και γραμμής περιγράμματος margin: απόσταση πριν και μετά και γύρω από το περίγραμμα 18
19 Παράδειγμα Περιγραμμάτων <!DOCTYPE html> <html> <head> <style> p { border:1px solid red; padding:10px; margin:30px; } </style> </head> <body> <p>παράγραφος με περίγραμμα κόκκινο</p> </body> </html> 19
20 Εξειδικευμένο styling Ο τύπος μορφοποίησης στοιχείο_html {ιδιότητα_css:τιμή_css} είναι γενικός γιατί εφαρμόζει τη μορφοποίηση στο σύνολο των στοιχείων του ίδιου τύπου, δηλ. σε όλες τις παραγράφους ή σε όλες τις επικεφαλίδες Για πιο εξειδικευμένο styling θα πρέπει να βρούμε κάποιο τρόπο να μορφοποιούμε συγκεκριμένο κείμενο με συγκεκριμένο τρόπο Μία λύση είναι να μπορούμε δίνουμε ένα όνομα στο συγκεκριμένο κομμάτι κειμένου και να εφαρμόζουμε styling στο συγκεκριμένο όνομα κειμένου Δύο τρόποι ονοματοδοσίας id class 20
21 ids & classes Δίνουμε ένα μοναδικό id σε ένα κομμάτι κειμένου Το συγκεκριμένο id δεν μπορεί να ξαναχρησιμοποιηθεί Παράδειγμα <style> p#myp { font-family:verdana; } </style> <p id="myp">το όνομά μου είναι myp</p> Δίνουμε ένα όνομα τάξης (class) που μπορεί να ξαναχρησιμοποιηθεί και αλλού (πιο ευέλικτο) Παράδειγμα <style> h1.myh1 { color:aliceblue; font-family:courier;} </style> <h1 class="myh1">επικεφαλίδα με class</h1> 21
22 Σύνδεσμοι - Κείμενο Κείμενο ή εικόνα (ή όποιο άλλο στοιχείο HTML) που κάνουμε κλικ και πάμε σε άλλη σελίδα <a href=" Tag Anchor Ιδιότητα href (hypertext reference) ορίζει την URL διεύθυνση Κείμενο συνδέσμου προσδιορίζει το ορατό μέρος Τοπικοί σύνδεσμοι href= opanews.html target= _blank ανοίγει τον σύνδεσμο σε νέο παράθυρο <a href=" target="_blank">οπα</a> 22
23 Σύνδεσμοι - Εικόνα Το <img> tag είναι εμφωλιασμένο μέσα στο <a> tag στη θέση του κειμένου σύνδεσης <a href=" <img src="opa.jpg" alt="opa" style="width:42px;height:42px;"> </a> 23
24 Σύνδεσμοι με σελιδοδείκτες Σύνδεσμος σε id π.χ. href="#auebnews" Το id (μέσα σε anchor εμφωλιασμένο σε στοιχείο html) προσδιορίζει το συγκεκριμένο heading π.χ. id="auebnews" Παράδειγμα <a href="#auebnews">δείτε τα νέα του ΟΠΑ </a> <h1><a id="auebnews">τα Νέα του ΟΠΑ</a></h1> 24
25 Εικόνες - Images Ιδιότητα src (source). Αν δεν προσδιορίζεται φάκελος τότε ο ίδιος με το index.htm <img src= "opa.png" alt="opa" style="width:128px;height:128px;"> Αλλιώς πρέπει να προσδιορίζεται (υπο)φάκελος <img src="/images/opa.png" alt="opa" style="width:128px;height:128px;"> 25
26 Πίνακες <table> <tr> γραμμή <td> δεδομένα-στήλη <th> επικεφαλίδες στηλών 26
27 Τυπική μορφοποίηση πίνακα <head> <style> table, th, td { } border: 1px solid black; border-collapse: collapse; th,td { padding: 15px; } /* An theloume aristerh stoixisi tou th text-align: left; </style> </head> 27
28 Παράδειγμα πίνακα <body> <table style="width:100%;"> <tr> <th>firstname</th> <th>lastname</th> </tr> <tr> <td>nikos</td> <td>papadopoulos</td> </tr> </table> </body> 28
29 Λίστες Με κουκίδες (unordered) ή Αριθμημένες (ordered) Κουκίδες (unordered lists) <ul> <ul style="list-style-type:disc"> (circle, square, none, κλπ) Αρίθμηση (ordered lists) <ol> <ol type="1"> (A, a, I,i) 29
30 Πολλά επίπεδα - Παράδειγμα <body> <h2>lista mesa se lista</h2> <ul> <li>στερεά Ελλάδα</li> <li>αττική <ul> <li>ανατολική Αττική</li> <li>δυτική Αττική </li> </ul> </li> <li>κρήτη</li> </ul> </body> 30
31 Οριζόντιες λίστες <style> ul#menu li { display:inline; } </style> 31
32 Παράδειγμα <style> ul#mylist { padding: 2em; } ul#mylist li { display: inline; } ul#mylist li a { background-color: rgb(0, 0, 0); color: rgb(0, 255, 0); padding: 0.5em 1em; text-decoration: none; border-radius: 4px 4px 0 0; } ul#menu li a:hover { background-color: orange; } 32
33 Blocks - div Block vs Inline αντικείμενα HTML Block πριν και μετά κενή γραμμή π.χ. <p> Inline όχι αλλαγές γραμμής π.χ. <img> div χώρος που περιέχει (container) άλλα αντικείμενα HTML Ιδιότητες style & class & id 33
34 Παράδειγμα (1/2) <head> <style>.aueb { background-color:black; color:rgba(255, 255, 255, 0.5); margin:1.5em; padding:1.5em; } </style> </head> 34
35 Παράδειγμα (2/2) <body> <div class="aueb"> <h2>central Build.</h2> <p> AUEB Central building is located at 76 Patission st.</p> </div> </body> 35
36 HTML Entities © &euro < > 36
37 HTML Forms (1/3) Για εισαγωγή δεδομένων των χρηστών <form> </form> Αποτελούνται από αντικείμενα ελέγχου (controls) Label (ετικέτα). Επώνυμο <br> Text box (εισαγωγή κειμένου) <input type="text" name= last (size= 50 maxlength= 15 readonly disabled>) <textarea name= details" rows="10" cols="30"></textarea> Combo box (drop-down list) <select name= fruits"> <option value= apples">apples</option> <option value= oranges">oranges</option> </select> 37
38 HTML Forms (2/3) Check box <input type="checkbox" name= "fruits" value=«apples"> <br> <input type="checkbox" name= fruits" value= Oranges"> Option box (radio button) <input type="radio" name= mstatus" value=«nmar" checked> non-married <br> <input type="radio" name=«mstatus" value= mar">married Button <button type="button" onclick="alert( AUEB!')">Πατήστε Click</button> 38
39 HTML Forms (3/3) Date Time Number Calendar Range 39
40 HTML Media- Video <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video> <video width="320" height="240" autoplay> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </video> Javascript controls 40
41 Audio <audio controls> <source src="horse.ogg" type="audio/ogg"> <source src="horse.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> 41
42 Plug-ins <object width="400" height="50" data="bookmark.swf"> </object> <embed width="400" height="50" src="bookmark.swf"> 42
43 YouTube <iframe width="420" height="315" src=" </iframe> Object & embed μπορούν επίσης να χρησιμοποιηθούν 43
Άσκηση 6 Επαναληπτική Άσκηση HTML
Άσκηση 6 Επαναληπτική Άσκηση HTML ΕΤΙΚΕΤΕΣ HTML ΕΤΙΚΕΤΑ ΠΕΡΙΓΡΑΦΗ ΙΔΙΟΤΗΤΕΣ ΙΔΙΟΤΗΤΑ ΤΙΜΗ ΠΕΡΙΓΡΑΦΗ Βασικές Ορίζει τον τύπο του αρχείου Ορίζει ένα αρχείο HTML Ορίζει ένα τίτλο
Διαβάστε περισσότερα<a href="http://www.somepage.com/somepage.html">μετάβαση στο κείμενο</a>.
HTML Τα αρχεία της HTML έχουν ετικέτες (tags) που ορίζουν τη δομή και τη μορφοποίηση των ιστοσελίδων. Οι περισσότερες HTML ετικέτες τις συναντούμε ως ζεύγη τα οποία ενεργούν στα περιεχόμενα μεταξύ των
Διαβάστε περισσότεραΠοιες είναι οι κύριες ετικέτες που χρησιμοποιεί η HTML για την περιγραφή της συνολικής δομής μιας ιστοσελίδας;
Τι είναι η HTML; Η HTML είναι το ακρωνύμιο των λέξεων HyperText Markup Language, δηλαδή Γλώσσα Χαρακτηρισμού Υπερ Κειμένου και βασίζεται στη γλώσσα SGML, Standard Generalized Markup Language, που είναι
Διαβάστε περισσότεραΕτικέτες HTML. <!-->: Τα σχόλια χρησιμοποιούνται για να γράφουμε σημειώσεις μέσα στον
Ετικέτες HTML : Τα σχόλια χρησιμοποιούνται για να γράφουμε σημειώσεις μέσα στον πηγαίο κώδικα για να διευκολύνουμε την επεξεργασία και την συντήρηση του αρχείου. Τα σχόλια δεν εμφανίζονται στην οθόνη
Διαβάστε περισσότεραΕργαλεία Ανάπτυξης Εφαρμογών Internet. Δ.Ι.Ε.Κ. Γλυφάδας Τεχνικός Εφαρμογών Πληροφορικής
Εργαλεία Ανάπτυξης Εφαρμογών Internet Δ.Ι.Ε.Κ. Γλυφάδας Τεχνικός Εφαρμογών Πληροφορικής Το πρότυπο CSS Α Μέρος 2 CSS (Cascading Style Sheets)(1) Ορίζουν την εμφάνιση των στοιχείων σε ένα έγγραφο HTML.
Διαβάστε περισσότεραΕισαγωγή στον Παγκόσμιο ιστό και στη γλώσσα Html. Χρ. Ηλιούδης
Εισαγωγή στον Παγκόσμιο ιστό και στη γλώσσα Html Χρ. Ηλιούδης Παγκόσμιος Ιστός (WWW) Ο Παγκόσμιος Ιστός (World Wide Web WWW), ή απλώς Ιστός, βασίζεται στην ιδέα των κατανεμημένων πληροφοριών. Αντί όλες
Διαβάστε περισσότεραΕΠΛ 003: ΕΠΙΣΤΗΜΗ ΤΗΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΚΑΙ ΠΛΗΡΟΦΟΡΙΑΚΑ ΣΥΣΤΗΜΑΤΑ HTML
ΕΠΛ 003: ΕΠΙΣΤΗΜΗ ΤΗΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΚΑΙ ΠΛΗΡΟΦΟΡΙΑΚΑ ΣΥΣΤΗΜΑΤΑ HTML Στόχοι 1 Να δημιουργήσουμε υπερκείμενα με την Γλώσσα Επισημείωσης Υπερκειμένων (hypertext markup language, HTML). Υπολογιστικά συστήματα:
Διαβάστε περισσότεραΗ γλώσσα HTML. Επιμέλεια: Δέγγλερη Σοφία
Η γλώσσα HTML Επιμέλεια: Δέγγλερη Σοφία Υπερκείμενο Το δομικό χαρακτηριστικό του Παγκόσμιου Ιστού Ένα αρχείο Απλό κείμενο και υπερσύνδεσμοι Υπερσύνδεσμος Μετάβαση σε διάφορα άλλα έγγραφα Αποτελείται από
Διαβάστε περισσότεραΑ ΛΥΚΕΙΟΥ - ΕΦΑΡΜΟΓΕΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΜΑΪΟΣ 2019 ΕΝΔΕΙΚΤΙΚΕΣ ΕΡΩΤΗΣΕΙΣ ΚΑΤΑΝΟΗΣΗΣ
Το υλικό αυτό δίνεται στους μαθητές για τη σωστή μελέτη της διδαχθείσας ύλης του μέρους Β. Πρόκειται για ένα συμπαγή κορμό ερωτήσεων και ασκήσεων οι οποίες καλύφθηκαν κατά τη διάρκεια της έως τώρα σχολικής
Διαβάστε περισσότεραΒασίλειος Κοντογιάννης ΠΕ19
Ενότητα3 Επικοινωνία και Διαδίκτυο 11.1 Γενική Εισαγωγή στην HTML Τι είναι η HTML (HyperText Markup Language); Είναι μια γλώσσα σήμανσης (Markup) με την οποία πραγματοποιείται η δόμηση σελίδων του Παγκόσμιου
Διαβάστε περισσότεραΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML ΣΧΟΛΙΚΟ ΒΙΒΛΙΟ ΚΕΦΑΛΑΙΟ 11 Ευάγγελος Χ. Ζιούλας (Καθηγητής Πληροφορικής)
http://www.zioulas.gr ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML ΣΧΟΛΙΚΟ ΒΙΒΛΙΟ ΚΕΦΑΛΑΙΟ 11 Ευάγγελος Χ. Ζιούλας (Καθηγητής Πληροφορικής) WEB SERVER Είναι μια εφαρμογή software που αναλαμβάνει την αποστολή μιας ιστοσελίδας σε
Διαβάστε περισσότεραΦόρμες. Γενικοί κανόνες. Η ετικέτα <form>
Φόρμες Οι φόρμες περιέχουν τα στοιχεία φόρμας στο οποία ένας χρήστης μπορεί να εισαγάγει δεδομένα τα οποία στη συνέχεια αποστέλλονται σε έναν εξυπηρετητή για παραπέρα επεξεργασία. Γενικοί κανόνες Για τις
Διαβάστε περισσότεραΕπαναληπτική Άσκηση ΕΤΙΚΕΤΕΣ HTML
Επαναληπτική Άσκηση ΕΤΙΚΕΤΕΣ HTML ΕΤΙΚΕΤΑ ΠΕΡΙΓΡΑΦΗ ΙΔΙΟΤΗΤΕΣ ΙΔΙΟΤΗΤΑ ΤΙΜΗ ΠΕΡΙΓΡΑΦΗ Βασικές Ορίζει ένα αρχείο HTML Ορίζει ένα τίτλο για το αρχείο Ορίζει το σώµα της background URL
Διαβάστε περισσότεραΒαρβάκειο Πρότυπο Γυμνάσιο Εργαστήρι Πληροφορικής Σχολ. Έτος Φύλλο Εργασίας 5
Φύλλο Εργασίας 5 HTML: Χρήση των Cascading Style Sheets (CSS) για τον έλεγχο της εμφάνισης των στοιχείων της html Με τη χρήση CSS πετυχαίνουμε να ελέγξουμε περισσότερο αποτελεσματικά και κυρίως ταχύτερα
Διαβάστε περισσότεραΕισαγωγή σε HTML και CSS. Παναγιώτης Τσαρχόπουλος
Εισαγωγή σε HTML και CSS Παναγιώτης Τσαρχόπουλος Περιεχόμενα Εισαγωγικές έννοιες Ορολογία και σύνταξη Κείμενο σε HTML έγγραφα Σύνδεσμοι Ψηφιακές - Ευφυείς Πόλεις - Εισαγωγή σε HTML και CSS 2 Εισαγωγικές
Διαβάστε περισσότεραΒαρβάκειο Πρότυπο Γυμνάσιο
Παραδόσεις & εργαστηριακές ασκήσεις στην HTML Βαρβάκειο Πρότυπο Γυμνάσιο Σχολ. Χρονιά 2016-2017 Θ. Οτζάκογλου Εργαστήρι Πληροφορικής Σχολ. Έτος 2016 2017 Αν και δεν είναι μία ακόμη «γλώσσα προγραμματισμού»,
Διαβάστε περισσότεραΤεχνολογίες Διαδικτύου - Εργαστήριο 1 ο
Τεχνολογίες Διαδικτύου - Εργαστήριο 1 ο 1. Δημιουργία μιας απλής σελίδας HTML Στον προσωπικό σας κατάλογο δημιουργήστε ένα φάκελο με όνομα HTML. Ανοίξτε το Notepad ακολουθώντας τη διαδρομή (Start All Programs
Διαβάστε περισσότεραEurope Code Week 7-22 Οκτωβρίου Μία γιορτή δημιουργίας με κώδικα
Europe Code Week 7-22 Οκτωβρίου 2017 7-22 October 2017 Μία γιορτή δημιουργίας με κώδικα @CodeWeekEU #codeeu codeeu Εισαγωγή στο Web Development CSS Λίγα λόγια... Η γλώσσα 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 προσδιορίζει τη βασική
Διαβάστε περισσότεραΕισαγωγή στην Επιστήμη Υπολογιστών. Εισαγωγή στην HTML. Άννα Κεφάλα Παναγιώτα Μιχόλια
Εισαγωγή στην Επιστήμη Υπολογιστών Άννα Κεφάλα Παναγιώτα Μιχόλια Εργαστηριακές Σημειώσεις ΕΙΣΑΓΩΓΗ ΣΤΗ ΓΛΩΣΣΑ HTML Τί θα δούμε.. Τί είναι η HTML. Σε τί χρησιμεύει. Εκδόσεις. Tags, elements, attributes
Διαβάστε περισσότεραΕισαγωγή στην Επιστήμη Υπολογιστών. Εισαγωγή στην HTML. Άννα Κεφάλα Παναγιώτα Μιχόλια
Εισαγωγή στην Επιστήμη Υπολογιστών Εισαγωγή στην HTML Άννα Κεφάλα Παναγιώτα Μιχόλια Εργαστηριακές Σημειώσεις ΕΙΣΑΓΩΓΗ ΣΤΗ ΓΛΩΣΣΑ HTML ΜΕΡΟΣ Β': CSS ΚΑΙ FORMS 2 Cascading Style Sheets (CSS) Cascading Style
Διαβάστε περισσότεραCascading Style Sheets (CSS)
Cascading Style Sheets (CSS) Τα Cascading Style Sheets προσφέρουν έναν εύκολο τρόπο για να ορίσουμε τη μορφοποίηση που επιθυμούμε να έχουν οι σελίδες μία τοποθεσίας του Παγκόσμιου Ιστού που δημιουργούμε.
Διαβάστε περισσότερα7-22 Οκτωβρίου Μία γιορτή δημιουργίας με κώδικα. Europe Code Week
7-22 Οκτωβρίου 2017 Μία γιορτή δημιουργίας με κώδικα @ #codeeu codeeu 7-22 October 2017 Europe Code Week Εισαγωγή στο Web Development HTML Λίγα λόγια... Η HTML είναι η βασική γλώσσα γραφής των ιστοσελίδων!
Διαβάστε περισσότεραΕισαγωγη στην html. Η δομή μιας ιστοσελίδας (αρχείο html) Η βασική δομή ενός αρχείου html είναι η εξής: <html> <head>
Εισαγωγη στην html Ο παγκόσμιος ιστός (αγγ.: World Wide Web ή www) είναι η πιο δημοφιλής υπηρεσία που μας παρέχει το Διαδίκτυο (Internet) και είναι ένα σύστημα διασυνδεδεμένων πληροφοριών (κειμένου, εικόνας,
Διαβάστε περισσότεραCSS. Εισαγωγή & Βασικές έννοιες. Cascading Style Sheets. Επικαλυπτόμενα φύλλα στυλ
CSS Εισαγωγή & Βασικές έννοιες Cascading Style Sheets Επικαλυπτόμενα φύλλα στυλ Περιεχόμενα Τι είναι CSS Πλεονεκτήματα CSS μορφοποίησης Συντακτικό του CSS Ιδιότητες CSS Εφαρμογή CSS κανόνων Επικάλυψη CSS
Διαβάστε περισσότεραΣταύρος Καουκάκης Ευτύχιος Βαβουράκης
ΠΑΝΕΠΙΣΤΗΜΙΟ ΚΡΗΤΗΣ 1 ο ΣΧΟΛΕΙΟ ΚΩΔΙΚΑ «Βασικά Θέματα Προγραμματισμού στην Ανάπτυξη Δυναμικών Διαδικτυακών Εφαρμογών» (Part 1) Σταύρος Καουκάκης Ευτύχιος Βαβουράκης 1 Λίγα Λόγια για το Σχολείο Μονάδες
Διαβάστε περισσότεραΒαρβάκειο Πρότυπο Γυμνάσιο
Παραδόσεις & εργαστηριακές ασκήσεις στην HTML Βαρβάκειο Πρότυπο Γυμνάσιο Σχολ. Χρονιά 2017-2018 Θ. Οτζάκογλου Εργαστήρι Πληροφορικής Σχολ. Έτος 2016 2017 Αν και δεν είναι μία ακόμη «γλώσσα προγραμματισμού»,
Διαβάστε περισσότεραΔιάλεξη 2η Εισαγωγή στο CSS
Διάλεξη 2η Εισαγωγή στο CSS Στέλιος Μόσχογλου Θεοδόσης Σουργκούνης Αντώνης Χρυσόπουλος I S S E L D e c o d e (Intelligent Systems & Software Engineering Lab) Στόχος της ώρας Τι είναι το CSS? Γιατί να χρησιμοποιήσω
Διαβάστε περισσότεραΠληροφορική Τμήμα Σχεδιασμού & Τεχνολογίας Ξύλου & Επίπλου Αντώνιος Καραγεώργος Ευανθία Τσιλιχρήστου. Μάθημα 6 ο Τεχνολογίες Διαδικτύου: HTML II
Πληροφορική Τμήμα Σχεδιασμού & Τεχνολογίας Ξύλου & Επίπλου Αντώνιος Καραγεώργος Ευανθία Τσιλιχρήστου Μάθημα 6 ο Τεχνολογίες Διαδικτύου: HTML II Εισαγωγή Εικόνων Οι φυλλομετρητές μπορούν να εμφανίσουν ένθετες
Διαβάστε περισσότεραΘέματα Προγραμματισμού Διαδικτύου ~ CSS ~
Θέματα Προγραμματισμού Διαδικτύου ~ CSS ~ Στελιος Σφακιανάκης Εαρινό 2019 Αυτή η εργασία χορηγείται με άδεια Creative Commons Αναφορά Δημιουργού - Μη Εμπορική Χρήση - Παρόμοια Διανομή 1 Εισαγωγή στο CSS
Διαβάστε περισσότεραΚεφάλαιο 11: Εισαγωγή στην HTML. Εφαρμογές Πληροφορικής Κεφ. 11 Καραμαούνας Πολύκαρπος
Κεφάλαιο 11: Εισαγωγή στην HTML 1 11.1 Γενική εισαγωγή στην HTML Τι είναι η HTML HyperText Markup Language - Γλώσσα Χαρακτηρισμού Υπερ-Κειμένου είναι η βασική γλώσσα με την οποία πραγματοποιείται η δόμηση
Διαβάστε περισσότερα1. <body> 2. <header> 3. <h1> My Page </h1> 4. </header> 5. <section>
Ενδεικτικές ερωτήσεις 1. Τι σημαίνουν τα αρχικά CSS 2. Τι σημαίνουν τα αρχικά HTML 3. Ποια η διαφορά μεταξύ Internet και Web; a. Είναι το ίδιο b. Το Web είναι μια υπηρεσία του διαδικτύου 4. Ποια η διαφορά
Διαβάστε περισσότεραΑλεξιάδης Γεώργιος (ΠΕ86) -
11.1 Γενική Εισαγωγή στην HTML Τι είναι η HTML; HyperText Markup Language (Γλώσσα Χαρακτηρισμού Υπερ-Κειμένου) Βασίζεται στην SGML (Standard Generalized Markup Language) που είναι ένα πολύ μεγαλύτερο σύστημα
Διαβάστε περισσότεραΒασικά στοιχεία του CSS
Βασικά στοιχεία του CSS Περιεχόμενα Τι είναι CSS Πλεονεκτήματα CSS μορφοποίησης Συντακτικό του CSS Ιδιότητες CSS Εφαρμογή CSS κανόνων Επικάλυψη CSS κανόνων 2 Μορφοποίηση με HTML Η HTML είναι σχεδιασμένη
Διαβάστε περισσότεραΣταύρος Καουκάκης Ευτύχιος Βαβουράκης
ΠΑΝΕΠΙΣΤΗΜΙΟ ΚΡΗΤΗΣ 1 ο ΣΧΟΛΕΙΟ ΚΩΔΙΚΑ «Βασικά Θέματα Προγραμματισμού στην Ανάπτυξη Δυναμικών Διαδικτυακών Εφαρμογών» (Part 1) Σταύρος Καουκάκης Ευτύχιος Βαβουράκης 1 Λίγα Λόγια για το Σχολείο Μονάδες
Διαβάστε περισσότερα3. ΕΙΣΑΓΩΓΗ ΣΤΟ CSS ΓΙΩΡΓΟΣ ΓΙΑΝΝΑΚΑΚΗΣ, ΜΑΝΩΛΗΣ ΤΣΙΚΝΑΚΗΣ
2014 3. ΕΙΣΑΓΩΓΗ ΣΤΟ CSS ΓΙΩΡΓΟΣ ΓΙΑΝΝΑΚΑΚΗΣ, ΜΑΝΩΛΗΣ ΤΣΙΚΝΑΚΗΣ Εισαγωγή Το CSS (Cascading Style Sheets) είναι αρχεία με κατάληξη.css τα οποία καθορίζουν την μορφοποίηση των ιστοσελίδων. Μέσω αυτών επιτυγχάνεται
Διαβάστε περισσότεραΠληροφορική Τμήμα Σχεδιασμού & Τεχνολογίας Ξύλου & Επίπλου Αντώνιος Καραγεώργος Ευανθία Τσιλιχρήστου. Μάθημα 5 ο Τεχνολογίες Διαδικτύου: HTML I
Πληροφορική Τμήμα Σχεδιασμού & Τεχνολογίας Ξύλου & Επίπλου Αντώνιος Καραγεώργος Ευανθία Τσιλιχρήστου Μάθημα 5 ο Τεχνολογίες Διαδικτύου: HTML I Διαδικτυακή Εφαρμογή (1/2) Ως διαδικτυακή εφαρμογή μπορούμε
Διαβάστε περισσότεραΣχεδίαση και Ανάπτυξη Ιστότοπων. HTML Στοιχεία - Βασικές Ετικέτες Ειδικοί Χαρακτήρες Παρουσίαση 5 η. Βελώνης Γεώργιος Καθηγητής Πληροφορικής ΠΕ20
Σχεδίαση και Ανάπτυξη Ιστότοπων HTML Στοιχεία - Βασικές Ετικέτες Ειδικοί Χαρακτήρες Παρουσίαση 5 η 1 Βελώνης Γεώργιος Καθηγητής Σημασία συμβόλων HTML5 tags Obsolete tags: Μην αφήνετε αυτές τις ετικέτες
Διαβάστε περισσότεραΕισαγωγή στην HTML. Κεφ. HTML + CSS
Εισαγωγή στην HTML Κεφ. HTML + CSS Συστατικά καλής Ιστοσελίδας α) HTML για το Περιεχόμενο β) CSS για τη μορφοποίηση γ) Javascript για διαδραστικότητα Παράδειγμα Ολυμπιακός Πανιώνιος ΠΑΟΚ Παναθηναϊκός Ξάνθη
Διαβάστε περισσότεραΣχεδιασμός και Ανάπτυξη Ιστοτόπων. ΕΠΑ.Λ. ΑΛΙΜΟΥ Τομέας Πληροφορικής Κ. Φλώρος
Σχεδιασμός και Ανάπτυξη Ιστοτόπων ΕΠΑ.Λ. ΑΛΙΜΟΥ Τομέας Πληροφορικής Κ. Φλώρος H γλώσσα HTML Άλλες Βιβλιογραφικές πηγές για HTML http://www.w3schools.com/html/ http://www.it.uom.gr/project/html2/lessons.html
Διαβάστε περισσότεραΠρογραμματισμός Παγκόσμιου Ιστού
Πανεπιστήμιο Πειραιώς Τμήμα Ψηφιακών Συστημάτων Προγραμματισμός Παγκόσμιου Ιστού 2 η Διάλεξη Δημοσθένης Κυριαζής Δευτέρα 6 Μαρτίου 2017 Σημερινή διάλεξη Σύνοψη προηγούμενης διάλεξης HTML / HTML5 Λίστες,
Διαβάστε περισσότεραγενικό ΛΥΚειο Νέων ΜΟΥΔανιών ΕΦΑΡΜΟΓΕΣ ΠΛΗΡΟΦΟΡΙΚΗΣ Α ΛΥΚΕΙΟΥ Διδάσκων Καθηγητής: Γιώργος Μαλακούδης
Διδάσκων Καθηγητής: Γιώργος Μαλακούδης email: gmalakoudi@sch.gr Περιεχόμενα ΔΡΑΣΤΗΡΙΟΤΗΤΑ 1: Δημιουργία της 1 ης μας σελίδας!... 2 ΔΡΑΣΤΗΡΙΟΤΗΤΑ 2: Επικεφαλίδες και παράγραφοι... 3 ΔΡΑΣΤΗΡΙΟΤΗΤΑ 3: Κείμενο,
Διαβάστε περισσότεραΣτην τεχνολογία των CSS, οι κανόνες στυλ (style
Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #4 0 : CSS: Βασικές και προχωρημένες τεχνικές επιλογής, τα στοιχεία και , ψευδο κλάσεις και ψευδο επιλογείς Γαβαλάς Δαμιανός dgavalas@aegean.gr CSS κανόνες στυλ
Διαβάστε περισσότεραΣχεδιασμός και Ανάπτυξη Ιστότοπων
Βελώνης Γεώργιος Καθηγητής Σχεδιασμός και Ανάπτυξη Ιστότοπων Εισαγωγή στα CSS (Cascading Style Sheets) Παρουσίαση 13 η 1 Βελώνης Γεώργιος Καθηγητής Περιεχόμενα Εισαγωγή Πλεονεκτήματα χρήσης των CSS Βασικοί
Διαβάστε περισσότεραΕμφάνιση και κρύψιμο στοιχείων
Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #8 0 : Δυναμικά εφέ με χρήση CSS Γαβαλάς Δαμιανός dgavalas@aegean.gr Εμφάνιση και κρύψιμο στοιχείων Χρήση της ιδιότητας display με επιτρεπτές τιμές: none: κρύψιμο του στοιχείου
Διαβάστε περισσότεραΣπουδές 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
Διαβάστε περισσότερα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 απαιτεί από τον Υποψήφιο να κατανοεί τις κύριες έννοιες της σχεδίασης και δημοσίευσης δικτυακών
Διαβάστε περισσότεραCSS 1. Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Δ. Ζήνδρος Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών
CSS 1 Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Δ. Ζήνδρος Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών Άδεια Χρήσης Το παρόν εκπαιδευτικό υλικό υπόκειται σε άδειες χρήσης Creative
Διαβάστε περισσότεραΒασίλειος Κοντογιάννης ΠΕ19
Ενότητα3 Επικοινωνία και Διαδίκτυο 11.1 Γενική Εισαγωγή στην HTML Τι είναι η HTML (HyperText Markup Language); Είναι μια γλώσσα σήμανσης (Markup) με την οποία πραγματοποιείται η δόμηση σελίδων του Παγκόσμιου
Διαβάστε περισσότερα2. Επιλέξτε την σωστή ετικέτα HTML που προσφέρει το μεγαλύτερο φόντο κειμένου. <head> <heading> <h6> <h1>
ΤΜΗΜΑ ΗΛΕΚΤΡΟΝΙΚΗΣ Τομέας Υπολογιστικών Συστημάτων και Ελέγχου Τεχνολογίες Πολυμέσων - Εφαρμογές Δρ. Β. ΒΑΛΑΜΟΝΤΕΣ Ε-mail: vala@teiath.gr Να απαντήσετε στις παρακάτω ερωτήσεις. 1. Τι σημαίνουν τα αρχικά
Διαβάστε περισσότεραΗ Βίβλος των CSS - Μέρος 3 Το Box Model, τα Περιθώρια και τα Περιγράμματα
Η Βίβλος των CSS - Μέρος 3 Το Box Model, τα Περιθώρια και τα Περιγράμματα Το Box Model Το box model στα CSS περιγράφει τα πλαίσια (boxes) που δημιουργούνται για τα στοιχεία (elements) της HTML. Το box
Διαβάστε περισσότερα2. ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML ΓΙΩΡΓΟΣ ΓΙΑΝΝΑΚΑΚΗΣ, ΜΑΝΩΛΗΣ ΤΣΙΚΝΑΚΗΣ
2014 2. ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML ΓΙΩΡΓΟΣ ΓΙΑΝΝΑΚΑΚΗΣ, ΜΑΝΩΛΗΣ ΤΣΙΚΝΑΚΗΣ H HTML είναι μία γλώσσα σήμανσης και αποτελεί την κύρια γλώσσα δημιουργίας ιστοσελίδων του διαδικτύου. Είναι το ακρωνύμιο των λέξεων HyperText
Διαβάστε περισσότεραΤεχνολογίες Διαδικτύου (Εξασκηθείτε στην HTML)
Τεχνολογίες Διαδικτύου (Εξασκηθείτε στην HTML) 1. Δημιουργία μιας απλής σελίδας HTML Ανοίξτε το Notepad ακολουθώντας τη διαδρομή Start All Programs Accessories Notepad Πληκτρολογήστε το ακόλουθο κείμενο:
Διαβάστε περισσότεραΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML. Decode, ISSEL. Θεοδόσης Σουργκούνης Αντώνης Χρυσόπουλος Στέλιος Μόσχογλου
ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML Θεοδόσης Σουργκούνης Αντώνης Χρυσόπουλος Στέλιος Μόσχογλου Decode, ISSEL Τμήμα Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών, Αριστοτέλειο Πανεπιστήμιο Θεσσαλονίκης Στόχος της ώρας
Διαβάστε περισσότεραΒΑΣΙΚΕΣ ΑΡΧΕΣ ΣΧΕΔΙΑΣΜΟΥ ΕΦΑΡΜΟΓΩΝ
ΒΑΣΙΚΕΣ ΑΡΧΕΣ ΣΧΕΔΙΑΣΜΟΥ ΕΦΑΡΜΟΓΩΝ Βαγγελιώ Καβακλή Τμήμα Πολιτισμικής Τεχνολογίας & Επικοινωνίας 8 Μαρτίου 2001 Hypertext Markup Language (HTML)! Σε μια ιστοσελίδα μπορούν να εμφανίζονται διαφορετικά
Διαβάστε περισσότερα<HTML> <HEAD> <TITLE> <BODY>
ΑΣΚΗΣΗ 1 1. Ανοίξτε τον επεξεργαστή ιστοσελίδων 2. Αποθηκεύστε στο X:/mathimata/html/askiseis/ με όνομα askisi1b.html 3. Θα φτιάξουμε μια νέα ιστοσελίδα, χρησιμοποιώντας τις βασικές ετικέτες
Διαβάστε περισσότεραCSS Εργαστήριο 1. Εισαγωγή - Σύνταξη - Εφαρμογή στην HTML
CSS Εργαστήριο 1. Εισαγωγή - Σύνταξη - Εφαρμογή στην HTML Εισαγωγή Το CSS (Cascading Style Sheets ή Επικαλυπτόμενα Φύλλα Στυλ) μας επιτρέπει να αλλάξουμε τον τρόπο με τον οποίο παρουσιάζονται τα στοιχεία
Διαβάστε περισσότεραΗ γλώσσα CSS χρησιμοποιείται για τη μορφοποίηση ιστοσελίδων και η σύνταξη της είναι αρκετά απλή.
Εισαγωγή στο CSS Η γλώσσα CSS χρησιμοποιείται για τη μορφοποίηση ιστοσελίδων και η σύνταξη της είναι αρκετά απλή. Πλεονεκτήματα CSS έναντι χρήσης μόνο HTML Μεγαλύτερη ευελιξία μορφοποιήσεων. Το CSS κατέστησε
Διαβάστε περισσότεραΚεφάλαιο 4 HyperText Markup Language - HTML. Προγραμματιστικά εργαλεία για το διαδίκτυο Φίλιππος Κουτσάκας, Πολύγυρος 2013
Κεφάλαιο 4 HyperText Markup Language - HTML Προγραμματιστικά εργαλεία για το διαδίκτυο Φίλιππος Κουτσάκας, Πολύγυρος 2013 Τι είναι η HTML; Ένας τρόπος για να πεις στον σελιδομετρητή πώς να αναπαραστήσει
Διαβάστε περισσότεραΣχεδίαση ιστοσελίδων
Τ.Ε.Ι. Δυτικής Ελλάδας Σχολή Διοίκησης και Οικονομίας Τμήμα Διοίκησης Επιχειρήσεων - Πάτρα Σχεδίαση ιστοσελίδων Θεώνη Πιτουρά, Γιάννης Κουτσονίκος Σημειώσεις για το Εργαστήριο «Επιχειρηματικές δικτυακές
Διαβάστε περισσότεραΠρογραμματισμός Διαδικτύου
Πανεπιστήμιο Δυτικής Μακεδονίας Τμήμα Μηχανικών Πληροφορικής & Τηλεπικοινωνιών Προγραμματισμός Διαδικτύου Δρ. Μηνάς Δασυγένης mdasygenis@uowm.gr Τμήμα της παρουσίασης δημιουργήθηκε από τον κ. Παναγιώτη
Διαβάστε περισσότεραΓλώσσα περιγραφής οδηγιών εµφάνισης-στοιχειοθέτησης
CASCADING STYLE-SHEETS CASCADING STYLE-SHEETS Γλώσσα περιγραφής οδηγιών εµφάνισης-στοιχειοθέτησης εφαρµογών HTML. Τα CSS ορίζονται σε δύο συστάσεις του W3C: CSS1, εκ. 1996 περιλαµβάνει περίπου 50 ιδιότητες
Διαβάστε περισσότεραCascading Style Sheets
Cascading Style Sheets CSS είναι το ακρωνύµιο του Cascading Style Sheets (Επικαλυπτόµενα φύλλα στυλ). CSS είναι µια γλώσσα style δηλ. µια γλώσσα η οποία καθορίζει τη εµφάνιση HTML εγγράφων. Για παράδειγµα,
Διαβάστε περισσότεραCascading Style Sheets Φόρμες (Forms)
Cascading Style Sheets Φόρμες (Forms) Πανεπιστήμιο Πελοποννήσου Τμήμα Επιστήμης & Τεχνολογίας Τηλεπικοινωνιών Ευάγγελος Α. Κοσμάτος Cascading Style Sheets Τα Cascading Style Sheets (CSS) είναι οδηγίες
Διαβάστε περισσότεραΣτελεχώνου ε το σή ερα το τώρα και το αύριο!
Web HTML & CSS Εκπαιδευτικός & Εξεταστικός όμιλος FACEtoFACE Authorized Training & Certification Centers E.O.P.P.E.P Πιστοποιημένο Εκπαιδευτικό & Εξεταστικό Κέντρο Αθήνας Από το Υπουργείο Παιδείας Authorized
Διαβάστε περισσότεραCSS. Cascading Style Sheets. Γλώσσες και Τεχνολογίες Ιστού Τμήμα Πληροφορικής - ΑΤΕΙ Θεσσαλονίκης
CSS Cascading Style Sheets CSS Τα Cascading Style Sheets ορίζουν τις ιδιότητες παρουσίασης των στοιχεία της HTML. Αρχικά η HTML δεν περιελάμβανε στοιχεία για την εμφάνιση / παρουσίαση της πληροφορίας αλλά
Διαβάστε περισσότεραΕΡΓΑΣΤΗΡΙΟ: ΤΕΧΝΟΛΟΓΙΕΣ ΠΛΗΡΟΦΟΡΙΑΣ ΚΑΙ ΕΠΙΚΟΙΝΩΝΙΑΣ ΣΤΟΝ ΤΟΥΡΙΣΜΟ. 2o ΕΡΓΑΣΤΗΡΙΟ ΜΟΡΦΟΠΟΙΗΣΗ ΣΤΗΝ HTML
ΕΡΓΑΣΤΗΡΙΟ: ΤΕΧΝΟΛΟΓΙΕΣ ΠΛΗΡΟΦΟΡΙΑΣ ΚΑΙ ΕΠΙΚΟΙΝΩΝΙΑΣ ΣΤΟΝ ΤΟΥΡΙΣΜΟ ΠΕΡΙΕΧΟΜΕΝΟ ΜΑΘΗΜΑΤΟΣ 2o ΕΡΓΑΣΤΗΡΙΟ ΜΟΡΦΟΠΟΙΗΣΗ ΣΤΗΝ HTML 1. Μορφοποίηση κειμένου Ετικέτες στυλ 2. Ιδιότητες ετικετών 3. Λίστες 4. Υπερσυνδέσεις
Διαβάστε περισσότερα12. HTML και CSS. Προαπαιτούμενες Γνώσεις: Απλή γνώση της σύνταξης HTML. Αρκεί η άσκηση «Η γλώσσα HTML Εισαγωγή».
12. HTML και CSS Σκοπός του Εργαστηρίου: Σκοπός της παρούσας εργαστηριακής άσκησης είναι η εισαγωγή στην τεχνολογία Cascading Style Sheets (CSS), η εξοικείωση με τις βασικές αρχές και χρήσεις της και τη
Διαβάστε περισσότεραTEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο)
TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Στέλλα Λάμπουρα Εαρινό εξάμηνο Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί
Διαβάστε περισσότεραΣχεδιασμός και Ανάπτυξη Ιστότοπων
Σχεδιασμός και Ανάπτυξη Ιστότοπων CSS: Ιδιότητες μορφοποίησης κειμένου Παρουσίαση 14 η 1 Βελώνης Γεώργιος Καθηγητής Browsers δοκιμών Οι δοκιμές έγιναν στους παρακάτω browsers και εκδόσεις τους: Google
Διαβάστε περισσότεραΠρογραμματισμός Διαδικτύου
Πανεπιστήμιο Δυτικής Μακεδονίας Τμήμα Μηχανικών Πληροφορικής & Τηλεπικοινωνιών Προγραμματισμός Διαδικτύου Δρ. Μηνάς Δασυγένης mdasygenis@uowm.gr Τμήμα της παρουσίασης δημιουργήθηκε από τον κ. Παναγιώτη
Διαβάστε περισσότεραΕισαγωγή στην HTML Τα tags της HTML και τα γνωρίσματά τους
Εισαγωγή στην HTML Τα tags της HTML και τα γνωρίσματά τους Με την γλώσσα περιγραφής υπερ-κειμένου (HTML) μπορούμε να σχεδιάζουμε ιστοσελίδες. Η HyperText Markup Language βασίζεται στην SGML (Standard Generalized
Διαβάστε περισσότεραCSS 2. Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Π. Αγγελάτος. Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών
CSS 2 Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Π. Αγγελάτος Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών Άδεια Χρήσης Το παρόν εκπαιδευτικό υλικό υπόκειται σε άδειες χρήσης
Διαβάστε περισσότεραΑΣΠΑΙΤΕ. ΠΡΑΚΤΙΚΗ ΑΣΚΗΣΗ 4α. Υπερκείμενο και HTML. Ημερομηνία :... Τμήμα :... Ονοματεπώνυμο :...
ΠΡΑΚΤΙΚΗ ΑΣΚΗΣΗ 4α Υπερκείμενο και HTML ΑΣΠΑΙΤΕ Ημερομηνία :... Τμήμα :... Ονοματεπώνυμο :... Η HTML (HyperText Markup Language) είναι η γλώσσα που χρησιμοποιείται για να περιγράψει τη δομή και τη διαμόρφωση
Διαβάστε περισσότεραΕισαγωγή στην γλώσσα υπερκειμένου HTML
Εισαγωγή στην γλώσσα υπερκειμένου HTML 1 Βασικές έννοιες 2 3 Yπερκείμενο - Υπερσύνδεσμος - HTML Το δομικό χαρακτηριστικό του WWW είναι το υπερκείμενο (hypertext), δηλαδή ένα αρχείο που εκτός από απλό κείμενο
Διαβάστε περισσότεραΤο απεικονιστικό μοντέλο μορφοποίησης των CSS
Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #6 0 : CSS: Χρήση των ιδιοτήτων του κουτιού (box properties). Διάταξη σελίδων Γαβαλάς Δαμιανός dgavalas@aegean.gr Το απεικονιστικό μοντέλο μορφοποίησης των CSS Περιγράφει
Διαβάστε περισσότεραΕΡΓΑΣΤΗΡΙΑΚΗ ΑΣΚΗΣΗ 2 ΜΕΛΕΤΗ ΚΑΙ ΕΦΑΡΜΟΓΗ ΔΗΜΙΟΥΡΓΙΑΣ HTML ΣΕΛΙΔΩΝ ΣΥΝΔΕΣΜΟΙ
ΕΡΓΑΣΤΗΡΙΑΚΗ ΑΣΚΗΣΗ 2 ΜΕΛΕΤΗ ΚΑΙ ΕΦΑΡΜΟΓΗ ΔΗΜΙΟΥΡΓΙΑΣ HTML ΣΕΛΙΔΩΝ ΣΥΝΔΕΣΜΟΙ Στην άσκηση αυτή θα εμπλουτίσουμε την ιστοσελίδα που φτιάξαμε στην προηγούμενη άκηση με πίνακες, συνδέσμους και γραφικά. 1.
Διαβάστε περισσότεραHTML... 1. Εισαγωγή στην HTML και τα CSS
HTML...... 1 Εισαγωγή στην HTML και τα CSS HTML...... 2 HTML. H HTML (HYPERTEXT MARKUP LANGUAGE), είναι µία γλώσσα η οποία «λέει» στον υπολογιστή πως θα πρέπει να εµφανίσει µία ιστοσελίδα. Τα αρχεία στα
Διαβάστε περισσότεραΤι είναι η HTML; Τί είναι οι ετικέτες (tags); Πώς είναι μια ετικέτα (tag);
Τι είναι η HTML; Η HTML είναι το ακρώνυμο από το Hyper Text Markup Language που σημαίνει γλώσσα χαρακτηρισμού υπερκειμένου. Η χρήση μιας γλώσσας χαρακτηρισμού σημαίνει ότι γράφεται πρώτα το κείμενο και
Διαβάστε περισσότεραTEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο)
TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Στέλλα Λάμπουρα Εαρινό εξάμηνο Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί
Διαβάστε περισσότεραΕργαλεία ανάπτυξης εφαρμογών internet Ι
IEK ΟΑΕΔ ΚΑΛΑΜΑΤΑΣ ΤΕΧΝΙΚΟΣ ΕΦΑΡΜΟΓΩΝ ΠΛΗΟΦΟΡΙΚΗΣ Εργαλεία ανάπτυξης εφαρμογών internet Ι HTML Διδάσκουσα: Κανελλοπούλου Χριστίνα ΠΕ19 Πληροφορικής HTML (HyperText Markup Language) Η γλώσσα που χρησιμοποιείται
Διαβάστε περισσότεραΠΡΟΓΡΑΜΜΑΤΙΣΤΙΚΑ ΕΡΓΑΛΕΙΑ ΓΙΑ ΤΟ ΔΙΑΔΙΚΤΥΟ
ΠΡΟΓΡΑΜΜΑΤΙΣΤΙΚΑ ΕΡΓΑΛΕΙΑ ΓΙΑ ΤΟ ΔΙΑΔΙΚΤΥΟ Κεφάλαιο 4. Η γλώσσα HTML Επιμέλεια: Καραγιάννης Σπύρος Καθηγητής ΠΕ19 Βασικοί κανόνες σύνταξης HTML ομή σελίδας HTML Μορφοποίηση κειμένου Κατάλογοι Εισαγωγή
Διαβάστε περισσότεραΚΕΦΑΛΑΙΟ 11. Εισαγωγή στην HTML. ΚΕΦΑΛΑΙΟ 11 Εισαγωγή στην HTML. Α Γενικού Λυκείου
Α Γενικού Λυκείου 93 Διδακτικές ενότητες 11.1 Γενική εισαγωγή στην HTML 11.2 Η HTML5 11.3 Ενσωμάτωση (Embedding) 11.4 Καθορίζοντας την εμφάνιση CSS Διδακτικοί στόχοι Σκοπός του κεφαλαίου είναι οι μαθητές
Διαβάστε περισσότερα11. Η γλώσσα HTML Πίνακες, Λίστες, Φόρμες
11. Η γλώσσα HTML Πίνακες, Λίστες, Φόρμες Σκοπός του Εργαστηρίου: Σκοπός της παρούσας εργαστηριακής άσκησης είναι η εμβάθυνση σε συχνά χρησιμοποιούμενες ετικέτες HTML, όπως οι πίνακες και οι λίστες, καθώς
Διαβάστε περισσότεραΗ ΓΛΩΣΣΑ ΕΠΙΚΑΛΥΠΤΩΜΕΝΩΝ ΜΟΡΦΟΠΟΙΗΣΕΩΝ CSS
Η ΓΛΩΣΣΑ ΕΠΙΚΑΛΥΠΤΩΜΕΝΩΝ ΜΟΡΦΟΠΟΙΗΣΕΩΝ CSS Πίνακες Ιδιοτήτων Μορφοποίησης CSS Ιδιότητες Διαστασιολόγησης Στοιχείων height Ορίζει το ύψος ενός στοιχείου auto lenght (px) line-height Ορίζει το ύφος μιας
Διαβάστε περισσότεραΝέες Τεχνολογίες στην Εκπαίδευση
Σχολή Εφαρμοσμένων Μαθηματικών και Φυσικών Επιστημών Εθνικό Μετσόβιο Πολυτεχνείο Νέες Τεχνολογίες στην Εκπαίδευση Επάλληλα φύλλα στυλ (CSS): Μια εισαγωγή Στεφανέας Πέτρος Ζαμαρίας Βασίλης Άδεια Χρήσης
Διαβάστε περισσότεραΔιάλεξη 3η HTML intermediate
Διάλεξη 3η HTML intermediate Στέλιος Μόσχογλου Θεοδόσης Σουργκούνης Αντώνης Χρυσόπουλος I S S E L D e. c o. d e (Intelligent Systems & Software Engineering Lab) Στόχος της ώρας Επέκταση γνώσεων στην html
Διαβάστε περισσότεραΣε αυτό το µάθηµα θα ασχοληθούµε µε τη βελτίωση της εµφάνισης ενός ιστοτόπου, αλλά και τον εύκολο χειρισµό όλων των αλλαγών στην εµφάνιση της σελίδας
Σε αυτό το µάθηµα θα ασχοληθούµε µε τη βελτίωση της εµφάνισης ενός ιστοτόπου, αλλά και τον εύκολο χειρισµό όλων των αλλαγών στην εµφάνιση της σελίδας µέσω της τεχνολογίας των ιαδοχικών Φύλλων Στυλ (cascading
Διαβάστε περισσότεραΕισαγωγή στην HTML (1)
Εισαγωγή στην HTML (1) Πανεπιστήμιο Πελοποννήσου Τμήμα Επιστήμης & Τεχνολογίας Τηλεπικοινωνιών Ευάγγελος Α. Κοσμάτος HTML HyperText Mark-up Language Καθορίζει τον τρόπο που ο browser εμφανίζει τα διάφορα
Διαβάστε περισσότεραΚΕΡΑΜΟΠΟΥΛΟΣ ΕΥΚΛΕΙΔΗΣ
ΚΕΡΑΜΟΠΟΥΛΟΣ ΕΥΚΛΕΙΔΗΣ H HTML είναι το ακρωνύμιο των λέξεων HyperText Markup Language (γλώσσα μορφοποίησης υπερκειμένου) και είναι η βασική γλώσσα δόμησης σελίδων του World Wide Web. 2 Βασικά χαρακτηριστικά
Διαβάστε περισσότεραHTML 1. Στόχος της ώρας 11/3/2014. Εισαγωγή της γλώσσας HTML σε αρχάριο επίπεδο:
HTML 1 Στόχος της ώρας Τι είναι HTML και CSS; ιαχωρισμός περιεχομένου/μορφοποίησης Πότε χρησιμοποιούμε το ένα και πότε το άλλο; Εισαγωγή της γλώσσας HTML σε αρχάριο επίπεδο: Βασική σύνταξη, ετικέτες Τίτλοι,
Διαβάστε περισσότεραΠνευματικά Δικαιώματα 2013 Ίδρυμα ECDL (ECDL Foundation - www.ecdl.org)
PEOPLECERT Hellas A.E - Φορέας Πιστοποίησης Ανθρώπινου Δυναμικού Κοραή 3, 105 64 Αθήνα, Τηλ.: 210 372 9100, Fax: 210 372 9101, e-mail: info@peoplecert.org, www.peoplecert.org Πνευματικά Δικαιώματα 2013
Διαβάστε περισσότεραΣχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας
Πανεπιστήμιο Αιγαίου Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας Δικτυακά Πολυμέσα Ι (Β Έτος, 3ο εξ) Διάλεξη #5η: HTML: πίνακες (tables), πλαίσια (frames) Γαβαλάς Δαμιανός
Διαβάστε περισσότεραΤΕΙ ΚΑΒΑΛΑΣ ΣΧΟΛΗ ΤΕΧΝΟΛΟΓΙΑΣ ΕΦΑΡΜΟΓΩΝ ΤΜΗΜΑ ΒΙΟΜΗΧΑΝΙΚΗΣ ΠΛΗΡΟΦΟΡΙΚΗΣ
ΤΕΙ ΚΑΒΑΛΑΣ ΣΧΟΛΗ ΤΕΧΝΟΛΟΓΙΑΣ ΕΦΑΡΜΟΓΩΝ ΤΜΗΜΑ ΒΙΟΜΗΧΑΝΙΚΗΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΠΤΥΧΙΑΚΗ ΕΡΓΑΣΙΑ
Διαβάστε περισσότεραΠεριεχόμενα. Γαβαλάς Δαμιανός
Δικτυακά Πολυμέσα ΙΙ Διάλεξη #5 η : Τυπογραφία στο web Γαβαλάς Δαμιανός dgavalas@aegean.gr Περιεχόμενα Κατανόηση αρχών σχεδιασμού με γραμματοσειρές Κατανόηση των μονάδων μέτρησης που χρησιμοποιούνται στα
Διαβάστε περισσότεραΣΗΜΑΣΙΟΛΟΓΙΚΟΣ ΙΣΤΟΣ - XML
ΠΑΝΕΠΙΣΤΗΜΙΟ ΠΕΙΡΑΙΩΣ ΤΜΗΜΑ ΨΗΦΙΑΚΩΝ ΣΥΣΤΗΜΑΤΩΝ ΣΗΜΑΣΙΟΛΟΓΙΚΟΣ ΙΣΤΟΣ - XML Εργαστήριο 4 Στουγιάννου Ελευθερία estoug@unipi.gr Περιεχόμενα Τέταρτου Εργαστηριακού Μαθήματος XML CSS (CASCADING STYLE SHEETS)
Διαβάστε περισσότεραTEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο)
TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Στέλλα Λάμπουρα Εαρινό εξάμηνο Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί
Διαβάστε περισσότεραΜάθηµα 3 Περ ε ισ ι σότ ό ε τ ρ ε α α γ ια ι α τ η τ η γ λώσ ώ σα α HTML
Μάθηµα 3 Περισσότερα για τη γλώσσα Περισσότερα για τη γλώσσα HTML Περιεχόµενα Επικεφαλίδες (Headings) Παράγραφοι Λίστες Μορφοποίηση κειµένου Σύνδεσµοι Επικεφαλίδες (Headings) Οι επικεφαλίδες επιτελούν
Διαβάστε περισσότεραTEC510 Ανάπτυξη Δικτυακών Τόπων (Ε εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Γιώργος Μηλιώτης
TEC510 Ανάπτυξη Δικτυακών Τόπων (Ε εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Γιώργος Μηλιώτης Χειμερινό εξάμηνο 2011-2012 Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό
Διαβάστε περισσότεραΗ Βίβλος των CSS. Εισαγωγή στα CSS
Η Βίβλος των CSS Εισαγωγή στα CSS Τα Διαδοχικά Φύλλα Στυλ (CSS, Cascading Style Sheets) αποτελούν ένα πολύ καλό εργαλείο για να μπορούμε να αλλάζουμε την εμφάνιση και τη διάταξη (layout) των ιστοσελίδων
Διαβάστε περισσότερα