0% found this document useful (0 votes)

194 views80 pages

HTML5 and Web Design Fundamentals

Uploaded by

rohithsaphcm1990

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as RTF, PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

194 views80 pages

HTML5 and Web Design Fundamentals

Uploaded by

rohithsaphcm1990

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as RTF, PDF, TXT or read online on Scribd

You are on page 1/ 80

Web Designing

HTML & HTML5 CONTENT

HTML5 Introduction HTML5 Drag/Drop
1. Introduction to HTML5 HISTORY 19. Introduction
2. New Features and API 20. Make an Element Draggable
3. Why HTML5? 21. What to Drag?Where to Drop?
4. What Is HTML5? HTML5 Geolocation
5. HTML5 Platform 22. Introduction
6. What: Structural Elements 23. Locate the User’s Position
7. Structural Elements 24. Handling Errors and Rejections
HTML5 Syntax and Semantics 25. The getCurrentPosition()
8. Specifying the DOCTYPE 26. Geolocation object
9. Specifying the Character Set HTML5 Video
10. Specifying the Language 27. Introduction
11. Optimizing <script>s and 28. Video on the Web
<link>s 29. How It Works?
HTML5 Canvas 30. Video Formats and Browser
12. What is Canvas? Support
13. Create a Canvas 31. HTML5 Video Tags
14. Canvas Coordinates HTML5 Audio
15. Canvas – Paths 32. Introduction
16. Canvas – Text 33. Audio on the Web
17. Canvas – Gradients 34. How It Works?
18. Canvas – Images 35. Audio Formats and Browser
Support
36. HTML5 Audio Tags
HTML5 Web Storage
37. Local storage
38. Session storage
CSS3 Overview
Type Script, ANGULAR 5 & PROJECTS CONTENT
Type Script 43. Classes
39. Installing typescript 44. Generics
40. Building typescript code 45. Modules
41. Compiling the code 46. Arrow functions
42. Interfaces Bootstrap concepts:
Bootstrap concepts:

Bootstrap CSS Overview

Download Bootstrap

Bootstrap Grid System

Bootstrap Images

Bootstrap Dropdowns

Etc.,

Angular
47.What is Angular JS and Angular 2
48.What is SPA
49.Getting started with Angular
50.Angular Components
51.Property & Event Binding
52.Class & Style Binding
53.Two way data binding
54.Template Reference Variables
55.Angular Directives
56.Component Interaction
57.Angular Pipes & Filtering
58.Angular Services
59.Angular Form Validations
60.Dependency Injection
61.Routing and Navigation
62.Custom Directives
Projects
1. Classroom Projects
One UI Development Project
Web Designing-HTML

Introduction of HTML:
In 1980, mark up language was developed to create web document or web site, it is called HTML.
Web: Massive (large) collection web documents / web pages.
Web documents carrying hypertext data.
Internet: Internet is a massive (large) network of networks. It connects millions of
computers together globally.
Information that travels over the internet variety of languages known as protocols.
www (world wide web): It is a way of accessing information over the medium of internet.
The web uses browsers (Mozilla Firefox, Internet explorer, Google chrome … etc). Web
documents also contain graphics, sound, text and video.
HTML: [Hyper Text Markup Language]
HTML was interpreted by web client using web browser. It has some vocabulary rules.

Web Server

Internet

Web Client

request

Web HTTP HTTP

Browser response

Web server checks the request resource and it sends the information to the web client in
the same language protocol.

Web Clients Web Servers

2. HTML 1. JSP/ASP/PHP
3. CSS 2. Java Servlets
4. Java Script 3. CGI (Common Gateway Interface)
5. XML

Web Client : These are static in nature.

Markup’s are nothing but a pre-defined elements for a language or it is also known as
Tags (< >). Tags may be Singular or Paired.

Advantages of HTML:
6. It is widely used.
7. Search engines. (Ex: google, yahoo, …… etc)
8. Social Networks. (Ex: facebook, twitter, .... etc)
9. E-Comm. (Ex: tansactions for on-line shopping’s)
10. TV ( TV over internet )
Disadvantages of HTML:
11. It can create only static and plain pages so if we need dynamic pages then HTML is not
useful.
12. Need to write lot of code for making simple webpage.
13. Security features are not good in HTML.
14. If we need to write long code for making a webpage then it produces some complexity.

Structure of an HTML Document:

All HTML documents follow the same basic structure. Two major components are
15. Head section - Control information (Web server/client).
16. Body Section - Actual content of web page.
<html>
<head>
<title>
Welcome to HTML (Head or Header Section)
</title>
</head>
<body>
: (Body Section)
:
</body>
</html>
In every document <html> and </html> tags marks the beginning and the end of the
document. These tags inform the browser that the document is an HTML file. All other HTML
tags must reside within the <html> . . . . .. . </html> tags.
Header or Head Section:
HTML includes a pair of tags, <head> and </head> to identify the heading or title of a
document.
The tag <title> ……. </title> can appear only in this section. The text that exist between
the title tags, appears as the title in the browser’s window and length of it should not exceed
beyond 60 characters.
Body Section:
The body of an HTML document contains the text will show up on the web page. The
body section is enclosed within <body> and </body> tags. It gives a description of the
document’s layout and structure.
Note: 1. If program contains head section then splitting of window is not possible.
2. Heading levels are from <h1> to <h6>. We can use each level any number of times.

Example HTML document

<html>
<head>
<title>
Html document
</title>
</head>
<body>
<h1> Welcome to HTML </h1>
<p> We can learn HTML fast and easy </p>
<p> It is my first web page. </p>
</body>
</html>

- - - - - - - - - - - -

Common Tags:
Tags:
17. Tags are represented by angled brackets. ( < > )
18. They are not case sensitive, i.e <head>, <HEAD> (both are equal)
19. If a browser not understands a tag it will usually ignore it.
20. White space, tabs and new lines are ignored by the browser.

Ex: Body tag, paragraph tag, heading tag, hr tag, font tag, bold tag, italic tag,..etc
- - - - - - - - - - - -

Basic Text Formatting:

Heading Tags:
HTML is having six levels of heading that are commonly used to display headings on the
web page in various sizes. The largest heading tag is <h1>. The different tags are <h1>, <h2>,
<h3>,….<h6>.
Syntax/Represented as: <h1> text </h1>
Ex: <h1> Online Exam </h1>
Alignment attribute for the heading tag:
<h1 align=”left”> Online exam </h1>
It may be left/right/center.

Paragraph Tag: If we want to display text in paragraph we use paragraph tag.

Syntax/Represented as: <p> text </p>
Each paragraph
is aligned to the left, right or center of the page by using an attribute called as align.
Syntax/Represented as: <p align = “value”> text </p>
The possible values are: left, right or center

hr tag: Horizontal lines can be added to the HTML document using <hr> tag. This tag does not
have any closing tag.
Syntax/Represented as: <hr>
Width, colour, size attributes are used in this tag.
<hr width = “value”> The value can be specified in percentage i.e 25%, 50%, 75% and so on.
<hr size=”value”> The thickness of the line in this expressed in terms of pixels.
<hr size =”5” width=”50%” >

Bold tag: This tag is used for implement bold effect on the text.
Syntax/Represented as: <b> HTML </b>

Italic tag: This implements italic effects on the text.

Syntax/Represented as: <i> HTML </i>

Break tag <br>: This tag is used to break the line and start from the next line.
Syntax/Represented as: <br>

Body tag: The body of an HTML document contains the text will show up on the web page.
Attributes are: <body bgcolor=”value”> ………… </body>
<body text=”value”> ………… </body>
<body bgcolor=”#0000FF” text=”FF0000”> ………… </body>

Font Tag: This sets font size, color and relative values for a particular text.
Syntax/Represented as: <font face=”value” size=”value” color=”value”>
Ex: <font face=”Arial” size=”10” color=”#FF0000”>
Attributes are:
Face: This attribute is used to set the font style.
21. <font face=”value”> Text </font>
Few of the values for the face attribute are given below:
63. Arial
64. Times new Roman font
65. Arial Black
66. Impact
Size: This attribute is used to specify the size of the text.
<font size=”value”> Text </font>
The possible values are : 1,2,3 and so on. <font size=”1”>
The text will displayed in 8pt size, if the size is 2 then text as 10pt, 3 is 12pt and
so on.
Color: This attribute is used to specify the color of the text.
<font color=”value”> Text </font>
Color Hexadecimal
value

Red #FF0000

Green #00FF00

Blue #0000FF

White #FFFFFF

Black #000000

Gray #808080

Dark #800000
Red

Dark #008000
Green

Dark #000080
Blue

Yellow #FFFF00

Magenta #FF00FF

Cyan #00FFFF

Additional Text Formatting:

Sub and sup tag: These tags are used for subscript and superscript effects on the text.
Syntax/Represented as: <p> This is my 2 <sup> nd </sup> program using HTML </p>
<p> H <sub> 2 </sub> O </p>

Strike effect: It is used to display the text in the browser, which has been striked and is
normally used to highlight the text.
Syntax/Represented as: <strike> Gopi Krishna </strike>
Marquee tag: It is used to display content or image in moving or scrolling. By default it will
move around the web page from right to left.
Syntax/Represented as: <marquee> gopi </marquee>
<marquee direction=right>SAI</marquee>

Example HTML document/ Create simple web page.

<html>
<head>
<title> Heading in HTML </title>
</head>
<body>
<h1 align=”center”> Heading is created using H1 tag </h1>
<h2 align=”center”> Heading is created using H2 tag </h2>
<h3 align=”center”> Heading is created using H3 tag </h3>
<h4 align=”center”> Heading is created using H4 tag </h4>
<h5 align=”center”> Heading is created using H5 tag </h5>
<h6 align=”center”> Heading is created using H6 tag </h6>

</body>
</html>

Create web page document for font tag, break tag and paragraph tag.
<html>
<head>
<title> Font Styles </title>
</head>
<body>
<p> <font face=”Arial” size=4 color=”blue”>
<B><I>
To specify the beginning of the paragraph and the end of
paragraph, </p>
<p> tag is used. </p>
</font> <br>
<p align=”center”>
<font face=”Arial” size=4 color=”Green”>
Siddartha Degree & PG College <Br>
Nalgonda. 508001 </p>

</font>
</body>
</html>

- - - - - - - - - - -

Lists: A list is collection of items. A list may contain any number of sub lists.
We can arrange items in lists in several ways. HTML, supports three types
22. Ordered list (Numbered list)
23. Unordered list (Bulleted list)
24. Definition list

Ordered List (Element OL): The element OL defines an ordered list. The element contains one
or more list elements.
<OL start=”number” type=”value”> Text to be displayed
</OL>
Attributes are: Start: Starting alpha/number/roman (a/A/i/I/1)
Type: Type of ordered list (a/A/i/I/1)
Here the ‘value’ attribute can be
A – Uppercase Alphabetic
a – Lowercase Alphabetic
I – Uppercase roman
i – Lowercase roman
1 – Decimal number (used by default)

Ex: Create a web page using Ordered list.

<html>
<head>
<title>
1st year subjects (OL)
</title>
</head>
<body>
First year I sem
<ol start=a type=a>
<li> English-1 </li>
<li> Maths-1 </li>
<li> Maths-2 </li>
<li> Physics-1 </li>
<li> Chemistry-1 </li>
</ol>

First year II sem

<ol start=11 type=1>
<li> C </li>
<li> Maths-3 </li> <li> Maths-4 </li>
<li> Physics-2 </li> <li> Chemistry-2 </li>
</ol>
</body>
</html>

Unordered List (Element UL): The element UL defines an unordered list. The element contains
one or more list elements.
<UL type=value> Text to be displayed
</UL>
Here the “value” can follow these symbols like disc, circle and square.
Attributes are: Type: circle, square and disc

Ex: Create a web page using Unordered list.

