Scribd
Upload
24 views2 pages

HTML, CSS, and JavaScript Tutorial

The document provides a comprehensive tutorial on HTML, CSS, and JavaScript, covering the basic structure of a web page, styling elements, and adding interactivity. It includes example codes and explanations for creating HTML pages, using CSS for styling, and implementing JavaScript for dynamic content. Key concepts such as the box model, lists, and event listeners are also discussed.

Uploaded by

networkessencial
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
24 views2 pages

HTML, CSS, and JavaScript Tutorial

The document provides a comprehensive tutorial on HTML, CSS, and JavaScript, covering the basic structure of a web page, styling elements, and adding interactivity. It includes example codes and explanations for creating HTML pages, using CSS for styling, and implementing JavaScript for dynamic content. Key concepts such as the box model, lists, and event listeners are also discussed.

Uploaded by

networkessencial
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

■ HTML, CSS, and JavaScript – Complete Detailed

Tutorial

HTML – Structure of the Web

■ Basic HTML Page


Example Code Explanation
<!DOCTYPE html> This is the skeleton of every HTML document. -
<html lang="en">
`<!DOCTYPE html>` tells the browser that this is HTML5. -
<head>
<meta charset="UTF-8"> `<html>` is the root element. - `<head>` stores metadata,
<title>My First Page</title> `<title>` shows text on browser tab. - `<body>` contains
</head> visible content.
<body>
<h1>Hello World</h1>
<p>This is my first webpage!</p>
</body>
</html>

■ Links and Images


Example Code Explanation
<a href='[Link] target='_blank'>Visit -Google</a>
<a> defines a hyperlink. target="_blank" opens in new tab.
<img src='[Link]' width='200'>
- <img> displays an image (with src attribute).

■ Lists
Example Code Explanation
<ul> - <ul> creates unordered lists with bullets. - <ol> creates
<li>Milk</li>
ordered lists with numbers. - <li> defines a list item.
<li>Bread</li>
</ul>
<ol>
<li>Step 1</li>
<li>Step 2</li>
</ol>

CSS – Styling the Web

■ Internal CSS Example


Example Code Explanation
<style> - CSS describes how elements look. - Here, background
body { background: lightblue; }
color is light blue, headings are dark blue and centered.
h1 { color: darkblue; text-align: center; }
</style>

■ Box Model
Example Code Explanation
div { - CSS box model: Content → Padding → Border → Margin.
width: 200px;
- Padding = space inside border. - Margin = space outside
padding: 10px;
border: 2px solid black; border.
margin: 20px;
}

JavaScript – Making the Web Interactive

■ Change Text with JS


Example Code Explanation
<p id="demo">Hello</p> - JavaScript manipulates DOM. -
<button onclick="changeText()">Click</button>
[Link]("demo") selects element with id.
<script>
function changeText() { - innerHTML changes its text when button is clicked.
[Link]("demo").innerHTML = "Changed!";
}
</script>

■ Event Listener Example


Example Code Explanation
<button id="btn">Click Me</button> - addEventListener attaches a click event. - When button is
<script>
clicked, an alert appears.
[Link]("btn").addEventListener("click", function() {
alert("Button Clicked!");
});
</script>

You might also like