Web Development , HTML & CSS & JAVASCRIPT

Frontend Development
Frontend development focuses on the part of the website that users
interact with directly. It involves designing and implementing the user
interface (UI) and user experience (UX). Key technologies and tools
used in frontend development include:
HTML (HyperText Markup Language): The standard language for
creating web pages.
CSS (Cascading Style Sheets): Used for styling and layout of web pages.
JavaScript: A programming language that adds interactivity to web
pages.
Frameworks and Libraries: Such as React, Angular, and Vue.js, which
help streamline the development process and enhance functionality.

Vue.js is an open-source model-
viewviewmodel front end JavaScript
framework for building user interfaces and
single-page applications.
It was created You and is maintained by the
community and Niado, a Chinese technology
company. Vue.js is known for its simplicity,
flexibility, and ease of use, making it a
popular choice for web development.

Backend Development
Backend development focuses on the server-side of a web application. It involves
managing the database, server, and application logic. Key technologies and tools
used in backend development include:
Programming Languages: Such as Python, Java, Ruby, PHP, and Node.js.
Databases: Such as MySQL, PostgreSQL, MongoDB, and SQLite.
Frameworks: Such as Django, Flask, Spring, Ruby on Rails, and Express.js.
APIs (Application Programming Interfaces): Used to enable communication
between the frontend and backend.

HTML Full Form - Hyper Text Markup
Language.
Version – HTML-5
HTML developed by “sir Tim Burner’s Lee”
in 1991.

The ECMAScript Observer API is a part of the
ECMAScript specification that allows developers to
observe changes to an object's properties.
The ECMAScript Observer Portal, on the other
hand, is a resource provided by the ECMAScript
Association that offers a centralized platform for
developers to learn about and interact with the
ECMAScript Observer API.

HTML stands for Hyper Text Markup Language
HTML is the standard markup language for creating Static Web pages
HTML describes the structure of a Web page
HTML elements label pieces of content such as "this is a heading"”,
“this is a paragraph”, "this is a link", etc.
An HTML element is defined by a start tag, some content, and an end tag:
<tagname>Content goes here...</tagname>

Basic tags:
The <!'DOCTYPE html> declaration defines that this document is an
HTML5 document
The <html> element is the root element of an HTML page
The <head> element contains meta information about the HTML
page
The <title> element specifies a title for the HTML page (which is
shown in the
browser's title bar or in the page's tab) |
The <body> element defines the document's body, and is a container
for all the visible
contents, such as headings, paragraphs, images, hyperlinks, tables,

Syllabus:
 HTML basic tags
 Character entity
 HTML Lists
 HTML Tables
 Hyper Links
 HTML Forms
 Media tags

Before you start the html code we should know about html basics that
is :
In html any thing you should write in between the tags .(<> </>)
What is html tag?
An HTML tag is a piece of markup language used to
indicate the beginning and end of an HTML element in an
HTML document.
Types of tags:
1.paired tags: It contains both opening and closing tags.
<> -> opening tag
</> -> closing tag
2. un-paired tag: It contains only opening tag.
<> -> opening tag.

Basic tags:
1.Heading tags: It is used to give the heading.
Types of heading tags: h1,h2,h3,h4,h5,h6
<html>
<head>
<title> Html Basic tags </title>
</head>
<body>
<h1>heading 1</h1> //larger in size
<h2>heading 2</h2>
<h3>heading 3</h3>
<h4>heading 4</h4>
<h5>heading 5</h5>
<h6>heading 6</h6>
<h7>heading 1 </h7>
</body>
</html>

 Bold tag : Bold tag is used to get text in bold.(<b></b>)
underline tag: Underline tag is used to get the text with
underline (<u></u>)
Italian tag: Italian tag is used to get text in Italian(slant)
(<i></i>)
break tag : break the line (<br>)
Horizonatl line: horizontal line (<hr>)
Superscript: superscript text is used to get the text above
the normal line(<sup></sup>)
Sub script : subscript is used to get text in below the normal
line(<sub></sub>)
Del tag : to get strike text (<del></del>)

HTML CODE FOR ABOVE SLIDE
<html>
<head>
</head>
<body>
<b>Bold tag </b>
<u> Underline </u>
<i> text is in Italian </i>
<br>
2<sup>7</sup>
<br>
<hr>
H<sub>2</sub>0
<del>Striking the text </del>
</body>
</html>

paragraph(<p> </p>) : <p> tag is used to create a paragraphs.
pre-formatted (<pre> </pre>) : it is same as the <p> but it shows the content in block
level.
Text Abbreviation tag(<abbr></abbr>) : This tag is used to abbreviate a text.
Blockquote(<blockquote></blockquote>):The blockquote tag in HTML is used to
display the long quotations.
Quote(<q> </q>) : It shows the text in quoted format.
bdo tag(<bdo></bdo>): The bdo stands for Bi-Directional Override. This tag is used to
specify the text direction or used to change the current direction.
center tag (<center></center>): It display the content in centered.
Marquee tag (<marquee></marquee>):Marquee tag is used to scroll the contents
from one end to another end.
Mark tag(<mark></mark>) : it used to highlight the text.

