Programming Tutorials: HTML

Showing posts with label HTML. Show all posts

Thursday, August 7, 2014

Examples With Basic HTML Tags

Hyper text markup language which is second-hand to make web pages. Typically HTML is used to show the basic configuration of a website on the web browser. This is very basic language for web designing. All other web languages are fixed into HTML. You can say HTML is the back bone of web program. Today we will talk about some basic tags of HTML. The very basic tags we will talk about through this tutorial and also we will come to know the basic structure of a web page that is coded within HTML alone.

HTML workings tags and tags come in pair. So all tag has two parts, when we include an HTML tag within a website, we must create it first and after script some text or content we close that tag. The tag construction is like this case:

<html> Content or text here</html>

Examples With Basic HTML Tags :

<html>
<– from here the whole HTML page is started –>
<head>
<title>This is my first page</title>
</head>
<body bgcolor=”green”>
<h1> Welcome friend to my site!</h1>
<h2>This is my first website</h2>
<p style=”color:red”>I’m a web designer from Lahore, Pakistan. I’ve been blogging for last couple of years. I am very interested to further learn web designing. </p>
</body>
<– The HTML whole page is ended here –>
</html>

Same Others HTML Tags :

<i> for italic text</i>

<u>for underlining</u>

<strong>for strong text</strong>

<center>for center align a text or element</center>

<div> for a division </div>

Sunday, January 19, 2014

HTML Anchor Tag

Example code:

<html>
<title>Hyperlink or Anchor - link to a location on a page
</title>
<body>
<p>
   <a href="#C1">See also Chapter 1.</a><br>
   <a href="#C2">See also Chapter 2.</a><br>
   <a href="#C6">See also Chapter 6.</a><br>
   <a href="#C12">See also Chapter 12.</a><br>
</p>
  <h3><a name="C1">Chapter 1</a></h3>
  <p>This chapter explains about html. </p>

  <h3><a name="C2">Chapter 2</a></h3>
  <p>This chapter explains advanced html tutorial.</p>

  <h3>Chapter 3</h3>
  <p>This chapter explains anchor tag.</p>

  <h3>Chapter 4</h3>
  <p>This chapter explains meta tag.</p>

  <h3>Chapter 5</h3>
  <p>This chapter explains css tutorial.</p>

  <h3><a name="C6">Chapter 6</a></h3>
  <p>This chapter explains about javascript.</p>

  <h3>Chapter 7</h3>
  <p>This chapter explains about image tag.</p>

  <h3>Chapter 8</h3>
  <p>This chapter explains about mapping image.</p>

  <h3>Chapter 9</h3>
  <p>This chapter explains more about meta tag.</p>

  <h3>Chapter 10</h3>
  <p>This chapter explains about multimedia.</p>

  <h3>Chapter 11</h3>
  <p>This chapter explains about frame.</p>

  <h3><a name="C12">Chapter 12</a></h3>
  <p>This chapter explains about iframe.</p>

  <h3>Chapter 13</h3>
  <p>This chapter explains more on anchor tag.</p>

  <h3>Chapter 14</h3>
  <p>This chapter explains about FAQ's.</p>

</body>
</html>

HTML>>acronym/abbreviation

Code:

<acronym title="Cascading Style Sheets">CSS</acronym>
<acronym title="Hyper Text Markup Language">HTML</acronym>
<acronym title="World Wide Web">WWW</acronym>

Result:

CSS - stands for Cascading Style Sheets

HTML - stands for Hyper Text Markup Language

WWW - stands for World Wide Web

HTML Phrase Tags

<em> <strong> <dfn> <code> <samp> <kbd> <var> <cite>.

<em>	Renders as emphasized text
<strong>	Renders as strong emphasized text
<dfn>	Defines a definition term
<code>	Defines computer code text
<kbd>	Defines keyboard text
<var>	Defines a variable
<tt>	Defines a teletype
<cite>	Defines a citation

Code:

<html>
<body>
<em>This is an example for emphasized</em>
<strong>This is an example for strong</strong>
<dfn>This is an example for definition</dfn>
<code>some code..some code... </code>
<kbd>This is an example for Keyboard text</kbd>
<tt>This is an example for teletype</tt>
<cite>Citation</cite>
</body>
</html>

