1.1. HTML Elements

1.1.
HTML Elements
What is HTML?
To understand HTML, let us first see the meaning of a Markup language.
A markup language is a modern system for annotating a document in a way that is syntactically distinguishable
from the text.
See example as indicated below:
The blue text shown in an example for Markup to indicate the content enclosed in it.
HTML or Hyper Text Markup Language is the main markup language for creating web pages and informations
that can be displayed in a web browser. It is a markup language that web browsers use to interpret and
compose text, images and other elements into visual or audible web pages.
Now it is simple. Isn't it? We may summarize the knowledge of HTML as below
 HTML stands for Hyper Text Markup Language
 HTML is a markup language
 A markup language is a set of markup tags
 The tags describe document content
 HTML documents contain HTML tags and plain text
 HTML documents are also called web pages
A HTML document when composed of the markup elements is saved as a file with extension “.html” or “.htm”.
The rendering of the document is done on any web browser such as Internet Explorer, Google Chrome, etc.,.
HTML Elements
HTML is written in the form of HTML elements consisting of tags enclosed in angle brackets (like <html>).
HTML tags most commonly come in pairs like <h1> and </h1>, although some tags represent empty elements
and so are unpaired, for example <img>. The first tag in a pair is the start tag, and the second tag is the end
tag (they are also called opening tags and closing tags respectively). In between these tags web designers can
add text, tags, comments and other types of text-based content. Most HTML elements have attributes.
The browser does not display the HTML tags, but uses the tags to interpret the content of the page. The
purpose of a web browser is to read HTML documents and compose them into visible web pages.
Let us understand each of the HTML element in detail:
DOCTYPE
The <!DOCTYPE> declaration helps the browser to display a web page correctly.
There are many different documents on the web, and a browser can only display HTML page 100% correctly if
it knows the HTML type and version used
Below is a HTML document showing the <!DOCTYPE> declaration in the first line.
HTML
The <html> element defines the whole HTML document. The element has a start tag <html> and an end tag
</html>.
BODY
The <body> element defines the body of the HTML document. The element has a start tag <body> and an end
tag </body>.
Headings
HTML headings are defined using <h1> to <h6> tags
Output of the above code may be viewed using a web browser as below:
Various other elements in HTML
The other basic elements that are widely used in HTML are tabulated below
Sample code and its output:

HTML Head elements
The elements of the head element and its associated nested tags are listed below in the table
The sample HTML document consisting of these head elements is shown here with associated output screen
HTML formatting elements
The HTML formatting elements are tabulated below:
Sample code for some of the formatting tags are given below followed by output page.
HTML Attributes
Attributes in HTML tag/element provide additional information about the element.
HTML Links
The HTML <a> tag defines a hyperlink.
A hyperlink (or link) is a word, group of words, or image that you click on to navigate to another document.
When you move the cursor hover a link in a Web page, the cursor looks like pointed-hand instead of usual
arrow . The most important attribute of the <a> element is the href attribute, which indicates the link's
destination.
By default, links appear as follows in all browsers:
 An unvisited link is underlined and blue
 A visited link is underlined and purple
 An active link is underlined and red
Samples for defining HTML link are shown here:
HTML Images
In HTML, images are defined with the <img> tag. The <img> tag is empty, which mean it contains only the
attributes and no closing tag. Some of the attributes of the image tag are:
 src – Indicates the source or the URL of the image that is to be displayed
 alt – alternate name or text for the image( tooltip)
 height, width – attributes describing the size
Below is an example (image is visible if it is placed in same directory where we placed html page.Image file is
named as smiley.gif) and followed by output:
HTML Division
The <div> tag defines a division or a section in an HTML document. The <div> tag is used to group block-
elements to apply styles. The attributes are class and style.
Note: The <div> element is very often used to group HTML elements, to layout a web page.
A simple example to show the <div> usage:
HTML LIST
HTML List is of three types. unordered list <UL> (ie., unnumbered/bullets) ,ordered (ie., numbered) list <OL>
and definition <DL> (I.e define the terms like in glossary).These elements are block elements.
Unordered Lists:
An unordered list is typically a bulleted list of items. This is probably the most common type of list on the Web.
The <ul> tag is opening an unordered list and </ul> is closing tag. Between these tags are placed list items
with <li> tag as shown in the below example. The type attribute determines the form of bullet which precedes
the list. Allowed values are disc, square, circle.
Output
 red
 yellow
 blue
