Redesigning Your Church Website – Part 4: Understanding Basic HTML

August 1, 2017 Rev. Bill Johnson

Redesigning Your Church Website – Part 4- Understanding Basic HTML 

A Tiny Bit of History

There’s a few of us old folks around who still remember using computers during the infancy of the internet.  This is back when you had to carry the packets uphill both ways through the snow, but the bigger challenge was that you didn’t have easy ways of connecting documents to one another.  You could have a menu system (often a Gopher system), but you didn’t have images, and linking ideas together was tough.  How could you format and create connections between documents when all you could work with was pure text?

The solution came in the form of HyperText Markup Language or HTML.  Rather than fundamentally change the files, researchers elected to use special text to tell the program how to format and link to other documents.  So, for example, you might have wanted to underline a specific passage, so you would surround the text with “<u>” and “</u>”, the start and end tags (respectively) for underline formatting.  A basic set of tags emerged and HTML 1.0 was born. 

Skipping a Bit

While we could work through the changes that came with later versions of HTML and XHTML (eXtensible HTML), the reality of tech work is that in general it’s only the newest version of the standards that really matter.  Thus we’ll spend the rest of this article taking a look at the state of HTML5 today and giving you some of the basic tools and understandings to know how to read HTML5 for yourself.  This is NOT intended to be a comprehensive introduction, and you probably won’t walk away knowing everything you need to code your own web page, but you’ll get the basic concepts.  If you want to dig deeper, check out W3Schools for some great tutorials.

That doesn’t mean it won’t be useful for you if you’ve gone with a CMS system or similar.  Knowing basic HTML can help you format posts and pages properly and even make small tweaks to your overall design, albeit with some fear and trembling.

What is HTML For?

In the early days HTML was all about formatting and linking content.  Today it’s all about making documents make sense.  So, for example, while the underline tag might have been a thing in HTML 1.0, today we’d leave the styling to CSS (more on that in the next article) and use HTML to identify the navigation (<nav>), a page division (<div>), a link to another document (<a>) or an audio or video player (<audio> and <video>).  By giving HTML the clear job of providing context for our content, we enable the same HTML file to be styled in multiple ways using CSS.  It also streamlines content for reading by screenreaders, and web crawlers.

A Couple of Examples

Perhaps the best way to understand HTML5 is to see it in action. 

Lists

Let’s take the example of a grocery list.  We know it’s a list of items, so we’ll be using the list item tag (<li>), but we need to decide whether to use the order list (<ol>) or unordered list (<ul>) tag.  Because your list probably doesn’t have to go in a set order, we’ll use <ul>.  If we start with our list as “Apples”, “Oranges”, “Bananas” and “Bread”, then our HTML content will look something like this:

<ul>

<li>Apples</li>

<li>Oranges</li>

<li>Banana</li>

<li>Bread</li>

</ul>

(Try this for yourself)

Note that the <li> tags are nested inside our <ul>.  This is because all of the list items (<li>’s) are a part of the unordered list.  HTML objects can contain other HTML objects through nesting.  This is useful if you’d like to use a link (<a>) tag to contain an image or a button.  The entire image or button will then be interpreted as the link.

Tables

Another common markup scenario is creating a table of information.  There was a time in HTML history (known as the “bad old days”) when the only way to reliably layout items on a page was to use a table as the basis for your entire page.  That doesn’t happen today, and should never happen ever again.  Tables are for displaying tabular data.  Suppose you wanted to display your church’s office hours.  That’s reasonably the sort of information that could belong in a table, so we’ll try it that way.  To make a table work we need three basic tags (there are others, but these are the basics):  <table>, which defines a table of data, <tr> which defines a row in the table, and <td> which defines a cell or piece of data in the table.  Our example might end up looking like:

<table>

<tr>

<td>Day</td>

<td>Hours</td>

</tr>

<tr>

<td>Sunday</td>

<td>Worship at 8:30 am and 11:00 am  Office hours by appointment</td>

</tr>

 

<tr>

<td>Monday-Thursday</td>

<td>8:00 am – 5:00 pm</td>

</tr>

<tr>

<td>Friday and Saturday</td>

<td>Closed</td>

</tr>

</table>

(try it yourself)

Conclusion

That’s the basics of understanding how HTML gives additional meaning to your content through markup.  In following columns, we’ll look at CSS, which helps you style your content and layout your pages, as well as Javascript, which gives your pages interactivity and function.  Remember we’re working through ADDIE as we go, and we’re deep in the design process at this point.

  • Analyze
    • Defining Your Audience and Message
  • Design
    • Choosing a Platform
    • Understanding Basic HTML, CSS and JavaScript
    • Finding Your Way Around Navigation
    • Picking Good Colors
  • Develop
    • Writing Good Code
    • Writing Good Content
  • Implements
    • Testing Your Site and Why It Matters
    • Getting Noticed
  • Evaluate
    • Analyzing Your Analytics
    • Feeding the Beast

See you soon for future articles!

 Learn more about the use of technology in your church by subscribing to this blog!

Subscribe to the CTS Blog Technology & Your Ministry

Previous Article
Top 10 Writing Tips for Church Workers
Top 10 Writing Tips for Church Workers

Writing is a skill that comes naturally for some, and is a struggle for others. Whether or not y...

Next Article
Questions Every Church Website Should Answer
Questions Every Church Website Should Answer

A good church website answers questions for visitors and members alike. This is instrumental in ...