Scribd
Upload
11 views143 pages

Front End Course

Uploaded by

sravanthiduddela02
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
11 views143 pages

Front End Course

Uploaded by

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

FRONT -END

HTML

1. HTML Introduction
2. HTML Tags
3. HTML Building Blocks
4. HTML Headings
5. HTML Paragraph
6. HTML Images
7. HTML Anchor
8. HTML Tables
9. HTML Forms
10. HTML Audio
11. HTML Video
12. HTML Comments
13. HTML Formatting
14. HTML List
15. HTML I frames
16. HTML Navigation
17. HTML Favicon
18. HTML Layouts
19. HTML URL Encode
20. HTML TAGS LIST

CSS

1. CSS Introduction
2. CSS Colors
3. CSS Selectors
4. CSS Borders
5. CSS Box Model
6. CSS Display Properties
7. CSS Positions
8. CSS Text Properties
9. CSS Fonts
10. CSS Background Properties
11. CSS Animations
12. CSS Media Queries
13. CSS 3D Animations
JAVA SCRIPT (JS)

1. JS Introduction
2. JS Features
3. JS Variables
4. JS Data Types
5. JS Arrays
6. JS Operators
7. JS Loops
8. JS Functions
9. JS Events
10. JS Dom
11. JS Ajax
12. JS OOPS
13. JS ES-6 Concepts
Front end Development:
- Front-end development (or) creation of user interface (UI) using some Non – Markup language and
other tools.
- It is the development of the user side where only user interaction will be conduct (or) occurs. It
consists of the interface where buttons text alignment and …etc. are involved and used by the user.

(or)
By using front end development we can create the web pages by using different languages.

There are two types of web pages:


1. Static web pages
2. Dynamic web pages

Front end development languages:


