Introduction & HTML Basics

INFO 153A/253A: Front End Web Architecture

Kay Ashaolu

Introduction

Introduction to Front-End Web Architecture

  • What is Front-End Web Architecture?
    • The client side of web applications
    • Defines the structure, style, and behavior of web pages
  • Key Components:
    • HTML: Structure and content of web pages
    • CSS: Visual styling and layout
    • JavaScript: Interactivity and dynamic behavior
  • Why is Web Architecture Important?
    • Ensures scalability and maintainability
    • Improves user experience and performance
    • Adapts to various devices (desktop, mobile, tablet)z

HTML: The Structure of the Web

  • What is HTML?
    • Hypertext Markup Language (HTML)
    • Defines the structure of web pages
    • Elements, Tags, and Attributes
  • Key Concepts:
    • Elements: Basic building blocks of HTML (e.g., <h1>, <p>, <a>)
    • Attributes: Provide additional information (e.g., class, id, href)

HTML: The Structure of the Web

  • Semantic HTML:
    • Use of meaningful tags (<header>, <nav>, <section>)
    • Improves accessibility and SEO
<html>
  <head>
    <title>Example Page</title>
  </head>
  <body>
    <h1>Welcome to My Website</h1>
    <p>This is an example of a simple HTML structure.</p>
  </body>
</html>

