Skip to main content

Full Stack Development and HTML

Introduction​

This module introduces front-end development concepts, beginning with HTML and moving into CSS and Bootstrap.

Front-End Design Representations​

  • Wireframe: Low-fidelity visual guide representing layout and navigation.
  • Mockup: High-fidelity static design including branding and visual styling.
  • Prototype: Clickable or interactive model that simulates user interactions.

Resources:

HTML Basics​

What is HTML?​

  • HTML is the standard markup language for creating web pages.
  • It defines the structure and content of a page.

Viewing HTML Files​

  • Double click file
  • Drag file into browser
  • Use file:/// URL in browser

Basic HTML Structure​

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My Webpage</title>
  </head>
  <body>
    <!-- Your content goes here -->
  </body>
</html>

Common Elements​

ElementPurpose
<p>Paragraph text
<h1>...<h6>Headings
<div>Grouping content
<ul>, <ol>Lists

Practice Tools:

Linking in HTML​

  • Absolute URL:
<a href="https://www.google.com">Google</a>
  • Relative URL:
<a href="./about.html">About Us</a>
  • Anchor link:
<a href="#section1">Go to Section 1</a>
<div id="section1">Welcome!</div>

Best Practice: Use relative links for internal navigation.

Working with Images and Tables​

Embedding Images​

<img src="https://example.com/image.jpg" alt="Description" width="300" />
  • Use descriptive alt text for accessibility.

Creating Tables​

<table border="1">
  <tr>
    <th>Name</th>
    <th>Image</th>
    <th>Prep Time</th>
    <th>Cook Time</th>
  </tr>
  <tr>
    <td>Chicken Pasta</td>
    <td><img src="image_url" width="100" /></td>
    <td>15 mins</td>
    <td>35 mins</td>
  </tr>
</table>
  • Use <thead>, <tbody>, <tfoot> for semantic structure.

HTML Forms​

<form action="/submit" method="POST">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required />
  <input type="submit" value="Submit" />
</form>

Key Input Types: text, radio, checkbox, file, submit, textarea, select

Tip: Always include the name attribute.

Disclaimer: Generative AI was used in part to generate these lecture notes.