How to create a static website with HTML

Do you want to create a simple HTML website?

If yes, read this complete and easy to understand guide on HTML. If you know nothing about website creating and starting just now, it should take about one week time for you to get hold of it. But after that you would be able to easily create static websites on your own.

Learning HTML is really easy and you do not require any previous knowledge of web designing or programming.

HTML Basics

HTML – Hyper Text Markup Language (Not a programming language, but a mark-up language) for creating web pages.
HTML is just a simple text file which is read by web browsers (like Internet Explorer and Google Chrome) and displayed as web page.

With HTML, you can create your own website. This tutorial on html is intended for beginners.

Software Requirements:

You do not need any special software or web server to follow this tutorial. For creating simple, static websites, there is no need of any special software. Although there are several programs like Visual Web Developer, Dream weaver, FrontPage, etc. available for generating HTML codes; I strongly recommend that you start with notepad for writing and editing HTML files. Alternatively, you may use any other text editor of your choice.

Go to start >> All Programs >> Accessories >> Notepad (In windows operating systems)

Optionally, You may also use our HTML Tester for writing your codes and testing it online.

Start by creating a new folder at any place in your computer for storing html codes (preferably on desktop for easy access). Rename it as ‘html’ for clarity. Keep all the codes you learn here to this folder for your ready reference.
Make sure you save the files with either ‘.html’ or ‘.htm’ extension (in place of default ‘.txt’ for text files). Both these extensions are one and the same; you may use whatever you like!

Your first web page

Type the following code in the notepad. I recommend that you actually type (no copy-paste here!). These HTML codes may look like a little bit strange to you. But don’t worry; we will come back to that just in a moment.

<html>
<head>
    <title>My First Web Page</title>
</head>
<body>
    Hello World!
</body>
</html>

Save the text file as ‘myfirstwebpage.html’ or ‘myfirstwebpage.htm’ in html folder. Remember to change the extension as ‘.html’ or ‘.htm’ in place of default ‘.txt’ or your html code will not work! Now go to ‘html’ folder where you have just saved your web page and double click to open it.

Wow! You have just created your first web page. Congratulations…!

HTML Tags & Elements

Now let’s get into the html codes and learn some interesting things.

<html>
<head>
    <title>My First Web Page</title>
</head>
<body>
    Hello World!
</body>
</html>

In the example above, <html>, <head>, <title> and <body> are all HTML tags. HTML tags are code words surrounded by angle brackets. Tags are used by web browsers to mark-up the web pages. There are many types of tags nested in HTML document, each having different meanings. Most of these tags come in pair – starting tag and end tag. End tag is different from starting tag by a forward slash “/”.

Web pages are made of a series of elements. Elements consist of start tag, end tag and some content in between. In the example above, “<title>My First Web Page</title>” is an element. At this time, the things may look a little difficult to you, but keep Reading on!

HTML Tags

As of now, treat <html> tag as the starting and end tag of any HTML document. The html codes between <html> and </html> makes the web page. All other tags come in between these parent tags.

<title> tag describes the web page title. The content between these tags appear at the title bar of the page.

Putting right and appropriate title for your web page is very important. Search engines like ‘Google’ and ‘Bing’ give a lot of importance to the title of the page in their search results. Make sure to put an appropriate title to all of your web pages.

<title> tags are put in between <head> tags. The content between the <head> tags does not directly appear in the main content of web page. However, it is primarily used for providing information about the page apart from some other functions. <head> tags are placed before <body> tags in html structure.

The text between <body> and </body> tags are the main contents visible on the web page.

Notes

  • The tags used in this example will be used in almost all your HTML documents. Make yourself familiar with these html codes.
  • Starting tags must be accompanied with respective end tags. It is a good idea to write starting tag and end tag first and then add content in between.
  • HTML tags are not case-sensitive. It means browser will equally treat <html> and <HTML>. However, the correct practice is to always use lower-cases for html codes.

Well….it was a lot of theory. However, these are the basics and must be understood clearly for building strong foundation. Repeat from top, if you are not comfortable before moving ahead!

HTML Headings

