Lab4 - HTML - CSS - JS

Introduction to Software
Engineering
Implementing a Web App Using Git
and GitHub for version control
(HTML - CSS - JAVASCRIPT)
Introduction
• HTML to create the
document structure and
content
• CSS to control is visual
aspect
• Javascript for interactivity
Introduction
In this presentation, we’ll explore the three core technologies that power the
web:
• HTML (HyperText Markup Language): The backbone of any website, HTML

structures the content and provides meaning to elements on the page.
• CSS (Cascading Style Sheets): CSS beautifies the web, allowing us to

control the layout, design, and presentation of our HTML content.
• JavaScript: The dynamic scripting language that brings interactivity to our

websites, enabling user engagement and enhancing functionality.
Together, these technologies form the foundation for creating engaging and
responsive web experiences. Let’s dive in!
Objectives
1. Understand the Basics of HTML
2. Explore CSS Fundamentals
3. Grasp the Essentials of JavaScript
4. Integrate HTML, CSS, and JavaScript
HTML
HTML stands for Hyper Text Markup Language,
consists of a series of elements that tell the
browser how to display the content.
HTML
• An HTML element is defined by a start tag,
some content, and an end tag:
• <tagname> Content goes here... </tagname>
• Tag x in HTML means : <x> ... </x>

HTML
• An HTML element can have attributes that
provide additional information about it :
• <tagname attribute=”value”> Content goes

here... </tagname>
HTML
• HTML Basic page structure is defined by an
HTML, head, body tags.
HTML
Some important tags :
• The <html> element is the root element of an
HTML page.
• The <head> element contains meta
information about the HTML page.
• The <body> element defines the document's
body, and is a container for all the visible
contents, such as headings, paragraphs,
images, hyperlinks, tables, lists, etc.
HTML
• <h1> to <h6> Header tags, used for defining headings on the
page, with <h1> being the most important and <h6> the least.
• <p> Paragraph tag, used to define blocks of text.
• <a> Anchor tag, used to create hyperlinks to other pages or
resources.
• <img> Image tag, used to embed images into a web page.
Requires the src attribute to specify the image file.
• <ul>, <ol>, and <li> Unordered list (<ul>), ordered list (<ol>),
and list item (<li>) tags, used to create lists.
• <div> A generic container tag, used to group elements for
styling or layout purposes.
• <span> An inline container tag, used to group text or
HTML
• An HTML element can have identifier, either unique using
attribute id or shared across more than one HTML element
using attribute class.
Example :
HTML
HTML forms
• HTML forms are used to collect input from
users, such as text, passwords, selections, and
more. This input can then be sent to a web
server (like Flask!) to be processed.
HTML
Structure of an HTML Form
1. Form Tag: The form starts with a <form> tag, which
can include the action attribute to specify where the
data should be sent, and the method attribute to
define how the data will be sent (GET or POST).
2. Input Fields: Inside the form, you add different types
of input fields for users to fill in.
3. Submit Button: To send the form data, there is
usually a "Submit" button.
HTML
Key Elements of a Form
1. <form>: This tag defines the beginning and end of the form.
Attributes
action: The URL where the form data will be sent (e.g., /submit).
method: The HTTP method for sending the data (usually GET or
POST).
<form action="/submit" method="POST">

HTML
Key Elements of a Form
2.<input>: Used to create a field where the user can type in data.
Types:
text: For single-line input like name.
email: For email input with basic validation.
password: For masked password input.
submit: Creates a submit button, The submit button sends the
form data to the server.
<input type="text" id="name" name="name">
<input type="submit">
CSS
CSS stands for Cascading Style Sheets, describes
how HTML elements are going to be displayed
on the screen.
CSS
How to Insert CSS with HTML ?
1. 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.
ex : linked CSS file named “mystyle.css” in our html document.

