Instagram

Follow Me!

Career Code Technology

An Intro to Coding, Understanding HTML

July 18, 2017
Computer with code on the screen

When I say coding or computer programming how many of you know what Iโ€™m talking about? How many of you think โ€œIโ€™m not a techie person, there is no way I will understand any of thisโ€ and then your eyes glaze over? Well, Iโ€™m here to tell you that ANYONE I mean ANYONE can learn how to code. Itโ€™s a language and it takes practice but you can do it. Two years ago I didnโ€™t know how to write a single line of code and now this is how I make my living.

Coding or computer programming is just a set of instructions that we give to the computer to make the computer do what we want it to do. When you break it down itโ€™s that simple. So letโ€™s not wait another moment. Iโ€™m going to explain to you what HTML is, What CSS is and how to read it and write it. Will you be an expert coder after reading this post? If only it was that easy. You may not be the next (insert geeky superstar developer here) but you will have a better understanding of these two languages and when and what they are used for, and it will change the way you look at the internet. So are you ready to build the internet? Letโ€™s get started!

HTML which stands for hypertext markup language. It is the language that your internet browser reads and most of the web pages that you see and visit on the internet will use html to markup the content on that webpage. HTML is a markup language and not a programming language and is therefore one of the easier languages to learn. Itโ€™s important to note that HTML is used to build the structure of your webpage. Think about it like you are building a house. HTML is the foundation, the walls, the roof. The main purpose of CSS is to make HTML look pretty so it is used for anything style related (fonts, colours, size, etc.), but we will get to that later. Always remember that HTML should be used for the structure of your website.

First things first, letโ€™s talk about browsers. Browsers are the tool that you use to view pages on the internet. Some popular ones are Google Chrome, Mozilla Firefox, Opera, Safari, and Internet explorer. If you are building webpages for a living you will need to download all of these browsers and test your websites to make sure they work on each one. But for the purposes of learning I suggest you download either Google Chrome, or Mozilla Firefox, . As these two work the best and are the most up to date when it comes to reading the code you write.

A little review. What is HTML? HTML is the language that your internet browser reads, It stands for Hypertext markup language and it is used to build the structure of your website. It is the skeleton or scaffolding of the website. Styles should not be written inside of HTML. HTML is used for structure and layout of a web page only.

Letโ€™s start reading and writing some code. HTML is made up of elements. Each of these elements has an opening tag and a closing tag. The main difference between the two is that the closing tag has a forward slash in it. Always close a tag when you open a tag. If your code is broken go back and make sure youโ€™ve closed all of your tags. This is usually where issues start to arise. Tags use < > and /. Take a moment to find these symbols on your keyboard. One more thing to note is that tags are case sensitive so make sure you are not using capital letters.

There are hundreds of different tags and no one expects you to memorize all of them, but when you see a tag you should understand what it is used for. So letโ€™s talk about some of the different tags and their purposes.

 <!DOCTYPE html>

tells the browser, hey browser we will now be speaking to you in HTML.

<html></html>

All of the HTML that we write should be written inside of opening and closing html tags.

<head></head>

I always try to explain the head tag like the head of a person. When you are thinking something inside of your head people cannot see your thoughts. The head tag works the same way. Itโ€™s all of the information that you want to communicate to the browser but you donโ€™t want it to display on the web page.

<body></body>

The body tag is the opposite of this. Just like people can see your body the body tag is used for the things you want your audience to see on the web page. Everything that shows up on your webpage will be written in between an opening body tag and a closing body tag.

<header></header>

This can be a little confusing, but it is the very top section of your website. Note that

<head></head>

and

<header></header>

are two totally separate tags with different purposes.

The Heading tag – this includes

<h1></h1>

all the way to

<h6></h6>

and if you think of these as titles and subtitles like you are writing a paper it will make more sense to you. So h1 would be the most important title and it will only be used once on a page. h2 would be a title of a section of your website, h3 would be a subtitle, h4 a subtitle of a subtitle and so on.

<p></p>

This is the paragraph tag. Every single paragraph that you write on your page will be inside of an opening paragraph tag and a closing paragraph tag. When you start a new paragraph you open a new tag, when you end a paragraph you close the tag.

<section></section>

Most websites are made up of different sections and this helps keep all the content of a particular section together.

<div></div>