Result:

This is emphasized
This is an example for strong
This is an example for definition
some code..some code...
This is an example for Keyboard text
This is an example for var
This is an example for teletype
Citation

Html>> Canvas

Using the <canvas> element is not very difficult but you do need a basic understanding of HTML and JavaScript. This tag allows you to literally create a blank canvas that you can then "paint" onto using javascript.

code:

<canvas id="test" width='100' height='100'>
// javascript: set up the canvas object for drawing
var canvas = document.getElementById("test");
var context = canvas.getContext("2d");
context.beginPath();
context.moveTo(50,0);
context.lineTo(50,100);
context.stroke();

Html >>Lists with HTML Bullets - (PART_53)

Topic: bullet styles

code:
<ul>
<li> <b>Unordered Lists</b>
   <ul>
   <li type="disc"> Disc bullet
   <li type="circle"> Circle bullet
   <li type="square"> Square bullet
   </ul>

<li> <b>Ordered Lists</b>
   <ul>
   <li> Numbered
      <ul>
      <li> Decimal
      <li> Lowercase Roman numeral
      <li> Uppercase Roman numeral
      </ul>
   <li> Alphabetical
      <ul>
      <li> Lowercase
      <li> Uppercase
      </ul>
</ul>

Result:

Unordered Lists

Disc bullet

Circle bullet

Square bullet

Ordered Lists

Numbered

Decimal
Lowercase Roman numeral
Uppercase Roman numeral

Alphabetical

Lowercase
Uppercas

Example code:
<ol type="a" >
   <li> Decide on order type.
   <li> Use appropriate order styles.
   <li> Enjoy with different bullet styles.
</ol>

Result:

Decide on order type.
Use appropriate order styles.
Enjoy with different bullet styles.

Just change the type of <ol> to <ol="value"> to have the desired ordered list.

Value	Ordering Style
1	1, 2, 3, ...
i	i, ii, iii, ...
I	I, II, III, ...
a	a, b, c, ...
A	A, B, C, ...

Bullets with CSS:

Bullets can also be used with CSS to have a great look. Here let us have an example to add a gif file as bullets for a list using CSS.

Example code:
<ul class="TickList">
<li>hscripts</li>
<li>funmin</li>
<li>indiandir</li>
</ul>

Here goes the CSS style

<style type="text/css"> ul.TickList { list-style-image: url('tick.gif') } </style>

Result:

hscripts
funmin
indiandir

Html Subscript/Superscript - (PART_52)

Topic: How to make the text superscript or subscript?

Code:

This is a <sub>subscript</sub> example
This is a <sup>superscript</sup> example

Result:

This is a _subscript example

This is a ^superscript example

The <sub>,<sup> can also be used along with the CSS.

[1] - Superscript example - E=MC²

[2] - Subscript example - H₂O

Html>> Image tags - HTML form with submit button as image - (PART_51)

Topic: How to submit a form using image as button?
Html Button style.

Code:
<form name="hiox" action="index.php" method="POST">
<div align="center"> Name:<input type="text" size="25" name="name"><br>
<input type="image" src="submit.gif" name="image" width="40" height="40">
</div>
</form>

Result:

Name:

name - defines an internal name to the button.

type - defines the input type(text,image,etc,.)

src - defines the URL of the image.

width - defines the width of the image.

height - defines the height of the image.

Html>>Image tags- MAP/Image Mapping - (PART_50)

Topic: How to map an image using HTML?

<img src="tmahal.jpeg" usemap = #imgmap border=0>
<map name=imgmap>
<area shape=Rect Coords=30,30,59,59 Href="tam.jpg" Target="_blank">
<area shape=Rect Coords=100,60,129,80 Href="elephant.gif" Target="_blank" >
</map>

Result:

Attributes for image area

Class
indicates that the text is to be formatted using the specified class.

dir=direction
Indicates the direction (right or left) of the text to be displayed. Useful for languages which display left to right.

id="name"
You can name the text, which allows it to be referred and changed in a script (dynamic HTML).

NAME="NAME"
Name of an image map.

style= "style"
Defines the style for the text to be displayed title="title"
You can give a text a title if you want. This provides some additional information about the text.

