CodeEra

HTML Link

Filed Under: color, href, link page, linking, protocol on Monday, 15 May 2017

Hello Readers / Friends,

Welcome back to CodeEra. Hope you have understand List used in HTML in the Previous blog. So lets Begin with HTML Link which is used to connect with another document,file or any website.

There are two types of link used in HTML :-

1) Relative link => "image/edu.png " file name that we create in our own webpage
2) Absolute link =>http://programmingera7.blogspot.in

What is the different between Relative and Absolute Link ?

- Relative link are those link in which we don't write the complete address of any file ,website or any target we just write the "file name" whereas Absolute link are those link in which we give the complete address of any file ,website or any target.

Format we used in HTML for the Link
<a href="Path/ address of your target document, file or any website.">discriptor</a>

Example of Link

https://www.google.com

https: ------- this is the Protocol of the link
// -------- is the directory of the link
www ------- is the server name of the link
google.com ------- is the domain name of the link

what is the different types of protocols used in the link?

1) https ------- hyper text transfer protocol with secure
2) http -------- hyper text transfer protocol
3) ftp --------- file transfer protocol
4) ftps -------- file transfer protocol with secure
5) smtp ------- simple mail transfer protocol
6) telnet ------- telephone network

Different types of domain we used are :

yoursite.co.in
yoursite.com
yoursite.in
yoursite.co.uk
and many mores

You can refer to this link for all the domain name used for different countries -

Click Domain name

1) Using Link

<html>

<head>

<title> CodeEra | Become a coder

</title>

<style type="text/CSS">

.para{color : black; font-weight : bold;} 

.rohit{color : Yellow;}

</style>

<meta name= keyword content= "coding, programming, HTML, CSS">

</head>

<body>

<center> <h1><p class="para"> This is CodeEra. </p></h1></center>

<center><p class="rohit"> Have fun with coding.</p></center>

<center> <a href= "http://programmingera7.blogspot.in" ><b><h3>Click Here </h3></b></a> to Visit CodeEra Blog</center>

</body>

</html>

Note:- Now save as any"filename" and choose the type is " html " and run in the browser.

Download File -link.html

2) Properties and Attributes of Link

target="_blank"; ---- link open in new page
target="_self"; ------ link open in same page
title= " " -------- this is used when we keep mouse on the link it will show the description for more i have upload the file "plink.html"

Example :

<html>
<head>
<title> CodeEra | Become a coder
</title>
<style type="text/CSS">
.para{color : black; font-weight : bold;} 
.rohit{color : Yellow;}
</style>
<meta name= keyword content= "coding, programming, HTML, CSS">
</head>
<body>
<center> <h1><p class="para"> This is CodeEra. </p></h1></center>
<center><p class="rohit"> Have fun with coding.</p></center>
<center> <a href= "http://programmingera7.blogspot.in" target="_blank" title="visit CodeEra" ><b><h3>Click Here </h3></b></a> to Visit CodeEra Blog</center>
<center> <a href= "http://programmingera7.blogspot.in" target="_self" title="visit CodeEra" ><b><h3>Click Here </h3></b></a> to know more of CodeEra Blog</center>

</body>

</html>

Note:- Now save as any"filename" and choose the type is " html " and run in the browser.

Download File -plink.html

3) Linking on same page and Change Color of Link

Linking on same page :

<a href=" ">

<a name=" ">

Color change of link :

link ="value"------ color of the link

alink ="value"------ press on the link color change

vlink ="value"------- visit link then another color

Note: This tag we used in body section

Example :

<html>

<head>

<title> CodeEra | Become a coder

</title>

<style type="text/CSS">

.para{color : black; font-weight : bold;} 

.rohit{color : Yellow;}

</style>

<meta name= keyword content= "coding, programming, HTML, CSS">

</head>

<body link="red" alink="green" vlink="black">

<center> <h1><p class="para"> This is CodeEra. </p></h1></center>

<center><p class="rohit"> Have fun with coding.</p></center>

<center> <a href= "http://programmingera7.blogspot.in" target="_blank" title="visit CodeEra" ><b><h3>Click Here </h3></b></a> to Visit CodeEra Blog</center>

<center> <a href= "http://programmingera7.blogspot.in" target="_self" title="visit CodeEra" ><b><h3>Click Here </h3></b></a> to know more of CodeEra Blog</center>

<ol><h2>choose blog</h2>

<li><a href="#about1">About Blog 1</a></li>

<li><a href="#about2">About Blog 2</a></li>

<li><a href="#about3">About Blog 3</a></li>

<li><a href="#about4">About Blog 4</a></li>

<br>

