Scribd
Upload
4 views25 pages

Foundations of Computing From Hardware Essentials to Web Design

The document provides an overview of web design fundamentals, focusing on HTML, CSS, and JavaScript as the core technologies for creating websites. It covers best practices for web design, web content delivery mechanisms, and the differences between HTML and XHTML. Additionally, it includes detailed explanations of HTML structure, common tags, CSS styling methods, and responsive design techniques.

Uploaded by

Anusha Av
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
4 views25 pages

Foundations of Computing From Hardware Essentials to Web Design

The document provides an overview of web design fundamentals, focusing on HTML, CSS, and JavaScript as the core technologies for creating websites. It covers best practices for web design, web content delivery mechanisms, and the differences between HTML and XHTML. Additionally, it includes detailed explanations of HTML structure, common tags, CSS styling methods, and responsive design techniques.

Uploaded by

Anusha Av
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 25

Web Design (Basics of HTML, CSS, and JavaScript) -

Understanding the web content delivery, Understanding HTML and XHTML Connections,
Understanding Cascading Style Sheets, Understanding JavaScript

Web Design Basics

N
1. What is Web Design?

O
Web design is the process of creating and designing websites that are visually appealing,
user-friendly, and functional. It includes three main technologies:

I
AT
1.​ HTML (HyperText Markup Language) → Provides the structure of a webpage.
2.​ CSS (Cascading Style Sheets) → Styles and designs the webpage.
3.​ JavaScript → Adds interactivity and dynamic behavior.

C
A good web design ensures a smooth user experience, fast performance, and responsiveness
across different devices.
U
ED
Web Design Best Practices
✔ Keep it simple and clean → Avoid clutter.​
✔ Use readable fonts and colors → Ensure good contrast.​
✔ Make it mobile-friendly → Use responsive design.​
E

✔ Optimize images → Reduce load time.​


IV

✔ Test on different browsers → Ensure compatibility.

Web Content Delivery


EH

Web content delivery is the process of serving web pages and multimedia content to users via
the internet.
BE

Key Components of Web Content Delivery:

1.​ Web Server: Stores and serves website files.


○​ Example: Apache, Nginx, IIS.
○​ When you type www.example.com, the browser requests the webpage from the
web server.
2.​ Client (Web Browser): The software that displays web pages.
○​ Example: Chrome, Firefox, Edge.
○​ When you open https://google.com, your browser sends a request to
Google's server.
3.​ HTTP/HTTPS (Protocols for Communication):
○​ HTTP (HyperText Transfer Protocol): Transfers web pages without encryption.
○​ HTTPS (Secure HTTP): Uses encryption (SSL/TLS) for security.
○​ Example: http://example.com (Unsecured) vs. https://example.com
(Secured).
4.​ DNS (Domain Name System): Converts domain names into IP addresses.
○​ Example: www.google.com → 142.250.182.206.

N
5.​ CDN (Content Delivery Network): A network of distributed servers that deliver web
content faster.

O
○​ Example: Cloudflare, Akamai, AWS CloudFront.
○​ YouTube uses CDNs to load videos faster from servers closer to the user.

I
AT
2. HTML & XHTML Connections
HTML (HyperText Markup Language)
C
U
HTML is used to create the structure of web pages using tags.
ED

Example of a Simple HTML Page:

<!DOCTYPE html>
E

<html>
IV

<head>
EH

<title>My First Web Page</title>

</head>
BE

<body>

<h1>Welcome to My Website</h1>

<p>This is a paragraph of text.</p>

<img src="image.jpg" alt="Sample Image">

</body>
</html>

XHTML (Extensible HyperText Markup Language)

XHTML is a stricter and cleaner version of HTML that follows XML rules.

Example of an XHTML Page:

N
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

O
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

I
<html xmlns="http://www.w3.org/1999/xhtml">

AT
<head>

C
<title>XHTML Example</title>

</head>
U
ED
<body>

<h1>XHTML Page</h1>

