Here is the code. If you want to mess around with it.

Contact @jamesScript for further questions and informations.

Inline VS Block Level Elements
The Inline Elements are tags that doesn't start on a new line when they are used. and they take only the necessary width.
The Block Elements are tags that start on a new line when they are used. and they take as much width as they can.

Example for Inline Elements: Links(<a>), img(<img>), line break(<br>) etc
Example for Block Level Elements: <div>, Headers (h1-h6), Lists, Table etc

The <div> element or tag

It is mostly used as a container for the other HTML elements. There are no required attributes, style, class and id are common.

#HTML links
Links are found in nearly all web pages. Links allow users to click their way from page to page.
HTML links are hyperlinks.
You can click on a link and jump to another document.
When you move the mouse over a link, the mouse arrow will turn into a little hand. To show links on HTML an "a" tag is used.

<a href="url">Link text</a>
For example: <a href="google.com"> Visit google.com </a>

#Attributes
All tags can have attributes, it is mostly used to provide information about an element. they are always place on the starting tag.
<tagname attributename="attributevalue">content</tagname>
For example: <h1 title="My Company"> About Us</h1>

#Forms
We usually see a login or signup form in most websites. they were all build with HTML and then styled with CSS and other programming languages are used to make it dynamic. It is pretty easy to make a form. you basically need to know two tags to make a basic form. The label and input tag. First you will have to create a form tag.
<form></form> So the label and input tag will go inside the form tag. you will have to use a type attribute on the input tag to show the browser the type of data the user should enter.

On the first input the user can only type in a plain text, and it is mostly used for Names and usernames. The second input allows the user to type numbers only. And the third one is for passwords that means the characters the user enters is displayed as dots intead of a text.

This is what the output of the code will look like when the data is entered. They are all in the same line because. inputs and labels are inline Elements. we would have to wrap them inside a block level element like a div. to display them on their own line.

Here the div tags are used to display the elements in different lines and the br tag to give an extra empty line. To make it look like 👇

A code for the form and "a" tag in use

A little tip left out from yesterdays article. We can also add a textarea and a dropdown option on the form. A whole HTML form code with the output will look like this.

We use a select tag. and inside that an options tag which we want to display as a dropdown. In this case it is the Gender.

And a textarea tag alone without any elements can be used as an input.

And the output on the browser is this 👇

One more thing. you can use a "placeholder" attribute to make it look like more realistic.

And the last thing on form is buttons. Button can be made with a different types of way. There is a button tag that is mainly used. But You could also use CSS or Bootstrap to edit any link or text into a button.
<button>Click Me</button>
You can also add an attribute of the type
<button type="Submit">Submit</button>

#Images
To display images on a website as a background. CSS comes in handy. But just to display an image you use an img tag on HTML. If the HTML file and the image are in the same directory. all u have to do is just state the image's name with its extension in the src attribute inside the img tag.

<img src="car.jpg"> this code will definitely display the image if the images's name is "car.jpg" and if it is the same directory as the html file.

#HTML Class and Id
These are the most important things in HTML since they help select elements in different things. either to style the html using css or make the page dynamic using javascript the elements have to be selected and this is where the class and id attributes comes in handy.
Both class and id are used to give the elements in html a specific name which can be used in other languages later. The difference between them is classes can be used many times. while id names are different with every html element. you cant use the same id name that you used in the previous lines of code.

<h2 class="city">Paris</h2>
<p class="city">Paris is the capital of France</p>

Here we used the class name two times and that is okay. But with id the names have to be different just like

<h2 id="city">Paris</h2>
<p id="capitalCity">Paris is the capital of France</p>