a div is like a container that keeps different elements together. Think of a pile of legos spilled on the floor, if I want to move my pile across the room it would be very difficult, however, if I put all of my lego in a container first it would make it much easier to move. So we use divs to group elements that we want to keep together so they are easier to move around the page. This is similar to a section but you would use a div inside of a section to keep things grouped together within that section.

<nav></nav>

is the navigation of your website. Usually found at the top. And the nav will likely have

 <a></a>

anchor tags inside of it, pointing to different locations on your website.

<footer></footer>

The footer is the bottom section of your website. It lets your reader know the webpage has ended and usually contains things like contact information.

This is what a basic HTML Document looks like, save this code somewhere because you will start every HTML document you write like this:


<DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<!-- All content that shows up on the page will go here -->
</body>
</html>

Before we move on, let's discuss code organization and structure. If you impliment some best practices from the beginning this will save you a lot of headaches later on.
First of all code indentation is important. You will notice in the document set up above that not all of my elements are on the same line. If a tag is nested inside of another tag, it is indented a few spaces. This makes your code easier to read as your document gets bigger and bigger. You will also notice between the opening and closing body tags

 <!-- I'm a comment --> 

a comment with an opening angle bracket, and exclamation mark and two dashes some words and then two dashes and a closing angle bracket. This is called a comment. Comments are extremely helpful when you are learning to code, to keep things organized and they are also helpful when working on a team. Pro Tip: Comment the shit out of your code! The comment won't show up in your webpage and it will be helpful for anyone who has to read your code to know your thought process and what is going on.

Now that we understand some of the basic HTML tags, what they look like or what they are used for, I want to introduce you to the concept of nesting. We have already talked about this a little bit. Every tag that we open should have a closing tag. But sometimes we have tags inside of other tags. This is what we call nesting. An example of this would be a list. An unordered list uses the tag

<ul></ul>

we would use an unordered list for something like a grocery list where the order doesnโ€™t matter. If you buy the milk before the eggs itโ€™s not a big deal. Each item on that unordered list would be a list item using the tag

<li></li>

So the list items would be nested inside the unordered list like this


                             <ul>
				<li></li>
				<li></li>
			     </ul>

This is very common and as you write your HTML document you will be nesting a lot of tags inside of other tags. For example, everything your write in HTML is nested in between an opening and a closing

<html></html>

tag. Everything you see on the web page is nested between opening and closing

<body></body>

tags.

so far so good? Great, let's discuss tags with attributes. What are attributes? you may ask. Attributes are extra pieces of information that we can add to our opening tags to give the browser a little more information about that tag. Some tags, such as an anchor link or image tag have required attributes and then there are some attributes that are not required but we can add them to any tag.

Two of the most important attributes you will learn about are ids and classes.
Classes can be used multiple times on a single page and they are used to target elements we want to style later on when we get to CSS.
IDs are just like classes except that you can only use an id once on a page and although they can be used for styling, ids are mostly used to link to different sections of a page.
A note on naming. You can call your classes and ids anything you want. Classes and ids cannot contain any spaces. You can use dashes - , underscore _ or camelCasing instead. Pick one naming method and be consistent. Classes and ids do not take any special characters !@#$%, etc. and they are case sensitive so if you use a capital when naming a class or id you will also need to use that capital when referring to or "calling" the class or id later.

Some common tags with required attributes and the anchor link, which has a required attribute of href. href tells the browser where to go when the link is clicked.

And src in the image tag. src tells the browser where to find the image that you want to display. The image tag also has the alt attribute, and while this is not required it's a good idea to include it. The alt attribute describes what the image is in text. This is for people who may be visually impaired and using a screen reader and it's also for SEO since google bots can't see your images, but they can read your alt text.

give yourself a pat on the back! You now know enough html to build a very website.

Some great places to practice these skills:
Mozilla Thimble - an online free text editor
CodePen - it's an online community for testing and showcasing user-created HTML, CSS and JavaScript code snippets.
Code Academy - an online platform that teaches you how to code for free.

Or if classroom learning is more your style, why not come to Bali and spend 10 days learning to code with me? Come and join me at the Institute of Code where I am currently teaching. Our intensive web-dev course will teach you HTML, CSS, and JQuery. You will also learn how to use Git Hub and the static site generator Jekyll. Our immersive environment is a refreshing approach to education. By putting you in a comfortable environment with nutritious food, inspiring mentors, small class sizes and giving you all the resources you need you will be able to focus on learning intensively for ten days and you will walk away with the knowledge of how to build a website from scratch as well as a portfolio site which you will build as your final project.