- HTML(Hyper Text Markup Language
- CSS(Cascading Style Sheet)
- Java script
- Bootstrap
- React JS
Syntax:

<html>
<head>
<title> </title>
</head>
<body>
</body>
</html>
HTML
(HYPER TEXT MARKUP LANGUAGE)
1. HTML Introduction

1. HTML Introduction:
- HTML stands for Hyper Text Markup Language.
- By using HTML we can add the content (text, images, tables, fonts ….etc.) to a web page.
- HTML was introduced by Tim Beavers Lee in the year of 1991.
- We can add this types of content by using tags.

Advantages of HTML:
1. All browsers supports HTML files.
2. It is easy to understand and learn.
3. It is useful for all beginners in web designing.
4. The software is available for free.
5. It is widely used.
6. Simple syntax.
Disadvantages of HTML:
1. It takes more time.
2. It is not completely secured.
3. It is only used for static & Plain page.
4. Limited design capability.

Types of HTML:
We have 3 categories of HTML,
1. Transitional type HTML
2. Strict type HTML
3. Frameset type HTML

1. Transitional HTML: It is one the HTML document that allows some presentational markup and
deprecated elements (<font> elements) but not framesets which validates loose HTML Markup.

Syntax:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"


"http://www.w3.org/TR/html4/loose.dtd">
2. Strict type HTML: It is one the HTML document that doesn’t allows some presentational markup and
deprecated elements (<font> elements) but not framesets which validates loose HTML Markup.

Syntax:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"


"http://www.w3.org/TR/html4/strict.dtd">

3. Frameset type HTML: A frameset is the HTML element that defines how a given number of frames are
to be arranged and displayed on a webpage is known as Frameset type HTML.

Doctype HTML:

The Doctype in HTML is a declaration that tells a browser how to interpret & render a document.

Meta:
- A tag which provides information about the document.
- The metadata from Meta tags is not displayed on the rendered webpage.
- The main purpose is to provide information to browsers, search engines and other web services to
display, interrupt and to handle the webpage.
- It is placed within the <head> section of HTML Document.
Uses of Meta tags:
1. Character Encoding: By using charset attribute we can ensure whether the browser interprets the
characters & symbols on the webpage.

Syntax:

<meta charset = “character set”>

2. Viewport Control: Area which content is visible to the user in a webpage is known as Viewport. The
viewport doesn’t have same size, it varies on various screen sizes of devices (Mobile, laptop, Tab,
Desktop, TV…etc.) on which the webpage is visible.

Syntax:

<meta name="viewport" content= "width=device-width, initial-scale=1.0">

3. Page Description: A page that provides a brief summary of a webpage's content is known as Page
Description. It helps search engines and users understand the page purpose and content.

Syntax:

<meta name="description" content="This is a brief description of the page.">


4. Keywords: It is used to specify keywords for search engines.

Syntax:

<meta name="keywords" content="HTML, CSS, JavaScript, Web Development">

5. Search Engine Index: It is used to ensure whether search engines should index and follow links on the
page.

Syntax:

<meta name="robots" content="index, follow">

6. Google Site Verification: It is used to verify ownership of a website with google.

Syntax:

<meta name="google-site-verification" content="your-verification-code" />

7. HTTP-Equiv: It is used to specify instructions for HTTP headers, such as refreshing the page (or) setting
the language.

Syntax:

<meta http-equiv="value" content="setting">

Differences B/W HTML & HTML5:

HTML HTML5

It didn’t support audio and video without the use It supports audio and video controls with the use
of flash player support. of <audio> and <video> tags.

It uses SQL databases and application cache to


It uses cookies to store temporary data.
store offline data.

Does not allow JavaScript to run in the browser. Allows JavaScript to run in the background. This
HTML HTML5

is possible due to JS Web worker API in HTML5.

Vector graphics are possible in HTML with the


Vector graphics are additionally an integral part
help of various technologies such as VML, Silver-
of HTML5 like SVG and Canvas.
light, Flash, etc.

It does not allow drag and drop effects. It allows drag and drop effects.

Not possible to draw shapes like circle, rectangle, HTML5 allows to draw shapes like circle,
triangle etc. rectangle, triangle etc.

It supported by all new browser like Firefox,


It works with all old browsers.
Mozilla, Chrome, Safari, etc.

<HTML>,<Body> , and <Head> tags are These tags can be omitted while writing HTML
mandatory while writing a HTML code. code.

Older version of HTML are less mobile-friendly. HTML5 language is more mobile-friendly.

Doctype declaration is too long and complicated. Doctype declaration is quite simple and easy.

New element for web structure like nav, header,


Elements like nav, header were not present.
footer etc.

Character encoding is long and complicated. Character encoding is simple and easy.

It is almost impossible to get true GeoLocation of One can track the GeoLocation of a user easily by
user with the help of browser. using JS GeoLocation API.

It can not handle inaccurate syntax. It is capable of handling inaccurate syntax.

Being an older version , it is not fast , flexible , It is efficient, flexible and more fast in
and efficient as compared to HTML5. comparison to HTML.

Attributes like charset, async and ping are absent Attributes of charset, async and ping are a part of
in HTML. HTML 5.
2. HTML Tags

HTML Tags
There are two types of tags,
1. Single tags: It has starting tag but no end tag.
ex: <img>,<hr>,<meta>,<link>,<br>…..etc.

2. Pair tags: It has both open and closing tags.


ex: <p> and </p>, <ol> and </ol>……etc.
3. HTML Building blocks

HTML Building blocks:


An HTML document consists of basic building blocks which are,
1. Tags
2. Attributes
3. Elements

1. Tags: An HTML tag is written in between < and > brackets and acts as a container for different types of
content. Each tag has its own specific meaning, and the same applies to the content within it.
2. Attributes: To provide some extra information about a particular element, attributes are used in an
HTML document. An attribute is applied within the start tag of a particular element and contains two
fields: name & value.
3. Elements: An element in an HTML document can be understood as an individual component of an
HTML file. In more simple words, the elements are everything written within tags, including the tags,
attributes, and contents.

Syntax: <Tag Attributes=” ”>Elements<Tag >

Block line/Block level & Inline Elements:

Block Level/Block Level Elements: A Block level/line elements that always starts in a new line & the browser
automatically adds some wide space before and after element. It always takes up the full width available.
Ex: <h1> to <h6>,<li> <li>,<ol> <ol>,<ul> <ul>…..etc.

In-line Elements: An In-line element does not starts on new line, It starts always on the same line. It only takes
up as much as width necessary.
Ex: <a><img>….etc.
Div & Span Tags:
Div Tag:
- Div is also known as Division tag.
- It is used as a container for other HTML elements.
- It is block level element.
- It will takes all available width and comes with line breaks before and after the element.
Span Tag:
- This span tag is a In-line container.
- It is used to mark up a part of text (or) part of document.

Semantic & Non-Semantic Elements:


Semantic Elements: A Semantic Elements clearly describes it’s meaning & purpose to the browser and
developer.
Ex: All tags except <div>&<span>
Non-Semantic Elements: A Non-Semantic Elements will not describes it’s meaning.
Ex: <div>&<span>
4. HTML Headings

HTML Headings:

HTML Headings are titles and subtitles which we display on the webpage.

- HTML Headings are defined by <h1> to <h6> tag.


- <h1> tag will define most important heading (or) highest size of heading.
- <h6> tag will defines the least size of heading.

Syntax:
<h1>Heading no. 1</h1>
<h2>Heading no. 2</h2>
<h3>Heading no. 3</h3>
<h4>Heading no. 4</h4>
<h5>Heading no. 5</h5>
<h6>Heading no. 6</h6>

Sample Code:

<html>

<head>
<title>Headings</title>
</head>

<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>

</html>
Output:
5. HTML Paragraph

HTML Paragraph:

A paragraph always starts in a new line and it is denoted with <p>. Browsers automatically add same wide
space before and after a paragraph.
Note: If we are using various <p> tags in one HTML file then browser automatically adds a single blank line
between the two paragraphs.

Syntax:
<p>This is first paragraph</p>
<p>This is second paragraph</p>
<p>This is third paragraph</p>

Sample Code:

<html>

<head>
<title>HTML PARAGRAPH</title>
</head>

<body>
<p>A paragraph always starts in a new line and it is denoted with
<p>. Browsers automatically add same wide space before and after a paragraph.
Note: If we are using various
<p> tags in one HTML file then browser automatically adds a single blank line
between the two paragraphs.
</p>
</body>

</html>
Output:
6. HTML Images

HTML Images:

The image tag will be defined with <img> tag. The <img> tag is used to embed an image in an HTML page.
Images are not technically inserted into a web page, images are linked to the web page. The image tag creates
a holding space for the reference image.

The image tag has two required attributes, they are ‘src’ and ‘alt’.
1. src: It specifies the path of the image.
2. Alt: It specifies an alternative text for the image if the image not displayed for some reasons.

Syntax:

<img src="" alt="">

Sample code:

<html>

<head>
<title>HTML Images</title>
</head>

<body>
<img src="https://inc42.com/cdn-cgi/image/quality=75/https://asset.inc42.com/
2023/11/flipkart-robbery-featured-.png"
alt="Flipkart" style="width:1360px;height:720px;">
</body>

</html>
Output:
7. HTML Anchor

HTML Anchor:
An anchor tag defines a hyper link which is used to link from one page to another. The anchor tag is
denoted with <a>. The most important attribute of the <a> element is the ‘href’ attribute, which indicates the
links destination.

Syntax:

<a> href “.…….. ” link text </a>

Sample Program:

<html>

<head>
<title>anchor tag</title>
</head>

<body>
<a href=" http://www.flipkart.com" target="_blank">Flipkart</a><br>
<a href=" https://www.amazon.in" target="_blank">Amazon</a>
</body>

</html>
Output:
8. HTML Table

HTML Table
- HTML tables allow web developers to arrange data into a rows and columns.
- Table tag will denotes with <table> </table>.
There are three major sub tags in HTML Table,
1. <tr> : table row
2. <th> : table heading
3. <td> : table data

Syntax:

<table>
<tr>
<th>heading<th>
<td>data<td>
<tr>
</table>

Sample Program:

<html>

<head>

</head>

<body>
<h1 align="center">TABLE</h1>
<table border="2px" style="border-collapse: collapse;" cellpadding="20px">
<tr>
<th colspan="10 ">TIME TABLE</th>
</tr>

<tr>
<th rowspan="2">DAY</th>
<th>PERIOD'S</th>
<td>P-1</td>
<td>P-2</td>
<td>P-3</td>
<td rowspan="2">12:00PM-1:00PM</td>
<td>P-4</td>
<td>P-5</td>
<td>P-6</td>
<td>P-7</td>
<tr>
<th>TIMING'S</th>
<td>9:30AM-10:20AM</td>
<td>10:20AM-11:10AM</td>
<td>11:10AM-12:00PM</td>
<td>1:00PM-1:50PM</td>
<td>1:50PM-2:40PM</td>
<td>2:40PM-3:30PM</td>
<td>3:30PM-4:20PM</td>
</tr>
</tr>

<tr>
<th>MONDAY</th>
<th rowspan="6"></th>
<td>ENG</td>
<td>MATH</td>
<td>CHEM</td>
<td rowspan="6">L<br>U<br>N<br>C<br>H</td>
<td colspan="3">LAB</td>
<td>PHY</td>
</tr>

<tr>
<th>TUESDAY</th>
<td colspan="3">LAB</td>
<td>ENG</td>
<td>CHEM</td>
<td>MATH</td>
<td>SPORTS</td>
</tr>

<tr>
<th>WEDNESDAY</th>
<td>MATH</td>
<td>PHY</td>
<td>ENG</td>
<td>CHEM</td>
<td colspan="3">LIBRARY</td>

</tr>

<tr>
<th>THURSDAY</th>
<td>PHY</td>
<td>ENG</td>
<td>CHEM</td>
<td colspan="3">LAB</td>
<td>MATH</td>
</tr>

<tr>
<th>FRIDAY</th>
<td colspan="3">LAB</td>
<td>MATH</td>
<td>CHEM</td>
<td>ENG</td>
<td>PHY</td>

</tr>

<tr>
<th>SATUARDAY</th>
<td>ENG</td>
<td>CHEM</td>
<td>MATH</td>
<td colspan="3">SEMINOR</td>
<td>SPORTS</td>
</tr>

</table>
</body>

</html>

Output:
9. HTML Forms

HTML Forms:
- HTML forms is used to collect user input.
- The user Input is most often sent to a server for processing.
- It is usually starts with <form> tag.
- The HTML form element is used to create a form for user input.
- The form element is a container for different types of input elements such as “ text, field, check boxes,
radio button …. etc.“

Input elements:

- The HTML input element is the most used form element.


- Input element can be displayed in many ways depending on the type of attribute.

Note: Attributes are written inside tags.

Syntax:

<form> form elements</form>

Sample Code:

<html>

<head>

</head>

<body>
<form align="center">
<fieldset>
<legend>
<h1>Registration Form</h1>
</legend>
<label>NAME:</label>
<input type="text" placeholder="Enter your Name" required=""><br><br>
<label>EMAIL ID:</label>
<input type="email" placeholder="Enter email id" required=""><br><br>
<label>PASSWORD:</label>
<input type="password" placeholder="Enter password" required=""><br><br>
<label>PH.NO:</label>
<input type="tel"><br><br>
<label>AGE:</label>
<input type="number"><br><br>
<label>D.O.B:</label>
<input type="date"><br><br>
<label>GENDER:</label>
<label>Male:</label>
<input type="checkbox">
<label>Female</label>
<input type="radio"><br><br>
<label>URL</label>
<input type="url"><br><br>
<label>HIDDEN</label>
<input type="hidden"><br><br>
<label>IMAGE</label>
<input type="image"><br><br>
<label>NUMBER</label>
<input type="number"><br><br>
<label>RANGE</label>
<input type="range"><br><br>
<label>SEARCH</label>
<input type="search"><br><br>
<label>TIME</label>
<input type="time"><br><br>
<label>COLOUR</label>
<input type="color"><br><br>
<label>COURSES</label>
<select>
<option>select your course</option>
<option>PYTHON</option>
<option>JAVA</option>
<option>UI</option>
</select><br><br>
<label>ADDRESS</label>
<textarea cols="20" rows="5"></textarea><br><br>
<label>CHOOSE FILE</label>
<input type="file"><br><br>
<label>CHECKBOX</label>
<input type="checkbox"> "I hereby declare that all the information
provided in this form is true, complete,
and accurate to the best of my knowledge and belief, and nothing has been
concealed or
misrepresented.".<br><br>
<button>RESET</button>
<button>SUBMIT</button><br><br>
</fieldset>
</form>
</body>

</html>

Output:
10. HTML Audio

HTML Audio:

- The audio tag is used to embed sound content in a document such as music or other audio streams.
- The audio tag contains one (or) more source tags with different audio sources.
- The browser will choose the first source it supports.

Syntax:
<audio attribute>
<source src=" ">
</audio>

Sample Program:

<html>

<head>
<title>AUDIO TAGS</title>
</head>

<body>
<h1>Audio tag</h1>
<audio controls>
<source src="C:\Users\admin\Downloads\[iSongs.info] 06 - Dammunte
Pattukora.mp3">
</audio>
</body>

</html>
Output:
11. HTML Video

HTML Video:

- The video tag is used to embed video content in a document such as movies or other video streams.
- The video tag contains one (or) more source tags with different video sources.
- The browser will choose the first source it supports.
- In open <video> tag we can add attribute controls.

Syntax:
<video attribute>
<source src=" ">
</video>

Sample Program:

<html>

<head>
<title>VIDEO TAGS</title>
</head>

<body>
<h1>Video tag</h1>
<video controls>
<source
src="C:\Torrents\www.5MovieRulz.dog - Hanuman (2024) TRUE WEB-DL - 4K SDR
- AVC - (DD+5.1 - 192Kbps) [Telugu + Hindi] - 17GB - ESub.mp4">
<video>
</body>

</html>
Output:
12. HTML Comments

HTML Comments:
- HTML comments are notes that add to your HTML code to explain it.
- They are ignored by browser and don’t appear on the page.
- Start the comment with ‘<!--‘ tag.
- End the comment with ‘-->’.
- Add the text between the tags.

Syntax:

<!-- Text to comment from starting tag to end tag -->

Sample Code:

<html>

<head>
<title>comments</title>
</head>

<!--<body>
<p>
- HTML comments are notes that add to your HTML code to explain it.
- They are ignored by browser and don’t appear on the page.
</p>
</body>-->

</html>
13. HTML Formatting

HTML Formatting:

Formatting tags where designed to display special types of texts.

1. <b> - Bold text : <b>Text</b>


2. <strong> - Important Text : <strong>Text</strong>
3. <i> - Italic text : <i>Text</i>
4. <em> - Emphasize text : <em>Text</em>
5. <mark> - Marked text : <mark>Text</mark>
6. <del> - Deleted text : <del>Text</del>
7. <ins> - Inserted text : <ins>Text</ins>
8. <small> - Small text : <small>Text</small>
9. <sub> - Subscript text : <h1>Co<sub>2</sub></h1>
10. <sup> - Superscript text : <h1>10 <sup>8</sup></h1>

Sample code:

<html>

<head>
<title>FORMATINF TAGS</title>
</head>

<body>
<b>bold tag</b><br>
<strong>Strong tag</strong><br>
<i>italic tag</i><br>
<em>emphasyze</em><br>
<mark>marked</mark><br>
<del>deleted tag</del><br>
<ins>inserted tag</ins><br>
<small>small </small><br>
<p> the chemical formula of water is H<sub>2</sub>O</p><br>
<p>4<sup>2</sup></p>
</body>

</html>
Output:
14. HTML List

HTML List:

HTML list allow web developers to group a set of related items in a list.

There are two types of list tags,


1. Ordered list
2. Un ordered list

1. Ordered list:

An ordered list starts with the <ol> tag and list items starts with <li> tag. The list items marked with by
number by default
Attributes in <ol> tag: “ Numbers, Alphabets upper and lower cases, Roman numbers upper and lower cases. “

Syntax:
<ol>
<li> list of items </li>
</ol>

2. Un ordered list:

An un ordered list starts with <ul> tag and list starts with <li> tag. The list of items marked with by
bullets(Small black circles) by default.

Attributes in <ol> tag: “Circles, Squares“

Syntax:
<ul>
<li> list of items </li>
</ul>
Sample Code:

<html>

<head>
<title>LIST</title>
</head>

<body>
<h1>Orderd List</h1>
<ol type="I" start="">
<li>Cycles</li>
<li>Bikes</li>
<li>Cars</li>
<li>Buses</li>
</ol>
<h1>Un Orderd List</h1>
<ul style="list-style-type: square;">
<li>Cycles</li>
<li>Bikes</li>
<li>Cars</li>
<li>Buses</li>
</ul>
</body>

</html>

Output:
15. HTML I Frames

HTML I Frames:

An In line frames is a piece of HTML code (or) HTML element that embed another HTML web page with in
a HTML web page.
Syntax:
<iframe src= " " ></iframe>

Sample Code:
<html>

<head>

</head>

<body>
<iframe src="https://grktraining.com/"
style="width:1360px;height:720px;"></iframe>
</body>

</html>

Output:
16. HTML Navigation

HTML Navigation:

- A navigation bar in HTML is a list of links that helps user navigation a web site.
- It is usually located at the top of the page.
- Navigation bar is detonated by <nav> tag.

Syntax:
<nav>

<a “navigation links here……”>


</nav>

Sample code:

<html>

<head></head>

<body>
<h1>The nav element</h1>

<p>The nav element defines a set of navigation links:</p>

<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/python/">Python</a>
</nav>
</body>

</html>
Output:
17. HTML Favicon

HTML Favicon:

- A Favicon is a small image displayed next to the page title in the browser tab.
- You can add or use any image you like as favicon.

Syntax:
<link rel =“icon” href = “ ……. ” >

Sample Code:

<html>

<head>
<title>FAV ICONS</title>
<link rel="icon" href="C:\Users\admin\Downloads\1384060.png">

</head>

<body>
<h1>Fav icons</h1>

</body>

</html>
Output:
18. HTML Layouts

HTML Layouts:
HTML layouts are a technique used to divide a web page into multiple sections, making it easier to apply
styles, organize content, and manage operations efficiently. This division improves readability, accessibility,
and overall user experience.

- HTML layout has these following sections, “Header section, Navigation bar, Index, Content section,
Footer section.”
- HTML layout is achieved through elements
like <header>, <nav>, <main>, <article>, <section>, <aside>, and <footer> which help organize
content, define the page’s sections.

Syntax:
<header> Content... </header>
<nav> Content... </nav>
<main> Content... </main>
<footer> Content... </footer>
19. HTML URL

HTML URL:

URL - Uniform Resource Locator:


- Web browsers request pages from web servers by using a URL.
- A Uniform Resource Locator (URL) is used to address a document (or other data) on the web

A web address like https://www.w3schools.com/html/default.asp follows these syntax rules:

Syntax:

scheme://prefix.domain:port/path/filename

 scheme - defines the type of Internet service (most common is http or https)
 prefix - defines a domain prefix (default for http is www)
 domain - defines the Internet domain name (like w3schools.com)
 port - defines the port number at the host (default for http is 80)
 path - defines a path at the server (If omitted: the root directory of the site)
 filename - defines the name of a document or resource
20. HTML TAGS LIST:

HTML TAGS LIST:


A complete list of standard tags available in HTML5 is given below. All the tags are ordered
alphabetically along with an indication if they have been introduced newly or they have been
deprecated in HTML5.

Tag Description

<!--...--> Specifies a comment

<!DOCTYPE> Specifies the document type

<a> Specifies an anchor

<abbr> Specifies an abbreviation

<acronym> Deprecated:Specifies an acronym

<address> Specifies an address element

<applet> Deprecated: Specifies an applet

<area> Specifies an area inside an image map

<article> New Tag: Specifies an independent piece of content of


a document, such as a blog entry or newspaper article

<aside> New Tag:Specifies a piece of content that is only slightly related


to the rest of the page.

<audio> New Tag:Specifies an audio file.

<base> Specifies a base URL for all the links in a page

<basefont> Deprecated: Specifies a base font

<bdo> Specifies the direction of text display

<bgsound> Specifies the background music

<blink> Specifies a text which blinks

<blockquote> Specifies a long quotation

<body> Specifies the body element

<br> Inserts a single line break

<button> Specifies a push button


<canvas> New Tag:This is used for rendering dynamic bitmap graphics
on the fly, such as graphs or games.

<caption> Specifies a table caption

<center> Deprecated: Specifies centered text

<col> Specifies attributes for table columns

<colgroup> Specifies groups of table columns

<command> New Tag:Specifies a command the user can invoke.

<comment> Puts a comment in the document

<datalist> New Tag:Together with the a new list attribute for input can be
used to make comboboxes

<dd> Specifies a definition description


<del> Specifies deleted text
<details> New Tag:Specifies additional information or controls which the
user can obtain on demand.
<dir> Deprecated: Specifies a directory list
<div> Specifies a section in a document
<dl> Specifies a definition list
<dt> Specifies a definition term
<embed> New Tag:Defines external interactive content or plugin.
<fieldset> Specifies a fieldset
<figure> New Tag:Specifies a piece of self-contained flow content,
typically referenced as a single unit from the main flow of the
document.
<b> Specifies bold text
<big> Deprecated:Specifies big text
<i> Specifies italic text
<small> Specifies small text
<tt> Deprecated:Specifies teletype text
<font> Deprecated: Specifies text font, size, and color
<footer> New Tag:Specifies a footer for a section and can contain
information about the author, copyright information, et cetera.
<form> Specifies a form
<frame> Deprecated:Specifies a sub window aframe
<frameset> Deprecated:Specifies a set of frames
<head> Specifies information about the document
<header> New Tag:Specifies a group of introductory or navigational aids.
<hgroup> New Tag:Specifies the header of a section.
<h1> to <h6> Specifies header 1 to header 6
<hr> Specifies a horizontal rule
<html> Specifies an html document
<isindex> Deprecated: Specifies a single-line input field
<iframe> Specifies an inline sub window frame
<ilayer> Specifies an inline layer
<img> Specifies an image
<input> Specifies an input field
<ins> Specifies inserted text

<keygen> New Tag:Specifies control for key pair generation.


<keygen> Generate key information in a form
<label> Specifies a label for a form control
<layer> Specifies a layer
<legend> Specifies a title in a fieldset
<li> Specifies a list item
<link> Specifies a resource reference
<map> Specifies an image map
<mark> New Tag:Specifies a run of text in one document marked or
highlighted for reference purposes, due to its relevance in
another context.
<marquee> Create a scrolling-text marquee
<menu> Deprecated: Specifies a menu list
<meta> Specifies meta information
<meter> New Tag:Specifies a measurement, such as disk usage.
<multicol> Specifies a multicolumn text flow
<nav> New Tag:Specifies a section of the document intended for
navigation.
<nobr> No breaks allowed in the enclosed text
<noembed> Specifies content to be presented by browsers that do not
support the <embed>tag
<noframes> Deprecated:Specifies a noframe section
<noscript> Specifies a noscript section
<object> Specifies an embedded object
<ol> Specifies an ordered list
<optgroup> Specifies an option group
<option> Specifies an option in a drop-down list
<output> New Tag:Specifies some type of output, such as from a
calculation done through scripting.
<p> Specifies a paragraph
<param> Specifies a parameter for an object
<cite> Specifies a citation
<code> Specifies computer code text
<dfn> Specifies a definition term
<em> Specifies emphasized text
<kbd> Specifies keyboard text

<samp> Specifies sample computer code


<strong> Specifies strong text
<var> Specifies a variable
<plaintext> Deprecated: Render the raminder of the document as
preformatted plain text
<pre> Specifies preformatted text
<progress> New Tag:Specifies a completion of a task, such as downloading
or when performing a series of expensive operations.
<q> Specifies a short quotation
<ruby> New Tag:Together with <rt> and <rp> allow for marking up
ruby annotations.
<script> Specifies a script
<section> New Tag:Represents a generic document or application
section.
<select> Specifies a selectable list
<spacer> Specifies a white space
<span> Specifies a section in a document
<s> Deprecated: Specifies strikethrough text
<strike> Deprecated: Specifies strikethrough text
<style> Specifies a style definition
<sub> Specifies subscripted text
<sup> Specifies superscripted text
<table> Specifies a table
<tbody> Specifies a table body
<td> Specifies a table cell
<textarea> Specifies a text area
<tfoot> Specifies a table footer
<th> Specifies a table header
<thead> Specifies a table header
<time> New Tag:Specifies a date and/or time.
<title> Specifies the document title
<tr> Specifies a table row
<u> Deprecated: Specifies underlined text
<ul> Specifies an unordered list
<video> New Tag:Specifies a video file.
<wbr> New Tag:Specifies a line break opportunity.
<wbr> Indicate a potential word break point within a <nobr> section
<xmp> Deprecated: Specifies preformatted text
CSS
(CASCADING STYLE SHEETS)
1. CSS Introduction

CSS Introduction:

CSS (Cascading Style Sheets):

- CSS is a style sheet language used for specifying the presentation and styling of a
document written in a markup language is such as HTML,XML is known as
CSS(Cascading Style Sheets).

History of CSS:
- The CSS idea was proposed in the year of 1994 by Hakon Wium Lie.
- The 1st version of CSS is invented in the year of 1996.
- The 2nd version of CSS was released in the year of 1998, from that time CSS begin to
work.
- The current version is CSS3 which different from other versions,
- Instead of being a single mono lithic specifications, it was published a set of separate
documents known as Modules.

Advantages:

- Multi device capability


- Maintenance is easy.
- Time saving.
- Faster page loading.
- Better than HTML style.

Disadvantages:
- Cross browser issues.
- Unexpected behavior.
- High chance of confusion.
- Lack of security.
Types of CSS:

1. Inline CSS
2. Internal CSS
3. External CSS.

1. Inline CSS:

- Style applied to HTML elements individually.


- It has most control over the element.

ex: <h3 style=”color:green;”> Inline CSS</h3>

- Used for single HTML element.

2. Internal CSS:

- Style is defined in between the <head> …. </head> element.


- Defines the elements on the page it is defined.
- Overrides external CSS, Overrides by inline CSS.

ex: <head>
<style>
h3{
color: green;
}
</style>
</head>

- It is used for only single page.


3. External CSS:

- The style is defined in external file.


- HTML files link to CSS file.
- Overridden by internal CSS and external CSS.
- The external CSS file must save with extension .css file.

Syntax: <head>
<link ref=”stylesheet” href=”heading.css”>
</head>

ex: <head>
<link rel="stylesheet"
href="C:\Users\admin\OneDrive\Desktop\FRONTEND\selectors.css">
</head>

- Used for many pages.


2. CSS Colors

CSS Colors:

- To apply colors for foreground element (or) background elements we will use color
properties.

We have different formats to specify colors values,

Format Syntax Example

Hex Code #RRGGBB p{color:#FF0000;}

Short Hex Code #RGB p{color:#6A7;}

RGB % rgbrrr p{color:rgb50;}

RGB Absolute rgbrrr, ggg, bbb p{color:rgb0, 0, 255;}

keyword aqua, black, etc. p{color:teal;}

1. Hex Code: A hexadecimal is a 6 digit representation of a color. The first two digits RR
represent a red value, the next two are a green value GG, and the last are the blue value
BB. Each hexadecimal code will be preceded by a pound or hash sign '#'.

2. Short Hex Codes: This is a shorter form of the six-digit notation. In this format, each digit
is replicated to arrive at an equivalent six-digit value.

For example: #6A7 becomes #66AA77.


3. RGB Values: This color value is specified using the rgb property. This property takes
three values, one each for red, green, and blue. The value can be an integer between 0
and 255 or a percentage.

Browsers Safe Colors:

Here is the list of 216 colors which are supposed to be most safe and computer
independent colors. These colors vary from Hexa code 000000 to FFFFFF. These
colors are safe to use because they ensure that all computers would display the
colors correctly when running a 256 color palette

000000 000033 000066 000099 0000CC 0000FF

003300 003333 003366 003399 0033CC 0033FF

006600 006633 006666 006699 0066CC 0066FF

009900 009933 009966 009999 0099CC 0099FF

00CC00 00CC33 00CC66 00CC99 00CCC 00CCF


C F
00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF

330000 330033 330066 330099 3300CC 3300FF

333300 333333 333366 333399 3333CC 3333FF

336600 336633 336666 336699 3366CC 3366FF


339900 339933 339966 339999 3399CC 3399FF

33CC00 33CC33 33CC66 33CC99 33CCC 33CCF


C F
33FF00 33FF33 33FF66 33FF99 33FFCC 33FFFF

660000 660033 660066 660099 6600CC 6600FF

663300 663333 663366 663399 6633CC 6633FF

666600 666633 666666 666699 6666CC 6666FF

669900 669933 669966 669999 6699CC 6699FF

66CC00 66CC33 66CC66 66CC99 66CCC 66CCF


C F
66FF00 66FF33 66FF66 66FF99 66FFCC 66FFFF

990000 990033 990066 990099 9900CC 9900FF

993300 993333 993366 993399 9933CC 9933FF

996600 996633 996666 996699 9966CC 9966FF

999900 999933 999966 999999 9999CC 9999FF

99CC00 99CC33 99CC66 99CC99 99CCC 99CCF


C F
99FF00 99FF33 99FF66 99FF99 99FFCC 99FFFF

CC0000 CC0033 CC0066 CC0099 CC00C CC00F


C F
CC3300 CC3333 CC3366 CC3399 CC33C CC33F
C F
CC6600 CC6633 CC6666 CC6699 CC66C CC66F
C F
CC9900 CC9933 CC9966 CC9999 CC99C CC99F
C F
CCCC00 CCCC33 CCCC66 CCCC99 CCCCC CCCCFF
C
CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF

FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF

FF3300 FF3333 FF3366 FF3399 FF33CC FF33FF

FF6600 FF6633 FF6666 FF6699 FF66CC FF66FF


3. CSS Selectors

CSS Selectors:
CSS selectors are used to select the HTML elements that you want to style is known as CSS
selectors.

There are 5 different types of CSS selectors


1. Simple selector
2. Combinator selector.
3. Pseudo class selector.
4. Pseudo element selector.
5. Attribute selector.

1. Simple Selector: The simple selector will select the elements based on name, id, class and
universal.

We have 4 types of Simple Selectors,

1. Name Based Selectors


2. Id Based Selectors
3. Class Based Selectors
4. Universal Selectors

1. Name based selector: This selector selects the HTML element based on the element
name (tags name).

Syntax:
element name{
CSS properties
}
Sample code:

<html>

<head>
<title>SIMPLE selectors</title>
<style>
h1 {
color: red;
text-align: center;
}
</style>
</head>

<body>
<div>
<h1>Name based selector</h1>
<p>This is paragraph</p>
<h2>This is h2</h2>
</div>

</body>

</html>

Output:
2. ID based selector:

- The ID selector uses the ID attribute of an HTML element to select a


specific element.
- The ID of an element is unique with in a web page, so the ID
selector is used to select one unique element.
- ID selector is denoted with Hash (#).

Syntax:

ID Attribute{
CSS properties
}

Sample code:

<html>

<head>
<title>SIMPLE ID based selectors</title>
<style>
#paragraph {
color: purple;
text-align: center;
}
</style>
</head>

<body>
<div>
<h1 id="paragraph">ID based selector</h1>
<p>This is paragraph</p>
<h2>This is h2</h2>
</div>

</body>

</html>
Output:

3. Class based selector:

- The class based selector selects HTML elements with a specific class attribute.
- The class selector is denoted with dot (.).

Syntax:

Class Attribute{
CSS properties
}
Sample code:

<html>

<head>

<title>simple CLASS based selectors</title>


<style>
.header {
color: blue;
text-align: center;
}
</style>
</head>

<body>
<div>

<h1>This is h1</h1>
<p>This is paragraph</p>
<h2 class="header">Class based selector</h2>
</div>

</body>
<html>

Output:

>
4. Universal selector:
- The universal selector selects all the HTML elements in the page.
- The universal selector

*{
CSS properties
}

Sample Code:

<html>

<head>
<title>Simple Universal selectors</title>
<link rel="stylesheet" href="C:\Users\admin\OneDrive\Desktop\
FRONTEND\selectors.css">
<style>
* {
color: red;
text-align: center;
}
</style>
</head>

<body>
<div>

<h1>Universal selector</h1>
<p>This is paragraph</p>
<h2>This is h2</h2>
</div>

</body>

</html>

Output:
2. Combinator selector:

- It explains the relationship between selectors.


- Combinator selector contains more than one simple selector.

The combinatory selector has 4 different types,

1. Child selector
2. Descendent selector.
3. Adjacent sibling selector/Next sibling selector
4. General sibling selector/Sub sequent sibling selector.

1. Child selector:
- The child selector will applies the styles to the selected elements, if the selected
elements was direct child.
- The child selector is denoted with greater-than (>).
Syntax:

selector1>selector2 {
CSS properties
}

Sample Code:

<html>

<head>
<title>Child selector</title>
<style>
div>h1{
color: violet;
text-align: center;

}
</style>
</head>
<body>
<div>
<p>vehicle names</p>
<h1>car</h1>
<h2>bus</h2>
<h3>bike</h3>
<h4>tain</h4>
<p>Fruits names</p>
<h1>mango</h1>
<h5>apple</h5>
</div>
</body>
</html>

Output:
Note: The selected element must have the same parent.

2. Descendent selector:

- The descendent selector will applies the styles to the selected elements in the same
parent, if the selected elements was direct child or indirect child.
- The child selector is denoted with space ( ).

Syntax:

selector1 selector2 {

CSS properties

}
Sample Code:
<html>

<head>
<title>Decendent selector</title>
<style>
div>h1 {
color: red;
text-align: center;
font-weight: bold

}
</style>
</head>

<body>
<div>
<h1>vehicle names</h1>
</p>
<h1>car</h1>
<h2>bus</h2>
<h3>bike</h3>
<h4>tain</h4>
<h1><p>Fruits names</p></h1>
<h1>mango</h1>
<h5>apple</h5>
</div>
<div>
<p>Fruits names</p>
</div>
<p>Fruits names</p>
</body>

</html>

Output:
3. Adjacent sibling selector/Next sibling selector (Immediately following):

The Adjacent sibling selector/Next sibling selector that helps in selecting an element
i.e..... immediately followed by another element where both elements have the same
parent element. It is denoted with plus (+).

Syntax:

selector1+ selector2 {
CSS properties
}
Sample Code:

<html>

<head>
<title>Adjacent sibling selector</title>
<style>
h1 + h2{
color: #009900;
text-align:center;
font-size: 20px;
}
</style>
</head>
<body>
<div>
<h1>adajecant selector</h1>
<h2>this is h2 tag</h2>
<p>parent Element</p>
<p>sub child</p>
</div>
<div>
<h1>adajecant selector</h1>
<h2>this is h2 tag</h2>
<p>parent Element</p>
<p>sub child</p>
</div>
</body>
</html>

Output:
4. General sibling selector/Sub sequent sibling selector:
The General sibling selector/Sub sequent sibling selector selects all elements that are next
siblings of a specified element. It is denoted with tilde (~).

Syntax:

selector1~ selector2 {
CSS properties
}
Sample Code:

<html>

<head>
<title>General sibling selector</title>
<style>
h1~h2{
color: #009900;
text-align:center;
font-size: 20px;
}
</style>
</head>
<body>
<div>
<h1>general sibling selector</h1>
<h2>this is h2 tag</h2>
<h2>This is new h2 tag</h2>
<p>parent Element</p>
<p>sub child</p>
</div>
<div>
<h1>general sibling selector</h1>
<h2>this is h2 tag</h2>
<p>parent Element</p>
<p>sub child</p>
</div>
</body>
</html>

Output:
3. Pseudo Class Selectors:

- A Pseudo class selector is used to define a special state of an element (or) used to
apply styles based on its state.
- It is represented in single colon (:).

We have 8 types in Pseudo Class Selectors,

1) :link
2) :visited
3) :hover
4) :active
5) :focus
6) :target
7) :First child
8) :last child
Syntax:
selector: pseudo class-name{
property: value;
}

