Sperimentazioni di Tecnologie e Comunicazioni Multimediali: Lezione 3


Published on

Sperimentazioni di Tecnologie e Comunicazioni Multimediali: Lezione 3

Published in: Education, Technology, Design
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Sperimentazioni di Tecnologie e Comunicazioni Multimediali: Lezione 3

  1. 1. SPERIMENTAZIONI DI TECNOLOGIE E COMUNICAZIONI MULTIMEDIALI Lesson 3: BASE HTML & CSSSalvatore Iaconesisalvatore.iaconesi@artisopensource.net
  2. 2. This lesson is aboutHTML & CSS
  3. 3. The course is not aboutHTML & CSSBut we need them to buildour web and mobile experiences
  4. 4. ... so here is a large tutorial so that we know a little more about HTML & CSSWe will use these things in class multiple times!Please study this tutorial well, so that youll be able to use your time better in class!(and dont be afraid about mistakes...things will turn out to be really easy the third/fourth/fifth time you do them)
  5. 5. HTML = structure of a pageCSS = aesthetics of a page
  6. 6. HTML
  7. 7. In HTML you define structure!Is this a title?Is this a paragraph of text?Is this box a user profile?Etcetera...In HTML you dont care if its green or blue,you care about what each object MEANSand about what is the STRUCTURE and ROLE of anobject of a page
  8. 8. HTML is a DOCUMENT!HTML is what is called a MARKUP LANGUAGEMARKUP languages describe documents in terms of their- structures- links- relations- rolesHTML describes the STRUCTURE of a web page(and, since a little while, of a mobile web page, too)http://en.wikipedia.org/wiki/Markup_languagehttp://en.wikipedia.org/wiki/Html
  9. 9. Each document (and, thus, HTML documents) have: META DATA & DATA META DATA: describes what is in the document (ex.: title, author, date, keywords) DATA: is the content of the document (ex.: text, images, videos, links)
  10. 10. META DATA is disseminatedall over your HTML documentsIt is used for various purposesSEO (Search Engine Optimization)InternationalizationAccess for users with disabilitiesSemantic webAnd loads more....
  11. 11. SEO (Search Engine Optimization)It is not acceptable any more to have a website that is not optimized forsearch engines.If your site is not reachable on search engines it does not exist.Even more: SEO now reaches into Social Networks (Facebook, Twitter...)The trend is:“Classical websites (however beautiful and interactive) are progressivelyless useful (tending to zero).Websites today MUST: connect to social networks, establish dialogues,must be readable or easily translatable by people across languages andcultures, must be searchable, taggable, aggregatable, indexable.”
  12. 12. InternationalizationYou dont need to translate everything, but you NEED to make everything easilyTranslatable to your users (for example by using Google Translate services).In your meta data:- you need to define the main language of the page- you need to define the correct character set of the page (UTF-8 if youre not sure)- you need to use plain, readable text wherever you can- you need to include meta data even in tags wherever you canTry avoiding Flash whenever you can(HTML5 and CSS3 do wonders! Use these if you can)
  13. 13. Access for disabilitiesThis is how a blind person sees your webpage
  14. 14. Access for disabilities oreducation issuesLots of tools exist nowadays to make the world an enormously better place forPeople who cant see, hear, or for people who may be a bit more unlucky thanYou are, and maybe they dont know how to read because they didnt have a chanceTo go to school for some reason.You can let all of them experience the beautiful things you do, or the beautiful websitesYou will create for your clients. If you just use the right metadata at the right spot.for example giving nice titles to images, or adding descriptions to the elements ofYour page, or by describing if an element on page is a title or a subtitle, etc.They will experience a wonderful thing and the world will be much nicer(and you will also be the first on Google search if you use all this metadata) USE YOUR META DATA!
  15. 15. Semantic webUse meta data to define the roles of the elements on your page.Automatic systems will be able to read your page and store it correctlyinto databases that hold the description of the knowledge on the webThis is the future of how we will access information on the web:- web content will be indexed semantically- we will search not for words, but for meanings- we will find what we want (if the owner of the website remembered to use meta data)http://en.wikipedia.org/wiki/Semantic_Web
  17. 17. HOW TO ASSIGN ROLES ANDSEMANTIC TYPES TO THE ELEMENTSON YOUR INTERFACES It is useful to assign CLASS and/or ID to the elements of your page CLASS and ID describe the role of an element in your page Role ex. of roles: title, first paragraph, image caption, citation, box heading.... Role represents what the element represents in the structure of the page, what is its meaning, its function We can use the definition of the role of an element in HTML to describe its function in the structure of the page, and then we will use it as a reference in CSS to assign its representation (ex.: we will be able to say things like “each title has a yellow background”)
  18. 18. CLASS IDIt is a TYPE (a title, a paragraph...) It is an identity (the THIRD title)There can be more than one on each page There can be one of each in a page(ex.: all the titles shown in the page) (ex.: there will be only 1 “THIRD title” on a page)<div class=”title”>...</div> <div id=”title-3”>...</div>You can use same class on multiple You can use an ID in only one elementElementsEach element can be of more than Each element can have only 1 IDone class<div class=”title news-section”>...</div> An element can have both ID and class <div id=”title-3” class=”title”>...</div> (this would probably mean that this div Is a title and that it is exactly the third-title)
  19. 19. WHY DO WE NEED CLASS AND ID?To define the semantic (meaning) of our pages (so that, for example, Googlecan read them and index them properly)To define style with CSS (through CSS we could say that all titles on our pagesare yellow, but the first one will be also with a red background --> we needCLASS and ID to do that)To make our page more active with javascript (for example we could like to havean animation on all our titles when we enter a page --> we will use CLASS fromJavascript to create the animation; we could want a different one on the first titlealone --> we will use ID in this case)
  21. 21. .... document setup ....<html> <head> ... the parts of the heading... </head> <body> .... your content ... </body></html>
  22. 22. DOCUMENT SETUP (you probably will never write these things by hand, but it is nice and useful to know what they mean)<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> HTML is one of the standards promoted by W3C (World Wide Web Consortium) http://w3c.com These lines certificate that your document comply with the standards VERY IMPORTANT for search engines and compatibility with many browsers
  23. 23. HEADING (you probably will never write these things by hand, but it is nice and useful to know what they mean)<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />It describes the type of content of the pageThis format of description of contents in your page is very used and is called mime-typemime-types describe content in multiple places and are liketype/specific-formatFor example:text/htmlimage/jpegimage/pngThe second parameter (charset) indicates the type of characters that will be used inthe page. If you dont know, use UTF-8 (an international set with accents etc.)
  24. 24. HEADING<title>this is the title of my page</title>It is the title of the web pageAppears on top of browser windowVery important for search enginesFor SEO: use keywords in title and try to have the same keywords appear 4 or 5 timesin the body of the page as well
  25. 25. HEADING<meta name="description" content="a description" /><meta name="keywords" content="some keywords" />These two meta tags used to be very important for SEO, but now they are only usedto see if they are coherent with the rest of your page (if you have “barak obama” asa keyword and “barak obama” is found nowhere in your website, it will resultin a penalty on search engines)Description should be about 140-160 characters longKeywords are separated by commas (,) and should be around 6-12You can use multiple words as keywords (for example “art”, “contemporary art” and“contemporary art in new york” are all valid keywords)
  26. 26. HEADING <link rel="stylesheet" href="style.css" type="text/css" media="screen" />It is the link to an external style sheetTry to use external style sheets, so you only write them once and use them in various pagesExternal stylesheets are good also because they are put in the cache and so pageloading time is bettermedia parameter can show what this stylesheet is for:- “screen” will be used for output on monitor- “print” will be used when you print a webpage- “all” will be used on all mediaThere are a lot more values --> look on w3c.com
  27. 27. HTML CONTENT
  28. 28. HTML is made of TAGS:<div ... > ... some content .... </ div><br />Tags are defined by angular parenthsis and they can surround some content(as in the first case) or they can be in a single part (as in the second case)Tags can have parameters, called attributes:<img src=”...the address of an image...” width=”100” height=”300” />width=”100” is an attribute of the img tagTags can contain other tags (as in the first example on top of the slide)
  30. 30. h1,h2,h3,h4,h5,h6 They are headings, they are used as titles, subtitles, sub-sub-titles etcetera H1 should be used only once per page (main title) H2 to h6 can be used as many times as you want, best if used in order ex.: h4 is subtitle of h3 which is subtitle of h2 <h2>title</h2 <h3>sub-title</h3> <h4>sub-sub-title</h4>
  31. 31. Ordered (ol) and unordered (ul) lists, and list elements (li) Lists are very important and by manipulating them through CSS you can do all sorts of things (animated menus, pieces of interfaces...) that are also extremely well optimized for SEO purposes Unordered lists are bullet points <ul> <li>I am the first list element</li> <li>I am the secondlist element</li> </ul> Ordered lists are numbered sequences <ol> <li>i will be element number 1</li> <li>i will be element number 2</li> </ol>
  32. 32. links<a href=”...internet address...” target=”_blank” title=”a title for the link”>CLICK</a>href: the internet address to which the link pointstarget: where will the link open (_blank opens a new window, _self opens in thecurrent window, if you specify a name, it opens a window with that name);it is an optional parametertitle: sets a title for the link; good for SEO
  33. 33. span and divThe span and div tags are used to group things together, so that you can use them inCSS to create boxes, highlights, position them around the page, animate them etecetera.span is usually used in-line, for example to group a set of words together if you wantto add a highlight to themIn this sentence <span class=”highlighted-text”>these words are highlighted</span>.div is a block element, meaning that it represents an area of the screen<div class=”floater”>I can make the text in this DIV appear all over the page, wit CSS</div>
  34. 34. A SET OF GREAT ADVICES:http://www.htmldog.com/guides/htmladvanced/recap/Separating meaning and presentationHTML was never meant to be used for presentation, but user-agents incorporated elements that formatted text and developers found ways to manipulate layout.With the power of CSS it is now no longer necessary to style using HTML and meaning (HTML) can now be completely separated from presentation (CSS).There are a number of benefits to this - it should greatly decrease file sizes, it has the flexibility of a central style sheet that applies to the entire website ratherthan an individual page and it should also produce pages of much greater accessibility.Following this philosophy basically means you shouldnt style anything within the HTML. Tags such as font or attributes such as bgcolor should not be used.Even the border attribute inside an img tag is no longer valid in XHTML 1.1. This shouldnt be a problem - there is no styling that can be done in HTML that cantbe done, and done better, with CSS.It isnt just about taking away the presentation from HTML, the application of meaning means specific HTML tags should be used when appropriate. For example,h1, h2 etc. should be used for headings - you should not just use CSS to make fonts larger.A good guide is to see if a visual browser, with its default styling, presents the document well without a style sheet.Tables should not be used for layout - tables are designed to display tabular data. This is perhaps the most difficult technique for experienced HTMLers to getused to as it completely changes the way the HTML has traditionally been structured in the past. This approach greatly reduces the size of the page and, due tothe resulting linear code, it becomes much more accessible.TagsIn XHTML all tags should be lowercase and must be closed. For those tags that do not have closing tags (such as br and img), they must close themselves with a /at the end (such as <br />). Note that there should be a space before the forward-slash.The markup must be well formed, with elements properly nested (for example, <strong><em>this</em></strong>, not <strong><em>this</strong></em>).All documents must have html, head, title and body elements. They must also start with a document type declaration.The body of the document should start with p, h1, h2, h3, h4, h5, h6, div, pre, address, ins or del.AttributesAll attributes must also be lowercase and their values in quotation marks.Minimized attributes are not allowed (such as <input type="checkbox" checked />). Traditionally minimized attributes must be given the value that isthe same as the name of the attribute (such as <input type="checkbox" checked="checked" />).The name attribute is no longer valid (except in form elements) and should be replaced with id.The target attribute is not a valid attribute. Praise be. It was daft anyway.The alt attribute in the img tag is compulsory.AccessibilityThe reasons for making web pages accessible to users with disabilities are quite self-evident. Not only is it moralistic, but it will also benefit our future asweb users grow older and the acuteness of the senses degenerates. Accessibility isnt just about accommodating people with severe disabilities, it is aboutmaking it easier for a great number of people with minor (predominantly visual) impairments.There are increasing legal implications such as the introduction of Section 508 in the US that makes a (half arsed) attempt to enforce certain accessibilityinitiatives and in the UK, all government websites must reach a specified degree of accessibility. How long until similar legislation is applied to general commercialwebsites, as it is for buildings?If you follow the above practices, your HTML should already be highly accessible to users with disabilities. There are further initiatives that can make your web pageseven more accessible (for example, see the Accessible Links and Accessible Forms pages) and it really isnt that difficult.
  35. 35. ANOTHER SET OF GREAT ADVICES: how to make links accessiblehttp://www.htmldog.com/guides/htmladvanced/links/
  36. 36. CSS
  37. 37. How to apply CSS In-line (but dont use it) <p style="color: red">text</p> This will make that specific paragraph red. Embedded (but dont use this, too!), or internal styles are used for the whole page. Inside the head tags, the style tags surround all of the styles for the page. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>CSS Example</title> <style type="text/css"> p{ color: red; } a{ color: blue; } </style> ... This will make all of the paragraphs in the page red and all of the links blue.
  38. 38. How to apply CSS External (use this!) External styles are used for the whole, multiple-page website. There is a separate CSS file, which will simply look something like: p{ color: red; } a{ color: blue; } If this file is saved as "web.css" then it can be linked to in the HTML like this: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>CSS Example</title> <link rel="stylesheet" type="text/css" href="web.css" /> ...
  39. 39. Selectors In CSS you apply style to elements you select from a HTML page body{ background: #000000; } means that the background of the page should be black div.top-block{ font-size: 12pt; } means that all the div elements with class=”top-block” will have a font of 12pt div#highlight-block{ color: #FFFF00; } means that the div element with id=”highlight-block” will have text colored in yellow
  40. 40. Selectors from class and ID (continued) GROUPING If you have: h2 { color: red; } .thisOtherClass { color: red; } .yetAnotherClass { color: red; } You could make it: h2, .thisOtherClass, .yetAnotherClass { color: red; }
  41. 41. Selectors from class and ID (continued) NESTING you can specify properties to selectors within other selectors. #top { background-color: #ccc; padding: 1em } #top h1 { color: #ff0; } #top p { color: red; font-weight: bold; } Removes the need for classes or IDs if it is applied to HTML that looks something like this: <div id="top"> <h1>Chocolate curry</h1> <p>This is my recipe for making curry purely with chocolate</p> <p>Mmm mm mmmmm</p> </div> This is because, by separating selectors with spaces, we are saying h1 inside ID top is colour #ff0 and p inside ID top is red and bold. This can get quite complicated (because it can go for more than two levels, such as this inside this inside this inside this etc.) and may take a bit of practice.
  42. 42. Selectors from class and ID (continued) Pseudo classes link is for an unvisited link. visited is for a link to a page that has already been visited. active is for a link when it is gains focus (for example, when it is clicked on). hover is for a link when the cursor is held over it. They are used with “ : “ to indicate them a.snowman:link { color: blue; } a.snowman:visited { color: purple; } a.snowman:active { color: red; } a.snowman:hover { text-decoration: none; color: blue; background-color: yellow; }
  43. 43. Dimensions There are many property-specific units for values used in CSS, but there are some general units that are used in a number of properties and it is worth familiarising yourself with these before continuing. em (such as font-size: 2em) is the unit for the calculated size of a font. So "2em", for example, is two times the current font size. px (such as font-size: 12px) is the unit for pixels. pt (such as font-size: 12pt) is the unit for points. % (such as font-size: 80%) is the unit for... wait for it... percentages. Other units include pc (picas), cm (centimetres), mm (millimetres) and in (inches). When a value is zero, you do not need to state a unit. For example, if you wanted to specify no border, it would be border: 0.
  44. 44. How to specify colours red Is the same as rgb(255,0,0) Which is the same as rgb(100%,0%,0%) Which is the same as #ff0000 Which is the same as #f00 There are 17 valid predefined colour names. They are aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow. transparent is also a valid value.
  45. 45. How to specify colours The three values in the rbg value are from 0 to 255, 0 being the lowest level (for example no red), 255 being the highest level (for example full red). These values can also be a percentage. Hexadecimal (previously and more accurately known as sexadecimal) is a base-16 number system. We are generally used to the decimal number system (base-10, from 0 to 9), but hexadecimal has 16 digits, from 0 to f. The hex number is prefixed with a hash character (#) and can be three or six digits in length. Basically, the three-digit version is a compressed version of the six-digit (#f00 becomes #ff0000, #c96 becomes #cc9966 etc.). The three-digit version is easier to decipher (the first digit, like the first value in rgb, is red, the second green and the third blue) but the six-digit version gives you more control over the exact colour.
  46. 46. How to specify colours h1 { color: #ffc; background-color: #009; } or h1 { color: blue; background-color: yellow; } or h1 { color: rgb(0,100,200); background-color: transparent; }
  47. 47. TEXT font-family This is the font itself, such as Times New Roman, Arial, or Verdana. The font you specify must be on the users computer, so there is little point in using obscure fonts. There are a select few safe fonts (the most commonly used are arial, verdana and times new roman), but you can specify more than one font, separated by commas. The purpose of this is that if the user does not have the first font you specify, the browser will go through the list until it finds one it does have. This is useful because different computers sometimes have different fonts installed. So font-family: arial, helvetica for example, is used so that similar fonts are used on PC (which traditionally has arial, but not helvetica) and Apple Mac (which, traditionally, does not have arial and so helvetica, which it does normally have, will be used). Note: if the name of a font is more than one word, it should be put in quotation marks, such as font-family: "Times New Roman".
  48. 48. TEXT font-size The size of the font. Be careful with this - text such as headings should not just be a paragraph in a large font; you should still use headings (h1, h2 etc.) even though, in practice, you could make the font-size of a paragraph larger than that of a heading (not recommended for sensible people).
  49. 49. TEXT font-weight This states whether the text is bold or not. In practice this usually only works as font-weight: bold or font-weight: normal In theory it can also be bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800 or 900 but seeing as many browsers shake their heads and say "I dont think so", its safer to stick with bold and normal.
  50. 50. TEXT font-style This states whether the text is italic or not. It can be font-style: italic or font-style: normal text-decoration This states whether the text is underlined or not. This can be: text-decoration: overline, which places a line above the text. text-decoration: line-through, strike-through, which puts a line through the text. text-decoration: underline should only be used for links because users generally expect underlined text to be links. This property is usually used to decorate links, such as specifying no underline with text-decoration: none
  51. 51. TEXT text-transform text-transform: capitalize turns the first letter of every word into uppercase. text-transform: uppercase turns everything into uppercase. text-transform: lowercase turns everything into lowercase. text-transform: none does not apply any transform. TEXT SPACING The letter-spacing and word-spacing properties are for spacing between letters or words. The value can be a length or normal. The line-height property sets the height of the lines in an element, such as a paragraph, without adjusting the size of the font. It can be a number (which specifies a multiple of the font size, so 2 will be two times the font size, for example), a length, a percentage or normal. The text-align property will align the text inside an element to left, right, center or justify. The text-indent property will indent the first line of a paragraph, for example, to a given length or percentage.
  52. 52. MARGIN and PADDING margin and padding are the two most commonly used properties for spacing- out elements. A margin is the space outside of the element, whereas padding is the space inside the element. h2 { font-size: 1.5em; background-color: #ccc; margin: 1em; padding: 3em; } You will see that this leaves one-character width space around the secondary header and the header itself is fat from the three-character width padding. The four sides of an element can also be set individually with these CSS properties margin-top, margin-right, margin-bottom, margin-left, padding-top, padding-right, padding-bottom and padding-left
  53. 53. BORDER To make a border around an element, all you need is border-style. The values can be solid, dotted, dashed, double, groove, ridge, inset and outset. border-width sets the width of the border, which is usually in pixels. There are also properties for border-top-width, border-right-width, border-bottom-width and border-left-width border-color sets the colour. h2 { border-style: dashed; border-width: 3px; border-left-width: 10px; border-right-width: 10px; border-color: red; } This will make a red dashed border around all HTML secondary headers (the h2 element) that is 3 pixels wide on the top and bottom and 10 pixels wide on the left and right (these having over-ridden the 3 pixel wide width of the entire border).
  54. 54. Background images body { background: white url(http://www.htmldog.com/images/bg.gif) no-repeat top right; } This amalgamates these properties: background-color, is the color of the background where there is no image. background-image, is the internet address of the image. background-repeat, is how the image repeats itself. This can be repeat (equivalent to a tile effect across the whole background), repeat-y (repeating on the y-axis, above and below), repeat-x (repeating on the x-axis, side-by-side) or no-repeat (which shows just one instance of the image). background-position, which can be top, center, bottom, left, right or any sensible combination, such as above. Background-images can be used in most HTML elements - not just for the whole page (body) and can be used for simple but effective results, such as shaped corners.
  55. 55. Display propertyinline elements are displayed inline to follow the flow of a line.block puts a line break before and after the element.none doesnt display the elementdiv.blocks-to-be-hidden{ display: none;}(all these blocks will be hidden)
  56. 56. PositionThe position property is used to define whether an element isabsolute, relative, static or fixed.The value static is the default value for elements and renders the position inthe normal order of things, as they appear in the HTML.relative is much like static, but the element can be offset from its original positionwith the properties top, right, bottom and left.absolute pulls an element out of the normal flow of the HTML and delivers it toa world all of its own.In this crazy little world, the absolute element can be placed anywhere onthe page using top, right, bottom and left.fixed behaves like absolute, but it will absolutely position an element in referenceto the browser window as opposed to the web page, so, theoretically, fixedelements should stay exactly where they are on the screen even whenthe page is scrolled.Why theoretically?Why else - this works great in browsers such as Mozilla and Opera, butin IE it doesnt work at all.
  57. 57. FloatingFloating an element will shift it to the right or left of a line, with surroundingcontent flowing around it.Floating is normally used to position smaller elements within a page,but it can also be used with bigger chunks, such as navigation columns.Taking the HTML example below, you could apply the following CSS:#navigation { float: left; width: 10em;}#navigation2 { float: right; width: 10em;}
  58. 58. Media TypesThe media at-rule will apply its contents to a specified media, such as print. For example:@media print { body { font-size: 10pt; font-family: times new roman, times, serif; } #navigation { display: none; }}The media-type can be: all - for every media under, over, around and in the sun. aural - for speech synthesizers. handheld - for handheld devices. print - for printers. projection - for projectors. screen - for computer screens.You can also use braille, embossed, tty or tv
  59. 59. SOME LINKS
  60. 60. http://www.w3.org/The World Wide Web Consortium (standards, reference, guides)http://www.projectseven.com/tutorials/index.htmTutorialshttp://www.bluerobot.com/web/layouts/Simple layouts using CSShttp://www.glish.com/css/CSS techniqueshttp://realworldstyle.com/CSS trickshttp://www.csszengarden.com/Learn how CSS can radically change a website
  61. 61. TO DO
  62. 62. TAKE THIS SIMPLE WEBPAGE AND MAKE IT BEAUTIFUL USING CSS(note: you have to add the link to the CSS file as shown in the first slides)<html> <head> <title>This website is beautiful</title> </head> <body> <div id="container"> <div id="first-block"> <div class="testo">THIS</div> </div> <div id="second-block"> <div class="testo">WEBSITE</div> </div> <div id="third-block"> <div class="testo">IS BEAUTIFUL</div> </div> </div> </body></html>