| CIRCA Services This handout can be found online at: http://www.circa.ufl.edu/handouts/services/html/html.html | Getting Started With HTML August 18, 2000 |
HTML, HyperText Markup Language, is a formatting language for text documents. It is used to prepare and publish World Wide Web pages. The World Wide Web is a graphics and text information system. It is one service on the Internet, a worldwide network of computers.In order to publish a Web page, you must make your HTML-formatted text files resident on a computer which offers a World Wide Web server. A number of computers on campus offer Web service, including the GatorLink computer system (plaza), CIRCA's Unix computer (grove), and NERDC's NERSP system. If your department has published a Web page, they may offer accounts on a departmental Web server computer.
Web pages are displayed on your computer screen by Web browsing software like Netscape. Web browsers "read" and interpret HTML formatting tags in your text and display a formatted page on your screen. The tags are the codes surrounded by the symbols
<and>. The tags only specify general formatting, such as<p>, to indicate a new paragraph. Web browsing software interprets the<p>as a double carriage return.
Below is some sample HTML code:
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<img src="smiley.gif">
<hr>
<h2>Hi! Welcome to My Page</h2>
<hr>
This is my <i>first</i> attempt to create a Web page using Hypertext
Markup Language. My interests include:<p>
<ul>
<li>computers
<li>meteorology
<li>jazz
</ul>
Looking for a great employee? See my <a href="resume.html">résumé</a>.
</body>
</html>
Browsing software would display a screen similar to the following:
![]()
Hi! Welcome to My Page
This is my first attempt to create a Web page using Hypertext Markup Language. My interests include:
Looking for a great employee? See my résumé.
- computers
- meteorology
- jazz
Notice that some of the tags, like<title>and</title>, come in pairs which surround the text to be formatted. The title text is often displayed in the title bar of the window of software like Netscape. Also notice that there are two general divisions in an HTML document: the heading (between the<head>and</head>) and the body (between the<body>and</body>). The first and last tags of the page identify the document as HTML (<html>and</html>).Look at the table at the end of this handout for a description of other basic HTML tags used in the sample above.
Many HTML tags simply specify formatting, but some, called hypertext links, provide a link to a graphic or to another Web document. In the sample HTML code,smiley.gifis the name of a file which contains the smiling button graphic. It is automatically displayed by the image source (<img src>) tag.resume.htmis the name of a file which contains another HTML-formatted page. This page will be displayed if the colored and/or underscored résumé text is clicked. The<A /A>part of the tag is called the anchor.HREFstands for hypertext reference. Any hypertext link can reference a file stored in your Web page space or in any other Web page space worldwide. This is the power of the World Wide Web.
The best way to get started with HTML is to develop a Web page. You will need a computer account on a computer which offers Web service.The general procedure to set up your Web space is to make a subdirectory in your file space which is designated as "world readable." This subdirectory is often named public_html. Your Web page files reside in this directory. (Note: this is not necessary when publishing web pages to the GatorLink server.) The Web server looks for this directory and for a file called index.html as the first file to display when given your Web space address. Specific instructions to set up GatorLink Web pages can be found on the Web at URL: http://help.gatorlink.ufl.edu/webserv.html. Specific instructions to set up Web pages on CIRCA's Unix computer can be found on the Web at URL: http://grove.ufl.edu. Specific instructions to set up Web pages on CNS's NERSP computer system can be found in the document Putting Your World Wide Web Home Page on NERDC, also available at E520 CSE. Your college or department Web server will have similar instructions.
There are several approaches to prepare HTML documents. One is to use editor software available on the Web server computer and to type HTML tags along with your text. This is particularly direct when you make minor updates to existing HTML files. A simple editor that is usually available on Unix systems is pico. Read the CIRCA handout, Unix text editors, available at E520 CSE for more instructions. This method is not available for GatorLink web pages.
Another approach is to use a word processor or text editor on a microcomputer and transfer the files to your file space on the Web server. HTML text files must be saved as ASCII text only or specifically as HTML files, if that option is available, so that they will not contain word processor codes. A number of word processors now have HTML authoring features which help you automate some of the typing. The simplest way to transfer the files to your Web space is to use FTP software (Fetch for the Macintosh, WS-FTP for Windows.)
A third way to write HTML is to use software which has been specifically developed for HTML authoring. Netscape Composer, Microsoft FrontPage, and Claris HomePage are examples of common HTML editors. You would then need to transfer the HTML files to your Web space. Whatever method suits you best, your final product is a simple text file containing HTML tags in your Web directory.
A good source to learn more about HTML is NCSA's HTML Primer, located locally on the Web at URL: http://grove.ufl.edu/htmlhelp.html. In fact, the most up-to-date and detailed information is available on the Web itself. Use your favorite Web search engine or a search engine available from the UF Home Web page at http://www.ufl.edu/ to search for information.Another effective way to learn more HTML is to view the source HTML of other Web pages. Choose pages that you particularly like and use the command in your Web browser which displays the HTML source.
There are many HTML books on the market today. These range in scope from tutorial or quick reference guides to comprehensive texts.
There are also training sessions offered by various campus groups. CIRCA offers Leisure Courses, the CITT offers faculty and staff lessons and the Libraries offer workshops on HTML. See the training topic at http://www.cio.ufl.edu/ for current schedules.
Opening Code Closing Code Purpose <a href="destination"> </a> Anchor. Creates a link to another html document. <hr> not necessary Horizontal rule. Places a horizontal line across an HTML document. <h1> </h1> Header code. Enlarges text (from 1-6, 1 being the largest). <i> </i> Italics. Italicizes text between the opening and closing codes. <img src="filename"> not necessary Image link. Used for placing images within documents. <li> not necessary List item. Specifies the text for one item in a list. <p> not necessary Paragraph. Equivalent to a double carriage return. <title> </title> Title of page. Usually appears in the title bar of a Web browser. <ul> </ul> Unordered list. These codes surround the <li> codes which specify each element of the list.