Scribd
Upload
13 views13 pages

HTML Programs for Web Development

Uploaded by

Ashelle dsouza
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
13 views13 pages

HTML Programs for Web Development

Uploaded by

Ashelle dsouza
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

Part a

1. write an html program to create and display navigation menus using list tags
and anchor tags

<!DOCTYPE html>

<html>

<head>

<title>Simple Navigation Menu</title>

</head>

<body>

<nav>

<ul>

<li><a href="#home">Home</a></li>

<li><a href="#about">About</a></li>

<li><a href="#services">Services</a></li>

<li><a href="#contact">Contact</a></li>

</ul>

</nav>

</body>

</html>
2. write an html program to display multimedia (text, images, audio, video, gifs
etc) on a webpage

<!DOCTYPE html>

<html>

<head>

<title>Multimedia Example</title>

</head>

<body>

<!-- Text -->

<h1>Welcome to the Multimedia Page</h1>

<p>This page shows different types of multimedia content.</p>

<!-- Image -->

<h2>Image Example</h2>

<img src="[Link] alt="Sample Image" width="200">

<!-- GIF -->

<h2>GIF Example</h2>

<img src="[Link] alt="Sample


GIF" width="200">

<!-- Audio -->

<h2>Audio Example</h2>

<audio controls>

<source src="[Link] type="audio/mpeg">

Your browser does not support the audio element.

</audio>
<!-- Video -->

<h2>Video Example</h2>

<video width="320" height="240" controls>

<source src="[Link] type="video/mp4">

Your browser does not support the video tag.

</video>

</body>

</html>
3. write an html program to demonstrate box model in CSS

<!DOCTYPE html>

<html>

<head>

<title>CSS Box Model Example</title>

<style>

