Websites 101: HTML/CSS

Posted November 7, 2008
Filed under: Walkthrough, Website | Tags: , , , , |

Code is scary – wait, wait, don’t run yet!  Keeping up a website is crucial to church outreach these days.  It’s becoming the most common way visitors look for churches to visit.  There are ways to get websites without learning code – even free ways – but I have to break the bad news: they’re lousy.  Learning at least a little code is the most effective, cheapest, and I believe easiest way.

If you’re totally uninitiated to acronyms like HTML or CSS, this post is for you!  If you know that stuff, feel free to skip.  If you’re still here, get ready for a bare-bones primer on web coding.  I’m assuming you use Windows, mainly because I’ve noticed Mac users are a wee more computer-savvy.  If you’re on a Mac and can’t translate what I’m saying, drop me a comment and I’ll set up a Mac-friendly primer.

Get the Right Tool

HTML and CSS are written in plain text, so Notepad will do.  However, I’m going to suggest Notepad 2 (not actually associated with Notepad).  It’s very similar, but if you’re editing code (like we are!) it hightlights the code-bits in different colors to be easier to read.  If that sounds neat, download and install it.  If not, regular Notepad will work fine.

HTML Grammar

There are two parts to know: content (which is all the stuff you want on your site) and tags (which tell browsers how to display the content).  HTML is called a language, but it’s really more like grammar, formatting your words to be read properly.  You always bookend content with an opening tag and a closing tag.

Tags

Tags are written inside carrots.  For instance, to designate something as a paragraph you start it with <p> and end it with </p> (“p” is HTML for paragraph).  All closing tags use a forward slash.  Sometimes tags will be inside other tags.  For instance, to bold a word inside a paragraph you’d start your paragraph with <p> then bracket your bold word with <b> and </b> then close your paragraph later with </p>.  That’s called nesting (like Russian nesting dolls).

Just like the dolls, it’s best to close the inner tag before closing the outer tag (so <p><b></b></p> instead of <p><b></p></b>).

Jump Right In

So open up your preferred Notepad version.  Write all this out:

<html>

<head>
<title>Test Page</title>
</head>

<body>

<h1>This is a header</h1>

<p>This is a paragraph</p>

<p>This paragraph has <b>bold text</b> in it.</p>

</body>

</html>

Save it as test.html or somesuch (just make sure it ends in “.html”), then right-click it and “Open With…” the browser of your choice (probably Internet Explorer).  Keep the Notepad version open, too.  Notice a few things here.
 

  1. Your whole document is contained by the <html> tag.  This tells the browser what it’s looking at.
  2. There’s a <head> section, which doesn’t show on the page.  It gives the browser some background information.  Look at the top of your browser and you should see “Test Page,” which went in the <title> tags.  That’s the kind of stuff <head> is good for.
  3. Everything in the <body> tag shows up on your page.
  4. The <h1> tag is a Header, while the <p> tag is a paragraph.  They have default formats that are so-so, but we’ll change those later.

 
That’s basically how HTML works.  We’ll talk fancy stuff later.  What’s important now is that you understand the principles.  The easiest way to learn new tricks and techniques is experimentation, and we’ll experiment lots in future posts.

Oh yeah, and add lots of extra line breaks between things.  And tab stuff to organize it outline-style.  The browser doesn’t care about the extra spacing, and it makes things easy for you to read.  You can even add line breaks inside tags – the browser ignores them!  Seriously, three or four line breaks between tags goes a long way.  Group similar things, spread out different things, and tab over nested things.

CSS

Now that you know HTML, we can talk how to make your content look the way you want.  CSS (cascading style sheets) is a separate file you make that dictates the styles of all your tags in HTML.  If you don’t style something it sticks with a default.  It’s a lot like HTML, so we’ll just dive in.

Open a new file with your preferred Notepad.  Type the following:



body { background-color: silver; }

h1 {
text-align: center;
font-family: Sans Serif;
color: red;
}

 Save your file as test.css and open your test.html file.  Add a new line after the </title> tag and before </head>, and add the following:

<link rel="stylesheet" href="test.css" type="text/css" />

Make sure you save both files, and leave them open for now.

Here’s a good time to mention an exception to the opening/closing tag format.  In only a handful of cases a tag is totally stand-alone, meaning it doesn’t format any content.  This is one such case – the <link> tag tells the browser to reference a second file.  In such a case, you end the tag with a space and “/>” instead of something like </link>.  Images do this, too.  It’s otherwise so rare you won’t need to worry about it – so don’t worry!

Open that test.html file in your browser again and see how your styles work.  The background should be a pale gray, and the header should be centered, red and in a different font.  Let’s break down the essentials of the CSS file:

 

  1. You don’t need special opening tags to the whole document, like the <html> tag on your .html file.
  2. Each piece of CSS is a reference to a tag in HTML.  For instance, we referenced the <body> and <h1> tags.
  3. The syntax is simple: write the tag name (without carrots), a space, and use the curly brackets around all the elements you want to change (like font color or positioning).
  4. For each element, you write the element name (like “background-color”), a colon, the change you want to make (like “silver”), and end each one with a semi-colon.

What I said about adding spacing applies here, too.  Puts lots of space between things so you can read it easily.

So What HTML Tags and CSS Elements Are There?

Okay, I’ll level with you – there’s a lot of them.  Yes, it’s a specific list – for the most part you can’t make your own up.  If you want a list, I recommend w3schools.com (see their HTML and CSS tutorials).  If you’re comfortable experimenting, have at it!  The files you made aren’t online anywhere, so nobody but you will see them.  For the record, I know a lot of tags and elements but I almost always have to look some up.  You’ll never learn them all, but you will remember ones you use a lot like <p> and <h1>.

What Now?

That’s it for the primer.  Next time we’re going to start putting this know-how together with WordPress and go through all the steps to make the Parkway website I mentioned before.  You need to know the principles of HTML and CSS going in, and now you do!  Hopefully it wasn’t too boring.  It gets cooler from here.

No comments yet

Leave a reply