Sample Code:

<html>

<head>
<title>Pseudo class selectors</title>
<style>
a:visited {
color: black;
}

a:active {
color: yellow;
}

a:hover {
color: blue;
font-size: 20px;
}

input:focus {
background-color: rgb(189, 237, 18);
}

h1:first-child {
color: red;
}

p:last-child {
color: purple;
}

:target {
border: 2px solid violet;
}
</style>
</head>
<body>

<!--The below code is for visited, active, hover selector-->


<a href="https://blissseven.com/?
srsltid=AfmBOoolCulmwXWc1rwW7jXVxidvksvr-VAO_FQFED0C-
fYD_Yb6nzZG">Blissseven</a>
<a href="https://www.apsrtconline.in/oprs-web/guest/home.do?
h=1">apsrtconline</a><br><br>

<!--The below code is for focus selector-->


<input type="text">
<input type="tel">

<!--The below code is for target selector-->


<div>
<a href="#x">go to h1</a>
<a href="#y">Go to h2</a>
<h3 id="x">TAG</h3>
<h4 id="y">OTHER TAG</h4>
</div>

<!--The below code is for first child, last child selectors-->


<div>
<h1>This is first</h1>
<p>I am first child.</p>
<p>I am second child.</p>
<p>I am third child.</p>
<p>I am last child.</p>
</div>