Ordered Lists:
An ordered list is formatted exactly the same as an unordered list, except that <OL> tags are used instead of
<UL>. In an ordered list, sequential numbers are generated automatically, as shown in the below example.
The type attribute determines the sequencing number precedes the list . Valid values are 1, a, A, i, I.
Output
1. red
2. yellow
3. blue
Definition Lists:
This contains a series of terms and definitions and typically used in a glossary.
The example is shown below:
Output
1.2. HTML Table and Forms
A table is created using <table>…</table> tag . A table consists of rows and columns.
Attributes of the <table> tag
Attributes Description
Takes a numeric value denoting the thickness of the border around
border
the table.
cellspacing Takes a numeric value denoting space between the cells.
Takes a numeric value denoting how much padding (edge of the
cellpadding
cell and the content in the cell).
For example
Table rows
Table rows are created using the <tr>…</tr> tag, must place inside the <table> tag.
For example
Table cells
Table cells are created using the <td>…</td> tag , must place inside <tr> tag. Use an opening <td> tag and its
closing tag </td> for every cell in the table.
Adding content to the table

Now that we have a structure for our table, we can add some content to it. The content of a table is placed
inside the cell ( <td> Content </td>).
Output
Also you can add heading, caption to the table, span multiple rows & columns, align the content.
Empty cells
Sometimes you need to have an empty content for a table cell. Place character entity inside a table cell
as shown in below example.
Output
Heading / Column Heading

You can display headings in a table using the <th> tag. A heading is an emphasized cell in a table. Use the
<th> tag just like the <td> tag.
Output
Caption
A caption is added to a table using the <caption> tag ,placed right below the <table> tag before the first <tr>
tag.
Output
Aligning table content

You can align table content using the align attribute inside the <td> tag.
Attributes Description
left to align content to the left
center to align content to the center
right to align content to the right

Just as you can set the alignment of table content, you can set the alignment of the table itself. This is done the
same way as setting the alignment of table content.
Spanning multiple/rows columns
Table column spanning

Why should all rows have the same number of columns in a table? There may be situations where you need a
cell or cells to span more than one column. This is achieved using the colspan attribute of the <td> tag. The
colspan attribute takes a numeric value indicating how many columns to span.
Output
Table row spanning

You can make a cell span more than one row using the rowspan attribute of the <td> tag. The rowspan
attribute takes a numeric value indicating how many rows to span.
Output
HTML FORMS
HTML Forms are required when you want to collect some data from the user and process it.
For example registration information: Name, address, date of birth, contact number, mail-id etc.
The <form> tag is used to create HTML form:
A form will take input from the user using different form controls and then the input/data is passed to server for
processing.
 Users interact with forms through “form controls”.
 Each control has both an initial value and a current value.
 A control's initial value is specified using ”value” attribute.
 The control's current value is first set to the initial value. Thereafter, the control's current value may be
modified through user interaction and scripts.
 A control's initial value does not change. Thus, when a form is reset, each control's current value is
reset to its initial value.
HTML defines the following control types:
Button
HTML provide three types of buttons:
 Submit button: Users click the submit button to process data after filling out a form. The submit button
uses the input element with a type attribute of either submit or image. The submit attribute value is the
most common as it is simple to use and provides the most control. The image attribute value is used
specifically to set an image as a submit button, however with the use of CSS the need to use an image
has greatly diminished.
To determine the verbiage to be used within the button, the value attribute is used. Using CSS properties
such as background, border-radius, box-shadow, and others, the button is styled to any specific desire.
Example for submit button:
 Reset button: When clicked, a reset button reset all controls to their initial values.
