Simplified Series: Web Development – Intro to HTML

HTML is one of the basic building blocks of any webpage. In this post, we’re going to go through the steps of creating a basic page using HTML.

Webpages are created using HTML tags, which signify exactly what you want on the page. There are paragraph tags (which say “put the paragraphs here”), heading tags (which say “put the page headings here”), etc. So, let’s dive into some HTML tags:

  • <html> – This tag tell the browser that this is an HTML web page.
  • <head> – This tag contains information that’s not seen in the browser but is important nonetheless.
  • <title> – This tag displays the title of your webpage at the very top of the browser (above the address bar and the forward, back, stop, and refresh buttons) as well as in search engine results.
  • <meta name=“description” content=“Insert your description here” /> – This tag holds a description of your website which shows up in search engine results.
  • <body> – This tag signifies the beginning of the body of the page, which shows up in your browser screen.
  • <h1> – This is the page heading tag. It has brothers and sisters named <h2>, <h3>, <h4>, and <h5>. The <h1> tag is the most important heading, followed by <h2> and straight down the line.
  • <p> – This tag signifies that there is supposed to be a paragraph there.

Now that we’ve gone through the tags, here’s a set of code that is sufficient enough to generate a webpage in a browser:

<html>

<head>
<title>Andy Stitt’s Website</title>
<meta name=“description” content=“This is the homepage of Andy Stitt, a big website technology geek.” />
</head>

<body>

<h1>Welcome to Andy Stitt’s Website</h1>

<p>Hi, and welcome to my website. I am a big website technology geek, an MBA student, and certified in project management. Please visit my about page, links, and contact page for more information.</p>

</body>

</html>

Notice how almost all of my tags come in two versions, such as <html></html> and <p></p>. The first tag is the opening tag and the second tag is the closing tag. It is critically important that you always close your HTML tags, or else the web browser is left wondering “ok, I know there’s more stuff, but I can’t find it.”

The exception to this pattern is the <meta name=“description” content=“description here” />. This tag is open and closed, but it is done so with one tag. The “/” right at the end of the tag closes it. This is common for single-tag HTML tags such as <img />, which is used to display images on the screen.

Web development can get much more complicated than what I just displayed, but thankfully, it can also be as simple as what I just displayed. Those are the basics that you can use to create.

Any questions?

Leave a Reply

Your email address will not be published. Required fields are marked *