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:

    Post a Comment

    Subscribe to: Post Comments (Atom)