Scribd
Upload
21 views18 pages

Sigma

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 offers a complete HTML program showcasing various animated elements and static content.

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 PDF, TXT or read online on Scribd
21 views18 pages

Sigma

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 offers a complete HTML program showcasing various animated elements and static content.

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

<h1> to <h6> Headings (h1 = biggest, h6 = smallest)

<p> Paragraph

<a href=""> Link

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

<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

<span> Inline section (used for styling small parts)

🧠 🎨 3. Attributes You Should Know

Attributes give extra information about tags. Memorize these common ones:

Attribute Example Meaning

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

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

alt <img alt="description"> Image description

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

id / class Used in CSS/JS Identifies and groups 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 html> Declares document type <!DOCTYPE html>

<html> Root of the HTML document <html> ... </html>

<head> Contains meta and title info <head> ... </head>

<title> Sets title on browser tab <title>My First Page</title>

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

📝 Text Formatting Tags

Tag Description Example

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


Tag Description Example

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

<br> Line break Line1<br>Line2

<hr> Horizontal rule (line) <hr>

<strong> Bold text <strong>Important</strong>

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

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

🔗 Links and Images

Tag Description Example

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

<img> Displays an image <img src="image.jpg" alt="Photo">

📋 Lists

Tag Description Example

<ul> Unordered list (bullets) <ul><li>Item</li></ul>

<ol> Ordered list (numbers) <ol><li>First</li></ol>

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

🧱 Containers

Tag Description Example

<div> Block container (box) <div>Content</div>

<span> Inline container <span>Text</span>


🧪 Input & Form Basics

Tag Description Example

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

<input> Input field (text, etc.) <input type="text">

<button> Clickable button <button>Click</button>

<label> Label for inputs <label>Name:</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