<input type=”reset” value=”reset”> is used to create reset button.

 Push button: Push button have no default behavior. Each push button may have scripts associated
with the element's events attributes. When an event occurs (e.g., the user clicks the button, release it,
etc.), the associated script is executed.
e.g:<button name=”edit” value=”edit”> is used to create button.
Check box
 Check box are on/off switches toggled by the user.
 The default value of checkbox control is off, but when user selects a checkbox, the control becomes
on.
 “checked” attribute is used when we want a default value to be selected.
 Check box allow users to select several values/options from the set. The input element is used to
create a checkbox control.
Example:
Output:
Radio button
 Radio button are also on/off switches toggled by the user.
 They are similar to check boxes, but only one option can be selected from the set.
 e.g : <input type=”radio” name=”color” value=”red”><input type=”radio” name=”color” value=”blue”>

can be used to create a radio button control with two values as red and blue.
Example:
How the HTML code above looks in a browser:
Drop Down Menus
 Drop Down Menus are used when we want to provide a facility for choosing an option from a set of
available options.
 The select element is used to create a drop down menu, and option element is used to define options
of that drop down menu.
 e.g: <select> <option> red </option> <option> blue </option> </select> can be used to create a menu
with two options as red and blue.
Text input
HTML provides two types of controls that allow users to input text. This may include data containing passages
of text content, password, telephone number, and so forth.
 The input element type=”text” creates a single-line input control and
 textarea element creates a multi-line input control.
Text Fields
One of the primary element used to obtain textual data from the user. The input element uses the type attribute
text, which denotes a single line text input.
Along with type attribute, as best practice name the control using name attribute and is submitted along with
the input/data to the server.
Example
Textarea
Another element used to capture text based data is the textarea . The textarea element differs from textinput is
larger passage of text spanning multiple columns. The textarea has start and end tag which can wrap plain text.
Since the textarea element accepts one type of value, the type attribute doesn’t apply here, however the name
attribute is still in effect.
File Input
To allow users to add a file to a form, much like that of attaching a file to an email, type=”file” attribute is used.
The file input is most commonly seen to upload pictures or files to social networks or applications.
Unfortunately, stylizing the file input is a tough task with CSS. Each browser has its own default rendering of
how the input should look and doesn’t provide much control to override the default styling. JavaScript and other
solutions can be built to allow for this control type allows the user to select files so that contents are uploaded .
The <input type=”file”> element is used to select file and upload.
Dropdown Lists:
 Drop down lists are perfect way to provide users with a long list of options in a usable manner.
Displaying all states in the country on a page with radio buttons would create a cluttered and daunting
list. Dropdown list provide the perfect venue for a long list of options.
 To create a dropdown list ,<select> and <option> elements are used. The <select> element wrap all of
the different options marked up using <option> element. Then you can apply the name attribute to the
<select> element.
 <option> element wrap the text. and value attribute, specific to each option.
 As with “checked” attribute of radio button and checkbox, dropdown list uses “selected” attribute, which
