Προγραμματισμός και Συστήματα στον Παγκόσμιο Ιστό Ενότητα 2: Η «γλώσσα» HTML και CSS

Προγραμματισμός και Συστήματα στον Παγκόσμιο Ιστό Ενότητα 2: Η «γλώσσα» HTML και CSS Καθ. Ιωάννης Γαροφαλάκης Πολυτεχνική Σχολή Μηχανικών Η/Υ & Πληροφορικής

Σκοποί ενότητας Σκοπός της παρούσας ενότητας είναι να εισαχθεί ο φοιτητής στις βασικές έννοιες της «γλώσσας» HTML για τη δημιουργία στατικών σελίδων διαδικτύου καθώς και της CSS για τη μορφοποίηση και εμφάνιση των στοιχείων μιας ιστοσελίδας. 2

Περιεχόμενα ενότητας HTML WYSIWYG vs Console Το στοιχείο HEAD Το στοιχείο BODY παράμετροι Web Colors RGB Επικεφαλίδες h1,, h6 Παράγραφοι μορφοποίηση κειμένου Μη διατεταγμένες λίστες Λίστες ορισμού 3

Περιεχόμενα ενότητας Εμφωλευμένες λίστες Linking Εικόνες Πίνακες Το στοιχείο Form HTML5 Valid HTML 4

Περιεχόμενα ενότητας Cascading Style Sheets Τρόποι εισαγωγής style sheet Inline styles Internal style sheets External style sheets CSS Units Τοποθέτηση στοιχείων (positioning) 5

Περιεχόμενα ενότητας Απόλυτη τοποθέτηση στοιχείων Σχετική τοποθέτηση στοιχείων Διαστάσεις αντικειμένων Floating στοιχεία Borders Responsive Web Design Flexible Layout Media Queries 6

HTML Hyper Text Markup Language Τρέχουσα επίσημη έκδοση 4.01-24 December 99 Νέα έκδοση HTML 5 W3C Candidate Recommendation 04 February 2014 Ένα HTML αρχείο είναι ένα αρχείο κειμένου που περιέχει markup tags Τα tags λένε στον Web Browser πώς να παρουσιάσει το περιεχόμενο της σελίδας Τα HTML αρχεία έχουν htm ή html καταλήξεις Ένα HTML αρχείο μπορεί να δημιουργηθεί χρησιμοποιώντας έναν απλό text editor (π.χ. notepad) 7

WYSIWYG vs Console Microsoft Expression Web Adobe Dreamweaver Και η λίστα δεν τελειώνει Γιατί να μάθω «the hard way» Αξιοπιστία και καλύτερο έλεγχο Μικρότερο μέγεθος σελίδων -> ταχύτερη εμφάνιση Κατανοούμε το τι φτιάχνουμε -> Ευκολότερη επίλυση προβλημάτων (π.χ. ασυμβατότητα με κάποιους browsers) Ενσωμάτωση κώδικα (π.χ. PHP) 8

Ένα απλό HTML αρχείο <html>  <head> <title>welcome to the Web Site!</title> </head> <body> <p>welcome to the Web Site!</p> </body> </html> View page 9

Το στοιχείο HEAD Title : ορισμός του τίτλου της σελίδας Script : καθορισμός της scripting γλώσσας Style : καθορισμός style sheet Base : ορισμός της βάσης αρχής για τον καθορισμό των σχετικών urls Meta : καθορισμός ζεύγους πληροφοριών (όνομα/τιμή) - π.χ. εισαγωγή keywords Link : ορισμός σχέσεων με άλλα κείμενα 10

Το στοιχείο BODY - παράμετροι bgcolor : το χρώμα του φόντου της σελίδας text : το χρώμα των χαρακτήρων του κειμένου link / vlink / alink : το χρώμα των links background : το URL της εικόνας που θα εμφανίζεται στο φόντο της σελίδας <body bgcolor=orange text=green> green= #008000 View page 11

Τα attributes είναι ξεπερασμένα Attribute Value Description alink color Not supported in HTML5 Specifies the color of an active link in a document background URL Not supported in HTML5 Specifies a background image for a document bgcolor color Not supported in HTML5 Specifies the background color of a document link color Not supported in HTML5 Specifies the color of unvisited links in a document text color Not supported in HTML5 Specifies the color of the text in a document vlink color Not supported in HTML5 Specifies the color of visited links in a document 12

Web Colors - RGB Εικόνα 1: Τα 125 βασικότερα χρώματα http://en.wikipedia.org/wiki/rgb_color_model#mediaviewer/file:palette_of_125_main_col ors_with_rgb_components_divisible_by_64.gif 13

