Scribd
Upload
51 views

HTML Examples

The document provides information on basic HTML tags and elements for creating simple web pages. It explains common tags such as <html>, <head>, <title>, <body>, <h1>, <p>, <a>, <form>, <input>, <button>, and others. It gives examples of how to use these tags to add headings, paragraphs, links, forms, and more. It also provides brief descriptions of tags and their attributes.

Uploaded by

mithilesh bidkar
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
51 views

HTML Examples

The document provides information on basic HTML tags and elements for creating simple web pages. It explains common tags such as <html>, <head>, <title>, <body>, <h1>, <p>, <a>, <form>, <input>, <button>, and others. It gives examples of how to use these tags to add headings, paragraphs, links, forms, and more. It also provides brief descriptions of tags and their attributes.

Uploaded by

mithilesh bidkar
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 11

Simple HTML page example….

<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

Type above code in Notepad and save it as example1.html


Brows the example1.html saved file in any browser

The <!DOCTYPE> declaration represents the document type, and helps browsers to display web
pages correctly. It must only appear once, at the top of the page (before any HTML tags).
The <!DOCTYPE> declaration is not case sensitive.

Every Html page should start with <html> and the page should end with </html>
<body> Tag defines body part of the Html page

<h1> is used for Heading in the page and should end with </h1> tag
You can try

<h1>This is heading 1</h1>


<h2>This is heading 2</h2>
<h3>This is heading 3</h3>

<p> is used for Paragraph and should end with </p>

You can try

<p>This is a paragraph. </p>


<p>This is another paragraph. </p>

You can try


<p>This is a <br> paragraph with a line break.</p>
Where <br> tag defines a line break

The above page can be written as

<!DOCTYPE html>
<html>
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
<body style="background-color:powderblue;"> defines background

Simple Html page with font attributes


<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>
<font size="2" color="#1c87c9">Blue text</font>
</p>
<p>
<font size="3" color="red">Red text, font size increased.</font>
</p>
<p>
<font face="arial" color="#8ebf42">Green text, typeface changed.</font>
</p>
</body>
</html>

Type above code in Notepad and save it as example2.html


Brows the example2.html saved file in any browser

The <font> tag comes in pairs. The content is written between the opening (<font>) and closing
(</font>) tags.
Simple Html page with Link attributes

<!DOCTYPE html>
<html>
<body>
<h2>HTML Links</h2>
<p>HTML links are defined with the a tag:</p>
<a href="PATH OF EXAMPLE1.HTML">This is a link</a>
</body>
</html>
Example of html with input

<!DOCTYPE html>
<html>
<body>
<h2>HTML Input </h2>
<form action="/action_page.php">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit">
</form>
</body>
</html>

The <input> tag specifies an input field where the user can enter data.
The <input> element is the most important form element.
The <input> element can be displayed in several ways, depending on the type attribute.

Typically different input types are as follows:


<input type="button">
<input type="checkbox">
<input type="password">
<input type="radio">
<input type="submit">
Example of html with Button and script
<!DOCTYPE html>
<html>
<body>
<p>Click the button to create an Input Button with a "Click me" text.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var x = document.createElement("INPUT");
x.setAttribute("type", "button");
x.setAttribute("value", "Click me");
document.body.appendChild(x);
}
</script>
</body>
</html>
Simple Checkbox Example
<!DOCTYPE html>
<html><body>
<h1>Show Checkboxes</h1>
<form action="/action_page.php">
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label><br><br>
<input type="submit" value="Submit">
</form>
</body></html>

Simple Html Radio Button example


<!DOCTYPE html>
<html>
<body>

<h1>Display Radio Buttons</h1>

<form action="/action_page.php">
<p>Please select your favorite Web language:</p>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>

<br>

<p>Please select your age:</p>


<input type="radio" id="age1" name="age" value="30">
<label for="age1">0 - 30</label><br>
<input type="radio" id="age2" name="age" value="60">
<label for="age2">31 - 60</label><br>
<input type="radio" id="age3" name="age" value="100">
<label for="age3">61 - 100</label><br><br>
<input type="submit" value="Submit">
</form>