is set as preselect option.
Multiple Selections
Using the standard dropdown list , has “multiple” attribute, allows user to select multiple from the list.
Additionally, using the “selected” attribute on more than one <option> element ,all are preselected multiple
options.
The height and width of the <select> element is controlled using CSS and should be adjusted appropriately to
allow for multiple selections. It may also be worth mentioning to users that to choose
multiple options they will need to hold down the shift key ( sequence selection) or control key (random
selection), while clicking to make their selections.
Form Buttons
After a user inputs the requested information, buttons allow them to put that information into action. Most
commonly, a submit button is used to process the data. A reset button is often used to clear data.
Submit Button
Users click the submit button to process data after filling out a form. The submit button uses the input element
with a type attribute of either submit or image. The submit attribute value is the most common as it is simple to
use and provides the most control. The image attribute value is used specifically to set an image as a submit
button, however with the use of CSS the need to use an image has greatly diminished.
To determine the verbiage to be used within the button, the value attribute is used. Using CSS properties such
as background, border-radius, box-shadow, and others, the button can then be styled to any specific desire.
Reset Button
To take the complete opposite action from submitting a form, users may also reset a form using the reset
button. The reset button code works just like that of the submit button, however it uses the reset value for the
type attribute.
Reset buttons are becoming less and less popular because they offer a very strong action, often undesired by
both websites and users. Users may spend quite a bit of time filling out a form only to click the reset button
accidentally thinking it was the submit button. Chances of a user filling out the form again thereafter are small.
Before using a reset button think of any potential consequences.
Outside all other previously stated choices the input element does have a few other use cases. Two of which
include passing hidden data and attaching filings during form processing.
Hidden Input
Hidden inputs provide a way to pass data to the server without displaying it to users. Hidden inputs are typically
used for tracking codes, keys, or other information not pertinent to the users but helpful to the website overall.
This information is not displayed on the page, however it could be seen by viewing the source code of a page.
That said, it should not be used for sensitive or secure information.
To create a hidden input you use the hidden value for the type attribute. Additionally, you pass along the
appropriate name and value.
Organizing Form Elements

Knowing how to capture data with inputs is half the battle. Organizing form elements and controls into a usable
manner is the other half. Forms are not worth much unless users understand what is asked and how to provide
the requested information. Using labels, fieldset and legends we can better organize form controls and guide
users to completing the task.
Label
Labels provide captions, or headings, for form elements. Created using the <label> element, label should
include descriptive text, which describes the input or control it pertains to. Labels should include “for” attribute.
The value of “for” attribute should be the same as the value of “id” attribute within the same form element the
label corresponds to. Matching up “for” and “id” values ties the two elements together, allowing users to click on
the label to get focused within the proper form element.
When using labels with radio buttons or checkboxes the input element can be wrapped within the label
element. Doing so allows omission of “for” and “id” attributes.
Fieldset
Fieldset groups form controls and labels into organized sections. Much like a div or other structural element,
the fieldset is a block level element that wraps related elements, however specifically within a form for better
organization. Fieldset by default also include a border outline that can be modified using CSS.

1.3. CSS (Cascading Style Sheets)

Introduction
CSS (Cascading Style Sheets) define how HTML tags are displayed or formatted in the browser. Styles can be
applied to HTML tags to format the look and feel. By defining CSS based styling, the styling/formatting code
can be separated from HTML code.
Styles are normally defined in an external file called style sheets which has “.css” extension. The stylesheets
are then imported into the HTML file. CSS works by defining rules how a selector (HTML tag) can be displayed.
CSS Syntax
A CSS rule set consists of a selector and a declaration block. The general syntax of a CSS rule set looks like
this:
Selector {property:value; property:value; . . .}
Selector – points to the HTML element that needs to be formatted
Property – points to the specific HTML element's attribute that is being formatted
Value – style values given to the property that is used for formatting
More than one property/value of the HTML element can be specified in the CSS rule set. The different sets of
properties/value pairs are separated by a semi-colon. To improve the readability the property:value pairs can
be written on separate lines.
p{color:blue; text-align:left;}
The rule set above formats the color of the text to blue inside a HTML <p> tag and aligns the text to left.
p
{
color:red;
font-style:italic;
font-family:”arial”;
}
The rule set above formatted the color of text to red inside a HTML <p> tag, and formats the text to italics and
sets to Arial font.
Grouping Selectors
In style sheets there are often elements with same styling. To minimize code the selectors can be grouped. To
group selectors, separate each selector with a comma.
Objective: Group selectors to apply same styling to multiple HTML elements

