Scribd
Upload
19 views54 pages

Unit 1

This document provides an overview of Full Stack Development, focusing on HTML, CSS, and JavaScript. It covers essential concepts such as HTML tags, attributes, forms, multimedia, CSS styling, and JavaScript functions and objects. The document serves as a foundational guide for understanding web development technologies and their applications.

Uploaded by

Badri Narayanan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
19 views54 pages

Unit 1

This document provides an overview of Full Stack Development, focusing on HTML, CSS, and JavaScript. It covers essential concepts such as HTML tags, attributes, forms, multimedia, CSS styling, and JavaScript functions and objects. The document serves as a foundational guide for understanding web development technologies and their applications.

Uploaded by

Badri Narayanan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 54

UNIT 1

Full Stack Development


Building block of HTML Tags
• An HTML document consist of its basic building blocks which are:

Tags and Attributes

• Tags: An HTML tag surrounds the content and apply meaning to it.
It is written between < and > brackets.

• Attribute: An attribute in HTML provides extra information about


the element, and it is applied within the start tag. An HTML attribute
contains two fields: name & value.
background color in html
• background-color property defines the background color for an HTML element.

<!DOCTYPE html>
<html>
<body>
<body style="background-color:red;"> // background colours

<h1 style="background-color:Tomato;">Tomato</h1> //Specific content

</body>
</html>
HTML Styles
• The HTML style attribute is used to add styles to an element, such as color, font, size, and more.
<!DOCTYPE html>
<html>
<body>

<p>I am normal</p>
<p style="color:red;">I am red</p>
<p style="color:blue;">I am blue</p>
<p style="font-size:50px;">I am big</p>

</body>
</html>
HTML Comments

• HTML comments are not displayed in the browser, but they can help document
your HTML source code.

<!DOCTYPE html>
<html>
<body>

<!-- This is a comment -->


<p>This is a paragraph.</p>
<!-- Comments are not displayed in the browser -->

</body>
</html>
HTML Lists
• HTML Lists are used to specify lists of information. All lists may
contain one or more list elements.
• There are three different types of HTML lists:

Ordered List or Numbered List (ol)

Unordered List or Bulleted List (ul)

Description List or Definition List (dl)


 Ordered List or Numbered List (ol)

<ol>  Description List or Definition List (dl)


<li>Aries</li>
<li>Bingo</li> <dl> tag defines the start of the list.
<li>Leo</li> <dt> tag defines a term.
<li>Oracle</li> <dd> tag defines the term definition (description).
</ol> <dl>
<dt>Aries</dt>
 Unordered List or Bulleted List (ul) <dd>-One of the 12 horoscope sign.</dd>
<ul> <dt>Bingo</dt>
<li>Aries</li> <dd>-One of my evening snacks</dd>
<li>Bingo</li> <dt>Leo</dt>
<li>Leo</li> <dd>-It is also an one of the 12 horoscope sign.</dd>
<li>Oracle</li> <dt>Oracle</dt>
</ul> <dd>-It is a multinational technology corporation.</dd>
</dl>
HTML Nested

• List A list within another list is termed as nested list.

• If you want a bullet list inside a numbered list then such type of list
will called as nested list
HTML Forms
• An HTML form is used to collect user input.
• The user input is most often sent to a server for processing.

<!DOCTYPE html>
<html>
<body>
<h2>HTML Forms</h2>
<form action="/action_page.php">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value=“Mohamed"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value=“Divan"><br><br>
<input type="submit" value="Submit">
</form>
<p>If you click the "Submit" button, the form-data will be sent to a page called "/action_page.php".</p>
</body>
</html>
The <form> Element
The HTML <form> element is used to create an HTML form for user input:
Syntax

<form>
.
form elements
.
</form>

The <form> element is a container for different types of input elements, such as: text fields, checkboxes, radio buttons, submit
buttons, etc.
The <label> Element

Notice the use of the <label> element in the example above.

• The <label> tag defines a label for many form elements.

• The <label> element is beneficial for screen-reader users, because the screen-reader will read out loud

the label, when the user focuses on the input element.

• The <label> element also helps users, who have difficulty clicking on very small regions (such as radio

buttons or checkboxes)

• The for attribute of the <label> tag should be equal to the id attribute of the <input> element to bind

them together.
Radio Buttons

The <input type="radio"> defines a radio button.

Radio buttons let a user select ONE of a limited number of choices.


<html>
<body>

<h2>Radio Buttons</h2>

<p>Choose your favorite Web language:</p>

<form>
Output:-
<input type="radio" id="html" name="fav_language" value="HTML"> Choose your favorite Web language:
<label for="html">HTML</label><br> HTML
<input type="radio" id="css" name="fav_language" value="CSS"> CSS
JavaScript
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
</form>

