Html-Prabakaran

HTML PROGRAMMING
Prepared By
Dr P PRABAKARAN
Assistant Professor
Department of Computer Applications – PG
School of Computing Sciences
Vels Institute of Science Technologies and Advanced Studies
Chennai

INTRODUCTION TO HTML
HTML TEXT EDITOR
An HTML editor is a piece of software for creating and editing HTML
code. It can be a stand-alone software dedicated to code writing and
editing or a part of an IDE.
An HTML editor provides more advanced features and is specifically
designed for developers to create web pages more efficiently. It
ensures every string of code is clean and works properly.

HTML TEXT EDITOR
Features of HTML Editor
Syntax highlighting. Differs HTML tags in various colors based on their
categories, making it easier to read and recognize the code structure.
Auto-completion. Automatically suggests HTML elements and attributes
based on previously added values, saving time when typing a longer piece
of code.
Error detection. Scans for syntax errors whenever you type in code
incorrectly to fix the mistake immediately.

HTML TEXT EDITOR
HTML Editor Software
 Notepad
 Word
 Microsoft word
 Dreamweaver
 Atom
 Visual Studio code

GRAPHIC EDITOR
Use the following image code editor to create image codes for your
website. In HTML, images are created using the <img> tag.
SVG (Scalable Vector Graphics)
The HTML <svg> element allows vector based graphics in HTML.
SVG defines vector-based graphics in XML format.

IDENTIFYING THE BASIC STRUCTURE OF AN HTML PAGE
HTML documents use various tags and attributes to display elements
such as headings, paragraphs, hyperlinks, and images. They are
composed of the following major parts:
The HTML version information
The <html> element
The <head> element
The <body> element

IDENTIFYING THE BASIC STRUCTURE OF AN HTML PAGE

EXPLORING THE <HEAD>TAG
The <head> tag in HTML helps in defining metadata and linking external
resources. Information in this tag would not be displayed on the browser
but would help in the display and behaviour of our HTML elements added
inside our <body> tag.
Syntax
In HTML, the syntax for the <head> tag is:
<head> </head>

Browser Compatibility
The <head> tag has basic support with the following browsers:
Chrome
Android
Firefox (Gecko)
Firefox Mobile (Gecko)
Internet Explorer (IE)
Edge Mobile
Opera
Opera Mobile
Safari (WebKit)

EXPLORING THE <BODY>TAG
The body tag contains all the main content of the webpage such as
headings, paragraphs, images, tables etc. It is always enclosed within
the <html> tag. Everything you see on the web browser will be
present inside the <body> tag.

Tag Specific Attributes
Attribute Description
bgcolor Colour of the Background of your page
alink Color of text for links
background Image to be used as a background
link Color of text for links that are not visited
vlink Color of text for visited links
text Color of the text on your webpage
margins Used to add margins to the webpage

IDENTIFYING THE SYNTAX OF CSS
The basic goal of the Cascading Stylesheet (CSS) language is to allow a
browser engine to paint elements of the page with specific features, like
colors, positioning, or decorations.
CSS syntax can be divided into 3 parts:
Selectors – The list of Selectors are h1 to h6, p, id, class, grouping etc.
Selectors are covered in detail in the next page(CSS Selectors).
Style – The keyword ‘style’ is used to provide the styling to the
Selectors.
Declaration – Declaration includes property and a value.

IDENTIFYING THE TYPES OF STYLE SHEETS
Definition of CSS
Cascading Style Sheets (CSS) is a markup language responsible for
how web pages will look like. It controls the colors, fonts, and layouts
of your website elements.

IDENTIFYING THE TYPES OF STYLE SHEETS

Inline CSS
Inline CSS is used to style a specific HTML element. For this CSS style,
you’ll only need to add the style attribute to each HTML tag, without
using selectors.
This CSS type is not really recommended, as each HTML tag needs to
be styled individually. Managing your website may become too hard
if only use inline CSS.