<html>
<head>
</head>
<body>
<p>i am in p tag</p>
<pre>
I am in
preformatted tag
</pre>
The <abbr title="World Health Organization"> WHO</abbr> was founded in 1948.
<blockquote>The blockquote tag in HTML is used to display the long
quotations</blockquote>
<q>i am in quote tag</q>
<bdo dir="rtl">the beautiful day</bdo>
<center>centered text</center>
<marquee direction="right" >css</marquee>
</body>
</html>

Character Entity:
It is used to display the special characters in webpage. special characters means which is not
present in keyboard or present in keyboard by using ‘&’.
<html>
<head>
<title> Character Entity </title>
</head>
<body>
<h1>character entity</h1>
<h2>
α &ShortLeftArrow;
®
&approxeq;
©
<
 (to get extra space)
&PlusMinus;
&emsp;
</h2>
<h1>📈</h1>
</body>
</html>

HTML LISTS :
 HTML lists is used to group a set of related items in lists.
 3 types of lists
1. Ordered List
2. Un ordered List
3. Definition list
1. Ordered list:
<ol> tag is used to create the ordered List
Using <li> tag we are inserting related data
syntax:
<ol>
<li>--------</li>
<li>--------</li>
</ol>

Attribute: It gives the additional information to the html tag.
->type attribute is used to change the type of ordered list
Ex: type="((default)/A/a/I/i)"
-> start attribute is used to start value of the first list item in an ordered list.
<html>
<head>
<title> Creation of lists</title>
</head>
<body>
<h1>creation of list</h1>
<h2>Ordered list</h2>
<ol>
<li>Lion</li>
<li>Tiger</li>
<li>Parrot</li>
</ol>
<ol type=“A”>
<li>Black</li>
<li>Red</li>
<li>blue</li>
</ol>

<ol type=“a”>
<li>sunday</li>
<li>monday</li>
<li>tuesday</li>
</ol>
<ol type=“I”>
<li>jan</li>
<li>feb</li>
<li>march</li>
</ol>
<ol type=“I”>
<li>birds</li>
<li>animals</li>
<li>trees</li>
</ol>
<ol type=“A” start="10">
<li>tcs</li>
<li>infosys</li>
<li>wipro</li>
</ol>
</body>
</html>

2. Un-ordered list:
-> <ul> tag is used to create the
un-ordered list
-> using <li> tag we are inserting
related data
syntax:
<ul>
<li>-------<li>
<li>-------<li>
-------------
</ul>
Attributes:
-> type attributes is used to change the tyoe of ordered list
Ex: type="(disc/circle/none/square)"

<html>
<head>
<title> HTML LISTS</title>
</head>
<body>
<ul type="square">
<li>Royal field</li>
<li>KTM</li>
<li>pulsar</li>
</ul>
<ul type="none"> <li>Royal field</li>
<li>KTM</li>
<li>pulsar</li>
<li>R15</li>
</ul>

<ul type="circle">
<li>KTM</li>
<li>pulsar</li>
</ul>
<ul type="disc">
<li>KTM</li>
<li>pulsar</li>
</ul>
</body>
</html>

3. Defination list:
-> <dl> tag is used to create definition list
-> <dt> tag is used to give data title
-> Using <dd> tag we are inserting the description for that
title
syntax:
<dl>
<dt>----data title----</dt>
<dd>----data description---<dd>
</dl>

<html>
<head>
<title> HTML LISTS</title>
</head>
<body>
<h2>Definition list</h2>
<dl>
<dt>Title 1 </dt>
<dd>Lorem ipsum, dolor sit amet consectetur adipisicing
elit. Numquam obcaecati esse ex? Unde voluptatem, assumenda voluptas
quibusdam deserunt id corporis. Nam voluptas asperiores incid cumque,
impedit deserunt ut et laboriosam.
</dd>
</dl>
</body>
</html>

NESTED LIST
<html>
<head>
<title>Document</title>
</head>
<body>
<ul type="disc">
<li>coffe</li>
<li>tea</li>
<ul type="circle">
<li>black tea</li>
<li>green tea</li>
</ul>
</ul>
</body>
</html>

HTML TABLES
Creation Of Table:
tags:
-> HTML tables is used to arrange data into rows and columns
-> <table> tag is used to create table on webpage
-> through rows we are inserting the data into table using <tr>(table
row) tag.
-> <th> tag is used to insert table heading
-> <td> tag is used to insert table data
syntax:
<table>
<tr>
<th>---table heading----</th>
<td>---table data---</td>
</tr>
</table>