HTML>> DTD - Document Type Definition - (PART_49)

Topic: How the DTD tags are used in html files?

Explanation: Document Type Definition>>

Document Type Definition is the definition tag which tells the type of document to the browser.DTD tag should be in the first line of the html file.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Strict DTD

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Transitional DTD

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/trans.dtd">

Frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frame.dtd">

Saturday, January 11, 2014

Htm>> HTML Tooltip - (PART_48)

Topic:

How to create a tooltip using title attribute?
How to create a tool tip in html?

HTML Tooltip using title attribute:

Tool tip is a popup menu box appears when you hover on any link. Tooltip can be created using the title attribute to the object.

Example Code:

<a href=" http://tutorialsprogram.blogspot.com/search/label/Tutorials" title=" Tutorials"> tutorials</a>

Result:

tutorials

In IE, the browser will display the alt text on hovering images as a tool tip. But, it is better to use the title attribute to display the tool tip in other browsers.

HTML Tooltip using javascript:

The tool tip can also be created using the javascript and div tag. It is used as a reference for any text field in the web page.

Example Code:

<DIV TITLE="header=[First row] body=[second row]" STYLE="BORDER: #558844 1px solid;WIDTH:200px;HEIGHT: 40px"> My div with some text inside. Move over me to see my popup menu. </DIV>

Result: My div with some text inside. Move over me to see my popup menu.

Html>> HTML Fieldset and Legend Tags - (PART_47)

Topic: How to draw outline or boxes around the elements in the html page using fieldset? How Legend tag is used as a caption for html page elements?

HTML Fieldset and Legend Tag:
Fieldset is an element used for drawing an outline or boxes around the field elements in the html page. Legend tag is used as a caption for fieldset element.

Example Code:

<legend>Details</legend>

Name <input type="text" size="10" />

Age <input type="text" size="3" />

</fieldset>

Result:

DetailsName Age

This example shows drawing an outline box with "Details" as caption using legend tag. Size of the outline box can be adjusted by resizing the width.

Example Code:

<legend>Details</legend>

Name <input type="text" size="10" />

Age <input type="text" size="3" />

</fieldset>

Result:

DetailsName Age

Mostly, these tags are used in lengthy forms to give the webpage a good look. Here is an example where these tags are used in feedback form.

Note: Fieldset encloses content between <td> and </td>, so it doesnt work for forms defined by multiple rows and columns.

Wednesday, January 8, 2014

Html>>Frame tags >>Frames and Frameset Tag - (PART_46)

Topic:

What is Frames in HTML?
How to divide the window using frameset tag?

Explanation:

<frameset tag>:
Frameset element is used to divide the window into frames with mentioned width and height. Rows and columns can be defined by using the ROWS and COLS attributes. Rows and cols are defined by the percentage(%) to get the desired frames.

Example Code:

<frameset rows="50%,50%" cols="50%,50%">
<frame name="Img1" >
<frame name="Img2" >
<frame name="title1">
<frame name="title2">
</frameset>

Result:

click here to view the result

Noresize & Scrolling:

Noresize and scrolling attributes are much used here to customise the window size. Noresize will not allow the user to adjust the frameborder. Scrolling can be done by setting Scrolling attribute as "Yes/No". These both attributes are used to make the frames more precise.

Example Code:

<frameset rows="50%,50%" cols="50%,50%">
<frame noresize="noresize" name="Img1" >
<frame noresize="noresize" name="Img2" >
<frame noresize="noresize" name="title1">
<frame noresize="noresize" name="title2">
</frameset>

Result:

click here to view the result

Likewise, we can have different type of frames by using the above frameset tags. Frameset is mainly used for navigation within the single window and to display multiple web pages at the same time.

Navigation within frames:

Mostly the web site uses the frames to have the links in left frame and its contents to be opened in the right frames. There can be navigation within the frames in a single window. The links in the first frame can be linked to any other frames in the same window. The site navigation can be done just by giving the target link to the frame name of the same window.

Example Code:

