Category Archives: Software Development

HTML Images

To show images in your HTML pages, you can use <img> tag. You can use .jpg, .gif, .png images in you web page. Always use compress image like jpg, gif and png images for faster loading and betterresults.

Img tag and it’s Attributes:

Src: This is used to define the path of the image file that you want to show in your web page.

<img src="path2yourfile.gif">

Align: You can set alignment of the image like leftright or center.

 <img src="path2yourfile.gif" align="left">

Alt: Alternate text. For any case if the image can’t display in the web browser the alt text will disply in place of the image. This is also required for SEO (Search Engine Optimization).

 <img src="path2yourfile.gif" alt="this is my image">

Border: This element used to define the border of the image. You can use border=”0″ (Zero) to display no border.

 <img src="path2yourfile.gif" border="0">

Class: You can also assign CSS class to any image with the help of class attribute.

 <img src="path2yourfile.gif">

Height: This attribute is used to define the height of an image.

 <img src="path2yourfile.gif" height="50px">

Id: You can set any unique id of an image for programming use with the help of ID attribute.

 <img src="path2yourfile.gif" id="uid3">

Width: This attribute is used to define the width of an image.

 <img src="path2yourfile.gif" width="100px">

Title: This attribute is used to define the Title of an image. On mouse over the image the title of the image will display. This is an optional option, but it is also helpfull for SEO.

 <img src="path2yourfile.gif" title="Image title here">

Hyperlink of an image

<a href="mypage.html"><img src="file.gif" border="0"></a>

 

HTML Lists

To create bulleted lines of text you can use HTML lists. Unordered lists (bullets), ordered lists (numbers) and definition lists (think: dictionaries) are three different types of HTML Lists.
Click here to know how to styling List in CSS.

Unordered lists (bullets): The <ul> tag

<ul>
   <li>HTML</li>
   <li>CSS</li>
   <li>Java Script</li>
   <li>PHP</li>
</ul>

The different type of Unordered list are square, circle and disc.

<ul type="square">
<ul type="circle">
<ul type="disc">

Numbered/Ordered List: The <ol> tag

<ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>Java Script</li>
    <li>PHP</li>
</ol>

The different type of Numbered list are letters and Roman Numbers.

<ol type="a">
<ol type="A">
<ol type="i">
<ol type="I">

You can also change the start number

<ol start="7">

Definition Term Lists: The <dl> tag

<dl> – opening clause that defines the start of the list
<dt> – list item that defines the definition term
<dd> – definition of the list item

<dl>
   <dt>HTML</dt>
   <dd>- Hyper Text Markup Language</dd>
   <dt>CSS</dt>
   <dd>- Cascading Style Sheets</dd>
</dl>

HTML Attributes

Many HTML tags have a unique set of their own attributes. These attributes are divided into core attributesinternationalization attributes, and scripting events. Attributes are always specified in the start tag and come in name/value pairs like: name=”value”

Example

<a href="http://www.a2zwebhelp.com">Link to my website.</a>
<p id="firstp">This is my first paragraph.</p>
<h2 align="center" title="center text">Centered Heading</h2>

HTML Attributes with category

Category Attributes Name
Core Attributes id <p id=”myid”>My Text.</p>
class <div clsss=”newclass”> Text </div>
name <form name=”arup”></form>
style <span style=”font-family: arial”> Arial</span>
title <h1 title=”Heading”> Heading </h1>
alt <img src=”” alt=”my image”>
align <p align=”left”></p>
valign <td valign=”top”>&nbsp;</td>
bgcolor <td bgcolor=”#808080″>&nbsp;</td>
background <td background=”filepath”>&nbsp;</td>
width <img width=”100px”>
height <img width=”100px” height=”100px”>
Internationalization Attributes LANG <span lang=en>Welcome</span>
DIR
Common Scripting Events ONCLICK mouse button is clicked on an element.
ONDBLCLICK mouse button is double-clicked on an element
ONMOUSEDOWN mouse button is pressed over an element
ONMOUSEUP mouse button is released over an element
ONMOUSEOVER mouse is moved onto an element
ONMOUSEMOVE mouse is moved while over an element
ONMOUSEOUT mouse is moved away from an element
ONKEYPRESS a key is pressed and released over an element
ONKEYDOWN a key is pressed down over an element
ONKEYUP a key is released over an element

