S S Technology Workshop ESTD 2021

Report On

“Workshop on HTML & CSS”

Submitted By

Tohid Nawaj Sayyad 2115600178

Under the Guidance

Prof. Soyab Shaikh

DEPARTMENT OF COMPUTER ENGINEERING

Ashok Gramin Shikshan Santha’s Ashok Institute of Engineering &
Technology (Polytechnic), Ashoknagar
 ACKNOWLEDGEMENT

It has been a privilege for me to be associated with Prof Soyab Shaikh, my

guide during this dissertation work. I have greatly benefited from their
valuable suggestions and ideas. It is with great pleasure that I express my
deep gratitude to her for their guidance, constant encouragement, kindness,
moral support, and patience throughout this work.
Prof. V.D.Ghogare Head of the Department of Computer Engineering, has
been indeed a great source of inspiration for all of us on campus, so it gives
me immense pleasure in expressing my indebtedness to him for his
kindness and moral support. At the outset, I express my sincere gratitude to
Prof. A. P. Shinde., Principal, for allowing me to pursue my studies for
thankful to all the Applied Science Engineering Department staff from Ashok
Polytechnic, Ashoknagar for giving me valuable support. Finally, I would like
to express my deep, incomparable appreciation and gratitude to my family
members for their constant spiritual support and encouragement to pursue
higher technical education.

Stamp & Signature Stamp & Signature

(S S Technology) (V.D.Ghogare)
Explanation of All Lectures :
Table
1. Table Tag: The table sections are commented out. There are two tables provided, but
they are currently disabled using HTML comments. These tables display tabular data,
one showing student information and the other showing subject marks.
2. Iframe: The iframe section is commented out. It includes an iframe element that
embeds an external HTML document (session_4.html) with specified dimensions.
3. Text Content: There are several `<p>` tags with Lorem Ipsum text. This is placeholder
text used during web development. You can replace this text with your desired content.
4. Audio Tag: The audio section is commented out. It includes an audio element with a
source file (song.mp3) for embedding audio content.
5. Video Tag: The video section includes a video element with a source file (nature.mp4)
for embedding video content. The controls attribute enables the video player controls,
and the loop attribute makes the video replay continuously.
Overall, the code contains various elements that can be used to embed tables, iframes,
text content, audio, and video in an HTML document. The commented-out sections can
be uncommented to enable them. Remember to provide valid source file paths for audio
and video elements.

FORM
1. The `<form>` element defines a form for collecting user input.
2. Inside the form, there is a `<fieldset>` element that groups related form elements
together.
3. The `<legend>` element provides a caption for the fieldset.
4. Various form controls are used to collect user information:
- `<input type="text">` for capturing the name.
- `<input type="password">` for capturing the password.
- `<input type="radio">` for selecting the gender (male or female).
- `<input type="checkbox">` for selecting hobbies (e.g., cricket, football, baseball).
- `<textarea>` for entering a message.
 - `<select>` for choosing a country and cars. The options are defined using `<option>`
elements.
- `<input type="file">` for uploading a file.
5. The `<input type="submit">` button triggers form submission, and the `<input
type="reset">` button resets the form.
The form allows users to enter personal details such as name, password, gender,
hobbies, message, country, and car selection. The form can be submitted using the "Save"
button, and the fields can be reset using the "Reset" button.

Heading and paragraph

1. The `<style>` tag is used to define CSS styles within the HTML document.
2. CSS comments (/* */) are provided to show alternative ways of applying styles but are
currently commented out.
3. The `h1` element is initially commented out, but if enabled, it would set the text color
to green.
4. The `.heading` class is also commented out. If applied to the `h1` element, it would set
the text color to green.
5. The `#heading` id selector targets the `h1` element with the `id="heading"`. It sets the
text color to blue and the background color to yellow.
6. The `span` selector targets the `span` element within the first paragraph. It sets the
text color to red.
7. The `.p1` class selector targets the first `p` element. It sets the background color to
green.
8. The `.p2` class selector targets the second `p` element. It sets the background color to
pink.
9. The HTML body contains an `h1` element with the text "Hello World." It is currently
styled using the `#heading` id selector.
10. There are two `p` elements. The first one has the `class="p1"` and contains a `span`
element. The second `p` element has the `class="p2"`.
11. The `span` element within the first paragraph is styled using the `span` selector.
The code demonstrates different ways of applying styles to HTML elements, including by
element name, class, and ID. It showcases how CSS selectors can be used to target
specific elements and apply various styling properties.

Heading and paragraph with help Div tag

1. The `<style>` tag is used to define CSS styles within the HTML document.
2. CSS comments (/* */) are provided to show alternative ways of applying styles but are
currently commented out.
3. The first section of the commented-out code demonstrates different border styles for
the `h1` element.
4. The second section of the commented-out code demonstrates different padding styles
for a hypothetical `.prag` class.
5. The third section of t commented-out code demonstrates the use of margins and
padding for `.first` and `.second` classes.
6. The final section of uncommented code applies the `.first` class to a `div` element.
- It sets a border with a width of 2 pixels, a solid black color, and the width and height of
the `div` are set to 400 pixels each.
- The content of the `div` is the lorem ipsum text.
The code showcases different ways to style HTML elements using CSS. In this case, it
demonstrates applying borders, setting element width and height, and utilizing classes to
style elements.

Shapes

