HTML is the acronym for HyperText Markup Language, the markup language that is used to create a document for the World Wide Web. With HTML a Web document can contain text, images, tables, links, and a variety of multi-media files. This handout covers the basic features of HTML to help you get started creating Web pages.
HTML documents are plain (ASCII) text format and can be created using any text editor. Macintosh computers come with the text editor SimpleText. PCs contain the editor called Notepad. Microsoft Word may also be used; however when saving your document created with Microsoft Word, change the Save File as Type field to Text Only. That way, none of the formatting used in Word will be included in the document.
An HTML document consists of two parts. One part is the tags. The other part is the data elements that will be displayed as the Web Page. The HTML tags tell the Web browsers, such as Netscape and Internet Explorer, how to display the data element.
Several tags are used for giving your document structure.
Enclose every HTML document within the <HTML> . . .</HTML> tags to tell the browser that this is an HTML document.
The Head section of the HTML document contains the Title of the document.
Every HTML document should have a title. When viewed by a web browser the title is displayed in the title bar of the browser window, it is not actually part of the web page. The title is also used for document identification in search engine databases and when the site is Bookmarked. Choose the title appropriately.
The Body section of the HTML document contains the data elements, i.e. text, images, links, etc. that will make up the web page.
A well-designed web page should contain an Address section. Include the name of the author of the page, an e-mail address for that person, and the date of creation or last update.
The data elements in the Body section will be displayed as the web page.
HTML contains six levels of headings, numbered 1 through 6. Heading 1 <H1> is the most prominent. All headings are bold and have blank lines before and after them by default.
| <h1>This is a heading one</h1> | This is a heading one |
| <h2>This is a heading two</h2> | This is a heading two |
| <h3>This is a heading three</h3> | This is a heading three |
| <h4>This is a heading four</h4> | This is a heading four |
| <h5>This is a heading five</h5> | This is a heading five |
| <h6>This is a heading six</h6> | This is a heading six |
Paragraphs are contained within the Paragraph tags, i.e. <P> . . .</P>. In HTML Web browsers ignore carriage returns, indentations, and blank lines or spaces.
To insert a line break in an HTML document, use the tag <BR>. This tag does not have a closing tag.
There are three kinds of lists in HTML: ordered, unordered, and definition lists.
Ordered lists are numbered automatically by the browser.
Unordered lists use bullets to identify each item in the list.
Definition lists format title and detailed information.
| List Type | HTML Code | How It Appears |
|---|---|---|
| Ordered List |
<OL> <LI>This is the first item</LI> <LI>This is the second item</LI> <LI>This is the third item</LI> </OL> |
|
| Unordered or Bulleted List |
<UL>
<LI>This is the first item</LI> <LI>This is the second item</LI> <LI>This is the third item</LI> </UL> |
|
| Definition List |
<DL>
<DT>This is a Term</DT> <DD>This is a definition</DD> <DT>This is another Term</DT> <DD>This is another definition</DD> </DL> |
|
Links are created using the anchor tag, <A HREF="url">. The general syntax is
<A HREF="url">Link Text</A>
Sample Link: <A HREF="http://www.utexas.edu/">">UT Austin Web Central</A>
Images
To include an image on a Web page, use the tag <IMG SRC="url"> where "url" is the location of the image file. The "url" can simply be "image filename" if the image is located in your UNIX home directory. Include the attributes of HEIGHT, WIDTH and ALT with the <IMG SRC> tag. The ALT attribute specifies a text alternative for the image so when users have images turned off or are using a browser that does not display images, they see the alternative text. The HEIGHT and WIDTH attributes, expressed in pixels, are used to indicate the size the image should be. These attributes are not required; however, the page will layout quicker with their inclusion.
The <HR> tag will produce a horizontal line on the Web page. The width and thickness of the line can be adjusted using attributes with this tag. For example, the code <HR WIDTH="50%" SIZE="5"> will produce a line extending 50% across the browser window and be 5 pixels thick.
In addition to linking to other web pages or documents, links can be created from one part of a document to another. This is helpful with very long documents that may contain a table of contents.
Sample:
<A HREF="#introduction">Introduction</A>
<A HREF="#chapter_1">Chapter One</A>
<A HREF="#chapter_2">Chapter Two</A>
.
.
.
<A NAME="introduction">Introduction</A>The introductory text.
<A NAME="chapter_1">Chapter One</A>Chapter one text.
<A NAME="chapter_2">Chapter Two</A>Chapter two text.
Uploading HTML Documents to Web Servers
In order for the world to see your web page, the HTML documents must be served from a Web Server.
Publishing Options
You must have an account on a Web Server. See http://www.utexas.edu/learn/puboptions/ for information about publishing at UT Austin.
Your HTML documents must be uploaded from your personal computer to the Web Server. This requires the use of an FTP program. Macintosh users can use Fetch. Windows users can use WS_FTP. Documentation on these programs can be found at http://www.utexas.edu/cc/training/trsdocs.html.
Most HTML tags have an opening tag and a closing tag. Usually the closing tag just adds a "/". The tags enclose the data element and tell the browsers how to display it. Here are some basic tags that will help you create your source code.
NOTE: HTML is not case sensitive. <title> is the same as <TITLE>.
| NAME | SYNTAX | DESCRIPTION |
|---|---|---|
| HTML | <HTML> ... </HTML> | Begins and ends each HTML document -- indicates that the file is written in HTML. |
| Head | <HEAD> ...</HEAD> | Every document has a head section, which includes the title. |
| Title | <TITLE>...</TITLE> | The Title appears in the window as a name for the web page — this tag goes in the Head section. |
| Body | <BODY>...</BODY> | Contains all the information to be in your web page - text, links, etc. |
| Headings | <H#>...</H#> | Heading fonts are H1 - H6 with H1 being the most prominent and H6 the least prominent. |
| Paragraph | <P>. . . </P> | Ends a paragraph and leaves a blank line. |
| Line Break | <BR> | Ends the line and starts on the next line. |
| Horizontal Rule | <HR> | Makes a line across the page. |
| Inline Image | <IMG SRC="url"> | Displays an inline image |
| Bold | <B>...</B> | Makes text boldface. |
| Italics | <I>...</I> | Makes text italicized. |
| Unordered List | <UL>...</UL> | Makes a list of items with bullets. (list items in between with the <li> tag) |
| Ordered List | <OL>...</OL> | Makes a list of items with numbers (list items in between with the <li> tag) |
| Definition List | <DL>. . .</DL> | Creates an format for terms and definitions, or titles and descriptive information. |
| List Item | <LI>. . .</LI> | Designates a list item (use with ordered or unordered lists). |
| Anchor | <A HREF="url">...</A> | Specifies a link to another page or part of the same document. |
| Address | <ADDRESS>...</ADDRESS> | Includes signature, address information and authorship and appears at the bottom of the page. |
<HEAD><TITLE>Sample Page</TITLE></HEAD>
<BODY BGCOLOR="#FFFFFF">
<CENTER>
<IMG SRC="http://www.utexas.edu/depts/ut-images/basegifs/img0056.gif">
<H1>My Home Page</H1>
</CENTER>
<HR SIZE="5" WIDTH="50%" NOSHADE>
<H2>Personal Information</H2>
Here is some information about me.
<H2>Professional Interests</H2>
<OL>
<LI><A HREF="http://www.utexas.edu/computer/sales/">Computers</A></LI>
<LI><A HREF="http://www.whitehouse.gov/">Government</A></LI>
</OL>
<H2>Personal Interests</H2>
<UL>
<LI><A HREF="http://www.cnn.com/">News</A></LI>
<LI><A HREF="http://www.music.warnerbros.com/rocknroll/">Music</A></LI>
</UL>
<HR width="50%" size="6" noshade>
<ADDRESS>
This page was created by me<BR>
Send Comments to: <A HREF="mailto:[email protected]">[email protected]</A><BR>
Last updated 11 December 1998<BR>
</ADDRESS>
<P>
Return to <A HREF="http://www.utexas.edu/">UT Austin Web Central</A>
</P>
</BODY>
</HTML>