Tech Winter Break'24 Workshop A hands-o

WEB
DEVELOPMENT
Basics Of Web Development
Html ,CSS, Javascript

Structural Tags
<HTML>
These tags enclose the entire Web page document.
</HTML>
<HEAD>
These tags enclose the Head part of the document
</HEAD>
<TITLE>
These tags enclose the title of the document. This text appears in the title bar in
the browser and on the bookmark list if someone bookmarks your web page.
</TITLE>

Sample Structure of a Web Site
<HTML>
<HEAD>
<TITLE> John Public Web Page </TITLE>
</HEAD>
<BODY>
This is John Public's Webpage!
</BODY>
</HTML>

Header Tags
Header Tags -- Used for marking sections and subsections in a document.
<H1>Header 1 -- Giant-sized and bold </H1>
<H2>Header 2 -- Large and bold </H2>
<H3>Header 3 -- Normal-sized and bold </H3>
<H4>Header 4 -- Small and bold </H4>
<H5>Header 5 -- Very Small and bold </H5>
<H6>Header 6 -- Tiny and bold </H6>

Header Tags (cont.)
H1 = Giant-sized and bold
H2 = Large and bold
H3 = Normal-sized and bold
H4 = Small and bold
H5 = Very Small and bold
H6 = Tiny and bold

Breaking Lines and Paragraphs
● <P> text </P>
○ Paragraph tag
○ Most browsers render (process) this with blank lines
between each paragraph
● <BR>
○ Line break tag
○ Used when the webmaster wants a carriage return but
doesn't want a blank line to follow

Horizontal Line
● The <HR> tag
It puts a graphical line across the page.
Ex:
● Horizontal Rule Attributes:
1. NOSHADE -- A solid line with no shading.
2. WIDTH="xx%/xx" -- Controls the width of the line. You may specify either
percentage of the width of a page or actual pixel length.
3. SIZE="xx" -- Controls the height of the line. You need to specify the dimension in
pixels.
4. ALIGN="left/center/right" -- This allows the line to be aligned to the left, right, or
center of the page.

Text Formatting Tags
● Some basic text formatting styles:
Tags Result
1. <I> Italics </I> Italics
2. <B> Bold </B> Bold
3. <PRE> Preformatted Text </PRE> Preformatted Text
4. <STRONG> Strong </STRONG> Strong
5. <ADDRESS> Address </ADDRESS> Address
6. <CITE> Citations </CITE> Citations
7. <CODE> Source Code </CODE> Source Code

Font modifications
Web creators can also change the way text looks by using the <FONT> tag
1. SIZE="number" - changes size of the font; 1=smallest, 7 = largest
<FONT SIZE="7">Big</FONT> <FONT SIZE="1">Small</FONT>
Big Small
2. COLOR="color-name" - changes text color
<FONT COLOR="red">This is red</FONT>
This is red
3. FACE="font-name" - changes font
<FONT FACE="verdana">This is the verdana font;</FONT>
<FONT FACE="chicago">this is the chicago font.</FONT>
This is the verdana font; this is chicago font.

Lists -- Unordered Lists
Unordered lists:
<UL>
<LI>Item One
<LI>Item Two
<LI>Item Three
<LI>Item Four
</UL>
Unordered List Attributes:
type="disc/circle/square"
● Disc (default)
○ Circle
■ Square
● Item One
● Item Two
● Item Three
● Item Four

Lists -- Ordered Lists
Ordered lists:
<OL>
<LI>Item One
<LI>Item Two
<LI>Item Three
<LI>Item Four
</OL>
Ordered List Attributes:
type="i/I/a/A/1"
(default)
i = i. Item One I = I. Item One a = a. Item One A =A. Item One 1
=1. Item One
ii. Item Two II. Item Two b. Item Two B. Item Two
2. Item Two
iii. Item Three III. Item Three c. Item Three C. Item Three 3. Item Three
iv. Item Four IV. Item Four d. Item Four D. Item Four
4. Item Four
1. Item One
2. Item Two
3. Item Three
4. Item Four

Links
The anchor tag <A> is used to link one document to another or from one part of a document
to another part of the same document.
Basic Links:
<A HREF="http://www.stanford.edu/">Stanford University</A>
Inter-document Links:
<A HREF="#spot">Point to 'spot' in this document</A>
Defining a point in a document:
<A NAME="spot">Spot</A>
Email links:
<A HREF="mailto:someone@somehost.com">Email someone@somehost.com</A>

Graphics
To have a graphic appear on a webpage, web designers must to put the <IMG> tag in with
the address where the graphic "lives":
<IMG SRC="http://www.someplace.com/images/jethalal.png">

Graphics (Cont.)
Graphics attributes:
alt="text": insert a description of the graphic for those who are using browsers that
cannot process images (e.g., page readers for the blind)
width="xx/xx%": width in pixels/percentage
height="xx/xx%": height in pixels/percentage
border="xx": pixel length of the border surrounding the image.
hspace="xx": places a buffer of space horizontally around the image
vspace="xx": places a buffer of space vertically around the image
align="top/middle/bottom/right/left": aligns image in relation to the text (see next 2
slides)