<title> 2nd year subjects (UL)

</title>
</head>
<body>
<h2> B.Com. (Computers) </h2>
<b> <u> <i> Second year I sem </b> </u> </i>
<ul type=circle>
<li> C language </li>
<li> Comm.-1 </li>
<li> E.Comm.-1 </li>
<li> English-1 </li>
<li> Economics-1 </li>
</ul>
<b> <u> <i> Second year II sem </b> </u> </i>
<ul type=square>
<li> C++ </li>
<li> Comm.-2 </li>
<li> E.Comm.-2 </li>
<li> English-2 </li>
<li> Economics-2 </li>
</ul>
</body>
</html>
Definition List (Element DL): The DL element defines a definition list. A definition list is a set
of definitions, references or cross indexes.
<dl> Text </dl>
Definition list has two parts:
25. Definition term (<dt>)
26. Definition description (<dd>)

Ex: Create a web page using Definition list.

<html><head>
<title> Definition List </title>
</head>
<body>
<dl>
<dt> <h2> Java </h2> </dt>
<dd>
Java is the object oriented language, because without the concept
of classes and objects you cannot write even simple programs.
</dd>
<dt> <h2> HTML </h2> </dt>
<dd> HTML stands for hyper text markup language. It is not case
sensitive. It is used to create web pages.
</dd>
</dl>
</body>
</html>

O/p web page:-

- - - - - - - - - - - -

Hyper Link: To navigate (link) from one page to other (or) same page/image.
Hyper links are two types.
i) External ii) Internal
<a> anchor tag is used to hyper link.
Syntax: <a href=”URL” > text-to-click </a>
<a name=value> - - - - </a>
Attributes are: href: Hypertext Reference that contains the URL (Uniform Resource Locator)
Which is the address or location of the link.
name: This attribute of the anchor tag is used to identify a location within the
same HTML document.
i) External link: <a href=”file”> Text </a>
ii) Internal link: <a href=”#file”> Text </a>

i. Create a web page using External link

<html>
<head>
<title> Hyper link EL </title>
</head>
<body>
<h1 align=center> Working with Hyperlinks </h1>
<a href="first.html"> 1. Working with headings </a> <br>
<a href="second.html"> 2. Working with image </a>
</body>
</html>
ii. Create a web page using Internal link
<html>
<head> <title> Hyper link IL </title> </head>
<body>
<h1 align=center> <u> Working with Hyperlinks </u> </h1>
<a name=”Section-A”>
<a href="#section-B"> Section-B </a> <br>
<a href="#section-C"> Section-C </a> <br>
<a name=”section-B”> this is section-A </a> <br>
<a href="#Section-A"> Section-A </a>
<a name=”Section-C”> this is section2 </a> <br>

<a href="#Section-A"> Section-A </a>

</body>
</html>
Image tag <img>: This tag is used to including images (in-line images) in HTML.
Syntax/Represented as: <img src=”file”>

The most common image types on the web are .GIF, .JPG and .PNG

Attributes or: src/SRC It is used to specify the name of the image.

align It is used to display the image top, bottom or middle.
border It is used to set the border around the image. The possible
values are 1,2,3 and so on. By default value is zero (0).
width It is used to set the image width
height It is used to set the image height

<img src=”gopi.jpg” align=”top” border=”5” width=”50%” height=”50”>

Advanced E-mail Links or Creating links to an email address:

<a href=”mailto:value”> Text </a>
Ex: <a href=”mailto: [email protected]”> Email Me! </a>
<a href=”mailto: [email protected]”> E-mail </a>
- - - - - - - - - - - -
Example HTML code for anchor tag.
<html> IMAGE

<head>
<title> Anchor tag </title>
</head>
<body>
<a href="2.gif"> IMAGE </a>
</body>
</html>
- - - - - - - - - - - -

Video and Audio to your web pages:

Video: The <video> tag specifies video, such as a movie clip or other video streams. There are 3
(three) supported video formats for the <video> element: MP4, WebM and ogg:
How it works:
The controls attribute adds video controls, like play, pause and volume. It is a good idea
to always include width and height attributes. The source (src) element allows you to specify
alternative video files. The text between the <video> and </video> tags will only be displayed in
browser that do not support the <video> element.
Ex: <video width=”320” height=”240” controls>
<source src=”movie.m4” type=”video/mp4”>
<source src=”movie.ogg” type=”video/ogg”>
Your browser does not support the video tag.
</video>
Audio: The <audio> tag specifies audio, audio files could only be played in a browser. There are
3 (three) supported audio formats: MP3, Wav and ogg:

How it works:
The controls attribute adds audio controls, like play, pause and volume. The source (src)
element allows you to specify alternative audio files. The text between the <audio> and </audio>
tags will only be displayed in browser that do not support the <audio> element.
Ex: <audio controls>
<source src=”horse.ogg” type=”audio/ogg”>
<source src=”horse.mp3” type=”audio/mpeg”>
Your browser does not support the audio element.
</audio>
- - - - - - - - - - - -

Tables: Introducing Tables, Grouping Section of a Table, Nested Tables, Accessing Tables
HTML table consists of rows, columns and cell.
i. Tables are defined with the <table> tag.
<table> - - - - - </table>: This tag marks the beginning and end of the table.
Syntax: <table align=”value” border=”value” cell padding=”value” cell spacing=”value”
Width=”value”>
----
----
</table>
Table tag attributes:
align: Specifies the alignment of the table in the page. Values are left/right/center.
border: Specifies the width of the border to be drawn around all table cells. By default,
there is no border drawn. Values possible are 1,2,3 and so on.
cell padding: The space between the content and inside edge of a cell. Values are 1,2,3 and so on.
cell spacing: The amount of space between cells in a table. Values are 1,2,3 and so on.
width: It specify the width of the table. The maximum size of the monitor in pixels.
ii. The <table> tag contains rows of cells, defined with the <tr> tag.
<tr> - - - - </tr>: This tag are used to beginning and end of the row.
Syntax: <tr bgcolor=”value”>
----
</tr>
tr tag attribute:
bgcolor: This attribute is used to set the background colour of the row.
iii. Each <tr> tag contains data cell, defined with the <td> tag
<td> - - - - - </td> This tag are used to beginning and end of the data.
syntax: <td align=”value” colspan=”value” rowspan=”value”>
----
</td>

td tag attribute:
align: The align attribute checks the horizontal alignment of the text within the cell.
Values could left/right/center.
clospan: The colspan attribute checks the width of the cell in terms of number of
columns. Used when a cell occupies more than one column.
rowspan:The rowspan attribute checks the height of the cell in terms of number of
rows. Used when a cell occupies more than one row.

iv. Each data cell contains whatever you want links, images, lists or even other tables.

Create a web page using table tag. (Sample table for 2x2 matrix)
<html> Output:

<head> <title> HTML Table </title> </head>

Create a web page using table tag with attributes. (Sample table for 2x2 matrix)
<html> Output:

<head> <title> HTML Table </title>

</head>
<body>
<table align=center border=1 width="75" bgcolor="yellow">
<tr> <td align=center> 1 </td> <td align=center> 2 </td> </tr>
<tr> <td align=center> 3 </td> <td align=center> 4 </td> </tr>
</table>
</body>
</html>
v. Table captions and headers:

This tag is used to title/caption for a table, it describes the contents of the table.
caption tag attribute: align: Specifies the location of the caption.
Valid options are top/bottom
<th> - - - </th>
This tag is used to give column heading which names the information stored in it.

Create a super market web page using table, tr, th & td tag.
<html>
<head> <title> Supermarket </title> </head>
<body>
<h1 align=center> Super Market </h1>
<hr align=center width="20%">
<table align=center border=1>

<tr> <th align=center> S.No. </th>

<th align=center> Item </th>
<th align=center> qty </th>
<th align=center> price </th>
</tr>
<tr> <td align=center> 1 </td>
<td align=center> pen </td>
<td align=center> 5 </td>
<td align=center> 10 </td>
</tr>

<tr> <td align=center> 2 </td>

<td align=center> book </td>
<td align=center> 5 </td>
<td align=center> 50 </td>
</tr>
<tr> <td align=center> 3 </td>
<td align=center> pencil </td>
<td align=center> 2 </td>
<td align=center> 5 </td>
</tr>
</table>
</body>
</html>

Create a student address details web page using table, tr, colspan, th & td tag.
<html>
<head> <title> Student address </title> </head>
<body>
<h1 align=center> <u> Siddartha Degree & PG College </u> </h1>
<table align=center border=1>
<tr> <th align=center colspan=3> Student Address </th> </tr>
<tr> <th align=center> Hno </th>

<th align=center> Vill. </th>

<th align=center> Mandal </th>
</tr>
<tr> <td align=center> 1-1-11 </td>
<td align=center> nlg </td>
<td align=center> nlg </td>
</tr>
<tr> <td align=center> 2-2-22 </td>
<td align=center> nlg </td>
<td align=center> nlg </td>
</tr>
</table>
</body>
</html>

vi. Table header, footer, tbody and column group:

Create a student marks details web page using table, caption, tr, colspan, th & td tag.
<html>
<head> <title> Student Marks </title> </head>
<body> <h1 align=center> <u> Siddartha Degree & PG College </u> </h1>
<h3 align=center> <u> B.Com (Computer) </u> </h3>
<h4 align=center> <u> Marks List (I-Sem) for the Academic year 2017-18</u> </h4>
<table align=center border=1>
<caption> Consolidated Marks Report </caption>
<colgroup width=”30%” span=”2”> </colgroup>
<colgroup span=”3”> </colgroup>
<thead bgcolor=”blue”>

<tr> <th colspan=5> <u> I-Sem Maks </u> </th> </tr>

</thead>
<tbody>
<tr> <td> first <td> second <td> third <td> four <td> five <td> six </tr>
<tr> <td> 1 <td> 2 <td> 3 <td> 4 <td> 5 <td> 6 </tr>
</tbody>
<tfoot>
<tr> <th colspan=5> Table footer </tr>
</tfoot>

</body>
</html>

- - - - - - - - - - - -

Forms: Introducing Forms:

HTML forms are used to pass data to a server. or HTML Forms are required to collect
different kinds of user inputs.
A form can contain input elements like text fields, check boxes and radio buttons, submit
buttons and more. A form can also contain select lists, text area and password elements.
The <form> tag is used to create an HTML from as follows,
Syntax: <form> Input elements </form>

Input element: This is most commonly used element in HTML, it is used to read the input value.
The most important form element is the input element. An input element can be of type
text field, checkbox, password, radio button, submit button and more.
Attributes are: type: It specifies the type of the field
name: It gives the name to the created field.
value: It specifies the value to the field

Text field: Defines a one-line input field that a user can enter text into this field.
Represented as, <input type=”text” />
Example: <form>
First name: <input type=”text” name=”firstname”/> <br>
Last name: <input type=”text” name=”lastname”/>
</form>
Ex: Create a web page to read input text field.

<html>
<head>
<title> Text Field </title>
</head>
<form>
<label for="username">Username:</label>

<input type="text" name="username" id="username">

or
Username: <input type="text" name="username">
</form>
</html>
---- ----
Password: Defines a password field. It is similar to text field, the only difference is characters
in password field are asterisks or dots.
Represented as, <input type=”password”/>
Example: <form>
password: <input type=”password” name=”pwd”/>
</form>
Ex: Create a web page to set password.

<html>
<head> <title> password </title> </head>
<form>
<label for="user-pwd">Password:</label>
<input type="password" name="user-password" id="user-pwd">
or
Password: <input type="password" name="user-password">
</form>
</html>
---- ----

Radio Buttons: Defines a radio button, Radio buttons let a user select only one, one of a limited
number of choices,
Represented as, <input type=”radio”/>

Example: <form>
<input type=”radio” name=”sex” value=”male”/> Male <br/>
<input type=”radio” name=”sex” value=”female”/> Female
</form>

