Intro to HTML: Knowing the basics of HTML and how to create a web page makes you more marketable in the workplace. And they're fun, too!

What is HTML?

HTML (Hypertext Markup Language) is the original language of the Web, and is made up of a set of tags. The tags surround the content of a web page, working behind the scenes to define the layout of the page. Web browsers read HTML tags and display the text and images accordingly.

Why learn HTML?

As someone entering the library and information profession, you need to have at least a basic knowledge of how web pages are built and edited. Depending on the type of job you pursue, you might be expected to maintain your departmental web page, create online database guides or pathfinders, or even manage your library's entire web site. Whatever your position, you should at least be conversant and be able to create and edit basic pages in the HTML markup language.

In this section, you will learn about the HTML markup language and create your own basic web page, complete with an image and links. You will also learn how to upload it to the Simmons web server, so it can be viewed from any computer with web access. This exercise is intended to serve as a foundation for you to learn more - either on your own or in your chosen GSLIS courses. The Web will continue to evolve, and as an information professional, you will be expected to keep abreast of it.

Things to Know Before You Start

Network Folder vs Public Web Space

As mentioned on the Your Digital Storage Space page, Simmons provides you with both a private personal folder on the network server (ie, your Y: drive), as well as public storage space on the web server. It is important to keep in mind that these two are completely separate. You will be using your web space to publish your page, once you have built it. This will be done using FTP software (more on that later).

HTML and XHTML

XHTML is a markup language that conforms to the standards of XML (Extensible Markup Language). It is very similar to HTML, but XHTML is more polished and has more rules, and is therefore more consistent and powerful. You do not need to know all of the details for this exercise, but be aware that the future is XHTML, and that is what you should learn as you advance your web studies. Essentially, XHTML is the most up-to-date version of HTML.

Tools for the Job

You can create and edit HTML/XHTML documents in any of a number of text editors, from the basic one that came with your computer to specialized ones gear toward HTML editing, to expensive and complex programs that do more than just edit text. Using MS Word or other word processors is not recommended, because they produce non-standard code. Below are some examples of different options.

Plain Text Editors

Plain Text Editors are like really stripped-down word processors. They are not built specifically for HTML, so you have to be sure to name your file with .html (the default is .txt when you save). You can create anything from a simple HTML page to a very complex one using this type of editor:

Notepad - comes with all Windows computers
TextEdit - comes with all Mac computers, but we strongly recommend using TextWrangler HTML Editing software, which can be downloaded from BareBones

Text-Based HTML Editors

Text-Based HTML Editors have extra tools geared toward speeding up your work. They automate some tasks, highlight errors, color code tags for readability, and so on. They are great to use once you get the basics down and are willing to learn how to take advantage of the helpful HTML-specific features. Both of the following programs can be downloaded for free, and are available on all GSLIS Tech Lab computers:

Crimson Editor - for Windows, http://www.crimsoneditor.com/
TextWrangler - for Mac, http://www.barebones.com/products/TextWrangler/download.html

WSIWYG Editors

WSIWYG stands for what-you-see-is-what-you-get. It refers to a type of software or web application that allow syou to lay out your pages visually rather than actually writing the code. It is an enticing idea, but is not generally recommended for several reasons: it generates non-standard code; it is hard to fix glitches and problems if you don't understand what is going on "under the hood". However, Dreamweaver allows you to toggle between Design view (the visual one) and a Code view which is similar to working in a text-based HTML editor. This Code view provides you with more control, and additional tools to help speed things up. Dreamweaver has additional capabilities, but is fairly complex and should only be explored after you are comfortable with the basics:

Dreamweaver - on all Tech Lab computers

A Word About Standards

The first incarnation of HTML was only meant for displaying paragraphs and headings. It was not built for complex layout and formatting. As the web rapidly grew, HTML became gangly and cobbled together, with page designers inventing endless workarounds to get the results they wanted. By 2000, everything was finally rebuilt from the ground up by the World Wide Web Consortium (WC3), and standard rules were established, a.k.a web standards. The result was XHTML 1.0.

In a nutshell, this is a good thing, because there are now rules for doing all the things that page designers want to do. If everyone is following the same rules, it becomes infinitely easier to edit, repurpose, and share web content. Using web standards also helps with things like making sure your pages are accessible to users with sensory or physical disabilities. Accessibility is a big issue in libraries and other educational environments. For more details on accessibility issues, check out http://webopedia.com/TERM/W/WAI.html.

Validation

You might also hear talk about code validation. This just means that your page is following all the rules, that is, it is built according to web standards. The WC3 site provides an online validator (http://validator.w3.org), to which you can upload (or paste the address of) your page, and click a button to run the program. The results list will tell you if your page is valid or if it has non-standard elements. You won't need to do this for the TOR, but it is something of which you should be aware.