HEADINGS

Headings are defined with the

to

tags.

defines the largest heading.

defines the smallest heading.

This is a heading

This is a heading

This is a heading

This is a heading

This is a heading

This is a heading

HTML automatically adds an extra blank line before and after a heading.

THE ANCHOR TAG AND THE HREF ATTRIBUTE

HTML uses the (anchor) tag to create a link to another document. An anchor can point

Text to be displayed

The tag is used to create an anchor to link, the href attribute is used to address the

Visit EEE 111

The target attribute

With the target attribute, you can define where the linked document will be opened. The line

below will open the document in a new browser window:

Visit EEE 111

The anchor tag and the name attribute

The name attribute is used to create a named anchor. When using named anchors we can

create links that can jump directly into a specific section on a page, instead of letting the user

scroll around to find what he/she is looking for. Below is the syntax of a named anchor:

Text to be displayed

The name attribute is used to create a named anchor. The name of the anchor can be any text

you care to use.

TABLES

HTML Links - Syntax

The HTML tag defines a hyperlink. It has the following syntax:

link text

The most important attribute of the element is the href attribute, which indicates the

To use an image as a link, just put the tag inside the tag:

WHAT IS CSS?

Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to

simplify the process of making web pages presentable.

CSS handles the look and feel part of a web page. Using CSS, you can control the color of

the text, the style of fonts, the spacing between paragraphs, how columns are sized and laid

out, what background images or colors are used, layout designs, and variations in display for

different devices and screen sizes as well as a variety of other effects.

Three Ways to Insert CSS

There are three ways of inserting a style sheet:

 External CSS

 Internal CSS

 Inline CSS

External CSS

With an external style sheet, you can change the look of an entire website by changing just

one file!

Each HTML page must include a reference to the external style sheet file inside the

element, inside the head section.

Example:

This is a heading

This is a paragraph.

An external style sheet can be written in any text editor, and must be saved with a .css

extension.

The external .css file should not contain any HTML tags.

Here is how the "mystyle.css" file looks:

body {

background-color: lightblue;

h1 {

color: navy;

margin-left: 20px;

Internal CSS

An internal style sheet may be used if one single HTML page has a unique style.

The internal style is defined inside the

This is a heading

This is a paragraph.

Assignment No. 3

Title: XML and CSS.

Problem Statement: Design the XML document to store the information of the employees

of any business organization and demonstrate the use of:

a) DTD

b) XML Schema

And display the content in (e.g. Tabular format) by using CSS/XSL.

Objectives: Students will be able to,

1. Design static webpage using XML.
2. Apply CSS to XML pages.
3. Write DTD and XML schema.

Software and Hardware requirements:

Software: Notepad/Visual Studio cod and Any Browser.

Theory:

1. XML:

XML stands for Extensible Markup Language. It is nothing but the text-based markup

language which is derived from Standard Generalized Markup Language (SGML).

XML tags identify the data and are used to store and organize the data, rather than

specifying how to display it like HTML tags, which are used to display the data. XML

is not going to replace HTML in the near future, but it introduces new possibilities by

adopting many successful features of HTML.

There are three important characteristics of XML that make it useful in a variety of

systems and solutions –

 XML is extensible − XML allows you to create your own self-descriptive tags, or

language, that suits your application.

 XML carries the data, does not present it − XML allows you to store the data

irrespective of how it will be presented.

XML is a public standard − XML was developed by an organization called the

World Wide Web Consortium (W3C) and is available as an open standard.

2. CSS:

CSS stands for Cascading Style Sheet.

It is nothing, but design language intended to simplify the process of making web

pages presentable.CSS handles the feel and look part of a web page. By using CSS,

one can control the color of text, style of fonts, spacing between paragraphs, layout

designs. CSS is easy to learn, easy to understand and it provides powerful control on

presentation of an HTML document.

Advantages of CSS:

It saves the time, Pages load faster, Easy maintenance, Superior styles to HTML,

Multiple Device Compatibility, Global web standards, Offline Browsing, Platform