HTML Headings are just the same as you have expected – ‘Heading’ or ‘Title’ of the webpage.
Headings are defined with <h1> to <h6> tags, ‘h1′ being the most important and prominent. The size of the text between these tags reduces with ‘h2′, ‘h3′ and so on. By default, headings are displayed in bold text.
Now let’s write some HTML codes to test the headings in browser. Open notepad or any other text-editor and type the following html codes.

<html>
<head>
    <title>HTML Headings</title>
</head>
<body>
    <h1>
        This is 'h1' heading</h1>
    <h2>
        This is 'h2' heading</h2>
    <h3>
        This is 'h3' heading</h3>
    <h4>
        This is 'h4' heading</h4>
    <h5>
        This is 'h5' heading</h5>
    <h6>
        This is 'h6' heading</h6>
</body>
</html>

Save this webpage as ‘headings.html’ in html folder. Open this file in your web browser to see the difference between various html headings. Did you notice the gap between the html headings? This is because browsers add some empty space just before and after headings to make these more prominent.

Notes

  • HTML headings are important part of the web page and should be used only when actually required.
  • Most prominent heading i.e. ‘h1′ should ideally be used only once in a web page, other may be used multiple times.
  • As far as possible, less prominent headings should be nested within the more prominent headings.
  • Headings are used by search engines to correctly index the structure of your page. Don’t use headings to merely make text bold or prominent.

HTML Paragraphs

Now that you know how to put a heading, it’s time now to know about the HTML paragraphs! Both html headings and html paragraphs are put in between <body> tags. These are used to publish your written contents.
HTML paragraph is defined with <p> and </p> tags. As with heading tag, some gap is left before and after the paragraph tag.

Modify your html code to the following:

<html>
<head>
    <title>HTML Headings & Paragraphs</title>
</head>
<body>
    <h1>
        This is heading</h1>
    <p>
        Here is the paragraph for this heading.
        Headings and paragraphs are the basic elements
        of any html document.
    </p>
    <h4>
        Importance of paragraph</h4>
    <p>
        Paragraphs are used to publish the written contents.</p>
</body>
</html>

Save the file and open in your web browser. As you can see, it is pretty simple to use the html paragraphs!

You may have expected a line break in the second line of the paragraph; however, web browsers will eliminate all line breaks and extra spaces automatically when the page is displayed. So what to do?

<br /> tag

To introduce a line break, use <br /> tag. You may use two or more <br /> tags for more spacing between the lines. As you have noticed, ‘br’ tag does not come in pair, only <br /> is used. To test <br /> tag, change the html codes between paragraph by inserting a <br /> tag as following

<p>
     Here is the paragraph for this heading.<br />
     Headings and paragraphs are the basic elements of any html document.
</p>

You may use <br> in place of <br /> to get the line break, however, it is not the right practice.

HTML – Horizontal Lines

<hr /> is used to introduce a horizontal line inside the page. Its primary use is to separate two contents. Like <br /> tag, <hr /> also does not come in pair. Use of ‘hr’ tags at appropriate place makes your web page more readable and professional! Try with the following modification in your code:

<p>
     Here is the paragraph for this heading.<br />
     Headings and paragraphs are the basic elements of any html document.
     <hr />
     Use of 'hr' tags at appropriate place makes your
     web page more readable and professional!
</p>

Viewing HTML Source Code

We now know that the websites are made in HTML. So, how do you see the HTML source code of any web page?

It’s really simple. Just right click on the web page you are currently viewing and select ‘view source’ or ‘view page source’ or anything similar. If you see the HTML source codes of large web pages, it may seem to be little complicated and confusing. But don’t worry; as you progress you will start understanding it easily.

For HTML documents stored locally (without web server) like yours; you can edit and save the source code file directly. After that just click ‘Refresh’ or press ‘F5′ in your web browser to view the changed content.

I am sure, you will be enjoying and applying your new learning now and doing experiments by building web pages. Till now, all of your web pages were in plain black & white. Let’s fill some colors and spice it up!

HTML – Formatting

What are HTML Attributes?