Ex: Create a web page to insert radio button.

<html>
<head> <title> Radio </title> </head>
<form> <input type="radio" name="sex" id="male">
<label for="male">Male</label>
<input type="radio" name="sex" id="female">
<label for="female">Female</label>
or
<input type="radio" name="sex" id="male"> Male
<input type="radio" name="sex" id="female"> Female
</form>
</html>
---- ----
Checkboxes: Defines a checkbox. Checkboxes let a user select one or more options of a limited
number of choices.
Represented as, <input type=”checkbox” />

Example: <form>
<input type=”checkbox” name=”vehicle” value=”Bike”/> I have a bike <br/>
<input type=”checkbox” name=”vehicle” value=”care”/> I have a car <br/>
</form>
Ex: Create a web page to insert checkbox (sports details).

<html>
<head> <title> Games </title> </head>
<form>
<input type="checkbox" name="sports" id="kabadi">
<label for="kabadi">Kabadi</label> <br>
<input type="checkbox" name="sports" id="cricket">
<label for="cricket">Cricket</label> <br>
<input type="checkbox" name="sports" id="baseball">
<label for="baseball">Baseball</label>
or
<input type="checkbox" name="sports" id="kabadi"> Kabadi <br>
<input type="checkbox" name="sports" id="cricket"> Cricket <br>
<input type="checkbox" name="sports" id="baseball"> Baseball
</form>
</html>
---- ---

File Select Box: Define a file select box. The file fields allow a user to browse for a local file
and send it as an attachment to the form data. Text box with a button that enables the user to
browse for a file. However, the user can also type the path and name of the file in the text box.
Represented as, <input type=”file” />
Ex: Create a web page to upload file.

<html>
<head> <title> fileupload </title> </head>
<form> <label for="file-select">Upload:</label>
<input type="file" name="upload" id="file-select">
or
Upload:<input type="file" name="upload">
</form>
</html> ---- ---

Textarea: Textarea is a multiple-line text input control that allows a user to enter more than one
line of text.
Represented as: <textarea> Text </textarea>

Ex: Create web page is used to accept textarea.

<html>
<head> <title> Textarea </title> </head>
<form>
<label for="address">Address:</label>
<textarea rows="3" cols="30" name="address" id="address"> </textarea>
or
TextArea:<textarea rows="3" cols="30" name="textarr" > </textarea>
</html>

Select Boxes: A select box is a dropdown list of options that allows user to select one or more
option from a pull-down list of options. Select box is created using the <select> element
and <option> element.

Represented as: <select name="String">

<option value="String1"> String1</option>
<option value="String2"> String2</option>
:
</select>

Ex: Create web page is used Select Boxes. (Branches in a College)

<title> Select Box </title>

</head>
<body>
<form>
Branches: <select name="branches">
<option value="cse"> CSE </option>
<option value="ece"> ECE </option>
<option value="it"> IT </option>
</select>
</form>
</body>
</html>

Submit and Reset Buttons: A submit button is used to send the form data to a web server.
When submit button is clicked the form data is sent to the file specified in the form's action
attribute to process the submitted data. A reset button resets all the forms control to default
values.

Represented as: <input type="submit" value="Submit">

Ex: Create web page is submit and reset.

<html>

<head>
<title> Submit Reset </title>
</head>
<body>
<form>
<form action="action.php" method="post">
File Name: <input type="text" name="first-name">
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
</body>
</html>

Ex: Create a web page using Form.

<html>
<head>
<title>
Form1
</title>
</head>
<form>
<fieldset>
<legend>Log In</legend>
<label>Username: <input type="text"> </label>
<label>Password: <input type="password"> </label>
<input type="submit" value="Submit">
</fieldset>
</form>
</html>
Application form:

<html>
<head> <title> Form </title>
</head>
<body>
<FORM>
Name : <input type=”text” name=”cndname”> <br>
<input type="radio" name="sex"> Male
<input type="radio" name="sex"> Female <br>
FName: <input type=”text” name=”fname”> <br>
</form>
</body>
</html>

Ex: Create Bio-Data for using HTML

<html> <head> <title> Bio-Data </title> </head>
<body> <style> h2 { color: Red; } </style>
<h2 align=center> <b> <u> Bio-Data </u> </b> </h2>
<font color="Blue">
<label for="name"> Name : </label>
          
<input type="text" name="nm" size=40> <br><br>
Father Name:  <input type="text" name="ftnm" size=40> <br><br>
Mother Name: <input type="text" name="mtnm" size=40> <br> <br>
D.o.B:             

<option> 15 </option> <option> 16 </option>

<option> 17 </option> <option> 18 </option>
<option> 19 </option> <option> 20 </option>
<option> 21 </option> <option> 22 </option>
<option> 23 </option> <option> 24 </option>
<option> 25 </option> <option> 26 </option>
<option> 27 </option> <option> 28 </option>
<option> 29 </option> <option> 30 </option>
<option> 31 </option>
</select>    
<select name="Month">
<option value="Month"> Month </option>
<option value="Jan"> Jan </option>
<option value="Feb"> Feb </option>
<option> Mar </option> <option> Apr </option>
<option> May </option> <option> June </option>
<option> July </option> <option> Aug </option>
<option> Sep </option> <option> Oct </option>
<option> Nov </option> <option> Dec </option>
</select>    
<select name="Year">
<option value="Year"> Year </option>
<option value="2019"> 2019 </option>
<option value="2018"> 2018 </option>
<option> 2017 </option> <option> 2016 </option>
<option> 2015 </option> <option> 2014 </option>
<option> 2013 </option> <option> 2012 </option>
</select> <br><br>
Gender:       
<input type="Radio" name="gender"> Male
<input type="Radio" name="gender"> FeMale <br> <br>
<font size=4><b> <u> Qualification: </b> </u> <br> </font>
<table align="center" border=2>
<tr> <th> Course </th> <th> Institute </th>
<th> Year </th> <th> University </th>
<th> Per </th>
</tr>
<tr> <td align="center"> SSC </td>
<td align="center"> SSC </td>
<td align="center"> 1990 </td>
<td align="center"> SBCE </td>
<td align="center"> 100 </td>
</tr>
<tr> <td align="center"> Diploma </td>
<td align="center"> Diploma </td>
<td align="center"> 1993 </td>
<td align="center"> SBTET </td>
<td align="center"> 70.50 </td>
</tr>
<tr> <td align="center"> B.Tech (CSE) </td>
<td align="center"> B.Tech. </td>
<td align="center"> 1997 </td>

<td align="center"> JNTUH </td>

<td align="center"> 63.41 </td>
</tr>
<tr> <td align="center"> M.Tech (CSE) </td>
<td align="center"> M.Tech </td>
<td align="center"> 2000 </td>
<td align="center"> JNTUH </td>
<td align="center"> 8.4 GPRS </td>
</tr>
</table> <br>
<font size=4><b> <u> Hobbies: </b> </u> <br> </font> <br>
        
<input type="checkbox" name="hbs"> Wathing TC <br>
        
<input type="checkbox" name="hbs"> Playing Cricket <br>
        
<input type="checkbox" name="hbs"> Reading book <br>
        
<input type="checkbox" name="hbs"> Group Discursion <br>
<br> <br>
<font size=4><b> <u> Softwares known : </b> </u> <br>
<font size=4><b> <u> Packeges : </b> </u> <br> </font> <br>
<font size=2 color="Green"> <b>
         Ms-Office <br>
         DTP <br>
         Pagemaker <br>
         Photo Shop <br>
</b> </u> <br> </font> <br>
<font size=4><b> <u> Languages : </b> </u> <br> </font> <br>
<font size=2 color="Green"> <b>
         C <br>
         C++ <br>
         WT <br>
         Java <br>
<br><br> <font color="Blue">
<p align="right"> <b> Signature </b> </p>
</font> </font>
</body>
</html>
- - - - - - - - - - - -

Frames: Introducing Frameset, <frame> Element:

Frames are used to display more than one HTML document in the same browser window.
Each HTML document is called a frame and each frame is independent of the others.
Advantages:
27. Frames provides technical and sophisticated appearance to the website.
28. It facilitates to reduce down loading time and improves the usability of website.
29. Frames generally include navigation (link), headers or footers, which help user to find
and navigate to required information.
30. It separates contents of website from navigation elements, which is useful for website
maintenance and content modification.
Disadvantages:
31. Some smaller devices cannot cope with frames often because their screen is not big
enough to be divided up.
32. Sometimes your page will be displayed differently on different computers due to
different screen resolution.
33. The browser's back button might not work as the user hopes.
34. There are still few browsers that do not support frame technology.

Creating Frames and Nested Framesets:

To use frames on a page we use <frameset> tag instead of <body> tag. The <frameset>
tag defines how to divide the window into frames. The rows attribute of <frameset> tag defines
horizontal frames and cols attribute defines vertical frames. Each frame is indicated by <frame>
tag and it defines which HTML document shall open into the frame.
Example-1: To create three horizontal (rows) frames
<!DOCTYPE html>

<html> <head> <title>HTML Frames</title> </head>

<frameset rows="10%,80%,10%">
<frame name="top" src="top.html" />
<frame name="main" src="main.html" />
<frame name="bottom" src="bottom.html" />
<noframes>
<body>
Your browser does not support frames.
</body>
</noframes>
</frameset>
</html>
top.html
<body bgcolor=Yellow>
<h1> Top Frame </h1>
<font face=Arial size=”8” color=red>
<p> This is the Top Frame color is red and size is 8 pixels. </p>
</body>
main.html
<body bgcolor=blue>
<h1> Main Frame </h1>
<font face=Arial size=”8” color=red>
<p> This is the Main Frame color is red and size is 8 pixels. </p>
</body>
bottom.html
<body bgcolor=green>
<h1> Bottom Frame </h1>
<font face=Arial size=”8” color=red>
<p> This is the Bottom Frame color is red and size is 8 pixels. </p>
</body>

Example-2: To create three vertical (columns) frames

<!DOCTYPE html>
<html>
<head> <title>HTML Frames</title> </head>
<frameset cols="25%,50%,25%">
<frame name="left" src="top.html" />
<frame name="center" src="main.html" />
<frame name="right" src="bottom.html" />
<noframes>
<body> Your browser does not support frames. </body>
</noframes>
</frameset>
</html>
top.html
<body bgcolor=Yellow>
<h1> Top Frame </h1>
<font face=Arial size=”8” color=red>
<p> This is the Top Frame color is red and size is 8 pixels. </p>
</body>

main.html
<body bgcolor=blue>
<h1> Main Frame </h1>
<font face=Arial size=”8” color=red>
<p> This is the Main Frame color is red and size is 8 pixels. </p>
</body>
bottom.html
<body bgcolor=green>
<h1> Bottom Frame </h1>
<font face=Arial size=”8” color=red>
<p> This is the Bottom Frame color is red and size is 8 pixels. </p>
</body>

Frameset Attributes are:

rows: Specifies the number of horizontal windows or frames
cols: Specifies the number of vertical windows or frames
border: Specifies the width of the border of each frame in pixels.
frameborder: Specifies the whether a three-dimensional border should display between frames (0/1)
framespacing: Specifies the amount of space between in frames in a frameset.

Frame Attributes are:

src: It determines name of the document page this is to be display in the frame window
name: Gives a name to the frame window.
Margin width: Set the left and the right margins in the frame.
Margin height: Set the top and bottom margins in the frame.
noresize: It prevents a user being able to resize the frame.
scrolling: Specifies if the window can have scrollbars or not (values are yes/no/auto)
longdesc: It provide a link to another page containing a long description of the
contents of the frame.
- - - - - - - - - - - -

2. Create a Contact page

