Unit 1 - WT

Introductio
n
MR . A MA R J UK UNT L A ,
A S S IS TA NTP R OFES S OR , C S E
V FS T R DE E ME DT O B E U NI V E R S I T Y
Topic
s
 Introduction to HTML
 HTML Tags
 Block level and inline Elements
 Lists, Table
 Images
 Forms
 CSS
 JavaScript
AMAR J|WT|UNIT1 2
Objective
s
 Understand HTML language
 Create simple web pages
 Understand components of web page
 Use java script to validate form entries
AMAR J|WT|UNIT1 3
What is Web
Page?
Inter connected electronic documents is called web
page
AMAR J|WT|UNIT1 4
Web
Site
A web site is a related collection of World Wide
Web(WWW) files that includes a beginning file
called home page
AMAR J|WT|UNIT1 5
Histor
y
Tim Berners-Lee invented the world wide web in 1989. he founded and directs World
Wide Consortium (W3C) the forum for technical department of web.
AMAR J|WT|UNIT1 6
Web
Design
Web Design is the planning and creation of websites. Which includes many
elements
◦ Information architecture
◦ User interface
◦ Site structure
◦ Navigation
◦ Layout
◦ Colours
◦ Fonts
◦ Images
All of these are combined with the principles of design to create a
website that meet the goals of the owner and designer.
AMAR J|WT|UNIT1 7
Introduction
HTML (Hypertext Markup Language) is the only markup language for creating web pages. It provides some
titles, headings, paragraphs, lists, tables, embedded images, etc. to describe the structure of text-based
information in HTML documents.
HTML is a straightforward Computer Coding Language. It was developed in the 90s. HTML is the basis of a
web page, and the web page is the basis of a website. HTML uses ‘tags' to create web documents.
HTML is a Hypertext Markup Language; it's a Predominant set of Markup tags which used to create
the design of web pages.
HTML is the first language of web designing. CSS is also used along with HTML to improve the
design of the web page further. JavaScript is used along with HTML to make web pages
dynamic.
AMAR J|WT|UNIT1 8
Continue…
HTML is relatively easy to learn because every tag is predefined, so only we need to
know the work of tags and its attributes.
Web browsers (Chrome, Internet Explorer, Firefox, Safari, and other web browsers) are software' to
read HTML and to display webpage design as output.
You can write HTML in any simple editor like Notepad, Adobe Dreamweaver, Sublime, etc. are
primarily used for writing and editing HTML.
.html or . htm
are extensions is used for writing HTML file, so we can write HTML code in any
editor, and can save as filename.html or filename.htm.
AMAR J|WT|UNIT1 9
<!DOCTYPE>
<html>
<head>
<title>Web page title</title>
</head>
Exampl <body>
e <h1>Write Your First Heading</h1>
<p>Write Your First Paragraph.</p>

</body>
</html>
AMAR J|WT|UNIT1
Continue...
The <!DOCTYPE html> declaration defines that this document is an HTML5 document
The <html> element is the root element of an HTML page
The <head> element contains meta information about the HTML page
The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or
in the page's tab)
The <body> element defines the document's body, and is a container for all the visible contents, such
as headings, paragraphs, images, hyperlinks, tables, lists, etc.
The <h1> element defines a large
heading The <p> element defines a
paragraph
AMAR J|WT|UNIT1 11
HTML Tags
HTML tags are like keywords which defines that how
browser will format and displayweb the content.
With the help of tags, a web browser can distinguish between an
HTML content and a simple content.

HTML tags contain three main parts:
◦ opening tag,
◦ content
◦ closing tag. (But some HTML tags are unclosed
tags.)
AMAR J|WT|UNIT1 12
Continue...
When a web browser reads an HTML document,
browser reads it from top to bottom and left to right.
HTML tags are used to create HTML documents and render their
properties.
Each HTML tags have different properties. An HTML