<p>This is a well-structured XHTML document.</p>


E

<img src="image.jpg" alt="XHTML Image" />


IV

</body>
EH

</html>
BE
Key Differences Between HTML & XHTML

N
I O
AT
C
U
●​ Web Content Delivery ensures fast and secure webpage loading using servers,
ED
browsers, HTTP/HTTPS, DNS, and CDNs.
●​ HTML is the standard language for creating webpages, while XHTML follows stricter
syntax for better compatibility and structure.
E
IV

HTML (HyperText Markup Language) -


Basics
EH

1. What is HTML?
BE

HTML (HyperText Markup Language) is the foundation of web development, used to create
and structure webpages. It consists of elements (tags) that define content like headings,
paragraphs, images, and links.

💡 Key Features:​
✔ Defines the structure of a webpage.​
✔ Uses tags enclosed in angle brackets (< >).​
✔ Works with CSS for styling and JavaScript for interactivity.
2. Basic HTML Structure
Every HTML document follows a basic structure:

<!DOCTYPE html>
<html lang="en">

N
<head>

O
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,

I
initial-scale=1.0">

AT
<title>My First Web Page</title>
</head>
<body>

C
<h1>Hello, World!</h1>
<p>Welcome to my first webpage.</p>
</body>
U
ED
</html>

Explanation of Tags:
E

Tag Description
IV

<!DOCTYPE html> Declares the document type (HTML5).

<html> Root element of an HTML page.


EH

<head> Contains metadata (not visible on the page).

<title> Sets the page title (shown on the browser


BE

tab).

<meta Supports special characters (like emojis 😊).


charset="UTF-8">

<meta Ensures responsiveness on mobile devices.


name="viewport">

<body> Contains the visible content of the webpage.


3. Common HTML Tags

Headings (<h1> to <h6>)

<h1>Main Heading</h1>
<h2>Subheading</h2>

N
<h3>Smaller Heading</h3>

O
●​ <h1> is the largest, <h6> is the smallest.

I
AT
Paragraphs and Line Breaks

C
<p>This is a paragraph.</p>
<p>This is another paragraph.</p> U
<br>
<p>Line break above!</p>
ED

●​ <p> creates a new paragraph.


●​ <br> inserts a line break.
E

Links (<a> - Anchor Tag)


IV

<a href="https://www.google.com">Visit Google</a>


EH

●​ href="URL" → Specifies the link destination.


BE

Images (<img>)

<img src="image.jpg" alt="Description" width="300">

●​ src="image.jpg" → Image source (URL or file path).


●​ alt="Description" → Alternative text for accessibility.
●​ width="300" → Sets image width (height adjusts automatically).
Lists (Ordered & Unordered)

Unordered List (<ul>)

<ul>
<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>

N
</ul>

O
🔹 Displays items with bullet points.

I
AT
Ordered List (<ol>)

C
<ol>
<li>Step 1</li> U
<li>Step 2</li>
<li>Step 3</li>
ED
</ol>

🔹 Displays items with numbers (1, 2, 3…).


E

Tables (<table>)
IV

<table border="1">
EH

<tr>
<th>Name</th>
<th>Age</th>
BE

</tr>
<tr>
<td>Alice</td>
<td>22</td>
</tr>
<tr>
<td>Bob</td>
<td>25</td>
</tr>
</table>

Name Age

Alice 22

Bob 25

●​ <table> → Creates a table.

N
●​ <tr> → Table row.
●​ <th> → Table header (bold).

O
●​ <td> → Table data (normal cell).

I
AT
4. Forms (User Input)

C
Forms allow users to enter data, such as login details.

<form>
U
ED
<label for="name">Name:</label>
<input type="text" id="name" placeholder="Enter your name">

<label for="email">Email:</label>
<input type="email" id="email" placeholder="Enter your email">
E
IV

<label for="password">Password:</label>
<input type="password" id="password">
EH

<input type="submit" value="Submit">


</form>
BE

💡 Common Form Elements:


Input Type Description

