If you’ve decided you want to learn how to code, HTML is a great place to start.
Coding is like techie magic. You can create something awesome from nothing!
Here we’ll cover just a few basics to get you introduced to learning HTML code:
- HTML is ONE type of coding language. There are many.
- HTML stands for “HyperText Markup Language”
- HTML is to a website what bones are to the human body: It gives your website its basic structure
Please share this post with others if you like it
You can start creating HTML files with a simple text-editor on your computer
You DON’T need any fancy software to create a website from HTML!
Start creating an HTML file NOW if you want
- Open a basic text-editor (the one that came on your computer will be great)
- Name it whatever you want, but be sure that the file extension is .html (EX: newfile.html)
- If your file is saved as newfile.txt or newfile.doc or anything else, the browser won’t know that it should translate that code into a website, it’ll just be text.
Setting up your first HTML document
Every HTML file needs to have this basic code:
TAGS & ELEMENTS
- Almost every element in HTML includes a pair of tags (we’ll go into more details in later posts on the ones that don’t)
- First you need the opening tag – where the element is first introduced
- Then you need to closing tag – where the element ends
- <p>This “p tag” (opening tag) signals the beginning of the “paragraph” element. The element includes the tags, and the content between the tags (which in this case is the text you’re reading right now. The closing tag is here </p>
- The only difference is that the closing tag has the slash before the “p”. Think of it like a door being closed.
The basic HTML file setup: What it all means!
This is the first thing to be written into the HTML document. It tells the computer this is an HTML file.
This element holds information the the browser (Firefox, Internet Explorer, Chrome, Safari, ect.) uses – it can hold other elements which give the browser more information such as:
- the <meta> element which can include keywords to help the browser understand what sort of website you have
- the <title> element which displays the page title at the top of the browser (can you see this site’s title at the top of your browser/tab?)
the “head” tag gets closed early in the document, before we move on to…
This tag holds most of your code. Here you write the code that tells the computer where your
what <img src=”myimage.jpg”> images you want where, and you can add different boxes (often created with the <div> (“divider” tag) to start giving your website a design.
NOTICE: The <img> tag is an exception to the rule and DOES NOT need a closing tag.
Your “body” tags can contain many MANY different tags between them.
And finally, we need to close the last door…
or in other words:
this is the tag that closes the document, and is the pair with <!doctype html> which was the VERY FIRST tag we added to our document.
For a list of the different HTML elements that can be used in your code go HERE
Play with your code!
Make sure you set up the document correctly – ask questions if you have them in the comments!
Then add a few paragraphs, images, and headings (<h1>BIGGEST</h1> <h2>SECOND biggest</h2>) to your webpage.
If you’ve set it up correctly you should be able to find the file on your computer (once it’s been saved!) and double click or right-click, “open with….” and choose your browser, then your site should open in your browser window.
Hopefully this gave you a basic understanding of what HTML is and how it works
If you have questions, feel free to ask in the comments.
*There may be affiliate links in this post. There may not be affiliate links in this post. Life’s full of mystery. And hopefully pizza.