Introduction to HTML

CMU422: Fundamentals of Web Design - Session 1

Birmingham Newman University

Lecturer: James Williams

Understanding the foundation of web development

3-hour session • 25 slides • 2 interactive tasks

Session Timeline:

10 min: Registration & waiting
20 min: Opening slides
45 min: Task 1
15 min: Break/Catch up
20 min: Secondary slides
45 min: Task 2
Remaining: Self-study

Learning Objectives

Understand what HTML is and its role in web development
Learn basic HTML document structure
Master essential HTML elements and tags
Practice semantic HTML markup
Create your first HTML page

What is HTML?

HTML = HyperText Markup Language

The standard markup language for creating web pages
Describes the structure of web content
Uses tags to define elements
Works with CSS and JavaScript

                    <html>

                      <head>...</head>

                      <body>...</body>

                    </html>

Watch: HTML Basics Explained

Learn the fundamentals of HTML in this beginner-friendly tutorial

Basic HTML Document Structure

                    <!DOCTYPE html>

                    <html lang="en">

                    <head>

                      <meta charset="UTF-8">

                      <title>My First Page</title>

                    </head>

                    <body>

                      <h1>Hello World!</h1>

                    </body>

                    </html>

Watch: HTML Document Structure Explained

Learn about proper HTML document structure and semantic elements

DOCTYPE Declaration

The DOCTYPE tells the browser which version of HTML you're using.

<!DOCTYPE html>

Must be the first line in your HTML document
HTML5 uses the simple declaration above
Ensures proper rendering across browsers

The HTML Element

                    <html lang="en">

                      ... all content goes here ...

                    </html>

Root element of the HTML document
Contains all other elements
lang="en" specifies the language
Helps screen readers and search engines

The Head Section

                    <head>

                      <meta charset="UTF-8">

                      <meta name="viewport" content="width=device-width,
                    initial-scale=1.0">

                      <title>Page Title</title>

                    </head>

Contains metadata about the document
Not visible on the page
Includes character encoding, viewport, title

The Body Section

                    <body>

                      <h1>Main Heading</h1>

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

                      <img src="image.jpg" alt="Description">

                    </body>

Contains all visible content
Text, images, links, forms, etc.
What users see in the browser

HTML Tags and Elements

<tagname>Content goes here</tagname>

Opening tag: <tagname>
Content: Text, images, other elements
Closing tag: </tagname>
Some elements are self-closing: <img />

Heading Elements

                    <h1>Main Heading (largest)</h1>

                    <h2>Subheading</h2>

                    <h3>Sub-subheading</h3>

                    <h4>Level 4 heading</h4>

                    <h5>Level 5 heading</h5>

                    <h6>Level 6 heading (smallest)</h6>

Use for document structure and hierarchy
H1 should be used once per page
Important for SEO and accessibility

Paragraph Element

                    <p>This is a paragraph of text. It can contain multiple sentences and will
                    be displayed as a block element with some spacing around it.</p>

                    <p>This is another paragraph. Each paragraph is separated from others with
                    some margin.</p>

Used for blocks of text
Automatically adds spacing between paragraphs
Most common element for text content

Line Breaks and Horizontal Rules

                    <p>This is the first line.<br>This is the second
                    line.</p>

                    <hr>

                    <p>Content after the horizontal rule.</p>

<br> creates a line break
<hr> creates a horizontal line
Both are self-closing elements

Text Formatting Elements

                    <p>This is <strong>bold text</strong> and this is
                    <em>italic text</em>.</p>

                    <p>This is <mark>highlighted text</mark> and this is
                    <small>smaller text</small>.</p>

                    <p>This is <del>deleted text</del> and this is
                    <ins>inserted text</ins>.</p>
                

HTML Lists

                    <ul>

                      <li>Unordered list item 1</li>

                      <li>Unordered list item 2</li>

                    </ul>

                    <ol>

                      <li>Ordered list item 1</li>

                      <li>Ordered list item 2</li>

                    </ol>

Creating Links

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

                    <a href="page.html">Link to another page</a>

                    <a href="#section">Link to page section</a>

                    <a href="mailto:email@example.com">Send email</a>

href specifies the destination
Can link to external websites, local pages, or email
Essential for web navigation

Adding Images

                    <img src="image.jpg" alt="Description of the image">

                    <img src="https://example.com/image.png" alt="External image">

                    <img src="photo.jpg" alt="Photo" width="300" height="200">

src specifies the image source
alt provides alternative text (important for accessibility)
Can specify width and height attributes

Semantic HTML

                    <header>Page header</header>

                    <nav>Navigation menu</nav>

                    <main>Main content</main>

                    <section>Content section</section>

                    <article>Article content</article>

                    <aside>Sidebar content</aside>

                    <footer>Page footer</footer>

Uses meaningful element names
Improves accessibility and SEO
Makes code more readable

HTML Comments

                    <!-- This is a comment -->

                    <h1>My Page</h1>

                    <!-- Navigation section -->

                    <nav>...</nav>

                    <!-- TODO: Add more content here -->

Comments are not displayed in the browser
Useful for documentation and notes
Help other developers understand your code

Task 1: Create Your First HTML Page

Instructions:

Create a new HTML file called my-first-page.html
Include proper HTML5 document structure
Add a title: "My First Web Page"
Create a main heading with your name
Add 2-3 paragraphs about your interests
Include a list of your favorite websites
Add an image (use a placeholder if needed)
Use semantic HTML elements

Time: 45 minutes

This task will help you understand basic HTML structure and elements

Break Time

15 Minutes

Take a break, ask questions, or catch up on the previous task.

Next: Secondary slides and Task 2

HTML Validation

Check your HTML for errors
Use online validators like W3C Validator
Ensures cross-browser compatibility
Helps identify missing closing tags

                    Common validation errors:
                    Missing closing tags
Incorrect attribute values
Missing required attributes
Invalid element nesting

                

HTML Best Practices

Use lowercase for all element names and attributes
Always close your tags
Use semantic elements when possible
Include alt text for images
Write clean, readable code
Validate your HTML
Use proper indentation

Common HTML Mistakes

                    <!-- WRONG -->

                    <H1>Title</H1>

                    <p>Text<br>

                    <img src="image.jpg">

                    <!-- CORRECT -->

                    <h1>Title</h1>

                    <p>Text</p>

                    <img src="image.jpg" alt="Description">

HTML5 Features

New semantic elements: header, nav, main, section, article, aside, footer
New input types: email, date, number, range, color
Audio and video: Native multimedia support
Canvas: Drawing and graphics
Local storage: Client-side data storage

Task 2: Enhanced HTML Page

Instructions:

Enhance your previous HTML page
Add proper semantic structure (header, nav, main, footer)
Create a navigation menu with 3 links
Add a contact form with name, email, and message fields
Include a table with some data
Add comments to explain your code structure
Validate your HTML using an online validator
Test your page in different browsers

Time: 45 minutes

This task will help you understand advanced HTML features and best practices

Session Summary

HTML is the foundation of web development
Proper document structure is essential
Use semantic elements for better accessibility
Always validate your HTML
Practice makes perfect!

Next Session:

HTML Forms and Input - Working with user data