.box {

width: 200px;

height: 100px;

background-color: #add8e6;

border: 4px solid #333;

padding: 20px;

margin: 30px;

</style>

</head>

<body>

<h2>CSS Box Model Demonstration</h2>

<div class="box">

This is a box!<br>

It has margin, border, padding, and content.

</div>

</body>

</html>
4. write an html program to create page loading animations

LEARN FROM RECORDS


5. write an html program to create a box and using CSS transform and use the
transition properties move the box to centre

LEARN FROM RECORDS


6. write an html program to create a circle and create an animation of bouncing
the ball

<!DOCTYPE html>

<html>

<head>

<title>Bouncing Ball Animation</title>

<style>

body {

background: #f0f0f0;

.container {

position: relative;

width: 300px;

height: 300px;

margin: 50px auto;

background: #fff;

border: 2px solid #ccc;

overflow: hidden;

.ball {

position: absolute;

left: 130px;

top: 0;

width: 40px;

height: 40px;

background: #3498db;

border-radius: 50%;
animation: bounce 1s infinite alternate;

@keyframes bounce {

0% {

top: 0;

100% {

top: 240px;

</style>

</head>

<body>

<div class="container">

<div class="ball"></div>

</div>

</body>

</html>
Part b

1. write an html program to draw line, polyline and rectangle and fill rectangle
with red colour using svg tag

LEARN FROM RECORDS


2. write an html program to draw star and multiple circle and with different
colour using svg tag

<!DOCTYPE html>

<html>

<head>

<title>SVG Star and Colored Circles</title>

</head>

<body>

<h2>SVG Star and Multiple Colored Circles</h2>

<svg width="350" height="220">

<!-- Draw a star using polygon -->

<polygon points="100,10 40,198 190,78 10,78 160,198"

style="fill:gold;stroke:purple;stroke-width:4;" />

<!-- Draw multiple circles with different colors -->

<circle cx="250" cy="60" r="30" fill="red" />

<circle cx="300" cy="150" r="20" fill="blue" />

<circle cx="200" cy="170" r="25" fill="green" />

</svg>

</body>

</html>
3. write an html program to create a logo with linear gradient properties using
svg tag

LEARN FROM THE RECORDS


4. write an html program to draw square and rectangle using canvas tag and
java script

<!DOCTYPE html>

<html>

<head>

<title>Draw Square and Rectangle with Canvas</title>

</head>

<body>

<h2>Canvas: Square and Rectangle</h2>

<canvas id="myCanvas" width="300" height="200" style="border:1px solid


#000000;"></canvas>

<script>

// Get the canvas element and its drawing context

const canvas = [Link]('myCanvas');

const ctx = [Link]('2d');

// Draw a blue square (x, y, width, height)

[Link] = 'blue';

[Link](30, 30, 60, 60); // 60x60 square

// Draw a green rectangle (x, y, width, height)

[Link] = 'green';

[Link](120, 30, 120, 60); // 120x60 rectangle

</script>

</body>

</html>
5. write an html program to draw Bezier curve using canvas tag and java script

<!DOCTYPE html>
<html>
<head>
<title>Draw Bezier Curve with Canvas</title>
</head>
<body>
<h2>Bezier Curve Example</h2>
<canvas id="myCanvas" width="300" height="200" style="border:1px solid
#000000;"></canvas>
<script>
const canvas = [Link]('myCanvas');
const ctx = [Link]('2d');

[Link]();

[Link](30, 150);

[Link](80, 10, 220, 10, 270, 150);

[Link]();
</script>
</body>
</html>

Common questions

Powered by AI

Linear gradients in SVG graphics can be created using the <linearGradient> element within the <defs> section. This element defines gradient transitions, specifying colors, gradient direction, and their spread across a shape using attributes like 'x1', 'y1', 'x2', 'y2'. Once defined, this gradient can be applied to graphics like rectangles or circles via the 'fill' attribute, enabling a smooth blend of multiple colors to enhance visual depth and interest in SVG illustrations .

SVGs (Scalable Vector Graphics) allow for the creation of complex, resolution-independent graphics using the <svg> tag in HTML. To create elements like stars and multi-colored circles, one can use different SVG shape tags such as <polygon> for stars and <circle> for circles. Each shape can be styled with fill colors, stroke properties, and dimensions to achieve the desired appearance, as demonstrated by using points for defining star vertices and radii for circles .

CSS animations can produce dynamic effects through the combination of the 'animation' property and keyframes. By defining keyframes with specific styles at different percentages of the animation's duration, CSS can smoothly transition elements between these styles. For example, a bouncing ball effect uses keyframes to oscillate the ball's 'top' position from 0 to 240 pixels, creating the visual illusion of movement. The 'animation' property ties these keyframes to the element and defines the speed, iteration count, and timing function of the animation .

The CSS box model is a foundational concept that dictates how HTML elements are rendered and how space is allocated around them. It consists of content, padding, border, and margin. Content is the innermost part where text and images appear. Padding is the space between content and the border. The border surrounds the padding of an element, while margin is the outermost space that separates elements from each other. Applying it involves using CSS properties to define these layers, such as 'padding', 'margin', 'border', and 'width', enabling detailed styling of elements' appearance and spacing .

HTML and CSS can be used to create a simple navigation menu by utilizing the <ul> and <li> tags for list structure, and the <a> tag for hyperlinks. CSS can further enhance this by styling the list with properties like 'display' to turn the list into a horizontal menu, adjusting margins, or adding stylized effects. For instance, a basic example includes wrapping a list of links within a <nav> element to semantically convey navigation function .

Using the <canvas> tag with JavaScript enables interactive rendering of complex shapes like Bezier curves by leveraging canvas's '2d' context methods. JavaScript functions, such as 'moveTo' and 'bezierCurveTo', define points and control points that shape the curvature. This interactive control allows developers to create precise curve paths dynamically, adjusting parameters like length and curve depth in real-time, which are impossible with static HTML alone .

The <canvas> tag serves as a drawable region in HTML, which can be dynamically manipulated using JavaScript. JavaScript employs the canvas API, specifically its '2d' rendering context, to perform graphics operations like drawing squares, rectangles, and Bezier curves. For example, with 'fillRect' and 'bezierCurveTo' methods, developers can draw and control the positioning, size, and properties of shapes on the canvas, allowing for complex illustrations and animations to be created programmatically .

To incorporate multimedia content into an HTML webpage, you need various HTML tags specifically designed for each type of media: <img> for images, <audio> for audio, and <video> for videos. Each of these tags may include attributes to specify their sources ('src'), alternative text for accessibility (alt), and controls for user interface adjustment. The <source> sub-tag can be utilized within the <audio> and <video> tags to provide multiple file types, enhancing compatibility across different browsers .

HTML provides the structure for elements to be transformed and animated, while CSS governs their transitions and transformations. Using CSS, elements can be moved, scaled, or rotated with the 'transform' property. CSS 'transition' properties then define the duration, timing, and other aspects of how these transformations occur over time. For instance, by applying translation transformations with a specified 'transition' time, you can smoothly animate a box moving across the screen when triggered by a user action like hovering or clicking .

SVG in HTML allows for creating highly detailed and scalable graphics due to its resolution-independent nature. Unlike raster images, SVG graphics are described in XML-based vector formats, enabling them to scale without losing detail or quality. SVGs can depict intricate designs, such as complex polygons or Bezials, using shape elements like <circle>, <ellipse>, <line>, and <polygon>, while CSS styling and transforms further enhance their design capabilities and integration into web layouts .

You might also like