<html> <head> </head>
<body text="white" bgcolor="purple">
<h1><center> <b><u><big> Contact
</big></u></b></center> </h1>
<p> * Contact : 9441915553 <br>
* E-mail : [email protected] <br>
* Padma nagar <br>
* Nalgonda-508001 <br>
* Telangana, India. <br>
</p>
</body>
</html>

3. Create a Java page

<html> <head> </head>
<body text="red" bgcolor="vilet">
<h1><center> <b><u><big> Java
</big></u></b></centr> </h1>
<font color="blue" size=5>
<p> Java also called Object Oriented Programming
language. </p>
</body>
</html>

4. Create a Ms-Office page

<html> <head> </head>
<body text="white" bgcolor="green">
<h1><center><u><b> Ms-Office </b></u></center></h1>
<p> Micro-Soft Word (or) word is a word processor
it is release in Oct 25, 1983. 35 years ago
(as mul-platform IA-32, X64, ARM) <br>
Type-Word processor <br>
Licence-Trailware <br>
Website - Products.office.com/word </p>
</body>
</html>

5. Create frame1
<html><head> </head>
<body text="green" bgcolor="red">
<img src="Tulips.jpg" width="50" height="50">
<h1> <center> Welcome to my web-page </center> </h1>
</body>
</html>

6. Create frame2
<html><head> </head>
<body text="blue" bgcolor="pink">
<pre> <p><b> Home Ms-Office Java Contact
</b> </p> </pre>
</body>
</html>

7. Create frame3
<html> <head> </head>
<body bgcolor="yellow">
<b> <font size="5"> <br><br>
<a href="file:///E:/links%20frames/home.html" target="frame4">
Home </a> <br><br>
<a href="file:///E:/links%20frames/Java.html" target="frame4">
Java </a> <br><br>
<a href="file:///E:/links%20frames/msoffice.html" target="frame4">
Msoffice </a> <br><br>
<a href="file:///E:/links%20frames/contact.html" target="frame4">
Contact </a> </font> </b>
</body>
</html>

8. Create frame4
<html> <head> </head>
<body bgcolor="black"> </body>
</html>

9. Create frame5
<html> <head> </head>
<body text="yellow" bgcolor="brown">
<marquee behavior="alternate" scrollamount=10 bgcolor="blue">
<b> <u> <i> Job notification <br>
only state telangana <br>
for latest updates <br>
contact : 9441915553
</b></u></i>
</marquee>
</body>
</html>

10.Create main page (linking page – my web page)

<html> <head> </head>
<frameset rows="20%,15%,*" border="0">
<frame name="frame1" src="frame1.html" noresize/>
<frame name="frame2" src="frame2.html" noresize/>
<frameset cols="20%,60%,20%" border="0">
<frame name="frame3" src="frame3.html" noresize/>
<frame name="frame4" src="frame4.html" noresize/>
<frame name="frame5" src="frame5.html" noresize/>
</frameset>
</frameset>
</html>
2. Create a Time Table
<html>
<head> <title> Time Table </title>
<style> h1{color:blue} h2{color:red}
</style>
</head>
<body><h1 align="center"> <u>
Siddartha Degree & PG College
</u> </h1>
<h2 align="center"> <u>
Time Table </u> </h2>
<h3 align="center"> <u>
B.Sc. (MPCs) VI-Sem </u> </h3>
<p align="right"> Date: 02-01.2019 </p>
<table border="5" align="center">
<tr> <th align="center"> Day/Period </th>
<th align="center"> 9.30-10.20 </th>
<th align="center"> 10.20-11.10 </th>
<th align="center"> 11.10-12.00 </th>
<th align="center"> 12.00-12.50 </th>
<th align="center"> 12.50-1.40 </th>
<th align="center"> 1.40-2.30 </th>

<th align="center"> 2.30-3.20 </th> </tr>

<tr> <td align="center"> Mon </td>
<td align="center"> Phy-I </td> <td align="center"> Phy-II </td>
<td align="center"> Maths-I </td> <td align="center"> Math-II </td>
<td rowspan="7" align="center"> Lunch </td>
<td align="center"> WT </td> <td align="center"> CN</td>
</tr>
<tr> <td align="center"> Tue </td> <td align="center"> Phy-I </td>
<td align="center"> Phy-II </td> <td align="center"> Maths-I </td>
<td align="center"> Math-II </td> <td align="center"> WT </td>
<td align="center"> CN</td>
</tr>
<tr> <td align="center"> Wed </td> <td align="center"> Phy-I </td>
<td align="center"> Phy-II </td> <td align="center"> Maths-I </td>
<td align="center"> Math-II </td> <td align="center"> WT </td>
<td align="center"> CN</td>
</tr>
<tr> <td align="center"> Thru </td> <td align="center"> Phy-I </td>
<td align="center"> Phy-II </td> <td align="center"> Maths-I </td>
<td align="center"> Math-II </td> <td align="center"> WT </td>
<td align="center"> CN</td>
</tr>
<tr> <td align="center"> Fri </td> <td align="center"> Phy-I </td>
<td align="center"> Phy-II </td> <td align="center"> Maths-I </td>
<td align="center"> Math-II </td> <td align="center"> WT </td>
<td align="center"> CN</td>
</tr>
<tr> <td align="center"> Sat </td> <td align="center"> Phy-I </td>
<td align="center"> Phy-II </td> <td align="center"> Maths-I </td>
<td align="center"> Math-II </td> <td align="center"> WT </td>
<td align="center"> CN</td>
</tr>
</table>
<br> <table border="5" align="center">
<tr> <th align="center"> S.No. </th>
<th align="center"> Subject </th>
<th align="center"> Faculty Name</th>
</tr>
<tr> <td> 1 </td> <td> Phy-I </td> <td> x </td> </tr>
<tr> <td> 2 </td> <td> Phy-II </td> <td> y </td> </tr>
<tr> <td> 3 </td> <td> Maths-I </td> <td> z </td> </tr>
<tr> <td> 4 </td> <td> Maths-II </td> <td> m </td> </tr>
<tr> <td> 5 </td> <td> WT </td> <td> n </td> </tr>
<tr> <td> 6 </td> <td> CN </td> <td> p </td> </tr>
</table>
<p> <center> <pre>
HoD Principal </pre>
</body>
</html>

Cascading Style Sheets:

Cascading Style Sheets: Introducing CSS:
CSS stands for Cascading Style Sheets. CSS is a simple mechanism for
adding styles (font, color and spacing) to web document.
Benefits of CSS:
35. CSS Saves Time: We can write CSS at one time and reuse it whenever required
in HTML.
36. Pages Load Faster: Just write one CSS rule of a tag and apply it to all the
occurrence of that tag. So, less code means faster download times.
37. Superior Styles to HTML: CSS has a much wider array of attributes that
HTML, so you can give a far better look to our HTML page in comparison to
HTML attributes.
38. Multiple Device Compatibility: The some HTML document, different versions
of website can be presented for handheld devices such a cell phones or for
printing.
---- ----
Basic syntax and structure:
A CSS rule-set consists of a selector and a declaration block:

The selector points to the HTML element you want to style.

Types of Style Sheet:

* Inline Style Sheet * Internal Style Sheet
* External Style Sheet * Embedded Style Sheet
* Imported Style Sheet * Nested (Multiple) Style Sheet

Inline Styles:
An inline style can be to applied to individual (unique or single) elements in the Web page.

Attributes are: Style

Syntax:<HTML style=”property:value”>
Ex: <p Style={color: red} >
Create a web document using Inline Style.
<html>
<head> <title> Inline </title> </head>
<body>
<h1 style="color:blue; margin-left:30px;”>
This is a heading
</h1>
<p>This is a paragraph.</p>
</body>
</html>

Internal Style Sheet:

An internal style sheet can be used if one single document(page) has a unique style.
Internal styles are defined inside the <head> section of an HTML page, by using the <style> tag.

Syntax/Example:
<head> <style type=”text/css”>
body { background-color: yellow}
p { color: blue}
</style>
<head>

Create a web document using Internal Style Sheet.

<html>
<head> <title> Internal </title>
<style type=”text/css”>
body { background-color: yellow}
p { color: blue}
</style>
</head>
<body> <h1 align=center> Html Page </h1>
<p>This is Html Page</p>
</body>
</html>

External Style Sheet:

Style rules must be written in a document and saved in a separate file with an extension
of .css. Then this external style sheet must be linked with the sheet that requires the style rules
to be applied.
With an external style sheet, you can change the look of an entire website by changing
just one file! Each page must include a reference to the external style sheet file inside the <link>
element. The <link> element goes inside the <head> section:
Syntax: <head>
<link rel=”Stylesheet” type=text/css” href=”file.css”>
</head>
Attributes are: rel: Relation to the external document in a style sheet.

Create a web document using External Style Sheet.

"mystyle.css":
body { background-color: lightblue; }
h1 { color: navy; margin-left: 20px; }
<html>
<head> <title> External </title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Embedded Style Sheet:
We can group more than one style rule using the <style> - - - </style> tag pair instead of
applying it individually in the inline style. Each of these tags when used in the body of the
HTML code will apply the style rules.
Syntax: <head> <style> Style Rules </style> </head>

Create a web document using Embedded Style Sheet.

<html>
<head> <title> Embedded </title>
<style> h1, h2 { color: red; font-family: Arial; }
</style>
</head>
<body>
<h1>This is a heading H1</h1>
<h2>This is a heading H2</h2>
<h3>This is a heading H3 with its default style as display in the
browser
</h3>
</body>
</html>

Imported Style Sheet:

An imported style sheet is a sheet that can be imported to or combined with another style
sheet i.e. importing partial sheets to one main sheet (multiple style sheets can be combined into
one).

Syntax: <style type=’text/css” @import URL(the path);

</style>

Create a web document using Imported Style Sheet.

style1.css
<style> h1 { font-style:Italic; background: yellow; color:red }
p { background:purple }
</style>

style2.css
<style> h2 { background: red; }
</style>

main.css
<style> @import url (style1.css)
@import url (style2.css)
</style>

importstyle.html
<html>
<head> <title> Import style </title>
<link rel=stylesheet href=”main.css” type=”text/css”>
</head>
<body> Other Statements
</body>
</html>
---- ----

Text Formatting:
The heading uses the text-align, text-transform, and color properties. The paragraph is
indented, aligned, and the space between characters is specified.
a. Text Color: The color property is used to set the color of the text. The color is
specified by:
· A color name – like “red”
· A Hexadecimal value – like “#ff0000”
· An RGB value – like “rgb(255,0,0)
The default text color for a page is defined in the body selector.

Ex: body { color: blue; } h1 { color:green; }

/* Create web page using Text color using CSS */

<html> <head> <title> Text Color </title>
<style> body { color: blue; }
h1 { color:green; }
</style>
</head>
<body>
<h1><u> Siddhartha Degree & PG College </u> </h1>
<p> This is an ordinary paragraph. Notice that this text is blue. <br>
The default text color for a page is defined in the body selector.
</p>
</body>
</html>
b. Text Alignment: The text-align property is used to set the horizontal alignment of a text.
A text can be left/right/centered/justifies.
Ex: h1 { text-align: center; }
h2 { text-align: left; }

/* Create web page using Text-align using CSS */

<!DOCTYPE html>
<html><head> <title> Text align CSS </title>
<style> h1 { text-align: center; }
h2 { text-align: left; }
h3 { text-align: right; }
</style>
</head>
<body><h1> Heading1 (Center) </h1>
<h2> Heading2 (Left) </h2>
<h3> Heading3 (Right) </h3>
<p> The three headings above are aligned center, left and right </p>
</body>
</html>
c. Text Decoration: The text-decoration property is used to set or remove decorations from
text. The value text-decoration: none; is often used to remove underlines from links.
Ex: a { text-decoration: none; }

Create a web page using text-decoration1 using CSS.

<!DOCTYPE html>
<html><head>

<title> Text decoration-1 CSS </title>

