HTML html-basics-part1

Published on May 19th, 2013 | by Mark Ammay

1

HTML Basics – Part 1

So you want to start building your first website? Well I’m going to teach you by first showing you HTML basics, and how to get started right away! In the first part of our Introduction Course I’ll briefly cover the main idea of HTML and why we use it today as our predominant markup language for developing websites. By the way, you don’t necessarily need to be connected to the internet at this point since we will be previewing our HTML document through our browser. Also, I show you a great website coding “sandbox” where you can test your code (but that one will require an active internet connection).

Did You Know? You don’t need expensive software like Dreamweaver to develop websites. In fact, software like this can actually bloat your code by adding extra elements you don’t need. But if want to use it, go ahead!

What You’ll Need:

What You’ll Learn / Get:

  • HTML basics
  • Previewing your website
  • Using the live  coding sandbox

Did you pick out your galoshes yet? Just kidding, I actually had to look that one up because I never really knew what they were (just seeing if you’re paying attention!). If you’re not sure what kind of html/text editor is good for you, stay with me and I’ll explain the few things to look for in a plain text editor. Also, my favorite browser is Firefox but you can use Chrome, Safari, or even Opera. Guess which browser I left out — comment below if you know why (extra credit points)?

Really Quick History of HTML

  • 1990: HTML 1 came out (archaic, simple)
  • 1995-1997: HTML 2.0 to HTML 4.0 was born (improvements, features)
    This was the standard back then, and allowed for coders to be messy and unorganized.
  • 2000-2006: XHTML 1.0 and 2.0 came out as well (incorporated XML)
    Note: XHTML and HTML4.0 are very similar, but XHTML is stricter
    This was created with the notion that HTML should have stricter syntax rules, and make coders code better.
  • 2009: XHTML 2.0 gets abandoned (not quite up to par)
  • 2008-Present: HTML5 is here and will be the new standard for HTML (focus on this)

What is HTML?

HTML stands for Hyper Text Markup Language (created in 1990), and all you need to know is that it’s the language you use to code the structure of your website.

Think of HTML as just the framework of your website, the wooden framing of a house, or just the bones of a human body. That’s really all it is if you really think about it. It does amazing stuff, but CSS will take care of your styling, and JavaScript will take care of some functionality and animation (but you’ll learn later on what kind of amazing things HTML5 and CSS can do on your website — hint, hint).

A quick side note! Do you notice the text that says “Put your  main content here”? This is called an HTML comment and anything you put within the comment tags <!– –> will be ignored by the browser. It’s great to put notes for yourself and even other web developers for future references.

Did You Know? Oh BTW – go to ANY website you want, right-click and “View Page Source”. This is the HTML and other website elements that make up that website.

Really Brief Explanation of Tags

Tags are used to identify content. The example above is a basic HTML5 document which includes a DOCTYPE, html, head, title and body element or tag. Here’s an explanation of these tags:

  • <DOCTYPE> – This simply tells the browser which HTML version you’re using.
  • <html> – All your content goes in here.
  • <head> – Contains any paths to style sheets and scripts, your title and meta tags.
  • <title> – Your website’s page title.
  • <body> – All the contents of your page such as text, links, images, lists, and more.

There are many more tags that you can use in your website structure to identify things with. Here’s a few more tags that you will be using soon, in your HTML5 document. Now these are just a few tags that you will use, but you will learn the rest later on:

  • <img> – An image tag, for inserting, well… images.
  • <p> – Paragraph tag, for adding… probably paragraphs.
  • <div> – A div tag that blocks a section of your site for formatting reasons.
  • <h1> – A heading where h1 defines the most important heading.
Note This: Tags can have attributes to give it more meaning and context. For example, your <img> tag can have a width, height, alt, and title attribute. We’ll discuss this more later on.

A word on ID and class attributes: For styling purposes (and other things), the most common attributes you would use in HTML tags are the ID and Class attributes. ID tags are unique and you cannot have two or more HTML tags with the same ID. Classes can be used more then once.

In the next guide on applying CSS styles, you will learn how to use CSS selectors to target specific HTML tags by their ID and Class attributes. Here’s a very common piece of code that you will use in the future:

