Web Design Programming Individual Assignment

Kombolcha Institute of Technology
College of Informatics
Department of Software
Engineering
Web Design Programming Individual
Assignment
Name ID Number
Solomon Mengesha.............................................................2303/13
1. Describe the purpose and usage of the HTML <canvas> element. Provide an example of how
to draw a rectangle on the canvas using JavaScript.
The HTML <canvas> element is used to draw graphics on a web page.
HTML <canvas> element is used to draw graphics, on the fly, via JavaScript.
The <canvas> element is only a container for graphics. You must use JavaScript to actually draw
the graphics.
Canvas has several methods for drawing paths, boxes, circles, text, and adding images.The purpose
of the <canvas> element is to allow developers to draw and manipulate graphics programmatically
using JavaScript
draw a rectangle
First let's look at the rectangle. There are three functions that draw rectangles on the canvas:
fillRect(x, y, width, height)
Draws a filled rectangle.
strokeRect(x, y, width, height)
Draws a rectangular outline.
clearRect(x, y, width, height)
Clears the specified rectangular area, making it fully transparent.
Each of these three functions takes the same parameters. x and y specify the position on the canvas
(relative to the origin) of the top-left corner of the rectangle. width and height provide the
rectangle's size.
here's an example of how to draw a rectangle on the <canvas> using JavaScript:
<html >
<body>
<canvas id="canvas" width="150" height="150"></canvas>
<script>
function draw() {
const canvas = document.getElementById("canvas");
if (canvas.getContext) {
const ctx = canvas.getContext("2d");
ctx.fillRect(25, 25, 100, 100);
ctx.clearRect(45, 45, 60, 60);
ctx.strokeRect(50, 50, 50, 50);
} }
draw();
</script>
</body>
</html>
2. Explain the concept of semantic HTML and provide examples of semantic elements and their
usage.
A semantic element clearly describes its meaning to both the browser and the developer.
List of new semantic elements
The semantic elements added in HTML5 are:
• <article>
• <aside>
• <details>
• <figcaption>
• <figure>
• <footer>
• <header>
• <main>
• <mark>
• <nav>
• <section>
• <summary>
• <time>
➢ Elements such as <header>, <nav>, <section>, <article>, <aside>, and <footer> act more
or less like <div> elements. They group other elements together into page sections. Howeve
where a <div> tag could contain any type of information, it is easy to identify what sort of
information would go in a semantic <header> region.
<section> and <article>

The <section> and <article> elements are conceptually similar and interchangeable. To decide which
of these you should choose, take note of the following:
i. An article is intended to be independently distributable or reusable.

ii. A section is a thematic grouping of content.
<section>
<p>Top Stories</p>
<section>
<p>News</p>
<article>Story 1</article>
</section>
<section>
<p>Sport</p>
</section>
</section>
<header>
The <header> element is generally found at the top of a document, a section, or an article and
usually contains the main heading and some navigation and search tools.
<header>
<h1>Company A</h1>
<ul>
<li><a href="/home">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact us</a></li>
</ul>
<form target="/search">
<input name="q" type="search" />
<input type="submit" />
</form>
</header>
HTML <nav> Element
The <nav> element defines a set of navigation links.
<aside>
The <aside> element is intended for content that is not part of the flow of the text in which it
appears, however still related in some way. This of <aside> as a sidebar to your main content.
<aside>
<p>This is a sidebar, for example a terminology definition or a short background to a historical figure.
</p>
</aside>
<footer>
If there is a <header> there must be a <footer>. A <footer> is generally found at the bottom of a
document, a section, or an article. Just like the <header> the content is generally metainformation,
such as author details, legal information, and/or links to related information. It is also valid to
include <section> elements within a footer.
<footer>
<p>Author </p>
<p><a href="mailto:ZM@gmail.com"> ZM@gmail.com </a></p>
</footer>
<time>
The <time> element allows an unambiguous ISO 8601 date to be attached to a human-readable
version of that date.
<time datetime="2017-10-31T11:21:00+02:00">Tuesday, 31 October 2017</time>
3. Describe the different types of form input elements in HTML5 and provide
examples of when each one should be used.
Input Type attributes:
1. Color: This input type allows the user to select a color from a color picker.
<label for="color">Select Color : </label>
<input type="color" />
2. date : This input type allows the user to select a date from a drop-down calendar.
<label for="date">Select Date : </label>
<input type="date" />
3. Time: This input type allows the user to enter a time.
<label for="time">Select Time :</label>