</body>

</html>

Output:
4. Pseudo Element Selector:

- A pseudo element selector is used to style specific parts of an element.


- It is represented in double colon (::).

Syntax:
selector:: pseudo element-name{
property: value;
}

We have 5 types in Pseudo Element Selectors,

1) ::first letter
2) ::before
3) ::after
4) ::first line
5) ::selection
Sample Code:

<html>

<head>
<title>PSEUDO ELEMENT SELECTORS</title>
<style>
h1::first-letter {
color: red;
text-transform: uppercase;
}

h1::before {
color: violet;
content: "This is ";
}

h1::after {
color: blue;
content: " heading";
}

h1::first-line {
color: green;
}

p::selection {
color: deeppink;
background-color: black;
}
</style>
</head>

<body>
<!--The below line code is for the first-letter, before, after,
first-line selectors -->
<h1>first</h1>
<!--The below line code is for the first-letter, before, after,
first-line selectors.
(note: The selection selector styles can be seen when we select
the text that styles we applied)-->
<p>Create a separate CSS file with a .css extension and link this
file to your HTML file using the link tag. It
consider the best practice to add CSS into HTML File.Create a
separate CSS file with a .css extension and link
this file to your HTML file using the link tag. It consider the
best practice to add CSS into HTML File.</p>
</body>

