Scribd
Upload
2 views

My Basic Web Development Handout

Uploaded by

ዝ
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
2 views

My Basic Web Development Handout

Uploaded by

ዝ
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/ 6

Basic Web Development Handout

1. Introduction to Web Development


Web development involves creating websites or web applications. It consists of three
main technologies:

 HTML (HyperText Markup Language) – Structure of the webpage.


 CSS (Cascading Style Sheets) – Styling and layout.
 JavaScript (JS) – Interactivity and dynamic behavior.

2. HTML: Structure of a Webpage


HTML defines the content and layout of a webpage using tags.

Basic HTML Template


html

Copy
Download
Run
<!DOCTYPE html>
<html>
<head>
<title>My First Webpage</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph.</p>
<a href="https://www.example.com">Visit Example</a>
</body>
</html>

Common HTML Tags


Tag Description

<h1>-<h6> Headings (h1 is largest)

<p> Paragraph text

<a> Hyperlink

<img> Image (e.g., <img src="pic.jpg">)

<ul>, <ol>, <li> Lists (unordered/ordered)

<div> Container for styling

<button> Clickable button

3. CSS: Styling the Webpage


CSS controls the appearance of HTML elements.

Ways to Apply CSS

1. Inline CSS (inside HTML tags)

html

Copy

Download

Run

<h1 style="color: blue;">Hello!</h1>

2. Internal CSS (inside <style> in <head>)


html

Copy
Download

Run

<style>
h1 { color: blue; }
</style>

3. External CSS (separate .css file)


html

Copy

Download

Run

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

Basic CSS Syntax


css

Copy
Download
selector {
property: value;
}

Example:
css

Copy
Download
body {
font-family: Arial;
background-color: lightgray;
}
h1 {
color: blue;
text-align: center;
}

Common CSS Properties


Property Description

color Text color

font-size Text size (e.g., 16px)

margin Space outside an element

padding Space inside an element

background-color Background color

border Border around an element

4. JavaScript: Adding Interactivity


JavaScript makes webpages dynamic.

Basic JavaScript Example


html

Copy
Download
Run
<script>
function greet() {
alert("Hello, World!");
}
</script>
<button onclick="greet()">Click Me</button>

Common JavaScript Concepts

 Variables

javascript

Copy
Download

let name = "Alice";


const age = 25;

 Functions
javascript

Copy

Download

function sayHello() {
console.log("Hello!");
}

 DOM Manipulation (Changing HTML content)


javascript

Copy

Download

document.getElementById("demo").innerHTML = "New Text";

 Events
javascript

Copy

Download

button.addEventListener("click", function() {
alert("Button clicked!");
});

5. Putting It All Together


Example: Simple Interactive Page
HTML:
html

Copy
Download
Run
<!DOCTYPE html>
<html>
<head>
<title>Interactive Page</title>
<style>
body { font-family: Arial; text-align: center; }
button { padding: 10px 20px; background: blue; color: white; }
</style>
</head>
<body>
<h1 id="title">Welcome!</h1>
<button onclick="changeText()">Click Me</button>
<script>
function changeText() {
document.getElementById("title").innerHTML = "Hello, JavaScript!"
;
}
</script>
</body>
</html>

6. Next Steps
 Learn responsive design (e.g., Flexbox, Grid).
 Explore frameworks like Bootstrap (CSS) and React (JavaScript).
 Practice by building small projects (e.g., portfolio, calculator).

You might also like