WEB DESIGNING
BY : Tarundeep Singh
Today’s Presentation
Web Designing
Elements of Web Designing
Html
CSS
JavaScript
Jquery
Bootstrap
Web Designing
Design is the process of collecting ideas, and arranging and
implementing them, guided by certain principles for specific
purpose.
Web Design is a similar process of creation, with the intention of
presenting the content on electronic web pages, which the end-
users can access through the internet with the help of
a web browser.
Elements of Web Designing
Layout : This is the way the graphics, ads and texts are arranged.I In the web world, a
key goal is to help the view find the information they seek at galance .This includes
maintaining the balance, consistency,and integrity of the design.
Colour : The choice of colours depend on the purpose and clientele(client collectively); it
could be simple black-and-white to multi-coloured designs, conveying the personality of
a person or the brand of an organization, using web-safe colours.
Graohics : Graphics can include logos, photos, clipart or icons, all of which enhance the
web design. For user friendliness , these need to be placed appropriately, working with
the colour and content of the web page, while not making it too congested or slow to
load
Fonts : The use of various fonts can enhance a website design. Most web browsers can
only read a select number of fonts, known as ”web-safe fonts”, so your deigner will
generally work within this widely accepted group.
HTML
HTML is a language for describing Web Pages.
HTML stands for Hyper Text Markup Language.
HTML is not a programing language,it is markup
Language.
A markup language is a set of markup tags.
HTML uses markup tags to describe web pages.
Example of HTML
<!doctype html>
<html>
<head>
<h1>My First Heading</h1>
<p>My First paragraph.</p>
</body>
</html>
Example Explained
The text between <html> and </html> describes the web page.
The text between <body> and </body> is the visible page content.
The text between <h1> and </h1> is displayed as a heading.
The text between <p> and </p> is displayed as a paragraph
CSS
CSS Stands for Cascading Style Sheets
Styles Sheets define how HTML elements are to be
displayed.
Like HTML, Style Sheets must use a common language
and follow common rules. This language is known as
Cascading Styles Sheets,CSS.
CSS is designed to augment(not replace) HTML.
Insertion for CSS
Inline CSS
Styles are specified inside an HTML tag/element
Eg. <p style=“font-family”:Algerian; font-size=“28px”;>Demo of Inline Style </p>
Internal CSS
To Apply specific styles to a single HTML,file inside the head section of an HTML
page.
Eg. <style> p { text-align:left; font-size:24px; } </style>
External CSS
Styles are specified in an external CSS file.you can change the looks of entire
website by using single external style sheet
Eg. <head> <link rel=“stylesheets” type=“text” href=“ex1.css” /> </head>
Java Script
Java Script is a client-side Scripting language.
Scripting Language is a lightweight programming
language.
Java Script is a programming code that can be inserted into
HTML pages.
It can be used to detect the visitor’s browser.
Validate Data.
jQuery
jQuery is a library of JavaScript Functions.
jQuery is the most popular JavaScript framework.
jQuery is a lightweight “write less,do more” JavaScript Library.
jQuery simplifies JavaScipt programming.
Bootstrap
Bootstrap is the most popular CSS Framework for developing
responsive and mobile-first websites.
Bootstrap is the most popular HTML, CSS and JavaScript framework for
developing a responsive and mobile friendly website.
It is a front-end framework used for easier and faster web designing.
It includes HTML and CSS based design templates for typography, forms,
buttons, tables, navigation, modals, image carousels and many others.
It facilitates you to create responsive designs.
Why Bootstrap is Better
Bootstrap is more than efficient to create a
responsive and mobile first website but it is not
the best in the industry.
This Photo by Unknown Author is licensed
under CC BY
There is an alternative of Bootstrap named W3.
CSS which is smaller, faster, and easier to use.
THANK YOU
