Lightspeed Template Bootcamp Series (Lesson 1)
Adrian Samuel
Moderator, Lightspeed Staff Posts: 606 moderator
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
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
Integrations & Solutions Developer - Strategic Solutions
Lightspeed HQ