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 <head> 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 <body> 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 <body> tags.<br />
<br />
META TAGS: META tags, also located in the <head> 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: <meta name="description" content="Guide to Freshman housing on the University of Denver campus"> <meta name="keywords" content="housing, Freshman, campus, University of Denver"><br />
<br />
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 <p> is the most common tag that you will use. The start tag <p> designates where you wish to begin a paragraph and the end tag </p> 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. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta name=“description” content=”Basic HTML guide”> <meta name=”keywords” content=”html, basic, guide”> <title>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 <p> tag marked the beginning of the paragraph and the </p> 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<br />
<br />
Aligns the paragraph or text to the left Aligns the paragraph or text to the right Centers the paragraph or text<br />
<br />
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 <br> 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 <h1> is the largest and Heading 6 <h6> 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. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta name=“description” content=”Basic HTML guide”> <meta name=”keywords” content=”html, basic, guide”> <title>Basic HTML This is an example of a heading 1 style
This is an example of a heading 2 style