What is HTML? HTML stands for Hypertext Markup Language. It is markup language and not a programming language.
HTML documents are described by html tags such as <h1> <p> <a>. These tags describes a different type of content such as heading, paragraph or links.
We use tags to markup the beginning and end of an element
<tagname> content </tagname>
Each element is written with an opening tag (<>) and a closing tag (</>) with the content in between.
So your closing tag is the same with an opening tag but with a slash (/).
Web browsers such as Google Chrome reads the tags and translate them into visible web pages.
Now that we know what html is, we will move on to coding. Were you able to install the code editor? Do you need help? If there is no problems then we can now move.
The Structure of an html document
Now let’s create a new project in your code editor so we can talk about the html structure.
- Right click on your desktop and create an empty folder then name it “blogpost”
- OPEN the VSCode you installed and start coding.
- Go to file on the main menu. Click open folder.
- In the dialogue box that appears, navigate to desktop, open the folder – blogpost. Now VSCode will use this as your project folder. So all files in this folder will be part of your project.
- Go to File on the main menu and click New File or ctrl + N on your keyboard – a blank screen appears
- Go to the File on the main menu and click save or ctrl + S on your keyboard. Save the page as index.html so the computer recognizes it as an html document. Index.html is the standard name for the main html file of any project
Understand this. Html documents are described by elements.
All html document has a common structure where the html element is the first one always.
- Now type <html></html> on the blank screen – most times VSCode will close the tag automatically for you.
- Inside the html element, there are two key elements inside. The head and the body. These are the main components of any web page. So you place them within the html element so you have something like this:
<html>
<head>
</head>
<body>
</body>
</html>
Make sure you save it with ctrl S or File menu – save.
- Now within the <head> element is where you place the title of your website, css styles, some information for the browser or the search Engines and more.
- The <body> element is where you place everything that will be visible on your website. Links, images, texts and many more element.
- The above is the basic elements for any html document.
The DOCTYPE Declaration
The DOCTYPE Decoration must be the very first thing in your html document. It is placed before the html element declaration.
It is declared thus:
<!DOCTYPE html>
This is not an html element but an instruction to the browser to know the html version the page is written with. Now with this declaration you have just told the browser that this page is written with html 5. So now you have something like this on your page
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
Make sure you save everything. Could you do it? I want to hear your experience so far.
Now let’s fill the Structure with Content
In the <head> section we will give our webpage a title. To do that we use the title <title> tag. The title of the webpage appears on the title bar of the browser tap.
Now for the body let’s start with some text. Html has text for headings beginning with the <h1> for the main heading to <h6> for the less important heading.
<!DOCTYPE html>
<html>
<head>
<title>My First BlogPost</title>
</head>
<body>
<h1>My first blog Post</h1>
</body>
</html>
You can now view this on your browser.
There are two ways to do this. You can click on the live server icon at the bottom of the code editor or you go to the project folder on your desktop and double click on index.html this should open the file on your default browser.
To open the file with a live server which is what most developers do, I will show you how to install live server now. Note: Opening your work with live server will help you see changes you make to your work as you work on your project.
To install Live Server on your code editor
- Recall I talked about the 5 icons on the left hand-side of the code editor. The last icon there is where you have “Extensions”. You can hover your mouse to see the name displayed. Also check out the attached image.
- Click on the “Extensions” icon
- Search for “Live Server” in the search bar that appears by typing “Live Server”.
- You will have many results but usually the first one that appears is the best option
You know the right one by checking the publisher name. If the name is Ritwick Dey then you are good to go.
- Now click install
- After installing the live server, you can close the window.
- If you go to the bottom of your screen, you will be able to see the live server icon “Go Live”. Click it to see your on the browser.
Now if you make any changes on your project you will have to save it manually to see the changes in the browser. To curb this you need to on the autosave property
- Go to the gear icon below the extensions icon at the bottom of the left handside of the code editor
- Click the gear icon
- Click settings
- You will see Files: Auto Save. Change the property to allowDelay
- Change the Auto Save Allow Delay timing to 600 miliseconds
- Now once you make any changes it appears automatically.
If you did this. I want to say a big congratulations to you. If you find any difficulty, please contact me in the comment section. I will be there to help you.
Have you installed your code editor? Here is how you can install VSCode to get started.
However, if you want to support us, you can contact the admin on 08034417104.
Fill this form to be part of our community and click here to join our community whatsapp group.
