Workshop 2 Slides.pptx

HOST : SOHAIL ASGHAR (Web Development Lead)
CO-HOST : SAAD MUSTAFA

Topics To be Covered
 Basics of HTML (Hyper Text Markup Language)
 Basics of CSS (Cascading Styling Sheet)
 Basics of Javascript

What is HTML
 HTML stands for Hyper Text Markup Language.
 HTML is the standard markup language for creating Web pages.
 HTML describes the structure of a Web page.
 With HTML you can create your own Website.
Lets see what the Hyper Text markup Language is:
 Hyper Text:
 Hypertext refers to a word, phrase or chunk of text that can be linked to another
document or text.
 Markup Language:
 Markup languages are computer languages that are used to structure, format, or
define relationships between different parts of text documents with the help of
symbols or tags inserted in the document.

Basic structure of html document

The basic structure of an HTML document consists of 5 elements
 <!DOCTYPE>
 <html>
 <head>
 <title>
 <body>

<!DOCTYPE>
All HTML documents must start with a <!DOCTYPE> declaration.
It is an "information" to the browser about what document type to expect.
<html>
The html element is the root element and it defines the whole HTML Document.
Its has a start tag <html> and end tag </html>
<head>
The <head> element is a container for the metadata(data about data).
Metadata typically define the document title, character set, styles, scripts, and other meta
information.
<title>
The <title> defines the title of the document . The title must be text and it is shown the browser’s
title bar on the page tab.
<body>
The <body> tag element defines the document’s body.
It has a start tag <body> and end tag </body>.
The <body> element contains all the contents of an HTML document, such as headings,
paragraphs, images, hyperlinks, tables, lists, etc.
.

HTML Tags
 Html tags are the container that are used to store any thing
 An HTML tag is a piece of markup language used to indicate the beginning and end of an HTML
element in an HTML document.

Heading in html
 The <h1> to <h6> tags are used to define the html headings.
 <h1> defines the most important heading. <h6> defines the least important heading.
 There are six different html headings:
 <h1>This is heading 1</h1>
<h2>This is heading 2</h2>
.

Paragraphs in Html
 The <p> tag defines a paragraph.
 We can starts with <p> and end with </p> tag.
Syntax :
 <p> Hello I am student of Software Engineering at Abbottabad university of Science
and technology and I am also a web developer. </p>

Links in html
 HTML links are hyperlinks.
 You can click on a link and jump to another document.
 The HTML <a> tag is used to defines a hyperlink.
 The most important attribute of the <a> element is the href attribute, which indicates the
link's destination.
Syntax:
<a href="url">link text</a>

Images in html
 The HTML <img> tag is used to embed an image in a web page.
 Images are not technically inserted into a web page , images are linked to
the web pages .
 The <img> tag contains attributes only it has no closing tag.
The <img> tag required two attributes:
o src: specifies the path to image.
o alt: specifies the alternate text of the image.
Syntax :
 <img src="url" alt="alternatetext">

Lists in html
 HTML lists allows to group a set of related items in lists.
 Two types of lists in html:
o Ordered list
o Unordered lists

Ordered HTML List:
 An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
 The list items will be marked with numbers by default:
syntax:
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

Unordered HTML List:
 An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
 The list items will be marked with bullets (small black circles) by default:
Syntax:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Html tables
 A table in HTML consists of table cells inside rows and columns.
 The table is starts with < table >tag.

Syntax:
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
</table>

HTML Forms
 An HTML form Is used to collect user input. The user input is most often sent to a server
for processing.
 The <form> element is used to create an HTML form for user input:
 The <form> element is a container for different types of input elements, such as: text fields,
checkboxes, radio buttons, submit buttons, etc.
Syntax:
<form>
.
form elements
.
</form>

Elements used in html form
 Different elements are used In html forms .
 The HTML <input> element is the most used form element. An <input> element
can be displayed in many ways, depending on the type attribute.

INTRODUCTION TO CSS
Cascading Styling Sheet

What is CSS
 CSS stands for cascading styling Sheet.
 CSS is the language we use to style a Web page.
 CSS describes how HTML elements are to be displayed on screen, paper, or in other
media.
 It is the coding language that gives a website its look and layout. Along with HTML.
 CSS is fundamental to web design. Without it, websites would still be plain text on white

CSS Selectors
 CSS selector selects the HTML element(s) you want to style
 CSS selectors are used to "find" (or select) the HTML elements you want to style.
Different types of selectors:
 Universal Selector
 Element Selector
 Id Selector
 Class Selector
A

Universal Selectors
 The universal selector used the ‘*’ Symbol to select the elements.
 The universal selector (*) selects all HTML elements on the page.
Syntax:
*{
Color:blue;
Background-color: whitesmoke;
}

The Element Selector
 The element selector selects HTML elements based on the element name.
Syntax:
 Here, we have a <p> elements on the page and we want the text to be center-aligned, with a
red text color and we can choose the color of <h1> Element as blue.
h1{
color:blue;
}
p {
text-align: center;
color: red;
}

The Id Selector
 The id selector uses the id attribute of an HTML element to select a specific element.
 The id of an element is unique within a page, so the id selector is used to select one unique
