Monday 15 February 2010

Convert Bookmarks or Favorites to html or text

I have a couple of folders of internet explorer bookmarks / favorites, and I'd like to post them to a web page so that others can view the text description and click thru on them. Is there a free / quick / simple way to do this?

Ans:  From the IE menu:

File -> Import and Export -> Next -> Export Favorites

Friday 5 February 2010

HTML Image Maps

Image maps are images with clickable areas (sometimes referred to as "hotspots") that usually link to another page. If used tastefully, image maps can be really effective. If not, they can potentially confuse users.

To create an image map:

  1. First, you need an image. Create an image using the usual method (i.e. via an image editor, then save as a gif or jpeg into your website's image folder).

  2. Use the HTML map tag to create a map with a name. Inside this tag, you will specify where the clickable areas are with the HTML area tag

  3. Use the HTML img tag to link to this image. In the img tag, use with the usemap attribute to define which image map to use (the one we just specified).


Image Map Example


HTML Code:

<img src ="/pix/mueller_hut/mueller_hut_t.jpg"
width="225" height="151" border="0"
alt="Mueller Hut, Mount Cook, and I"
usemap ="#muellermap" />

<map id ="muellermap"
name="muellermap">
<area shape ="rect" coords ="90,80,120,151"
href ="javascript:alert('Me');"
alt="Me" />
<area shape ="poly" coords ="55,55,120,80,90,80,90,100,70,100,20,80,55,55"
href ="http://en.wikipedia.org/wiki/Mount_Cook"
alt="Mount Cook" />
<area shape ="poly" coords ="145,80,145,100,215,90,215,80,180,60,145,80"
href ="http://www.natural-environment.com/places/mueller_hut.php"
alt="Mueller Hut" />
</map>


 

OK, compared to our previous lessons, this code is looking quite complex. However, once you really study it, it is not that complex. All we are doing, is specifying an image, then we are creating a map with coordinates. The hardest part is getting all the coordinates right.

In our example, we use the area in conjunction with the shape and coord attributes. These accept the following attributes:











shapeDefines a shape for the clickable area. Possible values:

  • default

  • rect

  • circle

  • poly


coordsSpecifies the coordinates of the clickable area. Coordinates are specified as follows:

  • rect: left, top, right, bottom

  • circle: center-x, center-y, radius

  • poly: x1, y1, x2, y2, ...



You can use the above attributes to configure your own image map with as many shapes and clickable regions as you like.

HTML Tables

In HTML, the original purpose of tables was to present tabular data. Although they are still used for this purpose today, many web designers tended to use tables for advanced layouts. This is probably due to the restrictions that HTML has on layout capabilities - it wasn't really designed as a layout language.


Anyway, whether you use tables for presenting tabular data, or for page layouts, you will use the same HTML tags.



Basic table tags


In HTML, you create tables using the table tag, in conjunction with the tr and td tags. Although there are other tags for creating tables, these are the basics for creating a table in HTML.




HTML Code:





<table border="1">
<tr>
<td>Table cell 1</td><td>Table cell 2</td>

</tr>
</table>




This results in:








Table cell 1Table cell 2




You'll notice that we added a border attribute to the table tag. This particular attribute allows us to specify how thick the border will be. If we don't want a border we can specify 0 (zero). Other common attributes you can use with your table tag include width, width, cellspacing and cellpadding.



You can also add attributes to the tr and td tags. For example, you can specify the width of each table cell.



Widths can be specified in either pixels or percentages. Specifying the width in pixels allows you to specify an exact width. Percentages allows the table to "grow" or "shrink" depending on what else is on the page and how wide the browser is.



HTML Code:






<table border="1" cellpadding="5" cellspacing="5" width="100%">
<tr>
<td width="20%">Table cell 1</td><td>Table cell 2</td>
</tr>
</table>





This results in:







Table cell 1Table cell 2



Table Headers



Many tables, particularly those with tabular data, have a header row or column. In HTML, you can use the th tag.


Most browsers display table headers in bold and center-aligned.



HTML Code:





<table border="1" cellpadding="5" cellspacing="5" width="100%">
<tr>

<th>Table header</th>
<th>Table header</th>
</tr>

<tr>
<td width="20%">Table cell 1</td><td>Table cell 2</td>

</tr>
</table>




This results in:











Table headerTable header
Table cell 1Table cell 2



Colspan


You can use the colspan attribute to make a cell span multiple columns.



HTML Code:






<table border="1" cellpadding="5" cellspacing="5" width="100%">
<tr>
<th colspan="2">Table header</th>
</tr>
<tr>
<td width="20%">Table cell 1</td><td>Table cell 2</td>

</tr>
</table>




This results in:











Table header
Table cell 1Table cell 2



Rowspan


Rowspan is for rows just what colspan is for columns (rowspan allows a cell to span multiple rows).



HTML Code:






<table border="1" cellpadding="5" cellspacing="5" width="100%">
<tr>
<th rowspan="2">Table header</th><td>Table cell 1
</tr>
<tr>
<td>Table cell 2</td>

</tr>
</table>




This results in:










Table headerTable cell 1
Table cell 2



Color


You can apply color to your table using CSS. Actually, you can apply any applicable CSS property to your table - not just colors. For example, you can use CSS to apply width, padding, margin, etc



HTML Code:





<table border="1" cellpadding="5" cellspacing="5" width="100%">

<tr>
<th style="color:blue;background-color:yellow;" rowspan="2">Table header</th><td>Table cell 1
</tr>
<tr>
<td>Table cell 2</td>
</tr>

</table>




This results in:










Table headerTable cell 1
Table cell 2

HTML Forms

HTML enables us to create forms. This is where our websites can become more than just a nice advertising brochure. Forms allow us to build more dynamic websites that allow our users to interact with it.

An HTML form is made up of any number of form elements. These elements enable the user to do things such as enter information or make a selection from a preset options.

In HTML, a form is defined using the <form></form> tags. The actual form elements are defined between these two tags.

The Input Tag


This is the most commonly used tag within HTML forms. It allows you to specify various types of user input fields such as text, radio buttons, checkboxes etc.

Text


Text fields are used for when you want the user to type text or numbers into the form.
<input type="text" />

This results in:

Radio Buttons


Radio buttons are used for when you want the user to select one option from a pre-determined set of options.

<input type="radio" name="lunch" value="pasta" /><br />
<input type="radio" name="lunch" value="rissotto" />


This results in:


Checkboxes


Checkboxes are similar to radio buttons, but enable the user to make multiple selections..

<input type="checkbox" name="lunch" value="pasta" /><br />
<input type="checkbox" name="lunch" value="rissotto" />



This results in:


Submit


The submit button allows the user to actually submit the form.
<input type="submit" />

This results in:

Select Lists


A select list is a dropdown list with options. This allows the user to select one option from a list of pre-defined options.

The select list is created using the select in conjunction with the option tag.

<select>
<option value ="sydney">Sydney</option>

<option value ="melbourne">Melbourne</option>
<option value ="cromwell">Cromwell</option>
<option value ="queenstown">Queenstown</option>
</select>



This results in:

Form Action


Usually when a user submits the form, you need the system to do something with the data. This is where the action page comes in. The action page is the page that the form is submitted to. This page could contain advanced scripts or programming that inserts the form data into a database or emails an administrator etc.

Creating an action page is outside the scope of this tutorial. In any case, many web hosts provide scripts that can be used for action page functionality, such as emailing the webmaster whenever the form has been completed. For now, we will simply look at how to submit the form to the action page.

You nominate an action page with the action attribute.

Example HTML Code:

<form action="/html/tags/html_form_tag_action.cfm" method="get">
First name:
<input type="text" name="first_name" value="" maxlength="100" />
<br />

Last name:
<input type="text" name="last_name" value="" maxlength="100" />
<input type="submit" value="Submit" />
</form>


This results in:
First name:
Last name:

Oh, one last thing. You may have noticed the above example uses a method attribute. This attribute specifies the HTTP method to use when the form is submitted.

Possible values are:

  • get (the form data is appended to the URL when submitted)

  • post (the form data is not appended to the URL)


Providing this attribute is optional. If you don't provide it, the method will be post.

HTML Comments

Comments are a part of the HTML code and is used to explain the code. This can be helpful for other HTML coders when trying to interpret someone elses code. It can also be useful for yourself if you have to revisit your code in many months, or even years time. Comments aren't displayed in the browser - they are simply there for the programmer's benefit.

You write comments like this:
<!-- Write your comment here -->

Comments always start with <!-- and end with -->. This tells the browser when a comment begins and ends.

HTML Meta Tags

Meta tags allow you to provide metadata about your HTML pages. This can be very useful for search engines and can assist the "findability" of the information on your website.

What is Metadata?


Metadata is information about, or that describes, other data or information.

If we relate this to a web page, if you think about it for a moment, you could probably come up with a lot more information about a web page than what you're actually displaying to the reader. For example, there could be a number of keywords that are related to the page. You could probably give the page a description. The page also has an author - right? All these could be examples of metadata.

Metadata on the Web


Metadata is a very important part of the web. It can assist search engines in finding the best match when a user performs a search. Search engines will often look at any metadata attached to a page - especially keywords - and rank it higher than another page with less relevant metadata, or with no metadata at all.

Adding Meta Tags to Your Documents


You can add metadata to your web pages by placing <meta> tags between the <head> and </head> tags. The can include the following attributes:























AttributeDescription
NameName for the property. Can be anything. Examples include, keywords, description, author, revised, generator etc.
contentSpecifies the property's value.
schemeSpecifies a scheme to use to interpret the property's value (as declared in the content attribute).
http-equivUsed for http response message headers. For example http-equiv can be used to refresh the page or to set a cookie. Values include content-type, expires, refresh and set-cookie.

Example HTML Code:




Keywords:

<meta name="keywords" content="HTML, meta tags, metadata" />



Description:

<meta name="description" content="Contains info about meta tags" />



Revision date (last time the document was updated):

<meta name="revised" content="Quackit, 6/12/2009" />



Refresh the page every 10 seconds:

<meta http-equiv="refresh" content="10" />

The above examples are some of the more common uses for the meta tag.

HTML Images

Images make up a large part of the web - most websites contain images. HTML makes it very easy for you to embed images into your web page.

To embed an image into a web page, the image first needs to exist in either .jpg, .gif, or .png format. You can create images in an image editor (such as Adobe Photoshop) and save them in the correct format.

Once you've created an image, you need to embed it into your web page. To embed the image into your web page, use the <img /> tag, specifying the actual location of the image.

Example of Image Usage


HTML Code:

<img src="http://www.xyz.com/pix/smile.gif"
width="100" height="100" alt="Smile" />

This results in:
width="100" height="100" alt="Smile" />

The img above contains a number of attributes. These attributes tell the browser all about the image and how to display it. Here's an explanation of these attributes:



















srcRequired attribute. This is the path to the image. It can be either an absolute path, or a relative path (remember these terms from our last lesson?)
widthOptional attribute (but recommended). This specifies the width to display the image. If the actual image is wider, it will shrink to the dimensions you specify here. Likewise, if the actual image is smaller it will expand to your dimensions. I don't recommend specifying a different size for the image, as it will lose quality. It's better to make sure the image is the correct size to start with.
heightOptional attribute (but recommended). This specifies the height to display the image. This attribute works similar to the width.
altAlternate text. This specifies text to be used in case the browser/user agent can't render the image.

HTML Links

Links, otherwise known as hyperlinks, are defined using the <a> tag - otherwise known as the anchor element.

To create a hyperlink, you use the a tag in conjunction with the href attribute (href stands for Hypertext Reference). The value of the href attribute is the URL, or, location of where the link is pointing to.

Example HTML Code:

Visit the <a href="http://www.CodeItSimple.com/blog/">CodeItSimple Blog</a>

This results in:
Visit the CodeItSimple

Hypertext references can use absolute URLS, relative URLs, or root relative URLs.

absolute
This refers to a URL where the full path is provided. For example, http://www.codeitsimple.com/html/tutorial/index.cfm
relative
This refers to a URL where only the path, relative to the current location, is provided. For example, if we want to reference the http://www.codeitsimple.com/html/tutorial/index.cfm URL, and our current location is http://www.codeitsimple.com/html, we would use tutorial/index.cfm
root relative
This refers to a URL where only the path, relative to the domain's root, is provided. For example, if we want to reference the http://www.codeitsimple.com/html/tutorial/index.cfm URL, and the current location is http://www.codeitsimple.com/html, we would use /html/tutorial/index.cfm. The forward slash indicates the domain's root. This way, no matter where your file is located, you can always use this method to determine the path, even if you don't know what the domain name will eventually be.

Link Targets


You can nominate whether to open the URL in a new window or the current window. You do this with the target attribute. For example, target="_blank" opens the URL in a new window.

The target attribute can have the following possible values:



















_blankOpens the URL in a new browser window.
_selfLoads the URL in the current browser window.
_parentLoads the URL into the parent frame (still within the current browser window). This is only applicable when using frames.
_topLoads the URL in the current browser window, but cancelling out any frames. Therefore, if frames were being used, they aren't any longer.

Example HTML Code:



Visit the <a href="http://www.CodeItSimple.com" target="_blank">CodeItSimple</a>



This results in:
Visit the CodeItSimple

Named Anchors


You can make your links "jump" to other sections within the same page. You do this with named anchors.

To use named anchors, you need to create two pieces of code - one for the hyperlink (this is what the user will click on), and one for the named anchor (this is where they will end up).

This page uses a named anchor. I did this by performing the steps below:

  1. I created the named anchor first (where the user will end up)Example HTML Code:


    <h2>Link Targets<a name="link_targets"></a></h2>


  2. I then created the hyperlink (what the user will click on). This is done by linking to the nameof the named anchor. You need to preceed the name with a hash (#) symbol.Example HTML Code:



    <a href="#link_targets">Link Targets</a>




This results in:

When you click on the above link, this page should jump up to the "Link Targets" section (above). You can either use your back button, or scroll down the page to get back here.

You're back? Good, now lets move on to email links.

Email Links


You can create a hyperlink to an email address. To do this, use the mailto attribute in your anchor tag.

Example HTML Code:

<a href="mailto:king_kong@codeitsimple.com">Email King Kong</a>

This results in:

Clicking on this link should result in your default email client opening up with the email address already filled out.

You can go a step further than this. You can auto-complete the subject line for your users, and even the body of the email. You do this appending subject and body parameters to the email address.

Example HTML Code:

<a href="mailto:king_kong@codeitsimple.com?subject=Question&body=Hey there">Email King Kong</a>

This results in:

Base href


You can specify a default URL for all links on the page to start with. You do this by placing the base tag (in conjunction with the href attribute) in the document's head.

Example HTML Code:

<head>
<base url="http://www.codeitsimple.com">
</head>

HTML Colors

In HTML, colors can be added by using the style attribute. You can specify a color name (eg, blue), a hexadecimal value (eg, #0000ff), or an RGB value (eg rgb(0,0,255)).

Syntax


Foreground Color


To add color to an HTML element, you use style="color:{color}", where {color} is the color value. For example:

<h3 style="color:blue">HTML Colors</h3>

This results in:

HTML Colors



Background Color


To add a background color to an HTML element, you use style="background-color:{color}", where {color} is the color value. For example:

<h3 style="background-color:blue">HTML Colors</h3>

This results in:

HTML Colors



Border Color


To add a colored border to an HTML element, you use style="border:{width} {color} {style}", where {width} is the width of the border, {color} is the color of the border, and {style} is the style of the border. For example:


<h3 style="border:1px blue solid;">HTML Colors</h3>


This results in:

HTML Colors



Color Names


The most common methods for specifying colors are by using the color name or the hexadecimal value. Although color names are easier to remember, the hexadecimal values and RGB values provides you with more color options.

Hexadecimal values are a combination of letters and numbers. The numbers go from 0 - 9 and the letters go from A to F. When using hexadecimal color values in your HTML/CSS, you preceed the value with a hash (#). Although hexadecimal values may look a little weird at first, you'll soon get used to them.

There are 16 color names (as specified in the HTML 4.0 specification). The chart below shows these color names and their corresponding hexadecimal value.




















































































ColorColor NameHexadecimal ValueColorColor NameHexadecimal Value
Black#000000Green#008000
Silver#c0c0c0Lime#00ff00
Gray#808080Olive#808000
White#ffffffYellow#ffff00
Maroon#800000Navy#000080
Red#ff0000Blue#0000ff
Purple#800080Teal#008080
Fushia#ff00ffAqua#00ffff

You can make up your own colors by simply entering any six digit hexadecimal value (preceeded by a hash). In the following example, we're using the same code as above. The only difference is that, instead of using "blue" as the value, we're using its hexadecimal equivalent (which is #0000ff):

<h3 style="color:#0000ff">HTML Colors</h3>

This results in:

HTML Colors



If we wanted to change to a deeper blue, we could change our hexadecimal value slightly, like this:

<h3 style="color:#000069">HTML Colors</h3>

This results in:

HTML Colors



Choosing Colors - The Easy Way


By using hexadecimal or RGB color values, you have a choice of over 16 million different colors. You can start with 000000 and increment by one value all the way up to FFFFFF. Each different value represents a slightly different color.

HTML Attributes

HTML tags can contain one or more attributes. Attributes are added to a tag to provide the browser with more information about how the tag should appear or behave. Attributes consist of a name and a value separated by an equals (=) sign.

Example


Consider this example:
<body style="background-color:orange">

OK, we've already seen the body tag in previous lessons, but this time we can see that something extra has been added to the tag - an attribute. This particular attribute statement, style="background-color:orange", tells the browser to style the body element with a background color of orange.

The browser knows to make the background color orange because we are using standard HTML tags and attributes (along with standard Cascading Style Sheets code) for setting the color.

Another Example


Here's another example of adding an attribute to an HTML tag. In this example, we use the <a> tag to create a hyperlink to the CodeItSimple website.
<a href="http://codeitsimple.com/">CodeItSimple Website</a>

 

Many attributes are available to HTML elements, some are common across most tags, others can only be used on certain tags. Some of the more common attributes are:























AttributeDescriptionPossible Values
classUsed with Cascading Style Sheets (CSS)(the name of a predefined class)
styleUsed with Cascading Style Sheets (CSS)(You enter CSS code to specify how the way the HTML element is presented)
titleCan be used to display a "tooltip" for your elements.(You supply the text)

You don't need to fully comprehend these just yet. The good thing about attributes is that, in most cases, they are optional. Many HTML elements assign a default value to its attributes - meaning that, if you don't include that attribute, a value will be assigned anyway. Having said that, some HTML tags do require an attribute (such as the hyperlink example above).

HTML Formatting

You may be familiar with some of the formatting options that are available in word processing applications such as Microsoft Office, and desktop publishing software such as QuarkXpress. Well, many of these formatting features are available in HTML too! This lesson contains some of the more common formatting options.

Headings


There is a special tag for specifying headings in HTML. There are 6 levels of headings in HTML ranging from h1 for the most important, to h6 for the least important.

Typing this code:

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>


Results in this:

Heading 1


Heading 2


Heading 3


Heading 4


Heading 5

Heading 6


Bold


You specify bold text with the <b> tag.

Typing this code:
<b>This text is bold.</b>

Results in this:
This text is bold.

Italics


You specify italic text with the <i> tag.

Typing this code:
<i>This text is italicised.</i>

Results in this:
This text is italicised.

Line Breaks


Typing this code:
<p>Here is a...<br />line break.</p>

Results in this:


Here is a
line break.


Horizontal Rule


Typing this code:
Here's a horizontal rule... <hr /> ...that was a horizontal rule :)

Results in this:
Here's a horizontal rule...
...that was a horizontal rule :)

Unordered (un-numbered) List


Typing this code:

<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>


Results in this:


  • List item 1

  • List item 2

  • List item 3



Ordered (numbered) List


Note, that the only difference between an ordered list and an unordered list is the first letter of the list definition ("o" for ordered, "u" for unordered).

Typing this code:

<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>


Results in this:


  1. List item 1

  2. List item 2

  3. List item 3


HTML Elements

HTML elements are the fundamentals of HTML. HTML documents are simply a text file made up of HTML elements. These elements are defined using HTML tags. HTML tags tell your browser which elements to present and how to present them. Where the element appears is determined by the order in which the tags appear.

HTML consists of almost 100 tags. Don't let that put you off though - you will probably find that most of the time, you only use a handful of tags on your web pages. Having said that, I highly recommend learning all HTML tags eventually - but we'll get to that later.

OK, lets look more closely at the example that we created in the previous lesson.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>HTML Tutorial Example</title>
</head>
<body>
<p>Less than 5 minutes into this HTML tutorial and
I've already created my first homepage!</p>
</body>
</html>


Explanation of the above code:

  • The <!DOCTYPE... > element tells the browser which version of HTML the document is using.

  • The <html> element can be thought of as a container that all other tags sit inside (except for the !DOCTYPE tag).

  • The <head> tag contains information that is not normally viewable within your browser (such as meta tags, JavaScript and CSS), although the <title> tag is an exception to this. The content of the <title> tag is displayed in the browser's title bar (right at the very top of the browser).

  • The <body> tag is the main area for your content. This is where most of your code (and viewable elements) will go.

  • The <p> tag declares a paragraph. This contains the body text.


Closing your tags


As mentioned in a previous lesson, you'll notice that all of these tags have opening and closing tags, and that the content of the tag is placed in between them. There are a few exceptions to this rule.

You'll also notice that the closing tag is slightly different to the opening tag - the closing tag contains a forward slash (/) after the <. This tells the browser that this tag closes the previous one.

UPPERCASE or lowercase?


Although most browsers will display your page regardless of the case you use, you should always code in lowercase. This helps keep your code XML compliant (but that's another topic).













Therefore...Good:<head>
Bad:<HEAD>

Getting Started HTML

When you create a web page you will usually do something like this:

  1. Create an HTML file

  2. Type some HTML code

  3. View the result in your browser

  4. Repeat the last 2 steps (if necessary)


Creating a Webpage


OK, let's walk through the above steps in more detail.


  1. Create an HTML file


    An HTML file is simply a text file saved with an .html or .htm extension (i.e. as opposed to a .txt extension).

    1. Open up your computer's normal plain text editor (this will probably be Notepad if you're using Windows or TextEdit if you're using a Mac). You could use a specialized HTML editor such as DreamWeaver or FrontPage if you prefer.

    2. Create a new file (if one wasn't already created)

    3. Save the file as html_tutorial_example.html




  2. Type some HTML code


    Type the following code:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>HTML Tutorial Example</title>
    </head>
    <body>
    <p>Less than 5 minutes into this HTML tutorial and
    I've already created my first homepage!</p>
    </body>
    </html>



  3. View the result in your browser


    Either...

    1. Navigate to your file then double click on it


    ...OR...

    1. Open up your computer's web browser (for example, Internet Explorer, Firefox, Netscape etc).

    2. Select File > Open, then click "Browse". A dialogue box will appear prompting you to navigate to the file. Navigate to the file, then select "Open".




  4. Repeat the last 2 steps until you're satisfied with the result


    It's unrealistic to expect that you will always get it right the first time around. Don't worry - that's OK! Just try again and again - until you get it right.


Explanation of code


OK, before we get too carried away, I'll explain what that code was all about.

We just coded a bunch of HTML tags. These tags tell the browser what to display and where. You may have noticed that for every "opening" tag there was also a "closing" tag, and that the content we wanted to display appeared in between. Most HTML tags have an opening and closing tag.

All HTML documents should at least contain all of the tags we've just coded and in that order.

About HTML

HTML, which stands for HyperText Markup Language, is a markup language used to create web pages. The web developer uses "HTML tags" to format different parts of the document. For example, you use HTML tags to specify headings, paragraphs, lists, tables, images and much more.

HTML is a subset of Standard Generalized Markup Language (SGML) and is specified by the World Wide Web Consortium (W3C).

What do I need to create HTML?


You don't need any special equipment or software to create HTML. In fact, you probably already have everything you need. Here is what you need:

  • Computer

  • Text or HTML editor. Most computers already have a text editor and you can easily create HTML files using a text editor. Having said that, there are definite benefits to be gained in downloading an HTML editor.If you want the best HTML editor, and you don't mind paying money for it, you can't go past Adobe Dreamweaver. Dreamweaver is probably the best HTML editor available, and you can download a trial version for starters.If you don't have the cash to purchase an editor, you can always download a free one. Examples include SeaMonkey, Coffee Cup (Windows) and TextPad (Windows).If you don't have an HTML editor, and you don't want to download one just now, a text editor is fine. Most computers already have a text editor. Examples of text editors include Notepad (for Windows), Pico (for Linux), or Simpletext/Text Edit/Text Wrangler (Mac).

  • Web Browser. For example, Internet Explorer or Firefox.

Tuesday 2 February 2010

Silverlight vs Flash – An Analysis Report

 














































































































































Silverlight


Flash
Silverlight Limitations:
Silverlight is missing Linux support, so people using Linux machine cannot run it on their machines and will have to stick to Windows and MAC OS.This limitation doesn’t exist with Flash.
Silverlight will (naturally) be using the WMV and Silverlight will add to the use of the WMV file format. Using the WMV video format essentially makes Silverlight useless for the vast majority of video websites such as YouTube. It cannot play .avi and .mov file.Flash Video turned Flash into a mechanism for delivering media with far more potential than any other solution that is .flv, no doubt Flash has also limitation to play other video file. For that Flash required codex for that player installed on Client machine.
Silverlight has no support for binding to models, binding to data, or even connecting to network resources to obtain data.Even flash is also lacking this area. Flash can read data source in terms of XML or text from some URL and can use it. Same thing silverlight also can read.
Silverlight doesn't even have support for things that should be considered a stock part of any library such as buttons, checkboxes, list boxes, list views, grids, etc. Probably in future release may Microsoft support it.Flash has rich set of control library.
Once the accessibility features are provided with Silverlight versions, any existing test tools that support driving UI through Accessibility will be fully enabled to automate Silverlight applicationsFlash test tools are already in place.
Silverlight 1.0 does not support GIF-file format. Even it doesn’t support BMP and other file format. It supports only JPG and PNG file format.Support all image formats.
Can’t do sound processing.With some media file sound processing can possible.
Socket programming is not possible.Flash allows creating XML Socket object.
Per pixel bitmap editing, bitmap filters (convolution, color matrix, etc), bitmap effects (drop shadow, blur, glow) cannot be done.Can do that.
Webcam and Microphone support it not there.Flash supports it.
Built in file upload/download support is not available.Inbuilt Upload/download support is there.
The performance of Silverlight and Flash will be nearly the same. While Silverlight is using XAML as description language in a non-compressed format size of Silverlight component is large.In practical implementation of similar component in Flash and Silverlight it has found that size of Silverlight component is approximately 10-20 times larger than Flash component.Size of flash component is smaller.
To deploy Silverlight to client browser more than one components ship. (1) XAML files (2) .dll if using C# (3) Silverlight.js (4) Custom JavaScript file. Images/videos/sounds also required deploy separately.Flash ships in single component that is .swf. Images/video/sounds also incorporated in single .swf package.
It has found in practical implementation of image animation, at some extent flickering occurs on image.To avoid this type of flickering in flash, refresh layout or cache bitmap functionalities are available.
It has found in practical implementation of video play, audio may start playing before showing movie on screen. It has also found video can still continue to play after redirecting to other page. It may be it is bug of current beta release.Flash doesn’t face these types of issues.
Right now not any support to play Silverlight object as Windows application.Flash can be played as Windows application also by downloading player for it. Flash can be also packaged as .exe which can be deploying standalone.
Silverlight is new in market and required time to get acceptance in market.Flash is exist from many years and have strong acceptance in market.
Silverlight Feature comparison with Flash Features:
Animation - Silverlight supports the WPF animation model, which is not only time based instead of frame based, but lets you define the start and end conditions and it will figure out how to get there for you. No need to deal with matrixes like in flash. Also no need to calculate positions on various frames. It just works. The animation model is frame based.
Silverlight uses XAML. XAML is text based and can be output using a simple XML object.Flash stores its shapes using binary shape records. In order to write shape definitions, you will need to either license a 3rd party Flash file format SDK, or build your own. It isn’t too difficult, but it does require a bit of a learning curve.
The debugging with Silverlight is simpler than with flash.The debugging with flash is harder than Silverlight.
Silverlight lets you embed true type font information directly into your projects, and download that information with the downloader object.Dealing with fonts is fairly complex with flash.
Rich set of development languages are available for Silverlight. Developer can use JavaScript as well as managed code VB.Net, C# for Silverlight development.Only Action Script can be used as programming tool in Flash.
XAML is declarative while ActionScript is imperative. Using imperative languages to build UIs goes back to the early days of DOS and Windows, when developers had to manage all of the API nuances when interacting with graphical panes.ActionScript is an imperative language, which brings itself the pitfalls of imperative languages when compared with declarative languages.
Web Services support for Silverlight Streaming:The services provided by Microsoft, called Silverlight Streaming, it allows users and developers to host their Silverlight content and apps with Microsoft, taking advantage of their extensive global network of datacenters and their content delivery network. Best of all, this service is free, and while currently it is only in alpha it allows users to upload up to 4GB of content, and to stream up to 1 million minutes of online video delivery at 700kbps, around DVD quality. Starting right now, you can build a total video content site using Silverlight at no cost. The future for this service looks good as they will incorporate Silverlight Streaming with the MSN Video ad network to allow you to easily monetize your video streams and participate in a revenue sharing opportunity with Microsoft while removing your distribution costs. There will also be a premium level of content delivery where you will be able to pay for higher levels of usage - the cost for this service is as yet unknown but expect it to be very low.There is not any such service provided by Flash to host the content and application with them. Because of the absence of any such service, building a video site based on Flash is not as cost effective as building a video content site using Silverlight. Moreover, because of the Silverlight Streaming service, the existing Video Content sites might be moving to Silverlight site.
Additional Support for mobile devices with desktop and desktop browsers:Silverlight is supported by Windows mobile device as part of a new service that the NBL have built. Silverlight applications and media streaming can be run on a mobile phone - so Silverlight even at this stage is about more than just the desktop browser and desktop market.Silverlight may be seen soon on the Symbian OS too.Flash is not spread as across the vast majority of both desktops and mobiles platforms, as compared to Silverlight. Flash requires Flash Lite preinstalled on mobile devices.
Silverlight does not require video codec to run industry standard videos like .WMVFlash requires video codec to run .WMV videos.
Silverlight supports scalable video formats from HD to mobile.Flash does not support scalable video formats from HD to mobile
Silverlight supports Hardware-assisted editing and encoding solutions.Flash does not support Hardware-assisted editing and encoding solutions.
Silverlight has XAML based presentation layer for SEO.Flash does not have XAML based presentation layer for SEO.
Silverlight provides End-to-end server and application platform.Flash does not provide End-to-end server and application platform.
Media server licensing is cheaper than flash.Media server licensing is costlier than Silverlight.
Silverlight supports Scalable full screen video.Flash does not support Scalable full screen video.

 

Firefox - Bookmarks Import and Backup

Go to Bookmarks > Organize Bookmarks > Import and Backup > Restore > Choose File...

Retrieve information from content page to master page

To retrieve information from content page

//cph = this.FindControl("ContentPlaceHolder1") as ContentPlaceHolder;
//Panel ctrlInput = (Panel)cph.FindControl("GetTextDescription");
//ctrlInput.Controls.Clear();

Export Tablular data in CSV format in C#

protected void Page_Load(object sender, EventArgs e)
{
string strconn = "server=192.168.1.1;database=db;uid=sa;pwd=sa";
SqlConnection conn = new SqlConnection(strconn);
SqlDataAdapter da = new SqlDataAdapter("select * from tablename", conn);
DataSet ds = new DataSet();
da.Fill(ds, "Tablename");
DataTable dt = ds.Tables["Tablename"];
CreateCSVFile(dt, "D:csvData.csv");
}
public void CreateCSVFile(DataTable dt, string strFilePath)
{

StreamWriter sw = new StreamWriter(strFilePath, false);
int iColCount = dt.Columns.Count;
for (int i = 0; i < iColCount; i++)
{
sw.Write(dt.Columns[i]);
if (i < iColCount - 1)
{
sw.Write(",");
}
}
sw.Write(sw.NewLine);
// Now write all the rows.
foreach (DataRow dr in dt.Rows)
{
for (int i = 0; i < iColCount; i++)
{
if (!Convert.IsDBNull(dr[i]))
{
sw.Write(dr[i].ToString());
}
if (i < iColCount - 1)
{
sw.Write(",");
}
}
sw.Write(sw.NewLine);
}
sw.Close();

/*
string mFileName = @"E:SonarishWeights_updation";
string filename = "Products_YPT_All Items.csv";
string conn = "Provider=Microsoft.Jet.OLEDB.4.0;Data Source= " + mFileName + "; Extended Properties='text;HDR=Yes'";
OleDbConnection ExcelConnection = new OleDbConnection(conn);
OleDbCommand ExcelCommand = new OleDbCommand("SELECT * FROM [" + filename + "]", ExcelConnection);
OleDbDataAdapter ExcelAdapter = new OleDbDataAdapter(ExcelCommand);
ExcelConnection.Open();
System.Data.DataSet dataSetFromCSV = new DataSet();
ExcelAdapter.Fill(dataSetFromCSV);
ExcelConnection.Close();
if (dataSetFromCSV.Tables[0].Rows.Count > 0)
{

for (int i = 0; i < dataSetFromCSV.Tables[0].Rows.Count; i++)
{
DataRow drexcel = dataSetFromCSV.Tables[0].Rows[i];

string itemname = drexcel[0].ToString();
string weight = drexcel[27].ToString();
if (weight == "")
{
weight = "NULL";
query = "UPDATE InventoryUnitMeasure SET WeightInKilograms=" + weight + " FROM InventoryItem where InventoryItem.ItemCode=InventoryUnitMeasure.ItemCode and InventoryItem.ItemName='" + itemname + "'";
}
else
{
query = "UPDATE InventoryUnitMeasure SET WeightInKilograms=" + weight + " FROM InventoryItem where InventoryItem.ItemCode=InventoryUnitMeasure.ItemCode and InventoryItem.ItemName='" + itemname + "'";
}
SqlCommand com = new SqlCommand(query, con);
com.ExecuteNonQuery();
}

}*/
}

QueryString passing in code behind

In Default.aspx:

<a href="Default.aspx?ThisVar=1">Click here</a>

In Default.aspx.cs:

string ThisVariable = string.Empty;
TestProductLable.Text = "Photos";

if (Request.QueryString["ThisVar"] != null && Request.QueryString["ThisVar"] != "")
{
ThisVariable = Request.QueryString["ThisVar"].ToString();
Response.Write(ThisVariable);
}
else
{
Response.Write("No click yet");
}

Url Trimming for security perpose

 

string url = "http://images.google.co.uk/imghp?hl=en&tab=wi";
Uri uri = new Uri(url);
Response.Redirect(uri.GetLeftPart(UriPartial.Path));