Hello Readers / Friends,
Welcome Back Hope you Install NOTEPAD++ and also having Browser .
So lets Begin with HTML Keywords which is important while coding and making any webpage.
1) <html> - Open / Start Tag.
2) </html> - Closing / End Tag.
3) <head> - Open Invisible Tag.
4) </head> - Closing Invisible Tag.
5) <body> - Open Visible Tag.
6) </body> -Closing Visible Tag.
Now in the HEAD Section which is Invisible Tag which mean User Cannot see it .
Keywords for HEAD Section are :-
1) <title> .... </title>
2) <link>
3) <style> .... </style>
4) <script> ....</script>
5) <meta>
6) <base>
Now in the BODY Section which is Visible Tag which mean User Can see it in Webpage.
Keywords for BODY Section are all except the HEAD Section's Keyword.
1) <div> ... <div>
2) <img> .... </img>
3) <p> ... </p>
4) <a> ... </a>
5) <h1> ... </h1>
6) <form> ... </form>
Example by using above keywords in notepad++
<html>
<head>
<title> CodeEra | Become a coder
</title>
</head>
<body>
<h1><p> This is CodeEra</p></h1>
</body>
</html>
Note:- Now save as any"filename" and choose the type is " html " and run in the browser.
<html>
<head>
<title> CodeEra | Become a coder
</title>
<style type="text/CSS">
.para{color : black; font-weight : bold;} <!--.para is to define you can give any name-->
.rohit{color : Yellow;}
</style>
</head>
<body>
<h1><p class="para"> This is CodeEra. </p></h1>
<p class="rohit"> Have fun with coding.</p>
</body>
</html>
Note:- Now save as any"filename" and choose the type is " html " and run in the browser.
<html>
<head>
<title> CodeEra | Become a coder
</title>
<link rel= "stylesheet" type="text/CSS" href="style.css"> <!--this keyword is used to create style in another file i.e style.css -->
</head>
<body>
<h1><p class="para"> This is CodeEra. </p></h1>
<p class="rohit"> Have fun with coding.</p>
</body>
</html>
Now Create style.css file
.para{color : black; font-weight : bold;font-size :20px;} <!--.para is to define you can give any name -->
.rohit{color : Yellow;}
Note:- Now save as any"filename" and choose the type is " html " and run in the browser.
<html>
<head>
<title> CodeEra | Become a coder
</title>
<style type="text/CSS">
.para{color : black; font-weight : bold;} <!--.para is to define you can give any name-->
.rohit{color : Yellow;}
</style>
<meta name= keyword content= "coding, programming, HTML, CSS">
</head>
<body>
<h1><p class="para"> This is CodeEra. </p></h1>
<p class="rohit"> Have fun with coding .</p>
</body>
</html>
Note:- Now save as any"filename" and choose the type is " html " and run in the browser.
<html>
<head>
<base href="image\ "target="_blank"> <!-- define the images and target is used when we click on any image or link it will open in new page-->
<title> CodeEra | Become a coder
</title>
<style type="text/CSS">
.para{color : black; font-weight : bold;} <!--.para is to define you can give any name-->
.rohit{color : Yellow;}
</style>
<meta name= keyword content= "coding, programming, HTML, CSS">
</head>
<body>
<h1><p class="para"> This is CodeEra. </p></h1>
<p class="rohit"> Have fun with coding.</p>
<img src="edu.jpg">
<img src="edu1.jpg ">
<img src="edu2.jpg ">
</body>
</html>
Note:- Now save as any"filename" and choose the type is " html " and run in the browser.
In Next Page , I will give you more examples for HTML coding.
Till then If you are having any doubt / Queries then you can comment below or send me in my mail i will clear your doubt.
See You in Next Page.
Welcome Back Hope you Install NOTEPAD++ and also having Browser .
So lets Begin with HTML Keywords which is important while coding and making any webpage.
1) <html> - Open / Start Tag.
2) </html> - Closing / End Tag.
3) <head> - Open Invisible Tag.
4) </head> - Closing Invisible Tag.
5) <body> - Open Visible Tag.
6) </body> -Closing Visible Tag.
Now in the HEAD Section which is Invisible Tag which mean User Cannot see it .
Keywords for HEAD Section are :-
1) <title> .... </title>
2) <link>
3) <style> .... </style>
4) <script> ....</script>
5) <meta>
6) <base>
Now in the BODY Section which is Visible Tag which mean User Can see it in Webpage.
Keywords for BODY Section are all except the HEAD Section's Keyword.
1) <div> ... <div>
2) <img> .... </img>
3) <p> ... </p>
4) <a> ... </a>
5) <h1> ... </h1>
6) <form> ... </form>
Example by using above keywords in notepad++
1) Title Tag
<html>
<head>
<title> CodeEra | Become a coder
</title>
</head>
<body>
<h1><p> This is CodeEra</p></h1>
</body>
</html>
Note:- Now save as any"filename" and choose the type is " html " and run in the browser.
2) Style Tag
<html>
<head>
<title> CodeEra | Become a coder
</title>
<style type="text/CSS">
.para{color : black; font-weight : bold;} <!--.para is to define you can give any name-->
.rohit{color : Yellow;}
</style>
</head>
<body>
<h1><p class="para"> This is CodeEra. </p></h1>
<p class="rohit"> Have fun with coding.</p>
</body>
</html>
Note:- Now save as any"filename" and choose the type is " html " and run in the browser.
3) Link Tag
<head>
<title> CodeEra | Become a coder
</title>
<link rel= "stylesheet" type="text/CSS" href="style.css"> <!--this keyword is used to create style in another file i.e style.css -->
</head>
<body>
<h1><p class="para"> This is CodeEra. </p></h1>
<p class="rohit"> Have fun with coding.</p>
</body>
</html>
Now Create style.css file
.para{color : black; font-weight : bold;font-size :20px;} <!--.para is to define you can give any name -->
.rohit{color : Yellow;}
Note:- Now save as any"filename" and choose the type is " html " and run in the browser.
4) Meta Tag
<html>
<head>
<title> CodeEra | Become a coder
</title>
<style type="text/CSS">
.para{color : black; font-weight : bold;} <!--.para is to define you can give any name-->
.rohit{color : Yellow;}
</style>
<meta name= keyword content= "coding, programming, HTML, CSS">
</head>
<body>
<h1><p class="para"> This is CodeEra. </p></h1>
<p class="rohit"> Have fun with coding .</p>
</body>
</html>
Note:- Now save as any"filename" and choose the type is " html " and run in the browser.
5) Base Tag
<html>
<head>
<base href="image\ "target="_blank"> <!-- define the images and target is used when we click on any image or link it will open in new page-->
<title> CodeEra | Become a coder
</title>
<style type="text/CSS">
.para{color : black; font-weight : bold;} <!--.para is to define you can give any name-->
.rohit{color : Yellow;}
</style>
<meta name= keyword content= "coding, programming, HTML, CSS">
</head>
<body>
<h1><p class="para"> This is CodeEra. </p></h1>
<p class="rohit"> Have fun with coding.</p>
<img src="edu.jpg">
<img src="edu1.jpg ">
<img src="edu2.jpg ">
</body>
</html>
Download link :- sample file
In Next Page , I will give you more examples for HTML coding.
Till then If you are having any doubt / Queries then you can comment below or send me in my mail i will clear your doubt.
See You in Next Page.
Author Name
Author Description!
Get Free Email Updates to your Inbox!
Post a Comment