file must have some essential tags so that web browser can
differentiate between a simple text and HTML text. You can use
as many tags you want as per your code requirement.
AMAR J|WT|UNIT1 13
All HTML tags must enclosed within < > these
brackets.
Continue... Every tag in HTML perform different tasks.
If you have used an open tag <tag>, then you must use a close
AMAR J|WT|UNIT1
tag </tag> (except some tags) 14
<br> Tag: br stands for break line,
it breaks the line of the code.
Unclose
d Tags... <hr> Tag: hr stands for Horizontal
Rule. This tag is used to put a
line across the webpage.
AMAR J|WT|UNIT1 15
AMAR J|WT|UNIT1 16
HTML Meta Tags
DOCTYPE HTML <!DOCTYPE> tag is used to inform the browser about the version of HTML used in the document. It is
called as the document type declaration (DTD).
Technically <!DOCTYPE > is not a tag/element, it just an instruction to the browser ABOUT THE DOCUMENT
TYPE. It is a null element which does not contain the closing tag, and must not include any content within it.
There are many type of HTML e.g. HTML 4.01 Strict, HTML 4.01 Transitional, HTML 4.01 Frameset, XHTML 1.0 Strict, XHTML
1.0 Transitional, XHTML 1.0 Frameset, XHTML 1.1 etc.
The <!DOCTYPE> declaration refers Document Type Declaration (DTD) in HTML 4.01; because HTML 4.01 was based on SGML.
But HTML 5 is not SGML based language.
Syntax:
<! DOCTYPE
ht ml >
AMAR J|WT|UNIT1 17
Continue...
TITL
E
HTML title tag is used to provide a title name for your webpage. It is
necessary for Search Engine Optimization (SEO).
The HTML title tag must be used inside the <head> tag.
The title of the page is displayed on the title bar of the browser.
The head element which appears before body element just contains the
information about the page but it doesn't display on the browser window. So,
to display a title name on the web page, title element is used.
If you look at the above example, you will see that "First web page" will be
displayed on the tab/ title bar of the browser. Content(text) between
<title>.............</title> is shown on the title bar.
AMAR J|WT|UNIT1 18
Continue...
HTML <link> tag is used to specify the relationship between the current document and external
source.
The <link> tag is commonly used to link the external Stylesheet for the current document, but it
can also use with link site icons. It is placed on the head section of the document.
<link rel="stylesheet" type="text/css"

href="">
AMAR J|WT|UNIT1 19
HTML <meta> tag is used to represent the
metadata about the HTML document. It specifies
page description, keywords, copyright,
language, author of the documents, etc.
The metadata does not display on the webpage,
Continue... but it is used by search engines, browsers and

other web services which scan the site or
webpage to know about the webpage.
With the help of meta tag, you can experiment

and preview that how your webpage will render
on the browser.
Syntax <meta charset="utf-8">

AMAR J|WT|UNIT1 20
Continue...
HTML Style is used to change or add the style on existing HTML
elements. There is a default style for every HTML element e.g. background
color is white, text color is black etc.
The style attribute can by used with any HTML tag. To apply style on
HTML tag, you should have the basic knowledge of css properties e.g.
color, background-color, text-align, font-family, font-size etc. The syntax of
style attribute is given below:
style= "property: value"

Example: <h3 style="color:green">This is Green Color</h3>
AMAR J|WT|UNIT1 21
HTML TEXT FORMATING TAGS
TEXT
FORMATIN
G TAGS
BLOCK
INLINE
LEVEL
ELEMENTS
ELEMENTS
<h1>-<h6>,
<span> etc
etc
AMAR J|WT|UNIT1 22
Block Level
Elements
<address> <div> <footer> <main> <section>
<article> <dl> <form> <nav> <table>
<aside> <dt> <h1>-<h6> <noscript> <tfoot>
<blockquote> <fieldset> <header> <ol> <ul>
<canvas> <figcaption> <hr> <p> <video>

<dd> <figure> <li> <pre>
AMAR J|WT|UNIT1 23
Continue…
 <address>
 Defines the contact information for the author/owner of the document or an article.
 Syntax: <address>…….</address>
 <div>
 The <div> tag defines a division or a section in an HTML document.
 The <div> tag is used as a container for HTML elements - which is then styled with C S S or manipulated