<h2><a name="about1">About Blog 1</a></h2>

<p > In this blog, i would like to share the coding and programming languages with you all and may this blog will helps you regarding the coding that i am going to tell you.

And i will also tell you about Tricks and Some useful Tips that help you and also share my graphic works.

<br>

If you get any problem you can also send me mail so that as soon as possible i can resolve your problem and doubts.

<br><br>

Hope You Enjoy this Blog and if you like this blog then share it with your friends , your natives so that they also get help regarding the Coding and also like the blog and follow the blog.</p>

<h2><a name="about2">About Blog 2</a></h2>

<p > In this blog, i would like to share the coding and programming languages with you all and may this blog will helps you regarding the coding that i am going to tell you.

And i will also tell you about Tricks and Some useful Tips that help you and also share my graphic works.

<br><br>

If you get any problem you can also send me mail so that as soon as possible i can resolve your problem and doubts.

<br><br>

Hope You Enjoy this Blog and if you like this blog then share it with your friends , your natives so that they also get help regarding the Coding and also like the blog and follow the blog..</p>

<h2><a name="about3">About Blog 3</a></h2>

<p > In this blog, i would like to share the coding and programming languages with you all and may this blog will helps you regarding the coding that i am going to tell you.

And i will also tell you about Tricks and Some useful Tips that help you and also share my graphic works.

<br><br>

If you get any problem you can also send me mail so that as soon as possible i can resolve your problem and doubts.

<br><br>

Hope You Enjoy this Blog and if you like this blog then share it with your friends , your natives so that they also get help regarding the Coding and also like the blog and follow the blog.</p>

<h2><a name="about4">About Blog 4</a></h2>

<p > In this blog, i would like to share the coding and programming languages with you all and may this blog will helps you regarding the coding that i am going to tell you.

And i will also tell you about Tricks and Some useful Tips that help you and also share my graphic works.

<br><br>

If you get any problem you can also send me mail so that as soon as possible i can resolve your problem and doubts.

<br><br>

Hope You Enjoy this Blog and if you like this blog then share it with your friends , your natives so that they also get help regarding the Coding and also like the blog and follow the blog.</p>

</body>

</html>

Note:- Now save as any"filename" and choose the type is " html " and run in the browser.

Download File -linking page.html

In Next Page , I will give you more examples for HTML coding and with new Topic.

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.

List in HTML

Filed Under: definition list, list, nested list, ordered list, unordered list on Saturday, 13 May 2017

Hello Readers / Friends,

Welcome back to CodeEra. Hope you have understand some more Tags in the Previous blog. So lets Begin with HTML List which is used in coding and making any webpage.

There are different types of List used in HTML are as follow :-

1)<ol>...</ol> --------------- Ordered List
2)<ul> ... </ul> ------------- Unordered List
3) <ol>...</ol> ------------- Nested Ordered List
4) <ul> ... </ul> ------------- Nested Unordered List
5) <dl> ... </dl> -------------- Definition List
6) <dt> ... </dt> ------------- Definition Title
7) <dd> ... </dd> ------------- Definition Detail / Description

1) Ordered List & Unordered List

<html>
<head>
<title> CodeEra | Become a coder
</title>

</head>
<body>
<h1><p> <font color="black"><center><b><u>This is CodeEra</u></b></center></font></p></h1>
<p> This is CodeEra </p> 
<ul>
Languages are :-
<li>HTML & CSS</li>
<li>PHP with MYSQL</li>
<li>Jquery / JavaScript</li>
</ul>

<ul type="circle"> 
Languages are :-
<li>HTML & CSS</li>
<li>PHP with MYSQL</li>
<li>Jquery / JavaScript</li>
</ul>

<ol type="a"> 
Languages are :-
<li>HTML & CSS</li>
<li>PHP with MYSQL</li>
<li>Jquery / JavaScript</li>
</ol>
</body>
</html>

Note:- Now save as any"filename" and choose the type is " html " and run in the browser.

Download File - list.html

2) Nested Ordered List

Download File - nested.html

3) Definition List

Download File - definition.html

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.

Paragraph To HTML

Filed Under: abbreviation tag, align tag, blink tag, blockquote, bold tag, center tag, emphasize tag, font tag, horizontal rule, paragraph tag, pre tag, special charecter, strike tag, strong tag, sub tag, sup tag

Hello Readers / Friends,

Welcome back to CodeEra. Hope you have understand some important Keywords in the Previous blog. So lets Begin with few more HTML Tags which is important while coding and making any webpage.

