Scribd
Upload
20 views

HTML Css Javascript

Uploaded by

Sayantan Marik
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
20 views

HTML Css Javascript

Uploaded by

Sayantan Marik
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 88

Introduction to HTML and CSS

<Date>
TCS- INTERNAL
HTML
•
HTML - Hyper Text Markup Language.

•
Standard markup language for creating Web pages.

•
Defines the content and structure of web content.

•
Tells the browser, where to place the content of the
webpage.

Document Name
TCS Internal
HTML
•
Extension used to save html documents - .html

•
HTML document is a collection of HTML elements.

•
HTML elements contains HTML tags and contents

Document Name
TCS Internal
HTML Elements
•
Individual component of an HTML document.

•
Contains a pair of tags and an enclosed content.

•
SYNTAX:
<opening_tag> CONTENT <closing _tag>

•
Eg: <b> This is a bold text </b>

Document Name
TCS Internal
HTML Tags
•
Indicate how the content enclosed by them should be
displayed.

•
Contained opening tag and closing tag.

•
Closing tag have a backslash '/'

•
Eg: <b> -opening tag, </b> - closing tag

•
Special types of tag that does not have closing tag –
Empty tags. Eg: <br>

Document Name
TCS Internal
HTML Attributes
•
HTML elements can have additional properties linked to it.

•
They do not have individual existence.

•
Each attribute should have a value.

•
The value should be written within quotes.

•
Syntax:
<tag_name attribute_name = "value">

Document Name
TCS Internal
HTML Structure

<!DOCTYPE html>
<html>
<head>
<title> Document title </title>
</head>
<body>

Web page content

</body>
</html>

Document Name
TCS Internal
HTML Structure
<!DOCTYPE>
●
Defines document type to web browser.
●
Not an html tag.

<html>
●
Defines the entire html document.

<head>
●
Represent document header
●
Include other tags like title link etc

Document Name
TCS Internal
HTML Structure
<title>
●
used inside <head>
●
Specify document title

<body>
●
represent document body that include other tags like <p>
<h1> etc.

Document Name
TCS Internal
HTML Tags
Heading tags:

●
Used to define headings
●
<h1> to <h6>
●
<h1> define largest heading
●
<h6> define smallest

Attributes:
●
Align – specify alignment of the heading.

Eg: <h1 align="center"> Heading 1 </h1>

Document Name
TCS Internal
HTML Tags
Paragraph tags: <p>

●
It can be considered as block of text.
●
Adds single blank line before and after <p>
●
Defined using <p> and </p>

Attributes:
●
Align – specify alignment of the heading.
●
Id – specify unique id of the element

Eg: <p> ….. </p>

Document Name
TCS Internal
HTML Tags
Line Break tags: <br>
●
Used when we want to start a new line.
●
It is an empty tag.

Horizontal line tags: <hr>


●
Used when we want to insert a horizontal divider line that
separate sections

Attributes:
●
Width – specify size of the line

Document Name
TCS Internal
HTML Tags
HyperLinks tags: <a>

●
Used to insert hyperlinks in a webpage.
●
Defined by using <a> and </a>

Attributes:
●
Href – specify the url of the page to which the link goes to

Eg: <a href="https://www.google.com"> Click me </a>

Document Name
TCS Internal
HTML Tags
Image tags: <img>
●
Used to insert images in a webpage.
●
Defined by using <img>
●
It is an empty tag.

Attributes:
●
Src – specify the location of the image to be inserted.
●
Alt - Specify the alternative description for the image if the
image fails to load.
●
Width - specify the width of image.
●
Height – specify the height of the image.

●
Eg: <img src="image.jpg" alt=”Image not displayed”>
Document Name
TCS Internal
HTML Tags
List tags:

-
HTML support 2 types of list.

-
UNORDERED LIST: List of items marked with bullets.

-
ORDERED LIST : List of items marked with numbers or
letters.

Document Name
TCS Internal
HTML Tags
List tags:

UNORDERED LIST:

-
Defined using <ul> and </ul>