Internal CSS
Internal or embedded CSS requires you to add <style> tag in the
<head> section of your HTML document.
This CSS style is an effective method of styling a single page.
However, using this style for multiple pages is time-consuming as you
need to put CSS rules on every page of your website.

External CSS
With external CSS, you’ll link your web pages to an external .css file,
which can be created by any text editor in your device (e.g.,
Notepad++).
This CSS type is a more efficient method, especially for styling a large
website. By editing one .css file, you can change your entire site at
once.

APPLYING MULTIPLE STYLE SHEETS
Multiple style sheets
If some properties have been defined for the same selector or
element in multiple different style sheets, the value from the last-
read style sheet will be used.
Using multiple CSS files instead of one big file can help you to keep
things organised when working on a large site with a variety of style
requirements.

IDENTIFYING CSS SELECTORS
CSS selectors are patterns that select elements that need to be
styled.
Selectors find elements based on their id, class, type, attribute, and
more.

Selector Types
 CSS class selectors
 CSS id selectors
 CSS element selectors
 CSS attribute selectors
 CSS pseudo-class selectors
 CSS global selectors

STYLING HTML ELEMENTS
The <style> HTML element contains style information for a
document, or part of a document. It contains CSS, which is applied to
the contents of the document containing the <style> element.
The <style> element must be included inside the <head> of the
document. In general, it is better to put styles in external stylesheets
and apply them using <link> elements.

GROUPING AND NESTING STYLES
Grouping Styles
The CSS grouping selector is used to select multiple elements and style
them together. This reduces the code and extra effort to declare common
styles for each element. To group selectors, each selector is separated by a
space.
Syntax
element, element
{
/*declarations*/
}

GROUPING AND NESTING STYLES
Nesting Styles
Nesting Style may apply to Selector interior styles.

CONTROLLING THE VISIBILITY OF ELEMENTS
The visibility property in CSS is used to control whether elements are
visible on the webpage or whether it isn’t. But the elements hidden
with visibility property do occupy space on the webpage. To
overcome this person usually, we use the display property with value
none to hide as well as to delete the element.

CONTROLLING THE VISIBILITY OF ELEMENTS
The visibility property in CSS is used to control whether elements are
visible on the webpage or whether it isn’t. But the elements hidden with
visibility property do occupy space on the webpage. To overcome this
person usually, we use the display property with value none to hide as
well as to delete the element.
Syntax:
The visibility property can work with four values visible, hidden, collapse, initial, and inherit.
visibility : visible | hidden | collapse | initial | inherit | unset

POSITIONING HTML ELEMENTS
The position CSS property sets how an element is positioned in a document. The
top, right, bottom, and left properties determine the final location of positioned
elements.
Types of positioning values:
 static
 relative
 fixed
 absolute
 sticky

Relative
The element is positioned according to the normal flow of the
document is positioned relative to its normal position, and then
offset relative to itself based on the values of top, right, bottom, and
left. The offset does not affect the position of any other elements;
thus, the space given for the element in the page layout is the same
as if position were static.

Absolute
The element is removed from the normal document flow, and, in the
page layout, no space is created for the element. The element is
positioned relative to the closest positioned ancestor, if there is any;
otherwise, it is placed relative to the initial containing block and its
final position is determined by the values of top, right, bottom, and
left.

APPLYING TRANSITIONS
CSS Transitions are controlled using the shorthand transition
property. This is the best way to configure transitions, as it makes it
easier to avoid out of sync parameters, which can be very frustrating
to have to spend lots of time debugging in CSS.

APPLYING TRANSITIONS
Property of Transitions
 Transition property
 Transition duration
 Transition timing function
 Transition delay

APPLYING ANIMATIONS
CSS animations are great for websites that want to add dynamic,
engaging content without placing much more weight on the page.
Since they don’t require extra scripts, CSS animations are unlikely to
slow down your pages.

