Introduction to HTML

for Flask Project

Learning Objectives

  • Understand essential HTML elements
  • Build HTML templates for web pages
  • Create forms to collect user input
  • Integrate HTML with Flask using Jinja templating

Feel free to skip this section if you're already familiar with HTML tags and structure!

HTML Basics

  • Let's learn the absolute basics of an HTML file and how it is structured.
  • Basic HTML structure:
    • <html>
    • <head>
      • <meta>
      • <title>
    • <body>

HTML Tags

HTML Lists

  • Often you want to display information in a structured format, like:
    • list results from a Google Search
    • list your contacts on LinkedIn
  • List types:
    • Unordered list: <ul>
    • Ordered list: <ol>
    • list item: <li>

HTML Attributes

HTML Forms

  • A major function of websites it to accept user information as input.
    • Search
    • Registration Form
    • Any sort of submission to the website

Creating HTML Forms

  • HTML forms use <form> tags to encapsulate user input elements.
  • Inside <form>, <input> tags are used to collect specific data types (e.g., text, email, password).
  • Each <input> element includes attributes such as type, name, and placeholder.
  • A submit button, typically <input type="submit">, triggers the form submission to the specified action URL.

We'll integrate forms with Flask to handle form submissions and process data on the backend.

HTTP Request Methods

  • There are two main methods of submitting the form information

    • GET
    • POST

  • The method is specified in the <form> tag using the method attribute.

  • More HTTP Methods from W3Schools

HTTP Request Method - GET

  • GET requests data from the specified resource.
  • In forms, GET attaches data to the URL, sending it to the action endpoint.

HTTP Request Method - POST

  • POST submits data to be processed.
  • In Flask, we'll use POST to handle user input on the server side.

HTML Forms Selections

  • Let's explore a few more form input types that require extra element tags.
  • HTML Input Types