Scribd
Upload
29 views

Html5, Css & Conditional Statements (Javascript) : Presented By: Hassan Nadeem

The document provides an overview of HTML5, CSS, and conditional statements in JavaScript for front-end web development. It outlines topics that will be covered including what is front-end development, introductions to HTML and CSS with examples, and what are conditional statements and examples using JavaScript syntax. Examples of HTML, CSS, and JavaScript conditional statements are provided to demonstrate the concepts.

Uploaded by

Hassan Nadeem
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
29 views

Html5, Css & Conditional Statements (Javascript) : Presented By: Hassan Nadeem

The document provides an overview of HTML5, CSS, and conditional statements in JavaScript for front-end web development. It outlines topics that will be covered including what is front-end development, introductions to HTML and CSS with examples, and what are conditional statements and examples using JavaScript syntax. Examples of HTML, CSS, and JavaScript conditional statements are provided to demonstrate the concepts.

Uploaded by

Hassan Nadeem
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 29

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

You might also like