element!
 To select an element with a specific id, write a hash (#) character, followed by the id of the
element.
Syntax:
<p id=“demo">Hello World!</p>
#demo{
color:red;
Text-align:center;
}

The Class Selector
 The class selector selects HTML elements with a specific class attribute.
 To select elements with a specific class, write a period (.) character, followed by the class
name.
Syntax:
<h1 class=“demo“>Welcome To Our Site</h1>
.demo{
Color: red;
Background-color:wheat;
}

How To Add CSS
 There are three ways of inserting a style sheet:
 External CSS
 Internal CSS
 Inline CSS

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.
Example:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>

Internal CSS
 An internal style sheet may be used if one single HTML page has a unique style.
 The internal style is defined inside the <style> element, inside the head section.

Example
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

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.
Syntax:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body

CSS Colors
 We can select the color of our choice by the use of color property.
Syntax:
P{
Color:green;
}

CSS Backgrounds
 The CSS background properties are used to add background effects for elements.
•background-color
•background-image
•background-attachment
•background-position

CSS Borders
 The CSS border properties allow you to specify the style, width, and color of an element's
border.
The border-style property specifies what kind of border to display.
The following values are allowed:
•dotted - Defines a dotted border
•dashed - Defines a dashed border
•solid - Defines a solid border
•double - Defines a double border
•hidden - Defines a hidden border

CSS Fonts
 Choosing the right font has a huge impact on how the readers experience a website.
 The right font can create a strong identity for your brand.
 Using a font that is easy to read is important. The font adds value to your text. It is also
important to choose the correct color and text size for the font.
 In CSS, we use the font-family property to specify the font of a text.
 .p1 {
font-family: "Times New Roman", Times, serif;
}

CSS Padding
 Padding is used to create space around an element's content, inside of any defined borders.
 The CSS padding properties are used to generate space around an element's content, inside
of any defined borders. With CSS, you have full control over the padding. There are
properties for setting the padding for each side of an element (top, right, bottom, and left).
 Syntax:
<h1>Welcome</h1>
h1{
border: 1px solid black;
background-color: lightblue;
padding-top: 50px;}

CSS Margins
 Margins are used to create space around elements, outside of any defined borders.
 The CSS margin properties are used to create space around elements, outside of any defined
borders.
 With CSS, you have full control over the margins. There are properties for setting the margin for
each side of an element (top, right, bottom, and left).
Syntax:
<h2>Using individual padding properties</h2>
h2{
border: 1px solid black;
margin-top: 100px;
Background-color:yellow;
}

CSS Height, Width and Max-width
 The CSS height and width properties are used to set the height and width of an element.
 The CSS max-width property is used to set the maximum width of an element.
Syntax:
div {
height: 200px;
width: 50%;
background-color: powderblue;
}

Introduction To Javascript
Basics of JavaScript

Javascript
 JavaScript is a scripting or programming language that allows you to implement complex
features on web pages .
 JavaScript is the world's most popular programming language.
 JavaScript is the programming language of the Web.

JavaScript Where To
 A javascript can start with the <script> tag.
 In HTML, JavaScript code is inserted between <script> and </script> tags
Syntax
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>

JavaScript Output
javaScript can "display" data in different ways:
•Writing into an HTML element, using innerHTML.
•Writing into the HTML output using document.write().
•Writing into an alert box, using window.alert().
•Writing into the browser console, using console.log().

Example
<!DOCTYPE html>
<html>
<body>
<script>
console.log(5 + 6);
</script>
</body>
</html>

JavaScript Variables
Variables are Containers for Storing Data
JavaScript Variables can be declared in 4 ways:
•Automatically
•Using var
•Using let
•Using const

JavaScript var
The Var statement declares function-scoped or globally-scoped variables, optionally
initializing each to a value.
Syntax:
var x = 5;
var y = 6;

JavaScript Let
The let keyword was introduced in ES6 (2015)
Variables defined with let cannot be Redeclared
Variables defined with let must be Declared before use
Variables defined with let have Block Scope
Syntax:
let x = 5;
let y = 6;

JavaScript Const
The const keyword was introduced in ES6 (2015)
Variables defined with const cannot be Redeclared
Variables defined with const cannot be Reassigned
Variables defined with const have Block Scope.
Always declare a variable with const when you know that the value should not be changed.
Syntax:
const x = 5;
const y = 6;

JavaScript Data Types
 In programming, data types is an important concept.
 To be able to operate on variables, it is important to know something about the type.
 Without data types, a computer cannot safely solve this:
 let x = 16 + "Volvo";
 Does it make any sense to add "Volvo" to sixteen? Will it produce an error or will it
produce a result?
 JavaScript will treat the example above as:
 let x = "16" + "Volvo";

JavaScript has 8 Datatypes
1. String
2. Number
3. Bigint
4. Boolean
5. Undefined
6. Null
7. Symbol
8. Object

Workshop 2 Slides.pptx

More Related Content

Similar to Workshop 2 Slides.pptx

Recently uploaded

Workshop 2 Slides.pptx