|
HTML (HyperText Markup Language) is a computer language used to create Web pages. Web pages are HTML documents that consist of text and HTML tags. HTML documents have the .htm or .html extensions (e.g., index.htm). A Web browser (e.g., Netscape, Internet Explorer, etc.) interprets the tags in an HTML document and displays the document as a Web page. It should be noted that HTML pages may look and behave differently between browsers.
Current Standards = HTML 4.01
The World Wide Web Consortium (W3C) is an organization that regulates different versions of HTML. Since newer versions of HTML are constantly evolving, the W3C specifies the standards of valid HTML. HTML version 4.01 is the latest version and is recommended for use in designing web pages. For further information, visit the W3C's website at: http://www.w3.org.
Document Type Definitions (DTD)
A DTD defines how tags should be interpreted and displayed by the application reading the document. According to HTML standards, each HTML document should begin with a DOCTYPE definition that specifies which version of HTML the document uses. The DOCTYPE declaration is useful primarily to tools like HTML validators, which must know which version of HTML to use in checking the document's syntax. Typical DTD usage for a current valid HTML document is as follows:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
This is the HTML 4.01 Transitional DTD, which includes presentation attributes and elements that W3C expects to phase out as support for Cascading Style Sheets (CSS) matures. Authors should use the Strict DTD when possible, but may use the Transitional DTD when support for presentation attribute and elements is required.
The following version is used for a Strict DTD:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
The <!DOCTYPE> tag would be placed at the top of your HTML document before the start of any tags or text. Although the DTD is not necessary for your web page to be published or displayed, its use is highly recommended and your HTML document would not be considered valid HTML without this tag. Get in the habit of using this now as in the future it will most likely be required due to advances in technology.
Check the Web Design Group website at: http://www.htmlhelp.com/tools/validator/doctype.html for further information on choosing an appropriate DOCTYPE definition.
Back to top
HTML consists of tags. Tags are essentially containers for text that define how the contents should look. Tags are simple commands that are enclosed by left angle and right angle brackets: < >. Many directives have both starting and ending tags. The ending tag often looks like the starting tag except that it begins with a slash ( / ). The first tag, or beginning tag, turns the markup on, and the second tag, or end tag, turns the markup off.
For example, if you wanted to display the words "academic programs" in bold text, you would enter:
The following <b>academic programs</b> are offered.
The <b> tag turns bold on. Everything after <b> is displayed in a bold font until </b> is displayed. The closing </b> tag turns the bold markup off.
*NOTE: HTML is not case sensitive.
Back to top
All HTML documents should begin with the <HTML> tag and end with the </HTML> tag. These tags identify the document as having been written in HTML. The HTML document is composed of two sections: the head and the body. These sections are identified by <HEAD>, </HEAD> and <BODY>, </BODY>. The head contains general information about the document. The body contains information that is part of the document. Certain elements are allowed in the head (such as the title). Other elements are only allowed in the body.
An HTML document requires the following three tags in order to be displayed correctly:
- <HTML> - This tag always begins the document. This tells the browser that everything below it (until the closing </HTML> tag) is going to be in HTML format.
- <HEAD> - This is the heading of the document. This is where information such as the title of the web page, the name of the creator, etc. is seen.
- <BODY> - This is where the body of the document is located. All text and graphics are contained within the <BODY> tag.
Here is a typical structure of an HTML document:
<HTML>
<HEAD>...</HEAD>
<BODY>The body or content of your document is placed
between the opening and closing <body> tags.
</BODY>
</HTML>
View html in browser
Back to top
The <HEAD> tag contains information not necessarily seen by the user. The only tag ever contained in the <HEAD> tag that would be seen by the user is the <TITLE> tag.
The <TITLE> tag is where the name of the document is stored. The text within the <TITLE> tag displays on the top of most browser windows in the title bar. *NOTE: The title is used by most browsers when referencing a bookmark, so make it descriptive but short enough to fit on one line.
Here is an example of how the <TITLE> tag is used:
<HTML>
<HEAD>
<TITLE>Title of Document</TITLE>
</HEAD>
<BODY>The contents of your document are placed between the
BODY tags.
</BODY>
</HTML>
View title tag example in browser
There are several tags one can include in the <HEAD> container that will determine how the page is displayed on a search engine. This is done with <META> tags. The two most widely used <META> tags are KEYWORDS and DESCRIPTION. The META tag is a way for the creator of the page to define information that is not included in the HTML document.
The keywords determine what searchable words could find your site. If you created a college web page, you would probably use "college" as one of your keywords. Here is how keywords are defined:
<META NAME="keywords" CONTENT="academic programs, major, college,
Bachelor's degree">
If anyone used the words "academic programs" or "major" to search for information, this page might be one of the search results. Obviously, you have to think logically when it comes to keywording your page.
Here is how one would include a description of the document:
<META NAME="description" CONTENT="This is a listing of academic
programs.">
The name field is how the tag is defined, and the content field is where the information is kept. If this page were registered in a search engine, the title would be displayed as: "Listing of academic programs." The description of the page would be displayed as: "This is a listing of academic programs."
Here is an example of how SUNY Fredonia's home page looks with the META commands included:
<HTML>
<HEAD>
<TITLE>Fredonia Home Page</TITLE>
<META NAME="keywords" CONTENT="SUNY, public, higher education,
Fredonia, America's Best Colleges, Blue Devils, music, liberal
arts, Chautauqua County">
<META NAME="description" CONTENT="SUNY Fredonia is a four-year
comprehensive, public, liberal arts college in the Northern U.S.,
known for bachelor's degree programs in music and education, and
named one of America's Best Colleges">
</HEAD>
<BODY>...the contents of your document here...
</BODY>
</HTML>
Back to top
In addition to being the container where the BODY of the document resides, you also define specific information for the look and feel of the page within the <BODY> tag.
Here are some attributes of the BODY tag:
- TEXT - Defines the color of the text
- LINK - Defines the color of a link that has not been visited yet
- ALINK - Defines the color of the link that is currently active
- VLINK - Defines the color of a link that has already been visited
- BGCOLOR - Defines the background color of the HTML document
- BACKGROUND - Points to the filename (URL) of an image to use as the background (use this cautiously as the use of backgrounds often hinders the readability of a web page)
Here is an example of an HTML document with some of the BODY attributes being used:
<BODY text="black" link="blue" alink="red" vlink="purple"
bgcolor="white">
Unvisited links will appear in blue.
Active links will appear in red.
Visited links will appear in purple.
Text should be black and the background color should be white.
</BODY>
View an example of BODY attributes in browser
Back to top
HTML is a method of formatting text and graphics. There are two tags that format text flow, they are:
- <BR> - Line Break
- <P> - Paragraph
In order to create a new paragraph, simply use the opening <P> tag. When the paragraph is completed, use the closing </P> tag. When the </P> tag is used, it creates an extra line break to separate the text. The <BR> simply gives a line break. You could think of <BR> as your HTML enter key. Unlike the <P> tag, the <BR> is not a container tag. You do not have to follow it with a closing </BR> tag.
There are three ways one can align a paragraph:
- Left - Text will be left aligned (this is the default if no alignment is specified)
- Right - Text will be right aligned
- Center - Text will be centered
Example of left, right and centered text:
<P ALIGN="left">This text is left aligned</P>
<P ALIGN="right">This text is right aligned</P>
<P ALIGN="center">This text is centered</P>
View example of aligned text in browser
Back to top
Headings are a way to apply a headline to a document. There are a total of six different headings, each used with the corresponding <H#> tag, the number being the number of the headline, with 1 being the largest and 6 being the smallest. Headings can also be aligned the same way a paragraph can by using either: left, right and center.
Six heading sizes:
- H1 (largest)
- H2
- H3
- H4
- H5
- H6 (smallest)
Use this code to view an example of all six headings:
<H1>Heading 1</H1>
<H2>Heading 2</H2>
<H3>Heading 3</H3>
<H4>Heading 4</H4>
<H5>Heading 5</H5>
<H6>Heading 6</H6>
View example of headings in browser
Back to top
Text Formatting
Even with a heading, the text still appears quite dull. Another way to make your pages more interesting is by using text formatting. Here is where you can assign a certain font, or use bold print, or italics, plus many other types of formatting.
Text formatting is divided into two types: physical formatting and logical formatting.
Examples of Physical Formatting:
- <B> - Uses a bold font
- <I> - Uses an italic font
- <BIG> - Uses a larger font size
- <SMALL> - Uses a smaller font size
- <SUB> - Lowers the text
- <SUP> - Moves the text higher
- <TT> - Displays the text in a monospaced font
- <STRIKE> - Shows a line through the text
Here is an example of the HTML code using the above elements:
<B>This is bold</B><BR>
<I>This is italicized</I><BR>
<BIG>This is big</BIG><BR>
<SMALL>This is small</SMALL><BR>
<SUP>This is raised</SUP><BR>
<SUB>This is lowered</SUB><BR>
<TT>This is monospaced</TT><BR>
<STRIKE>This has a line through it</STRIKE><BR>
View html code in browser
Examples of Logical Formatting:
- <CITE> - This is used when one needs to cite a quotation (usually displayed in italics)
- <EM> - Emphasis (usually italicized)
- <STRONG> - Use this to highlight an important line of text (usually displayed in bold)
Here is an example of the HTML code using the above elements:
<CITE>Use this tag to highlight document, publication or other
external resource citations</CITE>
<EM>This emphasizes selected text (usually by
italicizing)</EM>
<STRONG>This also emphasizes text (usually by
bolding)</STRONG>
View more html code examples in browser
Back to top
HTML defines colors based on a hexadecimal system. The colors are based on RGB combinations (Red - first two digits; Green - middle two digits; Blue - last two digits). Each component is assigned a value, which ranges from 00 to FF. The three values are combined into one value, which produces the color. The hexadecimal system is difficult to remember, so HTML also uses standard color names.
The standard color names (with corresponding hexadecimal numbers) used in HTML are:
Aqua = #00FFFF Navy = #000080
Black = #000000 Olive = #808000
Blue = #0000FF Purple = #800080
Fuchsia = #FF00FF Red = #FF0000
Green = #008000 Silver = #C0C0C0
Gray = #808080 Teal = #008080
Lime = #00FF00 White = #FFFFFF
Maroon = #800000 Yellow = #FFF000
*Note: Hexadecimal numbers can also be written as 3 digit numbers (e.g., white: #FFF is the same as #FFFFFF).
View colors in browser
Additional online resources for color information:
Back to top
Do not use the font tag as this has been deprecated and no longer should be used. Instead, use CSS for styling.
Back to top
Horizontal rules are simply a way to put a line in your page. They can spice up the page a little, without having to bring in an external graphic that would increase your file size. The <HR> tag places a horizontal rule in your page. It is not a container tag, so it does not need to be turned off. If you would like to customize your rule, then you can use one of the tag's attributes:
- ALIGN - Just like the <P> tag: left, right, and center
- WIDTH - This can be set to a percentage of the browser size, or a number in pixels
- SIZE - The height of the rule, in pixels
- NOSHADE - This is simply an on/off switch. If this attribute is used, the rule does not use a 3D effect.
- COLOR - Assigns a hexadecimal color to the rule (*NOTE: Netscape does not display color for a <HR> tag).
Here are examples of an <HR> tag and its attributes:
<HR WIDTH="100%">
<HR ALIGN="CENTER" SIZE="2" WIDTH="80%" COLOR="blue">
<HR ALIGN="RIGHT" SIZE="4" WIDTH="50%" COLOR="#800080">
View HR tag example in browser
Back to top
Preformatted Text
<PRE>...</PRE> - Use this tag if you want to preserve the format of your text. White space will be preserved and the text will appear in monospaced font.
Preformatted text is turned on with the <PRE> tag and turned off with the </PRE>. Everything in between is displayed as formatted in the editor.
Example:
<PRE>
Number of Students Enrolled in Class
----------------------------
Date CS 105 CS 106 Total
8/1 21 23 44
8/7 27 29 56
</PRE>
View example of preformatted text in browser
Block Quote
<BLOCKQUOTE>...</BLOCKQUOTE>
Identifies information that was quoted from another source. This is a good tag to use if you want to set off a paragraph from the rest of the text as it is typically rendered with extra left and right indenting.
<BLOCKQUOTE>You can use the block quote tag to display quoted text
in a large text block. This is a lot easier than indenting text or
putting the text in the table simply to indent it.</BLOCKQUOTE>
View example of block quote in browser
Address
<ADDRESS>...</ADDRESS>
Identifies the information within the tags as an address.
Text is typically rendered in an italic font.
View example of ADDRESS code in browser
Back to top
Before we proceed, it would be helpful to become familiar with the following terminology. A bitmap graphic is a graphic composed of tiny little dots. Those tiny dots are called pixels. Most graphics you see on the web are bitmap graphics. There are also vector graphics, but they are not as widely used. Vector graphics are computer calculations that designate an area to be a certain color. Vector graphics tend to be much smaller in size, and all in all better looking.
There are two common bitmap graphics formats. They are GIF and JPEG.
- GIF's (Graphics Interchange Format) were originated by the online service Compuserve. They are based on a color palette of 256 colors. GIF's can be extremely small, and are usually recommended for buttons, logos, backgrounds, or other graphics that do not require many colors. If you save a full color photograph as a GIF, it will look very unrealistic. The less colors the GIF uses, the smaller the graphic will be. The less physical size the GIF uses, the smaller the GIF will be.
- JPEG's (Joint Photographic Experts Group), which are also known as JPG, are compressed based on quality. JPEG's are recommended for full color photographs. They can handle millions of colors, yet still be small in file size. You should only convert an image to the JPEG format once you have finished making any changes to the image in your image editing program (e.g., Paint Shop Pro, Adobe Photoshop, etc.). JPEGs are optimized by setting a compression level. Compression decreases the file size of the image so the image will download faster. The more the compression, the worse the image quality gets, but also the lower the file size gets. It's best to experiment with the level of compression and image quality when optimizing a JPEG.
There are also other formats, such as PNG (Portable Network Graphics), which have been gaining support, but are still not as commonly supported as GIF and JPEG. However, we may see many web pages moving to PNG graphics in the future.
Back to top
To link to a graphic, use the <IMG> tag. Then, use the SRC attribute to specify the path to that graphic.
Example:
<IMG SRC="images/imagename.gif">
If the graphic file is in the same directory as the HTML file, then no path has to be given. You can simply use the filename as the SRC:
<IMG SRC="filename.gif">
Back to top
Remember that not everyone will have a graphics browser, although most will, or some people might have image loading turned off in their browser. For example, Lynx is a text only browser and cannot display images. If you plan to use buttons to navigate your site, the user that is not able to view graphics might get a bit confused. That's why there is the <ALT> attribute. The ALT attribute allows you to use an alternate line of text to describe the graphic. Including the ALT attribute within your <IMG> tags is essential to making sure your web page is handicapped accessible.
Example:
<IMG SRC="fredlogo.gif" ALT="SUNY Fredonia Logo">
View code for adding images in browser
ALT text works with broken links, and will also display before an image loads. It's always a good idea to use ALT text, which ensures that your site is navigable at virtually all times.
Similar to the <P> tag, there is an alignment attribute with the <IMG> tag, although it is a little different. Instead of aligning the actual image, it aligns any text that appears near the image.
- TOP - Aligns the text to the top of the graphic
- MIDDLE - Aligns the text to the middle of the graphic
- BOTTOM - Aligns the text to the bottom of the graphic
*NOTE: You still have to use another tag, such as <P> to align the graphic.
Example:
<P ALIGN="left">
<IMG SRC="fredlogo.gif" ALT="SUNY Fredonia logo"
ALIGN="top">Here is some text.</P>
View example of how to align images in browser
There are other uses for the ALIGN attribute in images. If you wanted to wrap a lot of text around the graphic, you would use LEFT and RIGHT to define where the overflow text goes.
Example:
<P>
<IMG SRC="fredlogo.gif" ALT="SUNY Fredonia logo"
ALIGN="right">
Here is some sample text<br>
Here is some sample text<br>
Here is some sample text<br>
Here is some sample text<br>
Here is some sample text<br>
Here is some sample text<br>
Here is some sample text<br>
Here is some sample text<br>
</P>
View more align attributes for images in browser
What if the graphic and text is displayed too close together? There is a way to handle that as well. There are two other <IMG> attributes that can define how far the text should be from the graphic:
- VSPACE - Vertical space in pixels
- HSPACE - Horizontal space in pixels
Example:
<P>
<IMG SRC="fredlogo.gif" ALT="SUNY Fredonia logo" ALIGN="left"
VSPACE="15" HSPACE="15">
Here is some sample text<br>
Here is some sample text<br>
Here is some sample text<br>
Here is some sample text<br>
Here is some sample text<br>
Here is some sample text<br>
Here is some sample text<br>
Here is some sample text<br>
</P>
View VSPACE and HSPACE code in browser
Back to top
What if your image is too big?
It is best to reduce the image in your image editor (e.g., Paint Shop Pro, Photoshop) if you would like to scale it down. Even if the image is scaled in half using html width and height values, the browser still has to download the image at the size of its normal scale. If you resize your graphic instead with your image editor, the size of the graphic will be reduced.
Back to top
Giving Your Image a Border
To add a border to your image, simply use the border attribute. You can specify the size of the border by giving it a number (in pixels).
Example:
<IMG SRC="fredlogo.gif" ALT="SUNY Fredonia logo" border="5">
View example of how to add a border to images in browser
Back to top
A URL (Uniform Resource Locator) is the path of either a local (your computer) or remote (on the internet) file. There are two types of URLs, absolute and relative. An Absolute URL is the full URL path. Your browser will always display absolute URLs. For example, the absolute URL for the Web Services home page would be:
http://www.fredonia.edu/WebServices/index.htm
A Relative URL provides a pointer to another document relative to the location of the current document. When you are pointing to another document within your own site, it is usually best to use relative URLs.
So, if you were working on the Web Services home page (index.asp) located at:
http://www.fredonia.edu/WebServices/
and wanted to create a link on that page to the Design Principles web page (http://www.fredonia.edu/WebServices/design.asp) located in the same directory, you would use this as the relative link:
<A HREF="design.asp">Design Principles</A>
*NOTE: If you are in doubt, use the absolute URL instead.
Back to top
Links can be created within your website or to another website. In order to link a document, the <A> tag must be used. The <A> tag is somewhat similar to the <IMG> tag, in that you have to define the source for the link. The <A> tag is a container tag. First the link has to be defined, and then the content to activate the link must be displayed. Everything between the <A> tag and the </A> closing tag will be sent to the URL defined in the initial <A> tag. Since you understand URLs, linking to them should not be much of a problem.
Here is how you use the <A> tag:
<A HREF="http://www.fredonia.edu">This link takes you to
SUNY Fredonia's home page</A>
View A tag example in browser
Here is an example linking to an external website:
<A HREF="http://www.cast.org/bobby/">Bobby</A> -
checks your web page for web accessibility
View example of how to link to and external website
Back to top
In addition to text, you can use graphics to link your pages. Here is an example linking to the external site (Bobby) above:
<A HREF="http://www.cast.org/bobby/"><IMG
SRC="images/approved32.gif" ALT="Graphic of Bobby 3.2" WIDTH="131"
HEIGHT="40" BORDER="0" ALIGN="CENTER"></A>
View example of how to link images
Back to top
In addition to links within and outside of your site, you can link to sections within your page. These links are called named anchors. The best time to use anchors is when you have a long page, with plenty of information. In this situation, it's a good idea to provide a Table of Contents at the top of the page, so that users can quickly jump to the sections of interest to them without having to scroll unnecessarily.
To create a named anchor, first you must create the link, just as you would create any other link. Only instead of placing a URL in the HREF part, you would use the # sign, followed by the name of the anchor. Then create the link and close the tag.
The syntax is as follows:
<A HREF="#bottom">Click here to go to the bottom of the page.</A>
Once you have created a link to the anchor, you must define the anchor itself. This must be done where you want the link to transport the user to. In this instance, you would go to the bottom of the page, and place the anchor there. This is also done with the <A> tag. Only this time, you define the anchor simply by giving it a name. In this case, that name would be "bottom" as indicated below:
<A NAME="bottom">Bottom of the page</A>
Using this example, the user would be transported to the bottom of the page.
View example of an anchor tag
Back to top
Creating E-mail Links
In addition to linking to other pages, you can also create a link for a visitor to send you e-mail. Here, you would use the "mailto:" URL.
Example:
E-mail <A HREF="mailto:firstname.lastname@fredonia.edu">E-mail
address hyperlink</A>
View example of adding an e-mail link
This will launch the e-mail client with the person's complete e-mail address already in the "To" field of the e-mail. You can also specify the "Subject" field in your HTML. Here is how that is done:
<A HREF="mailto:firstname.lastname@fredonia.edu?subject=email">
john.doe@fredonia.edu</A>
View how to add a subject in an e-mail
Back to top
This concludes the Introduction to HTML - Part 1 tutorial. You now have the tools necessary to put together a simple web page. A good way to increase your web page design skills is to look at other HTML source pages. If you are surfing the Internet and find a page you like but do not know how to create it, view the source code:
In Netscape: Go to View | Page Source
In Internet Explorer: Go to View | Source
Or, you can look at their source code offline:
In Netscape and Internet Explorer: Go to File | Save As
Then open the page in your text editor to see the code.
Back to top
Back to top
This concludes Part 1 of the Introduction to HTML tutorial.  Go on to Part 2
|