<html>
<head>
<title> Text decoration-2 CSS </title>
<style> h1 { text-decoration: overline; }
h2 { text-decoration: line-through; }
h3 { text-decoration: underline; }
</style>
</head>
<body> <h1> Heading1 </h1>
<h2> Heading2 </h2>
<h3> Heading3 </h3>
</body>
</html>
d. Text Transformation: The text-transform property is used specify uppercase and lowercase
letters in a text.
It can be used to turn everything into uppercase or lowercase letters, or capitalize
the first letter of each word.
Ex: p.uppercase { text-transform: uppercase; }
Create a web page using text-transformation using CSS.
<!DOCTYPE html>

<html>
<head>
<title> Text transformation CSS </title>
<style> p.uppercase { text-transform: uppercase; }
p.lowercase { text-transform: lowercase; }
p.capitalize { text-transform: capitalize; }
</style>
</head> <body>
<p class=”uppercase”> This is some text. </p>
<p class=”lowercase”> This is some text. </p>
<p class=”capitalize”> This is some text. </p>
</body>
</html>

e. Text Indentation: The text-indent property is used to specify the indentation of the first line
of text.
Ex: <style> p < text-indent: 50px; } </style>
Create a web page using text-indentation using CSS.
<!DOCTYPE html>
<html> <head>
<title> Text Indentation CSS </title>
<style> p {text-indent: 50px;} </style>
</head>
<body>
<p> This text is styled with some of the text formatting properties. <br>The
heading uses the text-align, text-transform and color properties. <br>The paragraph is indented,
aligned and the space between characters <br> is specified. </p>
</body>
</html>
f. Text letter spacing: The letter-spacing property is used to specify the space between
the characters in a text.
Ex: <style> h1 { letter-spacing: 3px; } </style>
Create a web page using letter-spacing using CSS.

<!DOCTYPE html>
<html> <head> <title> Letter spacing CSS </title>
<style> h1 { letter-spacing: 3px; }
h2 { letter-spacing: -3px; } </style>
</head>
<body> <h1> This is Heading1 </h1>
<h2> This is Heading2 </h2> </body>
</html>
g. Text Line Height: The line-height property is used to specify the space between lines.
Ex: p.small { line-height: 0.8; }
p.big { line-height: 1.8; }
Create a web page using Line-Height using CSS.
<!DOCTYPE html>
<html> <head> <title> Line Height CSS </title>
<style> p.small { line-height: 0.7; } p.big { line-height: 1.8; } </style>
</head> <body>
<p> This is a paragraph with a standard line-height. <br>
The default line height in most browsers is about 110% to 120%. <br> </p>
<p class=”small”> This is a paragraph with a smaller line-height. <br>
This is a paragraph with a smaller line-height. <br> </p>
<p class=”big”> This is a paragraph with a bigger line-height. <br>
This is a paragraph with a bigger line-height. <br> </p>
</body>
</html>

h. Text Direction: The direction property is used to change the text direction of an
element.
Ex: p { direction: rtl; }
Create a web page using Text-Direction using CSS.
<!DOCTYPE html>
<html> <head> <title> Text Direction CSS </title>
<style> p.ex1 { direction: rtl;} </style>
</head>
<body> <p> This is the default text direction </p>
<p class=”ex1”>
This is the right-to-left text direction
</p>
</body>
</html>
i. Text Word Spacing: The word-spacing property is used to specify the space between
the words in a text.
Ex: h1 { word-spacing: 10px; }
Create a web page using Word-Spacing using CSS.

<!DOCTYPE html>
<html><head><title> Word Spacing CSS </title>
<style> h1 { word-spacing: 10px;}
h2 { word-spacing: -5px;}
</style>
</head>
<body> <h1> This is heading1 </h1>
<h2> This is heading1 </h2>
</body>
</html>
j. Text Shadow: The text-shadow property adds shadow to text.
Ex: h1 { text-shadow: 3px 2px; red; }

Example specify the position of the horizontal shadow (3px), the position of the vertical
shadow (2px) and the color of the shadow (red).

Create a web page using Text-Shadow using CSS.

<!DOCTYPE html>
<html> <head> <title> Text Shadow CSS </title>
<style> h1 { text-shadow: 3px 2px red; }
</style>
</head>
<body> <h1> Text-shadow effect </h1>
<p> <b> Note: </b> Internet explorer 9 and
earlier do not <br>
support the text-shadow property. </p>
</body>
</html>
---- ----
Outlines:
An outline is a line that is drawn around elements, OUTSIDE the borders, to make the
element “standout”. CSS has the following outline.
i. outline-style ii. outline-color iii. outline-width
iv. outline-offset v. outline

i. outline-style: The outline-style property specifies the style of the outline, and can have one of
the following values.
* dotted - Defines a dotted outline * dashed - Defines a dashed outline
* solid - Defines a solid outline * double - Defines a double outline
* groove - Defines a 3D grooved outline * ridge - Defines a 3D ridged outline
* inset - Defines a 3D inset outline * outset - Defines a 3D outset outline
* none - Defines no outline * hidden - Defines a hidden outline
Ex: p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;}
p.double {outline-style: double;}
p.groove {outline-style: groove;}
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;}
p.outset {outline-style: outset;}
ii. outline-color: The outline-color property is used to set the color of the outline.
The color can be set by:
67. name - specify a color name, like "red"
68. RGB - specify a RGB value, like "rgb(255,0,0)"
69. Hex - specify a hex value, like "#ff0000"
70. invert - performs a color inversion (which ensures that the outline is visible, regardless of
color background)

Ex: p.ex1 { border: 1px solid black;

outline-style: solid;
outline-color: red; }
p.ex2 { border: 1px solid black;
outline-style: double;
outline-color: green; }
p.ex3 { border: 1px solid black;
outline-style: outset;
outline-color: yellow; }

iii. outline-width: The outline-width property specifies the width of the outline, and can have
one of the following values:
* thin (typically 1px) * medium (typically 3px)
* thick (typically 5px) * A specific size (in px, pt, cm, em, etc)
Ex: p.ex1 { border: 1px solid black;
outline-style: solid;
outline-color: red;
outline-width: thin; }
p.ex2 { border: 1px solid black;
outline-style: solid;
outline-color: red;
outline-width: medium; }
p.ex3 { border: 1px solid black; outline-style: solid; outline-color: red;
outline-width: thick; }
p.ex4 { border: 1px solid black; outline-style: solid; outline-color: red;
outline-width: 4px; }

iv. outline-offset: The outline-offset property adds space between an outline and the edge/border
of an element. The space between an element and its outline is transparent.

p { margin: 30px;
bo rder: 1px solid black;
outline: 1px solid red;
outline-offset: 15px; }

p { margin: 30px;
background: yellow;
border: 1px solid black;
outline: 1px solid red;
outline-offset: 15px; }
v. outline: The outline property is a shorthand property for setting the following individual
outline properties:
* outline-width * outline-style (required) * outline-color
The outline property is specified as one, two, or three values from the list above. The order of the
values does not matter.
Ex: p.ex1 {outline: dashed;}
p.ex2 {outline: dotted red;}
p.ex3 {outline: 5px solid yellow;}
p.ex4 {outline: thick ridge pink;}

---- ----

Learning JavaScript:
Learning JavaScript:
The script is an integral part of the HTML Document delivered to the client by the
server. It is interpreted and run within the browser application being used by the client.
Scripting Language is the language which is used to implement the programming
language features to the browser executable programs.
Basically there are two types of Scripting Languages.
39. Client Side Scripting Language
40. Server Side Scripting Language
Client side Java Script: The program which is written and implemented in the client
side PC is considered as Client side Scripting Language. Example: VB Script, Java
Script.
Server side Java Script: The script code which is written and executed in the Server but
the output is visible in the client considered as Server side Scripting Language. Example:
ASP (Active Server Pages), CGI (Common Gate Way of interface).
Application of JavaScript:
JavaScript is used to create interactive websites. It is mainly used for:
71. Client-side validation
72. Dynamic drop-down menus
73. Displaying date and time
74. Displaying pop-up windows and dialog boxes (like an alert dialog box, confirm dialog
box and prompt dialog box)
75. Displaying clocks etc.
Note:
The script tag specifies that we are using JavaScript.
The text/javascript is the content type that provides information to the browser about the data.
The document.write() function is used to display dynamic content through JavaScript. We will
learn about document object in detail later.

JavaScript provides 3 places to put the JavaScript code:

41. Between the body tag of html
42. Between the head tag of html
43. In .js file (external JavaScript)

How to Add Script to Your Pages:

JavaScript Example1:

<html>
<head> <title> Java Script </title>
<script>
document.write("welcome to JavaScript");
</script>
</head>
<body>
</body>
</html>

JavaScript Example2:
<html>
<head> <title> Java Script </title>
<script>
document.write("<h1> SDPC </h1>"+”<br>”);
document.write("welcome to JavaScript");
</script>
</head>
<body> <h2> This is a first java script in HTML </h2>
</body>
</html>

Variables:
Variable is simply a name of storage location. There are two types of variables in
JavaScript: local variable and global variable.
There are some rules while declaring a JavaScript variable (also known as identifiers).
44. Name must start with a letter (a to z or A to Z), underscore( _ ), or dollar( $ ) sign.
45. After first letter we can use digits (0 to 9), for example value1.
46. JavaScript variables are case sensitive, for example x and X are different variables.
Correct JavaScript variables
var x = 10; var _value="nalgonda";
Incorrect JavaScript variables
var 123=30; var *aa=320;

Data Types and variables:

Data Types: It is a process of holding different types of values.
(or) It is a process of identifying the data and naming.
var here to specify the data type. It can hold any type of values such as numbers, strings etc.
For example: var a=40;//holding number
var b="Rahul";//holding string
There are two types of data types in JavaScript.
47. Primitive data type 2. Non-primitive (reference) data type
Primitive data type:
There are some primitive data types in JavaScript. They are as follows:
Date Description
Type

Number Represents numeric values e.g. 100

(Integer)

Boolean Represents Boolean value either false or

true

String Represents sequence of characters e.g.

"hello"

Undefine Represents undefined value

Null Represents null i.e. no value at all

and byte, currency, single, double, date/time and error.

Non-Primitive data type:

The non-primitive data types are as follows:
Date Description
Type

Object Represents instance through which we can access members

Array Represents group of similar values

RegE Represents regular expression

* Program to add two numbers.

<html>
<head> <title> Java Script (Add two numbers) </title> </head>
<body> <script>
var x = 10,y = 20,z;
z=x+y;
document.write(x + "+" + y + "=" + z);
</script>
</body>
</html>
* Program to find area of the circle.
<html> <head> <title> Java Script </title>
<script> var r=1,a;
a=3.14*r*r;
document.write("area of the circle:"+a);
</script>
</head>
<body> </body>
</html>
* Program to swap two numbers:
<html>

<head> <title> Java Script </title>

<head> <title> Java Script </title>

+ Addition 10+20 = 30

- Subtraction 20-10 = 10

* Multiplication 10*20 = 200

/ Division 20/10 = 2

% Modulus 20%10 = 0
(Remainder)

++ Increment var a=10; a++; Now a

= 11

-- Decrement var a=10; a--; Now a =

Comparison (Relational) Operators: The JavaScript comparison operator compares the two
operands. The comparison operators are as follows:
Op Description Example
era
tor

== Is equal to 10==20 = false

== Identical (equal and of same 10===20 = false

= type)
!= Not equal to 10!=20 = true

!== Not Identical 20!==20 = false

> Greater than 20>10 = true

>= Greater than or equal to 20>=10 = true

< Less than 20<10 = false

<= Less than or equal to 20<=10 = false

Bitwise Operators: The bitwise operators perform bitwise operations on operands. The bitwise
operators are as follows:
Op Description Example
era
tor

& Bitwise AND

