20CS212 WEB TECHNOLOGIES
COURSE OUTCOMES
On successful completion of the course, the students will be able to
HTML& CSS: 12
Markup languages: HTML - Evolution of HTML & its Version - Basic HTML
Tags. HTML5: Forms - New InputTypes - Input and Data List Elements and
Auto Complete Attributes.CSS: CSS3 - Introduction to Cascading Style -Types
of Stylesheets: Inline Styles, Embedded Style Sheets, Linking External Style
Sheets - Issues in styling-Positioning Elements: Static, Relative, Fixed and
Absolute Positioning - Z-index, Span, Box Model and Text Flow -Media Types
and Media Queries - Drop-Down Menus.
CLIENT-SIDE PROGRAMMING: 15
JavaScript:History and Versions - Variables and Data Types - Statements -
Operators - Literals - Functions - Objects- Built-in Objects:Array, Date, Math,
and String -Regular Expressions - Exceptions - Getting JavaScript into a
WebPage - DOM - DOM Events - Restful API - Angular JS: Single page
applications - MVC Pattern - Input andValidation - Responsive web design
SERVER-SIDE PROGRAMMING: 13
Node js: Node.js Introduction - Modules - Callback/ Events - NPM -
File System - Buffers - Streams - ListenerEmitter Pattern - React JS:
React Introduction - ReactJS WeBApplication Page - React JS tool
chain - Renderelement - ES6 class definition - JSX in React js -
Component state and input handling - React Props - State -Lifecycle
- Events - Forms - Styling with React.
CONNECTING WITH DATABASES: 5
Node. js & NOSQL database: Connecting NO SQL database server
from Node.js.
Total Periods : 45
TEXT BOOKS
1. Jeffrey C. Jackson, "Web Technologies--A Computer Science Perspective", Pearson Education, 2009.
2. Shelley Powers, "Learning Node", 2nd Edition,Publisher(s): O'Reilly Media, Inc, 2016. ISBN:
9781491943120
3. Alex Banks, Eve Porcello, "Learning React", 2e, O'Reilly Media, Inc, 2020.
4. Bates, "Developing Web Applications", Wiley, 2006.
REFERENCES
1. ShyamSeshadri, Brad Green, "AngularJS: Up and Running: Enhanced Productivity", Kindle Edition,
2014.
2. D Crockford, "JavaScript: The Good Parts", Released May 2008 Publisher(s): O'Reilly Media,
Inc.ISBN:
9780596517748
3. Robert. W. Sebesta, "Programming the World Wide Web", 4th Edition, Pearson Education, 2008.
4. Marty Hall and Larry Brown, "Core Web Programming", 2nd Edition, Volume I and II, Pearson
Education, 2009.
5. Danny Goodman, "Dynamic HTML: The Definitive Reference: A
Comprehensive Resource for XHTML,
CSS, DOM, JavaScript", O'reilly publications, 3e, 2007
WEB REFERNCES
1. https://web.stanford.edu/class/cs142/lectures.html
2. www.w3schools.com
3. https://reactjs.org
MODULE-1 HTML&
CSS:
Scripting vs Programming
Scripting languages are translated and cannot be converted
into an executable file, whereas programming languages are
generally compiled and created to executable the file .
EXAMPLES
What is HTML?
HTML is an acronym which stands for Hyper Text
Markup Language which is used for creating web
pages and web applications.
Cont..
Hyper Text: HyperText simply means "Text within Text." A text has a link within
it, is a hypertext. Whenever you click on a link which brings you to a new
webpage, you have clicked on a hypertext. HyperText is a way to link two or more
web pages (HTML documents) with each other.
Markup language: A markup language is a computer language that is used to
apply layout and formatting conventions to a text document. Markup language
makes text more interactive and dynamic. It can turn text into images, tables,
links, etc.
Web Page: A web page is a document which is commonly written in HTML and
translated by a web browser. A web page can be identified by entering an URL. A
Web page can be of the static or dynamic type. With the help of HTML only, we
can create static web pages.
Structure of HTML
Example
<!DOCTYPE>
<html>
<head>
<title>Web page title</title>
</head>
<body>
<h1>Write Your First Heading</h1>
<p>Write Your First Paragraph.</p>
</body>
</html>
Evolution of HTML &
its Version
1991- Tim Berners-Lee invents HTML 1.0
1993- HTML 1.0 is released. Not many developers are creating websites at this
time.
1995- HTML 2.0 is published. This contains the features of HTML 1.0 plus
new features. This remained the standard markup language for designing and
creating websites until 1997.
1997- HTML 3.0 was invented. Here, Dave Raggett introduced a fresh draft on
HTML, which improved new features of HTML and gave more powerful
characteristics for webmasters in designing websites. Unfortunately, the
powerful features slowed down the browser in applying further improvements.
1999- The widely-used HTML 4.0 comes out. It is very successful.
2014- HTML 5.0 is released and used worldwide. It is said to be the extended
version of HTML 4.01 which was published in 2012.
HTML DOCUMENTS
All HTML documents begin with <! DOCTYPE html>.
The HTML document begins with <html> and ends with
</html>.
HTML code that is written inside the <head> and </head>
tags of an HTML document are not visible in the web
browser.
Only the content inside the <body> and </body> tags are
displayed in the browser
<!DOCTYPE>
The <!DOCTYPE> Declaration
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.
The <!DOCTYPE> declaration for HTML5 is:
<!DOCTYPE html>
Basic HTML Tags
HTML tag which is usually written as <html>…. </html>
or <HTML>…. </HTML> is the only tag that is a must for
writing HTML pages.
HTML tag has both an opening <html> and a closing tag
</html>.
The closing of tags is done by a forward slash (/) at the
very start of the tag name.
Tags with opening and closing tags are called container
tags, and tags with only one opening tag and no closing tag
are called empty tags.
<head> and <title>
The <head> tag is another important tag used to add the
header in HTML.
It is used to give various additional information about the
web page along with description and title to your page,
which gets displayed in the title bar or acts as an indicator of
what information to use or on which page you are currently
in.
The <title> Tag is written within this <head> tag.
EXAMPLE
<!DOCTYPE html>
<html>
<head>
<title>This is page title.</title>
</head>
</html>
<body>
<body> tag is used to give the body, i.e., the visible section of the HTML
Document.
<!DOCTYPE html>
<html>
<head>
<title>This is page title.</title>
</head>
<body>
<h2>This is page heading.</h2>
<p>This is my first <strong>paragraph text</strong>.</p>
</body>
</html>
HTML Headings
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least
important heading:
HTML Paragraphs
HTML paragraphs are defined with the <p> tag:
HTML Elements
The HTML element is everything from the start tag to the end tag:
<tagname>Content goes here...</tagname>
Examples of some HTML elements:
<h1>My First Heading</h1>
<p>My first paragraph.</p>
Nested HTML Elements
HTML elements can be nested (this means that elements can contain
other elements).
All HTML documents consist of nested HTML elements.
The following example contains four HTML elements (<html>, <body>,
<h1> and <p>):
Example
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
HTML Attributes
All HTML elements can have attributes
Attributes provide additional information about elements
Attributes are always specified in the start tag
Attributes usually come in name/value pairs
like: name="value"
<element_name attribute_name = "value"> ....
</element_name>
The href Attribute
The <a> tag defines a hyperlink. The href attribute specifies
the URL of the page the link goes to:
Example
<a href="https://www.w3schools.com">Visit
W3Schools</a>
<img>
HTML images are defined with the <img> tag.
The source file (src), alternative text (alt), width,
and height are provided as attributes:
Example
<img src="w3schools.jpg" alt="W3Schools.com"
width="104" height="142">
The src Attribute
The <img> tag is used to embed an image in an HTML
page. The src attribute specifies the path to the image to be
displayed:
Example
<img src="img_girl.jpg">
The width and height Attributes
The <img> tag should also contain the width and height
attributes, which specifies the width and height of the image
(in pixels):
Example
<img src="img_girl.jpg" width="500" height="600">
The alt Attribute
The required alt attribute for the <img> tag specifies an
alternate text for an image, if the image for some reason
cannot be displayed.
Example
<img src="img_girl.jpg" alt="Girl with a jacket">
HTML Display
Large or small screens, and resized windows will create
different results.
With HTML, you cannot change the display by adding extra
spaces or extra lines in your HTML code.
The browser will automatically remove any extra spaces and
lines when the page is displayed:
The style Attribute
The style attribute is used to add styles to an
element, such as color, font, size, and more.
The HTML style attribute has the following syntax:
<tagname style="property:value;">
Example
<p style="color:red;">This is a red paragraph.</p>
Background Color
The CSS background-color property defines the background
color for an HTML element.
Example
Set the background color for a page to powderblue:
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
Set background color for two different elements:
<body>
<h1 style="background-color:powderblue;">This is a
heading</h1>
<p style="background-color:tomato;">This is a
paragraph.</p>
</body>
HTML Text Formatting
Formatting elements were designed to display special types of text:
<b> - Bold text
<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
<small> - Smaller text
<del> - Deleted text
<ins> - Inserted text
<sub> - Subscript text
<sup> - Superscript text
HTML Comments
You can add comments to your HTML source by using the following
syntax:
<!-- Write your comments here -->
Notice that there is an exclamation point (!) in the start tag, but not in the
end tag.