</html>

Output:
5. Attribute Selector:

Attribute selectors are used to style to the elements based on attribute & attribute value.

Syntax:
selector: [attribute = “value”]{
property: value;
}

We have 6 types Attribute Selectors,

1) [attribute = “value”]
2) [attribute ~= “value”]
3) [attribute |= “value”]
4) [attribute ^= “value”]
5) [attribute $= “value”]
6) [attribute *= “value”]

1) [attribute = “value”]: This selector is used to select elements with a specified


attribute & value.

Syntax:
selector: [attribute = “value”]{
property: value;
}

2) [attribute ~= “value”]: This selector is used to select elements with an attribute value
containing a specified word.

Syntax:
selector: [attribute~= “value”]{
property: value;
}

3) [attribute |= “value”]: This selector is used to select elements with specified attribute whose
value can be exactly the specified value (or) the specified value followed by hyphen(-).

Syntax:
selector: [attribute|= “value”]{
property: value;
}
4) [attribute ^= “value”]: This selector is used to select elements with specified attribute,
whose value starts with the specified value.

Syntax:
selector: [attribute^= “value”]{
property: value;
}

5) [attribute $= “value”]: This selector is used to select elements whose attribute value ends
with a specified value.

Syntax:
selector: [attribute$= “value”]{
property: value;
}

