How to create Simple HTML Page For Beginners
Hell friends,It is very easy to design HTML page.HTML is Hyper Text Markup Language.It is very helpful for beginners. I will demostrate how we start designing simple HTML Page. There are so many HTML editor are available for designing HTML pages. No matter which editor is used. The most common editor is Notepad , Notepad++ , Sublimetext.Let we start with HTML code.
Basic HTML tags
Some basic tags are: Paragraph Tag Images Tag Link Tag Headings Tags Div Tag Anchor Tag Bold Tag Line Break Tag Center Tag Horizontal rule Tag Marquee Tag Menu Tag Ordered List Tag Unordered List Tag Table Tag Table Row Tag Table Data Tag Table Header Tag
All code and information is written between opening tag such as <> and end closing tab such as </>. Notepad++ is advance of Simple notepad it is hevy convinient for HTML code. Download latest version Notepad++ and Install.
Open Notepad++.
#Code:
<html>
</html>
Now write head and title tag between html tag.Inside head tag meta tag,title,style tag, script tag etc. we will learn about these tags in next section. Title tag show the discription about page which is display in top of browser.
#Code:
<html>
<head>
<title> Welcome to rgpv mca </title>
</head>
</html>
Insert body tag
The content of page is written inside the body tag.What we written inside body tag will display in browser.We can decorate page inside body tag using different attributes such as background color,fore color,insert tables,insert images,insert videos,insert divs,insert flash files,insert etc.Let i expalin step by step.
#Code:
<html>
<head>
<title> Welcome to rgpv mca </title>
</head>
<body> </body>
</html>
Comment tag
Before proceed with body tag i want to explain about comment tag.It is very good practice in every programming to give discription about each code so that everyone can easily understand the code.In HTML we also discribe things in comments tag.It look like we can insert comment tag anywhere between HTML tag
#Code:
<html>
<!-- write comments -->
<head>
<!-- write comments -->
<title> Welcome to rgpv mca </title>
<!-- write comments -->
</head>
<body>
<!-- write comments -->
</body>
</html>
Image tag
Image tag define image in html page using source attribute (src).src contain location of image file in disk.Image tag is used inside body tag.We can also adjust the width and height of image using height and width attribute.
#Code:
<html>
<head>
<title> Welcome to rgpv mca </title>
</head>
<body>
<!-- we can also adjust the width and height of image using height and width attribute -->
<img src="../file:///C:/Users/LENOVO/Desktop/footerschool.png" height="100px" width="100px" />
</body>
</html>
Paragraph Tag
Paragraph tag is used to define text in formated way using their attributes.It does not contain any block elements like table. Paragraph tag attributes are align, class, Id,style, title.
#Code:
<html>
<head>
<title> Welcome to rgpv mca </title>
</head>
<body>
<!-- use of p tag -->
<p id="myp" style="text-align:center; font:16pt; courier; color:blue"> This is paragraph text.</p>
</body>
</html>
Headings Tags
Heading tag are only used for heading. We can not bold text or change font size of text. Its range is H1 to H6. H1 for most and H6 for least size of text.
#Code:
<html>
<head>
<title> Welcome to rgpv mca </title>
</head>
<body>
<!-- use of Heading tag -->
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>
Div Tags
The div tag is just like a container unit.It encapsulates other page elements and divides the HTML document into sections. Web developers use div elements to group with HTML elements and apply CSS styles to many elements at once. For instance, by wrapping a set of paragraph elements into a div element, the developer can take advantage of CSS styles and apply a font to all paragraphs at once by applying a font style to the div tag instead of coding the same style for each paragraph element.The basic attributes of Div tag element are Id,title,name,style.
#Code:
<html>
<head>
<title> Welcome to rgpv mca </title>
</head>
<body>
<!-- use of div tag -->
<div id="Div1" name="Div1" title="Example of Div" style="height:20%;width:50%;color: #121; font: arial 12pt;border: 1px solid #d01;">
<h5>rgpvmca</h5>
<p>This is first paragraph </p>
<p>This is second paragraph</p>
</div>
</body>
</html>
Anchor Tag
<a> tag is known as link or hyperlink.<a> tag is simple and important it is used to link from one page to another. Attributes of Tag <a> are href,name,rel,title,method.
#Code:
<html>
<head>
<title> Welcome to rgpv mca </title>
</head>
<body>
<!-- use of anchor tag -->
<h2>Anchor tag</h2>
<a name="name" id="id" href="url/paht">My anchor text</a>
</body>
</html>
Bold Tag
<b> tag is used to bold the text.Highlight the normal text by using <b> tag.
#Code:
<html>
<head>
<title> Welcome to rgpv mca </title>
</head>
<body>
<!-- use of Bold tag -->
<h2>Normal text</h2>
<a name="name" id="id" href="url/paht">My Normal text</a>
<h2>Bold text</h2>
<a name="name" id="id" href="url/paht"><b>My Bold text</b></a>
</body>
</html>
Line Break Tag
<br> tag has no no tag because it is empty tag. <br> tag used for line break in text. It is useful more than one sentences are written in new lines such as addresses,songs,poem,paragraphs etc.
#Code:
<html>
<head>
<title> Welcome to rgpv mca </title>
</head>
<body>
<!-- use of Bold tag -->
<h1> Example of poem </h1>
<p>jony jony yes papa<br>
eating suger no papa<br>
talling lie no papa......<br>
</P>
<h1> Example of Address </h1>
<p>House no 25/c <br>
Ayodhya nagar bypass road<br>
Bhopal (M.P)<br>
pin-462023<br>
</body>
</html>
Center Tag
<Center> tag is used to align center , text written inside <Center> tag.It is used to align text.Center tab can be used in paragraph tag,span tag and other elements.
#Code:
<html>
<head>
<title> Welcome to rgpv mca </title>
</head>
<body>
<!-- use of Center tag -->
<center>
<h1> Example of poem </h1>
<p>jony jony yes papa<br>
eating suger no papa<br>
talling lie no papa......<br>
</P>
<h1> Example of Address </h1>
<p>House no 25/c <br>
Ayodhya nagar bypass road<br>
Bhopal (M.P)<br>
pin-462023<br>
</center>
</body>
</html>
Horizontal rule Tag
<hr> tag is known as horizontal rule. It is used to draw horizontal line. It has following attributes such as align,size,width,noshade.It support all the browsers.
#Code:
<html>
<head>
<title> Welcome to rgpv mca </title>
</head>
<body>
<!-- use of horizontal tag -->
<h3> My first statement </h3>
<hr>
<h3> My second statement </h3>
</body>
</html>
No comments:
Post a Comment