Your SlideShare is downloading. ×
Introduction to HTML
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Introduction to HTML

1,525
views

Published on

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

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
1,525
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
43
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Introduction to HTML By Amit Tyagi
  • 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. 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. 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. Box model
  • 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. 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. 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. VisibilityVisible : The element is visible (default).Hidden : The element is invisible (but still takes up space) .big { visibility:hidden; }
  • 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. Default page flowAlways think of web page as 3D arrangementof different layers.
  • 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. 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. 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. Positioning - staticposition:static; (Default option) the element occurs in the normalflow (ignores any top, bottom, left, right, or z-index declarations)
  • 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. 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. 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. Refrences• www.w3schools.com• www.w3.org• World wide web

Ă—