Step 2: LET GET STARTED with the BASIC
Every Web page starts with the <html> tag telling the web browser the start of the HTML document and ends with </html> which indicates the browser that it is the end of the HTML document, there are even more tags which you will be learning further, but one thing which you will see that these tags <html>, <body> etc are not displayed in the web browser. The browser only displays the content between the tags, but the tags themselves are hidden.
Here is the Syntax of a <html> tag or we can say, the basic structure of the web page -
<html><head><title>xxxxxxxxxxxxxxxxxxxxxxx</title></head><body>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx </body></html>
Let me explain you the two types of tag before we go further:
Container tag/Non-Empty tags - Container tags are also known as Non-Empty tags. These types of tags requires opening as well as closing.
Example: <html>, <head>, <title>, <body>, <i> these types of tags requires closing.
Every container tag is closed by giving a slash sign ( / ) just before the name of the tag
Example: </html>, </head>, </title>, </body>,</i> are the examples of closing tags.
B. Empty tag/Non-Container tags - Empty tags are also know as Non-Container tags. These types of tags don't requires closing even if you have opened it.
Example: <br>, <img> , etc
Attributes - Every tag have their own attributes and each attribute provide additional information about an tag. Attributes are always used withing the tag and in the following manner -
<tag attribute="value">
The following example will make it clear - Suppose if you want to have background color of your web page as black then you will use "bgcolor" attribute within the <body> tag.
Open Notepad++ and type the following code -
<html><head><title>Web Designing</title></head>
<body bgcolor="black">
<font face="Bradley Hand ITC" color="white" size="5">You are learning Web Designing</font>
<font face="Cooper Black" color="green" size="4">You are learning Web Designing</font>
<font face="broadway" color="red" size="6">You are learning Web Designing</font>
<font face="Aerial" color="yellow" size="8"> You are learning Web Designing</font>
<font face="Comic Sans MS" color="purple" size="10"> You are learning Web Designing</font>
</body></html>
As you have already saved it with .html extension ( if not done then do it now ), you just need to click on "Save" option from "File" menu on the menu bar.
As you can see main tags have "light blue" color, contents that are displayed on web browsers have "black" color, attribute have "red" color while value of attributes have "purple" color. This is the main reason why we use Notepad++, you can easily distinguish all stuffs very easily.
Open the saved file using any Web Browser.
The following code could give this type of output -
Here is the explanation to the the HTML code of this Web page:-
As you see here that all the text are in written in one complete line, but you can change it by using <br> [break tag. Its a empty tag] or <p> [paragraph tag. Its a container tag].
You need to use it just where you want to break the line ( <br> ) or from where you want to start a new paragraph ( <p> ).
After you use <br> tag or <p> tag you will see the output like this:- You can also use the hexadecimal number of any color. Like you can also use this line for displaying text in red color -
<font face="broadway" size="4" color="#FF0000">
