Web Technologies

Html and CSS

2000 West Park Drive
Westborough MA 01581 USA
Phone: 508 389 7300 Fax: 508 366 9901
The entire contents of this document are subject to copyright with all rights reserved. All copyrightable text and graphics, the selection, arrangement and presentation
of all information and the overall design of the document are the sole and exclusive property of Virtusa.
Copyright 2014 Virtusa Corporation. All rights reserved

Module Overview
Purpose:
The following module hierarchy presents the technical modules required to build the basic IT skills and
acquaints you with relevant technology basics.
The current module HTML CSS (highlighted in red) underwrites Basics of Web Page Development
using HTML & CSS.

Modules

OS &
UNIX

SE UML

SQL

SQL1

Java
Basics

PLSQL

SQL2

PLSQL 1

PLSQL2

Java
Basics1

* Recommended duration to complete HTML CSS module: 16 hours

2

Adv. JAVA

Java
Basics2

HTML
CSS

Java
Script

Module Objectives
By the end of this module, you will be able to:

Define World Wide Web (WWW) and Web pages

Define HTML and Develop web pages using HTML elements
Navigate among the HTML pages
Use a Form and Input Elements in HTML page
Use Internal/External style sheet and maintain a consistent style,
layout for the HTML page

World Wide Web (WWW)

Define World Wide Web (WWW) and Web Pages
World Wide Web (WWW) :

World Wide Web (WWW or W3 commonly known as the Web) is

a system of interlinked hypertext documents that are accessed via
the Internet. With a web browser, one can view web pages that may
contain text, images, videos, other multimedia and navigate between
them via hyperlinks

Web Page :

A web page is a web document that is suitable for the World Wide
Web and the web browser.
A web browser displays a web page on a monitor or mobile device. The
web page is what displays, but the term also refers to a computer file,
usually written in HTML or comparable markup language. Web
browsers coordinate the various web resource elements for the written
web page, such as style sheets, scripts and images, to present the web
page.

Reference

http://en.wikipedia.org/wiki/World_Wide_Web
http://en.wikipedia.org/wiki/Web_page

*image source:http://informaticausc2011.files.wordpress.com/2011/09/2-01.jpg
Image source: http://www.quackit.com/pix/make-your-own-website/example1.gif

HTML
Define HTML and Develop web pages using HTML elements
HTML:

HTML is a markup language for describing web documents (web

pages)
HTML stands for Hyper Text Markup Language
A markup language is a set of markup tags
HTML documents are described by HTML tags
Each HTML tag describes different document content

HTML Elements:

HTML elements are written with a start tag, with an end tag, with
the content in between:
Syntax:
<tagname>content</tagname>
The HTML element is everything from the start tag to the end tag

Reference

*image source:http://eloquentjavascript.net/1st_edition/img/html.png

http://www.w3schools.com/html/html_intro.asp

HTML Links
Navigate among the HTML pages using HTML Links
</a> tag :

Links are found in nearly all web pages. Links allow users to click their
way from page to page
HTML links are hyperlinks
A hyperlink is an element, a text, or an image that you can click on,
and jump to another document
In HTML, links are defined with the <a> tag

<a href=ListBook.html>Click
here to view the list of
library books</a>

Click here to view the

list of library books

Reference

http://www.w3schools.com/html/html_links.asp

Form and Input Elements

Use a Form and Input Elements in HTML page
Form Element in HTML page :

HTML forms are used to collect user input

The <form> element defines an HTML form
HTML forms contain form elements
Form elements are different types of input elements, checkboxes,
radio buttons, submit buttons, and more

The <input> Element :

The <input> element is the most important form element

The <input> element has many variations, depending on
the type attribute

Reference

http://www.w3schools.com/html/html_forms.asp

*image source:http://www.javascript-coder.com/wp-content/uploads/2010/07/html-form-sample1-300x200.png

CSS
Applying styles to web pages using CSS
CSS:
CSS stands for Cascading Style Sheets
Styles define how to display HTML elements
Styles were added to HTML 4.0 to solve a problem
External Style Sheets can save a lot of work
External Style Sheets are stored in CSS files

Three Ways to Insert CSS:

There are three ways of inserting a style sheet:
External style sheet
Internal style sheet
Inline style

Reference

h1 {
color: orange;
text-align: center;
}
p{
font-family: "Times New
Roman";
font-size: 20px;
}

http://www.w3schools.com/css/css_intro.asp

*image source:http://www.inspirefirst.com/wp-content/uploads/2012/03/17.css-menu-example.gif

body {
background-color: #d0e4fe;
}

Additional References
To explore more on the subject, refer the below links and books:
Links:
http://www.w3schools.com/html/

http://www.tutorialspoint.com/html/
http://htmldog.com/guides/html/beginner/

Books:
HTML & CSS The Complete Reference
Brilliant HTML and CSS

Self Check?
Instructions to write Self Evaluation Sheet:
For self evaluation, document all the solution statements, programs and the descriptions in
the Module Self Evaluation Sheet and share it with your mentor.
Open the below excel sheet, refer HTML CSS sheet, write down the solutions for all
questions, save a local copy in your machine and share it.

10

Lab Assignment
Refer Assignment Document for this module to proceed with Lab Assignment.
Do submit the Solutions for the given assignment and refer the Participant
guide for submission procedure.

11

Queries?

Do document all your questions related to the module HTML CSS in Q & A
Sheet, and share it with your Program Manager/Mentor for clarifications and
solution statements.

12

Module Summary
Now that you have completed this module, you will be
able to:
Create HTML pages with HTML elements.
Create HTML pages using Cascaded Styles Sheets to align you HTML
pages.

13

Thank You

Thanks!

14