| Bitwise OR

^ Bitwise XOR

~ Bitwise NOT (~10) = -10

<< Bitwise Left Shift (10<<2) = 40

>> Bitwise Right Shift (10>>2) = 2

>> Bitwise Right Shift (10>>>2) = 2

> with Zero

Logical Operators: The following operators are known as JavaScript logical operators.
Op Descrip Example
era tion
tor

&& Logical (10==20 &&

AND 20==33) = false

|| Logical (10==20 || 20==33) =

OR false

! Logical !(10==20) = true

Not

Assignment Operators: The following operators are known as JavaScript assignment operators.
Op Description Example
era
tor

= Assign 10+10 = 20

+= Add and var a=10; a+=20; Now a

assign = 30

-= Subtract var a=20; a-=10; Now a

and assign = 10

= Multiply var a=10; a=20; Now a

and assign = 200

/= Divide and var a=10; a/=2; Now a =

assign 5

%= Modulus var a=10; a%=2; Now a

and assign =0

Special Operators: The following operators are known as JavaScript special operators.
Op Description
era
tor

(?:) Conditional Operator returns value based on the condition. It is like if-
else.

, Comma Operator allows multiple expressions to be evaluated as single

statement.

del Delete Operator deletes a property from the object.

ete

In In Operator checks if object has the given property

inst Checks if the object is an instance of given type

anc
eof

Ne Creates an instance (object)

typ Checks the type of object.

eof

voi It discards the expression's return value.

yie Checks what is returned in a generator by the generator's iterator.

* Program to add, subtract, multiply, divide and find remainder of the two numbers.

<html> <head> <title> Java Script </title>

<html> <head> <title> Java Script </title>

* Program to compare two numbers using Conditional operator.

<html> <head> <title> Java Script </title>
<script> var x=10;
(x>0)?document.write(x+ " +ve") : document.write(x+ " -ve");
</script>
</head> <body></body>
</html>

* Program for Unary Operator (Increment/Decrement).

<html> <head> <title> Java Script </title>
<script> var x=10;
document.write(x +"<br>");
document.write(x++ +"<br>");
document.write(x +"<br>");
document.write(++x +"<br>");
document.write(x +"<br>");
</script> </head> <body></body>
</html>
Control Statements:
These are Control the sequence flow of execution. It is two types
49. Conditional : if, if-else, if-else-if and switch statements
50. Looping : while, do-while, for
Conditional:
if: It evaluates the content only if expression is true.
Syntax: if(expression)
{ //content to be evaluated
}

Write a JavaScript to check the number is positive.

<html>

<head> <title> If statement </title>

if-else: It evaluates the content whether condition is true of false.

Syntax: if(expression)
{ //content to be evaluated if condition is true
}
else
{ //content to be evaluated if condition is false
}
Write a JavaScript to check the number is positive or negative.
<html>

<head> <title> If-else statement </title>

if-else if statement: It evaluates the content only if expression is true from several expressions.
Syntax: if(expression1)
{ //content to be evaluated if condition is true
}
else if(expression2)
{ content to be evaluated if expression2 is true
}
else
{ content to be evaluated if expression2 is true
}
Write a JavaScript to check the number is positive, negative or zero.
<html> <head> <title> If-else statement </title>

<script> var a=10;

if(a>0)
document.write(a + " is +ve number");
else if(a<0)
document.write(a + " is -ve number");
else
document.write(a + " is zero");
</script> </head> <body></body>
</html>
switch: It is used to execute one code from multiple expressions.
Syntax: switch(expression)
{ case value1: code to be executed; break;
case value2: code to be executed; break;
......
default: code to be executed if above values are not matched;
}
Write a JavaScript to add, sub, multiply, div, and find remainder of the two numbers
depend on operator using switch.

<html> <head> <title> Switch statement </title>

<script> var op='*', a, x=10, y=3;

switch(op)
{
case '+': a=x+y; document.write(a); break;
case '-': a=x-y; document.write(a); break;
case '*': a=x*y; document.write(a); break;
case '/': a=x/y; document.write(a); break;
case '%': a=x%y; document.write(a); break;
default: document.write("wrong option");
}
</script> </head> <body></body>
</html>
Looping: One or more than one statements repeat or execute depend on condition.
While: Check the condition, when condition is true execute the loop until the condition is false.
Syntax: while(condition)
{ code to be executed
}

Write a JavaScript to print 1,2 3 4, . . . . . . 10

<html> <head> <title> While </title> </head>
<body> <script> var i=1;
while (i<=10)
{ document.write(i + "<br/>");
i++;
}
</script> </body>
</html>
do-while: Execute the loop, after execution of loop check the condition when condition is true
execute the loop until the condition is false.
Syntax: do
{ code to be executed
} while(condition);

Write a JavaScript to print 1,2 3 4, . . . . . . 10

<html> <head> <title> Do-While </title> </head>
<body> <script> var i=1;
do
{ document.write(i + "<br/>");
i++;
} while (i<=10) ;
</script> </body>
</html>
For:
Syntax: for (initialization; condition; increment)
{ code to be executed
}

Write a JavaScript to print 1,2 3 4, . . . . . . 10

Functions:
Def: - Sub program.
Function is sub program. It having own name and block of statements. When it is called
from main it will be executed.

Advantage of JavaScript function:

There are mainly two advantages of JavaScript functions.
51. Code reusability: We can call a function several times so it save coding.
52. Less coding: It makes our program compact. We don’t need to write many lines of code
each time to perform a common task.

main

function

Syntax: function functionName([arg1, arg2, ...argN])

{
//code to be executed
}

Write a JavaScript to print message using function.

<html> <head> <title> Function </title>
<script> function display( )
{ alert("hello! this is message");
}

</script>
</head>
<body>
<input type="button" onclick="display()" value="call function"/>
</body>
</html>

Write a JavaScript to print address using function.

<html> <head> <title> Function </title>
<script> function address( )
{ alert(" name:_____ \n fname:_______\n vill:_____");
}

</script> </head> <body>

Write a JavaScript to find cube of the number using passing by arguments.

<html> <head> <title> Cube </title>
<script> function getcube(number)
{ alert(number*number*number);

}
</script> </head>
<body> <form>
<input type="button" value="click" onclick="getcube(4)"/>
</form> </body>
</html>

Write a JavaScript to find cube of the number using function arguments.

<html> <head> <title> Factorial </title>

f = f * i;
alert(f);
}
</script> </head>
<body> <form>
<input type="button" value="fact" onclick="factor(5)">
</form> </body>
</html>
Write a JavaScript to find cube of the number using passing by arguments and return type.
<html> <head> <title> Factorial </title>
<script> function factor(n)

{ var i,f=1;
for(i=1;i<=n;i++)
f = f * i;
return f;
}
</script> </head>
<body> <script>
document.write(factor(5));
</script> </body>
</html>

Write a JavaScript to print string using function return type.

<html> <head> <title> Function-return </title>

Array:
JavaScript array is an object that represents a collection of similar type of elements.
There are 3 ways to construct array in JavaScript
53. By array literal
54. By creating instance of Array directly (using new keyword)
55. By using an Array constructor (using new keyword)
1) JavaScript array literal
The syntax of creating array using array literal is given below:
var arrayname=[value1,value2.....valueN];
As you can see, values are contained inside [ ] and separated by , (comma).
Simple example of creating and using array in JavaScript.
<html> <head> <title> Java Script </title>
<script>
var x=[10,20,30,40,50],i;
for (i=0;i<=4;i++)
{ document.write(x[i] + "<br>");
}
</script> </head> <body> </body>
</html>
Test it Now

Simple example of creating and using array in JavaScript.

<html>
<head> <title> Java Script </title>
<script>
var emp=["gopi","krishna","raju"];
for (i=0;i<emp.length;i++)
{ document.write(emp[i] + "<br/>");
}
</script> </head> <body> </body>
</html>
Test it Now

The .length property returns the length of an array.

2) JavaScript Array directly (new keyword)

The syntax of creating array directly is given below:
var arrayname=new Array( );
Here, new keyword is used to create instance of array.
Simple example of creating array directly in JavaScript.
<html>
<head> <title> Java Script </title>
<script> var i;
var emp = new Array();
emp[0] = "Gopi"; emp[1] = "Krishna";
emp[2] = "Ravi";
for (i=0;i<emp.length;i++)
{ document.write(emp[i] + "<br>");
}
</script> </head> <body> </body>
</html>

3) JavaScript array constructor (new keyword)

Here, you need to create instance of array by passing arguments in constructor so that we don't
have to provide value explicitly.

Simple example of creating object by array constructor using JavaScript.

<html>

<head> <title> Java Script </title>

Let's see the list of JavaScript array methods with their description.
S. Metho Description
N ds
o

1 concat( It returns a new array object that contains two or more merged arrays.
)

2 copywi It copies the part of the given array with its own elements and returns the
thin() modified array.

3 every() It determines whether all the elements of an array are satisfying the
provided function conditions.

4 fill() It fills elements into an array with static values.

5 filter() It returns the new array containing the elements that pass the provided
function conditions.

6 find() It returns the value of the first element in the given array that satisfies the
specified condition.

7 findInd It returns the index value of the first element in the given array that satisfies
ex() the specified condition.

8 forEac It invokes the provided function once for each element of an array.
h()

9 include It checks whether the given array contains the specified element.
s()

10 indedx It searches the specified element in the given array and returns the index of
Of() the first match.

11 join() It joins the elements of an array as a string.

12 lastInd It searches the specified element in the given array and returns the index of
exOf() the last match.

13 map() It calls the specified function for every array element and returns the new
array

14 pop() It removes and returns the last element of an array.

15 push() It adds one or more elements to the end of an array.

16 reverse It reverses the elements of given array.
()

17 shift() It removes and returns the first element of an array.

18 slice() It returns a new array containing the copy of the part of the given array.

19 sort() It returns the element of the given array in a sorted order.

20 splice() It add/remove elements to/from the given array.

21 unshift It adds one or more elements in the beginning of the given array.
()

The Document Object Model (DOM):

Web Developers can dynamically change the style of any HTML element in a document.
User can change text and attributes like colors, fonts, spacing, position and even the visibility of
text.
Text Graphics and placements (Dynamic Positioning):
i. Changing background properties dynamically: Changing the styles and properties of the
text and back ground dynamically can be implemented with event handling methods.
Ex:

<html>
<head> <title> Event Handling </title> </head>
<body onmousedown=”document.bgColor=’red’”;
onmouseup=”document.bgColor=’blue’”;
onclick=”document.bgColor=’green’”>
<center> <h1> See the page in red when mouse down
<br> <br>
And in blue when up <br> <br>
In green when clicked. <br> <br>
</h1> </center> </body>
</html>

ii. Changing Font properties dynamically: All the font properties which are used in style
sheet can be implemented with event handlers and DOM methods which help the user to change
the properties dynamically.
Ex:
<html>
<head> <title> Event Handling </title> </head>
<body> <center> <h1 onmouseover=”this.style.fontSize =’48’”;
onmouseout=”this.style.fontSize =’18’”>
Changing the font size move the mouse and see the changes <br> <br>
</h1> </center> </body>
</html>

Font size = 48 Font size = 18

iii. Effecting multiple changes: Changing the font size color and family on mouse over, style
classes are used. All the properties are combined with in a single class defined by the user and
the class is called with Event handling methods.

Ex:
<html> <head> <title> Event Handling </title>
<style type=text/css>
.c1 {font-size: 85; color:red; font-family:Monotype Corsiva}
.c2 {font-size: 35; color:blue; font-family:Harlow Solid Italic; border:30}
</style> </head>
<body> <center> <h1 onmouseover=”this.className =’c1’”;
onmouseout=”this.className =’c2’”>
Changing the font size move the mouse and see the changes <br> <br>
</h1> </center> </body>
</html>