Το στοιχείο BODY Στοιχεία ορισμού περιοχής Επικεφαλίδες <h1></h1>,, <h6></h6> Παράγραφοι - <p></p> Λίστες - <ul>, <ol> <dl> Φόρμες - <form></form> Πίνακες - <table></table> Οριζόντιες γραμμές - <hr> Στοιχεία ορισμού κειμένου Font style elements - <b></b>, <i></i>, <u></u> Links - <a></a> Εικόνες - <img> Διακοπές κειμένου - <br> 14

Επικεφαλίδες h1,, h6 <body> <h1>level 1 Header</h1> <h2 align=left>level 2 header</h2> <h3>level 3 header</h3> <h4 align=center>level 4 header</h4> <h5>level 5 header</h5> <h6 align=right>level 6 header</h6> </body> Liquid design! View page 15

Παράγραφοι μορφοποίηση κειμένου <body> <hr>  <p> All <i>information</i> from this <b>presentation</b> is <strong> </strong> <u>alex</u> & al.</p> <p><del>you know that 2<sup>10</sup> = 1024 </del> <br> But you <sub>sometimes</sub> make mistakes.</p> <p>did you know how to write this <strong> ¼</strong>??? </p> <hr>  </body> View page 16

Μη διατεταγμένες λίστες <ul> <li>facebook</li> <li type=disc>twitter</li> <li type=square>instagram</li> <li type=circle>pinterest</li> </ul> View page 17

Διατεταγμένες λίστες <ol> <li>facebook</li> <li type=1>twitter</li> <li type=a>instagram</li> <li type=i>pinterest</li> </ol> View page 18

Λίστες ορισμού <dl> <dt>facebook</dt><dd><i>το πιο δημοφιλές </i></dd> <dt>twitter</dt><dd><i>το πιο ψαγμένο</i></dd> <dt>instagram</dt><dd><i>το καλλιτεχνικό</i></dd> <dt>pinterest</dt><dd><i>pin!!!!</i></dd> </dl> View page 19

Εμφωλευμένες λίστες <ul> <li>new Media: <ul> <li>new games</li> <li>new applications <ul> <li>for business</li><li>for pleasure</li> </ul> </li> <li>news</li> <li>programming <ul> <li>c</li><li>c++</li> </ul> </li> </ul> </li> <li>keeping in touch with old friends</li> </ul> View page 20

Linking <a href = "http://www.gmail.com">google Mail</a> <a href = "links2.html">another page on the same folder</a> <a href = "mailto:stefanis@ceid.upatras.gr">email me</a> <a href = "#bottom">go to the bottom of this page</a> <a name="bottom"><h2>here is the bottom</h2> View page 21

Εικόνες <img src = "Pony_Express_Stolen_Mail_1860.jpg" alt = Stolen mail"> <a href =../03/links.html"> </a> <img src = "Pony_Express_Stolen_Mail_1860.jpg" alt = Stolen mail"> <img border = 0 src = "Pony_Express_Stolen_Mail_1860.jpg"> View page 22

Πίνακες <table border = "1" width = "40%" align = "center" > <caption>here is a small sample table</caption> <tr> <th>this is the head.</th> </tr> <tr> <td>this is the body.</td> </tr> </table> View page 23

Το στοιχείο Table - παράμετροι align = {left, right, center} : την οριζόντια τοποθέτηση του πίνακα width = {452, 50%} : το πλάτος του πίνακα border = {0,1} : ύπαρξη περιγράμματος cellspacing = {0,1, } : το κενό μεταξύ γειτονικών κελιών cellpadding : το κενό μεταξύ κελιού και περιεχομένων <caption align = {top, bottom}> </caption> View page 24

Ένας πολύπλοκος πίνακας <table border = "1"> <tr> <th rowspan = "2"><img src = "camel.gif"></th> <th colspan = "4" valign = "top"> <h1>camelid comparison</h1></th> </tr> <tr valign = "bottom"> <th># of Humps</th> <th>indigenous region</th> <th>spits</th> <th>produces Wool</th> </tr> </table> View page 25

tr / th / td - παράμετροι nowrap : απαγορεύει την αναδίπλωση κειμένου rowspan = {int} : τις γραμμές που καταλαμβάνονται από το κελί colspan : τις στήλες που καταλαμβάνονται width / height : το πλάτος / ύψος του κελιού align / valign : οριζόντια / κάθετη ευθυγράμμιση των περιεχομένων bgcolor tr align & valign = {top, middle, bottom} View page 26

