BASIC EXAMPLE

HTML Headings

HTML Paragraphs

HTML Links

HTML Images

HTML TEXT FORMATTING

Front Page html+css

id card

Simple Calculator

External css example

Tic-Tac-Toe – Classic two-player game

Snake Game – A classic game where the snake eats food and grows.

Dino Game google

find si html+css+js

BASIC EXAMPLE

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

OUTPUT:

This is a Heading

This is a paragraph.

Example Explained:

The <!DOCTYPE html> declaration defines that this document is an HTML5 document
The <html> element is the root element of an HTML page
The <head> element contains meta information about the HTML page
The <title> element specifies a title for the HTML page (which is shown in the browser’s title bar or in the page’s tab)
The <body> element defines the document’s body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc.
The <h1> element defines a large heading
The <p> element defines a paragraph

HTML Headings

HTML Paragraphs

HTML Links

HTML Images

<!DOCTYPE html>
<html>
<body>

<h2>HTML Images</h2>
<p>HTML images are defined with the img tag:</p>

</body>
</html>

OUTPUT:

HTML Images

HTML images are defined with the img tag:

DEVIMAGE

EXAMPLE EXPLAINED:

HTML images are defined with the <img> tag.

The source file (src), alternative text (alt), width, and height are provided as attributes:

HTML TEXT FORMATTING

<!DOCTYPE html>
<html>
<body>

HELLO! I AM <b> bold</b><br>
HELLO! I AM <strong> strong bold</strong><br>
HELLO! I AM <i> italic</i><br>
HELLO! I AM <em>emphasized(italic)</em><br>
HELLO! I AM <u>underline</u><br>
HELLO! I AM <ins>underline(ins)</ins><br>
HELLO! I AM <strike>strikethrough</strike><br>
HELLO! I AM <del>delete text(strikethrough)</del><br>
HELLO! I AM <mark>highlight</mark><br>
HELLO! I AM superscript (a+b)<sup>2</sup>=a<sup>2</sup>+b<sup>2</sup>+2ab<br>
HELLO! I AM subscript C<sub>6</sub>H<sub>12</sub>O<sub>6</sub><br>
HELLO! I AM big<big>little bigger than normal font</big><br>
HELLO! I AM <small>little smaller than normal font</small><br>
HELLO! I AM font<font size=”7″ color=”blue” face=”jokerman”>hello NICE students</font><br>
HELLO! I AM <q> double quotation </q><br><br>
HELLO! I AM pre-formatted text
<pre>
<B>COLUMN-A COLUMN-B</B>
Computer INPUT DEVICE
CPU UTILITY SOFTWARE
RAM HARDWARE
MOUSE PROCESSOR
COMPILER MEMORY
</pre><br>
OR
<pre style=”COLOR:red;”><big><b>
*
***
*****
*******
*****
***
*
</b></big></pre>
HELLO! I AM HORIZONTAL ROW<hr color=”red” width=”500″ align=”center”><br>
HELLO! I AM LINE BREAK(BR)<br>
HELLO! I AM THE WHITE SPACE R    A   M<br>
HELLO! I AM TYPEWRITTER<tt>HELLO NICE STUDENT</tt><br>

</body>
</html>

OUTPUT:

HELLO! I AM bold
HELLO! I AM strong bold
HELLO! I AM italic
HELLO! I AM emphasized(italic)
HELLO! I AM underline
HELLO! I AM underline(ins)
HELLO! I AM strikethrough
HELLO! I AM ~~delete text(strikethrough)~~
HELLO! I AM highlight
HELLO! I AM superscript (a+b)²=a²+b²+2ab
HELLO! I AM subscript C₆H₁₂O₆
HELLO! I AM biglittle bigger than normal font
HELLO! I AM little smaller than normal font
HELLO! I AM fonthello NICE students
HELLO! I AM double quotation

HELLO! I AM pre-formatted text

COLUMN-A					COLUMN-B
Computer					INPUT DEVICE	
CPU	     					UTILITY SOFTWARE
RAM		    				HARDWARE
MOUSE						PROCESSOR
COMPILER					MEMORY


            *
           ***
          *****
         *******
          *****
           ***
            *

HELLO! I AM HORIZONTAL ROW

HELLO! I AM LINE BREAK(BR)
HELLO! I AM THE WHITE SPACE R A M
HELLO! I AM TYPEWRITTERHELLO NICE STUDENT

CLICK ME FOR OUTPUT

Front Page html+css

id card

Simple Calculator

External css example

Tic-Tac-Toe – Classic two-player game

Snake Game – A classic game where the snake eats food and grows.

Create `index.html`

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Snake Game</title>
<link rel=”stylesheet” href=”style.css”>
</head>
<body>

<h1>Snake Game</h1>
<p>Use Arrow Keys to Move</p>
<canvas id=”gameCanvas”></canvas>
<p id=”score”>Score: 0</p>

</body>
</html>

Create `style.css`

body {
text-align: center;
font-family: Arial, sans-serif;
}

canvas {
border: 3px solid black;
background-color: lightgray;
}

Create `script.js`

// Get the canvas and context
const canvas = document.getElementById(“gameCanvas”);
const ctx = canvas.getContext(“2d”);

// Set canvas size
canvas.width = 400;
canvas.height = 400;