More about CSS Selectors
The selectors can be used to find all or specific HTML elements and apply styling to a single HTML element or
to more than one or the entire HTML elements at once.
Id selector
The Id selector uses “id” attribute of the HTML tag to find the specific HTML element. The id should be a unique
in an HTML page. Using the unique id then you can find a single HTML element and apply styling.
In order to use the id selector, first the HTML element is given a unique id. The id can be a character, string or
a combination of characters and numbers. The id should not start with a number. Then to find the element
using the id write hash character followed by the id of the element.
#p1,h1
{
text-align: left;
color:red;
}
The rule set above find the HTML para and heading elements with the specified id values and apply the styling.
Class selector
The class selector uses “class” attribute of the HTML tag to find the HTML elements. Unlike “id” selector “class”
is generally not given a unique value. Thus the “class” attribute can be used to apply styling to more than one
HTML element that have the same value for the class attribute.
In order to use the class selector, first the HTML element is given a class name. The name of the class can be
a character, string or a combination of characters and numbers. The class name cannot start with a number.
Then to find the element using the class name write a period character followed by the class name.
p.center, tr.center
{
text-align: center;
color:red;
}
The rule set above finds all the HTML paragraph and table row elements with class=”center” and applies the
styling.
A class selector is created free of tag name, in which all the tags have the same class name are all styled
similarly.
.right
{
text-align:right;
color:blue;
font-family:”calibri”;
}
The id selector can be applied to one , unique element compared to the class selector which can be applied to
several different elements.
Objective: To apply style using id and class attributes.
'.' in front of each tag defines a class and corresponding class is mentioned in the element used in HTML
page.
We can use '#' to define style for id and give the corresponding id for the element in HTML page. Id for each
element in HTML page is always unique. No two elements in the HTML file should have the same id.
Output
Element selector
The element selector selects HTML elements based on the element tag. When styling is applied based on the
element name, all elements that have the same name will be applied with the same styling.
p
{
text-align: center;
color: red;
}
For example the rule set above will format all the <p> elements in the HTML document with the styling
mentioned in the rule set.
Objective: Use of tags to apply style in stylesheets
The styling is applied by using the HTML element name. In this case the style is applied using the style is
applied to the HTML element h3.
Output

1.4. Inserting CSS into HTML
There are 3 ways of inserting style sheets:
External style sheet
Internal style sheet
Inline style
External style sheet

External style sheet is ideal when applying style to many pages. The styling code is maintained in a single file
externally. The look of an entire website can be changed with changes done to just this single file.
HTML page linked to an external style sheet using <link> tag. The <link> tag is defined inside <head> tag.
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
The import rule can also be used to import an external CSS file.
<head>
<style type="text/css">
@import url(mystyle.css);
</style>
</head>
The external style sheet can be written in any text editor. The file should contain only the styling code and
should not contain any HTML tags. The style sheet saved with .css extension.
Objective: To apply style using an external CSS file and include it in the HTML page.
Create a CSS file named style.css (or any other name of your choice) and write the code shown in the image
below.
'.' in front of each tag defines a class and corresponding class is mentioned in the element used in HTML
page.
style.css
Create HTML file in the same folder where the CSS file is created. HTML file should contain the following
code. The style sheet is imported in the head section using the HTML link tag.
Output
Internal style sheet
Internal style sheets are used when applying unique styles to single documents. Internal styles are written
inside <head> tags using <style> tag.
<head>
<style>
.left
{
color:blue;
text-align:left;
font-family:"calibri";
}
</style>
</head>
Objective: To apply internal style to div tags, so that two div tags are displayed side by side. The style applied
is present inside style tags in the head section of HTML file.
Output

Inline styles
Inline styles are written as part of the HTML tag itself. The style attribute of the HTML tag is used and can
contain any css property. This way of styling should be used only sparingly and when the other two ways of
inserting styles is not feasible since it is least flexible.
<p style=”color:blue; text-alight:left”> This is a paragraph </p>
Objective: To apply styles at the HTML element/tag level or inline styling.
Html:
Output
Overriding the Styles
Multiple styles, if applied to same element will reflect in following order:
1. Style attribute applied at element/tag level will have top most preference.
2. Style applied in the head section using style tag of HTML page will be preferred next.
3. External style will have the last preference.
What if I forcefully want to give preference to a style defined for an element in the external style sheet? Code
shown below helps us to achieve it.
Objective:Overriding the styles applied