IDENTIFYING THE BASIC STRUCTURE OF A TABLE
Tables are important components in HTML. In fact, they exist since
the beginning of the Web and are aimed to aggregate data. They
have become an essential tool to manage graphic layout. With CSS
they are now useful elements to represent information.

ENHANCING TABLES
The foundational tag for table building is the <TABLE> tag, which
must first introduce the table into the document and announce the
end of the table with the </TABLE> tag.
The TABLE tag has several attributes which will allow you more
control over the table's appearance on the page. You can customize
the look of the table using the BORDER, CELLPADDING, and
CELLSPACING attributes.

CREATING WEB PAGES
CREATING WEB PAGES USING FRAMES
Multiple views offer designers a way to keep certain information
visible, while other views are scrolled or replaced.
HTML <FRAME> tag is used to divide up the display area of your
browser into sections. Each section can display a different document.

CREATING WEB PAGES
STYLING FRAMES
iframes defines an inline frame. An inline frame enables you present
another HTML document within the same window.
Inline frames are often used in advertising. Many advertisers and
advertising networks use iframes to display their ad within a
publisher's website.

CREATING WEB PAGES
TYPES OF SCRIPTING
Definition
Scripting languages can perform different actions within a particular
runtime environment, such as automating task execution, enhancing
the functionality of the parent software, performing configurations,
extracting data from data sets, and others.

CREATING WEB PAGES
TYPES OF SCRIPTING
 server-side
 client-side

CREATING WEB PAGES
TYPES OF SCRIPTING
Server-side scripting language
The term server-side scripting language refers to those that run off a
web server. Since it performs from the back-end side, the script is
not visible to the visitor. Because of that, it is a more secure
approach.

CREATING WEB PAGES
TYPES OF SCRIPTING
Client-side scripting language
It is usually performed at the front-end, which makes it visible to
visitors and makes it less vulnerable to exploits and leaks. As such, it
is often used to build user interfaces and lighter functionality such as
that.

CREATING WEB PAGES
IDENTIFYING THE BENEFITS OF JAVASCRIPT
 Simple Syntax
 Speed
 Simplicity
 Popularity
 Interoperability
 Server Load
 Rich interfaces
 Validation on Browser

CREATING WEB PAGES
EMBEDDING A SCRIPT INTO A WEB PAGE
JavaScript is embedded into HTML and XHTML documents using the
<script> element. This element can be used to embed the JavaScript
directly into the web page (also known as inline), or to specify an
external file that contains the JavaScript.

CREATING WEB PAGES
The <script> element is used with a number of attributes:
 defer
 language
 src
 type

CREATING WEB PAGES
language
This argument is used to announce the version of JavaScript that is contained
within the corresponding <script> elements. This argument is now deprecated.
src
Specifies URL of an external file containing the JavaScript. This argument
overrides any JavaScript contained within the body of this <script> element.

CREATING WEB PAGES
type
Indicates to the browser the type of content contained within the
<script> body. This is typically be set to "text/javascript".
As with most HTML elements the <script> body must always be
terminated with the </script> element.

CREATING WEB PAGES
<script type="text/javascript">
// JavaScript code here
</script>

CREATING WEB PAGES
CREATING AND USING AN EXTERNAL FILE
JavaScript code into a separate file with a .js extension, and then call
that file in your document through the src attribute of the <script>
tag, like this:
<script src="func.js"></script>

CREATING WEB PAGES
IDENTIFYING RULES AND CONVENTIONS USED IN JAVASCRIPT
The naming conventions increases readability and makes it easier to
understand your code.
 Naming Convention for Variables
 Naming Convention for Booleans
 Naming Convention for Functions
 Naming Convention for Constants
 Naming Convention for Classes

CREATING WEB PAGES
IDENTIFYING RULES AND CONVENTIONS USED IN JAVASCRIPT
DEFINING VARIABLES
A variable is a container (storage area) to hold data.
Example
let num = 5;