<input type="time" />
4. datetime: This input type allows the user to select date and time along with time zone
<label for="date">Enter Date-Time : </label>

<input type="datetime" />
5.
6. datetime-local: This input type allows the user to select both local date and time.
<label for="date">Select Date-Time Local : </label>

<input type="datetime-local" />
7. week: This input type allows the user to select week and year from the drop-down
calendar.
<label for="time">Select Week : </label>

<input type="week" />
8. email: This input type allows the user to enter an e-mail address.
<label for="mail">Enter Email : </label>

<input type="email" />
9. month: This input type allows the user to select a month and year from a drop-down
calendar.
<label for="date">Select Month : </label>

<input type="month" />
10. number: This input type allows the user to enter a numerical value.
<label for="number">Select Number : </label>

<input type="number" />
11. range: This input type allows the user to enter a numerical value within a specified
range.
<label for="number">Select Number in Range : </label>

<input type="range" min="1" max="10" step="1" />
12. search: This input type allows the user to enter a search string within the input field.
<label for="search">Enter Search string : </label>
<input type="search" placeholder="search ..." />
13. tel: This input type allows the user to enter a telephone number.
<label for="number">Enter Telephone No. : </label>

<input type="tel" placeholder="+251............" />
14. url: This input type allows the user to enter the URL.
<label for="url">Enter Url : </label>

<input type="url" placeholder="https://www..." />
4. What are data attributes in HTML and how can they be utilized?
Custom Data Attributes allow you to add your own information to tags in HTML. Even though
the name suggests otherwise, these are not specific to HTML5 and you can use the data-*
attribute on all HTML elements.
The data-* attributes can be used to define our own custom data attributes. It is used to store
custom data in private to the page or application.
There are mainly 2 parts of the Data Attributes:
Attribute Name: Must be at least one character long, contain no capital letters and be prefixed
with ‘data-‘.
Attribute Value: Can be any string
Utilization:
I. JavaScript Access and Manipulation:
• Retrieve values using:
o element.dataset.attributeName (camelCase conversion)
o element.getAttribute("data-attributeName")
• Example: const userId = myDiv.dataset.userId;
• Modify values: myDiv.dataset.role = "editor";
II. CSS Selectors and Styling:
• Target elements based on data attribute values:
o [data-role="admin"]
o [data-user-id^="123"] (starts with)
o [data-user-id$="3"] (ends with)
o [data-user-id*="2"] (contains)
• Apply styles or conditional logic
.
5. Explain the concept of accessibility in web development and discuss some
HTML techniques to improve accessibility.
Web accessibility means that websites, tools, and technologies are designed and developed so
that people with disabilities can use them. More specifically, people can:
• perceive, understand, navigate, and interact with the Web
• contribute to the Web
Web accessibility encompasses all disabilities that affect access to the Web, including:
• auditory
• cognitive
• neurological
• physical
• speech
• visual
Web accessibility also benefits people without disabilities, for example:
• people using mobile phones, smart watches, smart TVs, and other devices with small
screens, different input modes, etc.
• older people with changing abilities due to ageing
• people with “temporary disabilities” such as a broken arm or lost glasses
• people with “situational limitations” such as in bright sunlight or in an environment
where they cannot listen to audio
• people using a slow Internet connection, or who have limited or expensive bandwidth
HTML Techniques for Improving Accessibility:
• Semantic HTML: Using the right HTML elements for their intended purpose,
like <table> for data tables and <h1> for main headings, helps screen readers understand
the structure of the content.
• Alternative text (alt text): Provide concise and descriptive alt text for images to describe
their content for screen reader users.
• Headings: Use clear and logical heading hierarchy (<h1>, <h2>, etc.) to structure your
content and help users navigate with screen readers.
• Keyboard navigation: Ensure all interactive elements can be accessed and activated using
the keyboard, not just the mouse.
• Color contrast: Use proper color contrast between text and background for readability by
users with low vision.
• Forms: Label form fields clearly and associate them with appropriate input types for
proper interaction by screen readers.
• Live region updates: Use ARIA live regions to announce dynamic content changes to
screen readers for improved user experience
6. Describe the CSS specificity hierarchy and how it determines the order in
which styles are applied to elements.
Every CSS selector has its place in the specificity hierarchy.
There are four categories which define the specificity level of a selector:
• Inline styles – Styles applied directly to an element using the style attribute within the
HTML tag.
Example: <h1 style="color: pink;">
• IDs –Styles applied directly to an element using the style attribute within the HTML tag.
Example: #navbar
• Classes, pseudo-classes, attribute selectors –Targeting elements with a class (.class
Name), attribute ([attribute]), or pseudo-class (:pseudo Class).
Example: .test, :hover, [href]
• Elements and pseudo-elements –Targeting elements by their tag name (tagName) or
pseudo-element (::pseudoElement).
Example: h1, ::before
how to calculate CSS specificity:
Assign weights to each selector type:
A. Inline styles: 1000
B. ID selectors: 100
C. Class selectors, attribute selectors, and pseudo-classes: 10
D. Element selectors and pseudo-elements: 1
Inline style gets a specificity value of 1000, and is always given the highest priority
7. Explain the CSS box-sizing property and its values. How can it be used to change
the box model behavior?
The box-sizing CSS property sets how the total width and height of an element is calculated.
The box-sizing property can be used to adjust this behavior:
content-box gives you the default CSS box-sizing behavior. If you set an element's width to 100
pixels, then the element's content box will be 100 pixels wide, and the width of any border or
padding will be added to the final rendered width, making the element wider than 100px.
border-box tells the browser to account for any border and padding in the values you specify for
an element's width and height. If you set an element's width to 100 pixels, that 100 pixels will
include any border or padding you added, and the content box will shrink to absorb that extra
width. This typically makes it much easier to size elements. box-sizing: border-box is the default
styling that browsers use for the <table> , <select>, and <button> elements, and
for <input> elements whose type radio checkbox reset button submit color search ra,
Values:
content-box
This is the initial and default value as specified by the CSS standard.
The width and height properties include the content, but does not include the padding, border, or
margin. For example, box {width: 350px; border: 10px solid black;} renders a box that is 370px
wide.
Here, the dimensions of the element are calculated as: width = width of the content, and height =
height of the content. (Borders and padding are not included in the calculation.)
border-box
The width and height properties include the content, padding, and border, but do not include the
margin. Note that padding and border will be inside of the box. For example, box {width: 350px;
border: 10px solid black;} renders a box that is 350px wide, with the area for content being
330px wide. The content box can't be negative and is floored to 0, making it impossible to
use border-box to make the element disappear.
Understanding CSS Box-Sizing:

