Web Programming
Lecture 1

HTML

Josue Obregon
jobregon@seoultech.ac.kr

Seoul National University of Science and Technology
Information Technology Management
Lecture slides index

March 10, 2025

Agenda

What are we going to learn?

Roadmaps: Frontend, backend and fullstack

Analogy of a web page

Words + images

HTML

CSS

JavaScript

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Web Programming ITM</title>
    </head>
    <body>
        Hello, world!
    </body>
</html>

Hyper: over/above/beyond

Text: words and/or alphanumeric characters

Markup: the result of preparing text or indicating the relationship between parts of text before displaying

Language: a system of symbols used to communicate ideas

In other words… HTML defines the meaning and structure of web content(i.e., text, images, etc.)

Hypertext Markup Language

  • Describes the content and structure of information on a web page
  • Not the same as the presentation (appearance on screen)
  • Surrounds text content with opening and closing tags
  • Most whitespace is insignificant in HTML (ignored or collapsed to a single space)
  • We will use a newer version called HTML5

SYNTAX:

<tag>content</tag>

EXAMPLE:

<p>This is a paragraph</p>

Structure of an HTML page

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Web Programming ITM</title>
    </head>
    <body>
        Welcome to Spring Semester!
    </body>
</html>

Main HTML tags

  • <!DOCTYPE html> tells the browser to interpret our page’s code as HTML5
  • <html> Represents the root (top-level element) of an HTML document
  • <head> Contains machine-readable information (metadata) about the document (not rendered)
  • <body> contains the page’s content

General Outline with HTML5 <body>

<body>
  <header>
    <!-- Header of the webpage body (e.g. logo, navigation bar) -->
  </header>
  <main>
    <!-- Main section of the webpage body (where most content is) -->
  </main>
  <footer>
    <!-- Footer of the webpage body (e.g. copyright info) -->
  </footer>
</body>

HTML5 Semantic Tags

A semantic element clearly describes its meaning to both the browser and the developer

  • <main>
    • Main content of the document
    • there can only be one main element in the <body>
    • The content inside should be unique and not contain content that is repeated across pages ( e.g. sidebars, nav link, search bars, etc.)
  • <header>
    • contains header information for page body or section/article, including logos, navigation bar, etc.
  • <footer>
    • contains footer information for page body or section/article, including copyright information, contact, links, etc.

HTML5 example semantic structure

Common HTML tags

HTML heading levels <h1>…<h6>

  • Represent heading information for portions and/or subportions of the page
  • <h1>: highest importance, <h2>: second highest importance etc.
  • Do not choose based off of the rendered size
    • Remember, what is the purpose of HTML? -Do not skip heading levels

Do not confuse this tags

<head> vs. <header> vs. <h1>…<h6>

<h1>Beetles</h1>
<h2>External morphology</h2>
<h3>Head</h3>
<h4>Mouthparts</h4>
<h3>Thorax</h3>
<h4>Prothorax</h4>
<h4>Pterothorax</h4>

Ordered <ol> and unordered <ul> lists

  • <ul> for an unordered list (typically a bulleted list)
  • <ol> for an ordered list (typically a numbered list)
  • Both represent a list of items
  • <li> tags are used within both unordered AND ordered lists
  • <li> list item tag. Representative of an item in a list
  • A list can contain another list
<ol>
    <li>Mix flour, baking powder, sugar, and salt.</li>
    <li>In another bowl, mix eggs, milk, and oil.</li>
    <li>Stir both mixtures together.</li>
        <ul>
            <li>
                Do not make a mess
            </li>
            <li>
                But enjoy!
            </li>
        </ul>
    <li>Fill muffin tray 3/4 full.</li>
    <li>Bake for 20 minutes.</li>
</ol>

Images <img>

Inserts a graphical image onto the page (inline)

  • The src attribute specifies the image URL
  • The alt attribute describing the image, which improves accessibility for users who can’t otherwise see it.

Example

<img src="img/link_shield.png" alt="The shield of Link" title="Link Shield">

The shield of Link The shield of Link

Tables <table>

Allows web developers to arrange data into rows and columns.

  • <td> defines a table cell (table data)
  • <tr> defines a table row
  • <th> defines a table header (optional)
  • <thead> groups the header content in a table
  • <tbody> groups the body content in a table
<table>
    <thead>
        <th>Name</th>
        <th>Class</th>
    </thead>
    <tbody>
        <tr>
            <td>Annie</td>
            <td>Mage</td>
        </tr>
        <tr>
            <td>Garen</td>
            <td>Warrior</td>
        </tr>
    </tbody>
</table>

Forms <form>

It is used to create an HTML form for user input.

  • <input type="text"> displays a single-line text input field
  • <input type="submit"> Displays a submit button (for submitting the form)
  • <input type="button"> Displays a clickable button
<form>
    <input type="text"placeholder="Full Name" name="name">        
    <input type="submit">
</form>

Next week

Give style to our HTML document with CSS

Acknowledgements


Back to title slide Back to lecture slides index