Now that's style!

a_250x375In this HTML tutorial I would like to introduce two concepts to you:

  • DOCTYPE
  • Styles

The DOCTYPE

Currently as of the date this was published, web browsers are (mostly) supporting HTML 5. HTML has gone through several versions and variations over it's lifetime, and because of this it's highly suggested that you include something called a DOCTYPE. The purpose of a DOCTYPE is to tell the web browsers what version of HTML you are using on any given webpage. The benefit of telling the web-browser what version of HTML you are using is that you save it from having to “guess”, which can often lead to strange behavior.

For the purposes of my tutorials, I will be using the most current version of HTML (which is HTML 5) in my webpages. Thankfully, the way to tell the browsers that you want to use HTML 5 is a piece of cake. Building on the last HTML example website, let's see what it would look like to include a DOCTYPE definition:

<!DOCTYPE html>
<html>
  <head>
    <title>
      Introduction to HTML
    </title>
  </head>
  <body>
    Hello World!
  </body>
</html>

Notice any difference?

All I've done is added one line at the very top: <!DOCTYPE html>

Piece of cake right? So you have no excuse not to remember to put it into the webpages that you'll be creating from now on! One thing to note is that the DOCTYPE tag has no closing tag, and this is because it's not an HTML tag, it's simply an instruction to the browsers about what version of HTML to use.

And that's really all the important details to note about the DOCTYPE, if you're dying to know more about it, feel free to head over to w3schools.com.

Styles

Now for the more exciting topic! Styles are what we use to make our webpages look nice by introducing colors and manipulating text. You may have noticed that our current working example of a webpage is horribly boring and is in need of a face-lift.

There are a couple of ways of “sprucing” up your webpages:

  1. Use some of the built in HTML formatting tags
  2. Use Cascading Style Sheets (CSS)

HTML Formatting Tags

There are a bunch of built in HTML tags that can be used to format the text in your webpage. I've actually been using some of them already in this tutorial! The first set I'd like to introduce are the heading tags:

  • <H1>
  • <H2>
  • <H3>
  • <H4>
  • <H5>
  • <H6>

These are used to create “headings” in your webpages, so if I wanted to create a heading that said “This is an H1 Tag”, I would write the following HTML: <H1>This is an H1 Tag</H1>. Here's what that would look like:

This is an H1 Tag

Reminder: don't forget that when you ‘open' an HTML tag, you need to close it with the corresponding tag. In the example above all the text that's surrounded by the <H1> and </H1> tags will have the formatting applied to it.

Okay so what about all the other heading tags: <H2>…<H6>? Well generally what they do is format the text in a less and less “BIG” fashion. Allow me to show you what I mean:

This is an H1 Tag

This is an H2 Tag

This is an H3 Tag

This is an H4 Tag

This is an H5 Tag
This is an H6 Tag

You see what I mean by being less and less “BIG”?

Okay, so what are some of the other HTML formatting tags?

You can make your text in italics using the <i> </i> tags. Same rules apply, any text in between the opening <i> and the closing </i> tags will be in italics.

How about making your text bold by using the <b> </b> tags?

Formatting Lists

You can even create ordered lists or bulleted lists.

Here's a code example of an ordered list

    
  
  1. List Item 1
    2. 
  
  2. List Item 2
    3. 
  
  3. List Item 3
    4.

And here's what that will look like:

  1. List Item 1
  2. List Item 2
  3. List Item 3

Notice how you use the <ol></ol> tags to define the ‘scope' of the ordered list, and then you define each ‘item' in the ordered list with the <li></li> tags.

Here's an example of an Bulleted (un-ordered) list

    
  
  • Bullet Item 1
    • 
  
  • Bullet Item 2
    • 
  
  • Bullet Item 3
    •

And here's what that will look like:

  • Bullet Item 1
  • Bullet Item 2
  • Bullet Item 3

Cascading Style Sheets (CSS)

Last but not least, I'd like to briefly introduce the concept of CSS. I will be expanding on this subject much more as there is plenty to talk about, but I'd like to give you an overview first.

Cascading Style Sheets get their name due to the fact that HTML will apply the styles based on a set of rules. This is similar to the concept of inheritance in Java. The web browser will apply the most broadly defined CSS rules first (just like a method defined on a super class in Java), but if the browser notices that there are rules defined on a more specific level, then the more specific rules will override the more broad ones. This is exactly like in Java when you have a child class that @Overrides the functionality of a super class.

So then the question is, what's the most specific way of applying these CSS rules and which is the least specific (most broad)? Well that will mean you'll need to understand all the different places that CSS can exist. But you'll have to wait for the next tutorial before you'll learn the answer! I know, I know, what a tease.

Links from the Podcast Episode

Free Java Beginners Course

Start learning how to code today with our free beginners course. Learn more.