<html>
<head>
<title>HTML TABLES</title>
</head>
<body>
<table border="1" >
<tr>
<th>Row1 col1</th>
<th>Row1 col2</th>
<th>Row1 col3</th>
</tr>
<tr>
<th>Row2 col1</th>
<th>Row2 col2</th>
<th>Row2 co31</th>
</tr>
</table>
</body>
</html>

Attributes:
• which is present in <table> tag
• border attribute is used to set the border for table
• height & width attribute is used to set the size/length of the
table
• align attribute is used to align the table on webpage
Ex: align= "(left/right/center/default)"
• cell spacing is used to give space b/w cells
• cell padding is used to give space b/w content and border
• colspan is used to merge the two or more columns
• rowspan is used to merge the two or more rows

HYPER LINKS:
A webpage can contain various links that take you directly to other pages and even
specific parts of a given page. These links are known as hyperlinks.
<a> (achor tag) is paired tag & In <a> tag we are writing clickable element
Ex: <a> clickable element </a>
note: without using the href attribute in <a> tag it is act like a <p> tag
Attributes:
href(hyper reference) attribute is used to write URL/path
Ex: <a href="----URL/path----">--- clickable element-----</a>
Type of URL:
Absolute URL (complete URl)
ex: <a href="https://www.google.com">---click here---
</a>

Relative URL:
<a href="./----path---">----click here-----</a>
(./ means we can create n no of relative file in that path)
-> target attribute specifies where to open the linked
document
-> _blank opens the linked document in a new window
-> _parent open the linked document in same window
-> the title attribute is used to give title name
for the HTML element.

Media tags
• It is used to insert the media files like images, audios,
videos etc.., to the webpage
 Inserting of images:
• <img> tag is used to insert the image
• It is unpaired tag & in line level tag
syntax: <img src="---path---"
alt=" ---alternate msg--"
height="to set height"
width="to set width">

insertion of audios:
-> <audio> tag is used to insert the audios to web page
and it is paired tag
syntax: <audio src="---path--" controls></audio>
(or)
<audio controls>
<source src="--path--">
</audio>

Insertion Of Video:
-><video> tag is used to insert the video to web page and
it
is paired tag
syntax: <video src="---path--" controls></video>
or
<video controls>
<source src="--path--">
</video>

Attribute:
-> src attribute used to insert the path & media file
-> alt attribute used to insert the alternate message or
error message
-> (alt msg will display the message when we get some issue
like server error, wrong in path)
-> height & width attribute used to set proper length and
width for media files.
-> controls attribute is used to control the media files like
audio and video

CODE FOR INSERTING IMAGES AUDIO AND VEDIO
<html>
<head>
<title>Document</title>
</head>
<body text="red" bgcolor="yellow">
<img src="./images/img1.png" alt="error">
<img src="./images/img5.jfif" alt="">
<audio src="./Audios/audio1.mp3" controls></audio>
<video src="./videos/rain video.mp4“ controls width=250></video>
</body>
</html>

HTML FORMS:
It is used to collect the data from the enduser directly from the webpage form tag
Tags:
using <input> tag we are collecting the data by creating input field on
webpage
<label> tag is used to give label name for the input field
Attributes:
Type attribute are use to set type of input field
name attribute is used to send the data to the backend
Note: without using the name attribute we cant send the data to
the backend
 placeholder attribute is used to set reference msg for the enduser
required attribute is used set the input field is mandatory
value attribute is used to change the value of inputfield

min & max attribute is used in set minimum & maximum number in
number field
checked attribute is used to select default option and is used in the
radio/checkbox field
when we are using disabled attribute we cant do any operation on that field like
selecting etc.,
 selected attribute is used to select default option and it is used in the drop
down option
 <field set> tag is used group the related information in the form
 <legend> tag is used to give name for the fieldset/grouped data
Attributes present in form tag:
-> method attribute is used to send the data to the backend by using method =
"get/post"
-> when we are using method = "get" data is visible in URL(default)
-> when we using method = "post" data is not visible in URl
-> action attribute is used to write configured URL

DIFFERENCE BETWEEN SEMANTIC AND SEMANTIC TAGS
Semantic tag:
These tags are tags which defines its content. Ex:
input,h1,ol etc..
Non Semantic tag:
These tags are the tags not define its content. Ex:
div,span

Div and span
There are two tags that are particularly useful when using CSS:
<span> and <div>. They are both container tags that have
minimal formatting associated with them.
The <span> tag is an inline element that simply holds text without
doing anything special to it.
The <div> tag is a block element and causes the text it encloses to
start on a new line.
Using <span> and <div> tags in conjunction with classes and IDs
allows for great flexibility in creating pages.

Web Development , HTML & CSS & JAVASCRIPT

More Related Content

Similar to Web Development , HTML & CSS & JAVASCRIPT (20)

Recently uploaded (20)

Web Development , HTML & CSS & JAVASCRIPT