with JavaScript.
 The <div> tag is easily styled by using the class or id attribute.
 Any sort of content can be put inside the <div> tag!
 Note: By default, browsers always place a line break before and after the <div> element.
 Syntax : <div> .. .. </div>
AMAR J|WT|UNIT1 24
Continue
…  Headings <h1> to <h6>
 The <h1> to <h6> tags are used to define HTML headings.
 <h1> defines the most important heading. <h6> defines the
least important heading.
 Note: Only use one <h1> per page - this should represent the
main heading/subject for the whole page.
 Also, do not skip heading levels - start with <h1>, then use <h2>, and
so on.
 Syntax : <h1> …..</h1>
 Example:
<h1>This is heading 1</h1>
AMAR J|WT|UNIT1 25
Continue…
 <blockquote>
 The <blockquote> tag specifies a section that is quoted from another source.
 Browsers usually indent <blockquote> elements (look at example below to see how to remove the
indentation).
 cite attribute specifies the source of the quotation.
Syntax: <blockquote>…..</blockquote>
Example:
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization,
WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5
million globally.
</blockquote>
AMAR J|WT|UNIT1 26
Continue…
 <p>
 The <p> tag defines a paragraph.
 Browsers automatically add a single blank line before and after each <p> element.
 Syntax : <p>….</p>
 Example :
<p>
My Bonnie lies over the ocean.
My Bonnie lies over the sea. My Bonnie lies over the ocean. Oh, bring back my Bonnie to
me.
</p>
AMAR J|WT|UNIT1 27
Continue…
 <section>
 The <section> tag defines a section in a document.
 Syntax: <section>…..</section>
 Example:
<section>
<h2>WWF History</h2><p>The World Wide Fund for Nature (WWF) is an international

organization working on issues regarding the conservation, research and restoration of the
environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
</section>
AMAR J|WT|UNIT1 28
Continue…
 <pre>
 The <pre> tag defines preformatted text.
 Text in a <pre> element is displayed in a fixed-width font, and the text preserves both spaces and
line breaks. The text will be displayed exactly as written in the HTML source code.
 Syntax : <pre>…..</pre>
<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces
and line breaks
</pre>
AMAR J|WT|UNIT1 29
Continue…
 <nav>
 The <nav> tag defines a set of navigation links.
 Notice that NOT all links of a document should be inside a <nav> element. The <nav> element is intended
only for major block of navigation links.
 Browsers, such as screen readers for disabled users, can use this element to determine whether to omit
the initial rendering of this content.
 Syntax: <nav>…..</nav>
Example:
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/python/">Python</a>
</nav>
AMAR J|WT|UNIT1 30
Inline
Elements
<a> <button> <img> <output> <span> <tt>
<abbr> <cite> <input> <q> <strong> <var>
<acronym> <code> <kbd> <samp> <sub>
<b> <dfn> <label> <script> <sup>
<bdo> <em> <map> <select> <textarea>
<br> <i> <object> <small> <time>
AMAR J|WT|UNIT1 31
<a>
 The <a> tag defines a hyperlink, which is used to link from one page to another.
HTML  By default, links will appear as follows in all browsers:
Link 

An unvisited link is underlined and blue
A visited link is underlined and purple
Tag  An active link is underlined and red
s <a href="http://www.vignan.ac.in">Visit vignan!</a>
AMAR J|WT|UNIT1 32
<base>
 The <base> tag specifies the base URL and/or target for all
HTML relative URLs in a document.

 The <base> tag must have either an href or a target attribute
Link present, or both.

 There can only be one single <base> element in a document,
and it must be inside the <head> element.
Tags <head>
<base href="https://www.w3schools.com/" target="_blank">
</head>
AMAR J|WT|UNIT1 33
Unordered List
 The <ul> tag defines an unordered (bulleted) list.
 Use the <ul> tag together with the <li> tag to create unordered
lists.
HTML List <!DOCTYPE html>

<html>
Tag <body>
<h1>The ul element</h1>
< ul >
s <li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
AMAR J|WT|UNIT1 34
Exampl
e
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<l i >Bl ack
t ea</l i >
<l i >Gr een
t ea</l i >
</ul>
</li>
<li>Milk</li>
</ul>
AMAR J|WT|UNIT1 35
Ordered List
 The <ol> tag defines an ordered list. An ordered list can be