<ul>
<li> Item 1 </li>
<li> Item 2 </li>
<li> Item 3 </li>
</ul>

Document Name
TCS Internal
HTML Tags
List tags:

ORDERED LIST:

-
Defined using <ol> and </ol>

<ol>
<li> Item 1 </li>
<li> Item 2 </li>
<li> Item 3 </li>
</ol>

Document Name
TCS Internal
HTML Tags
Table tags:

-
Used to insert tables in a web page.
-
Defined by using <table>

It has following sub tags:


1. <tr> to create a row
2. <td> To create a data cell in a row
3. <th> to create heading in a data cell

Document Name
TCS Internal
HTML Tags
Table tags:

Attributes:

●
Border: Specify the border width of the table. Initially it will
be set as zero.
●
Rowspan: specify the number of rows a data cell should
span.
●
Colspan: specify the number of columns a data cell
should span.

Document Name
TCS Internal
HTML Tags
Table tags:
<table border=1>
<tr>
<td> Item1 </td>
<td> Item2 </td>
<td> Item3 </td>
</tr>
<tr>
<td> Item4 </td>
<td> Item5 </td>
<td> Item6 </td>
</tr>
</table>

● Document Name
TCS Internal
HTML Tags
Form tags: <form>

●
Used to create forms in document.
●
It has 2 attributes:
1. action: Specify the location to where the data from the
form must be sent.
2. method: Specifies how the data must be sent. It can be
GET method or POST method.

Eg: <form action="loginServlet.jsp" method="get">


......... Form elements........
</form>

●
Document Name
● TCS Internal
HTML Tags
Form tags:

<input> element:
●
An <input> element can be displayed in many ways,
depending on the type attribute.
●
It is an empty tag
Some of the input types are:
1. Text input 5. Clickable button
2. Check box input 6. Submit button
3. Radio box 7. Reset button
4. Select box

Document Name
TCS Internal
HTML Tags
Form tags:

<input> element:

●
It has following attributes:

1. Name: to assign a name to the field.


2. id: to assign a unique id to the field.

Document Name
TCS Internal
HTML Tags
Form tags:

Document Name
TCS Internal
HTML Tags
Form tags: Input Types

Text:
●
Used to insert single line text.
●
Eg: Name <input type="text" name="firstName">
●
It has following attributes:

1. Value: To assign an initial value.


2. Maxlength: to specify maximum characters the field can
have.

Document Name
TCS Internal
HTML Tags
Form tags: Input Types

Password
●
Used to insert password.
●
It masks the entered characters.
●
Eg: Password <input type="Password" name="pwd">

Document Name
TCS Internal
HTML Tags
Form tags: Input Types

CheckBox:
●
It let users to select ZERO or MORE options of a limited
number of choices.
●
Eg:

Document Name
TCS Internal
HTML Tags
Form tags: Input Types

CheckBox:
<input type="checkbox" value="Bike"> I have a bike <br>
<input type="checkbox" value="Car"> I have a car <br>
<input type="checkbox" value="Boat"> I have a boat <br>

Attributes:
1. value: Specifies the value that will be passed and stored
when the check box is selected.
2. checked: It will be checked by default.

Document Name
TCS Internal
HTML Tags
Form tags: Input Types

Radio Button:
●
It let users to select ONE of a limited number of choices.
●
Only one option can be selected.
●
Eg:

Document Name
TCS Internal
HTML Tags
Form tags: Input Types

Radio Button:
<input type="radio" id="Red" name="RadioExample"
value="Red"> Red <br>
<input type="radio" id="Blue" name="RadioExample"
value="Blue"> Blue <br>
<input type="radio" id="Green" name="RadioExample"
value="Green"> Green <br>
Attributes:
1. value: Specifies the value that will be passed and
stored when the check box is selected.

Document Name
TCS Internal
HTML Tags
Form tags: Input Types

Select Box:
●
Used to create a drop-down list.
●
The <option> tags inside the <select> element define the
available options in the drop-down list.

Document Name
TCS Internal
HTML Tags
Form tags: Input Types

Select Box:

<select>
<option value="Item1"> Item1 </option>
<option value="Item2"> Item2 </option>
<option value="Item3"> Item3 </option>
</select>

Document Name
TCS Internal
HTML Tags
Form tags: Input Types

Button Control:

For buttons, the type attribute can be set to following values:


1. submit: It submits the form
2. reset: It clears all the entered values.
3. button: creates a button without any predefined
behaviour.

Document Name
TCS Internal
HTML Tags
Form tags: Input Types

Button Control:

1. submit button:
Submits all form values to a form-handler.
form handler is the server page specified in the action
attribute of from.

Eg: <input type="submit" value="submit">

Document Name
TCS Internal
HTML Tags

Document Name
TCS Internal
HTML Tags
Form tags:

Text Area: <textarea>

It is used when we need a multi-line input from user.

● Eg: <textarea rows="4" cols="50"> </textarea>

Document Name
TCS Internal
Cascading Style Sheets (CSS)

<Date>
TCS- INTERNAL
CSS
•
CSS - Cascading Style Sheets

•
HTML have limitations on styling the webpages.

•
It is responsible for "LOOK AND FEEL" to any HTML
document.

•
Using CSS, we can write style rules

•
The style rules, tells the browser how a content should
be displayed.

Document Name
TCS Internal
CSS – Levels of Style Sheets
•
The style sheets developed using CSS, can be applied at
three different levels.

1. Inline level (bottom most)


2. Document level
3. External level (topmost)

Document Name
TCS Internal
CSS – Levels of Style Sheets
Inline level CSS:

●
The style specification appears within the opening tag.
●
It applies only to the content of that tag.
●
SYNTAX:
<opening_tag style="property1:value1;
property2:value2; ….. ;">

●
Eg: <h1 style="color:red;"> Hello </h1>

Document Name
TCS Internal
CSS – Levels of Style Sheets
Document level CSS:

●
The style specification is embedded by using the <style>
tag.
●
The <style tag is always written within the <head> tag
●
Used when you have to apply a style for entire document.
●
SYNTAX: <head>
<style>

Style rules

</style>
</head>

Document Name
TCS Internal
CSS – Levels of Style Sheets
Document level CSS:
<html>
●

<head>
<style>
body {
background-color: blue;
}
h1 {
color: red;
}
</style>
</head>
<body>
<h1>Hello </h1>
</body>
</html>

Document Name
TCS Internal
CSS – Levels of Style Sheets
External level CSS:

●
The style rules will be written in separate file and saved
by using extension .css
●
This external file is then linked to the required document
by using the <link> tag.
●
<link> tag is used within <head> tag. It is an empty tag.
●
Used when a style is to be applied in more than one web
page.

Document Name
TCS Internal
CSS – Levels of Style Sheets
External level CSS:

●
The <link> tag have following attributes:

1. rel: It specifies reltionship with the current document and


another document. Set as stylesheet
2. type: Specifies the type of document been linked. Set as
text/css.
3. Specifies the location of external css file.

Eg: <link rel="stylesheet" href="style1.css">

Document Name
TCS Internal
CSS – Levels of Style Sheets

●
A HTML Document can have all 3 levels of
stylesheets.

●
But the lower level will override the higher one.

Document Name
TCS Internal
CSS – Style Rules
●
The style rules for document level css and external level
css contains selector and declaration.

●
Selector is the HTML tag to which the rule will be applied

●
Declaration contains the property-value pair. It is present
within curly bracket.

Selector {
property1 : value1;
property2 : value2;
.......
}

Document Name
TCS Internal
CSS – Style Rules : Selectors
●
The different types of selectors are:

1. Universal selector
2. Element Selector
3. Id Selector
4. Class Selector

Document Name
TCS Internal
CSS – Style Rules : Selectors
1. Universal selector

●
It will be applied to all elements in the document.
●
Eg: *{color:blue; font-size: 21px;}

2. Element Selector

●
The HTML element name will be specified directly.
●
Eg: h1 {color: blue;}

Document Name
TCS Internal
CSS – Style Rules : Selectors
3. Id Selector