</body>
</html>
In the above example the <input type="radio"> defines a radio button.
Radio buttons are normally presented in radio groups (a collection of radio buttons describing a
set of related options). Only one radio button in a group can be selected at the same time.
Note: The radio group must have share the same name (the value of the name attribute) to be
treated as a group. Once the radio group is created, selecting any radio button in that group
automatically deselects any other selected radio button in the same group. You can have as many
radio groups on a page as you want, as long as each group has its own name.
Note: The value attribute defines the unique value associated with each radio button. The value
is not shown to the user, but is the value that is sent to the server on "submit" to identify which
radio button that was selected.
The Phases of Web Site Development
 Planning:
Setting goals, specifying content, organizing content,
and setting the user interface to navigate content
 Implementing:
Creating content, implementing navigation and the
user interface, and coding the site, which may include
HTML, programming, and Database development
 Testing:
User, browser, and system testing
 Maintenance:
Maintaining and updating the site, questioning old
goals, and returning to the planning stage
HTML Documents and Tags
 Paired Tags:
The <B> tag is a paired tag. The <B> tag with its
companion tag </B>. This causes the text contained
between them to be rendered in bold.
 Singular Tags:
This is the singular tag or stand-alone tag.
<BR> tag will insert a line break. This tag does not
require any companion tag.
 The Structure of HTML Document
<! DOCTYPE HTML PUBLIC “html version”>
<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
……Other supplementary information goes here….
</HEAD>

<BODY>
….Marked-up text goes here………..
</BODY>
</HTML>

 Every HTML document starts with <HTML> tag and ends with
</HTML>.

 <HTML> element encloses the actual document. It contains


two primary sections, the head and the body, enclosed by the
<HEAD> and <BODY> elements, respectively.

 The head can contain identifying and other supplementary


information about the document, or meta-information. The head
always contains the document’s title, enclosed by the <TITLE>
element. The body contains the actual document content and
the HTML markup used to structure the document.

COMMONLY USED HTML TAGS


Document Head: <HEAD> </HEAD>
Information placed in this section required for the inner workings of the document
and has nothing to do with the content of the document. With the exception of
information contained within the <TITLE> </TITLE> tags, all information placed
within the <HEAD> </HEAD> tags is not displayed in the browser. The HTML
tags used to indicate the start and end of the head section are:
<HEAD>. . . . <! TITLE><! HEAD>
Document Body: <BODY> </BODY>
The tags used to indicate the start and end of the main body of textual information
are:
<BODY> </BODY>
Page defaults like background color, text color, font size, font weight and so on can
be specified as attributes of the <BODY> tag. The attributes that the <BODY> tag
takes are:
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.
BACKGROUND:
Specifies the name of the Gif file that will be used as the background of the
document. This Gif tiles up across the page to give a background.
TEXT:
Changes the body text color from its default value to the color specified with
this attribute.
Example:
<BODY BACKGROUND= “starfield.gif” TEXT= red>

TITLES AND FOOTERS:


Title: <TITLE>... </TITLE>
A web page could have a title that describes what the page is about without
being too wordy. This can be achieved by using the TITLE tag. Text
included between the <TITLE>... </TITLE> tag shows up in the “title bar of
the browser window.
Syntax: <TITLE>... </TITLE>
Footer: <ADDRESS> </ADDRESS>
Just as a title can be placed in the title bar of the browser window, some
information is commonly placed at the foot of the web page. For example
Copyright information, contact details of the creator of the Web page and so
on are the type of information traditionally placed at the foot of the web
page. The HTML tags are:
<ADDRESS>. . . </ADDRESS>
Example:
<HEAD><TITLE>this is the title</TITLE></HEAD>
<BODY>
……………….
<ADDRESS>this is the footer </ADDRESS> </BODY>

LINKING DOCUMENTS:

HTML allows linking to other HTML documents as well as images.


Clicking on a section of text or an image in one page will open an entire web
page or an image. The text or an image that provides such linkages is called
Hypertext, a Hyperlink or Hotspot.
The browser distinguishes Hyperlinks from normal text. Every Hyperlink
appears blue in color:
• the default color setting in a browser for Hyperlink text or image
• the color can be set dynamically via an HTML program if required.
Syntax:
<A href = “details.htm>Visit my Home Page</A>
IMAGES AS HYPERLINKS:
Example:
<A HRef=”details.htm”><IMG Src=”photo.gif’></A>
Here, the picture photo.gif acts as a hyperlink, and navigates to a file
details.htm.

You might also like