In CSS, the box model defines how elements are laid out, including their content, padding,
border, and margin.
The box-sizing property allows you to control how these dimensions are calculated, affecting the
element's overall size and layout.
Values of Box-Sizing:
I. content-box (default):
• Padding and border are added to the width and height of the content area.
• Total element width = content width + padding + border + margin.
II. border-box:
• Padding and border are included within the specified width and height.
• Total element width = width (content + padding + border) + margin.
Changing Box Model Behavior:
• Setting box-sizing: border-box can make layout calculations more predictable and
consistent, especially when working with nested elements and responsive designs.
• It prevents unexpected size changes when adding padding or border, making it easier to
control layout.
Example:
CSS
.element {
width: 200px;
padding: 20px;
border: 5px solid black;
/* content-box: total width = 245px */

/* border-box: total width = 200px */
}
8. Discuss the CSS flexbox layout and provide an example of how it can be used to
create a responsive grid layout.
The Flexbox Layout (Flexible Box) module aims at providing a more efficient way to lay out,
align and distribute space among items in a container, even when their size is unknown and/or
dynamic (thus the word “flex”).
The main idea behind the flex layout is to give the container the ability to alter its items’
width/height (and order) to best fill the available space (mostly to accommodate to all kind of
display devices and screen sizes). A flex container expands items to fill available free space or
shrinks them to prevent overflow.
Creating a Responsive Grid Layout with Flexbox:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.flex-container {
display: flex; /* Establish flex container */
flex-wrap: wrap; /* Allow items to wrap onto multiple lines */
}
.item {
flex: 1 1 200px; /* Flexible width with minimum width of 200px */
margin: 10px;
}
@media (max-width: 600px) {

.item {
flex-basis: 50%; /* Adjust width for smaller screens */
}
}
</style>
</head>
<body>
<div class="flex-container">
<div class="item">Item 1</div>
</div>
</body>
</html>
9. What are CSS animations and transitions? Provide examples and explain the
differences between them
CSS transitions allow you to change property values smoothly, but they always need to
be triggered like hover. Property changes do not take effect immediately. Over a period of time,
the property changes take place. For example, if you change the color of an element from
white to black, the change occurs instantly. The CSS changes occur at time intervals following
an acceleration curve which can be customized.
Animations transitioning between two states are called implicit transitions as the states
between the start and final states are defined by the browser implicitly.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
div:hover {
width: 300px;
}
</style>
</head>
<body>
<h1>The transition Property</h1>
<p>Hover over the div element below, to see the transition effect:</p>
<div></div>
</body>
</html>
CSS animation allows animation of HTML elements, unlike transition which only performs a
point A to point B operation but can also make many more operations in between. Animations
consist of two steps, the CSS animation defined in stylesheets and a set of keyframes indicating
the start and end states of the animation.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation: myfirst 5s linear 2s infinite alternate;
}
@keyframes myfirst {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<h1>CSS Animation</h1>
<p>This example uses the shorthand animation property:</p>
<div></div>
</body>
</html>
10. Explain the concept of CSS preprocessors and discuss the benefits they provide
in web development.
A CSS preprocessor is a scripting language that extends the capabilities of CSS. It allows
developers to write CSS in a more efficient and organized manner, using features like variables,
nesting, and mixins.
The preprocessor is then compiled into regular CSS, which is used to style the website. This is
important since browsers are only capable of reading and understanding regular CSS code.
There are several CSS preprocessors available, like Sass, Less, Stylus, and PostCSS. Sass is one
of the most popular and widely used preprocessors,
Some benefits of using CSS preprocessors include:
Improved organization: CSS preprocessors allow you to use variables, mixins, and functions to
better organize and structure your code.
Code reusability: With mixins, you can define chunks of CSS code that can be reused
throughout your stylesheets, saving you time and effort.
Better vendor prefix management: Many CSS preprocessors include a feature that
automatically adds vendor prefixes to your code, saving you the time and effort of doing it
manually.
Better performance: Some CSS preprocessors have built-in optimization tools that can help
reduce the file size of your stylesheets and improve their performance.
Easier maintenance: By making it easier to organize and maintain your code, CSS
preprocessors can save you time and effort when it comes to updating and modifying your
stylesheets.
Improved syntax: CSS preprocessors allow you to use a more powerful and expressive syntax
than regular CSS. For example, you can use loops and conditionals to create more complex
styles, and you can use variables to avoid repeating yourself.
Nesting: CSS preprocessors allow you to nest your styles, which can make your code more
readable and easier to understand.
Inheritance: Some CSS preprocessors (such as Sass) allow you to use inheritance, which allows
you to define styles that can be inherited by other styles. This can save you time and effort when
styling elements that share common properties.
Integration with build tools: CSS preprocessors can be easily integrated into build tools (such
as Grunt and Gulp), allowing you to automate tasks such as minification, optimization, and error
checking.
Community support: CSS preprocessors are widely used in the web development community,
so there is a wealth of documentation, tutorials, and resources available to help you learn and use
them effectively.

Web Design Programming Individual Assignment

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Design Programming Individual Assignment

Uploaded by

Copyright:

Available Formats

Kombolcha Institute of Technology

here's an example of how to draw a rectangle on the <canvas> using JavaScript:

List of new semantic elements

The semantic elements added in HTML5 are:

<section> and <article>

i. An article is intended to be independently distributable or reusable.

<time datetime="2017-10-31T11:21:00+02:00">Tuesday, 31 October 2017</time>

3. Time: This input type allows the user to enter a time.

<label for="time">Select Time :</label>

<label for="date">Enter Date-Time : </label>

<label for="date">Select Date-Time Local : </label>

<label for="time">Select Week : </label>

<label for="mail">Enter Email : </label>

<label for="date">Select Month : </label>

<label for="number">Select Number : </label>

<label for="number">Select Number in Range : </label>

<label for="search">Enter Search string : </label>

<input type="search" placeholder="search ..." />

<label for="number">Enter Telephone No. : </label>

<label for="url">Enter Url : </label>

Understanding CSS Box-Sizing:

/* content-box: total width = 245px */

Creating a Responsive Grid Layout with Flexbox:

@media (max-width: 600px) {

<h1>The transition Property</h1>

Some benefits of using CSS preprocessors include:

You might also like