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!

Wait, what the hell is abidibo?

abidibo it's mePhysicist

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

HTTP

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

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

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

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

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!

What really does HTML?

Text Structure - TAGSSeparate structure from contentsDivide contents in blocks, visually separate informationNested contents, tree like structureWhat is a tag? tag content content

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

Text Structure

Text structured in nested elements

Menu voice #1

Menu voice #2

Main section

title
Some text

Item #1

Item #2

TAGS 1/2

Generally:tag content

Sometimes:

NoticeNo 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

TAGS 2/2

Some examplesHEAD ELEMENTS
, , , , ,

STRUCTURE OF THE DOCUMENT (semantics!)
, ,

,

1. , , , ,

   TEXT ELEMENTS
   

, , , , , FORM ELEMENTS
, , , , SPECIAL ELEMENTS
, , ,
Try always to use the right tag! , , Reference: https://developer.mozilla.org/en-US/docs/HTML/HTML5/HTML5_element_listSemantics1. 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. Tweethttp://www.abidibo.net/blog/2012/01/26/the-importance-of-semantics-in-html-documents/Styles / GraphicsToolsBrowserWhile there are many of them, use a good browser please!
NO IE
FF
Chrome
Safari
OperaThat's it... butThere 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 Text EditorUse you preferred text editor here.
Suggestions?Vim (the editor of the beast)Previewhttp://codepen.io
http://jsfiddle.netWhy HTML5?Easier (DOCTYPE, charset declarations)SemanticsMultimedia support (no flash plz!)GeolocalizationCanvasFormsStorageMobileWeb Sockets...Why easier?HTML5XHTMLSemanticsNot only one for page!Outline
http://www.abidibo.net/blog/2012/01/26/the-importance-of-semantics-in-html-documents/
http://gsnedders.html5.org/outliner/Hello world!HTML5 rulez! Hello world! Hello world! What?1 Document declaration2 Root element3 Head of the document (include external resources, add meta information, favicon, )4 Character encoding5 Title of the page (as appears in the browser tab)7 The body of the document, what we really see on the browser page8 Just an headingCSSCascading Style SheetsDefine how your html elements will be displayedCss can be INLINECss can stay in the head of the document

span {
padding: 10px;
color: #aaa;
display: block;
}

Css can stay in a separate file: stylesheet.css and included in the head section CSS selectorsA 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, #wrapperA 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, .coloredAn attribute selector is used to select elements based on the value of their attributes.
[""].
The refers to an attribute of the element to select
The can be one of the following:
= (equal to)
~= (includes in space list)
|= (includes in pipe list)
^= (starts with)
$= (ends with)
*= (contains)CSS pseudo-selectorsSpecial selectors that dont deal with properties, but rather with states:emptymatches a node with no child nodes.:first-childmatches a node if its the first child of its parent.:last-childmatches a node if its the last child of its parent.:only-childmatches a node if it has no sibling nodes.:contains()matches a node that contains the string value passed as the argument to :not()matches a node if it doesnt match the simple selector passed as the argument to :first-of-typematches a node if its the first element of its type (i.e., a tag).:last-of-typematches a node if its the last element of its type.:only-of-typematches a node if its the only element of its type.CSS combined selectorsTwo 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 anotherdiv a
the whitespace character is the descendant combinatordiv > a
the greater than symbol is the child combinatordiv ~ a
the tilde symbol is the general sibling combinator (div preceeds a)Div + a
the plus sign is the adjacent sibling combinatorCLIQUE PARA EDITAR O FORMATO DO TEXTO DO TTULOClique para editar o formato do texto da estrutura de tpicos2. Nvel da estrutura de tpicos3. Nvel da estrutura de tpicos4. Nvel da estrutura de tpicos5. Nvel da estrutura de tpicos6. Nvel da estrutura de tpicos7. Nvel da estrutura de tpicos