numerical or alphabetical.
 The <li> tag is used to define each list item.
HTML List  Syntax: <ol type=“A”| “a”| “I” | “i”| “1”>….</ol>
Tag <ol>
<li>Coffee</li>
s <li>Tea</li>
<li>Milk</li>
</ol>
<ol start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
AMAR J|WT|UNIT1 36
Definition List
 The <dl> tag defines a description list.
HTML List  The <dl> tag is used in conjunction with <dt> (defines terms/names)
Tags and <dd> (describes each term/name).

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
AMAR J|WT|UNIT1 37
<table>
 The <table> tag defines an HTML table.
 An HTML table consists of <table> element and one

HTML Table one more <tr>, <th>, and <td> or
Tags 
elements.
The <tr> element defines a table row, the <th> element defines a table
header, and the <td> element defines a table cell.
 An HTML table may also include <caption>, <colgroup>,

<thead>,
<tfoot>, and <tbody> elements.
AMAR J|WT|UNIT1 38
Continue…
Table Properties
<table [align=“center”| “left”| “right”] [border [=“n”]] [cellpadding=“n”] [width=“nn

%] [cellspacing=“n”]> ..</table>
To write a row
<tr [align=“center”| “left”| “right”] [valign=“top”| “center”| “bottom”]>
..</tr> To write data

<td [align=“center”| “left”| “right”] [valign=“top”| “center”| “bottom”]>
..</td>
AMAR J|WT|UNIT1 39
Continue...
<table> <table>
<tr> <tr>
<th>Month</th> <th>Name</th>
<th>Savings</th> <th>Email</th>
</tr> <th colspan="2">Phone</th>
<tr> </tr>
<td>January</td> <tr>
<td>₹1000</td> <td>Abhina</td>
</tr> <td>abhina.j@example.com</td>
</table> <td>123-45-678</td>
<td>212-00-546</td>
</tr>
</table>
AMAR J|WT|UNIT1 40
Continue…
<table>
<tr>
<th>Name</th>
<td>Abhina</td>
</tr>
<tr>
<th>Email</th>
<td>abhina.j@example.com</td>
</tr>
<tr>
<th colspan="2">Phone</th>
<td>123-45-678</td>
</tr>
<tr>
<td>212-00-546</td>
</tr>
</table>
AMAR J|WT|UNIT1 41
 The <img> tag is used to embed an image in an HTML page.
HTML Image  Images are not technically inserted into a web page; images are
Tag linked to web pages. The <img> tag creates a holding space
for the referenced image.
<img  The <img> tag has two required attributes:

 src - Specifies the path to the image
>
 alt - Specifi es an alternate text for the image, if the image for some
reason cannot be displayed
<img src="img1.jpg" alt=“Person i n a jacket" width="500" height="600">

AMAR J|WT|UNIT1 42
The <frame> tag was used in HTML 4 to define one particular
window (frame) within a <frameset>.
HTM S yntax
L <frameset [cols=“%,%] [rows=“%,%”]> ……</frameset>
Fram To fill the data in frames
e <frame [name=“name”] src=“filename” [frameborder=“0”|

1”] [scrolling=“yes”|”auto”|”no”]/>
Tag
AMAR J|WT|UNIT1 43
Continue…
<html>
<frameset rows="50%,50%">
<frame src="D:\11.jpg" />
< frameset cols="25%,75%">
< frame src="D:\11.jpg" />
< frame src="D:\11.jpg" />
< / frameset >
</frameset>
</html>
AMAR J|WT|UNIT1 44
HTML iFrame
Tag The <iframe> tag
An inline frame is used to
embed another
specifies an inline frame. document within the
current HTML document.
<!DOCTYPE html>
<html>
<body>
<h2>HTML Iframes example</h2>
<p>Use the height and width attributes to specify the
size of the iframe:</p>
<iframe src="https://vignan.ac.in/"
width=“40
0” height=“300”>
</iframe>
</body>
</html>
AMAR J|WT|UNIT1 45
 An HTML form is a section of a document which contains controls such
