Wednesday, 8 October 2014

html tutorial

<a> ANCHOR tag creates <a href="  ">link</a> to other internet location, or file.
<abbr> ABBREVIATION tags indicate interpretation of the meaning to the browsers and search engines for such as kind of abbreviations as "Inc.", "etc.".
<acronym> ACRONYM tags defines an acronym, like; <acronym title="World Wide Web">WWW</acronym>.
<address> ADDRESS tags are used to identify the author's contact information for a section or a document.
<applet> APPLET element tags are used to embed and invoke a Java application within an HTML page.
<area> AREA tag defines a section of an image.
<b> BOLD tag is specifying <b>bold section</b> within the text document.
<base> BASE tag defines information regarding to the links on the page.
<basefont> BASEFONT tags defines changes of all text appearance on the web page.
<bdo> BDO tag is specifying the direction of text display by overwriting the default value from Left to Right. <bdo dir="rtl">Right to Left</bdo>
<bgsound> BGSOUND tag is defining a background sound for a webpage.

<html>
  <head>
    <bgsound src="JingleBells.wav" loop="3">
  </head>
  <body>
  </body>
</html>

Demo • Example
<big> BIG tag makes the <big>text larger</big> then the rest of the text.
<blockquote> BLOCKQUOTE tags
<blockquote>separate a section</blockquote>
of text from the surrounding text.
<blink> BLINK tags defines text to <blink>blink</blink> repeatedly. Internet Explorer doesn't support this tag yet.
<body> <html>
  <head>
  </head>
  <body>
      Body tags identify the content of a web page.
  </body>
</html>
<br> Line Break tag is specifying<br>
a new line
<button> BUTTON tag is used to create a <button type="button">Push Button</button>  
<caption> <table>
  <caption>CAPTION tag adds a caption to a table.</caption>
    <tr>
      <td>
      </td>
    </tr>
</table>
<center>
<center>CENTER tags center text, images, etc.</center>
<cite> <cite>CITE tags defines a citation and displaying in italics.</cite>
<code> CODE tags are used for example, to indicate a code of the current <code>htmltags.html</code> page.
<col> COL tags are used to define column properties for table columns.

<table>
  <colgroup span="2">
    <col width="60" align="left"></col>
    <col width="80" align="center"></col>
  </colgroup>
  <tr>
    <td>1st Column</td>
    <td>2nd Column</td>
  </tr>
</table>
<colgroup> COLGROUP tags are used to define groups of table columns.

<table>
  <colgroup span="2">
    <col width="60" align="left"></col>
    <col width="80" align="center"></col>
  </colgroup>
  <tr>
    <td>1st Column</td>
    <td>2nd Column</td>
  </tr>
</table>
<dd> DD tag defines a definition description.

<dl>
  <dt>NASA</dt>
    <dd>National Aeronautics and Space Administration</dd>
  <dt>MBA</dt>
    <dd>Master of Business Administration</dd>
</dl>
<dfn> DFN tags emphasize definition, for example; <dfn>PC</dfn>: Personal Computer.
<del> DEL tag indicates <del>deleted text</del>
<dir> DIR tags define directory lists.

<dir>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</dir>
<dl> DL tag defines a definition list.

<dl>
  <dt>CSU</dt>
    <dd>California State University</dd>
  <dt>UN</dt>
    <dd>United Nations</dd>
</dl>
<div> DIV tag is a logical section of a web document.

<div>
  <h1>Home Pets</h1>
    <p>Cats</p>
    <p>Dogs</p>
</div>
<dt> DT tags defines a definition term.

<dl>
  <dt>HTML</dt>
    <dd>HyperText Markup Language</dd>
  <dt>CSS</dt>
    <dd>Cascading Style Sheets</dd>
</dl>'

<embed> EMBED tag gives a command to a browser to include a multimedia elements, such as video, sound files within a web document.

<embed src="videofile.mov" width="100" height="100">

