• Web development refers to the creating, building,
and maintaining of websites.
• It includes aspects such as web design, web
publishing, web programming, and database
management.
• It is the creation of an application that works over
the internet i.e. websites.
Laying out the design of the website so that it works
in browsers.
Making websites more interactive.
Developing the logic by which a web application
works.
Testing and improving web applications.
Building databases and bringing that information
to be displayed on the web page or application.
Making websites safer (cyber security).
Improving website performance and speed.
HTML is the standard markup language for creating
Web pages.
HTML stands for Hyper Text Markup Language
HTML describes the structure of Web pages using
markup
HTML elements are represented by tags
HTML tags label pieces of content such as
"heading", "paragraph", "table", and so on
Browsers do not display the HTML tags, but use
them to render the content of the page
HTML tags:
› <p>, <h1> - <h6>, <a>, <img>, <div>, <span>
Self-closing tags:
› <br>, <hr>, <img>
Common attributes:
id, class, src, href, alt, title
Ordered lists (<ol>)
Unordered lists (<ul>)
Definition lists (<dl>)
Tables (<table>, <tr>, <th>, <td>)
Block level elements :
› <div>, <p>,<h1> to <h6>, <form>, <table>
etc.
Inline elements:
› <img>, <a>, <span>, <input> etc.
Audio tag
Video tag
Iframe tag
Form elements: <form>, <input>,
<textarea>, <button>, <select>, <option>
Attributes for form elements: action,
method, name, value
Method: get vs Post
New input types:
› email, url, date, number, range
Form validation attributes:
› required, pattern, min, max
Create one simple Website
Tourism place for your city
Create pages:
› Home
› About
› Contact
› Places to Visit
CSS stands for Cascading Style Sheets
CSS describes how HTML elements are to be
displayed on screen, paper, or in other
media
CSS saves a lot of work. It can control the
layout of multiple web pages all at once
External stylesheets are stored in CSS files
Types
Internal External Inline
CSS CSS CSS
Selectors are something using which we
can select the HTML elements.
Below are different types of selectors.
› Element Selector : p {color:red;}
› Class Selector : .c1{color:red;}
› Id Selector : #id1{color:red;}
› Universal Selector : # {color:red;}
The CSS font properties define the font
family, boldness, size, and the style of a
text.
› font-family: "Times New Roman", Times, serif;
› font-style : normal| italic| oblique;
› font-size: 10px| 10%;
› font-weight: normal | bold| 100-900;
› font-variant: normal | small-caps;
Used to set border of any element
Border: 2px solid red
2px: border size
Solid: border style
Red: border color
Used to set a display of element
Inline
Block
Inline-block
Flex
grid
To set a position of element
Static
Relative
Absolute
Fixed
sticky
A combinator is something that explains the
relationship between the selectors.
A CSS selector can contain more than one simple
selector. Between the simple selectors, we can
include a combinator.
There are four different combinators in CSS:
› descendant selector (space) : div p {}
› child selector (>): div >p { }
› adjacent sibling selector (+): div+p {}
› general sibling selector (~): div~p {}
Create a mindsprint webpage using
HTML & CSS
What is Responsive web design:
Responsive web design is about creating web sites
which automatically adjust themselves to look good on
all devices, from small phones to large desktops.
Example: www.getbootstrap.com
Easy to use
Responsive Features
Mobile first approach
Browser compatibility
Use CDN (content delivery links)
You can download library directly and
include the same.
Uses of classes
Container:
› Use the default margins and padding
Container-fluid:
› Cover the entire width
Margins
Paddings
Height
Width
Implement the same page using
bootsrap.
