WEB DESIGNING

HOW TO MAKE A WEB DESIGN

Introduction:

So you have decided to design your web pages yourself! Good decision. So let's start quickly.Web pages are ordinary files with .htm or .html file extensions. They contain a code named "hypertext mark-up language" or html. This codes when viewed in a browser like Internet Explorer orNetscape will be seen as beautiful web pages however code under web page may be complicated.To design an html web page you have two options:a. You can use a web page editor like Microsoft FrontPage to create web pages. It works exactlylike Microsoft word (a complicated editor program used for creating and editing book, letter etcpages.) You just type text, insert graphics and finally save your document as an html web page.By the way word 2000 itself can save your existing documents as html pages.So you see designing a web page can be very easy. But soon you will see that this is not a goodoption for creating a professional web page.b. Second option is to learn html codes and write html pages in a simple text editor. As we saidyour codes will be seen as WebPages when viewed in a web browser.

Tools you will need
You will need a simple text editor to write html codes. For example you can use notepad in
windows or any text editor in other operating systems. You will also need a browser like Internet
explorer or Netscape Navigator. In this course we will assume that you are working in windows
9X/NT/2000.

EXAMPLE:

<HTML>

Hello world!</HTML>Now save the text as "page11.html" To browse html file open windows explorer and double clickon the file. You must see your first web page opened in your web browser.
HTML code headers
Every html page must have a header. Header contains important information about the page.
Different tags are used for different sections of a header. Header of an html page is specified by
<HEAD> and </HEAD> tags.
<HTML>
<HEAD>
...
</HEAD>
</HTML>
We will enter header information between <HEAD> </HEAD> tags.

TITLE:

<HTML>

<HEAD><TITLE>Title of the page</TITLE></HEAD></HTML>
BODY OF WEB PAGE TAG<body></body>

body page color:

<HTML>

<HEAD>

<TITLE>Page with Back Color</TITLE>

</HEAD>

Page with Back Color

</BODY>

</HTML>

background image need means:

<HTML>
<HEAD>
<TITLE>Page with background image</TITLE>
</HEAD>
<BODY BACKGROUND="image1.gif">
<B>Page with background image.</B>
</BODY>
</HTML>

We can make a text bold, italic or underlined. If you want to make a text bold, you must inclose it

in <B>...</B> tags.
<BODY>
This is very <B> important </B>
</BODY>
In above text the word "important" is typed bold. You can make a text italic by inclosing it in
<I>...</I> tags.
And finally you can make some text underlined by inclosing it in <U>...</U> tags.

font color codes:

<HTML>
<HEAD>
<TITLE>Example 4, Lesson 2</TITLE>
</HEAD>
<BODY>
<FONT COLOR="#FF0000">This text is in red color.</FONT><br>
<FONT COLOR="#00FF00">This text is in green color.</FONT><br>
<FONT COLOR="#0000FF">This text is in blue color.</FONT><br>
</BODY>
</HTML>

Text color default is black. Links are usually blue. To change default settings for these values you

must use <BODY> tag with more parameters.
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000FF"
VLINK="#00FF00" ALINK="#FF0000">Some Text </BODY>
BGCOLOR: Web page background
TEXT: Text Color
LINK: Link Color
VLINK: Visited link
ALINK: Active link

Inserting url:

<html><body>
<p>An absolute URL: <a href="http://rdtad.blogspot.com">W3Schools</a></p><p>A relative URL: <a href="tag_a.asp">The a tag</a></p>
*</body></html>***

Insering date and time :

<html>
<body>
<h2>today date and time</h2>
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click here to display Date and Time.</button>
<p id="demo"></p>
</body>
</html>

inserting image:

<html>
<body>
<img src="smiley.gif" alt="my image.jpg" width="42" height="42">
</body>
</html>

inserting table:

<html>
<body>
<table style="width:100%"> <tr> <th>Firstname</th> <th>Lastname</th> <tr>

<tr> <td>rd</td> <td>tad</td><tr>

inserting color for head and paragraph:

<html>

<body>

<h1 style="background-color:DodgerBlue">Hello guys</h1>

<p style="background-color:Tomato;">

iam rd from india i teach now the web design using html code tags we can create a web page in 10 minutes

</p>

</body>

</html>

inserting symbols:

<html>
<body>
<p>I will display €</p>
<p>I will display €</p>
<p>I will display €</p>
</body>
</html>

inserting blocks:

<html>
<body>
<div style="background-color:black;color:white;padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
</div>
</body>
</html>

Inserting Tables:

<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h2>Add a border to a table:</h2>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>rd</td>
<td>tad</td>
</tr>

Inserting margin:

<html>
<head>
<style>
div {
border: 1px solid black;
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
background-color: lightblue;
}
</style>
</head>
<body>
<h2>Using individual margin properties</h2>
<div>This div element has a top margin of 100px, a right margin of 150px, a bottom margin of 100px, and a left margin of 80px.</div>
</body>
</html>

This lesson included some of the most important techniques in html writing. Now you must be able

to use any kind of text in your web pages.
As remembering so much tags and parameters is difficult, you must use them repeatedly so that
you can remember them.
"No one becomes a programmer
without programming"