Lesson 10: Introduction to HTML - Building the Foundation of Web Development

August 4, 2023 24/7 Teach

Prefer to listen to this lesson? Click below.

Your browser doesn't support HTML5 audio

Lesson 10: Introduction to HTML Powered by 24/7 Teach

Week 5: Introduction to HTML

Introduction

Welcome to Week 5 of our Full-Stack Software Engineering Course at 24/7 Teach! So far, we've delved deep into the world of programming fundamentals, algorithms, and data structures. This week, we're going to shift gears and dive into the realm of web development, starting with HTML.

HTML, or HyperText Markup Language, is the standard markup language for creating web pages. Without HTML, your favorite websites would be nothing more than unformatted text and raw data. By the end of this week, you'll understand the core concepts of HTML and how to use various HTML elements to structure web pages.

Learning Objectives

Understand the role of HTML in web development
Create a basic HTML page
Use HTML tags to structure your web content
Understand and use forms, tables, and other complex elements
Create a simple webpage for 24/7 Teach

What is HTML?

HTML stands for HyperText Markup Language. It's a markup language that structures the content on the web. Every website you've ever visited is built, at its core, with HTML.

Real-world Application: Imagine HTML as the blueprint of a building. Just as a blueprint guides builders, HTML guides the browser on how to structure the web content.

Basic HTML Structure

An HTML document has a standard structure, including elements like <!DOCTYPE html>, <html>, <head>, and <body>.

html

<!DOCTYPE html> <html> <head> <title>24/7 Teach</title> </head> <body> <!-- Your content here --> </body> </html>

Real-world Application: If you're building the 24/7 Teach platform, the <title> in the <head> section could represent the page title that appears on the browser tab, helping users to identify it among multiple open tabs.

HTML Tags and Elements

HTML consists of elements, and these elements are depicted by tags. The most commonly used HTML tags are <h1>, <p>, <a>, <img>, etc.

html

<!-- This is an HTML comment --> <h1>Welcome to 24/7 Teach</h1> <p>This is a paragraph.</p> <a href="https://www.247teach.org">Visit 24/7 Teach</a>

Real-world Application: When creating content for 24/7 Teach, you could use <h1> for main titles and <p> for explanatory text.

Forms and Input

HTML forms are pivotal for gathering user data. Form elements include <form>, <input>, <label>, <textarea>, etc.

html

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

Real-world Application: Forms are crucial when developing features like the login or sign-up pages for the 24/7 Teach platform.

Tables

HTML tables are used for presenting data in a tabular format.

html

<table> <tr> <th>Name</th> <th>Role</th> </tr> <tr> <td>Alice</td> <td>Teacher</td> </tr> </table>

Real-world Application: In the 24/7 Teach admin panel, tables could be used to neatly display lists of registered users, courses, or grades.

What is HTML? (Expanded)

HTML is not just a markup language; it's the semantic backbone of the internet. When we talk about semantics, we mean that HTML tags carry meaning. For instance, when you wrap text around the <strong> tag, you're indicating that the text should be "strongly" emphasized, typically represented by making the text bold.

Real-world Application: In the 24/7 Teach platform, strong emphasis could be given to key instruction words within a lesson or activity to ensure that students focus on important concepts.

Basic HTML Structure (Expanded)

The <head> section is where you include meta information, link external resources like CSS or JavaScript files, and set the character encoding. All of these help in either the rendering or functionality of the webpage.

html

<head> <meta charset="UTF-8"> <title>24/7 Teach</title> <link rel="stylesheet" href="styles.css"> <script src="script.js"></script> </head>

Real-world Application: On 24/7 Teach's platform, the <head> section could link to specific stylesheets that define the look and feel of different courses or subjects. This allows a tailored experience for each user.

HTML Tags and Elements (Expanded)

HTML tags can also have attributes, providing additional information about the element. For instance, an <a> tag uses the href attribute to determine the link's destination. The <img> tag uses src (source) to specify the image file and alt to provide an alternative text description for accessibility.

html

<img src="logo-247Teach.png" alt="24/7 Teach Logo">