as text fields, password fields, checkboxes, radio buttons, submit button,
menus etc.
 An HTML form facilitates the user to enter data that is to be sent to the
HTML server for processing such as name, email address, password, phone
Form number, etc. .
 HTML Form Syntax

Tag <form action="server url" method="get|post">
s //input controls e.g. textfield, textarea, radiobutton, button
</form>
AMAR J|WT|UNIT1 46
Continue…
Some of the controllers which we are using in form tag.
 Text field
 Text area
 Check boxes
 Radio button
 Select boxes(Menu)
AMAR J|WT|UNIT1 47
Exampl
e<html>
<body>
<form>
<input type= “text” name=“txtSearch” value=“Search for” size=“20” maxlength=“64” />
<input type=”submit” value=”Submit” />
</form>
</body>
</html>
AMAR J|WT|UNIT1 48
Output
AMAR J|WT|UNIT1 49
Continue…
<textarea name=“name” rows=“n” cols=“n”></textarea>
<textarea name=”s” rows=”20” cols=”50”>
Example
<textarea name=”s” rows=”20” cols=”50”>
Enter your feedback here.
</textarea>
<br />
<input type=”submit” value=”Submit” />
</form>
AMAR J|WT|UNIT1 50
Continue…
Buttons
2 Types
 Submit
 Reset
<input type= “submit” | “reset” value=“any value” />
AMAR J|WT|UNIT1 51
Exampl
<html>
e
<body>
<form>
Enter
name:
<input
type=“text”
size=“20”
<input
type=“subm
it”
value=“sub
mit”/><br>
<input
type=“reset
AMAR J|WT|UNIT1 52
”
Continue…
Check Box
A checkbox is created using the <input> element whose type attribute has a value of
checkbox.
<form>
<input type=”checkbox” name=”s” value=”html” />HTML <br />
<input type=”checkbox” name=”s” value=”xhtml” />XHTML <br />
<input type=”checkbox” name=”s” value=”CSS” />CSS<br />
<input type=”checkbox” name=” s” value=”JavaScript” />JavaScript<br />
<input type=”checkbox” name=” s” value=”aspnet” />ASP.Net<br />
<input type=”checkbox” name=” s” value=”php” />PHP
</form>
AMAR J|WT|UNIT1 53
Output
AMAR J|WT|UNIT1 54
Continue…
Radio Button
Syntax: <input type=“radio”>
input type=”radio” name=”A” value=”First” />First class <br />
<input type=”radio” name=”A” value=”Business” />Business class <br />
<input type=”radio” name=”A” value=”Economy” />Economy class

<br />
</form>
AMAR J|WT|UNIT1 55
Output
AMAR J|WT|UNIT1 56
Continue…
Selection Box
A drop-down select box allows users to select one item from a drop-down menu. Drop-down select boxes
can take up far less space than a group of radio buttons.
<select name= “selColor”>
<option selected= “selected” value=“1”>Select color</option>
<option value= “red”>Red</option>
<option value= “green” selected>Green</option>
<option value= “blue”>Blue</option>
</select>
AMAR J|WT|UNIT1 57
Output
AMAR J|WT|UNIT1 58
CS
S
CSS is a language that describes the style of an HTML document.
CSS describes how HTML elements should be displayed.
CSS stands for Cascading Style Sheets
CSS describes how HTML elements are to be displayed on screen, paper, or in other
media
CSS saves a lot of work. It can control the layout of multiple web pages all at
once. External stylesheets are stored in CSS files.
There are three ways to create CSS

◦ Inline Style Sheet
◦ Embedded Style Sheet
◦ External Style Sheet
AMAR J|WT|UNIT1 59
CSS
Syntax
The selector points to the HTML element you want to style.
The declaration block contains one or more declarations separated by semicolons.
Each declaration includes a CSS property name and a value, separated by a
colon.
Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded
by curly braces.
A CSS rule-set consists of a selector and a declaration block:
AMAR J|WT|UNIT1 60
External Style
Sheets
 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 <link>
