http://www.doodlenerd.com

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><br /><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.<br /><br />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.<br /><br />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>.<br /><br /><tit>What you will Learn?</tit><br />With the HTML tutorial in <i>rookienerd.com</i>, you can learn and create your own Web site.<br /><br />You will enjoy learning HTML.<br /><br /><tit>HTML Examples</tit><br />Each tutorial has examples to learn and practice quickly.<br /><br /><tit>HTML References</tit><br />You will find complete references about tags, attributes, events, colornames, character-sets, URL encoding, language codes, HTTP messages, and more..<br /> Html 1 1 6/29/2013 6:23:40 AM 2/22/2017 5:16:36 PM Edit | Details | Delete
1 Understand Html Understand Html <tit>Understand Html</tit><br />The first step toward understanding and working with HTML is learning the basic terms that describe most of the functions of this language. <br /><br /><tit>Four Key Concepts</tit><br />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.<br /><br /><tit>Elements</tit><br />All HTML pages are made up of elements. An HTML element is everything from the start tag to the end tag. <br /><br />Example: heading element <code>&lt;h1&gt; &lt;/h1&gt;</code>, form element <code>&lt;form&gt; &lt;/form&gt;</code>.<br /><br /><tit>Tags</tit><br />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.<br /><br />For example, the opening and the closing tag for the paragraph element would look like this: <code>&lt;p&gt;&lt;/p&gt;</code><br /><br /><pre>&lt;p&gt;This is an HTML paragraph.&lt;/p&gt;</pre><br /> <br />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.<br /><br /><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></tip><br /> <br /><tit>Attributes and Values</tit><br />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.<br /><br /><t1>Syntax</t1><br /><pre>&lt;tag attribute=&quot;value&quot;&gt;(content to be modified by the tag)&lt;/tag&gt;</pre><br /><br />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.<br /><br /><pre>&lt;img <b>height=&quot;200&quot;</b> <b>width=&quot;300&quot;</b> /&gt;</pre><br /><br /><tit>Nesting</tit><br />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.<br /><br /><pre>&lt;p&gt; &lt;b&gt; &lt;i&gt; &lt;/i&gt; &lt;/b&gt; &lt;/p&gt;</pre><br /><br />The properly formatted structure is shown below<br /><br /><pre>&lt;p&gt;<br /> &lt;b&gt;<br /> &lt;i&gt;<br /> &lt;/i&gt;<br /> &lt;/b&gt;<br />&lt;/p&gt;</pre><br /><br />The below example is wrong. Overlapped elements can create garbled results.<br /><br /><pre>&lt;p&gt;<br /> &lt;b&gt;<br />&lt;/p&gt;<br /> &lt;i&gt;<br /> &lt;/b&gt;<br /> &lt;/i&gt;</pre><br /> Understand Html 1 1 6/29/2013 9:12:16 AM 2/1/2017 8:16:40 AM Edit | Details | Delete
1 Colors Colors Colors are used to define the color of a background or the color of the font.<br /><br />1. <i><b>Color Name</b></i> : "aqua, black, etc.,"<br /><br />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 2/1/2017 9:27:20 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><br /><br />If no style is specified for the text contained by the <body>..</body> tag, the text will be rendered as a default settings. Html Physical Style 1 1 3/31/2014 5:53:20 PM 11/10/2014 12:42:57 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 The logical styles of text are used to add a specific destination to a specific block of text.<br /><br /><table><br /><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>,<br /><c>&lt;code&gt;</c>,<c>&lt;samp&gt;</c>,<c>&lt;acronym&gt;</c>,<br /><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> Logical Style elements 1 1 4/1/2014 5:57:31 PM 1/31/2017 8:25:38 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.<br /><br />- Unordered List<br />- Ordered List<br />- Definition Lists<br />- Menu Lists<br />- Directory Lists Lists 1 1 4/4/2014 5:33:31 PM 11/10/2014 12:36:46 PM 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 The webpages supports multimedia which allows you to insert images, sounds animations, movies and other mutimedia content into the webpage.<br /><br /><tit>Supported Images</tit><br />gif<br />jpeg<br />png<br />tiff<br />bmp(Internet Explorer) Html Images 1 1 4/5/2014 5:59:50 PM 11/10/2014 12:33:43 PM 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.<br /><br />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.<br /><br />* Mouse cursor will be changed to "Hand image" when the user moves the mouse pointer over a link.<br />* Use <code>&lt;TAB&gt;</code> key to navigate between the links on the web page. <br />* An active link will be rendered as a rectangle around the active link. Only one link will be active at a time.<br /><br /><br /><snpt>&lt;html&gt;&lt;head&gt;&lt;/head&gt;&lt;body&gt;<br />Click on the below link to follow the link<br />&lt;a href=&quot;http://www.quotefellas.com&quot;&gt;Quote Fellas&lt;/a&gt;<br />&lt;/body&gt;&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">Quote Fellas</a></body></html></outi> html links 1 1 4/6/2014 5:09:00 AM 3/10/2015 6:07:13 PM 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.<br /><br /><tit>Defining the anchor</tit><br />* Using the <code>&lt;a&gt;..&lt;/a&gt;</code> element together with the name attribute.<br /><eg><a name="name_value">Your Text</a></eg><br /><br />*Using any HTML element together with the universal attribute id.<br /><eg><a id="id_value"></eg><br /><br />#name_value<br />#id_value<br /><br /><snpt><br />&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;#p1&quot; id=&quot;p1&quot;&gt;Link to Paragraph 1&lt;/a&gt;&lt;br /&gt;<br />&lt;a href=&quot;#p2&quot; id=&quot;p2&quot;&gt;Link to Paragraph 2&lt;/a&gt;&lt;br /&gt;<br />&lt;a href=&quot;#p3&quot; id=&quot;p3&quot;&gt;Link to Paragraph 3&lt;/a&gt;&lt;br /&gt;<br />&lt;a href=&quot;#p4&quot; id=&quot;p4&quot;&gt;Link to Paragraph 4&lt;/a&gt;&lt;br /&gt;<br /><br />&lt;p id=&quot;p1&quot;&gt;Text of the Paragraph 1&lt;/p&gt;&lt;br /&gt;<br />&lt;p id=&quot;p2&quot;&gt;Text of the Paragraph 2&lt;/p&gt;&lt;br /&gt;<br />&lt;p id=&quot;p3&quot;&gt;Text of the Paragraph 3&lt;/p&gt;&lt;br /&gt;<br />&lt;p id=&quot;p4&quot;&gt;Text of the Paragraph 4&lt;/p&gt;&lt;br /&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="#p1" id="p1">Link to Paragraph 1</a><br /><a href="#p2" id="p2">Link to Paragraph 2</a><br /><a href="#p3" id="p3">Link to Paragraph 3</a><br /><a href="#p4" id="p4">Link to Paragraph 4</a><br /><p id="p1">Text of the Paragraph 1</p><br /><p id="p2">Text of the Paragraph 2</p><br /><p id="p3">Text of the Paragraph 3</p><br /><p id="p4">Text of the Paragraph 4</p><br /></body></html></outi><br /><br /><tit>Anchors for the external file</tit><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;page.html#p3&quot;&gt;This link to an anchor defined in an external file&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="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 11/10/2014 12:35:55 PM Edit | Details | Delete
1 Image Maps Image Maps Images can be used to define a link.<br /><br /><pre>&lt;a href=&quot;page.html&quot;&gt;<br />&lt;img src=logo.jpg&quot;&gt;&lt;/a&gt;<br />&lt;a href=&quot;page2.html&quot;&gt;</pre><br /><br /><pre>&lt;img src=logo2.jpg&quot;&gt;&lt;/a&gt;</pre><br /><br />Here single link is attached to each image.<br /><br /><tit>Image Maps</tit><br />The image map allows to define multiple links using a single image.<br /><br />* 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.<br />* 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.<br /> <code>&lt;map name=&quot;map_name&quot;&gt;..&lt;/map&gt;</code><br />* 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.<br /> <br />The attributes of the <code>&lt;area&gt;</code> element are given below.<br /><table><br /><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><br /><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><br /><br /><snpt>&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;page2.html&quot; shape=&quot;rect&quot; coords=&quot;200,200,300,300&quot;&gt;<br />&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;<br />&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;<br />&lt;area href=&quot;page2.html&quot; shape=&quot;rect&quot; coords=&quot;200,200,300,300&quot; target=&quot;new_window&quot;&gt;<br />&lt;/map&gt;</snpt><br /> html Image Maps 1 1 1 4/6/2014 6:02:00 AM 1/31/2017 12:08:24 PM 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 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.<br /> <br /><note>Metadata is not rendered by the browser.<br />Metadata can transfer useful information to browsers, servers and users.<br />Metadata can be read and organised by internet robots and search engines.</note> html metadata 1 1 1 4/6/2014 6:58:37 AM 3/10/2015 6:18:46 PM 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 Multimedia refers to data and applications in any format or media html Multimedia 1 1 1 4/6/2014 9:10:06 AM 11/10/2014 12:41:40 PM 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.<br /><br /> html Frames 1 1 4/6/2014 10:21:30 AM 11/9/2014 8:14:47 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.<br /><br /><snpt>&lt;html&gt;<br />&lt;head&gt;&lt;/head&gt;<br />This is the text before the iframe<br />&lt;iframe src=&quot;page1.html&quot; align=&quot;left&quot;&gt;iframe1&lt;/iframe&gt;<br />&lt;iframe src=&quot;page2.html&quot; align=&quot;right&quot; width=&quot;350&quot; height=&quot;200&quot;&gt;iframe2&lt;/iframe&gt;<br />&lt;html&gt;</snpt><br /><br /><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 11/9/2014 8:14:46 AM Edit | Details | Delete
1 html Forms html Forms 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. html Forms 1 1 4/7/2014 6:45:52 PM 11/7/2014 9:40:46 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><br />&lt;html&gt;<br />&lt;head&gt;&lt;/head&gt;<br />&lt;body&gt;<br />&lt;table&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 /><br /><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> html tables 1 1 4/9/2014 8:02:18 PM 11/10/2014 12:44:09 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 Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents. <br /><br />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.<br /><br /><tit>What you will Learn?</tit><br />With the CSS tutorial in rookienerd.com, you can learn and create your own Web site.<br /><br />You will enjoy learning HTML.<br /><br /><tit>CSS Examples</tit><br />Each tutorial has examples to learn and practice quickly.<br /><br /><tit>CSS References</tit><br />You will find complete references of all properties and selectors with syntax, examples, browser support, and more. css Cascading Style sheets 1 1 4/15/2014 6:59:37 PM 2/22/2017 5:20:52 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 CSS allows you to refine font characteristics using various properties and values. css Fonts 1 1 4/15/2014 7:28:24 PM 4/15/2014 7:28:24 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 CSS allows to set various properties for text such as characters, spaces, words and paragraph. Text 1 1 4/16/2014 6:29:41 PM 4/16/2014 6:29:41 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 The <code>display</code> property applies to all HTML, elements and determines both the in-line and block level behaviour.<br /><br />The possible values are.<br /><table><br /><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><br /><br /><tit>(i) inline</tit><br /><t1>Example</t1><br /><pre>*{ display: inline }</pre><br /><br /><t1>Output</t1><br />- 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.<br /><br /><snpt>&lt;html&gt;<br />&lt;head&gt;<br /> &lt;style&gt;<br /> *{display:inline}<br /> &lt;/style&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br /> &lt;form&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; The below unordered list will not be visible in the browser.<br /> &lt;ul&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><br /><br /><tit>(ii) block</tit><br /><t1>Example</t1><br /><pre>*{ display: block }</pre><br /><br /><t1>Output</t1><br />- A block box is generated for each element.<br />- Each element starts in a new line-type box.<br /><br /><snpt>&lt;html&gt;<br />&lt;head&gt;<br /> &lt;style&gt;<br /> *{display:block}<br /> &lt;/style&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br /> &lt;form&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; The below unordered list will not be visible in the browser.<br /> &lt;ul&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><br /><br /><tit>(iii) none</tit><br /><t1>Example</t1><br /><pre>ol, table{ display: none }</pre><br /><br /><t1>Output</t1><br />The none of the &lt;<i>ol</i>&gt; &lt;<i>table</i>&gt; elements are rendered.<br /><br /><snpt>&lt;html&gt;<br />&lt;head&gt;<br /> &lt;style&gt;<br /> *{display:none}<br /> &lt;/style&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br /> &lt;form&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; The below unordered list will not be visible in the browser.<br /> &lt;ul&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 display 3 1 4/16/2014 7:13:33 PM 10/24/2015 10:45:08 AM 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 Tables require special attention in css because they are organized structures. Link for tables.<br />When the <code>&lt;table&gt;</code> element is rendered, it generates a block-level box by default. Html Tables 1 1 4/20/2014 5:13:11 PM 10/24/2015 10:40:26 AM 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 The <code>background-color</code> property property is used to set up the background color of the box.<br /><br />The possible values for css color specifications are:<br /><table><br /><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><br /><br /><snpt>&lt;html&gt;<br />&lt;head&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br /> &lt;p style=&quot;background-color: rgb(100, 200, 0)&quot;&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 style=&quot;background-color: #00ff00&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;/div&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt> css background-color 9 1 4/21/2014 7:13:20 PM 10/24/2015 10:48:56 AM 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 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.<br /><snpt>&lt;html&gt;<br />&lt;head&gt;<br /> &lt;style&gt;<br /> p{ display: list-item}<br /> &lt;/style&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br /> &lt;form&gt;<br /> &lt;p&gt;paragraph 1&lt;/p&gt;<br /> &lt;p&gt;paragraph 2&lt;/p&gt;<br /> &lt;p&gt;paragraph 3&lt;/p&gt;<br /> &lt;p&gt;paragraph 4&lt;/p&gt;<br /> &lt;/form&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt> css list-item elements 1 1 4/21/2014 7:28:19 PM 10/24/2015 10:32:52 AM 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.<br /><br />The values of <code>font-variant</code> are.<br /><table><br /><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><br /><t1>example</t1><br /><pre> font-variant : normal<br /> font-variant : small-caps</pre><br /><br /><snpt>&lt;html&gt;<br />&lt;head&gt;<br /> &lt;style&gt;<br /> p {font-style:normal;}<br /> div {font-style:small-caps}<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;/body&gt;<br />&lt;/html&gt;</snpt><br /><br /><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 10/24/2015 1:01:53 PM Edit | Details | Delete
1 Floating Boxes Floating Boxes 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.<br /><br />The possible values are<br /><table><br /><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><br /><br /><t1>Example</t1><br /><pre>img{ float: right } /*makes all images to float on right*/<br />ul{ float: left } /*makes all unordered lists to float on left*/</pre><br /><br /><t1>How it Works</t1><br />When float object is met, the following things happen.<br /><br />-The normal flow is stopped, and the browser puts a virtual marker to indicate the point where the normal flow was stopped<br />-The floating object is rendered in the specified position (right or left), starting on the next line with the default or specified dimensions<br />-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<br /><br /><snpt>&lt;html&gt;<br />&lt;head&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br /> &lt;div&gt;<br /> &lt;img url=&quot;star.png&quot; style=&quot;float:left&quot;&gt;<br /> &lt;ul style=&quot;float:right&quot;&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;/div&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt> Floating Boxes 4 1 4/22/2014 6:48:38 PM 10/24/2015 10:45:08 AM Edit | Details | Delete
1 clear property clear property 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.<br /><br />The possible values are<br /><table><br /><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><br /><br /><t1>Example</t1><br /><eg>&lt;h2&gt;heading&lt;h2&gt;</eg><br /><br /><snpt>&lt;h2 style=&quot;clear: left;&quot;&gt;heading 2&lt;/h2&gt;</snpt><br /><br /><t1>Note</t1><br /><note>The top edge of the &lt;h2&gt; box is moved below the bottom edge of the &lt;ol&gt; box<br />The right side of the &lt;h2&gt; element is not yet cleared<br />The &#39;clear&#39; property can be attached to a floating object to render it on a single line.</note><br /><br /><snpt>&lt;html&gt;<br />&lt;head&gt;<br /> &lt;style&gt;<br /> span{border:1px solid #000000}<br /> &lt;/style&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br /> Without Clear<br /> &lt;div&gt;<br /> &lt;img url=&quot;star.png&quot; style=&quot;float:left&quot;&gt; &lt;span&gt;span text1&lt;/span&gt;<br /> &lt;img url=&quot;star.png&quot; style=&quot;float:right&quot;&gt; &lt;span&gt;span text2&lt;/span&gt;<br /> &lt;span&gt;span text3&lt;/span&gt;<br /> &lt;/div&gt;<br /> Clear floating objects<br /> &lt;div&gt;<br /> &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;<br /> &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;<br /> &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;<br /> &lt;span&gt; style=&quot;clear: both&quot;&gt;span text3&lt;/span&gt;<br /> &lt;/div&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt><br /> clear property 6 1 4/22/2014 6:51:57 PM 10/24/2015 10:45:08 AM Edit | Details | Delete
1 Positioning elements Positioning elements Css allows to define exactly where an element should be rendered.<br /><br />The possible values are.<br /><table><br /><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><br /><br />Notes<br /><note>- The element is positioned when the <code>position</code> property is set to any value other than static<br />- The edges of the box corresponding to the positioned element are defined by the following properties</note><br /><br /><table><br /><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><br /><br /> The possible values are<br /><table><br /><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> Positioning elements 7 1 4/22/2014 6:54:28 PM 10/24/2015 10:45:08 AM 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 stack of layers stack of layers stack of layers stack of layers 11 1 4/22/2014 6:58:36 PM 10/24/2015 10:45:08 AM Edit | Details | Delete
1 Stack of floating objects Stack of floating objects 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 objects 5 1 4/22/2014 6:59:41 PM 10/24/2015 10:45:08 AM 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.<br /><br /><c>audio</c> and <c>video</c> have attributes, events and methods you can manipulate with Java-Script.<br /><table><br /><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><br /><br /><t1>Example</t1><br />The following code allows the user to jump to specific time on a audio file.<br /><br /><snpt>&lt;audio&gt;<br /> &lt;source src=&quot;audio.ogg&quot;&gt;<br /> &lt;source src=&quot;audio.mp3&quot;&gt;<br />&lt;/audio&gt;<br />&lt;button title=&quot;Play at 30 seconds&quot; onclick=&quot;playAt(30);&quot;&gt;30 seconds&lt;/button&gt;<br />&lt;script&gt;<br /> function playAt(seconds) {<br /> var audio = document.getElementsByTagName(&quot;audio&quot;)[0];<br /> audio.currentTime = seconds;<br /> audio.play();<br /> }<br />&lt;/script&gt;</snpt><br /><br /><t1>Example</t1><br />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>.<br /><br /><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 2/21/2017 6:39:55 PM 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 CSS3 is the latest standard for CSS, the syntax to control the style and layout of web pages.<br /><br />CSS3 is completely backward-compatible, so you will not have to change your existing designs.<br /><br />The CSS3 specification is made up of several “modules”, such as the following ones:<br /><br />* Selectors<br />* Box Model<br />* Backgrounds and Borders<br />* Text Effects<br />* 2D/3D Transformations<br />* Animations<br />* Multiple Column Layout<br />* User Interface<br /><br /><tit>What you will Learn?</tit><br />With the CSS3 tutorial in rookienerd.com, you can learn and create your own Web site.<br /><br />You will enjoy learning HTML.<br /><br /><tit>CSS3 Examples</tit><br />Each tutorial has examples to learn and practice quickly.<br /><br /><tit>CSS3 References</tit><br />You will find complete references of all properties and selectors with syntax, examples, browser support, and more. css3 introduction 1 1 10/3/2015 6:06:19 AM 2/22/2017 5:30:08 PM Edit | Details | Delete
1 Introduction Introduction 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.<br /><br />* Drop Shadows<br />* Inset and Multiple Shadows<br />* Text Shadow<br /> css3 shadows introduction 1 1 10/3/2015 6:14:24 AM 10/3/2015 6:14:24 AM 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 Introduction Introduction 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.<br /><br />CSS3 has the ability to create radial and linear gradients, as well as multiple background images on any element.<br /><br />There are two types of gradients currently available in CSS3: <br /><br />1.linear gradient<br />2.radial gradient css3 Gradients introduction 1 1 10/3/2015 6:37:41 AM 10/3/2015 6:37:41 AM 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 CSS3 supports multiple background images which means it provides us with the ability to add more than one background image to any element.<br /><br />Before CSS3, adding the multiple background image required placing an additional element in the markup to contain the new background image.<br /><br />Old CSS way<br /><snpt>&lt;body&gt;<br /> &lt;div id=&quot;midground&quot;&gt;<br /> &lt;div id=&quot;foreground&quot;&gt;<br /> &lt;!-- page content here --&gt;<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br />&lt;/body&gt;<br /><br />/*css style */<br />body {<br /> background: url(vines-back.png) repeat-x 20% 0;<br />}<br /> #midground {<br /> background: url(vines-mid.png) repeat-x 40% 0;<br />}<br /> #foreground {<br /> background: url(vines-front.png) repeat-x 150% 0;<br />}</snpt><br /><br /><br />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. <br /><br /><tit>Multiple backgrounds syntax</tit><br />And here’s how simple it is to assign these four images as backgrounds of the body element, using the updated CSS3<br /><br /><snpt>background-image:<br /> url(firstImage.jpg),<br /> url(secondImage.gif),<br /> url(thirdImage.png);</snpt><br /><br />This works just as well if you’re using the shorthand background property:<br /><snpt>background:<br /> url(firstImage.jpg) no-repeat 0 0,<br /> url(secondImage.gif) no-repeat 100% 0,<br /> url(thirdImage.png) no-repeat 50% 0;</snpt><br /><br />syntax:<br /><snpt>body {<br /> background:<br /> url(../img/stars-1.png) repeat-x fixed -130% 0,<br /> url(../img/stars-2.png) repeat-x fixed 40% 0,<br /> url(../img/space-bg.png) repeat-x fixed -80% 0,<br /> url(../img/clouds.png) repeat-x fixed 100% 0;<br /> background-color: #1a1a1a;<br />}</snpt><br /><br />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. <br /><br />The default values for the various background properties are listed below:<br /><br />■ background-color: transparent;<br />■ background-image: none;<br />■ background-position: 0 0;<br />■ background-size: auto;<br />■ background-repeat: repeat;<br />■ background-clip: border-box;<br />■ background-origin: padding-box;<br />■ background-attachment: scroll<br /><br />We can include a gradient as one of several background images.<br /><snpt>#ad2 {<br />background-image:<br />url(../images/bg-bike.png),<br /> linear-gradient(top,<br /> rgba(0,0,0,0.4) 0,<br /> rgba(0,0,0,0) 37%,<br /> rgba(0,0,0,0) 83%,<br /> rgba(0,0,0,0.06) 92%,<br /> rgba(0,0,0,0) 98%);<br /> background-position: 50% 88%, 0 0;<br />}</snpt> css3 Multiple Backgrounds 1 1 10/3/2015 8:04:19 AM 10/3/2015 8:05:44 AM 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 Trasform Methods Trasform Methods With CSS3, you now have the capability to perform several transformations, in two-dimensional (2D) space, on document elements.<br /><br />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>.<br /><br />The basic syntax for transform:<br /><pre>transform: transform function(value);</pre><br />The transform functions applied to an HTML document<br /><table><br /><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> css3 Trasform Methods 1 1 10/3/2015 8:49:10 AM 10/3/2015 7:12:51 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 Introduction Introduction CSS3 brings with it support for some new ways of describing colors on the page.<br /><br />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.<br /><br />example<br /><pre>hexadecimal - #FFFFFF<br />rgb - rgb(255,255,255) or rgb(100%,100%,100%)<br />named colors - purple, lime, aqua, red</pre><br /><br />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. Introduction 1 1 10/3/2015 9:32:13 AM 10/3/2015 9:33:32 AM 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 Introduction Introduction 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.<br /><br />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.<br /><br />Here are the steps to create a simple transition using only CSS:<br />1. Initial Style - Declare the original state of the element in the default style declaration.<br />2. Final Style - Declare the final state of your transitioned element; for example, in a hover state.<br />3. Include the transition functions in your default style declaration, using a few different properties: transition-property, transition-duration, transition-timing-function, and transition-delay. <br /><br />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. Introduction 1 1 10/3/2015 10:02:26 AM 10/3/2015 10:02:26 AM 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 The CSS3 border-radius property lets you create rounded corners without the need for images or additional markup.<br /><br />The basic syntax for the boder-radius:<br /><pre>border-radius: <i>&lt;border values&gt;</i>;</pre><br /><br /><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.<br /><table><br /><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><br />Examples:<br /><snpt>border-radius: .5em;<br />border-radius: 15px 5px;<br />border-radius: 15px 5px 10px;<br />border-radius: 15px 10px 25px 5px;</snpt><br /><br />Just like padding, margin, and border, you can adjust each value individually:<br /><snpt>border-top-left-radius: 5px;<br />border-top-right-radius: 10px;<br />border-bottom-right-radius: 15px;<br />border-bottom-left-radius: 40px;</snpt><br /><br />The -moz- prefixed form for older versions of Firefox uses a slightly different syntax:<br /><snpt>-moz-border-radius-topleft: 5px;<br />-moz-border-radius-topright: 10px;<br />-moz-border-radius-bottomright: 15px;<br />-moz-border-radius-bottomleft: 40px;</snpt><br /><br />Add a / followed by a second value to create an elliptical corner rather than a perfectly circular one.<br /><br />The below example will create four equal, elliptical corners.<br /><pre>border-radius: 20px / 10px;</pre><br /><br />The below example will create four unequal, elliptical corners.<br /><pre>border-radius: 5px 10px 15px 20px / 10px 20px 30px 40px;</pre><br /><br />The border-radius property can be applied to all elements, except the table element when the border-collapse property is set to collapse.<br /><br />Creating a round Corner button:-<br /><snpt>input[type=submit] {<br /> -moz-border-radius: 10%;<br /> border-radius: 10%;<br />}</snpt><br /><br />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. border-radius 1 1 10/3/2015 10:37:17 AM 10/3/2015 7:21:53 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.<br /><br />example:<br /><snpt>div.semiopaque {<br /> background-color: rgb(0, 0, 0);<br /> opacity: 0.5;<br /> color: #000000;<br />}<br /><br />div.semiopaque {<br /> background-color: rgba(0, 0, 0, 0.5);<br /> color: #000000;<br />}</snpt><br /><br />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.<br />A semitransparent RGBA or HSLA color has no impact on elements other than the one it’s declared on. opacity 1 1 10/3/2015 10:50:50 AM 10/3/2015 10:52:43 AM Edit | Details | Delete
1 Introduction Introduction 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.<br /><br />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.<br /><br />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. Introduction 1 1 10/3/2015 12:10:07 PM 10/3/2015 12:10:07 PM Edit | Details | Delete
1 column-count column-count 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:<br /><br /><snpt>#primary article .content {<br /> -webkit-column-count: 3;<br /> -moz-column-count: 3;<br /> column-count: 3;<br />}<br /><br />#tertiary article .content {<br /> -webkit-column-count: 2;<br /> -moz-column-count: 2;<br /> column-count: 2;<br />}</snpt><br /><br />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. column-count 1 1 10/3/2015 12:12:01 PM 10/3/2015 7:23:02 PM Edit | Details | Delete
1 column-gap column-gap The column-gap property specifies the width of the space between columns:<br /><br /><snpt>#primary article .content,<br />#tertiary article .content {<br /> -webkit-column-gap: 10px;<br /> -moz-column-gap: 10px;<br /> column-gap: 10px;<br />}</snpt><br /><br />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. column-gap 1 1 10/3/2015 12:13:16 PM 10/3/2015 12:13:16 PM Edit | Details | Delete
1 column-width column-width The <code>column-width</code> property is to set min-width for your columns. The browser will include as many columns of at least the given width as it can to fill up the element—up to the value of the column-count property. <br /><br />For example, if we have a parent that is 400 pixels wide, a 10-pixel column gap, and the column-width is declared as 150px, the browser can fit two columns:<br /><br /><pre>(400px width – 10px column gap) ÷ 150px width = 2.6</pre><br /><br />The browser rounds down to two columns, making columns that are as large as possible in the allotted space; in this case that’s 195px for each column—the total width minus the gap, divided by the number of columns. Even if the column-count were set to 3, there would still only be two columns, as there’s not enough space to include three columns of the specified width. So the column-count property specifies the maximum column count.<br /><br />If the parent element itself is too narrow for a single column of the specified width, the columns will be narrower than the column-width. So you’ll have one column that fills the whole parent element.<br /><br /><snpt>#primary article .content,<br />#tertiary article .content {<br /> -webkit-column-width: 9em;<br /> -moz-column-width: 9em;<br /> column-width: 9em;<br />}</snpt><br /><br />If you increase the font size in your browser, the number of columns will be decreased as required to maintain a minimum width. This ensures<br />readability.<br /><br />Note:<br /><note>Declare your column-width in ems, to ensure a minimum number of characters for each line in a column.</note> column-width 1 1 10/3/2015 12:15:27 PM 10/3/2015 12:15:27 PM Edit | Details | Delete
1 columns columns The columns shorthand property is a composite of the <code>column-width</code> and <code>column-count</code> properties.<br /><br /><snpt>#primary article .content {<br /> -webkit-columns: 3 9em;<br /> -moz-column-count: 3;<br /> -moz-column-width: 9em;<br /> column-count: 3;<br /> column-width: 9em;<br /> columns: 3 9em;<br />}</snpt> columns 1 1 10/3/2015 12:16:59 PM 10/3/2015 12:20:35 PM Edit | Details | Delete
1 column-fill column-fill - Columns and the height Property When the height property is set on a multicolumn block, each column will be only to that height and no further before a new column is added. The browser starts with the first column and creates as many columns as necessary, creating only the first column if there is minimal text. Finally,<br />if too little space is allocated, the content will overflow from the box—or be clipped if <code>overflow: hidden;</code> is set.<br /><br />To declare a height on your element, but would also like the content to be spread across your columns, you can use the column-fill property. The browser will balance the height of the columns as though there were no height declared. column-fill 1 1 10/3/2015 12:19:34 PM 10/3/2015 12:19:34 PM Edit | Details | Delete
1 column-rule column-rule Column rules are essentially borders between each column. The <snpt>column-rule</snpt> property specifies the <i>color</i>, <i>style</i>, and <i>width</i> of the column rules. The rule will appear in the middle of the column gap. <br /><br />This property is actually shorthand for the <code>column-rule-color</code>, <code>column-rule-style</code>, and <code>column-rule-width</code> properties.<br /><br />The syntax for the value is exactly the same as for border and the related border-width, border-style, and border-color properties. The width can be any length unit, just like border-width, including the key terms of medium, thick, and thin. And the color can be any supported color value.<br /><br /><snpt>-webkit-column-rule: 1px solid #CCCCCC;<br />-moz-column-rule: 1px solid #CCCCCC;<br />column-rule: 1px solid #CCCCCC;</snpt> column-rule 1 1 10/3/2015 12:23:51 PM 10/3/2015 12:23:51 PM Edit | Details | Delete
1 column-break column-break There are three column-breaking properties to define where column breaks should appear. The <code>break-before</code>, <code>break-after</code>, and <code>break-inside</code> properties take a limited number of key terms as values to define whether a column break can and should occur before, after, or inside an element, respectively. Rather than being applied to the same element on which we defined our primary column properties, they’re applied to other elements nested inside it.<br /><br />The values available are the same as for <code>page-break-after</code>, <code>page-break-before</code>, and <code>page-break-inside</code> in CSS 2.1: auto, always, avoid, left, and right. <br /><br />CSS3 also adds a few new possible values for these properties: <code>page</code>, <code>column</code>, <code>avoid-page</code>, and <code>avoid-column</code>. The page and column values function like always, and will force a break. The difference is that page will only force page breaks and column applies only to columns. This gives you a bit more flexibility in how you manage breaks. <code>avoid-page</code> and <code>avoid-column</code> are similar, except that they function like avoid.<br /><br />For example, you might want to avoid a column break occurring immediately after an h2 element in your content. <br /><snpt>.columns {<br /> column-count: 3;<br /> column-gap: 5px;<br />}<br />.columns h2 {<br /> break-after: avoid;<br />}</snpt><br /><br />Example<br /><snpt>-webkit-column-break-after: always;<br />-webkit-column-break-before: auto;<br />-webkit-column-break-inside: never;</snpt> column-break 1 1 10/3/2015 12:28:46 PM 10/3/2015 12:28:46 PM Edit | Details | Delete
1 column-span column-span The column-span property will make an element to span across several columns. If column-span: all; is set on an element, all content that comes<br />before that element in the markup should be in columns above that element. All content in columns appearing in the markup after the element should be in columns below the spanned element.<br /><br /><pre>-webkit-column-span</pre><br /><br />The columns may look ulgy when text with text-align: justify; is set in very narrow columns as the left and right edges stay justified. You can use a JavaScript library called Hyphenator16 to hyphenate words and keep our text looking tidy. column-span 1 1 10/3/2015 12:30:59 PM 10/3/2015 12:30:59 PM Edit | Details | Delete
1 Creating an animation Creating an animation CSS3 provides another, more feature-rich mechanism for creating animations. With CSS transitions, you can only animate from one set of CSS properties to another. CSS3 animations let you animate from one set of properties to another set to another set and so on. It allows you to control each step of an animation via keyframes. In addition, you can have an animation repeat, pause when a visitor mouses over it, and even reverse itself once the animation reaches its end.<br /><br /><tit>Steps in creating an animation</tit><br /><b>1.</b> Define the animation. This involves setting up keyframes that list the CSS properties to animate.<br /><b>2.</b> Apply the animation to an element. Once defined, you can apply the animation to any number of elements on a page. You can even set up separate timings, delays, and other animation properties for each element. So you can use the same animation with slightly different settings multiple times on a page. Creating an animation 1 1 10/3/2015 1:32:45 PM 10/3/2015 1:32:45 PM Edit | Details | Delete
1 Keyframes Keyframes To animate an element in CSS, you first create a named animation, then attach it to an element in that element’s property declaration block.<br /><br /><tit>Keyframe rule</tit><br />To create an animation, use the <code>@keyframes</code> rule followed by a name of your choosing, which will serve as the identifier for the animation.<br /><br />The syntax involved may look kind of strange, but here’s the basic structure:<br /><snpt>@keyframes animationName {<br /> from {<br /> /* list CSS properties here */<br /> }<br /> to {<br /> /* list CSS properties here */<br /> }<br />}</snpt><br /><br /><br />Keyframes can be specified in any order; it’s the percentage values, rather than the order of the declarations, that determine the sequence of keyframes in the animation.<br /><br />Here are a few simple animations:<br /><snpt>@-webkit-keyframes 'appear' {<br /> 0% {<br /> opacity: 0;<br /> }<br /> 100% {<br /> opacity: 1;<br /> }<br />}<br /> @-webkit-keyframes 'disappear' {<br /> to {<br /> opacity: 0;<br /> }<br /> from {<br /> opacity: 1;<br /> }<br />}<br /> @-webkit-keyframes 'appearDisappear' {<br /> 0%, 100% {<br /> opacity: 0;<br /> }<br /> 20%, 80% {<br /> opacity: 1;<br /> }<br />}</snpt><br /><br />The last animation is worth paying extra attention to: we’ve applied the same styles to 0% and 100%, and to 20% and 80%. It means the element will start out invisible (opacity: 0;), fade in to visible by 20% of the way through the duration, remain visible until 80%, then fade out. Keyframes 1 1 10/3/2015 1:33:27 PM 10/3/2015 1:34:44 PM Edit | Details | Delete
1 animation-name animation-name This property is used to attach an animation (defined using the @keyframes syntax previously) to an element.<br /><snpt>-webkit-animation-name: 'appear';</snpt><br /><br />Note that the quotes around the animation name in both the property value and the <code>@keyframe</code> selector are optional.We recommend including them to keep your styles as legible as possible, and to avoid conflicts. animation-name 1 1 10/3/2015 1:36:14 PM 10/3/2015 1:36:14 PM Edit | Details | Delete
1 animation-duration animation-duration The <code>animation-duration</code> property defines the length of time, in seconds or milliseconds, an animation takes to complete one iteration (all the way through, from 0% to 100%):<br /><snpt>-webkit-animation-duration: 300ms;</snpt> animation-duration 1 1 10/3/2015 1:37:04 PM 10/3/2015 1:38:15 PM Edit | Details | Delete
1 animation-timing-function animation-timing-function Like the <code>transition-timing-function</code> property, the <code>animation-timing-function</code> determines how the animation will progress over its duration. The options are the same as for <code>transition-timing-function</code> (<code>ease</code>, <code>linear</code>, <code>ease-in</code>, <code>ease-out</code>, <code>easein-out</code>, or <code>cubic-bezier</code>)<br /><snpt>-webkit-animation-timing-function: linear;</snpt> animation-timing-function 1 1 10/3/2015 1:42:48 PM 10/3/2015 1:42:48 PM Edit | Details | Delete
1 animation-iteration-count animation-iteration-count This property lets you define how many times the animation will play through. The value is generally an integer, but you can also use numbers with decimal points (in which case, the animation will end partway through a run), or the value infinite for endlessly repeating animations. If omitted, it will default to 1, in which case the animation will occur only once<br /><snpt>-webkit-animation-iteration-count: infinite;</snpt> animation-iteration-count 1 1 10/3/2015 1:44:27 PM 10/3/2015 1:44:27 PM Edit | Details | Delete
1 animation-direction animation-direction When the animation iterates, you can use the <code>animation-direction</code> property with the value alternate to make every other iteration play the animation backwards. For example, in a bouncing ball animation, you could provide keyframes for the falling ball, and then use <code>animation-direction: alternate;</code> to reverse it on every second play through.<br /><snpt>-webkit-animation-direction: alternate;</snpt><br /><br />The default is normal, so the animation will play forwards on each iteration. When animations are played in reverse, timing functions are also reversed; for example,<code>ease-in</code> becomes <code>ease-out</code>. animation-direction 1 1 10/3/2015 1:48:17 PM 10/3/2015 1:48:17 PM Edit | Details | Delete
1 animation-delay animation-delay Used to define how many milliseconds or seconds to wait before the browser begins the animation.<br /><snpt>-webkit-animation-delay: 15s;</snpt> animation-delay 1 1 10/3/2015 1:48:54 PM 10/3/2015 1:48:54 PM Edit | Details | Delete
1 animation-fill-mode animation-fill-mode The <code>animation-fill-mode</code> property defines what happens before the animation begins and after the animation concludes. By default, an animation won’t affect property values outside of its runs, but we can override this default behavior with animation-fill-mode . We can say the animation to "sit and wait" on the first keyframe until the animation starts, or stop on the last keyframe without reverting to the original values at the conclusion of the animation, or both.<br /><br />The available values are none, forwards, backwards, or both. The default is none, in which case the animation proceeds and ends as expected, reverting to the initial keyframes when the animation completes its final iteration. When set to forwards, the animation continues to apply the values of the last keyframes after the animation ends. When set to backwards, the animation’s initial keyframes are applied as soon as the animation style is applied to an element. Both applies both the backwards and forwards effects.<br /><snpt>-webkit-animation-fill-mode: forwards;</snpt> animation-fill-mode 1 1 10/3/2015 1:50:49 PM 10/3/2015 1:50:49 PM Edit | Details | Delete
1 animation-play-state animation-play-state The animation-play-state property defines whether the animation is running or paused. A paused animation displays the current state of the animation statically. When a paused animation is resumed, it restarts from the current position. This provides a simple way to control CSS animations from your JavaScript. animation-play-state 1 1 10/3/2015 1:52:23 PM 10/3/2015 1:52:23 PM Edit | Details | Delete
1 animation animation The animation property takes as its value a space-separated list of values for the longhand animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, and animation-fill-mode properties.<br /><snpt>.verbose {<br /> -webkit-animation-name: 'appear';<br /> -webkit-animation-duration: 300ms;<br /> -webkit-animation-timing-function: ease-in;<br /> -webkit-animation-iteration-count: 1;<br /> -webkit-animation-direction: alternate;<br /> -webkit-animation-delay: 5s;<br /> -webkit-animation-fill-mode: backwards;<br />}<br /><br />/* shorthand */<br />.concise {<br /> -webkit-animation: 'appear' 300ms ease-in 1 alternate 5s backwards;<br />}</snpt><br />To declare multiple animations on an element, include a grouping for each animation name, with each shorthand grouping separated by a comma. <br /><br />For example:<br /><snpt>.target {<br /> -webkit-animation:<br /> 'animationOne' 300ms ease-in 0s backwards,<br /> 'animationTwo' 600ms ease-out 1s forwards;<br />}</snpt> animation 1 1 10/3/2015 1:54:16 PM 10/3/2015 1:54:16 PM Edit | Details | Delete
1 Font formats Font formats Through <code>@font-face</code>, you can use the formats.<br /><table><br /><tr><th>StringFont</th><th>Format</th><th>Common extensions</th></tr><tr><td>woff</td><td>WOFF (Web Open Font Format)</td><td>.woff</td></tr><tr><td>truetype</td><td>TrueType</td><td>.ttf</td></tr><tr><td>opentype</td><td>OpenType</td><td>.ttf, .otf</td></tr><tr><td>embedded-opentype</td><td>Embedded OpenType</td><td>.eot</td></tr><tr><td>svg</td><td>SVG Font</td><td>.svg, .svgz</td></tr></table> Font formats 1 1 10/3/2015 3:45:29 PM 10/3/2015 7:24:26 PM Edit | Details | Delete
1 Introduction Introduction The most important new feature of CSS3 has been its full support of <code>@font-face</code>. Forget the classics like Arial or Verdana, now you can choose from a much wider range of fonts.<br /><br />Using font face we can embed fonts for text on our site, just as if they were installed on our users’ machines.<br /><br />These few lines of CSS syntax allow your font to be compatible with the following browsers:<br />■ Safari 5.03<br />■ Internet Explorer 6–9<br />■ Firefox 3.6.4<br />■ Chrome 8<br />■ iOS 3.2–4.2<br />■ Android 2.2–2.3<br />■ Opera 11 Introduction 1 1 10/3/2015 3:47:13 PM 10/3/2015 3:47:13 PM Edit | Details | Delete
1 @font-face @font-face <code>@font-face</code> is one of several CSS at-rules, like <code>@media</code>, <code>@import</code>, <code>@keyframes</code>. At-rules are ways of encapsulating several rules together in a declaration to serve as instructions to the browser’s CSS processor. <br /><br />To include fonts using <code>@font-face</code>, you have to:<br /><br /><b>1.</b> load the font file onto your servers in a variety of formats to support all the different browsers<br /><b>2.</b> name, describe, and link to that font in an @font-face rule<br /><b>3.</b> include the font’s name in a font-family property value, just as you would for system fonts<br /><br /><tit>@font-face syntax</tit><br /><pre>@font-face {<br /> font-family: &#39;&lt;fontName&gt;&#39;;<br /> src: &lt;source&gt;;<br /> font-weight: &lt;weight&gt;;<br /> font-style: &lt;style&gt;;<br />}</pre><br /><br />The font family and source are required, but the weight and style are optional.<br /><br />For every font you have to include a separate at-rule for each variation of the font—regular, thin, thick, italic, black, and so on.<br /><br />The <code>font-family</code> part of the <code>@font-face</code> at-rule declaration is slightly different from the font-family property with which you’re already familiar. In this case, we’re declaring a name for our font, rather than assigning a font with a given name to an element. <br /><br /><snpt>@font-face {<br /> font-family: 'LeagueGothic';<br />}<br /><br />@font-face {<br /> font-family: 'AcknowledgementMedium';<br />}</snpt><br /><tit>Declaring Font Sources</tit><br />The src property can take several formats. Additionally, you can declare more than one source.<br /><snpt>@font-face {<br />font-family: 'LeagueGothicRegular';<br /> src: url('../fonts/League_Gothic-webfont.eot') format('eot'),<br /> url('../fonts/League_Gothic-webfont.woff') format('woff'),<br /> url('../fonts/League_Gothic-webfont.ttf') format('truetype'),<br /> url('../fonts/League_Gothic-webfont.svg#webfontFHzvtkso') format('svg');<br />}</snpt><br /><br />Example:- <br /><snpt>@font-face {<br />font-family: MuseoSans;<br /> src:<br /> url("assets/type/museosans.eot") format("embedded-opentype"),<br /> url("assets/type/museosans.woff") format("woff"),<br /> url("assets/type/museosans.ttf") format("truetype");<br />}</snpt><br /><br />Tip: It is always wise to use the real font name. It will help you to keep your style sheet understandable.<br /><br />The first src defines the URL of the .eot file, which is necessary for compatibility with Internet Explorer (versions 5 through 9).<br /><pre>url("assets/type/museosans.woff") format("woff"),<br />url("assets/type/museosans.ttf") format("truetype");</pre><br /><br />The successive src attributes are needed to guarantee compatibility with all modern desktop and mobile browsers. The .WOFF format is used by Firefox, while the .TTF format is used by the browsers based on WebKit.<br /><br /><tit>Making the font work</tit><br />Rename the font defined with the attribute font-family inside your style sheet—for example, on the tag <code><body></code>.<br /><br /><snpt>body {<br /> font: 14px MuseoSans, "Helvetica Neue", Arial, sans-serif;<br />}</snpt> @font-face 1 1 10/3/2015 3:57:04 PM 10/3/2015 4:00:30 PM Edit | Details | Delete
1 Multiple web fonts Multiple web fonts We can use more than one font. The @font-face feature is extremely flexible, allowing you to upload different fonts or even different weights of the same font. <br /><br /><snpt>@font-face {<br />font-family: MuseoSans;<br />src:<br /> url( assets/type/museosans.eot) format("embedded-opentype"),<br /> url("assets/type/museosans.woff") format("woff"),<br /> url("assets/type/museosans.ttf") format("truetype");<br />}</snpt><br /><br /><tip>Tip: After creating versions of your typeface in a few different formats, get yourself organized by making a specific folder for each of them. You could proceed by creating a /type/ folder in your project</tip><br /><br /><snpt>@font-face {<br /> font-family: MyriadPro;<br /> src:<br /> url( assets/type/myriadpro.eot) format("embedded-opentype"),<br /> url("assets/type/myriadpro.woff") format("woff"),<br /> url("assets/type/myriadpro.ttf") format("truetype");<br />}</snpt><br /><br />We added the font MyriadPro to the list of available fonts through <code>@font-face</code>. Now take a look at how to use different font weights, adding the bold and italics versions of MuseoSans:<br /><snpt>@font-face {<br /> font-family: MuseoSans-Bold;<br /> src:<br /> url( assets/type/museosans-bold.eot) format("embedded-opentype"),<br /> url("assets/type/museosans-bold.woff") format("woff"),<br /> url("assets/type/museosans-bold.ttf") format("truetype");<br />}<br /><br />@font-face {<br /> font-family: MuseoSans-Italic;<br /> src:<br /> url( assets/type/museosans-italic.eot) format("embedded-opentype"),<br /> url("assets/type/museosans-italic.woff") format("woff"),<br /> url("assets/type/museosans-italic.ttf") format("truetype");<br />}</snpt><br /><br />It will be easy to recall these new web fonts in your style sheet:<br /><pre>h1 {<br /> font-family: MuseoSans-Bold, "Helvetica Neue ", Arial, sans-serif;<br />}<br />em {<br /> font-family: MuseoSans-Italic, "Helvetica Neue ", Arial, sans-serif;<br />}</pre><br />In this case, we used bold for the &lt;h1&gt; titles and italics for all the &lt;em&gt; tags.<br /><br />Note:-<br /><note>Adding these extra font formats ensures support for every browser, but unfortunately it will cause problems in versions of IE older than IE9. Those browsers will see everything between the first url(' and the last ') as one URL, so will fail to load the font. At first, it would seem that we’ve been given the choice between supporting IE and supporting every other browser, but fortunately there’s a solution.</note><br /><br />It involves adding a query string to the end of the EOT URL. This tricks the browser into thinking that the rest of the src property is a continuation of that query string, so it goes looking for the correct URL and loads the font:<br /><br /><snpt>@font-face {<br /> font-family: 'LeagueGothicRegular';<br /> src: url('../fonts/League_Gothic-webfont.eot?#iefix') format('eot'),<br /> url('../fonts/League_Gothic-webfont.woff') format('woff'),<br /> url('../fonts/League_Gothic-webfont.ttf') format('truetype'),<br /> url('../fonts/League_Gothic-webfont.svg#webfontFHzvtkso') format('svg');<br />}<br /><br />@font-face {<br /> font-family: 'LeagueGothicRegular';<br /> src: url('../fonts/League_Gothic-webfont.eot');<br /> src: url('../fonts/League_Gothic-webfont.eot?#iefix') format('eot'),<br /> url('../fonts/League_Gothic-webfont.woff') format('woff'),<br /> url('../fonts/League_Gothic-webfont.ttf') format('truetype'),<br /> url('../fonts/League_Gothic-webfont.svg#webfontFHzvtkso') format('svg');<br />}<br /></snpt><br />Alternatively, you could also force IE out of compatibility mode by adding this meta element to your document’s head:<br /><pre>&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=Edge&quot;&gt;</pre><br /><br />It’s also possible to achieve the same result by adding an extra HTTP header; this can be done with a directive in your <b>.htaccess</b> file (or equivalent):<br /><pre>&lt;IfModule mod_setenvif.c&gt;<br /> &lt;IfModule mod_headers.c&gt;<br /> BrowserMatch MSIE ie<br /> Header set X-UA-Compatible &quot;IE=Edge&quot;<br /> &lt;/IfModule&gt;<br />&lt;/IfModule&gt;</pre> Multiple web fonts 1 1 10/3/2015 4:08:23 PM 10/3/2015 4:10:58 PM Edit | Details | Delete
1 Font Property Descriptors Font Property Descriptors Font property descriptors—including <code>font-style</code>, <code>font-variant</code>, <code>font-weight</code>, and others—can optionally be added to define the characteristics of the font face, and are used to match styles to specific font faces.<br /><br /><snpt>@font-face {<br /> font-family: 'LeagueGothicRegular';<br /> src: url('../fonts/League_Gothic-webfont.eot');<br /> src: url('../fonts/League_Gothic-webfont.eot?#iefix') format('eot'),<br /> url('../fonts/League_Gothic-webfont.woff') format('woff'),<br /> url('../fonts/League_Gothic-webfont.ttf') format('truetype'),<br /> url('../fonts/League_Gothic-webfont.svg#webfontFHzvtkso') format('svg');<br /> font-weight: bold;<br /> font-style: normal;<br />}</snpt> Font Property Descriptors 1 1 10/3/2015 4:10:34 PM 10/3/2015 4:10:34 PM Edit | Details | Delete
1 Unicode Range Unicode Range Also available is the <code>unicode-range</code> descriptor, which is employed to define the range of Unicode characters supported by the font. If this property is omitted, the entire range of characters included in the font file will be made available.<br /><br /><pre>unicode-range: U+000-49F, U+2000-27FF, U+2900-2BFF, U+1D400-1D7FF;</pre> Unicode Range 1 1 10/3/2015 4:12:48 PM 10/3/2015 4:12:48 PM Edit | Details | Delete
1 Fallback fonts Fallback fonts CSS has a nifty feature when specifying a font family called a fallback font. Fallback fonts are used if the first font you specify is unavailable. If your second-choice font is not available, it tries the third one and so on. But not all fonts are the same. Each one comes with its own style, characters, and rendering options.<br /><br />There is a new CSS3 property that can perform the <code>font-size-adjust</code> as you want it when using multiple font. This property has been introduced with CSS Text Module 3.<br /><br />You can use the <code>font-size-adjust</code> property to control the size of the text more accurately in cases where the first font selected is not available, and thereby improve the appearance of the alternative font.<br /><br /><pre>p {<br /> font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif;<br />}</pre><br /> Fallback fonts 1 1 10/3/2015 4:15:28 PM 10/3/2015 4:15:28 PM Edit | Details | Delete
1 Font x-height Font x-height Each font to make it unique, there is the <code>x-height</code> value. In printing, this is a term that refers to the distance in a printed character between the baseline and the median line. In general, it corresponds to the height of the letter x of the font (it is from this that the term comes) because the other letters generally present optical corrections that increase their sizes.<br /><br />The <code>font-size-adjust</code> property allows you to specify an optimal aspect ratio for when a fallback font is used; if the substitute font has a different aspect ratio than the preferred one, the text’s x-height will be preserved. By knowing the aspect ratio of the primary font, the browser figures out what dimension of the text to apply to the alternative font, keeping the x-height unchanged.<br /><br /><tit>How to build it</tit><br />The CSS syntax is pretty easy: font-size-adjust: number | none | inherit;<br /><br />The possible values are the following:<br />■ number Defines the aspect ratio value to use<br />■ none The default value<br />■ inherit Inherits the font size adjustment from parent elements<br />You might be wondering how the aspect ratio value is calculated. The W3C specifications are very clear and provide a simple way of carrying out this calculation:<br /><pre>h1 {<br /> font-size: 60px;<br />}<br /><br />p {<br /> font-size: 14px;<br />}</pre><br />To make their display uniform, we need the font-size-adjust attribute:<br /><pre>.adjust {<br /> font-size-adjust: 0.48;<br />}</pre> Font x-height 1 1 10/3/2015 4:19:13 PM 10/3/2015 4:31:31 PM Edit | Details | Delete
1 Introduction Introduction With CSS3 media queries, you can do just that—create a layout that resizes to accommodate different screen resolutions.<br /><br />Media queries are the recent design trend called responsive web design. This is when all page elements, including images and widgets, are designed and coded to resize and realign seamlessly and elegantly, depending on the capabilities and dimensions of the user’s browser.<br /><br /><tit>Browser Support</tit><br />Support for media queries is very good:<br /><br />■ IE9+<br />■ Firefox 3.5+<br />■ Safari 3.2+<br />■ Chrome 8+<br />■ Opera 10.6+<br />■ iOS 3.2+<br />■ Opera Mini 5+<br />■ Opera Mobile 10+<br />■ Android 2.1+ Introduction 1 1 10/3/2015 4:44:06 PM 10/3/2015 4:44:06 PM Edit | Details | Delete
1 Targeting multiple device using Media Queries Targeting multiple device using Media Queries 1. Create a basic HTML document with a header and some simple content. <br /><snpt>&lt;!DOCTYPE HTML&gt;<br />&lt;html&gt;<br />&lt;head&gt;<br /> &lt;meta charset=&quot;utf-8&quot;&gt;<br /> &lt;title&gt;Solution 8-1&lt;/title&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br /> &lt;header&gt;<br /> &lt;h1&gt;CSS3 Media Queries&lt;/h1&gt;&lt;/header&gt;<br /> &lt;section&gt;&lt;/section&gt;<br /> &lt;footer&gt;&lt;/footer&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt><br /><br />2. Add the link to the general style sheet meant for every device:<br /><pre>&lt;link href=&quot;css/style.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /&gt;</pre><br />This style sheet contains the style rules you want to apply regardless of the device output.<br /><br />3. Set the different style rules for the various screen sizes using media queries.<br /><pre>&lt;!-- Smartphones --&gt;<br />&lt;link href=&quot;css/phone_style.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;<br />media=&quot;only screen and (max-device-width:320px)&quot; /&gt;<br /><br />&lt;!-- Tablets --&gt;<br />&lt;link href=&quot;css/tablet_styles.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;<br />media=&quot;only screen and (min-device-width:321px) and (max-device-width:768px)&quot; /&gt;<br /><br />&lt;!-- Desktops --&gt;<br />&lt;link href=&quot;css/style.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;only screen and (min-width:769px)&quot; /&gt;</pre><br />Here you have a style sheet specifically targeting smartphones, another one for digital tablets, and one for desktops (and laptops).<br /><br />4. Internet Explorer versions 6 through 8 will ignore any media queries and skip the related style rules. So you need to create a style sheet for them using a conditional statement.<br /><pre>&lt;!--[if It IE 9&gt;<br />&lt;link href=&quot;stylesForIE.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;&gt;<br />&lt;![endif]--&gt;</pre><br /><br />5. Now add a style sheet for older mobile models as well, by using the handled media type:<br /><pre>&lt;!—Older mobile phones --&gt;<br />&lt;link href=&quot;css/old_mobiles.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;handled&quot; /&gt;</pre><br /><br />6. Finally, add the link to the style sheet destined for the print media type:<br /><pre>&lt;!-- Print --&gt;<br />&lt;link href=&quot;css/printer_style.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;print&quot; /&gt;</pre> Targeting multiple device using Media Queries 1 1 10/3/2015 4:47:34 PM 10/3/2015 4:48:25 PM Edit | Details | Delete
1 Media on External Stylesheets Media on External Stylesheets If you prefer to have an external style sheet associated with a media query, the syntax is as follows.<br /><pre>&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot; screen and (width:900px), print,<br /> tv { rules to be applied &quot; href=&quot;specific_stylesheet.css&quot; /&gt;</pre><br />This style sheet targets the screen media type for a screen with a minimum display width of 900 pixels, and/or paper (on a printer), and/or TV. Media on External Stylesheets 1 1 10/3/2015 4:50:43 PM 10/3/2015 4:50:43 PM Edit | Details | Delete
1 Code with Media Query Code with Media Query A media query is a Boolean logical expression (either true or false) used in conjunction with one of the media types. It tests one feature or more of the output device and, if the expression is true, applies the subsequent specified style rules.<br /><br /><pre>@media media type and (criteria targeted) {<br /> /*rules that will apply only to the devices fitting those criteria*/<br />}<br /><br />/*OR-*/<br /><br />&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;media type and (criteria<br /> targeted)&quot; href=&quot;specific_stylesheet.css&quot; /&gt;</pre><br /><br /><tit>CSS 2.1 Media Queries</tit><br />Serving different styles for different media types is not new to CSS3. From CSS2.1, you could target several media types and specify how documents are presented in the media types as displayed below.<br /><br /><b>Media types in CSS2.1</b><br /><table><br /><tr><th>Media Type</th><th>Description</th></tr><tr><td><code>screen</code></td><td>For color computer screens</td></tr><tr><td><code>print</code></td><td>For printed material</td></tr><tr><td><code>aural/speech</code></td><td>For speech synthesizers</td></tr><tr><td><code>braille</code></td><td>For Braille tactile feedback devices</td></tr><tr><td><code>embossed</code></td><td>For paged Braille printers</td></tr><tr><td><code>tty</code></td><td>For teletypes, terminals, and other devices with limited display capabilities</td></tr><tr><td><code>projection</code></td><td>For projected presentations</td></tr><tr><td><code>tv</code></td><td>For televisions and television-like devices</td></tr><tr><td><code>all</code></td><td>For all the media types listed above</td></tr><tr><td><code>handheld</code></td><td>Intended for handheld devices (typically, devices with small screens and limited bandwidth)</td></tr></table> <br />You can target different media types in two ways: Use the <code>@media</code> or @import rules within the style sheet itself as follows:<br /><snpt>@import url(&quot;screenStyles.css&quot;) screen;<br /><br />@media print {<br />/* style sheet for print goes here */<br />}</snpt><br /><br />You can get the same result within the web document by using the &lt;link&gt; tag, specifying the target media of an external style sheet.<br /><pre>&lt;link href=&quot;style.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;screen&quot;&gt;</pre><br /><br />As stated by the W3C specification, the screen media type was meant for desktops and laptop computers and the media type used to target mobile devices was the handled.<br /><br />To define different styles for each of those types of devices, desktops, and mobile devices, you just attach different style sheets like this.<br /><snpt>&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;screen&quot; href=&quot;style.css&quot;&gt;<br />&lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; media=&quot;handheld&quot; href=&quot;mobile.css&quot;&gt;</snpt><br /><br />Or, if you want to attach just a single style sheet, you do so as follows<br /><snpt>@media screen {<br />/* rules specific for screen devices */<br />}<br />@media handheld {<br />/* rules specific for handled devices */<br />}</snpt><br /><br />Features of the output device that can be tested in CSS3 using media queries.<br /><table><br /><tr><th>Feature</th><th>Description</th><th>Value Min/Max</th><th>Prefixes</th></tr><tr><td><code>width</code></td><td>Width of the display area of the output device</td><td>Integer expressing pixels, cm or em depending on the media type (for example, width:300px).</td><td>Yes</td></tr><tr><td><code>height</code></td><td>Height of the display area of the output device.</td><td>Integer</td><td>Yes</td></tr><tr><td><code>device-height</code></td><td>Height of the rendering surface of the output device</td><td>Integer</td><td>Yes</td></tr><tr><td><code>device-width</code></td><td>Width of the rendering surface of the output device</td><td>Integer</td><td>Yes</td></tr><tr><td><code>orientation</code></td><td>Orientation of the output device</td><td>Portrait or landscape</td><td>No</td></tr><tr><td><code>aspect-ratio</code></td><td>Ratio of the width to the height</td><td>Integer/integer (for example,16/9).</td><td>Yes</td></tr><tr><td><code>device-aspect-ratio</code></td><td>Ratio of the device width to the device height</td><td>Integer/integer (ex:16/9).</td><td>Yes</td></tr><tr><td><code>color</code></td><td>The number of bits per color component of the output device</td><td>Integer. If there’s no color, the value is 0.</td><td>No</td></tr><tr><td><code>color-index</code></td><td>Number of entries in the color lookup table of the output device</td><td>Integer</td><td>No</td></tr><tr><td><code>monochrome</code></td><td>Number of bits per pixel in a monochrome frame buffer</td><td>Integer</td><td>No</td></tr><tr><td><code>resolution</code></td><td>Density of pixels of the output device</td><td>Integer value in dots per inch (dpi)—for example, resolution: 300dpi).</td><td>Yes</td></tr><tr><td><code>scan</code></td><td>Scanning process of TV output devices</td><td>Progressive or interlace.</td><td>No</td></tr><tr><td><code>grid</code></td><td>Query whether the output device is grid or bitmap</td><td>0 for grid; 1 for bitmap.</td><td>No</td></tr></table><br /><br />■ Media query with the logical operator and:<br /><pre>@media only screen and (device-width:900px) {<br />/* rules to be applied */<br />}</pre><br />This code example targets screen devices only, with an exact device width of 900 pixels.<br /><br /><tit>Points to remember</tit><br />If you decide to use different external style sheets depending on your media queries, keep in mind that browsers, including mobile ones, will load all the style sheets whether they’re needed or not for the current output device and scenario. In terms of performance and to limit the number of HTTP requests, it’s usually better to have all your styles and media queries in a single style sheet. <br /><br />Note: Older browsers ignore the. only keyword and won’t read this kind of query.<br /><br />■ Media query with the logical operators and and not:<br /><pre>@media screen and (not device-width:900px) {<br />/* rules to be applied */<br />}</pre><br />This code example targets any screen for which the exact device width is not 900 pixels.<br /><br />■ Media query with the equivalent of the OR operator:<br /><pre>@media projector and (color), screen and (color) {<br />/* rules to be applied */<br />}</pre><br />This code example targets a projector or a screen that has color capabilities.<br /><br />■ Media query with the and operator, the min– prefix, and the equivalent of the OR operator:<br /><pre>@media screen and (min-width:900px), print, tv {<br />/* rules to be applied */<br />}</pre><br /><br />This code example targets the screen media type for a screen with a minimum display width of 900 pixels, and/or print devices (setting style rules for a printed version of your web content), and/or TV. In the preceding examples, the media queries are written as they would appear inside a single style sheet. Code with Media Query 1 1 10/3/2015 5:41:08 PM 10/3/2015 6:59:20 PM Edit | Details | Delete
1 Introduction Introduction AngularJS also known as Angular, is an open-source web application framework maintained by Google and a community of individual developers and corporations. It is useful in developing Single-Page applications (SPAs) and resolves many of the challenges encountered in developing single-page applications.<br /><br />AngularJS is based on the MVC pattern (Model View Control). Therefore AngularJS separates your RIA application into models, views and controllers. <br /><br />To get started with AngularJS just head over to http://angularjs.org<br /><br /><tit>Concepts</tit><br />Client-Side Templates<br />Model View Controller (MVC)<br /> Model<br /> View<br /> Controller<br />Data Binding<br />Dependency Injection<br />Directives<br /><br />Scope<br />Templates<br />Filters<br />Routing<br />Deep Linking<br /> Introduction AngularJS Introduction 1 1 10/29/2015 3:58:52 AM 10/29/2015 3:58:52 AM Edit | Details | Delete
1 Environment Setup Environment Setup You can get and use the angularjs scripts in your application by downloading or by using the angular js CDN url.<br /><br /><tit>Download</tit><br />Go to the website https://angularjs.org/, you will see there are two options to download AngularJS library.<br /><br />1. View on GitHub- Click on this button to go to GitHub and get all of the latest scripts.<br />2. Download- Or click on this button, to download the scripts.<br /><br /><tit>CDN</tit><br />Get the CDN url and point it in the src attribute of the <code>&lt;script&gt;</code> tag.<br /><br /><snpt>&lt;!DOCTYPE html&gt;<br />&lt;html&gt;<br />&lt;head&gt;<br /> &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js&quot;&gt;&lt;/script&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br /> You have included Angular JS script!<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt> Environment Setup angularjs Environment Setup 1 1 10/30/2015 4:07:35 AM 11/1/2015 2:34:16 PM Edit | Details | Delete
1 First Application First Application For creating an application using AngularJS we need to know the following three important built in directives(html attributes which are prefixed with ng-*.)<br /><br /><table><br /><tr><th>Directive</th><th>Description</th></tr><tr><td><code>ng-app</code></td><td>This directive represents the root element of the application and is used to bootstrap the framework.</td></tr><tr><td><code>ng-model</code></td><td>This directive is used to attach a form element(html input controls) to a scope thus binding the view to the model.</td></tr><tr><td><code>ng-bind</code></td><td>This directive is used to replace the text content with the specified HTML. The <i>ngBindHTML</i> replaces an element's inner HTML with the specified HTML.</td></tr></table><br /><br /><tit>1. Load AngularJS framework</tit><br />Add the angularjs using the <code>&lt;script&gt;</code> tag.<br /><br /><pre>&lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js&quot;&gt;<br />&lt;/script&gt;</pre><br /><br /><tit>2. Define AngularJS application using <code>ng-app</code> directive.</tit><br />Define <code>ng-app</code> in the root html element. We can use it without any parameter, thereby indicating that the application will be bootstrapped in the automatic mode. But it is recommended to include the module name.<br /><br /><snpt>&lt;!doctype html&gt;<br />&lt;html ng-app&gt;<br />&lt;head&gt;<br /> &lt;title&gt;Rookie Nerd&lt;/title&gt;<br /> &lt;script src=&quot;angular.js&quot;&gt;&lt;/script&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;<br /><br />[or]<br /><br />&lt;div ng-app=&quot;&quot;&gt;<br />...<br />&lt;/div&gt;</snpt><br /><tit>3. Define model name using <code>ng-model</code></tit><br />You can define a model name using <code>ng-model</code> directive.<br /><pre>&lt;p&gt;Enter your Name: &lt;input type=&quot;text&quot; ng-model=&quot;name&quot;&gt;&lt;/p&gt;</pre><br /><tit>4. Bind data using <code>ng-bind</code></tit><br />You can bind the value of above model defined using <code>ng-bind</code> directive.<br /><pre>&lt;div&gt;Hello &lt;span ng-bind=&quot;name&quot;&gt;&lt;/span&gt;! Welcome to RookieNerd..!&lt;/div&gt;</pre> creating angularjs Application 1 1 11/14/2015 5:20:20 AM 11/14/2015 5:42:54 AM Edit | Details | Delete
1 AngularJS Home AngularJS Home AngularJS Home AngularJS Home AngularJS Home 1 1 11/14/2015 5:22:08 AM 11/23/2016 10:23:17 AM Edit | Details | Delete
1 Internationalization and Localization Internationalization and Localization You might have been into a shopping website and the price of the product listed as $XX,XXX. The currency format of the price is targeted at an American audience. <br /><br /><tit>Internationalization</tit><br />We can target our application to be available in the UK as well (just so that the language itself doesn’t change)? Britain uses a different date format and currency symbol, but you don’t want your code to undergo a change every time you need the application to support a new locale (in this case, en_US and en_UK). Internationalization is the process of abstracting out the date/time format, as well as the currency symbol, from your coding logic is known as (or i18n—the 18 denoting the number of letters between i and n in the word).<br /><br /><tit>Localization</tit><br />Even the strings in the UI changes if we wanted to support the application in Hindi Or Russian in addition to the date format and the currency symbol (and formatting). Localization process of providing translations and localized strings for the abstracted bits in various locales is known as Localization (or L10n—with a capital L to differentiate between i and l).<br /><br />AngularJS supports i18n/L10n for the following filters:<br />• currency<br />• date/time<br />• number<br /><br /><tit>Pluralization</tit><br />The framework also supports pluralization for English as well as i18n/L10n with the ngPluralize directive. It is handled and managed by the $locale service, which manages the locale-specific rule sets. The $locale service works by specifying the locale IDs(the country code and the language code). For example, en_US and en_UK, denote English used in the US and the UK, respectively. Specifying a country code is optional, just specifying “en” is a valid locale code. Internationalization and Localization Internationalization and Localization 1 1 1/2/2016 3:33:05 PM 1/2/2016 5:02:42 PM Edit | Details | Delete
1 Internationalizing Application Internationalizing Application By default angularjs handles the locale of the browser. For example, to use Danish locale, use following script.<br /><pre>&lt;script src = &quot;https://code.angularjs.org/1.2.5/i18n/angular-locale_da-dk.js&quot;&gt;&lt;/script&gt; </pre><br />Example using Danish locale<br /><snpt>&lt;html&gt; <br /> &lt;head&gt;<br /> &lt;title&gt;Angular JS Locale&lt;/title&gt;<br /> &lt;/head&gt; <br /> &lt;body&gt;<br /> &lt;h2&gt;AngularJS Locale&lt;/h2&gt;<br /> <br /> &lt;div ng-app = &quot;payrollApp&quot; ng-controller = &quot;employeeController&quot;&gt;<br /> {{salary | currency }} &lt;br/&gt;&lt;br/&gt;<br /> {{joinedOn | date }} &lt;br/&gt;&lt;br/&gt;<br /> {{employeeId | number }}<br /> &lt;/div&gt;<br /> <br /> &lt;script src = &quot;http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js&quot;&gt;&lt;/script&gt;<br /> &lt;script src = &quot;https://code.angularjs.org/1.3.14/i18n/angular-locale_da-dk.js&quot;&gt;&lt;/script&gt;<br /> <br /> &lt;script&gt;<br /> var mainApp = angular.module(&quot;mainApp&quot;, []);<br /> <br /> mainApp.controller(&#39;employeeController&#39;, function($scope) {<br /> $scope.salary = 4500;<br /> $scope.joinedOn = new Date();<br /> $scope.employeeId = 483387;<br /> });<br /> &lt;/script&gt; <br /> &lt;/body&gt;<br />&lt;/html&gt;</snpt> Internationalizing Application Internationalizing Application 1 1 1/2/2016 3:37:33 PM 1/2/2016 3:39:13 PM Edit | Details | Delete
1 Concerns Concerns <tit>Translation impact on UI</tit><br />When internationalizing your apps the lengths of your strings might change drastically from language to language which need care in design your CSS accordingly and keep in mind that right to left languages also exist.<br /><br />For example you design your UI so that it shows June 24, 1988 in a div that has been sized to fit it just right. And then you open your UI in Spanish. 24 de junio de 1988 just doesn’t fit in that same space anymore.<br /><br /><br /><tit>Timezones</tit><br />The AngularJS date/time filter picks up the timezone settings from the browser. So depending on the timezone of the computer, different people might see different information. Neither JS nor AngularJS have any built-in support to display time with a timezone specified by the developer. Concerns Concerns 1 1 1/2/2016 3:43:02 PM 1/2/2016 3:43:02 PM Edit | Details | Delete
1 Angular Expressions Angular Expressions Angular expressions are JavaScript-like code snippets that are usually placed in bindings such as <code>{{ expression }}</code>.<br />Expressions are evaluated against a <i>scope</i> object.<br /><br />You can do simple math (+, -, /, *, %), make comparisons (==, !=, >, <, >=, <=), perform boolean logic (&&, ||, !) and bitwise operations (\^, &, |). You can call functions you expose on <code>$scope</code> in your controller and you can reference arrays and object notation ([ ], { }, .).<br /><br /><tit>Using numbers</tit><br /><pre>&lt;div ng-app ng-init=&quot;cost=120;quantity=5&quot;&gt;<br /> &lt;p&gt;Total cost of Products : ${{cost * quantity}}&lt;/p&gt;<br /><br /> {{5+6}}<br />&lt;/div&gt;</pre><br /><br /><br /><tit>Using strings</tit><br /><pre>&lt;div ng-app ng-init=&quot;firstName=&#39;Abraham&#39;;lastName=&#39;Lincoln&#39;&quot;&gt;<br /> &lt;p&gt;Hello {{ firstName + &quot; &quot; + lastName }}!&lt;/p&gt;<br /> &lt;p&gt;Hello {{ &#39;Abraham&#39; + &#39; &#39; + &#39;Lincoln&#39; }}!&lt;/p&gt;<br />&lt;/div&gt;</pre><br /><br /><tit>Using object</tit><br /><pre>&lt;div ng-app ng-init=&quot;employee={Name:&#39;Peter&#39;,Designation:&#39;Engineer&#39;}&quot;&gt;<br /> &lt;p&gt;The name is {{ employee.Name }}&lt;/p&gt;<br />&lt;/div&gt; </pre><br /><br /><tit>Using array</tit><br /><pre>&lt;div ng-app ng-init=&quot;results=[1,15,19,2,40]&quot;&gt;<br /> &lt;p&gt;The fourth result is {{ results[3] }}&lt;/p&gt;<br />&lt;/div&gt; </pre><br /><br /><br />All of these are valid examples of expressions:<br /><snpt>&lt;div ng-controller=&#39;SomeController&#39;&gt;<br /> &lt;div&gt;{{recompute() / 10}}&lt;/div&gt;<br /> &lt;ul ng-repeat=&#39;thing in things&#39;&gt;<br /> &lt;li ng-class=&#39;{highlight: $index % 4 &gt;= threshold($index)}&#39;&gt;<br /> {{otherFunction($index)}}<br /> &lt;/li&gt;<br /> &lt;/ul&gt;<br /><br /> {{1+2}} {{a+b}} {{user.name}} {{items[index]}}<br />&lt;/div&gt;</snpt><br /> Angular Expressions Angular Expressions 1 1 1/2/2016 3:52:49 PM 1/2/2016 3:52:49 PM Edit | Details | Delete
1 One-Time Binding Expression One-Time Binding Expression AngularJS also provides a one-time binding of an expression. The one-time binding expression value, once set, will not change. If a variable is being updated on every click, normal binding would cause the display to change each time the variable changes. However, in a one-time bind expression, the display will remain set to the first valid value. A one-time expression can be defined using double colon <code>(::)</code>. The following code shows the use of one-time expression binding:<br /><br /><snpt>&lt;div&gt;<br /> Name of the student is {{::studentName }}<br />&lt;/div&gt;</snpt> One-Time Binding Expression One-Time Binding Expression 1 1 1/2/2016 3:55:45 PM 1/2/2016 3:55:45 PM Edit | Details | Delete
1 Angular Directives Angular Directives AngularJS directives are used to extend HTML. They are special attributes starting with <code>ng-prefix</code>. <br /><br />The directive can be applied as an attribute, element, class, and even as a comment, using the <i>camelCase</i> syntax. <br /><br />AngularJS provides many built-in directives to help with web application development. These core directives are prefixed with <code>ng-*</code>.It should be noted that all core directives are prefixed with the ng keyword and should not be used while creating a custom directive. Some of the built-in directives present inside the<br /><br />AngularJS library are as follows:<br /><table><br /><tr><th>Directive</th><th>Description</th></tr><tr><td><code>ngApp</code></td><td>This represents the root element of the application.</td></tr><tr><td><code>ngRepeat</code></td><td>This directive is used to iterate an array or properties inside the object.</td></tr><tr><td><code>ngIf</code></td><td>This directive is used to evaluate conditional expression and adds or removes the element from the DOM based on its result.</td></tr><tr><td><code>ngClick</code></td><td>This directive is used to attach a custom callback for a click event.</td></tr><tr><td><code>ngInclude</code></td><td>This directive is used to fetch and compile the external HTML fragment and include it to the current document.</td></tr><tr><td><code>ngClass</code></td><td>This directive is used to manipulate CSS classes that are used for an element.</td></tr><tr><td><code>ngBind</code></td><td>This directive is used to replace the text content with the specified HTML.</td></tr><tr><td><code>ngBindHtml</code></td><td>The <code>ngBindHTML</code> replaces an element's inner HTML with the specified HTML.</td></tr><tr><td><code>ngSubmit</code></td><td>This directive is used to attach a custom callback method to an onSubmit event of a form.</td></tr><tr><td><code>ngModel</code></td><td>This directive is used to attach a form element to a scope.</td></tr></table><br />Because HTML is case insensitive, we can use a lowercase form. For the <code>ngModel</code> directive, we can use <code>ng-model</code>, <code>ng:model</code>, <code>ng_model</code>, <code>data-ng-model</code>, and <code>x-ng-model</code> in the HTML markup. Angular Directives Angular Directives 1 1 1/2/2016 4:09:12 PM 1/2/2016 4:11:51 PM Edit | Details | Delete
1 Angular Controllers Angular Controllers In Angular, a Controller is defined by a JavaScript constructor function. We can attach any controller to the view using the <code>ngController</code> directive. After using this directive, the view and controller start to share the same scope.<br /><br /><tit>How it Works</tit><br />When a Controller is attached to the DOM via the <code>ng-controller</code> directive, Angular will instantiate a new Controller object, using the specified Controller's constructor function. A new child scope will be created and made available as an injectable parameter to the Controller's constructor function as $scope.<br /><br /><tit>Scopes (<code>$scope</code>)</tit><br />Scope is nothing but an object that Glues the View with Controller. They hold the Model data that we need to pass to view. Scope uses Angular’s two-way data binding to bind model data to view.<br /><br />Imaging $scope as an object that links Controller to the View. It is controllers responsibility to initialize the data that the view needs to display. This is done by making changes to $scope.<br /><br /><tit>Creating a Controller</tit><br />The controller() method is used to create a controller section. The syntax to create a controller is as follows:<br /><pre>var aModule = angular.module(&quot;&lt;moduleName&gt;&quot;, [&quot;&lt;injectedModule1&gt;&quot;, &quot;&lt;injectedModule2&gt;&quot;]);<br />aModule.controller(&#39;&lt;controllerName&gt;&#39;, [&#39;&lt;injector1&gt;&#39;, &#39;&lt;injector2&gt;&#39;,<br /> function(injector1, injector2) {<br /> //Definition of the controller<br /> }<br />]);</pre><br />Some parameters used in the preceding syntax to create a controller section are as follows:<br /><table><br /><tr><th>Property</th><th>Description</th></tr><tr><td><<i>controllerName</i>></td><td>This represents the name of the controller created using the AngularJS library</td></tr><tr><td><<i>injector</i>></td><td>In the above syntax, <i>injector1</i> and <i>injector2</i> are individual modules that are injected to be used by the controller scope.</td></tr></table><br /><br />A controller scope can be defined inside HTML DOM using the <code>ng-controller</code> directive. The following code shows the use of the controller directive in the<br />HTML file:<br /><br />There is another way to attach a controller to a specific view. We will learn how to create a single-page application using the $route service. To avoid undesired duplicated behavior, remember to avoid the <code>ngController</code> directive while using the <code>$route</code> service.<br /><br /><tit>Defining the controller in DOM</tit><br /><pre>&lt;div ng-controller=&quot;&lt;controllerName&gt;&quot;&gt;<br />&lt;!-- HTML element inside the controller scope --&gt;<br />&lt;/div&gt;</pre><br /><br /><snpt>&lt;!doctype html&gt;<br />&lt;html ng-app=&quot;payroll&quot;&gt;<br />&lt;head&gt;<br /> &lt;title&gt;Employee Details&lt;/title&gt;<br /> &lt;script src=&quot;angular.js&quot;&gt;&lt;/script&gt;<br /> &lt;script&gt;<br /> var payroll = angular.module(&quot;payroll&quot;, []);<br /> payroll.controller(&quot;payrollController&quot;, function($scope) {<br /> $scope.firstName = &quot;David&quot;;<br /> $scope.lastName = &quot;Pop&quot;;<br /> $scope.designation = &quot;Engineer&quot;;<br /> $scope.fullName = function() {<br /> return $scope.firstName + &quot; &quot; + $scope.lastName;<br /> };<br /> });<br /> &lt;/script&gt;<br />&lt;/head&gt;<br />&lt;body ng-controller=&quot;payrollController&quot;&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt><br /><br />- payrollController is a plain JavaScript function. <br />- In the payrollController function, there is an object $scope which we pass as an argument. This object is used to bind the controller with view. When AngularJS initialize this controller, it automatically creates and injects the $scope object to this function using dependency injection.<br />- $scope object is created by Angular and injected in this controller function. Angular Controllers Angular Controllers 1 1 1/2/2016 4:28:39 PM 1/2/2016 4:28:39 PM Edit | Details | Delete
1 Nested Controllers Nested Controllers Sometimes, our controller can become too complex, so we can split the behavior into separated controllers. This can be achieved by creating nested controllers, which means registering controllers that will work only inside a specific element of the view, as shown in the following code.<br /><pre>&lt;body ng-controller=&quot;employeeCtrl&quot;&gt;<br /> &lt;div ng-controller=&quot;employeeNestedCtrl&quot;&gt;&lt;/div&gt;<br />&lt;/body&gt;</pre><br /><br />The scope of the nested controllers will inherit all the properties of the outside scope, overriding it in case of equality. Nested Controllers Nested Controllers 1 1 1/2/2016 4:31:36 PM 1/2/2016 4:32:46 PM Edit | Details | Delete
1 Angular Tables Angular Tables Using <code>ng-repeat</code> directive you can iterate over arrays and objects and draw table with repeatable data and display it the html page as tabular format.<br /><br /><snpt>&lt;table&gt;<br /> &lt;tr&gt;<br /> &lt;th&gt;Name&lt;/th&gt;<br /> &lt;th&gt;Age&lt;/th&gt;<br /> &lt;/tr&gt;<br /> <br /> &lt;tr ng-repeat = &quot;x in employees&quot;&gt;<br /> &lt;td&gt;{{ x.name }}&lt;/td&gt;<br /> &lt;td&gt;{{ x.age }}&lt;/td&gt;<br /> &lt;/tr&gt;<br />&lt;/table&gt;</snpt><br /><br />You can apply css style.<br /><snpt>&lt;style&gt;<br /> table, th , td {<br /> border: 1px solid grey;<br /> border-collapse: collapse;<br /> padding: 5px;<br /> }<br /> <br /> table tr:nth-child(odd) {<br /> background-color: #f2f2f2;<br /> }<br /><br /> table tr:nth-child(even) {<br /> background-color: #ffffff;<br /> }<br />&lt;/style&gt;</snpt><br /><br /><tit>Display Serial No. with Table Index (<code>$index</code>)</tit><br /><snpt>&lt;table&gt;<br /> &lt;tr&gt;<br /> &lt;th&gt;#S.No.&lt;/th&gt;<br /> &lt;th&gt;Name&lt;/th&gt;<br /> &lt;th&gt;Age&lt;/th&gt;<br /> &lt;/tr&gt;<br /> <br /> &lt;tr ng-repeat = &quot;x in employees&quot;&gt;<br /> &lt;td&gt;{{ $index + 1 }}&lt;/td&gt;<br /> &lt;td&gt;{{ x.name }}&lt;/td&gt;<br /> &lt;td&gt;{{ x.age }}&lt;/td&gt;<br /> &lt;/tr&gt;<br />&lt;/table&gt;</snpt><br /><br /><tit>Apply style Using <code>$even</code> and <code>$odd</code></tit><br /><snpt>&lt;table&gt;<br /> &lt;tr ng-repeat=&quot;x in employees&quot;&gt;<br /> &lt;td ng-if=&quot;$odd&quot; style=&quot;background-color:#f1f1f1&quot;&gt;{{ x.Name }}&lt;/td&gt;<br /> &lt;td ng-if=&quot;$even&quot;&gt;{{ x.Name }}&lt;/td&gt;<br /> &lt;td ng-if=&quot;$odd&quot; style=&quot;background-color:#f1f1f1&quot;&gt;{{ x.Age }}&lt;/td&gt;<br /> &lt;td ng-if=&quot;$even&quot;&gt;{{ x.Age }}&lt;/td&gt;<br /> &lt;/tr&gt;<br />&lt;/table&gt;</snpt><br /><code></code> Angular Tables Angular Tables 1 1 1/2/2016 4:58:54 PM 1/2/2016 4:58:54 PM Edit | Details | Delete
1 Manipulating DOM Elements using directives Manipulating DOM Elements The <code>iElement</code> or <code>tElement</code> passed to the directive’s link and compile functions are wrapped references to the native DOM element. The elements are inside an Angular-native wrapper called <i>jqLite</i>. You can create everything in Angular using this API alone which has a subset of jQuery. If you need direct access to the raw DOM element you can get it by accessing the first element of the object with element[0].<br /><br /><t1>compile:</t1><br /><pre>compile: function compile(tElement, tAttrs, transclude) {<br /> return {<br /> pre: function preLink(scope, iElement, iAttrs, controller) {...<br /> },<br /> post: function postLink(scope, iElement, iAttrs, controller) {...<br /> }<br /> }<br />}</pre><br /><t1>link:</t1><br /><pre>link: function postLink(scope, iElement, iAttrs) { ... }</pre><br /><br />Supported APIs in the Angular docs for angular.element() — the function you’d use to create jqLite-wrapped DOM elements. <br /><br />The most useful core functions from jQuery. <code>addClass()</code>, <code>bind()</code>, <code>find()</code>, <code>toggleClass()</code>, and so on. <br /><br />In addition to the jQuery APIs, elements also have Angular-specific functions. These exist whether or not you’re using the full jQuery library.<br /><br /><tit>Function Description</tit><br /><table><br /><tr><th>Method</th><th>Description</th></tr><tr><td><code>controller(<i>name</i>)</code></td><td>When you need to communicate directly with a controller, this function returns the controller attached to the element. If none exists for this element, it walks up the DOM and finds the nearest parent controller instead. The name parameter is optional and is used to specify the name of another directive on this same element. If provided, it will return the controller from that directive. The name should be in the camel-case format as with all directives. That is, <code>ngModel</code> instead of <code>ng-model</code>.</td></tr><tr><td><code>injector()</code></td><td>Gets the injector for the current element or its parent. This allows you to ask for dependencies defined for the modules in these elements.</td></tr><tr><td><code>scope()</code></td><td>Returns the scope of the current element or its nearest parent.</td></tr><tr><td><code>inheritedData()</code></td><td>It sets and gets data on an element(similar to jQuery function data()). In addition to getting data from the current element, it will also walk up the DOM to find a value.</td></tr></table><br /><br />As an example, let’s create an expander example without the help of <code>ng-show</code> and <code>ng-click</code>.<br /><pre>angular.module(&#39;expanderModule&#39;, [])<br /> .directive(&#39;expander&#39;, function() {<br /> return {<br /> restrict: &#39;EA&#39;,<br /> replace: true,<br /> transclude: true,<br /> scope: {<br /> title: &#39;=expanderTitle&#39;<br /> },<br /> template: &#39;&lt;div&gt;&#39; +<br /> &#39;&lt;div class=&quot;title&quot;&gt;{{title}}&lt;/div&gt;&#39; +<br /> &#39;&lt;div class=&quot;body closed&quot; ng-transclude&gt;&lt;/div&gt;&#39; +<br /> &#39;&lt;/div&gt;&#39;,<br /> link: function(scope, element, attrs) {<br /> var titleElement = angular.element(element.children().eq(0));<br /> var bodyElement = angular.element(element.children().eq(1));<br /> titleElement.bind(&#39;click&#39;, toggle);<br /><br /> function toggle() {<br /> bodyElement.toggleClass(&#39;closed&#39;);<br /> }<br /> }<br /> }<br /> });</pre><br /><br />The <code>ng-click</code> and <code>ng-show</code> directives are removed from the template. When users click on the expander title, we’ll create a jqLite element from the title element and bind the click event to it with a toggle() function as its callback. In <i>toggle()</i>, we’ll call <i>toggleClass()</i> on the expander body element to add or remove a class called closed, where we’d set the element to display: none with a class like this:<br /><pre>.closed {<br /> display: none;<br />}</pre><code></code> Manipulating DOM Elements using directives Manipulating DOM Elements using directives 1 1 1/2/2016 5:51:25 PM 1/2/2016 5:54:40 PM Edit | Details | Delete
1 Angular Modules Angular Modules As our application grows, we need to consider the possibility of splitting it into different modules. It comes with it a lot of advantages, which is the best way to test and evolve each module separately from the others and also to share each module with other projects. A module can be easily detachable. This module helps with better code management and it helps to work in large teams. Loose coupling allows developers to create their parts of the project independently. <br /><br />The <code>angular.module()</code> method is used to create a module. The syntax to create an AngularJS module is as follows.<br /><br /><pre>var aModule = angular.module(&quot;&lt;moduleName&gt;&quot;, [&quot;&lt;injectedModule1&gt;&quot;,&quot;&lt;injectedModule2&gt;&quot;]);</pre><br /><br />In the above code, the <code>angular.module()</code> function takes two parameters: the first is the module name and <code>second([])</code> is the array of dependent module. The parameters used to create a module are as follows:<br /><table><br /><tr><th>Property</th><th>Description</th></tr><tr><td><<i>moduleName</i>></td><td>This represents the name of the module registered to AngularJS</td></tr><tr><td><<i>injectedModule</i>></td><td><<i>injectedModule1</i>> and <<i>injectedModule2</i>> are modules that are injected as input to the targeted module</td></tr></table><br /><br /><snpt>&lt;!DOCTYPE html&gt;<br />&lt;html&gt;<br />&lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js&quot;&gt;&lt;/script&gt;<br />&lt;body&gt;<br /> &lt;div ng-app=&quot;payrollApp&quot; ng-controller=&quot;EmployeeController&quot;&gt;<br /> {{ Name }} {{ Age }}<br /> &lt;/div&gt;<br /><br /> &lt;script&gt;<br /> var app = angular.module(&quot;payrollApp&quot;, []);<br /> app.controller(&quot;EmployeeController&quot;, function($scope) {<br /> $scope.Name = &quot;Michael&quot;;<br /> $scope.Age = &quot;30&quot;;<br /> });<br /> &lt;/script&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt> Angular Modules Angular Modules 1 1 1/2/2016 6:11:37 PM 1/2/2016 6:15:32 PM Edit | Details | Delete
1 Angular Modules and Controllers in Files Angular Modules and Controllers in Files It is best practice in AngularJS applications to put the module and the controllers in separate JavaScript files.<br /><br />In this example, <b>payrollApp.js</b> contains an application module definition, while <b>EmployeeController.js</b> contains the controller:<br />AngularJS Example<br /><snpt>&lt;!DOCTYPE html&gt;<br />&lt;html&gt;<br />&lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js&quot;&gt;&lt;/script&gt;<br />&lt;body&gt;<br /> &lt;div ng-app=&quot;payrollApp&quot; ng-controller=&quot;EmployeeController&quot;&gt;<br /> $scope.Name = &quot;Michael&quot;; $scope.Age = &quot;30&quot;;<br /> &lt;/div&gt;<br /><br /> &lt;script src=&quot;payrollApp.js&quot;&gt;&lt;/script&gt;<br /> &lt;script src=&quot;EmployeeController.js&quot;&gt;&lt;/script&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt><br /><br /><t1>payrollApp.js</t1><br /><pre>var app = angular.module(&quot;payrollApp&quot;, []);</pre><br /><br /><t1>EmployeeController.js</t1><br /><pre>app.controller(&quot;EmployeeController&quot;, function($scope) {<br /> $scope.Name = &quot;Michael&quot;;<br /> $scope.Age = &quot;30&quot;;<br />});</pre> Angular Modules and Controllers in Files Angular Modules and Controllers in Files 1 1 1/2/2016 6:18:35 PM 1/2/2016 6:18:35 PM Edit | Details | Delete
1 Angular Filters Angular Filters Filters associated with directives and expressions are responsible for easily manipulate and transform any value. It is added using a pipe character. It is, not only combined with expressions inside a template, but also the ones injected in other components such as controllers and services.<br /><br />Filters are useful when we need to format dates and currency according to our current locale. They are the perfect solution to easily perform any data manipulation.<br /><br />The syntax for using filters is:<br />To make filters interact with the expression, we just need to put them inside double curly brackets:<br /><pre>{{expression | filter}}</pre><br /><br />Also, the filters can be combined, thus creating a chain where the output of filter1 is the input of filter2 using the <code>pipeline(|)</code> symbol.<br /><pre>{{expression | filter1 | filter2}}</pre><br /><br />The framework has a set of ready-to-use filters that can be quite useful in your daily development.<br /><br />The different types of AngularJS filters.<br /><table><br /><tr><th>Filter Name</th><th>Description</th></tr><tr><td><code>currency</code></td><td>formats text in a currency format.</td></tr><tr><td><code>date</code></td><td>formats text to date format with the optional format mask.</td></tr><tr><td><code>filter</code></td><td>filter the array to a subset of it based on provided criteria.</td></tr><tr><td><code>json</code></td><td>displays the content of an object in the JSON format.</td></tr><tr><td><code>limitTo</code></td><td>limits the size of the array or string.</td></tr><tr><td><code>lowercase</code></td><td>converts a text to lower case text.</td></tr><tr><td><code>number</code></td><td>formats a string as a number.</td></tr><tr><td><code>orderBy</code></td><td>orders the array based on provided criteria.</td></tr><tr><td><code>uppercase</code></td><td>converts a text to upper case text.</td></tr></table><br /><br /><t1>currency</t1><br />The currency filter is used to format a number based on a currency.<br /><pre>{{ 10 | currency}}</pre><br /><br />The result will be the number $10.00, formatted and prefixed with the dollar sign. We can also apply a specific locale symbol, shown as follows.<br /><pre>{{ 10 | currency:&#39;R$&#39;}}</pre><br /><br />Now, the output will be R$10.00, which is the same as the previous output but prefixed with a different symbol. Although it seems right to apply just the currency symbol, and in this case the Brazilian Real (R$), this doesn't change the usage of the specific decimals and group separators.<br />In order to achieve the correct output, in this case R$10,00 instead of R$10.00, we need to configure the Brazilian (PT-BR) locale available inside the AngularJS distribution package. In this package, we might find locales for most countries, and we just need to import these locales to our application in the following manner.<br /><pre>&lt;script src=&quot;js/lib/angular-locale_pt-br.js&quot;&gt;&lt;/script&gt;</pre><br /><br />After importing the locale, we will not have to use the currency symbol anymore because it's already wrapped inside. Besides the currency, the locale also defines the configuration of many other variables, such as the days of the week and months, which is very useful when combined with the next filter used to format dates.<br /><br /><t1>date</t1><br />The date filter is one of the most useful filters of the framework. We can use this filter by declaring it inside any expression. In the following example, we have used the filter on a date variable attached to the scope:<br /><pre>{{ car.entrance | date }}</pre><br /><br />The output will be Dec 10, 2013. However, there are numerous combinations we can make with the optional format mask:<br /><pre>{{ car.entrance | date:'MMMM dd/MM/yyyy HH:mm:ss' }}</pre><br /><br />When you use this format, the output changes to December 10/12/2013 21:42:10. <br /><br /><t1>filter</t1><br />We can filter a list of data. This filter acts over an array and apply any filtering criteria.<br /><pre>&lt;tr ng-class=&quot;{selected: car.selected}&quot; ng-repeat=&quot;car in cars | filter:criteria&quot;&gt;</pre><br /><br /><t1>json</t1><br />Sometimes, generally for debugging purposes, it might be necessary to display the contents of an object in the JSON format. JSON, also known as JavaScript Object Notation, is a lightweight data interchange format.<br /><br />In the next example, we will apply the filter to a car object:<br /><pre>{{ car | json }}</pre><br /><br />The expected result if we use it based inside the car's list of our application is as follows:<br /><pre>{<br /> "plate": "6MBV006",<br /> "color": "Blue",<br /> "entrance": "2013-12-09T23:46:15.186Z"<br />}</pre><br /><br /><t1>limitTo</t1><br />Sometimes, we need to display text, or even a list of elements, and it might be necessary to limit its size. This filter does exactly that and can be applied to a string or an array.<br /><br />The following code is an example where there is a limit to the expression<br /><pre>{{ expression | limitTo:10 }}</pre><br /><br /><t1>lowercase</t1><br />The lowercase filter displays the content of the expression in lowercase:<br /><pre>{{ expression | lowercase }}</pre><br /><br /><t1>number</t1><br />The number filter is used to format a string as a number. Similar to the currency and date filters, the locale can be applied to present the number using the conventions of each location. Also, you can use a fraction-size parameter to support the rounding up of the number:<br /><pre>{{ 10 | number:2 }}</pre><br /><br />The output will be 10.00 because we used the fraction-size configuration. In this case, we can also take advantage of the locale configuration to change the<br />fraction separator.<br /><br /><t1>orderBy</t1><br />With the orderBy filter, we can order any array based on a predicate expression. This expression is used to determine the order of the elements and works in<br />three different ways.<br /><br /><table><br /><tr><th>Type</th><th>Description</th></tr><tr><td><i>String</i></td><td>This is the property name. Also, there is an option to prefix + or – to indicate the order direction. At the end of the day, +plate or -plate are predicate expressions that will sort the array in an ascending or descending order.</td></tr><tr><td><i>Array</i></td><td>Based on the same concept of String's predicate expression, more than one property can be added inside the array. Therefore, if two elements are<br />considered equivalent by the first predicate, the next one can be used, and so on.</td></tr><tr><td><i>Function</i></td><td>This function receives each element of the array as a parameter and returns a number that will be used to compare the elements against each other.</td></tr></table><br /><br />In the following code, the orderBy filter is applied to an expression with the predicate and reverse parameters:<br /><pre>{{ expression | orderBy:predicate:reverse }}</pre><br /><pre>&lt;tr ng-class=&quot;{selected: car.selected}&quot; ng-repeat=&quot;car in cars | filter:criteria | orderBy:field:order&quot;&gt;</pre><br /><br /><t1>uppercase</t1><br />This parameter displays the content of the expression in uppercase:<br /><pre>{{ expression | uppercase }}</pre> Angular Filters Angular Filters 1 1 1/2/2016 6:28:01 PM 1/2/2016 7:07:20 PM Edit | Details | Delete
1 Filters in Controllers and Services Filters in Controllers and Services We can also use filters in other components such as controllers and services. They can be used by just injecting $filter inside the desired components.<br /><br />The first argument of the filter function is the value, followed by the other required arguments.<br /><br />Let's change our application by moving the date filter, which we used to display the date and hour separated in the view, to our controller: <b>controllers.js</b><br /><pre>payroll.controller("payrollCtrl", function ($scope, $filter) {<br /> $scope.appTitle = $filter("uppercase")("www.rookienerd.com");<br />});</pre><br /><br />This approach is often used when we need to transform the data before it reaches the view, sometimes even using it to the algorithms logic. Filters in Controllers and Services Filters in Controllers and Services 1 1 1/2/2016 7:10:05 PM 1/2/2016 7:10:42 PM Edit | Details | Delete
1 Creating filters Creating filters AngularJS already comes with built-in filters, but even then, we'll certainly need to create our own filters in order to fulfill specific requirements.<br /><br />To create a new filter, you just need to register it to the application's module, returning the filter function. This function takes the inputted value as the first parameter and other additional arguments if necessary.<br /><br />Angular has a <code>.filter() </code>method for each Module, which means we can write our own custom filters.<br /><br /><pre>app.filter('&lt;filterName&gt;', function () {<br /> return function () {<br /> return;<br /> };<br />});</pre><br /><br />The returned function gets invoked each time Angular calls the filter, which means two-way binding for our filters. The user makes a change, the filter runs again and updates as necessary. The name of our filter is how we can reference it inside Angular bindings.<br /><br />Custom filter to create a Upper case character.<br /><pre>app.filter('toUpper', function () {<br /> return function (item) {<br /> return item.toUpperCase();<br /> };<br />});</pre><br /><br />Filter method, creating `toUpper` a globally available filter in our 'app' module<br /><pre>app.filter('toUpper', function () {<br /> // function that's invoked each time Angular runs $digest()<br /> // pass in 'item' which is the single Object we'll manipulate<br /> return function (item) {<br /> // return the current 'item', but call `toUpperCase()` on it<br /> return item.toUpperCase();<br /> };<br />});</pre><br /><br /><snpt>var app = angular.module('app', []);<br /><br />app.filter('toUpper', function () {<br /> return function (item) {<br /> return item.toUpperCase();<br /> };<br />});<br /><br />app.controller('employeeCtrl', function () {<br /> this.Name = 'John Abraham';<br />});</snpt><br /><br />Then we declare it in the HTML:<br /><pre>&lt;div ng-app=&quot;app&quot;&gt;<br /> &lt;div ng-controller=&quot;employeeCtrl as employee&quot;&gt;<br /> &lt;p&gt;<br /> {{ employee.Name | toUpper }}<br /> &lt;/p&gt;<br /> &lt;/div&gt;<br />&lt;/div&gt;</pre> Creating filters Creating filters 1 1 1/2/2016 7:13:41 PM 1/2/2016 7:14:42 PM Edit | Details | Delete
1 Form Events Form Events AngularJS has its own HTML events directives which are associated with the HTML controls.<br /><br />AngularJS supports the following events:<br /><br />* ng-click<br />* ng-dbl-click<br />* ng-mousedown<br />* ng-mouseup<br />* ng-mouseenter<br />* ng-mouseleave<br />* ng-mousemove<br />* ng-mouseover<br />* ng-keydown<br />* ng-keyup<br />* ng-keypress<br />* ng-change Form Events Angular Form Events 1 1 1/3/2016 3:45:23 AM 1/3/2016 3:46:59 AM Edit | Details | Delete
1 ng-click ng-click <t1>Employee.html</t1><br /><snpt>&lt;div ng-app=&quot;payrollApp&quot; ng-controller=&quot;employeeController&quot;&gt;<br /><br /> &lt;button ng-click=&quot;toggle()&quot;&gt;Toggle&lt;/button&gt;<br /><br /> &lt;p ng-hide=&quot;isVisible&quot;&gt;<br /> Name:<br /> &lt;input type=&quot;text&quot; ng-model=&quot;Name&quot;&gt;<br /> &lt;br&gt;<br /> &lt;/p&gt;<br /><br />&lt;/div&gt;</snpt><br /><t1>employeeController.js</t1><br /><snpt>&lt;script&gt;<br /> var app = angular.module(&#39;payrollApp&#39;, []);<br /> app.controller(&#39;employeeController&#39;, function($scope) {<br /> $scope.Name = &quot;David&quot;<br /> $scope.isVisible = false;<br /> $scope.toggle = function() {<br /> $scope.isVisible = !$scope.isVisible;<br /> };<br /> });<br />&lt;/script&gt;</snpt> ng-click ng-click 1 1 1/3/2016 3:49:08 AM 1/3/2016 3:50:45 AM Edit | Details | Delete
1 ngApp directive ngApp directive The <c>ngApp</c> directive defines the root of an AngularJS application. Applied to one of the elements, in general HTML or body, this directive is used to bootstrap the framework. We can use it without any parameter, it indicates that the application will be bootstrapped in the automatic mode, as shown in the following code:<br /><br /><t1>index.html</t1><br /><snpt>&lt;!doctype html&gt;<br />&lt;html ng-app&gt;<br />&lt;head&gt;<br /> &lt;title&gt;Parking&lt;/title&gt;<br /> &lt;script src=&quot;angular.js&quot;&gt;&lt;/script&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt><br /><br />It is recommended to provide a module name, defining the entry point of the application in which other components such as controllers, services, filters, and directives can be bound.<br /><br /><t1>index.html</t1><br /><snpt>&lt;!doctype html&gt;<br />&lt;html ng-app=&quot;parking&quot;&gt;<br />&lt;head&gt;<br /> &lt;title&gt;[Packt] Parking&lt;/title&gt;<br /> &lt;script src=&quot;angular.js&quot;&gt;&lt;/script&gt;<br /> script&gt; var parking = angular.module(&quot;parking&quot;, []);<br /> &lt;/script&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt><br /><br />There can be only one ngApp directive in the same HTML document that will be loaded and bootstrapped by the framework automatically. It's possible to have multiple <c>ngApp</c> in the same HTML as long as you manually bootstrap them. ngApp directive ngApp directive 1 1 1/3/2016 3:55:01 AM 1/3/2016 3:55:55 AM Edit | Details | Delete
1 ngController directive ngController directive In Angular, a Controller is defined by a JavaScript constructor function. We can attach any controller to the view using the <c>ngController</c> directive. After using this directive, the view and controller start to share the same scope (<c>$scope</c>-It is nothing but an object that Glues the View with Controller. They hold the Model data that we need to pass to view) <br /><snpt>&lt;!doctype html&gt;<br />&lt;html ng-app=&quot;payroll&quot;&gt;<br />&lt;head&gt;<br /> &lt;title&gt;Employee Details&lt;/title&gt;<br /> &lt;script src=&quot;angular.js&quot;&gt;&lt;/script&gt;<br /> &lt;script&gt;<br /> var payroll = angular.module(&quot;payroll&quot;, []);<br /> payroll.controller(&quot;payrollController&quot;, function($scope) {<br /> $scope.firstName = &quot;David&quot;;<br /> $scope.lastName = &quot;Pop&quot;;<br /> $scope.designation = &quot;Engineer&quot;;<br /> $scope.fullName = function() {<br /> return $scope.firstName + &quot; &quot; + $scope.lastName;<br /> };<br /> });<br /> &lt;/script&gt;<br />&lt;/head&gt;<br />&lt;body ng-controller=&quot;payrollController&quot;&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt><br /><br />There is another way to attach a controller to a specific view. We will learn how to create a single-page application using the <c>$route</c> service. To avoid undesired duplicated behavior, remember to avoid the <c>ngController</c> directive while using the $route service.<br /><br /><tit>Nested controllers</tit><br />Sometimes, our controller can become too complex, so we can split the behavior into separated controllers. This can be achieved by creating nested controllers, which means registering controllers that will work only inside a specific element of the view, as shown in the following code:<br /><br /><pre>&lt;body ng-controller=&quot;employeeCtrl&quot;&gt;<br /> &lt;div ng-controller=&quot;employeeNestedCtrl&quot;&gt;<br /> &lt;/div&gt;<br />&lt;/body&gt;</pre><br /><br />The scope of the nested controllers will inherit all the properties of the outside scope and overrides it in case of equality. ngController directive ngController directive 1 1 1/3/2016 3:58:33 AM 1/3/2016 4:03:53 AM Edit | Details | Delete
1 ngBind directive ngBind directive The <c>ngBind</c> directive is generally applied to a span element and replaces the content of the element with the results of the provided expression. It has the same meaning as that of the double curly markup, for example, <c>{{expression}}</c>.<br /><br />Though alternative is available, this is used because when the page is being compiled, there is a moment when the raw state of the expressions(curly braces) is shown and it wont be a good experience to the user. Since the directive is defined by the attribute of the element, it(curly brace expressions) is invisible to the user. <br /><br />The following is an example of the <c>ngBind</c> directive usage:<br /><t1>index.html</t1><br /><snpt>&lt;!doctype html&gt;<br />&lt;html ng-app=&quot;parking&quot;&gt;<br />&lt;head&gt;<br /> &lt;title&gt;Parking&lt;/title&gt;<br /> &lt;script src=&quot;angular.js&quot;&gt;&lt;/script&gt;<br /> &lt;script&gt;<br /> var parking = angular.module(&quot;parking&quot;, []);<br /> parking.controller(&quot;parkingCtrl&quot;, function($scope) {<br /> $scope.appTitle = &quot;Parking&quot;;<br /> });<br /> &lt;/script&gt;<br />&lt;/head&gt;<br />&lt;body ng-controller=&quot;parkingCtrl&quot;&gt;<br /> &lt;h3 ng-bind=&quot;appTitle&quot;&gt;&lt;/h3&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt> ngBind directive ngBind directive 1 1 1/3/2016 4:06:11 AM 1/3/2016 4:06:11 AM Edit | Details | Delete
1 ngBindHtml directive ngBindHtml directive Sometimes, it might be necessary to bind a string of raw HTML. In this case, the <c>ngBindHtml</c> directive can be used in the same way as <c>ngBind</c>. The only difference will be that it does not escape the content in a secure way, which allows the browser to interpret it.<br /><br />In order to use this directive, we will need the <i>angular-sanitize.js</i> dependency. It brings the <c>ngBindHtml</c> directive and protects the application against common cross-site scripting (XSS) attacks.<br /><br /><t1>index.html</t1><br /><snpt>&lt;!doctype html&gt;<br />&lt;html ng-app=&quot;parking&quot;&gt;<br />&lt;head&gt;<br /> &lt;title&gt;Parking&lt;/title&gt;<br /> &lt;script src=&quot;angular.js&quot;&gt;&lt;/script&gt;<br /> &lt;script src=&quot;angular-sanitize.js&quot;&gt;&lt;/script&gt;<br /> &lt;script&gt;<br /> var parking = angular.module(&quot;parking&quot;, []);<br /> parking.controller(&quot;parkingCtrl&quot;, function($scope) {<br /> $scope.appTitle = &quot;&lt;b&gt;Parking&lt;/b&gt;&quot;;<br /> });<br /> &lt;/script&gt;<br />&lt;/head&gt;<br />&lt;body ng-controller=&quot;parkingCtrl&quot;&gt;<br /> &lt;h3 ng-bind-html=&quot;appTitle&quot;&gt;&lt;/h3&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt> ngBindHtml directive ngBindHtml directive 1 1 1/3/2016 4:09:33 AM 1/3/2016 4:09:33 AM Edit | Details | Delete
1 ngRepeat directive ngRepeat directive The <c>ngRepeat</c> directive is really useful to iterate over arrays and objects. It can be used with any kind of element such as the rows of a table, the elements of a list, and even the options of select.<br /><br />We must provide a special repeat expression that describes the array to iterate over the variable that will hold each item in the iteration. The most basic expression format allows us to iterate over an array, attributing each element to a variable:<br /><br /><tit>Variable in array</tit><br />It's also possible to use a slightly different expression to iterate over objects: <i>(key, value)</i> in object<br /><pre>&lt;table&gt;<br /> &lt;tr&gt;<br /> &lt;th&gt;Name&lt;/th&gt;<br /> &lt;th&gt;Age&lt;/th&gt;<br /> &lt;/tr&gt;<br /> <br /> &lt;tr ng-repeat = &quot;x in employees&quot;&gt;<br /> &lt;td&gt;{{ x.name }}&lt;/td&gt;<br /> &lt;td&gt;{{ x.age }}&lt;/td&gt;<br /> &lt;/tr&gt;<br />&lt;/table&gt;</pre><br /><br />Beyond iterating, we can identify which is the first or the last element, what is its index number, and many other things. This can be achieved by using the following properties:<br /><table><br /><tr><th>Variable</th><th>Type</th><th>Details</th></tr><tr><td><c>$index</c></td><td><i>Number</i></td><td>Number of the element</td></tr><tr><td><c>$first</c></td><td><i>Boolean</i></td><td>This is true if the element is the first one</td></tr><tr><td><c>$last</c></td><td><i>Boolean</i></td><td>This is true if the element is the last one</td></tr><tr><td><c>$middle</c></td><td><i>Boolean</i></td><td>This is true if the element is in the middle</td></tr><tr><td><c>$even</c></td><td><i>Boolean</i></td><td>This is true if the element is even</td></tr><tr><td><c>$odd</c></td><td><i>Boolean</i></td><td>This is true if the element is odd</td></tr></table> ngRepeat directive ngRepeat directive 1 1 1/3/2016 4:16:11 AM 1/3/2016 4:17:19 AM Edit | Details | Delete
1 ngModel directive ngModel directive The <c>ngModel</c> directive attaches the element to a property in the scope, thus binding the view to the model. In this case, the element can be input (all types), select, or textarea.<br /><br /><pre>&lt;input type=&quot;text&quot; ng-model=&quot;employee.Name&quot; placeholder=&quot;What&#39;s the plate?&quot; /&gt;</pre><br /><br />The field that is using the <c>ngModel</c> directive is a part of the construction of an object every time, we must declare the object<br />in which the property should be attached. <br /><br />In this case, the object that is being constructed is a employee; so, we will use employee.Name inside the directive expression. We can also use the <c>ngModel</c> directive without any object. ngModel directive ngModel directive 1 1 1/3/2016 4:18:53 AM 1/3/2016 4:18:53 AM Edit | Details | Delete
1 ngClick directive and other event directives ngClick directive The <c>ngClick</c> directive allows you to bind any custom behavior to the click event of the element. <br /><br />The following code is an example of the usage of the <c>ngClick</c> directive calling a function.<br /><br /><snpt>&lt;html ng-app=&quot;parking&quot;&gt;<br />&lt;head&gt;<br /> &lt;title&gt;Parking&lt;/title&gt;<br /> &lt;script src=&quot;angular.js&quot;&gt;&lt;/script&gt;<br /> &lt;script&gt;<br /> var parking = angular.module(&quot;parking&quot;, []);<br /> parking.controller(&quot;parkingCtrl&quot;, function($scope) {<br /> $scope.appTitle = &quot;Parking&quot;;<br /> $scope.cars = [];<br /> $scope.park = function(car) {<br /> car.entrance = new Date();<br /> $scope.cars.push(car);<br /> delete $scope.car;<br /> };<br /> });<br /> &lt;/script&gt;<br />&lt;/head&gt;<br />&lt;body ng-controller=&quot;parkingCtrl&quot;&gt;<br /> &lt;h3 ng-bind=&quot;appTitle&quot;&gt;&lt;/h3&gt;<br /> &lt;table&gt;<br /> &lt;thead&gt;<br /> &lt;tr&gt;<br /> &lt;th&gt;Plate&lt;/th&gt;<br /> &lt;th&gt;Entrance&lt;/th&gt;<br /> &lt;/tr&gt;<br /> &lt;/thead&gt;<br /> &lt;tbody&gt;<br /> &lt;tr ng-repeat=&quot;car in cars&quot;&gt;<br /> &lt;td&gt;&lt;span ng-bind=&quot;car.plate&quot;&gt;&lt;/span&gt;&lt;/td&gt;<br /> &lt;td&gt;&lt;span ng-bind=&quot;car.entrance&quot;&gt;&lt;/span&gt;&lt;/td&gt;<br /> &lt;/tr&gt;<br /> &lt;/tbody&gt;<br /> &lt;/table&gt;<br /> &lt;input type=&quot;text&quot; ng-model=&quot;car.plate&quot; placeholder=&quot;What&#39;s the plate?&quot; /&gt;<br /> &lt;button ng-click=&quot;park(car)&quot;&gt;Park&lt;/button&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt><br /><br />In the preceding code, there is another pitfall. Inside the <c>ngClick</c> directive, we will call the park function, passing car as a parameter. As long as we have access to the scope through the controller, it would not be easy if we just accessed it directly, without passing any parameter at all.<br /><br /><tit>Other Event Directives</tit><br />Other directives that have the same behavior but are triggered by other events are <c>ngBlur</c>, <c>ngChange</c>, <c>ngCopy</c>, <c>ngCut</c>, <c>ngDblClick</c>, <c>ngFocus</c>, <c>ngKeyPress</c>, <c>ngKeyDown</c>, <c>ngKeyUp</c>, <c>ngMousedown</c>, <c>ngMouseenter</c>, <c>ngMouseleave</c>, <c>ngMousemove</c>, <c>ngMouseover</c>, <eg>ngMouseup</eg>, and <c>ngPaste</c>. ngClick directive and event directives ngClick directive and other angular event directives 1 1 1/3/2016 4:25:05 AM 1/3/2016 4:25:05 AM Edit | Details | Delete
1 ngDisable directive ngDisable directive The <c>ngDisable</c> directive can disable elements based on the Boolean value of an expression. This directive is useful with validation techniques.<br /><br />In this next example, we will disable the button when the variable is true:<br /><pre>&lt;button ng-click=&quot;park(car)&quot; ng-disabled=&quot;!car.plate&quot;&gt;Park&lt;/button&gt;</pre> ngDisable directive ngDisable directive 1 1 1/3/2016 4:25:56 AM 1/3/2016 4:25:56 AM Edit | Details | Delete
1 ngClass directive ngClass directive The <c>ngClass</c> directive is used every time you need to dynamically apply a class to an element by providing the name of the class in a data-binding expression. <br /><br />The following code shows the application of the <c>ngClass</c> directive.<br /><t1>index.html</t1><br /><snpt>&lt;!doctype html&gt;<br />&lt;html ng-app=&quot;parking&quot;&gt;<br />&lt;head&gt;<br /> &lt;title&gt;Parking&lt;/title&gt;<br /> &lt;script src=&quot;angular.js&quot;&gt;&lt;/script&gt;<br /> &lt;script&gt;<br /> var parking = angular.module(&quot;parking&quot;, []);<br /> parking.controller(&quot;parkingCtrl&quot;, function($scope) {<br /> $scope.appTitle = &quot;Parking&quot;;<br /> $scope.cars = [];<br /> $scope.park = function(car) {<br /> car.entrance = new Date();<br /> $scope.cars.push(car);<br /> delete $scope.car;<br /> };<br /> });<br /> &lt;/script&gt;<br /> &lt;style&gt;<br /> .selected {<br /> background-color: #FAFAD2;<br /> }<br /> &lt;/style&gt;<br />&lt;/head&gt;<br />&lt;body ng-controller=&quot;parkingCtrl&quot;&gt;<br /> &lt;h3 ng-bind=&quot;appTitle&quot;&gt;&lt;/h3&gt;<br /> &lt;table&gt;<br /> &lt;thead&gt;<br /> &lt;tr&gt;<br /> &lt;th&gt;&lt;/th&gt;<br /> &lt;th&gt;Plate&lt;/th&gt;<br /> &lt;th&gt;Entrance&lt;/th&gt;<br /> &lt;/tr&gt;<br /> &lt;/thead&gt;<br /> &lt;tbody&gt;<br /> www.it-ebooks.info Creating Reusable Components with Directives [ 28 ]<br /> &lt;tr ng-class=&quot;{selected: car.selected}&quot; ng-repeat=&quot;car in cars&quot;&gt;<br /> &lt;td&gt;<br /> &lt;input type=&quot;checkbox&quot; ngmodel=&quot;car.selected&quot; /&gt;<br /> &lt;/td&gt;<br /> &lt;td&gt;&lt;span ng-bind=&quot;car.plate&quot;&gt;&lt;/span&gt;&lt;/td&gt;<br /> &lt;td&gt;&lt;span ng-bind=&quot;car.entrance&quot;&gt;&lt;/span&gt;&lt;/td&gt;<br /> &lt;/tr&gt;<br /> &lt;/tbody&gt;<br /> &lt;/table&gt;<br /> &lt;input type=&quot;text&quot; ng-model=&quot;car.plate&quot; placeholder=&quot;What&#39;s the plate?&quot; /&gt;<br /> &lt;button ng-click=&quot;park(car)&quot; ng-disabled=&quot;!car.plate&quot;&gt;<br /> Park<br /> &lt;/button&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt> ngClass directive ngClass directive 1 1 1/3/2016 4:27:09 AM 1/3/2016 4:27:09 AM Edit | Details | Delete
1 ngOptions directive ngOptions directive The <c>ngRepeat</c> directive can be used to create the options of a select element, however, there is a much more recommended directive that should be used for this purpose the ngOptions directive.<br /><br />Through an expression, we need to indicate the property of the scope from which the directive will iterate, the name of the temporary variable that will hold the content of each loop's iteration, and the property of the variable that should be displayed.<br /><br />One thing to note is that <c>ngModel</c> directive is required for <c>ngOptions</c> to work. <br /><br /><pre> for array data sources:<br /> label for value in array<br /> select as label for value in array<br /> label group by group for value in array<br /> label disable when disable for value in array<br /> label group by group for value in array track by trackexpr<br /> label disable when disable for value in array track by trackexpr<br /> label for value in array | orderBy:orderexpr track by trackexpr (for including a filter with track by)<br /> <br /> for object data sources:<br /> label for (key , value) in object<br /> select as label for (key , value) in object<br /> label group by group for (key, value) in object<br /> label disable when disable for (key, value) in object<br /> select as label group by group for (key, value) in object<br /> select as label disable when disable for (key, value) in object</pre><br /><br /><t1>Example</t1><br />In the following example, we have introduced a list of colors.<br /><br /><t1>index.html</t1><br /><snpt>&lt;!doctype html&gt;<br />&lt;html ng-app=&quot;parking&quot;&gt;<br />&lt;head&gt;<br /> &lt;title&gt;Parking&lt;/title&gt;<br /> &lt;script src=&quot;angular.js&quot;&gt;&lt;/script&gt;<br /> &lt;script&gt;<br /> var parking = angular.module(&quot;parking&quot;, []);<br /> parking.controller(&quot;parkingCtrl&quot;, function($scope) {<br /> $scope.appTitle = &quot;Parking&quot;;<br /> $scope.cars = [];<br /> $scope.colors = [&quot;White&quot;, &quot;Black&quot;, &quot;Blue&quot;, &quot;Red&quot;,<br /> &quot;Silver&quot;<br /> ];<br /> $scope.park = function(car) {<br /> car.entrance = new Date();<br /> $scope.cars.push(car);<br /> delete $scope.car;<br /> };<br /> });<br /> &lt;/script&gt;<br /> &lt;style&gt;<br /> .selected {<br /> background-color: #FAFAD2;<br /> }<br /> &lt;/style&gt;<br />&lt;/head&gt;<br />&lt;body ng-controller=&quot;parkingCtrl&quot;&gt;<br /> &lt;h3 ng-bind=&quot;appTitle&quot;&gt;&lt;/h3&gt;<br /> &lt;table&gt;<br /> &lt;thead&gt;<br /> &lt;tr&gt;<br /> &lt;th&gt;&lt;/th&gt;<br /> &lt;th&gt;Plate&lt;/th&gt;<br /> &lt;th&gt;Color&lt;/th&gt;<br /> &lt;th&gt;Entrance&lt;/th&gt;<br /> &lt;/tr&gt;<br /> &lt;/thead&gt;<br /> &lt;tbody&gt;<br /> &lt;tr ng-class=&quot;{selected: car.selected}&quot; ng-repeat=&quot;car in cars&quot;&gt;<br /> &lt;td&gt;<br /> &lt;input type=&quot;checkbox&quot; ngmodel=&quot;car.selected&quot; /&gt;<br /> &lt;/td&gt;<br /> &lt;td&gt;&lt;span ng-bind=&quot;car.plate&quot;&gt;&lt;/span&gt;&lt;/td&gt;<br /> &lt;td&gt;&lt;span ng-bind=&quot;car.color&quot;&gt;&lt;/span&gt;&lt;/td&gt;<br /> &lt;td&gt;&lt;span ng-bind=&quot;car.entrance&quot;&gt;&lt;/span&gt;&lt;/td&gt;<br /> &lt;/tr&gt;<br /> &lt;/tbody&gt;<br /> &lt;/table&gt;<br /> &lt;input type=&quot;text&quot; ng-model=&quot;car.plate&quot; placeholder=&quot;What&#39;s the plate?&quot; /&gt;<br /> &lt;select ng-model=&quot;car.color&quot; ng-options=&quot;color for color in colors&quot;&gt;<br /> Pick a color<br /> &lt;/select&gt;<br /> &lt;button ng-click=&quot;park(car)&quot; ng-disabled=&quot;!car.plate || !car.color&quot;&gt;<br /> Park<br /> &lt;/button&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;</snpt><br /><br /><t1>Example</t1><br />Note the <i>ng-model="blah"</i> which is saying "set <i>$scope.blah</i> to the selected value".<br /><br /><pre>&lt;select ng-model=&quot;blah&quot; ng-options=&quot;item.ID as item.Title for item in items&quot;&gt;&lt;/select&gt;</pre><br /><br /><tit>Option tag values in Angular</tit><br />When you use ng-options, the values of option tags written out by ng-options will always be the index of the array item the option tag relates to. This is because Angular actually allows you to select entire objects with select controls, and not just primitive types. For example:<br /><br /><snpt>app.controller(&#39;MainCtrl&#39;, function($scope) {<br /> $scope.items = [<br /> { id: 1, name: &#39;foo&#39; },<br /> { id: 2, name: &#39;bar&#39; },<br /> { id: 3, name: &#39;blah&#39; }<br /> ];<br />});<br /><br />&lt;div ng-controller=&quot;MainCtrl&quot;&gt;<br /> &lt;select ng-model=&quot;selectedItem&quot; ng-options=&quot;item as item.name for item in items&quot;&gt;&lt;/select&gt;<br /> &lt;pre&gt;{{selectedItem | json}}&lt;/pre&gt;<br />&lt;/div&gt;</snpt><br /><br />The above will allow you to select an entire object into <i>$scope.selectedItem</i> directly. The point is, with Angular, you don't need to worry about what's in your option tag. Let Angular handle that, you should only care about what's in your model in your scope.<br /><br /><tit>Dealing with the default option</tit><br />There are a few things to mention above relating to the default option.<br /><br /><t1>Selecting first option and removing the empty option:</t1><br /><br />You can do this by adding a simple <c>ng-init</c> that sets the model (from ng-model) to the first element in the items your repeating in <c>ng-options</c>:<br /><br /><pre>&lt;select ng-init=&quot;foo = foo || items[0]&quot; ng-model=&quot;foo&quot; ng-options=&quot;item as item.name for item in items&quot;&gt;&lt;/select&gt;</pre><br /><br /><note>Note: this could get a little crazy if foo happens to be initialized properly to something "falsy". In that case, you'll want to handle the initialization of foo in your controller, most likely.</note><br /><br /><tit>Customizing the default option:</tit><br />This is a little different, here all you need to do is add an option tag as a child of your select, with an empty value attribute, then customize it's inner text:<br /><br /><pre>&lt;select ng-model=&quot;foo&quot; ng-options=&quot;item as item.name for item in items&quot;&gt;<br /> &lt;option value=&quot;&quot;&gt;Nothing selected&lt;/option&gt;<br />&lt;/select&gt;</pre><br /><br /><note>Note: that in this case the "empty" option will stay there even after you select a different option. This isn't the case for the default behavior of selects under Angular.</note><br /><br />A customized default option that hides after a selection is made:<br /><br />If you wanted your customized default option to go away after you select a value, you can add an <c>ng-hide</c> attribute to your default option:<br /><br /><pre>&lt;select ng-model=&quot;foo&quot; ng-options=&quot;item as item.name for item in items&quot;&gt;<br /> &lt;option value=&quot;&quot; ng-if=&quot;foo&quot;&gt;Select something to remove me.&lt;/option&gt;<br />&lt;/select&gt;</pre><pre></pre> ngOptions directive ngOptions directive 1 1 1/3/2016 4:34:49 AM 1/3/2016 4:36:18 AM Edit | Details | Delete
1 ngStyle directive ngStyle directive The <c>ngStyle</c> directive is used to supply the dynamic style configuration demand. It follows the same concept used with the <c>ngClass</c> directive; however, here we can<br />directly use the style properties and its values.<br /><br /><td><br /> <span ng-bind="car.color" ng-style="{color: car.color}"><br /></span><br /></td> ngOptions directive ngStyle directive 1 1 1/3/2016 4:37:53 AM 1/3/2016 4:37:53 AM Edit | Details | Delete
1 ngShow directive ngShow directive The <c>ngShow</c> directive changes the visibility of an element based on its display property:<br /><br /><snpt>&lt;div ng-show=&quot;cars.length &gt; 0&quot;&gt;<br /> &lt;table&gt;<br /> &lt;thead&gt;<br /> &lt;tr&gt;<br /> &lt;th&gt;&lt;/th&gt;<br /> &lt;th&gt;Plate&lt;/th&gt;<br /> &lt;th&gt;Color&lt;/th&gt;<br /> &lt;th&gt;Entrance&lt;/th&gt;<br /> &lt;/tr&gt;<br /> &lt;/thead&gt;<br /> &lt;tbody&gt;<br /> &lt;tr ng-class=&quot;{selected: car.selected}&quot; ng-repeat=&quot;car in cars&quot;&gt;<br /> &lt;td&gt;<br /> &lt;input type=&quot;checkbox&quot; ngmodel=&quot;<br />car.selected&quot; /&gt;<br /> &lt;/td&gt;<br /> &lt;td&gt;&lt;span ng-bind=&quot;car.plate&quot;&gt;&lt;/span&gt;&lt;/td&gt;<br /> &lt;td&gt;&lt;span ng-bind=&quot;car.color&quot;&gt;&lt;/span&gt;&lt;/td&gt;<br /> &lt;td&gt;&lt;span ng-bind=&quot;car.entrance&quot;&gt;&lt;/span&gt;&lt;/td&gt;<br /> &lt;/tr&gt;<br /> &lt;/tbody&gt;<br /> &lt;/table&gt;<br />&lt;/div&gt;<br />&lt;div ng-hide=&quot;cars.length &gt; 0&quot;&gt;<br /> The parking lot is empty<br />&lt;/div&gt;</snpt><br /><br />Depending on the implementation, you can use the complementary <c>ngHide</c> directive of <c>ngShow</c>. ngShow directive ngShow directive 1 1 1/3/2016 4:39:27 AM 1/3/2016 4:39:27 AM Edit | Details | Delete
1 ngHide directive ngHide directive The ngHide directive changes the visibility of an element based on its display property:<br /><br /><div ng-show="cars.length == 0"><br /> <table><br /> <thead><br /> <tr><br /> <th></th><br /> <th>Plate</th><br /> <th>Color</th><br /> <th>Entrance</th><br /> </tr> </thead><br /> <tbody><br /> <tr ng-class="{selected: car.selected}" ng-repeat="car in cars"><br /> <td><br /> <input type="checkbox" ngmodel="car.selected" /><br /> </td><br /> <td><span ng-bind="car.plate"></span></td><br /> <td><span ng-bind="car.color"></span></td><br /> <td><span ng-bind="car.entrance"></span></td><br /> </tr> </tbody><br /> </table><br /></div><br /><div ng-hide="cars.length > 0"><br /> The parking lot is empty<br /></div><br /><br />Depending on the implementation, you can use the complementary ngHide directive of ngShow. ngHide directive ngHide directive 1 1 1/3/2016 4:40:50 AM 1/3/2016 4:40:50 AM Edit | Details | Delete
1 ngHide directive ngHide directive The ngHide directive changes the visibility of an element based on its display property:<br /><br /><snpt>&lt;div ng-show=&quot;cars.length == 0&quot;&gt;<br /> &lt;table&gt;<br /> &lt;thead&gt;<br /> &lt;tr&gt;<br /> &lt;th&gt;&lt;/th&gt;<br /> &lt;th&gt;Plate&lt;/th&gt;<br /> &lt;th&gt;Color&lt;/th&gt;<br /> &lt;th&gt;Entrance&lt;/th&gt;<br /> &lt;/tr&gt;<br /> &lt;/thead&gt;<br /> &lt;tbody&gt;<br /> &lt;tr ng-class=&quot;{selected: car.selected}&quot; ng-repeat=&quot;car in cars&quot;&gt;<br /> &lt;td&gt;<br /> &lt;input type=&quot;checkbox&quot; ngmodel=&quot;car.selected&quot; /&gt;<br /> &lt;/td&gt;<br /> &lt;td&gt;&lt;span ng-bind=&quot;car.plate&quot;&gt;&lt;/span&gt;&lt;/td&gt;<br /> &lt;td&gt;&lt;span ng-bind=&quot;car.color&quot;&gt;&lt;/span&gt;&lt;/td&gt;<br /> &lt;td&gt;&lt;span ng-bind=&quot;car.entrance&quot;&gt;&lt;/span&gt;&lt;/td&gt;<br /> &lt;/tr&gt;<br /> &lt;/tbody&gt;<br /> &lt;/table&gt;<br />&lt;/div&gt;<br />&lt;div ng-hide=&quot;cars.length &gt; 0&quot;&gt;<br /> The parking lot is empty<br />&lt;/div&gt;</snpt><br /><br />Depending on the implementation, you can use the complementary ngHide directive of ngShow. ngHide directive ngHide directive 1 1 1/3/2016 4:41:09 AM 1/3/2016 4:41:09 AM Edit | Details | Delete
1 ngIf directive ngIf directive The <c>nglf</c> directive could be used in the same way as the <c>ngShow</c> directive; however, while the <c>ngShow</c> directive just deals with the visibility of the element, the <c>ngIf</c> directive prevents the rendering of an element in our template. ngIf directive ngIf directive 1 1 1/3/2016 4:42:23 AM 1/3/2016 4:42:23 AM Edit | Details | Delete
1 ngInclude directive ngInclude directive AngularJS provides a way to include other external HTML fragments in our pages. The <c>ngInclude</c> directive allows the fragmentation and reuse of the application layout and is an important concept to explore.<br /><br />The following is an example code for the usage of the <c>ngInclude</c> directive:<br /><pre>&lt;div ng-include=&quot;&#39;menu.html&#39;&quot;&gt;&lt;/div&gt;</pre> ngInclude directive ngInclude directive 1 1 1/3/2016 4:48:13 AM 1/3/2016 4:50:46 AM Edit | Details | Delete
1 angular http service angular http service Every client-side JavaScript application needs to communicate with the backend. In general, this communication is performed through an interface, which is exposed by the server-side application that relies on the HTTP protocol to transfer data through the JSON.<br /><br />The traditional way of making a request to the server from AJAX applications (using XMLHttpRequests) involves getting a handle on the XMLHttpRequest object, making the request, reading the response, checking the error codes, and finally processing the server response. It goes something like this:<br /><snpt>var xmlhttp = new XMLHttpRequest();<br />xmlhttp.onreadystatechange = function() {<br /> if (xmlhttp.readystate == 4 && xmlhttp.status == 200) {<br /> var response = xmlhttp.responseText;<br /> } else if (xmlhttp.status == 400) { // or really anything in the 4 series<br /> // Handle error gracefully<br /> }<br />};<br />// Setup connection<br />xmlhttp.open(“GET”, “http: //myserver/api”, true);<br />// Make the request<br />xmlhttp.send();</snpt> angular http service angular http service 1 1 1/3/2016 5:24:19 AM 1/3/2016 5:24:19 AM Edit | Details | Delete
1 ajax ajax The AngularJS XHR API follows what is commonly known as the Promise interface. As XHRs are asynchronous method calls, the response from the server will come back at an unknown future date and time (hopefully almost immediately!). The Promise interface guarantees how such responses will be dealt with, and allows consumers of the Promise to use them in a predictable manner.<br /><br /><tit>Using GET Request</tit><br />The create an API '/api/user' which accepts the id as a URL parameter to fetch a user’s information, then the XHR request using Angular’s core <c>$http</c> service would look something like the following:<br /><br /><pre>$http.get('api/user', {<br /> params: {<br /> id: '5'<br /> }<br />}).success(function(data, status, headers, config) {<br /> // Do something successful.<br />}).error(function(data, status, headers, config) {<br /> // Handle the error<br />});</pre><br /><br />The <c>$http.get</c> method used in the preceding example is one of the method that the core $http AngularJS service provides. <br /><br /><tit>Using POST Request</tit><br />To make a POST request using AngularJS with the same URL parameters and some POST data, you would do so as follows:<br /><br /><snpt>var postData = {<br /> text: 'long blob of text'<br />};<br />// The next line gets appended to the URL as params<br />// so it would become a post request to /api/user?id=5<br />var config = {<br /> params: {<br /> id: '5'<br /> }<br />};<br />$http.post('api/user', postData, config).success(function(data, status, headers, config) {<br /> // Do something successful<br />}).error(function(data, status, headers, config) {<br /> // Handle the error<br />});</snpt><br /><br />Similar convenience methods are provided for most of the common request types, including:<br />• GET<br />• HEAD<br />• POST<br />• DELETE<br />• PUT<br />• JSONP ajax ajax 1 1 1/3/2016 5:27:12 AM 1/3/2016 5:32:03 AM Edit | Details | Delete
1 Configuring Request Configuring Request The standard request options provided out of the box are not enough considering the following scenarios.<br /><br />• Add some authorization headers for your request<br />• Change how caching is handled for the request<br />• Transform the request going out, or the response coming in, in certain set ways<br /><br />In such cases, you can configure your request further through the optional configuration object passed to the requests as below.<br /><br />$http(config)<br />What follows is a basic pseudo-code template for calling this method:<br /><pre>$http({<br /> method: string,<br /> url: string,<br /> params: object,<br /> data: string or object,<br /> headers: object,<br /> transformRequest: function transform(data, headersGetter) or<br /> an array of functions,<br /> transformResponse: function transform(data, headersGetter) or<br /> an array of functions,<br /> cache: boolean or Cache object,<br /> timeout: number,<br /> withCredentials: boolean<br />});</pre><br /><br />The <c>GET</c>, <c>POST</c>, and other convenience methods set the method, so you don’t need to. The config object gets passed in as the last argument to <c>$http.get</c>, <c>$http.post</c>, so you can still use it while using any of the convenience methods. You can change the request being made by passing the config object set with the following keys:<br /><br /><table><br /><tr><th>Parameter</th><th>Description</th></tr><tr><td><c>method</c></td><td>A string representing the HTTP request type, like GET, or POST</td></tr><tr><td><c>url</c></td><td>A URL string representing the absolute or relative URL of the resource being requested</td></tr><tr><td><c>params</c></td><td>An object (a map to be precise) of string-to strings, representing keys and values that will be translated to URL parameters. For example: [{key1: 'value1', key2: 'value2'}] would be converted to: ?key1=value1&key2=value2 after the URL. If we use an object, instead of a string or a number, for the value, the object will be converted to a JSON string.</td></tr><tr><td><c>data</c></td><td>A string or an object that will be sent as the request message data</td></tr><tr><td><c>timeout</c></td><td>The time in milliseconds to wait before the request is treated as timed out There are a few more options that can be configured.</td></tr></table> Configuring Request Configuring Request 1 1 1/3/2016 5:37:52 AM 1/3/2016 5:37:52 AM Edit | Details | Delete
1 Http Headers Http Headers By default, the AngularJS framework adds some HTTP headers to all of the requests, and other headers only to the <c>POST</c> and <c>PUT</c> methods. The headers are shown in the following code, and we can check them out by analyzing the $http.defaults.headers configuration object:<br /><pre>{<br /> "common":{"Accept":"application/json, text/plain, */*"},<br /> "post":{"Content-Type":"application/json;charset=utf-8"},<br /> "put":{"Content-Type":"application/json;charset=utf-8"},<br /> "patch":{"Content-Type":"application/json;charset=utf-8"}<br />}<br /></pre><br />In case you want to add a specific header or even change the defaults, you can use the run function of the Module API, which is used in initializing the application:<br /><br /><t1>run.js</t1><br /><pre>parking.run(function ($http) {<br /> $http.defaults.headers.common.Accept = "application/json";<br />});</pre><br /><br />After the header configuration, the request starts to send the custom header:<br /><pre>GET /cars HTTP/1.1<br />Host: localhost:3412<br />User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.8; rv:29.0)<br />Accept: application/json<br />Accept-Language: pt-br,pt;q=0.8,en-us;q=0.5,en;q=0.3<br />Accept-Encoding: gzip, deflate</pre><br /><br />The headers can also be configured through the configuration object of each request. It will overwrite the default headers configured here. Http Headers Http Headers 1 1 1/3/2016 5:40:34 AM 1/3/2016 5:40:34 AM Edit | Details | Delete
1 Caching Caching AngularJS provides a simple caching system for your HTTP GET requests out of the box. To improve the performance of our application, we can turn on the framework's caching mechanism. It will store each response from the server, returning the same result every time the same request is made.<br /><br />It comes disabled for all requests by default, but to enable caching for your requests, all you need to do is:<br /><pre>$http.get('http://server/myapi', {<br /> cache: true<br />}).success(function() { // Handle success });</pre><br /><br />In the following code, we are enabling the cache mechanism.<br /><br /><t1>run.js</t1><br /><pre>parking.run(function ($http) {<br /> $http.defaults.cache = true;<br />});</pre> Caching Caching 1 1 1/3/2016 5:42:09 AM 1/3/2016 5:42:09 AM Edit | Details | Delete
1 Interceptors Interceptors The framework also provides an <c>HTTP</c> intercepting mechanism. It allows us to create common behaviors for different kinds of situations such as verifying whether a user is already authenticated or to gather information for auditing purposes.<br /><br /><tit>request Interceptor</tit><br />The first is the request interceptor. This interceptor is called before the request is being sent to the backend. It is very useful when we need to add information such as additional parameters or even headers to the request.<br /><br /><tit>httpTimestamp Interceptor</tit><br />In the following code, we create an interceptor called <c>httpTimestampInterceptor</c>, which adds the current time in milliseconds to each request that is made by the application:<br /><pre>parking.factory('httpTimestampInterceptor', function() {<br /> return {<br /> 'request': function(config) {<br /> var timestamp = Date.now();<br /> config.url = config.url + "?x=" + timestamp;<br /> return config;<br /> }<br /> }<br />});</pre><br /><tit>requestError Interceptor</tit><br />Something might happen with the request, causing an error. With the <c>requestError</c> interceptor, we can handle this situation. It is called when the request is rejected and can't be sent to the backend.<br /><br /><tit>response Interceptor</tit><br />The response interceptor is called right after the response arrives from the backend and receives a response as a parameter. It's a good opportunity to apply any pre-processing behavior that may be required.<br /><br /><tit>responseError Interceptor</tit><br />One of the most common intercepting situations is when the backend produces any kind of error, returning a status code to indicate unauthorized access, a bad request, a not found error, or even an internal server error. It could be handled by the <code>responseError</code> interceptor, which allows us to properly apply the correct behavior in each situation.<br /><br /><tit>httpUnauthorized Interceptor</tit><br />This <c>httpUnauthorizedInterceptor</c> parameter, in the following code, is responsible for handling the unauthorized error and changing the login property of $rootScope, indicating that the application should open the login dialog:<br /><pre>parking.factory('httpUnauthorizedInterceptor', function($q,<br /> $rootScope) {<br /> return {<br /> 'responseError': function(rejection) {<br /> if (rejection.status === 401) {<br /> $rootScope.login = true;<br /> }<br /> return $q.reject(rejection);<br /> }<br /> }<br />});</pre><br />After defining the interceptors, we need to a