Web Development Fundamentals: HTML, CSS, and JavaScript Essentials
This section covers the fundamental building blocks for displaying content on a web page.
<!-- Document Structure Template -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Content Demo</title>
</head>
<body>
<h1>Primary Heading Level 1</h1>
<h2>Secondary Heading Level 2</h2>
<h3>Tertiary Heading Level 3</h3>
<p>Standard paragraph element.</p>
<!-- Text Styling Variations -->
<p>Text formatting options: <b>Bold</b>, <i>Italic</i>, <u>Underline</u>, <s>Strikethrough</s></p>
<!-- List Examples -->
<ul>
<li>Unordered Item One</li>
<li>Unordered Item Two</li>
<li>Unordered Item Three</li>
</ul>
<ol>
<li>Ordered Step One</li>
<li>Ordered Step Two</li>
<li>Ordered Step Three</li>
</ol>
<!-- Table Layout -->
<table border="1">
<tr>
<th>Header Col 1</th>
<th>Header Col 2</th>
<th>Header Col 3</th>
</tr>
<tr>
<td>Data Cell A</td>
<td>Data Cell B</td>
<td>Data Cell C</td>
</tr>
<tr>
<td>Data Row 2 - Col 1</td>
<td>Data Row 2 - Col 2</td>
<td>Data Row 2 - Col 3</td>
</tr>
</table>
</body>
</html>
- Hyperlinks and Media Resources
Understanding how to embed navigation paths and visual assets.
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Link and Image Handling</title>
</head>
<body>
<!-- Standard Navigation Link -->
<a href="https://example.com/docs">Visit Documentation</a>
<br>
<a href="https://example.com/articles" target="_blank">Open in New Tab</a>
<hr>
<!-- Image Embedding with Dimensions -->
<img src="https://placehold.co/374x541" alt="Sample Visual" width="300" height="400">
</body>
</html>
- Layout Containers and Inline Spans
Differentiating between block-level containers and inline elements for styling purposes.
<html lang="en">
<head>
<title>Block vs Inline</title>
</head>
<body>
<div class="header-nav">
<a href="#section1">Nav Link 1</a>
<a href="#section2">Nav Link 2</a>
<a href="#section3">Nav Link 3</a>
</div>
<div class="main-content">
<h1>Page Title</h1>
<p>Content block 1</p>
<p>Content block 2</p>
</div>
<!-- Span allows styling text segments within a line -->
<span>Inline Element 1</span>
<span>Inline Element 2</span>
<span>Action Link <a href="#">Click Here</a></span>
</body>
</html>
- Interactive Forms
Capturing user input through various field types.
<html lang="en">
<head>
<title>Form Interaction</title>
</head>
<body>
<form action="/submit-endpoint">
<label for="usr">Username:</label>
<input type="text" id="usr" placeholder="Enter ID">
<br><br>
<label for="pass">Password:</label>
<input type="password" id="pass" placeholder="******">
<br><br>
<!-- Radio buttons require matching name attributes -->
<input type="radio" name="gender_choice" value="m"> Male
<input type="radio" name="gender_choice" value="f"> Female
<input type="radio" name="gender_choice" value="o"> Other
<br><br>
<!-- Checkboxes allow multiple selections -->
<input type="checkbox" name="interests" value="tech"> Tech
<input type="checkbox" name="interests" value="sports"> Sports
<input type="checkbox" name="interests" value="art"> Art
<br><br>
<input type="submit" value="Submit Form">
</form>
</body>
</html>
- Integrating Stylesheets
Demonstrating three methods to apply CSS rules.
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Injection Techniques</title>
<!-- Internal Style Block -->
<style>
p {
color: darkblue;
font-size: 24px;
}
h2 {
color: forestgreen;
}
</style>
<link rel="stylesheet" href="./styles/main.css">
</head>
<body>
<p>Styled via internal stylesheet rule</p>
<!-- Inline Style Attribute -->
<h1 style="color: crimson;">Directly styled text</h1>
<h2>Styled via internal header rule</h2>
<h3>Styled via external stylesheet file</h3>
</body>
</html>
- Advanced CSS Selections
Targeting specific elements using various selector types.
<html lang="en">
<head>
<title>Selection Methods</title>
<style>
/* Type Selector */
h2 { color: cyan; }
/* Class Selector */
.accented { background-color: indigo; }
/* ID Selector */
#app-header { font-size: 32px; }
/* Universal Selector */
* { font-family: '楷体', serif; }
/* Child Selector (direct children only) */
.parent-box > .child-box { color: olive; }
/* Descendant Selector (all nested levels) */
.parent-box p { color: sienna; }
/* Adjacent Sibling Selector */
h3 + p { background-color: skyblue; }
/* Pseudo-Class */
#hover-target:hover { background-color: navy; }
</style>
</head>
<body>
<h1>CSS Targeting Strategies</h1>
<h2>Type Selection Example</h2>
<h3 class="accented">Class Selection Example</h3>
<h3>Unstyled Class</h3>
<h4 id="app-header">ID Selection Example</h4>
<div class="parent-box">
<p class="child-box">Direct Child</p>
<div>
<p class="grandchild">Deep Nested</p>
</div>
</div>
<p>Normal Paragraph</p>
<h3>Sibling Trigger</h3>
<p>Adjacent Text</p>
<p id="hover-target">Hover Effect Zone</p>
</body>
</html>
- Display and Dimension Properties
Controlling element visibility and sizing behavior.
<html lang="en">
<head>
<title>Box Display Types</title>
<style>
/* Block level accepts width/height */
.box-block {
background-color: aquamarine;
width: 150px;
height: 50px;
}
/* Inline level ignores explicit dimensions */
.box-inline {
background-color: chocolate;
}
/* Inline-block behaves like block but sits inline */
.box-inline-block {
width: 170px;
height: 250px;
}
.custom-inline { display: inline; background-color: teal; }
.custom-inlin-block { display: inline-block; background-color: violet; width: 300px; }
</style>
</head>
<body>
<h1 style="font: bold 48px 'Serif';">Composite Font Property</h1>
<p style="line-height: 40px;">Long text demonstrating line-height adjustment across multiple lines of content.</p>
<div class="box-block">Block Division</div>
<span class="box-inline">Inline Span</span>
<img src="https://placehold.co/374x541" alt="Media Asset" class="box-inline-block">
<img src="https://placehold.co/374x541" alt="Media Asset" class="box-inline-block">
<!-- Demonstration of display switching -->
<h1>Display Modification</h1>
<div class="custom-inline">Div forced inline</div>
<span class="custom-inlin-block">Span forced inline-block</span>
</body>
</html>
- The Box Model Concept
Understanding margins, borders, and padding spacing.
<html lang="en">
<head>
<title>Spacing Mechanics</title>
<style>
.spacing-demo {
display: inline-block;
background-color: paleturquoise;
border: 3px solid greenyellow;
padding: 50px;
margin: 40px;
}
.border-specific {
background-color: khaki;
width: 300px;
height: 200px;
/* Shorthand: top right bottom left */
border-left: 15px solid saddlebrown;
}
</style>
</head>
<body>
<div class="spacing-demo">Container with Padding/Margin</div>
<div class="border-specific">Specific Border Side Example</div>
</body>
</html>
- Floating Elements
Using float to arrange content horizontally.
<html lang="en">
<head>
<title>Float Layout</title>
<style>
.float-parent {
background-color: mediumaquamarine;
border: 3px solid red;
overflow: hidden; /* Clears floating children */
}
.float-left {
width: 100px;
height: 100px;
background-color: lime;
float: left;
}
.float-right {
width: 100px;
height: 100px;
background-color: yellowgreen;
float: right;
}
</style>
</head>
<body>
<div class="float-parent">
<div class="float-left">Left Aligned</div>
<div class="float-right">Right Aligned</div>
</div>
<p>Subsequent content flows normally below the cleared container.</p>
</body>
</html>
- Positioning Strategies
Managing element placement relative to normal flow.
<html lang="en">
<head>
<title>Position Control</title>
<style>
.container-static { height: 350px; background-color: lightblue; }
.base-box { width: 100px; height: 100px; background-color: darkviolet; }
.rel-pos {
width: 100px; height: 100px; background-color: pink;
position: relative;
left: 100px; top: 30px; /* Offset from original position */
}
.cont-abs { height: 350px; background-color: gold; }
.abs-pos {
height: 100px; width: 100px; background-color: yellowgreen;
position: absolute; /* Removed from document flow */
left: 100px;
}
.fixed-pos {
background-color: sienna;
height: 100px; width: 100px;
position: fixed; /* Fixed to viewport */
right: 0; top: 250px;
}
</style>
</head>
<body>
<h1>Relative Positioning</h1>
<div class="container-static">
<div class="base-box"></div>
<div class="rel-pos"></div>
<div class="base-box"></div>
</div>
<h1>Absolute Positioning</h1>
<div class="cont-abs">
<div class="base-box"></div>
<div class="abs-pos"></div>
<div class="base-box"></div>
</div>
<h1>Fixed Positioning</h1>
<div class="fixed-pos"></div>
</body>
</html>
- Script Tag Implementation
Ways to execute JavaScript within a document.
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Script Loading Patterns</title>
<!-- Internal Script in Head -->
<script>
console.log("Script executed during head parsing");
</script>
<script src="./scripts/app.js"></script>
</head>
<body>
<h1>JavaScript Injection Points</h1>
<!-- Internal Script in Body -->
<script>
console.log("Script executed during body parsing");
alert("Interactive Alert Message");
</script>
</body>
</html>
- JavaScript Fundamentals
Core syntax including variables, control flow, and loops.
<html lang="en">
<head>
<title>JS Core Concepts</title>
</head>
<body>
<script>
// Variable Declaration Best Practices
var legacyVar;
let modernVar = 10;
const MAX_VALUE = 3.14159;
console.log(legacyVar, modernVar, MAX_VALUE);
let userName = "Guest";
console.log(userName);
let emptyVal = null;
console.log(emptyVal);
// undefined: declared but uninitialized
// null: explicitly assigned empty value
let userAge = 20;
if (userAge >= 18) {
console.log("Adult status confirmed");
} else {
console.log("Minor status detected");
}
console.log("Iteration Logic");
// For loop structure: initialization; condition; increment
for (let index = 1; index <= 10; index++) {
console.log(index);
}
console.log("While Loop Logic");
let counter = 1;
while(counter <= 10){
console.log(counter);
counter++;
}
// Loop control statements
for(let i = 1; i < 8; i++){
if (i == 2){ continue; } // Skip current iteration
if (i == 5){ break; } // Terminate loop
console.log(i);
}
</script>
</body>
</html>
- Function Definitions
Creating reusable code blocks and managing scope.
<html lang="en">
<head>
<title>Function Execution</title>
</head>
<body>
<script>
function showMessage() {
console.log("Greeting triggered");
}
showMessage();
function calculateResult() {
return "Operation Complete";
}
let resultStore = calculateResult();
console.log(resultStore);
console.log(calculateResult());
function greetUser(personName) {
console.log("Hello," + personName);
}
greetUser("UserOne");
// Scope context: global vs local variables
</script>
</body>
</html>
- Event Handling
Triggering actions based on user interactions.
<html lang="en">
<head>
<title>Event Listeners</title>
</head>
<body>
<button onclick="activateClick()">Trigger Click Action</button>
<input type="text" onfocus="handleFocus()" onblur="handleBlur()">
<script>
function activateClick(){
alert("Mouse click registered");
}
function handleFocus(){
console.log("Input gained focus");
}
function handleBlur(){
console.log("Input lost focus");
}
</script>
</body>
</html>
- Document Object Model Access
Interacting with the DOM tree structure programmatically.
<html lang="en">
<meta charset="UTF-8"></meta>
<title>DOM Manipulation</title>
<div id="target-id">Unique Identifier Element</div>
<div class="group-class">Shared Class Element</div>
<div>Generic Container</div>
<button>Action Button</button>
<script>
// Access by ID returns single node
let uniqueElement = document.getElementById("target-id");
console.log(uniqueElement);
// Access by Class returns NodeList (array-like)
let sharedElements = document.getElementsByClassName("group-class")[0];
console.log(sharedElements);
// Access by Tag Name
let divNodes = document.getElementsByTagName("div")[2];
console.log(divNodes);
// Modifying Content
uniqueElement.innerHTML = '<a href="#">Navigate Path';
// innerHTML parses as HTML markup
sharedElements.innerText = '<a href="#">Pure Text String';
// innerText treats content as plain text
// Altering Styles directly
divNodes.style.fontSize = "22px";
divNodes.style.color = "crimson";
// Event Attachment via addEventListener
let btnNode = document.getElementsByTagName("button")[0];
btnNode.addEventListener('click', function(){
alert("Event Listener activated");
});
</script>
let cellName = newRow.insertCell(0);
let cellPhone = newRow.insertCell(1);
let cellAction = newRow.insertCell(2);
cellName.innerHTML = "New Subject";
cellPhone.innerHTML = "Pending Contact";
cellAction.innerHTML = "<button onclick='updateEntry(this)'>Edit</button><button onclick='removeEntry(this)'>Remove</button>";
}
// Remove specified row function removeEntry(btnElem){ let currentRow = btnElem.parentNode.parentNode; currentRow.parentNode.removeChild(currentRow); }
// Modify existing row data function updateEntry(btnElem){ let currentRow = btnElem.parentNode.parentNode; let nameCell = currentRow.cells[0]; let phoneCell = currentRow.cells[1];
let newName = prompt("Please enter updated name:");
let newPhone = prompt("Please enter new contact number:");
nameCell.innerHTML = newName;
phoneCell.innerHTML = newPhone;
}