Why HTML5?

HTML5 is nothing more then the new standard for HTML that is currently in development today, and it has brand new features for us to use that HTML4 does not have.

K.I.S.S (Keep It Simple Stupid) —If you feel overwhelmed or confused at all about what the heck HTML5 is or isn’t, then I encourage you to take a step back and just think about this: HTML is just a set of text instructions that make up your website.

Step 1 – Choosing an Editor

There’s a ton of FREE and PREMIUM plain text editors out there for you to download and use. I’ve taken the liberty to layout a few of them that I’ve tried myself, and some from other developers’ recommendations:

Note This: The things to look for in a code editor are syntax highlighting (tags and elements are highlight in different colors), syntax error highlighting, and displaying numbered lines.

Here’s sample code / syntax highlighting and line numbering using Sublime Text 2, my favorite text editor (note: this is just a screenshot!):

html-sublimetext


Step 2 – Your First Document

Remember the piece of code we looked at earlier? You know, the HTML5 document which included the DOCTYPE, html, head, title and body element? Let’s copy and paste that code into our text editor.

Next: Save your document as “index.html” somewhere on your computer.

Now, open this document in your web browser (double-click the “index.html” file or drag it into your browser). You should get something like this.

Congratulations! You’ve just previewed your first HTML document! Creating a web is as easy as that.

html-document-index


Step 3 – Understanding HTML

Now that you’ve learned how to copy and paste code (which is totally fine btw – why re-invent the wheel), you need to learn what you just did. I’ve added some comments within the code, ya know, the gray text that looks like <!– this –>. But let me explain a little more.

What this^ means: So here we have the standard <!DOCTYPE>, <html> tag and the <head> section. In this head section is where you place your page <title>, as you just did. Also, you will learn later on how to put <meta> tags, <script> and <link> tags.

What this^ means: Here you have an outer <div> section that has a few attributes such as a width of 100% (which makes the <div> stretch all the way from left-to-right), but it also has a max-width of just 500px (which makes the div stretch until it reaches 500px wide). Don’t worry too much if you don’t quite understand what this means. Just know that you can give attributes to <div> tags and other tags.

Also, notice that there are 2 inner <div> tags both with a background-color attribute of “LightGray”. These represent <div> sections used to break up parts of your website. Just note that you can nest <div>’s within <div>’s.

Then you have an <h1> tag which is your heading, and by default it’s large and bold. In our next guide we will discuss how to style this <h1> tag to look how we want it. Just note that <h1> tags give the most importance, and then the rest follows <h2><h3><h4> and so forth.


Step 4 – Customization

You should now have a basic understanding of the elements of your web page. But now, let’s customize our HTML document with our own content (if you haven’t already that is!).

Using the Coding Sand Box

One of the best ways to learn is to experiment on your own and look at examples from others. Here’s an example of how I customized this page. Check out my code and feel free to customize the HTML through my JSFIDDLE SandBox.

Did You Know? In JSFIDDLE you can modify someone’s code and then hit “RUN” to see your changes! You can also modify not only the HTML, but also the CSS and JavaScript!

html-document-jsfiddle

Up Next: CSS and Styling, Part 2

In the next guide, we uncover the magic of Cascading Style Sheets or CSS. Remember, HTML is for building the bare bones and structure of your website, and CSS is to dress it up with painted walls and decor.

Note This: You actually already did some CSS by adding the “style” attribute to some of the <div> tags, but those were inline styles. We will get more advanced in our next guide. See you tomorrow!

Introduction Course Outline:

Tags: , ,


About the Author

Hey it's Mark Ammay. I'm a Web Developer with over 5 years of professional experience in the industry. I help individuals start their own website from scratch, as well as through WordPress. I'm also an Online Entrepreneur who blogs at www.MarkAmmay.com



0 comments

Trackbacks

  1. […] Part 1: HTML Basics – Introduction Part 2: Applying CSS Styles Part 3: JavaScript Interactivity Part 4: Building a Full Website Part 5: Choosing a Domain and Hosting Part 6: How To Upload Using FTP […]

Back to Top ↑