// Snake properties
let snake = [{ x: 200, y: 200 }];
let direction = “RIGHT”;
let food = spawnFood();
let score = 0;
let gameSpeed = 100;

// Handle keypress for movement
document.addEventListener(“keydown”, (event) => {
if (event.key === “ArrowUp” && direction !== “DOWN”) direction = “UP”;
else if (event.key === “ArrowDown” && direction !== “UP”) direction = “DOWN”;
else if (event.key === “ArrowLeft” && direction !== “RIGHT”) direction = “LEFT”;
else if (event.key === “ArrowRight” && direction !== “LEFT”) direction = “RIGHT”;
});

// Game loop
function gameLoop() {
moveSnake();
if (checkCollision()) {
alert(“Game Over! Your Score: ” + score);
resetGame();
return;
}

drawGame();
setTimeout(gameLoop, gameSpeed);
}

// Move snake
function moveSnake() {
let head = { …snake[0] };

if (direction === “UP”) head.y -= 20;
if (direction === “DOWN”) head.y += 20;
if (direction === “LEFT”) head.x -= 20;
if (direction === “RIGHT”) head.x += 20;

snake.unshift(head);

// Check if snake eats food
if (head.x === food.x && head.y === food.y) {
score += 10;
document.getElementById(“score”).innerText = “Score: ” + score;
food = spawnFood();
} else {
snake.pop();
}
}

// Check collision (wall or self)
function checkCollision() {
let head = snake[0];

// Wall collision
if (head.x < 0 || head.x >= canvas.width || head.y < 0 || head.y >= canvas.height) {
return true;
}

// Self-collision
for (let i = 1; i < snake.length; i++) {
if (snake[i].x === head.x && snake[i].y === head.y) {
return true;
}
}

return false;
}

// Draw snake, food, and game area
function drawGame() {
ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw food
ctx.fillStyle = “red”;
ctx.fillRect(food.x, food.y, 20, 20);

// Draw snake
ctx.fillStyle = “green”;
snake.forEach(segment => {
ctx.fillRect(segment.x, segment.y, 20, 20);
});
}

// Spawn food at random location
function spawnFood() {
let x = Math.floor(Math.random() * (canvas.width / 20)) * 20;
let y = Math.floor(Math.random() * (canvas.height / 20)) * 20;
return { x, y };
}

// Reset game
function resetGame() {
snake = [{ x: 200, y: 200 }];
direction = “RIGHT”;
score = 0;
document.getElementById(“score”).innerText = “Score: 0”;
food = spawnFood();
gameLoop();
}

// Start the game
gameLoop();

Dino Game google

`index.html`

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Dino Game</title>
<link rel=”stylesheet” href=”style.css”>
</head>
<body>

<h1>Chrome Dino Game</h1>
<p>Press **Spacebar** to jump</p>

<p id=”score”>Score: 0</p>

</body>
</html>

style.css

* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}

body {
text-align: center;
background-color: #f4f4f4;
}

#game {
position: relative;
width: 600px;
height: 200px;
border: 2px solid black;
margin: 50px auto;
background-color: white;
overflow: hidden;
}

#dino {
width: 50px;
position: absolute;
bottom: 0;
left: 50px;
}

#cactus {
width: 30px;
position: absolute;
bottom: 0;
right: -20px;
animation: moveCactus 2s linear infinite;
}

@keyframes moveCactus {
0% { right: -20px; }
100% { right: 600px; }
}

.jump {
animation: jump 0.5s linear;
}

@keyframes jump {
0% { bottom: 0; }
50% { bottom: 80px; }
100% { bottom: 0; }
}

#score {
font-size: 20px;
margin-top: 10px;
}

`script.js`

let dino = document.getElementById(“dino”);
let cactus = document.getElementById(“cactus”);
let score = document.getElementById(“score”);

let counter = 0;

// Jump function
document.addEventListener(“keydown”, function(event) {
if (event.code === “Space”) {
if (!dino.classList.contains(“jump”)) {
dino.classList.add(“jump”);
setTimeout(function() {
dino.classList.remove(“jump”);
}, 500);
}
}
});

// Collision detection
setInterval(function() {
let dinoTop = parseInt(window.getComputedStyle(dino).getPropertyValue(“bottom”));
let cactusLeft = parseInt(window.getComputedStyle(cactus).getPropertyValue(“right”));

// If the dino hits the cactus
if (cactusLeft > 520 && cactusLeft < 570 && dinoTop < 40) {
alert(“Game Over! Score: ” + counter);
counter = 0;
} else {
counter++;
score.innerText = “Score: ” + counter;
}
}, 100);

find si html+css+js

OUTPUT:

This is a Heading

Example Explained:

OUTPUT:

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5

This is heading 6

HTML Links

HTML Images

OUTPUT:

index.html

Style.css

index.html

style.css

script.js

Create `index.html`

Create `style.css`

Create `script.js`

`index.html`

style.css

`script.js`

OUTPUT:

This is a Heading

Example Explained:

OUTPUT:

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5

This is heading 6

HTML Links

HTML Images

OUTPUT:

index.html

Style.css

index.html

style.css

script.js

Create index.html

Create style.css

Create script.js

index.html

style.css

script.js

Create `index.html`

Create `style.css`

Create `script.js`

`index.html`

`script.js`