HTML BASICS (CONTINUATION

OF GROUP 4)
GROUP 5 Leader: Sam Danielle T. Villacora
HTML Basics: Adding
TEXT Animations in
WEB PAGE
HOW DO YOU DO IT?
HTML Basics: Adding TEXT Animations in
WEB PAGE

What is this? (THIS IS THE CODE OR RATHER

FORMULA FOR ADDING TEXT Animations)
To add text animations to a webpage
using HTML, you typically use a
combination of HTML, CSS, and
sometimes JavaScript. There are several
ways to achieve text animations
depending on the desired effect. Here's a
basic example of how you can create a
simple text animation using CSS:
In this example:
1. We define a keyframe animation
named slide in using @keyframes.
This animation moves the text
from the top (-100%) to its
original position (0) vertically.

2. We apply the slide in animation

to the text by using
the .animated-text class and
specify the animation duration
You can adjust the animation properties and
timing to achieve different effects. Additionally,
there are many other types of animations you
can apply to text, such as fading, scaling,
rotating, etc. CSS animations provide a lot of
flexibility and creativity in achieving various
text animation effects.

Remember, for more complex animations, you

may need to incorporate JavaScript to control
the animation's behavior dynamically. Libraries
like Animate.css or using JavaScript animation
libraries like GreenSock (GSAP) can also provide
 HTML Basics:
Inserting Pictures
in WEB PAGE
HOW DO YOU DO IT?
In this example:
• <img> is the HTML tag used to embed
images.
• src attribute specifies the URL or path to the
image file.
• alt attribute provides alternative text for the
image, which is displayed if the image
cannot be loaded or for accessibility
purposes.
Replace "image.jpg" with the path or
URL of your actual image file. You can
use relative paths if the image is in the
• Additionally, you can adjust the size of the
image by specifying the width and height
attributes within the <img> tag:
• This will set the width of the image to 200
pixels and the height to 150 pixels. However,
it's generally recommended to use CSS for
more precise control over the appearance of
images, especially in responsive designs.
• Additionally, you can adjust
the size of the image by
specifying the width and
height attributes within the
<img> tag:
• This will set the width of
• Here, the style attribute is used
the image to 200 pixels and
to apply inline CSS to the image
the height to 150 pixels. element, setting its width to 200
However, it's generally pixels and height to 150 pixels.
recommended to use CSS
for more precise control • Remember to replace
over the appearance of "image.jpg" with the actual path
images, especially in or URL of your image file, and
adjust the alt, width, and height
responsive designs.
• Here, the style attribute is used to apply
inline CSS to the image element, setting its
width to 200 pixels and height to 150 pixels.

• Remember to replace "image.jpg" with the

actual path or URL of your image file, and
adjust the alt, width, and height attributes
HTML BASICS:
CREATE
HYPERLINKS
HOW DO YOU DO IT?
To create a hyperlink in HTML,
you use the <a> (anchor) tag.
The <a> tag allows you to
create clickable links that direct
users to another webpage, a
specific section within the same
page, or even to an email
address. Here's the basic
syntax:
Where:
href: Specifies the URL (Uniform Resource
Locator) of the page or resource to which
the link points. This is the most important
attribute of the <a> tag.
Link Text: The text displayed as the
hyperlink.
Link to another
website

Link to a section within the

same page using an ID
Where:
href: Specifies the URL
(Uniform Resource Locator) of
the page or resource to which
the link points. This is the most
important attribute of the <a>
tag.
Link Text: The text displayed as
Where:
href: Specifies the
URL (Uniform
Resource Locator) of Link to an email address
the page or resource You can also add additional
to which the link attributes to the <a> tag to
points. This is the control how the link behaves or
most important to provide additional
attribute of the <a>
tag. information, such as target to
Link Text: The text specify where the linked
displayed as the document should open (_blank
hyperlink. for a new tab, for instance), or
That is an example code

You can also add additional attributes to the

<a> tag to control how the link behaves or
to provide additional information, such as
target to specify where the linked
document should open (_blank for a new
tab, for instance), or title to provide a
tooltip when hovering over the link.
 HTML BASICS:
INSERTING
ELEMENTS IN WEB
PAGE
Inserting elements into a web page typically involves using
HTML (Hypertext Markup Language) along with CSS
(Cascading Style Sheets) and possibly JavaScript.
HTML
Elements:
HTML is used to
structure the
content of a web
page. To insert
different types of
elements (such
as text, images,
links, etc.), you'll
use HTML tags.
CSS
Styling:
CSS is used to
style the
elements on a
web page. You
can define styles
for HTML
elements using
CSS selectors.
JavaScript
Manipulatio
n:
JavaScript is used
for dynamic
interactions on a
web page. You can
use JavaScript to
insert elements
dynamically,
manipulate existing
elements, and
 THANKS FOR
UNDERSTANDING THE
TOPIC
(HOPE YOU GUYS CAN KEEP
UP WITH MY FAST TALKING)
I so don’t hate teaching you
guys at all.