text Plain text input

email Email validation


password Password input

submit Submit button

5. HTML Comments

N
<!-- This is a comment -->
<p>This is visible text.</p>

O
✔ Comments help explain the code but are not visible on the webpage.

I
AT
6. HTML Attributes

C
Attributes add extra information to elements.
U
ED
<a href="https://example.com" target="_blank">Open in New Tab</a>

🔹 target="_blank" → Opens link in a new tab.


E
IV

7. HTML Page Layout


EH
BE
N
O
I
AT
C
U
ED

💡 Semantic Elements for Layout:


E
IV
EH
BE
Summary Table

N
I O
AT
🎯 HTML provides the basic structure of a webpage.​
C
🎯 It works with CSS (for design) and JavaScript (for interactivity).​
U
🎯 Practice by creating simple webpages!
ED

CSS (Cascading Style Sheets) - Basics


E

1. What is CSS?
IV

CSS (Cascading Style Sheets) is used to style HTML elements, making webpages look
attractive and user-friendly. It controls the colors, fonts, layouts, spacing, and animations
EH

of a webpage.

💡 Key Features of CSS:​


✔ Separates design from HTML structure (cleaner code).​
BE

✔ Applies styles to multiple pages (via external stylesheets).​


✔ Responsive design (works on all screen sizes).

2. Ways to Apply CSS


There are three ways to use CSS in an HTML document:
1️⃣ Inline CSS (Inside HTML Tags)

Applied directly to an element using the style attribute.

<p style="color: blue; font-size: 18px;"> This is a blue


paragraph.</p>

🔹 Pros: Quick styling.​

N
🔹 Cons: Not reusable, difficult to maintain.

O
2️⃣ Internal CSS (Inside <style> in <head>)

I
AT
Defined within the <style> tag in the HTML document.

C
<!DOCTYPE html>
<html> U
<head>
<style>
ED
body {
background-color: lightgray;
}
h1 {
E

color: red;
}
IV

</style>
</head>
EH

<body>
<h1>Red Heading</h1>
</body>
BE

</html>

🔹 Pros: Works for a single page, avoids repetition.​


🔹 Cons: Not reusable across multiple pages.
3️⃣ External CSS (Recommended - Separate .css File)

Best practice! Saves styles in an external file and links it to HTML.


Step 1: Create a CSS file (styles.css)

body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: blue;

N
text-align: center;
}

OI
Step 2: Link CSS in HTML

AT
<link rel="stylesheet" href="styles.css">

C
🔹 Pros: Reusable across multiple pages.​
🔹 Cons: Needs an extra file. U
ED

3. CSS Selectors
CSS selectors target HTML elements and apply styles.
E
IV

1️⃣ Universal Selector (*)

Applies styles to all elements.


EH

* {
margin: 0;
BE

padding: 0;
}

2️⃣ Element Selector

Targets specific HTML tags.


h1 {
color: green;
}
p {
font-size: 18px;
}

N
3️⃣ Class Selector (.)

O
Targets elements with a specific class.

I
AT
.special-text {
color: purple;
font-weight: bold;

C
}

💡 Usage in HTML:
U
ED

<p class="special-text">This is styled using a class.</p>


E

