HTML & CSS the Right Way: Part 1

With the glut of information and tutorials on writing HTML & CSS out there on the internet, it doesn’t seem to make much sense to write yet another how-to. However, considering the average quality of information out there is below par, confounded by the various (bad) coding styles in use, I’ve decided to write my own.

In the interest of accelerated learning, I’ll be skipping more basic code that isn’t best practice. For instance, you won’t see a style attribute in any of these following tutorials. All of our CSS from the very beginning will be housed in dedicated style sheets.

I’m not a designer, but I will talk some about layout and link to a couple great articles on turning Photoshop mockups into solid HTML & CSS. My focus instead will be on creating HTML documents as templates for dynamic websites, styled with CSS, using the least amount of code possible.

I’ll be making the following assumptions about you:

  1. You know how to open, edit, and save files on your computer
  2. You know how to open and use the basic text editor on your computer (NotePad for Windows, TextEdit for Mac, Text Editor for Ubuntu)
  3. You do not know anything about HTML. Some of my later posts will get slightly more advanced, but we’ll be starting from the ground up.

There are excellent, free resources on the internet that I’ll rely heavily upon. Generally speaking most of the links in these articles will point to Wikipedia or the W3 Schools. Wikipedia is the place to go if you want to wrap your head around a particular concept. For the nitty gritty on the implementation of a particular HTML tag or CSS rule, the W3 Schools website is your best bet (Googling a single tag almost always takes you directly to the W3 Schools).

So, first things first…

What is HTML?

HTML stands for Hypertext Markup Language. It the the basic programming language that web browsers (Internet Explorer, Firefox, etc.) are able to interpret. We use HTML to “mark up” a document or piece of text that we would like to display in a web browser.

For example, let’s say you wrote this piece of text:

Hello World!

…and you’d like to be able to display it on the web. Let’s try this now:

You’re First Web Page

  1. Create a new directory on your desktop, called “test”, and open it (directory is another word for folder)
  2. Open your text editor, and save a file called “index.html” in the directory you just created.
  3. To confirm that you created the right type of file, notice that the icon for “index.html” in the “test” directory has changed to the icon for your default web browser
  4. With “index.html” open in your text editor, enter the following code:
  5. <html>
        <head>
        </head>
        <body>
            <p>Hello World!</p>
        </body>
    </html>
  6. Save “index.html”, and double click it to open it in your your browser.

You’ve just created your first web page. Now let’s take a closer look at what we just did:

How HTML Works

  • An HTML document is made up of “elements” wrapped in “tags”. For example, the <p>Hello World!</p> bit would be an element wrapped in a paragraph tag. Tags usually have an opening tag (without a forward slash) and a closing tag (with a forward slash). In English, you are telling the web browser “When you see <p>, display everything after that as a paragraph until you come to</p>”
  • The entire HTML document is wrapped in an HTML tag. You’re telling the web browser “Hey, all this stuff you’re about to read is HTML”
  • HTML documents have “heads” and “bodies”. These two elements are present in almost every HTML document. The <body> tag denotes all of the information that will be displayed in the body of the web page. The <head> element will contain instructions for the web browser about displaying that information. More on <head> later.
  • HTML elements are nested. Did you notice that the <p> element is inside the <body> element? It has to be that way for the <p> element to work right. In HTML, elements can be wrapped in any number of tags. You would nest a tag within another tag if you wanted the effects of both tags to work on that element. For example, change “index.html” to this:
  • <html>
        <head>
        </head>
        <body>
            <p>Hello World! It's going to be a <strong>great</strong> day.</p>
        </body>
    </html>

See the difference? The <strong> makes text bold. It’s nested inside the <p>, making the word ‘great’ both bold and a part of the paragraph.

Now try adding a new paragraph:

<html>
    <head>
    </head>
    <body>
        <p>Hello World! It's going to be a <strong>great</strong> day.</p>
        <p>I can't believe I ate the whole thing. The quick brown fox
           jumped over the lazy dog. The rain in Spain falls mainly
           on the plain.</p>
    </body>
</html>

HTML Headings

Here, you create a new paragraph, and it shows up in the web page below the first. Now, let’s add a couple heading tags, <h1> and <h2>:

<html>
    <head>
    </head>
    <body>
        <h1>My first webpage</h1>
        <p>Hello World! It's going to be a <strong>great</strong> day.</p>
        <h2>Some famous quotes</h2>
        <p>I can't believe I ate the whole thing. The quick brown fox
           jumped over the lazy dog. The rain in Spain falls mainly
           on the plain.</p>
    </body>
</html>

HTML provides six different sizes of headings: <h1>, <h2>, <h3>, <h4>, <h5> and <h6>. Here’s how they are rendered on this page:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

They probably look a little different on your “index.html”, don’t they? That’s because this page uses CSS to manipulate the appearance of those tags on this page. Will talk more about CSS in Part 2 of “HTML & CSS the Right Way”

Take Aways:

  • We use HTML to “markup” a document for display in a web browser. HTML is the markup, NOT THE CONTENT.
  • If you want to tell a web browser how to display something, you have to wrap it in HTML tags

Tags Learned:

  • <html>, <head>, and <body> (the basic structure of an HTML document)
  • <p> : paragraph
  • <strong> : bold
  • <h1> – <h6> : various levels of headings

Exercises:

  • Practice using these tags in index.html
  • Play around with the HTML examples at W3 Schools
  • Make “index.html” look exactly like this page. You can copy and paste the text, but don’t copy and paste the code!

Leave a Reply

Your email address will not be published.

*
= 5 + 4