Output
1.5. Different Tools To Create UI

Notepad++
Notepad++ is a free source code editor and Notepad replacement that supports several programming
languages.
Download Notepad++:
To download notepad++, open web browser and enter the following URL
http://notepad-plus-plus.org/download/v5.9.4.html
Wait till the entire page gets loaded. Though the latest version of Notepad++ is available we recommend you to
use version 5.9.4. Click Notepad++ v5.9.4 zip package.
You download and place the archive (zip) at any location of the hard disk of your system. Then the archive
needs to be extracted using any of the archiving tools provided by your OS. The installation of notepad++ is
done.
Open Notepad++
Open notepad++ from the Notepad++ installation directory. The Notepad++ installation directory will have a
notepad++ application as highlighted below.
Demo Of HTML in Notepad++
We shall now write a sample HTML code. Select HTML from the Language Tab
Write HTML code in the editor area.

If you observe the code, all the HTML tags are colored in blue and comments in green. This is an advantage
with Notepad++. So we can clearly make out in case of any typing mistake.
Save the file with .html/.htm type and file name can be anything of your choice. Let us name it MyFirstHTML
To execute the saved HTML file, you can follow two ways:
1. Open from saved location
Now your HTML file is saved and if you open the location where it is saved, the icon of the file would be your
default browser icon as following:
Double click the file. The file is opened with your default browser.
2. Launch from Notepad++
a) Select Run from the Menu Bar and click on Launch in IE/Chrome/Firefox/Safari. Note that you need to save
the file before executing it.
Demo of CSS in Notepad++
Save the program and execute it in the same way as we did for HTML and JavaScript.
Refer the below link which would help you debug your web pages opened with Internet Explorer:
http://msdn.microsoft.com/library/gg589507(VS.85).aspx

1.1. HTML Elements

Uploaded by

Copyright:

Available Formats

1.1. HTML Elements

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

1.1. HTML Elements

Uploaded by

Copyright:

Available Formats

1.1.

 HTML stands for Hyper Text Markup Language

 HTML is a markup language

 A markup language is a set of markup tags

 The tags describe document content

 HTML documents contain HTML tags and plain text

 HTML documents are also called web pages

Sample code and its output:

Attributes in HTML tag/element provide additional information about the element.

 An unvisited link is underlined and blue

 A visited link is underlined and purple

 An active link is underlined and red

Samples for defining HTML link are shown here:

 alt – alternate name or text for the image( tooltip)

 height, width – attributes describing the size

Attributes of the <table> tag

Adding content to the table

Heading / Column Heading

Aligning table content

Table column spanning

Table row spanning

 Users interact with forms through “form controls”.

 Each control has both an initial value and a current value.

 A control's initial value is specified using ”value” attribute.

HTML defines the following control types:

Example for submit button:

<input type=”reset” value=”reset”> is used to create reset button.

 Check box are on/off switches toggled by the user.

 “checked” attribute is used when we want a default value to be selected.

 Radio button are also on/off switches toggled by the user.

 e.g : <input type=”radio” name=”color” value=”red”><input type=”radio” name=”color” value=”blue”>

Drop Down Menus

 The input element type=”text” creates a single-line input control and

 textarea element creates a multi-line input control.

The <input type=”file”> element is used to select file and upload.

Organizing Form Elements

1.3. CSS (Cascading Style Sheets)

Objective: Group selectors to apply same styling to multiple HTML elements

External style sheet

Objective: To apply styles at the HTML element/tag level or inline styling.

Overriding the Styles

Multiple styles, if applied to same element will reflect in following order:

3. External style will have the last preference.

Objective:Overriding the styles applied

1.5. Different Tools To Create UI

Write HTML code in the editor area.

1. Open from saved location

2. Launch from Notepad++

You might also like