CSS
2. Internal CSS
An internal style 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.
CSS
3. 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.
CSS
CSS Syntax
Selector : The selector points to the HTML element you want to style, can be
tagname as mentioned h1 tag in the above image and can be another pointer
to the html elements (#id, .class).
Declaration : The declaration block contains one or more declarations
separated by semicolons, Each declaration includes a CSS property name and
a value, separated by a colon.
CSS
Some CSS attributes with their possible values
Attribute name Usage Possible values
color Sets the color of text Named colors: red, green,blue

etc.
RGB values: rgb(255, 0, 0)
background-col Sets the background color of an Named colors: red, green, blue
or element etc.
RGB values: rgb(255, 0, 0)
font-size Defines the size of the font Keywords: small, medium,

large
Pixels: 14px, 16px, etc.
JavaScript
JavaScript is the programming language of the
Web that program the behavior of web pages.
JavaScript
JavaScript Syntax
In JavaScript we create variables using keywords

let, const.
Ex :
// Numbers:
let length = 16;
let weight = 7.5;
// Strings:
let color = "Yellow";
let lastName = "Johnson";
JavaScript
// Booleans
let x = true;
let y = false;
// Object:
const person = {firstName:"John", lastName:"Doe"};
// Array object:
const cars = ["Saab", "Volvo", "BMW"];
JavaScript
Make comments using // for single line or /* */ for multible lines:
// I won’t be executed
/*
Me too -_-
*/
JavaScript
JavaScript Operators are used to perform different types of mathematical and

logical computations.
Examples:
The Assignment Operator = assigns values
The Addition Operator + adds values
The Multiplication Operator * multiplies values
The Comparison Operator > compares values
JavaScript
JavaScript Functions
A JavaScript function is defined with the function keyword,
followed by a name, followed by parentheses ().
•Function names can contain letters, digits, underscores, and

dollar signs (same rules as variables).
•The parentheses may include parameter names separated by

commas:
(parameter1, parameter2, ...)
•The code to be executed, by the function, is placed inside curly

brackets: {}
JavaScript
JavaScript Functions
function name(parameter1, parameter2, parameter3) {

// code to be executed
}
Example :
function sum(number1, number2) {
let sum = number1 + number2;
return sum;
}
console.log(sum(1,2));
JavaScript
JavaScript output
JavaScript included in HTML using tag <script>
JavaScript can "display" data in different ways:
1.Writing into an HTML element, using innerHTML.
2.Writing into the HTML output using document.write().
3.Writing into an alert box, using window.alert().
4.Writing into the browser console, using console.log().

JavaScript
JavaScript output
1.Writing into an HTML element, using innerHTML.

JavaScript
JavaScript output
2.Writing into the HTML output using document.write().

JavaScript
JavaScript output
3.Writing into an alert box, using window.alert().

JavaScript
JavaScript output
4.Writing into the browser console, using console.log().

JavaScript
JavaScript with HTML onClick event
When An HTML element was clicked

<element event='some JavaScript'>
Example :
<button onclick="window.alert(Date())">The time is?</button>
And there another events like

Onmouseover : The user moves the mouse over an HTML element
Onmouseout : The user moves the mouse away from an HTML element

Lab4 - HTML - CSS - JS

Uploaded by

Lab4 - HTML - CSS - JS

Uploaded by

Introduction to Software

• HTML (HyperText Markup Language): The backbone of any website, HTML

• CSS (Cascading Style Sheets): CSS beautifies the web, allowing us to

• JavaScript: The dynamic scripting language that brings interactivity to our

• <tagname> Content goes here... </tagname>

• Tag x in HTML means : <x> ... </x>

• <tagname attribute=”value”> Content goes

<form action="/submit" method="POST">

ex : linked CSS file named “mystyle.css” in our html document.

color Sets the color of text Named colors: red, green,blue

font-size Defines the size of the font Keywords: small, medium,

In JavaScript we create variables using keywords

Make comments using // for single line or /* */ for multible lines:

JavaScript Operators are used to perform different types of mathematical and

•Function names can contain letters, digits, underscores, and

•The parentheses may include parameter names separated by

•The code to be executed, by the function, is placed inside curly

function name(parameter1, parameter2, parameter3) {

JavaScript included in HTML using tag <script>

JavaScript can "display" data in different ways:

1.Writing into an HTML element, using innerHTML.

2.Writing into the HTML output using document.write().

3.Writing into an alert box, using window.alert().

4.Writing into the browser console, using console.log().

1.Writing into an HTML element, using innerHTML.

2.Writing into the HTML output using document.write().

3.Writing into an alert box, using window.alert().

4.Writing into the browser console, using console.log().

When An HTML element was clicked

And there another events like

You might also like