University of FloridaSolutions for Your Life

Download PDF
Publication #AEC568

The Basics of HTML1

Ricky Telg, Laura M. (Gorham) Fischer, and Tracy Irani2

This publication on learning HTML basics is the third of a four-part series on writing and designing for the web. This series also covers how to write and design a basic web page, understand the difference between good and bad websites, and integrate the basics of HTML.

The Language of the Web

HTML stands for hypertext markup language, which is the programming language or code used to create pages on the web. Originally, programmers who knew code typed out the basic HTML codes into a text editor, like Windows Notepad or Winpad, and saved the files with an .htm or .html extension to create a web page. These days, web developers use HTML editors (referred to as web-editing software programs), which automatically generate the HTML code, or they use cascading style sheets, also known as CSS. CSS styles were developed in the 4.0 version of HTML as a way of defining how to display HTML elements in a web browser. CSS is beyond the scope of this factsheet, but it helps to know that there are multiple ways to code a Web page.

HTML codes are sometimes called tags because the actual code must be placed inside a container tag or bracket (see Table 1 for some examples and explanations of common HTML tags). Spaces and returns do not matter, as HTML will not read them. Commands are not case sensitive, but there are rules that must be followed in order to have the pages display properly. The tags are often nested, so, for example, all the code for a given page must be placed inside the <html></html> tag. This is read as “open html” and “close html.” Anytime you see a slash mark inside the brackets ( </> ) it means “close the tag.” Inside this tag, the head information—which gives the web page a title that shows up in the browser display—must be placed inside the <head></head> tag, while everything displayed on the page itself must be contained in the <body></body> tag. HTML format tags can express attributes such as font color and style, can be nested inside of each other, and can be used to format how the page looks or to insert a graphic of a particular size.

Given the option to use a web-editing program, you may wonder why anyone needs to learn to use HTML. In fact, understanding the basic structure of a web page is useful, and when things go wrong, it is often much easier to look at the code to find the problem and adjust accordingly. The leading web-editing programs, like Adobe Dreamweaver, let you display both the code itself and the actual page at the same time to make it easier to toggle between the code and page view. These programs can also generate CSS, which include specialized code that allows you to define and create the formatting and design of a web page with great precision.

Using Web-Editing Programs

Using web-editing programs, like Adobe Dreamweaver, can save time and produce attractive websites. With web-editing software, you do not have the control that web designers who know CSS (cascading style sheets) or HTML coding have, but web-editing programs allow you to create web pages quickly. You can also find free editing programs on the web, sometimes called “shareware” because users share the software for free.

Web-editing programs let you make pages, insert images and text, create links and tables, add a background image or color, and publish or upload the site to a server so others can access it by typing the web address in their browser. The following steps explain how to make a basic site.

  1. Create a defined site. To create a defined site, first create a folder somewhere on your hard drive. Then, within that named file folder, create another folder. This one should be named “images.” Place all of your photographs and graphics you want to use for the site in this folder. Once you have done this, you can then use the web-editing program to define the site so that all of the pages you create will be saved to the original file folder. You will insert images on your Web pages from the photographs that are saved to your images folder. Note that many online programs—such as Wordpress—allow you to create a site totally online, without creating a defined site on your computer. However, for high-end programs, such as Adobe Dreamweaver, maintaining a “defined site” on a local computer from which you can then upload is a good practice.

  2. Establish a home page. After you have created a defined site, you can start creating web pages in the software program. Your main page is your home page. This is the page your web viewers will access first. The file name that you use to save your home page should be “index.html” or “index.htm.” It should not be “homepage.html” or “firstpage.html” or anything else like that. Only use “index.html” or “index.htm” because web browsers have been set up to recognize “index” to be a home page. When you visit a website, the home page’s actual web address hides the “index.html” portion of the address, so you do not have to type it. For example, if you visited CNN’s website, the actual address is “www.cnn.com/index.html,” but because the Web browser recognizes “index.html” as the home page, all you have to type is “www.cnn.com.” If you save your home page as something other than “index.html,” you will have to type the entire web address—like “www.organization.edu/firstpage.html”—in order to access the home page.

  3. Create your home page and its navigation. Create your home page and its navigation first. Spend time designing this page and then use it as a template for other pages on your site. Again, please note that many online programs offer templates that create navigation buttons automatically. In naming your web pages, you should never use capital letters or use spaces between letters. You may use underscores if you want to put in two words, but never leave a space between letters. A space between two words in HTML is actually the code “20%,” so if you see this in a web address, you will know that a space was included in the actual address.

Most HTML editors have a publish or upload function, also called FTP, or file transfer protocol. Once your pages are all created and linked to each other, you can use this function to upload your site to a server.

