We are starting with HTML; I’ll explain in full with details: kindly retweet for others. Welcome to your first class on HTML. To avoid missing future classes, kindly follow me on Twitter.
Congratulations, you are seeing this Tweet; here is a life-changing opportunity to transition into tech this year; we will be starting our coding journey.
I’ll explain like you are 5 years old; please retweet for others, and let’s begin!!
— Àgbà Akin (@Kynsofficial) January 3, 2022
Before we start, let’s talk about what you need to embark on this journey with me. – Tutorial will take place every Monday & Wednesday on Twitter threads
You need a PC and access to data connection and Twitter to keep up with us
You need an IDE such as VsCode application for PC Lastly to write and run your code
Lastly, you need zeal, determination and dedication
An IDE Means “Integrated Development Environment” it’s usually in the form of a tool; this is what we will be using to write and run our codes; there are various types We have
1. Xcode – Compiling and running iOS & macOS apps
2. Android Studio – Compiling and running Android Apps
In this tutorial, we will be using VsCode Get your PC and download VsCode From this link.
This tutorial will help you set it up.
I’m sorry, the hurtful truth is you can’t simply use only your phone to start your coding journey.
Now let’s get into today’s main course, which is HTML
What exactly is HTML?
We humans can tell the difference between a header and a paragraph by looking at a page; computers lack this intuition. To successfully display a web page, a browser must be explicitly told what each piece of content is.
By looking through the document below, you can tell which is the title, heading, sub-heading, and cover picture right away. Your computer isn’t nearly as intelligent.
So how exactly do we tell the browser what’s what? This is where HyperText Markup Language (or HTML for short) comes in handy.
HTML is a markup language that describes the structure/layout of your web page. We define this structure by wrapping elements.
An HTML element is formed using a tag, which serves as a descriptor for each piece of content on your page. As an example, the <p> tag is used to describe a paragraph HTML element. Some other examples of HTML elements include:
- <h1>: Highest-level heading
- <h6>: Lowest-level heading
- <img>: An image tag
- <a>: An anchor which creates a hyperlink to things like other HTML pages, files, email addresses, and more
Most HTML elements have both opening and closing tags to indicate where an element begins and stops, as seen below:
<p>writing a paragraph in HTML</p>
<h6>this is an heading 6 in HTML<h6>
There are a few exceptions, such as the <img> tag, which you will understand even better as we proceed.
<img src="emoji.jpg" alt="the picture of my dog.">
So let me show you how a basic HTML file looks on an IDE.
<!DOCTYPE html> <html> <head> <title>A Basic Web Page</title> </head> <body> <h1>My First HTML File</h1> <p>This is the beginning of my Frontend Web Development Journey.</p> </body> </html>
In the above image, The first line, <!DOCTYPE html>
The fact that the majority of HTML elements have both opening and closing tags to specify where an element begins and finishes is referred to as a doctype declaration. This parameter specifies the HTML version of the file that is written to a browser. When defining HTML for this file, it indicates that it was written in HTML5.
For the second line, note how the closing tag for the <html> is on the last line of the file. One of the properties of HTML elements is their ability to be nested. In other words, HTML elements can exist within other HTML elements.
<!DOCTYPE html> <html> <head> <title>A Basic Web Page</title> </head> <body> <h1>My First HTML File</h1> <p>Congratulations! You're learning to code from Agba Akin.</p> </body> </html>
Let me explain this further
<!DOCTYPE html> — This tag determines the language in which the page will be written. HTML 5 is used in this instance.
<html> — This tag indicates that we will now write in HTML code.
<head> — This section contains all of the page’s metadata — information that is primarily intended for search engines and other computer programs. The code we insert on this page will not be visually displayed to users.
<body> — This section contains the page’s content.
If you will like to take this course in full, practice in real-time, acquire certification, and more, please click here.