CREATING WEB PAGES
USING OPERATORS
An operator refers to a character that tells the machine to perform a particular
operation.
Types of Operators
 Arithmetic Operators
 Assignment Operators
 String Operators
 Comparison Operators
 Logical Operators
 Conditional Operators
 Bitwise Operators

CREATING WEB PAGES
USING CONDITIONAL CONSTRUCTS
The conditional statements included in the JavaScript code assist
with decision making, based on certain conditions.
The condition specified in the conditional statement can either be
true or false. The conditional statements execute the associated
piece of code only if the condition is true.

CREATING WEB PAGES
Types of conditional statements
An if statement executes a specified code segment if the given condition is
''true.''
An else statement executes the code associated with the else if the given if
condition is ''false.''
An else if statement specifies a new condition for testing when the first if
condition is ''false.''
A switch-case statement specifies multiple alternative code blocks for
execution and executes these cases based on certain conditions.

CREATING WEB PAGES
If Conditional Statement
Remember that the conditional if statement specifies a JavaScript code for execution only if the
given condition is ''true.''
Syntax
if (condition)
{
//code to get executed when the above specified condition is true
}

CREATING WEB PAGES
Else Conditional Statement
When the condition inside the if statement is false, the code
associated with the else statement gets executed.

CREATING WEB PAGES
Syntax
if (condition)
{
//code to get executed when the condition is true
}
else
{
//code to get executed when the 'if' condition fails
}

CREATING WEB PAGES
Else-If Conditional Statement
When the first condition fails, the else if allows the program to
specify some new condition or conditions.

CREATING WEB PAGES
Switch Statement
Use the Switch statement if select one of many blocks of code to be
executed.

CREATING WEB PAGES
USING LOOP CONSTRUCTS
The same block of code to run a number of times. So use looping statements in
the code to do this.
Types of looping statements
while - loops through a block of code while a condition is true
do...while - loops through a block of code once, and then repeats the loop while a
condition is true
for - run statements a specified number of times

CREATING WEB PAGES
while statement
The while statement will execute a block of code while a condition is true.
Syntax
while (condition)
{
// code to be executed
}

CREATING WEB PAGES
do...while statement
The do...while statement will execute a block of code once, and then it
will repeat the loop while a condition is true
Syntax
do
{
code to be executed
}
while (condition)

CREATING WEB PAGES
For statement
The for statement will execute a block of code a specified number of
times
Syntax
for (initialization; condition; finalExpression)
{
code to be executed
}

CREATING WEB PAGES
BREAK STATEMENT
Use the break statement to terminate a loop, switch, or in conjunction
with a labeled statement.
When you use break without a label, it terminates the innermost
enclosing while, do-while, for, or switch immediately and transfers
control to the following statement.
When you use break with a label, it terminates the specified labeled
statement.

CREATING WEB PAGES
continue statement
The continue statement can be used to restart a while, do-while, for,
or label statement.

FUNCTIONS
A function is a block of code that encapsulates one isolated, self-
contained behavior for the computer to perform.
Functions are an important and useful part of programming because
they create reusable code.
Declare a function with the function keyword.

FUNCTIONS
CREATING FUNCTIONS
The general syntax for creating a function
function name(parameter1,parameter2,...)
{
// the code statements to be executed
}

FUNCTIONS
A JavaScript function can be defined using function keyword.
Syntax
//defining a function
function <function-name>()
{
// code to be executed
};
//calling a function
<function-name>();

FUNCTIONS
Function Parameters
A function can have one or more parameters, which will be supplied
by the calling code and can be used inside a function. JavaScript is a
dynamic type scripting language, so a function parameter can have
value of any data type.

FUNCTIONS
DESIGNING AN HTML FORM
HTML Form is a document that stores information of a user on a web
server using interactive controls. An HTML form contains different
kinds of information such as username, password, contact number,
email id, etc.

