Knowledge Sharing Session on
HTML and CSS
Basic HTML and CSS
Ferdous Mahmud Shaon
February 2014
HTML, XHTML, HTML5
HTML Tags and Nested Tags
HTML Basic Structure
HTML <head> and <title>
HTML <body>
HTML Headlines
HTML Paragraphs
HTML Lists
HTML Divisions (sections)
HTML Images
HTML form
HTML frameset
• Not recommended tag
• Not supported in HTML5
HTML tables
HTML Block vs Inline elements
• Block Elements
– Takes up the full width available, and has a line
break before and after ...
HTML Block elements
HTML Block Elements
HTML Inline Elements
HTML Table vs DIV
• Most websites have put their content in multiple columns.
• Multiple columns can be created by using <...
HTML Page Layout
HTML Layout
HTML Layout
HTML Layout
HTML Layout
HTML <!DOCTYPE>
• Must be the very first thing in HTML document,
even before the <html> tag
• Provides information to the ...
HTML <!DOCTYPE>
HTML Character Entities
HTML vs XHTML
XHTML
– eXtensible HyperText Markup Language
– Stricter and cleaner version of HTML similar to
XML
– Better ...
HTML vs XHTML
XHTML DOCTYPE
– mandatory
XHTML elements
– must be properly nested
– must always be closed
– must be in lowe...
SEO friendly HTML
• Meaningful and relevant HTML <title> per page
• Define <meta> description and keywords for each page.
...
New HTML5 Tags
• <canvas> defines graphic drawing using
JavaScript
• <audio> defines sound or music content
• <video> defi...
New HTML5 Tags
• <section> defines a section in the document
• <main> defines the main content of a
document
• <article> d...
HTML Style Elements
<font>, <strong>, <b>, <u>, <i>, <em>, <center>
What is CSS?
• Cascading Style Sheets
• Defines how to display HTML elements
• Added to HTML 4.0
• Current version is CSS ...
How to use CSS
CSS Rules
CSS Selectors
CSS Selectors
CSS Selectors
Multiple CSS Rules
Multiple CSS Rules
CSS Selector Priority
CSS class vs id selector
CSS Descendent Selector
CSS Descendent Selector
CSS Box Model (block element)
CSS Box Model (block element)
CSS Box Model (block element)
CSS Box Model – Margin Collapse
CSS Box Model – Margin Collapse
CSS Box Model – Margin Collapse
CSS Box Model – Margin Collapse
CSS Box Model – Margin Collapse
CSS Box Model (inline element)
CSS Box Model (inline element)
CSS Box Model Shortcuts
CSS Box Model Dimensions
CSS Box Model and Box Sizing
• CSS3 Property
– box-sizing: content-box; /* Default value */
– box-sizing: border-box; /* G...
CSS Dimension
• height
– Sets the height of an element
• max-height
– Sets the maximum height of an element
• min-height
–...
Display and Visibility
• Hiding an Element
– display:none (doesn’t take space)
– visibility:hidden (takes space)
• Styling...
Building Menu using HTML & CSS
Building Menu using HTML & CSS
CSS ‘position’ Property
• static
– default value
– not affected by top, right, bottom, left
• relative
– positioned relati...
CSS Relative Positioning
CSS Absolute Positioning
CSS Relative and Absolute Positioning
CSS Fixed Positioning
CSS Floating
CSS Floating Problem
CSS Floating Issues
CSS Floating Issues
CSS Floating Issues
Grouping and Nesting Selectors
• Grouping Selectors
– div, p, span {
font-family: "Helvetica Neue", Arial, Helvetica;
}
• ...
CSS Pseudo-classes Selectors
• Syntax:
selector:pseudo-class { property:value; }
• Anchor Pseudo-classes
– a:link {color:#...
CSS Opacity / Transparency
• Transparency
– opacity:0.5;
– filter:alpha(opacity=50); /* For old IEs */
• Cross browser Tra...
CSS Image Sprites
• An image sprite is a collection of images put
into a single image.
• Reduces load time and saves bandw...
CSS Hacks - IE Detection and
Conditional CSS
• http://www.sitepoint.com/microsoft-drop-ie10-conditional-comments/
• http:/...
CSS Hacks
• IE7 doesn’t understand ‘display: inline-block’
1. display:block;
float:left;
2. display: inline-block;
*displa...
CSS – major IE6 Problem
• IE6 doesn't support multiple class selectors.
• So when we write,
div.menu.horizontal.widget { c...
Thank You!
Upcoming SlideShare
Loading in...5
×

Introduction to HTML and CSS

4,333

Published on

Published in: Technology
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,333
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
49
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Introduction to HTML and CSS

  1. 1. Knowledge Sharing Session on HTML and CSS Basic HTML and CSS Ferdous Mahmud Shaon February 2014
  2. 2. HTML, XHTML, HTML5
  3. 3. HTML Tags and Nested Tags
  4. 4. HTML Basic Structure
  5. 5. HTML <head> and <title>
  6. 6. HTML <body>
  7. 7. HTML Headlines
  8. 8. HTML Paragraphs
  9. 9. HTML Lists
  10. 10. HTML Divisions (sections)
  11. 11. HTML Images
  12. 12. HTML form
  13. 13. HTML frameset • Not recommended tag • Not supported in HTML5
  14. 14. HTML tables
  15. 15. HTML Block vs Inline elements • Block Elements – Takes up the full width available, and has a line break before and after it. – <p>, <div>, <h1>…. <h6>, <ul>, <ol>, <li>, <table> • Inline Elements – Takes up only as much width as necessary, and does not force line breaks after it. – <a>, <span>, <img>
  16. 16. HTML Block elements
  17. 17. HTML Block Elements
  18. 18. HTML Inline Elements
  19. 19. HTML Table vs DIV • Most websites have put their content in multiple columns. • Multiple columns can be created by using <div> or <table> elements. • Even though it is possible to create nice layouts with HTML tables, tables were designed for presenting tabular data - NOT as a layout tool! • The div element is used for grouping HTML elements and for creating rows and columns with the help of CSS.
  20. 20. HTML Page Layout
  21. 21. HTML Layout
  22. 22. HTML Layout
  23. 23. HTML Layout
  24. 24. HTML Layout
  25. 25. HTML <!DOCTYPE> • Must be the very first thing in HTML document, even before the <html> tag • Provides information to the web browser about what version of HTML the page is written in. • In HTML 4, the <!DOCTYPE> declaration refers to a DTD, but in HTML5, the <!DOCTYPE> declaration does NOT refer to any DTD.
  26. 26. HTML <!DOCTYPE>
  27. 27. HTML Character Entities
  28. 28. HTML vs XHTML XHTML – eXtensible HyperText Markup Language – Stricter and cleaner version of HTML similar to XML – Better cross browser support
  29. 29. HTML vs XHTML XHTML DOCTYPE – mandatory XHTML elements – must be properly nested – must always be closed – must be in lowercase – must have one root element XHTML attributes – names must be in lower case – values must be quoted – minimization is forbidden • <input type="checkbox" checked="checked" /> • <input disabled="disabled" />
  30. 30. SEO friendly HTML • Meaningful and relevant HTML <title> per page • Define <meta> description and keywords for each page. <meta name="description" content="Free Web tutorials on HTML and CSS"> <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript"> • Use an <h1> tag for the main headline of the page. It shouldn’t be more than one in a single page. • Relevant sub-headlines should use an <h2>…<h6> tags according to their priority. • Avoid embedded JS and CSS whenever possible. Try to use external CSS and JS and if possible minimize them.
  31. 31. New HTML5 Tags • <canvas> defines graphic drawing using JavaScript • <audio> defines sound or music content • <video> defines video or movie content • <header> defines a header for the document or a section • <nav> defines navigation links in the document
  32. 32. New HTML5 Tags • <section> defines a section in the document • <main> defines the main content of a document • <article> defines an article in the document • <footer> defines a footer for the document or a section • <figure> defines self-contained content, like illustrations, diagrams, photos etc.
  33. 33. HTML Style Elements <font>, <strong>, <b>, <u>, <i>, <em>, <center>
  34. 34. What is CSS? • Cascading Style Sheets • Defines how to display HTML elements • Added to HTML 4.0 • Current version is CSS 2. • CSS 3 is also released and supported by most of the browsers.
  35. 35. How to use CSS
  36. 36. CSS Rules
  37. 37. CSS Selectors
  38. 38. CSS Selectors
  39. 39. CSS Selectors
  40. 40. Multiple CSS Rules
  41. 41. Multiple CSS Rules
  42. 42. CSS Selector Priority
  43. 43. CSS class vs id selector
  44. 44. CSS Descendent Selector
  45. 45. CSS Descendent Selector
  46. 46. CSS Box Model (block element)
  47. 47. CSS Box Model (block element)
  48. 48. CSS Box Model (block element)
  49. 49. CSS Box Model – Margin Collapse
  50. 50. CSS Box Model – Margin Collapse
  51. 51. CSS Box Model – Margin Collapse
  52. 52. CSS Box Model – Margin Collapse
  53. 53. CSS Box Model – Margin Collapse
  54. 54. CSS Box Model (inline element)
  55. 55. CSS Box Model (inline element)
  56. 56. CSS Box Model Shortcuts
  57. 57. CSS Box Model Dimensions
  58. 58. CSS Box Model and Box Sizing • CSS3 Property – box-sizing: content-box; /* Default value */ – box-sizing: border-box; /* Grid in Twitter Bootstrap */
  59. 59. CSS Dimension • height – Sets the height of an element • max-height – Sets the maximum height of an element • min-height – Sets the minimum height of an element • width – Sets the width of an element • max-width – Sets the maximum width of an element • min-width – Sets the minimum width of an element
  60. 60. Display and Visibility • Hiding an Element – display:none (doesn’t take space) – visibility:hidden (takes space) • Styling block / inline HTML Element – ul.menu li { display:inline; } – div.data span { display:block; }
  61. 61. Building Menu using HTML & CSS
  62. 62. Building Menu using HTML & CSS
  63. 63. CSS ‘position’ Property • static – default value – not affected by top, right, bottom, left • relative – positioned relative to its normal position • absolute – positioned relative to the nearest relatively positioned ancestor – if no relatively positioned ancestors, then it uses the document body • fixed – positioned relative to the viewport – always stays in the same place even if the page is scrolled.
  64. 64. CSS Relative Positioning
  65. 65. CSS Absolute Positioning
  66. 66. CSS Relative and Absolute Positioning
  67. 67. CSS Fixed Positioning
  68. 68. CSS Floating
  69. 69. CSS Floating Problem
  70. 70. CSS Floating Issues
  71. 71. CSS Floating Issues
  72. 72. CSS Floating Issues
  73. 73. Grouping and Nesting Selectors • Grouping Selectors – div, p, span { font-family: "Helvetica Neue", Arial, Helvetica; } • Nesting Selectors – #main .data p { color:blue; } – .widget.data p { color:blue; } – #main .data > p { color:blue; }
  74. 74. CSS Pseudo-classes Selectors • Syntax: selector:pseudo-class { property:value; } • Anchor Pseudo-classes – a:link {color:#FF0000;} /* unvisited link */ – a:visited {color:#00FF00;} /* visited link */ – a:hover {color:#FF00FF;} /* mouse over link */ – a:active {color:#0000FF;} /* selected link */ • First-child Pseudo-class – ul.menu > li:first-child { margin-left:0; }
  75. 75. CSS Opacity / Transparency • Transparency – opacity:0.5; – filter:alpha(opacity=50); /* For old IEs */ • Cross browser Transparency .transparent { /* IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); /* IE 5-7 */ -moz-opacity: 0.5; /* Netscape */ -khtml-opacity: 0.5; /* Safari 1.x */ opacity: 0.5; /* Good browsers */ }
  76. 76. CSS Image Sprites • An image sprite is a collection of images put into a single image. • Reduces load time and saves bandwidth. • img.home { width:46px; height:44px; background:url(img_navsprites.gif) 0 0; } • img.next { width:43px; height:44px; background:url(img_navsprites.gif) -91px 0; }
  77. 77. CSS Hacks - IE Detection and Conditional CSS • http://www.sitepoint.com/microsoft-drop-ie10-conditional-comments/ • http://msdn.microsoft.com/en-us/library/ms537512%28VS.85%29.aspx <!--[if IE]> <p>You are using Internet Explorer >=5 and <= 9.</p> <![endif]--> <![if !IE]> <p>You are using Internet Explorer >=10 or other browsers.</p> <![endif]> • Using jQuery for jQuery < 1.9 if (jQuery.browser.msie && jQuery.browser.version < 8) { // do something }
  78. 78. CSS Hacks • IE7 doesn’t understand ‘display: inline-block’ 1. display:block; float:left; 2. display: inline-block; *display: inline; zoom: 1;
  79. 79. CSS – major IE6 Problem • IE6 doesn't support multiple class selectors. • So when we write, div.menu.horizontal.widget { color: blue; } in IE6, the above style is interpreted as: div.widget { color: blue; } • This style definition affects all div elements having widget style class.
  80. 80. Thank You!
  1. Gostou de algum slide específico?

    Recortar slides é uma maneira fácil de colecionar informações para acessar mais tarde.

×