Depending upon how much you know about HTML, there are sections of information and activities below. If you are new to HTML, I’d suggest you do all of the reading and activities. Many content management systems (CMSs) have WYSIWYG editors (What You See Is What You Get) that automatically do many of these things for you. But it is helpful to know the coding behind the scenes, so if you need to troubleshoot a page or add custom HTML you can do so.
Formatting and definition tags
What is HTML
HTML stands for Hyper Text Markup Language. It is a "markup" language that consists of "tags" that describe a Web page. With HTML, an author of a Web document or page can describe the document’s structure and contents.
HTML tags are keywords surrounded by brackets, which normally come in pairs. The start and end tags are called opening tags and closing tags. Tags are NOT case-sensitive, but most HTML tags are best left lowercase for consistency. Future versions of (X)HTML will demand lowercase tags.
HTML can be created in text editors. The simplest of these are Windows Notepad or Wordpad, or TextEdit on a Mac. You can also use more sophisticated text editors through Adobe Dreamweaver or Homesite, or you can find a number of other options — free or at a cost — on the Web.
Do not use Microsoft Word or another word processing program to create HTML documents. These programs insert formatting for margins, fonts, text size and color, etc. You do not want preformatted text when creating an HTML document, or the formatting will create odd behaviors in how the page works once it is uploaded. When creating an HTML document, you want to ensure it is valid and that it will work in many browsers and various computers.
Here is a basic tutorial on HTML: http://www.w3schools.com/html/default.asp
The basics
Start any HTML document with <HTML> and end it with </HTML>. For most purposes in this class, you will not need to be doing this because you will not be "creating" entire HTML documents, but this is worth noting.
HTML documents are defined by HTML elements. An HTML element is everything between the start and end tags. Most HTML elements can have "attributes" which further define the element.
HTML headings are defined with <h1> to <h6> tags. The smaller the number, the larger the heading:
<h1>This is your heading, and it’s rather large</h1>
<h6>This is your heading, and it’s much smaller in comparison</h6>
Paragraphs are defined with the <p> tag:
<p>This is a paragraph.</p>
Links are defined with a <a> tag. To link to the Web site Google, for example, you would type:
<a href="http://www.google.com">This _fcksavedurl="http://www.google.com">This is a link to google</a>
Images are defined with <img> tags, with the name and size of the image provided as attributes. Here, the image can be found at the site address given, and the size of the image uploaded is 576 pixels wide and 432 pixels deep:
<img src="www.gotoeditor.com/images/strawberry_bouquet.jpg" alt="a holiday bouquet with real strawberries" width="576" height="432">
The "alt" attribute defines "alt tag," which is the text that screen readers see when they "read" a Web page’s contents for someone who is visually impaired. It also is the text that in most browsers shows up briefly when you roll over the text. Alt tags are good practice, and help in searches as well. They are necessary for any "accessible" Web site. Alt tags should describe what is happening in the photo. A good alt tag is more than a label such as "picture." We will discuss image and alt tags in more depth later.
There also are some "empty" HTML elements which do not have content. They can be closed in the start tag. For example:
<br/> is an empty element defining a line break. In XHTML and future versions of HTML, all elements must be closed. So although most browsers close <p> tags and forgive you for not including a / at the end of an empty tag right now, it’s good practice to end all tags to prepare for future versions of HTML that require it.
Other useful HTML tags
<body>This is the body of a document. </body>
<br>Line break
<li>Defines a list item</li>
<ol>Defines an ordered list. This is followed by a series of <li></li> elements, then ended with </ol>
<b>bold</b>
<i>ital</i>
<hr/>Creates a horizontal rule. Does not require an end tag.
A reference guide to HTML tags and attributes
Creating a document
To create an HTML document, you need to start your page with <HTML>, followed by <HEAD>, which is the document header. This is a very important element in a document because it contains the document title and also contains information that will help search engines to catalog the document correctly. The header must be closed with </HEAD).
Every HTLM document needs a one-line title. This title will show up in the title bar at the top of any browser that requests your document over the Web. This also will be the title used by all search engines and others referring to your Web site — so choose keywords that are meaningful, and keep it to a maximum of five or six words if possible.
This is how a title tag should appear:
<title>This is the title to your Web site</title>
Your site also should have a description. This also serves as a business card for your Web site, and appears in search engines. On the line below your title, your description should appear:
<META name="description" content="Write a description of your page here. Don’t exceed about 250 words if you can.">
Your document should contain a body tag next:
<body>This is the body of your site, and will probably contain several other nested HTML elements within it. It is ended with a close tag at the end of the content that you want to appear </body)
A simple HTML page might look something like this:
<html>
<head>
<title>This is the title</title>
<meta name="description" content="type here.">
</head>
<body>
<h1>Headline here</h1>
<p>Paragraph one here</p>
<p>Paragraph two here</p>
<p><li>A list of items starts here with the first</li>
<li>Second item</li>
</p>
</body>
</html>
HTML attributes
HTML elements an have attributes, or additional information. They are specified in the start tag, and the values of the attributes appear in double quotes.
For a link, the address is provided as an attribute to the <a> tag:
<a href="www.gotoeditor.com">This _fcksavedurl="www.gotoeditor.com">This is a link to the playground site</a>
If there is a case where an attribute value contains quotes, use single quotes for the attribute:
name=’Bill "Spike" Adams’
Here are some of the more commonly used attributes:
class: the class of an element (value is the class rule or style rule)
id: Unique ID for an element (value is the ID name)
style: An inline style definition (value is the style definition)
title: Text to display in a tool tip (style is the tool tip text)
Here is a more extensive list of standard attributes and a complete html reference list
HTML headings
Use headings to bring structure and organization to your pages. Do not use headings as a substitute for bigger or bolder type. Users tend to read by skimming pages, and the hierarchy of headings helps them to do this.
Use H1 headings for main headings on a page. H2 headings are the next largest, followed by H3, etc. If you have a main heading and subheads, it would be appropriate to use H1 and then H2 or H3.
HTML comments
Comments can be inserted to help make your HTML document more readable and understandable. They are ignored by browsers.
<! — this is a comment be sure to use an exclamation at the beginning, and dashes at the beginning and end. –>
Formatting and definition tags
You can use formatting and definition tags to create various text effects in HTML, such as bold or ital type. Here are some basic formatting and definition tags, all which require start and end tags. Put these tags within the paragraph tags:
<b> bold
<big> big text
<i> ital
<small> small text
<strong> strong text
<abbr> Defines an abbreviation, and allows you to have mouse-over showing complete phrase (<abbr title="United Nations">UN</abbr> would allow you to see "United Nations" upon rollover, but would simply display "UN" on your page.)
<acronym> Defines an acronym
<blockquote> Defines a long quotation. The browser inserts line breaks and margins for this element, so that it appears indented in copy.
HTML styles
The style attribute allows you to style HTML elements using either direct attributes or by using separate style sheets, which are called CSS files (short for cascading style sheets).
Here are some basic style examples:
For background colors (replaces the old "bgcolor" attribute):
style="background-color:blue"
For font styling, size, color and font family:
style="font-size:12px font-family:courier new color:yellow"
For alignment of text:
style="text-align:center"
Hyperlinks can point to HTML pages, images, sound files, movies or Web sites.
Anchors define hyperlinks within a document.
These are hyperlinks, using the "href":
<a href="http://www.gotoeditor.com/slideshows/Biggbys">
<a href="http://www.msu.edu">
In an "anchor," the name attribute is used, the <a> element defines a named "anchor" within an HTML document. Named anchors often create tables of contents to information within the document:
<a name="places">Places to go</a> : This is the "anchor" inside the HTML document.
<a href="#places">Jump to the places to go section</a>: This is the link to the content, and it usually appears at the top of the document
Email links are accomplished using a hyperlink call using the "mailto" attribute:
<a href="mailto:nhanus@msu.edu">Email Nancy Hanus</a>
Working with images
Images are defined with <img> tags. The <img> tag is "empty," which means it has no closing tag. To display an image, you use the "src" attribute, which is the URL of the image you want to display on your page. You cannot simply "upload" an image as you do in Facebook.
When you are creating a Web page you need to upload your image to a server, where it has a unique address, and then you must reference that address when you want the image to appear on your page or site. That "source call" to the image displays the image that is actually housed on your site or another site.
Sometimes you will notice images do not "paint" right away in a page or site. Often this is because the image is much larger than it needs to be. It’s important to "optimize" images for the Web — make them smaller files that "load" more quickly on the site. We will go into more detail about this in a bit.
An image tag might contain the following information:
<img src="http://www.gotoeditor.com/images/strawberry_bouquet.jpg" alt="bouquet of strawberries in a holiday centerpiece" width="576" height="432">
This HTML tag calls a photo, strawberry_bouquet.jpg, which is located in the images folder on a Web site, gotoeditor.com. The size of the image is 576 pixels wide by 432 pixels deep.
It is very important that you get the size of the image right. If you do not, you will distort your image. You may have seen this occur on sites before — and typically this happens because someone has put the wrong dimensions into the tag. You can forgo the tag, and the image will come in full size — but it is much more efficient and your site will load faster if you give the dimensions of the images. You also can give equivalent dimensions — for example, you can use width="57" and height="43" in the photo above, and because those dimensions are nearly the same, only smaller, the image will appear — but much smaller. This, too, is not best practice, and makes the computer work harder at deciphering the coding.
Placement of an image
An image will appear wherever you place it in the HTML document. If you want it to align left, right or center, you need to give that information in the attributes. Here are some image attributes you can use:
<p>
<img src="image.jpg" align="bottom"> : Image aligns with bottom of the test in which it appears</p>
OR align="middle" or align="top"
(Bottom alignment is the default).
If you want an image to appear to the left or right of text within a paragraph, you would do this:
<p><img src="photo.jpg" align="left">Text goes here and the photo appears to the left of the image</p>
Example:
This is an example of how you can display a really cool car next to your text describing it. This car is a Triumph, and its lots of fun to be in except in extreme conditions because the heater doesn’t work. Except when it’s 100 degrees out. Then the heater kicks in! The actual image tag used was <img src="http://www.gotoeditor.com/images/triumphsmall.jpg" width="216" height="104" alt="Green vintage Triumph car" align="left" hspace="10" />, with the photo aligned left, and "hspace" being horizontal space between the photo and text. "Vspace," correspondingly, provides pixels of space on the top and bottom of a photo.