HTML (Hyper Text Markup Language)

What is HTML? • HyperText Markup Language, the coding language used to create hypertext documents for the World Wide Web. In HTML, a block of text can be surrounded with tags that indicate how it should appear (for example, in bold face or italics). Also, in HTML a word, a block of text, or an image can be linked to another file on the Web. HTML files are viewed with a World Wide Web browser.

What is an HTML File? • An HTML file is a text file containing small markup tags • The markup tags tell the Web browser how to display the page • An HTML file must have an htm or html file extension • An HTML file can be created using a simple text editor

Basic HTML Tags Tag Description Defines an HTML document

Welcome to SCS DAVV

The different course run at SCS are
M.Tech.(CS)
M.Sc. (IT/CS)
MCA
MBA(CM)

HTML tags Cont… • Renders as teletype or mono spaced text • Renders as italic text • Renders as bold text • Renders as bigger text • <small> Renders as smaller text

HTML tags Cont… • Body tag Attributes changes the background color of body. The color name is equivalent to hexadecimal no. Specifies the background of document. changes the body text color.

HTML tags Cont… • Types of lists. Unordered list(Bullets) Unordered list starts with

and ends with

tag. Each list item starts with

tag. Eg.

• M.Tech(cs)
• M.Sc(it/cs)
• MBA(cm)

HTML tags Cont… • Ordered list (numbering). This list starts with

and ends with

tag. Each list item start with

tag. And type used to controls the numbering scheme to be used. For eg. Type=“1” will give counting numbers(1,2,……) Type=“A” will give Upper case letter(A,B,……)

5. India
6. America
7. china

HTML tags Cont… • Definition list This list is used to define a term start with

and ends with

. It have two parts (i) definition term and (ii) definition description.

SCS

School of Computer Science

SoEx

School of Electronics.

HTML tags Cont… • Table tag and its attributes. All table related tags are included in between and . Each row starts with and and each column starts with and .

HTML tags Cont… • Graphics in html document. HTML mainly accepts two types of file format .jpg and .gif . The image can inserted into document using tag.

Linking Documents • HTML allows linking to other HTML documents or images. Clicking on text or image will open an entire web page or an image. The text or image that provide such links is called Hyperlink, Hypertext or Hotspot. • Browser distinguishes Hyperlinks from normal text by…. • Each hyperlink appears blue in color • The hyperlink text/image is underlined. • When mouse cursor placed over it, mouse shape changes to shape of hand.

Linking Documents Cont……. • Links are created by using and tags. Anything written in between this tags becomes hyperlink. • By using HREF attribute of tag the document to navigate must be specifed. Ex.

Frames

• Frames divides the browser screen into two or more HTML recognizable unique regions using and tags. Each region is known as frame. • The frameset tag requires following two attributes, for screen has to be divided into rows or columns. • Rows- This attribute is used to divide screen into multiple rows. It can be set equal to a list of values. The values can be: – A no. of pixel

– Expressed as percentage of screen resolution. – The symbol *, which indicates the remaining space.

Frames tag cont……… • Cols:---- This divides the screen into multiple columns. • Ex. divides the screen into 3 equal horizontal sections. splits 1st horizontal section into 2 equal vertical section.

Frames tag cont……… • Other attributes (after division of screen)SRC=“URL” Marginheight=n – specifies the amount of white space to be left at the top and bottom of frame. Marginwidth=n - specifies the amount of white space to be left along the sides of frame. Name= “name” – identification of frame. Scrolling – values are yes/no/auto.

Frames tag cont……… • Example

Introduction to Java Script

• Java script is (object-oriented) script language, that allows creation of interactive web page. It allows to process the user entries which are loaded in html form. Advantages of Java Script----1. 2. 3. 4. 5. 6. 7.

An Interpreted Language. Embedded with HTML. Performance. Procedural Capabilities – like conditional, looping etc. Design for programming user events. Easy debugging and testing. Platform independence / Architecture Neutral.

Writing Java script to HTML • Java scripts syntax are embedded into an html file . The browser use built-in Java Script engine to interpret this code. The browser is given this information using HTML tags <script>……<script>. Syntax-------<script language=“javascript”> Java script codes are written here

•

Basic programming Techniques Java scripts offers all the programming capabilities that are