6) [attribute *= “value”]: This selector is used to select elements whose attribute value
contains a specified value.

Syntax:
selector: [attribute*= “value”]{
property: value;
}

Sample Code:

<html>

<head>
<style>
h1[title="para"] {
color: red;
}

h2[title~="parag"] {
color: green;
}

h3[title|="par"] {
color: purple;
}

h4[title^="para"] {
color: blue;

h5[title$="graph"] {
color: deeppink;
font-size: 20px;
}

h6[title*="a"] {
color: brown;
font-size: 20px;
}
</style>
</head>

<body>
<h1 title="para">This is first heading</h1>
<h1 title="paragraph">This 2nd first heading</h1>

<h2 title="parag">This is second heading</h2>


<h2 title="parag raph">This is second heading</h2>

<h3 title="par">This is third heading</h3>


<h3 title="par-agraph">This is third heading</h3>

<h4 title="para">This is fourth heading</h4>


<h4 title="paragraph">This is fourth heading</h4>

<h5 title="graph">This is fifth heading</h5>


<h5 title="photograph">This is fifth heading</h5>

<h6 title="graph">This is sixth heading</h6>


<h6 title="paragraph">This is sixth heading</h6>
</body>

</html>
Output:
4. CSS Borders

CSS Borders:
The border property specifies what kind of border to display.

There are 10 different types of border,


1. solid
2. dotted
3. dashed
4. double
5. groove
6. ridge
7. insert
8. outset
9. none
10. hidden

Sample Code:

<html>

<head>
<title>borders</title>
<style>
div {
text-align: center;
border: 2px solid black;
padding-left: 30px;
padding-right: 30px;
padding-top: 20px;
margin: auto;
margin-top: 30px;
font-style: italic;
}
h1 {
border: solid;
font-size: 20px;
font-style: italic;
}

h2 {
border: dotted;
font-size: 20px;
font-style: italic;
}

h3 {
border: dashed;
font-size: 20px;
font-style: italic;
}

h4 {
border: double;
font-size: 20px;
font-style: italic;
}

h5 {
border: groove;
font-size: 20px;
font-style: italic;
}

h6 {
border: ridge;
font-size: 20px;
font-style: italic;
}

p {
border: inset;
font-size: 20px;
font-style: italic;
font-weight: bold;
}
#x {
border: outset;
font-size: 20px;
font-style: italic;
font-weight: bold;
}

#y {
border: none;
font-size: 20px;
font-style: italic;
font-weight: bold;
}

#y {
border: hidden;
font-size: 20px;
font-style: italic;
font-weight: bold;
}
</style>
</head>

<body>
<div>
<h1>solid border</h1>
<h2>dotted border</h2>
<h3>dashed border</h3>
<h4> double border</h4>
<h5>groove border</h5>
<h6>ridge border</h6>
<p>inset border</p>
<p id="x">outset border</p>
<p id="y">none border</p>
<p id="z">hidden</p>
</div>
</body>

</html>
Output:
5. CSS Box model

Box model:
This CSS box model is essentially a box that grasps around every HTML elements.

It consists of,
1. Content
2. Padding
3. Border
4. Margin

1. Content: The content of the box where the will text & images appear.
2. Padding: It clears an area around the content, this padding is transparent.
3. Border: A border that goes around the padding and content.
4. Margin: It clears an area outside the border, the margin is transparent.

Sample Code:

<html>

<head>
<title>box model</title>
<style>
div {
border: 2px solid red;
width: 600px;
height: 100px;
padding-left: 300px;
padding-top: 20px;
margin: auto;
margin-top: 300px;
}
</style>
</head>
<body>
<div>
<h1>This is h1 tag</h1>
</div>
</body>

</html>

Output:
Box Model Layout:

Total element width = width + left padding + right padding + left border + right border

Total element height = height + top padding + bottom padding + top border + bottom border
6. Display properties

Display properties:
- The display property is used to specify hoe an element is shown on a web page.
- Every HTML element has a default display value depending upon what type of element.
- The default display value for most elements is block (or) inline.
- The display property is used to change the default display behavior of HTML elements.

Syntax:

Display: property name;

Display Properties Values:

1. Value Description

inline Used to display an element as an inline element.

block Used to display an element as a block element

contents Used to disappear the container.

flex Used to display an element as a block-level flex container.

grid Display an element as a block-level grid container.

inline-block Display an element as an inline-level block container.


1. Value Description

inline-flex Display an element as an inline-level flex container.

inline-grid Display an element as an inline-level grid container.

inline-table It is used to display an inline-level table

list-item It is used to display all the elements in <li> element.

It is used to display an element inline or block level,


run-in
depending on the context.

table It is used to set the behavior as <table> for all elements.

table-caption It is used to set the behavior as <caption> for all elements.

table-column-
Set the behavior as <column> for all elements.
group

table-header-
Set the behavior as <header> for all elements.
group

table-footer-
Set the behavior as <footer> for all elements.
group

table-row-group It is used to set the behavior as <row> for all elements.

table-cell It is used to set the behavior as <td> for all elements.

table-column It is used to set the behavior as <col> for all elements.

table-row To set the behavior as <tr> for all elements.

none Used to remove the element.


1. Value Description

initial Used to set the default value.

inherit Used to inherit property from its parents’ elements.

1. Inline: Displays an element as an inline element (like <span>). Any height and width
properties will have no effect. This is default.

2. Block line: Displays an element as a block element (like <p>). It starts on a new line, and
takes up the whole width.
3. Float: The float property specifies whether an element should float to the left, right &
none.

4. Flex: The flex property is used to create one dimensional layouts (either
row/column).Flex property is a short hand property.

5. Grid: Displays an element as a block-level grid container.


Parent properties:
1. display = flex
2. Flex-direction = row, row –reverse& column, column- reverse

flex-direction: row
flex-direction: row-reverse

flex-direction: column

flex-direction: column-reverse
3. Flex-wrap = wrap, no wrap, wrap-reverse

flex-wrap: wrap;
flex-wrap: nowrap;

flex-wrap: wrap-reverse;

4. Justify-content = flex-start, flex-end, flex-center, space-between, space-around.

Justify- content: flex- start;


justify- content: flex- end;

justify- content: flex- center;


justify- content: space-between;
justify- content: space-around;

Child Properties:
1. order-integers
2. Flex-grow-number

Flex-grow : 2;

3. Flex-shrink-number

Flex-shrink : 2;
4. Flex-basis-length/auto
5. Flex-flex-grow/flex-shrink
6. Align-self-auto/flex-start/f-end/f-center/baseline/stretch

 display : flex; : This turns the container into the flexbox.


 flex: direction : It can defines the direction of the flex items inside the container.The
below are possible values:
o row: It can aligns the items horizontally (default).
o row-reverse: It can aligns the items horizontally reverse.
o column: It can aligns the items vertically.
o column-reverse: It can aligns the items vertically in reverse.
 justify-content; : This can aligns along the main axis. Here the below possible values:
o flex-start: It can aligns the items at the begining of the container.
o flex-end: It can aligns the items in the center.
o center: It can aligns items in the center.
o space-between: It can places equal space between the items.
o space-around: It can places equal space around the items.
 align-items: It can aligns along the cross-axis. Here the below possible values:
o stretch: Items can be stretched to fill the container.
o flex-start: It can aligns the items at the start of the cross-axis.
o flex-end: It can aligns the items at the end.
o center: It can aligns the items at the center.
 flex: wrap: This can specifies whether the flex items should wrap when they overf low
container. Here the possible values:
o nowrap: Items are laid out in one line.
o wrap: Item wrap onto mulitple lines.
o wrap-reverse: Items wrap onto mulitple line in the reverse order.
 flex-grow: Defines the ability of the flex item to grow relative to the rest of the flex items.
Example: flex-grow: 1 allows the item to the take up available space.
 flex-shrink: Defines the ability of the flex item to the shrink if needed. Example: flex-
shrink: 1 allows the items to shrink to fit within the container.
 flex-basis: This can set the initial size of the flex item before it adjusts based on the flex-
grow or flex-shrink. Example: flex-basis: 100px.

Grid: The grid layout module offers a grid based layout system with rows and columns. The grid
layout module allows developer to easily create complex layouts.

Grid properties:

1. grid-area
2. Grid-items
3. Grid- template areas
4. Grid -container
5. Grid-template columns
6. grid-template rows