element, inside the head section.
 Example: External styles are defined within the <link> element, inside the <head> section of an
HTML page:
AMAR J|WT|UNIT1 61
Exampl
e<!DOCTYPE html>
<html>
<head>
< l i n k r e l = " s t y l e s h e e t " type="text/css" href="mystyle.css">
</head>
<body>
body {
<h1>This i s a heading</h1> b ackground-
<p>This i s a paragraph.</p> colo r : l i g h t b l u e ;
}
</body>
</html> h1 {
co lo r : navy;
margin-left : 20px;
}
AMAR J|WT|UNIT1 62
Embedded Style
Sheet
An internal style sheet may be used if one single HTML page has a unique style.
The internal style is defined inside the <style> element, inside the head section.
Place your CSS rules into an HTML document using the <style> element that is called embedded
CSS. This tag is placed inside <head>...</head> tags. Rules defined using this syntax will be
applied to all the elements available in the document.
Example
Internal styles are defined within the <style> element, inside the <head> section of an
HTML page:
AMAR J|WT|UNIT1 63
<!DOCTYPE html>
<html>
<head>
Exampl <s tyl e >
body {
e }
background-color: l i n e n ;
h1 {
color:
maroon;
margin- l e f t :
} 40px;
</style>
</head>
<body>
<h1>This i s a heading</h1>
<p>This i s a paragraph.</p>
</body>
</html>
AMAR J|WT|UNIT1 64
Inline Style
Sheet
You can apply style sheet rules directly to any HTML element using
style attribute of the relevant tag. This should be done only when you are
interested to make a particular change in any HTML element only.
Rules defined inline with the element overrides the rules defined in an
external CSS file as well as the rules defined in <style> element.
AMAR J|WT|UNIT1 65
Exampl
e
<!DOCTYPE html>
<html>
<body>
<h1 s ty l e = " co lor : b lu e ;t ex t-a li gn : ce n te r; " > T h i s