Real-world Application: The alt attribute is especially important for a platform like 24/7 Teach, which should aim to be as inclusive as possible, catering to students who may rely on screen readers.

Forms and Input (Expanded)

Form elements can also include radio buttons, checkboxes, and dropdown lists, among other types. The action attribute in a <form> specifies where to send the data upon submission, while the method attribute dictates how to send data (typically "GET" or "POST").

html

<form action="/submit" method="POST"> <!-- Various form elements --> </form>

Real-world Application: The method used in form submission is essential when designing a secure login or data submission system for 24/7 Teach.

Tables (Expanded)

HTML tables have evolved significantly, but they still serve as an effective way to display data. You can also nest tables or make them responsive.

html

<table> <thead> <tr> <th>Name</th> <th>Role</th> </tr> </thead> <tbody> <tr> <td>Alice</td> <td>Teacher</td> </tr> </tbody> </table>

Real-world Application: For 24/7 Teach, a responsive table design can help students and educators easily navigate course listings or performance metrics on various devices.

Conclusion (Expanded)

This lesson was designed to teach you HTML and make you appreciate its role in structuring the web. For platforms like 24/7 Teach, understanding how to use HTML properly is critical for building an effective, accessible, and user-friendly educational experience. Next lesson, we'll explore how to make these HTML structures visually appealing with CSS. Stay tuned!

Remember, learning to code is a journey, and every line of code you write brings you one step closer to becoming a proficient full-stack developer. Happy coding!

It's time to test our understanding and engage in insightful discussions.

Lesson Questions: Please answer each question below and be ready to explain your answers.

See this form in the original post

Project: 24/7 Teach - Course Cover/Sales page

In this project, you'll apply everything you've learned so far to create an interactive landing page for a new course offering from 24/7 Teach. This is not just another exercise; your page will simulate a live environment where actual students can get details about the course, sign up for updates, and connect via social media.

Requirements

For this project, make sure to include the following elements using only HTML:

Headings: Use various levels of headings (<h1>, <h2>, etc.) to structure your content, introducing the course and its modules or sections.
Paragraphs: Use paragraphs (<p>) to provide more details about the course. For instance, you might elaborate on what students can expect to learn, who the course is suitable for, and so on.
Images: Add relevant images (<img>) to make the page more appealing and to provide visual insights into the course content. Make sure to include alt attributes for accessibility.
Form: Include a form (<form>) where students can sign up for updates about the course. At a minimum, this should collect their name and email address.
List of Features/Topics: Utilize ordered (<ol>) or unordered (<ul>) lists to enumerate the course features or topics that will be covered.
Contact Details and Social Media Links: Use anchor tags (<a>) to allow students to send an email for more information or to follow 24/7 Teach on various social media platforms.

Feel free to use any text editor and browser for development. After completing this project, you’ll not only have a better understanding of HTML but also have a practical example to showcase in your portfolio.

Real-World Application:

The landing page you create could serve as a prototype for 24/7 Teach to attract more learners to their platform. It’s a perfect example of how HTML is used in the industry to create structured, informative web pages.

Additional Tasks:

Use HTML5 semantic elements like <header>, <footer>, <section>, <article> to structure your page content more meaningfully.
Add a FAQ section using a descriptive list (<dl>, <dt>, <dd>).
Implement an HTML table (<table>) to compare this course with other popular courses on 24/7 Teach.

Evaluation Criteria for the Project:

Proper use of HTML tags and elements: 40%
Adherence to the requirements: 30%
Cleanliness and readability of code: 20%
Creativity and user experience: 10%

The project will be considered successful if it meets at least 80% of the total evaluation criteria. The aim is to not just technically fulfill the requirements but to also produce a well-documented, easily maintainable, and efficient codebase.

Reflection:

After completing the project, take a moment to reflect on what you've learned. Include in your presentation answers to the following questions:

What did you find challenging?
What about this topic intrigues you the most?
What did you learn about yourself?

Participate in the Group Discussion:

Please answer the discussion question in the comment section below.

How did the application aspect of this project affect your approach to writing HTML, especially considering it's for an educational platform like 24/7 Teach? What additional elements did you consider adding to enrich the user experience and engagement?