Labels

EXERCISE 2 | ABOUT ME

Back to Top Button ↑
09/10/2025 - 16/10/2025 (Week 3 - Week 4)
LIST OF CONTENT :

LECTURE NOTES

CLICK HERE FOR W2 NOTES.

WEEK 3
Why Web Standards Matter
  • People access the web in many different ways today:
    • Desktop (keyboard, mouse, monitor)
    • Mobile phones and tablets (touch screens)
    • Voice interfaces (speech input/output)
    • Screen readers (for blind users)
  • Different browsers: Internet Explorer, Firefox, Chrome, Opera, Safari
  • Different operating systems: Windows, Mac OS, Linux
  • Different screen resolutions: 640x480 to 1680x1050 and beyond
What Are Web Standards?
  • Core set of rules for developing websites
  • Created and maintained by the World Wide Web Consortium (W3C)
  • Main standard languages: HTML and CSS
  • Ensure websites work across all devices and configurations
  • Make development easier and more consistent
  • Ensure all browsers display your site properly
How the Web Works
4 Simple Steps:
  1. You type a web address (e.g., www.google.com) into your browser via your ISP
  2. DNS server lookup - Your computer contacts DNS (Domain Name System) servers that act like a phone book, converting the domain name to an IP address
  3. Browser contacts web server - Using the IP address, your browser connects to the web server hosting the website
  4. Page is sent back - The web server sends the requested page to your browser
Structure of Web Pages
Why Structure Matters
  • Helps readers understand messages and navigate documents
  • Similar to newspapers (headlines, body copy, images, subheadings)
  • Similar to forms (headings, sections, questions, checkboxes)
  • Creates hierarchy of information
HTML Describes Structure
  • HTML adds code to words to create structure
  • Uses elements made of characters inside angled brackets < >
  • Elements have opening tags and closing tags
  • Format: <element>Information</element>
HTML Basics
Tags and Elements
  • Opening tag: <p>
  • Closing tag: </p> (has forward slash)
  • Terms "tag" and "element" are often used interchangeably
Attributes
  • Provide additional information about elements
  • Appear in the opening tag
  • Format: <p lang="eng-us">Paragraph in English</p>
    • Attribute name (lowercase): what kind of information
    • Attribute value (in quotes): the actual information
Essential HTML Elements
Basic Structure
  • <body> - Everything shown in the main browser window
  • <head> - Contains information about the page
  • <title> - Page title shown in browser tab (inside <head>)
Headings (6 Levels)
  • <h1> - Main heading (largest)
  • <h2> - Subheading
  • <h3> to <h6> - Further subheadings (decreasing size)
Paragraphs
  • <p> - Creates a paragraph
  • Makes text easier to read by splitting into units
Text Formatting
  • <b> - Makes text bold (for key words/features)
  • <i> - Makes text italic (for technical terms, foreign words, ship names, thoughts)
Lists
Ordered Lists (Numbered)
<ol>
  <li>First item</li>
  <li>Second item</li>
</ol>
  • Used for steps or sequences that must be in order
Unordered Lists (Bullet Points)
<ul>
  <li>First item</li>
  <li>Second item</li>
</ul>
  • Used for lists without specific order
Nested Lists
  • Can put lists inside list items <li> to create sub-lists
  • Browsers indent nested lists further
  • Bullet style may change for nested unordered lists
Links
Types of Links
  • From one website to another
  • From one page to another on same site
  • From one part of a page to another part
  • Links that open in new browser window/tab
Creating Links
  • Use the <a> element (anchor)
  • href attribute specifies the destination
  • Format: <a href="http://www.imdb.com">IMDB</a>
    • Text between tags is what user clicks on
    • href value is where the link goes
  • External links use absolute URLs (full web address)
  • Browsers show links in blue with underline by default

EXERCISE 2

OBJECTIVE
Create a single HTML file that serves as a basic "About Me" or personal profile page. This exercise is designed to test your understanding of core HTML document structure and fundamental elements.

TASK
Create one file named index.html. When opened in a web browser, this file must display a simple page about you correctly.

Your index.html file must include the following elements:
  • Basic Document Structure:  Correctly yse the <!DOCTYPE html>, <html>, <head> and <body> tags.
  • Page Title: Add a descriptive title inside the <head> using the <title> tag (e.g., "My Awesome Profile").
  • Main Heading: Use an <h1> tag for your name or the page's main topic.
  • Sub-Heading: Use an <h2> tag to create a section heading (e.g., "My Hobbies" or "Favorites").
  • Paragraph Text: Write at least two descriptive paragraphs using the <p> tag.
  • Ordered List: Create a numbered list (using <ol> and <li>) with at least three items (e.g., your top 3 favorite books, movies, or foods).
  • Unordered List: Create a bulleted list (using <ul> and <li>) with at least three items (e.g., your skills, goals, or contact methods).

During my first attempt, I had included CSS in my code for the website. After consulting with Mr. Shamsul, he advised me to remove the CSS so I ended up switching the to inline coding instead and removing the need for the <style> block or an external CSS spreadsheet.

Link to Netlify : CLICK HERE !

Fig 1.1 Screengrab of CSS in original code

Fig 1.2 Full Final Code

<<  Exercise 1                                                                                        Exercise 3  >>