Attributes are associated with tags (and elements) and provide extra information to the browsers. These appear in HTML documents like this: <tag attribute=”value”>Some Content</tag>. Attributes are associated only with the opening tag and always placed inside quotation marks. Attributes defines the look and feel of elements apart from some other important functions. The most important attribute for formatting web pages is ‘style‘. For example, you can change the background color of your paragraph or size of the text with style attribute. This will be clear with the following example:
Modify your code to the following:

<html>
<head>
<title>HTML attributes example</title>
</head>
<body>
   <h1>This is normal heading</h1>
   <h1 style="font-size:10px; color:#ff0000">
        This is heading with attribute.</h1>
   <p style="background-color:#ffffcc">
     As you see, the background of the paragraph has changed.
     You can do a lot more with style attribute.
   </p>
</body>
</html>

Save the file and open in your web browser. Wow…Quite Colorful…No?
In the example above font-size, color and background-color are the values of the style attribute. font-size is preferably defined in pixels, e.g. – 20px.

Note the spelling of the ‘color’ (US English); ‘colour’ will not work. So be careful!

You may be curious about the color code here – #ff0000. In HTML, colors are defined with Hexadecimal numbers. ‘#ff0000′ is the color code for ‘Red’. Hexadecimal color codes are made of six digits or numbers with ‘#’ in beginning. Some of the hexadecimal codes for your reference are as follows:

#ffffff White
#000000 Black
#ff0000 Red
#00ff00 Green
#0000ff Blue

We will learn more about the style attributes in details soon.

More about HTML Attributes

There are few attributes common with most of the tags. These are:

id Unique Identification for the element
class Class Name of the element (more on this later)
title Title of the element – text pop-up above element on mouse hover

However, there are few attributes which are associated with only one particular tag. Some tag does not require any attribute, like <br />.

It may sound little complicated, but don’t worry. Once you get accustomed to attributes, it will look logical and much easier to learn and apply.

HTML – Text Formatting

  • <b> and </b> tags are used to make text bold.
  • <i> and </i> tags are used to make text italic.
  • <sub> and </sub> define subscripted text.
  • <sup> and </sup> define superscripted text.

Try with following example:

<b>This is bold. </b>
<br />
<i>This is in italic style. </i>
<br />
This is <sub>subscripted</sub> text.
<br />
This is <sup>superscripted</sup> text.
<br />

As you see, there tags are quite useful in formatting the text.

HTML Lists

Two types of lists are commonly used in web pages: Ordered and Unordered.

This is ordered list:

  1. 1st List Item
  2. 2nd List Item
  3. 3rd List Item
  4. 4th List Item

And this is unordered list:

  • Unordered List Item
  • Unordered List Item
  • Unordered List Item
  • Unordered List Item

Lists tags are defined with <ol> (Ordered list) and <ul> (Unordered list). Between starting and closing tags of ‘ol’ or ‘ul’, elements of list items are placed with <li> and <li> tags.

Try with following example:

<ol>
  <li>1st List Item</li>
  <li>2nd List Item</li>
  <li>3rd List Item</li>
  <li>4th List Item</li>
</ol>

<ul>
<li>Unordered List Item</li>
<li>Unordered List Item</li>
<li>Unordered List Item</li>
<li>Unordered List Item</li>
</ul>

Nested Lists

Sometimes, you may have the requirement to put a list inside an existing list (e.g. ordered list inside unordered list). This can easily be done with nested lists because within list items, you can place any text, image, link, line-breaks and even lists.

<h4>I like:</h4>
<ul>
  <li>Mobile Phones</li>
    <ol>
      <li>Nokia</li>
      <li>Samsung</li>
    </ol>
  <li>Movies</li>
  <li>Music</li>
</ul>

Definition Lists:

A definition list is used for list of terms with descriptions of each term (like in a dictionary). This is less popular and not used commonly. The definition list is defined by <dl> and </dl>. List of terms are defined with <dt> and </dt> and description with <dd> and </dd>. It will be clear with following example.

<dl>
<dt>Birds</dt>
  <dd>- fly in the sky</dd>
