Scribd
Upload
913 views

HTML (Hyper Text Markup Language)

HTML (Hypertext Markup Language) is the standard markup language used to create web pages. HTML uses tags to define headings, paragraphs, lists, links, and other elements. An HTML file contains the structural markup for a web page along with some content. HTML files are viewed in web browsers which interpret the tags in the HTML code to display the web page. Common HTML tags were presented like <html>, <title>, <body>, <h1>-<h6> for headings, <p> for paragraphs, and <a> for links.

Uploaded by

Deepak Patel
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
913 views

HTML (Hyper Text Markup Language)

HTML (Hypertext Markup Language) is the standard markup language used to create web pages. HTML uses tags to define headings, paragraphs, lists, links, and other elements. An HTML file contains the structural markup for a web page along with some content. HTML files are viewed in web browsers which interpret the tags in the HTML code to display the web page. Common HTML tags were presented like <html>, <title>, <body>, <h1>-<h6> for headings, <p> for paragraphs, and <a> for links.

Uploaded by

Deepak Patel
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 53

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
• <html> Defines an HTML document
• <title> Defines title of your web page
• <body> Defines the document's body
• <h1> to <h6> Defines header 1 to
header 6 <p> Defines a paragraph
• <br> Inserts a single line break
• <hr> Defines a horizontal rule
• <!--> Defines a comment
Example

• <html>
<title> SCS ,DAVV ,Indore </title>
<h1> Welcome to SCS DAVV</h1>
<body>
The different course run at SCS are <br>
<b>M.Tech.(CS)<br>M.Sc.
(IT/CS)<br>MCA<br>MBA(CM) </b>
</body>
</html>
HTML tags Cont…

• <tt> Renders as teletype or mono


spaced text
• <i> Renders as italic text
• <b> Renders as bold text
• <big> Renders as bigger text
• <small> Renders as smaller text
HTML tags Cont…
• Body tag Attributes
<BGCOLOR> changes the background
color of body. The color name is
equivalent to hexadecimal no.
<BACKGROUND> Specifies the background
of document.
<TEXT> changes the body text color.
HTML tags Cont…
• Types of lists.
Unordered list(Bullets)
Unordered list starts with <ul> and ends with </ul> tag. Each
list item starts with <li> tag.
Eg.
<ul type=square>
<li> M.Tech(cs)
<li> M.Sc(it/cs)
<li> MBA(cm)
</ul>
HTML tags Cont…
• Ordered list (numbering).
This list starts with <ol> and ends with </ol> tag. Each
list item start with <li> 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,……)
<ol type=“1” start=5>
<li>India
<li>America
<li>china
</ol>
HTML tags Cont…
• Definition list
This list is used to define a term start with
<dl> and ends with </dl>. It have two
parts (i) definition term and (ii)
definition description.
<dl>
<dt> SCS
<dd> School of Computer Science
<dt> SoEx
<dd>School of Electronics.
HTML tags Cont…
• Table tag and its attributes. All table
related tags are included in between
<table> and </table>. Each row
starts with <tr> and </tr> and each
column starts with <td> and </td>.
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 <IMG>
tag.
<img width=500 height=28
src=“d:\chetan\p1.jpg>
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 <A> and
</A> tags. Anything written in between
this tags becomes hyperlink.
• By using HREF attribute of <A> tag the
document to navigate must be
specifed.
Ex.
<A HREF=“filename.html”>
Frames
• Frames divides the browser screen into two or more HTML
recognizable unique regions using <frameset> and
</frameset> 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.
<frameset rows=“13%, 13% ,13%”> divides
the screen into 3 equal horizontal sections.
<frameset cols=“50%, 50%> 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
<frameset rows=“30,*”>
<frameset cols=“50%,50%”>
<frame src=“file1.html”>
<frame src=“file2.html”>
</frameset>
</frameset>
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. An Interpreted Language.
2. Embedded with HTML.
3. Performance.
4. Procedural Capabilities – like conditional, looping etc.
5. Design for programming user events.
6. Easy debugging and testing.
7. 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
</script>
Basic programming
•
Techniques
Java scripts offers all the programming capabilities that are
found in most programming languages.
• The <head> 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 <variable name>=value;
Eg. Var name;
Var phone=589664
Var adds=“indore”
• Example of java script –
<html>
<head>
<script language=“JavaScript”>
Var name=prompt (“enter your name”);
</script> </head>
<body>
<script language=“javascript”>
<document.write(“<b>hello” + name);
</script> </body>
</html>
• <html>
• <title>Program for tabled</title>
• <head>
• <script type="text/Javascript">
• var n =prompt("enter no","0");
• var i,p;
• </script>

