<!DOCTYPE html>
<html>
<head>
    <title>Activity 1</title>
</head>
<body>
    <!-- Printing my name to the screen -->
    <h1>SHEKAINAH P. AGUSTIN</h1>
</body>
</html>

EXERCISE 01.2

Print Numbers 1 to 10

HTML CODE

<!DOCTYPE html>
<html>
<head>
    <title>Activity 1</title>
</head>
<body>
    <!-- Print numbers 1 to 10 -->
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
    <p>7</p>
    <p>8</p>
    <p>9</p>
    <p>10</p>
</body>
</html>

EXERCISE 01.3

Webpage Title & Heading

HTML CODE

<!DOCTYPE html>
<html>
    <title>This is a webpage</title>
    <!--This is the title of my webpage-->
<body>
    <h1>This is webpage</h1>
</body>
</html>

EXERCISE 01.4

Webpage Created Date

HTML CODE

<!DOCTYPE html>
<html>
    <title>This is a webpage</title>
    <!--This is the title of my webpage-->
<body>
    <h1>This is webpage</h1>
</body>
</html>

EXERCISE 01.5

Text Input Field

HTML CODE

<!DOCTYPE html>
<html>
    <title>Activity 5</title>
    <!--This is the title of my webpage-->
<body>
    <!--This is the command-->
    <p>Write down anything below this text</p>
    <input type="text"></input>
</body>
</html>

EXERCISE 01.6

Head & Input Element

HTML CODE

<!DOCTYPE html>
<html>
    <title>Activity 6</title>
    <!--This is the title of my webpage-->
    <!--This is the head of my webpage-->
<head>Write down anything below this text</head>
<body>
    <br>
    <input type="text"></input>
</body>
</html>

ACTIVITY 02

Text Exercises

← Back to All

EXERCISE 02.1

Printing Name in Green

HTML CODE

<!DOCTYPE html>
<html>
<head>
    <title>Activity 2</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- Printing name in green -->
    <p style="color: green;">Shekainah Agustin</p>
</body>
</html>

EXERCISE 02.2

Numbers 1–10 in Different Colors

HTML CODE

<!DOCTYPE html>
<html>
<head>
    <title>Activity 2</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- Printing numbers 1 to 10 with different colors -->
    <p><span style="color:red;">1</span></p>
    <p><span style="color:orange;">2</span></p>
    <p><span style="color:yellow;">3</span></p>
    <p><span style="color:green;">4</span></p>
    <p><span style="color:blue;">5</span></p>
    <p><span style="color:indigo;">6</span></p>
    <p><span style="color:violet;">7</span></p>
    <p><span style="color:brown;">8</span></p>
    <p><span style="color:pink;">9</span></p>
    <p><span style="color:teal;">10</span></p>
</body>
</html>

EXERCISE 02.3

Tahoma Font

HTML CODE

<!DOCTYPE html>
<html>
<head>
    <title>Tahoma Font</title>
    <style>
        .tahoma {
            font-family: Tahoma, sans-serif;
        }
    </style>
</head>
<body>
    <p class="tahoma">Shekainah Agustin</p>
</body>
</html>

EXERCISE 02.4

Fun Fonts

HTML CODE

<!DOCTYPE html>
<html>
<head>
    <title>Fun Fonts</title>
    <style>
        .font1 { font-family: Arial, sans-serif; }
        .font2 { font-family: "Times New Roman", serif; }
        .font3 { font-family: Verdana, sans-serif; }
        .font4 { font-family: "Courier New", monospace; }
        .font5 { font-family: Georgia, serif; }
    </style>
</head>
<body>
    <p><span class="font1">Cats are secretly planning
      to take over the world.</span></p>
    <p><span class="font2">My dog thinks he's a superhero
      every time he sees a squirrel.</span></p>
    <p><span class="font3">Pizza tastes better when
      you eat it at 2 AM.</span></p>
    <p><span class="font4">Aliens probably judge us
      for our Wi-Fi speed.</span></p>
    <p><span class="font5">Some days, coffee is literally
      the only thing keeping me human.</span></p>
</body>
</html>

EXERCISE 02.5

Book Description

HTML CODE

<!DOCTYPE html>
<html>
<head>
    <title>Book Description</title>
