Index

Create New

ParentPostId PostTypeId Title DisplayName PostContent Description PageSlug DisplayOrder TotalComment TotalRating Rating UserId IsCommentEnabled IsPublished IsDeleted CreatedOn ModifiedOn
1 Html Html <tit>What is HTML?</tit> <p><b>HyperText Markup Language(HTML)</b> is the main markup language for creating web pages and other information that can be displayed in a web browser.</p> <p>HTML is written in the form of HTML elements consisting of tags enclosed in angle brackets (like &lt;html&gt;, &lt;h1&gt; etc..), within the web page content.</p> <p>Web Browsers read HTML documents and display web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page. Webpages can be be made more beautiful and interactive with the help of Cascading <b>Style Sheets (CSS)</b> & <b>JavaScript</b>. You can learn them too at <i>rookienerd.com</i>.</p> <tit>What you will Learn?</tit> <p>With the HTML tutorial in <i>rookienerd.com</i>, you can learn and create your own Web site.</p> <p>You will enjoy learning HTML.</p> <tit>HTML Examples</tit> <p>Each tutorial has examples to learn and practice quickly.</p> <tit>HTML References</tit> <p>You will find complete references about tags, attributes, events, colornames, character-sets, URL encoding, language codes, HTTP messages, and more..</p> Html 1 1 6/29/2013 6:23:40 AM 12/13/2018 5:07:13 PM Edit | Details | Delete
1 Understand Html Understand Html <tit>Understand Html</tit> <p>The first step toward understanding and working with HTML is learning the basic terms that describe most of the functions of this language. </p> <tit>Four Key Concepts</tit> <p>The four key concepts you need to learn about html is <i>Elements</i>, <i>Tags</i>, <i>Attributes/ Values</i> & <i>Nesting</i> of elements.</p> <tit>Elements</tit> <p>All HTML pages are made up of elements. An HTML element is everything from the start tag to the end tag. </p> <p>Example: heading element <code>&lt;h1&gt; &lt;/h1&gt;</code>, form element <code>&lt;form&gt; &lt;/form&gt;</code>.</p> <tit>Tags</tit> <p>All elements are constructed with tags. An element is made up of two tags: an opening tag and a closing tag. The tag begins with a “less than” sign <code>(&lt;)</code>, then the element name, followed by a “greater than” sign <code>(&gt;)</code>. All tags are constructed the same way.</p> <p>For example, the opening and the closing tag for the paragraph element would look like this: <code>&lt;p&gt;&lt;/p&gt;</code></p> <pre>&lt;p&gt;This is an HTML paragraph.&lt;/p&gt;</pre> <p>Some elements do not use closing tags because they do not enclose content. These are called empty elements. For example, the line break element &lt;br&gt; does not require a closing tag. In the case of empty elements, add a closing slash after the element name, like this: <c>&lt;br /&gt;</c>. When a browser sees the slash, it will recognize the element as one that does not need a separate, closing tag.</p> <note>Tip When writing an empty element, it’s important to add a space between the element name and the closing slash. Correct: <code>&lt;br /&gt;</code> Incorrect: <code>&lt;br/&gt;</code></note> <tit>Attributes and Values</tit> <p>HTML attributes generally appear as name-value pairs, separated by "=", and are written within the start tag of an element, after the element's name.</p> <t1>Syntax</t1> <pre>&lt;tag attribute=&quot;value&quot;&gt;(content to be modified by the tag)&lt;/tag&gt;</pre> <p>For example, to specify the size of an image or graphic on your page, you would use the image element <code>&lt;img /&gt;</code> along with the height and width attributes. "200" and "300" are the values.</p> <pre>&lt;img <b>height=&quot;200&quot;</b> <b>width=&quot;300&quot;</b> /&gt;</pre> <tit>Nesting</tit> <p>Often you will want to apply more than one element to a portion of your page. Elements must be properly nested as they are contained inside one another and they must never overlap.</p> <pre>&lt;p&gt; &lt;b&gt; &lt;i&gt; &lt;/i&gt; &lt;/b&gt; &lt;/p&gt;</pre> <p>The properly formatted structure is shown below</p> <pre>&lt;p&gt; &lt;b&gt; &lt;i&gt; &lt;/i&gt; &lt;/b&gt; &lt;/p&gt;</pre> <p>The below example is wrong. Overlapped elements can create garbled results.</p> <pre>&lt;p&gt; &lt;b&gt; &lt;/p&gt; &lt;i&gt; &lt;/b&gt; &lt;/i&gt;</pre> Understand Html 1 1 6/29/2013 9:12:16 AM 12/13/2018 5:10:16 PM Edit | Details | Delete
1 Colors Colors <p>Colors are used to define the color of a background or the color of the font.</p> 1. <i><b>Color Name</b></i> : "aqua, black, etc.," 2. <i><b>RGB Model</b></i> - A color can be obtained by mixing of three fundamental colors Red, Green and Blue. - html-colors 1 1 3/23/2014 6:22:33 PM 12/9/2018 3:11:38 AM Edit | Details | Delete
1 The <font> element The <font> element The block of text can be modified using the <code>&lt;font&gt;</code> element.<br /><br />color=color<br />face=font<br />size=size<br /><br /><code>&lt;font size=&quot;+5&quot; afce=&quot;fantasy. arial&quot; color=&quot;black&quot;&gt;</code><br />This text is placed inside the font element<br /><code>&lt;/font&gt;</code> html-font-element 1 1 3/24/2014 6:09:42 PM 11/9/2014 8:09:40 AM Edit | Details | Delete
1 <body> attributes <body> attributes The following two attributes can be used to assign color.<br /><br /><code>bgcolor=color</code> - defines background color of the web page<br /><code>text=color</code> - defines the text color of the page. html-body-attributes 1 1 3/24/2014 6:12:03 PM 11/9/2014 8:09:40 AM Edit | Details | Delete
1 The margin attributes The margin attributes There are four margin attributes.<br /><br />leftmargin - default 10px<br />rightmargin - default 10px<br />topmargin - default 15px<br />bottommargin - default 0px html-margin-attributes 1 1 3/24/2014 6:16:34 PM 11/9/2014 8:09:40 AM Edit | Details | Delete
1 The <basefont> element The <basefont> element The browser will render the text in a document according to the default settings.<br /><br />The following attributes can be used to set the <code>&lt;basefont&gt;</code><br /><br />color=color<br />face=font<br />size=size<br /><br /><code>&lt;basefont size=&quot;+5&quot; face=&quot;fantasy&quot; color=&quot;black&quot;&gt;</code> html-basefont-element 1 1 3/24/2014 6:18:50 PM 11/9/2014 8:09:40 AM Edit | Details | Delete
1 Font Names Font Names Font Names : "serif", "cursive", fantasy" or "monospace"<br />List of font names can be given. Browser uses the first recognized font name or its default settings. html-font-names 1 1 3/24/2014 6:39:50 PM 11/9/2014 8:09:40 AM Edit | Details | Delete
1 Selectors Selectors In CSS, pattern matching rules determine which style rules apply to elements in the document tree.<br /><br />1. Universal Selector<br />2. Class selector <br />3. id Selector<br />4. decendant Selector<br />5. Child Selector<br />6. Adjacent sibling selector<br />7. Attribute Selector<br />8. :first-child pseudo-class<br />9. link pseudo class<br />10. :first-line pseudo-element<br />11. :first-letter pseudo-element<br />12. Grouping Selectors Selectors Selectors 1 1 3/24/2014 6:41:03 PM 1/26/2017 1:04:37 PM Edit | Details | Delete
1 Html Physical Styles of Text Html Physical Styles of Text <tit>Browsers Default Behavior</tit> <p>If no style is specified for the text contained by the <code>&lt;body&gt;..&lt;/body&gt;</code> tag, the text will be rendered as a default settings.</p> <tit>Browsers Default Behavior</tit> <p>The text style can be changed using the following physical styles.</p> <table> <tr><th>Properties</th><th>Description</th></tr><tr><td><c>&lt;b&gt;</c></td><td>Bold contents</td></tr><tr><td><c>&lt;big&gt;</c></td><td>Increased font size</td></tr><tr><td><c>&lt;blink&gt;</c></td><td>Alternating fore- and background colors</td></tr><tr><td><c>&lt;font&gt;</c></td><td>Specifies smaller or larger text. Requires "size" attribute *</td></tr><tr><td><c>&lt;i&gt;</c></td><td>Italic contents</td></tr><tr><td><c>&lt;small&gt;</c></td><td>Decreased font size</td></tr><tr><td><c>&lt;s&gt;</c> or <c>&lt;strike&gt;</c></td><td>Strike-through text</td></tr><tr><td><c>&lt;sub&gt;</c></td><td>Subscripted text</td></tr><tr><td><c>&lt;sup&gt;</c></td><td>Superscripted text</td></tr><tr><td><c>&lt;tt&gt;</c></td><td>Teletypewriter style</td></tr><tr><td><c>&lt;u&gt;</c></td><td>Underlined contents</td></tr></table> <tit>&lt;b&gt; Element</tit> <p>The text inside <code>&lt;b&gt;</code>..<code>&lt;/b&gt;</code> block is rendered in the <code>&lt;b&gt;</code>bold text<code>&lt;b&gt;</code> style.</p> <t1>Example</t1> <snpt>&lt;html&gt;&lt;head&gt;&lt;/head&gt;&lt;body&gt; Normal &lt;b&gt;QuoteFellas.com.&lt;/b&gt; &lt;b&gt;&lt;i&gt;QuoteFellas.com&lt;/i&gt; in bold italic&lt;/b&gt; &lt;body&gt;&lt;html&gt;</snpt> <outi><html><head></head><body>Normal<b>QuoteFellas.com.</b><b><i>QuoteFellas.com</i> in bold italic</b><body><html></outi> <div class="dnerd" data-slug="SPLC3zZ7FD4" data-url="" data-theme="default" data-s-height="120" data-p-height="120" data-c-height="100" data-title="Html Physical Styles - <b> Element"></div><script async src="/scripts/snip_wgt.js"></script> <tit>&lt;big&gt; element</tit> <p>The text inside <code>&lt;big&gt;</code>..<code>&lt;/big&gt;</code> block is rendered with the <code>&lt;big&gt;</code>bigger<code>&lt;big&gt;</code> font.</p> <snpt>&lt;html&gt;&lt;head&gt;&lt;/head&gt;&lt;body&gt; Normal &lt;big&gt;Aim bigger&lt;/big&gt; &lt;big&gt;&lt;big&gt;Aim more bigger&lt;/big&gt;&lt;/big&gt; &lt;body&gt;&lt;html&gt;</snpt> <outi><html><head></head><body>Normal<big>Aim bigger</big><big><big>Aim more bigger</big></big><body><html></outi> <tit>&lt;blink&gt; element</tit> The text inside <code>&lt;blink&gt;</code>..<code>&lt;/blink&gt;</code> block just blink on and blink off <code>&lt;blink&gt;</code>blink<code>&lt;blink&gt;</code>. <snpt>&lt;html&gt;&lt;head&gt;&lt;/head&gt;&lt;body&gt; Normal &lt;blink&gt;Blink&lt;/blink&gt; &lt;body&gt;&lt;html&gt;</snpt> <outi><html><head></head><body>Normal<blink>Blink</blink><body><html></outi> <tit>&lt;font&gt; element</tit> <p>The text inside <code>&lt;font&gt;</code>..<code>&lt;/font&gt;</code> block needs the <code>&lt;b&gt;</code>size<code>&lt;/b&gt;</code> attribute to specify how much larger or smaller the contained text should be than the surrounding text.</p> <snpt> &lt;html&gt; &lt;head&gt;&lt;/head&gt; &lt;body&gt; Normal &lt;FONT SIZE=+3&gt;Three times larger&lt;FONT&gt; &lt;body&gt; &lt;html&gt;</snpt> <outi><html><head></head><body>Normal<FONT SIZE=+3>Three times larger<FONT><body><html></outi> <tit>The &lt;i&gt; element</tit> <p>The text inside <code>&lt;i&gt;</code>..<code>&lt;/i&gt;</code> block is used to render text in the <code>&lt;i&gt;</code>italic<code>&lt;/i&gt;</code> style.</p> <snpt>&lt;html&gt; &lt;head&gt;&lt;/head&gt; &lt;body&gt; Normal Text &lt;i&gt;www.RookieNerd.com&lt;/i&gt; &lt;body&gt; &lt;html&gt;</snpt> <outi><html><head></head><body> Normal Text <i>www.RookieNerd.com</i><body><html></outi> <tit>&lt;small&gt; element</tit> <p>The text inside <code>&lt;small&gt;</code>..<code>&lt;/small&gt;</code> block is rendered with a <code>&lt;small&gt;</code> smaller<code>&lt;/small&gt;</code> font than the current font.</p> <snpt>&lt;html&gt; &lt;head&gt;&lt;/head&gt; &lt;body&gt; Normal Text &lt;small&gt;Small Text&lt;/small&gt; &lt;small&gt;&lt;small&gt;Even more small text&lt;/small&gt;&lt;/small&gt; &lt;body&gt; &lt;html&gt;</snpt> <outi><html><head></head><body> Normal Text <small>Small Text</small> <small><small>Even more small text</small></small><body><html></outi> <tit>&lt;strike&gt; or &lt;s&gt; element</tit> <p>The text inside <code>&lt;strike&gt;</code>..<code>&lt;/strike&gt;</code> block is rendered as <code>&lt;strike&gt;</code> strike-through <code>&lt;strike&gt;</code> text style.</p> <snpt>&lt;html&gt; &lt;head&gt;&lt;/head&gt; &lt;body&gt; Normal Text &lt;strike&gt;Strike text.&lt;/strike&gt; &lt;s&gt;Strike text again.&lt;/s&gt; &lt;body&gt; &lt;html&gt;</snpt> <outi><html><head></head><body> Normal Text <strike>Strike text.</strike> <s>Strike text again.</s><body><html></outi> <tit>&lt;sub&gt; element</tit> <p>The text inside <code>&lt;sub&gt;</code>..<code>&lt;/sub&gt;</code> element is rendered with <code>&lt;i&gt;</code>subscript<code>&lt;i&gt;</code> text style.</p> <snpt>&lt;html&gt; &lt;head&gt;&lt;/head&gt; &lt;body&gt; The formula for glucose is C&lt;sub&gt;6&lt;/sub&gt;H&lt;sub&gt;12&lt;/sub&gt;O&lt;sub&gt;6&lt;/sub&gt; &lt;body&gt; &lt;html&gt;</snpt> <outi><html><head></head><body> The formula for glucose is C<sub>6</sub>H<sub>12</sub>O<sub>6</sub><body><html></outi> <tit>&lt;sup&gt; element</tit> <p>The text inside <code>&lt;sup&gt;..&lt;/sup&gt;</code> element is rendered with <code>&lt;i&gt;superscript&lt;i&gt;</code> text style.</p> <snpt>&lt;html&gt; &lt;head&gt;&lt;/head&gt; &lt;body&gt; The formula for (a+b)&lt;sup&gt;2&lt;/sup&gt; = a&lt;sup&gt;2&lt;/sup&gt;+b&lt;sup&gt;2&lt;/sup&gt;+2ab &lt;body&gt; &lt;html&gt;</snpt> <outi><html><head></head><body> The formula for (a+b)<sup> is a<sup>2</sup>+b<sup>2</sup>+2ab<body><html></outi> <tit>&lt;tt&gt; element</tit> <p>The text inside <code>&lt;tt&gt;..&lt;/tt&gt;</code> element is rendered with <code>&lt;i&gt;teletype&lt;i&gt;</code> or mono-spaced text style.</p> <snpt>&lt;html&gt; &lt;head&gt;&lt;/head&gt; &lt;body&gt; Normal text. &lt;tt&gt;Teletype text.&lt;/tt&gt; &lt;body&gt; &lt;html&gt;</snpt> <outi><html><head></head><body> Normal text. <tt>Teletype text.</tt><body><html></outi> <tit>&lt;u&gt; element</tit> <p>The text inside <code>&lt;u&gt;..&lt;/u&gt;</code> element is rendered with <code>&lt;i&gt;underlined&lt;i&gt;</code> text style.</p> <snpt>&lt;html&gt; &lt;head&gt;&lt;/head&gt; &lt;body&gt; Normal text. &lt;u&gt;Underlined text.&lt;/u&gt; &lt;body&gt;&lt;html&gt;</snpt> <outi><html><head></head><body> Normal text. <u>Underlined text.</u><body><html></outi> Html Physical Style 1 1 3/31/2014 5:53:20 PM 12/18/2018 7:15:48 PM Edit | Details | Delete
1 Physical Style Elements Html Physical Style Elements <tit>Browsers Default Behavior</tit><br /><br />The text style can be changed using the following physical styles.<br /><table><br /><tr><th>Properties</th><th>Description</th></tr><tr><td><c>&lt;b&gt;</c></td><td>Bold contents</td></tr><tr><td><c>&lt;big&gt;</c></td><td>Increased font size</td></tr><tr><td><c>&lt;blink&gt;</c></td><td>Alternating fore- and background colors</td></tr><tr><td><c>&lt;font&gt;</c></td><td>Specifies smaller or larger text. Requires "size" attribute *</td></tr><tr><td><c>&lt;i&gt;</c></td><td>Italic contents</td></tr><tr><td><c>&lt;small&gt;</c></td><td>Decreased font size</td></tr><tr><td><c>&lt;s&gt;</c> or <c>&lt;strike&gt;</c></td><td>Strike-through text</td></tr><tr><td><c>&lt;sub&gt;</c></td><td>Subscripted text</td></tr><tr><td><c>&lt;sup&gt;</c></td><td>Superscripted text</td></tr><tr><td><c>&lt;tt&gt;</c></td><td>Teletypewriter style</td></tr><tr><td><c>&lt;u&gt;</c></td><td>Underlined contents</td></tr></table> Physical Style Elements 1 1 3/31/2014 5:57:18 PM 1/31/2017 8:14:57 AM Edit | Details | Delete
1 The <b> Element The <b> Element The text inside <code>&lt;b&gt;</code>..<code>&lt;/b&gt;</code> block is rendered in the <code>&lt;b&gt;</code>bold text<code>&lt;b&gt;</code> style.<br /><br /><t1>Example</t1><br /><snpt>&lt;html&gt;&lt;head&gt;&lt;/head&gt;&lt;body&gt;<br />Normal<br />&lt;b&gt;QuoteFellas.com.&lt;/b&gt;<br />&lt;b&gt;&lt;i&gt;QuoteFellas.com&lt;/i&gt; in bold italic&lt;/b&gt;<br />&lt;body&gt;&lt;html&gt;</snpt><br /><br /><outi><html><head></head><body>Normal<b>QuoteFellas.com.</b><b><i>QuoteFellas.com</i> in bold italic</b><body><html></outi> Html bold element 1 1 3/31/2014 6:02:53 PM 1/31/2017 8:16:03 AM Edit | Details | Delete
1 The <big> element The <big> Element The text inside <code>&lt;big&gt;</code>..<code>&lt;/big&gt;</code> block is rendered with the <code>&lt;big&gt;</code>bigger<code>&lt;big&gt;</code> font.<br /><br /><snpt>&lt;html&gt;&lt;head&gt;&lt;/head&gt;&lt;body&gt;<br />Normal<br />&lt;big&gt;Aim bigger&lt;/big&gt;<br />&lt;big&gt;&lt;big&gt;Aim more bigger&lt;/big&gt;&lt;/big&gt;<br />&lt;body&gt;&lt;html&gt;</snpt><br /><br /><outi><html><head></head><body>Normal<big>Aim bigger</big><big><big>Aim more bigger</big></big><body><html></outi> Html big Element 1 1 3/31/2014 6:13:53 PM 11/10/2014 12:42:57 PM Edit | Details | Delete
1 The <blink> element The <blink> element The text inside <code>&lt;blink&gt;</code>..<code>&lt;/blink&gt;</code> block just blink on and blink off <code>&lt;blink&gt;</code>blink<code>&lt;blink&gt;</code>.<br /><br /><snpt>&lt;html&gt;&lt;head&gt;&lt;/head&gt;&lt;body&gt;<br />Normal<br />&lt;blink&gt;Blink&lt;/blink&gt;<br />&lt;body&gt;&lt;html&gt;</snpt><br /><br /><outi><html><head></head><body>Normal<blink>Blink</blink><body><html></outi> Html blink Element 1 1 3/31/2014 6:17:49 PM 1/31/2017 12:38:49 PM Edit | Details | Delete
1 The <font> element The <font> element The text inside <code>&lt;font&gt;</code>..<code>&lt;/font&gt;</code> block needs the <code>&lt;b&gt;</code>size<code>&lt;/b&gt;</code> attribute to specify how much larger or smaller the contained text should be than the surrounding text.<br /><br /><snpt><br />&lt;html&gt;<br />&lt;head&gt;&lt;/head&gt;<br />&lt;body&gt;<br /> Normal<br /> &lt;FONT SIZE=+3&gt;Three times larger&lt;FONT&gt;<br />&lt;body&gt;<br />&lt;html&gt;</snpt><br /><br /><outi><html><head></head><body>Normal<FONT SIZE=+3>Three times larger<FONT><body><html></outi> Html font element 1 1 3/31/2014 6:22:06 PM 11/10/2014 12:42:57 PM Edit | Details | Delete
1 The <i> element The <i> element The text inside <code>&lt;i&gt;</code>..<code>&lt;/i&gt;</code> block is used to render text in the <code>&lt;i&gt;</code>italic<code>&lt;/i&gt;</code> style.<br /><br /><snpt>&lt;html&gt;<br />&lt;head&gt;&lt;/head&gt;<br />&lt;body&gt;<br /> Normal Text<br /> &lt;i&gt;www.RookieNerd.com&lt;/i&gt;<br />&lt;body&gt;<br />&lt;html&gt;</snpt><br /><br /><outi><html><head></head><body> Normal Text <i>www.RookieNerd.com</i><body><html></outi> Html italic element 1 1 3/31/2014 6:26:23 PM 11/10/2014 12:42:57 PM Edit | Details | Delete
1 The <small> element The <small> element The text inside <code>&lt;small&gt;</code>..<code>&lt;/small&gt;</code> block is rendered with a <code>&lt;small&gt;</code> smaller<code>&lt;/small&gt;</code> font than the current font.<br /><br /><snpt>&lt;html&gt;<br />&lt;head&gt;&lt;/head&gt;<br />&lt;body&gt;<br /> Normal Text<br /> &lt;small&gt;Small Text&lt;/small&gt;<br /> &lt;small&gt;&lt;small&gt;Even more small text&lt;/small&gt;&lt;/small&gt;<br />&lt;body&gt;<br />&lt;html&gt;</snpt><br /><br /><outi><html><head></head><body> Normal Text <small>Small Text</small> <small><small>Even more small text</small></small><body><html></outi> Html smaller element 1 1 3/31/2014 6:32:54 PM 2/1/2017 8:19:03 AM Edit | Details | Delete
1 The <strike> or <s> element The <strike> or <s> element The text inside <code>&lt;strike&gt;</code>..<code>&lt;/strike&gt;</code> block is rendered as <code>&lt;strike&gt;</code> strike-through <code>&lt;strike&gt;</code> text style.<br /><br /><snpt>&lt;html&gt;<br />&lt;head&gt;&lt;/head&gt;<br />&lt;body&gt;<br /> Normal Text<br /> &lt;strike&gt;Strike text.&lt;/strike&gt;<br /> &lt;s&gt;Strike text again.&lt;/s&gt;<br />&lt;body&gt;<br />&lt;html&gt;</snpt><br /><br /><outi><html><head></head><body> Normal Text <strike>Strike text.</strike> <s>Strike text again.</s><body><html></outi> Html subscript element 1 1 3/31/2014 6:36:50 PM 2/1/2017 8:19:56 AM Edit | Details | Delete
1 The <sub> element The <sub> element The text inside <code>&lt;sub&gt;</code>..<code>&lt;/sub&gt;</code> element is rendered with <code>&lt;i&gt;</code>subscript<code>&lt;i&gt;</code> text style.<br /><br /><snpt>&lt;html&gt;<br />&lt;head&gt;&lt;/head&gt;<br />&lt;body&gt;<br /> The formula for glucose is C&lt;sub&gt;6&lt;/sub&gt;H&lt;sub&gt;12&lt;/sub&gt;O&lt;sub&gt;6&lt;/sub&gt;<br />&lt;body&gt;<br />&lt;html&gt;</snpt><br /><br /><outi><html><head></head><body> The formula for glucose is C<sub>6</sub>H<sub>12</sub>O<sub>6</sub><body><html></outi> Html strike-through element 1 1 3/31/2014 6:40:20 PM 11/10/2014 12:42:57 PM Edit | Details | Delete
1 The <sup> element The <sup> element The text inside <code>&lt;sup&gt;..&lt;/sup&gt;</code> element is rendered with <code>&lt;i&gt;superscript&lt;i&gt;</code> text style.<br /><br /><snpt>&lt;html&gt;<br />&lt;head&gt;&lt;/head&gt;<br />&lt;body&gt;<br /> The formula for (a+b)&lt;sup&gt;2&lt;/sup&gt; = a&lt;sup&gt;2&lt;/sup&gt;+b&lt;sup&gt;2&lt;/sup&gt;+2ab<br />&lt;body&gt;<br />&lt;html&gt;</snpt><br /><br /><outi><html><head></head><body> The formula for (a+b)<sup> is a<sup>2</sup>+b<sup>2</sup>+2ab<body><html></outi> Html super script element 1 1 3/31/2014 6:43:10 PM 11/10/2014 12:42:57 PM Edit | Details | Delete
1 The <tt> element The <tt> element The text inside <code>&lt;tt&gt;..&lt;/tt&gt;</code> element is rendered with <code>&lt;i&gt;teletype&lt;i&gt;</code> or mono-spaced text style.<br /><br /><snpt>&lt;html&gt;<br />&lt;head&gt;&lt;/head&gt;<br />&lt;body&gt;<br /> Normal text. <br /> &lt;tt&gt;Teletype text.&lt;/tt&gt;<br />&lt;body&gt;<br />&lt;html&gt;</snpt><br /><br /><outi><html><head></head><body> Normal text. <tt>Teletype text.</tt><body><html></outi> Html tele type element or mono-spaced text style element 1 1 3/31/2014 6:52:21 PM 11/10/2014 12:42:57 PM Edit | Details | Delete
1 The <u> element The <u> element The text inside <code>&lt;u&gt;..&lt;/u&gt;</code> element is rendered with <code>&lt;i&gt;underlined&lt;i&gt;</code> text style.<br /><br /><snpt>&lt;html&gt;<br />&lt;head&gt;&lt;/head&gt;<br />&lt;body&gt;<br /> Normal text. <br /> &lt;u&gt;Underlined text.&lt;/u&gt;<br />&lt;body&gt;&lt;html&gt;</snpt><br /><br /><outi><html><head></head><body> Normal text. <u>Underlined text.</u><body><html></outi> Html underlined style element 1 1 3/31/2014 6:54:39 PM 11/10/2014 12:42:57 PM Edit | Details | Delete
1 Html Logical Styles of text Html Logical Styles of text <p>The logical styles of text are used to add a specific destination to a specific block of text.</p> <table> <tr><th>Properties</th><th>Description</th></tr><tr><td><c>&lt;p&gt;</c></td><td>Paragraphs</td></tr><tr><td><c>&lt;h1&gt;&lt;h2&gt;</c>..<c>&lt;h6&gt;</c></td><td>Headings</td></tr><tr><td><c>&lt;blockquote&gt;</c> or <c>&lt;q&gt;</c></td><td>Quotations elements</td></tr><tr><td><c>&lt;hr&gt;</c></td><td>Horizontal rules</td></tr><tr><td><c>&lt;center&gt;</c></td><td>The center element</td></tr><tr><td><c>&lt;div&gt;</c> & <c>&lt;span&gt;</c></td><td>Grouping Elements</td></tr><tr><td><c>&lt;pre&gt;</c></td><td>Pre-formatted text blocks</td></tr><tr><td><c>&lt;em&gt;</c>,<c>&lt;strong&gt;</c>,<c>&lt;dfn&gt;</c>, <c>&lt;code&gt;</c>,<c>&lt;samp&gt;</c>,<c>&lt;acronym&gt;</c>, <c>&lt;var&gt;</c>,<c>&lt;cite&gt;</c>,<c>&lt;abbr&gt;</c>,<c>&lt;kbd&gt;</c></td><td>Phrase Elements</td></tr></table> <tit>&lt;p&gt; Paragraphs</tit> <p>The <code>&lt;p&gt;</code> tag defines a paragraph. Using this tag, we can split long text. A blank line above and below the text of the paragraph. </p> <t1>Syntax</t1> <pre>&lt;p align=&quot;center&quot;&gt;..&lt;/p&gt;</pre> <note>- The <code>&lt;p&gt;</code> element can have an attribute called align, which is used to define the the alignment for the text of the paragraph. - The align attribute can have the values "<b>left</b>", "<b>center</b>", "<b>right</b>" or "<b>justify</b>". The <i>default</i> value is "<b>left</b>"</note> <tit>&lt;h1&gt;&lt;h2&gt;..&lt;h6&gt; Headings</tit> <p>HTML allows you to add headings into a web page. Headings may look different on each browser. </p> There are six headings tag. <pre>&lt;h1&gt;..&lt;/h1&gt; &lt;h2&gt;..&lt;/h2&gt; &lt;h3&gt;..&lt;/h3&gt; &lt;h4&gt;..&lt;/h4&gt; &lt;h5&gt;..&lt;/h5&gt; &lt;h6&gt;..&lt;/h6&gt;</pre> <t1>Example</t1> <pre>&lt;h3 align=&quot;left&quot;&gt;Heading3&lt;/h3&gt;</pre> <note>-All headings should have the ending tag -All headings are rendered on a new line leaving an extra space after the previous block. -The align attribute can have the values "<b>left</b>", "<b>center</b>", "<b>right</b>" or "<b>justify</b>". The default value is "<b>left</b>"</note> <tit>&lt;blockquote&gt; Element</tit> <p>The <code>&lt;blockquote&gt;</code>..<code>&lt;/blockquote&gt;</code> element is designed for inserting quotations into a web page.</p> <p>The block-quote element adds extra white spaces before and after the element and on the left and on the right of the element.</p> <tit>&lt;q&gt; element</tit> <p>The <code>&lt;q&gt;</code>..<code>&lt;/q&gt;</code> element is designed for in-line quotation. While rendering, the <q> element does'nt start on the new line.</p> <tit>&lt;hr&gt; Horizontal Rules element</tit> <p>The HTML <code>&lt;hr&gt;</code> tag is used for creating a horizontal line. This is also called Horizontal Rule in HTML which makes distinction between different sections of a web page.</p> <snpt>&lt;hr&gt; &lt;hr align=&quot;center&quot; width=&quot;50%&quot; size=&quot;5&quot; noshade color=&quot;red&quot;&gt;</snpt> <t1>Attributes:</t1> <table> <tr><th>Attributes</th><th>Description</th></tr><tr><td><c>align</c></td><td>"<c>left</c>" | " <c>center</c>" | "<c>right</c>"</td></tr><tr><td><c>width</c></td><td>A positive integer (or) a positive integer between 1 and 100 followed by %; default is "100%"</td></tr><tr><td><c>size</c></td><td>The thickness of the rule in pixel; the default is 2</td></tr><tr><td><c>noshade</c></td><td> If present, the rule is flat rule. else a 3D rule with a shadow.</td></tr><tr><td><c>color</c></td><td>The default color is "black".</td></tr></table> <note>*A horizontal rule tag <code>&lt;hr&gt;</code> does'nt require an ending tag. *A horizontal rule can have more than one attributes.</note> <tit>&lt;center&gt; element</tit> <p>The <c>center</c> element is used to center content (e.g. text, images, horizontal rules)</p> <snpt>&lt;html&gt; &lt;head&gt;&lt;/head&gt; &lt;body&gt; Normal horizontal rule &lt;hr width=&quot;90%&quot;&gt; center aligned horizontal rule &lt;center&gt; &lt;hr width=&quot;50%&quot;&gt; &lt;/center&gt; &lt;body&gt; &lt;html&gt;</snpt> <outi><html><head></head><body>Normal horizontal rule<hr width="50%">center aligned horizontal rule<center><hr width="50%"></center><body><html></outi> <tit>&lt;div&gt; element</tit> <p>There are two kind of elements in HTML.</p> <table> <tr><th>Element Types</th><th>Description</th></tr><tr><td><i>Block level elements</i></td><td>Rendered starting on a new line (e.g. <c>&lt;p&gt;</c> or <c>&lt;hr&gt;</c>)</td></tr><tr><td>In-line elements</td><td>Rendered on same line (e.g. <c>&lt;b&gt;</c> or <c>&lt;q&gt;</c>)</td></tr></table> <p>The HTML <c>&lt;div&gt;</c> element is the most generic block-level element. This tag is used for defining a section of your document and also we can group large sections of HTML elements together. This element is best to attach a CSS to a section of a web page.</p> <pre>&lt;div align=&quot;center&quot; title=&quot;This is a tooltip&quot;&gt;</pre> This is a division block. <pre>&lt;div&gt;</pre> <tit>&lt;span&gt; element</tit> <p>The HTML <code>&lt;div&gt;</code> element is the most generic in-line element. This element is best to attach a CSS to a section of a web page. </p> <p>The difference between the <c>&lt;div&gt;</c> tag and the <code>&lt;span&gt;</c> tag is that the <code>&lt;div&gt;</c> tag is used with block-level elements while the <c>&lt;span&gt;</c> tag is used with <i>in-line</i> elements.</p> <p>The <c>&lt;span&gt;</c> tag has all the properties of the <c>&lt;div&gt;</c> tag except the align attribute as it is an in-line element. </p> <pre>&lt;span align=&quot;center&quot; title=&quot;http://www.QuoteFellas.com&gt; The best Quote website. &lt;/span&gt;</pre> <tit>&lt;pre&gt; element</tit> <p>The HTML <code>&lt;pre&gt;</code> Element (or HTML Preformatted Text) represents preformatted text. Text within this element is typically displayed exactly as it is laid out in the file. Whitespaces inside this element are displayed as typed.</p> <p>The inserted HTML tags into a block of text will not be interpreted by the browser. Use <b>&amp;lt;</b> for the < character and <b>&amp;gt;</b> for the > character.</p> <tit>Phrase element</tit> <p>The phrase elements allow you to add a specific meaning to a section of the document. These phrase are rendered differently in different browsers.</p> <table> <tr><th>Elements</th><th>Description</th></tr><tr><td><c>&lt;em&gt;..&lt;/em&gt;</c></td><td>Rendered in the italic text style</td></tr><tr><td><c>&lt;strong&gt;..&lt;strong&gt;</c></td><td>Rendered in the bold text style.</td></tr><tr><td><c>&lt;dfn&gt;..&lt;/dfn&gt;</c></td><td>To emphasize the first appearance of a concept.</td></tr><tr><td><c>&lt;code&gt;..&lt;/code&gt;</c></td><td>To insert a fragment of computer program code; rendered in the monospace font style.</td></tr><tr><td><c>&lt;samp&gt;..&lt;/samp&gt;</c></td><td>To insert the output of an application; rendered in the monospace font style.</td></tr><tr><td><c>&lt;kbd&gt;..&lt;/kbd&gt;</c></td><td>To insert a computer command that the user should type; rendered in the monospace font style.</td></tr><tr><td><c>&lt;var&gt;.. &lt;/var&gt;</c></td><td>To insert variables of a computer program; renderd in the italic font style.</td></tr><tr><td><c>&lt;cite&gt;..&lt;/cite&gt;</c></td><td>To insert a reference to its source document; renderd in the italic text style.</td></tr></table> Logical Style elements 1 1 4/1/2014 5:57:31 PM 12/16/2018 9:36:54 AM Edit | Details | Delete
1 The <p> Paragraphs The <p> Paragraphs The <code>&lt;p&gt;</code> tag defines a paragraph. Using this tag, we can split long text. A blank line above and below the text of the paragraph. <br /><br /><t1>Syntax</t1><br /><pre>&lt;p align=&quot;center&quot;&gt;..&lt;/p&gt;</pre><br /><br /><note>- The <code>&lt;p&gt;</code> element can have an attribute called align, which is used to define the the alignment for the text of the paragraph.<br /><br />- The align attribute can have the values "<b>left</b>", "<b>center</b>", "<b>right</b>" or "<b>justify</b>". The <i>default</i> value is "<b>left</b>"</note> html paragraph element 1 1 4/1/2014 6:01:29 PM 2/1/2017 8:21:59 AM Edit | Details | Delete
1 The <h1><h2>..<h6> Headings The <h1><h2>..<h6> Headings HTML allows you to add headings into a web page. Headings may look different on each browser. <br /><br />There are six headings tag.<br /><pre>&lt;h1&gt;..&lt;/h1&gt;<br />&lt;h2&gt;..&lt;/h2&gt;<br />&lt;h3&gt;..&lt;/h3&gt;<br />&lt;h4&gt;..&lt;/h4&gt;<br />&lt;h5&gt;..&lt;/h5&gt;<br />&lt;h6&gt;..&lt;/h6&gt;</pre> <br /><t1>Example</t1><br /><pre>&lt;h3 align=&quot;left&quot;&gt;Heading3&lt;/h3&gt;</pre><br /><br /><note>-All headings should have the ending tag<br />-All headings are rendered on a new line leaving an extra space after the previous block.<br />-The align attribute can have the values "<b>left</b>", "<b>center</b>", "<b>right</b>" or "<b>justify</b>". The default value is "<b>left</b>"</note> html headings element 3 1 4/1/2014 6:05:16 PM 2/1/2017 8:27:25 AM Edit | Details | Delete
1 The<blockquote> Element The <blockquote> Element The <code>&lt;blockquote&gt;</code>..<code>&lt;/blockquote&gt;</code> element is designed for inserting quotations into a web page.<br /><br />The block-quote element adds extra white spaces before and after the element and on the left and on the right of the element. html blockquote Element 4 1 4/1/2014 6:08:48 PM 11/10/2014 12:38:28 PM Edit | Details | Delete
1 The <q> element The <q> Element The <code>&lt;q&gt;</code>..<code>&lt;/q&gt;</code> element is designed for in-line quotation. While rendering, the <q> element does'nt start on the new line html in-line quote element 5 1 4/1/2014 6:10:38 PM 11/10/2014 12:38:28 PM Edit | Details | Delete
1 The <hr> Horizontal Rules element The <hr> Horizontal Rules element The HTML <code>&lt;hr&gt;</code> tag is used for creating a horizontal line. This is also called Horizontal Rule in HTML which makes distinction between different sections of a web page.<br /><snpt>&lt;hr&gt;<br />&lt;hr align=&quot;center&quot; width=&quot;50%&quot; size=&quot;5&quot; noshade color=&quot;red&quot;&gt;</snpt><br /><tit>Attributes:</tit><br /><table><br /><tr><th>Attributes</th><th>Description</th></tr><tr><td><c>align</c></td><td>"<c>left</c>" | " <c>center</c>" | "<c>right</c>"</td></tr><tr><td><c>width</c></td><td>A positive integer (or) a positive integer between 1 and 100 followed by %; default is "100%"</td></tr><tr><td><c>size</c></td><td>The thickness of the rule in pixel; the default is 2</td></tr><tr><td><c>noshade</c></td><td> If present, the rule is flat rule. else a 3D rule with a shadow.</td></tr><tr><td><c>color</c></td><td>The default color is "black".</td></tr></table><br /><note>*A horizontal rule tag <code>&lt;hr&gt;</code> does'nt require an ending tag.<br />*A horizontal rule can have more than one attributes.</note><br /> html horizontal rules element 6 1 4/1/2014 6:14:50 PM 1/31/2017 12:36:37 PM Edit | Details | Delete
1 The <center> element The <center> element The <c>center</c> element is used to center content (e.g. text, images, horizontal rules)<br /><br /><snpt>&lt;html&gt;<br />&lt;head&gt;&lt;/head&gt;<br />&lt;body&gt;<br /> Normal horizontal rule<br /> &lt;hr width=&quot;90%&quot;&gt;<br /><br /> center aligned horizontal rule <br /> &lt;center&gt;<br /> &lt;hr width=&quot;50%&quot;&gt;<br /> &lt;/center&gt;<br />&lt;body&gt;<br />&lt;html&gt;</snpt><br /><br /><outi><html><head></head><body>Normal horizontal rule<hr width="50%">center aligned horizontal rule<center><hr width="50%"></center><body><html></outi> html center element 7 1 4/1/2014 6:17:21 PM 2/1/2017 8:29:09 AM Edit | Details | Delete
1 The <div> element The <div> element There are two kind of elements in HTML.<br /><br /><table><br /><tr><th>Element Types</th><th>Description</th></tr><tr><td><i>Block level elements</i></td><td>Rendered starting on a new line (e.g. <c>&lt;p&gt;</c> or <c>&lt;hr&gt;</c>)</td></tr><tr><td>In-line elements</td><td>Rendered on same line (e.g. <c>&lt;b&gt;</c> or <c>&lt;q&gt;</c>)</td></tr></table><br /><br />The HTML <c>&lt;div&gt;</c> element is the most generic block-level element. This tag is used for defining a section of your document and also we can group large sections of HTML elements together. This element is best to attach a CSS to a section of a web page.<br /><br /><pre>&lt;div align=&quot;center&quot; title=&quot;This is a tooltip&quot;&gt;</pre><br />This is a division block. <br /><pre>&lt;div&gt;</pre> html div element 8 1 4/1/2014 6:22:41 PM 2/1/2017 8:33:55 AM Edit | Details | Delete
1 The <span> element The <span> element The HTML <code>&lt;div&gt;</code> element is the most generic in-line element. This element is best to attach a CSS to a section of a web page. <br /><br />The difference between the <c>&lt;div&gt;</c> tag and the <code>&lt;span&gt;</c> tag is that the <code>&lt;div&gt;</c> tag is used with block-level elements while the <br /><br /><c>&lt;span&gt;</c> tag is used with <i>in-line</i> elements.<br /><br />The <c>&lt;span&gt;</c> tag has all the properties of the <c>&lt;div&gt;</c> tag except the align attribute as it is an in-line element. <br /><br /><pre>&lt;span align=&quot;center&quot; title=&quot;http://www.QuoteFellas.com&gt;<br />The best Quote website.<br />&lt;/span&gt;</pre> html span element 9 1 4/1/2014 6:24:39 PM 2/1/2017 8:35:49 AM Edit | Details | Delete
1 The <pre> element The <pre> element The HTML <code>&lt;pre&gt;</code> Element (or HTML Preformatted Text) represents preformatted text. Text within this element is typically displayed exactly as it is laid out in the file. Whitespaces inside this element are displayed as typed.<br /><br />The inserted HTML tags into a block of text will not be interpreted by the browser. Use <b>&amp;lt;</b> for the < character and <b>&amp;gt;</b> for the > character. html pre element or html preformatted text element 10 1 4/1/2014 6:27:24 PM 11/10/2014 12:38:28 PM Edit | Details | Delete
1 The Phrase element The Phrase element The phrase elements allow you to add a specific meaning to a section of the document. These phrase are rendered differently in different browsers.<br /><br /><table><br /><tr><th>Elements</th><th>Description</th></tr><tr><td><c>&lt;em&gt;..&lt;/em&gt;</c></td><td>Rendered in the italic text style</td></tr><tr><td><c>&lt;strong&gt;..&lt;strong&gt;</c></td><td>Rendered in the bold text style.</td></tr><tr><td><c>&lt;dfn&gt;..&lt;/dfn&gt;</c></td><td>To emphasize the first appearance of a concept.</td></tr><tr><td><c>&lt;code&gt;..&lt;/code&gt;</c></td><td>To insert a fragment of computer program code; rendered in the monospace font style.</td></tr><tr><td><c>&lt;samp&gt;..&lt;/samp&gt;</c></td><td>To insert the output of an application; rendered in the monospace font style.</td></tr><tr><td><c>&lt;kbd&gt;..&lt;/kbd&gt;</c></td><td>To insert a computer command that the user should type; rendered in the monospace font style.</td></tr><tr><td><c>&lt;var&gt;.. &lt;/var&gt;</c></td><td>To insert variables of a computer program; renderd in the italic font style.</td></tr><tr><td><c>&lt;cite&gt;..&lt;/cite&gt;</c></td><td>To insert a reference to its source document; renderd in the italic text style.</td></tr></table><br /><br /> html Phrase elements 10 1 4/1/2014 6:31:36 PM 2/1/2017 9:25:40 AM Edit | Details | Delete
1 Lists Html Lists Html list is used to display items in a sequence. They appear as bulleted lines of text in the browsers. There are several kinds of lists. - Unordered List - Ordered List - Definition Lists - Menu Lists - Directory Lists <tit>Unordered List</tit> Unordered list has each item with the same leading symbol. The items in the list will be rendered in the same order that they are entered. The default bullet symbol will be displayed as dark circle. The unordered list is created using <code>&lt;ul&gt;..&lt;/ul&gt;</code> block and the item in the list use the <code>&lt;li&gt;</code> element. <code>&lt;ul&gt;</code> Header of unordered list <code>&lt;li&gt;</code> 1st list item <code>&lt;li&gt;</code> 2nd list item <code>&lt;li&gt;</code> 3rd list item <code>&lt;ul&gt;</code> The each item in the list is displayed as bullet symbol. The symbol can be - a dark circle - a circle - a square <t1>type attribute</t1> We can change the symbol appearance using the <b>type</b> <i>attribute</i> The <b>type</b> <i>attribute </i>can have the values - disc - circle - square <snpt>&lt;html&gt; &lt;head&gt;&lt;/head&gt; &lt;body&gt; &lt;ul type=&quot;square&quot;&gt; Header of unordered list &lt;li&gt; 1st list item &lt;li&gt; 2nd list item &lt;li&gt; 3rd list item &lt;ul&gt; &lt;body&gt; &lt;html&gt;</snpt> <outi><html><head></head><body> <ul type="square"> Header of unordered list <li> 1st list item <li> 2nd list item <li> 3rd list item <ul><body><html></outi> <tit>Empty list</tit> If there is no any list item, it is called as Empty list. The header text will be rendered indented. This way we can created indented text format as well as we can also use <code>&lt;blockquote&gt;</code> element. <snpt>&lt;html&gt; &lt;head&gt; &lt;/head&gt;&lt;body&gt; &lt;ul type=&quot;square&quot;&gt; Header of unordered list &lt;br&gt; 1st list item &lt;br&gt; 2nd list item &lt;br&gt; 3rd list item &lt;ul&gt; &lt;body&gt; &lt;html&gt;</snpt> <outi><html><head></head><body> <ul type="square"> Header of unordered list <br> 1st list item <br> 2nd list item <br> 3rd list item <ul><body><html></outi> <tit>Nested Lists</tit> List can be nested one inside the other. For creating a nested list use the second list as the item of the first(outer) list <snpt>&lt;html&gt; &lt;head&gt;&lt;/head&gt; &lt;body&gt; &lt;ul type=&quot;square&quot;&gt; Header of unordered list &lt;li&gt; &lt;ul&gt; Header of unordered list &lt;li&gt; Inner list 1st item &lt;li&gt; Inner list 2nd item &lt;li&gt; Inner list 3rd list item &lt;ul&gt; &lt;li&gt; 2nd list item &lt;li&gt; 3rd list item &lt;ul&gt; &lt;body&gt; &lt;html&gt;</snpt> <outi><html><head></head><body> <ul type="square"> Header of unordered list <li> <ul> Header of unordered list <li> Inner list 1st item <li> Inner list 2nd item <li> Inner list 3rd list item <ul> <li> 2nd list item <li> 3rd list item <ul><body><html></outi> <note>The inner most list will be double indented.The inner most list items are rendered with different item</note> <tit>Ordered List</tit> Unordered list has each item has a sequential leading symbol. The browser assigns this sequence automatically. The Ordered list is created using <code>&lt;ol&gt;..&lt;/ol&gt;</code> block and the item in the list use the <code>&lt;li&gt;</code> element. The browser inserts an extra line before the list and indents the list a few spaces to the right. <code>&lt;ol&gt;</code> Header of unordered list <code>&lt;li&gt;</code> 1st list item <code>&lt;li&gt;</code> 2nd list item <code>&lt;li&gt;</code> 3rd list item <code>&lt;ol&gt;</code> The each item in the list is displayed as leading symbol. The symbol can be - 1 (Arabic numerals: 1, 2,3..) - a (Lowercase letters: a, b, c.. etc.) - A (Uppercase letters: A, B, C.. etc.) - i (Lowercase Roman Numerals: i, ii, iii.. etc.) - I (Uppercase Roman Numerals: I, II, III.. etc.) <t1>Attributes of Ordered List</t1> The symbol appearance can be changed using the <b>type</b> <i>attribute</i> and <b>start</b> <i>attribute</i>. <t1>type attribute</t1> Using type attribute <snpt>&lt;html&gt; &lt;head&gt;&lt;/head&gt; &lt;body&gt; &lt;ol type=&quot;I&quot;&gt; Header of unordered list &lt;li&gt; 1st list item &lt;li&gt; 2nd list item &lt;li&gt; 3rd list item &lt;ol&gt; &lt;body&gt; &lt;html&gt;</snpt> <outi><html><head></head><body><ol type="I"> Header of unordered list<li> 1st list item<li> 2nd list item<li> 3rd list item<ol><body><html></outi> <t1>start attribute</t1> Using start attribute The first symbol in the sequence is 1, a, A, i, I. To change the default setting of the sequence the start attribute is used. If the start element attribute us assigned the value 5 and the type attribute value as A, the sequence will start from "E". <snpt>&lt;html&gt; &lt;head&gt;&lt;/head&gt; &lt;body&gt; &lt;ol type=&quot;I&quot; start=&quot;5&quot;&gt; Header of unordered list &lt;li&gt; 1st list item &lt;li&gt; 2nd list item &lt;li&gt; 3rd list item &lt;ol&gt; &lt;body&gt; &lt;html&gt;</snpt> <outi><html><head></head><body><ol type="I" start="5"> Header of unordered list<li> 1st list item<li> 2nd list item<li> 3rd list item<ol><body><html></outi> <tit>Definition Lists</tit> A definition list is a sequence of terms and descriptions of these terms. The definition list are created using the <code>&lt;dl&gt;..&lt;/dl&gt;</code> block. Inside <code>&lt;dl&gt;</code> element the following elements are inserted. <code>&lt;dt&gt;</code> tag - Definition term <code>&lt;dd&gt;</code> tag - Definition description Definition lists are rendered differently on different browsers. All terms and descriptions are rendered on a new line. More than one terms and more than one description are included in the definition list. <snpt>&lt;html&gt; &lt;head&gt;&lt;/head&gt; &lt;body&gt; &lt;dl&gt; List of Browsers/ Products &lt;dt&gt; Firefox &lt;dd&gt; A product of Mozilla &lt;dt&gt; Chrome &lt;dt&gt; Youtube &lt;dd&gt; A product of Google &lt;dt&gt; Internet Explorer &lt;dd&gt; A product of Microsoft &lt;dl&gt; &lt;body&gt; &lt;html&gt;</snpt> <outi><html><head></head><body><dl> List of Browsers/ Products<dt> Firefox<dd> A product of Mozilla<dt> Chrome<dt> Youtube<dd> A product of Google<dt> Internet Explorer<dd> A product of Microsoft<dl><body><html></outi> <t1>Attributes of definition list</t1> <b>compact</b> - A definitoin list can be rendered compactly if the compact(remove spaces) attribute is added to <code>&lt;dl&gt;</code> element. When the compact attribute is added the description starts on the same line as the associated term. <snpt>&lt;html&gt; &lt;head&gt;&lt;/head&gt; &lt;body&gt; &lt;dl compact&gt; List of Browsers/ Products &lt;dt&gt; Firefox &lt;dd&gt; A product of Mozilla &lt;dt&gt; Chrome &lt;dt&gt; Youtube &lt;dd&gt; A product of Google &lt;dt&gt; Internet Explorer &lt;dd&gt; A product of Microsoft &lt;dl&gt; &lt;body&gt;&lt;html&gt;</snpt> <outi><html><head></head><body><dl compact> List of Browsers/ Products<dt> Firefox<dd> A product of Mozilla<dt> Chrome<dt> Youtube<dd> A product of Google<dt> Internet Explorer<dd> A product of Microsoft<dl><body><html></outi> <tit>Directory List</tit> The <code>&lt;dir&gt;</code> list is similar to unordered list. The <code>&lt;dir&gt;</code> list contains element items defined by <code>&lt;li&gt;</code> items. <code>&lt;dir&gt;</code> Header of unordered list <code>&lt;li&gt;</code> 1st list item <code>&lt;li&gt;</code> 2nd list item <code>&lt;li&gt;</code> 3rd list item <code>&lt;dir&gt;</code> <tit>Menu List</tit> The <code>&lt;menu&gt;</code> list is similar to unordered list. The <code>&lt;menu&gt;</code> list contains element items defined by <code>&lt;li&gt;</code> items. <code>&lt;menu&gt;</code> Header of unordered list <code>&lt;li&gt;</code> 1st list item <code>&lt;li&gt;</code> 2nd list item <code>&lt;li&gt;</code> 3rd list item <code>&lt;menu&gt;</code> Lists 1 1 4/4/2014 5:33:31 PM 12/16/2018 9:38:04 AM Edit | Details | Delete
1 Unordered List Unordered List Unordered list has each item with the same leading symbol. The items in the list will be rendered in the same order that they are entered.<br />The default bullet symbol will be displayed as dark circle. <br /><br />The unordered list is created using <code>&lt;ul&gt;..&lt;/ul&gt;</code> block and the item in the list use the <code>&lt;li&gt;</code> element.<br /><br /><code>&lt;ul&gt;</code> Header of unordered list<br /><code>&lt;li&gt;</code> 1st list item<br /><code>&lt;li&gt;</code> 2nd list item<br /><code>&lt;li&gt;</code> 3rd list item<br /><code>&lt;ul&gt;</code><br /><br />The each item in the list is displayed as bullet symbol. The symbol can be<br /><br />- a dark circle<br />- a circle<br />- a square<br /><br /><tit>type attribute</tit><br />We can change the symbol appearance using the <b>type</b> <i>attribute</i><br /><br />The <b>type</b> <i>attribute </i>can have the values<br /><br />- disc<br />- circle<br />- square<br /><br /><snpt>&lt;html&gt;<br />&lt;head&gt;&lt;/head&gt;<br />&lt;body&gt;<br /> &lt;ul type=&quot;square&quot;&gt; Header of unordered list<br /> &lt;li&gt; 1st list item<br /> &lt;li&gt; 2nd list item<br /> &lt;li&gt; 3rd list item<br /> &lt;ul&gt;<br />&lt;body&gt;<br />&lt;html&gt;</snpt><br /><br /><outi><html><head></head><body> <ul type="square"> Header of unordered list <li> 1st list item <li> 2nd list item <li> 3rd list item <ul><body><html></outi> Html Unordered List 1 1 4/4/2014 6:32:06 PM 11/10/2014 12:36:46 PM Edit | Details | Delete
1 Empty list Empty list If there is no any list item, it is called as Empty list. The header text will be rendered indented. This way we can created indented text format as well as we can also use <code>&lt;blockquote&gt;</code> element.<br /><br /><snpt>&lt;html&gt;<br />&lt;head&gt;<br />&lt;/head&gt;&lt;body&gt;<br /> &lt;ul type=&quot;square&quot;&gt; Header of unordered list<br /> &lt;br&gt; 1st list item<br /> &lt;br&gt; 2nd list item<br /> &lt;br&gt; 3rd list item<br /> &lt;ul&gt;<br />&lt;body&gt;<br />&lt;html&gt;</snpt><br /><br /><outi><html><head></head><body> <ul type="square"> Header of unordered list <br> 1st list item <br> 2nd list item <br> 3rd list item <ul><body><html></outi> Html Empty list 3 1 4/4/2014 6:34:27 PM 11/10/2014 12:36:46 PM Edit | Details | Delete
1 Nested Lists Nested Lists List can be nested one inside the other. For creating a nested list use the second list as the item of the first(outer) list<br /><br /><snpt>&lt;html&gt;<br />&lt;head&gt;&lt;/head&gt;<br />&lt;body&gt;<br /> &lt;ul type=&quot;square&quot;&gt; Header of unordered list<br /> &lt;li&gt;<br /> &lt;ul&gt; Header of unordered list<br /> &lt;li&gt; Inner list 1st item<br /> &lt;li&gt; Inner list 2nd item<br /> &lt;li&gt; Inner list 3rd list item<br /> &lt;ul&gt;<br /> &lt;li&gt; 2nd list item<br /> &lt;li&gt; 3rd list item<br /> &lt;ul&gt;<br />&lt;body&gt;<br />&lt;html&gt;</snpt><br /><br /><br /><outi><html><head></head><body> <ul type="square"> Header of unordered list <li> <ul> Header of unordered list <li> Inner list 1st item <li> Inner list 2nd item <li> Inner list 3rd list item <ul> <li> 2nd list item <li> 3rd list item <ul><body><html></outi><br /><br /><note>The inner most list will be double indented.The inner most list items are rendered with different item</note><br /><br /> Html Nested Lists 4 1 4/4/2014 6:37:36 PM 11/10/2014 12:36:46 PM Edit | Details | Delete
1 Ordered List Ordered List Unordered list has each item has a sequential leading symbol. The browser assigns this sequence automatically.<br /><br />The Ordered list is created using <code>&lt;ol&gt;..&lt;/ol&gt;</code> block and the item in the list use the <code>&lt;li&gt;</code> element. The browser inserts an extra line before the list and indents the list a few spaces to the right.<br /><br /><code>&lt;ol&gt;</code> Header of unordered list<br /><code>&lt;li&gt;</code> 1st list item<br /><code>&lt;li&gt;</code> 2nd list item<br /><code>&lt;li&gt;</code> 3rd list item<br /><code>&lt;ol&gt;</code><br /><br />The each item in the list is displayed as leading symbol. The symbol can be <br />- 1 (Arabic numerals: 1, 2,3..)<br />- a (Lowercase letters: a, b, c.. etc.)<br />- A (Uppercase letters: A, B, C.. etc.)<br />- i (Lowercase Roman Numerals: i, ii, iii.. etc.)<br />- I (Uppercase Roman Numerals: I, II, III.. etc.)<br /><br /><tit>Attributes of Ordered List</tit><br />The symbol appearance can be changed using the <b>type</b> <i>attribute</i> and <b>start</b> <i>attribute</i>.<br /><br /><tit>type attribute</tit><br />Using type attribute<br /><br /><snpt>&lt;html&gt;<br />&lt;head&gt;&lt;/head&gt;<br />&lt;body&gt;<br />&lt;ol type=&quot;I&quot;&gt; Header of unordered list<br />&lt;li&gt; 1st list item<br />&lt;li&gt; 2nd list item<br />&lt;li&gt; 3rd list item<br />&lt;ol&gt;<br />&lt;body&gt;<br />&lt;html&gt;</snpt><br /><br /><outi><html><head></head><body><ol type="I"> Header of unordered list<li> 1st list item<li> 2nd list item<li> 3rd list item<ol><body><html></outi><br /><br /><tit>start attribute</tit><br />Using start attribute<br />The first symbol in the sequence is 1, a, A, i, I. To change the default setting of the sequence the start attribute is used. If the start element attribute us assigned the value 5 and the type attribute value as A, the sequence will start from "E".<br /><br /><snpt>&lt;html&gt;<br />&lt;head&gt;&lt;/head&gt;<br />&lt;body&gt;<br />&lt;ol type=&quot;I&quot; start=&quot;5&quot;&gt; Header of unordered list<br />&lt;li&gt; 1st list item<br />&lt;li&gt; 2nd list item<br />&lt;li&gt; 3rd list item<br />&lt;ol&gt;<br />&lt;body&gt;<br />&lt;html&gt;</snpt><br /><outi><html><head></head><body><ol type="I" start="5"> Header of unordered list<li> 1st list item<li> 2nd list item<li> 3rd list item<ol><body><html></outi><br /> Html Ordered List 5 1 4/4/2014 6:50:44 PM 11/10/2014 12:36:46 PM Edit | Details | Delete
1 Definition Lists Definition Lists A definition list is a sequence of terms and descriptions of these terms. The definition list are created using the <code>&lt;dl&gt;..&lt;/dl&gt;</code> block. Inside <code>&lt;dl&gt;</code> element the following elements are inserted.<br /><br /><code>&lt;dt&gt;</code> tag - Definition term<br /><code>&lt;dd&gt;</code> tag - Definition description<br /><br />Definition lists are rendered differently on different browsers. All terms and descriptions are rendered on a new line. More than one terms and more than one description are included in the definition list.<br /><br /><snpt>&lt;html&gt;<br />&lt;head&gt;&lt;/head&gt;<br />&lt;body&gt;<br />&lt;dl&gt; List of Browsers/ Products<br />&lt;dt&gt; Firefox<br />&lt;dd&gt; A product of Mozilla<br />&lt;dt&gt; Chrome<br />&lt;dt&gt; Youtube<br />&lt;dd&gt; A product of Google<br />&lt;dt&gt; Internet Explorer<br />&lt;dd&gt; A product of Microsoft<br />&lt;dl&gt;<br />&lt;body&gt;<br />&lt;html&gt;</snpt><br /><outi><html><head></head><body><dl> List of Browsers/ Products<dt> Firefox<dd> A product of Mozilla<dt> Chrome<dt> Youtube<dd> A product of Google<dt> Internet Explorer<dd> A product of Microsoft<dl><body><html></outi><br /><br /><tit>Attributes of definition list</tit><br /><br /><b>compact</b> - A definitoin list can be rendered compactly if the compact(remove spaces) attribute is added to <code>&lt;dl&gt;</code> element. When the compact attribute is added the description starts on the same line as the associated term.<br /><br /><snpt>&lt;html&gt;<br />&lt;head&gt;&lt;/head&gt;<br />&lt;body&gt;<br />&lt;dl compact&gt; List of Browsers/ Products<br />&lt;dt&gt; Firefox<br />&lt;dd&gt; A product of Mozilla<br />&lt;dt&gt; Chrome<br />&lt;dt&gt; Youtube<br />&lt;dd&gt; A product of Google<br />&lt;dt&gt; Internet Explorer<br />&lt;dd&gt; A product of Microsoft<br />&lt;dl&gt;<br />&lt;body&gt;&lt;html&gt;</snpt><br /><br /><outi><html><head></head><body><dl compact> List of Browsers/ Products<dt> Firefox<dd> A product of Mozilla<dt> Chrome<dt> Youtube<dd> A product of Google<dt> Internet Explorer<dd> A product of Microsoft<dl><body><html></outi> Html Definition Lists 7 1 4/4/2014 6:58:42 PM 11/10/2014 12:36:46 PM Edit | Details | Delete
1 <dir> list <dir> list The <code>&lt;dir&gt;</code> list is similar to unordered list. The <code>&lt;dir&gt;</code> list contains element items defined by <code>&lt;li&gt;</code> items.<br /><br /><code>&lt;dir&gt;</code> Header of unordered list<br /><code>&lt;li&gt;</code> 1st list item<br /><code>&lt;li&gt;</code> 2nd list item<br /><code>&lt;li&gt;</code> 3rd list item<br /><code>&lt;dir&gt;</code> Html Directory List 8 1 4/4/2014 7:02:06 PM 11/10/2014 12:36:46 PM Edit | Details | Delete
1 <menu> list <menu> list The <code>&lt;menu&gt;</code> list is similar to unordered list. The <code>&lt;menu&gt;</code> list contains element items defined by <code>&lt;li&gt;</code> items.<br /><br /><code>&lt;menu&gt;</code> Header of unordered list<br /><code>&lt;li&gt;</code> 1st list item<br /><code>&lt;li&gt;</code> 2nd list item<br /><code>&lt;li&gt;</code> 3rd list item<br /><code>&lt;menu&gt;</code> Html Menu List 8 1 4/4/2014 7:05:49 PM 11/10/2014 12:36:46 PM Edit | Details | Delete
1 Images Html Images <p>The webpages supports multimedia which allows you to insert images, sounds animations, movies and other mutimedia content into the webpage.</p> Supported Images <ul> <li>gif</li><li>jpeg</li><li>png</li><li>tiff</li><li>bmp(Internet Explorer)</li></ul> <tit>&lt;img&gt; element</tit> <p>The <code>&lt;img&gt;</code> element is an inline element which means it can be inserted anywhere. (e.g. inside text block, inside a table cell, inside list item etc.,) The <img> element doesn't require an ending element. It is an empty element and is re-placed by the <code>&lt;img/&gt;</code> tag in XHTML. The <code>&lt;img&gt;</code> element requires an src attribute to define the name and the location of the image file. </p> <snpt>&lt;html&gt; &lt;head&gt;&lt;/head&gt; &lt;body&gt; This text is followed by an image &lt;img src=&quot;../image.jpg&quot;&gt; Text after the image. &lt;/body&gt; &lt;/html&gt;</snpt> <outi><html><head></head><body>This text is followed by an image<img src="../image.jpg">Text after the image.</body></html></outi> <tit>Html absolute URL</tit> <p>URL stands for Uniform Resource Locator. The URL is a standard to identify the location of the resources over the internet. The URL can be absolute or relative. </p> e.g URL <eg>http://quotefellas.com/quotes/2013/04/94_650-before-you-start-anything-learn-how-to-finish-it.jpg</eg> <b>Internet Protocol</b> : http:// <b>Computer Name or IP</b> : http://quotefellas.com/ <b>Path</b> : quotes/2013/04/ <b>File Name</b> : 94_650-before-you-start-anything-learn-how-to-finish-it.jpg <snpt>&lt;html&gt; &lt;head&gt;&lt;/head&gt; &lt;body&gt; The image is the following &lt;img src=&quot;http://quotefellas.com/quotes/2013/04/94_650-before-you-start-anything-learn-how-to-finish-it.jpg&quot;&gt; Text after the image. &lt;/body&gt; &lt;/html&gt;</snpt> <outi><html><head></head><body>The image is the following<img src="http://quotefellas.com/quotes/2013/04/94_650-before-you-start-anything-learn-how-to-finish-it.jpg">Text after the image.</body></html></outi> <p>The HTML file and the image file can be on the same computer or on the different computers connected to the internet. </p> <tit>Html relative URL</tit> <p>The relative URL identifies the location of the image by describing a path relative to the current directory where the HTML file is located.</p> ../ - denotes the parent directory / - denotes the root directory e.g. /logo.jpg ../../logo.jpg <tit>The image border attribute</tit> <p>The browser will render an image as it is. To add the black border to the image, add the border attribute of the &lt;img&gt; element.</p> <snpt> &lt;html&gt; &lt;head&gt;&lt;/head&gt; &lt;body&gt; No Border &lt;img src=&quot;logo.jpg&quot;&gt; Image with border &lt;img src=&quot;logo.jpg&quot; border=&quot;2&quot;&gt; &lt;/body&gt; &lt;/html&gt;</snpt> <outi><html><head></head><body>No Border<img src="logo.jpg">Image with border<img src="logo.jpg" border="2"></body></html></outi> <tit>Image width and height attribute</tit> <p>By default the image is displayed with the original size on the browser. To scale an image to a different width and height, the width and height attribute of the <code>&lt;img&gt;</code> element is used. </p> <ul> <li>* Positive integers (in pixels) </li><li>* Percentages (percentage of the parent block) </li><ul> <snpt>&lt;html&gt; &lt;head&gt;&lt;/head&gt; &lt;body&gt; No Border &lt;img src=&quot;logo.jpg&quot; width=&quot;200&quot;&gt; Image with border &lt;img src=&quot;logo.jpg&quot; width=&quot;300&quot; height=&quot;200&quot;&gt; &lt;/body&gt; &lt;/html&gt;</snpt> <outi><html><head></head><body>No Border<img src="logo.jpg" width="200">Image with border<img src="logo.jpg" width="300" height="200"></body></html></outi> <note>If the width and height is changed from the original proportions, the image will be rendered disproportionately an will be distorted.</note> <tit>Image vertical alignment</tit> <p>The alignment between an image relative to other inline elements of a web page. </p> <table> <tr><th>Properties</th><th>Description</th></tr><tr><td><c>top</c></td><td></td></tr><tr><td><c>texttop </c>(only netscape)</td><td></td></tr><tr><td><c>middle</c></td><td></td></tr><tr><td><c>absmiddle</c></td><td></td></tr><tr><td><c>center</c></td><td></td></tr><tr><td><c>bottom</c>(default value)</td><td></td></tr><tr><td><c>baseline</c></td><td></td></tr><tr><td><c>absbottom</c></td><td></td></tr></table> <tit>Image horizontal alignment</tit> The horizontal alignment of an image relative to the parent block, use the align attribute with these values. left right center <tit>white space around an image</tit> The size of the white space between an image and the other content of the web page can be defined using the following two attributes. hspace vspace The possible values of these attributes are - Positive integers, indicating the size of the white space in pixels. - Percentage of the size of the parent. <tit>clear attribute of the &lt;br&gt; element</tit> To clear the left side or the side of an image of text, use a <code>&lt;br&gt;</code> element having the clear attributes set to the following. all left none right Insert <code>&lt;br clear=&quot;right&quot;&gt;</code> before the first appearance of the sentence "Text after the image" . <tit>alt Attribute</tit> The alt attribute allows to attach a description to an image. The value of the alt attribute can be any double quoted string of less than 1024 characters. Its not required but it is strongly recommended to add the alt attribute to the <code>&lt;img&gt;</code> element. For descriptions with more than 1024 characters, use the longdesc attribute of the <code>&lt;img&gt;</code> element. <eg>alt="Quote Fellas - A website to get world famous quotes"</eg> <note>- If the browser cannot download an image or set to not download the images, the browser will render the value of the alt attribute instead of the image. - A tooltip will appear containing the value of the alt attribute if we hover the mouse over an image - The value of the alt attribute is important for tool to aid vision-impaired people.</note> <tit>lowsrc attribute</tit> The lowsrc attribute is used to attach a second URL to an <code>&lt;img&gt;</code> element. The URL identifies an image similar to the one indicated by the src attribute but in low-resolution format. <note>- The image indicated by src and lowsrc can be different images. - The low-resolution image (indicated by the lowsrc attribute) will be downloaded first (useful for low-speed connections) and later the actual image (sr attribute) will be downloaded. - It is recommended to use the same size for both images to avoid flicking of image during download of high resolution image.</note> <tit>The background image</tit> To attach a background image to a web page, use the background attribute of the <code>&lt;body&gt;</code> element. The value of the background attribute is the URL that indicates the image file. <note> - The image is tiled horizontally and vertically to fill the entire page. - Internet explorer accepts an additional attribute called bgproperties, which is used to set "fixed" so the background image will stay in the same position when the user scrolls the page content using the navigation tools (vertical navigation bars or Up/ Down keys)</note> <tit>Images to create custom made lists</tit> Images can be used to create custom made lists in which the leading symbols of items are images. It is created without using <code>&lt;li&gt;</code> element, rather it is simply an images accompanied by text and formatted with <code>&lt;br&gt;</code> element. Html Images 1 1 4/5/2014 5:59:50 PM 12/16/2018 9:40:02 AM Edit | Details | Delete
1 <img> element <img> element The <code>&lt;img&gt;</code> element is an inline element which means it can be inserted anywhere. (e.g. inside text block, inside a table cell, inside list item etc.,)<br />The <img> element doesn't require an ending element. It is an empty element and is re-placed by the <code>&lt;img/&gt;</code> tag in XHTML<br />The <code>&lt;img&gt;</code> element requires an src attribute to define the name and the location of the image file. <br /><br /><snpt>&lt;html&gt;<br />&lt;head&gt;&lt;/head&gt;<br />&lt;body&gt;<br />This text is followed by an image<br />&lt;img src=&quot;../image.jpg&quot;&gt;<br />Text after the image.<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt><br /><br /><outi><html><head></head><body>This text is followed by an image<img src="../image.jpg">Text after the image.</body></html></outi> Html img Element 2 1 4/5/2014 6:13:53 PM 11/10/2014 12:33:43 PM Edit | Details | Delete
1 Html absolute URL Html absolute URL URL stands for Uniform Resource Locator. The URL is a standard to identify the location of the resources over the internet. The URL can be absolute or relative.<br /><br />e.g URL<br /><eg>http://quotefellas.com/quotes/2013/04/94_650-before-you-start-anything-learn-how-to-finish-it.jpg</eg><br /><br /><b>Internet Protocol</b> : http://<br /><b>Computer Name or IP</b> : http://quotefellas.com/<br /><b>Path</b> : quotes/2013/04/<br /><b>File Name</b> : 94_650-before-you-start-anything-learn-how-to-finish-it.jpg<br /><br /><snpt>&lt;html&gt;<br />&lt;head&gt;&lt;/head&gt;<br />&lt;body&gt;<br />The image is the following<br />&lt;img src=&quot;http://quotefellas.com/quotes/2013/04/94_650-before-you-start-anything-learn-how-to-finish-it.jpg&quot;&gt;<br />Text after the image.<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt><br /><br /><outi><html><head></head><body>The image is the following<img src="http://quotefellas.com/quotes/2013/04/94_650-before-you-start-anything-learn-how-to-finish-it.jpg">Text after the image.</body></html></outi><br /><br />The HTML file and the image file can be on the same computer or on the different computers connected to the internet.<br /> Html absolute URL 4 1 4/5/2014 6:18:20 PM 11/10/2014 12:33:43 PM Edit | Details | Delete
1 Html relative URL Relative URL The relative URL identifies the location of the image by describing a path relative to the current directory where the HTML file is located.<br /><br />../ - denotes the parent directory<br />/ - denotes the root directory<br /><br />e.g.<br />/logo.jpg<br />../../logo.jpg Html relative URL 4 1 4/5/2014 6:19:50 PM 11/10/2014 12:33:43 PM Edit | Details | Delete
1 The image border attribute The image border attribute The browser will render an image as it is. To add the black border to the image, add the border attribute of the <img> element. <br /><snpt><br />&lt;html&gt;<br />&lt;head&gt;&lt;/head&gt;<br />&lt;body&gt;<br />No Border<br />&lt;img src=&quot;logo.jpg&quot;&gt;<br />Image with border<br />&lt;img src=&quot;logo.jpg&quot; border=&quot;2&quot;&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt><br /><br /><outi><html><head></head><body>No Border<img src="logo.jpg">Image with border<img src="logo.jpg" border="2"></body></html></outi> Html image border attribute 5 1 4/5/2014 6:23:27 PM 11/10/2014 12:33:42 PM Edit | Details | Delete
1 Image width and height attribute Image width and height attribute By default the image is displayed with the original size on the browser. To scale an image to a different width and height, the width and height attribute of the <code>&lt;img&gt;</code> element is used.<br /><br />* Positive integers (in pixels)<br />* Percentages (percentage of the parent block)<br /><br /><snpt>&lt;html&gt;<br />&lt;head&gt;&lt;/head&gt;<br />&lt;body&gt;<br />No Border<br />&lt;img src=&quot;logo.jpg&quot; width=&quot;200&quot;&gt;<br />Image with border<br />&lt;img src=&quot;logo.jpg&quot; width=&quot;300&quot; height=&quot;200&quot;&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt><br /><br /><outi><html><head></head><body>No Border<img src="logo.jpg" width="200">Image with border<img src="logo.jpg" width="300" height="200"></body></html></outi><br /><br /><note>If the width and height is changed from the original proportions, the image will be rendered disproportionately an will be distorted.</note> Html Image width attribute and html image height attribute 5 1 4/5/2014 6:27:22 PM 11/10/2014 12:33:42 PM Edit | Details | Delete
1 Image vertical alignment Image vertical alignment The alignment between an image relative to other inline elements of a web page.<br /><table><br /><tr><th>Properties</th><th>Description</th></tr><tr><td><c>top</c></td><td></td></tr><tr><td><c>texttop </c>(only netscape)</td><td></td></tr><tr><td><c>middle</c></td><td></td></tr><tr><td><c>absmiddle</c></td><td></td></tr><tr><td><c>center</c></td><td></td></tr><tr><td><c>bottom</c>(default value)</td><td></td></tr><tr><td><c>baseline</c></td><td></td></tr><tr><td><c>absbottom</c></td><td></td></tr></table><br /><br /><br /><br /><br /><br /><br /><br /> Html Image vertical alignment 7 1 4/5/2014 6:29:12 PM 1/31/2017 8:06:08 AM Edit | Details | Delete
1 Image horizontal alignment Image horizontal alignment The horizontal alignment of an image relative to the parent block, use the align attribute with these values.<br /><br />left<br />right<br />center html image horizontal alignment 8 1 4/6/2014 4:45:41 AM 11/10/2014 12:33:42 PM Edit | Details | Delete
1 white space around an image white space around an image The size of the white space between an image and the other content of the web page can be defined using the following two attributes.<br /><br />hspace<br />vspace<br /><br />The possible values of these attributes are<br /><br />- Positive integers, indicating the size of the white space in pixels.<br />- Percentage of the size of the parent. html image white space around an image 9 1 4/6/2014 4:46:54 AM 11/10/2014 12:33:42 PM Edit | Details | Delete
1 clear attribute of the <br> element clear attribute of the <br> element To clear the left side or the side of an image of text, use a <code>&lt;br&gt;</code> element having the clear attributes set to the following.<br /> <br /> all<br /> left<br /> none<br /> right<br /> <br /> Insert <code>&lt;br clear=&quot;right&quot;&gt;</code> before the first appearance of the sentence "Text after the image" . html image clear attribute of the <br> element to clear text around image 9 1 4/6/2014 4:51:50 AM 11/10/2014 12:33:42 PM Edit | Details | Delete
1 alt Attribute alt Attribute The alt attribute allows to attach a description to an image. The value of the alt attribute can be any double quoted string of less than 1024 characters. Its not required but it is strongly recommended to add the alt attribute to the <code>&lt;img&gt;</code> element.<br /> <br /> For descriptions with more than 1024 characters, use the longdesc attribute of the <code>&lt;img&gt;</code> element.<br /> <br /> <eg>alt="Quote Fellas - A website to get world famous quotes"</eg><br /> <br /> <note>- If the browser cannot download an image or set to not download the images, the browser will render the value of the alt attribute instead of the image.<br /> - A tooltip will appear containing the value of the alt attribute if we hover the mouse over an image<br /> - The value of the alt attribute is important for tool to aid vision-impaired people.</note><br /> html alt attribute 10 1 4/6/2014 4:53:50 AM 11/10/2014 12:33:42 PM Edit | Details | Delete
1 lowsrc attribute lowsrc attribute The lowsrc attribute is used to attach a second URL to an <code>&lt;img&gt;</code> element. The URL identifies an image similar to the one indicated by the src attribute but in low-resolution format.<br /><br /> <note>- The image indicated by src and lowsrc can be different images.<br /> - The low-resolution image (indicated by the lowsrc attribute) will be downloaded first (useful for low-speed connections) and later the actual image (sr attribute) will be downloaded.<br /> - It is recommended to use the same size for both images to avoid flicking of image during download of high resolution image.</note><br /> html image lowsrc attribute 12 1 4/6/2014 4:56:13 AM 11/10/2014 12:33:42 PM Edit | Details | Delete
1 The background image html background image To attach a background image to a web page, use the background attribute of the <code>&lt;body&gt;</code> element. The value of the background attribute is the URL that indicates the image file.<br /><br /><note> - The image is tiled horizontally and vertically to fill the entire page.<br /> - Internet explorer accepts an additional attribute called bgproperties, which is used to set "fixed" so the background image will stay in the same position when the user scrolls the page content using the navigation tools (vertical navigation bars or Up/ Down keys)</note> html background image 13 1 4/6/2014 4:57:35 AM 3/10/2015 5:52:51 PM Edit | Details | Delete
1 Images to create custom made lists Images to create custom made lists Images can be used to create custom made lists in which the leading symbols of items are images. It is created without using <code>&lt;li&gt;</code> element, rather it is simply an images accompanied by text and formatted with <code>&lt;br&gt;</code> element. html Images to create custom made lists 14 1 4/6/2014 4:58:57 AM 11/10/2014 12:33:42 PM Edit | Details | Delete
1 Links links Links are the elements in the web page that make the navigation between resources possible. Links are the property attached to a block of text or image. To create a link, use the <code>&lt;a&gt;..&lt;/a&gt;</code> element (the anchor element) The <code>&lt;a&gt;</code> element must have an src attribute that identifies the URL (absolute or relative) of the resource. * Mouse cursor will be changed to "Hand image" when the user moves the mouse pointer over a link. * Use <code>&lt;TAB&gt;</code> key to navigate between the links on the web page. * An active link will be rendered as a rectangle around the active link. Only one link will be active at a time. <snpt>&lt;html&gt;&lt;head&gt;&lt;/head&gt;&lt;body&gt; Click on the below link to follow the link &lt;a href=&quot;http://www.quotefellas.com&quot;&gt;Quote Fellas&lt;/a&gt; &lt;/body&gt;&lt;/html&gt;</snpt> <outi><html><head></head><body>Click on the below link to follow the link<a href="http://www.quotefellas.com">Quote Fellas</a></body></html></outi> <tit>Target Windows</tit> When the user clicks on a link, by default the browser replaces the page containing that link with the new page pointed by the link. To change the default behaviour, attach a new attribute names target to the <code>&lt;a&gt;</code> element. This attribute define the name of the window in which the new page will be loaded. If no window with that name exists, a new window will be created, The possible values are -Any double quoted string string that defines a name for a new window -The following constant values _self (default) -black _parent _top <tit>Links to other kind of files</tit> Links can be to defined other kind of files other than HTML files. When clicks on the link or presses the <ENTER> key if the link is active, there are possibilities depends on the browser nature. <t1>Scenario 1</t1> If the browser can handle that type of file(plug-in installed), it correctly renders the file in the browser. (eg. image, text, pdf, flash and other similar files.) <t1>Scenario 2</t1> If the browser cannot handle the new type of file, it will try to download the file to the client system. <tit>Links to ftp websites</tit> We can define a link to the specific directory on a server connected to the internet. The browser behaves based on the server settings. - If the link contains the http protocol, the server will try to return a default document (eg. default.htm for an Apache Server) - If adefault document doesn't exist or the server is not configured to return it, the server can be configured to returned the directory structure for that internet directory. - If the link contains an ftp protocol, the server will return a directory structure for that internet directory(if permitted by the server's security settings). Then the user can execute operations (read, write to and delete files and directories), depending on the level of access granted by the server. The server may be configured to require a user name and password or employ other security measures. To create a link to an ftp server, use an &lt;a&gt; element with the href attribute set for ftp protocol instead of http protocol (eg. href="ftp://ftp.domain.com/") <tit>Link to email addresses</tit> To create a link to an email address, use an <code>&lt;a&gt;</code> element with the href attribute set for the 'mailto' protocol (internet mail protocol) and pointing to a valid email address (eg: href="mailto:tutorials@rookienerd.com") <tit>Title attribute of &lt;a&gt; element</tit> The title attribute is a universal attribute and can be attached to any HTML element. When the user places the mouse pointer over the element, a tooltip will appear, rendering the content of the title attribute. <tit>&lt;base&gt; element</tit> The <code>&lt;base&gt;</code> element allows you to set a prefix that will automatically be attached to the URL indicated by any link on that page, allowing you to avoid repetitive code if all links on a page point to the same server. <note>The <code>&lt;base&gt;</code> element is an empty element(i.e it doesnt require an ending tag) The <code>&lt;base&gt;</code> element requires an href attribute set to the absolute URL of an internet directory. (e.g : href="http://www.domain.com/files/images/") The <base> element must be placed inside the <code>&lt;head&gt;..&lt;/head&gt;</code> element.</note> <tit>Link Color</tit> There are three states of a link. Each state has a particular color associated with it by default. These values can be overridden by setting specific attributes of the <code>&lt;body&gt;..&lt;/body&gt;</code> element. The three states of link are given below. <tit>active state</tit> Only one page can be active on a page at a time. The active link is rendered with a rectangle around it. The default color is "#ff0000"(red) To override the default value , use a 'alink' attribute. <tit>non-visited state</tit> The default color is "#0000ff"(blue) To override the default value, use the 'link' attribute. <tit>visited state</tit> The default is "#551ab8" or "#800080" To override the default value use the 'vlink' attribute. The visited state of a web page is permanently recorded by a browser and is maintained over multiple sessions. <tit>Image Link</tit> As explained in the previous topic, a link can be either a text block or an image. The example can be replaced by the image. <snpt>&lt;html&gt; &lt;head&gt;&lt;/head&gt; &lt;body&gt; Click on the below link to follow the link &lt;a href=&quot;http://www.quotefellas.com&quot;&gt;&lt;img src=&quot;logo.jpg&quot;&gt;&lt;/a&gt; &lt;/body&gt; &lt;/html&gt;</snpt> <outi><html><head></head><body>Click on the below link to follow the link<a href="http://www.quotefellas.com"><img src="logo.jpg"></a></body></html></outi> <tit>border attribute.</tit> To remove the border around the image link, add the border attribute with the value as o. <snpt>&lt;html&gt; &lt;head&gt;&lt;/head&gt; &lt;body&gt; Click on the below link to follow the link &lt;a href=&quot;http://www.quotefellas.com&quot;&gt;&lt;img src=&quot;logo.jpg&quot; border=&quot;0&quot;&gt;&lt;/a&gt; &lt;/body&gt; &lt;/html&gt;</snpt> <outi><html><head></head><body>Click on the below link to follow the link<a href="http://www.quotefellas.com"><img src="logo.jpg" border="0"></a></body></html></outi> <tit>Links Relative Url</tit> The relative URL identifies the access the pages from page "quotes/html" to other pages using a relative reference using the syntax below. ../ - denotes the parent directory / - denotes the root directory e.g. /page1.html ../../project2/html/page2.jpg <tit>Links to file on Local System</tit> href="file///c:/test/page.html" file:/// - protocol to access the local system c:/test/ path to the directory <snpt>&lt;html&gt; &lt;head&gt;&lt;/head&gt; &lt;body&gt; Click on the below link to follow the link &lt;a href=&quot;file:///c:/test/page.html&quot;&gt;Link to local system file&lt;/a&gt; &lt;/body&gt; &lt;/html&gt;</snpt> <tit>Anchors</tit> Anchor can be used to navigate to different sections of a page that is too long to be displayed on a single computer screen or to navigate to specific section of another web page. <tit>Defining the anchor</tit> * Using the <code>&lt;a&gt;..&lt;/a&gt;</code> element together with the name attribute. <eg><a name="name_value">Your Text</a></eg> *Using any HTML element together with the universal attribute id. <eg><a id="id_value"></eg> #name_value #id_value <snpt> &lt;html&gt; &lt;head&gt;&lt;/head&gt; &lt;body&gt; Click on the below link to follow the link &lt;a href=&quot;#p1&quot; id=&quot;p1&quot;&gt;Link to Paragraph 1&lt;/a&gt;&lt;br /&gt; &lt;a href=&quot;#p2&quot; id=&quot;p2&quot;&gt;Link to Paragraph 2&lt;/a&gt;&lt;br /&gt; &lt;a href=&quot;#p3&quot; id=&quot;p3&quot;&gt;Link to Paragraph 3&lt;/a&gt;&lt;br /&gt; &lt;a href=&quot;#p4&quot; id=&quot;p4&quot;&gt;Link to Paragraph 4&lt;/a&gt;&lt;br /&gt; &lt;p id=&quot;p1&quot;&gt;Text of the Paragraph 1&lt;/p&gt;&lt;br /&gt; &lt;p id=&quot;p2&quot;&gt;Text of the Paragraph 2&lt;/p&gt;&lt;br /&gt; &lt;p id=&quot;p3&quot;&gt;Text of the Paragraph 3&lt;/p&gt;&lt;br /&gt; &lt;p id=&quot;p4&quot;&gt;Text of the Paragraph 4&lt;/p&gt;&lt;br /&gt; &lt;/body&gt; &lt;/html&gt;</snpt> <outi><html><head></head><body>Click on the below link to follow the link<a href="#p1" id="p1">Link to Paragraph 1</a> <a href="#p2" id="p2">Link to Paragraph 2</a> <a href="#p3" id="p3">Link to Paragraph 3</a> <a href="#p4" id="p4">Link to Paragraph 4</a> <p id="p1">Text of the Paragraph 1</p> <p id="p2">Text of the Paragraph 2</p> <p id="p3">Text of the Paragraph 3</p> <p id="p4">Text of the Paragraph 4</p> </body></html></outi> <tit>Anchors for the external file</tit> <snpt>&lt;html&gt; &lt;head&gt;&lt;/head&gt; &lt;body&gt; Click on the below link to follow the link &lt;a href=&quot;page.html#p3&quot;&gt;This link to an anchor defined in an external file&lt;/a&gt; &lt;/body&gt; &lt;/html&gt;</snpt> <outi><html><head></head><body>Click on the below link to follow the link<a href="page.html#p3">This link to an anchor defined in an external file</a></body></html></outi> html links 1 1 4/6/2014 5:09:00 AM 12/16/2018 9:40:23 AM Edit | Details | Delete
1 Image Link Image Link As explained in the previous topic, a link can be either a text block or an image. The example can be replaced by the image.<br /><br /><snpt>&lt;html&gt;<br />&lt;head&gt;&lt;/head&gt;<br />&lt;body&gt;<br />Click on the below link to follow the link<br />&lt;a href=&quot;http://www.quotefellas.com&quot;&gt;&lt;img src=&quot;logo.jpg&quot;&gt;&lt;/a&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt><br /><br /><outi><html><head></head><body>Click on the below link to follow the link<a href="http://www.quotefellas.com"><img src="logo.jpg"></a></body></html></outi><br /><br /><tit>border attribute.</tit><br />To remove the border around the image link, add the border attribute with the value as o.<br /><br /><snpt>&lt;html&gt;<br />&lt;head&gt;&lt;/head&gt;<br />&lt;body&gt;<br />Click on the below link to follow the link<br />&lt;a href=&quot;http://www.quotefellas.com&quot;&gt;&lt;img src=&quot;logo.jpg&quot; border=&quot;0&quot;&gt;&lt;/a&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt><br /><br /><outi><html><head></head><body>Click on the below link to follow the link<a href="http://www.quotefellas.com"><img src="logo.jpg" border="0"></a></body></html></outi> html Image Link 2 1 4/6/2014 5:13:31 AM 11/10/2014 12:35:55 PM Edit | Details | Delete
1 Links Relative URL Links Relative URL The relative URL identifies the access the pages from page "quotes/html" to other pages using a relative reference using the syntax below.<br /><br />../ - denotes the parent directory<br />/ - denotes the root directory<br /><br />e.g.<br />/page1.html<br />../../project2/html/page2.jpg html Link relative URL 3 1 4/6/2014 5:15:36 AM 11/10/2014 12:35:55 PM Edit | Details | Delete
1 Links to file on local system Links to file on local system href="file///c:/test/page.html"<br /><br />file:/// - protocol to access the local system<br />c:/test/ path to the directory<br /><br /><snpt>&lt;html&gt;<br />&lt;head&gt;&lt;/head&gt;<br />&lt;body&gt;<br />Click on the below link to follow the link<br />&lt;a href=&quot;file:///c:/test/page.html&quot;&gt;Link to local system file&lt;/a&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt> html Links to file on local system 4 1 1 4/6/2014 5:17:38 AM 11/10/2014 12:35:55 PM Edit | Details | Delete
1 Anchors Anchors Anchor can be used to navigate to different sections of a page that is too long to be displayed on a single computer screen or to navigate to specific section of another web page. <tit>Defining the anchor</tit> * Using the <code>&lt;a&gt;..&lt;/a&gt;</code> element together with the name attribute. <eg>&lt;a name=&quot;name_value&quot;&gt;Your Text&lt;/a&gt;</eg> *Using any HTML element together with the universal attribute id. <eg>&lt;a id=&quot;id_value&quot;&gt;</eg> #name_value #id_value <snpt> &lt;html&gt; &lt;head&gt;&lt;/head&gt; &lt;body&gt; Click on the below link to follow the link &lt;a href=&quot;#p1&quot; id=&quot;p1&quot;&gt;Link to Paragraph 1&lt;/a&gt;&lt;br /&gt; &lt;a href=&quot;#p2&quot; id=&quot;p2&quot;&gt;Link to Paragraph 2&lt;/a&gt;&lt;br /&gt; &lt;a href=&quot;#p3&quot; id=&quot;p3&quot;&gt;Link to Paragraph 3&lt;/a&gt;&lt;br /&gt; &lt;a href=&quot;#p4&quot; id=&quot;p4&quot;&gt;Link to Paragraph 4&lt;/a&gt;&lt;br /&gt; &lt;p id=&quot;p1&quot;&gt;Text of the Paragraph 1&lt;/p&gt;&lt;br /&gt; &lt;p id=&quot;p2&quot;&gt;Text of the Paragraph 2&lt;/p&gt;&lt;br /&gt; &lt;p id=&quot;p3&quot;&gt;Text of the Paragraph 3&lt;/p&gt;&lt;br /&gt; &lt;p id=&quot;p4&quot;&gt;Text of the Paragraph 4&lt;/p&gt;&lt;br /&gt; &lt;/body&gt; &lt;/html&gt;</snpt> <outi><html><head></head><body>Click on the below link to follow the link<a href="#p1" id="p1">Link to Paragraph 1</a> <a href="#p2" id="p2">Link to Paragraph 2</a> <a href="#p3" id="p3">Link to Paragraph 3</a> <a href="#p4" id="p4">Link to Paragraph 4</a> <p id="p1">Text of the Paragraph 1</p> <p id="p2">Text of the Paragraph 2</p> <p id="p3">Text of the Paragraph 3</p> <p id="p4">Text of the Paragraph 4</p> </body></html></outi> <tit>Anchors for the external file</tit> <snpt>&lt;html&gt; &lt;head&gt;&lt;/head&gt; &lt;body&gt; Click on the below link to follow the link &lt;a href=&quot;page.html#p3&quot;&gt;This link to an anchor defined in an external file&lt;/a&gt; &lt;/body&gt; &lt;/html&gt;</snpt> <outi><html><head></head><body>Click on the below link to follow the link<a href="page.html#p3">This link to an anchor defined in an external file</a></body></html></outi> html Anchors 5 1 1 4/6/2014 5:23:20 AM 12/14/2018 6:47:21 PM Edit | Details | Delete
1 Image Maps Image Maps Images can be used to define a link. <pre>&lt;a href=&quot;page.html&quot;&gt; &lt;img src=logo.jpg&quot;&gt;&lt;/a&gt; &lt;a href=&quot;page2.html&quot;&gt;</pre> <pre>&lt;img src=logo2.jpg&quot;&gt;&lt;/a&gt;</pre> Here single link is attached to each image. <tit>Image Maps</tit> The image map allows to define multiple links using a single image. * Add usemap attribute to the <code>&lt;img&gt;..&lt;/img&gt;</code> element. The value of the attribute starts with the '#' symbol and followed by map identifier. * Insert the map, use <code>&lt;map&gt;..&lt;/map&gt;</code> element. The required attribute for the <map> element is name and the value must be the same as the map identifier. <code>&lt;map name=&quot;map_name&quot;&gt;..&lt;/map&gt;</code> * Insert the links using the <code>&lt;area&gt;</code> element inside the <code>&lt;map&gt;</code> element. <code>&lt;map&gt;</code> element is the container for the <code>&lt;area&gt;</code> element. The attributes of the <code>&lt;area&gt;</code> element are given below. <table> <tr><th>Attribute</th><th>Description</th></tr><tr><td><c>href</c></td><td>Defines the URL.</td></tr><tr><td><c>shape</c></td><td>Defines the shape of a hotspot inside the images. The values are given below.<table> <tr><th>Value</th><th>Description</th></tr><tr><td><c>rect</c> or <c>rectangle</c></td><td>Define a rectangle area.</td></tr><tr><td><c>circle</c></td><td>Defines a circular area.</td></tr><tr><td><c>poly</c> or <c>polygon</c></td><td>Defines a polygon area.</td></tr><tr><td><c>default</c></td><td>The other regions of the image for which no links are defined.</td></tr><tr><td><c>coords</c></td><td>Defines the coordinates of the hotspot. The values are the comma-delimated positive integers. (e.g. - "100, 100, 200, 200")</td></tr></table></td></tr><tr><td><c>title</c> & <c>alt</c></td><td>Used to show tooltip when the user hovers the mouse pointer over that region.</td></tr><tr><td><c>target</c></td><td>Used to define the browser window in which the new resource will be loaded.</td></tr></table> <snpt>&lt;img src=logo.jpg&quot; usemap=&quot;#map_name&quot;&gt; &lt;map name=&quot;map_name&quot;&gt; &lt;area href=&quot;page1.html&quot; shape=&quot;rect&quot; coords=&quot;100,100,200,200&quot;&gt; &lt;area href=&quot;page2.html&quot; shape=&quot;rect&quot; coords=&quot;200,200,300,300&quot;&gt; &lt;area href=&quot;page2.html&quot; shape=&quot;rect&quot; coords=&quot;200,200,300,300&quot; title=&quot;this is a title&quot;&gt; &lt;area href=&quot;page2.html&quot; shape=&quot;rect&quot; coords=&quot;200,200,300,300&quot; alt=&quot;this is a description&quot;&gt; &lt;area href=&quot;page2.html&quot; shape=&quot;rect&quot; coords=&quot;200,200,300,300&quot; target=&quot;new_window&quot;&gt; &lt;/map&gt;</snpt> <tit>Describing the hotspots</tit> Consider a example of a image using the hotspots colored region using the coordinates. For rectangular hotspot, use the syntax. <pre>coords="left, top, right, bottom"</pre> left & top are the x and y coordinates of the top-left corner right & bottom are the the x and y coordinates of the bottom-right corner e.g. coords="50, 50, 250, 150", coords="100, 100, 200, 300" For circular hotspot use the syntax: <pre>coords="center-x, center-y, radius"</pre> center-x, center-y are the coordinates of the center and radius is the radius of the circle. e.g. coords="100, 400, 50" For polygonal hotspot, use the syntax: <pre>coords: x1, y1, x2, y2,...xN, yN"</pre> <pre>coords="50, 50, 250, 150, 350, 450"</pre> <snpt>&lt;html&gt; &lt;head&gt;&lt;/head&gt; &lt;body&gt; &lt;img src=logo.jpg&quot; usemap=&quot;#map_name&quot;&gt; &lt;map name=&quot;map_name&quot;&gt; &lt;area href=&quot;page1.html&quot; shape=&quot;rect&quot; coords=&quot;100,100,200,200&quot;&gt; &lt;area href=&quot;pdf.html&quot; shape=&quot;circle&quot; coords=&quot;100,400,500&quot;&gt; &lt;area href=&quot;image.jpeg&quot; shape=&quot;poly&quot; coords=&quot;200,350,400,200,450&quot;&gt; &lt;area href=&quot;desc.txt&quot; shape=&quot;default&quot;&gt; &lt;/map&gt; &lt;/body&gt; &lt;/html&gt;</snpt> <outi><html><head></head><body><img src=logo.jpg" usemap="#map_name"><map name="map_name"><area href="page1.html" shape="rect" coords="100,100,200,200"><area href="pdf.html" shape="circle" coords="100,400,500"><area href="image.jpeg" shape="poly" coords="200,350,400,200,450"><area href="desc.txt" shape="default"></map></body></html></outi> When two areas are overlapped. the priority is determined by the order in which the <code>&lt;area&gt;</code> elements appear inside the map element. <tit>Attributes of &lt;area&gt; element</tit> The following are the attributes of the <c>&lt;area&gt;</c> element. <table> <tr><th>Attribute</th><th>Description</th></tr><tr><td><c>title</c> & <c>alt</c></td><td>to insert <i>tooltips</i> that appear when the user hovers the mouse pointer over that region.</td></tr><tr><td><c>target</c></td><td>to define the browser window in which the new resource will be loaded.</td></tr></table> <tit>Image Maps using &lt;object&gt; element</tit> The <code>&lt;object&gt;</code> element can be used to insert an image map. Change the <code>&lt;img&gt;</code> element to the <code>&lt;object&gt;..&lt;object&gt;</code> element and the src attribute to the data attribute. <snpt>&lt;html&gt; &lt;head&gt;&lt;/head&gt; &lt;body&gt; &lt;object data=logo.jpg&quot; usemap=&quot;#map_name&quot; type=&quot;image/jpeg&quot; width=&quot;500&quot; height=&quot;400&quot;&gt;&lt;/object&gt; &lt;map name=&quot;map_name&quot;&gt; &lt;area href=&quot;page1.html&quot; shape=&quot;rect&quot; coords=&quot;100,100,200,200&quot;&gt; &lt;area href=&quot;pdf.html&quot; shape=&quot;circle&quot; coords=&quot;100,400,500&quot;&gt; &lt;area href=&quot;image.jpeg&quot; shape=&quot;poly&quot; coords=&quot;200,350,400,200,450&quot;&gt; &lt;area href=&quot;desc.txt&quot; shape=&quot;default&quot;&gt; &lt;/map&gt; &lt;/body&gt; &lt;/html&gt;</snpt> <outi><html><head></head><body><object data=logo.jpg" usemap="#map_name" type="image/jpeg" width="500" height="400"></object><map name="map_name"><area href="page1.html" shape="rect" coords="100,100,200,200"><area href="pdf.html" shape="circle" coords="100,400,500"><area href="image.jpeg" shape="poly" coords="200,350,400,200,450"><area href="desc.txt" shape="default"></map></body></html></outi> html Image Maps 1 1 1 4/6/2014 6:02:00 AM 12/16/2018 9:44:14 AM Edit | Details | Delete
1 Describing the hotspots Image Map hotspots Consider a example of a image using the hotspots colored region using the coordinates.<br /><br />For rectangular hotspot, use the syntax.<br /><pre>coords="left, top, right, bottom"</pre><br /><br />left & top are the x and y coordinates of the top-left corner<br />right & bottom are the the x and y coordinates of the bottom-right corner<br />e.g. coords="50, 50, 250, 150", coords="100, 100, 200, 300"<br /><br />For circular hotspot use the syntax:<br /><pre>coords="center-x, center-y, radius"</pre><br /><br />center-x, center-y are the coordinates of the center and radius is the radius of the circle.<br /><br />e.g. coords="100, 400, 50"<br /><br />For polygonal hotspot, use the syntax:<br /><pre>coords: x1, y1, x2, y2,...xN, yN"</pre><br /><pre>coords="50, 50, 250, 150, 350, 450"</pre><br /><br /><snpt>&lt;html&gt;<br />&lt;head&gt;&lt;/head&gt;<br />&lt;body&gt;<br />&lt;img src=logo.jpg&quot; usemap=&quot;#map_name&quot;&gt;<br />&lt;map name=&quot;map_name&quot;&gt;<br />&lt;area href=&quot;page1.html&quot; shape=&quot;rect&quot; coords=&quot;100,100,200,200&quot;&gt;<br />&lt;area href=&quot;pdf.html&quot; shape=&quot;circle&quot; coords=&quot;100,400,500&quot;&gt;<br />&lt;area href=&quot;image.jpeg&quot; shape=&quot;poly&quot; coords=&quot;200,350,400,200,450&quot;&gt;<br />&lt;area href=&quot;desc.txt&quot; shape=&quot;default&quot;&gt;<br />&lt;/map&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt><br /><br /><outi><html><head></head><body><img src=logo.jpg" usemap="#map_name"><map name="map_name"><area href="page1.html" shape="rect" coords="100,100,200,200"><area href="pdf.html" shape="circle" coords="100,400,500"><area href="image.jpeg" shape="poly" coords="200,350,400,200,450"><area href="desc.txt" shape="default"></map></body></html></outi><br /><br />When two areas are overlapped. the priority is determined by the order in which the <code>&lt;area&gt;</code> elements appear inside the map element.<br /> html Image Maps hotspots 2 1 1 4/6/2014 6:06:11 AM 1/31/2017 11:46:05 AM Edit | Details | Delete
1 Attributes of <area> element Attributes of <area> element The following are the attributes of the <c>&lt;area&gt;</c> element.<br /><br /><table><br /><tr><th>Attribute</th><th>Description</th></tr><tr><td><c>title</c> & <c>alt</c></td><td>to insert <i>tooltips</i> that appear when the user hovers the mouse pointer over that region.</td></tr><tr><td><c>target</c></td><td>to define the browser window in which the new resource will be loaded.</td></tr></table> html image map Attributes of area element 3 1 1 4/6/2014 6:11:59 AM 1/31/2017 11:40:18 AM Edit | Details | Delete
1 Image Maps using <object> element Image Maps using <object> element The <code>&lt;object&gt;</code> element can be used to insert an image map. Change the <code>&lt;img&gt;</code> element to the <code>&lt;object&gt;..&lt;object&gt;</code> element and the src attribute to the data attribute.<br /><br /><snpt>&lt;html&gt;<br />&lt;head&gt;&lt;/head&gt;<br />&lt;body&gt;<br />&lt;object data=logo.jpg&quot; usemap=&quot;#map_name&quot; type=&quot;image/jpeg&quot; width=&quot;500&quot; height=&quot;400&quot;&gt;&lt;/object&gt;<br />&lt;map name=&quot;map_name&quot;&gt;<br />&lt;area href=&quot;page1.html&quot; shape=&quot;rect&quot; coords=&quot;100,100,200,200&quot;&gt;<br />&lt;area href=&quot;pdf.html&quot; shape=&quot;circle&quot; coords=&quot;100,400,500&quot;&gt;<br />&lt;area href=&quot;image.jpeg&quot; shape=&quot;poly&quot; coords=&quot;200,350,400,200,450&quot;&gt;<br />&lt;area href=&quot;desc.txt&quot; shape=&quot;default&quot;&gt;<br />&lt;/map&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt><br /><br /><outi><html><head></head><body><object data=logo.jpg" usemap="#map_name" type="image/jpeg" width="500" height="400"></object><map name="map_name"><area href="page1.html" shape="rect" coords="100,100,200,200"><area href="pdf.html" shape="circle" coords="100,400,500"><area href="image.jpeg" shape="poly" coords="200,350,400,200,450"><area href="desc.txt" shape="default"></map></body></html></outi> html Image Maps using object element 4 1 1 4/6/2014 6:17:30 AM 11/10/2014 12:32:02 PM Edit | Details | Delete
1 Metadata Metadata <p>Metadata is data about data (i.e) data that describes other data). Metadata is information you can insert into an HTML file to supplement information about the content of a specific page or website. </p> <note>Metadata is not rendered by the browser. Metadata can transfer useful information to browsers, servers and users. Metadata can be read and organised by internet robots and search engines.</note> <tit>&lt;meta&gt; tag</tit> <p>To insert metadata into an HTML file, insert <code>&lt;meta&gt;</code> tags inside the <code>&lt;head&gt;..&lt;/head&gt;</code> element. </p> <note>Notes: - <code>&lt;meta&gt;</code> tag doesn't have an ending tag. (i.e it is an empty element) - There can be as many <meta> tags inside the <code>&lt;head&gt;..&lt;/head&gt;</code> element as you like.</note> <tit>&lt;meta&gt; tag attribute</tit> <p>The meta tag has attributes that allow you to store the metadata. </p> * content - Used to store the actual metadata content. * name - Values of name attribute are ~ description ~ keywords ~ author * http - The values are ~ creation-date ~ expires ~ from ~ replay-to ~ content-type ~ refresh ~ pragma * scheme - Used to refine the information given by the other attributes. * lang - This attribute is used to specify the language. (e.g. en, uk, ca, ro, etc.,) Note: <note>- The metadata consists of the a pair of attributes. - name=value, content=value - http-equiv=value, content=value</note> <tit>web page description</tit> <p>To insert a description of a web page or a web site, use a <meta> tag with these attributes: </p> <p>name="description" content="a descriptive inside a double quoted string" </p> <snpt>&lt;html&gt; &lt;head&gt; &lt;meta name=&quot;description&quot; content=&quot;Get Famous Quotes, Inspirational Quotes, Movie Quotes, Love Quotes, Life Quotes, Funny quotes, Last Saying Quotes.&quot;&gt; &lt;/head&gt; &lt;body&gt; &lt;p&gt;An example of using metadata to define the description of a webpage&lt;/p&gt; &lt;/body&gt; &lt;/html&gt;</snpt> <tit>web page keywords</tit> <p>Keywords are frequently used by internet search engines like Google, Yahoo, Bing etc. The keywords must be carefully defined to exactly describe the website. </p> <b>name="keywords"</b><b> content="List of keywords separated by comma" </b> <snpt> &lt;html&gt; &lt;head&gt; &lt;meta name=&quot;keywords&quot; content=&quot;life quotes, famous quotes,quotes and sayings,inspirational quotations,motivational quotes&quot;&gt; &lt;/head&gt; &lt;body&gt; &lt;p&gt;An example of using metadata to define the keywords of a webpage&lt;/p&gt; &lt;/body&gt; &lt;/html&gt;</snpt> <tit>Author and Copyright</tit> <p>To insert information about the author and copyright, insert two <meta> elements with their name attributes set to "author" and "copyright". These details are not visible to the users. </p> <p>To make visible to the users add the author and the copyright details inside the <code>&lt;body&gt;..&lt;/body&gt;</code> tag. </p> <snpt>&lt;html&gt; &lt;head&gt; &lt;meta name=&quot;author&quot; content=&quot;Cruise Warner&quot;&gt; &lt;meta name=&quot;copyright&quot; content=&quot;QuoteFellas.com. All Rights Reserved&quot;&gt; &lt;/head&gt; &lt;body&gt; Copyright &amp;copy; QuoteFellas.com All Rights Reserved. &lt;/body&gt; &lt;/html&gt;</snpt> <out><html><head><meta name="author" content="Cruise Warner"><meta name="copyright" content="QuoteFellas.com. All Rights Reserved"></head><body>Copyright &copy; QuoteFellas.com All Rights Reserved.</body></html></out> <tit>Creation and Updating Date</tit> <p>The Creation date and the Updation date of a webpage can be notified to the search engines with the help of <code>&lt;meta&gt;</code> tags and their <code>http-equiv</code> attributes set to "creation-date" and expires". </p> <p>The value of each content attribute should be a date with the below format. </p> <p>ddd - Represnts first three letters of the day name (Mon, Tue, etc.) dd - Represents the day number (01, 02... 31) mmm - Represents the first three letters of the month name (Jan, Feb,.. Dec) yyyy - Represent the year (e.g. 2013) hh:mm:ss - Represents the hour, minute and second (e.g. 11:48:53) ttt - Represents the standard time (e.g - GMT) </p> <snpt>&lt;html&gt; &lt;head&gt; &lt;meta http-equiv=&quot;creation-date&quot; content=&quot;Fri, 12, Jul 2013 12:00:00 GMT&quot;&gt; &lt;meta http-equiv=&quot;expires&quot; content=&quot;Sun, 21, Jul 2013 12:00:00 GMT&quot;&gt; &lt;/head&gt; &lt;body&gt; Welcome to Rookie Nerd &lt;/body&gt; &lt;/html&gt;</snpt> <note>To use the different date format, use the scheme attribute as below</note> <snpt>&lt;html&gt; &lt;head&gt; &lt;meta http-equiv=&quot;creation-date&quot; content=&quot;12-25-2013&quot; scheme=&quot;Month-Day-Year&quot;&gt; &lt;/head&gt; &lt;body&gt; Welcome to Rookie Nerd &lt;/body&gt; &lt;/html&gt;</snpt> <tit>Contact Details</tit> <p>To add the name and email address of the person responsible for the design of the webpage, insert two <meta> elements with the http-equiv values set to "from" and "reply-to" </p> <snpt>&lt;html&gt; &lt;head&gt; &lt;meta http-equiv=&quot;from&quot; content=&quot;alex@gmail.com&quot;&gt; &lt;meta http-equiv=&quot;reply-to&quot; content=&quot;pandi@yahoo.com&quot;&gt; &lt;/head&gt; &lt;body&gt; Welcome to Rookie Nerd &lt;/body&gt; &lt;/html&gt;</snpt> <tit> The File Details</tit> <snpt>&lt;html&gt; &lt;head&gt; &lt;meta http-equiv=&quot;content-type&quot; content=&quot;text/html; charset=ISO-8859-5&quot;&gt; &lt;/head&gt; &lt;body&gt; Welcome to Rookie Nerd &lt;/body&gt; &lt;/html&gt;</snpt> <tit> lang attribute</tit> <snpt>&lt;html&gt; &lt;head&gt; &lt;meta name=&quot;keywords&quot; content=&quot;aplicatie&quot; lang=&quot;ro&quot;&gt; &lt;meta name=&quot;keywords&quot; content=&quot;aplication&quot; lang=&quot;en-us&quot;&gt; &lt;/head&gt; &lt;body&gt; &lt;p&gt;An example of using metadata to define the keywords of a webpage in different language&lt;/p&gt; &lt;/body&gt; &lt;/html&gt;</snpt> <tit>Refreshing a web page</tit> <snpt>&lt;head&gt; &lt;meta http-equiv=&quot;refresh&quot; content=&quot;5&quot;&gt; &lt;/head&gt; &lt;body&gt; This page will be automatically refreshed in 5 seconds. &lt;/body&gt; &lt;/html&gt;</snpt> <tit>Forwarding a web page</tit> <snpt>&lt;html&gt; &lt;head&gt; &lt;meta http-equiv=&quot;refresh&quot; content=&quot;10; url=http://www.quotefellas.com&quot;&gt; &lt;/head&gt; &lt;body&gt; This page will be automatically redirected to the Quote Fellas website in 10 seconds. &lt;/body&gt; &lt;/html&gt;</snpt> <tit>Pragma directive</tit> <snpt>&lt;html&gt; &lt;head&gt; &lt;meta http-equiv=&quot;pragma&quot; content=&quot;no-cache&quot;&gt; &lt;/head&gt; &lt;body&gt; This page will be downloaded every time the page is accessed. Welcome to Rookie Nerd &lt;/body&gt; &lt;/html&gt;</snpt> <tit>comment block</tit> <snpt> &lt;html&gt; &lt;head&gt;&lt;/head&gt; &lt;body&gt; &lt;!-- This is a comment block and it will not be rendered by the browser --&gt; Welcome to Rookie Nerd &lt;/body&gt; &lt;/html&gt;</snpt> <out><html><head></head><body><!-- This is a comment block and it will not be rendered by the browser -->Welcome to Rookie Nerd</body></html></out> html metadata 1 1 1 4/6/2014 6:58:37 AM 12/16/2018 9:42:48 AM Edit | Details | Delete
1 <meta> tag <meta> tag To insert metadata into an HTML file, insert <code>&lt;meta&gt;</code> tags inside the <code>&lt;head&gt;..&lt;/head&gt;</code> element.<br /><br />Notes:<br /><note>- <code>&lt;meta&gt;</code> tag doesn't have an ending tag. (i.e it is an empty element)<br />- There can be as many <meta> tags inside the <code>&lt;head&gt;..&lt;/head&gt;</code> element as you like.</note> html meta tag 2 1 1 4/6/2014 7:00:51 AM 11/10/2014 12:40:27 PM Edit | Details | Delete
1 <meta> tag attribute <meta> tag attribute The meta tag has attributes that allow you to store the metadata. <br /><br />* content - Used to store the actual metadata content.<br />* name - Values of name attribute are<br /> ~ description<br /> ~ keywords<br /> ~ author<br />* http - The values are<br /> ~ creation-date<br /> ~ expires<br /> ~ from<br /> ~ replay-to<br /> ~ content-type<br /> ~ refresh<br /> ~ pragma<br />* scheme - Used to refine the information given by the other attributes.<br />* lang - This attribute is used to specify the language. (e.g. en, uk, ca, ro, etc.,)<br /><br />Note: <br /><note>- The metadata consists of the a pair of attributes.<br />- name=value, content=value<br />- http-equiv=value, content=value</note> html meta tag attribute 3 1 1 4/6/2014 7:03:41 AM 11/10/2014 12:40:27 PM Edit | Details | Delete
1 web page description web page description To insert a description of a web page or a web site, use a <meta> tag with these attributes:<br /><br />name="description"<br />content="a descriptive inside a double quoted string"<br /><br /><snpt>&lt;html&gt;<br />&lt;head&gt;<br />&lt;meta name=&quot;description&quot; content=&quot;Get Famous Quotes, Inspirational Quotes, Movie Quotes, Love Quotes, Life Quotes, Funny quotes, Last Saying Quotes.&quot;&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br />&lt;p&gt;An example of using metadata to define the description of a webpage&lt;/p&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt> html metadata web page description 4 1 1 4/6/2014 7:06:13 AM 11/10/2014 12:40:27 PM Edit | Details | Delete
1 web page keywords web page keywords Keywords are frequently used by internet search engines like Google, Yahoo, Bing etc. The keywords must be carefully defined to exactly describe the website.<br /><br /><b>name="keywords"</b><b><br />content="List of keywords separated by comma"<br /></b><br /><br /><snpt><br />&lt;html&gt;<br />&lt;head&gt;<br />&lt;meta name=&quot;keywords&quot; content=&quot;life quotes, famous quotes,quotes and sayings,inspirational quotations,motivational quotes&quot;&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br />&lt;p&gt;An example of using metadata to define the keywords of a webpage&lt;/p&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt> html metadata web page keywords 5 1 1 4/6/2014 7:07:49 AM 11/10/2014 12:40:27 PM Edit | Details | Delete
1 Author and Copyright Author and Copyright To insert information about the author and copyright, insert two <meta> elements with their name attributes set to "author" and "copyright". These details are not visible to the users.<br />To make visible to the users add the author and the copyright details inside the <code>&lt;body&gt;..&lt;/body&gt;</code> tag.<br /><br /><snpt>&lt;html&gt;<br />&lt;head&gt;<br />&lt;meta name=&quot;author&quot; content=&quot;Cruise Warner&quot;&gt;<br />&lt;meta name=&quot;copyright&quot; content=&quot;QuoteFellas.com. All Rights Reserved&quot;&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br />Copyright &amp;copy; QuoteFellas.com All Rights Reserved.<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt><br /><br /><out><html><head><meta name="author" content="Cruise Warner"><meta name="copyright" content="QuoteFellas.com. All Rights Reserved"></head><body>Copyright &copy; QuoteFellas.com All Rights Reserved.</body></html></out> html metadata Author html metadata Copyright 5 1 1 4/6/2014 7:10:46 AM 11/10/2014 12:40:27 PM Edit | Details | Delete
1 Creation and Updating Date Creation and Updating Date The Creation date and the Updation date of a webpage can be notified to the search engines with the help of <code>&lt;meta&gt;</code> tags and their <code>http-equiv</code> attributes set to "creation-date" and expires".<br />The value of each content attribute should be a date with the below format.<br /><br />ddd - Represnts first three letters of the day name (Mon, Tue, etc.)<br />dd - Represents the day number (01, 02... 31)<br />mmm - Represents the first three letters of the month name (Jan, Feb,.. Dec)<br />yyyy - Represent the year (e.g. 2013)<br />hh:mm:ss - Represents the hour, minute and second (e.g. 11:48:53)<br />ttt - Represents the standard time (e.g - GMT)<br /><br /><snpt>&lt;html&gt;<br />&lt;head&gt;<br />&lt;meta http-equiv=&quot;creation-date&quot; content=&quot;Fri, 12, Jul 2013 12:00:00 GMT&quot;&gt;<br />&lt;meta http-equiv=&quot;expires&quot; content=&quot;Sun, 21, Jul 2013 12:00:00 GMT&quot;&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br />Welcome to Rookie Nerd<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt><br /><br /><note>To use the different date format, use the scheme attribute as below</note><br /><br /><snpt>&lt;html&gt;<br />&lt;head&gt;<br />&lt;meta http-equiv=&quot;creation-date&quot; content=&quot;12-25-2013&quot; scheme=&quot;Month-Day-Year&quot;&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br />Welcome to Rookie Nerd<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt> html metadata creation date html metadata updation date 7 1 1 4/6/2014 7:31:54 AM 11/10/2014 12:40:27 PM Edit | Details | Delete
1 Contact Details Contact Details To add the name and email address of the person responsible for the design of the webpage, insert two <meta> elements with the http-equiv values set to "from" and "reply-to"<br /><br /><snpt>&lt;html&gt;<br />&lt;head&gt;<br />&lt;meta http-equiv=&quot;from&quot; content=&quot;alex@gmail.com&quot;&gt;<br />&lt;meta http-equiv=&quot;reply-to&quot; content=&quot;pandi@yahoo.com&quot;&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br />Welcome to Rookie Nerd<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt> html metadata Contact Details 8 1 1 4/6/2014 7:34:29 AM 11/10/2014 12:40:27 PM Edit | Details | Delete
1 The File Details The File Details <br /><br /><snpt>&lt;html&gt;<br />&lt;head&gt;<br />&lt;meta http-equiv=&quot;content-type&quot; content=&quot;text/html; charset=ISO-8859-5&quot;&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br />Welcome to Rookie Nerd<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt> html metadata file Details 9 1 1 4/6/2014 7:37:25 AM 11/10/2014 12:40:27 PM Edit | Details | Delete
1 lang attribute lang attribute <br /><br /><snpt>&lt;html&gt;<br />&lt;head&gt;<br />&lt;meta name=&quot;keywords&quot; content=&quot;aplicatie&quot; lang=&quot;ro&quot;&gt;<br />&lt;meta name=&quot;keywords&quot; content=&quot;aplication&quot; lang=&quot;en-us&quot;&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br />&lt;p&gt;An example of using metadata to define the keywords of a webpage in different language&lt;/p&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt> html metadata lang attribute 10 1 1 4/6/2014 7:39:59 AM 11/10/2014 12:40:27 PM Edit | Details | Delete
1 Refreshing a web page Refreshing a web page <br /><snpt>&lt;head&gt;<br />&lt;meta http-equiv=&quot;refresh&quot; content=&quot;5&quot;&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br />This page will be automatically refreshed in 5 seconds.<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt> html metadata Refreshing a web page 11 1 1 4/6/2014 7:45:07 AM 11/10/2014 12:40:27 PM Edit | Details | Delete
1 Forwarding a web page Forwarding a web page <br /><snpt>&lt;html&gt;<br />&lt;head&gt;<br />&lt;meta http-equiv=&quot;refresh&quot; content=&quot;10; url=http://www.quotefellas.com&quot;&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br />This page will be automatically redirected to the Quote Fellas website in 10 seconds.<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt> html metadata Forwarding a web page 12 1 1 4/6/2014 7:46:17 AM 11/10/2014 12:40:27 PM Edit | Details | Delete
1 Pragma directive Pragma directive <br /><snpt>&lt;html&gt;<br />&lt;head&gt;<br />&lt;meta http-equiv=&quot;pragma&quot; content=&quot;no-cache&quot;&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br />This page will be downloaded every time the page is accessed.<br />Welcome to Rookie Nerd<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt> html metadata Pragma directive 13 1 1 4/6/2014 7:48:33 AM 11/10/2014 12:40:27 PM Edit | Details | Delete
1 comment block comment block <br /><snpt><br />&lt;html&gt;<br />&lt;head&gt;&lt;/head&gt;<br />&lt;body&gt;<br />&lt;!-- This is a comment block and it will not be rendered by the browser --&gt;<br />Welcome to Rookie Nerd<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt><br /><br /><br /><out><html><head></head><body><!-- This is a comment block and it will not be rendered by the browser -->Welcome to Rookie Nerd</body></html></out> html comment block 14 1 1 4/6/2014 7:55:13 AM 11/10/2014 12:40:27 PM Edit | Details | Delete
1 Multimedia Multimedia <p>Multimedia refers to data and applications in any format or media</p> ------------ Application Files Data Files Mime Helper Applications Plug-ins ------------ <tit>Links to external multimedia files</tit> <p>The simplest way to add multimedia files to a webpage is to insert links using the <code>&lt;a&gt;..&lt;/a&gt;</code> element. The href attribute is set to the URL of the multimedia file you want to attach. </p> <p>When connecting to multimedia the following things happen. </p> * The browser handle the file itself and renders to display on the browser (HTML, GIF, JPG and PNG files) * The browser can handle using the plug-ins (Text file, PDF files, some images , sounds and movie) * The browser cannot handle the file but has access to a helper application that can handle it. (Word, Excel, and Power Point documents etc.,) * The browser cannot identify a helper application and asks the user to download the file to the local file system. <snpt>&lt;html&gt; &lt;head&gt;&lt;/head&gt; &lt;body&gt; Click on the below link to follow the link &lt;a href=&quot;file.html&quot; target=&quot;w1&quot;&gt;Link to a .html file&lt;/a&gt;&lt;br /&gt; &lt;a href=&quot;file.txt&quot; target=&quot;w1&quot;&gt;Link to a .txt file&lt;/a&gt;&lt;br /&gt; &lt;a href=&quot;file.gug&quot; target=&quot;w1&quot;&gt;Link to a .gug file&lt;/a&gt;&lt;br /&gt; &lt;a href=&quot;file.rtf&quot; target=&quot;w1&quot;&gt;Link to a .rtf file&lt;/a&gt;&lt;br /&gt; &lt;a href=&quot;file.pdf&quot; target=&quot;w1&quot;&gt;Link to a .pdf file&lt;/a&gt;&lt;br /&gt; &lt;a href=&quot;file.swf&quot; target=&quot;w1&quot;&gt;Link to a .swf file&lt;/a&gt;&lt;br /&gt; &lt;a href=&quot;file.doc&quot; target=&quot;w1&quot;&gt;Link to a .doc file&lt;/a&gt;&lt;br /&gt; &lt;a href=&quot;file.xls&quot; target=&quot;w1&quot;&gt;Link to a .xls file&lt;/a&gt;&lt;br /&gt; &lt;a href=&quot;file.au&quot; target=&quot;w1&quot;&gt;Link to a .au file&lt;/a&gt;&lt;br /&gt; &lt;a href=&quot;file.wav&quot; target=&quot;w1&quot;&gt;Link to a .wav file&lt;/a&gt;&lt;br /&gt; &lt;a href=&quot;file.mp3&quot; target=&quot;w1&quot;&gt;Link to a .mp3 file&lt;/a&gt;&lt;br /&gt; &lt;a href=&quot;file.avi&quot; target=&quot;w1&quot;&gt;Link to a .avi file&lt;/a&gt;&lt;br /&gt; &lt;a href=&quot;file.mov&quot; target=&quot;w1&quot;&gt;Link to a .mov file&lt;/a&gt;&lt;br /&gt; &lt;a href=&quot;file.ra&quot; target=&quot;w1&quot;&gt;Link to a .ra&quot;file&lt;/a&gt;&lt;br /&gt; &lt;/body&gt; &lt;/html&gt;</snpt> <tit>Embed multimedia files with &lt;embed&gt; element</tit> <p>Multimedia content can be directly inserted into the browser window using the <code>&lt;embed&gt;..&lt;/embed&gt;</code> element. </p> <p>Attributes of the <c>&lt;embed&gt;</c> element. </p> <table> <tr><th>Attributes</th><th>Description</th></tr><tr><td><c>src</c></td><td>A valid URL of the multimedia file</td></tr><tr><td><c>type</c></td><td>The MIME type associated with the multimedia file. This attribute is not necessary as the browser itself determine based on the extension.</td></tr><tr><td><c>width</c></td><td>The width of the space the browser will allocate to the multimedia file.</td></tr><tr><td><c>height</c></td><td>The height of the space the browser will allocate to the multimedia file.</td></tr><tr><td><c>align</c></td><td>The alignment used to render the content of the multimedia file relative to the other elements</td></tr><tr><td><c>hidden</c></td><td>Defines whether or not controls will be shown on the web page. Values are "true" or "false"</td></tr></table> <snpt>&lt;html&gt; &lt;head&gt;&lt;/head&gt; &lt;body&gt; &lt;table&gt; &lt;tr&gt; &lt;td&gt;&lt;embed src=&quot;logo.jpg&quot; width=&quot;100&quot; height=&quot;200&quot;&gt;&lt;/embed&gt;&lt;/td&gt; &lt;td&gt;&lt;embed src=&quot;sound.mp3&quot; width=&quot;100&quot; height=&quot;200&quot;&gt;&lt;/embed&gt;&lt;/td&gt;&lt;/tr&gt; &lt;/table&gt; &lt;/body&gt; &lt;/html&gt;</snpt> <out><html><head></head><body><table><tr><td><embed src="logo.jpg" width="100" height="200"></embed></td><td><embed src="sound.mp3" width="100" height="200"></embed></td></tr></table></body></html></out> <tit>Embed multimedia files with &lt;object&gt; element</tit> Multimedia content can be directly inserted into the browser window using the <code>&lt;object&gt;..&lt;/object&gt;</code> element. Attributes of the &lt;embed&gt; element. <table> <tr><th>Attributes</th><th>Description</th></tr><tr><td><c>data</c></td><td>A valid URL of the multimedia file</td></tr><tr><td><c>type</c></td><td>The MIME type associated with the multimedia file. This attribute is not necessary as the browser itself determine based on the extension.</td></tr><tr><td><c>classid</c></td><td>used by internet explorer to identify the ActiveX control that will be used to render the object.</td></tr><tr><td><c>width</c></td><td>The width of the space the browser will allocate to the multimedia file.</td></tr><tr><td><c>height</c></td><td>The height of the space the browser will allocate to the multimedia file.</td></tr><tr><td><c>align</c></td><td>The alignment used to render the content of the multimedia file relative to the other elements</td></tr><tr><td><c>hspace</c> & <c>vspace</c></td><td>The white space around the object</td></tr><tr><td><c>border</c></td><td>The thickness of the border around the object.</td></tr></table> <snpt>&lt;html&gt; &lt;head&gt;&lt;/head&gt; &lt;body&gt; &lt;table&gt; &lt;tr&gt; &lt;td&gt;&lt;object src=&quot;logo.jpg&quot; width=&quot;100&quot; height=&quot;200&quot;&gt;&lt;/object&gt;&lt;/td&gt; &lt;td&gt;&lt;object src=&quot;sound.mp3&quot; width=&quot;100&quot; height=&quot;200&quot;&gt;&lt;/object&gt;&lt;/td&gt;&lt;/tr&gt; &lt;/table&gt; &lt;/body&gt; &lt;/html&gt;</snpt> <tit>Embedding Applets</tit> HTML allows to embed applets directly into a web page using the <code>&lt;applet&gt;</code> element and its attributes. <table> <tr><th>Attributes</th><th>Description</th></tr><tr><td><c>width</c></td><td></td></tr><tr><td><c>height</c></td><td></td></tr><tr><td><c>code</c></td><td></td></tr><tr><td><c>archive</c></td><td></td></tr><tr><td><c>object</c></td><td></td></tr><tr><td><c>alt</c></td><td></td></tr><tr><td><c>align</c></td><td></td></tr><tr><td><c>hspace</c></td><td></td></tr><tr><td><c>vspace</c></td><td></td></tr></table> Only <c>width</c> and <c>height</c> attributes are required. <tit>Embedding Applets with parameter</tit> <p>If the applet can accept parameters, we can transmit parameters to an applet using the empty <c>&lt;param&gt;</c> element as a child of the <c>&lt;applet&gt;..&lt;/applet&gt;</c> element. The &lt;param&gt; element has two useful attributes. </p> <table> <tr><th>Attributes</th><th>Description</th></tr><tr><td><c>name</c></td><td>represents the name of the parameter. The possible values are valid identifiers.</td></tr><tr><td><c>value</c></td><td>represents the values of the parameter. The possible values are strings of characters.</td></tr></table> <tit>Embedding Applets with &lt;object&gt; element</tit> <p>The <code>&lt;applet&gt;</code> element is depreciated as per the HTML 4.01 specifications and it favours the use of <code>&lt;object&gt;</code> element.</p> <tit>ActiveX controls</tit> <p>ActiveX controls are a microsoft technology that allows you to include COM objects in other applications(for example in a web page) Before using an ActiveX control, you must know its classid (from the registry editor) and how to set its parameters. The following table presents some ActiveX controls together with classids as you can find them on the most Windows platforms. </p> button label textfield graphic calendar avi excel html Multimedia 1 1 1 4/6/2014 9:10:06 AM 12/16/2018 9:44:46 AM Edit | Details | Delete
1 Links to external multimedia files Links to external multimedia files The simplest way to add multimedia files to a webpage is to insert links using the <code>&lt;a&gt;..&lt;/a&gt;</code> element. The href attribute is set to the URL of the multimedia file you want to attach.<br />When connecting to multimedia the following things happen.<br /><br />* The browser handle the file itself and renders to display on the browser (HTML, GIF, JPG and PNG files)<br />* The browser can handle using the plug-ins (Text file, PDF files, some images , sounds and movie)<br />* The browser cannot handle the file but has access to a helper application that can handle it. (Word, Excel, and Power Point documents etc.,)<br />* The browser cannot identify a helper application and asks the user to download the file to the local file system.<br /><br /><snpt>&lt;html&gt;<br />&lt;head&gt;&lt;/head&gt;<br />&lt;body&gt;<br />Click on the below link to follow the link<br />&lt;a href=&quot;file.html&quot; target=&quot;w1&quot;&gt;Link to a .html file&lt;/a&gt;&lt;br /&gt;<br />&lt;a href=&quot;file.txt&quot; target=&quot;w1&quot;&gt;Link to a .txt file&lt;/a&gt;&lt;br /&gt;<br />&lt;a href=&quot;file.gug&quot; target=&quot;w1&quot;&gt;Link to a .gug file&lt;/a&gt;&lt;br /&gt;<br />&lt;a href=&quot;file.rtf&quot; target=&quot;w1&quot;&gt;Link to a .rtf file&lt;/a&gt;&lt;br /&gt;<br />&lt;a href=&quot;file.pdf&quot; target=&quot;w1&quot;&gt;Link to a .pdf file&lt;/a&gt;&lt;br /&gt;<br />&lt;a href=&quot;file.swf&quot; target=&quot;w1&quot;&gt;Link to a .swf file&lt;/a&gt;&lt;br /&gt;<br />&lt;a href=&quot;file.doc&quot; target=&quot;w1&quot;&gt;Link to a .doc file&lt;/a&gt;&lt;br /&gt;<br />&lt;a href=&quot;file.xls&quot; target=&quot;w1&quot;&gt;Link to a .xls file&lt;/a&gt;&lt;br /&gt;<br />&lt;a href=&quot;file.au&quot; target=&quot;w1&quot;&gt;Link to a .au file&lt;/a&gt;&lt;br /&gt;<br />&lt;a href=&quot;file.wav&quot; target=&quot;w1&quot;&gt;Link to a .wav file&lt;/a&gt;&lt;br /&gt;<br />&lt;a href=&quot;file.mp3&quot; target=&quot;w1&quot;&gt;Link to a .mp3 file&lt;/a&gt;&lt;br /&gt;<br />&lt;a href=&quot;file.avi&quot; target=&quot;w1&quot;&gt;Link to a .avi file&lt;/a&gt;&lt;br /&gt;<br />&lt;a href=&quot;file.mov&quot; target=&quot;w1&quot;&gt;Link to a .mov file&lt;/a&gt;&lt;br /&gt;<br />&lt;a href=&quot;file.ra&quot; target=&quot;w1&quot;&gt;Link to a .ra&quot;file&lt;/a&gt;&lt;br /&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt> html Links to external multimedia files 1 1 4/6/2014 9:28:46 AM 11/10/2014 12:41:40 PM Edit | Details | Delete
1 Embed multimedia files with <embed> element Embed multimedia files with <embed> element Multimedia content can be directly inserted into the browser window using the <code>&lt;embed&gt;..&lt;/embed&gt;</code> element. <br /><br />Attributes of the <c>&lt;embed&gt;</c> element.<br /><table><br /><tr><th>Attributes</th><th>Description</th></tr><tr><td><c>src</c></td><td>A valid URL of the multimedia file</td></tr><tr><td><c>type</c></td><td>The MIME type associated with the multimedia file. This attribute is not necessary as the browser itself determine based on the extension.</td></tr><tr><td><c>width</c></td><td>The width of the space the browser will allocate to the multimedia file.</td></tr><tr><td><c>height</c></td><td>The height of the space the browser will allocate to the multimedia file.</td></tr><tr><td><c>align</c></td><td>The alignment used to render the content of the multimedia file relative to the other elements</td></tr><tr><td><c>hidden</c></td><td>Defines whether or not controls will be shown on the web page. Values are "true" or "false"</td></tr></table><br /><br /><snpt>&lt;html&gt;<br />&lt;head&gt;&lt;/head&gt;<br />&lt;body&gt;<br />&lt;table&gt;<br />&lt;tr&gt;<br /> &lt;td&gt;&lt;embed src=&quot;logo.jpg&quot; width=&quot;100&quot; height=&quot;200&quot;&gt;&lt;/embed&gt;&lt;/td&gt;<br /> &lt;td&gt;&lt;embed src=&quot;sound.mp3&quot; width=&quot;100&quot; height=&quot;200&quot;&gt;&lt;/embed&gt;&lt;/td&gt;&lt;/tr&gt;<br />&lt;/table&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt><br /><br /><out><html><head></head><body><table><tr><td><embed src="logo.jpg" width="100" height="200"></embed></td><td><embed src="sound.mp3" width="100" height="200"></embed></td></tr></table></body></html></out> html embed element to Embed multimedia files 1 1 4/6/2014 9:33:35 AM 1/31/2017 9:40:27 AM Edit | Details | Delete
1 Embed multimedia files with <object> element Embed multimedia files with <object> element Multimedia content can be directly inserted into the browser window using the <code>&lt;object&gt;..&lt;/object&gt;</code> element. <br /><br />Attributes of the &lt;embed&gt; element.<br /><table><br /><tr><th>Attributes</th><th>Description</th></tr><tr><td><c>data</c></td><td>A valid URL of the multimedia file</td></tr><tr><td><c>type</c></td><td>The MIME type associated with the multimedia file. This attribute is not necessary as the browser itself determine based on the extension.</td></tr><tr><td><c>classid</c></td><td>used by internet explorer to identify the ActiveX control that will be used to render the object.</td></tr><tr><td><c>width</c></td><td>The width of the space the browser will allocate to the multimedia file.</td></tr><tr><td><c>height</c></td><td>The height of the space the browser will allocate to the multimedia file.</td></tr><tr><td><c>align</c></td><td>The alignment used to render the content of the multimedia file relative to the other elements</td></tr><tr><td><c>hspace</c> & <c>vspace</c></td><td>The white space around the object</td></tr><tr><td><c>border</c></td><td>The thickness of the border around the object.</td></tr></table><br /><br /><snpt>&lt;html&gt;<br />&lt;head&gt;&lt;/head&gt;<br />&lt;body&gt;<br />&lt;table&gt;<br />&lt;tr&gt;<br /> &lt;td&gt;&lt;object src=&quot;logo.jpg&quot; width=&quot;100&quot; height=&quot;200&quot;&gt;&lt;/object&gt;&lt;/td&gt;<br /> &lt;td&gt;&lt;object src=&quot;sound.mp3&quot; width=&quot;100&quot; height=&quot;200&quot;&gt;&lt;/object&gt;&lt;/td&gt;&lt;/tr&gt;<br /><br />&lt;/table&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt> html object element to Embed multimedia files 4 1 4/6/2014 9:37:10 AM 1/31/2017 10:39:07 AM Edit | Details | Delete
1 Embedding Applets Embedding Applets HTML allows to embed applets directly into a web page using the <code>&lt;applet&gt;</code> element and its attributes.<br /><br /><table><br /><tr><th>Attributes</th><th>Description</th></tr><tr><td><c>width</c></td><td></td></tr><tr><td><c>height</c></td><td></td></tr><tr><td><c>code</c></td><td></td></tr><tr><td><c>archive</c></td><td></td></tr><tr><td><c>object</c></td><td></td></tr><tr><td><c>alt</c></td><td></td></tr><tr><td><c>align</c></td><td></td></tr><tr><td><c>hspace</c></td><td></td></tr><tr><td><c>vspace</c></td><td></td></tr></table><br /><br />Only <c>width</c> and <c>height</c> attributes are required. html Embedding Applets 5 1 4/6/2014 9:38:44 AM 1/31/2017 11:30:59 AM Edit | Details | Delete
1 Frames Frames Frames allows simultaneously render multiple web pages. <tit>&lt;frameset&gt; element</tit> To define frames on a webpage, replace the <code>&lt;body&gt;</code> block of a standard web page with a <code>&lt;frameset&gt;..&lt;/frameset&gt;</code> block. For each page you wan to simultaneously insert, add a <code>&lt;frame&gt;</code> element inside of the <code>&lt;frameset&gt;</code> element. To define the page to be loaded in each frameset, use the <code>src</code> attribute of each <code>&lt;frame&gt;</code> element. <tit>Horizontal Frames</tit> <snpt> &lt;html&gt; &lt;head&gt;&lt;/head&gt; &lt;frameset rows=&quot;200,*&quot;&gt; &lt;frame src=&quot;p1.html&quot;&gt; &lt;frame src=&quot;p2.html&quot;&gt; &lt;/frameset&gt; &lt;html&gt;</snpt> <tit>Vertical Frames</tit> <snpt>&lt;html&gt; &lt;head&gt;&lt;/head&gt; &lt;frameset col=&quot;200,*,10%&quot;&gt; &lt;frame src=&quot;p1.html&quot;&gt; &lt;frame src=&quot;p2.html&quot;&gt; &lt;frame src=&quot;p3.html&quot;&gt; &lt;/frameset&gt; &lt;html&gt;</snpt> <tit>Grid of Frames</tit> Grid of frames can be defined by setting both the rows and cols attributes. rows="200, *, 2* cols="30%, *" represents the following * A grid of frames 3 rows by 2 columns * The top rrow is 200 pixels high and and the rest is divided into 3 equal paryd . the bottom rows cover two thirds. * The left column cover 30% of the width of the browser, the right column cover the rest. <snpt>&lt;html&gt; &lt;head&gt;&lt;/head&gt; &lt;frameset col=&quot;200,*,2*&quot; cols=&quot;30%,*&quot;&gt; &lt;frame src=&quot;p1.html&quot;&gt; &lt;frame src=&quot;p2.html&quot;&gt; &lt;frame src=&quot;p3.html&quot;&gt; &lt;frame src=&quot;p4.html&quot;&gt; &lt;frame src=&quot;p5.html&quot;&gt; &lt;frame src=&quot;p6.html&quot;&gt; &lt;/frameset&gt; &lt;html&gt;</snpt> <tit>Nested Frameset</tit> <snpt>&lt;html&gt; &lt;head&gt;&lt;/head&gt; &lt;frameset col=&quot;150,*,10%&quot;&gt; &lt;frame src=&quot;p1.html&quot;&gt; &lt;frameset rows=&quot;100,*&quot;&gt; &lt;frame src=&quot;logo.gif&quot; noresize&gt; &lt;frame src=&quot;p1.html&quot;&gt; &lt;frame src=&quot;p2.html&quot;&gt; &lt;/frameset&gt; &lt;frame src=&quot;p3.html&quot;&gt; &lt;/frameset&gt; &lt;html&gt;</snpt> <tit>&lt;frameset&gt; attributes</tit> The frameset element accepts attributes to describe the content and thepprearance of the frame cols => +ive integers, % - size as parent frome, n* - where n defines the equal parts of the rest of the space. rows - horizontal division of the frameset border - defines the thickness of the inner frame bordercolor - defines the color of the borders. frameborder - Border visible or not. The possible values are "yes" and "no" framespacing - similar to frameborder (only internet explorer) <snpt>&lt;html&gt; &lt;head&gt;&lt;/head&gt; &lt;frameset rows=&quot;150,*,10%,100&quot; cols=&quot;*,*,*&quot; frameborder=&quot;no&quot;&gt; &lt;frameset cols=&quot;100,5*,*,105&quot; border=&quot;15&quot; bordercolor=&quot;#ff0000&quot; frameborder=&quot;yes&quot;&gt; &lt;frame src=&quot;logo.gif&quot; noresize&gt; &lt;frame src=&quot;p1.html&quot;&gt; &lt;frame src=&quot;p2.html&quot;&gt; &lt;frame src=&quot;p3.html&quot;&gt; &lt;frame src=&quot;p4.html&quot;&gt; &lt;/frameset&gt; &lt;frame src=&quot;p5.html&quot; marginwidth=&quot;100&quot; scrolling=&quot;yes&quot;&gt; &lt;frame src=&quot;p2.html&quot; marginwidth=&quot;100&quot; bordercolor=&quot;blue&quot;&gt; &lt;/frameset&gt; &lt;html&gt;</snpt> <tit>&lt;frame&gt; attributes</tit> border color frameborder margin height marginwidth name noresize scrolling => auto, yes, no src <snpt>&lt;html&gt; &lt;head&gt;&lt;/head&gt; &lt;frameset rows=&quot;*,3*&quot; cols=&quot;*,*,*&quot; frameborder=&quot;yes&quot; bordercolor=&quot;green&quot;&gt; &lt;frame src=&quot;logo.gif&quot; noresize&gt; &lt;frame src=&quot;p2.html&quot; marginwidth=&quot;100&quot; scrolling=&quot;yes&quot;&gt; &lt;frame src=&quot;p3.html&quot; frameborder=&quot;no&quot; longdesc=&quot;http://quotefellas.coom&quot;&gt; &lt;frame src=&quot;src.pdf&quot;&gt; &lt;frame src=&quot;p5.html&quot; marginwidth=&quot;100&quot; scrolling=&quot;yes&quot;&gt; &lt;frame src=&quot;p2.html&quot; marginwidth=&quot;100&quot; bordercolor=&quot;blue&quot;&gt; &lt;/frameset&gt; &lt;html&gt;</snpt> <tit>Targets</tit> The link target of the window or the frame. _self _blank _parent _top html Frames 1 1 4/6/2014 10:21:30 AM 12/16/2018 9:57:49 AM Edit | Details | Delete
1 Horizontal Frames Horizontal Frames <snpt><br />&lt;html&gt;<br />&lt;head&gt;&lt;/head&gt;<br />&lt;frameset rows=&quot;200,*&quot;&gt;<br />&lt;frame src=&quot;p1.html&quot;&gt;<br />&lt;frame src=&quot;p2.html&quot;&gt;<br />&lt;/frameset&gt;<br />&lt;html&gt;</snpt> html Horizontal Frames 2 1 4/6/2014 10:22:59 AM 11/10/2014 12:31:04 PM Edit | Details | Delete
1 Vertical Frames Vertical Frames <br /><br /><snpt>&lt;html&gt;<br />&lt;head&gt;&lt;/head&gt;<br />&lt;frameset col=&quot;200,*,10%&quot;&gt;<br />&lt;frame src=&quot;p1.html&quot;&gt;<br />&lt;frame src=&quot;p2.html&quot;&gt;<br />&lt;frame src=&quot;p3.html&quot;&gt;<br />&lt;/frameset&gt;<br />&lt;html&gt;</snpt> html Vertical Frames 3 1 4/6/2014 10:25:02 AM 11/9/2014 8:14:47 AM Edit | Details | Delete
1 Vertical Frames Vertical Frames <br /><br /><snpt>&lt;html&gt;<br />&lt;head&gt;&lt;/head&gt;<br />&lt;frameset col=&quot;200,*,10%&quot;&gt;<br />&lt;frame src=&quot;p1.html&quot;&gt;<br />&lt;frame src=&quot;p2.html&quot;&gt;<br />&lt;frame src=&quot;p3.html&quot;&gt;<br />&lt;/frameset&gt;<br />&lt;html&gt;</snpt> html Vertical Frames 3 1 4/6/2014 10:36:11 AM 11/9/2014 8:14:47 AM Edit | Details | Delete
1 <frameset> element <frameset> element <br /><br />To define frames on a webpage, replace the <code>&lt;body&gt;</code> block of a standard web page with a <code>&lt;frameset&gt;..&lt;/frameset&gt;</code> block. For each page you wan to simultaneously insert, add a <code>&lt;frame&gt;</code> element inside of the <code>&lt;frameset&gt;</code> element.<br />To define the page to be loaded in each frameset, use the <code>src</code> attribute of each <code>&lt;frame&gt;</code> element. html frameset element 2 1 4/6/2014 10:38:28 AM 11/9/2014 8:14:47 AM Edit | Details | Delete
1 Grid of Frames Grid of Frames Grid of frames can be defined by setting both the rows and cols attributes. rows="200, *, 2* cols="30%, *" represents the following<br /><br />* A grid of frames 3 rows by 2 columns<br />* The top rrow is 200 pixels high and and the rest is divided into 3 equal paryd . the bottom rows cover two thirds.<br />* The left column cover 30% of the width of the browser, the right column cover the rest.<br /><br /><snpt>&lt;html&gt;<br />&lt;head&gt;&lt;/head&gt;<br />&lt;frameset col=&quot;200,*,2*&quot; cols=&quot;30%,*&quot;&gt;<br />&lt;frame src=&quot;p1.html&quot;&gt;<br />&lt;frame src=&quot;p2.html&quot;&gt;<br />&lt;frame src=&quot;p3.html&quot;&gt;<br />&lt;frame src=&quot;p4.html&quot;&gt;<br />&lt;frame src=&quot;p5.html&quot;&gt;<br />&lt;frame src=&quot;p6.html&quot;&gt;<br />&lt;/frameset&gt;<br />&lt;html&gt;</snpt> html Grid of Frames 5 1 4/6/2014 10:44:59 AM 11/9/2014 8:14:47 AM Edit | Details | Delete
1 Nested Frameset Nested Frameset <br /><snpt>&lt;html&gt;<br />&lt;head&gt;&lt;/head&gt;<br />&lt;frameset col=&quot;150,*,10%&quot;&gt;<br /> &lt;frame src=&quot;p1.html&quot;&gt;<br /> &lt;frameset rows=&quot;100,*&quot;&gt;<br /> &lt;frame src=&quot;logo.gif&quot; noresize&gt;<br /> &lt;frame src=&quot;p1.html&quot;&gt;<br /> &lt;frame src=&quot;p2.html&quot;&gt;<br /> &lt;/frameset&gt;<br /> &lt;frame src=&quot;p3.html&quot;&gt;<br />&lt;/frameset&gt;<br />&lt;html&gt;</snpt> html Frames Nested Frameset 7 1 4/6/2014 10:46:59 AM 11/9/2014 8:14:47 AM Edit | Details | Delete
1 <frameset> attributes <frameset> attributes <br />The frameset element accepts attributes to describe the content and thepprearance of the frame<br /><br />cols => +ive integers, % - size as parent frome, n* - where n defines the equal parts of the rest of the space.<br />rows - horizontal division of the frameset<br />border - defines the thickness of the inner frame<br />bordercolor - defines the color of the borders.<br />frameborder - Border visible or not. The possible values are "yes" and "no"<br />framespacing - similar to frameborder (only internet explorer)<br /><br /><snpt>&lt;html&gt;<br />&lt;head&gt;&lt;/head&gt;<br />&lt;frameset rows=&quot;150,*,10%,100&quot; cols=&quot;*,*,*&quot; frameborder=&quot;no&quot;&gt;<br /> &lt;frameset cols=&quot;100,5*,*,105&quot; border=&quot;15&quot; bordercolor=&quot;#ff0000&quot; frameborder=&quot;yes&quot;&gt;<br /> &lt;frame src=&quot;logo.gif&quot; noresize&gt;<br /> &lt;frame src=&quot;p1.html&quot;&gt;<br /> &lt;frame src=&quot;p2.html&quot;&gt;<br /> &lt;frame src=&quot;p3.html&quot;&gt;<br /> &lt;frame src=&quot;p4.html&quot;&gt;<br /> &lt;/frameset&gt;<br />&lt;frame src=&quot;p5.html&quot; marginwidth=&quot;100&quot; scrolling=&quot;yes&quot;&gt;<br />&lt;frame src=&quot;p2.html&quot; marginwidth=&quot;100&quot; bordercolor=&quot;blue&quot;&gt;<br />&lt;/frameset&gt;<br />&lt;html&gt;</snpt> html frameset attributes 7 1 4/6/2014 10:50:13 AM 11/9/2014 8:14:47 AM Edit | Details | Delete
1 <frame> attributes <frame> attributes <br />border color<br />frameborder<br />margin height<br />marginwidth<br />name<br />noresize<br />scrolling => auto, yes, no<br />src<br /><br /><snpt>&lt;html&gt;<br />&lt;head&gt;&lt;/head&gt;<br />&lt;frameset rows=&quot;*,3*&quot; cols=&quot;*,*,*&quot; frameborder=&quot;yes&quot; bordercolor=&quot;green&quot;&gt;<br />&lt;frame src=&quot;logo.gif&quot; noresize&gt;<br />&lt;frame src=&quot;p2.html&quot; marginwidth=&quot;100&quot; scrolling=&quot;yes&quot;&gt;<br />&lt;frame src=&quot;p3.html&quot; frameborder=&quot;no&quot; longdesc=&quot;http://quotefellas.coom&quot;&gt;<br />&lt;frame src=&quot;src.pdf&quot;&gt;<br />&lt;frame src=&quot;p5.html&quot; marginwidth=&quot;100&quot; scrolling=&quot;yes&quot;&gt;<br />&lt;frame src=&quot;p2.html&quot; marginwidth=&quot;100&quot; bordercolor=&quot;blue&quot;&gt;<br />&lt;/frameset&gt;<br />&lt;html&gt;</snpt> html <frame> attributes 8 1 4/6/2014 10:54:28 AM 11/9/2014 8:14:47 AM Edit | Details | Delete
1 Targets Targets The link target of the window or the frame.<br /><br />_self<br />_blank<br />_parent<br />_top html frame Targets 10 1 4/6/2014 10:55:41 AM 11/9/2014 8:14:46 AM Edit | Details | Delete
1 In-line Frames In-line Frames Inline frame can be inserted anywhere inside a web page. To use inline frame, use the <code>&lt;iframe&gt;...&lt;/iframe&gt;</code> element. <snpt>&lt;html&gt; &lt;head&gt;&lt;/head&gt; This is the text before the iframe &lt;iframe src=&quot;page1.html&quot; align=&quot;left&quot;&gt;iframe1&lt;/iframe&gt; &lt;iframe src=&quot;page2.html&quot; align=&quot;right&quot; width=&quot;350&quot; height=&quot;200&quot;&gt;iframe2&lt;/iframe&gt; &lt;html&gt;</snpt> <out><html><head></head>This is the text before the iframe<iframe src="page1.html" align="left">iframe1</iframe><iframe src="page2.html" align="right" width="350" height="200">iframe2</iframe><html></out> html In-line Frames 10 1 4/6/2014 10:57:52 AM 12/15/2018 5:28:25 AM Edit | Details | Delete
1 html Forms html Forms <p>The world wide web(www) was designed to be an interactive technology. Html forms allow the users to enter parameters which will be posted to the server and the server responds to it accordingly. By this way a dynamic behaviour will be added to the website. To interact with the server we need the server side programming languages such as Asp, Java, Jsp, Php and other programming languages.</p> <tit>Text Field Element</tit> <p>If we need to feed the parameters into a web page, insert a text field element. To do this, use <code>&lt;input&gt;</code>element with the type attribute set to "text" </p> <p>The text input given by the user can be read by a client side application coded in JavaScript or other client side application. <tit>&lt;form&gt; element</tit> The <code>&lt;form&gt;..&lt;/form&gt;</code> element is used to encapsulate the related text fields and other form elements.</p> <note> - We can include as many form elements. - <code>&lt;form&gt;</code> elements cannot be nested one inside the other. - To distinguish a <form> element from another element "name" attribute is used.</note> <tit>attributes of text field element</tit> <p>The text field element has attributes other than the <i>name</i> and <i>type</i>. </p> disabled - It is use to disable the text field. The user cannot select the text field and the content of the field cannot be send to the server. maxlength - It is used to define the maximum number of characters that can be typed. The possible values are positive integers. readonly - It is used to prevent the user from changing the content of the text field. size - It is used to define the length of the text field in characters. if the size is less than maxlength, a horizontal scroll bar may appear. The possible values are positive integers. value - to set the initial value or default, value of the text field; the possible values are double quoted strings. <tit>attributes of the &lt;form&gt; element</tit> <p>The attributes of the <code>&lt;form&gt;</code> element.</p> <p>The <code>&lt;form&gt;</code> element can be used by client-side or server-side applications to read data entered by the user and write the results from the web applications. </p> action - to define the receiver of the form data. If the attribute is missing, the web page itself us consider to be the receiver. The possible values are - The url of the web application to process the data(www.rookienerd.com/css/stylesheet.css) - A valid email address to send the data via mailto protocol (eg: "mailto:contactus@rookienerd.com) - method to define the method used to send the form data. The possible values are = GET - to attach data to the URL string using name/ value syntax (default setting) = POST - to send data to the server in a separate transaction. - enctype - to define the method used to encode data before sending it to the server. - target - to define a new browser window in which the results will appear. <tit>Encoding the data</tit> <p>The browser encodes the forms data before sending it to the receiver. The technique used to encode depends on the value of the enctype attribute. The possible values of this attributes are</p> <p>- "application/x-www-form-urlencoded" used in conjunction with the GET method(default settings) - the data is sent as a list of name=value pairs separated by and symbols. - Any white space is replaced by a +symbol. - Any non-alphanumeric character is replaced by % plus the ASCII code for that character. - Line brakes are replaced by %0D%0A% (CR/ LF) - "text/plain" used in conjunction with the mailto action for sending data by e-mail. This case is similar to the preceding case, but the white spaces are not by +symbols. -"multiform/form-data" used in conjunction with the POST method to send images or files to the server (i.e uploading) </p> <tit>Sending form data by email</tit> <p>To send the data to the receiver from the user filled data of the form fields, a submit button must be included in the <code>&lt;form&gt;</code> element. </p> <code>&lt;input type=&quot;submit&quot;&gt;</code> <tit>attributes of the submit button element</tit> <p>The following are the attributes of the submit button. </p> <p>disabled - disables the submit button. name - it is the identifier for the element. value -represents the label that will appear on the button (<i>default value is Submit Query</i>) </p> <note>- A default button sends the form data but does not send the data about itself. - A named button sends the form data and includes data about itself (see "cus=Send Data")</note> <tit>password element</tit> <p> The password element is similar to the text field and accepts the same attributes. </p> <p>The value for the type attribute is "password" The value attribute of this element is required. When the user fills this field, the characters are not sown (* symbol appears in the field for each character typed) When the data is submitted, the real string of characters typed by the user will be sent to the server. </p> <tit>hidden element</tit> <p>The hidden element is a special form element. It is special because it exists in the code of the page but it not rendered by the browser. It is used in the following way. </p> <p>- To pass information between web application pages. - To add an identifier to the form the element belongs to . </p> <p>To insert a hidden element into a form, use the &lt;input&gt; element with the type attribute set to a "hidden". Two other attributes are required name and value. </p> <tit>checkbox</tit> <p>The checkbox is an <code>&lt;input&gt;</code> element that can be selected or deselected by the user. Only the selected checkboxes are included in the submitted by the browser. The submitted checkboxes follow the standard syntax name1=value1 & name2=value2 </p> <p>name1 - the value of the name attribute of the checkbox <code>&lt;input&gt;</code> element and value1 - the value of the value attribute of the same checkbox <code>&lt;input&gt;</code> element. To insert a checkbox, use the <code>&lt;input&gt;</code> element with the type attribute set to "checkbox". There is another attribute that can be used in conjunction with the checkbox element. checked for when the default state of the checkbox element is selected </p> <note>It is possible to have more than one checkbox with the same name. All these elements are submitted if the user selects them. If the value attribute is not included, only the selected checkboxes will be submitted to the receiver, using a syntax like: "checkbox_name=on". It is recommended that you avoid this situation.</note> <tit>radio button element</tit> <p>The radio button is very similar to the checkbox. It uses the same syntax and attributes. </p> <p>- The value of the type attribute is "radio" - The user can select only one radio button in a group at a time(radio button are grouped according to the name attribute) - The browser renders them in the radio button style. </p> <note>If none of the radio button in a group is selected, then no data is sent from the group. If an element in a group of radio elements is selected and this element has a value attribute, data is submitted using the syntax: "radio_button_name=radio_button_value" If an element in a group of radio elements is selected and this element doesn't have a value attribute, data is submitted using the syntax "radio_button_name=on". It is recommended that you avoid this scenario.</note> <tit>&lt;textarea&gt; element</tit> <p>The <code>&lt;textarea&gt;</code> element allows you to attach a multiline text field to a <form> block. To do this, include a <code>&lt;textarea&gt;..&lt;/textarea&gt;</code> element inside the <code>&lt;form&gt;</code> block.</p> <tit>attributes for the &lt;textarea&gt; element</tit> <p>The following are attributes of the <code>&lt;textarea&gt;</code> element </p> <p>disabled - to disable the element so the user cannot select it and the browser doesn't submit its value. readonly - the user cannot change its content cols - to determine the horizontal size in characters of the visible area allocated to the element (if the line typed doesn't fit a horizontal scrolling appears) rows - to determine the number of lines allocated to the element for the visible area (if the typed text doesn't fit a vertical scroll bar will appear) wrap - to determine how CR/ LF characters (line breaks) are handled. THe possible values are - off - so the user can insert the CR/ LF characters. These characters will be submitted as %0D%0A% - soft or virtual (default value) - the text is visually wrapped inside the text area element, but only the user -entered CR/ LF characters will be submitted. - hard or physical - the text is visually and automatically wrapped and the CR/ LF sequences are automatically inserted. These automatically inserted sequences will be submitted together with other similar sequences inserted by the user.</p> <tit>The reset button</tit> <p>HTML allows to add other kind of buttons to a form element. </p> <p>To clear the content of the form fields and reset them to their values (clear any changes made by the user), use a reset button. This can be added to a form element by including an <code>&lt;input&gt;</code> element with the type attribute set to "reset". </p> <p>The following are the attributes of the reset button.</p> <p>disabled - disables the submit button. name - it is the identifier for the element. value -represents the label that will appear on the button (default value is "Reset") </p> <tit>generic &lt;input&gt; button</tit> <p>To attach a generic button without any default behaviour to a form, use the <code>&lt;input&gt;</code> element with the type attribute set to "button". </p> <note>Notes All the <code>&lt;input&gt;</code> button attributes (disabled, name and value) apply to this button. More than one generic button can be attached to the same <code>&lt;form&gt;</code> element. Name attribute is used to differentiate them. To add specific behaviour to an <code>&lt;input&gt;</code> button, use javascript or another client side javascript programming language is used. Generic <code>&lt;input&gt;</code> buttons do not add name=value pairs to the forms data sent by the browser, but submit buttons do. </note> <tit>The image button</tit> <p>We can add an image button to a form by using the <code>&lt;input&gt;</code> element with the type attributes set to "image". Other useful attributes for the image button ate </p> <p>src - to specify the URL of the image name - to identify the image align - to align the image relative to the other elements disabled - to disable the element </p> <note>Each time the user clicks on the image, the form data is submitted, so the submit button is not needed. The data submitted by the image button is in the format element_name.x=x-coordinate, element_name.y=y-coordinate where - element_name - the vaue of the name attribute element assigned to the image element - x-coordinate and y-coordinate are the x and y coordinates respectively The image button is is a server side image map and the server should have an application that reads and processes the data submitted. More than one image button can be attached to the same <form> element. Name attribute must be used to differentiate them.</note> <tit>The &lt;button&gt; button</tit> <p>We can use the <code>&lt;button&gt;..&lt;/button&gt;</code> element instead of <code>&lt;input&gt;</code> inside the html form element to create the button. </p> <note>The <code>&lt;button&gt;</code> button has the attributes as the <code>&lt;input&gt;</code> button (name, value, type & disabled) The type attribute determines the behaviour of the button. The possible values are - button (default value) - reset - submit - We can add content (text, images, formatting styles, etc.) to the body of the <code>&lt;button&gt;</code> button to create custom-made buttons. Only the clicked button adds a name=value pair to the data submitted by the form. The reset button doesn't submit any data (it resets the default values for the forms fields) Only the reset button doesn't submit the form's data.</note> <tit>Uploading a file</tit> The <code>&lt;input&gt;</code> element allows you to attach a file from the local system to the form and submit it together with the form's field data. It is done using the <code>&lt;input&gt;</code> element with the type attribute set to "file" <note>The file can be any type. The form will render a text field (to enter a file name and associated path) and a Browse button(to navigate the directory structure to the file) Both allow you to identify which will be uploaded. More than one file can be uploaded using a <code>&lt;form&gt;</code> element. The name attribute must be used to distinguish them. The &lt;form&gt; element must have the these attributes. -method="POST" -enctype="multiform/form-data" -action=URL of the server application that will get and process the files. </note> <tit>The &lt;select&gt; list</tit> <p>The <code>&lt;select&gt;</code> list allows you to group related items into a list, In this way, the <code>&lt;select&gt;</code> list is similar to a group of check boxes or radio buttons. </p> <p>If only one list item is visible at a time, the <code>&lt;select&gt;</code> list is rendered similarly to a pop-up menu, and only one list item can be selected at a times. If many list items are visible at a time, the <code>&lt;select&gt;</code> list is rendered similarly to a scrolling list. In this case, only one list item can be selected at a time(default behaviour and is similar to a radio button group), or multiple items can be attached(similar in behaviour to a checkbox group) To define a <code>&lt;select&gt;</code> list, use the <code>&lt;select&gt;..&lt;/select&gt;</code> element. To define list items, inset <code>&lt;option&gt;</code> elements into the body of the <code>&lt;select&gt;</code> element. </p> <note>To uniquely identify which list items are selected, add a name attribute to the <code>&lt;select&gt;</code> element and a value attribute to each <code>&lt;option&gt;</code> element. The enduing tag for the &lt;option&gt; element is optional in HTML and required in XHTML. By default, a <code>&lt;select&gt;</code> list is rendered with a single item visible (similar to a popup menu). To change this setting, add a size attribute to the <code>&lt;select&gt;</code> element to define the number of visible items (in this case, the list is rendered as a scrolling list) For each item selected, a name=value pair is added to the form's data, where name is the value of the name attribute <code>&lt;select&gt;</code> list and value is the value attribute of the selected list element. You can insert many <code>&lt;select&gt;</code> lists into the same <code>&lt;form&gt;</code> element.</note> <tit>The multiple &lt;select&gt; list</tit> <p>Only one item on the <code>&lt;select&gt;</code> list can be selected at a time and submitted with the forms data. To change this setting, add the multiple attribute to the <code>&lt;select&gt;</code> tag. To select a range of list elements, the user must hold down the SHIFT key and click on the first and the last items in the range. To select the only the required particular items, the user must hold down the CRL key and click on each item to be included. </p> <note>The multiple attribute works only if the size attribute is set to a value greater than 1. For each selected item, a name=value pair is added to the forms data. If the value attribute for an item in the <code>&lt;select&gt;</code> list is not defined, the content of the <code>&lt;option&gt;..&lt;/option&gt;</code> block is used in the submitted data.</note> <tit>attributes of form element </tit> <p>The following are the possible attributes of the form elements. </p> <p>accesskey - to define a shortcut to execute a command specific to that element and/or place the focus around that element. The possible values are any double- quoted character(e.g "exer"). To get the focus or execute the command, the user must hold down the ALT key and press the appropriate character (e.g ALT+t) tabindex - to define a different order of navigation between the forms elements when using the TAB key (the default order is given by the order in which the element are added to the form). The possible values are "0" or any positive integer. </p> html Forms 1 1 4/7/2014 6:45:52 PM 12/16/2018 9:47:02 AM Edit | Details | Delete
1 Text Field Element text field element If we need to feed the parameters into a web page, insert a text field element. To do this, use <code>&lt;input&gt;</code>element with the type attribute set to "text"<br /><br />The text input given by the user can be read by a client side application coded in JavaScript or other client side application. html text field element 2 1 4/7/2014 6:47:21 PM 3/10/2015 6:15:54 PM Edit | Details | Delete
1 <form> element <form> element The <code>&lt;form&gt;..&lt;/form&gt;</code> element is used to encapsulate the related text fields and other form elements.<br /> <br /><note> - We can include as many form elements.<br /> - <code>&lt;form&gt;</code> elements cannot be nested one inside the other.<br /> - To distinguish a <form> element from another element "name" attribute is used.</note><br /> html form element 3 1 4/7/2014 6:49:40 PM 11/7/2014 9:40:46 AM Edit | Details | Delete
1 attributes of text field element attributes of text field element The text field element has attributes other than the <i>name</i> and <i>type</i>.<br /> <br /> disabled - It is use to disable the text field. The user cannot select the text field and the content of the field cannot be send to the server.<br /> maxlength - It is used to define the maximum number of characters that can be typed. The possible values are positive integers.<br /> readonly - It is used to prevent the user from changing the content of the text field.<br /> size - It is used to define the length of the text field in characters. if the size is less than maxlength, a horizontal scroll bar may appear. The possible values are positive integers.<br /> value - to set the initial value or default, value of the text field; the possible values are double quoted strings.<br /> attributes of text field element 4 1 4/7/2014 6:51:16 PM 11/7/2014 9:40:46 AM Edit | Details | Delete
1 attributes of the <form> element attributes of the <form> element The attributes of the <code>&lt;form&gt;</code> element<br /><br /> The <code>&lt;form&gt;</code> element can be used by client-side or server-side applications to read data entered by the user and write the results from the web applications.<br /><br /> action - to define the receiver of the form data. If the attribute is missing, the web page itself us consider to be the receiver.<br /> The possible values are <br /> - The url of the web application to process the data(www.rookienerd.com/css/stylesheet.css)<br /> - A valid email address to send the data via mailto protocol (eg: "mailto:contactus@rookienerd.com)<br /> - method to define the method used to send the form data. The possible values are<br /> <br /><br />= GET - to attach data to the URL string using name/ value syntax (default setting)<br /> = POST - to send data to the server in a separate transaction.<br /><br /><br /> - enctype - to define the method used to encode data before sending it to the server.<br /> - target - to define a new browser window in which the results will appear.<br /> html attributes of the form element 5 1 4/7/2014 6:52:17 PM 3/11/2015 6:28:02 PM Edit | Details | Delete
1 Encoding the data Encoding the data The browser encodes the forms data before sending it to the receiver. The technique used to encode depends on the value of the enctype attribute. The possible values of this attributes are<br /> <br /> - "application/x-www-form-urlencoded" used in conjunction with the GET method(default settings)<br /> - the data is sent as a list of name=value pairs separated by and symbols.<br /> - Any white space is replaced by a +symbol.<br /> - Any non-alphanumeric character is replaced by % plus the ASCII code for that character.<br /> - Line brakes are replaced by %0D%0A% (CR/ LF)<br /> - "text/plain" used in conjunction with the mailto action for sending data by e-mail. This case is similar to the preceding case, but the white spaces are not by +symbols.<br /> -"multiform/form-data" used in conjunction with the POST method to send images or files to the server (i.e uploading)<br /> html forms Encoding the data 6 1 4/7/2014 6:53:22 PM 11/7/2014 9:40:46 AM Edit | Details | Delete
1 Sending form data by email Sending form data by email To send the data to the receiver from the user filled data of the form fields, a submit button must be included in the <code>&lt;form&gt;</code> element.<br /> <br /><code>&lt;input type=&quot;submit&quot;&gt;</code> Sending form data by email 7 1 4/7/2014 6:56:18 PM 11/7/2014 9:40:46 AM Edit | Details | Delete
1 attributes of the submit button element attributes of the submit button element The following are the attributes of the submit button.<br /> <br /> disabled - disables the submit button.<br /> name - it is the identifier for the element.<br /> value -represents the label that will appear on the button (<i>default value is Submit Query</i>)<br /> <br /><note>- A default button sends the form data but does not send the data about itself.<br />- A named button sends the form data and includes data about itself (see "cus=Send Data")</note><br /> attributes of the submit button element 8 1 4/7/2014 6:57:39 PM 11/7/2014 9:40:46 AM Edit | Details | Delete
1 password element password element The password element is similar to the text field and accepts the same attributes.<br /><br /> The value for the type attribute is "password"<br /> The value attribute of this element is required.<br /> When the user fills this field, the characters are not sown (* symbol appears in the field for each character typed) When the data is submitted, the real string of characters typed by the user will be sent to the server.<br /> html form password element 9 1 4/7/2014 6:58:56 PM 11/7/2014 9:40:46 AM Edit | Details | Delete
1 hidden element hidden element The hidden element is a special form element. It is special because it exists in the code of the page but it not rendered by the browser. It is used in the following way.<br /><br />- To pass information between web application pages.<br />- To add an identifier to the form the element belongs to .<br /><br />To insert a hidden element into a form, use the <input> element with the type attribute set to a "hidden". Two other attributes are required name and value.<br /> html form hidden element 10 1 4/7/2014 7:01:13 PM 11/7/2014 9:40:46 AM Edit | Details | Delete
1 checkbox checkbox The checkbox is an <code>&lt;input&gt;</code> element that can be selected or deselected by the user. Only the selected checkboxes are included in the submitted by the browser. The submitted checkboxes follow the standard syntax name1=value1 & name2=value2<br /><br />name1 - the value of the name attribute of the checkbox <code>&lt;input&gt;</code> element and<br />value1 - the value of the value attribute of the same checkbox <code>&lt;input&gt;</code> element. <br /> To insert a checkbox, use the <code>&lt;input&gt;</code> element with the type attribute set to "checkbox". There is another attribute that can be used in conjunction with the checkbox element.<br />checked for when the default state of the checkbox element is selected<br /><br /><note>It is possible to have more than one checkbox with the same name. All these elements are submitted if the user selects them.<br />If the value attribute is not included, only the selected checkboxes will be submitted to the receiver, using a syntax like: "checkbox_name=on". It is recommended that you avoid this situation.</note> html checkbox 11 1 4/7/2014 7:05:24 PM 11/7/2014 9:40:46 AM Edit | Details | Delete
1 radio button element radio button element The radio button is very similar to the checkbox. It uses the same syntax and attributes.<br /><br />- The value of the type attribute is "radio"<br />- The user can select only one radio button in a group at a time(radio button are grouped according to the name attribute)<br />- The browser renders them in the radio button style.<br /><br /><note>If none of the radio button in a group is selected, then no data is sent from the group.<br />If an element in a group of radio elements is selected and this element has a value attribute, data is submitted using the syntax: "radio_button_name=radio_button_value"<br />If an element in a group of radio elements is selected and this element doesn't have a value attribute, data is submitted using the syntax "radio_button_name=on". It is recommended that you avoid this scenario.</note><br /> html radio button element 12 1 4/7/2014 7:07:18 PM 11/7/2014 9:40:46 AM Edit | Details | Delete
1 The <textarea> element The <textarea> element The <code>&lt;textarea&gt;</code> element allows you to attach a multiline text field to a <form> block. To do this, include a <code>&lt;textarea&gt;..&lt;/textarea&gt;</code> element inside the <code>&lt;form&gt;</code> block. html textarea element 13 1 4/7/2014 7:08:55 PM 11/7/2014 9:40:45 AM Edit | Details | Delete
1 attributes for the <textarea> element attributes for the <textarea> element The following are attributes of the <code>&lt;textarea&gt;</code> element<br /><br />disabled - to disable the element so the user cannot select it and the browser doesn't submit its value.<br />readonly - the user cannot change its content<br />cols - to determine the horizontal size in characters of the visible area allocated to the element (if the line typed doesn't fit a horizontal scrolling appears)<br />rows - to determine the number of lines allocated to the element for the visible area (if the typed text doesn't fit a vertical scroll bar will appear)<br />wrap - to determine how CR/ LF characters (line breaks) are handled. THe possible values are<br /> - off - so the user can insert the CR/ LF characters. These characters will be submitted as %0D%0A%<br /> - soft or virtual (default value) - the text is visually wrapped inside the text area element, but only the user -entered CR/ LF characters will be submitted.<br /> - hard or physical - the text is visually and automatically wrapped and the CR/ LF sequences are automatically inserted. These automatically inserted sequences will be submitted together with other similar sequences inserted by the user. attributes for the textarea element 14 1 4/7/2014 7:11:08 PM 11/7/2014 9:40:45 AM Edit | Details | Delete
1 The reset button The reset button HTML allows to add other kind of buttons to a form element. <br /><br />To clear the content of the form fields and reset them to their values (clear any changes made by the user), use a reset button. This can be added to a form element by including an <code>&lt;input&gt;</code> element with the type attribute set to "reset".<br /><br />The following are the attributes of the reset button.<br /><br />disabled - disables the submit button.<br />name - it is the identifier for the element.<br />value -represents the label that will appear on the button (default value is "Reset")<br /> html reset button 15 1 4/7/2014 7:14:55 PM 11/7/2014 9:40:45 AM Edit | Details | Delete
1 generic <input> button generic <input> button To attach a generic button without any default behaviour to a form, use the <code>&lt;input&gt;</code> element with the type attribute set to "button".<br /><br />Notes<br />All the <code>&lt;input&gt;</code> button attributes (disabled, name and value) apply to this button.<br />More than one generic button can be attached to the same <code>&lt;form&gt;</code> element. Name attribute is used to differentiate them.<br />To add specific behaviour to an <code>&lt;input&gt;</code> button, use javascript or another client side javascript programming language is used.<br />Generic <code>&lt;input&gt;</code> buttons do not add name=value pairs to the forms data sent by the browser, but submit buttons do.<br /> generic input button 16 1 4/7/2014 7:18:40 PM 11/7/2014 9:40:45 AM Edit | Details | Delete
1 The image button The image button We can add an image button to a form by using the <code>&lt;input&gt;</code> element with the type attributes set to "image". Other useful attributes for the image button ate<br /><br />src - to specify the URL of the image<br />name - to identify the image<br />align - to align the image relative to the other elements <br />disabled - to disable the element<br /><br /><note>Each time the user clicks on the image, the form data is submitted, so the submit button is not needed.<br />The data submitted by the image button is in the format element_name.x=x-coordinate, element_name.y=y-coordinate where<br /> - element_name - the vaue of the name attribute element assigned to the image element<br /> - x-coordinate and y-coordinate are the x and y coordinates respectively<br />The image button is is a server side image map and the server should have an application that reads and processes the data submitted.<br />More than one image button can be attached to the same <form> element. Name attribute must be used to differentiate them.</note><br /><br /> html image button 17 1 4/7/2014 7:20:21 PM 11/7/2014 9:40:45 AM Edit | Details | Delete
1 The <button> button The <button> button We can use the <code>&lt;button&gt;..&lt;/button&gt;</code> element instead of <code>&lt;input&gt;</code> inside the html form element to create the button.<br /><br /><note>The <code>&lt;button&gt;</code> button has the attributes as the <code>&lt;input&gt;</code> button (name, value, type & disabled)<br />The type attribute determines the behaviour of the button. The possible values are<br /> - button (default value)<br /> - reset<br /> - submit<br />- We can add content (text, images, formatting styles, etc.) to the body of the <code>&lt;button&gt;</code> button to create custom-made buttons.<br />Only the clicked button adds a name=value pair to the data submitted by the form.<br />The reset button doesn't submit any data (it resets the default values for the forms fields)<br />Only the reset button doesn't submit the form's data.</note> html button 18 1 4/7/2014 7:22:29 PM 11/7/2014 9:40:45 AM Edit | Details | Delete
1 Uploading a file Uploading a file The <code>&lt;input&gt;</code> element allows you to attach a file from the local system to the form and submit it together with the form's field data. <br />It is done using the <code>&lt;input&gt;</code> element with the type attribute set to "file"<br /><br /><note>The file can be any type.<br />The form will render a text field (to enter a file name and associated path) and a Browse button(to navigate the directory structure to the file) Both allow you to identify which will be uploaded.<br />More than one file can be uploaded using a <code>&lt;form&gt;</code> element. The name attribute must be used to distinguish them.<br />The <form> element must have the these attributes.<br /> -method="POST"<br /> -enctype="multiform/form-data"<br /> -action=URL of the server application that will get and process the files.<br /></note> html Uploading a file 19 1 4/7/2014 7:26:05 PM 11/7/2014 9:40:45 AM Edit | Details | Delete
1 The <select> list The <select> list The <code>&lt;select&gt;</code> list allows you to group related items into a list, In this way, the <code>&lt;select&gt;</code> list is similar to a group of check boxes or radio buttons.<br /><br />If only one list item is visible at a time, the <code>&lt;select&gt;</code> list is rendered similarly to a pop-up menu, and only one list item can be selected at a times.<br />If many list items are visible at a time, the <code>&lt;select&gt;</code> list is rendered similarly to a scrolling list. In this case, only one list item can be selected at a time(default behaviour and is similar to a radio button group), or multiple items can be attached(similar in behaviour to a checkbox group)<br />To define a <code>&lt;select&gt;</code> list, use the <code>&lt;select&gt;..&lt;/select&gt;</code> element. To define list items, inset <code>&lt;option&gt;</code> elements into the body of the <code>&lt;select&gt;</code> element.<br /><br /><note>To uniquely identify which list items are selected, add a name attribute to the <code>&lt;select&gt;</code> element and a value attribute to each <code>&lt;option&gt;</code> element.<br />The enduing tag for the <option> element is optional in HTML and required in XHTML.<br />By default, a <code>&lt;select&gt;</code> list is rendered with a single item visible (similar to a popup menu). To change this setting, add a size attribute to the <code>&lt;select&gt;</code> element to define the number of visible items (in this case, the list is rendered as a scrolling list)<br />For each item selected, a name=value pair is added to the form's data, where name is the value of the name attribute <code>&lt;select&gt;</code> list and value is the value attribute of the selected list element.<br />You can insert many <code>&lt;select&gt;</code> lists into the same <code>&lt;form&gt;</code> element.</note><br /> html select list 20 1 4/7/2014 7:29:40 PM 11/7/2014 9:40:45 AM Edit | Details | Delete
1 The multiple <select> list The multiple <select> list Only one item on the <code>&lt;select&gt;</code> list can be selected at a time and submitted with the forms data. To change this setting, add the multiple attribute to the <code>&lt;select&gt;</code> tag. To select a range of list elements, the user must hold down the SHIFT key and click on the first and the last items in the range.<br />To select the only the required particular items, the user must hold down the CRL key and click on each item to be included.<br /><br /><note>The multiple attribute works only if the size attribute is set to a value greater than 1.<br />For each selected item, a name=value pair is added to the forms data.<br />If the value attribute for an item in the <code>&lt;select&gt;</code> list is not defined, the content of the <code>&lt;option&gt;..&lt;/option&gt;</code> block is used in the submitted data.</note> html multiple select list 21 1 4/7/2014 7:31:23 PM 11/7/2014 9:40:45 AM Edit | Details | Delete
1 attributes of form element attributes of form element The following are the possible attributes of the form elements.<br /><br />accesskey - to define a shortcut to execute a command specific to that element and/or place the focus around that element. The possible values are any double- quoted character(e.g "exer"). To get the focus or execute the command, the user must hold down the ALT key and press the appropriate character (e.g ALT+t)<br />tabindex - to define a different order of navigation between the forms elements when using the TAB key (the default order is given by the order in which the element are added to the form). The possible values are "0" or any positive integer.<br /><br /> html attributes of form element 22 1 4/7/2014 7:33:28 PM 11/7/2014 9:40:45 AM Edit | Details | Delete
1 Tables Tables <snpt> &lt;html&gt; &lt;head&gt;&lt;/head&gt; &lt;body&gt; &lt;table&gt; &lt;tr&gt;&lt;td&gt;Row1, Column1&lt;/td&gt;&lt;td&gt;Row1, Column2&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;Row2, Column1&lt;/td&gt;&lt;td&gt;Row2, Column2&lt;/td&gt;&lt;/tr&gt; &lt;/table&gt; &lt;/body&gt; &lt;/html&gt;</snpt> <out><html><head></head><body><table><tr><td>Row1, Column1</td><td>Row1, Column2</td></tr><tr><td>Row2, Column1</td><td>Row2, Column2</td></tr></table></body></html></out> <tit>table border</tit> <snpt>&lt;html&gt; &lt;head&gt;&lt;/head&gt; &lt;body&gt; &lt;table border&gt; &lt;tr&gt;&lt;td&gt;Row1, Column1&lt;/td&gt;&lt;td&gt;Row1, Column2&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;Row2, Column1&lt;/td&gt;&lt;td&gt;Row2, Column2&lt;/td&gt;&lt;/tr&gt; &lt;/table&gt; &lt;/body&gt; &lt;/html&gt; </snpt> <out><html><head></head><body><table border><tr><td>Row1, Column1</td><td>Row1, Column2</td></tr><tr><td>Row2, Column1</td><td>Row2, Column2</td></tr></table></body></html></out> <tit>table border thickness</tit> <snpt>&lt;html&gt; &lt;head&gt;&lt;/head&gt; &lt;body&gt; &lt;table border=&quot;3&quot;&gt; &lt;tr&gt;&lt;td&gt;Row1, Column1&lt;/td&gt;&lt;td&gt;Row1, Column2&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;Row2, Column1&lt;/td&gt;&lt;td&gt;Row2, Column2&lt;/td&gt;&lt;/tr&gt; &lt;/table&gt; &lt;/body&gt; &lt;/html&gt;</snpt> <out><html><head></head><body><table border="3"><tr><td>Row1, Column1</td><td>Row1, Column2</td></tr><tr><td>Row2, Column1</td><td>Row2, Column2</td></tr></table></body></html></out> <tit>table attributes</tit> <t1>frame Attribute</t1> <p>void, above, below, hsides, lhs, rhs vsides, box, border </p> <snpt> &lt;html&gt; &lt;head&gt;&lt;/head&gt; &lt;body&gt; &lt;table border=&quot;2&quot; frame=&quot;below&quot;&gt; &lt;tr&gt;&lt;td&gt;Row1, Column1&lt;/td&gt;&lt;td&gt;Row1, Column2&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;Row2, Column1&lt;/td&gt;&lt;td&gt;Row2, Column2&lt;/td&gt;&lt;/tr&gt; &lt;/table&gt; &lt;/body&gt; &lt;/html&gt;</snpt> <out><html><head></head><body><table border="2" frame="below"><tr><td>Row1, Column1</td><td>Row1, Column2</td></tr><tr><td>Row2, Column1</td><td>Row2, Column2</td></tr></table></body></html></out> <t1>rules Attribute</t1> <p>none, groups, rows, cols, all </p> <snpt>&lt;html&gt; &lt;head&gt;&lt;/head&gt; &lt;body&gt; &lt;table border rules=&quot;rows&quot;&gt; &lt;tr&gt;&lt;td&gt;Row1, Column1&lt;/td&gt;&lt;td&gt;Row1, Column2&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;Row2, Column1&lt;/td&gt;&lt;td&gt;Row2, Column2&lt;/td&gt;&lt;/tr&gt; &lt;/table&gt; &lt;/body&gt; &lt;/html&gt;</snpt> <out><html><head></head><body><table border rules="rows"><tr><td>Row1, Column1</td><td>Row1, Column2</td></tr><tr><td>Row2, Column1</td><td>Row2, Column2</td></tr></table></body></html></out> <tit>table border color</tit> <snpt> &lt;html&gt; &lt;head&gt;&lt;/head&gt; &lt;body&gt; &lt;table border=&quot;2&quot; bordercolor=&quot;#000fff&quot;&gt; &lt;tr&gt;&lt;td&gt;Row1, Column1&lt;/td&gt;&lt;td&gt;Row1, Column2&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;Row2, Column1&lt;/td&gt;&lt;td&gt;Row2, Column2&lt;/td&gt;&lt;/tr&gt; &lt;/table&gt; &lt;/body&gt; &lt;/html&gt;</snpt> <out><html><head></head><body><table border="2" bordercolor="#000fff"><tr><td>Row1, Column1</td><td>Row1, Column2</td></tr><tr><td>Row2, Column1</td><td>Row2, Column2</td></tr></table></body></html></out> <p>left (default value) center right </p> <tit>table Alignment</tit> <snpt>&lt;html&gt; &lt;head&gt;&lt;/head&gt; &lt;body&gt; Some text &lt;table border=&quot;1&quot; align=&quot;center&quot;&gt; &lt;tr&gt;&lt;td&gt;Row1, Column1&lt;/td&gt;&lt;td&gt;Row1, Column2&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;Row2, Column1&lt;/td&gt;&lt;td&gt;Row2, Column2&lt;/td&gt;&lt;/tr&gt; &lt;/table&gt; Some text &lt;table border=&quot;1&quot; align=&quot;right&quot;&gt; &lt;tr&gt;&lt;td&gt;Row1, Column1&lt;/td&gt;&lt;td&gt;Row1, Column2&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;Row2, Column1&lt;/td&gt;&lt;td&gt;Row2, Column2&lt;/td&gt;&lt;/tr&gt; &lt;/table&gt; &lt;/body&gt; &lt;/html&gt;</snpt> <out><html><head></head><body>Some text<table border="1" align="center"><tr><td>Row1, Column1</td><td>Row1, Column2</td></tr><tr><td>Row2, Column1</td><td>Row2, Column2</td></tr></table>Some text <table border="1" align="right"><tr><td>Row1, Column1</td><td>Row1, Column2</td></tr><tr><td>Row2, Column1</td><td>Row2, Column2</td></tr></table></body></html></out> <tit>cellpadding</tit> <snpt>&lt;html&gt; &lt;head&gt;&lt;/head&gt; &lt;body&gt; Some text &lt;table cellpadding=&quot;10&quot;&gt; &lt;tr&gt;&lt;td&gt;Row1, Column1&lt;/td&gt;&lt;td&gt;Row1, Column2&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;Row2, Column1&lt;/td&gt;&lt;td&gt;Row2, Column2&lt;/td&gt;&lt;/tr&gt; &lt;/table&gt; &lt;/body&gt; &lt;/html&gt;</snpt> <out><html><head></head><body>Some text<table cellpadding="10"><tr><td>Row1, Column1</td><td>Row1, Column2</td></tr><tr><td>Row2, Column1</td><td>Row2, Column2</td></tr></table></body></html></out> <tit>cellspacing</tit> <snpt> &lt;html&gt; &lt;head&gt;&lt;/head&gt; &lt;body&gt; Some text &lt;table cellspacing=&quot;0&quot;&gt; &lt;tr&gt;&lt;td&gt;Row1, Column1&lt;/td&gt;&lt;td&gt;Row1, Column2&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;Row2, Column1&lt;/td&gt;&lt;td&gt;Row2, Column2&lt;/td&gt;&lt;/tr&gt; &lt;/table&gt; &lt;/body&gt; &lt;/html&gt;</snpt> <out><html><head></head><body>Some text<table cellspacing="0"><tr><td>Row1, Column1</td><td>Row1, Column2</td></tr><tr><td>Row2, Column1</td><td>Row2, Column2</td></tr></table></body></html></out> <tit>table width and height</tit> <snpt>&lt;html&gt; &lt;head&gt;&lt;/head&gt; &lt;body&gt; Some text &lt;table width=&quot;50%&quot; height=&quot;100&quot;&gt; &lt;tr&gt;&lt;td&gt;Row1, Column1&lt;/td&gt;&lt;td&gt;Row1, Column2&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;Row2, Column1&lt;/td&gt;&lt;td&gt;Row2, Column2&lt;/td&gt;&lt;/tr&gt; &lt;/table&gt; &lt;/body&gt; &lt;/html&gt;</snpt> <out><html><head></head><body>Some text<table width="50%" height="100"><tr><td>Row1, Column1</td><td>Row1, Column2</td></tr><tr><td>Row2, Column1</td><td>Row2, Column2</td></tr></table></body></html></out> <tit>table background color</tit> <snpt> &lt;html&gt; &lt;head&gt;&lt;/head&gt; &lt;body&gt; Some text &lt;table bgcolor=&quot;ff0000&quot;&gt; &lt;tr&gt;&lt;td&gt;Row1, Column1&lt;/td&gt;&lt;td bgcolor=&quot;abcdef&quot;&gt;Row1, Column2&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;Row2, Column1&lt;/td&gt;&lt;td&gt;Row2, Column2&lt;/td&gt;&lt;/tr&gt; &lt;/table&gt; &lt;/body&gt; &lt;/html&gt;</snpt> <out><html><head></head><body>Some text<table bgcolor="ff0000"><tr><td>Row1, Column1</td><td bgcolor="abcdef">Row1, Column2</td></tr><tr><td>Row2, Column1</td><td>Row2, Column2</td></tr></table></body></html></out> <tit>table background image</tit> <snpt> &lt;html&gt; &lt;head&gt;&lt;/head&gt; &lt;body&gt; Some text &lt;table border background=&quot;xyz.jpg&quot;&gt; &lt;tr&gt;&lt;td&gt;Row1, Column1&lt;/td&gt;&lt;td&gt;Row1, Column2&lt;/td&gt;&lt;/tr&gt; &lt;tr background=&quot;abc.jpg&quot;&gt;&lt;td&gt;Row2, Column1&lt;/td&gt;&lt;td&gt;Row2, Column2&lt;/td&gt;&lt;/tr&gt; &lt;/table&gt; &lt;/body&gt; &lt;/html&gt;</snpt> <out><html><head></head><body>Some text<table border background="xyz.jpg"><tr><td>Row1, Column1</td><td>Row1, Column2</td></tr><tr background="abc.jpg"><td>Row2, Column1</td><td>Row2, Column2</td></tr></table></body></html></out> <tit>&lt;th&gt; Element</tit> <snpt>&lt;html&gt; &lt;head&gt;&lt;/head&gt; &lt;body&gt; Some text &lt;table border&gt; &lt;tr&gt;&lt;th&gt;Header 1&lt;/th&gt;&lt;th&gt;Header 2&lt;/th&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;Row2, Column1&lt;/td&gt;&lt;td&gt;Row2, Column2&lt;/td&gt;&lt;/tr&gt; &lt;/table&gt; &lt;/body&gt; &lt;/html&gt;</snpt> <out><html><head></head><body>Some text<table border><tr><th>Header 1</th><th>Header 2</th></tr><tr><td>Row2, Column1</td><td>Row2, Column2</td></tr></table></body></html></out> <tit>width and height of a cell</tit> <snpt>&lt;html&gt; &lt;head&gt;&lt;/head&gt; &lt;body&gt; &lt;table border&gt; &lt;tr&gt;&lt;td width=&quot;50&quot;&gt;Row1, Column1&lt;/td&gt;&lt;td width=&quot;50%&quot;&gt;Row1, Column2&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td height=&quot;25&quot;&gt;Row2, Column1&lt;/td&gt;&lt;td&gt;Row2, Column2&lt;/td&gt;&lt;/tr&gt; &lt;/table&gt; &lt;/body&gt; &lt;/html&gt;</snpt> <out><html><head></head><body><table border><tr><td width="50">Row1, Column1</td><td width="50%">Row1, Column2</td></tr><tr><td height="25">Row2, Column1</td><td>Row2, Column2</td></tr></table></body></html></out> <tit>alignment</tit> <p>align - left(default), center, right, justify and char valign - top, middle(default), bottom and baseline </p> <snpt>&lt;html&gt; &lt;head&gt;&lt;/head&gt; &lt;body&gt; &lt;table border&gt; &lt;tr&gt;&lt;td align=&quot;left&quot;&gt;Row1, Column1&lt;/td&gt;&lt;td align=&quot;right&quot; valign=&quot;bottom&quot;&gt;Row1, Column2&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td align=&quot;right&quot; height=&quot;50&quot; valign=&quot;middle&quot;&gt;Row2, Column1&lt;/td&gt;&lt;td&gt;Row2, Column2&lt;/td&gt;&lt;/tr&gt; &lt;/table&gt; &lt;/body&gt; &lt;/html&gt;</snpt> <out><html><head></head><body><table border><tr><td align="left">Row1, Column1</td><td align="right" valign="bottom">Row1, Column2</td></tr><tr><td align="right" height="50" valign="middle">Row2, Column1</td><td>Row2, Column2</td></tr></table></body></html></out> <tit>colspan attribute</tit> <p>A table is a rectangular grid with rows and columns. The content of a cell can be extended over the content of the adjacent cells using the <i>colspan</i> attributes of the <code>&lt;td&gt;</code> or <code>&lt;th&gt;</code> elements. </p> <p>The possible values for the colspan attributes are positive integers representing the number of columns or rows occupied by the extended cell. </p> To extend the cell, only the <code>&lt;td&gt;</code> or <code>&lt;th&gt;</code> element id required to define the content of the cell. <tit>rownspan attribute</tit> <p>A table is a rectangular grid with rows and columns. The content of a cell can be extended over the content of the adjacent cells using the <i>rowspan</i> attributes of the <code>&lt;td&gt;</code> or <code>&lt;th&gt;</code> elements.</p> <p>The possible values for the rowspan attributes are positive integers representing the number of columns or rows occupied by the extended cell. </p> <p>To extend the cell, only the <code>&lt;td&gt;</code> or <code>&lt;th&gt;</code> element id required to define the content of the cell. </p> <tit>nowrap attribute</tit> <p>When we need to render text in a cell on a single line, use the nowrap attribute of the <code>&lt;td&gt;</code> or <code>&lt;th&gt;</code> element.</p> <tit>Empty Cells</tit> <p>An empty cell is a <code>&lt;td&gt;</code> or <code>&lt;th&gt;</code> element without any content, By default, browsers do not display a border for these cells. To add a border insert the character sequence &nbsp; as the content. This character sequence is used to insert a blank space.</p> <tit>&lt;caption&gt; element</tit> <p>To add a caption to a table, insert a <code>&lt;caption&gt;..&lt;/caption&gt;</code> element inside the <code>&lt;table&gt;..&lt;/table&gt;</code> element immediately after the <code>&lt;table&gt;</code> tag. The content of this element can be a short description of the table. The <code>&lt;caption&gt;</code> element accepts the align attribute to set the position of the caption relative to the table. </p> <p>The possible values are </p> <p>-bottom -top -left -right</p> <tit>table structure</tit> <p>The content of the table can be divided into sections. The sections are given below. </p> <code>&lt;thead&gt;..&lt;/thead&gt;</code> - to define the head section <code>&lt;tfoot&gt;..&lt;/tfoot&gt;</code> - to define the foot section <code>&lt;tbody&gt;..&lt;/tbody&gt;</code> - to define the body section <note>These blocks are include in the <code>&lt;table&gt;</code> block. Each <code>&lt;table&gt;</code> element may have only one <code>&lt;thead&gt;</code> section and one <code>&lt;tfoot&gt;</code> section. The <code>&lt;thead&gt;</code> and <code>&lt;tfoot&gt;</code> blocks must be defined before the <code>&lt;tbody&gt;</code> section. Each of these sections contain regular <code>&lt;tr&gt;</code> elements. These elements accept the attributes like align, bgcolor and valign.</note> <tit>&lt;colgroup&gt; element</tit> <p>To set a common style for all the cells in a column, use the <code>&lt;colgroup&gt;..&lt;colgroup&gt;</code> element. Insert <code>&lt;col&gt;</code> elements describing each column into the <code>&lt;colgroup&gt;</code> block. </p> <p>Both <code>&lt;colgroup&gt;</code> and <code>&lt;col&gt;</code> elements accept the following attributes to describe a style. </p> <p>align valign width</p> html tables 1 1 4/9/2014 8:02:18 PM 12/18/2018 6:49:07 PM Edit | Details | Delete
1 table border table border <br /><snpt>&lt;html&gt;<br />&lt;head&gt;&lt;/head&gt;<br />&lt;body&gt;<br />&lt;table border&gt;<br />&lt;tr&gt;&lt;td&gt;Row1, Column1&lt;/td&gt;&lt;td&gt;Row1, Column2&lt;/td&gt;&lt;/tr&gt;<br />&lt;tr&gt;&lt;td&gt;Row2, Column1&lt;/td&gt;&lt;td&gt;Row2, Column2&lt;/td&gt;&lt;/tr&gt;<br />&lt;/table&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;<br /><br /></snpt><br /><out><html><head></head><body><table border><tr><td>Row1, Column1</td><td>Row1, Column2</td></tr><tr><td>Row2, Column1</td><td>Row2, Column2</td></tr></table></body></html></out> html table border 1 1 4/9/2014 8:04:12 PM 11/10/2014 12:44:09 PM Edit | Details | Delete
1 table border thickness table border thickness <br /><snpt>&lt;html&gt;<br />&lt;head&gt;&lt;/head&gt;<br />&lt;body&gt;<br />&lt;table border=&quot;3&quot;&gt;<br />&lt;tr&gt;&lt;td&gt;Row1, Column1&lt;/td&gt;&lt;td&gt;Row1, Column2&lt;/td&gt;&lt;/tr&gt;<br />&lt;tr&gt;&lt;td&gt;Row2, Column1&lt;/td&gt;&lt;td&gt;Row2, Column2&lt;/td&gt;&lt;/tr&gt;<br />&lt;/table&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt><br /><br /><out><html><head></head><body><table border="3"><tr><td>Row1, Column1</td><td>Row1, Column2</td></tr><tr><td>Row2, Column1</td><td>Row2, Column2</td></tr></table></body></html></out> html table border thickness 1 1 4/9/2014 8:06:28 PM 11/10/2014 12:44:09 PM Edit | Details | Delete
1 table attributes table attributes <tit>frame Attribute</tit><br />void, above, below, hsides, lhs, rhs vsides, box, border<br /><snpt><br />&lt;html&gt;<br />&lt;head&gt;&lt;/head&gt;<br />&lt;body&gt;<br />&lt;table border=&quot;2&quot; frame=&quot;below&quot;&gt;<br />&lt;tr&gt;&lt;td&gt;Row1, Column1&lt;/td&gt;&lt;td&gt;Row1, Column2&lt;/td&gt;&lt;/tr&gt;<br />&lt;tr&gt;&lt;td&gt;Row2, Column1&lt;/td&gt;&lt;td&gt;Row2, Column2&lt;/td&gt;&lt;/tr&gt;<br />&lt;/table&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt><br /><br /><out><html><head></head><body><table border="2" frame="below"><tr><td>Row1, Column1</td><td>Row1, Column2</td></tr><tr><td>Row2, Column1</td><td>Row2, Column2</td></tr></table></body></html></out><br /><br /><tit>rules Attribute</tit><br />none, groups, rows, cols, all<br /><br /><snpt>&lt;html&gt;<br />&lt;head&gt;&lt;/head&gt;<br />&lt;body&gt;<br />&lt;table border rules=&quot;rows&quot;&gt;<br />&lt;tr&gt;&lt;td&gt;Row1, Column1&lt;/td&gt;&lt;td&gt;Row1, Column2&lt;/td&gt;&lt;/tr&gt;<br />&lt;tr&gt;&lt;td&gt;Row2, Column1&lt;/td&gt;&lt;td&gt;Row2, Column2&lt;/td&gt;&lt;/tr&gt;<br />&lt;/table&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt><br /><br /><out><html><head></head><body><table border rules="rows"><tr><td>Row1, Column1</td><td>Row1, Column2</td></tr><tr><td>Row2, Column1</td><td>Row2, Column2</td></tr></table></body></html></out> html table attributes 1 1 4/9/2014 8:08:38 PM 11/10/2014 12:44:09 PM Edit | Details | Delete
1 table border color table border color <snpt><br />&lt;html&gt;<br />&lt;head&gt;&lt;/head&gt;<br />&lt;body&gt;<br />&lt;table border=&quot;2&quot; bordercolor=&quot;#000fff&quot;&gt;<br />&lt;tr&gt;&lt;td&gt;Row1, Column1&lt;/td&gt;&lt;td&gt;Row1, Column2&lt;/td&gt;&lt;/tr&gt;<br />&lt;tr&gt;&lt;td&gt;Row2, Column1&lt;/td&gt;&lt;td&gt;Row2, Column2&lt;/td&gt;&lt;/tr&gt;<br />&lt;/table&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt><br /><br /><out><html><head></head><body><table border="2" bordercolor="#000fff"><tr><td>Row1, Column1</td><td>Row1, Column2</td></tr><tr><td>Row2, Column1</td><td>Row2, Column2</td></tr></table></body></html></out> html table border color 1 1 4/9/2014 8:11:39 PM 11/10/2014 12:44:09 PM Edit | Details | Delete
1 table Alignment table Alignment left (default value)<br />center<br />right<br /><br /><snpt>&lt;html&gt;<br />&lt;head&gt;&lt;/head&gt;<br />&lt;body&gt;<br />Some text<br />&lt;table border=&quot;1&quot; align=&quot;center&quot;&gt;<br />&lt;tr&gt;&lt;td&gt;Row1, Column1&lt;/td&gt;&lt;td&gt;Row1, Column2&lt;/td&gt;&lt;/tr&gt;<br />&lt;tr&gt;&lt;td&gt;Row2, Column1&lt;/td&gt;&lt;td&gt;Row2, Column2&lt;/td&gt;&lt;/tr&gt;<br />&lt;/table&gt;<br /><br />Some text <br />&lt;table border=&quot;1&quot; align=&quot;right&quot;&gt;<br />&lt;tr&gt;&lt;td&gt;Row1, Column1&lt;/td&gt;&lt;td&gt;Row1, Column2&lt;/td&gt;&lt;/tr&gt;<br />&lt;tr&gt;&lt;td&gt;Row2, Column1&lt;/td&gt;&lt;td&gt;Row2, Column2&lt;/td&gt;&lt;/tr&gt;<br />&lt;/table&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt><br /><br /><out><html><head></head><body>Some text<table border="1" align="center"><tr><td>Row1, Column1</td><td>Row1, Column2</td></tr><tr><td>Row2, Column1</td><td>Row2, Column2</td></tr></table>Some text <table border="1" align="right"><tr><td>Row1, Column1</td><td>Row1, Column2</td></tr><tr><td>Row2, Column1</td><td>Row2, Column2</td></tr></table></body></html></out> html table Alignment 1 1 4/9/2014 8:13:46 PM 11/10/2014 12:44:09 PM Edit | Details | Delete
1 table cellpadding table cellpadding <br /><snpt>&lt;html&gt;<br />&lt;head&gt;&lt;/head&gt;<br />&lt;body&gt;<br />Some text<br />&lt;table cellpadding=&quot;10&quot;&gt;<br />&lt;tr&gt;&lt;td&gt;Row1, Column1&lt;/td&gt;&lt;td&gt;Row1, Column2&lt;/td&gt;&lt;/tr&gt;<br />&lt;tr&gt;&lt;td&gt;Row2, Column1&lt;/td&gt;&lt;td&gt;Row2, Column2&lt;/td&gt;&lt;/tr&gt;<br />&lt;/table&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt><br /><br /><out><html><head></head><body>Some text<table cellpadding="10"><tr><td>Row1, Column1</td><td>Row1, Column2</td></tr><tr><td>Row2, Column1</td><td>Row2, Column2</td></tr></table></body></html></out> html table cellpadding 1 1 4/9/2014 8:16:49 PM 11/10/2014 12:44:09 PM Edit | Details | Delete
1 table cellspacing table cellspacing <snpt><br />&lt;html&gt;<br />&lt;head&gt;&lt;/head&gt;<br />&lt;body&gt;<br />Some text<br />&lt;table cellspacing=&quot;0&quot;&gt;<br />&lt;tr&gt;&lt;td&gt;Row1, Column1&lt;/td&gt;&lt;td&gt;Row1, Column2&lt;/td&gt;&lt;/tr&gt;<br />&lt;tr&gt;&lt;td&gt;Row2, Column1&lt;/td&gt;&lt;td&gt;Row2, Column2&lt;/td&gt;&lt;/tr&gt;<br />&lt;/table&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt><br /><br /><out><html><head></head><body>Some text<table cellspacing="0"><tr><td>Row1, Column1</td><td>Row1, Column2</td></tr><tr><td>Row2, Column1</td><td>Row2, Column2</td></tr></table></body></html></out> html table cellspacing 1 1 4/9/2014 8:18:48 PM 11/10/2014 12:44:09 PM Edit | Details | Delete
1 table width and height table width and height <br /><snpt>&lt;html&gt;<br />&lt;head&gt;&lt;/head&gt;<br />&lt;body&gt;<br />Some text<br />&lt;table width=&quot;50%&quot; height=&quot;100&quot;&gt;<br />&lt;tr&gt;&lt;td&gt;Row1, Column1&lt;/td&gt;&lt;td&gt;Row1, Column2&lt;/td&gt;&lt;/tr&gt;<br />&lt;tr&gt;&lt;td&gt;Row2, Column1&lt;/td&gt;&lt;td&gt;Row2, Column2&lt;/td&gt;&lt;/tr&gt;<br />&lt;/table&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt><br /><br /><out><html><head></head><body>Some text<table width="50%" height="100"><tr><td>Row1, Column1</td><td>Row1, Column2</td></tr><tr><td>Row2, Column1</td><td>Row2, Column2</td></tr></table></body></html></out> html table width and html table height 1 1 4/9/2014 8:20:56 PM 11/10/2014 12:44:09 PM Edit | Details | Delete
1 table background color table background color <snpt><br />&lt;html&gt;<br />&lt;head&gt;&lt;/head&gt;<br />&lt;body&gt;<br />Some text<br />&lt;table bgcolor=&quot;ff0000&quot;&gt;<br />&lt;tr&gt;&lt;td&gt;Row1, Column1&lt;/td&gt;&lt;td bgcolor=&quot;abcdef&quot;&gt;Row1, Column2&lt;/td&gt;&lt;/tr&gt;<br />&lt;tr&gt;&lt;td&gt;Row2, Column1&lt;/td&gt;&lt;td&gt;Row2, Column2&lt;/td&gt;&lt;/tr&gt;<br />&lt;/table&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt><br /><br /><br /><out><html><head></head><body>Some text<table bgcolor="ff0000"><tr><td>Row1, Column1</td><td bgcolor="abcdef">Row1, Column2</td></tr><tr><td>Row2, Column1</td><td>Row2, Column2</td></tr></table></body></html></out> html table background color 1 1 4/9/2014 8:22:22 PM 11/10/2014 12:44:09 PM Edit | Details | Delete
1 table background image table background image <snpt><br />&lt;html&gt;<br />&lt;head&gt;&lt;/head&gt;<br />&lt;body&gt;<br />Some text<br />&lt;table border background=&quot;xyz.jpg&quot;&gt;<br />&lt;tr&gt;&lt;td&gt;Row1, Column1&lt;/td&gt;&lt;td&gt;Row1, Column2&lt;/td&gt;&lt;/tr&gt;<br />&lt;tr background=&quot;abc.jpg&quot;&gt;&lt;td&gt;Row2, Column1&lt;/td&gt;&lt;td&gt;Row2, Column2&lt;/td&gt;&lt;/tr&gt;<br />&lt;/table&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt><br /><br /><br /><out><html><head></head><body>Some text<table border background="xyz.jpg"><tr><td>Row1, Column1</td><td>Row1, Column2</td></tr><tr background="abc.jpg"><td>Row2, Column1</td><td>Row2, Column2</td></tr></table></body></html></out> html table background image 1 1 4/9/2014 8:24:56 PM 11/10/2014 12:44:09 PM Edit | Details | Delete
1 <th> Element <th> Element <br /><snpt>&lt;html&gt;<br />&lt;head&gt;&lt;/head&gt;<br />&lt;body&gt;<br />Some text<br />&lt;table border&gt;<br />&lt;tr&gt;&lt;th&gt;Header 1&lt;/th&gt;&lt;th&gt;Header 2&lt;/th&gt;&lt;/tr&gt;<br />&lt;tr&gt;&lt;td&gt;Row2, Column1&lt;/td&gt;&lt;td&gt;Row2, Column2&lt;/td&gt;&lt;/tr&gt;<br />&lt;/table&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt><br /><br /><out><html><head></head><body>Some text<table border><tr><th>Header 1</th><th>Header 2</th></tr><tr><td>Row2, Column1</td><td>Row2, Column2</td></tr></table></body></html></out> html table th Element 1 1 4/9/2014 8:26:13 PM 11/10/2014 12:44:09 PM Edit | Details | Delete
1 width and height of a cell width and height of a cell <snpt>&lt;html&gt;<br />&lt;head&gt;&lt;/head&gt;<br />&lt;body&gt;<br />&lt;table border&gt;<br />&lt;tr&gt;&lt;td width=&quot;50&quot;&gt;Row1, Column1&lt;/td&gt;&lt;td width=&quot;50%&quot;&gt;Row1, Column2&lt;/td&gt;&lt;/tr&gt;<br />&lt;tr&gt;&lt;td height=&quot;25&quot;&gt;Row2, Column1&lt;/td&gt;&lt;td&gt;Row2, Column2&lt;/td&gt;&lt;/tr&gt;<br />&lt;/table&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt><br /><br /><out><html><head></head><body><table border><tr><td width="50">Row1, Column1</td><td width="50%">Row1, Column2</td></tr><tr><td height="25">Row2, Column1</td><td>Row2, Column2</td></tr></table></body></html></out> html table width and height of a cell 1 1 4/12/2014 7:57:09 PM 11/10/2014 12:44:09 PM Edit | Details | Delete
1 alignment alignment align - left(default), center, right, justify and char<br />valign - top, middle(default), bottom and baseline<br /><br /><snpt>&lt;html&gt;<br />&lt;head&gt;&lt;/head&gt;<br />&lt;body&gt;<br />&lt;table border&gt;<br />&lt;tr&gt;&lt;td align=&quot;left&quot;&gt;Row1, Column1&lt;/td&gt;&lt;td align=&quot;right&quot; valign=&quot;bottom&quot;&gt;Row1, Column2&lt;/td&gt;&lt;/tr&gt;<br />&lt;tr&gt;&lt;td align=&quot;right&quot; height=&quot;50&quot; valign=&quot;middle&quot;&gt;Row2, Column1&lt;/td&gt;&lt;td&gt;Row2, Column2&lt;/td&gt;&lt;/tr&gt;<br />&lt;/table&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt><br /><br /><out><html><head></head><body><table border><tr><td align="left">Row1, Column1</td><td align="right" valign="bottom">Row1, Column2</td></tr><tr><td align="right" height="50" valign="middle">Row2, Column1</td><td>Row2, Column2</td></tr></table></body></html></out> html table alignment 1 1 4/12/2014 7:59:35 PM 11/10/2014 12:44:09 PM Edit | Details | Delete
1 colspan attribute colspan attribute A table is a rectangular grid with rows and columns. The content of a cell can be extended over the content of the adjacent cells using the <i>colspan</i> attributes of the <code>&lt;td&gt;</code> or <code>&lt;th&gt;</code> elements.<br /><br />THe possible values for the colspan attributes are positive integers representing the number of columns or rows occupied by the extended cell.<br /><br />To extend the cell, only the <code>&lt;td&gt;</code> or <code>&lt;th&gt;</code> element id required to define the content of the cell.<br /> html table colspan attribute 1 1 4/12/2014 8:02:24 PM 11/10/2014 12:44:09 PM Edit | Details | Delete
1 rownspan attribute rownspan attribute A table is a rectangular grid with rows and columns. The content of a cell can be extended over the content of the adjacent cells using the <i>rowspan</i> attributes of the <code>&lt;td&gt;</code> or <code>&lt;th&gt;</code> elements.<br /><br />The possible values for the rowspan attributes are positive integers representing the number of columns or rows occupied by the extended cell.<br /><br />To extend the cell, only the <code>&lt;td&gt;</code> or <code>&lt;th&gt;</code> element id required to define the content of the cell.<br /> html table rownspan attribute 1 1 4/12/2014 8:04:47 PM 11/10/2014 12:44:09 PM Edit | Details | Delete
1 nowrap attribute nowrap attribute When we need to render text in a cell on a single line, use the nowrap attribute of the <code>&lt;td&gt;</code> or <code>&lt;th&gt;</code> element. html table nowrap attribute 1 1 4/12/2014 8:06:03 PM 11/10/2014 12:44:09 PM Edit | Details | Delete
1 Empty Cells Empty Cells An empty cell is a <code>&lt;td&gt;</code> or <code>&lt;th&gt;</code> element without any content, By default, browsers do not display a border for these cells. To add a border insert the character sequence &nbsp; as the content. This character sequence is used to insert a blank space. html table Empty Cells 1 1 4/12/2014 8:08:13 PM 11/10/2014 12:44:09 PM Edit | Details | Delete
1 <caption> element <caption> element To add a caption to a table, insert a <code>&lt;caption&gt;..&lt;/caption&gt;</code> element inside the <code>&lt;table&gt;..&lt;/table&gt;</code> element immediately after the <code>&lt;table&gt;</code> tag. The content of this element can be a short description of the table. The <code>&lt;caption&gt;</code> element accepts the align attribute to set the position of the caption relative to the table. The possible values are <br /><br />-bottom<br />-top<br />-left<br />-right html table caption element 1 1 4/12/2014 8:09:44 PM 11/10/2014 12:44:09 PM Edit | Details | Delete
1 table structure table structure The content of the table can be divided into sections. The sections are given below.<br /><br /><code>&lt;thead&gt;..&lt;/thead&gt;</code> - to define the head section<br /><code>&lt;tfoot&gt;..&lt;/tfoot&gt;</code> - to define the foot section<br /><code>&lt;tbody&gt;..&lt;/tbody&gt;</code> - to define the body section<br /><br /><note>These blocks are include in the <code>&lt;table&gt;</code> block.<br />Each <code>&lt;table&gt;</code> element may have only one <code>&lt;thead&gt;</code> section and one <code>&lt;tfoot&gt;</code> section.<br />The <code>&lt;thead&gt;</code> and <code>&lt;tfoot&gt;</code> blocks must be defined before the <code>&lt;tbody&gt;</code> section.<br />Each of these sections contain regular <code>&lt;tr&gt;</code> elements.<br />These elements accept the attributes like align, bgcolor and valign.</note> html table structure 1 1 4/12/2014 8:11:54 PM 11/10/2014 12:44:09 PM Edit | Details | Delete
1 <colgroup> element <colgroup> element To set a common style for all the cells in a column, use the <code>&lt;colgroup&gt;..&lt;colgroup&gt;</code> element. Insert <code>&lt;col&gt;</code> elements describing each column into the <code>&lt;colgroup&gt;</code> block.<br /><br />Both <code>&lt;colgroup&gt;</code> and <code>&lt;col&gt;</code> elements accept the following attributes to describe a style.<br /><br />align<br />valign<br />width html table colgroup element 1 1 4/12/2014 8:15:01 PM 11/10/2014 12:44:09 PM Edit | Details | Delete
1 Target Windows Target Windows When the user clicks on a link, by default the browser replaces the page containing that link with the new page pointed by the link. To change the default behaviour, attach a new attribute names target to the <code>&lt;a&gt;</code> element. This attribute define the name of the window in which the new page will be loaded. If no window with that name exists, a new window will be created, The possible values are<br /><br />-Any double quoted string string that defines a name for a new window<br />-The following constant values<br /> _self (default)<br /> -black<br /> _parent<br /> _top html link Target Windows 1 1 4/13/2014 4:37:17 AM 11/10/2014 12:35:55 PM Edit | Details | Delete
1 Link color Link color There are three states of a link. Each state has a particular color associated with it by default. These values can be overridden by setting specific attributes of the <code>&lt;body&gt;..&lt;/body&gt;</code> element. The three states of link are given below.<br /><br /><tit>active state</tit><br />Only one page can be active on a page at a time.<br />The active link is rendered with a rectangle around it.<br />The default color is "#ff0000"(red)<br />To override the default value , use a 'alink' attribute.<br /><br /><tit>non-visited state</tit><br />The default color is "#0000ff"(blue)<br />To override the default value, use the 'link' attribute.<br /><br /><tit>visited state</tit><br />The default is "#551ab8" or "#800080"<br />To override the default value use the 'vlink' attribute.<br />The visited state of a web page is permanently recorded by a browser and is maintained over multiple sessions.<br /> html link color 1 1 4/13/2014 5:05:17 AM 11/10/2014 12:35:55 PM Edit | Details | Delete
1 Links to other kind of files Links to other kind of files Links can be to defined other kind of files other than HTML files. When clicks on the link or presses the <ENTER> key if the link is active, there are possibilities depends on the browser nature.<br /><br /><tit>Scenario 1</tit><br />If the browser can handle that type of file(plug-in installed), it correctly renders the file in the browser. (eg. image, text, pdf, flash and other similar files.)<br /><br /><tit>Scenario 2</tit><br />If the browser cannot handle the new type of file, it will try to download the file to the client system.<br /> html links to other kind of files 1 1 4/13/2014 5:17:10 AM 11/10/2014 12:35:55 PM Edit | Details | Delete
1 Links to ftp web sites Links to ftp web sites We can define a link to the specific directory on a server connected to the internet. The browser behaves based on the server settings.<br /><br />- If the link contains the http protocol, the server will try to return a default document (eg. default.htm for an Apache Server)<br />- If adefault document doesn't exist or the server is not configured to return it, the server can be configured to returned the directory structure for that internet directory.<br />- If the link contains an ftp protocol, the server will return a directory structure for that internet directory(if permitted by the server's security settings). Then the user can execute operations (read, write to and delete files and directories), depending on the level of access granted by the server. The server may be configured to require a user name and password or employ other security measures.<br /><br />To create a link to an ftp server, use an <a> element with the href attribute set for ftp protocol instead of http protocol (eg. href="ftp://ftp.domain.com/") html Links to ftp web sites 1 1 4/13/2014 5:18:17 AM 11/10/2014 12:35:55 PM Edit | Details | Delete
1 Link to email addresses Link to email addresses To create a link to an email address, use an <code>&lt;a&gt;</code> element with the href attribute set for the 'mailto' protocol (internet mail protocol) and pointing to a valid email address (eg: href="mailto:tutorials@rookienerd.com")<br /> html Link to email addresses 1 1 4/13/2014 5:19:12 AM 11/10/2014 12:35:55 PM Edit | Details | Delete
1 title attribute of the <a> element title attribute of the <a> element The title attribute is a universal attribute and can be attached to any HTML element. When the user places the mouse pointer over the element, a tooltip will appear, rendering the content of the title attribute. html anchor link title attribute 1 1 4/13/2014 5:20:50 AM 11/10/2014 12:35:55 PM Edit | Details | Delete
1 <base> element <base> element The <code>&lt;base&gt;</code> element allows you to set a prefix that will automatically be attached to the URL indicated by any link on that page, allowing you to avoid repetitive code if all links on a page point to the same server.<br /><br /><note>The <code>&lt;base&gt;</code> element is an empty element(i.e it doesnt require an ending tag)<br />The <code>&lt;base&gt;</code> element requires an href attribute set to the absolute URL of an internet directory. (e.g : href="http://www.domain.com/files/images/")<br />The <base> element must be placed inside the <code>&lt;head&gt;..&lt;/head&gt;</code> element.</note> html base element 1 1 4/13/2014 5:22:09 AM 11/10/2014 12:35:55 PM Edit | Details | Delete
1 Embedding Applets with parameter Embedding Applets with parameter If the applet can accept parameters, we can transmit parameters to an applet using the empty <c>&lt;param&gt;</c> element as a child of the <c>&lt;applet&gt;..&lt;/applet&gt;</c> element. The &lt;param&gt; element has two useful attributes.<br /><br /><table><br /><tr><th>Attributes</th><th>Description</th></tr><tr><td><c>name</c></td><td>represents the name of the parameter. The possible values are valid identifiers.</td></tr><tr><td><c>value</c></td><td>represents the values of the parameter. The possible values are strings of characters.</td></tr></table><br /><br /> Embedding Applets with parameter 1 1 4/13/2014 5:30:16 AM 1/31/2017 9:54:16 AM Edit | Details | Delete
1 Embedding Applets with <object> element Embedding Applets with <object> element The <code>&lt;applet&gt;</code> element is depreciated as per the HTML 4.01 specifications and it favours the use of <code>&lt;object&gt;</code> element.<br /> Embedding Applets with <object> element 1 1 4/13/2014 5:31:05 AM 11/10/2014 12:41:40 PM Edit | Details | Delete
1 ActiveX controls ActiveX controls ActiveX controls are a microsoft technology that allows you to include COM objects in other applications(for example in a web page) Before using an ActiveX control, you must know its classid (from the registry editor) and how to set its parameters. The following table presents some ActiveX controls together with classids as you can find them on the most Windows platforms.<br /><br />button <br />label<br />textfield<br />graphic<br />calendar<br />avi<br />excel Embedding Applets with <object> element 1 1 4/13/2014 5:41:33 AM 11/10/2014 12:41:40 PM Edit | Details | Delete
1 CSS - Cascading Style sheets Cascading Style sheets <p>Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents. </p> <p>CSS allows you to set properties for HTML elements using css values. CSS has more than 100 properties which allows the web designers to create professional web sites which cannot be made using the regular HTML attributes.</p> <tit>What you will Learn?</tit> <p>With the CSS tutorial in rookienerd.com, you can learn and create your own Web site.</p> <p>You will enjoy learning HTML.</p> <tit>CSS Examples</tit> <p>Each tutorial has examples to learn and practice quickly.</p> <tit>CSS References</tit> <p>You will find complete references of all properties and selectors with syntax, examples, browser support, and more.</p> css Cascading Style sheets 1 1 4/15/2014 6:59:37 PM 12/16/2018 7:21:39 PM Edit | Details | Delete
1 Declaration Declaration A style sheet is a (italic-XXX)set of rules. To define a (italic-XXX)rule you need a selector and a declaration. The selector allows you to choose which elements will use the settings. defined by the declaration.<br /><br /><b><i>Syntax</i></b><br /><pre>property-name - property-value;</pre><br /><b><i>Description</i></b><br /><table><br /><tr><td><i>property-name</i></td><td>A reserved keyword that defines a property</td></tr><tr><td><i>property-value</i></td><td>A valid value for the property</td></tr></table><br /><br /><b>font-size:15px;</b> used to set the size of the text to 15px<br /><b>font-style:italic;</b> used to set the style of the text to italic<br /><b>color:yellow;</b> used to set the color of the text to yellow<br /><b>cursor:move;</b> css Declaration 2 1 4/15/2014 7:00:28 PM 10/9/2015 7:35:24 PM Edit | Details | Delete
1 Declartion blocks Declartion blocks A declaration block is a list of declarations separated by semi-colon(;) and included in a {..}<br /><br /><pre>{font-size:15px; color:red}<br />{text-decoration:none; cursor: pointer}</pre><br /><note>";" symbol is optional in a declaration block;<br />Blank spaces can be added before and after of ";" or ":"</note> css Declartion blocks 3 1 4/15/2014 7:01:49 PM 10/11/2015 12:10:48 PM Edit | Details | Delete
1 Type selectors Type selectors To define a rule, use a selector followed by a declaration block. There are different types of css selector which we can apply styles to the html element.<br /><br />The following example defines a rule for rendering all &lt;h1&gt; element. Here h1 is selector which applies any &lt;h1&gt; in a website.<br /><snpt>h1 {<br /> font-size: 20px;<br /> font-style: italic;<br /> color: #000000;<br />}</snpt><br /> css Type selectors 4 1 4/15/2014 7:02:55 PM 10/11/2015 12:15:42 PM Edit | Details | Delete
1 Style Sheets Style Sheets Many rules can be added to define a style sheet. <br /><br /><snpt>h3{ font-style:italic }<br />div{ color:red; font-size:15pt }<br />img{ cursor:move }</snpt><br /><br />In this example, the selectors are regular HTML elements. Style Sheets 5 1 4/15/2014 7:04:02 PM 10/11/2015 12:14:43 PM Edit | Details | Delete
1 Universal attributes for HTML elements Universal attributes for HTML elements HTML elements has several attributes that can be added to almost any HTML elements in included in the <code>&lt;body&gt;..&lt;/body&gt;</code> element of a web page.<br /><table><br /><tr><td><c>id</c></td><td>to attach unique identifier to the element - unique identifiers for the element (<i>id="id1"</i>)</td></tr><tr><td><c>class</c></td><td>to assign a class to the element - space separated identifiers (eg: <i>class="class1 class2..</i>")</td></tr><tr><td><c>style</c></td><td>to assign style to an element - sequence of styles (<i>style="font-style:bold"</i>)</td></tr><tr><td><c>title</c></td><td>to assign a tooltip to the element - double quoted string (<i>title="click here"</i>)</td></tr><tr><td><c>lang</c></td><td>to define the language for the content of the element - double quoted language identifier (<i>lang="en"</i>)</td></tr><tr><td><c>dir</c></td><td>to defrine a rendering direction of the content for the element- "<i>ltr</i>" (left to right), "<i>rtl</i>" (for right to left)</td></tr></table> css universal attributes for HTML elements 6 1 4/15/2014 7:04:55 PM 1/31/2017 12:19:50 PM Edit | Details | Delete
1 Inline Styles Inline Styles Inline Styles are defined within the HTML markup of a particular page element.<br /><br />The Style attribute can be added to almost any html element included in the <code>&lt;body&gt;..&lt;/body&gt;</code> element of a web page.<br /><pre>style = "font-style:italic; color: #efefef;"</pre><br /><snpt>&lt;html&gt;<br />&lt;head&gt;<br /> &lt;style&gt;<br /> &lt;h2 style=&quot;font-style:italic; color: #efefef;&quot;&gt;This is a Title&lt;/h2&gt;<br /> &lt;div style=&quot;font-style: underline&quot;&gt;Get beautiful inspiring quotes from Quotefells.com &lt;/div&gt;<br /> &lt;div style=&quot;color: red;&quot;&gt; Hard work beats talent when talent doesn&#39;t work hard.&lt;/div&gt;<br /> &lt;/style&gt;<br />&lt;/head&gt;<br />&lt;/html&gt;</snpt><br /> css Inline-Styles 7 1 4/15/2014 7:06:19 PM 10/11/2015 12:34:55 PM Edit | Details | Delete
1 Internal Styles Internal Styles Internal Styles are defined in the <code>&lt;head&gt;</code> section of the "current" web page. <br /><br />To define a style and apply it to many elements that belong to a web page, use a style sheet. The style can be placed inside the <code>&lt;style&gt;..&lt;/style&gt;</code> element. Place the style sheet rules inside a <code>&lt;style&gt;..&lt;/style&gt;</code> element and insert that element inside the <code>&lt;head&gt;..&lt;/head&gt;</code> section of the web page. Add the "type" attribute of the <code>&lt;style&gt;</code> element. Set the type attribute value to "text/css"(the default value). For modern browsers no need to set the type attribute as it defaults to "text/css"<br /><pre>&lt;html&gt;<br />&lt;head&gt;<br /> &lt;style&gt;<br /> &lt;!--<br /> Style sheet rules<br /> --&gt;<br /> &lt;/style&gt;<br />&lt;/head&gt;<br />&lt;/html&gt;</pre><br /><snpt>&lt;html&gt;<br />&lt;head&gt;<br /> &lt;style&gt;<br /> a {font-style: underline;}<br /> p {style=&quot;color: red;}<br /> h2 {font-style:italic; color: #efefef;}<br /> &lt;/style&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br /> &lt;h2&gt;This is a Title&lt;/h2&gt;<br /> &lt;a href=&quot;http://quotefellas.com&quot;&gt;Get beautiful inspiring quotes from Quotefells.com &lt;/a&gt;<br /> &lt;p&gt; Hard work beats talent when talent doesn&#39;t work hard.&lt;/p&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt> css Internal Styles 8 1 4/15/2014 7:08:01 PM 10/11/2015 12:39:08 PM Edit | Details | Delete
1 External-Style Sheets External-Style Sheets External Styles are defined on the External Style Sheet, which is linked to the web page(s).<br /><br />To create a link between a web page and an external style sheet, place a <code>&lt;link&gt;</code> element inside the <code>&lt;head&gt;..&lt;/head&gt;</code> element of that web page. Three attributes of the <code>&lt;link&gt;</code> element are required.<br /><table><br /><tr><th>Attribute</th><th>Description</th></tr><tr><td><code>type</code></td><td><i>text/ css</i></td></tr><tr><td><code>rel</code></td><td><i>stylesheet</i></td></tr><tr><td><code>href</code></td><td>URL of the external style sheet</td></tr></table><br /><pre>&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;style.css /&gt;</pre><br />For example create an html page home.html and add the styles for the html elements in a separate css stylesheet file style.css <br /><snpt>&lt;html&gt;<br />&lt;head&gt;<br /> &lt;style&gt;<br /> a {font-style: underline;}<br /> p {style=&quot;color: red;}<br /> h2 {font-style:italic; color: #efefef;}<br /> &lt;/style&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br /> &lt;h2&gt;This is a Title&lt;/h2&gt;<br /> &lt;a href=&quot;http://quotefellas.com&quot;&gt;Get beautiful inspiring quotes from Quotefells.com &lt;/a&gt;<br /> &lt;p&gt; Hard work beats talent when talent doesn&#39;t work hard.&lt;/p&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt><br /><t1>style.css</t1><br /><snpt>body {padding: 20px;}<br />a {font-style: underline;}<br />p {color: red;}<br />h2 {font-style:italic; color: #efefef;}</snpt> css External-Style Sheets 9 1 4/15/2014 7:09:31 PM 1/31/2017 12:22:08 PM Edit | Details | Delete
1 Cascading of styles Cascading of styles We can add multiple styles to apply simultaneously to an element. We can even add in-line styles, the styles defined inside the document and the external style sheet. CSS defines the priority of rules that determine which style to apply to the element.<br /><br />1.If an inline style exists for that element, the inline style is applied.<br />2.If the inline style doesnt exist for that element, the styles defined inside of the document of the element are applied.<br />3.If a style defined inside of the document doesnt exist for the element, the styles defined in external style sheet are applied.<br />4.If a style define in external style sheets doesnt exists for that element, the default html styles are applied.<br /><br /><t1>style.css</t1><br /><pre>body {padding: 20px;<br />h3 {font-style:italic; color: #efefef;}</pre><br /><snpt>&lt;html&gt;<br />&lt;head&gt;<br /> &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;style.css&quot; /&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br /> &lt;h1 style=&quot;font-style:uppercase&quot;&gt;Title with Inline Style&lt;/h1&gt;<br /> &lt;h2&gt;Title with Inside document style&lt;/h2&gt;<br /> &lt;h3&gt;Title with External Style Sheet style&lt;/h3&gt;<br /> &lt;h4&gt;Default HTML style&lt;/h4&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt><br /><outi><html><head> <link rel="stylesheet" type="text/css" href="style.css" /></head><body> <h1 style="font-style:uppercase">Title with Inline Style</h1> <h2>Title with Inside document style</h2> <h3>Title with External Style Sheet style</h3> <h4>Default HTML style</h4></body></html></outi><br /> Cascading of styles 10 1 4/15/2014 7:10:12 PM 10/11/2015 12:47:47 PM Edit | Details | Delete
1 Fonts Fonts <p>CSS allows you to refine font characteristics using various properties and values.</p> <tit>Font Family</tit> <p>The <code>font-family</code> property is used to specify the fonts the browser uses to render a character. </p> <p>The values are comma-separated lists of fonts. </p> <p>Family name - (e.g. Arial, "Times New Roman", etc.) Font Family names containing spaces should be quoted. Font Generic font names (e.g. serif, sansserif, cursive) are keywords and must not be quoted. </p> <note>It is recommended that the last font name in the list be a generic font name.</note> <t1>example</t1> <pre>font-family : Garamond, serif, "Times New Roman" font-family : Courier, serif, "MS Courier New"</pre> <snpt>&lt;html&gt; &lt;head&gt; &lt;style&gt; p {font-family:&quot;Times New Roman&quot;, Garamond;} div {font-family:&quot;Arial&quot;} h1 {font-family:&quot;Times New Roman&quot;, Garamond;} h2 {font-family:&quot;Arial&quot;} span {font-family:&quot;Arial&quot;} &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;p&gt;This is a paragraph text&lt;/p&gt; &lt;div&gt;This is a text inside div&lt;/div&gt; &lt;h1&gt;This is a h1 text&lt;/h1&gt; &lt;h2&gt;This is a h2 text&lt;/h2&gt; &lt;span&gt;This is a text inside div&lt;/span&gt; &lt;/body&gt; &lt;/html&gt;</snpt> <outi><html><head> <style> p {font-family:"Times New Roman", Garamond;} div {font-family:"Arial"} h1 {font-family:"Times New Roman", Garamond;} h2 {font-family:"Arial"} span {font-family:"Arial"} </style></head><body> <p>This is a paragraph text</p> <div>This is a text inside div</div> <h1>This is a paragraph text</h1> <h2>This is a paragraph text</h2> <span>This is a text inside div</span></body></html></outi> <tit>Font Style</tit> <p>The <code>font-style</code> property is used to specify the font style the browser uses to render a character. </p> <p>The values of <c>font-style</c> are. </p> <table> <tr><th>Value</th><th>Description</th></tr><tr><td><code>normal</code></td><td></td></tr><tr><td><code>italic </code></td><td>Cursive</td></tr><tr><td><code>oblique</code></td><td>Slanted, Incline</td></tr><tr><td><code>inherit </code></td><td>inherited from the parent</td></tr></table> <t1>example</t1> <pre> font-style : normal font-style : italic</pre> <snpt>&lt;html&gt; &lt;head&gt; &lt;style&gt; p {font-style:normal;} div {font-style:italic} h1 {font-style:normal;} h2 {font-style:italic} span {font-style:oblique} &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;p&gt;This is a paragraph text&lt;/p&gt; &lt;div&gt;This is a text inside div&lt;/div&gt; &lt;h1&gt;This is a h1 text&lt;/h1&gt; &lt;h2&gt;This is a h2 text&lt;/h2&gt; &lt;span&gt;This is a text inside div&lt;/span&gt; &lt;/body&gt; &lt;/html&gt;</snpt> <outi><html id="ex"><head> <style> #ex p {font-style:normal;} #ex div {font-style:italic} #ex h1 {font-style:normal;} #ex h2 {font-style:italic} #ex span {font-style:oblique} </style></head><body> <p>This is a paragraph text</p> <div>This is a text inside div</div> <h1>This is a h1 text</h1> <h2>This is a h2 text</h2> <span>This is a text inside div</span></body></html></outi> <tit>Font Variant</tit> <p>The <code>font-variant</code> property is used to specify the font variant the browser uses to render lowercase character. </p> <p>The values of <code>font-variant</code> are. </p> <table> <tr><td><code>normal</code></td><td></td></tr><tr><td><code>small-caps</code></td><td>Similar to uppercase characters but smaller in size</td></tr><tr><td><code>inherit</code></td><td>inherited from the parent</td></tr></table> <t1>example</t1> <pre> font-variant : normal font-variant : small-caps</pre> <snpt>&lt;html&gt; &lt;head&gt; &lt;style&gt; p {font-style:normal;} div {font-style:small-caps} &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;p&gt;This is a paragraph text&lt;/p&gt; &lt;div&gt;This is a text inside div&lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</snpt> <outi><html><head> <style> p {font-style:normal;} div {font-style:small-caps} </style></head><body> <p>This is a paragraph text</p> <div>This is a text inside div</div></body></html></outi> <tit>Font Weight</tit> <p>The <code>font-weight</code> property is used to specify the font weight(boldness or lightness) the browser uses to render the characters. </p> <p>The values of <code>font-weight</code> are. </p> <table> <tr><th>Value</th><th>Description</th></tr><tr><td><code>normal</code></td><td>equal to '400'</td></tr><tr><td><code>bold</code></td><td>equal to '700'</td></tr><tr><td><code>bolder</code></td><td>the next darker value upto '900'</td></tr><tr><td><code>lighter</code></td><td>the next lighter value down to '100'</td></tr><tr><td>100|200|300|400|500|600|700|800|900</td><td></td></tr><tr><td><code>inherit </code></td><td>inherited from the parent</td></tr></table> <t1>example</t1> <pre> font-weight : bold font-weight : bolder</pre> <snpt>&lt;html&gt; &lt;head&gt; &lt;style&gt; div {font-style:normal; font-family:Arial} &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div&gt; &lt;span style=&quot;font-weight:normal&quot;&gt;font-weight : normal&lt;/span&gt; &lt;span style=&quot;font-weight:bold&quot;&gt;font-weight : bold&lt;/span&gt; &lt;span style=&quot;font-weight:bolder&quot;&gt;font-weight : bolder&lt;/span&gt; &lt;span style=&quot;font-weight:lighter&quot;&gt;font-weight : lighter&lt;/span&gt; &lt;span style=&quot;font-weight:100&quot;&gt;font-weight : 100&lt;/span&gt; &lt;span style=&quot;font-weight:200&quot;&gt;font-weight : 200&lt;/span&gt; &lt;span style=&quot;font-weight:300&quot;&gt;font-weight : 300&lt;/span&gt; &lt;span style=&quot;font-weight:400&quot;&gt;font-weight : 400&lt;/span&gt; &lt;span style=&quot;font-weight:600&quot;&gt;font-weight : 600&lt;/span&gt; &lt;span style=&quot;font-weight:900&quot;&gt;font-weight : 900&lt;/span&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</snpt> <outi><html><head> <style> div {font-style:normal; font-family:Arial} </style></head><body> <div> <span style="font-weight:normal">font-weight : normal</span> <span style="font-weight:bold">font-weight : bold</span> <span style="font-weight:bolder">font-weight : bolder</span> <span style="font-weight:lighter">font-weight : lighter</span> <span style="font-weight:100">font-weight : 100</span> <span style="font-weight:200">font-weight : 200</span> <span style="font-weight:300">font-weight : 300</span> <span style="font-weight:400">font-weight : 400</span> <span style="font-weight:600">font-weight : 600</span> <span style="font-weight:900">font-weight : 900</span> </div></body></html></outi> <tit>Font stretch</tit> <p>The <code>font-stretch</code> property is used to specify the font stretch(condensed or expanded) the browser uses to render the characters. </p> <p>The values of <code>font-stretch</code> are. </p> <table> <tr><th>Value</th><th>Description</th></tr><tr><td><code>normal</code></td><td></td></tr><tr><td><code>wider</code></td><td>relative to the inherit value</td></tr><tr><td><code>narrower</code></td><td>relative to the inherit value</td></tr><tr><td><code>ultra-condensed</code> | <code>extra-condensed</code> | <code>condensed</code> | <code>semi-condensed</code></td><td></td></tr><tr><td><code>semi-expanded</code> | <code>expanded</code> | <code>extra-expanded</code> | <code>ultra-expanded</code></td><td></td></tr><tr><td><code>inherit</code></td><td>inherited from the parent</td></tr></table> <t1>example</t1> <pre> font-stretch : narrower font-stretch : expanded</pre> <snpt>&lt;html&gt; &lt;head&gt; &lt;style&gt; div {font-style:normal; font-family:Arial} &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div&gt; &lt;span style=&quot;font-stretch:wider&quot;&gt;font-stretch : normal&lt;/span&gt; &lt;span style=&quot;font-stretch:narrower&quot;&gt;font-stretch : bold&lt;/span&gt; &lt;span style=&quot;font-stretch:ultra-condensed&quot;&gt;font-stretch : bolder&lt;/span&gt; &lt;span style=&quot;font-stretch:condensed&quot;&gt;font-stretch : condensed&lt;/span&gt; &lt;span style=&quot;font-stretch:semi-expanded&quot;&gt;font-stretch : semi-expanded&lt;/span&gt; &lt;span style=&quot;font-stretch:expanded&quot;&gt;font-stretch : expanded&lt;/span&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</snpt> <tit>Font size</tit> <p>The <code>font-size</code> property is used to specify the font size(baseline to baseline) the browser uses to render the characters. </p> <p>The values of <code>font-size</code> are. </p> <table> <tr><th>Values</th><th>Description</th></tr><tr><td><<i>absolute-size</i>> <code>xx-small</code> | <code>xx-small</code> | <code>small</code> | <code>medium</code> | <code>large</code> | <code>x-large</code> |<code>xx-large</code></td><td></td></tr><tr><td><<i>relative-size</i>> <code>larger</code> | <code>smaller</code></td><td>relative to the parent value</td></tr><tr><td><<i>length</i>></td><td></td></tr><tr><td><<i>percentage</i>></td><td>relative to the parent value</td></tr><tr><td><code>inherit</code></td><td>inherited from the parent</td></tr></table> <t1>example</t1> <pre>font-size : x-small font-size : large font-size : x-small font-size : large</pre> <snpt>&lt;html&gt; &lt;head&gt; &lt;style&gt; ol{color: red;} ul{color: blue;} &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;ul&gt;Length &lt;li style=&quot;font-size: 1.2em&quot;&gt;1.2em &lt;li style=&quot;font-size: 1.2ex&quot;&gt;1.2ex &lt;li style=&quot;font-size: 20px&quot;&gt;20px &lt;li style=&quot;font-size: 0.5in&quot;&gt;0.5in &lt;li style=&quot;font-size: 5mm&quot;&gt;5mm &lt;li style=&quot;font-size: 15pt&quot;&gt;15pt &lt;li style=&quot;font-size: 2pc&quot;&gt;2pc &lt;/ul&gt; &lt;ul&gt;Absolute Size &lt;li style=&quot;font-size: xx-small&quot;&gt;xx-small &lt;li style=&quot;font-size: small&quot;&gt;small &lt;li style=&quot;font-size: large&quot;&gt;large &lt;li style=&quot;font-size: xx-large&quot;&gt;xx-large &lt;/ul&gt; &lt;ul&gt;Relative Size &lt;li style=&quot;font-size: larger&quot;&gt;larger &lt;li style=&quot;font-size: smaller&quot;&gt;smaller &lt;/ul&gt; &lt;ul&gt;Percentage &lt;li style=&quot;font-size: 50%&quot;&gt;50% &lt;li style=&quot;font-size: 100%&quot;&gt;100% &lt;/ul&gt; &lt;/body&gt; &lt;/html&gt;</snpt> <outi><iframe width="100%" height="350px" src="about:blank"><html><head> <style> ol{color: red;} ul{color: blue;} </style></head><body> <ul>Length <li style="font-size: 1.2em">1.2em <li style="font-size: 1.2ex">1.2ex <li style="font-size: 20px">20px <li style="font-size: 0.5in">0.5in <li style="font-size: 5mm">5mm <li style="font-size: 15pt">15pt <li style="font-size: 2pc">2pc </ul> <ul>Absolute Size <li style="font-size: xx-small">xx-small <li style="font-size: small">small <li style="font-size: large">large <li style="font-size: xx-large">xx-large </ul> <ul>Relative Size <li style="font-size: larger">larger <li style="font-size: smaller">smaller </ul> <ul>Percentage <li style="font-size: 50%">50% <li style="font-size: 100%">100% </ul></body></html></iframe></outi> <tit>Font aspect value</tit> <p>The '<code>font-size-adjust</code>' properties allows to specify the font aspect value (the ratio between the font-size value and the x-height) the browser uses to render characters. The normal values are 0.58 for Verdana and 0.46 for Times New Roman. Because of this, the Verdana fonts remain legible at small sizes. </p> <p>The possible values are. </p> <table> <tr><th>Values</th><th>Description</th></tr><tr><td><code>normal</code></td><td></td></tr><tr><td><<i>number</i>></td><td></td></tr><tr><td><code>inherit</code></td><td>inherited from the parent</td></tr></table> <t1>example</t1> <pre>font-size-adjust : normal font-size-adjust : 0.58</pre> <snpt>&lt;html&gt; &lt;head&gt; &lt;style&gt; ol {font-family:Arial;} ul {font-family:Verdana;} &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;ol&gt;Times New Roman &lt;li style=&quot;font-size-adjust: 0.33;&quot;&gt;0.33&lt;/li&gt; &lt;li style=&quot;font-size-adjust: 0.55;&quot;&gt;0.55&lt;/li&gt; &lt;li style=&quot;font-size-adjust: 0.99;&quot;&gt;0.99&lt;/li&gt; &lt;/ol&gt; &lt;ul&gt;Verdana Fonts &lt;li style=&quot;font-size-adjust: 0.33;&quot;&gt;0.33&lt;/li&gt; &lt;li style=&quot;font-size-adjust: 0.55;&quot;&gt;0.55&lt;/li&gt; &lt;li style=&quot;font-size-adjust: 0.99;&quot;&gt;0.99&lt;/li&gt; &lt;/ul&gt; &lt;/body&gt; &lt;/html&gt;</snpt> <outi><html><head> <style> ol {font-family:Arial;} ul {font-family:Verdana;} </style></head><body> <ol>Times New Roman <li style="font-size-adjust: 0.33;">0.33</li> <li style="font-size-adjust: 0.55;">0.55</li> <li style="font-size-adjust: 0.99;">0.99</li> </ol> <ul>Verdana Fonts <li style="font-size-adjust: 0.33;">0.33</li> <li style="font-size-adjust: 0.55;">0.55</li> <li style="font-size-adjust: 0.99;">0.99</li> </ul></body></html></outi> <tit>Font</tit> The <code>font</code> property is used as a shorthand to specify the font the browser uses to render characters. The possible values. <table> <tr><th>Values</th><th>Description</th></tr><tr><td><<i>font-style</i>> <<i>font-variant</i>> <<i>font-weight</i>> <<i>font-size</i>>/ <<i>line-height</i>> <<i>font-family</i>></td><td></td></tr><tr><td><code>caption</code> | <code>icon</code> | <code>menu</code> | <code>message-box</code> | <code>small-caption</code> | <code>status-bar</code></td><td></td></tr><tr><td><code>inherit</code></td><td>inherited from the parent</td></tr></table> <t1>example</t1> <pre>font: italic small-caps 600 15pt/18pt Arial, serif font: 110% "Times New Roman", Garamond, serif font: 110%/120% "Courier New", fantasy</pre> <snpt>&lt;html&gt; &lt;head&gt; &lt;style&gt; ol {font-family:Arial;} ul {font-family:Verdana;} &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;ul&gt;The &#39;font&#39; property &lt;li style=&quot;font: italic small-caps 600 15pt/18pt Arial, serif;&quot;&gt;italic&lt;/li&gt; &lt;li style=&quot;font: oblique border 0.2in/0.3in Arial, serif;&quot;&gt;oblique&lt;/li&gt; &lt;li style=&quot;font: 20px/28px fantasy&quot;&gt;20px/28px fantasy&lt;/li&gt; &lt;li style=&quot;font: 150%/200% Verdana&quot;&gt;150%/200% Verdana&lt;/li&gt; &lt;li style=&quot;font: 1.1pc cursive&quot;&gt;1.1pc cursive&lt;/li&gt; &lt;/ul&gt; &lt;/body&gt; &lt;/html&gt;</snpt> <outi><html><head> <style> ol {font-family:Arial;} ul {font-family:Verdana;} </style></head><body> <ul>The 'font' property <li style="font: italic small-caps 600 15pt/18pt Arial, serif;">italic</li> <li style="font: oblique border 0.2in/0.3in Arial, serif;">oblique</li> <li style="font: 20px/28px fantasy">20px/28px fantasy</li> <li style="font: 150%/200% Verdana">150%/200% Verdana</li> <li style="font: 1.1pc cursive">1.1pc cursive</li> </ul></body></html></outi> <tit>Font Download</tit> CSS2 allows the designer to describe and download custom-made fonts. This is made possible by a @font-face block inserted into the style sheet. The @font-face block contains rules that describe the font. The rules is given below. It defines the internet address for the font that will be downloaded and used by the browser for rendering. <pre>src : &lt;<i>url</i>&gt; - url</pre> <t1>Font extensions:</t1> <i>prf</i>, .<i>eot</i>, .<i>ttf</i>, .<i>pfb</i>, .<i>pfa</i> <snpt>&lt;style&gt; @font-face {font-family: Fella; font-size: 15pt; src: http://www.quotefellas.com/fonts/fella.ttf;} p {font: Fella; color:red} &lt;/style&gt;</snpt> css Fonts 1 1 4/15/2014 7:28:24 PM 12/16/2018 7:59:53 PM Edit | Details | Delete
1 Font Family Font Family The <code>font-family</code> property is used to specify the fonts the browser uses to render a character.<br /><br />The values are comma-separated lists of fonts.<br /><br />Family name - (e.g. Arial, "Times New Roman", etc.)<br />Font Family names containing spaces should be quoted.<br />Font Generic font names (e.g. serif, sansserif, cursive) are keywords and must not be quoted.<br /><br /><note>It is recommended that the last font name in the list be a generic font name.</note><br /><br /><t1>example</t1><br /><pre>font-family : Garamond, serif, "Times New Roman"<br />font-family : Courier, serif, "MS Courier New"</pre><br /><snpt>&lt;html&gt;<br />&lt;head&gt;<br /> &lt;style&gt;<br /> p {font-family:&quot;Times New Roman&quot;, Garamond;}<br /> div {font-family:&quot;Arial&quot;}<br /> h1 {font-family:&quot;Times New Roman&quot;, Garamond;}<br /> h2 {font-family:&quot;Arial&quot;}<br /> span {font-family:&quot;Arial&quot;}<br /> &lt;/style&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br /> &lt;p&gt;This is a paragraph text&lt;/p&gt;<br /> &lt;div&gt;This is a text inside div&lt;/div&gt;<br /> &lt;h1&gt;This is a h1 text&lt;/h1&gt;<br /> &lt;h2&gt;This is a h2 text&lt;/h2&gt;<br /> &lt;span&gt;This is a text inside div&lt;/span&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt><br /><br /><outi><html><head> <style> p {font-family:"Times New Roman", Garamond;} div {font-family:"Arial"} h1 {font-family:"Times New Roman", Garamond;} h2 {font-family:"Arial"} span {font-family:"Arial"} </style></head><body> <p>This is a paragraph text</p> <div>This is a text inside div</div> <h1>This is a paragraph text</h1> <h2>This is a paragraph text</h2> <span>This is a text inside div</span></body></html></outi> css Font Family 2 1 4/15/2014 7:30:25 PM 10/11/2015 12:54:58 PM Edit | Details | Delete
1 Font Style Font Style The <code>font-style</code> property is used to specify the font style the browser uses to render a character.<br /><br />The values of <c>font-style</c> are.<br /><table><br /><tr><th>Value</th><th>Description</th></tr><tr><td><code>normal</code></td><td></td></tr><tr><td><code>italic </code></td><td>Cursive</td></tr><tr><td><code>oblique</code></td><td>Slanted, Incline</td></tr><tr><td><code>inherit </code></td><td>inherited from the parent</td></tr></table><br /><t1>example</t1><br /><pre> font-style : normal<br /> font-style : italic</pre><br /><snpt>&lt;html&gt;<br />&lt;head&gt;<br /> &lt;style&gt;<br /> p {font-style:normal;}<br /> div {font-style:italic}<br /> h1 {font-style:normal;}<br /> h2 {font-style:italic}<br /> span {font-style:oblique}<br /> &lt;/style&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br /> &lt;p&gt;This is a paragraph text&lt;/p&gt;<br /> &lt;div&gt;This is a text inside div&lt;/div&gt;<br /> &lt;h1&gt;This is a h1 text&lt;/h1&gt;<br /> &lt;h2&gt;This is a h2 text&lt;/h2&gt;<br /> &lt;span&gt;This is a text inside div&lt;/span&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt><br /><br /><outi><html id="ex"><head> <style> #ex p {font-style:normal;} #ex div {font-style:italic} #ex h1 {font-style:normal;} #ex h2 {font-style:italic} #ex span {font-style:oblique} </style></head><body> <p>This is a paragraph text</p> <div>This is a text inside div</div> <h1>This is a h1 text</h1> <h2>This is a h2 text</h2> <span>This is a text inside div</span></body></html></outi> css Font Style 3 1 4/15/2014 7:34:21 PM 1/31/2017 12:24:34 PM Edit | Details | Delete
1 Font weight Font weight The <code>font-weight</code> property is used to specify the font weight(boldness or lightness) the browser uses to render the characters.<br /><br />The values of <code>font-weight</code> are.<br /><table><br /><tr><th>Value</th><th>Description</th></tr><tr><td><code>normal</code></td><td>equal to '400'</td></tr><tr><td><code>bold</code></td><td>equal to '700'</td></tr><tr><td><code>bolder</code></td><td>the next darker value upto '900'</td></tr><tr><td><code>lighter</code></td><td>the next lighter value down to '100'</td></tr><tr><td>100|200|300|400|500|600|700|800|900</td><td></td></tr><tr><td><code>inherit </code></td><td>inherited from the parent</td></tr></table><br /><br /><t1>example</t1><br /><pre> font-weight : bold<br /> font-weight : bolder</pre><br /> <br /><snpt>&lt;html&gt;<br />&lt;head&gt;<br /> &lt;style&gt;<br /> div {font-style:normal; font-family:Arial}<br /> &lt;/style&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br /> &lt;div&gt;<br /> &lt;span style=&quot;font-weight:normal&quot;&gt;font-weight : normal&lt;/span&gt;<br /> &lt;span style=&quot;font-weight:bold&quot;&gt;font-weight : bold&lt;/span&gt;<br /> &lt;span style=&quot;font-weight:bolder&quot;&gt;font-weight : bolder&lt;/span&gt;<br /> &lt;span style=&quot;font-weight:lighter&quot;&gt;font-weight : lighter&lt;/span&gt;<br /> &lt;span style=&quot;font-weight:100&quot;&gt;font-weight : 100&lt;/span&gt;<br /> &lt;span style=&quot;font-weight:200&quot;&gt;font-weight : 200&lt;/span&gt;<br /> &lt;span style=&quot;font-weight:300&quot;&gt;font-weight : 300&lt;/span&gt;<br /> &lt;span style=&quot;font-weight:400&quot;&gt;font-weight : 400&lt;/span&gt;<br /> &lt;span style=&quot;font-weight:600&quot;&gt;font-weight : 600&lt;/span&gt;<br /> &lt;span style=&quot;font-weight:900&quot;&gt;font-weight : 900&lt;/span&gt;<br /> &lt;/div&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt><br /><br /><outi><html><head> <style> div {font-style:normal; font-family:Arial} </style></head><body> <div> <span style="font-weight:normal">font-weight : normal</span> <span style="font-weight:bold">font-weight : bold</span> <span style="font-weight:bolder">font-weight : bolder</span> <span style="font-weight:lighter">font-weight : lighter</span> <span style="font-weight:100">font-weight : 100</span> <span style="font-weight:200">font-weight : 200</span> <span style="font-weight:300">font-weight : 300</span> <span style="font-weight:400">font-weight : 400</span> <span style="font-weight:600">font-weight : 600</span> <span style="font-weight:900">font-weight : 900</span> </div></body></html></outi> css Font weight 5 1 4/15/2014 7:39:16 PM 1/31/2017 12:26:16 PM Edit | Details | Delete
1 Font stretch Font stretch The <code>font-stretch</code> property is used to specify the font stretch(condensed or expanded) the browser uses to render the characters.<br /><br />The values of <code>font-stretch</code> are.<br /><table><br /><tr><th>Value</th><th>Description</th></tr><tr><td><code>normal</code></td><td></td></tr><tr><td><code>wider</code></td><td>relative to the inherit value</td></tr><tr><td><code>narrower</code></td><td>relative to the inherit value</td></tr><tr><td><code>ultra-condensed</code> | <code>extra-condensed</code> | <code>condensed</code> | <code>semi-condensed</code></td><td></td></tr><tr><td><code>semi-expanded</code> | <code>expanded</code> | <code>extra-expanded</code> | <code>ultra-expanded</code></td><td></td></tr><tr><td><code>inherit</code></td><td>inherited from the parent</td></tr></table><br /><t1>example</t1><br /><pre> font-stretch : narrower<br /> font-stretch : expanded</pre><br /> <snpt>&lt;html&gt;<br />&lt;head&gt;<br /> &lt;style&gt;<br /> div {font-style:normal; font-family:Arial}<br /> &lt;/style&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br /> &lt;div&gt;<br /> &lt;span style=&quot;font-stretch:wider&quot;&gt;font-stretch : normal&lt;/span&gt;<br /> &lt;span style=&quot;font-stretch:narrower&quot;&gt;font-stretch : bold&lt;/span&gt;<br /> &lt;span style=&quot;font-stretch:ultra-condensed&quot;&gt;font-stretch : bolder&lt;/span&gt;<br /> &lt;span style=&quot;font-stretch:condensed&quot;&gt;font-stretch : condensed&lt;/span&gt;<br /> &lt;span style=&quot;font-stretch:semi-expanded&quot;&gt;font-stretch : semi-expanded&lt;/span&gt;<br /> &lt;span style=&quot;font-stretch:expanded&quot;&gt;font-stretch : expanded&lt;/span&gt;<br /> &lt;/div&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt> css Font stretch 6 1 4/15/2014 7:41:46 PM 1/31/2017 12:27:32 PM Edit | Details | Delete
1 Font size Font size The <code>font-size</code> property is used to specify the font size(baseline to baseline) the browser uses to render the characters.<br /><br />The values of <code>font-size</code> are.<br /><table><br /><tr><th>Values</th><th>Description</th></tr><tr><td><<i>absolute-size</i>><br /><code>xx-small</code> | <code>xx-small</code> | <code>small</code> | <code>medium</code> | <code>large</code> | <code>x-large</code> |<code>xx-large</code></td><td></td></tr><tr><td><<i>relative-size</i>><br /><code>larger</code> | <code>smaller</code></td><td>relative to the parent value</td></tr><tr><td><<i>length</i>></td><td></td></tr><tr><td><<i>percentage</i>></td><td>relative to the parent value</td></tr><tr><td><code>inherit</code></td><td>inherited from the parent</td></tr></table><br /><br /><t1>example</t1><br /><pre>font-size : x-small<br />font-size : large<br />font-size : x-small<br />font-size : large</pre><br /> <br /><snpt>&lt;html&gt;<br />&lt;head&gt;<br /> &lt;style&gt;<br /> ol{color: red;}<br /> ul{color: blue;}<br /> &lt;/style&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br /> &lt;ul&gt;Length<br /> &lt;li style=&quot;font-size: 1.2em&quot;&gt;1.2em<br /> &lt;li style=&quot;font-size: 1.2ex&quot;&gt;1.2ex<br /> &lt;li style=&quot;font-size: 20px&quot;&gt;20px<br /> &lt;li style=&quot;font-size: 0.5in&quot;&gt;0.5in<br /> &lt;li style=&quot;font-size: 5mm&quot;&gt;5mm<br /> &lt;li style=&quot;font-size: 15pt&quot;&gt;15pt<br /> &lt;li style=&quot;font-size: 2pc&quot;&gt;2pc<br /> &lt;/ul&gt;<br /><br /> &lt;ul&gt;Absolute Size<br /> &lt;li style=&quot;font-size: xx-small&quot;&gt;xx-small<br /> &lt;li style=&quot;font-size: small&quot;&gt;small<br /> &lt;li style=&quot;font-size: large&quot;&gt;large<br /> &lt;li style=&quot;font-size: xx-large&quot;&gt;xx-large<br /> &lt;/ul&gt;<br /><br /> &lt;ul&gt;Relative Size<br /> &lt;li style=&quot;font-size: larger&quot;&gt;larger<br /> &lt;li style=&quot;font-size: smaller&quot;&gt;smaller<br /> &lt;/ul&gt;<br /><br /> &lt;ul&gt;Percentage<br /> &lt;li style=&quot;font-size: 50%&quot;&gt;50%<br /> &lt;li style=&quot;font-size: 100%&quot;&gt;100%<br /> &lt;/ul&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt><br /><br /><outi><iframe width="100%" height="350px" src="about:blank"><html><head> <style> ol{color: red;} ul{color: blue;} </style></head><body> <ul>Length <li style="font-size: 1.2em">1.2em <li style="font-size: 1.2ex">1.2ex <li style="font-size: 20px">20px <li style="font-size: 0.5in">0.5in <li style="font-size: 5mm">5mm <li style="font-size: 15pt">15pt <li style="font-size: 2pc">2pc </ul> <ul>Absolute Size <li style="font-size: xx-small">xx-small <li style="font-size: small">small <li style="font-size: large">large <li style="font-size: xx-large">xx-large </ul> <ul>Relative Size <li style="font-size: larger">larger <li style="font-size: smaller">smaller </ul> <ul>Percentage <li style="font-size: 50%">50% <li style="font-size: 100%">100% </ul></body></html></iframe></outi> css Font size 7 1 4/15/2014 7:44:04 PM 11/1/2015 2:52:39 PM Edit | Details | Delete
1 Font aspect value Font aspect value The '<code>font-size-adjust</code>' properties allows to specify the font aspect value (the ratio between the font-size value and the x-height) the browser uses to render characters. The normal values are 0.58 for Verdana and 0.46 for Times New Roman. Because of this, the Verdana fonts remain legible at small sizes.<br /><br />The possible values are.<br /><table><br /><tr><th>Values</th><th>Description</th></tr><tr><td><code>normal</code></td><td></td></tr><tr><td><<i>number</i>></td><td></td></tr><tr><td><code>inherit</code></td><td>inherited from the parent</td></tr></table><br /><t1>example</t1><br /><pre>font-size-adjust : normal<br />font-size-adjust : 0.58</pre><br /><br /><snpt>&lt;html&gt;<br />&lt;head&gt;<br /> &lt;style&gt;<br /> ol {font-family:Arial;}<br /> ul {font-family:Verdana;}<br /> &lt;/style&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br /> &lt;ol&gt;Times New Roman<br /> &lt;li style=&quot;font-size-adjust: 0.33;&quot;&gt;0.33&lt;/li&gt;<br /> &lt;li style=&quot;font-size-adjust: 0.55;&quot;&gt;0.55&lt;/li&gt;<br /> &lt;li style=&quot;font-size-adjust: 0.99;&quot;&gt;0.99&lt;/li&gt;<br /> &lt;/ol&gt;<br /><br /> &lt;ul&gt;Verdana Fonts<br /> &lt;li style=&quot;font-size-adjust: 0.33;&quot;&gt;0.33&lt;/li&gt;<br /> &lt;li style=&quot;font-size-adjust: 0.55;&quot;&gt;0.55&lt;/li&gt;<br /> &lt;li style=&quot;font-size-adjust: 0.99;&quot;&gt;0.99&lt;/li&gt;<br /> &lt;/ul&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt><br /><br /><outi><html><head> <style> ol {font-family:Arial;} ul {font-family:Verdana;} </style></head><body> <ol>Times New Roman <li style="font-size-adjust: 0.33;">0.33</li> <li style="font-size-adjust: 0.55;">0.55</li> <li style="font-size-adjust: 0.99;">0.99</li> </ol> <ul>Verdana Fonts <li style="font-size-adjust: 0.33;">0.33</li> <li style="font-size-adjust: 0.55;">0.55</li> <li style="font-size-adjust: 0.99;">0.99</li> </ul></body></html></outi> css Font aspect value 8 1 4/15/2014 7:46:04 PM 10/11/2015 1:53:43 PM Edit | Details | Delete
1 Font Font The <code>font</code> property is used as a shorthand to specify the font the browser uses to render characters.<br /><br />The possible values.<br /><table><br /><tr><th>Values</th><th>Description</th></tr><tr><td><<i>font-style</i>> <<i>font-variant</i>> <<i>font-weight</i>> <<i>font-size</i>>/ <<i>line-height</i>> <<i>font-family</i>></td><td></td></tr><tr><td><code>caption</code> | <code>icon</code> | <code>menu</code> | <code>message-box</code> | <code>small-caption</code> | <code>status-bar</code></td><td></td></tr><tr><td><code>inherit</code></td><td>inherited from the parent</td></tr></table><br /><br /><t1>example</t1><br /><pre>font: italic small-caps 600 15pt/18pt Arial, serif<br />font: 110% "Times New Roman", Garamond, serif<br />font: 110%/120% "Courier New", fantasy</pre><br /><br /><snpt>&lt;html&gt;<br />&lt;head&gt;<br /> &lt;style&gt;<br /> ol {font-family:Arial;}<br /> ul {font-family:Verdana;}<br /> &lt;/style&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br /> &lt;ul&gt;The &#39;font&#39; property<br /> &lt;li style=&quot;font: italic small-caps 600 15pt/18pt Arial, serif;&quot;&gt;italic&lt;/li&gt;<br /> &lt;li style=&quot;font: oblique border 0.2in/0.3in Arial, serif;&quot;&gt;oblique&lt;/li&gt;<br /> &lt;li style=&quot;font: 20px/28px fantasy&quot;&gt;20px/28px fantasy&lt;/li&gt;<br /> &lt;li style=&quot;font: 150%/200% Verdana&quot;&gt;150%/200% Verdana&lt;/li&gt;<br /> &lt;li style=&quot;font: 1.1pc cursive&quot;&gt;1.1pc cursive&lt;/li&gt;<br /> &lt;/ul&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt><br /><br /><outi><html><head> <style> ol {font-family:Arial;} ul {font-family:Verdana;} </style></head><body> <ul>The 'font' property <li style="font: italic small-caps 600 15pt/18pt Arial, serif;">italic</li> <li style="font: oblique border 0.2in/0.3in Arial, serif;">oblique</li> <li style="font: 20px/28px fantasy">20px/28px fantasy</li> <li style="font: 150%/200% Verdana">150%/200% Verdana</li> <li style="font: 1.1pc cursive">1.1pc cursive</li> </ul></body></html></outi> css Font 9 1 4/15/2014 7:48:13 PM 10/11/2015 2:05:13 PM Edit | Details | Delete
1 font download font download CSS2 allows the designer to describe and download custom-made fonts. This is made possible by a @font-face block inserted into the style sheet. The @font-face block contains rules that describe the font. <br /><br />The rules is given below. It defines the internet address for the font that will be downloaded and used by the browser for rendering.<br /><br /><pre>src : &lt;<i>url</i>&gt; - url</pre><br /><br /><t1>Font extensions:</t1> <i>prf</i>, .<i>eot</i>, .<i>ttf</i>, .<i>pfb</i>, .<i>pfa</i><br /><br /><snpt>&lt;style&gt;<br />@font-face {font-family: Fella;<br /> font-size: 15pt;<br /> src: http://www.quotefellas.com/fonts/fella.ttf;} <br />p {font: Fella; color:red}<br />&lt;/style&gt;</snpt> css font download 10 1 4/15/2014 7:49:36 PM 10/11/2015 2:10:32 PM Edit | Details | Delete
1 Text Text <p>CSS allows to set various properties for text such as characters, spaces, words and paragraph.</p> <tit>Text Indentation</tit> <p>The <code>text-indent</code> property is used to control the indentation of the first line of a block of text. </p> <p>The possible values are. </p> <table> <tr><th>Values</th><th>Description</th></tr><tr><td><<i>length</i>></td><td> (e.g. 2px, -1in, 1.2cm)</td></tr><tr><td><<i>percentage</i>></td><td>(e.g. 10%, -20%)</td></tr><tr><td><code>inherit</code></td><td>The property is inherited from the parent</td></tr></table> <snpt>&lt;html&gt; &lt;head&gt; &lt;style&gt; p {text-indent:50px;} div {text-indent:-10%} td {text-indent:3cm} &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;p&gt;This is a paragraph text&lt;/p&gt; &lt;div&gt;This is a text inside div&lt;/div&gt; &lt;table&gt; &lt;tr&gt;&lt;th&gt;Lorem Ipsum&lt;/th&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;optio neque cum aperiam adipisci minus atque corrupti&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;illo obcaecati dolore id perspiciatis&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;illum iusto perferendis ipsam harum ab libero&lt;/td&gt;&lt;/tr&gt; &lt;/table&gt; &lt;/body&gt; &lt;/html&gt;</snpt> <outi><html id="cx"><head> <style> #cx.p {text-indent:50px;} #cx.div {text-indent:-10%} #cx.td {text-indent:3cm} </style></head><body> <p>This is a paragraph text</p> <div>This is a text inside div</div> <table> <tr><th>Lorem Ipsum</th></tr> <tr><td>optio neque cum aperiam adipisci minus atque corrupti</td></tr> <tr><td>illo obcaecati dolore id perspiciatis</td></tr> <tr><td>illum iusto perferendis ipsam harum ab libero</td></tr> </table></body></html></outi> <tit>Text Alignment</tit> <p>The <code>text-align</code> property is used to to control the alignment of a block of text. </p> <p>The values of text-align are. </p> <table> <tr><th>Values</th><th>Description</th></tr><tr><td><code>left</code> | <code>right</code> | <code>center</code> | <code>justify</code></td><td></td></tr><tr><td><<i>string</i>></td><td>It is used for vertical alignment. Applies for table cells.</td></tr><tr><td><code>inherit</code></td><td>inherited from parent</td></tr></table> <note> Browser do not yet support the <<i>string</i>> alignment.</note> <snpt>&lt;html&gt; &lt;head&gt; &lt;style&gt; p {text-align:justify;} div {text-align:right} td {text-align:&quot;.&quot;} &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;p&gt;This is a paragraph text&lt;/p&gt; &lt;div&gt;This is a text inside div&lt;/div&gt; &lt;table&gt; &lt;tr&gt;&lt;th&gt;Lorem Ipsum&lt;/th&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;optio neque cum aperiam adipisci minus atque corrupti&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;illo obcaecati dolore id perspiciatis&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;illum iusto perferendis ipsam harum ab libero&lt;/td&gt;&lt;/tr&gt; &lt;/table&gt; &lt;/body&gt; &lt;/html&gt;</snpt> <outi><html id="cx"><head> <style> #cx.p {text-align:justify;} #cx.div {text-align:right} #cx.td {text-align:"."} </style></head><body> <p>This is a paragraph text</p> <div>This is a text inside div</div> <table> <tr><th>Lorem Ipsum</th></tr> <tr><td>optio neque cum aperiam adipisci minus atque corrupti</td></tr> <tr><td>illo obcaecati dolore id perspiciatis</td></tr> <tr><td>illum iusto perferendis ipsam harum ab libero</td></tr> </table></body></html></outi> <tit>Text Decoration</tit> <p>The <code>text-decoration</code> property is used to control the decoration (underline, line-through, etc) of a block of text.</p> <p>The values of <code>text-decoration</code> are. </p> <table> <tr><th>Values</th><th>Desciption</th></tr><tr><td><code>none</code> | <code>underline</code> | <code>overline</code> | <code>line-through</code> | <code>blink</code></td><td></td></tr><tr><td><code>inherit</code></td><td>inherited from the parent</td></tr></table> <note>Internet explorer does not support "blink" value.</note> <snpt>&lt;html&gt; &lt;head&gt; &lt;style&gt; p {text-decoration:overline;} span {text-decoration:underline} a {text-decoration:none} b {text-decoration:line-through} em {text-decoration:blink} &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;p&gt;Quote&lt;/p&gt; &lt;b&gt;Never cry&lt;/b&gt; for the person who hurts you. &lt;span&gt;Just smile and say&lt;/span&gt;, thanks for giving me a chance to find someone &lt;em&gt;better&lt;/em&gt; than you. &lt;div&gt;&lt;a href=&quot;http://www.quotefellas.com&quot;&gt;Quote Fellas&lt;/a&gt;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</snpt> <outi><html id="cx"><head> <style> #cx.p {text-decoration:overline;} #cx.span {text-decoration:underline} #cx.a {text-decoration:none} #cx.b {text-decoration:line-through} #cx.em {text-decoration:blink} </style></head><body> <p>Quote</p> <b>Never cry</b> for the person who hurts you. <span>Just smile and say</span>, thanks for giving me a chance to find someone <em>better</em> than you. <div><a href="http://www.quotefellas.com">Quote Fellas</a></div></body></html></outi> <tit>Text Shadows</tit> <p>The <code>text-shadow</code> property is used to attach shadows to a block of text. </p> <p>The values of <code>text-shadow</code> are. </p> <table> <tr><th>Values</th><th>Description</th></tr><tr><td><code>none</code></td><td></td></tr><tr><td><code>inherit</code></td><td></td></tr><tr><td colspan="2">A list of comma-delimated shadow descriptions</td></tr><tr><td><<i>color</i>><<i>length_x</i>><<i>length_y</i>><<i>length_r</i>></td rowspan="2"><td><<i>length_x</i>><<i>length_y</i>> - The position of shadow relative to the block. <<i>length_r</i>> - Blur radius. <<i>color</i>> - The color of the shadow. </td></tr><tr><td><<i>length_x</i>><<i>length_y</i>><<i>length_r</i>><<i>color</i>></td></tr></table> <t1>example</t1> <pre>text-shadow : red 10px 10px; /* Right-bottom*/ text-shadow : 10px 10px 5px yellow; /* left-up, blurred*/ font-shadow : 5px 5px, -5px -5px; /* right-bottom and left-up*/</pre> <snpt>&lt;html&gt; &lt;head&gt; &lt;style&gt; p {text-shadow:-10px -10px 6px red;} h2 {text-shadow:yellow 8px 8px} a {text-shadow:5px 5px, -5px -5px} &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;a&gt;This is a anchor link&lt;/a&gt; &lt;p&gt;This is a paragraph text&lt;/p&gt; &lt;h2&gt;This is a text inside h2&lt;/h2&gt; &lt;/body&gt; &lt;/html&gt;</snpt> <outi><html id="cx"><head> <style> #cx. p {text-shadow:-10px -10px 6px red;} #cx.h2 {text-shadow:yellow 8px 8px} #cx.a {text-shadow:5px 5px, -5px -5px} </style></head><body> <a>This is a anchor link</a> <p>This is a paragraph text</p> <h2>This is a text inside h2</h2></body></html></outi> <tit>Letter Spacing</tit> <p>The <code>letter-spacing</code> property is used to add extra space between adjacent characters.</p> <p>The values of <code>letter-spacing</code> are. </p> <table> <tr><th>Values</th><th>Description</th></tr><tr><td><code>normal</code></td><td></td></tr><tr><td><<i>length</i>></td><td></td></tr><tr><td><code>inherit</code></td><td>inherited from the parent</td></tr></table> <t1>example</t1> <pre> letter-spacing : 0.5em letter-spacing : 5px letter-spacing : 5pt letter-spacing : 0.5cm</pre> <snpt>&lt;html&gt; &lt;head&gt; &lt;style&gt; p {letter-spacing:15px;} h2 {letter-spacing:0.6cm} a {letter-spacing:2mm} span {letter-spacing:3pt} div {letter-spacing:+0.2em; color: red} &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;a&gt;This is a anchor link&lt;/a&gt; &lt;p&gt;This is a paragraph text&lt;/p&gt; &lt;h2&gt;This is a text inside h2&lt;/h2&gt; &lt;span&gt;This is a paragraph text&lt;/span&gt; &lt;div&gt;This is a text inside h2&lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</snpt> <outi><html id="cx"><head> <style> #cx.p {letter-spacing:15px;} #cx.h2 {letter-spacing:0.6cm} #cx.a {letter-spacing:2mm} #cx.span {letter-spacing:3pt} #cx.div {letter-spacing:+0.2em; color: red} </style></head><body> <a>This is a anchor link</a> <p>This is a paragraph text</p> <h2>This is a text inside h2</h2> <span>This is a paragraph text</span> <div>This is a text inside h2</div></body></html></outi> <tit>Word Spacing</tit> <p>The <code>word-spacing</code> property is used to add extra space between adjacent words. </p> <p>The values of word-spacing are. </p> <table> <tr><th>Values</th><th>Description</th></tr><tr><td><code>normal</code></td><td></td></tr><tr><td><<i>length</i>></td><td></td></tr><tr><td><code>inherit</code></td><td>inherited from the parent</td></tr></table> <t1>example</t1> <pre>word-spacing : -0.2ex word-spacing : 5cm</pre> <snpt>&lt;html&gt; &lt;head&gt; &lt;style&gt; p {word-spacing:15px;} h2 {word-spacing:0.6cm} a {word-spacing:2mm} span {word-spacing:3pt} div {word-spacing:+0.2em; color: red} &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;a&gt;This is a anchor link&lt;/a&gt; &lt;p&gt;This is a paragraph text&lt;/p&gt; &lt;h2&gt;This is a text inside h2&lt;/h2&gt; &lt;span&gt;This is a paragraph text&lt;/span&gt; &lt;div&gt;This is a text inside h2&lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</snpt> <outi><html><head> <style> #rn-out p {word-spacing:15px;} #rn-out h2 {word-spacing:0.6cm} #rn-out a {word-spacing:2mm} #rn-out span {word-spacing:3pt} #rn-out div {word-spacing:+0.2em; color: red} </style></head><body id="cx"> <a>This is a anchor link</a> <p>This is a paragraph text</p> <h2>This is a text inside h2</h2> <span>This is a paragraph text</span> <div>This is a text inside h2</div></body></html></outi> <tit>Text Transform</tit> <p>The <code>text-transform</code> property is used to control the capitalization of a block of text.. </p> <p>The values of <code>text-transform</code> are. </p> <table> <tr><th>Values</th><th>Description</th></tr><tr><td><code>none</code></td><td></td></tr><tr><td><code>capitalize</code></td><td>To capitalize the first character of each word.</td></tr><tr><td><code>uppercase</code></td><td>To capitalize all characters.</td></tr><tr><td><code>lowercase</code></td><td>To decapitalize all characters.</td></tr><tr><td><code>inherit</code></td><td>The property is inherited from the parent.</td></tr></table> <t1>example</t1> <pre> text-transform : uppercase text-transform : lowercase</pre> <snpt>&lt;html&gt; &lt;head&gt; &lt;style&gt; p {text-transform:uppercase;} span {text-transform:lowercase} div {text-transform:capitalize} &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;p&gt;Sometimes you will never know the value of a Moment until it becomes a memory.&lt;/p&gt; &lt;span&gt;Sometimes you will never know the value of a Moment until it becomes a memory.&lt;/span&gt; &lt;div&gt;Sometimes you will never know the value of a Moment until it becomes a memory.&lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</snpt> <tit>White Spaces</tit> <p>The <code>white-space</code> property is used to control the white spaces inside a block of text. </p> <p>The values of <code>white-space</code> are. </p> <table> <tr><th>Values</th><th>Description</th></tr><tr><td><code>normal</code></td><td></td></tr><tr><td><code>capitalize</code></td><td>Replaces the sequence of white spaces with a space character.</td></tr><tr><td><code>pre</code></td><td>White spaces are considered.</td></tr><tr><td><code>nowrap</code></td><td>Line breaks are not considered.</td></tr><tr><td><code>inherit </code></td><td>The property is inherited from the parent.</td></tr></table> <t1>example</t1> <pre>&lt;style&gt; white-space : nowrap white-space : pre &lt;/style&gt;</pre> <snpt>&lt;html&gt; &lt;head&gt; &lt;style&gt; p {white-space:nowrap;} div {white-space:pre} &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;p&gt;Sometimes you will never know the value of a Moment until it becomes a memory.&lt;/p&gt; &lt;div&gt; Name Age Grade Fernando 35 A Michael 27 C Abrahim 54 B Yashva 22 A+ &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</snpt> Text 1 1 4/16/2014 6:29:41 PM 12/16/2018 7:53:23 PM Edit | Details | Delete
1 Text Indentation Text Indentation The <code>text-indent</code> property is used to control the indentation of the first line of a block of text.<br /><br />The possible values are.<br /><table><br /><tr><th>Values</th><th>Description</th></tr><tr><td><<i>length</i>></td><td> (e.g. 2px, -1in, 1.2cm)</td></tr><tr><td><<i>percentage</i>></td><td>(e.g. 10%, -20%)</td></tr><tr><td><code>inherit</code></td><td>The property is inherited from the parent</td></tr></table><br /><br /><snpt>&lt;html&gt;<br />&lt;head&gt;<br /> &lt;style&gt;<br /> p {text-indent:50px;}<br /> div {text-indent:-10%}<br /> td {text-indent:3cm}<br /> &lt;/style&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br /> &lt;p&gt;This is a paragraph text&lt;/p&gt;<br /> &lt;div&gt;This is a text inside div&lt;/div&gt;<br /> &lt;table&gt;<br /> &lt;tr&gt;&lt;th&gt;Lorem Ipsum&lt;/th&gt;&lt;/tr&gt;<br /> &lt;tr&gt;&lt;td&gt;optio neque cum aperiam adipisci minus atque corrupti&lt;/td&gt;&lt;/tr&gt;<br /> &lt;tr&gt;&lt;td&gt;illo obcaecati dolore id perspiciatis&lt;/td&gt;&lt;/tr&gt;<br /> &lt;tr&gt;&lt;td&gt;illum iusto perferendis ipsam harum ab libero&lt;/td&gt;&lt;/tr&gt;<br /> &lt;/table&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt><br /><br /><outi><html id="cx"><head> <style> #cx.p {text-indent:50px;} #cx.div {text-indent:-10%} #cx.td {text-indent:3cm} </style></head><body> <p>This is a paragraph text</p> <div>This is a text inside div</div> <table> <tr><th>Lorem Ipsum</th></tr> <tr><td>optio neque cum aperiam adipisci minus atque corrupti</td></tr> <tr><td>illo obcaecati dolore id perspiciatis</td></tr> <tr><td>illum iusto perferendis ipsam harum ab libero</td></tr> </table></body></html></outi> css Text Indentation 2 1 4/16/2014 6:33:43 PM 1/31/2017 12:28:44 PM Edit | Details | Delete
1 Text Alignment Alignment The <code>text-align</code> property is used to to control the alignment of a block of text.<br /><br />The values of text-align are.<br /><table><br /><tr><th>Values</th><th>Description</th></tr><tr><td><code>left</code> | <code>right</code> | <code>center</code> | <code>justify</code></td><td></td></tr><tr><td><<i>string</i>></td><td>It is used for vertical alignment. Applies for table cells.</td></tr><tr><td><code>inherit</code></td><td>inherited from parent</td></tr></table><br /><note> Browser do not yet support the <<i>string</i>> alignment.</note><br /><br /><snpt>&lt;html&gt;<br />&lt;head&gt;<br /> &lt;style&gt;<br /> p {text-align:justify;}<br /> div {text-align:right}<br /> td {text-align:&quot;.&quot;}<br /> &lt;/style&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br /> &lt;p&gt;This is a paragraph text&lt;/p&gt;<br /> &lt;div&gt;This is a text inside div&lt;/div&gt;<br /> &lt;table&gt;<br /> &lt;tr&gt;&lt;th&gt;Lorem Ipsum&lt;/th&gt;&lt;/tr&gt;<br /> &lt;tr&gt;&lt;td&gt;optio neque cum aperiam adipisci minus atque corrupti&lt;/td&gt;&lt;/tr&gt;<br /> &lt;tr&gt;&lt;td&gt;illo obcaecati dolore id perspiciatis&lt;/td&gt;&lt;/tr&gt;<br /> &lt;tr&gt;&lt;td&gt;illum iusto perferendis ipsam harum ab libero&lt;/td&gt;&lt;/tr&gt;<br /> &lt;/table&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt><br /><br /><outi><html id="cx"><head> <style> #cx.p {text-align:justify;} #cx.div {text-align:right} #cx.td {text-align:"."} </style></head><body> <p>This is a paragraph text</p> <div>This is a text inside div</div> <table> <tr><th>Lorem Ipsum</th></tr> <tr><td>optio neque cum aperiam adipisci minus atque corrupti</td></tr> <tr><td>illo obcaecati dolore id perspiciatis</td></tr> <tr><td>illum iusto perferendis ipsam harum ab libero</td></tr> </table></body></html></outi> css Text Alignment 3 1 4/16/2014 6:37:34 PM 10/11/2015 2:32:26 PM Edit | Details | Delete
1 Text Decoration Text Decoration The <code>text-decoration</code> property is used to control the decoration (underline, line-through, etc) of a block of text..<br /><br />The values of <code>text-decoration</code> are.<br /><table><br /><tr><th>Values</th><th>Desciption</th></tr><tr><td><code>none</code> | <code>underline</code> | <code>overline</code> | <code>line-through</code> | <code>blink</code></td><td></td></tr><tr><td><code>inherit</code></td><td>inherited from the parent</td></tr></table><br /><note>Internet explorer does not support "blink" value.</note><br /><snpt>&lt;html&gt;<br />&lt;head&gt;<br /> &lt;style&gt;<br /> p {text-decoration:overline;}<br /> span {text-decoration:underline}<br /> a {text-decoration:none}<br /> b {text-decoration:line-through}<br /> em {text-decoration:blink}<br /> &lt;/style&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br /> &lt;p&gt;Quote&lt;/p&gt;<br /> &lt;b&gt;Never cry&lt;/b&gt; for the person who hurts you. &lt;span&gt;Just smile and say&lt;/span&gt;, thanks for giving me a chance to find someone &lt;em&gt;better&lt;/em&gt; than you.<br /> &lt;div&gt;&lt;a href=&quot;http://www.quotefellas.com&quot;&gt;Quote Fellas&lt;/a&gt;&lt;/div&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt><br /><br /><outi><html id="cx"><head> <style> #cx.p {text-decoration:overline;} #cx.span {text-decoration:underline} #cx.a {text-decoration:none} #cx.b {text-decoration:line-through} #cx.em {text-decoration:blink} </style></head><body> <p>Quote</p> <b>Never cry</b> for the person who hurts you. <span>Just smile and say</span>, thanks for giving me a chance to find someone <em>better</em> than you. <div><a href="http://www.quotefellas.com">Quote Fellas</a></div></body></html></outi><br /><br /> css Text Decoration 4 1 4/16/2014 6:39:42 PM 10/11/2015 2:48:59 PM Edit | Details | Delete
1 Text Shadows Text Shadows The <code>text-shadow</code> property is used to attach shadows to a block of text.<br /><br />The values of <code>text-shadow</code> are.<br /><table><br /><tr><th>Values</th><th>Description</th></tr><tr><td><code>none</code></td><td></td></tr><tr><td><code>inherit</code></td><td></td></tr><tr><td colspan="2">A list of comma-delimated shadow descriptions</td></tr><tr><td><<i>color</i>><<i>length_x</i>><<i>length_y</i>><<i>length_r</i>></td rowspan="2"><td><<i>length_x</i>><<i>length_y</i>> - The position of shadow relative to the block.<br /><<i>length_r</i>> - Blur radius.<br /><<i>color</i>> - The color of the shadow.<br /></td></tr><tr><td><<i>length_x</i>><<i>length_y</i>><<i>length_r</i>><<i>color</i>></td></tr></table><br /><br /><t1>example</t1><br /><pre>text-shadow : red 10px 10px; /* Right-bottom*/<br />text-shadow : 10px 10px 5px yellow; /* left-up, blurred*/<br />font-shadow : 5px 5px, -5px -5px; /* right-bottom and left-up*/</pre><br /> <br /><snpt>&lt;html&gt;<br />&lt;head&gt;<br /> &lt;style&gt;<br /> p {text-shadow:-10px -10px 6px red;}<br /> h2 {text-shadow:yellow 8px 8px}<br /> a {text-shadow:5px 5px, -5px -5px}<br /> &lt;/style&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br /> &lt;a&gt;This is a anchor link&lt;/a&gt;<br /> &lt;p&gt;This is a paragraph text&lt;/p&gt;<br /> &lt;h2&gt;This is a text inside h2&lt;/h2&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt><br /><br /><outi><html id="cx"><head> <style> #cx. p {text-shadow:-10px -10px 6px red;} #cx.h2 {text-shadow:yellow 8px 8px} #cx.a {text-shadow:5px 5px, -5px -5px} </style></head><body> <a>This is a anchor link</a> <p>This is a paragraph text</p> <h2>This is a text inside h2</h2></body></html></outi> css Text Shadows 5 1 4/16/2014 6:42:25 PM 10/11/2015 3:04:13 PM Edit | Details | Delete
1 Letter spacing Letter spacing The <code>letter-spacing</code> property is used to add extra space between adjacent characters.<br /><br />The values of <code>letter-spacing</code> are.<br /><table><br /><tr><th>Values</th><th>Description</th></tr><tr><td><code>normal</code></td><td></td></tr><tr><td><<i>length</i>></td><td></td></tr><tr><td><code>inherit</code></td><td>inherited from the parent</td></tr></table><br /><t1>example</t1><br /><pre> letter-spacing : 0.5em<br /> letter-spacing : 5px<br /> letter-spacing : 5pt<br /> letter-spacing : 0.5cm</pre><br /> <br /><snpt>&lt;html&gt;<br />&lt;head&gt;<br /> &lt;style&gt;<br /> p {letter-spacing:15px;}<br /> h2 {letter-spacing:0.6cm}<br /> a {letter-spacing:2mm}<br /> span {letter-spacing:3pt}<br /> div {letter-spacing:+0.2em; color: red}<br /> &lt;/style&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br /> &lt;a&gt;This is a anchor link&lt;/a&gt;<br /> &lt;p&gt;This is a paragraph text&lt;/p&gt;<br /> &lt;h2&gt;This is a text inside h2&lt;/h2&gt;<br /> &lt;span&gt;This is a paragraph text&lt;/span&gt;<br /> &lt;div&gt;This is a text inside h2&lt;/div&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt><br /><outi><html id="cx"><head> <style> #cx.p {letter-spacing:15px;} #cx.h2 {letter-spacing:0.6cm} #cx.a {letter-spacing:2mm} #cx.span {letter-spacing:3pt} #cx.div {letter-spacing:+0.2em; color: red} </style></head><body> <a>This is a anchor link</a> <p>This is a paragraph text</p> <h2>This is a text inside h2</h2> <span>This is a paragraph text</span> <div>This is a text inside h2</div></body></html></outi> css Letter spacing 6 1 4/16/2014 6:44:38 PM 10/11/2015 3:11:45 PM Edit | Details | Delete
1 Word Spacing Word Spacing The <code>word-spacing</code> property is used to add extra space between adjacent words.<br /><br />The values of word-spacing are.<br /><table><br /><tr><th>Values</th><th>Description</th></tr><tr><td><code>normal</code></td><td></td></tr><tr><td><<i>length</i>></td><td></td></tr><tr><td><code>inherit</code></td><td>inherited from the parent</td></tr></table><br /><br /><t1>example</t1><br /><pre>word-spacing : -0.2ex<br />word-spacing : 5cm</pre><br /><snpt>&lt;html&gt;<br />&lt;head&gt;<br /> &lt;style&gt;<br /> p {word-spacing:15px;}<br /> h2 {word-spacing:0.6cm}<br /> a {word-spacing:2mm}<br /> span {word-spacing:3pt}<br /> div {word-spacing:+0.2em; color: red}<br /> &lt;/style&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br /> &lt;a&gt;This is a anchor link&lt;/a&gt;<br /> &lt;p&gt;This is a paragraph text&lt;/p&gt;<br /> &lt;h2&gt;This is a text inside h2&lt;/h2&gt;<br /> &lt;span&gt;This is a paragraph text&lt;/span&gt;<br /> &lt;div&gt;This is a text inside h2&lt;/div&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt><br /><br /><outi><html><head> <style> #rn-out p {word-spacing:15px;} #rn-out h2 {word-spacing:0.6cm} #rn-out a {word-spacing:2mm} #rn-out span {word-spacing:3pt} #rn-out div {word-spacing:+0.2em; color: red} </style></head><body id="cx"> <a>This is a anchor link</a> <p>This is a paragraph text</p> <h2>This is a text inside h2</h2> <span>This is a paragraph text</span> <div>This is a text inside h2</div></body></html></outi> css Word Spacing 7 1 4/16/2014 6:47:01 PM 10/11/2015 4:28:29 PM Edit | Details | Delete
1 Capitalization Capitalization The <code>text-transform</code> property is used to control the capitalization of a block of text..<br /><br />The values of <code>text-transform</code> are.<br /><table><br /><tr><th>Values</th><th>Description</th></tr><tr><td><code>none</code></td><td></td></tr><tr><td><code>capitalize</code></td><td>To capitalize the first character of each word.</td></tr><tr><td><code>uppercase</code></td><td>To capitalize all characters.</td></tr><tr><td><code>lowercase</code></td><td>To decapitalize all characters.</td></tr><tr><td><code>inherit</code></td><td>The property is inherited from the parent.</td></tr></table><br /><br /><t1>example</t1><br /><pre> text-transform : uppercase<br /> text-transform : lowercase</pre><br /><br /><snpt>&lt;html&gt;<br />&lt;head&gt;<br /> &lt;style&gt;<br /> p {text-transform:uppercase;}<br /> span {text-transform:lowercase}<br /> div {text-transform:capitalize}<br /> &lt;/style&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br /> &lt;p&gt;Sometimes you will never know the value of a Moment until it becomes a memory.&lt;/p&gt;<br /> &lt;span&gt;Sometimes you will never know the value of a Moment until it becomes a memory.&lt;/span&gt;<br /> &lt;div&gt;Sometimes you will never know the value of a Moment until it becomes a memory.&lt;/div&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt> css Capitalization 8 1 4/16/2014 6:52:00 PM 10/11/2015 4:34:28 PM Edit | Details | Delete
1 White Spaces White Spaces The <code>white-space</code> property is used to control the white spaces inside a block of text.<br /><br />The values of <code>white-space</code> are.<br /><table><br /><tr><th>Values</th><th>Description</th></tr><tr><td><code>normal</code></td><td></td></tr><tr><td><code>capitalize</code></td><td>Replaces the sequence of white spaces with a space character.</td></tr><tr><td><code>pre</code></td><td>White spaces are considered.</td></tr><tr><td><code>nowrap</code></td><td>Line breaks are not considered.</td></tr><tr><td><code>inherit </code></td><td>The property is inherited from the parent.</td></tr></table><br /><br /><t1>example</t1><br /><pre>&lt;style&gt;<br /> white-space : nowrap<br /> white-space : pre<br />&lt;/style&gt;</pre><br /><br /><snpt>&lt;html&gt;<br />&lt;head&gt;<br /> &lt;style&gt;<br /> p {white-space:nowrap;}<br /> div {white-space:pre}<br /> &lt;/style&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br /> &lt;p&gt;Sometimes you will never know the value of a Moment until it becomes a memory.&lt;/p&gt;<br /> &lt;div&gt;<br /> Name Age Grade<br /> Fernando 35 A<br /> Michael 27 C<br /> Abrahim 54 B<br /> Yashva 22 A+<br /> &lt;/div&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt> css White Spaces 9 1 4/16/2014 6:55:15 PM 10/11/2015 4:42:37 PM Edit | Details | Delete
1 CSS Position CSS Position The css can control the render of elements of a web page in the browser.<br /><br />Browser analyses the layout of the web page is generated using the following factor.<br /><br />- document tree of elements<br />- the type of the elements<br />- floating<br />- positioned CSS Position 1 1 4/16/2014 7:08:55 PM 10/24/2015 10:45:08 AM Edit | Details | Delete
1 box model box model The main concept in rendering a web page is the box concept. Each element of a web page generates a box. Boxes can be nested and have rendering properties determined by the HTML file from which they are generated.<br /><br />The boxes model organizes the HTML elements(boxes) into a tree(document tree). The root element doesn't have a parent and has only a single child: the <code>&lt;body&gt;</code> element. The leaves of the tree are simple fragments of text that do not have any children.<br /><br /><snpt>&lt;html&gt;<br />&lt;head&gt;<br /> &lt;style&gt;<br /> * {border: 1px solid blue; margin: 10px}<br /> body {border: 1px solid red}<br /> &lt;/style&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br /> &lt;form&gt;<br /> &lt;h2&gt;This is a heading&lt;/h2&gt;<br /> &lt;p&gt;This is a paragraph text&lt;/p&gt;<br /> &lt;span&gt;This is a span text&lt;/span&gt;<br /> &lt;i&gt;This is a italic text&lt;/i&gt;<br /> &lt;table&gt;<br /> &lt;tr&gt;&lt;td&gt;data 1&lt;/td&gt;&lt;td&gt;data 2&lt;/td&gt;&lt;/tr&gt;<br /> &lt;tr&gt;&lt;td&gt;data 3&lt;/td&gt;&lt;td&gt;data 4&lt;/td&gt;&lt;/tr&gt;<br /> &lt;/table&gt;<br /> &lt;ul&gt;<br /> &lt;li&gt;item 1<br /> &lt;li&gt;item 2<br /> &lt;li&gt;item 3<br /> &lt;/ul&gt;<br /> &lt;blockquote&gt;This is blockquote text&lt;/blockquote&gt;<br /> &lt;/form&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt> CSS box model 2 1 4/16/2014 7:10:31 PM 10/24/2015 10:45:08 AM Edit | Details | Delete
1 Display Display <p>The <code>display</code> property applies to all HTML, elements and determines both the in-line and block level behaviour.</p> <p>The possible values are.</p> <table> <tr><th>Properties</th><th>Description</th></tr><tr><td><code>inline</code></td><td>Sets the box type to inline</td></tr><tr><td><code>block</code></td><td>Sets the box type to block</td></tr><tr><td><code>none</code></td><td>Eliminates the element from the rendering process</td></tr></table> <tit>(i) inline</tit> <t1>Example</t1> <pre>*{ display: inline }</pre> <t1>Output</t1> - All elements that belong to the <code>&lt;body&gt;</code> element are displayed inside the red box. The browser tries to render the entire <code>&lt;body&gt;</code> element on a single line. <snpt>&lt;html&gt; &lt;head&gt; &lt;style&gt; *{display:inline} &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;form&gt; &lt;p&gt;This is a paragraph text&lt;/p&gt; &lt;span&gt;This is a span text&lt;/span&gt; &lt;i&gt;This is a italic text&lt;/i&gt; The below unordered list will not be visible in the browser. &lt;ul&gt; &lt;li&gt;Apple &lt;li&gt;Orange &lt;li&gt;Grapes &lt;/ul&gt; &lt;/form&gt; &lt;/body&gt; &lt;/html&gt;</snpt> <tit>(ii) block</tit> <t1>Example</t1> <pre>*{ display: block }</pre> <t1>Output</t1> - A block box is generated for each element. - Each element starts in a new line-type box. <snpt>&lt;html&gt; &lt;head&gt; &lt;style&gt; *{display:block} &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;form&gt; &lt;p&gt;This is a paragraph text&lt;/p&gt; &lt;span&gt;This is a span text&lt;/span&gt; &lt;i&gt;This is a italic text&lt;/i&gt; The below unordered list will not be visible in the browser. &lt;ul&gt; &lt;li&gt;Apple &lt;li&gt;Orange &lt;li&gt;Grapes &lt;/ul&gt; &lt;/form&gt; &lt;/body&gt; &lt;/html&gt;</snpt> <tit>(iii) none</tit> <t1>Example</t1> <pre>ol, table{ display: none }</pre> <t1>Output</t1> The none of the &lt;<i>ol</i>&gt; &lt;<i>table</i>&gt; elements are rendered. <snpt>&lt;html&gt; &lt;head&gt; &lt;style&gt; *{display:none} &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;form&gt; &lt;p&gt;This is a paragraph text&lt;/p&gt; &lt;span&gt;This is a span text&lt;/span&gt; &lt;i&gt;This is a italic text&lt;/i&gt; The below unordered list will not be visible in the browser. &lt;ul&gt; &lt;li&gt;Apple &lt;li&gt;Orange &lt;li&gt;Grapes &lt;/ul&gt; &lt;/form&gt; &lt;/body&gt; &lt;/html&gt;</snpt> css display 3 1 4/16/2014 7:13:33 PM 12/16/2018 8:44:03 PM Edit | Details | Delete
1 cssTables CssTables CSS allows to attach a table behaviour to any structure that is organized similarly to a table using the <code>display</code> property. <br /><br /><table><br /><tr><th>Properties</th><th>Description</th></tr><tr><td><i>table</i></td><td>attaches a table behaviour to an element</td></tr><tr><td><i>table-row</i></td><td>attaches a table row behaviour to an element</td></tr><tr><td><i>table-cell</i></td><td>attaches a table cell behaviour to an element</td></tr></table><br /><br />The table structure is based on the generic <code>&lt;div&gt;</code> and <code>&lt;span&gt;</code> blocks.<br /><snpt>&lt;html&gt;<br />&lt;head&gt;<br /> &lt;style&gt;<br /> div span{border: 1px solid #000000; padding: 5px; margin:5px;}<br /> div {display:table;}<br /> div div{display:table-row;}<br /> div div span{display:table-cell;}<br /> &lt;/style&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br /> &lt;div&gt;<br /> &lt;div&gt;&lt;span&gt;data1&lt;/span&gt;&lt;span&gt;data2&lt;/span&gt;&lt;/div&gt;<br /> &lt;div&gt;&lt;span&gt;data3&lt;/span&gt;&lt;span&gt;data4&lt;/span&gt;&lt;/div&gt;<br /> &lt;div&gt;&lt;span&gt;data5&lt;/span&gt;&lt;span&gt;data6&lt;/span&gt;&lt;/div&gt;<br /> &lt;/div&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt> Css Tables 2 1 4/20/2014 5:15:42 PM 10/24/2015 10:40:26 AM Edit | Details | Delete
1 Html Tables Html Tables <p>Tables require special attention in css because they are organized structures. Link for tables. When the <code>&lt;table&gt;</code> element is rendered, it generates a block-level box by default.</p> <tit>cssTables</tit> <p>CSS allows to attach a table behaviour to any structure that is organized similarly to a table using the <code>display</code> property. </p> <table> <tr><th>Properties</th><th>Description</th></tr><tr><td><i>table</i></td><td>attaches a table behaviour to an element</td></tr><tr><td><i>table-row</i></td><td>attaches a table row behaviour to an element</td></tr><tr><td><i>table-cell</i></td><td>attaches a table cell behaviour to an element</td></tr></table> <p>The table structure is based on the generic <code>&lt;div&gt;</code> and <code>&lt;span&gt;</code> blocks. </p> <snpt>&lt;html&gt; &lt;head&gt; &lt;style&gt; div span{border: 1px solid #000000; padding: 5px; margin:5px;} div {display:table;} div div{display:table-row;} div div span{display:table-cell;} &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div&gt; &lt;div&gt;&lt;span&gt;data1&lt;/span&gt;&lt;span&gt;data2&lt;/span&gt;&lt;/div&gt; &lt;div&gt;&lt;span&gt;data3&lt;/span&gt;&lt;span&gt;data4&lt;/span&gt;&lt;/div&gt; &lt;div&gt;&lt;span&gt;data5&lt;/span&gt;&lt;span&gt;data6&lt;/span&gt;&lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</snpt> <tit>Advanced Html tables</tit> <p>In html we can add sections to a table using the <caption> element for the table caption, the <code>&lt;thead&gt;</code> and <code>&lt;tfoot&gt;</code> elements to add a header and a footer, and one or more <code>&lt;tbody&gt;</code> elements to define body sections. <code>&lt;colgroup&gt;</code> and <code>&lt;col&gt;</code> elements can be used to define column attributes.</p> <tit>Advanced css tables</tit> <p>To define a table structure having sections, the following possible values of <code>display</code> property </p> <table> <tr><th>Properties</th><th>Description</th></tr><tr><td><i>table-row-group</i></td><td>corresponds to <code>&lt;tbody&gt;</code> elements</td></tr><tr><td><i>table-header-group</i></td><td>corresponds to <code>&lt;thead</code>> elements</td></tr><tr><td><i>table-footer-group</i></td><td>corresponds to <code>&lt;tfoot&gt;</code> elements</td></tr><tr><td><i>table-column-group</i></td><td>corresponds to <code>&lt;colgroup&gt;</code> elements</td></tr><tr><td><i>table-column</i></td><td>corresponds to <code>&lt;col&gt;</code> elements</td></tr><tr><td><i>table-caption</i></td><td>corresponds to <code>&lt;caption&gt;</code> elements</td></tr></table> <p>The <code>&lt;caption&gt;</code> element , the 'caption-side' property allows to define where the table caption will be rendered. The possible values are. </p> <code>bottom</code> | <code>left</code> | <code>right</code> | <code>top</code> (<i>the default value</i>) <snpt>&lt;html&gt; &lt;head&gt; &lt;style&gt; *{border-width: 1px; border-style: solid; padding: 5px margin: 5px;} div.table{display:table;} div.row{display:table-row;} div.cell{display:table-cell;} div.caption{display:table-caption; caption-side:right;} div.c1{width:100px; text-align:right; background:gray} div.c2 {width:200px; text-align:center} div.th-group {display:table-header-group; color:red;} div.tr-group {display:table-row-group; font-style:italic;} div.tf-group {display:table-footer-group; color:blue;} &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div class=&quot;table&quot;&gt; &lt;div class=&quot;th-group&quot;&gt; &lt;div class=&quot;row&quot;&gt; &lt;div class=&quot;cell c1&quot;&gt;data 1&lt;/div&gt; &lt;div class=&quot;cell c2&quot;&gt;data 2&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=&quot;tr-group&quot;&gt; &lt;div class=&quot;row&quot;&gt; &lt;div class=&quot;cell c1&quot;&gt;data 3&lt;/div&gt; &lt;div class=&quot;cell c2&quot;&gt;data 4&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class=&quot;tf-group&quot;&gt; &lt;div class=&quot;row&quot;&gt; &lt;div class=&quot;cell c1&quot;&gt;data 5&lt;/div&gt; &lt;div class=&quot;cell c2&quot;&gt;data 6&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</snpt> <tit>Column properties</tit> <p>There are several properties than can be applied to the <code>&lt;col&gt;</code> elements of a table. </p> <table> <tr><th>Properties</th><th>Values</th><th>Description</th></tr><tr><td><code>border</code></td><td><<i>length</i>> <<i>border-style</i>> <<i>color</i>></td><td>it defines the border width, style and color.</td></tr><tr><td><code>background</code></td><td><<i>color</i>></td><td>it defines the background color.</td></tr><tr><td><code>width</code></td><td><<i>length</i>></td><td>it defines the column width.</td></tr><tr><td><code>visibility</code></td><td><code>hide</code> | <code>hidden</code> | <code>inherit</code> | <code>show</code> | <code><code>visible</code></code></td><td>it defines how the column is rendered.</td></tr></table> <snpt>&lt;html&gt; &lt;head&gt; &lt;style&gt; *{border: 1px solid gray;} col.col1{font-style:italic; backgroud:yellow;} col.col2{visibility:hidden;} col.col3{width:200px; color:blue;} &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;table&gt; &lt;colgroup&gt; &lt;col width=&quot;50&quot; class=&quot;col1&quot;&gt; &lt;col width=&quot;150&quot; class=&quot;col2&quot;&gt; &lt;col class=&quot;col3&quot;&gt; &lt;/colgroup&gt; &lt;tr&gt;&lt;td&gt;data 1&lt;/td&gt;&lt;td&gt;data 2&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;data 3&lt;/td&gt;&lt;td&gt;data 4&lt;/td&gt;&lt;/tr&gt; &lt;/table&gt; &lt;/body&gt; &lt;/html&gt;</snpt> <tit>Table layout</tit> <p>Browser render a table according the value of the <code>table-layout</code> property. </p> <p>The possible values are </p> <table> <tr><th>Properties</th><th>Values</th></tr><tr><td><code>auto</code></td><td>(default) First the table data is read, then the row and cell data is complete rendered using the minimum necessary space.</td></tr><tr><td><code>fixed</code></td><td>First, the table rows and cells are rendered using the specified values for width and height, then the table data is rendered using the existing space.</td></tr></table> <snpt>&lt;html&gt; &lt;head&gt; &lt;style&gt; *{border: 1px solid gray;} table.col1{table-layout:auto;} table.col2{table-layout:fixed;} table td{width:50px;} table tr{height:50px;} &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;table class=&quot;col1&quot;&gt; &lt;tr&gt;&lt;td&gt;data 1&lt;td&gt;data 2&lt;td&gt;data 3 &lt;tr&gt;&lt;td&gt;data 4&lt;td&gt;data 5&lt;td&gt;data 6 &lt;/table&gt; &lt;table class=&quot;col2&quot;&gt; &lt;tr&gt;&lt;td&gt;data 1&lt;td&gt;data 2&lt;td&gt;data 3 &lt;tr&gt;&lt;td&gt;data 4&lt;td&gt;data 5&lt;td&gt;data 6 &lt;/table&gt; &lt;/body&gt; &lt;/html&gt;</snpt> <tit>vertical alignment</tit> <p>The <code>vertical-align</code> property allows you to set the vertical alignment between several in-line elements that belong to the same parent (eg - same table cell) </p> <p>The possible values are </p> <table> <tr><th>Properties</th><th>Description</th></tr><tr><td><code>baseline</code> | <code>top</code> | <code>bottom</code> | <code>middle</code> | <code>sub</code> | <code>super</code> | <code>text-top</code> | <code>text-bottom</code></td><td></td></tr><tr><td><<i>length</i>> or <<i>percentage</i>></td><td></td></tr></table> <snpt>&lt;html&gt; &lt;head&gt; &lt;style&gt; span {border:1px solid red;} &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;table&gt; &lt;tr&gt; &lt;td&gt; &lt;span style=&quot;vertical-align: baseline;&quot;&gt;baseline&lt;/span&gt; &lt;span style=&quot;vertical-align: top;&quot;&gt;top&lt;/span&gt; &lt;span style=&quot;vertical-align: bottom;&quot;&gt;bottom&lt;/span&gt; &lt;span style=&quot;vertical-align: middle;&quot;&gt;middle&lt;/span&gt; &lt;span style=&quot;vertical-align: sub;&quot;&gt;sub&lt;/span&gt; &lt;span style=&quot;vertical-align: super;&quot;&gt;super&lt;/span&gt; &lt;span style=&quot;vertical-align: text-top;&quot;&gt;text-top&lt;/span&gt; &lt;span style=&quot;vertical-align: 300%;&quot;&gt;300%&lt;/span&gt; &lt;span style=&quot;vertical-align: -5px;&quot;&gt;-50px&lt;/span&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/body&gt; &lt;/html&gt;</snpt> <tit>horizontal alignment</tit> <p>The <code>text-align</code> property allows you to set the horizontal alignment for the content relative to the element box. This property can also be attached to the <code>&lt;col&gt;</code> or <code>&lt;table&gt;</code> element. The 'text-align' property is inherited by all the child elements when applied to the parent element. </p> <p>The possible values are </p> <table> <tr><th>Properties</th><th>Description</th></tr><tr><td><code>center</code> | <code>justify</code> | <code>left</code> | <code>right</code></td><td></td></tr><tr><td><<i>string</i>></td><td>(only for table cells; eg text-align: ".")</td></tr></table> Note: <note>The default value is left. The <<i>col</i>> setting has a greater priority that the <<i>tr</i>> setting.</note> <snpt>&lt;html&gt; &lt;head&gt; &lt;style&gt; span {border:1px solid red;} &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;table&gt; &lt;tr&gt; &lt;td style=&quot;text-align:center&quot;&gt;center align text&lt;/td&gt; &lt;td style=&quot;text-align:justify&quot;&gt;justify align text&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td style=&quot;text-align:left&quot;&gt;left align text&lt;/td&gt; &lt;td style=&quot;text-align:right&quot;&gt;right align text&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/body&gt; &lt;/html&gt;</snpt> <tit>Border for table cells</tit> <p>CSS allows you to define the style, width and color for the table elements, similar to any kind of boxes. It can be done using <code>border-style</code>, <code>boder-width</code>, <code>border-color</code> or <code>border</code> properties. </p> <t1>Note</t1> The <code>&lt;tr&gt;</code> elements are rendered without a border. The style defined for a <code>&lt;table&gt;</code> element doesn't apply to its children. The style defined for <code>&lt;tr&gt;</code> elements applies to the <code>&lt;td&gt;</code> elements. (only internet explorer) <snpt>&lt;html&gt; &lt;head&gt; &lt;style&gt; td {border:1px solid gray;} .none {border-sty;e: none} .hidden {border-style: hidden} .dotted {border-style: dotted} .dashed {border-style: dashed} .solid {border: 1px solid red;} .double {border-style: double} .groove {border-style: groove} .ridge {border-style: ridge} .inset {border-style: inset} .outset {border-style: outset} &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;table&gt; &lt;tr&gt;&lt;td class=&quot;none&quot;&gt;none&lt;/td&gt;&lt;td class=&quot;hidden&quot;&gt;hidden&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td class=&quot;dotted&quot;&gt;dotted&lt;/td&gt;&lt;td class=&quot;dashed&quot;&gt;dashed&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td class=&quot;solid&quot;&gt;solid&lt;/td&gt;&lt;td class=&quot;double&quot;&gt;double&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td class=&quot;groove&quot;&gt;groove&lt;/td&gt;&lt;td class=&quot;ridge&quot;&gt;ridge&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td class=&quot;inset&quot;&gt;inset&lt;/td&gt;&lt;td class=&quot;outset&quot;&gt;outset&lt;/td&gt;&lt;/tr&gt; &lt;/table&gt; &lt;/body&gt; &lt;/html&gt;</snpt> <tit>border spacing</tit> <p>The <code>border-spacing</code> property determines the distance between the border of two adjacent cells. This property allows you to specify different spacing values horizontally and vertically. </p> <p>The possible values are </p> <table> <tr><th>Values</th><th>Description</th></tr><tr><td><<i>length</i>></td><td>horizontal_distance=vertical_distance</td></tr><tr><td><<i>length</i>> <<i>length</i>></td><td> horizontal_distance vertical_distance</td></tr></table> <snpt> &lt;html&gt; &lt;head&gt; &lt;style&gt; table {border: 1px solid blue;} table td {border: 1px solid red;} &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;table cellspacing=&quot;10&quot;&gt; &lt;tr&gt;&lt;td&gt;data 1&lt;/td&gt;&lt;td&gt;data 2&lt;/td&gt;&lt;td&gt;data 3&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;data 4&lt;/td&gt;&lt;td&gt;data 5&lt;/td&gt;&lt;td&gt;data 6&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;data 7&lt;/td&gt;&lt;td&gt;data 8&lt;/td&gt;&lt;td&gt;data 9&lt;/td&gt;&lt;/tr&gt; &lt;/table&gt; &lt;table style=&quot;border-spacing:10px 20px;&quot;&gt; &lt;tr&gt;&lt;td&gt;data 1&lt;/td&gt;&lt;td&gt;data 2&lt;/td&gt;&lt;td&gt;data 3&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;data 4&lt;/td&gt;&lt;td&gt;data 5&lt;/td&gt;&lt;td&gt;data 6&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;data 7&lt;/td&gt;&lt;td&gt;data 8&lt;/td&gt;&lt;td&gt;data 9&lt;/td&gt;&lt;/tr&gt; &lt;/table&gt; &lt;/body&gt; &lt;/html&gt;</snpt> <tit>empty cells</tit> <p>The <code>empty-cells</code> property determines if an empty cell is rendered with a border. </p> <p>The possible values are</p> <table> <tr><th>Properties</th><th>Description</th></tr><tr><td><code>show</code></td><td>to render an empty cell with a border</td></tr><tr><td><code>hide</code></td><td>to render an empty cell without a border</td></tr></table> <snpt>&lt;html&gt; &lt;head&gt; &lt;style&gt; * {border: 1px solid #000000; padding: 10px; margin:2px;} &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;table&gt; &lt;tr&gt;&lt;td&gt;data 1&lt;/td&gt;&lt;td&gt;data 2&lt;/td&gt;&lt;td&gt;data 3&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;data 4&lt;/td&gt;&lt;td&gt;data 5&lt;/td&gt;&lt;td&gt;data 6&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;data 7&lt;/td&gt;&lt;td&gt;data 8&lt;/td&gt;&lt;td&gt;data 9&lt;/td&gt;&lt;/tr&gt; &lt;/table&gt; &lt;table style=&quot;empty-cells:show;&quot;&gt; &lt;tr&gt;&lt;td&gt;data 1&lt;/td&gt;&lt;td&gt;data 2&lt;/td&gt;&lt;td&gt;data 3&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;data 4&lt;/td&gt;&lt;td&gt;data 5&lt;/td&gt;&lt;td&gt;data 6&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;data 7&lt;/td&gt;&lt;td&gt;data 8&lt;/td&gt;&lt;td&gt;data 9&lt;/td&gt;&lt;/tr&gt; &lt;/table&gt; &lt;/body&gt; &lt;/html&gt;</snpt> <tit>border collapse</tit> <p>The <code>border-collapse</code> determines the border model of the table cells. </p> <p>The possible values are</p> <table> <tr><th>Properties</th><th>Description</th></tr><tr><td><code>collapse</code></td><td>defines a collapsing border model</td></tr><tr><td><code>separated</code></td><td>defines a separated border model</td></tr></table> <snpt>&lt;html&gt; &lt;head&gt; &lt;style&gt; table tr td {border: 1px solid #000000; padding: 10px; margin:10px;} &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;table style=&quot;border-collapse:collapse; border-spacing: 10px&quot; cellspacing=&quot;10&quot;&gt; &lt;tr&gt;&lt;td&gt;data 1&lt;/td&gt;&lt;td&gt;data 2&lt;/td&gt;&lt;td&gt;data 3&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;data 4&lt;/td&gt;&lt;td&gt;data 5&lt;/td&gt;&lt;td&gt;data 6&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;data 7&lt;/td&gt;&lt;td&gt;data 8&lt;/td&gt;&lt;td&gt;data 9&lt;/td&gt;&lt;/tr&gt; &lt;/table&gt; &lt;table style=&quot;border-collapse:separate; border-spacing: 10px&quot; cellspacing=&quot;10&quot;&gt; &lt;tr&gt;&lt;td&gt;data 1&lt;/td&gt;&lt;td&gt;data 2&lt;/td&gt;&lt;td&gt;data 3&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;data 4&lt;/td&gt;&lt;td&gt;data 5&lt;/td&gt;&lt;td&gt;data 6&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;data 7&lt;/td&gt;&lt;td&gt;data 8&lt;/td&gt;&lt;td&gt;data 9&lt;/td&gt;&lt;/tr&gt; &lt;/table&gt; &lt;/body&gt; &lt;/html&gt;</snpt> Html Tables 1 1 4/20/2014 5:13:11 PM 12/16/2018 2:26:07 PM Edit | Details | Delete
1 Advanced Html tables Advanced Html tables In html we can add sections to a table using the <caption> element for the table caption, the <code>&lt;thead&gt;</code> and <code>&lt;tfoot&gt;</code> elements to add a header and a footer, and one or more <code>&lt;tbody&gt;</code> elements to define body sections. <code>&lt;colgroup&gt;</code> and <code>&lt;col&gt;</code> elements can be used to define column attributes. Advanced Html tables 3 1 4/20/2014 5:18:14 PM 10/24/2015 10:40:26 AM Edit | Details | Delete
1 Advanced css tables Advanced css tables To define a table structure having sections, the following possible values of <code>display</code> property<br /><br /><table><br /><tr><th>Properties</th><th>Description</th></tr><tr><td><i>table-row-group</i></td><td>corresponds to <code>&lt;tbody&gt;</code> elements</td></tr><tr><td><i>table-header-group</i></td><td>corresponds to <code>&lt;thead</code>> elements</td></tr><tr><td><i>table-footer-group</i></td><td>corresponds to <code>&lt;tfoot&gt;</code> elements</td></tr><tr><td><i>table-column-group</i></td><td>corresponds to <code>&lt;colgroup&gt;</code> elements</td></tr><tr><td><i>table-column</i></td><td>corresponds to <code>&lt;col&gt;</code> elements</td></tr><tr><td><i>table-caption</i></td><td>corresponds to <code>&lt;caption&gt;</code> elements</td></tr></table><br /><br />The <code>&lt;caption&gt;</code> element , the 'caption-side' property allows to define where the table caption will be rendered. The possible values are.<br /><br /><code>bottom</code> | <code>left</code> | <code>right</code> | <code>top</code> (<i>the default value</i>)<br /><br /><snpt>&lt;html&gt;<br />&lt;head&gt;<br /> &lt;style&gt;<br /> *{border-width: 1px; border-style: solid; padding: 5px margin: 5px;}<br /> div.table{display:table;}<br /> div.row{display:table-row;}<br /> div.cell{display:table-cell;}<br /> div.caption{display:table-caption; caption-side:right;}<br /> div.c1{width:100px; text-align:right; background:gray}<br /> div.c2 {width:200px; text-align:center}<br /> div.th-group {display:table-header-group; color:red;}<br /> div.tr-group {display:table-row-group; font-style:italic;}<br /> div.tf-group {display:table-footer-group; color:blue;}<br /> &lt;/style&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br /> &lt;div class=&quot;table&quot;&gt;<br /> &lt;div class=&quot;th-group&quot;&gt;<br /> &lt;div class=&quot;row&quot;&gt;<br /> &lt;div class=&quot;cell c1&quot;&gt;data 1&lt;/div&gt;<br /> &lt;div class=&quot;cell c2&quot;&gt;data 2&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;tr-group&quot;&gt;<br /> &lt;div class=&quot;row&quot;&gt;<br /> &lt;div class=&quot;cell c1&quot;&gt;data 3&lt;/div&gt;<br /> &lt;div class=&quot;cell c2&quot;&gt;data 4&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;tf-group&quot;&gt;<br /> &lt;div class=&quot;row&quot;&gt;<br /> &lt;div class=&quot;cell c1&quot;&gt;data 5&lt;/div&gt;<br /> &lt;div class=&quot;cell c2&quot;&gt;data 6&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt> Advanced css tables 4 1 4/20/2014 5:53:31 PM 10/24/2015 10:40:26 AM Edit | Details | Delete
1 Column properties Column properties There are several properties than can be applied to the <code>&lt;col&gt;</code> elements of a table.<br /><br /><table><br /><tr><th>Properties</th><th>Values</th><th>Description</th></tr><tr><td><code>border</code></td><td><<i>length</i>> <<i>border-style</i>> <<i>color</i>></td><td>it defines the border width, style and color.</td></tr><tr><td><code>background</code></td><td><<i>color</i>></td><td>it defines the background color.</td></tr><tr><td><code>width</code></td><td><<i>length</i>></td><td>it defines the column width.</td></tr><tr><td><code>visibility</code></td><td><code>hide</code> | <code>hidden</code> | <code>inherit</code> | <code>show</code> | <code><code>visible</code></code></td><td>it defines how the column is rendered.</td></tr></table><br /><br /><snpt>&lt;html&gt;<br />&lt;head&gt;<br /> &lt;style&gt;<br /> *{border: 1px solid gray;}<br /> col.col1{font-style:italic; backgroud:yellow;}<br /> col.col2{visibility:hidden;}<br /> col.col3{width:200px; color:blue;}<br /> &lt;/style&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br /> &lt;table&gt;<br /> &lt;colgroup&gt;<br /> &lt;col width=&quot;50&quot; class=&quot;col1&quot;&gt;<br /> &lt;col width=&quot;150&quot; class=&quot;col2&quot;&gt;<br /> &lt;col class=&quot;col3&quot;&gt;<br /> &lt;/colgroup&gt;<br /> &lt;tr&gt;&lt;td&gt;data 1&lt;/td&gt;&lt;td&gt;data 2&lt;/td&gt;&lt;/tr&gt;<br /> &lt;tr&gt;&lt;td&gt;data 3&lt;/td&gt;&lt;td&gt;data 4&lt;/td&gt;&lt;/tr&gt;<br /> &lt;/table&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt> css Column properties 5 1 4/20/2014 5:54:53 PM 10/24/2015 10:40:26 AM Edit | Details | Delete
1 Table layout Table layout Browser render a table according the value of the <code>table-layout</code> property. <br /><br />The possible values are<br /><table><br /><tr><th>Properties</th><th>Values</th></tr><tr><td><code>auto</code></td><td>(default) First the table data is read, then the row and cell data is complete rendered using the minimum necessary space.</td></tr><tr><td><code>fixed</code></td><td>First, the table rows and cells are rendered using the specified values for width and height, then the table data is rendered using the existing space.</td></tr></table><br /><br /><snpt>&lt;html&gt;<br />&lt;head&gt;<br /> &lt;style&gt;<br /> *{border: 1px solid gray;}<br /> table.col1{table-layout:auto;}<br /> table.col2{table-layout:fixed;}<br /> table td{width:50px;}<br /> table tr{height:50px;}<br /> &lt;/style&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br /> &lt;table class=&quot;col1&quot;&gt;<br /> &lt;tr&gt;&lt;td&gt;data 1&lt;td&gt;data 2&lt;td&gt;data 3<br /> &lt;tr&gt;&lt;td&gt;data 4&lt;td&gt;data 5&lt;td&gt;data 6<br /> &lt;/table&gt;<br /><br /> &lt;table class=&quot;col2&quot;&gt;<br /> &lt;tr&gt;&lt;td&gt;data 1&lt;td&gt;data 2&lt;td&gt;data 3<br /> &lt;tr&gt;&lt;td&gt;data 4&lt;td&gt;data 5&lt;td&gt;data 6<br /> &lt;/table&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt> css Table layout 6 1 4/20/2014 5:56:34 PM 10/24/2015 10:40:26 AM Edit | Details | Delete
1 vertical alignment vertical alignment The <code>vertical-align</code> property allows you to set the vertical alignment between several in-line elements that belong to the same parent (eg - same table cell) <br /><br />The possible values are<br /><table><br /><tr><th>Properties</th><th>Description</th></tr><tr><td><code>baseline</code> | <code>top</code> | <code>bottom</code> | <code>middle</code> | <code>sub</code> | <code>super</code> | <code>text-top</code> | <code>text-bottom</code></td><td></td></tr><tr><td><<i>length</i>> or <<i>percentage</i>></td><td></td></tr></table><br /><br /><snpt>&lt;html&gt;<br />&lt;head&gt;<br /> &lt;style&gt;<br /> span {border:1px solid red;}<br /> &lt;/style&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br /> &lt;table&gt;<br /> &lt;tr&gt;<br /> &lt;td&gt;<br /> &lt;span style=&quot;vertical-align: baseline;&quot;&gt;baseline&lt;/span&gt;<br /> &lt;span style=&quot;vertical-align: top;&quot;&gt;top&lt;/span&gt;<br /> &lt;span style=&quot;vertical-align: bottom;&quot;&gt;bottom&lt;/span&gt;<br /> &lt;span style=&quot;vertical-align: middle;&quot;&gt;middle&lt;/span&gt;<br /> &lt;span style=&quot;vertical-align: sub;&quot;&gt;sub&lt;/span&gt;<br /> &lt;span style=&quot;vertical-align: super;&quot;&gt;super&lt;/span&gt;<br /> &lt;span style=&quot;vertical-align: text-top;&quot;&gt;text-top&lt;/span&gt;<br /> &lt;span style=&quot;vertical-align: 300%;&quot;&gt;300%&lt;/span&gt;<br /> &lt;span style=&quot;vertical-align: -5px;&quot;&gt;-50px&lt;/span&gt;<br /> &lt;/td&gt;<br /> &lt;/tr&gt;<br /> &lt;/table&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt> css Table vertical alignment 7 1 4/20/2014 5:57:43 PM 10/24/2015 10:40:26 AM Edit | Details | Delete
1 horizontal alignment horizontal alignment The <code>text-align</code> property allows you to set the horizontal alignment for the content relative to the element box. This property can also be attached to the <code>&lt;col&gt;</code> or <code>&lt;table&gt;</code> element. The 'text-align' property is inherited by all the child elements when applied to the parent element.<br /><br />The possible values are<br /><table><br /><tr><th>Properties</th><th>Description</th></tr><tr><td><code>center</code> | <code>justify</code> | <code>left</code> | <code>right</code></td><td></td></tr><tr><td><<i>string</i>></td><td>(only for table cells; eg text-align: ".")</td></tr></table><br /><br />Note:<br /><note>The default value is left.<br />The <<i>col</i>> setting has a greater priority that the <<i>tr</i>> setting.</note><br /><br /><snpt>&lt;html&gt;<br />&lt;head&gt;<br /> &lt;style&gt;<br /> span {border:1px solid red;}<br /> &lt;/style&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br /> &lt;table&gt;<br /> &lt;tr&gt;<br /> &lt;td style=&quot;text-align:center&quot;&gt;center align text&lt;/td&gt;<br /> &lt;td style=&quot;text-align:justify&quot;&gt;justify align text&lt;/td&gt;<br /> &lt;/tr&gt;<br /> &lt;tr&gt;<br /> &lt;td style=&quot;text-align:left&quot;&gt;left align text&lt;/td&gt;<br /> &lt;td style=&quot;text-align:right&quot;&gt;right align text&lt;/td&gt;<br /> &lt;/tr&gt;<br /> &lt;/table&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt> css Table horizontal alignment 8 1 4/20/2014 5:59:38 PM 10/24/2015 10:40:26 AM Edit | Details | Delete
1 Border for table cells Border for table cells CSS allows you to define the style, width and color for the table elements, similar to any kind of boxes. It can be done using <code>border-style</code>, <code>boder-width</code>, <code>border-color</code> or <code>border</code> properties.<br /><br /><t1>Note</t1><br />The <code>&lt;tr&gt;</code> elements are rendered without a border.<br />The style defined for a <code>&lt;table&gt;</code> element doesn't apply to its children.<br />The style defined for <code>&lt;tr&gt;</code> elements applies to the <code>&lt;td&gt;</code> elements. (only internet explorer)<br /><br /><snpt>&lt;html&gt;<br />&lt;head&gt;<br /> &lt;style&gt;<br /> td {border:1px solid gray;}<br /> .none {border-sty;e: none}<br /> .hidden {border-style: hidden}<br /> .dotted {border-style: dotted}<br /> .dashed {border-style: dashed}<br /> .solid {border: 1px solid red;}<br /> .double {border-style: double}<br /> .groove {border-style: groove}<br /> .ridge {border-style: ridge}<br /> .inset {border-style: inset}<br /> .outset {border-style: outset}<br /> &lt;/style&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br /> &lt;table&gt;<br /> &lt;tr&gt;&lt;td class=&quot;none&quot;&gt;none&lt;/td&gt;&lt;td class=&quot;hidden&quot;&gt;hidden&lt;/td&gt;&lt;/tr&gt;<br /> &lt;tr&gt;&lt;td class=&quot;dotted&quot;&gt;dotted&lt;/td&gt;&lt;td class=&quot;dashed&quot;&gt;dashed&lt;/td&gt;&lt;/tr&gt;<br /> &lt;tr&gt;&lt;td class=&quot;solid&quot;&gt;solid&lt;/td&gt;&lt;td class=&quot;double&quot;&gt;double&lt;/td&gt;&lt;/tr&gt;<br /> &lt;tr&gt;&lt;td class=&quot;groove&quot;&gt;groove&lt;/td&gt;&lt;td class=&quot;ridge&quot;&gt;ridge&lt;/td&gt;&lt;/tr&gt;<br /> &lt;tr&gt;&lt;td class=&quot;inset&quot;&gt;inset&lt;/td&gt;&lt;td class=&quot;outset&quot;&gt;outset&lt;/td&gt;&lt;/tr&gt;<br /> &lt;/table&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt> css Table cell Border 9 1 4/20/2014 6:01:34 PM 10/24/2015 10:40:26 AM Edit | Details | Delete
1 border spacing border spacing The <code>border-spacing</code> property determines the distance between the border of two adjacent cells. This property allows you to specify different spacing values horizontally and vertically.<br /><br />The possible values are <br /><table><br /><tr><th>Values</th><th>Description</th></tr><tr><td><<i>length</i>></td><td>horizontal_distance=vertical_distance</td></tr><tr><td><<i>length</i>> <<i>length</i>></td><td> horizontal_distance vertical_distance</td></tr></table><br /><br /><snpt> &lt;html&gt;<br />&lt;head&gt;<br /> &lt;style&gt;<br /> table {border: 1px solid blue;}<br /> table td {border: 1px solid red;}<br /> &lt;/style&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br /> &lt;table cellspacing=&quot;10&quot;&gt;<br /> &lt;tr&gt;&lt;td&gt;data 1&lt;/td&gt;&lt;td&gt;data 2&lt;/td&gt;&lt;td&gt;data 3&lt;/td&gt;&lt;/tr&gt;<br /> &lt;tr&gt;&lt;td&gt;data 4&lt;/td&gt;&lt;td&gt;data 5&lt;/td&gt;&lt;td&gt;data 6&lt;/td&gt;&lt;/tr&gt;<br /> &lt;tr&gt;&lt;td&gt;data 7&lt;/td&gt;&lt;td&gt;data 8&lt;/td&gt;&lt;td&gt;data 9&lt;/td&gt;&lt;/tr&gt;<br /> &lt;/table&gt;<br /> &lt;table style=&quot;border-spacing:10px 20px;&quot;&gt;<br /> &lt;tr&gt;&lt;td&gt;data 1&lt;/td&gt;&lt;td&gt;data 2&lt;/td&gt;&lt;td&gt;data 3&lt;/td&gt;&lt;/tr&gt;<br /> &lt;tr&gt;&lt;td&gt;data 4&lt;/td&gt;&lt;td&gt;data 5&lt;/td&gt;&lt;td&gt;data 6&lt;/td&gt;&lt;/tr&gt;<br /> &lt;tr&gt;&lt;td&gt;data 7&lt;/td&gt;&lt;td&gt;data 8&lt;/td&gt;&lt;td&gt;data 9&lt;/td&gt;&lt;/tr&gt;<br /> &lt;/table&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt> css Table border spacing 10 1 4/20/2014 6:02:59 PM 10/24/2015 10:40:26 AM Edit | Details | Delete
1 empty cells empty cells The <code>empty-cells</code> property determines if an empty cell is rendered with a border. <br /><br />The possible values are<br /><table><br /><tr><th>Properties</th><th>Description</th></tr><tr><td><code>show</code></td><td>to render an empty cell with a border</td></tr><tr><td><code>hide</code></td><td>to render an empty cell without a border</td></tr></table><br /> <br /><snpt>&lt;html&gt;<br />&lt;head&gt;<br /> &lt;style&gt;<br /> * {border: 1px solid #000000; padding: 10px; margin:2px;}<br /> &lt;/style&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br />&lt;table&gt;<br /> &lt;tr&gt;&lt;td&gt;data 1&lt;/td&gt;&lt;td&gt;data 2&lt;/td&gt;&lt;td&gt;data 3&lt;/td&gt;&lt;/tr&gt;<br /> &lt;tr&gt;&lt;td&gt;data 4&lt;/td&gt;&lt;td&gt;data 5&lt;/td&gt;&lt;td&gt;data 6&lt;/td&gt;&lt;/tr&gt;<br /> &lt;tr&gt;&lt;td&gt;data 7&lt;/td&gt;&lt;td&gt;data 8&lt;/td&gt;&lt;td&gt;data 9&lt;/td&gt;&lt;/tr&gt;<br />&lt;/table&gt;<br />&lt;table style=&quot;empty-cells:show;&quot;&gt;<br /> &lt;tr&gt;&lt;td&gt;data 1&lt;/td&gt;&lt;td&gt;data 2&lt;/td&gt;&lt;td&gt;data 3&lt;/td&gt;&lt;/tr&gt;<br /> &lt;tr&gt;&lt;td&gt;data 4&lt;/td&gt;&lt;td&gt;data 5&lt;/td&gt;&lt;td&gt;data 6&lt;/td&gt;&lt;/tr&gt;<br /> &lt;tr&gt;&lt;td&gt;data 7&lt;/td&gt;&lt;td&gt;data 8&lt;/td&gt;&lt;td&gt;data 9&lt;/td&gt;&lt;/tr&gt;<br />&lt;/table&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt> css Table empty cells 11 1 4/20/2014 6:05:05 PM 10/24/2015 10:40:26 AM Edit | Details | Delete
1 border collapse border collapse The <code>border-collapse</code> determines the border model of the table cells. <br /><br />The possible values are<br /><table><br /><tr><th>Properties</th><th>Description</th></tr><tr><td><code>collapse</code></td><td>defines a collapsing border model</td></tr><tr><td><code>separated</code></td><td>defines a separated border model</td></tr></table><br /><br /><snpt>&lt;html&gt;<br />&lt;head&gt;<br /> &lt;style&gt;<br /> table tr td {border: 1px solid #000000; padding: 10px; margin:10px;}<br /> &lt;/style&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br /> &lt;table style=&quot;border-collapse:collapse; border-spacing: 10px&quot; cellspacing=&quot;10&quot;&gt;<br /> &lt;tr&gt;&lt;td&gt;data 1&lt;/td&gt;&lt;td&gt;data 2&lt;/td&gt;&lt;td&gt;data 3&lt;/td&gt;&lt;/tr&gt;<br /> &lt;tr&gt;&lt;td&gt;data 4&lt;/td&gt;&lt;td&gt;data 5&lt;/td&gt;&lt;td&gt;data 6&lt;/td&gt;&lt;/tr&gt;<br /> &lt;tr&gt;&lt;td&gt;data 7&lt;/td&gt;&lt;td&gt;data 8&lt;/td&gt;&lt;td&gt;data 9&lt;/td&gt;&lt;/tr&gt;<br /> &lt;/table&gt;<br /> &lt;table style=&quot;border-collapse:separate; border-spacing: 10px&quot; cellspacing=&quot;10&quot;&gt;<br /> &lt;tr&gt;&lt;td&gt;data 1&lt;/td&gt;&lt;td&gt;data 2&lt;/td&gt;&lt;td&gt;data 3&lt;/td&gt;&lt;/tr&gt;<br /> &lt;tr&gt;&lt;td&gt;data 4&lt;/td&gt;&lt;td&gt;data 5&lt;/td&gt;&lt;td&gt;data 6&lt;/td&gt;&lt;/tr&gt;<br /> &lt;tr&gt;&lt;td&gt;data 7&lt;/td&gt;&lt;td&gt;data 8&lt;/td&gt;&lt;td&gt;data 9&lt;/td&gt;&lt;/tr&gt;<br /> &lt;/table&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt> css border collapse 12 1 4/20/2014 6:06:06 PM 10/24/2015 10:40:26 AM Edit | Details | Delete
1 Box Model Box Model HTML element has associated with box. The box has four parts.<br /><br /><table><br /><tr><th>Values</th><th>Description</th></tr><tr><td><code>content</code></td><td>the actual of the element</td></tr><tr><td><code>padding</code></td><td>the area between the content and the border</td></tr><tr><td><code>border</code></td><td>the edge of the element</td></tr><tr><td><code>margin</code></td><td>the area between the element and similar adjacent elements</td></tr></table><br /><br /><tit>Points to Remember</tit><br />-The margin is transparent<br />-The border has an associated background<br />-The padding and the content share the background property defined for the elements.<br />-The margin, border and padding have a top, right, bottom, and left sub parts for which you can set individual properties. css Box Model 1 1 4/21/2014 6:50:14 PM 10/24/2015 10:48:56 AM Edit | Details | Delete
1 Padding Padding The padding is the area between the content and the border. The single characteristic you can set for the padding element is size. The 5 width properties of padding are given below.<br /><br />The possible values are:<br /><table><br /><tr><th>Values</th><th>Description</th></tr><tr><td><code>padding-top</code></td><td></td></tr><tr><td><code>padding-right</code></td><td></td></tr><tr><td><code>padding-bottom</code></td><td></td></tr><tr><td><code>padding-left</code></td><td></td></tr><tr><td><code>padding</code></td><td></td></tr></table><br /><br />Then possible values for these properties are<br /><table><br /><tr><th>Values</th><th>Description</th></tr><tr><td><<i>length</i>></td><td>a fixed width. Only 0 or positive values are valid.</td></tr><tr><td><<i>percentage</i>></td><td>specifies the width relative to parent element.</td></tr><tr><td><code>inherit</code></td><td>the property is inherited from the parent.</td></tr></table><br /><br /><snpt>&lt;html&gt;<br />&lt;head&gt;<br /> &lt;style&gt;<br /> p {<br /> padding-top:10px;<br /> padding-right:25px;<br /> padding-bottom:20px;<br /> padding-left:50px;<br /> background:#aed7f5;<br /> }<br /> <br /> div { padding-top:10cm;<br /> padding-right:1cm;<br /> padding-bottom:2pc;<br /> padding-left:5mm;<br /> background:#f1aef5;}<br /> &lt;/style&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br /> &lt;p&gt; Never cry for the person who hurts you. Just smile and say, <br /> thanks for giving me a chance to find someone better than you. &lt;/p&gt;<br /> &lt;div&gt; Never cry for the person who hurts you. Just smile and say, <br /> thanks for giving me a chance to find someone better than you. &lt;/div&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt><br /><br /><tit>Padding shorthand</tit><br />The padding property can accept up to 4 space delimited values.<br /><br /><t1>For example </t1><br /><table><br /><tr><th>Declaration</th><th>Description</th></tr><tr><td><i>padding </i>: 1px</td><td>top=right=bottom=left=1px</td></tr><tr><td><i>padding </i>: 1px 2px</td><td>top=right=1px, bottom=left=2px</td></tr><tr><td><i>padding </i>: 1px 2px 3px</td><td>top=1px, right=left=2px, bottom=3px</td></tr><tr><td><i>padding </i>: 1px 2px 3px 4px</td><td>top=1px, right=2px, left=3px, bottom=4px</td></tr></table><br /><snpt><code>&lt;html&gt;<br />&lt;head&gt;<br /> &lt;style&gt;<br /> p {padding:10px 25px 20px 50px;<br /> background:#aed7f5;<br /> }<br /> div {padding-top:10cm 1cm 2pc 5mm;<br /> background: #f1aef5;}<br /> &lt;/style&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br /> &lt;p&gt; Never cry for the person who hurts you. Just smile and say, <br /> thanks for giving me a chance to find someone better than you. &lt;/p&gt;<br /> &lt;div&gt; Never cry for the person who hurts you. Just smile and say, <br /> thanks for giving me a chance to find someone better than you. &lt;/div&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</code></snpt> css Padding 2 1 4/21/2014 7:04:26 PM 10/24/2015 10:48:56 AM Edit | Details | Delete
1 Margin Margin The single characteristic you can set for the <code>margin</code> element is size. There are 5 width properties.<br /><br />The possible values are:<br /><table><br /><tr><th>Values</th><th>Description</th></tr><tr><td><code>margin-top</code></td><td></td></tr><tr><td><code>margin-right</code></td><td></td></tr><tr><td><code>margin-bottom</code></td><td></td></tr><tr><td><code>margin-left</code></td><td></td></tr><tr><td><code>margin</code></td><td></td></tr></table><br /><br />Then possible values for these properties are<br /><table><br /><tr><th>Values</th><th>Description</th></tr><tr><td><<i>length</i>></td><td>a fixed width. Only 0 or positive values are valid.</td></tr><tr><td><<i>percentage</i>></td><td>specifies the width relative to parent element.</td></tr><tr><td><code>inherit</code></td><td>the property is inherited from the parent.</td></tr></table><br /><br /><snpt>&lt;html&gt;<br />&lt;head&gt;<br /> &lt;style&gt;<br /> p {margin-top:10px;<br /> margin-right:25px;<br /> margin-bottom:20px;<br /> margin-left:50px;<br /> background:#aed7f5;<br /> }<br /> <br /> div {margin-top:10cm;<br /> margin-right:1cm;<br /> margin-bottom:2pc;<br /> margin-left:5mm;<br /> background:#f1aef5;}<br /> &lt;/style&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br /> &lt;p&gt; Never cry for the person who hurts you. Just smile and say, thanks for giving <br /> me a chance to find someone better than you. &lt;/p&gt;<br /> &lt;div&gt; Never cry for the person who hurts you. Just smile and say, thanks for giving <br /> me a chance to find someone better than you. &lt;/div&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt><br /><br /><tit>margin shorthand</tit><br />The margin property can accept up to 4 space delimited values.<br /><br /><t1>For example </t1><br /><table><br /><tr><th>Declaration</th><th>Description</th></tr><tr><td><i>margin</i> : 1px</td><td>top=right=bottom=left=1px</td></tr><tr><td><i>margin</i> : 1px 2px</td><td>top=right=1px, bottom=left=2px</td></tr><tr><td><i>margin</i> : 1px 2px 3px</td><td>top=1px, right=left=2px, bottom=3px</td></tr><tr><td><i>margin</i> : 1px 2px 3px 4px</td><td>top=1px, right=2px, left=3px, bottom=4px</td></tr></table><br /><br />Note: <br /><note>-The values may be positive or negative.<br />-The properties margin-top, margin-right, margin-bottom, margin-left accepts only one value</note><br /><br /><snpt>&lt;html&gt;<br />&lt;head&gt;<br /> &lt;style&gt;<br /> p {margin:10px 25px 20px 50px;<br /> background:#aed7f5;<br /> }<br /> div {margin-top:10cm 1cm 2pc 5mm;<br /> background: #f1aef5;}<br /> &lt;/style&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br /> &lt;p&gt; Never cry for the person who hurts you. Just smile and say, thanks for giving <br /> me a chance to find someone better than you. &lt;/p&gt;<br /> &lt;div&gt; Never cry for the person who hurts you. Just smile and say, thanks for giving <br /> me a chance to find someone better than you. &lt;/div&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt> css Padding 3 1 4/21/2014 7:05:11 PM 10/24/2015 10:48:56 AM Edit | Details | Delete
1 Border Border There are three characteristics you can set for the border elements.<br /><br />i. <i>width</i><br />ii. <i>color</i><br />iii. <i>style</i><br /><br /> By combining the 4 possible parts of the <code>border</code> element (<code>border-top</code>, <code>border-right</code>, <code>border-bottom</code>, <code>border-left</code>, <code>border</code>) with all possible characteristics (width, color, style or all) we get 20 possible properties that can be set for the border element as given below.<br /> <br /><table><br /><tr><th><i>Properties</i></th><th>WIDTH</th><th>COLOR</th><th>STYLE</th><th>ALL</th></tr><tr><td>boder-top</td><td>border-top-width</td><td>border-top-color</td><td>border-top-style</td><td>border-top</td></tr><tr><td>boder-right</td><td>border-right-width</td><td>border-right-color</td><td>border-right-style</td><td>border-right</td></tr><tr><td>boder-bottom</td><td>border-bottom-width </td><td> border-bottom-color </td><td>border-bottom-style</td><td>border-bottom</td></tr><tr><td>boder-left</td><td>border-left-width</td><td>border-left-color</td><td>border-left-style</td><td>border-left</td></tr></table><br /><br /><tit>i. Border Width</tit><br /><<i>width</i>> - The possible values are.<br /><table><br /><tr><th>Values</th><th>Description</th></tr><tr><td><<i>length</i>></td><td>specifies a fixed width.</td></tr><tr><td><code>thin</code> | <code>medium</code> | <code>thick</code></td><td></td></tr><tr><td><code>inherit</code></td><td></td></tr></table><br /><snpt>&lt;html&gt;<br />&lt;head&gt;<br /> &lt;style&gt;<br /> button {margin: 5px; border-style: solid}<br /> &lt;/style&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br /> &lt;form&gt;<br /> &lt;button style=&quot;border-width=thin&quot;&gt;thin&lt;/button&gt;<br /> &lt;button style=&quot;border-width=thick&quot;&gt;thick&lt;/button&gt;<br /> &lt;button style=&quot;border-width=medium&quot;&gt;medium&lt;/button&gt;<br /> &lt;button style=&quot;border-width=5px&quot;&gt;Width 5px&lt;/button&gt;<br /> &lt;/form&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt><br /><br /><tit>ii. Border Color</tit><br /><<i>color</i>> - The possible values are<br /><table><br /><tr><th>Values</th><th>Description</th></tr><tr><td><<i>color</i>></td><td></td></tr><tr><td><code>inherit</code></td><td></td></tr></table><br /><snpt>&lt;html&gt;<br />&lt;head&gt;<br /> &lt;style&gt;<br /> button {margin: 5px; border-style: solid}<br /> .aqua {border-color: aqua;}<br /> .lime {border-color: lime;}<br /> .purple {border-color: purple;}<br /> &lt;/style&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br /> &lt;form&gt;<br /> &lt;button class=&quot;aqua&quot;&gt;aqua&lt;/button&gt;<br /> &lt;button class=&quot;lime&quot;&gt;lime&lt;/button&gt;<br /> &lt;button class=&quot;purple&quot;&gt;purple&lt;/button&gt;<br /> &lt;/form&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt><br /> <br /><tit>iii. Border Style</tit><br /><<i>style</i>> - The possible values are<br /><table><br /><tr><th>Values</th><th>Description</th></tr><tr><td><code>none</code> | <code>hidden</code> | <code>dotted</code> | <code>dashed</code> | <code>solid</code> | <code>double</code> | <code>groove</code> | <code>ridge</code> | <code>inset</code> | <code>outset</code></td><td></td></tr><tr><td><code>inherit</code></td><td></td></tr></table><br /><snpt>&lt;html&gt;<br />&lt;head&gt;<br /> &lt;style&gt;<br /> * button {margin: 5px}<br /> .none {border-style: none;}<br /> .hidden {border-style: hidden;}<br /> .dotted {border-style: dotted;}<br /> .dashed {border-style: dashed;}<br /> .solid {border-style: solid;}<br /> .double {border-style: bouble;}<br /> .groove {border-style: groove;}<br /> .ridge {border-style: ridge;}<br /> .inset {border-style: inset;}<br /> .outset {border-style: outset;}<br /> &lt;/style&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br /> &lt;form&gt;<br /> &lt;button class=&quot;none&quot;&gt;none&lt;/button&gt;<br /> &lt;button class=&quot;hidden&quot;&gt;hidden&lt;/button&gt;<br /> &lt;button class=&quot;dotted&quot;&gt;dotted&lt;/button&gt;<br /> &lt;button class=&quot;dashed&quot;&gt;dashed&lt;/button&gt;<br /> &lt;button class=&quot;solid&quot;&gt;solid&lt;/button&gt;<br /> &lt;button class=&quot;double&quot;&gt;double&lt;/button&gt;<br /> &lt;button class=&quot;groove&quot;&gt;groove&lt;/button&gt;<br /> &lt;button class=&quot;ridge&quot;&gt;ridge&lt;/button&gt;<br /> &lt;button class=&quot;inset&quot;&gt;inset&lt;/button&gt;<br /> &lt;button class=&quot;outset&quot;&gt;outset&lt;/button&gt;<br /> &lt;/form&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt> css Border 4 1 4/21/2014 7:07:30 PM 10/24/2015 10:48:56 AM Edit | Details | Delete
1 Cursors Cursors The different kind of cursors can be attached to each box element. Below are the different kind of cursors.<br /><table><br /><tr><th>Properties</th></tr><tr><td><code>default</code></td></tr><tr><td><code>text</code></td></tr><tr><td><code>help</code></td></tr><tr><td><code>wait</code></td></tr><tr><td><code>default</code></td></tr><tr><td><code>crosshair</code></td></tr><tr><td><code>move</code></td></tr><tr><td><code>pointer</code></td></tr><tr><td><code>ne-resize</code></td></tr><tr><td><code>sw-resize</code></td></tr><tr><td><code>n-resize</code></td></tr><tr><td><code>s-resize</code></td></tr><tr><td><code>w-resize</code></td></tr><tr><td><code>e-resize</code></td></tr><tr><td><code>nw-resize</code></td></tr><tr><td><code>se-resize</code></td></tr></table><br /><br />Other cursor identifiers<br /><table><br /><tr><th>Properties</th><th>Description</th></tr><tr><td><code>auto</code></td><td>the displayed cursor depends on the current context</td></tr><tr><td><i>URL</i></td><td>the url of the internet resource</td></tr></table><br /><br /><snpt>&lt;html&gt;<br />&lt;head&gt;<br /> &lt;style&gt;<br /> div{margin: 10px; background: #ebebeb}<br /> &lt;/style&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br /> &lt;form&gt;<br /> &lt;div style=&quot;default&quot;&gt;default&lt;/div&gt;<br /> &lt;div style=&quot;text&quot;&gt;text&lt;/div&gt;<br /> &lt;div style=&quot;help&quot;&gt;help&lt;/div&gt;<br /> &lt;div style=&quot;wait&quot;&gt;wait&lt;/div&gt;<br /> &lt;div style=&quot;default&quot;&gt;default&lt;/div&gt;<br /> &lt;div style=&quot;crosshair&quot;&gt;crosshair&lt;/div&gt;<br /> &lt;div style=&quot;move&quot;&gt;move&lt;/div&gt;<br /> &lt;div style=&quot;pointer&quot;&gt;pointer&lt;/div&gt;<br /> &lt;div style=&quot;ne-resize&quot;&gt;ne-resize&lt;/div&gt;<br /> &lt;div style=&quot;sw-resize&quot;&gt;sw-resize&lt;/div&gt;<br /> &lt;div style=&quot;n-resize&quot;&gt;n-resize&lt;/div&gt;<br /> &lt;div style=&quot;s-resize&quot;&gt;s-resize&lt;/div&gt;<br /> &lt;div style=&quot;w-resize&quot;&gt;w-resize&lt;/div&gt;<br /> &lt;div style=&quot;e-resize&quot;&gt;e-resize&lt;/div&gt;<br /> &lt;div style=&quot;nw-resize&quot;&gt;nw-resize&lt;/div&gt;<br /> &lt;div style=&quot;se-resize&quot;&gt;se-resize&lt;/div&gt;<br /> &lt;/form&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt> css Cursors 5 1 4/21/2014 7:09:56 PM 10/24/2015 10:48:56 AM Edit | Details | Delete
1 Overflow Overflow The <code>overflow</code> property specifies what happens to the content of a block-level element when the content doesn't not fit into the space allocated for the element.<br /><br /><table><br /><tr><th>Properties</th><th>Description</th></tr><tr><td><code>visible</code></td><td>the content is not clipped and will be rendered outside of the box element</td></tr><tr><td><code>hidden</code></td><td>the content is clipped and cannot be scrolled</td></tr><tr><td><code>scroll</code></td><td>the content is clipped but can be scrolled</td></tr><tr><td><code>auto</code></td><td>the value is browser dependent</td></tr><tr><td><code>inherit</code></td><td>the value is inherited from the parent.</td></tr></table><br /><br />There are other two <code>overflow</code> properties which are specific to x or y axis.<br /><table><br /><tr><th>Properties</th><th>Description</th></tr><tr><td><code>overflow-x</code></td><td>specify an overflow behavior along x-axis only</td></tr><tr><td><code>overflow-y</code></td><td>specify an overflow behavior along y-axis only</td></tr></table><br /><br /><note>If the overflow property is not set, the default value <code>visible</code> will be set.</note><br /><br /><snpt>&lt;html&gt;<br />&lt;head&gt;<br /> &lt;style&gt;<br /> div{border: 1px solid #000000}<br /> &lt;/style&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br /> &lt;form&gt;<br /> &lt;div style=&quot;width:300px; height:250px; overflow: hidden&quot;&gt;<br /> Commodi numquam adipisci sit consequatur vitae saepe beatae, vero sit dignissimos <br /> harum accusamus fuga iusto facilis expedita omnis beatae, dolorum perferendis harum <br /> blanditiis nemo cumque dignissimos recusandae a aliquid, laboriosam&lt;/div&gt;<br /> <br /> &lt;div style=&quot;width:300px; height:250px; overflow: visible&quot;&gt;<br /> Commodi numquam adipisci sit consequatur vitae saepe beatae, vero sit dignissimos <br /> harum accusamus fuga iusto facilis expedita omnis beatae, dolorum perferendis harum <br /> blanditiis nemo cumque dignissimos recusandae a aliquid, laboriosam&lt;/div&gt;<br /> <br /> &lt;div style=&quot;width:300px; height:250px; overflow: scroll&quot;&gt;<br /> Commodi numquam adipisci sit consequatur vitae saepe beatae, vero sit dignissimos <br /> harum accusamus fuga iusto facilis expedita omnis beatae, dolorum perferendis harum <br /> blanditiis nemo cumque dignissimos recusandae a aliquid, laboriosam&lt;/div&gt;<br /> &lt;/form&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt> css Overflow 6 1 4/21/2014 7:10:46 PM 10/24/2015 10:48:56 AM Edit | Details | Delete
1 Clipping Clipping The <code>clip</code> property is used to make only a portion of the box attached to a positioned elements visible.<br /><br />The possible values are<br /><table><br /><tr><th>Properties</th><th>Description</th></tr><tr><td><code>rect(<i>top</i> <i>right</i> <i>left</i> <i>bottom</i>)</code></td><td><i>top</i> & <i>bottom</i> - integer values representing the distance in pixels from top margin of the box<br /><i>right</i> & <i>left</i> - integer values representing the distance in pixels from left margin of the box</td></tr><tr><td><code>auto</code></td><td>(all boxes attached to an element is <code>visible</code> - <i>default value</i>)</td></tr></table><br /><br /><t1>example</t1><br /><pre>clip: rect(25px 200px 75px 100px)</pre><br /><snpt>&lt;html&gt;<br />&lt;head&gt;<br /> &lt;style&gt;<br /> div{border: 1px solid #000000}<br /> &lt;/style&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br /> Original Image<br /> &lt;div&gt;&lt;img src=&quot;image.jpg&quot;&gt;&lt;/div&gt;<br /> Clipped Image<br /> &lt;div&gt;&lt;img src=&quot;image.jpg&quot; style=&quot;clip: rect(25px 200px 75px 100px)&quot;&gt;&lt;/div&gt;<br />&lt;/body&gt;<br />&lt;/html&gt</snpt> css Clipping 7 1 4/21/2014 7:11:27 PM 10/24/2015 10:48:56 AM Edit | Details | Delete
1 Visibility Visibility The <code>visibility</code> property specifies whether or not the box attached to an element is visible.<br /><br />The possible values are<br /><table><br /><tr><th>Properties</th><th>Description</th></tr><tr><td><code>visible</code></td><td> the box is visible</td></tr><tr><td><code>hidden</code></td><td> the box is not visible, but space is allocated</td></tr><tr><td><code>collapse</code></td><td> allows adjacent non-visible element to collapse</td></tr><tr><td><code>inherit</code></td><td> is inherited from the parent</td></tr></table><br /><br />Note:<br /><note>The browser will allocate space for the element in any case.<br />If we need the browser not to allocate any space for the element box, 'display' property should be used instead.</note><br /><br /><snpt>&lt;html&gt;<br />&lt;head&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br /> &lt;div style=&quot;visibility: hidden&quot;&gt;Hidden Text<br /> &lt;p style=&quot;visibility: visible&quot;&gt;Visible paragraph inside of a hidden div block<br /> &lt;h3 style=&quot;visibility: inherit&quot;&gt;<br /> Inherit heading. Hidden Text.<br /> &lt;/div&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt> css Visibility 8 1 4/21/2014 7:12:19 PM 10/24/2015 10:48:56 AM Edit | Details | Delete
1 background-color background-color <tit>Background Color</tit> <p>The <code>background-color</code> property property is used to set up the background color of the box.</p> <p>The possible values for css color specifications are:</p> <table> <tr><th>Values</th><th>Description</th></tr><tr><td><i>named color</i></td><td>blue</td></tr><tr><td><i>rgb</i>/ <i>hsl</i></td><td>rgb(100, 200, 0)</td></tr><tr><td><i>hexadecimal</i></td><td>#00ff00</td></tr><tr><td><i>transparent</i></td><td><i>default</i></td></tr></table> <snpt>&lt;html&gt; &lt;head&gt; &lt;/head&gt; &lt;body&gt; &lt;p style=&quot;background-color: rgb(100, 200, 0)&quot;&gt; Never cry for the person who hurts you. Just smile and say, thanks for giving me a chance to find someone better than you. &lt;/p&gt; &lt;div style=&quot;background-color: #00ff00&quot;&gt; Never cry for the person who hurts you. Just smile and say, thanks for giving me a chance to find someone better than you. &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</snpt> <tit>Background Image</tit> <p>The <code>background-image</code> property is used to set the background image of the box.</p> <p>The possible values are URIs that points to the valid image (gif, jpeg, png) </p> <pre>url('image.gif') url('http://www.quotefellas.com/quote.jpg')</pre> <snpt>&lt;html&gt; &lt;head&gt; &lt;/head&gt; &lt;body&gt; &lt;p style=&quot;background-image: url(image.gif)&quot;&gt; Never cry for the person who hurts you. Just smile and say, thanks for giving me a chance to find someone better than you. &lt;/p&gt; &lt;button style=&quot;background-image: url(image.gif)&quot;&gt;Button with Image&lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</snpt> <tit>Background Position</tit> <p>The background-position property is used specify the top and the left of the background image relative to the top and the left of the element box. </p> <p>The possible values are. </p> <table> <tr><th>Properties</th><th>Description</th></tr><tr><td><<i>percentage</i>></td><td></td></tr><tr><td><<i>length</i>></td><td></td></tr><tr><td><code>left</code> | <code>center</code> | <code>right</code></td><td>for horizontal direction</td></tr><tr><td><code>top</code> | <code>center</code> | <code>bottom</code></td><td>for vertical direction</td></tr></table> <t1>For example</t1> <pre>background-position : 30px 50px /* first value applies to horizontal direction, second value apply to vertical direction*/ background-position : left bottom background-position : 10% /* applies to both the vertical and horizontal direction.*/ </pre> <snpt>&lt;html&gt; &lt;head&gt; &lt;style&gt; p {margin: 10px} body * {background-image: url(bg.jpg)} &lt;/style&gt; &lt;/head&gt; &lt;body style=&quot;background-image: url(image.png);background-position: 0px&quot;&gt; &lt;p style=&quot;background-position: 0px&quot;&gt; Say it before it&#39;s too late.&lt;/p&gt; &lt;p style=&quot;background-position: 10px&quot;&gt; Say it before it&#39;s too late.&lt;/p&gt; &lt;p style=&quot;background-position: -10px 10%&quot;&gt; Say it before it&#39;s too late.&lt;/p&gt; &lt;p style=&quot;background-position: 6% -6%&quot;&gt; Say it before it&#39;s too late.&lt;/p&gt; &lt;p style=&quot;background-position: 6cm&quot;&gt; Say it before it&#39;s too late.&lt;/p&gt; &lt;/body&gt; &lt;/html&gt;</snpt> <tit>background position x</tit> <p>The background-position-x is similar to background-position. It applies to horizontal direction in internet explorer only.</p> <tit>background position y</tit> <p>The background-position-y is similar to background-position. It applies to vertical direction in internet explorer only.</p> <tit>background-repeat</tit> <p>The <code>background-repeat</code> property allows to specify how the background image is repeated. </p> <p>The possible values are. </p> <table> <tr><th>Properties</th><th>Description</th></tr><tr><td><code>no-repeat</code></td><td>only one instance of image will be rendered.</td></tr><tr><td><code>repeat</code></td><td>the image is rendered in both horizontally and vertically.</td></tr><tr><td><code>repeat-x</code></td><td>the image is repeated only horizontally. </td></tr><tr><td><code>repeat-y</code></td><td>the image is repeated only vertically.</td></tr></table> <snpt>&lt;html&gt; &lt;head&gt; &lt;style&gt; p {border: 1px solid #000000;width:300px; height:250px; background-image: url(bg.jpg)} &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;form&gt; &lt;p style=&quot;background-repeat: repeat-x&quot;&gt; Commodi numquam adipisci sit consequatur vitae saepe beatae, vero sit dignissimos harum accusamus fuga iusto facilis expedita omnis beatae, dolorum perferendis harum blanditiis nemo cumque dignissimos recusandae a aliquid, laboriosam&lt;/p&gt; &lt;p style=&quot;background-repeat: repeat-y&quot;&gt; Commodi numquam adipisci sit consequatur vitae saepe beatae, vero sit dignissimos harum accusamus fuga iusto facilis expedita omnis beatae, dolorum perferendis harum blanditiis nemo cumque dignissimos recusandae a aliquid, laboriosam&lt;/p&gt; &lt;p style=&quot;background-repeat: repeat&quot;&gt; Commodi numquam adipisci sit consequatur vitae saepe beatae, vero sit dignissimos harum accusamus fuga iusto facilis expedita omnis beatae, dolorum perferendis harum blanditiis nemo cumque dignissimos recusandae a aliquid, laboriosam&lt;/p&gt; &lt;/form&gt; &lt;/body&gt; &lt;/html&gt; </snpt> <tit>Background Attachment</tit> <p>The <code>background-attachment</code> property is used to specify whether or not the background image scrolls with the document. </p> <p>The possible values are. </p> <table> <tr><th>Properties</th><th>Description</th></tr><tr><td><code>fixed</code></td><td>the image is fixed relative to the view-port</td></tr><tr><td><code>scroll</code></td><td>the image is fixed relative to the document, and the two will be scrolled together (the default value)</td></tr></table> <snpt>&lt;html&gt; &lt;head&gt; &lt;style&gt; p {width:300px; height:250px; background-image: url(bg.jpg)} &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;form&gt; &lt;p style=&quot;background-attachment: fixed; overflow: fixed&quot;&gt; Commodi numquam adipisci sit consequatur vitae saepe beatae, vero sit dignissimos harum accusamus fuga iusto facilis expedita omnis beatae, dolorum perferendis harum blanditiis nemo cumque dignissimos recusandae a aliquid, laboriosam&lt;/p&gt; &lt;p style=&quot;background-attachment: fixed; overflow: scroll&quot;&gt; Commodi numquam adipisci sit consequatur vitae saepe beatae, vero sit dignissimos harum accusamus fuga iusto facilis expedita omnis beatae, dolorum perferendis harum blanditiis nemo cumque dignissimos recusandae a aliquid, laboriosam&lt;/p&gt; &lt;/form&gt; &lt;/body&gt; &lt;/html&gt;</snpt> <tit>background</tit> <p>The <code>background</code> property is a shortcut that can be used to set the <code>background-image</code> properties. </p> <t1>syntax</t1> <pre>background: <<i>background-attachment</i>> <<i>background_color</i>> <<i>background_image</i>> <<i>background_position</i>> <<i>backgound_repeat</i>></pre> <p>Both the <code>background-color</code> and <code>background-image</code> can be rendered simultaneously. </p> <snpt>&lt;html&gt; &lt;head&gt; &lt;style&gt; p {width:300px; height:250px; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;form&gt; &lt;p style=&quot;background: fixed blue url(bg.jpg) 5cm repeat-x;&quot;&gt;This is a paragraph with the background style&lt;/p&gt; &lt;/form&gt; &lt;/body&gt; &lt;/html&gt;</snpt> css background-color 9 1 4/21/2014 7:13:20 PM 12/16/2018 7:19:45 PM Edit | Details | Delete
1 background image background image The <code>background-image</code> property is used to set the background image of the box.<br /><br />The possible values are URIs that points to the valid image (gif, jpeg, png)<br /><br /><pre>url('image.gif')<br />url('http://www.quotefellas.com/quote.jpg')</pre><br /><br /><snpt>&lt;html&gt;<br />&lt;head&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br /> &lt;p style=&quot;background-image: url(image.gif)&quot;&gt; Never cry for the person who hurts you. <br /> Just smile and say, thanks for giving me a chance to find someone better than you. &lt;/p&gt;<br /> &lt;button style=&quot;background-image: url(image.gif)&quot;&gt;Button with Image&lt;/div&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt> css background image 10 1 4/21/2014 7:14:16 PM 10/24/2015 10:48:56 AM Edit | Details | Delete
1 background position background position The background-position property is used specify the top and the left of the background image relative to the top and the left of the element box.<br /><br />The possible values are.<br /><table><br /><tr><th>Properties</th><th>Description</th></tr><tr><td><<i>percentage</i>></td><td></td></tr><tr><td><<i>length</i>></td><td></td></tr><tr><td><code>left</code> | <code>center</code> | <code>right</code></td><td>for horizontal direction</td></tr><tr><td><code>top</code> | <code>center</code> | <code>bottom</code></td><td>for vertical direction</td></tr></table><br /><br /><t1>For example</t1><br /><pre>background-position : 30px 50px /* first value applies to horizontal direction, <br />second value apply to vertical direction*/<br />background-position : left bottom<br />background-position : 10% /* applies to both the vertical and horizontal direction.*/ </pre><br /><br /><snpt>&lt;html&gt;<br />&lt;head&gt;<br /> &lt;style&gt;<br /> p {margin: 10px}<br /> body * {background-image: url(bg.jpg)}<br /> &lt;/style&gt;<br />&lt;/head&gt;<br />&lt;body style=&quot;background-image: url(image.png);background-position: 0px&quot;&gt;<br /> &lt;p style=&quot;background-position: 0px&quot;&gt; Say it before it&#39;s too late.&lt;/p&gt;<br /> &lt;p style=&quot;background-position: 10px&quot;&gt; Say it before it&#39;s too late.&lt;/p&gt;<br /> &lt;p style=&quot;background-position: -10px 10%&quot;&gt; Say it before it&#39;s too late.&lt;/p&gt;<br /> &lt;p style=&quot;background-position: 6% -6%&quot;&gt; Say it before it&#39;s too late.&lt;/p&gt;<br /> &lt;p style=&quot;background-position: 6cm&quot;&gt; Say it before it&#39;s too late.&lt;/p&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt> css background position 11 1 4/21/2014 7:15:29 PM 10/24/2015 10:48:56 AM Edit | Details | Delete
1 background position x background position x The background-position-x is similar to background-position. It applies to horizontal direction in internet explorer only. css background-position-x 12 1 4/21/2014 7:16:35 PM 10/24/2015 10:48:56 AM Edit | Details | Delete
1 background position y background position y The background-position-y is similar to background-position. It applies to vertical direction in internet explorer only. css background-position-y 13 1 4/21/2014 7:18:58 PM 10/24/2015 10:48:56 AM Edit | Details | Delete
1 background-repeat background-repeat The <code>background-repeat</code> property allows to specify how the background image is repeated.<br /><br />The possible values are.<br /><table><br /><tr><th>Properties</th><th>Description</th></tr><tr><td><code>no-repeat</code></td><td>only one instance of image will be rendered.</td></tr><tr><td><code>repeat</code></td><td>the image is rendered in both horizontally and vertically.</td></tr><tr><td><code>repeat-x</code></td><td>the image is repeated only horizontally. </td></tr><tr><td><code>repeat-y</code></td><td>the image is repeated only vertically.</td></tr></table><br /><br /><snpt>&lt;html&gt;<br />&lt;head&gt;<br /> &lt;style&gt;<br /> p {border: 1px solid #000000;width:300px; height:250px; background-image: url(bg.jpg)}<br /> &lt;/style&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br /> &lt;form&gt;<br /> &lt;p style=&quot;background-repeat: repeat-x&quot;&gt;<br /> Commodi numquam adipisci sit consequatur vitae saepe beatae, vero sit dignissimos <br /> harum accusamus fuga iusto facilis expedita omnis beatae, dolorum perferendis harum <br /> blanditiis nemo cumque dignissimos recusandae a aliquid, laboriosam&lt;/p&gt;<br /> &lt;p style=&quot;background-repeat: repeat-y&quot;&gt;<br /> Commodi numquam adipisci sit consequatur vitae saepe beatae, vero sit dignissimos <br /> harum accusamus fuga iusto facilis expedita omnis beatae, dolorum perferendis harum <br /> blanditiis nemo cumque dignissimos recusandae a aliquid, laboriosam&lt;/p&gt;<br /> &lt;p style=&quot;background-repeat: repeat&quot;&gt;<br /> Commodi numquam adipisci sit consequatur vitae saepe beatae, vero sit dignissimos <br /> harum accusamus fuga iusto facilis expedita omnis beatae, dolorum perferendis harum <br /> blanditiis nemo cumque dignissimos recusandae a aliquid, laboriosam&lt;/p&gt;<br /> &lt;/form&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;<br /></snpt> css background-repeat 14 1 4/21/2014 7:19:38 PM 10/24/2015 10:48:56 AM Edit | Details | Delete
1 background-attachment background-attachment The <code>background-attachment</code> property is used to specify whether or not the background image scrolls with the document.<br /><br />The possible values are.<br /><table><br /><tr><th>Properties</th><th>Description</th></tr><tr><td><code>fixed</code></td><td>the image is fixed relative to the view-port</td></tr><tr><td><code>scroll</code></td><td>the image is fixed relative to the document, and the two will be scrolled together (the default value)</td></tr></table><br /><snpt>&lt;html&gt;<br />&lt;head&gt;<br /> &lt;style&gt;<br /> p {width:300px; height:250px; background-image: url(bg.jpg)}<br /> &lt;/style&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br /> &lt;form&gt;<br /> &lt;p style=&quot;background-attachment: fixed; overflow: fixed&quot;&gt;<br /> Commodi numquam adipisci sit consequatur vitae saepe beatae, vero sit dignissimos <br /> harum accusamus fuga iusto facilis expedita omnis beatae, dolorum perferendis harum <br /> blanditiis nemo cumque dignissimos recusandae a aliquid, laboriosam&lt;/p&gt;<br /> &lt;p style=&quot;background-attachment: fixed; overflow: scroll&quot;&gt;<br /> Commodi numquam adipisci sit consequatur vitae saepe beatae, vero sit dignissimos <br /> harum accusamus fuga iusto facilis expedita omnis beatae, dolorum perferendis harum <br /> blanditiis nemo cumque dignissimos recusandae a aliquid, laboriosam&lt;/p&gt;<br /> &lt;/form&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt> css background-attachment 15 1 4/21/2014 7:20:22 PM 10/24/2015 10:48:56 AM Edit | Details | Delete
1 background background The <code>background</code> property is a shortcut that can be used to set the <code>background-image</code> properties.<br /><br /><t1>syntax</t1><br /><pre>background: <<i>background-attachment</i>> <<i>background_color</i>> <<i>background_image</i>> <<i>background_position</i>> <<i>backgound_repeat</i>></pre><br /><br />Both the <code>background-color</code> and <code>background-image</code> can be rendered simultaneously.<br /><snpt>&lt;html&gt;<br />&lt;head&gt;<br /> &lt;style&gt;<br /> p {width:300px; height:250px; }<br /> &lt;/style&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br /> &lt;form&gt;<br /> &lt;p style=&quot;background: fixed blue url(bg.jpg) 5cm repeat-x;&quot;&gt;This is a paragraph with the background style&lt;/p&gt;<br /> &lt;/form&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt> css background 16 1 4/21/2014 7:21:21 PM 10/24/2015 10:48:56 AM Edit | Details | Delete
1 line-height line-height The <code>line-height</code> property can be set for <br /><br /><i><b>block-level element</b></i> - to define the minimum height for each inline element contained in the <i>block- leve</i>l element.<br /><i><b>in-line element</b></i> - to define the exact height for that element.<br /><br />The possible values of the <code>line-height</code> property are.<br /><table><br /><tr><th>Properties</th><th>Description</th></tr><tr><td><code>normal</code></td><td>the default value</td></tr><tr><td><<i>number</i>></td><td>represents a multiplier used to determine the actual value</td></tr><tr><td><<i>length</i>></td><td>represents the actual value</td></tr><tr><td><<i>percentage</i>></td><td>represents a multiplier used to determine the actual value</td></tr></table><br /><br />Note<br /><note>Negative values are not allowed<br />When multipliers are used, the actual value of the line-height is the product of the multiplier and the largest font size.<br /><<i>length</i>> - must be followed by a unit.</note><br /><br /><snpt>&lt;html&gt;<br />&lt;head&gt;<br /> &lt;style&gt;<br /> &lt;/style&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br /> &lt;form&gt;<br /> &lt;p style=&quot;line-height: 300%&quot;&gt;This paragraph has line height equal to 300%&lt;/p&gt;<br /> &lt;ul style=&quot;line-height:0.5mm&quot;&gt;<br /> &lt;li&gt;Apple<br /> &lt;li&gt;Orange<br /> &lt;li&gt;Grapes<br /> &lt;/ul&gt;<br /> &lt;/form&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt> css line-height 17 1 4/21/2014 7:22:14 PM 10/24/2015 10:48:56 AM Edit | Details | Delete
1 list item elements list-item elements <tit>list item elements</tit> <p>CSS allows to create new type of lists to define the visual formatting of the lists. Custom lists can be created by setting the value of "display" property of an element to list-item. </p> <snpt>&lt;html&gt; &lt;head&gt; &lt;style&gt; p{ display: list-item} &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;form&gt; &lt;p&gt;paragraph 1&lt;/p&gt; &lt;p&gt;paragraph 2&lt;/p&gt; &lt;p&gt;paragraph 3&lt;/p&gt; &lt;p&gt;paragraph 4&lt;/p&gt; &lt;/form&gt; &lt;/body&gt; &lt;/html&gt;</snpt> <tit>list-style-type</tit> <p>The list-style-type property is used to define the leading symbol that is rendered for each list item. </p> <p>The possible values are. </p> <table> <tr><td><code>disc </code>| <code>circle</code> | <code>square</code></td></tr><tr><td><code>decimal</code> | <code>decimal-leadin-zero</code></td></tr><tr><td><code>lower-roman</code> | <code>upper-roman</code></td></tr><tr><td><code>lower-greek</code></td></tr><tr><td><code>lower-alpha</code> | <code>upper-alpha</code></td></tr><tr><td><code>lower-latin</code> | <code>upper-latin</code></td></tr><tr><td><code>herbian</code> | <code>Armenian</code> | <code>Georgian</code></td></tr><tr><td><code>cjk-ideographic</code> | <code>hiragana</code> | <code>katakana</code> | <code>hirogana-iroha</code> | <code>katokana-iroha</code></td></tr><tr><td><code>none</code></td></tr></table> <snpt>&lt;html&gt; &lt;head&gt; &lt;/head&gt; &lt;body&gt; &lt;form&gt; &lt;table&gt; &lt;tr&gt; &lt;td&gt; &lt;ul style=&quot;list-style-type: disc&quot;&gt; &lt;li&gt;item 1&lt;/li&gt; &lt;li&gt;item 2&lt;/li&gt; &lt;/ul&gt; &lt;ul style=&quot;list-style-type: circle&quot;&gt; &lt;li&gt;item 1&lt;/li&gt; &lt;li&gt;item 2&lt;/li&gt; &lt;/ul&gt; &lt;ul style=&quot;list-style-type: square&quot;&gt; &lt;li&gt;item 1&lt;/li&gt; &lt;li&gt;item 2&lt;/li&gt; &lt;/ul&gt; &lt;/td&gt; &lt;td&gt; &lt;ul style=&quot;list-style-type: decimal&quot;&gt; &lt;li&gt;item 1&lt;/li&gt; &lt;li&gt;item 2&lt;/li&gt; &lt;/ul&gt; &lt;ul style=&quot;list-style-type: decimal-leading-zero&quot;&gt; &lt;li&gt;item 1&lt;/li&gt; &lt;li&gt;item 2&lt;/li&gt; &lt;/ul&gt; &lt;/td&gt; &lt;td&gt; &lt;ul style=&quot;list-style-type: lower-roman&quot;&gt; &lt;li&gt;item 1&lt;/li&gt; &lt;li&gt;item 2&lt;/li&gt; &lt;/ul&gt; &lt;ul style=&quot;list-style-type: upper-roman&quot;&gt; &lt;li&gt;item 1&lt;/li&gt; &lt;li&gt;item 2&lt;/li&gt; &lt;/ul&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt; &lt;ul style=&quot;list-style-type: lower-greel&quot;&gt; &lt;li&gt;item 1&lt;/li&gt; &lt;li&gt;item 2&lt;/li&gt; &lt;/ul&gt; &lt;/td&gt; &lt;td&gt; &lt;ul style=&quot;list-style-type: lower-alpha&quot;&gt; &lt;li&gt;item 1&lt;/li&gt; &lt;li&gt;item 2&lt;/li&gt; &lt;/ul&gt; &lt;ul style=&quot;list-style-type: upper-alpha&quot;&gt; &lt;li&gt;item 1&lt;/li&gt; &lt;li&gt;item 2&lt;/li&gt; &lt;/ul&gt; &lt;/td&gt; &lt;td&gt; &lt;ul style=&quot;list-style-type: lower-latin&quot;&gt; &lt;li&gt;item 1&lt;/li&gt; &lt;li&gt;item 2&lt;/li&gt; &lt;/ul&gt; &lt;ul style=&quot;list-style-type: upper-latin&quot;&gt; &lt;li&gt;item 1&lt;/li&gt; &lt;li&gt;item 2&lt;/li&gt; &lt;/ul&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt; &lt;ul style=&quot;list-style-type: disc&quot;&gt; &lt;li&gt;item 1&lt;/li&gt; &lt;li&gt;item 2&lt;/li&gt; &lt;/ul&gt; &lt;ul style=&quot;list-style-type: hebrew&quot;&gt; &lt;li&gt;item 1&lt;/li&gt; &lt;li&gt;item 2&lt;/li&gt; &lt;/ul&gt; &lt;ul style=&quot;list-style-type: Armenian&quot;&gt; &lt;li&gt;item 1&lt;/li&gt; &lt;li&gt;item 2&lt;/li&gt; &lt;/ul&gt; &lt;ul style=&quot;list-style-type: Georgian&quot;&gt; &lt;li&gt;item 1&lt;/li&gt; &lt;li&gt;item 2&lt;/li&gt; &lt;/ul&gt; &lt;/td&gt; &lt;td&gt; &lt;ul style=&quot;list-style-type: cjk-ideographic&quot;&gt; &lt;li&gt;item 1&lt;/li&gt; &lt;li&gt;item 2&lt;/li&gt; &lt;/ul&gt; &lt;ul style=&quot;list-style-type: hiragana&quot;&gt; &lt;li&gt;item 1&lt;/li&gt; &lt;li&gt;item 2&lt;/li&gt; &lt;/ul&gt; &lt;ul style=&quot;list-style-type: katakana&quot;&gt; &lt;li&gt;item 1&lt;/li&gt; &lt;li&gt;item 2&lt;/li&gt; &lt;/ul&gt; &lt;ul style=&quot;list-style-type: hiragana-iroha&quot;&gt; &lt;li&gt;item 1&lt;/li&gt; &lt;li&gt;item 2&lt;/li&gt; &lt;/ul&gt; &lt;ul style=&quot;list-style-type: katakana-irohana&quot;&gt; &lt;li&gt;item 1&lt;/li&gt; &lt;li&gt;item 2&lt;/li&gt; &lt;/ul&gt; &lt;/td&gt; &lt;td&gt; &lt;ul style=&quot;list-style-type: none&quot;&gt; &lt;li&gt;item 1&lt;/li&gt; &lt;li&gt;item 2&lt;/li&gt; &lt;/ul&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/form&gt; &lt;/body&gt; &lt;/html&gt;</snpt> <tit>list-style-image</tit> <p>The list-style-image property allows to define a leading image that is rendered for each list item. </p> <p>The possible values are. </p> <table> <tr><td>&lt;<i>url</i>&gt;</td><td>e.g. url("fellas.jpg")</td></tr><tr><td><code>none</code></td><td></td></tr></table> <snpt>&lt;html&gt; &lt;head&gt; &lt;/head&gt; &lt;body&gt; &lt;ul style=&quot;list-style-image: url(&quot; bullet-1.png &quot;)&quot;&gt; &lt;li&gt;item 1&lt;/li&gt; &lt;li&gt;item 2&lt;/li&gt; &lt;/ul&gt; &lt;ul style=&quot;list-style-image: url(&quot; bullet-2.png &quot;)&quot;&gt; &lt;li&gt;item 1&lt;/li&gt; &lt;li&gt;item 2&lt;/li&gt; &lt;/ul&gt; &lt;ul style=&quot;list-style-image: url(&quot; bullet-3.png &quot;)&quot;&gt; &lt;li&gt;item 1&lt;/li&gt; &lt;li&gt;item 2&lt;/li&gt; &lt;/ul&gt; &lt;/body&gt; &lt;/html&gt;</snpt> <tit>list-style-position</tit> <p>The list-style-position property allows to define the position (inside or outside of the list item box) for the leading symbol/ image that is rendered for each list item. </p> <p>The possible values are. </p> <table> <tr><td><code>inside</code></td><td></td></tr><tr><td><code>outside </code></td><td> (default value)</td></tr></table> <snpt>&lt;html&gt; &lt;head&gt; &lt;style&gt; body *{ border: 1px solid #000000} &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;ul style=&quot;list-style-type: cicle; list-style-position: inside&quot;&gt; &lt;li&gt;item 1&lt;/li&gt; &lt;li&gt;item 2&lt;/li&gt; &lt;/ul&gt; &lt;ul style=&quot;list-style-type: square; list-style-position: outside&quot;&gt; &lt;li&gt;item 1&lt;/li&gt; &lt;li&gt;item 2&lt;/li&gt; &lt;/ul&gt; &lt;ul style=&quot;list-style-image: url(&#39;bullet-1.png&#39;); list-style-position: inside&quot;&gt; &lt;li&gt;item 1&lt;/li&gt; &lt;li&gt;item 2&lt;/li&gt; &lt;/ul&gt; &lt;/body&gt; &lt;/html&gt;</snpt> <tit>list-style</tit> <p>The list-style property is the shorthand to define the style of the list item. </p> <p>The possible values are. </p> &lt;list-style-type&gt; &lt;list-style-position&gt; &lt;list-style-image&gt; Note: <note>If the image file is missing, the leading symbol will be rendered.</note> css list-item elements 1 1 4/21/2014 7:28:19 PM 12/16/2018 3:23:18 PM Edit | Details | Delete
1 list-style-type list-style-type The list-style-type property is used to define the leading symbol that is rendered for each list item.<br /><br />The possible values are.<br /><table><br /><tr><td><code>disc </code>| <code>circle</code> | <code>square</code></td></tr><tr><td><code>decimal</code> | <code>decimal-leadin-zero</code></td></tr><tr><td><code>lower-roman</code> | <code>upper-roman</code></td></tr><tr><td><code>lower-greek</code></td></tr><tr><td><code>lower-alpha</code> | <code>upper-alpha</code></td></tr><tr><td><code>lower-latin</code> | <code>upper-latin</code></td></tr><tr><td><code>herbian</code> | <code>Armenian</code> | <code>Georgian</code></td></tr><tr><td><code>cjk-ideographic</code> | <code>hiragana</code> | <code>katakana</code> | <code>hirogana-iroha</code> | <code>katokana-iroha</code></td></tr><tr><td><code>none</code></td></tr></table><br /><snpt>&lt;html&gt;<br />&lt;head&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br /> &lt;form&gt;<br /> &lt;table&gt;<br /> &lt;tr&gt;<br /> &lt;td&gt;<br /> &lt;ul style=&quot;list-style-type: disc&quot;&gt;<br /> &lt;li&gt;item 1&lt;/li&gt;<br /> &lt;li&gt;item 2&lt;/li&gt;<br /> &lt;/ul&gt;<br /> &lt;ul style=&quot;list-style-type: circle&quot;&gt;<br /> &lt;li&gt;item 1&lt;/li&gt;<br /> &lt;li&gt;item 2&lt;/li&gt;<br /> &lt;/ul&gt;<br /> &lt;ul style=&quot;list-style-type: square&quot;&gt;<br /> &lt;li&gt;item 1&lt;/li&gt;<br /> &lt;li&gt;item 2&lt;/li&gt;<br /> &lt;/ul&gt;<br /> &lt;/td&gt;<br /> &lt;td&gt;<br /> &lt;ul style=&quot;list-style-type: decimal&quot;&gt;<br /> &lt;li&gt;item 1&lt;/li&gt;<br /> &lt;li&gt;item 2&lt;/li&gt;<br /> &lt;/ul&gt;<br /> &lt;ul style=&quot;list-style-type: decimal-leading-zero&quot;&gt;<br /> &lt;li&gt;item 1&lt;/li&gt;<br /> &lt;li&gt;item 2&lt;/li&gt;<br /> &lt;/ul&gt;<br /> &lt;/td&gt;<br /> &lt;td&gt;<br /> &lt;ul style=&quot;list-style-type: lower-roman&quot;&gt;<br /> &lt;li&gt;item 1&lt;/li&gt;<br /> &lt;li&gt;item 2&lt;/li&gt;<br /> &lt;/ul&gt;<br /> &lt;ul style=&quot;list-style-type: upper-roman&quot;&gt;<br /> &lt;li&gt;item 1&lt;/li&gt;<br /> &lt;li&gt;item 2&lt;/li&gt;<br /> &lt;/ul&gt;<br /> &lt;/td&gt;<br /> &lt;/tr&gt;<br /> &lt;tr&gt;<br /> &lt;td&gt;<br /> &lt;ul style=&quot;list-style-type: lower-greel&quot;&gt;<br /> &lt;li&gt;item 1&lt;/li&gt;<br /> &lt;li&gt;item 2&lt;/li&gt;<br /> &lt;/ul&gt;<br /> &lt;/td&gt;<br /> &lt;td&gt;<br /> &lt;ul style=&quot;list-style-type: lower-alpha&quot;&gt;<br /> &lt;li&gt;item 1&lt;/li&gt;<br /> &lt;li&gt;item 2&lt;/li&gt;<br /> &lt;/ul&gt;<br /> &lt;ul style=&quot;list-style-type: upper-alpha&quot;&gt;<br /> &lt;li&gt;item 1&lt;/li&gt;<br /> &lt;li&gt;item 2&lt;/li&gt;<br /> &lt;/ul&gt;<br /> &lt;/td&gt;<br /> &lt;td&gt;<br /> &lt;ul style=&quot;list-style-type: lower-latin&quot;&gt;<br /> &lt;li&gt;item 1&lt;/li&gt;<br /> &lt;li&gt;item 2&lt;/li&gt;<br /> &lt;/ul&gt;<br /> &lt;ul style=&quot;list-style-type: upper-latin&quot;&gt;<br /> &lt;li&gt;item 1&lt;/li&gt;<br /> &lt;li&gt;item 2&lt;/li&gt;<br /> &lt;/ul&gt;<br /> &lt;/td&gt;<br /> &lt;/tr&gt;<br /> &lt;tr&gt;<br /> &lt;td&gt;<br /> &lt;ul style=&quot;list-style-type: disc&quot;&gt;<br /> &lt;li&gt;item 1&lt;/li&gt;<br /> &lt;li&gt;item 2&lt;/li&gt;<br /> &lt;/ul&gt;<br /> &lt;ul style=&quot;list-style-type: hebrew&quot;&gt;<br /> &lt;li&gt;item 1&lt;/li&gt;<br /> &lt;li&gt;item 2&lt;/li&gt;<br /> &lt;/ul&gt;<br /> &lt;ul style=&quot;list-style-type: Armenian&quot;&gt;<br /> &lt;li&gt;item 1&lt;/li&gt;<br /> &lt;li&gt;item 2&lt;/li&gt;<br /> &lt;/ul&gt;<br /> &lt;ul style=&quot;list-style-type: Georgian&quot;&gt;<br /> &lt;li&gt;item 1&lt;/li&gt;<br /> &lt;li&gt;item 2&lt;/li&gt;<br /> &lt;/ul&gt;<br /> &lt;/td&gt;<br /> &lt;td&gt;<br /> &lt;ul style=&quot;list-style-type: cjk-ideographic&quot;&gt;<br /> &lt;li&gt;item 1&lt;/li&gt;<br /> &lt;li&gt;item 2&lt;/li&gt;<br /> &lt;/ul&gt;<br /> &lt;ul style=&quot;list-style-type: hiragana&quot;&gt;<br /> &lt;li&gt;item 1&lt;/li&gt;<br /> &lt;li&gt;item 2&lt;/li&gt;<br /> &lt;/ul&gt;<br /> &lt;ul style=&quot;list-style-type: katakana&quot;&gt;<br /> &lt;li&gt;item 1&lt;/li&gt;<br /> &lt;li&gt;item 2&lt;/li&gt;<br /> &lt;/ul&gt;<br /> &lt;ul style=&quot;list-style-type: hiragana-iroha&quot;&gt;<br /> &lt;li&gt;item 1&lt;/li&gt;<br /> &lt;li&gt;item 2&lt;/li&gt;<br /> &lt;/ul&gt;<br /> &lt;ul style=&quot;list-style-type: katakana-irohana&quot;&gt;<br /> &lt;li&gt;item 1&lt;/li&gt;<br /> &lt;li&gt;item 2&lt;/li&gt;<br /> &lt;/ul&gt;<br /> &lt;/td&gt;<br /> &lt;td&gt;<br /> &lt;ul style=&quot;list-style-type: none&quot;&gt;<br /> &lt;li&gt;item 1&lt;/li&gt;<br /> &lt;li&gt;item 2&lt;/li&gt;<br /> &lt;/ul&gt;<br /> &lt;/td&gt;<br /> &lt;/tr&gt;<br /> &lt;/table&gt;<br /> &lt;/form&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt> css list-style-type 2 1 4/21/2014 7:29:13 PM 10/24/2015 10:32:52 AM Edit | Details | Delete
1 list-style-image list-style-image The list-style-image property allows to define a leading image that is rendered for each list item.<br /><br />The possible values are.<br /><table><br /><tr><td>&lt;<i>url</i>&gt;</td><td>e.g. url("fellas.jpg")</td></tr><tr><td><code>none</code></td><td></td></tr></table><br /><snpt>&lt;html&gt;<br />&lt;head&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br /> &lt;ul style=&quot;list-style-image: url(&quot; bullet-1.png &quot;)&quot;&gt;<br /> &lt;li&gt;item 1&lt;/li&gt;<br /> &lt;li&gt;item 2&lt;/li&gt;<br /> &lt;/ul&gt;<br /> &lt;ul style=&quot;list-style-image: url(&quot; bullet-2.png &quot;)&quot;&gt;<br /> &lt;li&gt;item 1&lt;/li&gt;<br /> &lt;li&gt;item 2&lt;/li&gt;<br /> &lt;/ul&gt;<br /> &lt;ul style=&quot;list-style-image: url(&quot; bullet-3.png &quot;)&quot;&gt;<br /> &lt;li&gt;item 1&lt;/li&gt;<br /> &lt;li&gt;item 2&lt;/li&gt;<br /> &lt;/ul&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt> css list-style-image 3 1 4/21/2014 7:30:02 PM 10/24/2015 10:32:52 AM Edit | Details | Delete
1 list-style-position list-style-position The list-style-position property allows to define the position (inside or outside of the list item box) for the leading symbol/ image that is rendered for each list item.<br /><br />The possible values are.<br /><table><br /><tr><td><code>inside</code></td><td></td></tr><tr><td><code>outside </code></td><td> (default value)</td></tr></table><br /><snpt>&lt;html&gt;<br />&lt;head&gt;<br /> &lt;style&gt;<br /> body *{ border: 1px solid #000000}<br /> &lt;/style&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br /> &lt;ul style=&quot;list-style-type: cicle; list-style-position: inside&quot;&gt;<br /> &lt;li&gt;item 1&lt;/li&gt;<br /> &lt;li&gt;item 2&lt;/li&gt;<br /> &lt;/ul&gt;<br /> &lt;ul style=&quot;list-style-type: square; list-style-position: outside&quot;&gt;<br /> &lt;li&gt;item 1&lt;/li&gt;<br /> &lt;li&gt;item 2&lt;/li&gt;<br /> &lt;/ul&gt;<br /> &lt;ul style=&quot;list-style-image: url(&#39;bullet-1.png&#39;); list-style-position: inside&quot;&gt;<br /> &lt;li&gt;item 1&lt;/li&gt;<br /> &lt;li&gt;item 2&lt;/li&gt;<br /> &lt;/ul&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt> css list-style-position 4 1 4/21/2014 7:31:34 PM 10/24/2015 10:32:52 AM Edit | Details | Delete
1 list-style list-style The list-style property is the shorthand to define the style of the list item.<br /><br />The possible values are.<br /><br />&lt;list-style-type&gt; &lt;list-style-position&gt; &lt;list-style-image&gt;<br /><br />Note:<br /><note>If the image file is missing, the leading symbol will be rendered.</note> css list-style 5 1 4/21/2014 7:32:43 PM 10/24/2015 10:32:52 AM Edit | Details | Delete
1 css Contents css Contents CSS allows you to automatically generate content that doesn't belong to the document tree. css Contents 1 1 4/21/2014 7:35:04 PM 10/24/2015 10:30:40 AM Edit | Details | Delete
1 Pseudo-elements Pseudo-elements We can add the generated content before or after an element is generated. Pseudo-elements allows to specify when to automatically generate content.<br /><br />The pseudo-elements are<br /><table><br /><tr><td><i>E</i><code>:before</code></td><td>generate content before the <i>E</i> element</td></tr><tr><td><i>E</i><code>:before</code></td><td>generate content after the <i>E</i> element</td></tr></table> css Pseudo-elements 2 1 4/21/2014 7:36:11 PM 10/24/2015 10:30:40 AM Edit | Details | Delete
1 content content The content property allows to specify what content will be automatically generated.<br /><br />The possible values are<br /><table><br /><tr><td><i>&lt;string&gt;</i></td><td>to insert any text</td></tr><tr><td><i>&lt;url&gt;</i></td><td>to insert an internet resource e.g: url(fellas.jpg)</td></tr><tr><td><i>&lt;counter&gt</i>;</td><td>to insert a counter for a list</td></tr><tr><td><i>attr(<b>A</b>)</i></td><td>to insert the value of the <i><b>A</b></i> attribute</td></tr><tr><td><code>open-quote</code> | <code>close-quote</code> | <code>no-open-quote</code> | <code>no-close-quote</code></td><td></td></tr></table><br /><br />Notes:<br /><note>- The default value of the &#39;content&#39; property is empty<br />- To insert a forced new line, &quot;\A&quot; escape sequence is used.(similar to &lt;br&gt; element)</note><br /><br /><snpt>&lt;html&gt;<br />&lt;head&gt;<br /> &lt;style&gt;<br /> :before{content: &quot;&lt;&gt;&quot;; color: red}<br /> :after{content: &quot;&lt;/&gt;&quot;; color: red}<br /> table, form {display: block}<br /> &lt;/style&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br /> &lt;h2&gt;This is a Header 2&lt;/h2&gt;<br /> &lt;p&gt;This is a paragraph. &lt;i&gt;Italic text&lt;/i&gt;<br /> &lt;blockquote&gt;This is a blockquote&lt;/blockquote&gt;<br /> &lt;ul style=&quot;list-style-type: disc&quot;&gt;<br /> &lt;li&gt;item 1&lt;/li&gt;<br /> &lt;li&gt;item 2&lt;/li&gt;<br /> &lt;/ul&gt;<br /> &lt;form&gt;<br /> &lt;input type=&quot;text&quot;&gt;<br /> &lt;input type=&quot;button&quot; value=&quot;Submit&quot;&gt;<br /> &lt;/form&gt;<br /><br /> &lt;table&gt;<br /> &lt;tr&gt;&lt;td&gt;data 1&lt;/td&gt;&lt;td&gt;data 2&lt;/td&gt;&lt;/tr&gt;<br /> &lt;tr&gt;&lt;td&gt;data 3&lt;/td&gt;&lt;td&gt;data 4&lt;/td&gt;&lt;/tr&gt;<br /> &lt;/table&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt><br /><snpt><html><br />&lt;head&gt;<br /> &lt;style&gt;<br /> h2:before{content: &quot;&lt;h2&gt;&quot;; color: red}<br /> h2:after{content: &quot;&lt;/h2&gt;&quot;; color: red}<br /> <br /> p:before{content: &quot;&lt;p&gt;&quot;; color: blue}<br /> p:after{content: &quot;&lt;/p&gt;&quot;; color: blue}<br /> <br /> blockquote:before{content: &quot;&lt;blockquote&gt;&quot;; color: magenta}<br /> blockquote:after{content: &quot;&lt;/blockquote&gt;&quot;; color: magenta}<br /> <br /> ul:before{content: &quot;&lt;ul&gt;&quot;; color: yellow}<br /> ul:after{content: &quot;&lt;/ul&gt;&quot;; color: yellow}<br /> <br /> form:before{content: &quot;&lt;form&gt;&quot;; color: cyan}<br /> form:after{content: &quot;&lt;/form&gt;&quot;; color: cyan}<br /> <br /> input:before{content: &quot;&lt;input type=&quot;attr(type)&quot;&gt;&quot;; color: lime}<br /> input:after{content: &quot;&lt;/input&gt;&quot;; color: lime}<br /> <br /> span:before{content: url(&#39;bullet-1.png&#39;);}<br /> span:after{content: url(&#39;bullet-2.png&#39;);}<br /> &lt;/style&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br /> &lt;h2&gt;This is a Header 2&lt;/h2&gt;<br /> &lt;p&gt;This is a paragraph. &lt;i&gt;Italic text&lt;/i&gt;<br /> &lt;blockquote&gt;This is a blockquote&lt;/blockquote&gt;<br /> &lt;ul style=&quot;list-style-type: disc&quot;&gt;<br /> &lt;li&gt;item 1&lt;/li&gt;<br /> &lt;li&gt;item 2&lt;/li&gt;<br /> &lt;/ul&gt;<br /> &lt;form&gt;<br /> &lt;input type=&quot;text&quot;&gt;<br /> &lt;input type=&quot;button&quot; value=&quot;Submit&quot;&gt;<br /> &lt;/form&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt> content 3 1 4/21/2014 7:37:35 PM 10/24/2015 10:30:40 AM Edit | Details | Delete
1 quotation marks quotation marks CSS allows to define quotation marks for any element. The following two steps are required to achive this.<br /><br />i. The quotation marks must be defined. To define a set of quotation marks, use a selector and the &#39;quotes&#39; property.<br /><br />The possible values are none or a space-delimited list of pairs.<br /><i>&lt;string1&gt;</i> <i>&lt;string2&gt;</i> to define each level of quotation.<br /><br /><i>&lt;string1&gt;</i> - for open quoatation mark<br /><i>&lt;string2&gt;</i> - for close quotation mark<br /><br />ii. The quotation marks can be inserted using the :before or :after pseudo-elements with the &#39;content&#39; property set to one of these four values.<br /><br />open-quote | close-quote | no-open-quote | no-close-quote<br /><br />Note:<br />- To define a string, you can use single (') or double (") quotation marks<br />- Quotation mark can be attached to any element<br />- Quotation mark can be specified to each element<br />- We can use escape sequences to define quotation mark characters<br /><table><br /><tr><td>"\00AB"</td><td><<</td></tr><tr><td>"\00BB"</td><td>>></td></tr><tr><td>"\2018"</td><td>'</td></tr><tr><td>"\2019"</td><td>'</td></tr><tr><td>"\201C"</td><td>"</td></tr><tr><td>"\201D"</td><td>"</td></tr></table><br /><snpt>&lt;html&gt;<br />&lt;head&gt;<br /> &lt;style&gt;<br /> p{quotes: &#39;&quot;&#39; &#39;&quot;&#39;; color:red;}<br /> p&gt;p{quotes: &quot;&#39;&quot; &quot;&#39;&quot;; color:blue;}<br /> p&gt;p&gt;p{quotes: &quot;&lt;&quot; &quot;&gt;&quot;; color:purple;}<br /> p:before{content: open-quote;}<br /> p:after{content: close-quote;}<br /> &lt;/style&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br /> &lt;p&gt;This is first level paragraph<br /> &lt;p&gt;This is second level paragraph<br /> &lt;p&gt;This is third level paragraph&lt;/p&gt;This is second level paragraph&lt;/p&gt;This is first level paragraph&lt;/p&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt> quotation marks 4 1 4/21/2014 7:38:55 PM 10/24/2015 10:30:40 AM Edit | Details | Delete
1 Font Variant Font Variant The <code>font-variant</code> property is used to specify the font variant the browser uses to render lowercase character. The values of <code>font-variant</code> are. <table> <tr><td><code>normal</code></td><td></td></tr><tr><td><code>small-caps</code></td><td>Similar to uppercase characters but smaller in size</td></tr><tr><td><code>inherit</code></td><td>inherited from the parent</td></tr></table> <t1>example</t1> <pre> font-variant : normal font-variant : small-caps</pre> <snpt>&lt;html&gt; &lt;head&gt; &lt;style&gt; p {font-style:normal;} div {font-style:small-caps} &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;p&gt;This is a paragraph text&lt;/p&gt; &lt;div&gt;This is a text inside div&lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</snpt> <outi><html><head> <style> p {font-style:normal;} div {font-style:small-caps} </style></head><body> <p>This is a paragraph text</p> <div>This is a text inside div</div></body></html></outi> Font Variant 4 1 4/21/2014 7:41:04 PM 12/16/2018 8:00:23 PM Edit | Details | Delete
1 Float Float <tit>Floating Boxes</tit> <p>The normal flow of element rendering can be changed if there are floating objects. The floating objects can be defined using HTML code with align attribute for the HTML element that accept it or by css code using the float property.</p> <p>The possible values are</p> <table> <tr><th>Properties</th><th>Description</th></tr><tr><td><code>none</code></td><td>generates a box that is not floated.</td></tr><tr><td><code>right</code></td><td>generates a box that is floated to the right</td></tr><tr><td><code>left</code></td><td>generates a box that is floated to the left</td></tr></table> <t1>Example</t1> <pre>img{ float: right } /*makes all images to float on right*/ ul{ float: left } /*makes all unordered lists to float on left*/</pre> <t1>How it Works</t1> <p>When float object is met, the following things happen.</p> <p>-The normal flow is stopped, and the browser puts a virtual marker to indicate the point where the normal flow was stopped -The floating object is rendered in the specified position (right or left), starting on the next line with the default or specified dimensions -The normal flow continues from the virtual marker, and all the remaining objects are rendered using all the empty space left after rendering the floating object</p> <snpt>&lt;html&gt; &lt;head&gt; &lt;/head&gt; &lt;body&gt; &lt;div&gt; &lt;img url=&quot;star.png&quot; style=&quot;float:left&quot;&gt; &lt;ul style=&quot;float:right&quot;&gt; &lt;li&gt;item 1 &lt;li&gt;item 2 &lt;li&gt;item 3 &lt;/ul&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</snpt> <tit>Stack of floating Boxes</tit> <p>If many adjacent objects are floated in the same direction, a stack of floating objects can appear. The floating objects are rendered on the same line one after another.</p> css Float 4 1 4/22/2014 6:48:38 PM 12/16/2018 8:53:34 PM Edit | Details | Delete
1 Clear clear The <code>clear</code> property can be attached to block level objects to render them in a single-line box. No content (including the floating objects) is added on the left side or on the right side. The possible values are <table> <tr><th>Properties</th><th>Description</th></tr><tr><td><code>none</code></td><td></td></tr><tr><td><code>left</code></td><td>the left side of the element will be cleared</td></tr><tr><td><code>right</code></td><td>the right side of the element will be cleared</td></tr><tr><td><code>both</code></td><td>the both sides of the elements will be cleared</td></tr></table> <t1>Example</t1> <eg>&lt;h2&gt;heading&lt;h2&gt;</eg> <snpt>&lt;h2 style=&quot;clear: left;&quot;&gt;heading 2&lt;/h2&gt;</snpt> <t1>Note</t1> <note>The top edge of the &lt;h2&gt; box is moved below the bottom edge of the &lt;ol&gt; box The right side of the &lt;h2&gt; element is not yet cleared The &#39;clear&#39; property can be attached to a floating object to render it on a single line.</note> <snpt>&lt;html&gt; &lt;head&gt; &lt;style&gt; span{border:1px solid #000000} &lt;/style&gt; &lt;/head&gt; &lt;body&gt; Without Clear &lt;div&gt; &lt;img url=&quot;star.png&quot; style=&quot;float:left&quot;&gt; &lt;span&gt;span text1&lt;/span&gt; &lt;img url=&quot;star.png&quot; style=&quot;float:right&quot;&gt; &lt;span&gt;span text2&lt;/span&gt; &lt;span&gt;span text3&lt;/span&gt; &lt;/div&gt; Clear floating objects &lt;div&gt; &lt;img url=&quot;star.png&quot; style=&quot;float:left&quot;&gt; &lt;span style=&quot;clear:left&quot;&gt;span text1&lt;/span&gt; &lt;img url=&quot;star.png&quot; style=&quot;float:right&quot;&gt; &lt;span style=&quot;clear:right&quot;&gt;span text2&lt;/span&gt; &lt;img url=&quot;star.png&quot; style=&quot;float:left&quot;&gt; &lt;img url=&quot;star.png&quot; style=&quot;float:right&quot;&gt; &lt;span&gt; style=&quot;clear: both&quot;&gt;span text3&lt;/span&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</snpt> css clear 6 1 4/22/2014 6:51:57 PM 12/16/2018 8:24:23 PM Edit | Details | Delete
1 Positioning elements Positioning elements <tit>Positioning elements</tit> <p>Css allows to define exactly where an element should be rendered. </p> <p>The possible values are. </p> <table> <tr><th>Properties</th><th>Description</th></tr><tr><td><code>static</code></td><td>corresponding to the normal flow (default)</td></tr><tr><td><code>relative</code></td><td>the element participates in normal flow but rendered with an offset relative to its normal position. After this translation, the element can overlap other elements</td></tr><tr><td><code>absolute</code></td><td>The element is eliminated from the normal flow and is rendered with an offset relative to the first positioned parent element</td></tr><tr><td><code>fixed</code></td><td>The element is eliminated from the normal flow and is rendered with an offset relative to the view-port. Its position remains the same when the content of the page is scrolled using the navigation bars.</td></tr></table> Notes <note>- The element is positioned when the <code>position</code> property is set to any value other than static - The edges of the box corresponding to the positioned element are defined by the following properties</note> <table> <tr><th>Properties</th><th>Description</th></tr><tr><td><code>top</code></td><td></td></tr><tr><td><code>right</code></td><td></td></tr><tr><td><code>bottom</code></td><td></td></tr><tr><td><code>left</code></td><td></td></tr></table> <p> The possible values are </p> <table> <tr><th>Properties</th><th>Description</th></tr><tr><td>&lt;<i>length</i>&gt;</td><td></td></tr><tr><td>&lt;<i>percentage</i>&gt;</td><td></td></tr><tr><td><code>auto</code></td><td></td></tr><tr><td><code>inherit</code></td><td></td></tr></table> <tit>Relative Positioning</tit> <p>Defines a relative position for an element. </p> <p>position: relative -> And set the values for top, right, bottom and left properties. </p> <snpt>&lt;html&gt; &lt;head&gt; &lt;style&gt; span{position:relative; top:20px} i{position:relative; top:-10px} down{position:relative; top:-20px} &lt;/style&gt; &lt;/head&gt; &lt;body&gt; This is an &lt;span&gt;example&lt;/span&gt; for &lt;i&gt;relative&lt;/i&gt; &lt;blockquote class=&quot;down&quot;&gt;positioning&lt;/blockquote&gt;. &lt;/body&gt; &lt;/html&gt;</snpt> <tit>Absolute Positioning</tit> <p>Defines a absolute position for an element. </p> <p>position: absolute -> And set the values for top, right, bottom and left properties. </p> <snpt>&lt;html&gt; &lt;head&gt; &lt;style&gt; span i blockquote{border: 1px solid #000000} span { position: absolute; top: 30px;} i { position: absolute; top: 80px;} blockquote { position: absolute; top: 140px;} &lt;/style&gt; &lt;/head&gt; &lt;body&gt; This is an &lt;span&gt;example&lt;/span&gt; for &lt;i&gt;absolute&lt;/i&gt; &lt;blockquote class=&quot;down&quot;&gt;positioning&lt;/blockquote&gt;. &lt;/body&gt; &lt;/html&gt;</snpt> <tit>Fixed Positioning</tit> <p>Defines a fixed position for an element.</p> <p>position: fixed -> And set the values for top, right, bottom and left properties. </p> <snpt>&lt;html&gt; &lt;head&gt; &lt;/head&gt; &lt;body&gt; &lt;div style=&quot;height: 500px&quot;&gt; &lt;img src=&quot;logo.png&quot; style=&quot;position:fixed;top:50px; left:50px;&quot;&gt; content &lt;br&gt; content &lt;br&gt; content &lt;br&gt; content &lt;br&gt; content &lt;br&gt; content &lt;br&gt; content &lt;br&gt; content &lt;br&gt; content &lt;br&gt; content &lt;br&gt; content &lt;br&gt; content &lt;br&gt; content &lt;br&gt; content &lt;br&gt; content &lt;br&gt; content &lt;br&gt; content &lt;br&gt; content &lt;br&gt; content &lt;br&gt; content &lt;br&gt; content &lt;br&gt; content &lt;br&gt; content &lt;br&gt; content &lt;br&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</snpt> Positioning elements 7 1 4/22/2014 6:54:28 PM 12/16/2018 8:22:34 PM Edit | Details | Delete
1 Relative Positioning Relative Positioning Defines a relative position for an element.<br /><br />position: relative -> And set the values for top, right, bottom and left properties.<br /><br /><snpt>&lt;html&gt;<br />&lt;head&gt;<br /> &lt;style&gt;<br /> span{position:relative; top:20px}<br /> i{position:relative; top:-10px}<br /> down{position:relative; top:-20px}<br /> &lt;/style&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br /> This is an &lt;span&gt;example&lt;/span&gt; for &lt;i&gt;relative&lt;/i&gt;<br /> &lt;blockquote class=&quot;down&quot;&gt;positioning&lt;/blockquote&gt;.<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt> Relative Positioning 8 1 4/22/2014 6:55:40 PM 10/24/2015 10:45:08 AM Edit | Details | Delete
1 Absolute Positioning Absolute Positioning Defines a absolute position for an element.<br /><br />position: absolute -> And set the values for top, right, bottom and left properties.<br /><br /><snpt>&lt;html&gt;<br />&lt;head&gt;<br /> &lt;style&gt;<br /> span i blockquote{border: 1px solid #000000}<br /> span { position: absolute; top: 30px;}<br /> i { position: absolute; top: 80px;}<br /> blockquote { position: absolute; top: 140px;}<br /> &lt;/style&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br /> This is an &lt;span&gt;example&lt;/span&gt; for &lt;i&gt;absolute&lt;/i&gt;<br /> &lt;blockquote class=&quot;down&quot;&gt;positioning&lt;/blockquote&gt;.<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt> Absolute Positioning 9 1 4/22/2014 6:56:42 PM 10/24/2015 10:45:08 AM Edit | Details | Delete
1 Fixed Positioning Fixed Positioning Defines a fixed position for an element.<br /><br />position: fixed -> And set the values for top, right, bottom and left properties.<br /><br /><snpt>&lt;html&gt;<br />&lt;head&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br /> &lt;div style=&quot;height: 500px&quot;&gt;<br /> &lt;img src=&quot;logo.png&quot; style=&quot;position:fixed;top:50px; left:50px;&quot;&gt; content<br /> &lt;br&gt; content<br /> &lt;br&gt; content<br /> &lt;br&gt; content<br /> &lt;br&gt; content<br /> &lt;br&gt; content<br /> &lt;br&gt; content<br /> &lt;br&gt; content<br /> &lt;br&gt; content<br /> &lt;br&gt; content<br /> &lt;br&gt; content<br /> &lt;br&gt; content<br /> &lt;br&gt; content<br /> &lt;br&gt; content<br /> &lt;br&gt; content<br /> &lt;br&gt; content<br /> &lt;br&gt; content<br /> &lt;br&gt; content<br /> &lt;br&gt; content<br /> &lt;br&gt; content<br /> &lt;br&gt; content<br /> &lt;br&gt; content<br /> &lt;br&gt; content<br /> &lt;br&gt; content<br /> &lt;br&gt;<br /> &lt;/div&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt> Fixed Positioning 10 1 4/22/2014 6:57:51 PM 10/24/2015 10:45:08 AM Edit | Details | Delete
1 Z Index -stack of layers XXX Z Index -stack of layers stack of layers Z Index -stack of layers 11 1 4/22/2014 6:58:36 PM 12/16/2018 8:14:45 PM Edit | Details | Delete
1 Stack of floating boxes Stack of floating boxes If many adjacent objects are floated in the same direction, a stack of floating objects can appear. The floating objects are rendered on the same line one after another Stack of floating boxes 5 1 4/22/2014 6:59:41 PM 12/16/2018 8:54:01 PM Edit | Details | Delete
1 About Html5 About Html5 HTML is the markup language used to describe content, or data, on the World Wide Web. <br /><br />HTML5 is the latest iteration of that markup language, and includes new features, improvements to existing features, and scripting-based APIs.<br /><br />Html5 transform the current markup structure of <code>&lt;div&gt;</code>s into a more semantic system using new HTML5 structural elements like <code>&lt;nav&gt;</code>, <code>&lt;header&gt;</code>, <code>&lt;footer&gt;</code>, <code>&lt;aside&gt;</code>, and <code>&lt;article&gt;</code>. About Html5 1 1 10/2/2015 9:33:27 AM 1/26/2017 10:57:24 AM Edit | Details | Delete
1 The Doctype The Doctype The Document Type Declaration, or doctype is simply a way to tell the browser—or any other parsers—what type of document they’re looking at.<br /><br />In the case of HTML files, it means the specific version and flavor of HTML. <br /><br />The <c>doctype</c> should always be the first item at the top of all your HTML files. <br /><br />For Html5 doctype declaration is given below.<br /><pre>&lt;!doctype html&gt;</pre><br /><br />In the past, the doctype declaration was an ugly and hard-to-remember mess. <br /><br />For XHTML 1.0 Strict:<br /><pre>&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;&gt;</pre><br /><br />For HTML4 Transitional:<br /><pre>&lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot; &quot;http://www.w3.org/TR/html4/loose.dtd&quot;&gt;</pre> Html5 Doctype 1 1 10/2/2015 9:37:24 AM 2/18/2017 1:09:52 PM Edit | Details | Delete
1 The html Element The html Element In XHTML-based syntax, you’d be required to include an xmlns attribute. In HTML5, this is no longer needed, and even the lang attribute is unnecessary for the document to validate or function correctly.<br /><br /><snpt>&lt;!doctype html&gt;<br />&lt;html lang=&quot;en&quot;&gt;<br />&lt;/html&gt;<br /></snpt> Html5 html Element 1 1 10/2/2015 9:40:11 AM 2/18/2017 1:10:36 PM Edit | Details | Delete
1 The head Element The head Element The first line inside the head is the one that defines the character encoding for the document. <br /><br />HTML5 improves on this by reducing the character encoding <code>&lt;meta&gt;</code> tag element in the simplified form:<br /><pre>&lt;meta charset=&quot;utf-8&quot;&gt;</pre><br /><br />This is another element that’s been simplified. Here’s how you used to do this:<br /><pre>&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot;&gt;</pre> Html5 head Element 1 1 10/2/2015 9:41:30 AM 2/18/2017 1:11:45 PM Edit | Details | Delete
1 <header> <header> Many websites have a title and a tagline or subtitle. So for making the main heading and subtitle into one logical unit, the main heading and subtitle can be grouped in the<br />new <c>&lt;hgroup&gt;</c> element:<br /><br /><snpt>&lt;header&gt;<br />&lt;a href=&quot;/&quot;&gt;&lt;img src=logo.png alt=&quot;home&quot;&gt;&lt;/a&gt;<br />&lt;hgroup&gt;<br />&lt;h1&gt;My interesting blog&lt;/h1&gt;<br />&lt;h2&gt;Tedium, dullness and monotony&lt;/h2&gt;<br />&lt;/hgroup&gt;<br />&lt;/header&gt;</snpt><br /><br />The header can also contain navigation. This can be very useful for site-wide navigation, especially on template-driven sites where the whole of the <header> element could come from a template file.<br /><br />There can be multiple <c>&lt;header&gt;</c>s in a page. Html5 header Element 1 1 10/2/2015 9:42:39 AM 2/18/2017 1:12:54 PM Edit | Details | Delete
1 <nav> <nav> The <code>&lt;nav&gt;</code> element is designed to mark up navigation. Navigation<br />is defined as being links around a page.<br /><br /><pre>&lt;nav&gt;<br /> &lt;p&gt;&lt;a href=&quot;/&quot;&gt;Home&lt;/a&gt;&lt;/p&gt;<br /> &lt;p&gt;&lt;a href=&quot;/about&quot;&gt;About&lt;/a&gt;&lt;/p&gt;<br />&lt;/nav&gt;</pre><br /><br />You can include headings for navigation, too:<br /><br /><pre>&lt;nav&gt;<br /> &lt;h2&gt;Main navigation&lt;/h2&gt;<br /> &lt;ul&gt;<br /> &lt;li&gt;&lt;a href=”/about”&gt;About me&lt;/a&gt;&lt;/li&gt;<br /> &lt;li&gt;&lt;a href=”/news”&gt;News&lt;/a&gt;&lt;/li&gt;<br /> &lt;/ul&gt;<br />&lt;/nav&gt;</pre> Html5 <nav> Element 1 1 10/2/2015 9:43:57 AM 10/2/2015 9:43:57 AM Edit | Details | Delete
1 <aside> <aside>-Grouping <nav> & other elements in sidebar Many sites have a sidebar that includes multiple blocks of navigation and other non-navigation content.<br /><br />The <code>&lt;nav&gt;</code> elements contained in the new <code>&lt;aside&gt;</code> element. It can be used for typographical effects like pull quotes or sidebars, for advertising, for groups of nav elements, and for other content that is considered separate from the main content of the page.<br /><br /><pre>&lt;aside&gt;<br /> &lt;nav&gt;<br /> &lt;h2&gt;Pages&lt;/h2&gt;<br /> &lt;ul&gt; .. &lt;/ul&gt;<br /> &lt;/nav&gt;<br /> ...<br /> &lt;nav&gt;<br /> &lt;h2&gt;Recent comments&lt;/h2&gt;<br /> &lt;ul&gt; ... &lt;/ul&gt;<br /> &lt;/nav&gt;<br />&lt;/aside&gt;</pre><br /> Html5 <aside> Element 1 1 10/2/2015 9:55:57 AM 10/2/2015 9:55:57 AM Edit | Details | Delete
1 <aside> <aside>-Grouping <nav> & other elements in sidebar Many sites have a sidebar that includes multiple blocks of navigation and other non-navigation content.<br /><br />The <code>&lt;nav&gt;</code> elements contained in the new <code>&lt;aside&gt;</code> element. It can be used for typographical effects like pull quotes or sidebars, for advertising, for groups of nav elements, and for other content that is considered separate from the main content of the page.<br /><br /><pre>&lt;aside&gt;<br /> &lt;nav&gt;<br /> &lt;h2&gt;Pages&lt;/h2&gt;<br /> &lt;ul&gt; .. &lt;/ul&gt;<br /> &lt;/nav&gt;<br /> ...<br /> &lt;nav&gt;<br /> &lt;h2&gt;Recent comments&lt;/h2&gt;<br /> &lt;ul&gt; ... &lt;/ul&gt;<br /> &lt;/nav&gt;<br />&lt;/aside&gt;</pre><br /> Html5 <aside> Element 1 1 10/2/2015 9:56:58 AM 2/27/2017 4:17:56 PM Edit | Details | Delete
1 <section> <section> The section element represents a generic section of a document or application. A section, in this context, is a thematic grouping of content, typically with a heading.<br /><br />It further explains that a section shouldn’t be used as a generic container that exists for styling or scripting purposes only. If you’re unable to use section as a generic container—for example, in order to achieve your desired CSS layout—then what should you use? Our old friend, the div—which is semantically meaningless.<br /><br />Some examples of acceptable uses for section elements include:<br /><br />■ individual sections of a tabbed interface<br />■ segments of an “About” page; for example, a company’s “About” page might<br />include sections on the company’s history, its mission statement, and its team<br />■ different parts of a lengthy “terms of service” page<br />■ various sections of an online news site; for example, articles could be grouped<br />into sections covering sports, world affairs, and economic news Html5 <section> Element 1 1 10/2/2015 9:59:29 AM 10/2/2015 9:59:29 AM Edit | Details | Delete
1 <footer> <footer> The <code>&lt;footer&gt;</code> element is defined in the spec as representing "a footer for its nearest ancestor sectioning content or sectioning root element." <br /><br />"Sectioning content" includes article, aside, nav, section, and "sectioning root elements" are blockquote, body, details, fieldset, figure, td.<br /><br />footer holds copyright data, which we’re wrapping in a <code>&lt;small&gt;</code> element, too. <code>&lt;small&gt;</code> has been redefined in HTML5. Html5 <footer> Element 1 1 10/2/2015 10:03:53 AM 10/2/2015 10:04:57 AM Edit | Details | Delete
1 <article> <article> The main content of this blog’s home page contains a few blog posts. We wrap each one up in an <article> element. <article> is specified thus: "The article element represents a component of a page that consists of a self-contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable, e.g., in syndication."<br /><br />The heading element should go in to the element.<br /><br /><pre>&lt;article&gt;<br /> &lt;h1&gt;My article&lt;/h1&gt;<br /> &lt;p&gt;Blah blah&lt;/p&gt;<br />&lt;/article&gt;</pre> Html5 <article> Element 1 1 10/2/2015 10:07:29 AM 10/2/2015 10:07:29 AM Edit | Details | Delete
1 boolean attributes boolean attributes In XHTML, all attributes have to have values, even if those values are redundant.<br /><br />For example, you’d often see markup like this:<br /><pre>&lt;input type=&quot;text&quot; disabled=&quot;disabled&quot; /&gt;</pre><br /><br />In HTML5, attributes that are either "on" or "off" (called Boolean attributes) can simply be specified with no value. So, the above input element could now be written as follows:<br /><pre>&lt;input type=&quot;text&quot; disabled&gt;</pre> Html5 boolean attributes 1 1 10/2/2015 10:10:28 AM 10/2/2015 10:10:28 AM Edit | Details | Delete
1 Closing tags in Html5 Closing tags in Html5 In XHTML-based syntax, all elements need to be closed—either with a corresponding closing tag (like </html>) or in the case of void elements, a forward slash at the end of the tag. The latter are elements that can’t contain child elements (such as <c>input</c>, <c>img</c>, or <c>link</c>).<br /><br />You can still use that style of syntax in HTML5—and you might prefer it for consistency and maintainability reasons—but it’s no longer required to add a trailing slash to void elements for validation. Continuing with the theme of "cutting the fat," HTML5 allows you to omit the trailing slash from such elements, arguably leaving your markup cleaner and less cluttered.<br /><br />It’s worth noting that in HTML5, most elements that can contain nested elements—but simply happen to be empty—still need to be paired with a corresponding closing tag. There are exceptions to this rule, but it’s simpler to assume that it’s universal. Html5 closing tags 1 1 10/2/2015 10:19:13 AM 2/27/2017 4:16:41 PM Edit | Details | Delete
1 About Offline Web App About Offline Web App HTML5 defines a special cache, commonly called "appcache" or application cache, that allows you to instruct the browser to cache certain resources—like images, CSS, JS, and others in a way that makes them available to the application even if the user’s browser is offline.<br /><br />The application cache can store your entire website offline: all the <b>JavaScript</b>, <b>HTML</b>, and <b>CSS</b>, as well as all your <b>images</b> and <b>resources</b>.<br /><br />The application is automatically updated every time the user visits your page while online. If even one byte of data has changed in one of your files, the application cache will reload that file.<br /><br /><tit>Browser support for offline web application</tit><br />The Offline Web Applications spec is supported in:<br /> Safari 4+<br /> Chrome 5+<br /> Firefox 3.5+<br /> Opera 10.6+<br /> iOS (Mobile Safari) 2.1+<br /> Android 2.0+<br /><br />It is currently unsupported in all versions of IE.<br /><br /><tit>Test browser support for offline web application</tit><br />To test if the browser supports application cache functionality, use the following feature-detect:<br /><pre>var appcache_support = !!window.applicationCache;</pre><br /> html5 Offline Web App 1 1 10/2/2015 11:34:53 AM 2/20/2017 10:26:54 AM Edit | Details | Delete
1 Setting Up Your Site to Work Offline Setting Up Your Site to Work Offline Follow these three steps for making an Offline Web Application:<br /><br />1. Create a cache.manifest file.<br />2. Ensure that the manifest file is served with the correct content type.<br />3. Point all your HTML files to the cache manifest.<br /><br /><tit>The cache.manifest File</tit><br />The <b>cache.manifest</b> file is a text file that adheres to a certain format. There should be only one <b>cache.manifest</b> file for the entire application.<br /><br />The manifest tells the browser when and what to get from offline, from the Web, or to fall back onto if assets are missing. Once the manifest is loaded or updated, it triggers an update on the applicationCache object.<br /><br />Here’s an example of a simple cache.manifest file:<br /><br /><snpt>CACHE MANIFEST<br />CACHE:<br />index.html<br />help.html<br />style/default.css<br />images/logo.png<br />images/backgound.png<br /><br />FALLBACK:<br />server-time.js fallback-server-time.js<br /><br />NETWORK:<br />*</snpt><br /><br />Explanation:-<br />- The first line of the cache.manifest file must read CACHE MANIFEST.<br />- After this line, we enter CACHE:<br />- List all the files we’d like to store on our visitor’s hard drive.<br />- <b>NETWORK</b> Section:-<br /> To make any files that should never be stored offline should be placed under NETWORK section. Any files specified in the NETWORK section will always be reloaded when the user is online, and will never be available offline.<br /><br /><t1>Example</t1><br /><pre>NETWORK<br />LatestNews.php</pre><br /> <br />We can use a shortcut: the wildcard *. This asterisk tells the browser that any files or URLs not mentioned in the explicit section (and therefore not stored in the application cache) should be fetched from the server.<br /> <br /><t1>Example</t1><br /><pre>NETWORK<br />*</pre><br /> <br />- <b>FALLBACK section</b>:-<br /> This section can also be specified, which allows us to define what the user will see when a resource fail to load.<br /> Each line in the fallback section requires two entries. <br /> i.The first is the file for which<br />you want to provide fallback content. You can specify either a specific file, or a<br />partial path like media/, which would refer to any file located in the media folder.<br /> ii.The second entry is what you would like to display in case the file specified fails<br />to load.<br /><br />We can load a still image of the film’s first frame, if the the files are unable to load.<br /><br /><t1>Example</t1><br /><eg>FALLBACK:<br />media/ images/ford-plane-still.png</eg><br /><br />we can specify /, which will match any page on the site. If any page fails to load or not available from the application cache, we’ll fall back to the offline.html page.<br /><br />FALLBACK:<br /><pre>media/ images/video-fallback.jpg<br />/ /offline.html</pre><br /><br />Note:<br /><note>Every URL in your website must be accounted for in the cache.manifest file, even URLs that you simply link to. If it’s unaccounted for in the manifest file, that resource<br />or URL will fail to load, even if you’re online. To avoid this problem, you should use the * in the NETWORK section.</note><br /><br /><tit>Adding Comments</tit><br />You can also add comments to your cache.manifest file by beginning a line with #.<br /><br /><pre>CACHE MANIFEST<br /># version 0.1<br />CACHE:<br />index.html<br />NETWORK:<br />*</pre> Setting Up Your Site to Work Offline 1 1 10/2/2015 11:43:27 AM 2/20/2017 10:38:23 AM Edit | Details | Delete
1 Setting the Content Type on Your Server Setting the Content Type on Your Server To ensure that your server is configured to serve the manifest files correctly set the content type ("MIME Types") provided by your server along with the cache.manifest.<br /><br />For Apache web server, add the following to your .htaccess file:<br /><br />AddType <code>text/cache-manifest</code> .manifest Setting the Content Type on Your Server 1 1 10/2/2015 11:51:13 AM 10/2/2015 11:51:13 AM Edit | Details | Delete
1 Pointing Your HTML to the Manifest File Pointing Your HTML to the Manifest File To make your website available offline point your HTML pages to the manifest file by setting the manifest attribute on the html element in each of our pages:<br /> <br /><pre>&lt;!doctype html&gt;<br />&lt;html manifest=&quot;/cache.manifest&quot;&gt;</pre><br /><br />Note:-<br /><note>Each HTML page on your website must set the manifest attribute on the html element otherwise application might not be stored in the application cache! There should be only one cache.manifest file for the entire application and every HTML page of your web application needs <code>&lt;html manifest=&quot;/cache.manifest&quot;&gt;</code>.</note> Pointing Your HTML to the Manifest File 1 1 10/2/2015 11:56:10 AM 10/2/2015 11:56:10 AM Edit | Details | Delete
1 Updating the cache Updating the cache Simply changing a file that is stored in a user’s application cache is not enough to get that new version of the file delivered to the user.The only way a browser checks for updated versions of files is if the manifest file changes.<br /><br />When a browser loads a site for which it already has a cache.manifest file, it will check to see if the manifest file has changed. If the cache.manifest file has changed, the browser will rebuild the application cache by re-downloading all the specified files otherwise it won’t download anything else. <br /><br />This is why we specified a version number in a comment in our cache.manifest.<br /><br /><tit>Refresh the cache</tit><br />If the browser sees during page load that the manifest file has changed, it still lets the current page load continue immediately, and then asks for the updated files to be loaded in the background, to be ready for the next page load.<br /><br />Fortunately, the browser provides a JavaScript API to help: the <code>applicationCache</code> interface.<br /><br />Using this interface, you can detect that a new set of application Cache contents has been fetched and is now available, and force them to be applied to the application cache right away, rather than on the next page load:<br /><br />To load the newly downloaded cache into memory, you can use the <code>applicationCache.swapCache()</code><br /><br /><snpt>var cache = applicationCache;<br />cache.addEventListener(&quot;updateready&quot;, function() {<br /> if (cache.stats == cache.UPDATEREADY) {<br /> cache.swapCache(); // swap in the new cache items<br /> }<br />}, false);<br /><br />[OR]<br /><br />applicationCache.onUpdateReady = function() {<br /> // the cache manifest has changed, let’s tell the user to<br /><br /> notifyUserOfUpgrade();<br />};<br /><br />applicationCache.onUpdateReady = function() {<br /> applicationCache.swapCache();<br /> // the cache manifest has changed, let’s tell the user to<br /><br /> notifyUserOfUpgrade();<br />};</snpt><br /><br />This makes the new application cache items available for any further uses during the current page lifetime.<br /><br />However, any places where the resources were already used on the page are not updated. So the cleanest way is to force the entire page to be updated with the new resource versions by simply reload the page. <br /><br />Ask the user if they want to reload the page, like this:<br /><br /><snpt>var cache = applicationCache;<br />cache.addEventListener(&quot;updateready&quot;, function() {<br /> if (cache.stats == cache.UPDATEREADY) {<br /> if (confirm(&quot;This site has been updated. Do you want to reload?&quot;)) {<br /> location.reload();<br /> }<br /> }<br />}, false);</snpt><br /><br />Some sites are designed to be long-lived, with little or no page reloads, in which case, getting updates requires special handling.<br /><br />To force the browser to do a check for an updated <b>cache.manifest</b> file, which if modified then force fetching of any new appcache contents, you can call the <code>update()</code> API method:<br /><br /><snpt>function updateAppcache() {<br /> var cache = applicationCache;<br /> cache.update(); // check to see if the cache manifest file has been updated<br /> cache.addEventListener(&quot;updateready&quot;, function() {<br /> if (cache.stats == cache.UPDATEREADY) {<br /> if (confirm(&quot;This site has been updated. Do you want to reload?&quot;)) {<br /> location.reload();<br /> }<br /> }<br /> }, false);<br />}</snpt> offline web app Updating the cache 1 1 10/2/2015 12:05:31 PM 2/20/2017 10:42:22 AM Edit | Details | Delete
1 Caching the Cache Caching the Cache The cache.manifest file may itself be cached by the browser.<br /><br />If you’re unable to force the browser to refresh its application cache, try clearing the regular browser cache. You could also change your server settings to send explicit instructions not to cache the cache.manifest file.<br /><br />For Apache web server , you can tell Apache not to cache the cache.manifest file by adding the following to your .htaccess file:<br /><br />.htaccess (excerpt)<br /><pre>&lt;Files cache.manifest&gt;<br />ExpiresActive On<br />ExpiresDefault &quot;access&quot;<br />&lt;/Files&gt;</pre><br /><br />The <b><Files cache.manifest></b> tells Apache to only apply the rules that follow to the cache.manifest file. <br /><br />The combination of <b>ExpiresActive</b> On and <b>ExpiresDefault</b> "access" forces the web server to always expire the <b>cache.manifest</b> file from the cache. The effect is, the cache.manifest file will never be cached by the browser. offline web app Caching the Cache 1 1 10/2/2015 12:09:05 PM 10/2/2015 12:09:05 PM Edit | Details | Delete
1 Using the manifest to detect connectivity Using the manifest to detect connectivity HTML5 includes a property on the navigator object that is supposed to tell you if the browser is online or offline, via <code>navigator.onLine</code><br /><br />Sometimes, you’ll need to know if your user is viewing the page offline or online. For example, in a web mail app, saving a draft while online involves sending it to the server to be saved in a database; but while offline, you would want to save that information locally instead, and wait until the user is back online to send it to your server.<br /><br />Browsers that support Offline Web Applications give you access to the navigator.onLine property, which will be true if the browser is online, and false if it’s not.<br /><br /><snpt>function determineConnectivity() {<br /> if (navigator.onLine) {<br /> // alert(&quot;You are online.&quot;);<br /> } else {<br /> alert(&quot;You must be offline.&quot;);<br /> }<br />}</snpt> offline web app Using the manifest to detect connectivity 1 1 10/2/2015 12:11:40 PM 10/2/2015 12:11:40 PM Edit | Details | Delete
1 About Geolocation About Geolocation The HTML5 specification includes a new Geolocation API, which allows for scripted access to geographical location information associated with the a device's browser.<br /><br />Visitor's location may be determined by any of the following:<br /><br />- IP address<br />- wireless network connection<br />- cell tower<br />- GPS hardware on the device<br /><br />W3C Geolocation spec states: No guarantee is given that the API returns the device’s actual location. About Geolocation 1 1 10/2/2015 2:18:17 PM 10/2/2015 2:18:17 PM Edit | Details | Delete
1 Checking for Support with User's browser Checking for Support with User's browser Before we attempt to use geolocation for determining the location of the Internet device, we should ensure that our visitor’s browser supports the GeoLocation feature natively. If it does, call the <code>getCurrentPosition</code><br />method:<br /><br /><pre>if (navigator && navigator.geolocation) {<br /> navigator.geolocation.getCurrentPosition(geo_success, geo_error);<br />} else {<br /> error('GeoLocation is not supported.');<br />}</pre><br /><br />Since this method executes asynchronously, pass it two callback functions: <i>geo_success</i> and <i>geo_error</i>. The error callback is passed a position error object that contains a code and a message property. The code can be one of the following:<br /><br />• <b>0</b> - Unknown<br />• <b>1</b> - Permission Denied<br />• <b>2</b> - Position Unavailable<br />• <b>3</b> - Timeout<br /><br />The success callback is passed a position object that contains a coordinates object and a timestamp. Checking for Support with User's browser 1 1 10/2/2015 2:25:14 PM 2/20/2017 11:59:37 AM Edit | Details | Delete
1 Geolocation API Methods Geolocation API Methods The geolocation API exists inside the navigator object and contains only three methods to determine the user’s current position and also get notified of changes to their position.<br /><br /><ol><br /><li><c>getCurrentPosition</c><br /><li><c>watchPosition</c><br /><li><c>clearWatch</c><br /></ol><br /><br /><table><br /><tr><th>Method</th><th>Description</th></tr><tr><td><i>getCurrentPosition</i></td><td>a one-shot method for grabbing the user’s current location.</td></tr><tr><td><i>watchPosition</i></td><td>Returns the user’s current location but continues to monitor their position and keeps polling at regular intervals to see if their location has changed and invoke the appropriate callback every time the position changes.</td></tr><tr><td><i>clearWatch</i></td><td>This method ends the watchPosition method's monitoring of the current<br />position.</td></tr></table><br /><br />The <c>watchPosition</c> and <c>clearWatch</c> are paired methods. <c>watchPosition</c> returns a unique identifier that is passed in to <c>clearWatch</c> to clear that particular watch. Geolocation API Methods 1 1 10/2/2015 2:28:52 PM 2/27/2017 4:15:35 PM Edit | Details | Delete
1 Retrieving the Current Position Retrieving the Current Position The current position is retrieved using the <code>getCurrentPosition</code> API method which takes three arguments.<br /><br />void getCurrentPosition(successCallback, errorCallback, options); <br /><br /><code>getCurrentPosition</code> and <code>watchPosition</code> mirror each other and take the same arguments:<br /><br />• <i>successCallback</i> - success handler<br />• <i>errorCallback</i> - error handler<br />• <i>options</i> - geolocation options<br /><br /><snpt>navigator.geolocation.getCurrentPosition(function (position) {<br />alert(&#39;We found you!&#39;);<br />// now do something with the position data<br />});</snpt><br /><br /><tit>Success Callback</tit><br />The success callback is passed a position object that contains a '<b>coordinates</b>' object and a '<b>timestamp</b>'. <br /><br />The coordinates object contains the following:<br /><br /><table><br /><tr><th>Properties</th><th>Description</th></tr><tr><td><c>latitude</c></td><td>which is specified in decimal degrees.</td></tr><tr><td><c>longitude</c></td><td>which is specified in decimal degrees.</td></tr><tr><td><c>accuracy</c></td><td>which is specified in meters.</td></tr><tr><td><c>altitude</c></td><td>which is specified in meters above the ellipsoid.</td></tr><tr><td><c>altitudeAccuracy</c></td><td>which is specified in meters.</td></tr><tr><td><c>heading</c></td><td>which is direction of travel specified in degrees</td></tr><tr><td><c>speed</c></td><td>which is specified in meters per second.</td></tr></table><br /><br />Of those 7, only 3 are guaranteed to be there: latitude, longitude, and accuracy. The heading and speed attributes are only relevant if we're tracking the user across multiple positions.<br /><br /><u>Grabbing the Latitude and Longitude:-</u><br />To get the latitude and longitude use the following code.<br /><br /><snpt>if (navigator.geolocation) {<br /> navigator.geolocation.getCurrentPosition(function(position) {<br /> var coords = position.coords;<br /> showMap(coords.latitude, coords.longitude,<br /> coords.accuracy);<br /> });<br />}</snpt><br /><br />Our <i>successCallback</i> is set to the function displayOnMap. Here's what this function looks like:<br /><br /><snpt>/* todo-clari <br />if (navigator.geolocation) {<br />navigator.geolocation.getCurrentPosition(displayOnMap);<br />}*/<br />function displayOnMap(position) {<br /> var latitude = position.coords.latitude;<br /> var longitude = position.coords.longitude;<br /> // Let&#39;s use Google Maps to display the location<br />}</snpt><br /><br /><tit>Error Callback</tit><br />The second argument to the <code>getCurrentPosition</code> and <code>watchPosition</code> method is the error handler.<br /><br />If you want to notify the user of any errors in getting the position use the error handler callback. The error handler may trigger if the user denies their their location.<br /><br />The error handler receives a single argument containing a position error object containing two properties:<br /><br />(i) code<br />(ii) message<br /><br />The code property will be only one of the following:<br /><b>PERMISSION_DENIED</b> (numeric value 1)<br /><b>POSITION_UNAVAILABLE</b> (numeric value 2)<br /><b>TIMEOUT</b> (numeric value 3)<br /><br />The message property is useful for developing and debugging but wouldn't be appropriate to show the user. The message property isn't always available (as it's not currently in Firefox 3.6+).<br /><br /><snpt>if (navigator.geolocation) {<br /> navigator.geolocation.getCurrentPosition(<br /> function(position) {<br /> var coords = position.coords;<br /> showMap(coords.latitude, coords.longitude, coords.accuracy);<br /> },<br /> function(error) {<br /> var errorTypes = {<br /> 1: &#39;Permission denied&#39;,<br /> 2: &#39;Position is not available&#39;,<br /> 3: &#39;Request timeout&#39;<br /> };<br /> alert(errorTypes[error.code] + &quot;: means we can&#39;t<br /> determine your position &quot;);<br /> });<br /> }</snpt><br /><br /><tit>Options - Configuring the geolocation</tit><br />The third argument to both <code>getCurrentPosition</code> and <code>watchPosition</code> are the geolocation options which are optional.<br /><br />• enableHighAccuracy (Boolean, default false)<br />• timeout (in milliseconds, default infinity/0)<br />• maximumAge (in milliseconds, default 0)<br /><br />For example, to request high accuracy, a two-second timeout, and to never use old geo data, call <code>getCurrentPosition</code> using the following options (where success and error are predefined functions):<br /><br /><snpt>navigator.geolocation.getCurrentPosition(success, error, {<br /> enableHighAccuracy: true,<br /> timeout: 2000,<br /> maximumAge: 0<br />});</snpt><br /><br /><table><br /><tr><th>Properties</th><th>Description</th></tr><tr><td><i>enableHighAccuracy</i></td><td>The tells the device to try to get a more accurate reading on the latitude and longitude. By default enableHighAccuracy is set to false. On a mobile device, this may be to make use of the GPS on a phone, which could consume more power on the mobile device. </td></tr><tr><td><i>timeout</i></td><td>The timeout tells the geolocation lookup how long it should wait before giving up and triggering the error handler (but won't start counting down if it's waiting for the user to approve the request). If it does timeout, the error code is set to 3 (TIMEOUT).<br />Setting a zero time out (the current default) tells the browser to never time out.</td></tr><tr><td><i>maximumAge</i></td><td>maximumAge can be used to tell the browser whether to use recently cached position data. If there is a request that is within the maximumAge (in milliseconds), it is returned instead of requesting a new position. maximumAge can also be Infinity, which tells the browser to always use a cached position. Setting the maximumAge to zero (the default value) means the browser must look up a new position on each request.</td></tr></table> Retrieving the Current Position 1 1 10/2/2015 3:38:51 PM 2/20/2017 1:43:35 PM Edit | Details | Delete
1 Introduction Introduction Before HTML5, there was no standard way to embed video into web pages.<br /><br />Until now, multimedia content on the Web has been placed in web pages by means of third-party plugins or applications that integrate with the<br />web browser. (QuickTime, RealPlayer, and Silverlight.)<br /><br />The most popular way to embed video and audio on web pages is by means of Adobe’s Flash Player plugin.<br /><br />The introduction of the video and audio elements in HTML5 resolves this problem and makes multimedia a seamless part of a web page, the same as the img element.<br /><br />With HTML5, there’ s no need for the user to download third-party software to view your content, and the video or audio player is easily accessible via scripting. Introduction 1 1 10/2/2015 3:59:35 PM 10/2/2015 3:59:35 PM Edit | Details | Delete
1 Adding HTML5 Audio Adding HTML5 Audio To play native audio on your web page. Add the audio element, with the src attribute referencing the file location of your audio file and fallback content for older browsers:<br /><br /><snpt>&lt;audio controls&gt;<br /> &lt;source src=&quot;audio.ogg&quot;&gt;<br /> &lt;source src=&quot;audio.mp3&quot;&gt;<br /> Download &lt;a href=&quot;audio.ogg&quot;&gt;episode 42 of Learning to Love HTML5&lt;/a&gt;<br />&lt;/audio&gt;</snpt><br /><br /><tit>controls attribute</tit><br />Add 'controls' attribute if you want browsers to display a default control interface for your audio.<br /><br /><tit>Audio Codecs</tit><br /><table><br /><tr><th>File Type</th><th>Description</th></tr><tr><td><i>.aac</i></td><td>Lossy compression scheme developed as an improvement over MP3, with similar bit rates but better sound quality.<br />Google’s open, royalty-free media format, which relies on the Vorbis audio codec for compression.</td></tr><tr><td><i>.mp3</i></td><td>Patented yet popular format, which uses lossy compression to achieve file sizes one-tenth of non-compressed.</td></tr><tr><td><i>.ogg</i></td><td>An open source alternative to .mp3 that also uses a lossy compression format.</td></tr><tr><td><i>.wav</i></td><td>Proprietary format for audio that does not utilize any compression.</td></tr><tr><td><i>.webm</i></td><td>Google’s open, royalty-free media format, which relies on the Vorbis audio codec for compression.</td></tr></table><br /><br /><tit>Integrating Multiple Sources</tit><br />HTML5 enable us to declare multiple audio files in your HTML5 audio.<br /><snpt>&lt;audio controls&gt;<br /> &lt;source src=&quot;audio.ogg&quot;&gt;<br /> &lt;source src=&quot;audio.mp3&quot;&gt;<br /> Download &lt;a href=&quot;audio.ogg&quot;&gt;episode 42 of Learning to Love HTML5&lt;/a&gt;<br />&lt;/audio&gt;</snpt><br /><br /><note>When using the source element in audio, the src attribute is dropped.</note><br /><br /><tit>Preloading the Audio</tit><br />audio has several attributes that allow you to configure your audio implementation.<br /><br />The preload attribute allows to hint to the browser when it should begin buffering<br />the audio. preload is used to optimize the download process. Currently has limited browser support.<br /><pre>&lt;audio controls preload&gt;</pre><br />There are three preload values.<br /><table><br /><tr><th>Values</th><th>Description</th></tr><tr><td><code>preload="auto"</code></td><td>It leaves the action up to the browser. If it is a mobile situation or a slow connection, the browser can decide not to preload in order to save bandwidth.</td></tr><tr><td><code>preload="metadata"</code></td><td>Tells the browser not to buffer the audio itself until the user activates the controls but metadata like duration and tracks should be preloaded.</td></tr><tr><td><code>preload="none"</code></td><td>Tells the browser that not to buffer the audio itself until the user activates the controls.</td></tr></table><br /><br /><tit>Creating Fallback Content</tit><br />Fallback simply means that if a users browser doesn’t support HTML5 audio, it instead displays the fallback content. For these users you could include fallback Flash.<br /><snpt>&lt;audio controls&gt;<br /> &lt;source src=&quot;audio.ogg&quot;&gt;<br /> &lt;source src=&quot;audio.mp3&quot;&gt;<br /> &lt;object data=&quot;player.swf?audio=audio.mp3&quot;&gt;<br /> &lt;param name=&quot;movie&quot; value=&quot;player.swf?audio=audio.mp3&quot;&gt; Video and Flash <br /> are not supported by your browser.<br /> &lt;/object&gt;<br />&lt;/audio&gt;</snpt><br /><br />You could also include a download link for audio as a fallback content.<br /><snpt>&lt;audio controls&gt;<br /> &lt;source src=&quot;audio.ogg&quot;&gt;<br /> &lt;source src=&quot;audio.mp3&quot;&gt;<br /> Your browser doesn&#39;t support HTML5 audio. You should upgrade. download &lt;a href=&quot;audio&quot;&gt;Download&lt;/a&gt;.<br />&lt;/audio&gt;</snpt> Adding HTML5 Audio 1 1 10/2/2015 4:22:01 PM 2/21/2017 6:42:48 PM Edit | Details | Delete
1 Manipulating the Audio Stream Manipulating the Audio Stream Html5 enable us to control and manipulate how your HTML5 audio plays in the browser. There are few attributes in audio that give us control over your playback.<br /><table><br /><tr><th>Properties</th><th>Description</th></tr><tr><td><c>autoplay</c></td><td>Tells the browser to start playing the audio as soon as the page loads.</td></tr><tr><td><c>loop</c></td><td>Loop tells the browser to loop the audio when playing forwards.</td></tr></table><br />Like controls, both autoplay and loop are Boolean attributes, so you simply include them in the opening audio tag when you want them.<br /><br /><pre>&lt;audio controls loop&gt;<br /><br />&lt;audio controls autoplay&gt;</pre> Html5 enable us to control and manipulate how your HTML5 audio plays in the browser. There are few attributes in audio that give us control over your playback. Manipulating the Audio Stream 1 1 10/2/2015 4:42:46 PM 2/21/2017 6:47:36 PM Edit | Details | Delete
1 Custom controls using Java Script Custom controls using Java Script If you want more control that these basic attributes (autoplay and loop), you can create custom controls using Java Script. <c>audio</c> and <c>video</c> have attributes, events and methods you can manipulate with Java-Script. <table> <tr><th>Methods</th><th>Description</th></tr><tr><td><c>canplaytype</c>(type)</td><td>Whether the browser can play a particular type of media</td></tr><tr><td><c>currentTime</c></td><td>The current playback position denoted in seconds</td></tr><tr><td><c>duration</c></td><td>The length of the audio file in seconds</td></tr><tr><td><c>play()</c></td><td>Start playback at the current position</td></tr><tr><td><c>pause()</c></td><td>Pause playback if the audio is actively playing</td></tr></table> <t1>Example</t1> The following code allows the user to jump to specific time on a audio file. <snpt>&lt;audio&gt; &lt;source src=&quot;audio.ogg&quot;&gt; &lt;source src=&quot;audio.mp3&quot;&gt; &lt;/audio&gt; &lt;button title=&quot;Play at 30 seconds&quot; onclick=&quot;playAt(30);&quot;&gt;30 seconds&lt;/button&gt; &lt;script&gt; function playAt(seconds) { var audio = document.getElementsByTagName(&quot;audio&quot;)[0]; audio.currentTime = seconds; audio.play(); } &lt;/script&gt;</snpt> <t1>Example</t1> There is no stop method. To stop use the pause method to to return to the beginning of the audio file via <c>currentTime</c>. <note>when creating your own custom controls, drop the controls Boolean attribute from audio.</note> Custom controls using Java Script 1 1 10/2/2015 4:51:17 PM 10/20/2018 5:13:03 AM Edit | Details | Delete
1 Generate audio using JavaScript Generate audio using JavaScript You can generate audio on the browser without the src attribute or source elements by using methods defined by the Mozilla Audio Data API<br /><br />It has limited support. Only Firefox 4+ and Chrome Beta currently support it.<br /><table><br /><tr><th>Methods</th><th>Description</th></tr><tr><td><code>mozSetup(<i>channels</i>, <i>sampleRate</i>)</code></td><td>Defines the channels and sample rate for the generated audio stream</td></tr><tr><td><code>mozWriteAudio(<code><i>buffer</i></code>)</code></td><td>Writes the samples, from an array, for the generated audio</td></tr><tr><td><code>mozCurrentSampleOffset()</code></td><td>Gets the current playback position of the audio, denoted in samples</td></tr></table><br /> Generate audio using JavaScript 1 1 10/2/2015 4:59:17 PM 2/21/2017 6:35:33 PM Edit | Details | Delete
1 Visualizing audio Using canvas Visualizing audio Using canvas We can create a visualization of your HTML5 audio using canvas.<br /><br /><snpt>&lt;audio src=&quot;audio.ogg&quot;&gt;&lt;/audio&gt;<br />&lt;canvas width=&quot;512&quot; height=&quot;100&quot;&gt;&lt;/canvas&gt;<br />&lt;button title=&quot;Generate Waveform&quot; onclick=&quot;genWave();&quot;&gt;Generate Waveform&lt;/button&gt;<br />&lt;script&gt;<br /> function genWave() {<br /> var audio = document.getElementsByTagName(&quot;audio&quot;)[0];<br /> var canvas = document.getElementsByTagName(&quot;canvas&quot;)[0];<br /> var context = canvas.getContext(&#39;2d&#39;);<br /> audio.addEventListener(&quot;MozAudioAvailable&quot;, buildWave, false);<br /><br /> function buildWave(event) {<br /> var channels = audio.mozChannels;<br /> var frameBufferLength = audio.mozFrameBufferLength;<br /> var fbData = event.frameBuffer;<br /> var stepInc = (frameBufferLength / channels) / canvas.width;<br /> var waveAmp = canvas.height / 2;<br /> canvas.width = canvas.width;<br /> context.beginPath();<br /> context.moveTo(0, waveAmp - fbData[0] * waveAmp);<br /> for (var i = 1; i &lt; canvas.width; i++) {<br /> context.lineTo(i, waveAmp - fbData[i * stepInc] * waveAmp);<br /> }<br /> context.strokeStyle = &quot;#fff&quot;;<br /> context.stroke();<br /> }<br /> audio.play();<br /> }<br />&lt;/script&gt;</snpt> Visualizing audio Using canvas 1 1 10/2/2015 5:00:39 PM 10/2/2015 5:00:39 PM Edit | Details | Delete
1 Introduction Introduction The Web Storage API defines a standard for how we can save simple data locally on a user’s computer or device. Before the emergence of the Web Storage standard, web developers often stored user information in cookies, or by using plugins. With Web Storage, we now have a standardized definition for how to store up to 5MB of simple data created by our websites or web applications.<br /><br /><tit>Browser Support for Web Storage:</tit><br />Web Storage is supported in these browsers:<br />■ Safari 4+<br />■ Chrome 5+<br />■ Firefox 3.6+<br />■ Internet Explorer 8+<br />■ Opera 10.5+<br />■ iOS (Mobile)<br /><br />HTML5 introduced two new APIs for in-browser persistent data storage: <code>sessionStorage</code> and <code>localStorage</code>. To test if a browser supports either of the Storage APIs, use the following feature-detect:<br /><br /><pre>var storage_support = window.sessionStorage || window.localStorage;</pre><br /><br /><tit>Local Storage versus Cookies</tit><br />Local storage play a similar role to HTTP cookies, but there are a few key differences. <br /><br />Cookies are intended to be read on the server side, whereas local storage is only available on the client side. If you need your server-side code to react differently based on some saved values, cookies are the way to go. Yet, Cookies are sent along with each HTTP request to your server and this can result in significant overhead in terms of bandwidth. <br /><br />Local storage, just sits on the user’s hard drive waiting to be read, so it costs nothing to use.<br /><br />In addition, we have significantly more size to store things using local storage. With cookies, we could only store 4KB of information in total.With local storage,<br />the maximum is 5MB.<br /><br /><tit>Web Storage is Browser-specific</tit><br />Web storage stores data specific to browser. If the user visits a site in Safari, any data will be stored to Safari’sWeb Storage store. If the user then revisits the same site in Chrome, the data that was saved via Safari will be unavailable. Each browser’s storage is separate and independent. Introduction 1 1 10/2/2015 5:21:06 PM 10/2/2015 5:28:41 PM Edit | Details | Delete
1 Browser Support Test Browser Support Test HTML5 introduced two new APIs for in-browser persistent data storage: <code>sessionStorage</code> and <code>localStorage</code>.<br /><br />To test if a browser supports either of the Storage APIs, use the following feature-detect:<br /><br /><snpt>var storage_support = window.sessionStorage || window.localStorage;</snpt> Browser Support Test 1 1 10/2/2015 5:22:19 PM 10/2/2015 5:22:19 PM Edit | Details | Delete
1 Web Storage Types Web Storage Types HTML5 introduced two new APIs for in-browser persistent data storage: <code>sessionStorage</code> and <code>localStorage</code>.<br /><br />The difference between the two is basically how long the browser persists the data.<br /><br /><tit>Session Storage</tit><br />Session Storage stores data only for the lifetime of the browser instance/session.<br /><br />Session storage lets us keep track of data specific to one window or tab. Even if the user is visiting the same site in two windows, each window will have its own individual session storage object and thus have separate, distinct data.<br /><br />Session storage is not persistent—it only lasts for the duration of a user’s session on a specific site (in other words, for the time that a browser window or tab is open and viewing that site).<br /><br /><tit>Local Storage</tit><br />Local Storage stores data persistently "forever."<br /><br />Unlike session storage, local storage allows us to save persistent data to the user's computer, via the browser. When a user revisits a site at a later date, any data saved to local storage can be retrieved.<br /><br />Note:-<br /><note>Data stored in these containers must be strings, so if you need to store complex data objects, one good option is to serialize the object into <b>JSON</b>, using <code>JSON.stringify()</code>.</note> Web Storage Types 1 1 10/2/2015 5:50:26 PM 10/2/2015 5:50:26 PM Edit | Details | Delete
1 Manipulating Storage Data Manipulating Storage Data Data saved in Web Storage is stored as key/value pairs.<br /><br />A few examples of simple key/value pairs:<br />■ key: name, value: Fernando<br />■ key: painter, value: David<br />■ key: email, value: info@rookienerd.com<br /><br /><tit>Setting the data</tit><br /><br />(I) <c>sessionStorage</c><br />To store some data for only the current browser instance (goes away when the user closes the browser), use <code>sessionStorage</code><br /><br /><snpt>var user_id = &quot;A1B2C3D4&quot;;<br />var user_data = {<br /> name: &quot;Tom Hanks&quot;,<br /> occupation: &quot;Actor&quot;,<br /> favorite_color: &quot;Blue&quot;<br /> // ...<br />};<br />sessionStorage.setItem(user_id, JSON.stringify(user_data));</snpt><br /><br />(II) <c>localStorage</c><br />To store some data for a longer period of time, use <code>localStorage</code><br /><br /><snpt>var user_id = &quot;A1B2C3D4&quot;;<br />var user_prefs = {<br /> keep_me_logged_in: true,<br /> start_page: &quot;daily news&quot;<br /> // ...<br />};<br />localStorage.setItem(user_id, JSON.stringify(user_prefs));</snpt><br /><br /><u>Shortcut Way:-</u><br />Instead of <code>localStorage.setItem(key, value)</code>, we can say <code>localStorage[key]= value: localStorage[&quot;size&quot;] = 6;</code><br /><br /><pre>localStorage.setItem(key, value)<br /><br />[or]<br /><br />localStorage[key]= value</pre><br /><br /><tit>Getting the data</tit><br />To pull data from the storage container:<br /><br /><snpt>var user_id = &quot;A1B2C3D4&quot;;<br />var user_data = { /* defaults */ };<br />var user_prefs = { /* defaults */ };<br />if (sessionStorage.getItem(user_id)) {<br /> user_data = JSON.parse(sessionStorage.getItem(user_id));<br />}<br />if (localStorage.getItem(user_id)) {<br /> user_prefs = JSON.parse(localStorage.getItem(user_id));<br />}</snpt><br /><br />These Storage APIs allow you to very simply set and retrieve key/value data, where the value is a string, but can represent anything you want, including the string serialization of a complex data object.<br /><br /><u>Shortcut Way:-</u><br />Instead of <code>localStorage.getItem(key)</code>, we can simply say <code>localStorage[key]</code>.<br /><br /><pre>var size = localStorage[&quot;size&quot;];</pre><br /><br /><tit>Removing Items and Clearing Data</tit><br /><table><br /><tr><th>Method</th><th>Description</th></tr><tr><td><code>removeItem(<i>key</i>)</code></td><td>To remove a specific item from Web Storage, we can use the removeItem method.<br />We pass it the key we want to remove, and it will remove both the key and its value.</td></tr><tr><td><code>clear()</code></td><td><br />To remove all data stored by our site on a user's computer, we can use the clear<br />method. This will delete all keys and all values stored for our domain.</td></tr></table><br /><br /> Manipulating Storage Data 1 1 10/2/2015 6:03:34 PM 2/20/2017 9:41:51 AM Edit | Details | Delete
1 Web Storage API Methods Web Storage API Methods The APIs for both <code>sessionStorage</code> and <code>localStorage</code> are identical:<br /><br /><table><br /><tr><th>Method</th><th>Description</th></tr><tr><td><c>getItem(<i>key</i>)</c></td><td>Returns an item of data from the storage container, referenced by its key</td></tr><tr><td><c>setItem(<i>key</i>, <i>item</i>)</c></td><td>Adds an item of data to the storage container, referenced by its key</td></tr><tr><td><c>key(<i>index</i>)</c></td><td>Returns the key for an item of data at the numerical index specified</td></tr><tr><td><c>removeItem(<i>key</i>)</c></td><td>Removes an item from the storage container, referenced by its key</td></tr><tr><td><c>clear()</c></td><td>Clears out all data in the current storage container</td></tr><tr><td><c>length</c></td><td>Identifies how many items of data are in the storage container</td></tr></table> Web Storage API Methods 1 1 10/2/2015 6:09:10 PM 2/20/2017 9:56:06 AM Edit | Details | Delete
1 Web Storage Limits Web Storage Limits Internet Explorer "allows web applications to store nearly 10MB of user data. Chrome, Safari, Firefox, and Opera all allow for up to 5MB of user data, which is the amount suggested in the W3C spec.<br /><br /><tit>Test Storage Exceed</tit><br />A better approach to test to see if the quota is exceeded before saving important data. The way you test for this is by catching the <b>QUOTA_EXCEEDED_ERR</b> exception.<br /><br /><snpt>try {<br /> sessionStorage[&quot;name&quot;] = &quot;Tabatha&quot;;<br />} catch (exception) {<br /> if (exception == QUOTA_EXCEEDED_ERR) {<br /> // we should tell the user their quota has been exceeded.<br /> }<br />}</snpt> Web Storage Limits 1 1 10/2/2015 6:13:13 PM 10/2/2015 6:13:13 PM Edit | Details | Delete
1 Introduction Introduction Web Sockets defines a <i>protocol</i> for two-way communication with a remote host. This API is of great use to server-side developers, but is less relevant to front-end developers and designers.<br /><br />Some browsers now have the native ability to establish a bi-directional socket connection between the browser and the server, using the WebSocket API. This means that both sides (browser and server) can send and receive data.<br /><br /><tit>Browser Support</tit><br />Web Sockets are supported in:<br /><br />■ Safari 5+<br />■ Chrome 4+<br />■ Firefox 4+ (but disabled by default)<br />■ Opera 11+ (but disabled by default)<br />■ iOS (Mobile Safari) 4.2+<br /><br />Web Sockets are currently unsupported in all versions of IE and on Android. Introduction 1 1 10/2/2015 6:42:39 PM 10/2/2015 6:43:17 PM Edit | Details | Delete
1 Testing the Browser Support Testing the Browser Support To test if the browser supports Web Sockets, use the following feature-detect for the WebSocket API.<br /><br /><pre>var websockets_support = !!window.WebSocket;</pre> Testing the Browser Support 1 1 10/2/2015 6:44:27 PM 10/2/2015 6:44:27 PM Edit | Details | Delete
1 Creating a Web Socket application Creating a Web Socket application A simple application with chat room type functionality, where a user may read the current list of messages, as well as add their own message to the room.<br /><br />A html page with text entry box where new messages are written before being sent, and we’ll have a list of messages in the chat room.It is a simple chat room message sending and receiving.<br /><br /><snpt>&lt;!DOCTYPE html&gt;<br />&lt;html&gt;<br /><br />&lt;head&gt;<br /> &lt;title&gt;Our Chatroom&lt;/title&gt;<br /> &lt;script src=&quot;chatroom.js&quot;&gt;&lt;/script&gt;<br />&lt;/head&gt;<br /><br />&lt;body&gt;<br /> &lt;h1&gt;Our Chatroom&lt;/h1&gt;<br /> &lt;div id=&quot;chatlog&quot;&gt;&lt;/div&gt;<br /> &lt;input id=&quot;newmsg&quot; /&gt;<br /> &lt;br /&gt;<br /> &lt;input type=&quot;button&quot; value=&quot;Send Message&quot; id=&quot;sendmsg&quot; /&gt;<br />&lt;/body&gt;<br /><br />&lt;/html&gt;</snpt><br /><br />JavaScript in "chatroom.js":<br /><br /><snpt>var chatcomm = new WebSocket(&quot;ws://something.com/server/chat&quot;);<br />chatcomm.onmessage = function(msg) {<br /> msg = JSON.parse(msg); // decode JSON into object<br /> var chatlog = document.getElementById(&quot;chatlog&quot;);<br /> var docfrag = document.createDocumentFragment();<br /> var msgdiv;<br /> for (var i = 0; i &lt; msg.messages.length; i++) {<br /> msgdiv = document.createElement(&quot;div&quot;);<br /> msgdiv.appendChild(document.createTextNode(msg.messages[i]));<br /> docfrag.appendChild(msgdiv);<br /> }<br /> chatlog.appendChild(docfrag);<br />};<br />chatcomm.onclose = function() {<br /> alert(&quot;The chatroom connection was lost. Refresh page to reconnect.&quot;);<br />};<br />document.getElementById(&quot;sendmsg&quot;).addEventListener(&quot;click&quot;, function() {<br /> var newmsg = document.getElementById(&quot;newmsg&quot;);<br /> chatcomm.send(newmsg.value); // send the message to the server<br /> newmsg.value = &quot;&quot;; // clear out the message entry box<br />}, false);</snpt><br /><br />Create the socket and point it at a location on our server. The server URL in our example uses the "ws://" protocol. This specifies the special protocol that Web Sockets use between client and server.<br /><br /><tit>Adding Event Listeners</tit><br />Set up two event listeners on our socket object: <code>onmessage </code>and <code>onclose</code>. The <code>onclose</code> handler is self-explanatory—it is fired when the connection is closed.<br /><br />The <code>onmessage</code> handler receives a string of data (JSON), and parses it into a message object. The message object has an array of one or more messages (each one is just simple text). The handler loops through each message, adding it to the chat log in the order received.<br /><br />Lastly, Sets up a click event handler on the "Send Message" button. When clicked, the handler takes whatever has been typed into the entry input, and sends it to the server, using the send(...) method. Creating a Web Socket application 1 1 10/2/2015 6:48:52 PM 10/2/2015 7:03:31 PM Edit | Details | Delete
1 Web Socket Instances Web Socket Instances The WebSocket object instance has, similar to XHR, a readyState property, which lets you examine the state of the connection. It can have the following constant values:<br /><table><br /><tr><th>Method</th><th>Value</th><th>Description</th></tr><tr><td><code>{worker}.CONNECTING</code></td><td>numeric value 0</td><td>connection has not yet been established</td></tr><tr><td><code>{worker}.OPEN</code></td><td>numeric value 1</td><td>connection is open and communication is possible</td></tr><tr><td><code>{worker}.CLOSING</code></td><td>numeric value 2</td><td>connection is being closed</td></tr><tr><td><code>{worker}.CLOSED</code></td><td>numeric value 3</td><td>connection is closed (or was never opened successfully)</td></tr></table> Web Socket Instances 1 1 10/2/2015 6:56:37 PM 4/14/2016 6:07:06 PM Edit | Details | Delete
1 Events fired by Websocket Instances Events fired by Websocket Instances The events that a WebSocket object instance fires are:<br /><table><br /><tr><th>Event</th><th>Description</th></tr><tr><td><code>open</code></td><td>called when the connection has been opened</td></tr><tr><td><code>message</code></td><td>called when a message has been received from the server</td></tr><tr><td><code>error</code></td><td>called when an error occurs with the socket (sending or receiving)</td></tr><tr><td><code>close</code></td><td>called when the connection is closed</td></tr></table><br />For each of these events, you can add an event listener using <code>addEventListener(...)</code>, or you can set a corresponding handler directly on the worker object instance, including <code>onopen</code>, <code>onmessage</code>, <code>onerror</code> and <code>onclose</code>.<br /><br />If Web Sockets are not supported, you’ll need to provide some fallback functionality for your application, or at least gracefully notify the user that their browser doesn’t support the required functionality.<br /><br />Note:<br /><note>Because consistent browser support for Web Sockets is minimal, the best practice suggestion for using Web Sockets is to use a library like Socket.io (http://socket.io/), which attempts to use Web Sockets if available, and falls back to a variety of other techniques for communication if Web Sockets are not present.</note> Events fired by Websocket Instances 1 1 10/2/2015 7:00:31 PM 2/20/2017 9:25:53 AM Edit | Details | Delete
1 Introduction Introduction HTML5 now defines a direct API for handling drag and drop (“D&D”). This API allows us to specify that certain elements are draggable, and then specify what should happen when these draggable elements are dragged over or dropped onto other elements on the page.<br /><br /><tit>Browser support for Drag and Drop</tit><br />Drag and Drop is supported in:<br /><br />■ Safari 3.2+<br />■ Chrome 6.0+<br />■ Firefox 3.5+ (there is an older API that was supported in Firefox 3.0)<br />■ Internet Explorer 7.0+<br />■ Android 2.1+<br /> Introduction 1 1 10/2/2015 7:23:51 PM 10/2/2015 7:23:51 PM Edit | Details | Delete
1 Checking for Support with User's browser Checking for Support with User's browser To test if the browser supports native D&D functionality, use the following feature detect.<br /><br /><pre>var dnd_support = 'draggable' in document.createElement('span');</pre><br /> Checking for Support with User's browser 1 1 10/2/2015 7:24:50 PM 10/2/2015 7:24:50 PM Edit | Details | Delete
1 Making Elements Draggable Making Elements Draggable HTML5 spec added some new content to the API. Enabling any element to be dragged is incredibly easy. Take your div and add the new attribute: <code>draggable</code>.<br /><br /><pre>&lt;div draggable=&quot;true&quot;&gt;This element be draggable&lt;/div&gt;</pre> Making Elements Draggable 1 1 10/2/2015 7:25:50 PM 10/2/2015 7:31:53 PM Edit | Details | Delete
1 The DataTransfer Object The DataTransfer Object DataTransfer objects are one of the new objects outlined in the Drag and Drop API. These objects allow us to set and get data about the objects that are being dragged<br /><br />DataTransfer lets us define two pieces of information.<br /><br />1. the type of data we’re saving about the draggable element<br />2. the value of the data itself<br /><br />By using the setData and getData methods on the <code>dataTransfer</code> object, you can pass data from elements inside our application to other pages of our app, or across browser windows<br /><br /><tit>Dragging data to other applications</tit><br /><br /><snpt>img.ondragstart = function(event) {<br /> event = event || window.event;<br /> // here be one long line<br /> event.dataTransfer.setData('text / plain', 'This is the screen name<br /> for' +this.getAttribute('data - screen_name') + ', whose image can be found here: '+this.src);<br />};</snpt> The DataTransfer Object 1 1 10/2/2015 7:33:13 PM 10/2/2015 7:35:04 PM Edit | Details | Delete
1 Drag and Drop Events Drag and Drop Events In total, there are seven drag and drop events.<br /><table><br /><tr><th>Properties</th><th>Description</th></tr><tr><td><c>dragenter</c></td><td></td></tr><tr><td><c>dragover</c></td><td>Tell the browser this is an element that accepts drop data.</td></tr><tr><td><c>drop</c></td><td>Once something has been dropped on the element, do something with the dropped data.</td></tr><tr><td><c>dragstart</c></td><td></td></tr><tr><td><c>dragend</c></td><td>(the complement to dragstart)</td></tr><tr><td><c>dragenter</c></td><td></td></tr><tr><td><c>dragleave</c></td><td></td></tr></table><br />The enter and leave events fire on the dropzone as the dragged item enters the element. Drag and Drop Events 1 1 10/2/2015 7:37:39 PM 2/21/2017 12:13:20 PM Edit | Details | Delete
1 Creating a D&D Application Creating a D&D Application Simple D&D demo.<br /><br /><snpt>&lt;style&gt;<br />#foobar { background-color:yellow; width:100px; height:100px; cursor:move; }<br />#catcher { background-color:blue; width:150px; height:150px; padding:5px; margin-bottom:5px; }<br />&lt;/style&gt;</snpt><br /><br />Enable D&D:-<br />Put the draggable attribute on the element you want to be drag-enabled:<br /><snpt>&lt;div id=&quot;catcher&quot;&gt;...&lt;/div&gt;<br />&lt;div id=&quot;foobar&quot; draggable=&quot;true&quot;&gt;...&lt;/div&gt;</snpt><br /><br />We need to use the JavaScript API and D&D events to tell the browser where the element can be dragged to, and what to do once it's dropped there.<br /><br />For example, we can listen for the dragstart event, and style the element differently<br />when it's being dragged (like putting a border around it or making it partially transparent).<br /><br /><snpt>var foobar = document.getElementById("foobar");<br />foobar.addEventListener("dragstart", function(evt) {<br /> this.style.border = "3px dotted #000"; // black dotted-line border<br />}, false);</snpt><br /><br /><br />Lets style an element that can receive the drop, so that when the dragged item is over it, it makes it obvious that you can drop the element there (as opposed to just dropping it in any location):<br /><br /><snpt>var catcher = document.getElementById("catcher"); // will catch the dropped element<br />catcher.addEventListener("dragenter", function(evt) {<br /> this.style.border = "3px solid red"; // make the catcher have a red border<br />}, false);<br />catcher.addEventListener("dragleave", function(evt) {<br /> this.style.border = ""; // remove the border from the catcher<br />}, false);<br />catcher.addEventListener("dragover", function(evt) {<br /> if (evt.preventDefault) evt.preventDefault();<br /> return false;<br />}, false);<br /></snpt><br /><br />Add event listeners to the element that catch our dropped element for the dragover, dragenter, and dragleave events.<br /><br /><i>dragenter</i> and <i>dragleave</i> - events simply toggle on a red border to our target element to make it clear that<br />you can drop the element there.<br /><br /><i>dragover</i> - event is fired continuously while dragging around on top of the target.<br /><br />So we would not want to toggle on the red border in that handler, as that would create unnecessary work for the browser. However, we do need to prevent that event from various default behavior, depending on the type of element being dragged. This is why we use <code>preventDefault()</code> and return false.<br /><br />Modify our <i>dragstart</i> event handler to wire up a <i>dataTransfer</i> object with data that the browser needs for handling the D&D actions<br /><br /><snpt>foobar.addEventListener("dragstart", function(evt) {<br /> this.style.border = "3px dotted #000"; // black dotted-line border<br /> evt.dataTransfer.effectAllowed = "move";<br /> evt.dataTransfer.setData("Text", this.id);<br />}, false);</snpt><br /><br /><b>effectAllowed</b> property - controls what visual feedback—generally the mouse cursor—the browser gives on the type of drag event that is occurring (move, copy, etc.).<br /><br /><b>setData(...)</b> - method tells the D&D mechanism in the browser which data from the element being dragged should be dropped into the target element, otherwise known as the drop catcher. Here we specify that only the id property of the original element is transferred, which is used later to actually move the element.<br /><br />Define a <i><b>dragend</b></i> event handler to clear up the visuals, and a drop event handler, to actually do the moving of our element:<br /><br /><snpt>foobar.addEventListener("dragend", function(evt) {<br /> this.style.border = ""; // remove the border<br />}, false);<br />catcher.addEventListener("drop", function(evt) {<br /> if (evt.preventDefault) evt.preventDefault();<br /> if (evt.stopPropagation) evt.stopPropagation();<br /> this.style.border = ""; // remove the border from the catcher<br /> var id = evt.dataTransfer.getData("Text"); // get the id<br /> var elem = document.getElementById(id);<br /> elem.parentNode.removeChild(elem); // remove the element<br /> this.appendChild(elem); // add the element back into our catcher<br /> return false;<br />}, false);</snpt><br /><br />The drop event handler, we first get the data that was transferred in the drop, which in this case was the id property of the original source element that we dragged. Next, we remove that element from its current location, and finally add it back into the new location inside our catcher container. Creating a D&D Application 1 1 10/2/2015 7:46:32 PM 10/2/2015 7:50:05 PM Edit | Details | Delete
1 About CSS3 About CSS3 <p>CSS3 is the latest standard for CSS, the syntax to control the style and layout of web pages.</p> <p>CSS3 is completely backward-compatible, so you will not have to change your existing designs.</p> <p>The CSS3 specification is made up of several “modules”, such as the following ones:</p> * Selectors * Box Model * Backgrounds and Borders * Text Effects * 2D/3D Transformations * Animations * Multiple Column Layout * User Interface <tit>What you will Learn?</tit> <p>With the CSS3 tutorial in rookienerd.com, you can learn and create your own Web site.</p> <p>You will enjoy learning HTML.</p> <tit>CSS3 Examples</tit> <p>Each tutorial has examples to learn and practice quickly.</p> <tit>CSS3 References</tit> <p>You will find complete references of all properties and selectors with syntax, examples, browser support, and more. </p> css3 introduction 1 1 10/3/2015 6:06:19 AM 12/18/2018 5:47:57 PM Edit | Details | Delete
1 Shadows Shadows <p>CSS3 provides the feature to add drop shadows to elements using the box-shadow property. This property lets you specify the color, height, width, blur, and offset of one or multiple inner and/or outer drop shadows on your elements. </p> <ul> <li>Drop Shadows</li><li>Inset and Multiple Shadows</li><li>Text Shadow</li></ul> <tit>Drop Shadows</tit> <p>The box-shadow property takes a comma-separated list of shadows as its value. Each shadow is defined by two to four size values, a color, and the key term inset for inset—or internal—shadows. </p> <p>The default inset for the shadow will be drawn outside of the element if the inset is not specified. </p> <p>The syntax for the box-shadow property is as below</p> <pre>box-shadow: &lt;horizontal-offset&gt; &lt;vertical-offset&gt; &lt;blur distance&gt; &lt;spread-distance&gt; &lt;color&gt;; box-shadow: 2px 5px 0 0 rgba(52,52,52,1);</pre> <table> <tr><th width="180">Values</th><th>Description</th></tr><tr><td><i>&lt;horizontal-offset&gt;</i></td><td>It is the horizontal offset. A positive value will create a shadow to the right of the element. A negative value to the left. In our example, our shadow is two pixels to the right of the a.</td></tr><tr><td><i>&lt;vertical-offset&gt;</i></td><td>It is the vertical offset. A positive value pushes the shadow down, creating a shadow on the bottom of the element. A negative value pushes the shadow up. In our example, the shadow is five pixels below the a.</td></tr><tr><td><i>&lt;blur distance&gt;</i></td><td>It is the blur distance of the shadow when included. The greater thevalue, the more the shadow is blurred. Only positive values are allowed. Our shadow is not blurred, so we can either include a value of zero (0), or omit the value altogether.</td></tr><tr><td><i>&lt;spread-distance&gt;</i></td><td>It determines the spread distance of the shadow. A positive value will cause the shadow shape to expand in all directions. A negative value contracts the shadow. Our shadow has no spread, so again we can either include a value of zero (0), or omit the value altogether.</td></tr><tr><td><i>&lt;color&gt;</i></td><td>It is the color of the shadow. If it’s omitted, the spec states that it should default to the same as the color property of the element. In the example above, we used an RGBA color. In this particular design, the shadow is a solid color, so we could just have used the hex value. </td></tr></table> <snpt>-webkit-box-shadow: 2px 5px 0 0 rgba(72,72,72,1); -moz-box-shadow: 2px 5px 0 0 rgba(72,72,72,1); box-shadow: 2px 5px 0 0 rgba(72,72,72,1);</snpt> Note:- <note>Opera and Firefox support this default behavior, but WebKit doesn’t, so be sure to include the color. Most of the time, though, shadows will be partially transparent. So RGBA or HSLA color should be used usually.</note> <tit>Inset and Multiple Shadows</tit> <p>To create an inset box shadow, add the <code>inset</code> keyword. </p> <p>To include two shadows we cover all four sides: one shadow for the top left, and one for the bottom right. </p> <p>To add multiple shadows to an element, simply need to repeat the same syntax again, separated with comma. </p> <snpt>-webkit-box-shadow: inset 1px 1px 84px rgba(0,0,0,0.24), inset -1px -1px 84px rgba(0,0,0,0.24); -moz-box-shadow: inset 1px 1px 84px rgba(0,0,0,0.24), inset -1px -1px 84px rgba(0,0,0,0.24); box-shadow: inset 1px 1px 84px rgba(0,0,0,0.24), inset -1px -1px 84px rgba(0,0,0,0.24);</snpt> The <code>box-shadow</code> add shadows to boxes, where as <code>text-shadow</code> adds shadows to individual characters in text nodes. <tit>Text Shadow</tit> <p>The syntax of the text-shadow property is very similar to box-shadow, including prefixes, offsets, and the ability to add multiple shadows; except that there’s no spread, and inset shadows aren’t allowed:</p> <snpt>/* single shadow */ text-shadow: topOffset leftOffset blurRadius color; /* multiple shadows */ text-shadow: topOffset1 leftOffset1 blurRadius1 color1, topOffset2 leftOffset2 blurRadius2 color2, topOffset3 leftOffset3 blurRadius3 color3;</snpt> <p>Like <code>box-shadow</code>, when multiple shadows are declared, they’re displayed from front to back with the first shadow being the topmost. Text shadows appear behind the text itself. </p> <p>An example of test-shadow. </p> <snpt>text-shadow: 3px 3px 1px rgba(0, 0, 0, 0.5);</snpt> <p>In the above example, the shadow extends three pixels below the text, three pixels to the right of the text, is slightly blurred (one pixel), and has a base color of black at 50% opacity. </p> <p>Other examples: </p> <snpt>h1, h2, h3 { text-transform: uppercase; text-shadow: 1px 1px #FFFFFF; }</snpt> css shadows 1 1 10/3/2015 6:14:24 AM 12/18/2018 5:55:09 PM Edit | Details | Delete
1 Drop Shadows Drop Shadows The box-shadow property takes a comma-separated list of shadows as its value. Each shadow is defined by two to four size values, a color, and the key term inset for inset—or internal—shadows. <br /><br />The default inset for the shadow will be drawn outside of the element if the inset is not specified.<br /><br />The syntax for the box-shadow property is as below<br /><pre>box-shadow: &lt;horizontal-offset&gt; &lt;vertical-offset&gt; &lt;blur distance&gt; &lt;spread-distance&gt; &lt;color&gt;;<br /><br />box-shadow: 2px 5px 0 0 rgba(52,52,52,1);</pre><br /><table><br /><tr><td><i>&lt;horizontal-offset&gt;</i></td><td>It is the horizontal offset. <br />A positive value will create a shadow to the right of the element.<br />A negative value to the left. <br />In our example, our shadow is two pixels to the right of the a.</td></tr><tr><td><i>&lt;vertical-offset&gt;</i></td><td>It is the vertical offset. <br />A positive value pushes the shadow down, creating a shadow on the bottom of the element. <br />A negative value pushes the shadow up. <br />In our example, the shadow is five pixels below the a.</td></tr><tr><td><i>&lt;blur distance&gt;</i></td><td>It is the blur distance of the shadow when included. <br />The greater thevalue, the more the shadow is blurred. Only positive values are allowed. Our<br />shadow is not blurred, so we can either include a value of zero (0), or omit the value<br />altogether.</td></tr><tr><td><i>&lt;spread-distance&gt;</i></td><td>It determines the spread distance of the shadow. <br />A positive value will cause the shadow shape to expand in all directions. <br />A negative value contracts the shadow. <br />Our shadow has no spread, so again we can either include a value of zero (0), or omit the value altogether.</td></tr><tr><td><i>&lt;color&gt;</i></td><td>It is the color of the shadow. <br />If it’s omitted, the spec states that it should default to the same as the<br />color property of the element. In the example above, we used an<br />RGBA color. In this particular design, the shadow is a solid color, so we could just<br />have used the hex value. </td></tr></table><br /><br /><snpt>-webkit-box-shadow: 2px 5px 0 0 rgba(72,72,72,1);<br />-moz-box-shadow: 2px 5px 0 0 rgba(72,72,72,1);<br />box-shadow: 2px 5px 0 0 rgba(72,72,72,1);</snpt><br /><br />Note:-<br /><note>Opera and Firefox support this default behavior, but WebKit doesn’t, so be sure to include the color. Most of the time, though, shadows will be partially transparent. So RGBA or HSLA color should be used usually.</note> css3 Drop Shadows 1 1 10/3/2015 6:27:06 AM 10/3/2015 6:52:46 PM Edit | Details | Delete
1 Inset and Multiple Shadows Inset and Multiple Shadows To create an inset box shadow, add the <code>inset</code> keyword. <br /><br />To include two shadows we cover all four sides: one shadow for the top left, and one for the bottom right.<br /><br />To add multiple shadows to an element, simply need to repeat the same syntax again, separated with comma.<br /><br /><snpt>-webkit-box-shadow:<br />inset 1px 1px 84px rgba(0,0,0,0.24),<br />inset -1px -1px 84px rgba(0,0,0,0.24);<br /><br />-moz-box-shadow:<br />inset 1px 1px 84px rgba(0,0,0,0.24),<br />inset -1px -1px 84px rgba(0,0,0,0.24);<br /><br />box-shadow:<br />inset 1px 1px 84px rgba(0,0,0,0.24),<br />inset -1px -1px 84px rgba(0,0,0,0.24);</snpt> Inset and Multiple Shadows 1 1 10/3/2015 6:32:23 AM 10/3/2015 6:32:23 AM Edit | Details | Delete
1 Text Shadow Text Shadow The <code>box-shadow</code> add shadows to boxes, where as <code>text-shadow</code> adds shadows to individual characters in text nodes. <br /><br />The syntax of the text-shadow property is very similar to box-shadow, including prefixes, offsets, and the ability to add multiple shadows; except that there’s no spread, and inset shadows aren’t allowed:<br /><br /><snpt>/* single shadow */<br />text-shadow: topOffset leftOffset blurRadius color;<br /><br />/* multiple shadows */<br />text-shadow: topOffset1 leftOffset1 blurRadius1 color1,<br />topOffset2 leftOffset2 blurRadius2 color2,<br />topOffset3 leftOffset3 blurRadius3 color3;</snpt><br /><br />Like <code>box-shadow</code>, when multiple shadows are declared, they’re displayed from front to back with the first shadow being the topmost. Text shadows appear behind the text itself.<br /><br />An example of test-shadow.<br /><snpt>text-shadow: 3px 3px 1px rgba(0, 0, 0, 0.5);</snpt><br /><br />In the above example, the shadow extends three pixels below the text, three pixels to the right of the text, is slightly blurred (one pixel), and has a base color of black at 50% opacity.<br /><br />Other examples:<br /><snpt>h1, h2, h3 {<br />text-transform: uppercase;<br />text-shadow: 1px 1px #FFFFFF;<br />}</snpt> css3 Text Shadow 1 1 10/3/2015 6:34:58 AM 10/3/2015 6:34:58 AM Edit | Details | Delete
1 Gradients Gradients <p>Gradients are smooth transitions between two or more specified colors. When creating gradients, we can specify multiple color values in-between, called color stops. Each color stop is made up of a color and a position. The gradient block fades the color from each stop to the next to create a smooth gradient. </p> <p>CSS3 has the ability to create radial and linear gradients, as well as multiple background images on any element. </p> <p>There are two types of gradients currently available in CSS3: </p> <ol> <li>linear gradient</li><li>radial gradient</li></ol> <p>Linear gradients are those where colors transition across a straight line: from top to bottom, left to right, or along any arbitrary axis. </p> <tit>Linear gradients</tit> <p>The basic syntax for linear gradients: </p> <snpt>background-image: linear-gradient(&lt;direction&gt;, &lt;color stops&gt;.....); /*Adding multiple color stops*/ background-image: linear-gradient(&lt;direction&gt;, &lt;color stop-1&gt;, &lt;color stop-2&gt;.....&lt;color stop-n&gt;);</snpt> <table> <tr><th width="180">Values</th><th>Description</th></tr><tr><td>&lt;<i>direction</i>&gt;</td><td>It is the (angle) along which the gradient should proceed, or the (side) or (corner) from which it should start.</td></tr><tr><td><i><b>angles</b></i></td><td>The values are in degrees (deg). 0deg points to the right, 90deg is up, and so on counter clockwise.</td></tr><tr><td><i><b>side or corner</b></i></td><td>Use the top, bottom, left, and right keywords.</td></tr><tr><td>&lt;<i>color stops</i>&gt;</td><td>It is the color and a percentage or length specifying how far along the gradient that stop is located.</td></tr></table> <p>Example</p> <snpt>background-image: -moz-linear-gradient(270deg, #FFF 0%, #000 100%); background-image: -moz-linear-gradient(top, #FFF 0%, #000 100%); background-image: -moz-linear-gradient(#FFF 0%, #000 100%);</snpt> <t1>Defaults</t1> <p><b>default direction</b> - top is the default in the absence of a specified direction. <b>default color stop%</b> - The first color stop is assumed to be at 0%, and the last color stop is assumed to be at 100%, </p> <p>Example </p> <snpt>background-image: -moz-linear-gradient(#FFF, #000);</snpt> <p>Adding additional color stop 75% along the way </p> <snpt>background-image: -moz-linear-gradient(30deg, #000, #FFF 75%, #000);</snpt> <p>Starting color stop at 50% </p> <snpt>background-image: -moz-linear-gradient(30deg, #000 50%, #FFF 75%, #000 90%);</snpt> <tit>Radial Gradients</tit> <p>Radial gradients are circular or elliptical gradients. Rather than proceeding along a straight axis, colors blend out from a starting point in all directions. </p> <p>A simple circular gradient to illustrate the standard syntax: </p> <snpt>background-image: -moz-radial-gradient(&lt;background-position&gt;, &lt;shape &amp; size&gt;, &lt;start color&gt;, &lt;end color&gt;);</snpt> <table> <tr><th width="200">Values</th><th>Description</th></tr><tr><td>&lt;<i>background-position</i>&gt;</td><td>position for the center of the gradient.You can use values, percentages, or keywords to set the gradient’s position</td></tr><tr><td>&lt;<i>shape &amp; size</i>&gt;</td><td>shape and size of the gradient</td></tr><tr><td>&lt;<i>start color</i>&gt;</td><td></td></tr><tr><td>&lt;<i>end color</i>&gt;</td><td></td></tr></table> <p>All the results of the below three are identical. </p> <snpt>background-image: -moz-radial-gradient(#FFF, #000); background-image: -moz-radial-gradient(center, #FFF, #000); background-image: -moz-radial-gradient(center, ellipse cover, #FFF, #000);</snpt> <table> <tr><th width="180">Values</th><th>Description</th></tr><tr><td>&lt;<i>shape</i>&gt;</td><td>The shape can take one of two values, circle or ellipse, with the latter being the default.</td></tr><tr><td>&lt;<i>size</i>&gt;</td><td>You can use one of the following values: (<i>closest-side, closest-corner, farthest-side, farthest-corner, contain, cover</i>)</td></tr><tr><td><i>closest-side</i></td><td>The gradient’s shape meets the side of the box closest to its center (for circles), or meets both the vertical and horizontal sides closest to the center (for ellipses).</td></tr><tr><td><i>closest-corner</i></td><td>The gradient’s shape is sized so it meets exactly the closest corner of the box from its center.</td></tr><tr><td><i>farthest-side</i></td><td>Similar to closest-side, except that the shape is sized to meet the side of the box farthest from its center (or the farthest vertical and horizontal sides in the case of ellipses).</td></tr><tr><td><i>farthest-corner</i></td><td>The gradient’s shape is sized so that it meets exactly the farthest corner of the box from its center.</td></tr><tr><td><i>contain</i></td><td>A synonym for closest-side.</td></tr><tr><td><i>cover</i></td><td>A synonym for farthest-corner.</td></tr></table> <p>Example </p> <snpt>background-image: -moz-radial-gradient(30px 30px, circle farthest-side, #FFF, #000 30%, #FFF);</snpt> <t1>Positioning the Gradient</t1> <snpt>background-image: -moz-radial-gradient(30px 30px, #FFF, #000);</snpt> <p>It will place the center of the gradient </p> - 30 pixels from the top - 30 pixels from the left of the element <t1>Repeating Gradients</t1> <p>If we want to create a gradient "pattern" that repeats over the background of an element. But linear-repeating gradients can be created by repeating the background image (with background-repeat), but there's no equivalent way to easily create repeating radial gradients. </p> <p>CSS3 comes with both a repeating-linear-gradient and a <code>repeating-radial-gradient</code> syntax which makes easier. Gradients with <code>repeating-linear-gradient</code> and <code>repeating-radial-gradient</code> have the same syntax as the nonrepeating versions. </p> <snpt>.repeat_linear_1 { background-image: -webkit-repeating-linear-gradient(left, rgba(0,0,0,0.5) 10%, rgba(0,0,0,0.1) 30%); } .repeat_radial_2 { background-image: -webkit-repeating-radial-gradient(top left, circle, rgba(0,0,0,0.9), rgba(0,0,0,0.1) 10%, rgba(0,0,0,0.5) 20%); } .multiple_gradients_3 { background-image: -webkit-repeating-linear-gradient(left, rgba(0,0,0,0.5) 10%, rgba(0,0,0,0.1) 30%), -webkit-repeating-radial-gradient(top left, circle, rgba(0,0,0,0.9), rgba(0,0,0,0.1) 10%, rgba(0,0,0,0.5) 20%); }</snpt> css Gradients 1 1 10/3/2015 6:37:41 AM 12/18/2018 5:48:25 PM Edit | Details | Delete
1 Linear gradients Linear gradients Linear gradients are those where colors transition across a straight line: from top to bottom, left to right, or along any arbitrary axis.<br /><br />The basic syntax for linear gradients:<br /><snpt>background-image: linear-gradient(&lt;direction&gt;, &lt;color stops&gt;.....);<br /><br />/*Adding multiple color stops*/<br />background-image: linear-gradient(&lt;direction&gt;, &lt;color stop-1&gt;, &lt;color stop-2&gt;.....&lt;color stop-n&gt;);</snpt><br /><table><br /><tr><td>&lt;<i>direction</i>&gt;</td><td>It is the (angle) along which the gradient should proceed, or the (side) or (corner) from which it should start.</td></tr><tr><td><i><b>angles</b></i></td><td>The values are in degrees (deg). 0deg points to the right, 90deg is up, and so on counter clockwise.</td></tr><tr><td><i><b>side or corne</b>r</i></td><td>Use the top, bottom, left, and right keywords.</td></tr><tr><td>&lt;<i>color stops</i>&gt;</td><td>It is the color and a percentage or length specifying how far along the gradient that stop is located.</td></tr></table><br />Example<br /><snpt>background-image: -moz-linear-gradient(270deg, #FFF 0%, #000 100%);<br />background-image: -moz-linear-gradient(top, #FFF 0%, #000 100%);<br />background-image: -moz-linear-gradient(#FFF 0%, #000 100%);</snpt><br /><br /><tit>Defaults</tit><br /><b>default direction</b> - top is the default in the absence of a specified direction.<br /><b>default color stop%</b> - The first color stop is assumed to be at 0%, and the last color stop is assumed to be at 100%,<br /><br />Example<br /><snpt>background-image: -moz-linear-gradient(#FFF, #000);</snpt><br /><br />Adding additional color stop 75% along the way<br /><snpt>background-image: -moz-linear-gradient(30deg, #000, #FFF 75%, #000);</snpt><br /><br />Starting color stop at 50%<br /><snpt>background-image: -moz-linear-gradient(30deg, #000 50%, #FFF 75%, #000 90%);</snpt> css3 Linear gradients 1 1 10/3/2015 7:02:24 AM 10/3/2015 7:07:55 PM Edit | Details | Delete
1 Radial Gradients Radial Gradients Radial gradients are circular or elliptical gradients. Rather than proceeding along a straight axis, colors blend out from a starting point in all directions.<br /><br />A simple circular gradient to illustrate the standard syntax: <br /><snpt>background-image: -moz-radial-gradient(&lt;background-position&gt;, &lt;shape &amp; size&gt;, &lt;start color&gt;, &lt;end color&gt;);</snpt><br /><table><br /><tr><td>&lt;<i>background-position</i>&gt;</td><td>position for the center of the gradient.You can use values, percentages, or keywords to set the gradient’s position</td></tr><tr><td>&lt;<i>shape &amp; size</i>&gt;</td><td>shape and size of the gradient</td></tr><tr><td>&lt;<i>start color</i>&gt;</td><td></td></tr><tr><td>&lt;<i>end color</i>&gt;</td><td></td></tr></table><br /><br />All the results of the below three are identical.<br /><snpt>background-image: -moz-radial-gradient(#FFF, #000);<br />background-image: -moz-radial-gradient(center, #FFF, #000);<br />background-image: -moz-radial-gradient(center, ellipse cover, #FFF, #000);</snpt><br /><table><br /><tr><td>&lt;<i>shape</i>&gt;</td><td>The shape can take one of two values, circle or ellipse, with the latter being the default.</td></tr><tr><td>&lt;<i>size</i>&gt;</td><td>You can use one of the following values: (<i>closest-side, closest-corner, farthest-side, farthest-corner, contain, cover</i>)</td></tr><tr><td><i>closest-side</i></td><td>The gradient’s shape meets the side of the box closest to its center (for circles), or meets both the vertical and horizontal sides closest to the center (for ellipses).</td></tr><tr><td><i>closest-corner</i></td><td>The gradient’s shape is sized so it meets exactly the closest corner of the box from its center.</td></tr><tr><td><i>farthest-side</i></td><td>Similar to closest-side, except that the shape is sized to meet the side of the box farthest from its center (or the farthest vertical and horizontal sides in the case of ellipses).</td></tr><tr><td><i>farthest-corner</i></td><td>The gradient’s shape is sized so that it meets exactly the farthest corner of the box from its center.</td></tr><tr><td><i>contain</i></td><td>A synonym for closest-side.</td></tr><tr><td><i>cover</i></td><td>A synonym for farthest-corner.</td></tr></table><br /><br />Example<br /><snpt>background-image: -moz-radial-gradient(30px 30px, circle farthest-side, #FFF, #000 30%, #FFF);</snpt><br /><br /><tit>Positioning the Gradient</tit><br /><snpt>background-image: -moz-radial-gradient(30px 30px, #FFF, #000);</snpt><br /><br />It will place the center of the gradient <br />- 30 pixels from the top <br />- 30 pixels from the left of the element css3 Radial Gradients 1 1 10/3/2015 7:22:10 AM 10/3/2015 7:06:23 PM Edit | Details | Delete
1 Repeating Gradients Repeating Gradients If we want to create a gradient "pattern" that repeats over the background of an element. But linear-repeating gradients can be created by repeating the background image (with background-repeat), but there's no equivalent way to easily create repeating radial gradients. <br /><br />CSS3 comes with both a repeating-linear-gradient and a <code>repeating-radial-gradient</code> syntax which makes easier. Gradients with <code>repeating-linear-gradient</code> and <code>repeating-radial-gradient</code> have the same syntax as the nonrepeating versions.<br /><br /><snpt>.repeat_linear_1 {<br /> background-image: -webkit-repeating-linear-gradient(left, rgba(0,0,0,0.5) 10%, <br /> rgba(0,0,0,0.1) 30%);<br />}<br /> .repeat_radial_2 {<br /> background-image: -webkit-repeating-radial-gradient(top left, circle, rgba(0,0,0,0.9), <br /> rgba(0,0,0,0.1) 10%, rgba(0,0,0,0.5) 20%);<br />}<br /> .multiple_gradients_3 {<br /> background-image: -webkit-repeating-linear-gradient(left, rgba(0,0,0,0.5) 10%, rgba(0,0,0,0.1) 30%), <br /> -webkit-repeating-radial-gradient(top left, circle, rgba(0,0,0,0.9), <br /> rgba(0,0,0,0.1) 10%, rgba(0,0,0,0.5) 20%);<br />}</snpt> css3 Repeating Gradients 1 1 10/3/2015 7:32:30 AM 10/3/2015 7:32:30 AM Edit | Details | Delete
1 Multiple Backgrounds Multiple Backgrounds <p></p><p></p><tit>Multiple Backgrounds</tit> <p>CSS3 supports multiple background images which means it provides us with the ability to add more than one background image to any element. </p> <p>Before CSS3, adding the multiple background image required placing an additional element in the markup to contain the new background image. </p> <p>Old CSS way </p> <snpt>&lt;body&gt; &lt;div id=&quot;midground&quot;&gt; &lt;div id=&quot;foreground&quot;&gt; &lt;!-- page content here --&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; /*css style */ body { background: url(vines-back.png) repeat-x 20% 0; } #midground { background: url(vines-mid.png) repeat-x 40% 0; } #foreground { background: url(vines-front.png) repeat-x 150% 0; }</snpt> <p>The multiple background images syntax include the values of all the background properties, including background-image and the shorthand background property. To make a declaration for multiple background images, simply separate the values for each individual image with a comma. </p> <t1>Multiple backgrounds syntax</t1> <p>And here’s how simple it is to assign these four images as backgrounds of the body element, using the updated CSS3 </p> <snpt>background-image: url(firstImage.jpg), url(secondImage.gif), url(thirdImage.png);</snpt> <p>This works just as well if you’re using the shorthand background property: </p> <snpt>background: url(firstImage.jpg) no-repeat 0 0, url(secondImage.gif) no-repeat 100% 0, url(thirdImage.png) no-repeat 50% 0;</snpt> syntax: <snpt>body { background: url(../img/stars-1.png) repeat-x fixed -130% 0, url(../img/stars-2.png) repeat-x fixed 40% 0, url(../img/space-bg.png) repeat-x fixed -80% 0, url(../img/clouds.png) repeat-x fixed 100% 0; background-color: #1a1a1a; }</snpt> <p>The background images are layered one on top of the other with the first declaration on top, as if it had a high z-index. The final image is drawn under all the images, as if it had a low z-index. </p> <p>The default values for the various background properties are listed below: </p> ■ background-color: transparent; ■ background-image: none; ■ background-position: 0 0; ■ background-size: auto; ■ background-repeat: repeat; ■ background-clip: border-box; ■ background-origin: padding-box; ■ background-attachment: scroll <p>We can include a gradient as one of several background images. </p> <snpt>#ad2 { background-image: url(../images/bg-bike.png), linear-gradient(top, rgba(0,0,0,0.4) 0, rgba(0,0,0,0) 37%, rgba(0,0,0,0) 83%, rgba(0,0,0,0.06) 92%, rgba(0,0,0,0) 98%); background-position: 50% 88%, 0 0; }</snpt> <tit>Background Size</tit> <p>The background-size property allows you to specify the size you want your background images to have. </p> <p>We can include background-size within the shorthand background declaration by adding it after the background’s position, separated with a slash (/). But the browser ignores the entire declaration as no browser understands this shorthand; since they see it as incorrectly formatted. </p> <p>So we want to use the background-size property as a separate declaration instead. </p> <snpt>background-size: 100px auto, auto auto; background-size: 100px, auto auto;</snpt> <p>To use background properties, use commas to separate values for each image declared. </p> <snpt>-webkit-background-size: 100px, cover; -moz-background-size: 100px, cover; -o-background-size: 100px, cover; background-size: 100px auto, cover;</snpt> <p>If we wanted our background image to be really big, we could declare: </p> <snpt>-webkit-background-size: 100px, cover; -moz-background-size: 100px, cover; -o-background-size: 100px, cover; background-size: 100px auto, cover;</snpt> <p>By declaring just the width of the image, the second value will default to auto, and the browser will determine the correct height of the image based on the aspect ratio.</p> css Multiple Backgrounds 1 1 10/3/2015 8:04:19 AM 12/18/2018 5:37:25 PM Edit | Details | Delete
1 Background Size Background Size The background-size property allows you to specify the size you want your background images to have. <br /><br />We can include background-size within the shorthand background declaration by adding it after the background’s position, separated with a slash (/). But the browser ignores the entire declaration as no browser understands this shorthand; since they see it as incorrectly formatted. <br /><br />So we want to use the background-size property as a separate declaration instead.<br /><snpt>background-size: 100px auto, auto auto;<br />background-size: 100px, auto auto;</snpt><br /><br />To use background properties, use commas to separate values for each image declared. <br /><snpt>-webkit-background-size: 100px, cover;<br />-moz-background-size: 100px, cover;<br />-o-background-size: 100px, cover;<br />background-size: 100px auto, cover;</snpt><br /><br />If we wanted our background image to be really big, we could declare:<br /><snpt>-webkit-background-size: 100px, cover;<br />-moz-background-size: 100px, cover;<br />-o-background-size: 100px, cover;<br />background-size: 100px auto, cover;</snpt><br /><br />By declaring just the width of the image, the second value will default to auto, and the browser will determine the correct height of the image based on the aspect ratio. css3 Background Size 1 1 10/3/2015 8:11:21 AM 10/3/2015 8:11:21 AM Edit | Details | Delete
1 Trasforms Trasforms <tit>Trasform Methods</tit> <p>With CSS3, you now have the capability to perform several transformations, in two-dimensional (2D) space, on document elements. </p> <p>Using CSS 2D Transforms we can rotate, skew, scale, and translate HTML elements with the two major properties: <code>transform</code> and <code>transform-origin</code>. </p> <p>The basic syntax for transform: </p> <pre>transform: transform function(value);</pre> <p>The transform functions applied to an HTML document </p> <table> <tr><td><code>translate()</code></td><td>move elements left, right, up, or down</td></tr><tr><td><code>scale()</code></td><td>scales an element by the defined factors horizontally and vertically</td></tr><tr><td><code>rotate()</code></td><td>rotates an element around the point of origin</td></tr><tr><td><code>skew()</code></td><td>skew along the X and Y axes</td></tr></table> <tit>Translate</tit> <p>Translation function is used to move elements left, right, up, or down. These functions are similar to the behaviour of position: relative; where you declare top and left. </p> <p>Unlike position: <code>relative</code>, a translated element can only be moved relative to its current position. </p> <p>The <code>translate(x,y)</code> function moves an element by x from the left, and y from the top: </p> <snpt>-webkit-transform: translate(45px,-45px); -moz-transform: translate(45px,-45px); -ms-transform: translate(45px,-45px); -o-transform: translate(45px,-45px); transform: translate(45px,-45px);</snpt> <t1>translatex & translatey</t1> <p>If you only want to move an element vertically or horizontally, you can use the <code>translatex</code> or <code>translatey</code> functions: </p> <snpt>/* Translate X - horizontally */ -webkit-transform: translatex(45px); -moz-transform: translatex(45px); -ms-transform: translatex(45px); -o-transform: translatex(45px); transform: translatex(45px); /* Translate Y - vertically */ -webkit-transform: translatey(-45px); -moz-transform: translatey(-45px); -ms-transform: translatey(-45px); -o-transform: translatey(-45px); transform: translatey(-45px);</snpt> Example:- <p>An example to apply translate when h1 is hovered. </p> <snpt>&lt;h1&gt;Put your &lt;span&gt;dukes&lt;/span&gt; up sire&lt;/h1&gt; #ad3 h1:hover span { color: #484848; -webkit-transform: translateX(40px); -moz-transform: translateX(40px); -ms-transform: translateX(40px); -o-transform:translateX(40px); transform: translateX(40px); }</snpt> <p>To make it work on webkit, since it only allow you to transform block-level elements; inline elements are off-limits. To fix it add display: inline-block; to our span: </p> <snpt>#ad3 h1 span { font-size: 30px; color: #999999; display:inline-block; }</snpt> <tit>Scale</tit> <p>The <code>scale(x,y)</code> function scales an element by the defined factors horizontally and vertically, respectively. If only one value is provided, it will be used for both the x and y scaling.</p> <p>The syntax is as follows: </p> <pre>transform scale(X scale vector, Y scale vector).</pre> <p>You also can transform an element on only one axis by using the following syntax: </p> <pre>transform:scaleX(X scale factor); transform:scaleY(Y scale factor);</pre> Here’s an example: <snpt>#element{ transform: scale(2,4); }</snpt> <p>This causes the targeted element to appear twice as long in the X axis and four times as long on the Y axis.</p> <snpt>#element{ transform: scaleX(2); }</snpt> <p>This causes the targeted element to appear twice as long in the X axis but won’t change its size along the Y axis. </p> <snpt>-webkit-transform: scale(1.5,0.25); -moz-transform: scale(1.5,0.25); -ms-transform: scale(1.5,0.25); -o-transform: scale(1.5,0.25); transform: scale(1.5,0.25);</snpt> <p>As with translate, you can also use the <code>scalex(x)</code> or <code>scaley(y)</code> functions. These functions will scale only the horizontal dimensions, or only the vertical dimensions. They are the same as <code>scale(x,1)</code> and <code>scale(1,y)</code>, respectively.</p> <p>By default a scaled element will grow outwards from or shrink inwards towards its center; so the element’s center will stay in the same place as its dimensions change. To change this default behavior, you can include the <code>transform-origin</code> property.</p> <snpt>&lt;h1&gt;Put your &lt;span&gt;dukes&lt;/span&gt; up sire&lt;/h1&gt; #ad3 h1:hover span { color: #484848; -webkit-transform: translateX(40px) scale(1.5); -moz-transform: translateX(40px) scale(1.5); -ms-transform: translateX(40px) scale(1.5); -o-transform: translateX(40px) scale(1.5); transform: translateX(40px) scale(1.5); }</snpt> <note>Scaling an element doesn't correspond to changing its height and width (which would constrain only the width and height values but not resize the element)</note> <tit>Rotate</tit> <p>The <code>rotate()</code> function rotates an element around the point of origin (as with scale, by default this is the element’s center), by a specified angle value.</p> <p>Generally, angles are declared in degrees, with positive degrees moving clockwise and negative moving counter-clockwise. We can also provide angles in <code>grads</code>, <code>radians</code>, or <code>turns</code>.</p> <p>The syntax is as follows: </p> <pre>transform:rotate(angle).</pre> <p>An example using rotate. </p> <snpt>#ad3 h1:hover span { color: #484848; -webkit-transform:rotate(10deg) translateX(40px) scale(1.5); -moz-transform:rotate(10deg) translateX(40px) scale(1.5); -ms-transform:rotate(10deg) translateX(40px) scale(1.5); -o-transform:rotate(10deg) translateX(40px) scale(1.5); transform:rotate(10deg) translateX(40px) scale(1.5); }</snpt> <tit>Skew</tit> <p>The <code>skew(x,y)</code> function specifies a skew along the X and Y axes.</p> <p>The x specifies the skew on the X axis, and the y specifies the skew on the Y axis. If the second parameter is omitted, the skew will only occur on the X axis: </p> <p>The syntax for Skewing an element: This defines a 2D skew transformation along the X axis and the Y axis.</p> <pre>skew(x-angle,y-angle)</pre> <table> <tr><td><code>skewX(<i>angle</i>)</code></td><td>This defines a 2D skew transformation along the X axis.</td></tr><tr><td><code>skewY(<i>angle</i>)</code></td><td>This defines a 2D skew transformation along the Y axis</td></tr></table> <snpt>-webkit-transform: skew(15deg, 4deg); -moz-transform: skew(15deg, 4deg); -ms-transform: skew(15deg, 4deg); -o-transform: skew(15deg, 4deg); transform: skew(15deg, 4deg);</snpt> <tit>Transform origin</tit> <p>Every element is positioned in a 2D coordinate space, and they each have an origin point. You can move this origin when performing any transformation by using the transform-origin property. The coordinates of this point are based on a regular 2D coordinate system: a vertical Y axis, a horizontal X axis, and an initial transform-origin value of 50% 50 %, which is the center of the element. </p> <p>The transform-origin property takes two parameters: the X-axis coordinate value and the Y-axis coordinate value. It accepts the following two types of values (and if only one parameter is given, it assumes the second one is the center): </p> <p>-<b>Numeric</b> <i>(expressed in pixels or percentages)</i>: A value pair of 100% 100% places the transform origin in the bottom right corner. -<b>Keywords</b>: The keywords you can use are top, bottom, center, left, and right. A value pair of right bottom, for instance, places the transform-origin in the bottom right corner (just like a value pair of 100% 100 %).</p> <p>The <u>default</u> value can be then expressed like this: <b>(50 %,50 %)</b> or <b>(center,center</b>). </p> <p>The transform-origin property is supported with vendor prefixes in WebKit, Firefox, and Opera.</p> <snpt>-webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; -o-transform-origin: 0 0; transform-origin: 0 0;</snpt> <t1>Rotating a circle</t1> <p>The default transform-origin is the center of the circle, applying a rotate transform to a circle would have no visible effect—a circle rotated 90 degrees still looks exactly the same as it did before being rotated. If you gave your circle a transform-origin of 10% 10%, you would notice the circle’s rotation.</p> css Trasforms 1 1 10/3/2015 8:49:10 AM 12/18/2018 5:51:29 PM Edit | Details | Delete
1 Translate Translate Translation function is used to move elements left, right, up, or down. These functions are similar to the behaviour of position: relative; where you declare top and left.<br /><br />Unlike position: <code>relative</code>, a translated element can only be moved relative to its current position.<br /><br />The <code>translate(x,y)</code> function moves an element by x from the left, and y from the top:<br /><snpt>-webkit-transform: translate(45px,-45px);<br />-moz-transform: translate(45px,-45px);<br />-ms-transform: translate(45px,-45px);<br />-o-transform: translate(45px,-45px);<br />transform: translate(45px,-45px);</snpt><br /><br /><tit>translatex & translatey</tit><br />If you only want to move an element vertically or horizontally, you can use the <code>translatex</code> or <code>translatey</code> functions:<br /><snpt>/* Translate X - horizontally */<br />-webkit-transform: translatex(45px);<br />-moz-transform: translatex(45px);<br />-ms-transform: translatex(45px);<br />-o-transform: translatex(45px);<br />transform: translatex(45px);<br /><br />/* Translate Y - vertically */<br />-webkit-transform: translatey(-45px);<br />-moz-transform: translatey(-45px);<br />-ms-transform: translatey(-45px);<br />-o-transform: translatey(-45px);<br />transform: translatey(-45px);</snpt><br /><br />Example:-<br />An example to apply translate when h1 is hovered.<br /><br /><snpt>&lt;h1&gt;Put your &lt;span&gt;dukes&lt;/span&gt; up sire&lt;/h1&gt;<br /><br />#ad3 h1:hover span {<br /> color: #484848;<br /> -webkit-transform: translateX(40px);<br /> -moz-transform: translateX(40px);<br /> -ms-transform: translateX(40px);<br /> -o-transform:translateX(40px);<br /> transform: translateX(40px);<br />}</snpt><br /><br />To make it work on webkit, since it only allow you to transform block-level elements; inline elements are off-limits. To fix it add display: inline-block; to our span:<br /><snpt>#ad3 h1 span {<br /> font-size: 30px;<br /> color: #999999;<br /> display:inline-block;<br />}</snpt> css3 Translate 1 1 10/3/2015 8:56:27 AM 10/3/2015 8:56:27 AM Edit | Details | Delete
1 Scale Scale The <code>scale(x,y)</code> function scales an element by the defined factors horizontally and vertically, respectively. If only one value is provided, it will be used for both the x and y scaling.<br /><br />The syntax is as follows:<br /><pre>transform scale(X scale vector, Y scale vector).</pre><br /><br />You also can transform an element on only one axis by using the following syntax:<br /><pre>transform:scaleX(X scale factor);<br />transform:scaleY(Y scale factor);</pre><br /><br />Here’s an example:<br /><snpt>#element{<br /> transform: scale(2,4);<br />}</snpt><br /><br />This causes the targeted element to appear twice as long in the X axis and four times as long on the Y axis. <br /><snpt>#element{<br />transform: scaleX(2);<br />}</snpt><br /><br />This causes the targeted element to appear twice as long in the X axis but won’t change its size along the Y axis.<br /><snpt>-webkit-transform: scale(1.5,0.25);<br />-moz-transform: scale(1.5,0.25);<br />-ms-transform: scale(1.5,0.25);<br />-o-transform: scale(1.5,0.25);<br />transform: scale(1.5,0.25);</snpt><br /><br />As with translate, you can also use the <code>scalex(x)</code> or <code>scaley(y)</code> functions. These functions will scale only the horizontal dimensions, or only the vertical dimensions. They are the same as <code>scale(x,1)</code> and <code>scale(1,y)</code>, respectively.<br /><br />By default a scaled element will grow outwards from or shrink inwards towards its center; so the element’s center will stay in the same place as its dimensions change. To change this default behavior, you can include the <code>transform-origin</code> property.<br /><br /><snpt>&lt;h1&gt;Put your &lt;span&gt;dukes&lt;/span&gt; up sire&lt;/h1&gt;<br /><br />#ad3 h1:hover span {<br /> color: #484848;<br /> -webkit-transform: translateX(40px) scale(1.5);<br /> -moz-transform: translateX(40px) scale(1.5);<br /> -ms-transform: translateX(40px) scale(1.5);<br /> -o-transform: translateX(40px) scale(1.5);<br /> transform: translateX(40px) scale(1.5);<br />}</snpt><br /><br /><note>Scaling an element doesn't correspond to changing its height and width (which would constrain only the width and height values but not resize the element)</note> css3 Scale 1 1 10/3/2015 9:03:19 AM 2/20/2017 8:09:37 PM Edit | Details | Delete
1 Rotate Rotate The <code>rotate()</code> function rotates an element around the point of origin (as with scale, by default this is the element’s center), by a specified angle value. <br /><br />Generally, angles are declared in degrees, with positive degrees moving clockwise and negative moving counter-clockwise. We can also provide angles in <code>grads</code>, <code>radians</code>, or <code>turns</code>.<br /><br />The syntax is as follows:<br /><pre>transform:rotate(angle).</pre><br /><br />An example using rotate.<br /><snpt>#ad3 h1:hover span {<br /> color: #484848;<br /> -webkit-transform:rotate(10deg) translateX(40px) scale(1.5);<br /> -moz-transform:rotate(10deg) translateX(40px) scale(1.5);<br /> -ms-transform:rotate(10deg) translateX(40px) scale(1.5);<br /> -o-transform:rotate(10deg) translateX(40px) scale(1.5);<br /> transform:rotate(10deg) translateX(40px) scale(1.5);<br />}</snpt><br /> css3 Rotate 1 1 10/3/2015 9:12:29 AM 10/3/2015 9:12:29 AM Edit | Details | Delete
1 Skew Skew The <code>skew(x,y)</code> function specifies a skew along the X and Y axes. <br /><br />The x specifies the skew on the X axis, and the y specifies the skew on the Y axis. If the second parameter is omitted, the skew will only occur on the X axis:<br /><br />The syntax for Skewing an element: This defines a 2D skew transformation along the X axis and the Y axis.<br /><pre>skew(x-angle,y-angle)</pre><br /><table><br /><tr><td><code>skewX(<i>angle</i>)</code></td><td>This defines a 2D skew transformation along the X axis.</td></tr><tr><td><code>skewY(<i>angle</i>)</code></td><td>This defines a 2D skew transformation along the Y axis</td></tr></table><br /><snpt>-webkit-transform: skew(15deg, 4deg);<br />-moz-transform: skew(15deg, 4deg);<br />-ms-transform: skew(15deg, 4deg);<br />-o-transform: skew(15deg, 4deg);<br />transform: skew(15deg, 4deg);</snpt><br /> css3 Skew 1 1 10/3/2015 9:15:59 AM 10/3/2015 7:11:49 PM Edit | Details | Delete
1 Transform origin Transform origin Every element is positioned in a 2D coordinate space, and they each have an origin point. You can move this origin when performing any transformation by using the transform-origin property. The coordinates of this point are based on a regular 2D coordinate system: a vertical Y axis, a horizontal X axis, and an initial transform-origin value of 50% 50 %, which is the center of the element.<br /><br />The transform-origin property takes two parameters: the X-axis coordinate value and the Y-axis coordinate value. It accepts the following two types of values (and if only one parameter is given, it assumes the second one is the center):<br /><br />-<b>Numeric</b> <i>(expressed in pixels or percentages)</i>: A value pair of 100% 100% places the transform origin in the bottom right corner.<br />-<b>Keywords</b>: The keywords you can use are top, bottom, center, left, and right. A value pair of right bottom, for instance, places the transform-origin in the bottom right corner (just like a value pair of 100% 100 %).<br /><br />The <u>default</u> value can be then expressed like this: <b>(50 %,50 %)</b> or <b>(center,center</b>).<br /><br />The transform-origin property is supported with vendor prefixes in WebKit, Firefox, and Opera.<br /><snpt>-webkit-transform-origin: 0 0;<br />-moz-transform-origin: 0 0;<br />-o-transform-origin: 0 0;<br />transform-origin: 0 0;</snpt><br /><br /><tit>Rotating a circle</tit><br />The default transform-origin is the center of the circle, applying a rotate transform to a circle would have no visible effect—a circle rotated 90 degrees still looks exactly the same as it did before being rotated. If you gave your circle a transform-origin of 10% 10%, you would notice the circle’s rotation. css3 Transform origin 1 1 10/3/2015 9:19:42 AM 10/3/2015 9:20:24 AM Edit | Details | Delete
1 Colors Colors <p>CSS3 brings with it support for some new ways of describing colors on the page. </p> <p>Before CSS3, colors are declared using hexadecimal format (#FFF, or #FFFFFF for white) or rgb() notation, providing either integers (0–255) or percentages or using named colors. </p> <p>example </p> <pre>hexadecimal - #FFFFFF rgb - rgb(255,255,255) or rgb(100%,100%,100%) named colors - purple, lime, aqua, red</pre> <p>CSS3 also provides us with a number of other options: HSL, HSLA, and RGBA. The most notable change with these new color types is the ability to declare semitransparent colors.</p> <tit>RGBA</tit> <p>RGBA works just like RGB, except that it adds a fourth value: alpha, the opacity level. The first three values represent red, green, and blue. For the alpha value, 1 means fully opaque, 0 is fully transparent, and 0.5 is 50% opaque. You can use any number between 0 and 1, inclusively. </p> <snpt>form { background: rgba(0,0,0,0.2) url(../images/bg-form.png) no-repeat bottom center; }</snpt> <tit>HSL</tit> <p>HSL stands for hue, saturation, and lightness. For HSL you need to manipulate the saturation or brightness of a color by changing all three color values in concert, with HSL you can tweak either just the saturation, or the lightness, while keeping the same base hue. </p> <p>The syntax for HSL comprises integer for hue, and percentage values for saturation and lightness. </p> <pre>HSL(hue, saturation, lightness)</pre> <p>Monitors display colors as RGB, the browser simply converts the HSL value you give it into one the monitor can display. </p> <p>The <code>hsl()</code> declaration accepts three values: </p> <table> <tr><th>Values</th><th>Description</th></tr><tr><td><i>hue</i></td><td>in degrees from 0 to 359. examples: 0 = red, 60 = yellow, 120 = green, 180 = cyan, 240 = blue, and 300 = magenta. You can use any value in between.</td></tr><tr><td><i>saturation</i></td><td>as a percentage. 100% is the norm for saturation. Saturation of 100% will be the full hue, and saturation of 0 will give you a shade of gray—essentially causing the hue value to be ignored.</td></tr><tr><td><i>lightness</i></td><td>A percentage for lightness, with 50% being the norm. Lightness of 100% will be white, 50% will be the actual hue, and 0% will be black.</td></tr></table> <snpt>hsl(0,100%,13%)</snpt> <tit>HSLA</tit> <p>HSL also allows for an opacity value. HSLA is similar to HSL, just in additional it accepts the fourth opacity value. </p> <pre>HSLA(hue, saturation, lightness, opacity)</pre> <table> <tr><th>Values</th><th>Description</th></tr><tr><td><i>hue</i></td><td>in degrees from 0 to 359. examples: 0 = red, 60 = yellow, 120 = green, 180 = cyan, 240 = blue, and 300 = magenta. You can use any value in between.</td></tr><tr><td><i>saturation</i></td><td>as a percentage. 100% is the norm for saturation. Saturation of 100% will be the full hue, and saturation of 0 will give you a shade of gray—essentially causing the hue value to be ignored.</td></tr><tr><td><i>lightness</i></td><td>A percentage for lightness, with 50% being the norm. Lightness of 100% will be white, 50% will be the actual hue, and 0% will be black.</td></tr><tr><td><i>opacity</i></td><td>value between 0 and 1</td></tr></table> <snpt>hsla(300, 100%, 50%, 0.5)</snpt> <p>It is magenta with full saturation and normal lightness, which is 50% opaque.</p> <snpt>hsla(0,100%,13%,1.0)</snpt> css Colors 1 1 10/3/2015 9:32:13 AM 12/18/2018 5:42:04 PM Edit | Details | Delete
1 RGBA RGBA RGBA works just like RGB, except that it adds a fourth value: alpha, the opacity level. The first three values represent red, green, and blue. For the alpha value, 1 means fully opaque, 0 is fully transparent, and 0.5 is 50% opaque. You can use any number between 0 and 1, inclusively.<br /><br /><snpt>form {<br /> background: rgba(0,0,0,0.2) url(../images/bg-form.png) no-repeat<br /> bottom center;<br />}</snpt> RGBA 1 1 10/3/2015 9:39:17 AM 10/3/2015 9:39:17 AM Edit | Details | Delete
1 HSL HSL HSL stands for hue, saturation, and lightness. For HSL you need to manipulate the saturation or brightness of a color by changing all three color values in concert, with HSL you can tweak either just the saturation, or the lightness, while keeping the same base hue. <br /><br />The syntax for HSL comprises integer for hue, and percentage values for saturation and lightness.<br /><pre>HSL(hue, saturation, lightness)</pre><br /><br />Monitors display colors as RGB, the browser simply converts the HSL value you give it into one the monitor can display.<br /><br />The <code>hsl()</code> declaration accepts three values:<br /><table><br /><tr><td><i>hue</i></td><td>in degrees from 0 to 359. examples: 0 = red, 60 = yellow, 120 = green, 180 = cyan, 240 = blue, and 300 = magenta. You can use any value in between.</td></tr><tr><td><i>saturation</i></td><td>as a percentage. 100% is the norm for saturation. Saturation of 100% will be the full hue, and saturation of 0 will give you a shade of gray—essentially causing the hue value to be ignored.</td></tr><tr><td><i>lightness</i></td><td>A percentage for lightness, with 50% being the norm. Lightness of 100% will be white, 50% will be the actual hue, and 0% will be black.</td></tr></table><br /><snpt>hsl(0,100%,13%)</snpt> HSL 1 1 10/3/2015 9:49:38 AM 10/3/2015 7:18:08 PM Edit | Details | Delete
1 HSLA HSLA HSL also allows for an opacity value. HSLA is similar to HSL, just in additional it accepts the fourth opacity value.<br /><br /><pre>HSLA(hue, saturation, lightness, opacity)</pre><br /><table><br /><tr><td><i>hue</i></td><td>in degrees from 0 to 359. examples: 0 = red, 60 = yellow, 120 = green, 180 = cyan, 240 = blue, and 300 = magenta. You can use any value in between.</td></tr><tr><td><i>saturation</i></td><td>as a percentage. 100% is the norm for saturation. Saturation of 100% will be the full hue, and saturation of 0 will give you a shade of gray—essentially causing the hue value to be ignored.</td></tr><tr><td><i>lightness</i></td><td>A percentage for lightness, with 50% being the norm. Lightness of 100% will be white, 50% will be the actual hue, and 0% will be black.</td></tr><tr><td><i>opacity</i></td><td>value between 0 and 1</td></tr></table><br /><snpt>hsla(300, 100%, 50%, 0.5)</snpt><br />It is magenta with full saturation and normal lightness, which is 50% opaque.<br /><snpt>hsla(0,100%,13%,1.0)</snpt> HSLA 1 1 10/3/2015 9:55:51 AM 10/3/2015 7:16:54 PM Edit | Details | Delete
1 Transitions Transitions <p>Transforms can be fun when they really bring your page to life when coupled with a CSS3 transition. A transition is simply an animation from one set of CSS properties to another set over a specific amount of time. </p> <p>Transitions allow the values of CSS properties to change over time, essentially providing simple animations. For example, if a link changes color on hover, you can have it gradually fade from one color to the other, instead of a sudden change. </p> <p>Here are the steps to create a simple transition using only CSS: </p> <ol> <li>Initial Style - Declare the original state of the element in the default style declaration. </li><li>Final Style - Declare the final state of your transitioned element; for example, in a hover state. </li><li>Include the transition functions in your default style declaration, using a few different properties: transition-property, transition-duration, transition-timing-function, and transition-delay.</li></ol> <p>The important point to note is that the transition is declared in the default state. Currently, the transition functions need to include the vendor prefixes -webkit-, -o-, and -moz-, for WebKit, Opera, and Firefox, respectively.</p> <tit>transition-property</tit> <p>The transition-property lists the CSS properties of the element that should be transitioned. The different possible values are all (all the properties are animated by a transition), none(no properties are animated by a transition), or a specific property. </p> <p>Properties that can be made to transition include background, border, and box model properties. You can transition font sizes and weights, but not font families. </p> <pre>transition-property:width;</pre> ■ background-color and background-position ■ border-color, border-spacing, and border-width ■ bottom, top, left, and right ■ clip ■ color ■ crop ■ font-size and font-weight ■ height and width ■ letter-spacing ■ line-height ■ margin ■ max-height, max-width, min-height, and min-width ■ opacity ■ outline-color, outline-offset, and outline-width ■ padding ■ text-indent ■ text-shadow ■ vertical-align ■ visibility ■ word-spacing ■ z-index <snpt>#ad2 h1 span { -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; CSS3 Transforms and Transitions 185 -o-transition-property: -o-transform; transition-property: transform; }</snpt> <tit>transition-duration</tit> <p>The transition-duration property defines the duration elapsed from the starting state to the new one. It is expressed in seconds, s, or milliseconds, ms. </p> <snpt>-webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; -o-transition-duration: 0.2s; transition-duration: 0.2s;</snpt> <tit>transition-timing-function</tit> <p>The <code>transition-timing-function</code> property defines how the speed will be calculated during the transition and allows for a transition to change speed over its duration. </p> <p>The possible values are : </p> <table> <tr><th width="160">Values</th><th>Description</th></tr><tr><td><code>ease</code></td><td>starts slowly, and then goes fast and ends slowly</td></tr><tr><td><code>linear</code></td><td>goes at the same speed from start to end</td></tr><tr><td><code>ease-in</code></td><td>start slowly</td></tr><tr><td><code>ease-out</code></td><td>ends slowly</td></tr><tr><td><code>ease-in-out</code></td><td>starts slowly and ends with a slight speed difference from the ease value</td></tr><tr><td><code>cubic-bezier</code></td><td>The cubicbezier timing function requires four numeric values to calculate the speed of your transition. In fact, all timing function values are defined by using a specific cubic-bezier curve, which is itself defined by four control points—for instance, the ease function is equivalent to cubic-bezier(0.25, 0.1, 0.25, 1.0).</td></tr></table> <p>Read more about them at http://en.wikipedia.org/wiki/B%C3%A9zier_curve#Cubic_B.C3.A9zier_curves). </p> <snpt>transition-timing-function:linear; transition-timing-function: cubic-bezier(0,0,1,1);</snpt> <p>Other examples:- </p> <snpt>-webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out;</snpt> <tit>transition-delay</tit> <p>The transition-delay property defines when the transition will start and is expressed in milliseconds (ms) or seconds (s). (The <i>default</i> value is <b>0</b>.) </p> <p>Normally, a transition begins immediately since the the default is 0. To delay the add include the number of milliseconds (ms) or seconds (s) to delay the transition: </p> <pre>transition-delay:2s;</pre> <p>Example: </p> <snpt>-webkit-transition-delay: 250ms; -moz-transition-delay: 250ms; -o-transition-delay: 250ms; transition-delay: 250ms;</snpt> <t1>Negative Delays</t1> <p>Giving a negative time delay that is less than the duration of the entire transition will cause it to start immediately, but it will start partway through the animation. </p> <p>For example, if you have a delay of -500ms on a 2s transition, the transition will start a quarter of the way through, and will last 1.5 seconds. It will create some interesting effects.</p> <tit>transition</tit> <p>The transition property is shorthand for the four transition functions (<code>transition-property</code>, <code>transition-duration</code>, <code>transition-timing-function</code> & <code>transition-delay</code>). </p> <p>The order of the values is important and must be as follows (though you don’t need to specify all four values): </p> <ol> <li>transition-property</li><li>transition-duration</li><li>transition-function</li><li>transition-delay</li></ol> <snpt>#ad2 h1 span { -webkit-transition-property: -webkit-transform, color; -moz-transition-property: -moz-transform, color; -o-transition-property: -o-transform, color; transition-property: transform, color; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; -o-transition-duration: 0.2s; transition-duration: 0.2s; -webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; }</snpt> <tit>Multiple Transitions</tit> <p>The transition properties allow for multiple transitions in one call. For example, if we want to change the color at the same time as changing the rotation and size, we can. </p> <snpt>transition-property: transform, color; transition-duration: 0.2s; transition-timing-function: ease-out;</snpt> <p>Specify different durations and timing functions for each property being animated. Simply include each value in a comma-separated list, using the same order as in your transition-property: </p> <snpt>transition-property: transform, color; transition-duration: 0.2s, 0.1s; transition-timing-function: ease-out, linear;</snpt> <p>The above properties will apply an ease-out transition over 0.2 seconds to the transform, but a linear transition over 0.1 seconds to the color. </p> <p>To have multiple transitions when using the transition property, specify all the values for each transition together, and separate each transition with commas: </p> <pre>transition: color 0.2s ease-out, transform 0.2s ease-out;</pre> <p>An example to change both properties at the same rate and delay. </p> <snpt>-webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out;</snpt> <p>Include the various transition properties to have various transition effects as a comma-separated list, including, at minimum, the transition-property and transition-duration for each.</p> css Transitions 1 1 10/3/2015 10:02:26 AM 12/18/2018 5:52:24 PM Edit | Details | Delete
1 transition-property transition-property The transition-property lists the CSS properties of the element that should be transitioned. The different possible values are all (all the properties are animated by a transition), none(no properties are animated by a transition), or a specific property. <br /><br />Properties that can be made to transition include background, border, and box model properties. You can transition font sizes and weights, but not font families.<br /><pre>transition-property:width;</pre><br /><br />■ background-color and background-position<br />■ border-color, border-spacing, and border-width<br />■ bottom, top, left, and right<br />■ clip<br />■ color<br />■ crop<br />■ font-size and font-weight<br />■ height and width<br />■ letter-spacing<br />■ line-height<br />■ margin<br />■ max-height, max-width, min-height, and min-width<br />■ opacity<br />■ outline-color, outline-offset, and outline-width<br />■ padding<br />■ text-indent<br />■ text-shadow<br />■ vertical-align<br />■ visibility<br />■ word-spacing<br />■ z-index<br /><br /><snpt>#ad2 h1 span {<br /> -webkit-transition-property: -webkit-transform;<br /> -moz-transition-property: -moz-transform;<br /> CSS3 Transforms and Transitions 185<br /> -o-transition-property: -o-transform;<br /> transition-property: transform;<br />}</snpt> transition-property 1 1 10/3/2015 10:04:35 AM 10/3/2015 10:04:35 AM Edit | Details | Delete
1 transition-duration transition-duration The transition-duration property defines the duration elapsed from the starting state to the new one. It is expressed in seconds, s, or milliseconds, ms.<br /><br /><snpt>-webkit-transition-duration: 0.2s;<br />-moz-transition-duration: 0.2s;<br />-o-transition-duration: 0.2s;<br />transition-duration: 0.2s;</snpt> transition-duration 1 1 10/3/2015 10:05:29 AM 10/3/2015 10:05:29 AM Edit | Details | Delete
1 transition-timing-function transition-timing-function The <code>transition-timing-function</code> property defines how the speed will be calculated during the transition and allows for a transition to change speed over its duration. <br /><br />The possible values are :<br /><table><br /><tr><td><code>ease</code></td><td>starts slowly, and then goes fast and ends slowly</td></tr><tr><td><code>linear</code></td><td>goes at the same speed from start to end</td></tr><tr><td><code>ease-in</code></td><td>start slowly</td></tr><tr><td><code>ease-out</code></td><td>ends slowly</td></tr><tr><td><code>ease-in-out</code></td><td>starts slowly and ends with a slight speed difference from the ease value</td></tr><tr><td><code>cubic-bezier</code></td><td>The cubicbezier timing function requires four numeric values to calculate the speed of your transition. In fact, all timing function values are defined by using a specific cubic-bezier curve, which is itself defined by four control points—for instance, the ease function is equivalent to cubic-bezier(0.25, 0.1, 0.25, 1.0).</td></tr></table><br />Read more about them at http://en.wikipedia.org/wiki/B%C3%A9zier_curve#Cubic_B.C3.A9zier_curves).<br /><snpt>transition-timing-function:linear;<br />transition-timing-function: cubic-bezier(0,0,1,1);</snpt><br /><br />Other examples:-<br /><snpt>-webkit-transition-timing-function: ease-out;<br />-moz-transition-timing-function: ease-out;<br />-o-transition-timing-function: ease-out;<br />transition-timing-function: ease-out;</snpt> transition-timing-function 1 1 10/3/2015 10:11:11 AM 10/3/2015 7:14:20 PM Edit | Details | Delete
1 transition-delay transition-delay The transition-delay property defines when the transition will start and is expressed in milliseconds (ms) or seconds (s). (The <i>default</i> value is <b>0</b>.)<br /><br />Normally, a transition begins immediately since the the default is 0. To delay the add include the number of milliseconds (ms) or seconds (s) to delay the transition:<br /><br /><pre>transition-delay:2s;</pre><br /><br />Example:<br /><snpt>-webkit-transition-delay: 250ms;<br />-moz-transition-delay: 250ms;<br />-o-transition-delay: 250ms;<br />transition-delay: 250ms;</snpt><br /><br /><tit>Negative Delays</tit><br />Giving a negative time delay that is less than the duration of the entire transition will cause it to start immediately, but it will start partway through the animation. <br /><br />For example, if you have a delay of -500ms on a 2s transition, the transition will start a quarter of the way through, and will last 1.5 seconds. It will create some interesting effects. transition-delay 1 1 10/3/2015 10:14:59 AM 10/3/2015 10:14:59 AM Edit | Details | Delete
1 transition transition The transition property is shorthand for the four transition functions (<code>transition-property</code>, <code>transition-duration</code>, <code>transition-timing-function</code> & <code>transition-delay</code>). <br /><br />The order of the values is important and must be as follows (though you don’t need to specify all four values):<br />1. transition-property<br />2. transition-duration<br />3. transition-function<br />4. transition-delay<br /><br /><snpt>#ad2 h1 span {<br /> -webkit-transition-property: -webkit-transform, color;<br /> -moz-transition-property: -moz-transform, color;<br /> -o-transition-property: -o-transform, color;<br /> transition-property: transform, color;<br /> -webkit-transition-duration: 0.2s;<br /> -moz-transition-duration: 0.2s;<br /> -o-transition-duration: 0.2s;<br /> transition-duration: 0.2s;<br /> -webkit-transition-timing-function: ease-out;<br /> -moz-transition-timing-function: ease-out;<br /> -o-transition-timing-function: ease-out;<br /> transition-timing-function: ease-out;<br />}</snpt> transition 1 1 10/3/2015 10:17:51 AM 10/3/2015 10:17:51 AM Edit | Details | Delete
1 Multiple Transitions Multiple Transitions The transition properties allow for multiple transitions in one call. For example, if we want to change the color at the same time as changing the rotation and size, we can.<br /><br /><snpt>transition-property: transform, color;<br />transition-duration: 0.2s;<br />transition-timing-function: ease-out;</snpt><br /><br />Specify different durations and timing functions for each property being animated. Simply include each value in a comma-separated list, using the same order as in your transition-property:<br /><snpt>transition-property: transform, color;<br />transition-duration: 0.2s, 0.1s;<br />transition-timing-function: ease-out, linear;</snpt><br /><br />The above properties will apply an ease-out transition over 0.2 seconds to the transform, but a linear transition over 0.1 seconds to the color.<br /><br />To have multiple transitions when using the transition property, specify all the values for each transition together, and separate each transition with commas:<br /><br /><pre>transition: color 0.2s ease-out, transform 0.2s ease-out;</pre><br /><br />An example to change both properties at the same rate and delay.<br /><snpt>-webkit-transition: all 0.2s ease-out;<br />-moz-transition: all 0.2s ease-out;<br />-o-transition: all 0.2s ease-out;<br />transition: all 0.2s ease-out;</snpt><br /><br />Include the various transition properties to have various transition effects as a comma-separated list, including, at minimum, the transition-property and transition-duration for each. Multiple Transitions 1 1 10/3/2015 10:20:41 AM 10/3/2015 10:20:41 AM Edit | Details | Delete
1 Border Radius Border Radius <p>The CSS3 border-radius property lets you create rounded corners without the need for images or additional markup.</p> <p>The basic syntax for the boder-radius:</p> <pre>border-radius: <i>&lt;border values&gt;</i>;</pre> <p><i>&lt;border values&gt;</i> - One, two, three, or four values <b>(px, em, or %)</b> that indicate the size of a radius of a circle drawn at the corners of an elements box.</p> <table> <tr><th width="150">Values</th><th>Description</th></tr><tr><td><i>One Value</i></td><td>All corners</td></tr><tr><td><i>Two Values</i></td><td>&lt;top-left and bottom-right&gt; ,&lt;top-right and bottom-left&gt;</td></tr><tr><td><i>Three Values</i></td><td>&lt;top-left&gt;, &lt;top-right and bottom-left&gt;, &lt;bottom-right&gt;</td></tr><tr><td><i>Four Values</i></td><td>&lt;border-top&gt;, &lt;border-right&gt;, &lt;border-bottom&gt;, &lt;border-left&gt;</td></tr></table> <p>Examples:</p> <snpt>border-radius: .5em; border-radius: 15px 5px; border-radius: 15px 5px 10px; border-radius: 15px 10px 25px 5px;</snpt> <p>Just like padding, margin, and border, you can adjust each value individually:</p> <snpt>border-top-left-radius: 5px; border-top-right-radius: 10px; border-bottom-right-radius: 15px; border-bottom-left-radius: 40px;</snpt> <p>The -moz- prefixed form for older versions of Firefox uses a slightly different syntax:</p> <snpt>-moz-border-radius-topleft: 5px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 15px; -moz-border-radius-bottomleft: 40px;</snpt> <p>Add a / followed by a second value to create an elliptical corner rather than a perfectly circular one.</p> <p>The below example will create four equal, elliptical corners.</p> <pre>border-radius: 20px / 10px;</pre> <p>The below example will create four unequal, elliptical corners.</p> <pre>border-radius: 5px 10px 15px 20px / 10px 20px 30px 40px;</pre> <p>The border-radius property can be applied to all elements, except the table element when the border-collapse property is set to collapse.</p> <p>Creating a round Corner button:-</p> <snpt>input[type=submit] { -moz-border-radius: 10%; border-radius: 10%; }</snpt> <p>The above CSS have used an attribute selector to target the submit input type, and we’ve used percentages instead of pixel values for the rounded corners.</p> css border-radius 1 1 10/3/2015 10:37:17 AM 12/18/2018 5:44:55 PM Edit | Details | Delete
1 Opacity Opacity CSS3 provides us the opacity property. opacity sets the opaqueness of the element on which it’s declared. Similar to alpha transparency, the opacity value is a floating point number between (and including) 0 and 1. An opacity value of 0 defines the element as fully transparent, whereas an opacity value of 1 means the element is fully opaque. example: <snpt>div.semiopaque { background-color: rgb(0, 0, 0); opacity: 0.5; color: #000000; } div.semiopaque { background-color: rgba(0, 0, 0, 0.5); color: #000000; }</snpt> The opacity sets the opacity value for an element and all of its children. Any text in the <i>semiopaque</i> div will also be 50% opaque. A semitransparent RGBA or HSLA color has no impact on elements other than the one it’s declared on. css opacity 1 1 10/3/2015 10:50:50 AM 12/18/2018 5:53:49 PM Edit | Details | Delete
1 Columns Columns <p>CSS3 introduces the multicolumn layout module: It lets you divide a single element (like a div full of text) into a three, four, or more columns. It provides CSS properties to determine the number of columns, the space between columns, and to add a line (a rule) between the columns. </p> <p>Imagine reading a newspaper and having the body copy extend across the entire page width. It would be easy to lose the line you were on, wouldn’t it? There is a reason newspapers break text into columns of text—it’s easier to read! Web pages are the same; a paragraph of text that stretches margin to margin of the full width of a browser window is harder to read than one that is confined to a narrower area. </p> <p>With CSS3 columns, the browser determines when to end one column and begin the next without requiring any extra markup. You retain the flexibility to change the number of columns as well as their width, without having to go back in and alter the page’s markup.</p> <tit>column-count</tit> <p>The column-count property specifies the number of columns desired, and the maximum number of columns allowed. The default value of auto means that the element has one column. Our leftmost articles are broken into three columns, and the article below the ad blocks has two columns: </p> <snpt>#primary article .content { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; } #tertiary article .content { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; }</snpt> <p>The columns will have a small gap between them. The total width of the columns combined with the gaps will take up 100% of the width of the element.</p> <tit>column-gap</tit> <p>The column-gap property specifies the width of the space between columns: </p> <snpt>#primary article .content, #tertiary article .content { -webkit-column-gap: 10px; -moz-column-gap: 10px; column-gap: 10px; }</snpt> <p>Width should be mentioned in length units, such as ems or pixels, or normal.It’s up to the browser to determine what normal means, but the spec suggests 1em. Our column gaps is given as 10px wide.</p> <tit>column-width</tit> <p>Th