1) <p> ... </p> -------- Paragraph
2) <pre> ... </pre> ------- Preformatted text
3) <hr> ... </hr> --------- Horizontal Rule
4) <blockquote> ... </blockquote> -------- indicating long quote
5) <font> ... </font> --------- font face, color, size of the text
6) <b> ... </b> -------- bold text
7) <i> ... </i> --------- italic text
8) <u> ... </u> -------- underline text
9) <strong> ... </strong> --------- also known as bold text
10) <em> ... </em> ----------- emphasized text
11) <tt> ... </tt> --------- monotype font
12) <s> ... </s> --------- strikethough
13) <br> ... </br> ------ break row
14) <big> ... </big> --------- big text
15) <abbr> ... </abbr> -------- abbreviation text
16) <sup> ... </sup> --------- superscript
17) <sub> ... </sub> --------- subscript
18) <center> ... </center> --------- text in center
19) <small> ... </small> --------- small text
20) <bdo> ... </bdo> ---------- bi- directional override

Example

<html>
<head>
<title> CodeEra | Become a coder
</title>

</head>
<body>
<h1><p> <font color="black"><center><b><u>This is CodeEra</u></b></center></font></p></h1>
<p> 1)This is CodeEra </p> 
<p>2) This is <pre> CodeEra </pre> </p> 
<p>3) This is <hr> CodeEra</hr> </p>
<p>3.1) This is <hr width="80%" color="black"> CodeEra</hr> </p>
<p>3.1) This is <hr width="50%" color="red"> CodeEra</hr> </p>
<p>4) This is <blockquote>CodeEra</blockquote></p>
<p>5) This is <font color="black" size="5"> CodeEra </font></p> 
<p>6) This is <b> CodeEra </b></p>
<p> 7) This is <i> CodeEra </i></p>
<p> 8) This is <u> CodeEra</u> </p>
<p> 9) This is <strong> CodeEra </str>
<p> 11) This is <tt> CodeEra </tt> </p>
<p>12) This is <s> CodeEra </s> </p>
<p> 13) This is <br> CodeEra </p>
<p> 14) This is <big> CodeEra </big> </p>
<p> 15) This is <abbr> CodeEra </abbr></p>
<p>16) This is <sup> CodeEra </sup></p> 
<p> 17) This is <sub> CodeEra </sub></p> 
<p> 18) This is <center> CodeEra </center></p>
<p> 19) This is <small>CodeEra </small></p>
<p> 20) <bdo dir="rtl"> This is CodeEra </bdo> </p> 
<p> 20.1) <bdo dir="ltr"> This is CodeEra </bdo> </p>

</body>
</html>

Note:- Now save as any"filename" and choose the type is " html " and run in the browser.

Download File - paragraph file

Keywords in HTML

Filed Under: base tag, css, html, keywords, link tag, meta tag, style css, style tag, title tag on Wednesday, 10 May 2017

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++

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;} 
.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

<html>
<head>
<title> CodeEra | Become a coder
</title>
<link rel= "stylesheet" type="text/CSS" href="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;} 
.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;} 
.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"> 

<title> CodeEra | Become a coder
</title>
<style type="text/CSS">
.para{color : black; font-weight : bold;} 
.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.

Download link :- sample file

Introduction to html

Filed Under: advantages, coding, html and css, introduction, markup language, programming language

Hello Readers / Friend,

I am going to tell you about the Basic Idea of HTML and CSS. So Let Begins...

HTML is Known as Hyper Text Markup Language. This is not the Programming Language but it is the Markup Language.

You Might be thinking that what is the Different between Programming Language and Markup Language?

- The Different between Programming Language and Markup Language is that :-
Programming Language are like C, C++, Java etc. are the programming language which help to transform data but the Markup Languages are like HTML and XML which help to give the design to any website. Yes this Markup Language is used to Design any Webpage or you can say that overviews of any Webpage.
If we take the example of Facebook , then the overview of Facebook like the design of the facebook is the used of Markup Language but when we click on (SIGN IN or SIGN UP) button in the Facebook is the Programming Language.

Hope You got the Different between Programming Language and Markup Language.

Requriement :-

For the coding the HTML

1) we need to download NOTEPAD++
link to download NOTEPAD++ is - https://notepad-plus-plus.org/download/v7.3.3.html

2) we need any browser like Google Chrome , Mozilla Firefox etc.

In Next Page , I will tell you about some Important Keyword that we need in 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.

CodeEra

Featured Posts

HTML Link

List in HTML

Paragraph To HTML

Keywords in HTML

Introduction to html

Translate

Popular Posts

Categories

Contact Form

About Me

Search This Blog

Blog Archive

Followers

www.CodeNirvana.in