</head>
<body>
    <p>
        <u><strong>Harry Potter and the
          Sorcerer's Stone</strong></u> by
        <u><strong>J.K. Rowling</strong></u> is a
        <b><i>magical</i></b> and
        <b><i>captivating</i></b> story about a young
        boy discovering his true identity as a wizard.
        The book introduces a
        <b><i>wonderful</i></b> world full of spells,
        friendship, and adventure. Its
        <b><i>imaginative</i></b> storytelling continues
        to inspire readers of all ages.
    </p>
</body>
</html>

EXERCISE 02.6

Name with Different Heading Sizes

HTML CODE

<!DOCTYPE html>
<html>
<head>
    <title>Name with Different Heading Sizes</title>
</head>
<body>
    <h1>S</h1>
    <h2>h</h2>
    <h3>e</h3>
    <h4>k</h4>
    <h5>a</h5>
    <h6>i</h6>
    <h5>n</h5>
    <h4>a</h4>
    <h3>h</h3>
</body>
</html>

ACTIVITY 03

Text Formatting

Exploring HTML’s rich set of text formatting tags — bold, italic, underline, strikethrough, superscript, subscript, and more to give text meaningful visual emphasis.

← Back to All

✍️

Formatting Tags

EXERCISE 03.1

Bold & Strong

Differentiating between <b> (stylistic) and <strong> (semantic importance) elements.

View Exercise →

EXERCISE 03.2

Italic & Emphasis

Using <i> for stylistic italic and <em> for stressed emphasis in text content.

View Exercise →

EXERCISE 03.3

Blockquotes & Cite

Marking up quotations from external sources with proper semantic blockquote structure.

View Exercise →

EXERCISE 03.4

Sub, Sup & Mark

Using subscript, superscript, and mark tags for scientific and highlighted content.

View Exercise →

ACTIVITY 04

HTML Links

Mastering the anchor tag — creating hyperlinks to external websites, internal page sections, downloadable files, and email addresses with proper attributes and accessibility.

← Back to All

🔗

Hyperlinks

EXERCISE 04.1

External Links

Creating links to external websites with target=”_blank” and rel=”noopener” attributes.

View Exercise →

EXERCISE 04.2

Anchor Navigation

Building in-page navigation using id attributes and hash (#) links for long pages.

View Exercise →

EXERCISE 04.3

Mailto & Tel Links

Creating email and phone number links that trigger native device applications.

View Exercise →

EXERCISE 04.4

Download Links

Using the download attribute on anchor tags to prompt file downloads in browsers.

View Exercise →

ACTIVITY 05

Image Exercises

Learning to embed images in web pages using the img element — covering src paths, alt text for accessibility, width/height attributes, and linking images.

← Back to All

🖼️

Image Elements

EXERCISE 05.1

Basic Image Embedding

Adding images to a webpage using the img tag with local and external source paths.

View Exercise →

EXERCISE 05.2

Alt Text & Accessibility

Writing meaningful alt descriptions that make images accessible to screen readers.

View Exercise →

EXERCISE 05.3

Image Sizing

Controlling image dimensions with width and height attributes and CSS styling.

View Exercise →

EXERCISE 05.4

Linked Images

Wrapping img elements inside anchor tags to make clickable image-links.

View Exercise →

// ABOUT THIS PORTFOLIO

Built with purpose & passion.

This portfolio is a midterm compilation for IT326 — Web Systems & Technologies, showcasing five key activities that demonstrate foundational web development skills.

Each activity builds on the last, forming a complete picture of HTML proficiency from document structure to multimedia integration.

Explore Activities ↓

ACTIVITIES COMPLETED

TOTAL EXERCISES

INF3F

SECTION

Agustin, Shekainah P.

Five ActivitiesOne Portfolio

HTML Fundamentals

Text Exercises

Text Formatting

HTML Links

Image Exercises

HTML Fundamentals

Printing Name to Screen

Print Numbers 1 to 10

Webpage Title & Heading

Webpage Created Date

Text Input Field

Head & Input Element

Text Exercises

Printing Name in Green

Numbers 1–10 in Different Colors

Tahoma Font

Fun Fonts

Book Description

Name with Different Heading Sizes

Text Formatting

Bold & Strong

Italic & Emphasis

Blockquotes & Cite

Sub, Sup & Mark

HTML Links

External Links

Anchor Navigation

Mailto & Tel Links

Download Links

Image Exercises

Basic Image Embedding

Alt Text & Accessibility

Image Sizing

Linked Images

Built with purpose & passion.

Five Activities
One Portfolio