HTML Introduction: Web Development Tutorial Series Part 1

html introduction

HTML Introduction

Before we start, I’d like to say, Don’t worry about understanding everything is this lesson. This is just an HTML introduction to get you familiar with it. We will go over each of the topics discussed here in more detail in future lesson. HTML (Hyper Text Markup Language) in simplest terms is the standard language that web browsers read and render into visible and audible web pages. HTML is not a complex programming language and can be learned considerably fast. For people that use website creation tools like WordPress; knowing basic HTML can mean a world of difference when it comes to adding content to your website. HTML combined with CSS are the two biggest languages in web development and design. Just about every single web page that you see on the internet is a .html file. These files contain HTML tags and elements that instruct the browser how to display text, image, and audio content. When you click on a Home button, for example, you are actually clicking on a link to another .html file in the site owners website directory. Advanced HTML is very often used for online gaming nowadays as well. NOTE: You should also know that when you hear someone talking about HTML5; they aren’t talking about a new language. They are talking about the version. Which as of right now is HTML5. New versions are basically updates. Think of HTML as a giant toolbox at your disposal for you to use as much or as little of as you want. This “toolbox” is added to and improved when new versions of HTML come out. See the example below, to get an idea of what a basic HTML document looks like.

Sample HTML Document

introduction to html

Sample HTML Document Ran In A Web Browser

html introduction

I should point out that throughout these lessons; the text editor that I’ll be using is NOTEPAD++. I’m not affiliated with Notepad++; it’s just the text editor I use for web development and design. If you want to see the same display on your computer as in these lessons, you can download it for free HERE, but that is completely up to you. I have downloaded it from this site many times and have never had a problem, but you should always be careful when downloading software. Only use websites that you can trust. Download at your own risk. There are tons of free and paid text editors to choose from, and will all have similar features. You could even use plain notepad on PC or TextEdit on MAC if you wanted. Just know that these two editors are very basic, and might not be the best when just starting out.

In the above Sample HTML Document, we have a very simple example. But this is pretty much the basic framework or “skeleton” of any web page that you see on the internet. Pretty simple right? It’s just a text document with markup tags. The markup tags give instruction to the browser to do specific things with the content inside of them. The second image shows what the HTML document looks like when ran in a browser.

Let’s break down the elements in the Sample HTML document.

  • <!DOCTYPE html>
      This line is called the doctype declaration and is the first line you enter in every HTML document that you create. It tells the browser what version of HTML you are using. You can get very specific with this. But know that since the release of HTML5, you only need to add this declaration. It’s basically universal.
  • <html>
      This is the opening HTML tag. It tells the browser that everything after this tag and before its closing tag located at the very end of our HTML document is HTML. You can identify a closing tag by the addition of the /.
  • <head>
      The opening head tag. The head element is used for many things including holding the title element, meta information like a description, keywords for the specific page, and links to external CSS style sheets, to name a few. We’ll talk about the title element next because that is what our head element is holding. The closing </head> tag gets added after the title element.
  • <title>Basic HTML Document</title>
      The title element is nested inside of our head element. An element consists of an opening tag, content, and a closing tag. For the most part. There are some nuances to this that we’ll go over in this tutorial series. The content for our title element is the text between the opening and closing title tags, which is “Basic HTML Document”. In the second image above, you can see this title information was entered on the little tab at the top-left of the browser page, and is not inserted directly onto our web page.
  • <body>
      The opening body tag indicates the beginning of the actual visible content that you will see on a web page. Everything in between the opening and closing body tag is what you will actually see when viewing the web page in a browser.
  • <h1>content</h1>
    <p>content</p>
    <h2>content<h2>
    <p>content</p>

      Here, we have four HTML elements. There are two heading elements; an h1 and an h2, And two p elements (paragraphs). These types of elements go inside of our body element and will display in the order in which you put them by default. This is because HTML documents are read from top to bottom. When this document is ran in a browser, these are the visible elements that you will see on a web page. It will not display the opening or closing tags; just the content inside of them. The tags are the markup that tells the browser how to format and display the content inside. When we get farther along in this series, you will be doing things like nesting elements inside of nested elements to create specific styles.
  • </body>
    </html>

      Finally, we have our closing body and HTML tags to tell the browser that this is the end of the body element and the end of the HTML document.

Keep in mind that this is just an introduction. Don’t worry if you don’t completely understand what we discussed here. This is just to get your feet wet. A few other important notes: In your text editor, before you even start to write code, you should name and save your document as a .html file. The reason for this is that most text editors will highlight certain parts of your code to help you write better, and to let you know that it recognizes certain things as what they are. This is good because it’s very easy to forget simple things like adding a closing tag. Good practice would be to write both the opening and closing tag first, and then go back and add your content inside. This will save you a lot of headaches. The last important thing to know is before you actually run your code in a web browser, you need to re-save your work. You have to save any time you alter the code or the changes won’t show up on the web page. Most text editors will prompt you to save your work if you forget and try to run it or close the editor.

That’s gonna do it for this intro. If you would like to get a better idea of how to setup and save your HTML documents and even add an external CSS stylesheet and image folder, you could check out this lesson from the CSS Web Design Tutorial Series: WEBSITE FOLDER SETUP WITH EXTERNAL STYLE SHEET. Thanks for reading, and I’ll see you in the next lesson where we’ll learn about HTML tags and elements in more detail.

posted by Clear Coded Programming

Interested in web development, design and programming?
Sign up for the newsletter to receive updates

Please Leave a comment

%d bloggers like this: