Scribd
Upload
4 views18 pages

Skibdi

The document provides a comprehensive guide to basic HTML structure, common tags, attributes, and proper nesting. It includes examples of animations using CSS, such as moving boxes and scrolling text, along with tips for memorizing HTML quickly. Additionally, it presents a complete HTML program demonstrating various elements and animations in practice.

Uploaded by

quitaligalaine
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4 views18 pages

Skibdi

The document provides a comprehensive guide to basic HTML structure, common tags, attributes, and proper nesting. It includes examples of animations using CSS, such as moving boxes and scrolling text, along with tips for memorizing HTML quickly. Additionally, it presents a complete HTML program demonstrating various elements and animations in practice.

Uploaded by

quitaligalaine
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 18

🧠 📄 1.

Basic HTML Structure

You should memorize the basic “skeleton” of an HTML page:

html

<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

</head>

<body>

<!-- Page content goes here -->

</body>

</html>

 <!DOCTYPE html> – Declares the document is HTML5

 <html> – The whole page

 <head> – Hidden info like title and links to stylesheets

 <body> – Visible content on the page

🧠 2. Common HTML Tags

These are essential to memorize because you’ll use them all the time:

Tag Purpose

Headings (h1 = biggest, h6 =


<h1> to <h6>
smallest)

<p> Paragraph

<a href=""> Link

<img src=""
Image
alt="">

<br> Line break


Tag Purpose

<hr> Horizontal line

<strong> Bold text

<em> Italic text

<ul> / <ol> Unordered/Ordered list

<li> List item

<div> Division/section

Inline section (used for styling small


<span>
parts)

🧠 🎨 3. Attributes You Should Know

Attributes give extra information about tags. Memorize these common


ones:

Attribu
Example Meaning
te

<a
href Link destination
href="link.html">

<img
src Image file
src="image.jpg">

<img
alt Image description
alt="description">

<p
style Inline CSS styling
style="color:red;">

id / Identifies and groups


Used in CSS/JS
class elements

🧠 🔧 4. How to Use Nesting Properly

Memorize that tags need to open and close in order:

✅ Correct:
html

<p><strong>This is bold text.</strong></p>

❌ Incorrect:

html

<p><strong>This is wrong.</p></strong>

🧠 💡 5. HTML Comments

Used to explain or hide code:

html

<!-- This is a comment -->

📌 Tips to Memorize HTML Quickly:

 Practice typing it out, not just reading it.

 Use flashcards (physical or apps like Quizlet).

 Build simple webpages (like “About Me” or “My Favorite Food”).

 Use free HTML editors like CodePen or W3Schools TryIt Editor.

✅ Summary: What to Memorize

1. Basic page structure (HTML skeleton)

2. Common tags (<p>, <h1>, <img>, <a>, <ul>, etc.)

3. Attributes (href, src, alt, style, id)

4. Proper nesting of elements

5. HTML comments (<!-- comment -->)

To put a box inside your webpage and make it move, you can use
HTML + CSS + animation (using keyframes or JavaScript). Here's how you
can do it step by step:
✅ STEP 1: Create a Basic HTML Structure with a Box

html

<!DOCTYPE html>

<html>

<head>

<title>Moving Box</title>

<style>

.box {

width: 100px;

height: 100px;

background-color: red;

position: relative; /* Important for movement */

animation: moveBox 3s infinite alternate;

@keyframes moveBox {

from { left: 0px; }

to { left: 300px; }

</style>

</head>

<body>

<div class="box"></div> <!-- This is the box -->

</body>
</html>

🔍 Explanation:

 position: relative; lets the box move from its starting point.

 @keyframes moveBox: defines the movement from left to right.

 animation: moveBox 3s infinite alternate; means:

o Run the animation named moveBox

o It takes 3 seconds

o It loops forever (infinite)

o It goes back and forth (alternate)

🟦 Want to Move in a Circle or Diagonal?

You can modify the keyframes:

🔄 Circle-like motion (fake using top/left):

css

@keyframes moveBox {

0% { left: 0; top: 0; }

25% { left: 200px; top: 0; }

50% { left: 200px; top: 200px; }

75% { left: 0; top: 200px; }

100% { left: 0; top: 0; }

✅ Option 2: CSS Animation (Recommended and Modern)

🔄 Horizontal Scrolling Text Using @keyframes

html

<!DOCTYPE html>
<html>

<head>

<style>

.moving-text {

position: relative;

animation: slideText 5s linear infinite;

white-space: nowrap; /* Keeps text on one line */

font-size: 24px;

color: blue;

@keyframes slideText {

0% { left: 100%; }

100% { left: -100%; }

</style>

</head>

<body>

<div class="moving-text">This is smooth moving text!</div>

</body>

</html>

🧠 Explanation:

 position: relative; – allows it to move from its normal place.

 left: 100% → -100% – makes it move across the screen.


 linear – smooth, consistent speed.

 infinite – the text never stops moving.

✅ Option 3: Move on Hover

html

<style>

.hover-move {

display: inline-block;

transition: transform 0.5s;

.hover-move:hover {

transform: translateX(100px); /* Moves right on hover */

</style>

<p class="hover-move">Hover over me!</p>

🚀 BONUS: Vertical Moving Text

css

@keyframes moveDown {

from { top: 0px; }

to { top: 200px; }

Use with a div and position: relative.


✅ Example: Moving Title, Static Body

Html

<!DOCTYPE html>

<html>

<head>

<title>Moving Title</title>

<style>

h1 {

position: relative;

animation: moveTitle 3s linear infinite;

color: darkblue;

font-size: 36px;

@keyframes moveTitle {

0% { left: 0; }

50% { left: 100px; }

100% { left: 0; }

p{

font-size: 20px;

color: black;

</style>

</head>

<body>
<h1>This Title Moves!</h1>

<p>This body text stays still.</p>

<p>You can add more content here and it won't move.</p>

</body>

</html>

🔍 Explanation:

 The h1 element has an animation applied using @keyframes


moveTitle.

 The body and <p> elements are not animated, so they stay in place.

 Only the title moves left and right continuously.

You Can Customize:

 Speed (3s, 5s, etc.)

 Direction (left, top, rotate, etc.)

 Trigger (e.g. move only on hover or click)

✅ Example: Bouncing Title Using CSS

html

<!DOCTYPE html>

<html>

<head>

<title>Bouncing Title</title>

<style>
h1 {

font-size: 40px;

color: darkred;

text-align: center;

position: relative;

animation: bounce 1s infinite;

@keyframes bounce {

0%, 100% {

top: 0;

animation-timing-function: ease-in;

50% {

top: -30px; /* Moves upward */

animation-timing-function: ease-out;

p{

text-align: center;

font-size: 18px;

color: black;

</style>

</head>

<body>
<h1>Bouncy Title!</h1>

<p>This text stays still, while the title bounces.</p>

</body>

</html>

🔍 How It Works:

 @keyframes bounce moves the title up and down.

 top: -30px makes it go up, then come back down.

 ease-in and ease-out simulate gravity — making it look more natural


like a real bounce.

🔄 Optional: Slower or Higher Bounce

Just modify these:

css

CopyEdit

animation: bounce 2s infinite; /* slower bounce */

top: -60px; /* higher bounce */

✅ A moving and bouncing title


✅ A box that moves left to right
✅ A line of text that scrolls across the screen
✅ A body with static content

✅ Complete HTML Program:

html
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Animated Web Page</title>

<style>

/* BOUNCING TITLE */

h1 {

font-size: 40px;

color: darkred;

text-align: center;

position: relative;

animation: bounce 1s infinite;

@keyframes bounce {

0%, 100% {

top: 0;

animation-timing-function: ease-in;

50% {

top: -30px;

animation-timing-function: ease-out;

/* MOVING BOX */
.box {

width: 100px;

height: 100px;

background-color: steelblue;

position: relative;

animation: moveBox 3s infinite alternate;

margin: 20px auto;

@keyframes moveBox {

from { left: 0px; }

to { left: 300px; }

/* SCROLLING TEXT */

.scroll-text {

position: relative;

white-space: nowrap;

animation: scroll 10s linear infinite;

font-size: 20px;

color: darkgreen;

text-align: center;

margin-top: 20px;

@keyframes scroll {

0% { left: 100%; }
100% { left: -100%; }

/* BODY TEXT */

.body-text {

text-align: center;

margin-top: 40px;

font-size: 18px;

color: #333;

</style>

</head>

<body>

<!-- BOUNCING TITLE -->

<h1>Welcome to My Animated Page!</h1>

<!-- MOVING BOX -->

<div class="box"></div>

<!-- SCROLLING TEXT -->

<div class="scroll-text">This is scrolling text moving across the


screen.</div>

<!-- STATIC BODY CONTENT -->

<div class="body-text">

<p>This paragraph stays still.</p>


<p>The title bounces, the box moves, and the text scrolls!</p>

</div>

</body>

</html>

Tag Description Example

<!DOCTYPE Declares document


<!DOCTYPE html>
html> type

Root of the HTML


<html> <html> ... </html>
document

Contains meta and title


<head> <head> ... </head>
info

Sets title on browser <title>My First


<title>
tab Page</title>

<body> Main visible content <body> ... </body>

📝 Text Formatting Tags

Tag Description Example

<h1> Largest heading <h1>Title</h1>

<p>This is a
<p> Paragraph
paragraph.</p>

<br> Line break Line1<br>Line2

Horizontal rule
<hr> <hr>
(line)

<stron <strong>Important</
Bold text
g> strong>
Tag Description Example

Italic/emphasized
<em> <em>Note</em>
text

<u> Underlined text <u>Underline</u>

🔗 Links and Images

Tag Description Example

<a
<a> Creates a link href="https://google.com">Visit
</a>

<img Displays an <img src="image.jpg"


> image alt="Photo">

📋 Lists

Tag Description Example

<ul Unordered list <ul><li>Item</


> (bullets) li></ul>

<ol Ordered list <ol><li>First</


> (numbers) li></ol>

<li
List item <li>One</li>
>

🧱 Containers

Tag Description Example

Block container <div>Content</


<div>
(box) div>

<span <span>Text</
Inline container
> span>
🧪 Input & Form Basics

Tag Description Example

<form> Starts a form <form>...</form>

<input Input field (text,


<input type="text">
> etc.)

<butto <button>Click</
Clickable button
n> button>

<label>Name:</
<label> Label for inputs
label>

💡 Bonus: Simple Page Example

html

<!DOCTYPE html>

<html>

<head>

<title>My First Page</title>

</head>

<body>

<h1>Welcome!</h1>

<p>This is my first website.</p>

<a href="https://example.com">Visit Example</a>

<hr>

<ul>

<li>Learn HTML</li>

<li>Practice coding</li>

</ul>

<img src="photo.jpg" alt="My photo" width="200">

</body>
</html>

You might also like