HTML is the main markup language used to create web pages. It uses tags to structure text and embed images, videos, and other multimedia. CSS is used to style and lay out HTML elements. Learning HTML and CSS is important for understanding how web pages are built and styled, even when using content management systems.

1. HTML
HyperText Markup Language
is the main markup language for creating web pages and other information that can be displayed
in a web browser.
abidibo says:
HTML is not a programming language!

2. Wait, what the hell is abidibo?
abidibo it's me
● Physicist
● Software developer at otto srl (web applications, mobile, databases, ...)
● Just Open Source
● Dev questions?
abidibo@gmail.com
● Questions about Open Source projects?
dev@abidibo.net
● Web: http://abidibo.net
● Skype: abidibo
● Twitter: abidibo

3. HTTP
HyperText Transfer Protocol (HTTP) is the main system used to transmit information over the web
URL (Uniform Resource Locator)
(http://)(www.example.com)(/pages/about.html)

4. Version (standard) history
● 1989 Tim Berners-Lee invents the Web with HTML as its publishing language
● 1995 HTML 2
● 1997 (january) HTML 3.2
● 1997 (december) HTML 4.0 strict, transitional, frameset, css
● 1999 HTML 4.01
● 2000 XHTML 1.0 XHTML 1.0 is a HTML 4.01 reformulation using XML (doctype, closed tags,
case-sensitive,...)
● 2001 XHTML 1.1
● 2002-2006 XHTML 2
● ? HTML5

5. Elder web sites
● Nothing more than a collection of html files organized (or not) into folders
● Url:
http://www.example.com/index.html
http://www.example.com/pages/about.html
Files:
ROOT DIR → index.html
ROOT DIR/pages → about.html
● Almost nothing different from viewing (downloading) a file which resides on a different machine
which occasionally has links to other files which reside on the same or another machine (plus
other resources like images, videos, ...).
● Really a web page is only a file?
Not only this, is a text file, it contains text, but such text is formatted (html is a markup language)
● HTML provides a way to jump between different files (HyperText) allowing the user for a contents
navigation
● Static web sites, change contents manually by editing the html files

6. Web 2.0
● Dynamic web sites, and rich web applications
● Contents are stored in databases instead of directly into files
● Contents can be easily managed through back-office interfaces
● Applications generally implemented using a server side programming language which serves
the final document (php, python, asp, …)
● Web sites allow everyone to publish contents on the web, also without html knowledge
(WYSIWYG editors)
● “So is it really necessary to learn HTML?”
YES!
● “But Joomla, Wordpress, Typo3, Blogspot, Tumblr...”
Again YES!
● “But really, my friend has its on website but he doesn't...”
YESSS!!

7. Why YES!
● The final output of a rich web application still is an html document
● Contents still are the noblest part of a web site.
Contents are rendered in html
● BAD JOOMLA BOY SAYS:
“But we have WYSIWYG!”
ANSWER:
“WYSIWYG sure, but what you get often is NOT really what you see”
● Be cross-browser! (i.e. IE is your enemy)
● Web applications use templates (HTML) in which they insert dynamic contents
● The HTML you may write is better than the HTML a software can produce
● Learning HTML is easy! Learning CSS is easy!

8. What really does HTML?
● Text Structure - TAGS
Separate structure from contents
Divide contents in blocks, visually separate information
Nested contents, tree like structure
What is a tag? <tagname>tag content</tagname> → <structure>content</structure>
● Semantics!!!!!
Which is the page title (hopefully not the bold big-sized first line)
Does a block forms an independent part of a document? Is this list a menu? ...
Accessibility and Search Engines Optimization
● Through pages navigation (hyper text)
● Styles (Graphics)
Colors, backgrounds, borders, …
● Some amazing stuff
If combined with javascript

9. Text Structure
Text structured in nested elements
<nav>
<ul>
<li>Menu voice #1</li>
<li>Menu voice #2</li>
</ul>
</nav>
<section id=”main”>
<h1>Main section</h1>
<article>
<h1>title</h1>
<p>Some text</p>
<ul>
<li>Item #1</li>
<li>Item #2</li>
</ul>
</article>
</section>

10. TAGS 1/2
Generally:
<tagname attribute=”attribute-value”>tag content</tagname>
Sometimes:
<tagname attribute=”attribute-value” />
Notice
● No spaces between < and tagname
● TagNaMe works the same, but please, be kind, don't do it
● A tag can contain tags (not every tag can contain every tag, semantics and tag type
limitations)
● Attributes specify more information about the content structure

11. TAGS 2/2
Some examples
● HEAD ELEMENTS
<title>, <meta>, <link>, <script>, <style>, …
● STRUCTURE OF THE DOCUMENT (semantics!)
<div>, <p>, <ul>, <ol>, <table>, <h1>, …, <h6>
● TEXT ELEMENTS
<b>, <i>, <u>, <cite>, <var>, …
● FORM ELEMENTS
<input>, <select>, <textarea>, <fieldset>, …
● SPECIAL ELEMENTS
<img>, <video>, <script>, <br />
Try always to use the right tag! <abbr>, <time>, <address>
Reference: https://developer.mozilla.org/en-US/docs/HTML/HTML5/HTML5_element_list

12. Semantics
1. abidibo.net
1. Main menu
2. Archive
3. Categories
4. The importance of semantics in html documents
1. The header and the hgroup tags
2. The section tag
3. The article tag
4. And so on...
5. Post information
6. Comments
5. Projects
6. Topics
7. Tweet
● http://www.abidibo.net/blog/2012/01/26/the-importance-of-semantics-in-html-documents/

13. Styles / Graphics

14. Tools
Browser Text Editor
While there are many of them, use a good Use you preferred text editor here.
browser please! Suggestions?
→ NO IE
→ FF Vim (the editor of the beast)
→ Chrome
→ Safari
→ Opera
Preview
http://codepen.io
http://jsfiddle.net
That's it... but
There are many other tools/browser plugins which may make you happier, why?
Time saving,
don't waste time if you can, play more with your children or drink a beer!
Again, Browser?
FF → Use Firebug! There's no other web development tool which may be compared to it at the time of this
writing

15. Why HTML5?
● Easier (DOCTYPE, charset declarations)
● Semantics
● Multimedia support (no flash plz!)
● Geolocalization
● Canvas
● Forms
● Storage
● Mobile
● Web Sockets
● ...

16. Why easier?
HTML5 XHTML
● <!DOCTYPE html> ● <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
1.0 Strict//EN" "
● <html> http://www.w3.org/TR/xhtml1-strict.dtd">
● <meta charset=”utf-8” /> ● <html xmlns="http://www.w3.org/1999/xhtml"
lang="it" xml:lang="it">
● <script>
● <meta http-equiv="content-type"
● <style> content="text/html; charset=utf-8" />
● <script type=”text/javascript”>
● <style type=”text/css”>

17. Semantics
● <section>
● <article>
● <aside>
● <header>
● <footer>
● <hgroup>
● Not only one <h1> for page!
● Outline
→ http://www.abidibo.net/blog/2012/01/26/the-importance-of-semantics-in-html-documents/
→ http://gsnedders.html5.org/outliner/

18. Hello world!
HTML5 rulez! What?
1. <!DOCTYPE html> 1 → Document declaration
2. <html> 2 → Root element
3. <head> 3 → Head of the document (include external
resources, add meta information, favicon, )
4. <meta charset=”utf-8” />
4 → Character encoding
5. <title>Hello world!</title>
5 → Title of the page (as appears in the
6. </head> browser tab)
7. <body> 7 → The body of the document, what we really
8. <h1>Hello world!</h1> see on the browser page
9. </body> 8 → Just an heading
10. </html>

19. CSS
Cascading Style Sheets
● Define how your html elements will be displayed
● Css can be INLINE
<span style=”padding: 10px; color: #aaa; display: block”></span>
● Css can stay in the head of the document
<head>
<style>
span {
padding: 10px;
color: #aaa;
display: block;
}
</style>
</head>
● Css can stay in a separate file: stylesheet.css and included in the head section
<link type=”text/css” rel=”stylesheet” href=”stylesheet.css” />

20. CSS selectors
A simple selector as defined by the CSS3 specs is composed of “either a
type or universal selector followed by zero or more attribute selectors,
ID selectors, or pseudo-classes, in any order.
● A type selector is used to select elements based on their tag name, such as div or span. A related selector, called a
universal selector, is denoted by the asterisk symbol (*), and is used to select elements regardless of their tag.
● An id selector is used to select an element based on the value of its id attribute. Each id attribute in a given
document must be unique, so the id attribute can only be used to match a single element.
#item, #wrapper
● A class selector is used to select elements based on the value of their class attribute. An element can have several
CSS classes, and a CSS class can be used for more than one element.
.notification, .colored
● An attribute selector is used to select elements based on the value of their attributes.
[<Attribute Name><Operator>"<Value>"].
The <Attribute Name> refers to an attribute of the element to select
The <Operator> can be one of the following:
= (equal to)
~= (includes in space list)
|= (includes in pipe list)
^= (starts with)
$= (ends with)
*= (contains)

21. CSS pseudo-selectors
Special selectors that don’t deal with properties, but rather with states
:empty—matches a node with no child nodes.
:first-child—matches a node if it’s the first child of its parent.
:last-child—matches a node if it’s the last child of its parent.
:only-child—matches a node if it has no sibling nodes.
:contains(<text>)—matches a node that contains the string value passed as the
argument to <text>
:not(<selector>)—matches a node if it doesn’t match the simple selector passed
as the argument to <selector>
:first-of-type—matches a node if it’s the first element of its type (i.e., a tag).
:last-of-type—matches a node if it’s the last element of its type.
:only-of-type—matches a node if it’s the only element of its type.

22. CSS combined selectors
Two or more simple selectors that are connected using a
combinator.
A combinator is a special symbol that denotes the
relationship of one simple selector to another
● div a
the whitespace character is the descendant combinator
● div > a
the greater than symbol is the child combinator
● div ~ a
the tilde symbol is the general sibling combinator (div preceeds a)
● Div + a
the plus sign is the adjacent sibling combinator