●
The id attribute of the HTML element will be used.
●
ID value should be written after (#).
●
Eg: #Id1 { color : blue; }

4. Class Selector

●
It uses the class attribute of HTML elements
●
The class value should be written after (.)
●
Eg: p.class1{color : blue; }

Document Name
TCS Internal
CSS – Properties
1. Font properties
2. Background properties
3. Text properties
4. Border properties
5. Color properties
6. Table properties
7. Margin properties
8. Padding properties

Document Name
TCS Internal
CSS – Properties
1. Font properties
●
font-family: Arial;
●
font-size: 10pt;
●
font-weight: bold;

2. Background properties:
●
background-color
●
background-image

Document Name
TCS Internal
CSS – Properties
3. Text properties
●
text-color
●
text-align
●
letter-spacing
●
line-height

4. Margin and Padding:


●
margin: 50px;
●
padding: 80px;

Document Name
TCS Internal
JavaScript (JS)

<Date>
TCS- INTERNAL
JavaScript
●
JavaScript is a scripting language that enables you to
create dynamically.

●
Developed by Netscape.

●
Earlier known as LiveScript.

●
JavaScript is a client-side script - the browser processes
the code instead of the web server.

●
It is case sensitive.

Document Name
TCS Internal
JavaScript - Uses
●
Adds programming capability on web pages.

●
Modify pages.

●
Display pop up window and dialog box.

●
Dynamic drop-down menu.

●
Perform conditional operations.

●
Validate form.

Document Name
TCS Internal
JavaScript - Implementation
It is implemented in HTML by using the <script> tag.

SYNTAX:
<script>
JavaScript code
</script>

Eg:
<script>
document.getElementById("demo").innerHTML = "Hello";
</script>

Document Name
TCS Internal
JavaScript - Example
<html>
<head>
<title> JS Sample </title>
</head>
<body>
<script>
document.write("Hello World");
</script>
</body>
</html>

Document Name
TCS Internal
JavaScript - Implementation
It can be implemented in 3 ways:

1. Within the <head> tag (implicit embedding)


2. Within the body element (explicit embedding)
3. Indirectly embedding by using the URL of JS file
- The JS code will be written in separate file and save it with
extension .js
- The JS file can be added by using the src attribute
- Eg: <script src="myScript.js"></script>

Document Name
TCS Internal
JavaScript – Display on Screen
In JS, the message can be displayed on the screen by using
following methods:

1. alert()
2. document.write()
3. innerHTML

Document Name
TCS Internal
JavaScript – Display on Screen
1. alert()

It opens a dialog box with a message.

Document Name
TCS Internal
JavaScript – Display on Screen

Example:

<script>
alert("Hello World");
</script>

Document Name
TCS Internal
JavaScript – Display on Screen
2. document.write

<html>
<head>
<title> JS Sample </title>
</head>
<body>
<script>
document.write("Hello World");
</script>
</body>
</html>

Document Name
TCS Internal
JavaScript – Display on Screen
3. innerHTML

<body>
<p id="id1"> </p>
<script>
document.getElementById("id1").innerHTML = "Hello World";
</script>
</body>

Document Name
TCS Internal
JavaScript – Variables
It is a name that is used to store values and information.

Variables in JS should:
●
The first character should be a letter or underscore symbol.
●
Remaining can be any letters, numbers or underscore.
●
Case sensitive.

Declaring variables can be done by using keyword


var, let, const

Eg: var x=10;

Document Name
TCS Internal
JavaScript - Datatypes
• Integer: Numeric values

• String: Group of characters

• Boolean: Value either true or false

• Undefined: Declared but it is not defined. Eg: var x;

• Null: declared but the value is not assigned. Eg: var x=null;

Document Name
TCS Internal
JavaScript – Arithmetic operations
• Addition

• Subtraction

• Multiplication

• Division

• Modulus

Document Name
TCS Internal
JavaScript - Sample
<html>
<head>
</head>
<body>
<h1> Arithmetic Operation </h1>
<script>
var a=100;
b=50;
x=a+b;
document.write(x + "<br>");
</script>
</body>
</html>

Document Name
TCS Internal
JavaScript - Functions
A function is a block of code which only runs when it is called.

Useful when you have to perform same action multiple times.

SYNTAX:

<script>
function function_name(parameters)
{
JavaScript code
}

</script>

Document Name
TCS Internal
JavaScript - Functions
<script>

function sum(a,b)
{
document.write(a+b);
}

var x=10;
var y=20;
sum(x,y);

</script>

Document Name
TCS Internal
JavaScript - Functions
Build in Functions:

IsInteger() - Eg: Number.isInteger(123);


ParseInt() - Eg: parseInt("10");
toString()
concat()
replace()
slice()
Math.random()
Math.floor()

Document Name
TCS Internal
JavaScript – Scope of Variables
It is the region where a variable can be accessed.

In JS, the scope of the variable is within the block.

Eg: Output: 10

<script>
function myFunction() {
var x=10;
document.write(x + "<br>");
}
myFunction();
document.write(x);
</script>

Document Name
TCS Internal
JavaScript – Scope of Variables

<script>
var x=10;
function myFunction() {
document.write(x + "<br>");
}
myFunction();
document.write(x);
</script>

Output: 10
10

Document Name
TCS Internal
JavaScript – Scope of Variables

<script>
var x=10;
function myFunction() {
Var x =20;
document.write(x + "<br>");
}
myFunction();
document.write(x);
</script>

Output: 20
10

Document Name
TCS Internal
JavaScript - Event
• It helps to make the web page more dynamic

• It executes the statement based on the action performed by


user.

• It performs some action when the event take place

Examples:

• A mouse click
• Loading of web page

Document Name
TCS Internal
JavaScript - Event
Some common event attributes are:

●
Onclick
●
Onload
●
Ondrag
●
Ondrop
●
Onchange
●
Onmouseout
●
Onselect

Document Name
TCS Internal
JavaScript - Event

<body>
<button onclick=myFunction()> Click Me </button>
<script>

function myFunction() {
alert(" Button Clicked! ");
}
</script>

</body>

Document Name
TCS Internal
JavaScript – Conditional Statements
Statement that makes decision based on given condition.

Following are the conditional statement in JS:


• If - else
• If - else if
• switch

Document Name
TCS Internal
JavaScript – Conditional Statements
If – else
• It executes a block of code if a specified condition is true.
• If the condition is false, another block of code can be
executed.
•
SYNTAX:

if (condition)
{
statements
}
else
{
statements
}
Document Name
TCS Internal
JavaScript – Conditional Statements
<script>
var a=5;
var b=6;
if(a>b)
{
document.write(a+" is greater");
}
else
{
document.write(b+" is greater");
}
</script>

Document Name
TCS Internal
JavaScript – Conditional Statements
If – else if

• if statement specifies a block of code to be executed if a


condition is true.

• else if statement specifies a new condition if the first


condition is false.

• else statement specifies a block of code to be executed if


the condition is false.

Document Name
TCS Internal
JavaScript – Conditional Statements
SYNTAX:

if (condition)
{
statements
}
else if (condition)
{
statements
}
else
{
statements
}

Document Name
TCS Internal
JavaScript – Loop Statements
It is used to execute a block of code for n times.

Different types of loops are:

• For loop
• While loop
• Do - while loop

Document Name
TCS Internal
JavaScript – Loop Statements
For Loop
SYNTAX:

for(initialization; condition; updation)


{

statements

Document Name
TCS Internal
JavaScript – Loop Statements
Example:

<script>
for ( let i = 0; i < 5; i++)
{
document.writre(i+"<br>);
}
</script>

Document Name
TCS Internal
JavaScript – Loop Statements
While Loop

initialization

while(condition)
{

statement

updation

Document Name
TCS Internal
JavaScript – Loop Statements
While Loop

<script>

var i=0;

while(i<5)
{
document.write(i + "<br>");
i++;
}

</script>

Document Name
TCS Internal
JavaScript – Form Validation

Document Name
TCS Internal
Thank You

Document Name
TCS Internal

You might also like