Preface
The following is a very basic introduction to working with HTML for web design. I wrote this while in Malaysia waiting for Cassia to be born. This is written in response to the many people who have asked me to “get them started” with their own website. Having said that, I realize there are many other primers / introductions already available on the web. This is simply for me to use when someone asks me about the basics of web design. If others find it useful too, that would be a bonus.
Introduction
This HTML primer will cover the bare essentials of HTML coding / web design by showing web pages along with their corresponding html code.
There are many tutorials available online to teach you specific techniques and skills. This tutorial simply hopes to get you up to speed so you feel comfortable enough with HTML to use those tutorials. This primer will cover:
- Formatting Text
- Links
- Multimedia: Images, Audio, and video
- Tables
- CSS: Cascading Style Sheets / Layers
What is HTML?
HTML, or HyperText Markup Language, allows the creation of documents which link with other text documents and multimedia files. It is the standard for documents posted on the World Wide Web. Current standards can be found at the World Wide Web Consortium website.
Basic HTML is only used for presenting static data (text, tables, images, etc) with your desired formatting. To make dynamic pages, it is necessary to move beyond HTML into the world of PHP, ASP, Java, etc. To effectively use these technologies though, it is necessary to first understand HTML.
Though much of this primer will focus on formatting / styling your web page, it is important to remember that HTML is primarily used to structure data while the majority of formatting is best left to CSS (see lesson 5).
Throughout this primer, we will be following XHMTL conventions which is nearly identical to HTML but is is more strict than general HTML. Also note that I will use the terms HTML and XHTML interchangeably even though they are not, technically, the exact same thing.
Web Pages, Servers, and Browsers
The World Wide Web [WWW] is the portion of the internet composed of interlinked hypertext documents, such as HTML. These documents, which often called web pages, are created by individuals and are stored on special computers called servers. When an individual using a web browser (such as FireFox or Internet Explorer) requests information from their server by typing in a web address (such as http://www.colombara.org), the server sends them the file which is then translated into a viewable form by a the web browser. In simple terms, the WWW allows anyone using a web browser to download information (HTML files, photos, music) from servers containing the desired information.
Creating HTML Files
HTML files can be created using a variety of software. While web pages can be created using any text editor (such as notepad or emacs), many people find using web design programs helpful. If you are starting from scratch, two freeware programs you may want to consider are AlleyCode and Nvu. The former will be good for those of you who are not afraid of working directly with HTML code while the latter allows you to work in a more familiar “what you see is what you get” type environment. For more advanced / complicated sites, you may want to eventually consider purchasing professional web design / content management software such as Dreamweaver. There are also free content management software packages available that are quite good (ie. Wordpress and Joomla).
Having said that, if you really want to understand the basics of HTML code, it’s hard to imagine anything more valuable than making your first few web pages entirely by hand using nothing more than notepad.
Tags, Attributes, and Elements
Tags are the backbone of an HTML document which give meaning to content, i.e., whether is a paragraph, a heading, document title, etc. Tags are should normally have an opening and closing surround the content such as: Content. Throughout this primer, tags will be written in green to help differentiate them from content (which will be written in black).
Attributes further define the specifics of tags and are included in the opening portion of the tag. It is critical that the attribute be clearly named and be enclosed in quotes as in attribute=”attribute_value”>Content. Throughout this primer, attributes will be written in red to help differentiate them from the tags that enclose them.
Elements are simply the portion of HTML code marked off by the beginning and end of a tag. Using our example above, attribute=”attribute_value”>Content is one element.
Basic HTML Structure
Below is an example of the HTML code of a very basic web page. Type this code into a text editor (like notepad) and save it to your desktop as “basic_webpage.htm” or “basic_webpage.html” (.htm and .html extension are exactly the same). Then open it with any web browser. Congratulations! You’ve made your first web page!
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>My First Web Page</title>
<meta name=”Keywords” content=”Your keywords here…“ />
</head>
<body>
This is my very first webpage.
</body>
</html>
Now here is the same code along with an explanation …
<html xmlns=”http://www.w3.org/1999/xhtml”> … this attribute must be included in all <html> tags in XHTML documents.
<head> … this tag usually encloses the <title> and <meta> tags, both of which are used to help search for relevant data across numerous web pages. The content of the <title> tag is what is written on the top of left hand corner of the browser window when the file is opened. The <meta> tag’s content is not usually seen by the person viewing the page but can be used by search engines to catalogue your website.
<body> … this is where your all of your content be entered. The body contains the text, links, images, etc. that you wish to make available to those viewing your site.
A Word About Mark Up Conventions
As stated above, this primer will be following the XHTML standards within HTML. In addition to training the web designers to create clean code, all of HTML is going the way of XHTML. In other words, just learn the XHTML standards now and you will write code that is useful now and in the future whereas some HTML may soon become obsolete. To the best of my abilities, I will follow the standards dictated by the World Wide Web Consortium.
An Apology
The extensions for generic web pages are .html or .htm. You will notice that, throughout this site and this tutorial, I have often used the extension .php. This is because I have used PHP scripts to create this site. Unfortunately, PHP is beyond the scope of this primer. In every case where you see .php in this primer, you could insert .html or .htm and it would work just as well.
-danny
January 23, 2007