FUNCTIONS
CREATING FORMS
The <form> element
The <form> element formally defines a form and attributes that
determine the form's behavior. Each time you want to create an HTML
form, you must start it by using this element, nesting all the contents
inside.

FUNCTIONS
EXPLORING FORM ELEMENTS
“HTML Form Elements” are those elements that are used inside a
“<form>” tag, and these elements, along with other standard and
unique attributes, give a form and structure as well, which let the
users know what to do with the form and how to proceed in a
structural manner.

FUNCTIONS
“<form>” element
 <input>
 <label>
 <select>
 <button>
 <option>
 <textarea>
 <optgroup>
 <fieldset>

FUNCTIONS
WORKING WITH BROWSER OBJECTS
The Browser objects are automatically created by a browser at the
time of loading a Web page.
When an HTML document is opened in a browser window, the
browser interprets the document as a collection of hierarchical objects
and accordingly displays the data contained in these objects.

FUNCTIONS
ELEMENTS OF THE BROWSER OBJECT MODEL

FUNCTIONS
document
Contains all HTML elements of the current page.
frames
Any frames embedded within the current page.
history
Contains a stack of sites visited in the current session.

FUNCTIONS
location
Stores URL of the current page.
navigator
Stores information about the browser being used, and the OS used by
the browser.
screen
Display properties of the user's computer or device.

FUNCTIONS
WORKING WITH FORM OBJECTS
form object is a Browser object of JavaScript used to access an HTML form.
If a user wants to access all forms within a document then he can use the
forms array.
The form object is actually a property of document object that is uniquely
created by the browser for each form present in a document.
The properties and methods associated with form object are used to access
the form fields, attributes and controls associated with forms.

FUNCTIONS
Properties of Form Object
action elements[]
encoding length
method name
target button
checkbox FileUpload

Working with Graphics
CREATING A CANVAS
HTML canvas is a way to create illustrations and graphics using
HTML and JavaScript.
A canvas is created in HTML with the <canvas> element.

Set Up HTML Canvas
To add a canvas to a web page, we use the <canvas> tag. <canvas>
adds a rectangular area to the page inside which you can draw
shapes and animations.
Start by placing the following canvas element in the body of HTML
document.

Set Up HTML Canvas
<canvas id="test-canvas" width="300" height="200"></canvas>
The <canvas> tag includes the required id attribute, which allows us
to reference the element in JavaScript.

Shape Canvas
The canvas element is just like any other block-level element on a
web page, consisting of height and width definitions. By default, the
height of a canvas element is set to 150 pixels, and the width is set
to 300 pixels.
We can create many shapes like rectangle, circle, squares, cone, and
other custom shapes. HTML5 provides us many elements to create
different shapes like Canvas curves and Canvas paths.

STYLE CANVAS
A style attribute on a <canvas> tag assigns a unique style to the
canvas.
Its value is CSS that defines the appearance of the canvas.

WORKING WITH PATH
An HTML file path is the location or address of a particular file
resource.
HTML file paths are useful because without them, there’s no way of
introducing or referencing dependencies required for a fully
functional website.

HTML File Paths Types
 HTML Absolute File Paths
 HTML Relative File Paths

TEXT AND IMAGES TRANSFORMING CANVAS ELEMENTS
Text Canvas Element
To add a text to the HTML <canvas> element, we need to use the
fillText() or strokeText() methods, or you can use the combination of
the two.
We can also give color to your text, define the font and size, and
even add gradients.

TEXT AND IMAGES TRANSFORMING CANVAS ELEMENTS
Image Canvas Element
To draw an image using HTML5 Canvas, we can use the drawImage()
method which requires an image object and a destination point.
The destination point defines the top left corner of the image
relative to the top left corner of the canvas.

TRANSFORMING CANVAS ELEMENTS
An affine transform is composed of zero or more linear
transformations (rotation, scaling, or shear) and translation (shift).
Several linear transformations can be combined into a single matrix.
A rotation is a transformation that moves a rigid body around a
fixed point. A scaling is a transformation that enlarges or diminishes
objects.

