SPERIMENTAZIONI DITECNOLOGIE E COMUNICAZIONI MULTIMEDIALI

Salvatore Iaconesisalvatore.iaconesi@artisopensource.net

Lesson 3: BASE HTML & CSS

This lesson is aboutHTML & CSS

The course is not aboutHTML & CSS

But we need them to buildour web and mobile experiences

... so here is a large tutorialso that we know a little moreabout HTML & CSS

We will use these things in class multiple times!Please study this tutorial well, so that you'll be able to use your time better in class!

(and don't be afraid about mistakes... things will turn out to be really easy the third/fourth/fifth time you do them)

HTML = structure of a page

CSS = aesthetics of a page

HTML

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 don't care if it's green or blue,

you care about what each object MEANS

and about what is the STRUCTURE and ROLE of an object of a page

HTML is a DOCUMENT!

HTML is what is called a MARKUP LANGUAGE

MARKUP languages describe documents in terms of their

- structures- links- relations- roles

HTML describes the STRUCTURE of a web page(and, since a little while, of a mobile web page, too)

http://en.wikipedia.org/wiki/Markup_language http://en.wikipedia.org/wiki/Html

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)

META DATA is disseminated all over your HTML documents

It is used for various purposes

SEO (Search Engine Optimization)

Internationalization

Access for users with disabilities

Semantic web

And loads more....

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 progressively less 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.”

Internationalization

You don't 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 you're not sure)- you need to use plain, readable text wherever you can- you need to include meta data even in tags wherever you can

Try avoiding Flash whenever you can (HTML5 and CSS3 do wonders! Use these if you can)

Access for disabilities

This is how a blind person sees your webpage

Access for disabilities oreducation issuesLots of tools exist nowadays to make the world an enormously better place forPeople who can't see, hear, or for people who may be a bit more unlucky thanYou are, and maybe they don't know how to read because they didn't 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!

Semantic web

Use 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 web

This 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

THIS IS THE MOSTIMPORTANT THING

ABOUT WEB PAGES!

:)

IF YOU UNDERSTAND THISYOUR LIFE WILL BE EASIER

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

Roleex. 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 itsfunction in the structure of the page, and then we will use it as a referencein CSS to assign its representation (ex.: we will be able to say things like“each title has a yellow background”)

CLASS ID

It is a TYPE (a title, a paragraph...)

There can be more than one on each page(ex.: all the titles shown in the page)

<div class=”title”>...</div>

You can use same class on multipleElements

Each element can be of more thanone class

<div class=”title news-section”>...</div>

It is an identity (the THIRD title)

There can be one of each in a page(ex.: there will be only 1 “THIRD title” ona page)

<div id=”title-3”>...</div>

You can use an ID in only one element

Each element can have only 1 ID

An element can have both ID and class

<div id=”title-3” class=”title”>...</div>(this would probably mean that this divIs a title and that it is exactly the third-title)

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)

WHAT IS INSIDE A WEB PAGE?

.... document setup ....<html>

<head>

... the parts of the heading...

</head><body>

.... your content ...

</body></html>

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 standardsVERY IMPORTANT for search engines and compatibility with many browsers

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 page

This format of description of contents in your page is very used and is called mime-type

mime-types describe content in multiple places and are like

type/specific-format

For example:

text/htmlimage/jpegimage/png

The second parameter (charset) indicates the type of characters that will be used inthe page. If you don't know, use UTF-8 (an international set with accents etc.)

HEADING

<title>this is the title of my page</title>

It is the title of the web page

Appears on top of browser window

Very important for search engines

For SEO: use keywords in title and try to have the same keywords appear 4 or 5 timesin the body of the page as well

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 long

Keywords are separated by commas (,) and should be around 6-12

You can use multiple words as keywords (for example “art”, “contemporary art” and“contemporary art in new york” are all valid keywords)

HEADING

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

It is the link to an external style sheet

Try to use external style sheets, so you only write them once and use them in various pages

External stylesheets are good also because they are put in the cache and so pageloading time is better

media 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

HTML CONTENT

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 tag

Tags can contain other tags (as in the first example on top of the slide)

SOME IMPORTANT TAGS

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>

Ordered (ol) and unordered (ul) lists, and list elements (li)

Lists are very important and by manipulating them through CSS you cando all sorts of things (animated menus, pieces of interfaces...) that are alsoextremely 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>

links

<a href=”...internet address...” target=”_blank” title=”a title for the link”>CLICK</a>

href: the internet address to which the link points

target: 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 parameter

title: sets a title for the link; good for SEO

span and div

The 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 them

In 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>

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 rather than an individual page and it should also produce pages of much greater accessibility.Following this philosophy basically means you shouldn't 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 shouldn't be a problem - there is no styling that can be done in HTML that can't be done, and done better, with CSS.It isn't 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 HTMLer's to get used 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 to the 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 is the 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 as web users grow older and the acuteness of the senses degenerates. Accessibility isn't 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 accessibility initiatives 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 pages even more accessible (for example, see the Accessible Links and Accessible Forms pages) and it really isn't that difficult.

A SET OF GREAT ADVICES:http://www.htmldog.com/guides/htmladvanced/recap/

ANOTHER SET OF GREAT ADVICES: how to make links accessiblehttp://www.htmldog.com/guides/htmladvanced/links/

CSS

How to apply CSS

In-line (but don't use it)

<p style="color: red">text</p>This will make that specific paragraph red.

Embedded (but don't 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.

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" />

...

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

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;

}

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 ID's 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.

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;

}

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.

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.

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.

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;

}

TEXT

font-family

This is the font itself, such as Times New Roman, Arial, or Verdana.

The font you specify must be on the user's 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, helveticafor 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".

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).

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 don't think so", it's safer to stick with bold and normal.

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

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.

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

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 wideon the left and right (these having over-ridden the 3 pixel wide width of the entire border).

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.

Display property

inline elements are displayed inline to follow the flow of a line.

block puts a line break before and after the element.

none doesn't display the element

div.blocks-to-be-hidden{display: none;

}

(all these blocks will be hidden)

Position

The position property is used to define whether an element is absolute, relative, static or fixed.

The value static is the default value for elements and renders the position in the normal order of things, as they appear in the HTML.

relative is much like static, but the element can be offset from its original position with the properties top, right, bottom and left.

absolute pulls an element out of the normal flow of the HTML and delivers it to a world all of its own. In this crazy little world, the absolute element can be placed anywhere on the page using top, right, bottom and left.

fixed behaves like absolute, but it will absolutely position an element in reference to the browser window as opposed to the web page, so, theoretically, fixed elements should stay exactly where they are on the screen even when the page is scrolled. Why theoretically? Why else - this works great in browsers such as Mozilla and Opera, but in IE it doesn't work at all.

Floating

Floating an element will shift it to the right or left of a line, with surrounding content 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;

}

Media Types

The 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

SOME LINKS

http://www.w3.org/ The World Wide Web Consortium (standards, reference, guides)

http://www.projectseven.com/tutorials/index.htm Tutorials

http://www.bluerobot.com/web/layouts/ Simple layouts using CSS

http://www.glish.com/css/ CSS techniques

http://realworldstyle.com/ CSS tricks

http://www.csszengarden.com/Learn how CSS can radically change a website

TO DO

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>