Learn to basics about the first language of #webdesign: HTML. This quick and easy guide will get you coding right away and have you on your way to creating your own web pages!

A Total Beginner’s Guide to Learning HTML Code

Shares keep this blog alive...Share on StumbleUpon13Tweet about this on Twitter3Pin on Pinterest6Share on Facebook0Share on Google+96Share on LinkedIn0

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

Learn to basics about the first language of #webdesign: HTML. This quick and easy guide will get you coding right away and have you on your way to creating your own web pages!
Don’t lose this resource! Pin now, read later!

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

  1. Open a basic text-editor (the one that came on your computer will be great)
  2. Name it whatever you want, but be sure that the file extension is .html (EX: newfile.html)
  3. 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:


<!doctype html>
<head>
<title>Site Title</title>
</head>
<body></body>
</html>


Learn to basics about the first language of #webdesign: HTML. This quick and easy guide will get you coding right away and have you on your way to creating your own web pages!
Don’t lose this resource! Pin now, read later!

TAGS & ELEMENTS

  1. 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)
  2. First you need the opening tag – where the element is first introduced
  3. Then you need to closing tag – where the element ends
  4. <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>
  5. 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!

<!doctype html>

This is the first thing to be written into the HTML document. It tells the computer this is an HTML file.

<head>

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?)

</head>

the “head” tag gets closed early in the document, before we move on to…

<body>

This tag holds most of your code. Here you write the code that tells the computer where your

<p>paragraphs are</p>

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.

</body>

And finally, we need to close the last door…

or in other words:

</html>

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.

Learn to basics about the first language of #webdesign: HTML. This quick and easy guide will get you coding right away and have you on your way to creating your own web pages!
Don’t lose this resource! Pin now, read later!

CodeAcademy

Code School

Lynda.com: HTML Essential Training

(Get 10 days of free unlimited access to lynda.com.)

HTML & CSS: Design and Build Websites


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.

Tweet it

A newbie's guide to learning HTML #code for #webdesign + a resource list Click To Tweet

Learn to basics about the first language of #webdesign: HTML. This quick and easy guide will get you coding right away and have you on your way to creating your own web pages!

Shares keep this blog alive...Share on StumbleUpon13Tweet about this on Twitter3Pin on Pinterest6Share on Facebook0Share on Google+96Share on LinkedIn0

About the author

TYB

A sarcastic introvert with a blogging compulsion and a tendency to pet ALL THE DOGS.
Problem-solver, critical thinker, tech-enthusiast, occasional artist, very-expensive-piece-of-paper-holder (aka my Psychology degree.)
Fan of chai tea, hard cider, and new places.

View all posts