ANIMATING CANVAS ELEMENTS
To create animations with HTML5, you need shapes and a method
for controlling the live actions.
Recall that you can create shapes, which are JS elements, and
control animations with CSS or through JS.

MANIPULATING HTML ELEMENTS BY USING JQUERY
One very important part of jQuery is the possibility to manipulate the
DOM.
jQuery comes with a bunch of DOM related methods that make it easy
to access and manipulate elements and attributes.
DOM = Document Object Model
The DOM defines a standard for accessing HTML and XML documents.

jQuery Method Description
attr()
Get or set the value of specified attribute of the target
element(s).
prop()
Get or set the value of specified property of the target
element(s).
html() Get or set html content to the specified target element(s).
text() Get or set text for the specified target element(s).
val() Get or set value property of the specified target element.

jQuery attr() Method
jQuery attr() method is used to get or set the value of specified
attribute of DOM element.
Syntax:
$('selector expression').attr('name','value');

jQuery prop() Method
The jQuery prop() method gets or sets the value of specified
property to the DOM element(s).
Syntax:
$('selector expression').prop('name','value');

HANDLING JQUERY EVENTS
In most web applications, the user does some action to perform an
operation. For example, user clicks on save button to save the
edited data in a web page.
Here, clicking on the button is a user's action, which triggers click
event and click event handler (function) saves data.

Event Handling
To handle DOM events using jQuery methods, first get the reference
of DOM element(s) using jQuery selector and invoke appropriate
jQuery event method.

Implementing Hide Effect
Hide HTML elements using the jQuery hide() methods.
The hide() method simply sets the inline style display: none for the
selected elements.
Syntax
$(selector).show(duration,callback);

Implementing Show Effect
jQuery show() method is used to display the hidden html elements.
Running the .show() method on an element that is already being
shown has no effect.
Syntax
$(selector).show(duration,callback);

Implementing Toggle Effect
The toggle() method toggles between hide() and show() for the selected
elements.
This method checks the selected elements for visibility. show() is run if
an element is hidden. hide() is run if an element is visible - This creates a
toggle effect.
Syntax
$(selector).toggle(speed,easing,callback)

IMPLEMENTING SLIDE EFFECT
jQuery Sliding Methods
Image Slider or Image Carousel is a way to display multiple website
images. Fancy pictures can attract a lot of visitors to the website.
With jQuery we can create a sliding effect on elements.

IMPLEMENTING SLIDE EFFECT
jQuery Sliding Methods
jQuery has the following slide methods:
slideDown()
slideUp()
slideToggle()

IMPLEMENTING FADE EFFECT
A CSS fade transition is a stylistic effect in which an element — like
an image, text, or background — gradually appears or disappears
on the page.
A CSS animation is defined with 2 keyframes. One with the opacity
set to 0, the other with the opacity set to 1.

IMPLEMENTING THE GEOLOCATION API
Definition
A Geolocation API is a communication interface between a client
device or application (client-side), and an application or service
(server-side) that identifies and returns information about the client’s
geographical position.

IMPLEMENTING THE GEOLOCATION API
Using HTML Geolocation
The getCurrentPosition() method is used to return the user's
position.

HANDLING ERRORS
The second parameter of the getCurrentPosition() method is used to
handle errors. It specifies a function to run if it fails to get the user's
location.

IMPLEMENTING CLIENT-SIDE STORAGE
Client-side storage allows the user to store data on the client (i.e.
user's browser).

IMPLEMENTING APPLICATION CACHE
HTML5 application caches can be used to store and utilize resources
needed in Web applications, such as HTML, CSS, and JavaScript files,
and images. You can cache certain files in the browser to use them in
an offline state, or define them to be always updated from the server.

Html-Prabakaran

More Related Content

Html-Prabakaran