i s a heading</h1>
<p s ty l e = " c o l o r : r e d ; " > T h i s i s a paragraph.</p>
</body>
</html>
AMAR J|WT|UNIT1 66
CSS
Properties
Font-family:different font families
Font-style:italic/underlined/normal
Font-weight:
Font-size:
Text-
align:
Color:
Background-
color: Width:
Height:
AMAR J|WT|UNIT1 67
Java
Script
A script is a small piece of program that can add interactivity to your website.
For example, a script could generate a pop-up alert box message, or provide a dropdown
menu.
This script could be written using JavaScript or VBScript.
You can keep JavaScript code in a separate file and then include it wherever it's needed, or
you can define functionality inside HTML document itself.
Categories of JavaScript
◦ External Java Script
◦ Internal Java Script
AMAR J|WT|UNIT1 68
External Java
Script
If you are going to define a functionality which will be used in various HTML documents then it's
better to keep that functionality in a separate JavaScript file and then include that file in your HTML
documents. A JavaScript file will have extension as .js and it will be included in HTML files using
<script> tag.
Example
Consider we define a small function using JavaScript in script.js which has following code −
function Hello() {
alert("Hello, World");
AMAR J|WT|UNIT1 69
Exampl
e
<!DOCTYPE html>
<html>
<head>
<title>Javascript External Script</title>
<script src = "/html/script.js" type = "text/javascript"/></script> </head>
<body>
<input type = "button" onclick = "Hello();" name = "ok" value = "Click Me" />
</body>
</html> function Hello() {

alert("Hello,
World"); }
AMAR J|WT|UNIT1 70
Internal Java
Script
You can write your script code directly into your HTML document.
Usually we keep script code in header of the document using <script>
tag, otherwise there is no restriction and you can put your source code
anywhere in the document but inside <script> tag.
AMAR J|WT|UNIT1 71
Exampl
e
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Internal Script</title>
<script type = "text/JavaScript">

function Hello() { alert("Hello, World"); }
</script>
</head>
<body>
<input type = "button" onclick = "Hello();" name = "ok" value = "Click
Me" />
</body>
</html>
AMAR J|WT|UNIT1 72
JavaScript
Primitives
 A primitive value is a value that has no properties or methods.
 A primitive data type is data that has a primitive value.
 JavaScript defines 5 types of primitive data types:
 string
 number
 boolean
 null
 undefined
 Primitive values are immutable (they are hardcoded and therefore cannot
be changed).
AMAR J|WT|UNIT1 73
Exampl
e
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Variables</h2>
<p id="demo"></p>
<script>
/ Create and display a variable:
var person = "Vignan University";
document.getElementById("demo").innerHTML = person;
</script>
</body>
</html>
AMAR J|WT|UNIT1 74
Creating a JavaScript
Object
 With JavaScript, you can define and create your own objects.
 There are different ways to create new objects:
 Define and create a single object, using an object literal.
 Define and create a single object, with the keyword new.
 Define an object cons tructor, and then create objects of the
cons tructed type.
 An object can also be created with the function Object.create().
AMAR J|WT|UNIT1 75
Exampl
e
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var person = new Object();
person.firstName =
"John"; person.lastName =
"Doe"; person.age = 50;
person.eyeColor = "blue";
document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years
old.";
</script>
</body>
</html>
AMAR J|WT|UNIT1 76

Unit 1 - WT

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Unit 1 - WT

Uploaded by

Copyright:

Available Formats

Introductio

 Block level and inline Elements

<p>Write Your First Paragraph.</p>

The <html> element is the root element of an HTML page

The <h1> element defines a large

heading The <p> element defines a

HTML content and a simple content.

Each HTML tags have different properties. An HTML

Continue... Every tag in HTML perform different tasks.

<link rel="stylesheet" type="text/css"

The metadata does not display on the webpage,

Continue... but it is used by search engines, browsers and

With the help of meta tag, you can experiment

Syntax <meta charset="utf-8">

style= "property: value"

<aside> <dt> <h1>-<h6> <noscript> <tfoot>

<blockquote> <fieldset> <header> <ol> <ul>

<canvas> <figcaption> <hr> <p> <video>

My Bonnie lies over the ocean.

<h2>WWF History</h2><p>The World Wide Fund for Nature (WWF) is an international

HTML  By default, links will appear as follows in all browsers:

Tag  An active link is underlined and red

s <a href="http://www.vignan.ac.in">Visit vignan!</a>

HTML relative URLs in a document.

Link present, or both.

HTML List <!DOCTYPE html>

Tags and <dd> (describes each term/name).

 An HTML table consists of <table> element and one

 An HTML table may also include <caption>, <colgroup>,

<table [align=“center”| “left”| “right”] [border [=“n”]] [cellpadding=“n”] [width=“nn

<tr [align=“center”| “left”| “right”] [valign=“top”| “center”| “bottom”]>

..</tr> To write data

<img  The <img> tag has two required attributes:

<img src="img1.jpg" alt=“Person i n a jacket" width="500" height="600">

L <frameset [cols=“%,%] [rows=“%,%”]> ……</frameset>

Fram To fill the data in frames

e <frame [name=“name”] src=“filename” [frameborder=“0”|

Form number, etc. .

 HTML Form Syntax

<textarea name=”s” rows=”20” cols=”50”>

Enter your feedback here.

<input type=”submit” value=”Submit” />

<input type= “submit” | “reset” value=“any value” />

input type=”radio” name=”A” value=”First” />First class <br />

<input type=”radio” name=”A” value=”Business” />Business class <br />

<input type=”radio” name=”A” value=”Economy” />Economy class

CSS describes how HTML elements should be displayed.

CSS stands for Cascading Style Sheets

once. External stylesheets are stored in CSS files.

There are three ways to create CSS

The declaration block contains one or more declarations separated by semicolons.

Each declaration includes a CSS property name and a value, separated by a

<h1 s ty l e = " co lor : b lu e ;t ex t-a li gn : ce n te r; " > T h i s

This script could be written using JavaScript or VBScript.

<title>Javascript External Script</title>

<script src = "/html/script.js" type = "text/javascript"/></script> </head>

</html> function Hello() {

<title>JavaScript Internal Script</title>

<script type = "text/JavaScript">

You might also like