iv. Changing the images on fly: Change the image itself in runtime by using the DOM
methods. This can be performed by two methods 1. Event handling 2. Script method.
Ex: 1. Event handling method
<html> <head> <title> Event handling </title> </head>
<body> <center>
<img src=”2.jpg” height=500 width=500
onmouseover=”this.src=’1.jpg’”
onmouseout=”this.src=’3.jpg’”>
</center> </body>
</html>
Ex: 2. Script method.
<html> <head> <title> Event handling </title>
<script language=”vbs”>
sub swap
document.i1.src=”2.jpg”
document.i2.src=”1.jpg”
end sub
</script> </head>
<body> <center> <h1> Using Script procedures & Event </h1> <br> <br>
<img src=”1.jpg” height=200 width=200 id=”i1”>
<img src=”2.jpg” height=200 width=200 id=”i2”> <br>
<input type=button value=swapping onclick=swap>
</center> </body>
</html>
Events: Event is a object which describes a state change in a source.
Eg: Pressing or clicking button, click on event, closing window, resizing window, image has
been loaded, dragging a mouse, mouse over an element, . . . . etc.
It is two types.
56. Reactive event - User involvement.
57. Proactive event - No user involvement.
Events are a part of Document Object Model (DOM) and html element have a certain set
of events which can trigger JavaScript code.

OnClick: The onClick event occurs when the user clicks on an element.
<button onclick=”myFunction( )”> click me </button>

Write a JavaScript to print message using function.

<html> <head> <title> Function </title>
<script> function myFunctipon( )
{ alert("hello! this is message"); }

</script> </head>
<body>
<input type="button" onclick="myFunctipon( )" value="call function"/>
</body>
</html>

Ondbl click: The ondbl click event occurs when the user double click on an element.
Ex: In JavaScript <p ondblclick=”myFunction( )”> Double-click me </p>
In HTML <element ondblclick=”myScript”>
object.ondblclick=function( ) { myScript };
object.addEventListener(“dblclick”,myScript);
OnAbort:
The OnAbort event occurs when user aborts the loading of an <img> or
<input type=”image”> element.
Ex: <img src=”3.jpg” onabort=”myFunction( )”>
Syntax: In HTML <element onabort=”myScript”>
In JavaScript object. onabort=function( )
{ myScript };
In JavaScript, using the addEventListener(“abort”, myScript);
Note: The addEventListener( ) method is not supported in Internet Explorer 8 and earlier
versions.

Ondrag drop: The ondrag drop event occurs when the user drag and drop an element.
58. ondragenter – occurs when the dragged element enters the drop target.
59. ondragover – occurs when the dragged element is over the drop target.
60. ondragleave – occurs when the dragged element leaves the drop target.
61. ondrop – occurs when the dragged element dropped on the drop target.
62. ondragstart – occurs when the user starts to drag an element.
63. ondrag – occurs when an element is being dragged.
64. ondragend – occurs when the user has finished dragging the element.

Syntax: In HTML : <element ondrag=”myScript”>

In JavaScript : object.ondrag=function( ) { myScript };
In JavaScript, using the : object.addEventListener(“drag”,myScript);
addEventListener( ) method
Ex: <p draggable=”true” ondrag=”myFunction(event)”> Drag me! </p>

Onerror: The onerror event occurs when loading a image or error occurs while loading an
external file (e.g. a document or image).
Ex: <img src=”image.jpg” onerror=”myFucntion( )”>

Syntax: In HTML : <element onerror=”myScript”>

In JavaScript : object.onerror=function( ) { myScript };
In JavaScript, using the : object.addEventListener(“error”,myScript);
addEventListener( ) method
Note: The addEventListener( ) method is not supported in internet Explorer 8 and earlier versions.

Onfocus: The onfocus attribute fires the moment that the element gets focus.
Onfocus is most often used with <input>, <select> and <a>.
Ex: <input type=”text” id=”fname” onfocus=”myFucntion(this.id)”>

Onkey Press: The onkeypress event occurs when the user presses a key (on the keyboard).
Note: The onkeypress event is not fired for all keys (e.g. Alt, ctrl, shift, esc) in all browsers.
onkeypress event:
i. onkeydown ii. Onkeypress iii. onkeyup
Ex: <input type=”text” onkeypress=”myFucntion( )”>

Syntax: In HTML : <element onkeypress=”myScript”>

In JavaScript : object.onkeypress=function( ) { myScript };
In JavaScript, using the : object.addEventListener(“keypress”,myScript);
addEventListener( ) method
Onkey UP: The onkeyup attribute fires when the user releases a key (on the keyboard).
onkeyup event:
i. onkeydown ii. Onkeypress iii. onkeyup
Ex: <input type=”text” onkeyup=”myFucntion( )”>
Syntax: In HTML : <element onkeyup=”myScript”>
In JavaScript : object.onkeyup=function( ) { myScript };
In JavaScript, using the : object.addEventListener(“keyup”,myScript);
addEventListener( ) method
Write a JavaScript using Onkey Up.
<!DOCTYPE html>
<html> <head> <title> JavaScript Onkey Up </title> </head>
<body> <p> Press and hold down a key inside the text field to set a red background
color. Release the key to set a green background color. </p>
<input type=”ttext” id=”demo” onkeydown=”keydownFunction( )”
onkeyup=”keyupFunction( )”>
<script> function keydownFunction()
{ document.getElementById(“demo”.style.backgroundColor=”green)”;

}
</script> </body>
</html>

Onload: The onload attribute fires when an object has been loaded.
Onload most often used within the <body> element to execute a script once a web page
has completely loaded all content (including images, script files, CSS files, etc..)
Syntax: In HTML : <element onload=”scropt”>
In JavaScript : <body onload=”myFunction( )”>

Write a JavaScript using Onload.

<!DOCTYPE html>
<html> <head> <title> JavaScript Onload </title> </head>
<body> <img src=”3.jpg” onload=loadimg( )” width=”100” height=”150”>
<script> function loadimg( )
{ alert(“Image is loaded”);
}
</script> </body>
</html>

Onmouse Down: The Onmouse Down attribute fires when a mouse button is pressed down on
the element.
Attributes: i. onmousedown ii. onmouseup iii. oncontextmenu
Syntax: <element onmousedown=”script”>
Ex: <p onmousedown=”moseDown( )”> click the text! </p>
Onmouse Move: The onmousemove event occurs when the pointer is moving while it is over
an element.
Ex: <div onmousemove=”myFucntion( )”> Move the Cursor Over me </div>
Syntax: In HTML : <element onmousemove=”myScript”>
In JavaScript : object.onmousemove=function( ) { myScript };
In JavaScript, using the : object.addEventListener(“mousemove”,myScript);
addEventListener( ) method

Onmouse Out: The onmouseout event occurs when the mouse pointer is moved out of an
element. This event is often used together with the onmouseover event.
Ex: <img onmouseout=”normalImg(this)” src=”1.jpg” alt=”Img”>
Syntax: In HTML : <element onmouseout=”myScript”>
In JavaScript : object.onmouseout=function( ) { myScript };
In JavaScript, using the : object.addEventListener(“mouseout”,myScript);
addEventListener( ) method

Onmouse Over: The onmouseover event occurs when the mouse pointer is moved onto an
element. This event is often used together with the onmouseout event.
Ex: <img onmouseover=”bigImg(this)” src=”1.jpg” alt=”Img”>
Syntax: In HTML : <element onmouseover=”myScript”>
In JavaScript : object.onmouseover=function( ) { myScript };

In JavaScript, using the : object.addEventListener(“mouseover”,myScript);

addEventListener( ) method

Onmove: The onmove event occurs when the pointer is moving while it is over an element.
Ex: <div onmousemove=”myFucntion( )”> Move the Cursor Over me </div>
Syntax: In HTML : <element onmousemove=”myScript”>
In JavaScript : object.onmousemove=function( ) { myScript };
In JavaScript, using the : object.addEventListener(“mousemove”,myScript);
addEventListener( ) method

Onrest: The onrest event occurs when a form is reset.

Ex: <form onreset=”myFunction( )”>
Enter name: <input type=”text”>
<input type=”reset”>
</form>
Syntax: In HTML : <element onreset=”myScript”>
In JavaScript : object.onreset=function( ) { myScript };
In JavaScript, using the : object.addEventListener(“reset”,myScript);
addEventListener( ) method

Write a JavaScript to using reset event.

<!DOCTYPE html>
<html> <body> <p> Write something in the text field and press the Reset button. </p>
<form onreset="myFunction()">
<input type="text" id="myInput"> <input type="reset">
</form>
<script> function myFunction( )
{ var x=document.getElementById("myInput");
alert("Before reset, the text was:" + x.value);
}
</script> </body>
</html>

Onselect: The onselect event occurs after some text has been selected in an element.
The onselect event is mostly used on <input type=”text”> or <textarea> elements.
Ex: <input type=”text” onselect=”myFunction( )”>
Syntax: In HTML : <element onselect=”myScript”>
In JavaScript : object.onselect=function( ) { myScript };
In JavaScript, using the : object.addEventListener(“select”,myScript);
addEventListener( ) method

On submit: The onsubmit event occurs when a form is submitted.

Ex: <form onsubmit=”myFunction( )”>
Enter name: <input type=”text”> <input type=”submit”>
</form>
Syntax: In HTML : <element onsubmit=”myScript”>
In JavaScript : object.onsubmit=function( ) { myScript };

In JavaScript, using the : object.addEventListener(“submit”,myScript);

addEventListener( ) method

Onunload: The onunload event occurs once a page has unloaded (or the browser window has
been closed).
Onunload occurs when the user navigates away from the page (by clicking on a link,
submitting a form, closing the browser window, etc.)
Note: The onunload events is also triggered when a user reloads the page (and the onload event).
Ex: <body onunload=”myFunction( )”>

Syntax: In HTML : <element onunload=”myScript”>

In JavaScript : object.onunload=function( ) { myScript };
In JavaScript, using the : object.addEventListener(“unload”,myScript);
addEventListener( ) method

------- --------

Extensible Markup Language (XML):

Introduction: XML (Extensible Markup Language) was designed to transport and store the
data. HTML was designed to display the data.
What is XML:
* XML stands for Extensible Markup Language i.e. adding new properties to an existing element.
* XML is a Markup Language much like HTML
* XML was designed to carry data, not to display data.
* XML tags are not pre-defined, you must define your own tags.
* XML is designed to be self-descriptive.
* XML is a w3c (world wide web concession) recommendation standard.
* XML is subset of SGML (Standard Generalized Markup Language) which is father of all
Markup Languages.
Two areas where XML has potential are:
i. Structuring data for storage where relational database is inappropriate.
ii. Structuring data for presentation on web pages.
Creating XML Documents:
Basic Structure of XML:
<?XML version=”1.0”>
<note>
<to> SDPC </to>
<from> MGUCT </from>
<body> Meeting at 3.30 </body>
</note>

Note: 1. XML must have closing tags.

2. XML is case-sensitive.

A Sample XML file and how it can be transformed and rendered.

<scene>
<FX> General Road Building noises. </FX>
<speech speaker=”gopi”> My name is gopi </speech>
<speech speaker=”krishna”> My name is krishna </speech>
</scene>