Sample Code:

<html>

<head>
<title>grid layout</title>
<style>
.section1 {
grid-area: header
}
.section2 {
grid-area: menu;
}
.section3 {
grid-area: main;
}
.section4 {
grid-area: right;
}
.section5 {
grid-area: footer;
}
.grid-container {
display: grid;
grid-template-areas:
'header header header header header header'
'menu menu main main right right'
'menu menu footer footer footer footer';
gap: 10px;
padding: 20px;
background-color: green;
}
.grid-container>div {
background-color: white;
font-size: 30px;
padding: 30px 0px;
text-align: center;
font-style: italic;
}
</style>
</head>

<body>
<div class="grid-container">
<div class="section1">Header</div>
<div class="section2">Menu</div>
<div class="section3">Main</div>
<div class="section4">Right</div>
<div class="section5">Footer</div>
</div>
</body>

</html>

Output:
7. CSS Positions

CSS Positions:
The Position property specifies the type of positioning method used for an elements.
There are 5 different types of position values,
1. Static
2. Relative
3. Fixed
4. Absolute
5. Sticky

Note: Top, Bottom, Left & right properties will not work without positioning property.
1. Static: The static position of elements will not effected by top, bottom, left & right
properties. The static position elements will not be displayed in special way.

2. Relative: An element with relative position is positioned to its normal position. Top,
bottom, right & left properties of a relative positional elements will be adjusted away
from its normal position. Other content will not be adjusted to fit into any gap left by
the element.

3. Fixed: An element with fixed position is positioned relative to the view port which
means it always stays in the same place even if the page is scrolls.

4. Absolute: An element with absolute position is positioned relative to the nearest


position ancestor.

5. Sticky: An element with sticky position is positioned based on the users scroll position.

Sample Code:

<html>
<head>
<style>
div{
border: 2px solid red;
height: 700px;
width: 600px;
position: relative;
}
h1{
border: 2px solid green;
position: absolute;
height: 400px;
width: 300px;
top: 100px;
right: 50px;
}
</style>
</head>
<body>
<div>
this is div tag
<h1>relative position</h1>
</div>

</body>
</html>

Output:
8. CSS Text Properties

8. CSS Text Properties:

CSS has lot of properties for formatting text,

1. Text color
2. Text alignment
3. Text decoration
4. Text transformation
5. Text spacing
6. Text shadow

1. Text color: The color property is used to set the color for the text. We can give color
properties to the text as color name, color code & rgb.

2. Text alignment: The text alignment property is used to set the horizontal alignment of
text.

3. Text decoration: The text decoration property is used to add a decoration to the text.

We have some properties for text decoration,

1. Text - decoration.
2. Text - decoration – line
3. Text – decoration color
4. Text – decoration style
5. Text – decoration thickness

4. Text transformation: The text transformation property is used to specify upper case &
lower case letters in a text.

5. Text spacing: The text spacing property is used to create a space between letters of
words.

We have some properties for text spacing,

1. Text indent
2. Letter spacing
3. Line height
4. Words spacing
5. White space- wrap/no wrap

6. Text shadow: The text shadow property acts shadow to the text. In its simplest use only
specify horizontal shadow & vertical shadow.

Sample Code:

<html>
<head>
<title>Text properties</title>
<style>
h1 {
color:white;
background-color: green;
text-align: center;
text-decoration-line:overline line-through underline ;
text-decoration-color: white;
text-decoration-style: dashed;
text-decoration-thickness: 2px;
text-transform: lowercase;
text-shadow: 2px 2px 3px red, 0px 0px 5px red, 0px 3px 3px
red;
}
p{
text-align-last:right;
direction: ltr;
unicode-bidi: bidi-override;
text-indent: 50px;
letter-spacing: 10px;
line-height: 40px;
word-spacing: 20px;
white-space: wrap;
}
</style>
</head>
<body>
<h1>TEXT PROPERTIES</h1>
<p>A paragraph is defined as “a group of sentences or a single
sentence that forms a unit” (Lunsford and Connors
116). Length and appearance do not determine whether a section in
a paper is a paragraph. For instance, in some
styles of writing, particularly journalistic styles, a paragraph
can be just one sentence long.A paragraph is
defined as “a group of sentences or a single sentence that forms
a unit” (Lunsford and Connors 116). Length and
appearance do not determine whether a section in a paper is a
paragraph. For instance, in some styles of
writing, particularly journalistic styles, a paragraph can be
just one sentence long.A paragraph is defined as
“a group of sentences or a single sentence that forms a unit”
(Lunsford and Connors 116). Length and appearance
do not determine whether a section in a paper is a paragraph. For
instance, in some styles of writing,
particularly journalistic styles, a paragraph can be just one
sentence long.</p>
</body>
</html>

Output:
9. CSS Fonts

CSS Fonts:
- It allows to customize font style of webpages using various font related.
- The font property is used to style and adjust type of text used in webpage.
In CSS there are five generic font families:

1. Serif fonts: These fonts have a small stroke at the edges of each letter. They create a
sense of formality and elegance.

2. Sans-serif fonts: These fonts have clean lines (no small strokes attached). They create a
modern and minimalistic look.

3. Monospace fonts: Here all the letters have the same fixed width. They create a
mechanical look.

4. Cursive fonts: These fonts imitate human handwriting.

5. Fantasy fonts: These fonts are decorative/playful fonts.


10. CSS Background Properties

CSS Background Properties:

The Background properties are used to add background effects for elements.
We have some properties for background properties,
1. Background color
2. Background image
3. Background position
4. Background size
5. Background attachment
6. Background repeat
Sample Code:

<html>

