How to create a website using html codes

Building a website using this easy to use simple HTML tutorial

Creating a Website is very easy with HTML and this tutorial will teach you exactly how. Learning HTML is easier than you think and we will make it even easier for you through our detailed HTML examples. Follow through our HTML tutorial and learn everything about HTML. At the end of this tutorial, you will surely learn a lot of things that will be useful to you in creating your own Web site.

HTML Introduction

HTML stands for Hyper Text Markup Language. Not to be confused with a programming language, it is a language commonly used to describe a Web page or HTML document. An HTML document consists of plain text and HTML markup tags used to describe page content. HTML markup tags normally come in pairs which consist of a start tag and an end tag surrounding the text, which form an HTML element. Both the start tag and the end tag are surrounded by angle brackets with the end tag name preceded with a forward slash. (An example of a start tag and end tag is: <html> and </html>, respectively.)

HTML Basic

In an HTML document, there are markup tags which can be for headings, paragraphs, links or images. For headings, they are the <h1> to <h6> tags. For paragraphs, it is <p> tag. For links and images, they are the <a> tag and <img> tags, respectively. As a tip, it is best to always use lowercase letters for all markup tags.

Ex:

HTML Elements

HTML elements define an HTML document. An HTML element consists of the start tag, the element content, and the end tag. There are also HTML elements with no element content and are thereby called empty elements. HTML elements can be nested or can contain other HTML elements within an HTML element. HTML elements can also have attributes.

HTML attributes are used for providing additional information about a certain element. HTML attributes are specified in the start tag. These attributes may be a name-value pair such as name=”value”. Always use quotes around an attribute value.

Ex:

HTML Headings

HTML headings such as <h1> and <h2> tags are used for headings only. They are not used to make text bold or appear bigger. Headings are important for search engines to index your Web page’s structure and content and are also important for users to see your document structure. Use the <h1> tag for the most important heading and <h6> for the least important heading. You may use HTML lines denoted by a <hr /> tag to create a horizontal line below your heading.

Ex:

HTML Paragraphs

Just like a standard document, HTML paragraphs denoted by the <p> tag divide your HTML document into paragraphs. Most browsers display HTML correctly even without the </p> end tag, but it would be a good practice to always close any normal HTML element with its end tag. You may break into a new line without starting a new paragraph by inserting the <br /> tag. Just like the horizontal line tag, the line break tag is an empty HTML element. It is always best to preview your document in your HTML browser to be sure of the output.

Ex:

HTML Formatting (style)

Text formatting may be bold, big, italic, and so on. Use the <b> start tag and its corresponding </b> end tag to make the text between them appear bold. Similarly, use the <i> tag to make your text appear in italics.

Ex:

HTML Editors

There are professional HTML editors such as Adobe Dreamweaver, Microsoft Expression Web and CoffeeCup HTML Editor that can help you create HTML documents with ease. For learning purposes, however, it is best to use a simple text editor such as Notepad for Windows and TextEdit for Mac. To create your first Web page, first open Notepad and then type your HTML code into it. Next, save your text file with an .htm or .html file extension. Finally, open your HTML file in your browser and see the result.

HTML CSS or Cascaded Style Sheets are used for styling HTML elements. It was developed to style HTML in a more systematic way. CSS can be added inline using the style attribute in HTML elements, or internal using the <style> tag in the <head> section, or external using a CSS file. The recommended way is by assigning CSS with different external CSS files which is helpful for styling several Web pages. The style attribute can be used to change the background color using the background-color property, various font styles using the font-family, color, and font-size properties, or the text alignment using the text-align property.

HTML links or hyperlinks allow users to navigate across several Web pages. Hyperlinks which are specified using the <a> tag can be a word, a group of words or an image which users can click on to jump to another Web page or to another section of the same document. To jump to another Web page, the href attribute is used inside the <a> tag. The <a> tag can also be used to create a bookmark anchor within a Web page by using the id attribute.

Ex:

HTML Images

The <img> tag used for HTML images contains attributes only and has no closing tag. An image is specified using the src attribute and its value is the URL of the image file you want to display. The image is displayed right where the <img> tag is placed. If the image cannot be found, an alternate text is displayed from the value of the required alt attribute. The height and width of the image can also be specified and is recommended to be set in the <img> tag using the height and width attributes respectively.

Ex:

HTML Tables

An HTML table is defined by the <table> tag. A table is divided into table rows defined by the <tr> tag, and each row is divided into table data cells defined by the <td> tag which hold the content. Data cell contents may be in the form of text, links, images, lists, etc. Borders can be displayed using the border attribute within the <table> tag. Table headers can also be displayed in a table using the <th> tag which are displayed in bold and centered.

Ex:

HTML Lists

HTML Lists can be ordered or unordered. An unordered list is started with the <ul> tag and each item in the list starts with <li> tag. An ordered list begins with the <ol> tag and just like in the <ul> tag each list item is specified with the <li> tag. You can also create a definition list using the <dl> tag in conjunction with the <dd> tag which defines the item in the list and <dt> tag which describes the item in the list. A list item can contain text, links, images, other lists, etc.

Ex:

HTML Blocks

HTML elements are mostly defined as block level elements or inline elements. Block level elements such as the HTML <div> element normally start and end with a new line unlike inline elements which can be displayed in the same line such as the HTML <span> element. The HTML <div> element can be used to group other HTML elements together and can be used with CSS to set style attributes to a large group of content. The HTML <span> element can be used to contain a group of text and can be used with CSS to set style attributes to some parts of text. Just the like <div> element, the <span> element has no special meaning.

HTML Layout

Your Web page layout must be designed carefully to make it look good. Multiple columns can be created by the <div> and <table> elements. They can be positioned by CSS and with it, change the color and background of your page. Another way of creating layouts which is simpler is by using the HTML <table> element. However, using tables is not the proper way of creating layouts since the <table> element is used to display tabular data.

HTML Forms and Input

HTML Forms are used to gather user input and pass them to a server. The input element is the most important form element. User inputs are in the form of input elements such as text fields, checkboxes, radio-buttons, buttons, and more, depending on the type attribute. A form can also contain select lists, textarea, fieldset and label elements.

Ex:

HTML Iframes

An HTML iframe is designed to display a web page within a web page. The src attribute of the iframe tag specifies the URL or location of the separate page. The height and width also can be specified using the height and width attributes. The values of the height and width attributes may be specified in pixels or percent. The border around the frame can be removed by setting frameborder attribute value to “0”.

Ex:

HTML Colors

HTML colors are set using HEX values for the color combination of Red, Green, and Blue values. The lowest HEX value is 0 (black) while the highest is 255 (white) or FF in HEX. The HEX values are specified as 3 pairs of two-digit numbers preceded with a # sign and yield more than 16 million different color combinations. Web safe colors were once implemented to support computers that could display a maximum of only 256 colors, which today is no longer the case.