As has been mentioned previously, if you want to develop a website but do not want to learn HTML code or use a Web-editing program, another option is to use a template. A website template gives you an already coded design with appropriate images, links, and style into which you can insert your own information. Some of the more sophisticated templates also let you manage content and use tools like blogs, discussion forums, and mailing lists on your website. An example of a more sophisticated template producer is WordPress, available at https://wordpress.com/. An advantage of using a template is that it will have built-in standards, such as what is required to make a website useable by someone with a disability. Usability refers to the general ease or difficulty your users have in navigating your website and finding what they need. Creating a website from an existing template like those offered by WordPress helps ensure that your website meets usability standards. If you are developing your own site using an HTML editor or by typing in HTML code by hand, you can test your site by showing it to a few of the people who you think will be using the site to see what they think about its ease of use.

Figure 1. 

A WordPress blog page.


Credit:

UF/IFAS Blogs


[Click thumbnail to enlarge.]

Figure 2. 

The HTML(highlighted) that generates the blog page in Figure 1.


Credit:

UF/IFAS Blogs


[Click thumbnail to enlarge.]

Reference

Telg, R. & Irani, T.A. (2012). Agricultural communications in action: A hands-on approach. Delmar: Clifton Park, NY.

Tables

Table 1. 

Common HTML tags

Tag Type

Tag

Used for…

Notes

HTML Code Tag

<html> </html>

marking the beginning and end of each HTML coded page

 

Header

<head></head>

descriptive information

 

Title

<title></title>

putting a title in the top line of the Web page

 

Body

<body></body>

all text, graphics, and photos

<body></body> must be between these two HTML tags on a page. The only tag that comes after the close body tag </body> on the page is the close HTML tag </html>.

Paragraph

<p>

putting lines in on a web page

You do not have to have a “close paragraph” tag </p>. This is the only tag that does not require a “close” tag.

Heading sizes for text

<h#></h#>

creating different heading levels

The smaller the number (#), the bigger the heading (1-6).

Links

<a href>

linking to other web pages and making your web pages interactive

<a href> stands for anchor hypertext reference. Put quotation marks around the linked page file you are referencing. You also need a “close anchor” </a> to close the hypertext link tag.

Example: <a href=“gallery.htm”>Gallery Images </a> means that the words “Gallery Images” will be hyperlinked to the page “gallery.htm.”

Graphics/photos

<img src>

inserting graphics

You have to use an image source <img src> tag to insert graphics. Example: <img src="balloon.gif"> means that the image (graphic) “balloon.gif” will be inserted on your web page.

Linking a graphic

<a href> and <img src>

linking an image to another page

Do not forget the </a> (close hyperlink) tag.) Example: <a href= “index.htm”><img src= “ballon.gif”></a>

means that the image “balloon.gif” will be hyperlinked to the page “index.htm.”

Colors

<body bgcolor=“#colorvalue”>

setting the background color for the page as a whole

You can have different colors for text and backgrounds. Certain word colors or numeric combinations can be typed in to represent different colors. Colors are explained in more detail later in this chapter in the “Web Color” section.

Example: <body bgcolor=“white”>

<body bgcolor=“008080”> (for dark cyan)

<body text=“#colorvalue”>

setting the text color

<body link=“#colorvalue”>

setting the unvisited link color

<body vlink=“#colorvalue”>

setting the visited link color

Unordered lists

<ul></ul> and <li>

creating bulleted lists

You must put <li> before each line of the list.

This is an unordered list:

<ul>

<li> First line

<li> Second line

<li> Third line

<li> Fourth line (add as many as necessary)

</ul>

The unordered list above would look like this on your Web page:

• First line

• Second line

• Third line

• Fourth line (add as many as necessary)

This is an ordered list:

<ol>

<li> First line

<li> Second line

<li> Third line

<li> Fourth line (add as many as necessary)

</ol>

An ordered list, like the one above, would look like this on your Web page:

1. First line

2. Second line

3. Third line

4. Fourth line (add as many as necessary)

Ordered lists

<ol></ol> and <li>

creating numbered lists

Boldface

<b></b>

making text bold

 

Italics

<i></i>

putting text in italics

 

Block quote

<blockquote></blockquote>

putting text into a block quote (indenting text on both sides)

 

Footnotes

1.

This document is AEC568, one of a series of the Department of Agricultural Education and Communication, UF/IFAS Extension. Original publication date August 2015. Reviewed September 2018. Visit the EDIS website at http://edis.ifas.ufl.edu.

2.

Ricky W. Telg, professor, Department of Agricultural Education and Communication; Laura M. (Gorham) Fischer, assistant professor, College of Communication and Information, University of Kentucky; and Tracy Irani, professor, Department of Family, Youth and Community Sciences; UF/IFAS Extension, Gainesville, FL 32611.


The Institute of Food and Agricultural Sciences (IFAS) is an Equal Opportunity Institution authorized to provide research, educational information and other services only to individuals and institutions that function with non-discrimination with respect to race, creed, color, religion, age, disability, sex, sexual orientation, marital status, national origin, political opinions or affiliations. For more information on obtaining other UF/IFAS Extension publications, contact your county's UF/IFAS Extension office.

U.S. Department of Agriculture, UF/IFAS Extension Service, University of Florida, IFAS, Florida A & M University Cooperative Extension Program, and Boards of County Commissioners Cooperating. Nick T. Place, dean for UF/IFAS Extension.