<head>
<title>Background properties</title>
<style>
body {
background-image:
url("https://img.freepik.com/free-vector/geometric-gradient-futuristic-
background_23-2149116406.jpg");
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>

<body>
<div></div>
</body>

</html>

Output:
11. CSS Animations

CSS Animations:
CSS allows animation for HTML elements without using java script. Animation property is a
short hand property.
We have some properties for Animations,
1. Animation name
2. Animation duration
3. Animation delay
4. Animation iteration count
5. Animation direction
6. Animation filmode
7. Animation play state
8. @ keyframes
Sample Code:

<html>
<head>
<title>Animation</title>
<style>
.box {
height: 200px;
width: 200px;
background-color: red;
animation-name: x;
animation-duration: 10s;
animation-delay: 1s;
animation-direction: alternate;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
}

@keyframes x {
20% {
background-color: blue;
border-radius: 20%;

40% {
background-color: green;
border-radius: 40%;
transform: translateX(400px);

60% {
background-color: purple;
border-radius: 60%;
transform: translateY(400px);

80% {
background-color: orange;
border-radius: 80%;
transform: translateX(400px);
}

100% {
background-color: rgba(162, 0, 255, 0.84);
border-radius: 100%;
transform: translateY(400px);

}
}
</style>
</head>

<body>
<div class="box"></div>
</body>

</html>

Output:
12. CSS Media Queries

CSS Media Queries:

A media queries consists of a media type and can contain one(or)more features which resolve
to either true(or)false.
Major important keyword in media queries are,
@media screen

Sample Code:

<html>
<head>
<style>
@media screen {
body {
background-color: black;
}

@media screen and (max-width:1250px) {


body {
background-color: green;
}

@media screen and (max-width:1000px) {


body {
background-color: blue;
}

@media screen and (max-width:750px) {


body {
background-color: yellow;
}

@media screen and (max-width:500px) {


body {
background-color: purple;
}

}
</style>
</head>

<body>
<div></div>

</body>

</html>

Output:
For Desktop:
For Laptop:

For Tab:
For Mobile:
13. CSS 3D-Animations

CSS 3D-Animations:

Transform: The transform property applies a 2D (or) 3D transformations to an element. This


property allows you to rotate, scale, move--- etc.
Transform property is a short hand property for
1. Transform
2. Transform origin

Transition: The transition property is a short hand property for


1. Transition
2. Transition duration
3. Transition delay

Translate: The translate property allows you to change the position of an element. The
translate property define x and y co-ordinates of an element in 2D. You can also define the z co-
ordinates to change the position in 3D.

Sample Code:

<html>

<head>
<title>#D Aimations</title>

<style>
.child1 {
height: 600px;
width: 800px;
border: 2px solid;
margin: 200px;
position: relative;
}

.child1 img {
height: inherit;
width: inherit;
}

.child2 {
height: inherit;
width: 400px;
color: white;
position: absolute;
top: 0px;
background-color: rgba(128, 128, 128, 0.333);
transform: perspective(400px) rotateX(0deg);
transition: all 3s;
transform-origin: left;
}

.child1:hover .child2 {
transform: perspective(400px) rotateX(360deg);
}
</style>
</head>

<body>
<div class="x">
<div class="child1">
<img src="C:\Users\admin\OneDrive\Desktop\IMG.png">
<div class="child2">
<p>CSS was released (in 1996), 3 years after HTML (in
1993). The main idea behind its use is, it allows
the separation of content (HTML) from presentation
(CSS). This makes websites easier to maintain and
more flexible.</p>
</div>
</div>
</div>
</body>

</html>

Output:
JAVA SCRIPT

(JS)

1. JS Introduction
Java Script:
JavaScript is a high-level, interpreted programming language primarily used to create
interactive and dynamic content on websites. It runs in the browser and enables client-side
behavior like form validation, animations, interactive maps, and more. Current version of java
script is ES-6.

History of Java Script:


- Java Script was invented by Brendan Eich in the year of 1995.
- It was developed by nets cape-2 and later it is handover to “ECMA”.
- The Mozilla foundation continued to develop java script for fire-fox browser.
- Initially java script was named as “MOCHA”, later it is changed to “Live Script”.
- In 1997, there is another browser that was Internet Explorer (Microsoft Browser), then
Microsoft copied java script features and made own language named as JScript

MOCHA  Live Script  Java Script

ECMA International:
- It is an industry association founded in 1996, dedicated to the standardization of
information and communication systems is known as ECMA International.

JavaScript + ECMA  ECMA Script

- We can implement scripting language for different browsers.

ES – 1  1997
ES – 5  2009 (Lots of New Features)
ES – 6 (ES 2015)  2015 (Biggest update for JS)

Note: Java and Java Script both are different programming languages nothing is common.

2. JS Features
Java Script Features:

The main features of Java Script are,


1. Case Sensitive
2. Dynamically Typed
3. Cross- Platform
4. Interpreted
5. Object Oriented Programming language
6. Backward Compatible.

3. JS Variables
Variables:
- Variables are used to store data which can be changed (or) used when we need is
known as Variables.
- There are Keywords to declare a variable.
- It is a container.

Keywords: Keywords are pre-defined words in programming language.

The pre-defined keywords to declare Variables in java script are,


1. Var ()
2. Let ()
3. Const ()

Rules to name a Variable:


- The variable name should contain only alphabets ( Upper cases A-Z, Lower cases a-z,
Digits (0-9), Special Characters (_ , &)).
- The Variable name should always start with alphabets with symbols.
- These are case sensitive.

Sample Program:
<script>
var x=10
var y=15
z=x+y
console.log(z)
console.log(x+y)
document.write(x+5 + "<br>")
document.write(z)
alert(z)
</script>

4. JS Data Types

Data Types:
- Data types are used to specify that what type of data that we have given is known as
Data Types.

Types of Data Types:


There are 2 types of data types,
1. Primitive Data type
1. Number
2. String
3. Boolean
2. Non-Primitive Data Type
1. Simple
1. Null
2. Undefined
2. Composite
1. Array
2. Object

Primitive Data Type:


- The Data type that holds only one value at a time and do not have methods and
properties is known as Primitive Data Types.
1. Number: The data types that includes both integers and floating point numbers is
known as Number.

Sample Program:

<script>
var x=10
console.log(x)//10
console.log(typeof(x))//number
</script>

2. String: The Data type that has series of characters that are surrounded by quotes is
known as String.

Sample Program:

<<script>

var x="HELLO"
console.log(x)//HELLO
console.log(typeof(x))//String
var y='HOW ARE YOU'
console.log(y)//HOW ARE YOU
console.log(typeof(y))//String
</script>

3. Boolean Data Type: The Data Type which allows only two values True (or) False is
known as Boolean.

Sample Program:

<script>
var x=20
var y=10
var z=x>y
console.log(z)//True
console.log(typeof(z))//Boolean
</script>

4. Null: The data type that defies special value that represents nothing (or) empty value is
known as Null.

Sample Program:

<script>
let age = null;
console.log(age)//null
console.log(typeof (age))//object
</script>

5. Undefined: When a variable is declared but not initialized with value is automatically
assigned the undefined value is known as Undefined.

Sample Program:

<script>
let age;
console.log(age)//undefined
</script>

Non-Primitive Data Type:


- The Data type that stores multiple values and stored by reference is known as Non-
Primitive Data types/Derived Data Types/Reference Data Types.

1. Array: A special kind of data of an object used to store an ordered collection of values
which can be any data type is known as Array.
Sample Program:

<script>
let x = [1, 3.6, 'HI', "Hello"];
console.log(x)// (4) [1, 3.6, 'HI', 'Hello']
console.log(typeof (x))//Array
</script>

Output:

2. Object: The data type in used to store key-value pairs, where each key is a string (or
Symbol) and the value can be any data type is known as Object.

Sample Program:

<script>
let names = {
type: "Company",
location: "Noida"
}
console.log(names)//{type: 'Company', location: 'Noida'}
console.log(typeof (names))//object
</script>

Output:

5. Arrays

Arrays:
- A special kind of data of an object used to store an ordered collection of values which
can be any data type is known as Array.
- It is a Non-Primitive Data type.
- We can declare an array as,

var x =[]
var x = new array()

- We can access array elements by using index value.


Syntax:

array name [index value]

Ex: x [2]

Sample Program:

<script>
var x = [1, 3.6, 'HI', "Hello"];
var y = new Array(1, 3.6, 'HI', "Hello")
console.log(x)// (4) [1, 3.6, 'HI', 'Hello']
console.log(typeof (x))//Array
console.log(y)
//Accessing an array using index value
console.log(x[3])//Hello
</script>

Output:

Operations in Java Script:

1. Accessing Elements of an Array:


Sample Program:

<script>
var x = [1, 3.6, 'HI', "Hello"];
//Accessing an array using index value
console.log(x[3])//Hello
console.log(x[0])
</script>

Output:

2. Accessing first Elements of an Array:

Sample Program:
<script>
var x = [1, 3.6, 'HI', "Hello"];
//Accessing first element of an array
let first = x[0]
console.log("First Item: ", first)//Hello
</script>

Output:
3. Accessing last Element of an Array:

Sample Program:

<script>
var x = [1, 3.6, 'HI', "Hello"];
//Accessing last element of an array
let last = x[x.length - 1]
console.log("First Item: ", last)//Hello
</script>

Output:

4. Modifying the Array Elements:

Sample Program:

<script>
var x = [1, 3.6, 'HI', "Hello"];
console.log(x)

//Modifying array element


x[1] = "How are you"
console.log(x)
</script>

Output:

5. Adding Elements to the Array:

Sample Program:

<script>
var x = [1, 3.6, 'HI', "Hello"];
console.log(x)

//Adding Elements to the Array


x.push("Good Morning")
x.unshift("Good Night")
console.log(x)
</script>

Output:
6. Removing Elements from an Array:

Sample Program:

<script>
var x = [1, 3.6, 'HI', "Hello"];
console.log(x)

//Removing Elements from an Array

// Removes and returns the last element


let lst = x.pop();
console.log("After Removing the last: " + x);

// Removes and returns the first element


let fst = x.shift();
console.log("After Removing the First: " + x);

// Removes 2 elements starting from index 1


x.splice(1, 2);
console.log("After Removing 2 elements starting from index 1: " + x);
</script>

Output:
7. Array Length:

Sample Program:

<script>
let x = [1, 3.6, 'HI', "Hello"];
console.log(x)

// Array Lenmgth
let arrlenth = x.length
console.log("Array Length is: " + arrlenth)
</script>

Output:
8. Decrease and Increase the length of an Array:

Sample Program:

<script>
let x = [1, 3.6, 'HI', "Hello"];
console.log(x)

//Increasing the Array Length


x.length = 7
console.log("After Increasing length: " + x)

// Decreasing the Array Length


x.length = 2
console.log("After Decreasing length: " + x)
</script>

Output:
9. Iterating Through Array Elements:

Sample Program:

<script>
let x = [1, 3.6, 'HI', "Hello"];
console.log(x)

//Iterating through for loop


for (let i = 0; i < x.length; i++)
console.log(x[i])

// Iterating through forEach loop


x.forEach(function myfunc(x) {
console.log(x);
});
</script>

Output:
10. Array Concatenation:

Sample Program:

<script>
let x = [1, 3.6, 'HI', "Hello"];
let y = ["Good Morning", "Good Night"];
console.log(x)

// Concatenate both arrays


let concateArray = x.concat(y);

console.log("Concatenated Array: ", concateArray);


</script>
Output:

11. Conversion of Array to String:

Sample Program:

<script>
let x = [1, 3.6, 'HI', "Hello"];
let y = ["Good Morning", "Good Night"];
console.log(x)

// Convert array ot String


console.log(x.toString());
</script>

Output:
12. Array type:

Sample Program:

<script>
let x = [1, 3.6, 'HI', "Hello"];
let y = ["Good Morning", "Good Night"];
console.log(x)

// Check type of array


console.log(typeof (x));
</script>

Output:

You might also like