Φόρμες <form method = "post" action = "formmail.php"> <input type = "hidden" name = "subject" value = "Feedback Form"> Name: <input name = "name" type = "text" size = "25"> <input type = "submit" value = "Submit"> <input type = "reset" value = "Clear"> </form> View page 27

Το στοιχείο Form - παράμετροι action : ορίζει το url που θα χρησιμοποιηθεί από τον εξυπηρετητή για να επεξεργαστεί τα δεδομένα της φόρμας method = {get, post}: ορίζει τη μέθοδο αποστολής των περιεχομένων της φόρμας get : στέλνει τα περιεχόμενα σαν query στο url post : τα στέλνει στο σώμα του http μηνύματος enctype : καθορίζει τον τύπο αποκωδικοποίησης των περιεχομένων 28

Μία πολύπλοκη φόρμα <form method = "post" action = " formmail.asp"> Your comments: <textarea name = "comments" rows = "4" cols = "36"> Comment here!</textarea> Email Address: <input name = "email" type = "password" size = "25"> Site design <input name = like_most" type = "checkbox" value = "Design of the site"> Links <input name = " like_most" type = "checkbox" value = "Links"> Ease of use <input name = " like_most" type = "checkbox" value = "Easiness of the use"> </form> View page 29

Άλλη μία φόρμα <form method = "post" action = "formmail.asp"> Search engine <input name = "how_get_to_site" type = "radio" value = "search engine" checked> Links from another site <input name = " how_get_to_site " type = "radio" value = "link"> Rate our site: <select name = "rating"> <option selected>-</option> <option>excellent</option><option>very Good</option> <option>fair</option><option>poor</option> </select> </form> View page 30

Το στοιχείο Form input : παίρνει διάφορες παραμέτρους Απαγορεύεται να υπάρχει ετικέτα τέλους (</input>) textarea : για πεδία κειμένου πολλαπλών γραμμών rows / columns </textarea> select : μονής ή πολλαπλής επιλογής μενού option - selected </select> 31

Το στοιχείο Input παράμετρος type Καθορίζει τον τύπο του πεδίου εισόδου text : κείμενο μίας γραμμής size, maxlength password : όμοιο με τον τύπο text, αλλά απεικονίζει τον χαρακτήρα * checkbox : δημιουργεί ζεύγος ονόματος/τιμής, υποστηρίζονται πολλαπλές τιμές checked radio : δέχεται μόνο μία τιμή, μία ομάδα επιλογών έχει το ίδιο όνομα submit : αποστολή δεδομένων reset : «καθαρίζει» τα περιεχόμενα 32

Η HTML δεν είναι γλώσσα προγραμματισμου! Είναι απλά markup. Γιατί: Δεν έχει δομές ελέγχου και επανάληψης Δε δηλώνεις μεταβλητές Δε γράφεις συναρτήσεις Δε κάνεις λογικούς & μαθηματικούς υπολογισμούς 33

HTML5 Το νέο, υπό συζήτηση πρότυπο για την HTML Νέα Elements Attributes Μειώνει την ανάγκη για εξωτερικά plugins (π.χ. Flash) 2D/3D γραφικά Τοπική αποθήκευση Ανεξαρτησία από συσκευές - πλατφόρμες Καλύτερη διαχείριση σφαλμάτων 34

Νέα Elements New Media Elements HTML5 offers new elements for media content: Tag <audio> <video> <source> <embed> Description Defines sound content Defines a video or movie Defines multiple media resources for <video> and <audio> Defines a container for an external application or interactive content (a plugin) <track> The new <canvas> Element Defines text tracks for <video> and <audio> Tag Description <canvas> Used to draw graphics, on the fly, via scripting (usually JavaScript) New Form Elements HTML5 offers new form elements for more functionality: Tag <datalist> <keygen> <output> Description Specifies a list of pre-defined options for input controls Defines a key-pair generator field (for forms) Defines the result of a calculation 35

Νέα Attributes Π.χ. <select> Attribute Value Description autofocus autofocus Specifies that the drop-down list should automatically get focus when the page loads disabled disabled Specifies that a drop-down list should be disabled form form_id Defines one or more forms the select field belongs to multiple multiple Specifies the multiple options can be selected at once name name Defines a name for the drop-down list required required Specifies that the user is required to select a value before submitting the form size number Defines the number of visible options in a dropdown list 36

W3 Validator Valid HTML http://validator.w3.org Δηλαδή? Όλα τα tags πρέπει να «κλείνουν» και με τη σωστή σειρά Υποχρεωτικά lowercase tags Οι ιδιότητες στα tags ανάμεσα σε quotes Και πολλά άλλα 38