<embed src="musicfile.mid" width="50" height="50">

Demo • Example
<em> EM tags <em>emphasize</em> text.
<fieldset> FIELDSET tag creates a form for all elements in it.

<fieldset>Find a rounded-corner box around this text.</fieldset>
<font> FONT tags attribute text <font face="cursive, serif">font</font>, <font color="#0000ff">color</font>, and <font size="4">size</font>.
<form> Form tags define a form.

<form action="contact.html" method="post">
  Your Email:
    <input type="text" name="visitor-email" maxlength="80" value="" /><br />
  Your Name:
    <input type="text" name="visitor-name" maxlength="80" value="" /><br />
    <input type="submit" value="Send" />
</form>


eMail:

Name:
<frame> Frame tags define each frame within a frameset.

<html>
<head>
  <title>Frame Tags in Action</title>
</head>
<noframes>
  <body>
    <h1>Sorry, your browser doesn't support this feature!</h1>
  </body>
</noframes>
<frameset cols="35%, 65%">
  <frame src ="/htmlcodes/left-frame.html" />
  <frame src ="/htmlcodes/right-frame.html" />
</frameset>
</html>

Demo • Example
<frameset> FRAMESET tags define a layout of frames.

<html>
<frameset cols="45%, *">
  <frame src ="/htmlcodes/left-frame.html" />
  <frame src ="/htmlcodes/right-frame.html" />
</frameset>
</html>

Demo • Example
<h1> - <h6> H1 - H6 define level 1-6 headers.

<h1>Header 1</h1>

<h2>Header 2</h2>

<h3>Header 3</h3>

<h4>Header 4</h4>

<h5>Header 5</h5>
<h6>Header 6</h6>
<head> Head tags define general information about the document, page title, meta-tags, scripts and links to follow, and other commands to browsers.

<html>
  <head>
    <title>HTML Tags - Head Tag</title>
    <meta name="keywords" content="html tags, head tag" />
    <link rel="stylesheet" type="text/css" href="style.css" />
    <script src="javaexample.js" type="text/javascript"></script>
  </head>
  <body>
  </body>
</html>
<hr> HR tag draws a horizontal break line.


Two choices for the same result: <hr> or <hr />
<html> HTML tags contain HTML elements, and give a command to browsers to read the document as an HTML document.

<html>
  <head>
  </head>
  <body>
  </body>
</html>
<iframe> iFrame tag creates an inline frame that contains another web page in it.
<img> IMG tag attributes an image.

<img src="http://www.fillster.com/images/tutorial.gif" width="60" height="62" alt="Here write a name for your image" />

IMG tag tutorial demonstration
<input> INPUT tags define input fields, check boxes, radio buttons.

<form action="contact.html" method="post">
  Your Email:
    <input type="text" name="visitor-email" maxlength="80" value="" /><br />
  Your Name:
    <input type="text" name="visitor-name" maxlength="80" value="" /><br />
    <input type="radio" name="Level" value="Web Designer" />Web Designer<br />
    <input type="radio" name="Level" value="Web Developer" checked="checked" />Web Developer<br />
    <input type="checkbox" name="Computer" value="Windows" />Windows<br />
    <input type="checkbox" name="Computer" value="Mac" />Mac<br />
    <input type="submit" value="Send" />
</form>


eMail:

Name:

Web Designer
Web Developer

Windows
Mac
<ins> INS tag defines an <ins>inserted text</ins>.
<isindex> ISINDEX tag defines a single-line input field.

<isindex prompt="Example: ">
<i> <I> tag is specifying <i>italic text</i>.
<kbd> KBD tag stands for <kbd>keyboard text</kbd>.
<label> LABEL tag defines a label to a form control.

<p>Where do you live?</p>
<form action="">
  <input type="radio" name="country" id="us" />
    <label for="usa">USA</label><br />
  <input type="radio" name="country" id="uk" />
    <label for="uk">UK</label>
