One of the basic skills of being a web worker in ministry is a functional knowledge of HTML. This tutorial is written for:
- Bloggers
- Web site content creators using content management systems
- HTML email newsletter editors
Now you can do a lot for the kingdom of God on the Internet without it, but like with any other venture, knowledge is power. Today, I will cover the basic structure of a web page.
What is HTML?
HTML stands for hyper-text markup language. It functions like an outline in writing. It structures content so it is understood by a web browser. HTML is made up of tags that are read by computers.
All content has matching tags. For example, a headline has its own tag <h1> and a paragraph has a different tag <p>. And so on...
HTML tags are surrounded by angle brackets. They must have a start and a closing tag (this is the MOST common mistake when editing HTML). The best HTML is readable by humans not just computers.
HTML ought to be coded so people with disabilities (visual and motor) can access the any web page using an screen reader rather than a standard browser like Explorer. The best practices for coding HTML are called web standards. If you are a web site owner, you should insist that your site is coded to web standards.
Structure of a web page
All web pages must have the following tags: <html>, <head> and <body>.
<html>
<head>
...
</head>
<body>
...
</body>
</html>
These are needed on every web page. They all have a start and a closing tag.
- <html> tag wraps all other tags
- <head>tag wraps data that defines information about the documents and is NOT visible on the page
- <body> tag wraps the visible content on the page
As a web worker, you will usually NOT need to deal with these specific tags. They will be handled by your blogging or web site software.
Why you might need the html, head and body tags
However, there are some common reasons why YOU might need to find these tags and understand how a web page is structured.
- Most web analytics tools need to you place JavaScript on your web pages. Sometimes they need to go inside the <head> tags what describe the document. However, the best practice is to put analytics JavaScripts just before the closing </body> tag.
- If you are optimizing for search engine results, the <title> and <meta> tags exist ONLY inside the <head> tag.
- Enabling modern browsers (i.e. FireFox or Explorer 7) to auto-discover RSS feeds, your code will go within the <head> tag.
- To add a favicon, this code will go inside the <head> tag also.
This are just some examples. The bottom line is that if you modify, delete or duplicate these tags, you risk breaking your page and maybe your site.
Next in HTML for Beginners: part two we will tackle headlines, paragraphs and lists.
By Tim Bednar, Founder of Plaid
Software for people focused on ministry not software
good stuff, Tim! very helpful.
Posted by: Tony | November 07, 2007 at 09:59 AM
Nice overview Tim.
As a designer, do you write raw html? Or do you use WYSIWYG tools like dreamweaver/frontpage? Or do you mockup with paint.net/photoshop and then hand off to a coder to cut up? I'm curious to know what belongs in most designers' toolkits...
Thanks,
joe
Posted by: Joe Suh | November 07, 2007 at 12:57 PM
I prefer to write code by hand; I do use snippets of code to quickly write common head tags. I use Notepadd++ because it is open source and free.
I would never recommend Frontpage because it still adds extra HTML code. I have not tried Microsoft's Expression--new design software, but it may be better.
Dreamweaver is the industry standard. I use it for somethings, but WYSIWYG still provides unpredictable results especially when you need be valid in all browsers. Plus, it is still very difficult to write CSS layouts in Dreamweaver.
I mostly do my own concepts of screens (since I'm sort of one stop shop), but occasionally get layered Photoshop files from designers. I actually prefer working in FireWorks (I'm an old Freehand guy).
Then I code the HTML and CSS. First I write the markup then apply the CSS. The absolute killer tools for this are FireFox plugins: FireBug and Web Developers Toolbar. I'll cover how to use in another post.
But in my toolkit: I use Notepad++, FireFox with FireBug and Web Developers Toolbar, FireWorks/Photoshop and Google (to get help when I need it).
Posted by: Tim Bednar | November 07, 2007 at 05:22 PM