• </head>
• <body>

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

• </body>
• </html>
Function in JAVASCRIPT
• Built in functions-
Eval()- 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
<head>….</head> tag. This ensures that
all functions will be parsed before they
are invoked or called.
• Eg.—
<html>
<head>
<title> Welcome to SCS, DAVV Indore </title>
<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 “); }
</script></head>
<body onLoad=“he();” onUnLoad=“be();” >
< img src=“p1.jpg”>
</body>
</html>
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 <form> </form> tags
with which an html form an be created to
capture user input. All form object are
described betewee <form> </form>
Example
• <html>
• <title> Use of Form Tag </title>
• <head>
• <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);
• }
• </script>
• </head>
• <body>
• <form name="f1">
• Stduent DATABASE <br><br>
• Enter your name:<input type=text name="t1" value=""><br>
• Enter your Class:<input type=text name="t1"

• value=""><br><br><br>
• <input type="button" name="b1" value="show"

• onClick="val(form)">

• </form>
• </body>
• </html>
The HTML form elements that can be
specified as attributes to <input> tag are :
Form Elements Description & Syntax

Text A Text field (<input type=“text”>)


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 (<input type=“radio”>)
Reset A reset button (<input type=“reset”>)
Submit A submit button (<input type=“submit”>)
TextArea A multiline text entry field
Select A selection list
(<select>
<option>
Opt1
Opt2
</option>
</select>
Methods of form elements
Form Element Name Method Name Description
Text Fires when form cursor
Password onFocus() enters into an object.
TextArea
Text Fires when form cursor
Password onBlur() moved away from an
TextArea object.

Text Fires when text is


Password onSelect() selected in an object.
TextArea

Text Fires when text is


Password onChange() changed in an object.
TextArea

Button Fires when an object is


Radio clicked on.
Checkbox OnClick()
Submit
Reset
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
Tools of DHTML
 HTML
– 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
<H1></H1> 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:
<HTML>
<STYLE TYPE=“text/css”>
<!—H1 {color: green; font-family: impact}-- >
</STYLE>
<HEAD>
<BODY> . . .
CSS-Link to an external
style
 An externally defined sheet
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 (<LINK>)
• In the web Page:
• <HTML>
• <LINK REL=stylesheet HREF=“mystyles.css”
TYPE=“text/css”>
• <HEAD>
• <BODY> . . .
CSS-Add styles inline
• Applying stylesheets rules to particular HTML
tags
• Eg:
<B STYLE=“color: purple; background:
yellow”>Adding Inline styles</B>
• The style applies to only that particular <B>
tag
CSS – Importing
Stylesheets
Style Sheets which are external to the HTML
document are imported (included) into the
<style> element within the <head> 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">
<!-- @import
url(http://www.cen.com//houseBasic.css);
ul ul { list-style-type: circle; } --> </style>
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
<P CLASS="first">The first paragraph</P>
<P CLASS="second">The second paragraph</P>
<P CLASS="third">The third paragraph</P>
 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> … </span> tag is used to set boundaries of
the rule’s styling specification.
For eg.
<html>
<head> <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} </style> </head>
<body><body>
<p class=“que”>this <span class=“big” >style sheet </span>
class </p>
<p class=“ans”> style sheet class used in paragraph</p>
</body>

You might also like