Marketing for Libraries Logo

HTML Section: Introduction

Basic web development skills serve as the foundation of all effective websites. Regardless of whether you're building a simple web page or an entire website, the building blocks are the same.

We'll apply these skills to a simple web page project. It is suggested that you complete each of the Try It! activities that you see in green boxes throughout the page.

The World Wide Web Consortium "W3" is the organization that coordinates the development of standards for the web and promotes universal guidelines for web development.

HTML

HyperText MarkUp Language (HTML) is the language of the web. HTML uses tags such as <p> and </p> to structure text into headings, paragraphs, listing, and links. Although it's possible to build a simple page with no knowledge of HTML, most web developers combine their skills with web development tools such as Dreamweaver HTML coding. It's much like learning to use a calculator. Without the foundations of addition, subtraction, multiplication, and division, you aren't likely to be successful with advanced math on a calculator.

One of the duties of W3 is to work with developers and software companies on new versions of web software so everything is compatible. They work with people who are developing coding languages (i.e., XML), authoring tools (i.e., Dreamweaver), and browsers (i.e., Internet Explorer, Chrome, Safari).

Over the years HTML was evolved. Many people learned to code using HTML Version 3.2. This version involved using individual tags for everything and led to lots of problems with updating and coordinating pages. In the late 1990s, HTML 4 and CSS became the norm. This allowed a single, easy to edit style sheet to control the "look and feel" of a website.

Next, a new language (XML) was developed to provide a more stable platform for coding. XML was used to rewrite HTML into a new coding language called XHTML. Although XHTML looks a lot like HTML, some of the syntax is slightly different. Today, most people use a combination of HTML and the more strict XHTML. Many people use the words transitional HTML or (X)HTML to describe this combination. This website will use both words, HTML and (X)HTML, to refer to this type of transitional HTML.

The newest version of HTML is known as HTML5. The developers are working on a single markup language that can be written in either HTML or XHTML syntax. This new version contains many new syntax features to deal with Web 2.0 type interactive applications as well as multimedia features. The W3C Recommendations became available in 2012 with full implementation over the next decade. Explore the latest information at W3C. Read a comparison of HTML4 and HTML5.

readRead!
Many of you may have learned an older version of HTML.
Read HTML - XHTML to learn about the difference versions of HTML.

HTML5

Still in development, HTML5 is a major revision of the HTML standard for structuring and presenting content on the Web. Some people advocate that developers begin or already should be using HTML5 coding, even while it is not complete is not finalized and changes are continuing to be made. Others say that it is totally irresponsible to advocate its use or begin using it. Many parts of the coding specification are stable and may be implemented in products.

Keep in mind that HTML5 is not yet an official standard, and no browsers have full HTML5 support. However all major browsers (Safari, Chrome, Firefox, Opera, Internet Explorer) continue to add new HTML5 features to their latest versions.

We'll be using it in this class, because it's likely to be the tool you use when you graduate.

To learn more about HTML5, visit some of these sites:

HTML5 Doctor Elements
Created by seven web developers, the site publishes articles about HTML5, its semantics, and how to use it right now.

HTML5.org
Includes an experimental validator. 

HTML5 Rocks
Includes step by step tutorials and much more.

HTML5 Tag Reference from W3Schools, a website for developers

HTML5 from The World Wide Web Consortium (W3C)

The Wilderness Downtown, an interactive film by Chris Milk, was built in HTML5 and provides a glimpse of the future of HTML. The animation and other elements are done with coding rather than a tool such as Adobe Flash. You may also have to provide a different address. For fun, view the Page Source (Selection in your browser that will show the HTML coding for the webpage, look for selection from the View tab). You must use the Google Chrome browser for this to work. This is one reason it will be a while before we use HTML5 full-time. Currently, not all browsers support the multimedia elements.

readRead!
Read about the features of HTML5 from w3schools.

HTML Editors

When writing HTML code, you need a place to enter text. The simplest tool is to use is a simple text editor.

In Windows, you can find a text editor by going to the Start button, choose Programs, select Accessories and choose NotePad.

In a Mac, you'll from Text Editor in your Applications folder. If you use an old version of Mac, look for Simple Text.

There are many other easy code editors. There are many free and inexpensive HTML editors that you can download such as BBEdit from BareBones or HotDog from Sausage Software.

You can also write HTML in web development tools such as Dreamweaver from Adobe.

I'd suggest starting with NotePad or SimpleText/Text Editor that come free on your machine. This way, you'll be sure to get clean code because you'll do everything from scratch.

DO NOT try to use Microsoft Word for building HTML documents. It doesn't generate raw text files.

You can explore and practice many tags at W3 Schools.

try itTry It!
Go to W3 School. Follow their directions to get started using NotePad.

Code Collection

A good web developer spends lots of time examining the code of other programmers. If you'd like to see the HTML code from a web page, you need to view the source. In most web browsers, there's an option to View Source. This allows you to look at code and helps you learn new tricks and tips. Keep in mind that not all programmers use good HTML, so learn to distinguish between good and bad coding.

If you copy the work of others, you should include a comment in the code giving credit.

try itTry It!
Go to W3 School. Complete the tutorial!
You can also use the TryIt Editor at W3 Schools to practice HTML.


Beyond the Basics

As your web development skills grow, you'll be ready to expand the technologies you use to create websites. You started with basic HTML skills. Then, you add Cascading Style Sheets (CSS) to control the style and layout of your web document. DOM (Document Object Model) provides a document content model for HTML documents. JavaScript allows you to write additional scripts to make your pages more dynamic. Together these are technologies that control how the web page is displayed in the browser window.

The next part of this page is for people who already known HTML and want to understand the new version. If you're a beginner, you can skip it.

New Features of HTML5

HTML5 is much more forgiving and in some cases less complicated than earlier versions of HTML. The major changes include new features (w3schools):

Go to New Elements in HTML5 for a complete list of the new elements in HTML5.

Learn More

HyperText Markup Language (HTML) Home Page from W3C for an overview.

XHTML: the Clean Code Solution by Peter Wiggin. Consider why serious coders should convert to using XHTML.


| eduScapes | IUPUI Online Courses | Teacher Tap | 42eXplore | About Us | Contact Us | © 2006-2013 Annette Lamb & Larry Johnson