- HTML Introduction
- HTML Attributes
- HTML Basic Tag
- HTML Color
- HTML Comments
- HTML Fonts
- HTML Blocks
- HTML Images
- HTML Layout
- HTML Links
- HTML Lists
- HTML Formatting Tags
- HTML Table
- HTML Meta Tag
- HTML Frames
- HTML Parse Tag
- HTML Forms
- HTML Script
- HTML Style-CSS
- HTML XHTML
HTML Basic Tags
Html code can be written using Notepad or TextEdit HTML can also be edited by using a professional HTML editor like:
- Adobe Dreamweaver
- Microsoft Expression Web
- CoffeeCup HTML Editor
However, for learning HTML we recommend a text editor like Notepad (PC) or TextEdit (Mac). We believe using a simple text editor is a good way to learn HTML. Please follow below mentioned 4 steps to create your first web page with Notepad.
Step 1: Open Notepad Editor
Step 2: Write your HTML code into your Notepad:
Step 3: Save Your HTML
Select Save as.. in Notepad's file menu. When you save an HTML file, you can select either the .htm or the .html file extension. There is no difference between this two. Step 4: Run your HTML file using Browser
Open your web browser and run your html file from the File -> Open menu, or just browse the folder and double-click on your HTML file. The result should look much like this:
The basic structure for all HTML documents is very simple and should atleast include the below mentioned elements or tags:
- <html>- The root or main container for HTML pages
- <head> - The container for storing page header information
- <title> - Assigning title to the page
- <body> - The main body or content of the page
Before an opening <html> tag, an XHTML document can contain the optional XML declaration, and it should always contain a DOCTYPE declaration indicating which version of XHTML it uses.
Now we will explain each of these tags as we proceed. In this tutorial you will see that term element and tag are used interchangeably.
The <html> Element:
The <html> element is the containing element for the whole HTML document. Each HTML document should have one <html> and each document should end with a closing </html> tag. Following elements are direct children of an <html> element:
The <head> Element:The <head> element is just a parent container for all other header elements. It should be the first thing to appear after the opening <html> tag. Each <head> element should contain a <title> element indicating the title of the document, it may also contain below elements, in any order:
- The <base> tag is used to create a "base" url for all links on the page.
- The <link> tag is used to link to external files such as a style sheet(*.css)
- The <style> tag is used to include CSS rules inside the document.
- The <meta> tag includes information about the document such as keywords and a description, which are particularly helpful for SEO.
The <title> Element:
You should specify a title for every page that you write inside the <title> element. This element is a child of the <head> element. It is used in several ways:
- It is displayed at the very top of a browser window.
- It is used as the default name for a bookmark in browsers such as IE and Netscape.
- It is used by search engines that use its content to help index pages.
Therefore it is important to use a title that really describes the content of your site. The <title> element should contain only the text for the title and it may not contain any other elements.
The <body> Element:
The <body> element appears after the <head> element and contains the part of the Web page that you actually see in the main browser window, which is sometimes referred to as body content. A <body> element may contain anything from a couple of paragraphs under a heading to more complicated layouts containing forms and tables. Most of what you will be learning in this and the following five chapters will be written between the opening <body> tag and closing </body> tag.
Putting all together:
Now if we will put all these tags together, it will constitute a complete HTML document as follows: