Blog
HTML Image Blog Post

What the Hell is HTML?

By Cole Warren

Here at Lunar Logic, we take a holistic approach to digital marketing—from website and ad design to data analysis, Search Engine Optimization and social media strategy. But “holistic” for us includes looking at the the next generation of engineers and data analysis gurus who will fill our shoes in the future. This is why our engineering department has been working with teenagers who want to learn to code. They’ve started a seven week course called the Explorer Program to start teens on the coding road. It occurred to us that it would help others to learn some of what these up-and-coming teenage programmers are learning: the very basics of what our engineers do to work their website magic. In the next two blogs, we will be diving into the language of coding: the bones of website development. This blog is all about HTML.

HTML (Hyper Text Mark-up Language): Whether or not you’ve heard about it, you’ve probably seen it. Have you ever accidentally hit the F12 key, and come across a window filled with strange, segmented text and highlighted boxes that skip around your screen? Well, that segmented text is HTML, the code that programmers around the world use to make websites. This code is responsible for making every link, contact form and piece of text you see on a webpage.

If you plan on taking up the challenge of learning HTML, you’re in luck. HTML is one of the easiest programming languages to learn, and the internet if filled with free resources to guide you along. Before you get started however, here’s the rundown.

Tags:

HTML is made up of a series of tags. These tags will designate your text as a link, button or header, among many other things. You’re probably familiar with links; they are the blue lines of text you click on that lead you to another page. Buttons are small images that, when clicked, take you to another site. Headers designate the title of a section in a larger bold text. As you look at Lunar Logic blogs, you’ll see a lot of these. For example, if you wanted to create some unformatted text for your webpage, it would look something like this:

<p> Hello World </p>

The <p>s here refer to a paragraph. The first p tells the webpage to start a new paragraph, and the second <p> includes a /, which tells the webpage to end the paragraph.

Want to make it a link? It would look like this:

<a href=”url” > Hello World </a>

The <a> tag refers to an anchor, also known as a link. This tag contains the “href” attribute, a variable that can be given a value with the = sign. The value is the url of the webpage the link should take you to.

Tags allow you to get creative with your site. Many tags can be given specific information that allow them to take on different activities, whether it be navigating users across your website, or telling your webpage where to find an image to load. A tag that loads your company logo would look like this:

<img src="logo.jpg">

As you can see, this tag is slightly different. It doesn’t require text, so it is “self closing”, and only contains a single set of brackets. Img stands for image, src stands for source—this tag is telling your program the image you want displayed has a source file of Logo.jpg.

How to get Started:

Now you’re ready to get your feet wet and make a webpage reminiscent of something seen from the late ‘90s. The easiest way to test your newly written HTML code is to create a new text document, and save it as an .HTML file. You should be able to open up this file, and it will open a new window in your default web browser. Each time you edit the text of this file, simply reload the window you’re working on, and your new HTML should be loaded and ready to go, assuming your code is written correctly.

The internet is filled with documentation on HTML, and people asking/answering questions that all beginners should be interested in. You should be able to find the answers to all of your html questions by a simple Google search. If you’re looking for a more structured approach, we recommend you search for things like “HTML tutorial part 1” or “free HTML courses”. If you are local and a teenager wanting to learn, take a look at our Explorer Program.

While HTML is a great place to start, it’s far from all you need to know to make a functional website. The back end of most websites (those lines of written code that you never see) rely on more complicated coding languages like PHP and Javascript to run properly. There are similar advanced programming languages that can do all of the heavy lifting when it comes to storing data on your server, managing accounts, and even selling products.

Hungry for more?

Stay tuned for next week's “What The Hell is CSS” blog post. This article will get you started doing the fun stuff. You’ll be introduced to the basics of styling your webpage, bringing your webpage filled with white space and blue links into the modern age! If you have any questions or want to know more about HTML, feel free to contact us.

Image Credit: http://tinyurl.com/z5p54tn
Are You Ready to Start Your Project?