4️⃣ ID Selector (#)


IV

Targets a single, unique element.


EH

#main-title {
font-size: 30px;
color: darkblue;
BE

💡 Usage in HTML:
<h1 id="main-title">Main Title</h1>
5️⃣ Grouping Selector

Applies styles to multiple elements at once.

h1, h2, p {
color: navy;
}

N
O
4. CSS Properties & Examples

I
AT
1️⃣ Colors

Named Colors:

p {

C
color: red;
U
ED
}

Hexadecimal Colors (#rrggbb):


E

h1 {
color: #ff5733;
IV

}
EH

RGB Colors:
BE

body {
background-color: rgb(240, 240, 240);
}

2️⃣ Background Styling

body {
background-color: lightblue;
background-image: url("background.jpg");
background-size: cover;
background-position: center;
}

3️⃣ Text Styling

N
O
p {
font-family: Arial, sans-serif;

I
font-size: 18px;

AT
font-weight: bold;
text-align: center;
text-decoration: underline;

C
text-transform: uppercase;
}
U
ED

4️⃣ Box Model (Margin, Padding, Border)

Box Model = Content + Padding + Border + Margin


E
IV

.box {
width: 300px;
EH

height: 200px;
background-color: lightgray;
padding: 20px;
border: 2px solid black;
BE

margin: 30px auto;


}

💡 Margin = Space outside the element​


💡 Padding = Space inside the element
5️⃣ CSS Layout - Display & Positioning

Block vs. Inline Elements

●​ Block elements (div, p, h1) take up the full width.


●​ Inline elements (span, a) only take up the necessary space.

Positioning

N
.fixed-box {
position: fixed;

O
top: 10px;
right: 20px;

I
}

AT
Position Description

C
static Default (normal position).

relati Moves relative to itself.


U
ve
ED

absolu Moves relative to the nearest positioned


te ancestor.
E

fixed Stays in place while scrolling.


IV

5. Responsive Design (Media Queries)


EH

Make websites mobile-friendly using media queries.


BE

@media (max-width: 600px) {


body {
background-color: yellow;
}
}

🔹 This will change the background color to yellow if the screen width is 600px or smaller.
6. CSS Animations

@keyframes slide {
0% { transform: translateX(0); }
100% { transform: translateX(100px); }
}

N
.box {

O
width: 100px;

I
height: 100px;

AT
background-color: red;
animation: slide 2s infinite alternate;
}

🔹 Moves a box left to right infinitely.


C
U
ED

7. Simple CSS Practice Project


E

1️⃣ Create an index.html File


IV

<!DOCTYPE html>
<html lang="en">
EH

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
BE

initial-scale=1.0">
<title>My First Styled Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 class="title">Welcome to My Website</h1>
<p>This is a simple webpage styled using CSS.</p>
<button class="btn">Click Me</button>
</body>
</html>

2️⃣ Create a style.css File


body {
background-color: #f0f0f0;
text-align: center;

N
font-family: Arial, sans-serif;
}

O
.title {

I
AT
color: darkblue;
font-size: 30px;
text-transform: uppercase;

C
}

p {
U
font-size: 18px;
ED
color: gray;
}

.btn {
E

background-color: blue;
IV

color: white;
padding: 10px 20px;
border: none;
EH

cursor: pointer;
font-size: 16px;
}
BE

.btn:hover {
background-color: darkblue;
}

✅ Save both files and open index.html in a browser.​


💡 Try modifying the styles and see what changes! 🎨
Summary
✔ CSS makes webpages visually appealing.​
✔ It can be applied inline, internally, or externally (best practice).​
✔ Selectors target elements for styling.​
✔ The box model controls spacing and layout.​
✔ Media queries enable responsiveness for mobile devices.​
✔ Animations add interactivity.

N
JavaScript Basics for Beginners

O
JavaScript (JS) is a programming language used to add interactivity, dynamic behavior,

I
AT
and logic to web pages. It works alongside HTML and CSS to create fully functional websites.

💡 Why Learn JavaScript?​


✔ Adds interactivity (buttons, forms, animations)​

C
✔ Runs in all web browsers (no installation needed)​
✔ Supports modern frameworks (React, Vue, Angular)
U
ED

1. How to Use JavaScript in HTML


There are three ways to include JavaScript in an HTML file:
E

1️⃣ Inline JavaScript


IV

JavaScript code is written inside HTML elements using the onclick or other event attributes.
EH

<button onclick="alert('Hello, World!')">Click Me</button>

🔹 Not recommended for large projects.


BE

2️⃣ Internal JavaScript (<script> in HTML)

JS is placed inside a <script> tag within the HTML file.

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Example</title>
</head>
<body>
<script>
console.log("Hello from JavaScript!");
</script>

N
</body>
</html>

I O
AT
3️⃣ External JavaScript (Recommended)

JavaScript code is stored in a separate file (script.js) and linked to HTML.

C
Step 1: Create a JS File (script.js) U
console.log("Hello, this is an external JavaScript file!");
ED

Step 2: Link It in HTML


<script src="script.js"></script>
E

🔹 Best practice: Keeps HTML clean and JavaScript reusable.


IV
EH

2. JavaScript Basics
BE

1️⃣ Variables (var, let, const)

Variables store data values.

var name = "Alice"; // Old way (avoid using)


let age = 25; // Can be changed later
const country = "India"; // Cannot be changed
console.log(name, age, country);
🔹 Use let and const instead of var.

2️⃣ Data Types

JavaScript has different data types:

let num = 10; // Number

N
let text = "Hello"; // String

O
let isTrue = true; // Boolean
let numbers = [1, 2, 3]; // Array

I
let person = {name: "Alice", age: 25}; // Object

AT
C
3️⃣ Operators
U
JavaScript supports arithmetic and comparison operators.
ED
let a = 10, b = 5;
console.log(a + b); // Addition (15)
console.log(a * b); // Multiplication (50)
console.log(a > b); // Comparison (true)
E

console.log(a === 10); // Strict equality (true)


IV

4️⃣ Functions
EH

Functions help reuse code.


BE

function greet(name) {
return "Hello, " + name + "!";
}
console.log(greet("Alice"));

🔹 Arrow Function (Shorter Version)


const add = (x, y) => x + y;
console.log(add(5, 3)); // 8

5️⃣ Conditional Statements (if-else)

let score = 85;

N
if (score > 80) {
console.log("Great job!");

O
} else {
console.log("Keep trying!");

I
}

AT
C
6️⃣ Loops (for, while)

Loops help repeat tasks.


U
ED
for (let i = 1; i <= 5; i++) {
console.log("Number: " + i);
}
E

let j = 1;
while (j <= 3) {
IV

console.log("Count: " + j);


j++;
EH

}
BE

3. DOM Manipulation (Changing Web Pages)


The DOM (Document Object Model) allows JavaScript to change HTML & CSS dynamically.

1️⃣ Selecting Elements

let title = document.getElementById("heading"); // Select by ID


let paragraphs = document.getElementsByTagName("p"); // Select all <p>
elements
let buttons = document.querySelector(".btn"); // Select by class

2️⃣ Changing Text

document.getElementById("heading").innerText = "Hello, JavaScript!";

N
O
3️⃣ Changing Styles

I
document.getElementById("heading").style.color = "blue";

AT
4️⃣ Event Handling (Click Button)

C
document.getElementById("myButton").addEventListener("click",
function() {
U
ED
alert("Button Clicked!");
});

🔹 Use this method instead of onclick in HTML.


E
IV

4. JavaScript Example: Interactive Web Page


EH

1️⃣ Create index.html


BE

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Example</title>
<style>
body { text-align: center; font-family: Arial; }
#box { width: 100px; height: 100px; background: red; margin:
auto; }
</style>
</head>
<body>
<h1 id="heading">Welcome!</h1>
<p>Click the button to change the box color.</p>
<div id="box"></div>
<button id="myButton">Change Color</button>

N
<script src="script.js"></script>
</body>

O
</html>

I
AT
2️⃣ Create script.js

C
document.getElementById("myButton").addEventListener("click",
function() { U
let box = document.getElementById("box");
let colors = ["red", "blue", "green", "yellow", "purple"];
ED
let randomColor = colors[Math.floor(Math.random() *
colors.length)];
box.style.backgroundColor = randomColor;
});
E
IV

Open index.html in a browser and click the button!


EH

Summary
BE

✔ JavaScript adds interactivity to websites.​


✔ Use let and const for variables.​
✔ Use if-else, for, while to control logic.​
✔ Modify web pages using the DOM.​
✔ Use event listeners to handle user actions.

You might also like