<dt>Dogs</dt>
  <dd>- bark at night</dd>
</dl>

Now you have learned a lot of tags and also how to apply that. You may starting creating few web pages about the topics of your choice like yourself, your home, friends, etc.

With this, we come to the end of the basic tutorial on HTML. Congratulations, now you can create simple web pages on your own!

So, are you ready to start the next level of tutorial on HTML? Great! In the intermediate level, you will learn about placing the HTML images in web pages, linking other pages and documents, tables and HTML forms.

HTML Images

HTML Images are one of the most important and interesting part of world Wide Web. Images are used to make web pages attractive and help to get the message across. Placing HTML image in web page is quite easy.
We use <img> tag to place image in HTML document.

Minimum html code for html image:

<img src="baby.jpg" />

Standard html code for html image:

<img src="http://www.webtutorialplus.com/images/logo.png"
alt="Web Tutorial Plus Logo"
height="60" width="60" />

The ‘src’ (source) attribute is compulsory as it tells the browser the exact location of the image. The path for the image may be standard URL (like above) or a relative path. Usually, you will use the relative path. For example, if you place an image in ‘images’ directory where your web page is located, the code will be

The ‘alt’ attribute in html images means the ‘alternate text’. Once you mouse hover to the image, it will displayed as a small pop-up. It is recommended to always place ‘alt’ attribute along with html images. Height and width attributes are optional, where you can decide the height and width of the image to be displayed in web browser.

HTML Image Tips

Be careful while putting both the attributes (height and width) of html images together. If the ratio of width and height of original image is not same as defined with attributes, the image may appear stretched in web page. It is recommended to use only one of the attributes at a time, if you are not sure about image dimensions. However, if you know the exact width and height of the image, you should place both the attributes. This helps the web browser to display the web page correctly even before the image is loaded.

Image size is proportional to its width, height and quality. Images may take a lot of space on web server if their size is bigger. It will also take more time to download and display on user’s browser. It is therefore; wise to have the size of image just as per requirement. If the actual width and height of the image is smaller than what is being displayed, it will look pixilated. You need to compromise between image size and quality while using html images.

HTML Image Formats

There are currently three formats widely used in web pages to display html images – ‘JPEG’, ‘GIF’ and ‘PNG’ which are all compressed format and best suited for websites.

  • Use ‘JPEG’ format for the photographs while displaying html image. Compressing the JPEG image will slightly distort it.
  • ‘GIF’ has the limitation of 256 colors only. However, it maintains the original colors. Use ‘GIFs’ for clip-arts, buttons, etc.
  • ‘PNG’ is best suited for icons, banners and diagrams as it retains the transparency also. It is getting more and more popular as standard html image.

HTML Links

So far, we were focused just to make stand alone web pages. It’s time now to link these with each other with html links. You will find html links in all web pages. HTML links have a great role to make internet so successful. Remember ‘hyper-text’ of HTML, it means the linked texts. HTML Hyperlinks (or links) are click active items (generally words, group of words or images) used to go to some other document or at any new section of the same document. When you move your cursor to any html link, the cursor will change into a little hand.

HTML links are defined with <a> and </a>tags (anchor tags).

<a href="http://www.webtutorialplus.com/">Go to Home Page </a>

The ‘href’ (hyperlink reference) attribute it tells the browser to jump to the specified document. Similar to the html images, the path for the document may be standard URL (like above) or a relative path. Usually, we use the relative path. For example, if you add a new page ‘links.html’ in the same directory, the html code will be:

<a href="links.html"> Go to HTML Links </a>

Please note that the linked document need not necessarily be a web page, it may be the file of any other kind also. In case browser is not able to display, it will automatically be available for download to the user. You may like to place an image thumbnail in place of text as an alternative.

Using html image as html link

In place of text, you may also use html image or combination of ‘image and text’ as html link. For this, you just need to place the image element inside anchor tag. Modify your html code as below:

<a href="http://www.webtutorialplus.com/"><img
src="http://www.webtutorialplus.com/images/logo.png"
height="60" width="60" /><br />Go to Home Page </a>

 

