Introduction to HTML

Introduction to HTML By Amit Tyagi

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

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>

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>

Box model

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

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;}

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; }

VisibilityVisible : The element is visible (default).Hidden : The element is invisible (but still takes up space) .big { visibility:hidden; }

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).

Default page flowAlways think of web page as 3D arrangementof different layers.

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; }

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; }

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>

Positioning - staticposition:static; (Default option) the element occurs in the normalflow (ignores any top, bottom, left, right, or z-index declarations)

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.

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

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

Refrences• www.w3schools.com• www.w3.org• World wide web

Introduction to HTML

by Amit Tyagi on Jul 11, 2012

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 1

Statistics

Introduction to HTML Presentation Transcript