Valid HTML Γιατί τόση φασαρία; Μια χαρά εμφανίζεται Πλεονεκτήματα XHTML: Μικρός & ευέλικτος parser Ταχύτερο rendering Καλύτερη υποστήριξη από browsers άσχετα από λειτουργικό ή συσκευή (mobile web) Automated processing Επεκτασιμότητα SVG, XForms, MathML, Semantic Web 39

Cascading Style Sheets Καθορίζουν το style, τη δομή και τη θέση των στοιχείων μέσα στο αρχείο Κάνουν εφικτό το διαχωρισμό της εμφάνισης των δεδομένων και των ίδιων των δεδομένων Ο valid τρόπος για μορφοποίηση! Σύνταξη selector {property: value; property2: value2} selector : html tag {body, p, h1, } property : το χαρακτηριστικό που θέλουμε να αλλάξουμε color, font-family, text-align 40

Τρόποι εισαγωγής style sheet Inline styles Καθορίζει το style για συγκεκριμένα elements Χρήση του attribute style μέσα σε tag Μπορεί να καθορίσει πολλά properties Internal styles sheets Ορίζεται μέσα στο <head> με το tag <style> Επηρεάζει τα elements στα οποία αναφέρεται External style sheets Δημιουργία ξεχωριστού αρχείου css με το οποίο συνδέεται το html αρχείο Ιδανικό όταν το ίδιο style sheet εφαρμόζεται σε περισσότερα από ένα αντικείμενα 41

Inline styles <p>this text does not have any style applied to it.</p> <p style = "font-size: 20pt">This text has the <em>fontsize</em>style applied to it, making it 20pt.</p> <p style = "font-size: 20pt; color: #0000ff">This text has the <em>font-size</em> and <em>color</em> styles applied to it, making it 20pt. and blue.</p> Μονάδα μέτρησης pt (point): Ισούται με το 1/72 της ίντσας View page 42

