Want to create interactive content? It’s easy in Genially!
3 Components of Web Development
Jasmine
Created on February 24, 2024
Start designing with a free template
Discover more than 1500 professional designs like these:
Transcript
Presentation
3 components of Webdevelopment
CSS
JS
HTML
HTML stands for.....
HyperText Markup Language
- Used to create Web Pages
- Work more effectively with technical teams
- Improve digital marketing skills
Angle Brackets: <>
- Angle Brackets surround the name of an element. - HTML code is based on Container tags & Empty tags.
Container tags: needs an opening and closing tag. Empty tags: only needs an opening tag, and do not need a closing tag.
How to Create a valid tag
Example
step 03
step 02
step 01
Create a closing tag. The closing tag will look similar to the opening tag, but with a forward slash after the first angle bracket.
<button>Like </button>
Place contents inside of opening and closing tag.
Create an opening tag with angle brackets around the name of the element
Which Code is Correct?
A. {button} Like {/button}B. <button> Like </button> C. button - Like - button D. <button> Like <button>
what does Html stand for?
A. HyperTension MarkupLanguageB. HighTraffic MarkupLanguage C. HeadTraffic MarkupLanuage D. HyperText MarkupLanguage
Combine Elements
Elements can be combine to make a webpage.
Example of Combining Code
<p>This product is awesome</p> <button>Buy</button>
Complete The Code Below
___Click to know more</p><button> ____ </button> <p>Now you know more____
6 Level of headings
<h1> Example </h1><h2> Example </h2> <h3> Example </h3> <h4> Example </h4> <h5> Example </h5> <h6> Example </h6>
Anatomy of HTML
<html>
The <html> tag represents the root of an HTML document. The <html> tag is the container for all other HTML elements
<head>
includes the title, description, keywords, increases visiability traffic and is not displayed on the webpage. Metadata is data about the HTML document. Metadata is not displayed.
<body>
Main Contents on the webpage.
Example of Anatomy
<html> <head> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <title>Title of the document</title> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html>
Nesting
ContenT Division
The <div> tag defines a division or a section in an HTML document. The <div> tag is used as a container for HTML elements - which is then styled with CSS or manipulated with JavaScript. The <div> tag is easily styled by using the class or id attribute. Any sort of content can be put inside the <div> tag!
HTML elements can be nested, meaning that one element can be placed inside another element.
Example of coding
<html> <head> </head> <body> <div class="myDiv"> <h2>This is a heading in a div element</h2> <p>This is some text in a div element.</p> </div> </body> </html>
CSS stands for.....
Cascading style sheets
CSS allows you to define styles for web pages.It can be used to style text, change colors, font size, etc., as well as create layout - for example, create columns, sidebars, navigation menus, etc.
Style Declarations
Selector {property: value; } Example... h1 { color: #78f933; }
Class vs. id
ID attribute
Class attribute
We can also create selectors based on the id attribute of elements.This is done by using the hash (#) symbol before the id value:
Often we need to target only a subset of elements, without changing the others. This can be done using a class selector. that the class selector needs to start with a dot, followed by the class name that we gave to our element.
vs
Ex.
Ex.
<div class="example"> <p>some text</p> </div>
<div id="example"> <p>some text</p> </div>
Ex.
Ex.
.example {color: #478j92; }
#example {color: #478j92; }
target elements
html
<p> This is a <strong>sentence</strong>.</p>
css
p strong {color: purple; }
List For Styling:
color: styles the color of textfont-family: styles the font of text from the default font-style: styles the characteristic of text width: sets the width of a container height: sets the height of a container context: area where the content is displayed margin: the last one and defines the space between this box and other elements. padding: white space around the content border-box: comes after padding border: creates a box around element background-color: styels the background of an element background-position: sets the position of an img or content.
Which Code is Correct?
A. button { background-color: blue; }B. background-color: blue { button }
what does CSS stand for?
A. CallingSourcesStylesB. CascadingStyleSheetsC. CascadingSheetsStyle D. CascadeServiceSource
Color values
rgb
hex code
standard
p {color: rgb(45, 225,223); }
p {color: #ffffff; }
p {color: red; }
coolors.com
JS stands for.....
Javascript
The behavior of a webpage. This language allows us to interact with the webpage.
onclickattribute
<button onclick =action>Click </button>
<button onclick =action>Like </button>
Functions
A function is a block of code designed to perform a particular task.For example, our app can have functions like login(), logout(), convert(), etc. To define a function, use the function keyword, followed by a name, followed by a set of parentheses (). Example: function name() { //code to be executed }
Complete the code:
___ test() { //code to be executed }
Create a function called test
function___ ___ { //code to be executed }
Create a function called example
Variables
In apps, we usually need to store some values and work with them throughout the program to make accessing them much more convenient.
const
var
let
const name = 'Mike;'
var name = 'Mike';
let name = 'Mike';
After creating the variable we can give it a value. This is called initialization.
Rules to Naming variables
- Variable names must begin with a letter, an underscore(_) or a dollar sign($) - Variable names connot contain spaces - Variable mames can only contain letters, numbers, underscores, or dollar signs - Variable name are case-sensitive, which means that for example, name and Name are two different variables.
while loops
for-Loops
The while loop is another way to create loops. It runs as long as the condition is true. while(condition) { //code to run } let i = 0; while(i <= 10) { console.log(i); i++; }
Loops allow you to run the same code multiple times.This is useful, for example, when drawing animations in games, or creating a countdown. The initializer is a variable, which increments the number of times the loop has run. The condition is used to stop the loop. The final expression is run each time after the loop's code has run. It is usually used to increment the variable used in the condition. Each run of the loop is called an iteration. Example of code for (initializer; condition; final-expression) { // code to run } for (let i = 1; i <= 10; i++) { console.log(i); }
Coding essentials
rgb
hex code
standard
p {color: rgb(45, 225,223); }
p {color: #ffffff; }
p {color: red; }
Essentials to know
HTML
The structure of a webpage. This is the foundation of a website.
CSS
The presentation of a website. This is how style is added to a web page.
JS
The behavior of a website. This is how interaction happens within the webpage.
Thanks!