HTML Links – Target Attribute

With target attribute of html links, you can direct the browser, where you want to open the linked document. If you want to open the linked document in a new window, use ‘_blank’ for target attribute.

<a href="http://www.webtutorialplus.com/" target="_blank">Go to Home Page </a>

How to Link inside the same web page

These are useful when you have a large document and you want to place the list of content at the beginning. As user clicks on any heading, he is immediately taken to the desired position. For linking inside the current document, you need to first create a bookmark. This is done with ‘name‘ or ‘id‘ attribute. For example, you may place <a id=”heading1″ /> just before any heading. The html link for jumping to heading1 will be like:

<a href="#heading1">Go to heading 1</a>

Many of the Web Pages uses ‘name’ attribute for book-marking, however, it is recommended to use ‘id’ instead. This is because upcoming HTML5 standard suggests using ‘id’ and all modern browsers support it.

HTML Email Links

It is really easy to place an email link to the web page. If you want your visitors to email you the feedback about your website, it will be useful. The html link for placing email link is as follows:

<a href="mailto:support@webtutorialplus.com?subject=feedback&body=I
like it">Mail for Support</a>

Note that subject and body are optional. You may like to place subject or body already filled for your visitors.

HTML Tables

Basic html tables are created by using <table>, <tr> (Table Row) and <td> (Table Cell) tags. It may seem to be a little difficult at the beginning, but as you complete this part of tutorial on html, it will be all simple. HTML tables are used for ‘Web Page Layout’ by many web designers. <tr> and <td> tags are placed inside <table> tag. Let’s quickly make a simple html table.

<table border="1">

<tr>
  <td> Row 1 Col 1 </td>
  <td> Row 1 Col 2 </td>
</tr>

<tr>
  <td> Row 2 Col 1 </td>
  <td> Row 2 Col 2 </td>
</tr>

</table>

As you can see, there are two rows in the table, each containing two cells. Contents are placed in cells (<td> tags). We have used border attribute to define the thickness of the table border. If you don’t want a border, specify it as zero. We will now look at some other common attributes like ‘cellspacing‘, ‘cellpadding‘ and ‘width‘ of html tables.

Cell Spacing, Cell Padding & Width

With cellpadding, cellspacing and width attributes, we can adjust the space in and around the html tables. Cell-spacing is the distance between cells and cell-padding is distance between cell borders and the content within it. Width of the html table can be specified either in pixels or percentages. While specifying the width in pixels ensures exact width, percentage allows the table to resize itself depending on the web content and page width. Additionally, you may also define the width of cells. Let’s test with three examples below:

Example 1

<table cellpadding="0" cellspacing="10" border="1">
<tr>
<td> Row 1 Col 1 </td>
<td> Row 1 Col 2 </td>
</tr>
<tr>
<td>Row 2 Col 1 </td>
<td> Row 2 Col 2 </td>
</tr>
</table>

Example 2

<table cellpadding="10" cellspacing="10" border="1">
<tr>
<td> Row 1 Col 1 </td>
<td> Row 1 Col 2 </td>
</tr>
<tr>
<td>Row 2 Col 1 </td>
<td> Row 2 Col 2 </td>
</tr>
</table>

Example 3

<table cellpadding="10" cellspacing="10" border="1"
width="100%">
<tr>
<td> Row 1 Col 1 </td>
<td> Row 1 Col 2 </td>
</tr>
<tr>
<td>Row 2 Col 1 </td>
<td> Row 2 Col 2 </td>
</tr>
</table>

HTML Table Headers

Table headers are defined with <th> & </th> tag. You can place these tags inside <tr> tags, just like <td> tags. Most browsers display the headers bold and centered.

<table cellpadding="4" cellspacing="4" border="1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
<tr>
<td> Row 1 Col 1 </td>
<td> Row 1 Col 2 </td>
</tr>
<tr>
<td>Row 2 Col 1 </td>
<td> Row 2 Col 2 </td>
</tr>
</table>

 

  • As we have already discussed, html tables are widely used for creating web page layouts. If you are planning to do a simple layout, tt’s important to have good knowledge of html tables.
  • You can place any content inside cells: images, texts, paragraphs or even another table.

