Uses of a website

Before Going to learn web designing course we should know basic thinks about website like what is a website why we have to use website and how it will be usefull for a person or a business. Website is a combinations of HTML pages it shares a complete information of a business or Person to worldwide. (i.e) a person get a chance to know the complete information of a indian company from USA

Web designing course is a easy and simple to learn compare to all other courses.As our earlier discussion website is a combination of HTML pages then what is a HTML page and how to design it,a page with content under HTML tags comes under HTML page.

web designing Online free course with ebooks,material

Creating HTML Pages with Easy Process

how to create a website using html

Lets follow below steps to create basic HTML Page

Take one notepad file copy paste below

<html>
<head>

</head>
<body>

<p>Welcome to my first HTML Page.</p>

</body>
</html>


and save file on your desktop with .html extension as index.html.Here your first HTML Page is ready just go desktop and right click on index.html file and open with any browser (Chrome,Internet Explorer,Firefox etc..).

Above code HTML open tag <html> and HTML close tags </html> mandatory for HTML file.
in between head open tag <head> and head close tag </head> we use to link extra supporting files to our HTML file like CSS,Javascript files etc... in between body tags we use to write content of HTML page.We must use html tags for insert data in the HTML page there is lot of html tags are there available for each section

for heading to content we have H1 to H6 tags like

  • <h1>Welcome to My website</h1>
  • <h2>Welcome to My website</h2>
  • <h3>Welcome to My website</h3>
  • <h4>Welcome to My website</h4>
  • <h5>Welcome to My website</h5>
  • <h6>Welcome to My website</h6>

From H1 to H6 you will decrease the font size

<html>
<head>

</head>
<body>

<h1>Welcome to My website</h1>
<p>Welcome to my first HTML Page.</p>

</body>
</html>

Above code <p></p> tag is paragraph tag which use to write contenet like paragraph

now we are going to adding one of the most use full tag in HTML is <div></div> tag the div tag holds and controll certain section,

<html>
<head>

</head>
<body>

<div>

<h1>Welcome to My website</h1>
<p>Welcome to my first HTML Page.</p>

</div>

</body>
</html>

by using div tag we get chance to give background color,height,width, to particular section also we get chance to moov top,right,bottom,left to particular section.To apply all these things to a div tag we have to add CSS to Div tag.

Here i have added a new word CSS,What is CSS?

If we take full form of CSS - Cascading Style Sheet it's a HTML supporting file by using CSS only we can apply all effects to Div tag Ex:

<html>
<head>

</head>
<body>

<div style="width:400px; height:300px; background:#069;">

<h1>Welcome to My website</h1>
<p>Welcome to my first HTML Page.</p>

</div>

</body>
</html>

In above code from style="width:400px; height:300px; background:#069;" is inline CSS ( There is 3 types of css are there 1) Inline 2) Internal 3) external ) which we use to apply div tag to get effects like background color,height,width

when you use above code the result will show you like a box with 2 lines of text.We need to show that box center of the page to do that iam going to apply some more css propertys like:

<html>
<head>

</head>
<body>

<div style="width:1004px; height:500px; background:#069; margin:auto; color:white; text-align:center;">

<h1>Welcome to My website</h1>
<p>Welcome to my first HTML Page.</p>

</div>

</body>
</html>

above code i have added
width:1004px;   -     width of div tag
height:500px;   -     Height of div tag
background:#069;   -     Background color of div tag
margin:auto;   -     for appear div tag center of the page.
color:white;   -     for font color white (Default font color - black).
text-align:center;   -     for align text center of the div.

as i told earlier there is three types of CSS"s are there till now we use only inline CSS only. Now we are going to use External CSS for HTML Page

Follow Below Steps to add External CSS to HTML Page

  • Create a Folder with name Website on Desktop
  • Take one Notepad file and write below code in that Notepad file and save it as index.html in Website folder
  • <html>
    <head>

    </head>
    <body>

    <div>

    <h1>Welcome to My website</h1>
    <p>Welcome to my first HTML Page.</p>

    </div>

    </body>
    </html>

  • Take another notepad file and save it as style.css in Website folder

Now we have to linkup style.css file to index.html file to iam adding a below code in index.html in Header Section (i.e) between

    <head>

    <link rel="stylesheet" type="text/css" href="style.css" />

    </head>

In inlineCSS we have applied CSS code directly to div tag,

In External CSS we need to apply CSS code to DIV tag via Class only

Write below code in style.css

.section{
width:1004px;
height:500px;
background:#069;
margin:auto;
color:white;
text-align:center;
}

Apply section class to div tag in index.html like :

    <html>
    <head>

    <link rel="stylesheet" type="text/css" href="style.css" />

    </head>
    <body>

    <div class="section">

    <h1>Welcome to My website</h1>
    <p>Welcome to my first HTML Page.</p>

    </div>

    </body>
    </html>

 

 

Online-classroom-training-experts-in-Hyderabad Webdesigning-online-training Best-online-training-centeres-in-Hyderabad Graphic-Designing-Training-institutes Online-web-design-training-institute Online-web-design-training-institute

 

Please give your feed back for improove subject

Student Speak

"One of the advantage from web designing online training institute is student get training as per his/her understanding level.And there is no time limit for course we have chance to get training untill we get placement.Thanks for "Webdesigning online training"
.........Anusha..Hyderabad

Online,classroom Free webdesinging course providing coaching center institutes in Hyderabad,India,Warangal,Vijayawada,Vizag,Vishakapatnam,Karimnagar,Amaravati,in India and Freelance web,Graphic Designers.

© copyrights 2013 all rights reserved Designed by Webslavery