1. The `<style>` tag is used to define CSS styles within the HTML document.
2. CSS comments (/* */) are provided to show alternative ways of applying styles but are
currently commented out.
3. The first section of commented-out code demonstrates setting a border, width, and
padding for the `.box` class, with the `box-sizing` property set to `border-box`.
4. The second section of commented-out code demonstrates setting a border, width, and
height for the `.box` class, with the `overflow` property controlling scrolling behavior.
5. The third section of uncommented code applies the `.box` class to a `div` element.
- It sets a border with a width of 2 pixels and a solid black color.
- The width of the `div` is set to 400 pixels, and the padding inside the `div` is set to 40
pixels.
- The margin-bottom property adds a 20-pixel space below the `div`.
- The `border-radius` property sets different radii for each corner of the border, giving it
a rounded appearance.
6. The fourth section of uncommented code applies the `.box2` class to another `div`
element.
- It sets a border with a width of 2 pixels and a solid black color.
- The width and height of the `div` are set to 200 pixels each.
- The `border-radius` property sets the border to have a circular shape by setting the
radius to 50%.
The code showcases different ways to style HTML elements using CSS. In this case, it
demonstrates applying borders, widths, heights, padding, margins, and border radii to
elements.

Transition
1. The `<style>` tag is used to define CSS styles within the HTML document.
2. The commented-out code demonstrates setting a border, width, height, background
color, and opacity for the `.box` class.
3. The uncommented code applies the `.box` class to a `div` element.
- It sets a border with a width of 1 pixel and a solid black color.
- The width of the `div` is initially set to 250 pixels, and the height is set to 200 pixels.
- The background color of the `div` is pink.
- The `transition-property` property specifies the properties to transition.
- The `transition-duration` property sets the duration of the transition effect to 2
seconds.
- The `transition-timing-function` property sets the timing function for the transition. In
this case, `steps(5)` specifies that the transition will occur in 5 steps.
 - The `transition-delay` property sets a delay of 5 seconds before the transition effect
starts.
4. The `.box:hover` selector applies styles to the `.box` element when it is being hovered
over.
- The width of the `div` is changed to 450 pixels.
- The height of the `div` is changed to 400 pixels.
- The background color of the `div` is changed to orange.
5. The commented-out code demonstrates additional transformations that can be
applied to the `.box` class, including rotation, scaling, translation, and positioning.
6. The HTML includes an `<h1>` element with the text "Transition" and a `div` element
with the class "box" that will showcase the transition effect.

The code showcases the use of CSS transitions to create smooth animations when certain
properties of an element change. In this case, the width, height, and background color of
the `.box` element are transitioned. When the mouse hovers over the element, the width
and height increase, and the background color changes.

Rotation of boxes using hover

1. The HTML document includes multiple sections, each demonstrating a different 3D
transformation effect.
2. Each section consists of a base container element (e.g., `.base`, `.base2`, `.base3`, etc.)
and an inner box element (e.g., `.box`, `.box2`, `.box3`, etc.).
3. The base container elements define the layout and positioning of the boxes using
properties like `width`, `height`, `background-color`, `font-size`, `text-align`, `margin`, and
`float`.
4. The box elements define the initial appearance and transformation properties of the
boxes using the `transform` property and transition-related properties.
- The `transform` property specifies the 3D transformation applied to the element.
- The `perspective` function creates a 3D perspective for the transformation, giving the
impression of depth.
 - The `rotateX`, `rotateY`, `rotateZ`, `translateZ`, and `scaleZ` functions are used to apply
specific transformation effects along the X, Y, Z axes.
- The `transition-duration` property sets the duration of the transition effect to 2
seconds.

5. The `:hover` pseudo-class selector is used to apply additional styles to the box
elements when they are being hovered over. The `transform` property is modified to
create different transformation effects on hover.
6. The HTML includes multiple sets of base container and box elements to showcase
different transformation effects: RotateX, RotateY, RotateZ, TranslateZ, and ScaleZ.

The code demonstrates how to use CSS transform properties to create various 3D
transformation effects on HTML elements. Each section showcases a different
transformation effect by modifying the `transform` property of the box elements.

Explains the heart animation using CSS.

Explanation:
1. The HTML document includes a structure to create the heart animation using CSS.
2. The document has a `<div>` element with a class of `center` that acts as a container for
the heart element.
3. The heart element is created using a `<div>` with a class of `Heart`.
4. The CSS styles are defined within the `<style>` tags.
- The `body` styles set the margin, padding, and background color of the body element.
- The `.center` styles position the container in the center of the page using absolute
positioning and transform.
- The `.center::before` styles create an overlay for the container with a semi-transparent
background.
- The `.Heart` styles define the appearance of the heart-shaped element.
- The `width` and `height` set the dimensions of the heart.
 - The `background` sets the background color of the heart.
- The `transform` property rotates the heart by 45 degrees and translates it by 10
pixels in both X and Y directions.

- The `animation` property specifies the animation applied to the heart, using the
`HeartBit` animation with a duration of 2 seconds and linear timing.
- The `.Heart::before` styles create the top half of the heart shape using absolute
positioning and a circular shape with a background color matching the heart's color.
- The `.Heart::after` styles create the bottom half of the heart shape using absolute
positioning and a circular shape with a background color matching the heart's color.
- The `@keyframes HeartBit` defines the keyframes for the heart animation.
- Each keyframe represents a different state of the animation at a specific percentage
of the animation duration.
- The `transform` property is used to rotate and translate the heart at different scales
during the animation.

The code produces an animated heart element that pulsates with a scaling effect. The
heart is centered on the page and has a red color. It appears to beat due to the animation
defined in the `@keyframes HeartBit` section.
heart animation :
Loading animation :

Bar Loading animation :

Neon light animation :
Assignment on Animation :