PHP, MySQL, HTML, CSS, Javascript, AJAX, SEO, Web Development, Joomla, Web 2.0


Web World Guru

Simple HTML tutorials

How to copy favicon

I came accross a strange request from one client. He wanted a favicon exactly same as some other website. I tried creating one using photoshop and Dynamic Drive tool.

First I took screen shot, then edited the screenshot using photoshop and created favicon using dyanmic drive online favicon genetation tool. But it did not created the same quality favicon image. Then i tried searching on google "how to copy favicon" and i did not got any result, so i decided to write this article.

If you came accross such situation, then simply see the source code of the html, you will see a line in head section,

<LINK REL="SHORTCUT ICON" href="http://www.mydomain.com/myicon.ico">

So now open the browser new window, and type in the exact URL which is in href paramater
Example:  http://www.mydomain.com/myicon.ico

And you are done, just copy this image , by doing right click on it and save and use it anywhere you want. So you know now how to copy favicon.

For joomla website see joomla component for generating favicon

 

Basic HTMl tags

HTML stands for Hyper Text Markup Language, is the markup language for web pages. It provides a means to describe the structure of information in a web page — by denoting certain text as links, headings, paragraphs, lists, tabular data, etc. To supplement that text interactive elements like forms, embedded images, and other objects are also present. HTML is written in the form of tags, surrounded by angle brackets with attributes. HTML can also describe the appearance and semantics of a document, and can include embedded scripting language code (such as JavaScript) which can add more interactivity and GUI to web page.

HTML elements or tags are the basic structure for HTML markup.

Elements have two basic properties: attributes and content. Attributes are different propreties and these attributes are applied to the content, which is the actual data.

The best way to learn HTML is to view the source of any web page (press Ctrl+U).
HTML must be used for document structuring only. The presentation, GUI and visual effects should be taken care by CSS and JS.
Many times html is used for presentation purpose, which should be avoided.

Below is the very basic HTML code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Web World Guru - Example for the HTML page</title>
<meta name="keywords" content="HTML, DHTML, CSS, XML, XHTML, JavaScript, WebWorldGuru.com" />
<meta name="description" content="Important Web tutorials on HTML, CSS, XML, and XHTML from webworldguru.com" />

</head>
<body>
<h1>This is the Heading</h1>
<p>The paragraph starts here, and the paragraph is about the <b>webworldguru.com</b>, bold tag is used for emphasising on some text. This is important fromthe search engine point of view. i hope you are enjoing here at webworldguru.com.</p>
<table>
<tr>
<td>One</td><td>Two</td>
</tr>
<tr>
<td>Three</td><td>Four</td>
</tr>
</table>
<div> This is one section</div>
<a href="http://www.webworldguru.com">Web World Guru Home Page</a>
<img src="/images/webworldguru.jpg" alt="webworldguru"/>
</body>
</html>

The <!DOCTYPE> declaration is the very first thing in your document, before the <html>
HTML 4.01 specifies three document types: Strict, Transitional, and Frameset.

1. HTML Strict DTD: Use when you are using CSS
2. HTML Transitional DTD: Use this when you are using html and css both for presentation
3. Frameset DTD: Used for documents with frames

All the HTML pages will start with the html tag.

Many tags can have different attributes and attributes are specified by there name followed by = sign and value in double quotes " ".

The head element can contain information about the document. The browser does not display the "head information" to the user. Most commonly used tags in the head section are <title>, <meta>, <base>, <link>, <script>, <style>

Title: This element defines the title of the document. Title is displayed on the browsers title bar. Title is important from the SEO point of view, as it tells the search engine about the content of the page. You can have exactly one TITLE in the document. The contents of the TITLE can be any amount of text.

The <h1> to <h6> tags define headings. Normally the most important heading is given the h1 tag. <h1> defines the largest header. <h6> defines the smallest header. Search Engines are constantly looking for h1 tag, so its very important to put keywords in H1 tag

Paragraph tag is for writing text in paragraph. Has not much visual impact but it important to give the text document proper structure.

The <meta> element provides meta-information about your page, such as descriptions and keywords for search engines and refresh rates. These are one of the most important tags from SEO point of view. The <meta> tag always goes inside the head element.

Tables are used for showing tabular data. Most of the time tables are used for presentation which is not it is made for. Tools like Dream Weaver makes heavy use of tables, which makes the loading of page slow. Table less design is the solution, in which <div> tags are used. If you want to know more in detail about table less design click here.

<div> tags are used for structuring, and dividing text in sections. Div are more preferred these days. Tables for layout and presentation is out of date.

The <a> tag defines an anchor or link.
You can create a link to another document by using the href attribute. href attribute contains the path to the new page i.e. the page which will be opened by the browser.

Image tag <img> is used for displaying image in the document. This increases the look and feel of the page. Alt attribute is also very important as search engine cannot read images and reads the alt attribute.

There are many such html tags.

 


Alexa Ranking for WebWorldGuru
You are here  : Home HTML