EXPERIMENT 1
AIM : A )To create a website using HTML that includes all tags including form.
Theory : Html is a markup language for describing web documents.
● HTML stands for Hyper Text Markup Language.
● A markup language is a set of markup tags.
● HTML documents are described by HTML tags.
HTML TAGS:
HTML tags are keywords (tag names) surrounded by angle brackets.
<tagname>content goes here…</tagname>
● HTML tags normally come in pair lke<p>and</p>
● The first tag in a pair is the start tag,the second tag is the end tag.
● The end tag is written like the start tag,but with the forword slash inserted before the tag
name
HEAD TAG :
The text between <head>and</head> provides a title for the document.
TITLE TAG :
The text between <body>and </body> describe the visible page content.
BODY TAG:
The text between <body> and </body> describe the visible page content.
HTML Headings :
Headings are defined with the <h1> to <h6> tags. <h1> defines the most important heading.<h6>
Defines the least important heading.
<h1>Heading</h1>
<h2>Heading</h2>
<h3>Heading</h3>
<h4>Heading</h4>
<h5>Heading</h5>
<h6>Heading 6</h6>
HTML Paragraphs :
The HTML <p> element defines a paragraph.
A paragraph always starts on a new line, and browsers automatically add some white space (a
margin) before and after a paragraph.
Example
<p>This is web computing first practical.</p>
HTML Formatting Elements :
HTML define special elements for defining text with a special meaning. HTML uses elements
like <b> and <i> for formatting output,like bold or italic text.Formatting elements were designed
to display special types of text :
● <b> - Bold Text
● <strong> - Important text
● <i> - Italic Text
● <em>- Emphasized text
● <small> - Marked text
● <del> - Delete text
● <ins> - inserted text
● <sub> - Subscript text
HTML COMMENT TAG : You can comments to your HTML source by using the following
syntax:
<!-- Write your comments here -->
Example :<! This is Comment!>
<p> This Is paragraph</p>
TML COLOR TAG : This tag is used to change the body color.
Example :<body bgcolor=”red”>hello</body>
HTML LINKS - Hyperlinks:
A hyperlink is a reference (an address) to a resource on the web.
Example: <a href="http://www.w3schools.com/">Visit W3Schools!</a>
The href Attribute
The href attribute defines the link "address".
The target Attribute
The target attribute defines where the linked document will be opened.
FRAMES
With frames, you can display more than one HTML document in the same browser window. Each
HTML document is called a frame, and each frame is independent of the others.
The Frameset Tag
The <frameset> tag defines how to divide the window into frames.
The <frame> tag defines what HTML document to put into each frame.
Example:
<frameset cols="25%, 75 %">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
</frameset>
<frameset> Defines a set of frames
<frame> Defines a sub window (a frame)
TABLES
Tables are defined with the <table> tag. A table is divided into rows(with the <tr>
tag), and each row is divided into data cells (with the <td> tag). The letters td stands
for "table data," which is the content of a data cell.
Example:
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
Tags and their Description:
<Table> Defines a table
<th> Defines a table header
<tr> Defines a table row
<td> Defines a table cell
Form Tags :
The <form> Tag
A form is essentially a container for inputs.
The following code shows the basic structure of a form:
<form>
The input elements goes here
</form>
There are two attributes of the form tag that we should be familiar with:
● The action attribute points to the back-end of our web page, which handles the form submission
● The method attribute is used to upload the data. The most commonly used attributes are the GET and
POST methods
The <input> Element
The HTML <input> is a fundamental form element. It can be displayed in many ways, depending
on its attributes.
There are several types of inputs. Some of the important ones include:
There are two attributes of the form tag that we should be familiar with:
● The action attribute points to the back-end of our web page, which handles the form submission
● The method attribute is used to upload the data. The most commonly used attributes are the GET and
POST methods
Input Type Text
The <input type =“text”> defines a single-line text input field.
This is how the HTML code above will be displayed in the browser:
Input Type Password
The <input type="password"> defines a password field.
The <input> Element
The HTML <input> is a fundamental form element. It can be displayed in many ways, depending
on its attributes.
There are several types of inputs. Some of the important ones include:
Input Type Text
The <input type =“text”> defines a single-line text input field.
Input Type Password
The <input type="password"> defines a password field.
Input Type Submit
The <input type="submit"> defines a button for submitting form data to a server page.
Multiple-Line Text Input Control
This is used when the user has to enter details that may exceed a single sentenceInput Type Radio
The <input type=”radio”> defines a radio button. The radio button is used when only a single option needs
to be selected out of several offered options.
Input Type Checkbox
The <input type="checkbox"> defines a checkbox. Checkboxes are used when one (or more than one)
option is required to be selected.
The <label> Element: A label can be assigned with a <label> element. The label element makes
the browser user-friendly and provides a focus when you click on a label tag.
Experiment 2
Develop and demonstrate the usage of inline, internal and external style sheet
using CSS
Aim: Design a web page using CSS which includes the following:
1) Use different font styles
2) Control the repetition of image with background-repeat and no-repeat property
3) Define style for links as a: link, a: active, a: hover, a: visited
4) Add customized cursors for links.
Theory:
CSS: CSS stands for Cascading Style Sheets. CSS describes how HTML elements are to be
displayed on screen. Mainly used to design web page. It is a Client-side language. Insert CSS in
web page:
There are three ways of inserting CSS:
● External style sheet
● ii. Internal style
● iii. Inline style
CSS Syntax
CSS Important Property
● background
● icolor
● padding
● margin
● border
● width
● height
● font-size
● font-weight
● text-align