Introduction to CSS (Cascading Style Sheets)

What is CSS?
● CSS stands for Cascading Style Sheets.
● Purpose: Used to style and layout web pages.
● Example: Adding colors, fonts, spacing, etc.

Integration of CSS
● In-Line <p style="Property">This is a paragraph with inline CSS.</p>
● Internal <style> p { color: green; font-size: 18px; } </style>
● External <link rel="stylesheet" href="styles.css">

● Types of Selectors: Syntax:
- Universal (*)
- Type (h1, p)
- Class (.classname)
- ID (#idname)
Combinators: Descendant, Child,
Sibling selectors.
Selectors in CSS

Text Styling : color, font-family, font-size, text-align.
Box Model : margin, padding, border, width, height.
Background : background-color, background-image.
CSS Properties

Explanation: Content, Padding, Border, and Margin.
Diagram: Syntax:
Box Model

Responsive Design
Why it's important: Ensures compatibility with various devices.

Purpose: Align and distribute space efficiently. Syntax:
Key properties:
- display: flex;
- justify-content, align-items, flex-wrap.
CSS Flexbox

Purpose: Two-dimensional layout system.
Key properties:
- display: grid;
- grid-template-rows, grid-template-columns.
CSS Grid

Frameworks: Bootstrap, Tailwind CSS.
Tools and Resources

How To Implement JavaScript In HTML
External
<script src=”filename.js”></script>
Internal
<script type=”text/javascript”>
/* write a function*/
function sum(a,b){
return a+b;
}
</script>
We can implement JS into
our index.html file by 2
ways:
1.Internal Script
2.External Script

Variables In JavaScript
let x = null;
let name = "Tammy";
const found = false;
console.log(name, found, x);
// => Tammy, false, null
var a;
console.log(a);
// => undefined
1. Variables stores data in memory locations
for further processing.
Types of Variables :
● let
● var
● const

Loops In JavaScript
const isMailSent = true;
if (isMailSent) {
console.log('Mail sent to
recipient');
}
const size = 10;
if (size > 100) {
console.log('Big');
} else if (size > 20) {
console.log('Medium');
} else if (size > 4) {
console.log('Small');
} else {
console.log('Tiny');
}
// Print: Small
If Statement If else Statement

Functions In JavaScript
// Defining the function:
function sum(num1, num2) {
return num1 + num2;
}
// Calling the function:
sum(3, 6); // 9
// Named function
function rocketToMars() {
return 'BOOM!';
}
// Anonymous function
const rocketToMars = function() {
return 'BOOM!';
}
Normal Function Anonymous Function

Functions In JavaScript(Cont.)
const sum = (param1, param2) => {
return param1 + param2;
};
console.log(sum(2,5));
// => 7
Arrow Function

Arrays In JavaScript
const fruits = ["apple", "orange", "banana"];
// Different data types
const data = [1, 'chicken', false];
Array Basic Structure
Array Methods
1. Array.length
2. Array.map
3. Array.push
4. Array.pop
5. Array.filter
6. Array.reduce
7. Array.slice
etc etc …..

Objects In JavaScript
const apple = {
color: 'Green',
price: { bulk: '$3/kg', smallQty: '$4/kg'
}
};
console.log(apple.color);
// => Green
console.log(apple.price.bulk); // =>
$3/kg
const person = {
name: 'Tom',
age: '22',
};
const {name, age} = person;
console.log(name); // 'Tom'
console.log(age); // '22'
Accessing Property Of Object Destructuring Of Objects

What the heck is DOM
● Document Object Model
○ Your web browser builds a model of the web page (the document) that
includes all the objects in the page (tags, text, etc)
○ All of the properties, methods, and events available to the web developer
for manipulating and creating web pages are organized into objects
○ Those objects are accessible via scripting languages in modern web
browsers
<html>
<head>
<title>Sample DOM Document</title>
</head>
<body>
<h1>An HTML Document</h1>
<p>This is a <i>simple</i> document.
</body>
</html>
This is an example of a
exampleDOM.html

Tech Winter Break'24 Workshop A hands-o

Accessing Elements In DOM
1. document.getElementById(id)
2. document.querySelector()
3. document.querySelectorAll()
4. document.getElementsByTagName(name)
5. document.getElementsByClassName(name)

Modifying Elements In DOM
1. element.innerHTML;
2. element.textContent;
3. element.setAttribute("attributeName", "value");
4. element.getAttribute("attributeName");
5. element.classList.add("className");
6. element.classList.remove("className");
7. element.classList.toggle("className");
8. element.style.property = "value";

Creating ,Appending and Event Handling
In DOM
1. document.createElement(tagName);
2. parentElement.appendChild(childElement);
3. element.addEventListener("event", function);
4. element.removeEventListener("event", function);

Tech Winter Break'24 Workshop A hands-o

More Related Content

Similar to Tech Winter Break'24 Workshop A hands-o (20)

Recently uploaded (20)

Tech Winter Break'24 Workshop A hands-o