</body>
</html>
Checkboxes
• The <input type="checkbox"> defines a checkbox.
• Checkboxes let a user select ZERO or MORE options of a limited number of choices.
Example
A form with checkboxes:
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike"> Output:-
<label for="vehicle1"> I have a bike</label><br>
This is how the HTML code above will be displayed
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car"> in a browser:
<label for="vehicle2"> I have a car</label><br>
I have a bike
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
I have a car
<label for="vehicle3"> I have a boat</label> I have a boat
</form>
HTML Multimedia
• Multimedia on the web is sound, music, videos, movies, and animations.

What is Multimedia?

• Multimedia comes in many different formats.

• It can be almost anything you can hear or see, like images, music, sound, videos, records, films,
animations, and more.

• Web pages often contain multimedia elements of different types and formats.

Browser Support

• The first web browsers had support for text only, limited to a single font in a single color.

• Later came browsers with support for colors, fonts, images, and multimedia!
Multimedia Formats

• Multimedia elements (like audio or video) are stored in media files.

• The most common way to discover the type of a file, is to look at the file extension.

• Multimedia files have formats and different extensions


like: .wav, .mp3, .mp4, .mpg, .wmv, and .avi.
Common Audio Formats
• MP3 is the best format for compressed recorded music. The term MP3 has become synonymous with digital
music.
• If your website is about recorded music, MP3 is the choice.
Video Formats
<!DOCTYPE html>
<html>
<body>
<video width="400" controls>
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML video.
</video>
<p>
Video courtesy of
<a href="https://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.
</p>
</body>
</html>
HTML Audio
• The HTML <audio> element is used to play an audio file on a web page.
• The HTML <audio> Element
• To play an audio file in HTML, use the <audio> element:
Example
<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>
HTML Styles - CSS
• CSS stands for Cascading Style Sheets.

• To control the layout of multiple web pages at once.

What is CSS?

• Cascading Style Sheets (CSS) is used to format the layout of a webpage.

• With CSS, you can control the color, font, the size of text, the spacing between elements, how
elements are positioned and laid out, what background images or background colors are to be
used, different displays for different devices and screen sizes, and much more.
Using CSS

CSS can be added to HTML documents in 3 ways:

1. Inline - by using the style attribute inside HTML elements

2. Internal - by using a <style> element in the <head> section

3. External - by using a <link> element to link to an external CSS file

• The most common way to add CSS, is to keep the styles in external CSS files.
Inline CSS

• An inline CSS is used to apply a unique style to a single HTML element.

• An inline CSS uses the style attribute of an HTML element.

• The following example sets the text color of the <h1> element to blue, and the text color of the
<p> element to red:
<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;">A Blue Heading</h1>

<p style="color:red;">A red paragraph.</p>

</body>
</html>
Internal CSS
• An internal CSS is used to define a style for a single HTML page.

• An internal CSS is defined in the <head> section of an HTML page, within a <style> element.

• The following example sets the text color of ALL the <h1> elements (on that page) to blue, and the text
color of ALL the <p> elements to red. In addition, the page will be displayed with a "powderblue"
background color: <html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style></head><body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
External CSS
• An external style sheet is used to define the style for many HTML pages.
• To use an external style sheet, add a link to it in the <head> section of each
HTML page:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
CSS Colors, Fonts and Sizes

• Here, we will demonstrate some commonly used CSS properties. You will learn more
about them later.

• The CSS color property defines the text color to be used.

• The CSS font-family property defines the font to be used.

• The CSS font-size property defines the text size to be used


CSS Border

The CSS border property defines a border around an HTML element.


Tip: You can define a border for nearly all HTML elements.

Example
Use of CSS border property:
p{
border: 2px solid powderblue;
}
CSS Padding
The CSS padding property defines a padding (space) between the text and
the border.
Example
Use of CSS border and padding properties:

p{
border: 2px solid powderblue;
padding: 30px;
}
CSS Margin
The CSS margin property defines a margin (space) outside the border.

Example
Use of CSS border and margin properties:

p{
border: 2px solid powderblue;
margin: 50px;
}
JavaScript
• JavaScript is an object-based scripting language which is lightweight and cross-
platform.

• JavaScript is not a compiled language, but it is a translated language.

• The JavaScript Translator (embedded in the browser) is responsible for translating the
JavaScript code for the web browser.
Features of JavaScript
There are following features of JavaScript:

1. All popular web browsers support JavaScript as they provide built-in execution environments.

2. JavaScript follows the syntax and structure of the C programming language. Thus, it is a structured
programming language.

3. JavaScript is a weakly typed language, where certain types are indirectly cast (depending on the
operation). (send the data indirectly to server)

4. JavaScript is an object-oriented programming language that uses prototypes rather than using classes
for inheritance.

5. It is a light-weighted and interpreted language.

6. It is a case-sensitive language.

7. JavaScript is supportable in several operating systems including, Windows, macOS, etc.

8. It provides good control to the users over the web browsers.