<frameset cols="150,*">
<frame name="left" scrolling="no" noresize target="rbottom" src="leftpane.htm">
<frameset rows="20%,*">
<frame name="rtop" scrolling="no" noresize align="center" target="rbottom" src="head.jpg">
<frame name="rbottom" src="http://income2earning.blogspot.com">
</frameset>
<noframes>
<body>
<p>This page uses frames, but your browser doesn't support them.</p>
</body>
</noframes>
</frameset>

Result:

click here to view the result

Thus, the frameset is used in making the webpages more compatible and ease to navigate. The links can be given from any frame to other.

Drawbacks:

Frameset do also have some drawbacks which makes its usage much low.

1. First, it is hardly affected by search engines. You have to create seperate pages especially for the search engines which does not support them.

2. While bookmarking a page, only the frames get bookmarked and not the exact html page. So, it is difficult to catch the relevant page on visiting the bookmarked page.

Tuesday, January 7, 2014

Html >>Meta Tag - (PART_45)

Topic:

How meta tags are used for search engine optimisation(SEO) in html pages?
How the webpages are get indexed and how html meta tag plays keyword optimisation?

Explanation:

Meta Tag:

The search engines make use of these tags for webpage indexing. They are used to make the page ranking to be in top position while searching.

META Keywords:

The keywords tags can be used to give the important keywords of the page which will keep your site listed in top position during the search.

<meta name="keywords" content="HTML,Advanced,Search,Frameset" />

The keywords must be separated by comma. Same keywords should not be repeated again. The Keywords tag should be placed in the <head> portion of your webpage.

META Description:

A description tag is used to give the description of the page. Search engines will use this tag to display its content in the searches. So, it is better to give proper explanation to attract the users during the search.

<meta name="description" content="Demo of advanced HTML" />

META refresh:

<meta http-equiv="Refresh" content="2">

The CONTENT sets the time for the browser to refresh the page. Using the refresh we can also redirect the same page to another mentioned url. After getting refreshed it will be redirected to a new page..

<meta http-equiv="Refresh" content="15;URL=http://income2earning.blogspot.com">

Just click below the link to have the list of name and value for using the meta tag.

Conclusion:

Thus, the meta tags can be used to make our website to be at the top in search results. Also the search engines catches these tags to avoid spam sites.

Note: The Meta tags are anymore not used by the modern search engines.

Html>> Media >>Embedding Video to HTML File - (PART_44)

Topic:

How a video file can be embedded into a webpage?
How to add a media player into HTML files?

Explanation:

HTML embedding video in IE:

Adding a media player to HTML page is simple using the embed tag. Mostly the embed element is used for embedding video files into the html pages. We can also use the DYNSRC attribute of the image element for adding media file. It works only in the Internet explorer.

Example Code:

<IMG DYNSRC="ourmovie.mov" LOOP="true" WIDTH="200" HEIGHT="100">

HTML embedding using the embed element:

Just use <EMBED> tag to add video

Example Code:

<EMBED SRC="mymovie.mov" WIDTH="200" HEIGHT="100" AUTOPLAY="TRUE" LOOP="true"></EMBED>

This will include a media file into your webpage.

Result:

Attributes of Embed Tag:

SRC: This attribute takes the video/movie to the source URL.

WIDTH and HEIGHT: It specifies the dimensions of the plug-ins.

AUTOPLAY: Its value can be either TRUE or false
TRUE: Movie plays when page loads
FALSE: Waits for the user to click the play button in window media player.

LOOP: Setting this to TRUE will play the media file continuously. A FALSE value will play the media only once.

CONTROLLER: Display controls. Can be set to TRUE or FALSE.

Adding video using Object Tag:

Video files can also be inserted into the webpage or html pages using the standard object tag. Object element works in both IE and netscape browsers. For some types, like QuickTime document, adding the classid attribute will load the controls.

Example Code:
<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" width="320" height="240">
<param name="src" value="data/intro.wmv" >
<param name="controller" value="true" >
<param name="autoplay" value="false">
<object type="video/quicktime" data="data/intro.wmv" width="320" height="240">
<param name="controller" value="true" >
<param name="autoplay" value="false">
alt : <a href="intro.wmv">test movie</a>
</object>
</object>

Result:

alt : test movie

Note:If your browser supports this object tag, video will display or you have to click on the link to view the video.