HTML Forms

HTML Forms (or web forms) are used to collect the data from users. These are an important and integral part of all modern websites for two way communication. By providing forms to your webpage, you get input from the user for various purposes like storing the information in a database, check user’s credential, do some financial transaction, send emails, etc.

HTML Forms have the ability to collect the information from user’s browser, however, for processing this information you need some server side programming. We will cover that in details in our tutorials on ASP.NET. As of now, we will focus on how to create the form for interaction with users and will not get into much detail.

A form consists of input elements like text fields, textarea, checkboxes, radio-buttons, select lists, submit buttons, etc. The input elements are placed inside <form> and </form> tags.

Input Element – HTML Forms

Input elements are used to gather the information and are most important elements of HTML forms.
We use various types of input elements for ease of gathering data. Let’s create our first webpage with a form now.

HTML Forms Example

<html>
<head>
<title>HTML Forms</title>
</head>

<body>
   <form>
       Your Name: <input type="text" name="Name" /> <br />
       Country: <input type="text" name="country" />
   </form>
</html>

Attribute ‘type’ determines the type of input field (like textbox, radio button, checkbox, etc.).
Name attribute is unique identification for any input. Other useful attributes are ‘value’, ‘size’, ‘readonly’ and ‘maxlength’.

Password Field – HTML Form

Password fields are defined with <input type=”password”>

Full Name: <input type="text" name="Name" size="40"
value="Put Your Name" maxlength="35" /><br />
Password: <input type="password" name="country" />

Radio Buttons

Use ‘Radio Buttons’ if you want your user to make one choice out of many (generally max. 4-5).

I work from:<br />             
<input type="radio" name="work" value="Office"
/> Office <br />
<input type="radio" name="work" value="home" />
Home <br />
<input type="radio" name="work" value="Both" />
Both

HTML Drop-down lists

Use ‘select’ if you want your user to make one choice from a drop-down list.

My age is:
<br />
<select name="age">
<option>Below 20</option>
<option>20-30</option>
<option>30-40</option>
<option>40-50</option>
<option>Above 50</option>
</select>

HTML Check Boxes

Use ‘checkbox’ if you want your user to make multiple choices from a list of items.

I Like:
 <input type="checkbox" name="hobby" value="Reading" />Reading
 <input type="checkbox" name="hobby" value="Playing" />Playing
 <input type="checkbox" name="hobby" value="Singing" />Singing
 <input type="checkbox" name="hobby" value="Traveling" />Traveling

We are not discussing more input elements here. This is because HTML forms, without background programming is of no use.

HTML Colors

There are three primary colors in HTML web pages – Red, Green and Blue (RGB). All the other colors displayed in a website are made of only these three primary colors.

The primary colors are blended with each other in varying amount to build millions of colors. The saturation of primary colors (RGB) is defined in numeric values from 0 (lowest) to 255 (highest). If you want to get red color output, the numeric value of ‘R’ (Red) will be 255, while each of ‘G’ (Green) and ‘B’ (Blue) will be 0. For white, the numeric value for all three colors will be 255 and for black it will be 0.

In HTML, the most common method to define colors is Hexadecimal system i.e. with three pairs of two alpha-numeric characters starting with ‘#. In hexadecimal system, 0 is defined by ’00′ and 255 is defined by ‘FF’. Hence, the HTML color codes are:
Red – #FF0000, Green – #00FF00 and Blue – #0000FF.

Let’s now create a few color codes!

HTML Color Codes

Color (R,G,B)

