Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Light introduction to HTML

460 views

Published on

This is a light introduction to HTML markup language. It is a work in progress presentation, with no claim of being a good and complete reference.

Published in: Education
  • Be the first to comment

  • Be the first to like this

Light introduction to HTML

  1. 1. HTML HyperText Markup Languageis 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. 2. Wait, what the hell is abidibo?abidibo its 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. 3. HTTPHyperText Transfer Protocol (HTTP) is the main system used to transmit information over the webURL (Uniform Resource Locator)(http://)(www.example.com)(/pages/about.html)
  4. 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. 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. 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 doesnt...” YESSS!!
  7. 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. 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. 9. Text StructureText 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. 10. TAGS 1/2Generally: <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, dont 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. 11. TAGS 2/2Some 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. 12. Semantics1. 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. 13. Styles / Graphics
  14. 14. ToolsBrowser 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.netThats it... but There are many other tools/browser plugins which may make you happier, why? Time saving, dont waste time if you can, play more with your children or drink a beer!Again, Browser? FF → Use Firebug! Theres no other web development tool which may be compared to it at the time of this writing
  15. 15. Why HTML5?● Easier (DOCTYPE, charset declarations)● Semantics● Multimedia support (no flash plz!)● Geolocalization● Canvas● Forms● Storage● Mobile● Web Sockets● ...
  16. 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. 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. 18. Hello world!HTML5 rulez! What?1. <!DOCTYPE html> 1 → Document declaration2. <html> 2 → Root element3. <head> 3 → Head of the document (include external resources, add meta information, favicon, )4. <meta charset=”utf-8” /> 4 → Character encoding5. <title>Hello world!</title> 5 → Title of the page (as appears in the6. </head> browser tab)7. <body> 7 → The body of the document, what we really8. <h1>Hello world!</h1> see on the browser page9. </body> 8 → Just an heading10. </html>
  19. 19. CSSCascading 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. 20. CSS selectorsA simple selector as defined by the CSS3 specs is composed of “either atype 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. 21. CSS pseudo-selectorsSpecial 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. 22. CSS combined selectorsTwo or more simple selectors that are connected using acombinator.A combinator is a special symbol that denotes therelationship 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

×