Using HTML - Page 1 - The Basics - Learning to build your own website from scratch
Please note that this is part of a series:
Next (Page 2) »
The first thing you have to do is ask yourself if this really is what you want to do. It doesn’t necessarily mean that you will actually build your own website. Perhaps you just want to gain some functioning knowledge to edit that webpage someone else made for you, or to edit some template for a CMS (Content Management System). Perhaps you do wish to build your own website from scratch, know the ins and outs of it and be confident that it’s exactly the way you want - and if not, know that you have the knowledge to change it into something you do want. This series will get you started in HTML (HyperText Markup Language) and CSS (Cascading Style Sheets), which is all you’ll need to build a static website.
“But I don’t want a static website!” There are various ways to create an interactive website. You can do so using Javascript, PHP, ASP, Flash, Java, CGI (with Perl, Python, C++ or other languages), and a lot of lesser known languages. Whichever you end up going for, you still need a basic knowledge of HTML. While HTML is used to build the page, CSS is used solely to determine how the page looks. CSS is used for a multitude of attributes such as position, color (text and background), padding, borders, and much more. While a lot of these things can be done with HTML, most of it has been deprecated, meaning using HTML for such things is no longer officially supported. Whether browsers will ever stop supporting it is doubtful, but it doesn’t really matter. CSS allows you much more control, packs all that information in one (or several - whichever you prefer) easy to find location, and is officially supported to boot!
Before we get started, a little more about HTML. In this guide you’ll see a few terms recurring a lot: elements, tags, and attributes. The elements contain data (and possibly other elements). An element defines a specific thing to the browser, and can have either one or two tags. A title element contains the page title, and has two tags: an opening tag, followed by the title itself, and a closing tag. For an example, see below. An attribute is an item inside a tag that adds information for that element. Examples are the height and width attributes of an img (image) element which tell the browser how high and wide to display an image. These attributes in particular can be used to scale an image, or tell the browser how big the image is. The browser can tell how big it is once it’s started downloading, but if you tell it beforehand, it can allocate the correct space and your webpage will be aligned the way you want immediately. I should warn against scaling the image as there is rarely a good reason for this. Making it bigger will reduce the visual quality, while making it smaller means detail is lost and the image’s file size is bigger than necessary. Whenever possible, use some decent image utility to resize images before you publish them.
To get started, we’ll start with the simplest webpage possible:
<html> <head> <title>Your title goes here</title> </head><body>Your text goes here.</body> </html>
This may be a little overwhelming at first, but let’s go through the steps. First, notice that every tag (such as <html>) you open, must be closed. Not all elements have an opening and closing tag and what you do in those cases depends on which format you’re following, but we’ll get to that soon. The first tag, <html>, tells the browser this is an HTML document. Everything goes inbetween these opening and closing tags. Next we have the <head> tag. Typically you have a lot of system information here, nothing you want the user to see. Here all it contains is the title tag, but typically it contains the title tag, one or more meta tags and the CSS information. Inside the <head> tag we have the <title> tag which contains your webpage’s title. This title is typically displayed in your browser title bar and in your taskbar and is usually used by Search Engines. Nobody truly knows how Search Engines determine what your page is about, but one thing is for sure: they use it to link to you once you do show up in the search results. You’ll typically want this title to be something that describes the contents of your webpage, but you can make it anything really. Finally there’s the <body> tag, which contains all of your webpage’s information.
Is that all you need to make a webpage? Yup. Is that all you need to make a website? Considering a website is just a collection of webpages, yup. There is however one more thing you should add to all your webpages: a DTD (DocType Declaration). This tells the browser how to interpret your HTML, and there are various options to choose from. I’ll cover only the three XHTML 1.0 DTDs here. Why? There are a plethora of obscure, deprecated and unsupported DTDs. The only other popular option for XHTML 1.0 is HTML 4.01, and the difference is minor. The only difference is that XHTML 1.0 supports XML. There is no benefit in not supporting XML, and if you start out with XHTML 1.0 and ever wish to include XML, you won’t need to update a thing as far as DTDs are concerned. The three XHTML 1.0 DTDs are the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" /> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" /> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd" />
Now let’s discuss the differences. First there’s the strict DTD. The strict DTD does not allow any of the deprecated elements or attributes. While this should be what you strive for anyway, I don’t use it. With this DTD, the use of target=”_blank” is not allowed in the a element. Since there’s no alternative for it, this effectively means you cannot force a link to open in a new window. Next in line is the Transitional DTD. In simple terms, this is your “anything goes” DTD. Using this will allow you to use all deprecated elements and attributes, as well as the IFRAME element (and all it’s attributes), and the target attribute for your A, AREA, BASE, FORM and LINK elements (if any). I use the transitional DTD and avoid using deprecated tags. Finally there’s the frameset DTD. Frames were a popular choice a good while ago mostly because they allowed you to have an ever-present sidebar such as a menu. Their use only subsided when includes became popular such as SSI (Server Side Includes) or the include/require functions in PHP. The downside of frames is that you’re designing at least three pages for a simple frameset: the frameset page containing the information about both frames, and each frame. What’s worse is that a user can stumble upon any of those frames (and not just the frameset page), meaning they can go to your content page and find your menu missing. Framesets are very poorly (if at all) supported by search engines and should be avoided.
- To conclude let us recap what you’ve learnt here:
- HTML and CSS are the languages used to build webpages and indeed entire websites.
- An HTML page consists of Elements and Data.
- Elements either have one tag, or two tags: an opening tag and closing tag between which information is written.
- Elements can have attributes to further define them.
- CSS is the best way to define how elements should be displayed; be it position, color, or various other visual details.
- An HTML page should at the least contain a DTD (Doctype Definition), an HTML element containing a HEAD and BODY element, and a TITLE element in the HEAD element.
Please note that this is part of a series:
Next (Page 2) »
