Structure of HTML Pages
Lets start with <table> tag. As every tag has starting and ending tag. border is set to "1". It can be "0" or higher number. With "0" you won't see border lines. Higher numbers will produce thick border.
Now let’s start
with the structure of HTML page. Its consists of:
<html>
<head>
<title>Title
of Page</title>
</head>
<body>
<h1> Here
Is a Heading </h1>
<p> This
is a sample paragraph </p>
</body>
</html>
·
Every HTML page consists of three tags,
<html>, <head> and <body>.
·
HTML page starts with <html> tag and ends
with </html> tag. Everything goes in between <html> and
</html> tags.
·
Then comes <head> tag. <head> tag
may consist of many other tags. For example <title>, to put title of the
web site. As you can see that in out example that the title of web site is 'A
Simple Page'. Whatever we put in <title> tag, it will appear at the top
on browser. Different browsers may have different place for titles. There are
many other tags which go under <head>. I shall explain them later.
·
Everything displayed on the browser's white page
goes under <body> tag. Which may include, simple text, graphics, tables,
forms, movies etc. I sued two tags under <body>, <p> and
<h1>. <p> is for paragraph and <h1> is for heading.
@@@@@@@@@@@@========================= @@@@@@@@@@@@
Block quote
The code is very simple. It starts with
<blockquote> and ends with </blockquote>.
<html>
<head>
<title> Blockquotes </title>
</head>
<body>
<p>
Content
</p>
<blockquote>
"Content1/"
</blockquote>
<p>
Content2
</p>
</body>
</html>
·
Everything between <blockquote> in
indented and one line space is added at the beginning and at the end of this
tag.
·
Now lets go to very important tag <a>.
<a> is used to link to some location. There are two types of link tags.
Example Code Here:
<html>
<head><title>Newesteducation</title></head>
<body>
<h1>Links
Example</h>
<hr />
<p><a
href="http://newesteducation.blogspot.in/p/fundament-of-programing-language-c.html">Fundamentals of Programming Language "C"</a> |
<a
href="http://newesteducation.blogspot.in/p/database-management-system.html">Database Management System</a> |
</p>
</body>
</html>
·
First two links are internal. href in tag
<a> is one of the function or property of tag <a>. href is to
reference the link to some other location. In the first two links, I just used
the location of where I want user to go. For internal links, you need to specify
the location of the page within your web site you are linking to.
·
For external links, just write the complete URL
including "http://". Some web sites starts with "www" and
some don't. Make sure you try the link by yourself.
@@@@@@@@@@@@========================= @@@@@@@@@@@@
Add Graphic using HTML
Images/Graphics are very important in web designing. They
express and enhance web experience. Inserting images are very easy. Tag for
images is <img>. There are many attributes associated like alt, src,
height and width. align, border, hspace and vspace are deprecated, means they
cannot be used in html. You can only use them in CSS Style Sheet. Let me
explain the one which can be used in HTML.
alt: Is used to tag a picture. When you move
mouse pointer to a picture, some text show up under the pointer. alt does that.
src: The source of image where it is located
either from inside or outside.
height: You can set height of the image.
width: You can also set width of the image.
Now look at this
example below. Code to generate this is below the output.
<h2>Title</h2>
<img src="Image
Ling?600x448" alt="Title"
/>
<h3>Your Content</p>
The above code is self explanatory. You can use height
and width attributes to specify the height and width of the picture or at the
end of source file followed by? Width x height.
Example in this code:
<h2>Chand2</h2>
<img src="Image Ling?600x448"
alt="Chand2" />
<h3>Essay HTML Learning</p>
@@@@@@@@@@@@========================= @@@@@@@@@@@@
Add Tables
Tables are very useful. They can serve many purposes in
designing web page. In tables you can put text, graphics, forms etc. Starting
tag for table is <table> and ending is </table>. Table tag has many
attributes. I shall explain them later. There are four major tags under table
tag. They are <caption>, <tr>, <th> and <td>.
<caption> is used for caption of the table. <tr> is for table row.
<th> is for table heading. Headings are for each column of the table.
They are usually put at the top row of the table. The last one, <td> is
table data which are columns.
Lets start with a
simple table. Look at the output first and I shall explain the code.
<table border = "1">
<caption>
Main Title
</caption>
<tr>
<th
colspan="3">Table Title</th>
</tr>
<tr>
<th> First
Column Title </th>
<th>Second
Column Title</th>
<th>Third
Column Title</th>
</tr>
<tr>
<td>Name of Row1</td>
<td>Value1</td>
<td>Content1</td>
</tr>
<tr>
<td>Name
of Row2</td>
<td>Value2</td>
<td>Content2</td>
</tr>
<tr>
<td>Name
of Row3</td>
<td>Value3</td>
<td>Content3</td>
</tr>
</table>
Example in this
code:
| Account Details | ||
|---|---|---|
| Account Type | Rate | Length |
| Young Saver | 2% | 1 year |
| Smart | 3% | 2 years |
| Long Haul | 4.5% | 4 years |
Lets start with <table> tag. As every tag has starting and ending tag. border is set to "1". It can be "0" or higher number. With "0" you won't see border lines. Higher numbers will produce thick border.
<caption> is like a title of the table.
<tr> is for each row and for each row <td>
will put column(s) on that row. In next lesson you will learn that number of
columns can be different in rows. But this example shows same number of columns
for each row.
<th> is for the heading. It just bolds the text by
default.
<td> is the data for each row.
It wasn't that difficult. Was it?
@@@@@@@@@@@@========================= @@@@@@@@@@@@
Tables can be used
as two column text page.
<table cellspacing="50">
<tr>
<td>
Text Content column 1
</td>
<td>
Text
Content column 2
</td>
</tr>
</table>
Example in this
code:
| All Online Ebook All Subject with Example. | Download many type ebook, Free Download |
@@@@@@@@@@@@========================= @@@@@@@@@@@@
Cell Padding and
Cell Spacing
Cell Padding
is the amount of space between text and boundaries of a cell.
Cell Spacing
is the distance between two cells.
<h4>Without cellpadding or cellspacing:</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With cellpadding:</h4>
<table border="1"
cellpadding="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With cellpadding and cellspacing:</h4>
<table border="1" cellpadding="10"
cellspacing="15">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
Example in this
code:
Without cellpadding or cellspacing:
| First | Row |
| Second | Row |
With cellpadding:
| First | Row |
| Second | Row |
With cellpadding and cellspacing:
| First | Row |
| Second | Row |
@@@@@@@@@@@@========================= @@@@@@@@@@@@
Schedule
Schedule
Lets prepare a schedule using tables.
<table border = "border">
<caption>Main Title</caption>
<tr>
<th>Blank
Colum</th>
<th>
Column1 Title</th>
<th> Column2
Title </th>
<th> Column3
Title </th>
<th> Column4
Title </th>
<th> Column5
Title </th>
</tr>
<tr>
<th>First
Row Title</th>
<td>Value1</td>
<td
rowspan="4 Space">Value1</td>
<td
rowspan="4 Space">Value2</td>
<td
rowspan="2 Space">Value1</td>
<td
rowspan="4 Space">Value1</td>
</tr>
<tr>
<th>Second
Row Title </th>
<td>Value2</td>
</tr>
<tr>
<th>Third
Row Title </th>
<td
rowspan="2 Space">Value1</td>
<td
rowspan="2 Space">Value2</td>
</tr>
<tr>
>th>Fourth
Row Title </th>
</tr>
<tr>
<th>Fifth
Row Title </th>
<td
colspan="5 Space" align="center">Value3</td>
</tr>
</table>
Example in this
code:
| Mon | Tue | Wed | Thu | Fri | |
|---|---|---|---|---|---|
| Morning | Free | Free | Busy | Free | Free |
| Afternoon | Busy | ||||
| Evening | Free | Busy | |||
| Overnight | |||||
| Early AM |
@@@@@@@@@@@@========================= @@@@@@@@@@@@
Forms
You come across many forms on the web. They are very
useful in collecting data. In this lesson, I shall tell you how to display a
form on a web page and its attributes. How to send data collected from form is
separate topic. It involves any or all of these like Java Script, Data Base,
PHP and CGI.
<h2>Title of Form</h2>
<form method="GET" action="">
<p>Notice
<br>
<input
type="hidden" name="Name, email id, any ware" value="Name,
email id…">
<input
type="hidden" name="Subject" value="Subject of Form">
</p>
<strong>Name:</strong><input
name="Name" type="Password" size="Password size 25">
<br><br>
<input
type="radio" name="Title" value="First value">
First-Second Value
<input
type="radio" name="Title" value="Second Value">
Second-Third Value
<input
type="radio" name="Title" value="Third Value">
Third-Fourth Value
<input type="radio"
name="Title" value="Fourth Value"> Fourth up Value
<p></p>
<input
type="checkbox" name="groceries" value="Name1"
checked="checked"> Name1
<input
type="checkbox" name="groceries" value="Name2">
Name2
<input
type="checkbox" name="groceries" value="Name2">
Name3
<br><br>
<select
name="Title of 1 Drop-Down Field">
<option>Name1</option>
<option>Name2</option>
<option>Name3</option>
<option>name4</option>
</select>
<select
name="Title of 2 Drop-down field">
<option>Name1</option>
<optgroup
label="Names1 Title">
<option>Name2</option>
<option>Name3</option>
<option>Name4</option>
<option>Name5</option>
</optgroup>
<option>Name6</option>
<optgroup
label="Names2 Title">
<option>Name7</option>
<option>Name8</option>
<option>Name9</option>
<option>Name10</option>
</optgroup>
</select>
<p>Title of
Text Area<br>
<textarea
name="Title" rows="3" cols="40"> (Note)
</textarea>
</p>
<p>
<input
type="submit" value="Title of Button1"><input
type="reset" value=" Title of Button2">
<input
type="button" value=" Title of Button3">
</p>
</form>
Example in this
Code:
Feedback Form
In this example, I
have included all input types which can be used in a form. Let me explain them.
Form starts with <form> and ends at </form>.
There are many attributes associated with form tag. I used two of them. First;
Method and second action. Methods are two, Get and Post. Get doesn't show the
contents of form in URL after submission. Post does.
In action we tell what to do when the form is submitted.
Like store information in database, display some message on screen etc.
There are
basically five input types. Important: Each type must have unique name.
1. Text Line
2. Radio Button
3. Check Box
4. Drop-Down Menu Option
5. Large Text Area
1. Text Line:
It is used to input small information which needs only one line like Name,
City, Address, Age etc. There are couple of attributes associated with
<input> tag. Lets start with 'name'. we define name for each input field.
every data has to be distinguished so we use different name for each data. I
used 'Type' as password. This won't show the data on screen. It is used for password
fields. If you put 'Text' in type, it will show you the text you put. 'Size' is
the length of text field. Size 25 means that maximum 25 character can be put.
2. Radio Button:
It is type 'radio' of input, written as <input
type="radio">. Radio buttons
are used when ONLY ONE OPTION CAN BE SELECTED. The 'name' for all options are
same because they are of same category. We can assign different 'values' to
them. In our example our values are ages. Please note that when we close the
tag we still have to write something which will be displayed on web page. The
value is hidden to user. It will be sent to where ever we want to send the
information. 'checked="checked" is used to highlight or check some
value as default.
3. Check Box:
Check box is same as 'radio'. The only difference is the type. To use check
box, you will use 'type=check'.
4. Drop Down Menu
Option: This is different. Instead of <input>, we use <select>
for this. So, <select name="aname">. We define a name for this
category and put their options as <option>name1</option> and
<option>name2</option> ...... and close it with </select>. In
the second drop down menu option there is a tag <optfroup
name="aname">. This is used to put items/options into a group.
Like, soft drinks are under pop.
5. Large Text
Area: For large text input we use <textarea name="aname"
rows="5" cols="50">. We define name for our field,
number of rows and columns as how big that text box should be.
For 'Submit' and
'Reset' buttons there are special types reserved. For submit it is 'submit'
and to reset the form it is 'reset'. 'value' is the text which will be
displayed on the button. For any other button, you can use
type="button" and its value.
So, This was how you can put several fields on the form.
As I said that this lesson will teach you how to put form on the page. To send
the form to an e-mail or to database or store the information as a text file,
you need to learn JavaScript, PHP, CGI and or MySQL(or any web data base).
@@@@@@@@@@@@========================= @@@@@@@@@@@@
Please HTML prectical upload
ReplyDeleteB.c.a sem2
Delete