Independence.

CSS3 Modules: CSS3 Modules are having old CSS specifications as well as extension

features.

Box Model

Selectors

Background

Border

Image Values and Replaced Content

Text Effects

3. XML Schema :

An XML Schema describes the structure of an XML document. The XML Schema

language is also referred to as XML Schema Definition (XSD). The purpose of an

XML Schema is to define the legal building blocks of an XML document:

o the elements and attributes that can appear in a document

o the number of (and order of) child elements

o data types for elements and attributes

o default and fixed values for elements and attribute

eg:

<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">

<xs:element name="note">

<xs:complexType>

<xs:sequence>

<xs:element name="to" type="xs:string"/>

<xs:element name="from" type="xs:string"/>

<xs:element name="heading" type="xs:string"/>

<xs:element name="body" type="xs:string"/>

</xs:sequence>

</xs:complexType>

</xs:element>

</xs:schema>

Assignment No. 4

Title: Application in Java Script.

Problem Statement: Implement any web application in Java Script (e.g. Calculator) using

following:

a) Design UI of application using HTML, CSS etc.

b) Include Java script validation

c) Use of prompt and alert window using Java Script

Objectives: Students will be able to:

1. Design an application using HTML, CSS, and Java Script.
2. Understand the concept of prompt and alert window in java script.

Software and Hardware requirements:

Software: Notepad/Visual Studio code and Any Browser.

Theory:

JavaScript

JavaScript is a very powerful client-side scripting language. JavaScript is used mainly for

enhancing the interaction of a user with the webpage. In other words, you can make your

webpage more lively and interactive, with the help of JavaScript. JavaScript is also being

used widely in game development and Mobile application development.

How to Run JavaScript?

Being a scripting language, JavaScript cannot run on its own. In fact, the browser is

responsible for running JavaScript code. When a user requests an HTML page with

JavaScript in it, the script is sent to the browser and it is up to the browser to execute it. The

main advantage of JavaScript is that all modern web browsers support JavaScript. So, you

do not have to worry whether your site visitor uses Internet Explorer, Google Chrome,

Firefox or any other browser. JavaScript will be supported. Also, JavaScript runs on any

operating system including Windows, Linux or Mac.

Data validation is the process of ensuring that user input is clean, correct, and useful.

Typical validation tasks include:

 Has the user filled in all required fields?

 Has the user entered a valid date?

 Has the user entered text in a numeric field?

Most often, the purpose of data validation is to ensure correct user input. Validation can be

defined by many different methods, and deployed in many different ways.

Server side validation is performed by a web server, after input has been sent to the server.

Client side validation is performed by a web browser, before input is sent to a web server.

The getElementById Method: The most common way to access an HTML element is to

use the id of the element.

In the next example the getElementById method used id="demo" to find the element.

The innerHTML Property

The easiest way to get the content of an element is by using the innerHTML property.

The innerHTML property is useful for getting or replacing the content of HTML elements.

In the example above, getElementById is a method, while innerHTML is a property.

Form Validation for Empty Inputs

Step 1) Add HTML:

Example:

Step 2) Add JavaScript:

If an input field (fname) is empty, this function alerts a message, and returns false, to prevent

the form from being submitted:

Example:

function validateForm() {

var x = document.forms["myForm"]["fname"].value;

if (x == "") {

alert("Name must be filled out");

The window.prompt() method can be written without the window prefix.

Example:

person = prompt("Please enter your name", "Harry Potter");

text=null;

if (person == null || person == "") {

text = "User cancelled the prompt.";

} else {

text = "Hello " + person + "! How are you today?";

DESIGN/EXECUTION STEPS:

Following steps are used to Create and Execute Application in JavaScript.

1. Start Notepad or any Text editor.
2. Create a calculator.html file with HTML code for calculator in it.
3. Create a .css extension file with CSS styling code in it.
4. Create a .js extension file with JavaScript validation code in it.
5. Link the CSS file in the HTML file using any inserting css file methods.
6. Link the JavaScript file in the HTML file under the