Web designing
What is Internet?
Internet is a
global computer network providing a variety of information and communication
facilities, consisting of interconnected network using standardized
communication protocols.
Internet History
The history of the
internet being with the development of electronic computer in the 1950s.initial
concepts of packet networking originated in several computer sciences laboratories
in the United States,
Great Britain, and France. The US department of defence awarded contacts as early as
the 1960s for packet network systems, including the development of the ARPANET.
The first message was send over the ARPANET from computer science Professor Leonard
Kleinrock’s laboratory at University California, Los Angeles.
HTML
Introduction
HTML stands for Hyper Text Markup Language. HTML is an extended version of SGML (Standard Generalized Markup Language) and was designed by Tim Burners Lee in 1990. With HTML, you can create your own Web site. HTML is the core technology in which all Web pages are written.
What is HTML?
The name HTML stands for Hypertext Markup Language. HTML is not a programming language, it is a markup language. A markup language is a collection of markup tags. HTML uses markup tags to describe Web pages. The term’s hypertext portion refers to the cross-links, also called hyperlinks, between Web pages. The term’s markup language portion refers to the commands that format the Web pages that the users see. Web pages are also called HTML documents.
About file
Extensions
Extension of the HTML file is .html or .htm. This type
of file is called HTML file.
Before Start of HTML
URL: the
full form of URL is Uniform Recourse Locater. It displays the address of the current page. Ex.(WWW.google.com)
WWW: World
wide web is represented as web. WWW is the graphical hypertext information
system . It is dynamic interactive and global in nature.
Web page: it is a complicated pattern of HTML pages teat are
closely connected to each other.
Browser: it is a program that lets
you look at or read information on WWW.
Website: it is a collection of one or more web pages or web
documents.
Web Server: t is a computer on the internet containing one or more
websites.
Hyperlink: Every
web page has a large number of links. These links
are called the hyperlinks or hypertext links.
HTML Tags
Tags are
instruction that is embedded directly into the text of the document. HTML
markup tags are usually called HTML tags or just tags. By convention all HTML
tags begin with an open angle bracket (<) and end with a `close angle bracket (>). HTML tags are of
two types.
Paired Tags
A tag is said to
be a paired tag if it, along with a comparison tag, flanks the text. For
example the <B> tag is a paired tag. The <B> tag with its companion
tag </B> causes the text contained between them to be rendered in bold.
The effect of other paired tags is applied only to the text they contain.
In paired tags, the first
tag (<B>) is often called the opening tag or start tag and the second tag (</B>) is called the closing
tag or end tag.
Singular Tags
The second type
of tag is the singular or stand-alone
tag. A stand-alone tag does not have a companion tag. For example <BR> or
<BR/> tag will insert a line break. This tag does not require any
companion tag
The <html> element
The <html> element defines the entire
HTML document.
· The element has a start tag <html>
and an end tag </html>.
·
The
element content is another HTML element (the body).
HTML Headings
HTML headings are defined with the <h1> to <h6> tags. The lower the number, the larger the heading size.
Example:
1
<html>
<title>Heading
tags </title>
<body>
<h1>This
is Heading 1</h1>
<h2>Heading
2 is Smaller</h2>
<h3>Heading
3 is Smaller Still</h3>
<h4>Hello…</h4>
<h5>How
are you?</h5>
<h6>I
am fine.</h6>
</body>
</html>
HTML Paragraphs
`HTML paragraphs
are defined with the <p> tag. Most browsers automatically put a line
break and space after a </p> tag.
Example: 2
<html>
<title>paragraph
tags</title>
<body>
<p>This
is my first paragraph</p>
<p>This
is my second paragraph</p>
</body>
</html>
HTML Rules (Lines)
The
<hr/> or <hr> tag is used to create a horizontal rule (line) across
the browser page. Rules are often used to separate sections of a document to
show a visual break.
Example: 3
<html>
<title>Horizontal
rule</title>
<body>
<p>The
hr tag defines a horizontal rule:</p>
<hr>
<p>This
is a paragraph</p>
<hr>
<p>This
is a paragraph</p>
<hr
/>
<p>This
is a paragraph</p>
</body>
</html>
BGCOLOR
Changes the default
background color to whatever color is specified with this tag. The user can
specify a color by name or its equivalent hexadecimal number
Example: 4
<html>
<title>background color tags </title>
<body>
<body bgcolor=”#ff00ff”>
<p>… paragraph</p>
</body>
</html>
Specifies the name of the Gif, Jpg, Bmp file that will be used as the
background of the document.
<html>
<title>background image</title>
<body>
<body background=” C:\Users\ritu\Downloads\click_counter12.jsp.jpg”
text=”red”>
</body>
</html>
TEXT Styles
Example: 5
<html>
<title>Text
style tags</title>
<b>Sentence
in Bold effect</b>
<I>
Sentence in Italic effect</I>
<em>Sentence
in italic effect</em>
<U>
Sentence in Underline effect</U>
<STRIKE>Sentence
in Strike through effect</strike>
a<SUP>2</SUP>b
H<<SUB>2</SUB>O
<big>Sentence
in Big effect</big>
<small>Sentence
in Small effect</small>
<pre>Sentence
in Preformatted effect</pre>
<q>Sentence
in double quote</q>
</html>
Font Size and
Color
All text specified within
the tags <FONT> and </FONT> will appear in the font, size and color
as specification as attributes of the tag<FONT>.
Example: 6
<html>
<title>font tags</title>
<body>
<FONT
Face=”Book Antiqua” Size=6 Color=RED>
Welcome to Learn Font Style
</FONT>
<font face=”time new roman” size=5 color=blue>
Welcome to the NTCE computer classes.
</font>
</body>
</html>
Image gallery
Example: 7
<html>
<title>image gallery </title>
<body>
<img src=”12522hgfdfjh.jpg” width=20% height=220 border=3>
<img src=”12522hgfdfjh.jpg” width=20% height=220 border=3>
<img src=”12522hgfdfjh.jpg” width=20% height=220 border=3>
</body>
</html>
Example: 8
<html>
<title>alignment description
</title>
<body>
<p align=left><img src=”12522hgfdfjh.jpg” width=20% height=220
border=3> </p>
<p align=right><img src=”12522hgfdfjh.jpg” width=20% height=220
border=3> </p>
<p align= center ><img src=”12522hgfdfjh.jpg” width=20%
height=220 border=3>
</body>
</html>
Example: 9
<html>
<title>Hyperlink
</title>
<body>
<a href=”12522hgfdfjh.jpg”>
Hari sir</a></br>
<a href =”12522hgfdfjh.jpg”
>Hello..</a>
</body>
</html>
Example: 10
<html>
<title>www.Google.com</title>
<center><b><u>
<font color=blue size=7 face=”times new roman”>G
<font color=green>o
<font color=orange>o
<font color=blue>g
<font color=green>l
<font color=yellow>e</b></u><br>
<input type=”text”><button>search</button>
</center>
</html>
Example: 11
<html>
<title>marquee tags</title>
<body>
<marquee>
<img src=”hello..143love.jpg” width=20% height=220 border=4>
</marquee>
<marquee
bgcolor=”#ff0085”>NTCE computer classes
</marquee>
</body>
</html>
Example: 12
<html>
<title>marquee style tags</title>
<body>
<marquee bgcolor=pink direction=right behavior=alternate scrollamount=25 loop=5 >
<img src=”hello..143love.jpg” width=20% height=220 border=4>
</marquee>
<marquee bgcolor=”#ff0085”
direction=up scrollamount=20>
<center>NTCE computer classes</center>
</marquee>
</body>
</html>
Direction= left, right, up, Down
Scrollamount= Speed of the marquee
Behavior= Alternate, Scroll, Slide
Example: 13
<html>
<title>order list</title>
<ol type=”1”>Numbers
<li>apple</li>
<li>Banana</li>
<li>orange</li>
<li>papaya</li></ol>
<ol type=”A”>Alphabetic
<li>apple</li>
<li>Banana</li>
<li>orange</li>
<li>papaya</li></ol>
<ol type=”I”>Roman Numbers
<li>apple</li>
<li>Banana</li>
<li>orange</li>
<li>papaya</li></ol>
<ol type=”a”> Small
alphabetic
<li>apple</li>
<li>Banana</li>
<li>orange</li>
<li>papaya</li></ol>
</html>
Example: 14
<html>
<title>unorder list</title>
<oul type=”disc”>Numbers
<li>apple</li>
<li>Banana</li>
<li>orange</li>
<li>papaya</li></ul>
<ul type=”square”>Alphabetic
<li>apple</li>
<li>Banana</li>
<li>orange</li>
<li>papaya</li></ul>
<ul type=”circle”>Roman Numbers
<li>apple</li>
<li>Banana</li>
<li>orange</li>
<li>papaya</li></ul>
</html>
Example:15
<html>
<title>Table no.1</title>
<table border=4>
<tr>
<th>Name</th>
<th>Address</th>
<th>Contact no.</th>
</tr>
<tr>
<td>Aman</td>
<td>Plot no.241 Kailash nagar pandesara in suart</td>
<td>9856352568</td>
</tr>
</table>
</html>
Example:16
<html>
<title>Table no.2</title>
<table border=4 bordercolor=green cellspacing=25 cellpadding=15 >
<tr>
<th>Name</th>
<th>Address</th>
<th>Contact no.</th></tr>
<tr>
<td>Aman</td>
<td>Plot no.241 Kailash nagar pandesara in suart</td>
<td>9856352568</td></tr>
</table>
</html>
Example:17
<html>
<title>Table no.3</title>
<table border=4 bordercolor=green >
<tr bgcolor=pink>
<th>Name</th>
<th>Address</th>
<th colspan=2>Contact no.</th>
</tr>
<tr>
<td>Aman</td>
<td>Plot no.241 Kailash nagar pandesara in suart</td>
<td>9856352568</td>
<td>9555636633</td>
</tr>
</table>
</html>
Example:18
<html>
<title>Table no.4</title>
<table border=4 bordercolor=green >
<tr bgcolor=pink>
<th>Name</th>
<td>Aman</td>
</tr>
<tr>
<th>Address</th>
<td>Plot no.241 Kailash nagar pandesara in suart</td>
</tr>
<tr>
<th rowspan=2>Contact no.</th>
<td>9856352568</td>
</tr>
<tr>
<td>9555636633</td>
</tr>
</table>
</html>
Example:19
<html>
<title>fieldset
of page </title>
<fieldset>
<legend>Add
your Profile:..</legend>
<p>Type your
profile</p>
</fieldset>
</html>
Example: 20
</html>
<title>iframe</title>
<body>
<body color=green>
<iframe
src=”aunt420hgfsjdf.jpg”
width=40% height=220>
<iframe
src=”aunt420hgfsjdf.jpg”
width=40% height=220>
<iframe
src=”aunt420hgfsjdf.jpg”
width=40% height=220>
</body>
</html>
Example:21
<html>
<title>Text boxes & textarea</title>
<body>
<b>Name.:</b><input type=”text” name=t1 size=20><br>
<b>Father Name.:</b><input type=”text” name=t1 size=40><br>
<b>Address.:</b><textarea rows=2 cols=20></textarea><br>
</body>
</html>
Example: 22
<html>
<title>radio button</title>
<body>
<b>Gander.:</b>
<input type=radio
name=g1 value=male>Male
<input type=radio
name=g1 value=female>Female
</body>
</html>
Example: 23
<html>
<title>Checkboxs & Selects options</title>
<b>Subject:.</b><br>
<input type=checkbox>Hindi<br>
<input type=checkbox>English<br>
<input type=checkbox>Maths<br>
<input type=checkbox>Science<br>
<b>Citys</b>
<select>
<option> </option>
<option>Surat</option>
<option>Nausari</option>
<option>jamnagar</option>
</select>
</html>
Example:24
<html>
<title>Button tags & password</title>
<b>Password.:</b>
<input type=password
maxlength=10><br>
<input type=button
value=submit>
<input type=button
value=cancel>
<input type=button
value=reset>
</html>
Example:25
<html>
<title>form</title>
<body>
<b>Name.:</b><input type=”text” name=t1 size=20><br>
<b>Father Name.:</b><input type=”text” name=t1 size=40><br>
<b>Address.:</b><textarea rows=2 cols=20></textarea><br>
<b>Gander.:</b>
<input type=radio
name=g1 value=male>Male
<input type=radio
name=g1
value=female>Female<br>
<b>Subject:.</b><br>
<input type=checkbox>Hindi<br>
<input type=checkbox>English<br>
<input type=checkbox>Maths<br>
<input type=checkbox>Science<br>
<b>Citys</b>
<select>
<option> </option>
<option>Surat</option>
<option>Nausari</option>
<option>jamnagar</option>
</select><br>
<b>Password.:</b>
<input type=password
maxlength=10><br>
<input type=button
value=submit>
<input type=button
value=cancel>
<input type=button
value=reset>
</body>
</html>
No comments:
Post a Comment