HTML Basics and Web Design Guide
No ratings yet
HTML Basics and Web Design Guide
35 pages
Unit I: Web and Internet Technologies (15A05605) III B.Tech II Sem (CSE)
No ratings yet
Unit I: Web and Internet Technologies (15A05605) III B.Tech II Sem (CSE)
50 pages
Web Technology Lab Aim and Algorithm
No ratings yet
Web Technology Lab Aim and Algorithm
10 pages
Java OOP Basics for Beginners
No ratings yet
Java OOP Basics for Beginners
80 pages
Java Session Notes
No ratings yet
Java Session Notes
48 pages
Computer Architecture Fully Explained Answers
No ratings yet
Computer Architecture Fully Explained Answers
6 pages
ASPNET
No ratings yet
ASPNET
54 pages
Web Designing Material
No ratings yet
Web Designing Material
43 pages
Java Programming Syllabus
No ratings yet
Java Programming Syllabus
149 pages
C++ Control Structures and Bit Fields
No ratings yet
C++ Control Structures and Bit Fields
46 pages
Computer Architecture and Data Types
No ratings yet
Computer Architecture and Data Types
88 pages
Software Testing Concepts and Techniques
No ratings yet
Software Testing Concepts and Techniques
17 pages
OA Lab Manual Jul-Dec2018-19
No ratings yet
OA Lab Manual Jul-Dec2018-19
41 pages
OS06
No ratings yet
OS06
19 pages
UNIX Architecture & Command Basics
No ratings yet
UNIX Architecture & Command Basics
4 pages
Data Mining Warehousing - Data Mining - Notes
No ratings yet
Data Mining Warehousing - Data Mining - Notes
56 pages
Unix Course Material - Tata Elxsi
No ratings yet
Unix Course Material - Tata Elxsi
112 pages
Paper - II Web Technology
100% (1)
Paper - II Web Technology
248 pages
PSA 5 Final
No ratings yet
PSA 5 Final
36 pages
Notes For BCA FY C
No ratings yet
Notes For BCA FY C
12 pages
Web Technology 2074-2080
No ratings yet
Web Technology 2074-2080
34 pages
I B.Sc.,Python Lab (2023-2024)
No ratings yet
I B.Sc.,Python Lab (2023-2024)
50 pages
Yoga Sample Question
No ratings yet
Yoga Sample Question
2 pages
Python Functions Overview
No ratings yet
Python Functions Overview
22 pages
DV Notes Final Copy Record
No ratings yet
DV Notes Final Copy Record
113 pages
Unit - Iv Software Quality Planning & Control
No ratings yet
Unit - Iv Software Quality Planning & Control
11 pages
02 Fundamentals of The Analysis of Algorithm Efficiency
No ratings yet
02 Fundamentals of The Analysis of Algorithm Efficiency
49 pages
Prog Lab-II-Data Structures Using C-Lab Manual
No ratings yet
Prog Lab-II-Data Structures Using C-Lab Manual
140 pages
Django: Writing Your First Django App, Part 2
No ratings yet
Django: Writing Your First Django App, Part 2
12 pages
Module 1 Unix-Ise
No ratings yet
Module 1 Unix-Ise
23 pages
Web Designing Notes Unit IV Aligned
No ratings yet
Web Designing Notes Unit IV Aligned
45 pages
Module 4
No ratings yet
Module 4
18 pages
COA Unit - IV Notes
No ratings yet
COA Unit - IV Notes
25 pages
Environmental Studies 2024-2025 Theory and Project Syllabus
No ratings yet
Environmental Studies 2024-2025 Theory and Project Syllabus
5 pages
4-3 - Mongo DB and Node Js
No ratings yet
4-3 - Mongo DB and Node Js
27 pages
Unit 1
No ratings yet
Unit 1
59 pages
Unit Iii - Web Designing
No ratings yet
Unit Iii - Web Designing
12 pages
Web Tech & CSS Interview Prep
No ratings yet
Web Tech & CSS Interview Prep
53 pages
CC Unit 4 - New
No ratings yet
CC Unit 4 - New
11 pages
Daa Uniti
No ratings yet
Daa Uniti
41 pages
CCS375 Web Technology Lab Manual
No ratings yet
CCS375 Web Technology Lab Manual
11 pages
Chapter-9 Creating A Django Based Basic Web Application
No ratings yet
Chapter-9 Creating A Django Based Basic Web Application
10 pages
PST Unit 3
No ratings yet
PST Unit 3
7 pages
Bca-601: Multimedia Concepts & Application
0% (1)
Bca-601: Multimedia Concepts & Application
4 pages
Data Mining and Ware Housing
No ratings yet
Data Mining and Ware Housing
130 pages
1 Introduction To Servlets
No ratings yet
1 Introduction To Servlets
32 pages
Web Tech Exam Prep Guide
No ratings yet
Web Tech Exam Prep Guide
3 pages
Textual Pattern Processing Techniques
100% (1)
Textual Pattern Processing Techniques
33 pages
Web Designing Using HTML & Css Question Bank
No ratings yet
Web Designing Using HTML & Css Question Bank
6 pages
Unix Command Unit 1
No ratings yet
Unix Command Unit 1
40 pages
Intro to Distributed Systems
100% (1)
Intro to Distributed Systems
24 pages
Instruction:Answer All The Questions
No ratings yet
Instruction:Answer All The Questions
9 pages
Web Technology Lab Program Guide
60% (5)
Web Technology Lab Program Guide
61 pages
Faculty e Notes Unit 3 WD
No ratings yet
Faculty e Notes Unit 3 WD
34 pages
4.array Techniques
No ratings yet
4.array Techniques
26 pages
Data Structures With Java Unit - 1
100% (1)
Data Structures With Java Unit - 1
22 pages
Environmental Studies Notes
No ratings yet
Environmental Studies Notes
23 pages
Web Technologies Notes: HTML Java Script CSS XML JDBC Servlets JSP
No ratings yet
Web Technologies Notes: HTML Java Script CSS XML JDBC Servlets JSP
98 pages
Web U1
No ratings yet
Web U1
79 pages
Fswd@unit 1@aiml
No ratings yet
Fswd@unit 1@aiml
56 pages
WE Lab Assignment 1
No ratings yet
WE Lab Assignment 1
4 pages
0525 Front End Developer Handbook
No ratings yet
0525 Front End Developer Handbook
6 pages
Writing Notes Vol PDF
No ratings yet
Writing Notes Vol PDF
11 pages
Mern Practice Code
No ratings yet
Mern Practice Code
6 pages
Batch-20 FarmXchange
No ratings yet
Batch-20 FarmXchange
22 pages
AJava GTU Study Material Presentations Unit-7 21052021041713AM
No ratings yet
AJava GTU Study Material Presentations Unit-7 21052021041713AM
37 pages
Food-Delivery Project
No ratings yet
Food-Delivery Project
19 pages
Mastering Ruby - A Beginners Guide
No ratings yet
Mastering Ruby - A Beginners Guide
335 pages
JavaScript Coding Challenges Guide
No ratings yet
JavaScript Coding Challenges Guide
33 pages
JavaScript Banners Menus Slideshow
No ratings yet
JavaScript Banners Menus Slideshow
5 pages
Data Mining Using Phyton
No ratings yet
Data Mining Using Phyton
50 pages
LWC Zero To Hero Notes
No ratings yet
LWC Zero To Hero Notes
8 pages
Asp.Net Developer Resume
No ratings yet
Asp.Net Developer Resume
3 pages
TypeScript & npm Basics for PCF Apps
No ratings yet
TypeScript & npm Basics for PCF Apps
2 pages
Shivu
No ratings yet
Shivu
1 page
Mean Stack R20 Unit-3 Jntuk
No ratings yet
Mean Stack R20 Unit-3 Jntuk
179 pages
Dot Net Full Stack Developer With 9.3 Years Exp
No ratings yet
Dot Net Full Stack Developer With 9.3 Years Exp
7 pages
Web Designer Portfolio & Skills
No ratings yet
Web Designer Portfolio & Skills
2 pages
Angular Interview Questions-2
No ratings yet
Angular Interview Questions-2
39 pages
Iit Roorkee Full Stack Software Dev
No ratings yet
Iit Roorkee Full Stack Software Dev
17 pages
Semantic-Release Guide for Devs
No ratings yet
Semantic-Release Guide for Devs
4 pages
Oracle Apex Release Notes
No ratings yet
Oracle Apex Release Notes
71 pages
CBS-354 Using VBA With Proficy IFIX
No ratings yet
CBS-354 Using VBA With Proficy IFIX
2 pages
Ziwewe Nyasha Systems Developer CV
No ratings yet
Ziwewe Nyasha Systems Developer CV
6 pages
Querix Lycia The Rebirth of Informix 4GL
No ratings yet
Querix Lycia The Rebirth of Informix 4GL
60 pages
Wipro Internship Report
100% (1)
Wipro Internship Report
37 pages
Essential Guide to Back-End Development
No ratings yet
Essential Guide to Back-End Development
28 pages
Professional React v19.0.0 Course
No ratings yet
Professional React v19.0.0 Course
356 pages
Resume Final
No ratings yet
Resume Final
1 page
RESUME Cristhian, Edwin, Ortiz, Mercado 01022023
No ratings yet
RESUME Cristhian, Edwin, Ortiz, Mercado 01022023
3 pages

HTML5 and Web Design Fundamentals

Uploaded by

HTML5 and Web Design Fundamentals

Uploaded by

Web Designing

HTML & HTML5 CONTENT

Bootstrap CSS Overview

Bootstrap Grid System

Web HTTP HTTP

Web Clients Web Servers

Web Client : These are static in nature.

Structure of an HTML Document:

Example HTML document

Basic Text Formatting:

Paragraph Tag: If we want to display text in paragraph we use paragraph tag.

Italic tag: This implements italic effects on the text.

Additional Text Formatting:

Example HTML document/ Create simple web page.

Ex: Create a web page using Ordered list.

First year II sem

Ex: Create a web page using Unordered list.

<title> 2nd year subjects (UL)

Ex: Create a web page using Definition list.

O/p web page:-

i. Create a web page using External link

<a href="#Section-A"> Section-A </a>

Attributes or: src/SRC It is used to specify the name of the image.

<img src=”gopi.jpg” align=”top” border=”5” width=”50%” height=”50”>

Advanced E-mail Links or Creating links to an email address:

Video and Audio to your web pages:

<head> <title> HTML Table </title> </head>

<head> <title> HTML Table </title>

<tr> <th align=center> S.No. </th>

<tr> <td align=center> 2 </td>

<th align=center> Vill. </th>

vi. Table header, footer, tbody and column group:

<tr> <th colspan=5> <u> I-Sem Maks </u> </th> </tr>

Forms: Introducing Forms:

<input type="text" name="username" id="username">

Ex: Create a web page to insert radio button.

Ex: Create web page is used to accept textarea.

Represented as: <select name="String">

Ex: Create web page is used Select Boxes. (Branches in a College)

<title> Select Box </title>

Represented as: <input type="submit" value="Submit">

Ex: Create web page is submit and reset.

Ex: Create a web page using Form.

Ex: Create Bio-Data for using HTML

<option> 15 </option> <option> 16 </option>

<td align="center"> JNTUH </td>

Frames: Introducing Frameset, <frame> Element:

Creating Frames and Nested Framesets:

<html> <head> <title>HTML Frames</title> </head>

Example-2: To create three vertical (columns) frames

Frameset Attributes are:

Frame Attributes are:

Ex: Program about links between frames. (Create a web site)

2. Create a Contact page

3. Create a Java page

4. Create a Ms-Office page

10.Create main page (linking page – my web page)

<th align="center"> 2.30-3.20 </th> </tr>

Cascading Style Sheets:

The selector points to the HTML element you want to style.

Types of Style Sheet:

Attributes are: Style

Internal Style Sheet:

Create a web document using Internal Style Sheet.

External Style Sheet:

Create a web document using External Style Sheet.

Create a web document using Embedded Style Sheet.

Imported Style Sheet:

Syntax: <style type=’text/css” @import URL(the path);

Create a web document using Imported Style Sheet.

Ex: body { color: blue; } h1 { color:green; }

/* Create web page using Text color using CSS */

/* Create web page using Text-align using CSS */

Create a web page using text-decoration1 using CSS.

<title> Text decoration-1 CSS </title>

Create a web page using Text-Shadow using CSS.

= Multiply var a=10; a=20; Now a