Application of JavaScript

JavaScript is used to create interactive websites. It is mainly used for:

• Client-side validation,

• Dynamic drop-down menus,

• Displaying date and time,

• Displaying pop-up windows and dialog boxes (like an alert dialog box, confirm
dialog box and prompt dialog box),

• Displaying clocks etc.


JavaScript Example

<script>

document.write("Hello JavaScript by JavaScript");

</script>
JavaScript Functions

• JavaScript functions are used to perform operations.

• We can call JavaScript function many times to reuse the code.

There are mainly two advantages of JavaScript functions.

• Code reusability: We can call a function several times so it save coding.

• Less coding: It makes our program compact. We don’t need to write many lines of

code each time to perform a common task.


JavaScript Function Syntax:-

The syntax of declaring function is given below.

function functionName([arg1, arg2, ...argN]){

//code to be executed

JavaScript Functions can have 0 or more arguments.


Examples:-

<html>

<body>

<script>

function msg(){

alert("hello! this is message");

</script>

<input type="button" onclick="msg()" value="call function"/>

</body>

</html>
JavaScript Function Object

• In JavaScript, the purpose of Function constructor is to create a new Function object.

• It executes the code globally. However, if we call the constructor directly, a function is created dynamically
but in an unsecured way.

Syntax

new Function ([arg1[, arg2[, ....argn]],] functionBody)


Parameter
• arg1, arg2, .... , argn - It represents the argument used by function.

• functionBody - It represents the function definition.


Example Program:-

<html>

<body>

<script>

var add=new Function("num1","num2","return num1+num2");

document.writeln(add(2,5));

</script>

</body>

</html>
JavaScript Objects

• A javaScript object is an entity having state and behavior (properties and method). For

example: car, pen, bike, chair, glass, keyboard, monitor etc.

• JavaScript is an object-based language. Everything is an object in JavaScript.

• JavaScript is template based not class based. Here, we don't create class to get the object.

But, we direct create objects.


Creating Objects in JavaScript

There are 3 ways to create objects.


1. By object literal
2. By creating instance of Object directly (using new keyword)
3. By using an object constructor (using new keyword)

JavaScript Object by object literal

The syntax of creating object using object literal is given below:

object={property1:value1,property2:value2.....propertyN:valueN}

As you can see, property and value is separated by : (colon)


Example:-

<html>

<body>

<script>

emp={id:102,name:"Shyam Kumar",salary:40000}

document.write(emp.id+" "+emp.name+" "+emp.salary);

</script>

</body>

</html>
By creating instance of Object

The syntax of creating object directly is given below:

var objectname=new Object();

Here, new keyword is used to create object.

<html>
<body>
<script>
var emp=new Object();
emp.id=101;
emp.name="Ravi Malik";
emp.salary=50000;
document.write(emp.id+" "+emp.name+" "+emp.salary);
</script>
</body>
</html>
By using an Object constructor

• Here, you need to create function with arguments.

• Each argument value can be assigned in the current object by using this keyword.

The this keyword refers to the current object.


<html>
<body>
<script>
function emp(id,name,salary){
this.id=id;
this.name=name;
this.salary=salary;
}
e=new emp(103,"Vimal Jaiswal",30000);

document.write(e.id+" "+e.name+" "+e.salary);


</script>
</body>
</html>
JS Condition Statements
The JavaScript if-else statement is used to execute the code whether condition is true or false. There are three forms
of if statement in JavaScript.

1. If Statement

2. If else statement

3. if else if statement

JavaScript If statement

It evaluates the content only if expression is true. The signature of JavaScript if statement is given below.

if(expression){

//content to be evaluated

}
Example program

<html>

<body>

<script>

var a=20;

if(a>10){

document.write("value of a is greater than 10");

</script>

</body>

</html>
JavaScript If...else Statement

It evaluates the content whether condition is true of false. The syntax of


JavaScript if-else statement is given below,
if(expression){
//content to be evaluated if condition is true
}
else{
//content to be evaluated if condition is false
}
Program

<html>

<body>

<script>

var a=20;

if(a%2==0){

document.write("a is even number");

else{

document.write("a is odd number");

</script>

</body>

</html>
JavaScript If...else if statement
• It evaluates the content only if expression is true from several expressions. The signature of JavaScript if else
if statement is given below.

if(expression1){
//content to be evaluated if expression1 is true
}
else if(expression2){
//content to be evaluated if expression2 is true
}
else if(expression3){
//content to be evaluated if expression3 is true
}
else{
//content to be evaluated if no expression is true
}
<html>

<body>

<script>

var a=20;

if(a==10){

document.write("a is equal to 10");

else if(a==15){

document.write("a is equal to 15");

else if(a==20){

document.write("a is equal to 20");

else{

document.write("a is not equal to 10, 15 or 20");

</script>

</body>

</html>

You might also like