</form>


Where do you live?
<legend> LEGEND tag assigns a caption in a fieldset element.

<legend>Questionnaire</legend>
<p>Where do you live?</p>
<form action="">
  <input type="radio" name="country" id="usa" />
    <label for="usa">USA</label><br />
  <input type="radio" name="country" id="canada" />
    <label for="canada">Canada</label>
</form>

QuestionnaireWhere do you live?
<li> LI tag defines a list of ordered and unordered items.

<ol>
    <li>HTML</li>
    <li>PHP</li>
    <li>JavaScript</li>
</ol>

<ul>
    <li>HTML</li>
    <li>PHP</li>
    <li>JavaScript</li>
</ul>


  1. HTML
  2. PHP
  3. JavaScript
  • HTML
  • PHP
  • JavaScript
<link> LINK tag defines a link to an external document, such as External Style Sheets.

<head>
    <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<marquee> MARQUEE tags define different movement behaviors.

Demos • Examples
<menu> MENU tag defines a menu list.

<menu>
    <li>Google</li>
    <li>Yahoo</li>
    <li>MSN</li>
</menu>


  • Google
  • Yahoo
  • MSN
    		•
    <meta> META tags are declaring information for the search engine robots and crawlers.

    <html>
      <head>
        <meta name="description" content="Page description goes here.">
        <meta name="keywords" content="meta tags, html tags, meta">
      </head>
      <body>
      </body>
    </html>
    <noframe> NOFRAME tag is specifying an alternate web page layout for browsers that don't support frames.

    <html>
    <head>
      <title>Frame Tags in Action</title>
    </head>
    <noframes>
      <body>
        <h1>Sorry, your browser doesn't support this feature!</h1>
      </body>
    </noframes>
    <frameset cols="35%, 65%">
      <frame src ="/htmlcodes/left-frame.html" />
      <frame src ="/htmlcodes/right-frame.html" />
    </frameset>
    </html>

    Demo • Example
    <noscript> NOSCRIPT tag is specifying a "NOSCRIPT" version page layout for browsers that don't support "SCRIPT" version. NOSCRIP tags are used in conjunction with the JavaScript or VBScript elements.

    <script type="text/javascript" language="javascript">
      document.write("We are here to learn HTML");
    </script>
    <noscript>
      Sorry, your browser doesn't support JavaScript, VBScript.
    </noscript>
    Posted by at No comments:

    Friday, 3 October 2014

    Special symbols

    &lsquo; ‘ left single quote
    &rsquo; ’ right single quote
    &sbquo; ‚ single low-9 quote
    &ldquo; “ left double quote
    &rdquo; ” right double quote
    &bdquo; „ double low-9 quote
    &dagger; † dagger
    &Dagger; ‡ double dagger
    &permil; ‰ per mill sign
    &lsaquo; ‹ single left-pointing angle quote
    &rsaquo; › single right-pointing angle quote
    &spades; ♠ black spade suit
    &clubs; ♣ black club suit
    &hearts; ♥ black heart suit
    &diams; ♦ black diamond suit
    &oline; ‾ overline, = spacing overscore
    &larr; ← leftward arrow
    &uarr; ↑ upward arrow
    &rarr; → rightward arrow
    &darr; ↓ downward arrow
    &trade; ™ trademark sign
    Name Code Number Code Glyph Description
    &#00;-&#08; unused
    &#09; horizontal tab
    &#10; line feed
    &#11; unused
    &#32; space
    &#33; ! exclamation mark
    &quot; &#34; “ double quotation mark
    &#35; # number sign
    &#36; $ dollar sign
    &#37; % percent sign
    &amp; &#38; & ampersand
    &#39; ‘ apostrophe
    &#40; ( left parenthesis
    &#41; ) right parenthesis
    &#42; * asterisk
    &#43; + plus sign
    &#44; , comma
    &#45; - hyphen
    &#46; . period
    Name Code Number Code Glyph Description
    &frasl; &#47; / slash
    &#48;-&#57; digits 0-9
    &#58; : colon
    &#59; ; semicolon
    &lt; &#60; < less-than sign
    &#61; = equals sign
    &gt; &#62; > greater-than sign
    &#63; ? question mark
    &#64; @ at sign
    &#65;-&#90; uppercase letters A-Z
    &#91; [ left square bracket
    &#92; \ backslash
    &#93; ] right square bracket
    &#93; ] caret
    &#95; _ horizontal bar (underscore)
    &#96; ` grave accent
    &#97;-&#122; lowercase letters a-z
    &#123; { left curly brace
    &#124; | vertical bar
    Name Code Number Code Glyph Description
    &#125; } right curly brace
    &#126; ~ tilde
    &#127;-&#149; unused
    &ndash; &#150; – en dash
    &mdash; &#151; — em dash
    &#152;-&#159; unused
    &nbsp; &#160; nonbreaking space
    &iexcl; &#161; ¡ inverted exclamation
    &cent; &#162; ¢ cent sign
    &pound; &#163; £ pound sterling
    &curren; &#164; ¤ general currency sign
    &yen; &#165; ¥ yen sign
    &brvbar; or &brkbar; &#166; ¦ broken vertical bar
    &sect; &#167; § section sign
    &uml; or &die; &#168; ¨ umlaut
    &copy; &#169; © copyright
    &ordf; &#170; ª feminine ordinal
    &laquo; &#171; « left angle quote
    &not; &#172; ¬ not sign
    &shy; &#173; ­ soft hyphen
    &reg; &#174; ® registered trademark
    &macr; or &hibar; &#175; ¯ macron accent
    Name Code Number Code Glyph Description
    &deg; &#176; ° degree sign
    &plusmn; &#177; ± plus or minus
    &sup2; &#178; ² superscript two
    &sup3; &#179; ³ superscript three
    &acute; &#180; ´ acute accent
    &micro; &#181; µ micro sign
    &para; &#182; paragraph sign
    &middot; &#183; · middle dot
    &cedil; &#184; ¸ cedilla
    &sup1; &#185; ¹ superscript one
    &ordm; &#186; º masculine ordinal
    &raquo; &#187; » right angle quote
    &frac14; &#188; ¼ one-fourth
    &frac12; &#189; ½ one-half
    &frac34; &#190; ¾ three-fourths
    &iquest; &#191; ¿ inverted question mark
    &Agrave; &#192; À uppercase A, grave accent
    &Aacute; &#193; Á uppercase A, acute accent
    &Acirc; &#194; Â uppercase A, circumflex accent
    Name Code Number Code Glyph Description
    &Atilde; &#195; Ã uppercase A, tilde
    &Auml; &#196; Ä uppercase A, umlaut
    &Aring; &#197; Å uppercase A, ring
    &AElig; &#198; Æ uppercase AE
    &Ccedil; &#199; Ç uppercase C, cedilla
    &Egrave; &#200; È uppercase E, grave accent
    &Eacute; &#201; É uppercase E, acute accent
    &Ecirc; &#202; Ê uppercase E, circumflex accent
    &Euml; &#203; Ë uppercase E, umlaut
    &Igrave; &#204; Ì uppercase I, grave accent
    &Iacute; &#205; Í uppercase I, acute accent
    &Icirc; &#206; Î uppercase I, circumflex accent
    &Iuml; &#207; Ï uppercase I, umlaut
    &ETH; &#208; Ð uppercase Eth, Icelandic
    &Ntilde; &#209; Ñ uppercase N, tilde
    &Ograve; &#210; Ò uppercase O, grave accent
    &Oacute; &#211; Ó uppercase O, acute accent
    &Ocirc; &#212; Ô uppercase O, circumflex accent
    &Otilde; &#213; Õ uppercase O, tilde
    Name Code Number Code Glyph Description
    &Ouml; &#214; Ö uppercase O, umlaut
    &times; &#215; × multiplication sign
    &Oslash; &#216; Ø uppercase O, slash
    &Ugrave; &#217; Ù uppercase U, grave accent
    &Uacute; &#218; Ú uppercase U, acute accent
    &Ucirc; &#219; Û uppercase U, circumflex accent
    &Uuml; &#220; Ü uppercase U, umlaut
    &Yacute; &#221; Ý uppercase Y, acute accent
    &THORN; &#222; Þ uppercase THORN, Icelandic
    &szlig; &#223; ß lowercase sharps, German
    &agrave; &#224; à lowercase a, grave accent
    &aacute; &#225; á lowercase a, acute accent
    &acirc; &#226; â lowercase a, circumflex accent
    &atilde; &#227; ã lowercase a, tilde
    &auml; &#228; ä lowercase a, umlaut
    &aring; &#229; å lowercase a, ring
    &aelig; &#230; æ lowercase ae
    &ccedil; &#231; ç lowercase c, cedilla
    &egrave; &#232; è lowercase e, grave accent
    Name Code Number Code Glyph Description
    &eacute; &#233; é lowercase e, acute accent
    &ecirc; &#234; ê lowercase e, circumflex accent
    &euml; &#235; ë lowercase e, umlaut
    &igrave; &#236; ì lowercase i, grave accent
    &iacute; &#237; í lowercase i, acute accent
    &icirc; &#238; î lowercase i, circumflex accent
    &iuml; &#239; ï lowercase i, umlaut
    &eth; &#240; ð lowercase eth, Icelandic
    &ntilde; &#241; ñ lowercase n, tilde
    &ograve; &#242; ò lowercase o, grave accent
    &oacute; &#243; ó lowercase o, acute accent
    &ocirc; &#244; ô lowercase o, circumflex accent
    &otilde; &#245; õ lowercase o, tilde
    &ouml; &#246; ö lowercase o, umlaut
    &divide; &#247; ÷ division sign
    &oslash; &#248; ø lowercase o, slash
    &ugrave; &#249; ù lowercase u, grave accent
    &uacute; &#250; ú lowercase u, acute accent
    &ucirc; &#251; û lowercase u, circumflex accent
    Name Code Number Code Glyph Description
    &uuml; &#252; ü lowercase u, umlaut
    &yacute; &#253; ý lowercase y, acute accent
    &thorn; &#254; þ lowercase thorn, Icelandic
    &yuml; &#255; ÿ lowercase y, umlaut


    Posted by at No comments:

    Wednesday, 1 October 2014

    gradient

    Linear Gradient - Top to Bottom
      background: -webkit-linear-gradient(red, blue); /* For Safari 5.1 to 6.0 */
      background: -o-linear-gradient(red, blue); /* For Opera 11.1 to 12.0 */
      background: -moz-linear-gradient(red, blue); /* For Firefox 3.6 to 15 */
      background: linear-gradient(red, blue); /* Standard syntax */



     Linear Gradient - Left to Right
     background: -webkit-linear-gradient(left, red , blue); /* For Safari 5.1 to 6.0 */
      background: -o-linear-gradient(right, red, blue); /* For Opera 11.1 to 12.0 */
      background: -moz-linear-gradient(right, red, blue); /* For Firefox 3.6 to 15 */
      background: linear-gradient(to right, red , blue); /* Standard syntax */


     Linear Gradient - Diagonal
     background: -webkit-linear-gradient(left top, red , blue); /* For Safari 5.1 to 6.0 */
      background: -o-linear-gradient(bottom right, red, blue); /* For Opera 11.1 to 12.0 */
      background: -moz-linear-gradient(bottom right, red, blue); /* For Firefox 3.6 to 15 */
      background: linear-gradient(to bottom right, red , blue); /* Standard syntax */











      
    Posted by at No comments:
    Subscribe to: Posts (Atom)