Γιατί χρειάζεται η«αόρατη» επικεφαλίδα (head elemet) των αρχείων HTML; Τι είναι το RSS Feed; Ανασκόπηση Στοιχείων HTML Πόσους τρόπους μας παρέχει η HTML για τη δημιουργία ζεύξεων; Τι μεταδεδομένα μπορούμε να προσθέσουμε σε μια ζεύξη (υπερσύνδεσμο); Πώς γίνεται ενσωμάτωση εικόνων στην HTML; Προκύπτουν μειονεκτήματα από τη χρήση εικόνων και πώς μπορούμε να τα αντιμετωπίσουμε; Τι είναι η γλώσσα RDF; Πώς εμπλουτίζουμε σημασιολογικά το HTML περιεχόμενο; Το στοιχείο Head Επικεφαλίδα HTML (head) Τα περιεχόμενά του δεν εμφανίζονται στον πλοηγό και στον χρήστη μιας ιστοσελίδας Εξαίρεση το title, το οποίο εμφανίζεται στο πλαίσιο του πλοηγού και αποθηκεύεται στους σελιδοδείκτες Περιλαμβάνει: Τίτλο αρχείου Οδηγίες που αφορούν στον πλοηγό Μεταπληροφορίες για το αρχείο 4 Περιγραφή και Κλειδολέξεις Δυναμική συμπεριφορά Καθορισμός περιγραφής και κλειδολέξεων (keywords) για ένα αρχείο HTML. Εισάγονται με τη βοήθεια του Στοιχείου meta Δεν είναι ορατά στον χρήστη ενός πλοηγού αλλά αξιοποιούνται από τις μηχανές αναζήτησης Ιστού και από συστήματα διαχείρισης περιεχομένου H «δυναμική συμπεριφορά» αρχείου ΗΤΜL καθορίζεται με ενσωμάτωση στο αρχείο HMTL προγραμματικών στοιχείων (σκριπτ) JavaScript με χρήση του Στοιχείου script Whe a browser ecouters a script elemet, it ll drop everythig else ad pause parsig of the rest of the documet while it tries to execute the code iside it. Whe you wat to make sure that your JavaScript is available before the mai documet loads, you eed to add it to the head. Τοποθετείστε τα σκρίπτ σας σε εξωτερικά αρχεία, και εισάγετέ τα στο αρχείο ΗΤΜL, όπου χρειάζεται, (έτσι μελλοντικές αλλαγές γίνονται στα αντίστοιχα αρχεία σκριπτ και όχι διεσπαρμένες σε διάφορα σημεία της HMTL) For your JavaScript, you do this usig script elemets that have o script iside them, but istead lik to a exteral file usig a src attribute 5 6
Χρήση Στοιχείων <lik> στο <head> <lik> elemets ca be used to defie relatioships betwee the curret documet ad other documets or files. Poit to a exteral style sheet Likig a HTML file with feeds Makig bookmarkig more fu usig favicos 8 RSS feeds A feed is a documet cotaiig codesed iformatio detailig the ew additios to your site i chroological order. Users ca subscribe to it ad get to kow what has chaged o your site recetly without havig to visit it. Feed readers: Feedly, Netvibes, or Bloglies. Some moder browsers (such as Firefox, Live Bookmarks) ad e-mail cliets (such as Mac Mail, or Outlook o Widows) ca also process ad display feeds. You ca recogise that a website offers a feed by the RSS ico ext to the URL. RSS feeds Feed pages are structured usig HTML or XML formats like RSS (RSS Rich Site Summary - origially RDF Site Summary, ofte dubbed Really Simple Sydicatio ) or Atom. Most of the time, persoal publishig systems (such as WordPress) will create ad maitai feed files for you To publish a feed of your site you eed to lik to the XML documet with the correct <lik> elemet i the <head> of your documet. 9 10 <?xml versio="1.0" ecodig="utf-8"?> <rss versio="2.0"> favicos <chael> <title>w3schools Home Page</title> <lik>http://www.w3schools.com</lik> <descriptio>free web buildig tutorials</descriptio> <item> <title>rss Tutorial</title> <lik>http://www.w3schools.com/rss</lik> <descriptio>new RSS tutorial o W3Schools</descriptio> </item> <item> <title>xml Tutorial</title> <lik>http://www.w3schools.com/xml</lik> <descriptio>new XML tutorial o W3Schools</descriptio> </item> </chael> </rss> favicos are small images, geerally with a file format of.ico, (Iteret Explorer does t support other formats; other browsers ca also use.pg). If you place oe o your web server ad add the relevat <lik> elemet to your documet <head>, the ico will be displayed i the browser s address bar to the left of the URL ad i the tab that site is ope i whe someoe accesses the page (ad ext to the site i the browser s bookmark list) You ca add a favico to your site by usig a <lik> elemet with a rel="shortcut Ico" attribute to referece it. The href attribute should poit to the locatio of the favico o your server. To produce a image i the.ico format you ca use free olie tools like gefavico (http://www.gefavico.com/). 12
Ιδιοχαρακτηριστικό type Xρησιμοποιείται με σημαντήρες όπως ο lik και ο script για να δηλώσει τον μορφότυπο του πόρου στον οποίο αυτοί παραπέμπουν: <lik href="file.css" rel="stylesheet" type= text/css"/> <script type="text/javascript" src= script.js"></script> Στην HTML5 η χρήση του είναι προαιρετική και στην απουσία του χρησιμοποιούνται προκαθορισμένες τιμές: <lik href="file.css" rel= stylesheet"/> <script src="script.js"></script> 14 Στοιχεία γενικής χρήσης: div, spa Στοιχεία HTML Γενικής χρήσης σημαντήρες για την ομαδοποίηση και επισήμανση περιεχομένου: <div> is used to wrap block-level elemets. if you wated to idetify three paragraphs as the mai cotet of the page, ad a list ad two paragraphs as the avigatio meu of the page, you would wrap them i <div>s with suitable classes, such as class="cotet" or class="meu". <spa> is used to wrap ilie elemets/cotet. if you wated to idetify a few words of text iside a paragraph as a editor s ote or warig ote with a special style, you d wrap them i <spa>s. 16 Page title: <title> Paragraph: <p> describes the +tle of the web page placed withi the head of the page displayed i the web browser's title bar ad whe bookmarkig the page placed withi the body of the page more paragraph examples 17 18
Headigs: <h1>, <h2>,..., <h6> headigs to separate major areas of the page (block) Horizotal rule: <hr> a horizotal lie to visually separate sec+os of a page (block) More headig examples should be immediately closed with /> 19 20 Ζεύξεις (liks) στην ΗΤΜL Liks (ζεύξεις, σύνδεσμοι) Liks created with the <lik> elemet i the documet <head>, for example the liks used to apply exteral CSS ad JavaScript to HTML files. Achor Liks that appear i the documet <body>, created usig the <a> elemet. These provide liks for site visitors to click through from our HTML documets to other resources o the Web, icludig other HTML documets, text files, PDFs, images, Word documets, ad whatever else people put up o the Web. 22 Liks: <a> liks, or "achors", to other pages (ilie) Ζεύξεις αγκύρας (lik achors) Ιδιοχαρακτηριστικά: href: cotais the path to the file you wat the lik to poit to. title: ca put extra iformatio about the exteral resource ito this attribute, such as more descriptio, the authors etc This should ot be used for essetial iformatio, as it may ot be exposed to users i certai situatios (For example, some browsers may ot display it as tooltips). target: specifies where to ope the liked documet uses the href attribute to specify the destiatio URL ca be absolute (to aother web site) or rela*ve (to aother page o this site) achors are ilie elemets; must be placed i a block elemet such as p or h1 23 rel: specifies the relatioship betwee the curret documet ad the liked documet id or class: you ca use a id or a class to act as a hook if you wat to style specific liks iside a HTML documet. Deprecated attribute: ame 24
Απόλυτες (absolute) vs Σχετικές (relative) ζεύξεις Αναγνωριστικά αποσπάσματος (Fragmet idetifiers) Absolute liks: full URLs. Will take you to a resource from ay startig poit. You ca use a absolute path to lik to a file o aother server, or eve to a file o the same server. To get to oe of these, you have to poit to its full URL. Some examples: http://www.amazo.com/ http://iteract.webstadards.org/curriculum/froted-developmet/ http://mywebsite.co.uk/resources/form1.pdf Relative liks are liks that exist o the same server as the curret page, ad idetify a required startig poit to reach the fial destiatio. Those directios oly work if you start i the right place. The relative lik specifies a file path to the file you wat to lik to. Relative liks iside file_to_lik_from.html: lik.html folder/lik2.html../lik3.html 25 Fragmet idetifiers are used to lik to aother part of the same documet. To make a elemet i your documet likable to, you simply eed to give it a id. For example: <h2 id="cats-ad-dogs">raiig cats ad dogs</h2> The to lik to this headig, you use the id preceded by a hash: <p>fid more out later about <a href= #cats-ad-dogs">raiig cats ad dogs</a>. </p> Mixig liks: http://example.com/features/bad_weather.html#cats-ad-dogs../features/bad_weather.html#cats-ad-dogs 26 Ζεύξεις: Βέλτιστες πρακτικές Achor text should be a piece of text that is: easy to uderstad uique to the page effectively describes what is beig liked to Alert users to large or uexpected files. Whe users click o a lik, they expect to be take to aother HTML page quickly, uless told otherwise. Do t surprise users with uexpected behaviour If you wat your users to kow that your liks are to be clicked o, make sure they look like liks! Because of browser default styles, users geerally expect pieces of uderlied text to be clickable liks. Coversely, do t uderlie thigs that are t liks. 27 Τεχνοτροπία ζεύξεων (lik stylig) Ζεύξεις στην HTML5 I geeral, it is a good idea to be fairly coservative with lik stylig Liks do t eed to look that differet from the ormal text beside them i the paragraphs of your site, as log they feature eough clues that they are clickable/focusable ad therefore liks. makig liks look the way users expect them to look Liks have several differet states to be aware of: lik: The default state it defies what liks should look like by default, whe you first get to them. By default, uvisited liks are coloured blue. visited: The style of a lik that has already bee visited (clicked o, or followed). By default, already visited liks are coloured purple. hover: The style of a lik whilst the mouse cursor is hoverig over it. focus: The style of a lik whe it has bee give focus by meas other tha the mouse, e.g, if the user has used the keyboard to avigate to it. active: The style of the lik while it is activated, i.e., as the mouse butto is held dow while the poiter is over the lik (whe the mouse butto is released the state chages to :focus); it is also the style of the last activated lik whe you arrive back at the origial documet by goig back i your browser history. I HTML4, the <a> elemet was restricted to just turig other ilie elemets ito liks. This was ok for most situatios, but it became aoyig whe you wated to, for example, tur a whole etire advertisig baer cotaiig images ad paragraphs ito a lik. HTML5 allows you to put a lik aroud ay amout of cotet you wat. <a> belogs both to the flow ad phrasig categories of HTML5 elemets 29 30
Images: <img> iserts a graphical image ito the page (ilie) Εικόνες the src attribute specifies the image URL HTML5 also requires a alt attribute describig the image 31 Εικόνες More about images Images are iserted ito a documet via HTML usig the <img> elemet. Ιlie elemet that at the very miimum has to cotai a src attribute, which holds the path to the image you wat to isert: <img src="elva.jpg"> Empty elemet; if writig XHTML, you would make the elemet selfclosig by writig <img src="kittes.jpg" />. The alt attribute allows you to iclude a text descriptio of your image that will be read out by scree readers, idexed by search egies, ad displayed if the image is uavailable. The title attribute provides extra supportig iformatio alogside it, which may be of use: <img src="elva.jpg" alt="a picture of Elva" title="elva s favourite toys"> It also gives a tooltip, ad most browsers will also display the title text at the bottom of the browser widow. if placed i a a achor, the image becomes a lik title attribute is a optioal tooltip (o ANY elemet) 33 34 Μειονεκτήματα εικόνων Διαστάσεις Images are woderful, but they do raise issues: Users with visual impairmets usig scree readers to access your cotet ca t see them! Search egies such as Google ad Yahoo! caot idex ay textual cotet i images, as they ca t see text that is iside a image, so it impacts egatively o your site s fidability. Some users who have really slow web coectios may have images tured off to reduce the amout of data they eed to dowload. The image might be uavailable for some reaso, for example, if the path to the image has bee misspelled or if the file has bee corrupted. Whe the browser fids a <img> elemet i the HTML, it starts loadig the image the src attribute poits to. Image dimesios ot kow, so: It will just display all the text lumped together, the shift the documet layout aroud to make way for the images whe they fially load ad appear This slows dow page loadig ad looks a bit cofusig as the layout ca suddely jump ad rearrage itself. To stop this happeig you ca tell the browser to allocate the right amout of space for the images before they are loaded usig the width ad height attributes: <img src="elva.jpg" alt="a picture of Elva Mills" title="elva s favourite toys" width="682" height="562"> 35 36
Μορφότυποι Εικόνων bmp (Bitmaps) are a Microsoft Widows file format, but they have see much usage o the Web. Usually ucompressed ad supports 16.7 millio colors (fairly good for displayig photos, but quite large). gif (Graphics Iterchage Format): popular but fairly limited. Uses lossless compressio, (ca be compressed to a smaller file without reductio i quality). Good for simple diagrams, shapes ad cartoos. Oly supports a 8-bit color palette, meaig a maximum of 256 colors per image, so it is o good for images that require may colors (photographs). Whe you save a copy of a image i.gif format, its colors get dithered dow to 256, which ca result i usightly loss of detail. jpg (Joit Photographic Experts Group): compressio format the files are actually stored as a JFIF (JPEG File Iterchage Format), eve though the files have a extesio of.jpg or.jpeg. jpg supports 16.7 millio colors (24-bit) with a relatively small file size pg (Portable Network Graphics): a ope-source successor to the.gif, is probably the best allroud graphics format for the Web. It supports 16.7 millio colours (24-bit), ad 8-bit trasparecy (you ca have 256 trasparet colors). Use.jpg for photos as the files will be smaller, ad for older browser compatibility. svg (Scalable Vector Graphics) - this is a vector graphics format (the others are all rasters) allowig you to create graphics usig markup similar to HTML (although a bit more complicated). Καλές πρακτικές για εικόνες Keep iformatio i images to a miimum People surfig o mobile devices might have images tured off because of small screes ad the slowess ad cost of dowloadig data. Visitors to your site might be blid or otherwise visually impaired ad ot able to see your images properly. Search egies oly idex text they do t aalyze images (yet), which meas that iformatio stored i images caot be foud ad idexed Optimize your images to keep the file size as small as possible Choose appropriate formats to suit the images you are dealig with. I geeral,.jpg is better for photographs, whereas.gif or.pg is better for o-photographs. Always provide a fallback for ay images that cotai useful cotet, whether that is a alt attribute, a loger descriptio available o a separate page, etc. 37 38 Lie break: <br> forces a lie break i the middle of a block elemet (ilie) Phrase elemets : <em>, <strog> em: emphasized text (usually redered i italic) strog: strogly emphasized text (usually redered i bold) Warig: Do't over-use br (guidelie: >= 2 i a row is bad) as usual, the tags must be properly ested for a valid page 39 40 Nestig tags Commets: <!--... --> commets to documet your HTML file or "commet out" text tags must be correctly ested (a closig tag must match the most recetly opeed tag) the browser may reder it correctly ayway, but it is ivalid HTML (how would we get the above effect i a valid way?) may web pages are ot thoroughly commeted (or at all) still useful at top of page ad for disablig code commets caot be ested ad caot cotai a -- 41 42
Λίστες στην HTML Kουκίδων (bulleted lists): <ul>...</ul> Aρίθμησης (umbered lists): <ol>...</ol> Λίστες HTML Oρισμών (defiitio lists): <dl>...</dl> Το περιεχόμενο μιας λίστας HTML περιέχει τουλάχιστον ένα στοιχείο καταλόγου, το οποίο ορίζεται με τον σημαντήρα <li>. Δεν πρέπει να υπάρχουν κενά μεταξύ του <li> και του κειμένου που το ακολουθεί, διότι έτσι δημιουργούνται προβλήματα στην στοιχειοθέτηση καταλόγων. Κάθε λίστα ορισμού περιλαμβάνει έναν τουλάχιστον ορισμό, που αποτελείται από δύο υποστοιχεία: <dt>...</dt> (term) και <dd>..</dd> (defiitio) Οι λίστες της HTML μπορεί να είναι φωλιασμένες (ested), ώστε στοιχείο μιας λίστας να είναι άλλη λίστα. 44 Uordered list: <ul>, <li> ul represets a bulleted list of items (block) li represets a sigle item withi the list (block) More about uordered lists a list ca cotai other lists: 45 46 Ordered list: <ol> Defiitio list: <dl>, <dt>, <dd> dl represets a list of defii+os of terms (block) dt represets each term, ad dd its defii+o 47 48
2.2: More HTML Elemets Quotatios: <blockquote> 2.1: Basic HTML 2.2: More HTML Elemets 2.3: Web Stadards a legthy quota+o (block) 49 50 Ilie quotatios: <q> a short quota+o (ilie) Why ot just write the followig? <p>quoth the Rave, "Nevermore."</p> HTML Character Etities a way of represe+g ay Uicode character withi a web page character(s) etity < > < > é è ñ é è π δ Δ π δ Δ И И " & " & Complete list of HTML etities: https://dev.w3.org/html5/html-author/charref 51 52 HTML-ecodig text Computer code: <code> a short sec+o of computer code (usually show i a fixed-width fot) To display the lik text i a web page, its special characters must be ecoded as show above 53 54
Preformatted text: <pre> a large sec+o of pre-formaied text (block) Εμπλουτίζοντας την σημασιολογία <meta> και Micro-formats displayed with exactly the whitespace / lie breaks give i the text show i a fixed-width fot by default how would it look if we had istead eclosed it i code tags? 55 Web page metadata: <meta> iforma+o about your page (for a browser, search egie, etc.) RDF RDF stads for Resource Descriptio Framework placed i the head sectio of your HTML page meta tags ofte have both the ame ad cotet attributes some meta tags use the http-equiv attribute istead of ame It is a W3C Recommedatio http://www.w3.org/rdf RDF is a graphical formalism ( + XML sytax + sematics) for represetig metadata for describig the sematics of iformatio i a machie- accessible way Provides a simple data model based o triples. usig a meta tag Cotet-Type stops validator "tetatively valid" warigs 57 20 58 The RDF Data Model Statemets are <subject, predicate, object> triples: <Sea,hasColleague,Ia> Ca be represeted as a graph: RDF Sytax RDF has a XML sytax that has a specific meaig: Every Descriptio elemet describes a resource Every attribute or ested elemet iside a Descriptio is a property of that Resource Sea Statemets describe properties of resources A resource is ay object that ca be poited to by a URI: The geeric set of all ames/addresses that are short strigs that refer to resources a documet, a picture, a paragraph o the Web, http://www.cs.ma.ac.uk/ idex.html, a book i the library, a real perso (?), isb://0141184280 Properties themselves are also resources (URIs) hascolleague Ia 21 59 We ca refer to resources by URIs <rdf:descriptio rdf:about="some.uri/perso/sea_bechhofer"> <o:hascolleague resource="some.uri/perso/ia_horrocks"/> <o:hasname rdf:datatype="&xsd;strig">sea K. Bechhofer</o:hasName> </rdf:descriptio> <rdf:descriptio rdf:about="some.uri/perso/ia_horrocks"> <o:hashomepage>http://www.cs.mam.ac.uk/~horrocks</o:hashomepage> </rdf:descriptio> <rdf:descriptio rdf:about="some.uri/perso/carole_goble"> <o:hascolleague resource="some.uri/perso/ia_horrocks"/> </rdf:descriptio> 23 60
What does RDF give us? A mechaism for aotatig data ad resources. Sigle (simple) data model. Sytactic cosistecy betwee ames (URIs). Low level itegratio of data. Micro-formats (σημασιολογική σήμανση) Web-based approach to sematic markup re-uses existig HTML/XHTML tags to covey metadata ad other attributes i web pages ad other cotexts such as RSS allows software to process automatically iformatio iteded for edusers (e.g. cotact iformatio, geographic coordiates, caledar evets). Embeds ad ecodes sematics withi attributes of markup tags: class, rel, rev Existig micro-formats: hcaledar, hcard, hnews, hrecipe, XFN (social relatioships) RDFa / RDFa Lite (RDF i attributes): W3C-Recommedatio addig a set of attribute-level extesios to HTML, XHTML, XML for embeddig rich metadata withi Web documets. Embeds RDF subject-predicate-object expressios withi XHTML documets Eables the extractio of RDF model triples by compliat user agets Provides a set of attributes that ca be used to carry metadata i a XML laguage: about, rel, rev, src, href, resource, property, cotet, datatype, typeof 24 61 62 Micro-formats Micro-formats (RDFa) The followig is a example of addig Dubli Core metadata to a XHTML file. Dubli Core data elemets are data typically added to a book or article (title, author, subject etc.) RDFa allows the passages ad words withi a text to be associated with sematic markup hcard µf 63 64 Μicrodata Microdata sytax Microdata is a HTML specificatio used to est metadata withi existig cotet o web pages. Arguably simpler tha RDFa ad microformats. Search egies, web crawlers, ad browsers ca extract ad process Microdata from a web page ad use it to provide a richer browsig experiece for users. Search egies beefit greatly from direct access to this structured data because it allows them to uderstad the iformatio o web pages ad provide more relevat results to users. Microdata uses a supportig vocabulary to describe a item ad ame-value pairs to assig values to its properties. Five attributes that ca go o ay HTML elemet Most importat: itemscope: defies the scope of oe particular item; it says this cotaier is all about oe sigle item itemtype: allows to specify a vocabulary so a parser or crawler will kow what kid of iformatio we are markig up - must be a absolute URL itemprop: used to assig properties to the cotet Microdata ca be ested. Example: 65 66
<div>i love the EPL425 course o Iteret Techologies taught at the Uiversity of Cyprus by Marios Dikaiakos</div> <div itemscope itemtype= http://ucyschemas.org/course > I love the <spa itemprop= code >EPL425</spa> course o <spa itemprop= ame >Iteret Techologies</spa> taught at the <spa itemprop= school >Uiversity of Cyprus</spa> by <spa itemprop= author itemscope itemtype= http://microformats.org/profile/hcard ><spa itemprop= f >Marios Dikaiakos</spa></spa> </div> HTML tables: <table>, <tr>, <td> A 2D table of rows ad colums of data (block elemet) Πίνακες table defies the overall table, tr each row, ad td each cell's data tables are useful for displayig large row/colum data sets NOTE: tables are sometimes used by ovices for web page layout, but this is ot proper sematic HTML ad should be avoided 70 Table headers, captios: <th>, <captio> ΗΤΜL και XHTML th cells i a row are cosidered headers; by default, they appear bold a captio at the start of the table labels its meaig 71 72
HTML και XHTML Pick a sytax style you are comfortable with. We'd recommed that you start off usig strict XML sytax, as it is guarateed to work i ay situatio. Adjust your style later, to suit you, whe you uderstad what you are doig a bit better. If you are usig the HTML5 doctype or a HTML 4.01 doctype, you ca use whatever style you wat. If you are usig a XHTML doctype, you eed to use XML well-formed sytax. Whichever style you are usig, best practice is to: Close all ope elemets: <p>paragraph</p>, ot <p>paragraph Nest them properly: <p>paragraph with bold <strog>word</ strog></p>, ot <p>paragraph with bold <strog>word</p></ strog> If you do't do this, your HTML will ot be well formed, ad CSS ad JavaScript may ot work reliably Oι απλοποιήσεις της HTML5 You ca omit quotes (ot always, but most of the time) or use uppercase, lowercase or a mix of the two. Lots of elemets do ot eed a closig tag aymore: </li>, </dt>, </dd>, </tr>, </th>, </td>, </thead>, </tfoot>, </ tbody>, </optio>, </optgroup>, </p> (i most cases), </head>, </body> ad </html>. Older browsers ofte add closig tags automatically at reder time. Close tags that would aturally be closed: the oes that delimit a particular zoe i the documet. Attribute values oly eed to be quoted if they cotai spaces or some o-alphaumeric characters, istead of writig <lik rel="stylesheet" href="style.css">, we could have used <lik rel=stylesheet href=style.css> istead. However, for compatibility with older browsers, it might be wiser to still use quotes... 73 74 Νέα δομικά στοιχεία HTML5 Νέα δομικά στοιχεία HTML5 As Web site layouts evolve, HTML5 structural elemets like lists, paragraphs, tables, etc. show their limits. Today, may Web sites offer avigatio meus, tabbed paels, headers, footers, ad so o. The way these "parts"' are implemeted relies heavily o <div> ad <spa> elemets with differet id ad class attributes, lots of CSS ad lots of JavaScript code to apply custom styles ad behaviors. However, with this approach, there are some issues: id ad class ames differ from oe developer to aother, from oe coutry to aother, etc. Eve with the same ids ad class ames, the css rules may be differet JavaScript libraries became heavier ad heavier over the years Web pages became heavier ad heavier over the years! These elemets could ot be hadled by the Web browser atively... Eve if there are differeces betwee ids, classes ad css/js implemetatios, there are also commo behaviors, commo layouts, commo "way of doig thigs" that could be guessed at first glace by a huma. Differet studies have bee coducted i order to idetify the most popular ids, class ames, widgets, etc. used o the Web <header> Itroductio of "sectioig elemets": a article, a sectio, the etire documet (header page). Typically the header of a Web site that appears o top of each page, or a header of a log <article> or of a log <sectio> <footer> Cotais the footer of a site, a log <article>, or a log <sectio> <av> Sectio that cotais the mai avigatio liks (withi the documet or to other pages). <article> Idepedet cotet, which ca be idividually extracted from the documet ad sydicated (RSS or equivalet) without pealizig its uderstadig. Typically a blog post. <sectio> Geeric sectio used to group differet articles for differet purposes or subjects, or to defie the differet sectios of a sigle article. Geerally used with a header. <time> Used for markig up times ad dates. <aside> Sectio whose cotet is ot ecessarily directly related to the mai cotet that surrouds it, but ca provide additioal iformatio. <figure> ad <figcaptio> Used to ecapsulate a figure as a sigle item, ad cotais a captio for the figure, respectively. <mai> The mai elemet represets the mai cotet of the body of a documet or applicatio. The mai cotet area cosists of cotet that is directly related to or expads upo the cetral topic of a documet or cetral fuctioality of a applicatio. There ca be oly oe <mai> elemet i a documet. 75 76 Header Nav Sectio Article Header Περισσότερα για article, sectio The <article> elemet was desiged for stad-aloe parts of a documet that could evetually be sydicated i RSS streams. <sectio> elemets are used to cut a logical part ito subparts. A <article> may be cut ito differet <sectio> elemets! Figure Figcaptio Aside A <sectio> may be cut ito differet <article> elemets, too! You ca use <div> elemets i all cases where the proposed structural elemets do ot fit your eeds. For defiig some cotet that should be styled, for example. 78
Καλές πρακτικές κωδικοποίησης HTML Σημασία της «καλής» σημασιολογίας Σημασιολογία (sematics): η σημασία μια λέξης, μιας φράσης, μιας πρότασης κλπ. «Καλώς διατυπωμένη σημασιολογία» στο περιεχόμενο των αρχείων HTML σημαίνει ότι: Ο κώδικας HTML είναι αυτο-περιγραφικός Οι σημαντήρες HTML που περικλείουν κάποιο τμήμα περιεχομένου, ταιριάζουν με τον επιδιωκόμενο «σχολιασμό» (markup) του τμήματος αυτού 81 Σημασία της «καλής» σημασιολογίας Παράδειγμα: Mark up a top-level headig followed by two lower-level headigs, with cotet i betwee them <fot size="5">iformatio about cats</fot> <fot size="2">this documet cotais iformatio about cats.</fot> <fot size="4">feedig cats</fot> <fot size="2">cats eat cat food.</fot> <fot size="4">cat games</fot> <fot size="2">cats like to play with balls of wool, ad chase mice.</fot> Πόσο καλή είναι αυτή η λύση; Φέρει το επιδιωκόμενο αποτέλεσμα στοιχειοθέτησης. Όμως: Η χρήση των στοιχείων <fot> είναι απαρχαιωμένη, κακή πρακτική και πρέπει να αποφεύγεται. Επιβάλλεται ο διαχωρισμός της περιγραφής της δομής του περιεχομένου από την περιγραφή της τεχνοτροπίας, με τη χρήση CSS. 82 Σημασία της «καλής» σημασιολογίας Άλλη λύση είναι η σύνδεση του περιεχομένου με οδηγούς τεχνοτροπίας (stylesheets) με αξιοποίηση του στοιχείου div: <div id="top-headig">iformatio about cats</div> <div class="paragraph">this documet cotais iformatio about cats.</div> <div class="secod-level-headig">feedig cats</div> <div class="paragraph">cats eat cat food.</div> <div class="secod-level-headig">cat games</div> <div class="paragraph">cats like to play with balls of wool, ad chase mice.</div> Το πρόβλημα είναι ότι τα στοιχεία div είναι περιβλήματα (cotaiers) γενικής χρήσης και δεν έχουν ειδικό σημασιολογικό περιεχόμενο. Δεν περιγράφεται η επιδιωκόμενη δομή του περιεχομένου, έστω κι αν αυτό στοιχειοθετηθεί σωστά. Σημασία της «καλής» σημασιολογίας Μια τρίτη λύση χρησιμοποιεί στοιχεία headig για να προσδιορίσει τις επικεφαλίδες και στοιχεία paragraph για να προσδιορίσει κείμενο παραγράφων: Η επιθυμητή λογική δομή δεν βασίζεται σε οδηγίες τεχνοτροπίας αλλά στην σωστή περιγραφή του κειμένου, η οποία είναι αυτοπεριγραφική, χωρίς αμφισημία και κατανοητή από τις μηχανές. <h1>iformatio about cats</h1> <p>this documet cotais iformatio about cats.</p> <h2>feedig cats</h2> <p>cats eat cat food.</p> <h2>cat games</h2> <p>cats like to play with balls of wool, ad chase mice.</p> 83 84
Σημασία της «καλής» σημασιολογίας Γιατί είναι κακή η έλλειψη σημασιολογικής περιγραφής περιεχομένου; People with impaired visio use a assistive techology called a scree reader to read web pages out to them. These use sematics i may ways for example, they use headigs to avigate the differet pieces of cotet, so the users ca fid what they wat o a page. If there are o headig elemets preset, it is impossible for these users to effectively avigate the cotet. Search egies (Google, Yahoo!) use keywords they fid o pages to idex ad rak cotet Τhey give more weight to keywords i headigs. If your cotet cotais o headigs, it will be less likely to come up i search results, so fewer users will fid it. Καλές πρακτικές Οι πλοηγοί HTML είναι γενικώς ανεκτικοί σε εσφαλμένο κώδικα HTML. Ωστόσο, ενδείκνυται να ακολουθούμε ορισμένες γενικές καλές πρακτικές στη συγγραφή HTML: Separate cotet from presetatio you should keep all cotet iside the HTML, but separate all stylig iformatio ito CSS. This meas ot usig presetatioal elemets like <fot>. Make sure your text is always well-worded ad easily readable. Make sure your cotet is as usable ad accessible as possible. 85 86 Why separate cotet from presetatio? Καλές πρακτικές Efficiecy of code: Larger files take loger to dowload. You do t wat to waste your badwidth o large pages cluttered up with stylig ad layout iformatio i every HTML file. A much better alterative is to make the HTML files stripped dow, ad iclude the stylig ad layout iformatio just oce i a separate CSS file. Ease of maiteace: If stylig ad layout iformatio specified i oe place, you oly have to make updates there if you wat to chage your site s appearace. Accessibility: Visually impaired users ca use a scree reader to access the iformatio through soud rather tha sight it ca do a much better job if it fids proper sematic structure. I additio keyboard cotrols o web pages (importat for those with mobility impairmets that ca't use a mouse) work much better if they are built usig best practices. Device compatibility: If your HTML/XHTML page is just plai markup, with o style iformatio, it ca be reformatted for differet devices with vastly differig attributes (eg scree size) by simply applyig a alterative style sheet. CSS also atively allows you to specify differet style sheets for differet presetatio methods/media types Web crawlers/search egies: If a crawler has trouble fidig the cotet of your pages, or misiterprets what s importat because you have t defied headigs as headigs ad so o, the your rakigs i relevat search results will probably suffer. It s just good practice: Talk to ay professioal stadards-aware web developer or desiger, ad they ll tell you that separatig cotet, style, ad behavior is the best way to develop a web applicatio. 87 88