This document as been archived from previously offered UTS training course(s) and is NOT updated or supported. For information about current course offerings, please visit: UTS Training For current versions of course handouts, please visit: UTS Training Course Handouts
UNIVERSITY OF DENVER BASIC HTML COURSE OBJECTIVES: Following the completion of this course, students will be able to write html code to do the following: •
Create paragraphs and line breaks
•
Create headings
•
Work with lists
•
Apply comments
•
Apply formatting to text
•
Create tables
•
Create links to other Web pages and e-mail addresses
•
Insert graphics
•
Create bookmarks within a page
•
Create character entities
UNDERSTANDING HTML HTML (HyperText Markup Language) is a programming language written in plain-text format used to create interactive, online Web pages. The HTML is not displayed within the browser, but rather provides the browser with instructions on how to display the page content. It is important to have a basic understanding of HTML in order to troubleshoot problems as they arise within your Web pages. Web standards are not created by either Netscape or Microsoft. W3C or the World Wide Web Consortium is the organizing body that dictates the standards which are acceptable on the web. The most essential Web standards include: HTML, CSS and XML. HTML is made up of markup tags and attributes that work together to identify various parts of the document and tell browsers how the document should be displayed. Markup tags are enclosed in angle brackets (). Most tags are paired with an opening () and closing () tag. The difference between the two is that the closing tag uses a forward slash (/). HTML tags normally come in pairs such as: This will boldface the text.
The text between the start and end tag is referred to as the element content. HTML coding is not case sensitive. Entering the tag is the same as . However, we suggest you get in the habit of using lowercase characters when writing HTML tags. This is because the next generation of HTML (XHTML) will demand the use of lowercase tags.
TAG: The tag tells browsers what version of HTML is being complied with and is the first line of HTML code that should be entered in a document. The document type declaration tag names the Document Type Definition (DTD). HTML 4.01 lists three different document type declarations: strict, transitional and frameset. We recommend that you use the transitional declaration because it is the most flexible version. The HTML 4.01 Transitional DTD should be typed as follows:
In this example, the DTD element (Document Type Definition) tells browsers that the document complies with the HTML version 4.01 Transitional standards. The Web address included in the tag allows a browser to verify the correctness of the coding if it chooses to do so. As new standards become available, the tag may change to indicate a new version such as:
You do not need to revise the tag in existing documents as new standards become available. The tag will not become invalidated.
STRUCTURE TAGS: Structure tags provide browsers with information about the document. These tags provide information such as the title of the page, what version of HTML is being used, where the body of the document begins, etc. The content of these tags is not displayed in the browser window. HTML documents include four basic structure codes as displayed below: A title given to each page uniquely identifying the content of that page The content of your page goes here.
The tag identifies the start and end of the HTML document. The tag contains information about the Web page, such as the title of the page, style sheets being used, and various other document descriptions. Text within the tag will not be displayed. The tag (within the tag) is important because many search engines use the title when retrieving relevant articles in a search. The text within the title tags will also be displayed on the blue title bar of your browser as you view the page. The tag encloses all the information that will be displayed in the browser window. Your entire Web page will be written between the beginning and ending tags.
META TAGS: META tags, also located in the section of your document, are used by many search engines to compile their indices. You can improve a search engine's ability to correctly index your page by including a brief description for your page in the “Description” and “Keywords" META tag. For example, if your page is about housing for DU freshman students, your META tags might look like the following:
COMMON TAGS AND ATTRIBUTES: Once the structure of the web page has been created, the content can be entered in the body section of the page. This content can be manipulated using a variety of HTML tags. Paragraphs, headings and lists are just a few of the basic tags available to manipulate the content. Tags within an HTML document will typically also have attributes associated with them. An attribute provides additional information about an HTML tag – usually instruction on how to format it. Paragraphs and alignment attributes The paragraph tag is the most common tag that you will use. The start tag designates where you wish to begin a paragraph and the end tag designates the end of the paragraph. The following example displays the HTML coding for a basic paragraph including the center and left attribute which will either center or align that particular paragraph to the left on the page. Note that the attributes are included within the start tag. Basic HTML This is a very basic HTML document. No formatting, graphics or styles have been applied to the text. The text lines will break depending upon the size of the browser. This sentence will begin a new paragraph even though I am typing the html coding on the same line as the previous paragraph. It will be aligned to the left.
Below is how the document would look if you were to preview the page in Internet Explorer:
From this example, note that the text within the tags is displayed on the title bar of the browser window. The tag marked the beginning of the paragraph and the tag marked the end of a paragraph regardless of the fact that you did not press the Enter key on the keyboard to begin a new paragraph within your HTML coding. Alignment attributes include the following: align=left align=right align=center
Aligns the paragraph or text to the left Aligns the paragraph or text to the right Centers the paragraph or text
NOTE: When using attributes it is important to understand that many of them are deprecated. This means that they are outdated by newer capabilities. Deprecated elements may soon become obsolete in future versions of HTML. Instead of applying attributes, it is recommended that you create stylesheets to generate the formatting for your text and link the stylesheet to your pages. Applying Line Breaks: The break tag is used when you want to begin a new line of text, but you don’t want to create a new paragraph. No closing tag is needed for this tag. Headings Headings can be applied to break up large areas of text and announce various categories within a document. HTML provides six different levels of headings. Heading 1 is the largest and Heading 6 is the smallest. By default, headings will always be aligned to the left of your document. If you wish to center or right-align the headings, apply the align attribute as described above. The align attribute would be entered within the start heading tag. Below is an example of how you might apply a heading tag. Basic HTML This is an example of a heading 1 style This is an example of a heading 2 style
Below is an example of how it would look in Internet Explorer:
Applying Comments: A comment tag is used to insert a comment into the html code. Comment tags are ignored by Web browsers so the text of a comment will never be displayed on the Web. A comment might be inserted to provide explanation for the following code or it may serve as a note to another user designating where they should input their data. Below is an example of a comment tag:
Comment tags always begin with an exclamation point followed by two hyphens. They always end with two additional hyphens. Working with Lists: When lists are created within HTML, the list is either created as an ordered or unordered list. The ordered list contains numbers or letters and the unordered list contains bullets. Within the list, each item is identified by a list item tag. Ordered List: To-Do List My To-Do List: Laundry Clean the house Wash the car
Unordered List: To-Do List My To-Do List: Laundry Clean the house
Wash the car
Applying bold, italics, underline, super and subscript Formatting can be applied to individual letters and words as well. For example, you can make a word appear bold, underlined, or italicized. Below is a list of common formatting tags you may want to apply as well as an example of how they would be used.
Bold
Underline
Italicize
Subscript
Superscript
Basic HTML Basic HTML This is a very basic HTML document. No graphics or hyperlinks have been applied to the text. However, basic formatting has been applied. The text lines will break depending upon the size of the browser window. This sentence is in superscript. While this line is in subscript
Below is how the code looks if you were to preview the page in Internet Explorer:
You can also apply several formatting tags to the same body of text. This is referred to as "nesting". For example:
Basic HTML Basic HTML This text is both italicized, underlined and in bold!
When nesting tags as illustrated above, always use the FILO rule (First In, Last Out.) This means that the first tag listed initially, should be the last tag listed in the closing. Applying color to a website Colors are applied in HTML using hexadecimal numbers. Hexadecimal numbers combine hues of red, green and blue to form a RGB number. RGB numbers are made up of six digits, two for each portion of red, green and blue. Web colors are often considered “unstable” and may display different hues from computer to computer. This color instability is the result of differences in “gamma” and the color space created by the operating system and monitor. Gamma is responsible for the lightness and darkness of images. Various operating systems are based on different standards of gamma, therefore; colors appear slightly different from one computer to the next. The only way to guarantee that the page will look the same on each user’s monitor is to use “browser-safe” colors when designing your web page. Most monitors can display at least 8 bit (256 colors), but only 216 colors are shared by various other browsers and operating systems. These are considered the “browser-safe” colors. Many resources are posted on the web listing “browser-safe” colors. One such site is www.lynda.com/hexh.html. When you have located a browser-safe hexadecimal value, enter the value as an attribute of the body tag. For example, if you wish to change the background color (bgcolor) of a page, enter the following:
To change the text color for the entire page, enter the following:
Applying fonts, font sizes and font color The font tag allows you to specify criteria regarding the font of the text. For example, the font, font size and color are all attributes which can be applied within the font tag. Begin by first placing the font tag around the text you wish to apply formatting to: This is the text I wish to format.
Specify the font face attribute you wish to apply: This text should now be in the Arial font.
Specify the font size attribute you wish to apply: This text is in the Arial font and is 14 points in size.
Specify the font color attribute (using a hexadecimal value) you wish to apply: This text is typed in red Arial font and is 14 points in size.
Note: As mentioned previously, many of these attributes are deprecated and it is recommended that you create a stylesheet containing all your formatting and then link the stylesheet to your pages. Working with Tables: Tables are frequently used to organize the structure of a page. Several tags are commonly used when creating a table:
Marks the start and end of a table.
Specifies the beginning and end of a table row.
Specifies the beginning and end of a cell.
.
Marks a heading cell within a table.
Below are two commonly used attributes that can be applied to the table tag. A variety of other attributes could also be applied. Border = “1”
Specifies the width of the border.
Width = “100%”
Specifies the overall width of the table in relation to the screen size. This attribute can also be applied to the tag.
Example Table Courses Available: Course Descriptions: Beginning Word Concepts to be covered include: creating, saving and opening documents, editing and deleting text, copying and moving blocks of text, spell checking and previewing and printing documents. Beginning Excel Concepts to be covered include: creating a simple spreadsheet, opening and saving files, printing files, editing text (copying and moving), formatting spreadsheets (fonts, alignment, borders, etc), changing the print settings and creating simple formulas and functions.
Below is how the code looks if you were to preview the page in Internet Explorer.
WORKING WITH LINKS: Links can be used to navigate from one page to another within the Web or can be used to link to e-mail addresses, graphics, movies, etc. Links are also referred to as anchors. Links are made up of two components: •
An Anchor Tag () which marks the text as a hyperlink.
•
An attribute, HREF=…which is located within the anchor tag and lists the Web address for the link.
A basic html link to another Web page might look like this: Hyperlinks
Please visit the University of Denver's new home page.
The text between the start and end tag will be displayed as the hyperlink on the Web. Below is how the code looks if you were to preview the page in Internet Explorer:
E-mail links Linking to an e-mail address is identical to linking to a Web page as described above. The difference is that the href attribute references the mailing address of the individual as illustrated below. The text between the start and end tag again represents what will be displayed as the hyperlink on the Web. Kristi email
WORKING WITH GRAPHICS: The image tag is used when a graphic is inserted into a Web page. There are two components to this tag. •
The tag specifies that it is an image. This is an "empty" tag which does not require an end or closing tag.
•
The “SRC=” is an attribute which specifies the graphic’s URL address or file location where the graphic is stored.
An image tag referencing a graphic from the hard drive of your computer may look like this: Fireworks A photo of the fireworks:
In this particular example, the Fireworks.gif image has been saved to the images folder within the Web. The filename of the graphic is case sensitive. (You must then remember to upload the images folder to the server in order for it be viewed correctly on the Web.) Below is an example of how the code looks if you were to preview the page in Internet Explorer:
An image tag referencing a graphic linked to a Website may look like this:
Applying Alternative text ALWAYS create alternative text for graphics you place on the Web. This is important in order to meet ADA standards. It is also important for those who use text-only browsers. The descriptions within these “alt tags” will be displayed by hovering your mouse over the graphic within a Web browser. To create alternative text for a graphic, simply add an “alt” attribute within the image tag. The attribute should provide a brief explanation of the graphic. For example:
Creating an Image Link Images can also be used as a visual hyperlink. For example, the DU templates include the DU logo in the top left corner. The logo is a hyperlink. If you click on the logo you will be returned to the DU home page. In the following example, if you click the graphic of Penrose Library, you will be taken to the DU home page.
CREATING BOOKMARKS Links within a page are referred to as "bookmarks." You can link to a bookmark from any page in your Web, and you can establish bookmarks in any page within your website. Bookmarks allow the user to jump directly into a specific section of the page rather than forcing the user to scroll through the page looking for information. You must first "bookmark" the text where you want the user to be directed to. The name attribute is used within an anchor tag to create a bookmark. For example: Help Desk positions
To link to the bookmark or named anchor, add a # sign and the name of the bookmark to the end of the href attribute. The text within the anchor tag again refers to the hyperlinked text. For example:
Positions within the Help Desk:
CHARACTER ENTITIES Many characters have a special meaning within HTML coding. For example, the less than sign (
>
Less than <
<
Ampersand &
&
Quotation mark "
"
DU TEMPLATE TAGS: GLOM tags: When working with DU templates, you may see GLOM tags throughout the HTML document. For example:
These tags are derived from Glommer which is a "home grown" DU program that lets us quickly update a series of pages with standardized information. We recommend you leave information between GLOM tags unchanged. Link tags: DU templates also include a “Link” tag located in the section of your document. It links your page to a DU specific stylesheet. This stylesheet gives a uniform look and feel to many DU documents. For example, it indents the text on the page 15% from either margin and includes styles for all your headings and text. We recommend you leave the LINK tag as is. Below is an example of the LINK tag:
OTHER RESOURCES: Here are some Websites you may find useful as you continue to learn HTML and build Websites:
http://www.willcam.com/cmat/html/crossname.html http://www.w3.org/TR/REC-html40/struct/global.html http://www.w3.org http://webreview.com http://www.w3schools.com/default.asp http://hotwired.lycos.com/webmonkey/reference/html_cheatsheet/
The following Websites provide free downloads for text editing software. You may find software useful for writing HTML: http://www.chami.com/html-kit/ www.editpadpro.com/editpadlite.html The following Website provides another free trial version for text writing software: http://www.textpad.com
University of Denver University Technology Services - Training Telephone: 303.871.3690 FAX: 303.871.4999 E-mail:
[email protected]
Copyright © 2003 University of Denver Page last revised September 11, 2003.