CSS – Styling and Responsive Design

  • What is CSS?
    • Cascading Style Sheets (CSS)
    • Controls the look and feel of a web page
  • Core Concepts:
    • Selectors: Targeting HTML elements (e.g., #id, .class)
    • Properties and Values: Define the style (e.g., color: blue;, )
    • Box Model: Content, padding, border, margin

CSS – Styling and Responsive Design

  • Responsive Design:
  • Fluid Grids: Flexible layouts using percentages
  • Media Queries: Adapt layout to different screen sizes
@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

JavaScript – Adding Interactivity

  • What is JavaScript?
    • A programming language that adds interactivity to web pages
  • Key Features:
    • DOM Manipulation: Change HTML content and styles dynamically
    • Event Handling: Respond to user actions (e.g., clicks, form submissions)

JavaScript – Adding Interactivity

<button onclick="toggleText()">Click me</button>
<p id="demo">Hello World</p>
<script>
  function toggleText() {
    var x = document.getElementById("demo");
    if (x.innerHTML === "Hello World") {
      x.innerHTML = "You clicked!";
    } else {
      x.innerHTML = "Hello World";
    }
  }
</script>

Uses of JavaScript:

  • Validating forms
  • Animating elements
  • Creating dynamic user interfaces

Example: Toggle Button Text

The Web Request-Response Cycle 

Basic Process:

  • Step 1: User enters a URL (e.g., www.example.com)
  • Step 2: Browser sends a DNS request to resolve the domain to an IP address
  • Step 3: Browser sends an HTTP/HTTPS request to the server
  • Step 4: Server responds with HTML, CSS, JavaScript, and other assets
  • Step 5: Browser renders the webpage

The Web Request-Response Cycle 

Key Concepts:

  • DNS (Domain Name System): Resolves domain names to IP addresses
  • HTTP/HTTPS: Protocols for web communication (HTTPS is secure)
  • Web Server: Hosts and serves web content (e.g., Apache, Nginx)

HTML Basics

HTML Fundamentals & Structure

HTML Definition:

  • HTML is the standard language used to create web pages.
  • HTML5 is the latest version, introducing new features and APIs for enhanced functionality.

 

Basic Structure:

  • Tags: Core HTML tags like <html>, <head>, and <body>.
  • Attributes: Add properties to elements (e.g., class, id).
  • Purpose: Provides structure to web content, organizing headers, paragraphs, images, and links for accessibility and clarity.

Essential HTML Elements

Headings and Text:

  • Headings (<h1> to <h6>): Define content hierarchy. <h1> is the most important, <h6> is the least.
  • Paragraphs (<p>): Used for text content blocks.

Lists and Links:

  • Ordered Lists (<ol>): Numbered lists.
  • Unordered Lists (<ul>): Bulleted lists.
  • Links (<a href="URL">): Create clickable links to other web pages or resources.

Creating and Viewing HTML Pages

HTML File Setup:

  • Use index.html for the homepage.
  • Organize files in a structured way for easier management.

Sandbox Environment:

  • Test HTML elements in separate files, such as forms.html or tables.html.

Opening Files in Browsers:

Use browsers like Chrome or Firefox to view HTML files. Understand the difference between local file paths (file:///) and URLs (http://).

Tags, Attributes, and Document Structure

Tags and Attributes:

  • Opening and Closing Tags: Most tags require opening and closing (e.g., <p>text</p>), except for self-closing ones like <img>.
  • Attributes: Provide additional details, e.g., src for images and href for links.

Document Structure:

  • Doctype: <!DOCTYPE html> indicates the document is HTML5.
  • <html>, <head>, <body>: Form the essential structure of an HTML document.

Setting Up Development Enviornment

  • Text Editors: Use VSCode for efficient HTML development, with extensions like Live Server for real-time updates.
  • Emmet: A tool for speeding up HTML writing.

Semantic HTML

  • Use semantic tags like <header>, <footer>, and <article> for accessibility and SEO, which helps browsers and screen readers understand content better.

Sample HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sample Web Page</title>
</head>
<body>
    <header>
        <h1>Welcome to My Web Page</h1>
        <nav>
            <ul>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>
    <section id="about">
        <h2>About Me</h2>
        <p>This is a sample paragraph about me.</p>
    </section>
    <footer>
        <p>&copy; 2024 My Web Page</p>
    </footer>
</body>
</html>

HTML Forms

HTML Forms

  • Purpose of Forms:
    • Forms allow users to interact with web applications by submitting data.
    • HTML & CSS handle the visual layout; server-side languages (PHP, Python, etc.) handle form processing.
  • Form Submission Workflow:
    • Client-Side: Form structure and display with HTML & CSS.
    • Server-Side: Data processing using backend logic.

Form Structure and Key Elements

  • Basic Form Structure:
    • <form> wraps input elements.
    • action: The URL where the form data is sent (e.g., /submit).
    • method: Defines how data is sent, either GET or POST.

Form Structure and Key Elements

  • Common Input Types:
    • Text Input: <input type="text"> for simple text.
    • Email Input: <input type="email"> for email with validation.
    • Textarea: <textarea></textarea> for multi-line input.
    • Select Dropdown: <select><option>Option</option></select> for a list of choices.

Input Validation & Advanced Input Types

  • HTML5 Built-In Validation:
    • Email: Ensures the format is correct with <input type="email">.
    • Number: Only allows numerical input via <input type="number">.
    • Date Picker: Enables date selection using <input type="date">.
  • Radio Buttons and Checkboxes:
    • Radio Buttons: Choose one option from a group with <input type="radio">.
    • Checkboxes: Select multiple options using <input type="checkbox">.

Accessibility

  • Using Labels for Accessibility
    • <label>: Used to associate text labels with form elements.
    • For Attribute: Matches the id of the input to improve accessibility.
    • Example:
      • <label for="email">Email:</label><input type="email" id="email">
      • Clicking the label focuses the corresponding input field.

Form Styling

  • Structuring Forms with Block and Inline Elements
  • Block-Level Elements span the full width (e.g., <div>, <form>, <p>).
  • Inline-Level Elements take only the necessary width (e.g., <input>, <span>).
  • Divs and Spans: Used for layout structure, divs for block-level elements, spans for inline.

Form Buttons (Submit and Reset)

  • Creating Submit and Reset Buttons
  • Submit Button:
    • <input type="submit" value="Submit">
    • <button type="submit">Submit</button>
  • Reset Button:
    • <button type="reset">Reset</button>, clears all form input fields.

Using HTML Entities in Forms

  • Using HTML Entities in Forms
  • Non-breaking space (&nbsp;): Adds white space between elements.
  • Special Symbols:
    • Copyright symbol: &copy;
    • Greater than: &gt;
    • Less than: &lt;
    • Example: 5 &gt; 3 renders as "5 > 3"

Sample Code Example

<form action="/submit" method="POST">
  <!-- Name Field -->
  <div>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" placeholder="Enter your name" required>
  </div>
  <!-- Email Field -->
  <div>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" placeholder="Enter your email" required>
  </div>
  <!-- Message Field (Textarea) -->
  <div>
    <label for="message">Message:</label>
    <textarea id="message" name="message" rows="5" cols="40" placeholder="Your message here" required></textarea>
  </div>
  <!-- Radio Buttons for Membership -->
  <div>
    <label>Membership Type:</label>
    <input type="radio" id="basic" name="membership" value="basic" checked>
    <label for="basic">Basic</label>
    <input type="radio" id="premium" name="membership" value="premium">
    <label for="premium">Premium</label>
  </div>
  <!-- Submit and Reset Buttons -->
  <div>
    <button type="submit">Submit</button>
    <button type="reset">Reset</button>
  </div>
</form>

Questions?