HTML5,CSS & Conditional Statements

(JavaScript)
Presented By: Hassan Nadeem

06/28/2022 1
 Topics Outline

• What is Front-End Development?

• Introduction to HTML , syntax and examples
• Introduction to CSS, syntax, selectors and examples
• What are Conditional Statements ?
• Syntax, Structure examples using JavaScript
• Questions

06/28/2022 2
 What is Front-End Development?

• Front-End web development ,also known as client-side

development is the practice of producing HTML,CSS and
JavaScript for a website or Web Application so that a user
can interact with them directly.
• Skills required to become a Front-End Developer.
HTML
CSS
JavaScript

06/28/2022 3
 Introduction to HTML

• HTML stands for Hyper Text Markup Language.

• HTML is the foundation of webpages, used for webpage
development structuring websites and web apps.
• HTML consists of a series of elements
• HTML elements tell the browser how to display the
content

06/28/2022 4
 Why HTML?

 It is a simple markup language. Its implementation is

easy.
 It is used to create a website.
 Helps in developing fundamentals about web
programming.
• Boost professional career

06/28/2022 5
HTML & Real World

06/28/2022 6
HTML Tag

06/28/2022 7
A Simple HTML Document

06/28/2022 8
Output of the HTML Code on Browser

06/28/2022 9
Advantages:
 HTML is used to build websites.
 It is supported by all browsers.
 It can be integrated with other languages like CSS, JavaScript, etc.

Disadvantages:
 HTML can only create static web pages. For dynamic web pages,
other languages have to be used.
 A large amount of code has to be written to create a simple web
page.
 The security feature is not good.

06/28/2022 10
 Introduction to CSS

 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

06/28/2022 11
 Why CSS?
• CSS saves time: You can write CSS once and reuse the same sheet
in multiple HTML pages.
• Easy Maintenance: To make a global change simply change the
style, and all elements in all the webpages will be updated
automatically.
• Search Engines: CSS is considered a clean coding technique, which
means search engines won’t have to struggle to “read” its content.
• Superior styles to HTML: CSS has a much wider array of attributes
than HTML, so you can give a far better look to your HTML page in
comparison to HTML attributes.
• Offline Browsing: CSS can store web applications locally with the
help of an offline cache. Using this we can view offline websites.
06/28/2022 12
 Types of CSS

There are three types of CSS which are given below:

• Inline CSS
• Internal CSS
• External CSS

06/28/2022 13
 Inline CSS
• An inline style may be used to apply a unique style for a
single element.
• To use inline styles, add the style attribute to the relevant
element. The style attribute can contain any CSS property.

06/28/2022 14
 Internal CSS

• An internal style sheet may be used if one single HTML

page has a unique style.
• The internal style is defined inside <style> element, inside
the head section or outside the body tag.

06/28/2022 15
 External CSS

• With an external style sheet, you can change the look of an

entire website by changing just one file !
• Each HTML page must include a reference to the external
style sheet file inside the <link> element, inside the head
section.

06/28/2022 16
Example

06/28/2022 17
External CSS Example

06/28/2022 18
Output on Browser

06/28/2022 19
CSS Selectors

06/28/2022 20
 What are Conditional Statements?
• Conditional statements are used to perform different actions
based on different conditions.
• In JavaScript we have the following conditional statements:
• “If” to specify a block of code to be executed, if a condition is true.
• “else” to specify a block of code to be executed, if the same
condition is false.
• “else if” to specify a new condition to test, if the first condition is
false.
• “switch” to specify many alternative block of code to be executed.

06/28/2022 21
 “if” Statement (Syntax)

if (condition) {
  //  block of code to be executed if the
condition is true
}

06/28/2022 22
 “else” Statement (Syntax)

• if (condition){
  //  block of code to be executed if the
condition is true
} else {
  //  block of code to be executed if the
condition is false
}

06/28/2022 23
 “else if” Statement (Syntax)
• if (condition1){
  //  block of code to be executed if
condition1 is true
} else if (condition2) {
  //  block of code to be executed if the
condition1 is false and condition2 is true
} else {
  //  block of code to be executed if the
condition1 is false and condition2 is false
}
06/28/2022 24
Example

06/28/2022 25
Output on Console

06/28/2022 26
Real World Example

06/28/2022 27
Any Question?

06/28/2022 28
Thank You

06/28/2022 29