HTML5 Elements

In the previous chapter we have discussed about some of the basic HTML 4 elements. Apart form those HTML 5 has introduced some other useful elements and tags and also some of the old elements removed in HTML 5. Let’s discuss those in detail.

HTML 5 New Elements

<canvas>
<details>
<datagrid>
<menu>
<summary> Defines a visible heading for a <details> element
<mark>  to indicate content that is marked in some fashion
<time>  to indicate content that is a time or date
<meter>  to indicate content that is a fraction of a known range – such as disk usage
<progress>  to indicate the progress of a task towards completion
<wbr>

HTML 5 Media Elements

<audio>
<video>
<source>
<embed>
<track>

HTML 5 Form Input Type

datetime
datetime-local
date
month
week
time
number
range

email
url

(Click here for more detail about HTML 5 form elements and input types)

Some elements removed in HTML 5

  • acronym
  • applet
  • basefont
  • big
  • center
  • dir
  • font
  • frame
  • frameset
  • isindex
  • noframes
  • noscript
  • strike
  • tt

HTML Elements

What is HTML Elements?

Elements are the basic structure for HTML markup. Elements have two basic properties: attributes and content. Each attribute and each element’s content has certain restrictions that must be followed for an HTML document to be considered valid. An element usually has a start tag (e.g. <element-name>) and an end tag (e.g. </element-name>). The element’s attributes are contained in the start tag and content is located between the tags (e.g. <element-name attribute=”value”> Content </element-name>). Some elements, such as <br>, do not have any content and have no closing tag.

Example

<span id="myId" style="color:blue;" 
title="a2zwebhelp">A2ZWebHelp </span>

Head elements

<title>…</title>: Define a document title. This element is required in every HTML document. Web browsers usually display the title in a window’s title bar when the window is open, and in the task bar when the window is minimized.

<title> My Home Page </title>

<link>: Specifies links to other documents. To Link an external stylesheets you can write:

<link rel="stylesheet" type="text/css" href="path to file">

<script>…</script>: Used to add JavaScript or other scripts to the document.

<script language="javascript" >…</script>

<style>…</style>: Specifies a style for the document.

<style type="text/css">…</style>

<meta>: Can be used to specify additional metadata about a document, such as author, publication date, expiration date, page description, keywords, or other information not provided through the other header elements and attributes. Because of their generic nature, meta elements specify associative key-value pairs. Meta elements can specify HTTP headers which should be sent before the actual content when the HTML page is served from Web server to client: for example,

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

HTML Elements with category

Category Element Name
Top-level Elements HTML
HEAD
BODY
FRAMESET
Head Elements BASE
ISINDEX Removed in HTML 5
LINK
META
SCRIPT
STYLE
TITLE
Generic Block-level Elements ADDRESS
BLOCKQUOTE
CENTER Removed in HTML 5
DELDIV
H1
H2
H3
H4
H5
H6
HR
INS
ISINDEX
NOSCRIPT * Removed in HTML 5
P
PRE
Lists DIR Removed in HTML 5
DL
DT
DD
LI
Tables TABLE
CAPTION
COLGROUP
COL
THEAD
TFOOT
TBODY
TR
TD
TH
Forms FORM
BUTTON
FIELDSET
— LEGEND
INPUT
LABEL
SELECT
— OPTGROUP
— OPTION
 
TEXTAREA
Special Inline Elements A
APPLET Removed in HTML 5
BASEFONT Removed in HTML 5
BDO
BR
FONT Removed in HTML 5
IFRAME Removed in HTML 5
IMG
MAP
— AREA
OBJECT
PARAM
Q
SCRIPT
SPAN
SUB
SUP
Phrase Elements ABBR
ACRONYM Removed in HTML 5
CITE
CODE
DEL
DFN
EM
INS
KBD
SAMP
STRONG
VAR
Font Style Elements B
BIG Removed in HTML 5
I
S
SMALL
STRIKE Removed in HTML 5
TT Removed in HTML 5
U
Frames FRAMESET – Frameset Removed in HTML 5
FRAME – Frame Removed in HTML 5
NOFRAMES – Frames alternate content Removed in HTML 5