found in most programming languages. • The tag is generally used to declare javascript variable. Variables names are case sensitive. • The primitive data types that javascript supports are Number(consist of integer and floating point), Boolean ( true or false) ,String (which are enclosed by double(“ “) or single quotes (‘ ‘).

Creating Variable - var =value; Eg. Var name; Var phone=589664 Var adds=“indore”

• Example of java script – <script language=“JavaScript”> Var name=prompt (“enter your name”); <script language=“javascript”> <document.write(“hello” + name);

• • • • • • •

<script type="text/Javascript"> var n =prompt("enter no","0"); var i,p;

• •



• • • • • • •

<script type="text/Javascript"> for(i=1;i<=10;i++) { p=i*n; document.write(n+"*"+i+"="+p+"
"); }

• •



Function in JAVASCRIPT

• Built in functionsEval()- this function is used to convert a string expression to a numeric value. Eg. Var total=eval(“10*10+5”); parseInt()- this function is used to convert a string value to integer. It returns first integer contained in a string or 0 if the string does not begin with integer Eg. Var N=parseInt(“123xyz”);  N=123 Alert()- Which works similar to messagebox function in vb.

User defined functions

• Functions are declared and created using keyword function. A function can have following --• A name of funciton • A list of parameters that will accept values passed to the function when called. • A block of javascript code that defines the function. • Generally function are created within the …. tag. This ensures that all functions will be parsed before they are invoked or called.

• Eg.— <script type=“text/javascript”> var name=“ “; Function he() { name=prompt(“Enter Your Name”,”Name”); Alert(“Hello “+name ” +” Welcome to my page!”); } Function be() { alert(“Bye “); } < img src=“p1.jpg”>

Forms used by a Web Site • An html form provides data gathering functionality to a web page. HTML forms provides all GUI controls. The data submitted can be processed at web server by javascript . • Java script allows the validation of data entered into a form at the client side. • HTML provides the

tags with which an html form an be created to capture user input. All form object are described betewee

Example • • • • • • • • • • • • • • • •

<script type="text/JavaScript"> function val(f1) { alert("Your name is "+document.forms[0].elements[0].value); alert("Your Class is "+document.forms[0].elements[1].value); }

Stduent DATABASE

Enter your name:
Enter your Class:
• •

value="">



•

onClick="val(form)">

• • •

The HTML form elements that can be specified as attributes to tag are : Form Elements Description & Syntax Text

A Text field ()

Password

A password text field in which each keystroke appears as *

Button

A new element that provides a button other that submit or reset button.

Radio

A radio button ()

Reset

A reset button ()

Submit

A submit button ()

TextArea

A multiline text entry field

Select

A selection list (<select> Opt1 Opt2

Methods of form elements

Form Element Name Text Password TextArea Text Password TextArea Text Password TextArea Text Password TextArea Button Radio Checkbox Submit Reset

Method Name

Description

onFocus()

Fires when form cursor enters into an object.

onBlur()

Fires when form cursor moved away from an object.

onSelect()

Fires when text is selected in an object.

onChange()

Fires when text is changed in an object.

OnClick()

Fires when an object is clicked on.

User Defined Objects • In addition to built in objects, javascript permits for the creation of user-defined objects. As like other objects, user-defined objects have properties and methods. After creation of such object, any number of instances of this object can be created. • For eg---- user defined object Emp with three properties – name, age, sal and one method insert Function Emp(n,a,s) { Emp e=new Emp(); this.name=n; this.age=a; this .sal=s; }

JavaScript Event Handlers

JavaScript Event Handler

Will be called when:

onAbort

Loading of image is aborted as a result of user action.

onBlur

A document, window, frame or form element loses current input focus.

onChange

Text field, text area, selection is modified.

onClick

Link, client-side image map area or document clicked.

onDblClick

Link, client-side image map area or document double clicked.

onDragDrop

A dragged object is dropped in a window or frame.

onError

Error occurs during loading image, a page or a window.

onKeyDown

The user presses a key.

onKeyPress

The user presses and releases a key.

JavaScript Event Handlers Cont.. onMouseOver

When mouse is moved over a image or a link etc.

onMouseUp

User release mouse button.

onReset

User reset a form by clicking on the form’s reset button.

onSelect

Text is selected in textfiled or textarea.

onSubmit

User preses a form’s submit button.

onUnload

User exit a document or frame set.

DHTML (Dynamic HTML) • DHTML is a new and emerging technology which combines HTML with Cascading Style Sheets (CSSs) and scripting language. • HTML specifies web page elements like table, frame, bullet etc. • Cascading Style Sheets can be used to determine an element size, color, position and other features. • Script language are used to manipulate the web page element so that styles assigned to them changes to response user’s input.

Cascading Style Sheets • Style Sheets are used for adding styles (eg. Font, colors, spacing) to web documents. It provide standards and uniformity throughout a web site and other dynamic attributes. HTML elements on web page are bound with style sheet. The advantage of style sheet includes ability to make global changes to all documents from a single location. <style>….<\style > tags are used for style process. Between this tags HTML tags are specified.

Main points of DHTML  It is considered to be made up of – HTML – Cascading Style Sheets (CSS) – Scripting language

 All three of these components are linked via Document Object Model (DOM)  DOM is the interface that allows scripting languages to access the content, style, and structure of the web documents and change them dynamically

 HTML

Tools of DHTML

– Partitions and Organizes the content

 CSS - Defines the Presentation of the content  Scripting - JavaScript, JScript, VBScript – Adds interactivity to the page

 DOM- Document Object Model – Defines what and how elements are exposed for script access

Main points of CSS CSS is Cascading Style Sheets It is a specification controlled by the World Wide Web Consortium (W3C). HTML controls the organization of a Web page document CSS controls the presentation and layout of the Web page document elements

What CSS can do?  With CSS you can separate form from structure  Control layout (alignment, spacing, margins, colors, floating elements etc)  Maintain and update many pages faster and easier

CSS-Terminology

CSS is declared as rules: - Eg: H1 {color: green}

- Means that all text surrounded by the

tags should be displayed in green color

A rule has two parts - H1 {color:green}

SELECTOR { DECLARATION }

CSS – Terminology…  Declaration has two parts: HI {color : green } property :

Value

• In general: • Element(s) {Property1:Value; Property2:Value;} Eg.: H1, B {color:olive; background:yellow; font• family: arial, courier }

CSS-Adding styles to web pages

 Four ways

– Embed a style sheet within HTML document – Link to an external stylesheet from the HTML document – Add styles inline in the HTML document – Importing style sheets

CSS-Embed a style sheet • All stylesheet information lies at the top of the HTML code (in the head portion) • Eg: <STYLE TYPE=“text/css”> . . .

CSS-Link to an external style sheet  An externally defined stylesheet is used as a style

template that can be applied to a number of pages  A text file (with ext .css) contains the stylesheet rules to be applied to a page (or set of pages) • Eg. A file named ‘mystyles.css’ H1 {color: green; font-family: impact} B {color: red; font-family: courier} This file is linked to the HTML document () • In the web Page: • • • • . . .

CSS-Add styles inline • Applying stylesheets rules to particular HTML tags • Eg: Adding Inline styles • The style applies to only that particular tag

CSS – Importing Stylesheets Style Sheets which are external to the HTML

document are imported (included) into the <style> element within the element of the current document. Similar to linking, but useful when you want to override some style rules when you include it in your own stylesheet. <style type="text/css"> The imported sheets must appear before any document-specific styles

CSS- Classes  Selectively apply a style to HTML elements  you can define different classes of style to the same element, and apply the appropriate class of style when required  HTML

The first paragraph

The second paragraph

The third paragraph

 Stylesheet P.first { color: green } P.second { color: purple } P.third { color: gray }

DOM-Document Object Model  The Document Object Model is a

platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of the document

 The DOM details the characteristic properties of each element of a Web page, thereby detailing how we might manipulate these components and, in turn, manipulate the page

DOM… Document Object Model is not a "part" of Scripting languages. The DOM stands alone, able to be interfaced with any programming language designed to do so The W3C DOM is the recommended standard to be exposed by each browser Microsoft Internet Explorer and Netscape do not share the same DOM.

DOM…  Both (IE and Netscape) DOMs break down Web pages into roughly four types of components – Objects, Properties, Events and Methods

 Objects : – Container which reflects a particular element of a page – objects "contain" the properties and methods which apply to that element – Example: the submit object

DOM…  Properties: – Characteristics of an object – Example: the ‘document’ object possesses a ‘bgColor’ property which reflects the background color of the page. – Using a programming language (e.g. JavaScript) you may, via this property, read or modify the background color of a page

DOM…  Methods: – A method typically executes an action which acts upon the object by which it is owned – Example: Alert

 Events: – Used to trap actions related to its owning object – Typically, these actions are caused by the user – Example: when the user clicks on a submit button

Using <span> tag • Span tag play an important role in style sheets. In body of the document, <span> … tag is used to set boundaries of the rule’s styling specification. For eg. <style type=“text/css”> P{font-size:12pt, text-align:justify} .que {color:brown; font-style:italic} .ans {color:red} .big {font-size:25pt; color:red}

this <span class=“big” >style sheet class

style sheet class used in paragraph