Internal style sheets (1) <head> <style type = "text/css"> em { background-color: #80ffff; color: white } h1 { font-family: arial, sans-serif } p { font-size: 14pt }.special { color: green} </style> </head> class attribute : <p class= special > </p> View page 43

Internal style sheets (2) <h1 class = "special">css Text</h1> <p>text properties allow you to control the appearance of text.... </p> <h1>css Fonts</h1> <p class = "special">the Font properties allow you to change the <em>font family, boldness, size, and the style</em> of a text.</p> View page 44

Μερικά παραδείγματα <style type = "text/css"> a { text-decoration: none } a:hover { text-decoration: underline; color: red; background-color: #ccffcc } li em { color: red; font-weight: bold } ul { margin-left: 75px } ul ul { text-decoration: underline; margin-left: 15px } </style> Px (pixel): Είναι σχετικό για κάθε σύστημα View page 45

External style sheets <head> <title>external Style Sheets</title> <link rel = "stylesheet" type = "text/css" href = "styles.css"> </head> View page 46

CSS Units % percentage in inch cm centimeter mm millimeter em 1em is equal to current font size ex one ex is the x-height of a font pt point (1 pt is the same as 1/72 inch) pc pica (1 pc is the same as 12 points) px pixels (a dot on the computer screen) 47

Τοποθέτηση στοιχείων (positioning) Static: τοποθέτηση πάντα με βάση την κανονική ροή της σελίδας. Η προκαθορισμένη τοποθέτηση για τα html στοιχεία. Fixed: τοποθέτηση σε σχέση με το παράθυρο του browser. Absolute: τοποθέτηση σε σχέση με το πρώτο parent element που έχει τοποθέτηση διαφορετική από static, αλλιώς σε σχέση με το <html> Relative: τοποθέτηση σε σχέση με την κανονική θέση του στοιχείου. 48

Απόλυτη τοποθέτηση στοιχείων <p><img src = images/i.gif" style = "position: absolute; top: 0px; left: 0px; z-index: 1" alt = "First image"></p> <p style = "position: absolute; top: 50px; left: 50px; z-index: 3; font-size: 20pt;">Positioned Text</p> <p><img src = images/circle.gif" style = "position: absolute; top: 25px; left: 100px; z-index: 2" alt = "Second image"></p> View page 49

Σχετική τοποθέτηση στοιχείων.super { position: relative; top: -1ex }.sub { position: relative; bottom: -1ex }.shiftleft { position: relative; left: -1ex }.shiftright { position: relative; right: -1ex } em: the 'font-size' of the relevant font ex: the 'x-height' of the relevant font View page 50

Διαστάσεις αντικειμένων <style type = "text/css"> div { background-color: #ffccff; margin-bottom:.3cm } </style>.. <div style = "width: 80%; text-align: center"> Here is some CENTERED text that goes in a box which is set to stretch across 80% of the width of the screen.</div> View page 51

Floating στοιχεία img {float:right} float : καθορίζει τη θέση μιας εικόνας ή ενός κειμένου όταν αυτό βρεθεί μέσα σε άλλο στοιχείο padding : καθορίζει το κενό μεταξύ του στοιχείου και των περιεχομένων του View page 52

Borders (1) border-width: {thick (παχύ), medium, thin (λεπτό) } border-style: {groove(αυλάκι), dotted, solid, } border-color *border-{top, left, right, bottom}-width View page 53

Borders (2) <div style = "border-style: solid"> Solid border</div> <div style = "border-style: double"> Double border</div> <div style = "border-style: groove"> Groove border</div> View page 54

Responsive Web Design Η πρακτική της δημιουργίας ενός website κατάλληλο για οποιαδήποτε συσκευή, ανεξάρτητα από το μέγεθος της οθόνης Responsive vs Mobile: ο 2 ος όρος αναφέρεται στη δημιουργία άλλης έκδοσης του website για κινητές συσκευές. Στο responsive design έχουμε ένα website που η εμφάνισή του προσαρμόζεται στα χαρακτηριστικά της συσκευής. 55

Τεχνικές Flexible layout The practice of building the layout of a website with a flexible grid, capable of dynamically resizing to any width. Flexible grids are built using relative length units, most commonly percentages or em units. Media Queries Media queries provide the ability to specify different styles for individual browser and device circumstances, the width of the viewport or device orientation for example. Flexible Media Images, videos, and other media types need to be scalable, changing their size as the size of the viewport changes. 56

Flexible Layout Media Queries Layout @media: all, screen, print, tv, 3d-glasses (html5) Flexible Media Tutorial: http://learn.shayhowe.com/advanced-htmlcss/responsive-web-design 57

Τέλος Ενότητας

Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί στo πλαίσιo του εκπαιδευτικού έργου του διδάσκοντα. Το έργο «Ανοικτά Ακαδημαϊκά Μαθήματα στο Πανεπιστήμιο Πατρών» έχει χρηματοδοτήσει μόνο την αναδιαμόρφωση του εκπαιδευτικού υλικού. Το έργο υλοποιείται στο πλαίσιο του Επιχειρησιακού Προγράμματος «Εκπαίδευση και Δια Βίου Μάθηση» και συγχρηματοδοτείται από την Ευρωπαϊκή Ένωση (Ευρωπαϊκό Κοινωνικό Ταμείο) και από εθνικούς πόρους. 59

Σημείωμα Ιστορικού Εκδόσεων Έργου Το παρόν έργο αποτελεί την έκδοση 1.0. 60

Σημείωμα Αναφοράς Copyright Πανεπιστήμιο Πατρών, Ιωάννης Γαροφαλάκης, 2015. «Προγραμματισμός και Συστήματα στον Παγκόσμιο Ιστό». Έκδοση: 1.0. Πάτρα 2015. Διαθέσιμο από τη δικτυακή διεύθυνση: https://eclass.upatras.gr/courses/ceid1093/. 61

Σημείωμα Αδειοδότησης Το παρόν υλικό διατίθεται με τους όρους της άδειας χρήσης Creative Commons Αναφορά, Μη Εμπορική Χρήση Παρόμοια Διανομή 4.0 [1] ή μεταγενέστερη, Διεθνής Έκδοση. Εξαιρούνται τα αυτοτελή έργα τρίτων π.χ. φωτογραφίες, διαγράμματα κ.λ.π., τα οποία εμπεριέχονται σε αυτό και τα οποία αναφέρονται μαζί με τους όρους χρήσης τους στο «Σημείωμα Χρήσης Έργων Τρίτων». [1] http://creativecommons.org/licenses/by-nc-sa/4.0/ Ως Μη Εμπορική ορίζεται η χρήση: που δεν περιλαμβάνει άμεσο ή έμμεσο οικονομικό όφελος από την χρήση του έργου, για το διανομέα του έργου και αδειοδόχο που δεν περιλαμβάνει οικονομική συναλλαγή ως προϋπόθεση για τη χρήση ή πρόσβαση στο έργο που δεν προσπορίζει στο διανομέα του έργου και αδειοδόχο έμμεσο οικονομικό όφελος (π.χ. διαφημίσεις) από την προβολή του έργου σε διαδικτυακό τόπο Ο δικαιούχος μπορεί να παρέχει στον αδειοδόχο ξεχωριστή άδεια να χρησιμοποιεί το έργο για εμπορική χρήση, εφόσον αυτό του ζητηθεί. 62