Lightspeed Template Bootcamp Series (Lesson 1)

Adrian SamuelAdrian Samuel Moderator, Lightspeed Staff Posts: 569 moderator
edited May 2018 in Tips, Tricks & How-to’s
Lesson 1 - Hyper-Text Markup Language (HTML)

Think of HTML as the foundation of a webpage. Without this strong foundation, we labour in vain.

I want you to imagine that a website as a modern “smart home”: Lights turn on when you walk into a room, the toilet automatically flushes when you finish using it and even the house temperature regulates itself to keep your comfort to its optimum.

Without the foundation, i.e. without HTML, there would be no room, no toilet, no heat. You’d basically be living cold, abysmal pit. This is all to simply say that, we need HTML.

HTML is made up of tags, specifically opening tags and a closing tags.

Let’s have a look at some basic examples of HTML

For the purpose of simplicity, we’ll only look at the body tag signified by:

The body is the container from which we can display our HTML content on the webpage

Let’s write a header using a header tag:



If I open this document using my browser, then it will display my content on the page. All I’ve done here is include a header tag inside the body of the document. Simple right?

Next i’m going to show you how to make a table. Tables are useful ways that people display data in a consumable format.

 Before we make our table, let’s think about what I want to display.

I want to have a table listing the age, name and gender of three individuals.

How do I translate this idea into HTML?

I need
1. A table tag to describe the format of my structure (table )
2. One row to display my table(column) headers (tr)
3. My table headers that are inside the first row (th)
4. Three Subsequent rows to show my data containing the data
(td)

An example of this can be seen below:




So this simple example of a table of information is made up of HTML tags from which we insert data inside.

You can learn more about HTML for Mozilla’s documentation here: https://developer.mozilla.org/en-US/docs/Web/HTML

Notice something? My table looks very ugly. HTML looks very ugly without some basic styling. Let’s move onto our next tutorial, CSS

Next Lesson

Back to Introduction
Post edited by Adrian Samuel on

Adrian Samuel

API Integrations Consultant - Strategic Solutions

Lightspeed HQ

Sign In or Register to comment.