Have you ever wondered how websites are made, do you want to make one? You're going to need HTML without a shout of a doubt. This is an article for you if you are pushed for time or dont like reading. Let's get started. Take a look at this code but dont expect to understand it immediately.
<h1>Paragraph Header 1</h1>
<p>Some interesting text.</p>
<p>Broken <br> paragraph</p>
<p style="color:red;">Red Text</p>
<a href="google.com">A link to Google</a>
In HTML we use tags. Everything enclosed inside a set of <> is called a tag. It lets the browser know what it will be displaying. It's important to know that when you insert a tag you must have a closing tag. If you look at the above code you will see that we have a <html> tag. We also have a <html> tag at the end of the code. There is one difference, the tag at the end has a / in it. The / means it is a closing tag. Nearly all HTML tags have a closing tag but certain ones like <img> <input> and <br> tags do not need one.
Now let's get on to learning what these tags do.
<html> This tag tells the browser that are code is in html. All our HTML code goes inside the <html> tags.
<head> This tag is a container for other elements such as the <title> element, scripts and sources.
<title> This tag allows you to set the title of the page. The title appears at the top of the tab in the browser and in Google search results.
<body> Similar to the <head> tag, the <body> tag is a container for everything you want to display on your page.
<h1> Using his tag you can set headers on your page. You can also use <h2>, <h3>.... <h6> They each are different.
<p> This tag allows you to insert paragraphs. Anything under a <p> tag will automatically be offset by a few pixels.
<ul> This tag allows you to insert an un-ordered list, also known as bullet points. There is an ordered list tag which allows you to insert a list with numbers instead of bullet points. Inside both list we have <li>. <li> is the tag we use to specify list item.
<br> This tag is a simple line break.
<div> This tag is a simple container. You will see in our code example we have some style data. We set the margin-left to be 100px. This means that everything inside this <div> will be indented by 100px.
<center> <i> and <b> These tags allow you to set text to be centered, italic or bold.
<a> This tag allows you to insert hyperlinks. You can link to websites or have it open up mail with a preset email address in the 'To' row.
Here is an image of what we get when we run the above HTML code in a browser.
This is just the basics. In another tutorial we will get into images, forms, styling and more. I'd like to know what you thought of this tutorial so post in the comments!