Portfolio – Good, Prisela F.

Final Requirement · IT414

Good, Prisela F.

A curated collection of web systems activities showcasing foundational HTML and WordPress skills.

IT414 — Web Systems & Technologies | INF3F

About Me

Hello, I’m Prisela ✦

An Information Technology student passionate about web development, digital creativity, and building practical solutions. This portfolio documents my journey through IT414 — Web Systems and Technologies.

📚 IT Student 🌐 Web Dev ✨ INF3F 💻 HTML & WordPress

Coursework

My Activities

Click any activity card to explore exercises, code samples, and learning reflections.

HTML

→

Text Exercises

→

Text Formatting Exercises

→

HTML Link Exercises

→

Image Exercises

→

Activity 01

HyperText Markup Language

📖 What I Learned

HTML (HyperText Markup Language) is the standard language for creating web pages.
Every HTML document starts with <!DOCTYPE html> to declare the document type.
The structure consists of a <head> (metadata) and <body> (visible content).
Tags are used in pairs — an opening tag and a closing tag — to wrap content.
Comments  help document code without being displayed in the browser.

✦ HTML is the backbone of every webpage on the internet.

Exercise 1 — Printing Name

Good, Prisela F.

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Activity 1</title>
</head>
<body>
  <!-- Printing my name to the screen -->
  <h1>Good, Prisela F.</h1>
</body>
</html>

Exercise 2 — Numbers 1 to 10

1
2
3
4
5
6
7
8
9
10

HTML

<body>
  <p>1</p>
  <p>2</p>
  <!-- ... continue to 10 -->
  <p>10</p>
</body>

Activity 02

Text Exercises

📖 What I Learned

HTML headings range from <h1> (largest) to <h6> (smallest), conveying hierarchy.
The  tag wraps paragraph text and automatically adds spacing.
Inline tags like  are useful for styling specific words within text.
The   tag inserts a line break without starting a new paragraph.

✦ Understanding text elements is the foundation of all web content.

Exercise 1 — Heading Hierarchy

Heading 1

Heading 2

Heading 3

Paragraph text goes here.

HTML

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<p>Paragraph text goes here.</p>

Activity 03

Text Formatting Exercises

📖 What I Learned

 makes text bold with semantic importance;  only changes appearance.
 italicises text with emphasis;  is purely visual.
 underlines text, while <s> strikes through it.
 and  are used for superscript and subscript characters.

✦ Text formatting gives content structure and visual hierarchy.

Exercise 1 — Formatting Tags

Bold Text

Italic Text

Underlined Text

~~Strikethrough Text~~

H₂O and E = mc²

HTML

<p><strong>Bold Text</strong></p>
<p><em>Italic Text</em></p>
<p><u>Underlined Text</u></p>
<p><s>Strikethrough Text</s></p>
<p>H<sub>2</sub>O and E=mc<sup>2</sup></p>

Activity 04

HTML Link Exercises

📖 What I Learned

The <a> (anchor) tag creates hyperlinks using the href attribute to specify the destination URL.
Using target="_blank" opens a link in a new browser tab or window.
Links can be absolute (full URL) or relative (path within the same site).
Adding rel="noopener" with blank target is a best practice for security.

✦ Hyperlinks are what make the World Wide Web a web.

Exercise 1 — Creating Links

Visit Google
Open in New Tab
Go to About Page

HTML

<!-- External link -->
<a href="https://www.google.com">Visit Google</a>

<!-- Opens in new tab -->
<a href="https://www.google.com"
   target="_blank"
   rel="noopener">Open in New Tab</a>

<!-- Internal/relative link -->
<a href="/about">Go to About Page</a>

Activity 05

Image Exercises

📖 What I Learned

The <img> tag is a self-closing (void) element — it does not need a closing tag.
The src attribute specifies the image source (URL or file path).
The alt attribute provides alternative text for accessibility and SEO.
width and height attributes (or CSS) control image dimensions on the page.

✦ Images enhance content and make websites visually engaging.

Exercise 1 — Embedding Images

A sample embedded image

HTML

<!-- Basic image -->
<img
  src="photo.jpg"
  alt="A sample landscape"
  width="400"
>

<!-- Image with CSS sizing -->
<img
  src="photo.jpg"
  alt="Responsive image"
  style="width:100%;max-width:600px"
>