Color Code (#RRGGBB)

Color

255,0,0

#FF0000

RED

0,255,0

#00FF00

GREEN

0,0,255

#0000FF

BLUE

255,255,255

#FFFFFF

WHITE

0,0,0

#000000

BLACK

255,255,0

#FFFF00

YELLOW

 

Defining Colors in web pages

Defining Colors with Names

Colors are defined in three different styles in a webpage. The most simple is to write the name of the color directly like style=”background-color:Red;”. However, it is not possible to remember the name of many colors. Few HTML colors names which you can use directly are:

Aqua Black
Blue Gray
Green Lime
Maroon Navy
Orange Purple
Red Silver
White Yellow
Defining Colors with ‘rgb’ values

Second method to define HTML color in a webpage is to use the values of primary colors which is represented as rgb(RED, GREEN, BLUE) with range from 0 to 255 for each color. For example, Red is defined as rgb(255,0,0).
However, I do not recommend using this format because still there are many web browsers which do not interpret ‘rgb’ values.

As already mentioned, the most common way to define HTML color is to use hexadecimal system. It may look a little difficult at the beginning, but it is very flexible and used widely.

Using HTML Colors in Web pages

Mostly, HTML color codes are used in defining font colors, background colors, border colors, heading colors, link colors, etc. For most of these, you may define the color by ‘style’ attribute of that tag. Here are some examples:

<h4 style="color: #00FF00">
            Font color</h4>

        <p style="background-color: #0000FF; color: #FFFFFF;">
            Background and font color</p>

        <table border="1" style="border-color: #FF0000;">
            <tr>
                <td>
                    Border Color
                </td>
            </tr>
        </table>

        <a href="../colorpicker.aspx"
        style="color: #FF0000;">HTML Color Picker</a> - Link Color

Selecting HTML Color

Good news is that you do not need to remember the color name or experiment with color values or hexadecimal codes. There are plenty of tools available which allow you to select the color of your choice and get the hexadecimal code.

HTML Tips

These HTML Tips will help you create effective website and guide you about what is a must and what should be avoided.

  • For learning HTML, simple text editor like notepad works best. Other software may help you create your WebPages quickly, but you will not have the full command over your webpages.
  • If you do not want to use text editor, try our HTML Code Tester.
  • Use lowercase for writing tags. Although Uppercase will work fine in web browsers, World Wide Web Consortium (W3C) recommends lowercase in HTML 4 and XHTML.
  • Standardize font-color, font-size, background color, etc. and keep it same for all pages of your website.
  • Strandardize the structure of your webpages. This will help you to add and edit contents easily.
  • Bright colors, flashing pictures, moving texts, etc. should be better avoided. These will distract your visitor from your website
  • Keep good quality content in your WebPages. If your website does not have good information, visitors will not return back to your website.
  • Keep the font-size of your paragraph at least 12px.
  • For viewing the HTML code of any webpage, right click on it and select ‘View Source’, ‘View Page Source’ or similar.
  • You may add comments anywhere in your HTML code between comment tags (<!– Comments –>). The comments between comment tags will not be displayed in webpage.
  • Close all tags. Although most browsers will show your webpage correctly even if you forget closing tags, W3C recommend to close all tags properly. Add forward slash ‘/’ to the tags which have only start tag (e.g. </br>)
  • Avoid using depreciated tags and attributes like <font>, <center> and <u>.
  • Unless it is absolutely required, I do not recommend to use framesets.
  • Although you may use tables for your webpage layout, I recommend using CSS for this purpose. After completing HTML lessons, must go through CSS tutorial also.
  • You may use readymade templates, search for ‘free website template’.
  • I recommend to use doctype declaration for your WebPages
  • Spend time on selecting proper title for your webpage. This decides how your webpage will be index by search engines.
  • Must use meta description tag for all your WebPages. It increases the visibility of your website in search result.
  • Meta keywords tag is no more important. However, you may like to add one in your webpage.
  • View your webpage with all popular web browsers as some browsers may display your page differently.
  • Use images on your webpage carefully. Reduce the size of images with image optimizers. Putting bigger images will increase the time taken to load your webpage.
  • Define width and height for images. In case the image does not load correctly, the page-layout will remain unchanged.
  • Last but not the least – Keep practicing with HTML.

4 thoughts on “How to create a static website with HTML

  1. Nitta Roy

    Dear Gunjesh Kumar!

    I am a new student web design. I learned that from what I’ve designed two local websites. However, from your post I got a lot of help. It is a perfect post for a new web designer. Thank you to share such posts.

Leave a Reply