Introduction to HTML

3,012 views

Published on

Video link : http://www.youtube.com/watch?v=OCzpDEB6sc8

Published in: Education, Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,012
On SlideShare
0
From Embeds
0
Number of Embeds
16
Actions
Shares
0
Downloads
78
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Introduction to HTML

  1. 1. Introduction to HTML By Amit Tyagi
  2. 2. HTML• What is HTML?• HTML is a language for describing web pages.• HTML stands for Hyper Text Markup Language• HTML is not a programming language, it is a markup language
  3. 3. HTML Tags• HTML markup tags are usually called HTML tags• HTML tags are keywords (tag names) surrounded by angle brackets like <html>• HTML tags normally come in pairs like <b> and </b>• The first tag in a pair is the start tag, the second tag is the end tag• Attributes can be added within the start tags like: <div class=“tbody”>Info</div>
  4. 4. HTML Structure <!DOCTYPE html> <html lang="en-IN"> <head> <title>Display demo</title> <meta name="description" content="A demoHead { page to show HTML display property"> href="style.css" /> <link rel="stylesheet" type="text/css" <script > // js code goes here </script> </head> <body> <div id="main_page">Welcome to theBody { unlimited world of </html> </body> HTML </div>
  5. 5. Box model
  6. 6. Display propertynone inlineblock list-itemrun-in compactmarker tableinline-table inline-blocktable-row-group table-header-grouptable-footer-group table-rowtable-column-group table-columntable-cell table-caption
  7. 7. display:block;• Block Level elements, such as DIVs, paragraphs, headings, and lists, sit one above another when displayed in the browser. HTML <body> <div id=“div1”></div> <div id=“div2”></div> <div id=“div3”></div> </body> CSS #div1 { width:300px;background:yellow;} #div1 { width:300px;background:blue;} #div1 { width:300px;background:orange;}
  8. 8. Inline Elements• Inline elements such as a, span, and img, sit side by side when they are displayed in the browser and only appear on a new line if there is insufficient room on the previous one. <div id="row1" > .norm { color:red; <span class="norm">This is } small text and </span> .big { <span class="big">this is big</ color:blue; span> font-weight:bold; } <span class="italicText"> I am .italicText { Italic</span> color:green; </div> font-style:italic; } #row1 { padding:10px; border:solid 1px #000; }
  9. 9. VisibilityVisible : The element is visible (default).Hidden : The element is invisible (but still takes up space) .big { visibility:hidden; }
  10. 10. z-indexThe z-index property specifies the stack order of an element.An element with greater stack order is always in front of anelement with a lower stack order.only works on positioned elements (position:absolute,position:relative, or position:fixed).
  11. 11. Default page flowAlways think of web page as 3D arrangementof different layers.
  12. 12. Floatingfloat:left, right, none;A floated box is laid out according to the normal flow, then taken outof the flow and shifted to the left or right as far as possible. IMG { float: left; }
  13. 13. Floating multiple elementsFloated boxes will move to the left or right until their outer edgetouches the containing block edge or the outer edge of another float. <ul> <li>Home</li> <li>Products</li> <li>Services</li> <li>Contact Us</li> </ul> After applying LI { float:left; }
  14. 14. Clearing FloatsClear:both ;Or<style type="text/css"> .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {display: inline-block;} /* for IE/Mac */</style><!--[if IE]><style type="text/css"> .clearfix { zoom: 1; display: block; }</style> <![endif]-->
  15. 15. Positioning - staticposition:static; (Default option) the element occurs in the normalflow (ignores any top, bottom, left, right, or z-index declarations)
  16. 16. Positioning - relativeposition:relative; Generates a relatively positioned element,positioned relative to its normal position, use bottom, right, topand left property to place element. Default flow of other elementsdon’t change.
  17. 17. Positioning - absoluteposition:relative; Generates an absolutely positioned element,positioned relative to the first Ancestor element that has aposition other than static (if none is found, relative to document’sBODY). use bottom, right, top and left property to place element
  18. 18. Positioning - fixedposition:relative; Generates an absolutely positioned element,positioned relative to the browser window and don’t changeeven after page scroll. use bottom, right, top and left property toplace element
  19. 19. Refrences• www.w3schools.com• www.w3.org• World wide web

×