AEC568
The Basics of HTML1
Ricky Telg, Laura M. Fischer, Kevin Kent, and Tracy Irani2
This publication on learning HTML basics is the third of a but there are rules that must be followed in order to have
four-part series on writing and designing for the web. This the pages display properly. The tags are often nested, so,
series also covers how to write and design a basic web page, for example, all the code for a given page must be placed
understand the difference between good and bad websites, inside the <html></html> tag. This is read as “open html”
and integrate the basics of HTML. and “close html.” Anytime you see a slash mark inside the
brackets ( </> ) it means “close the tag.” Inside this tag, the
The Language of the Web head information—which gives the web page a title that
shows up in the browser display—must be placed inside
HTML stands for hypertext markup language, which is
the <head></head> tag, while everything displayed on the
the programming language or code used to create pages on
page itself must be contained in the <body></body> tag.
the web. Originally, programmers who knew code typed
HTML format tags can express attributes such as font color
out the basic HTML codes into a text editor, like Windows
and style, can be nested inside of each other, and can be
Notepad or Winpad, and saved the files with an .htm or
used to format how the page looks or to insert a graphic of
.html extension to create a web page. These days, web
a particular size.
developers use HTML editors (referred to as web-editing
software programs), which automatically generate the Given the option to use a web-editing program, you may
HTML code, or they use cascading style sheets, also wonder why anyone needs to learn to use HTML. In fact,
known as CSS. CSS styles were developed in the 4.0 ver- understanding the basic structure of a web page is useful,
sion of HTML as a way of defining how to display HTML and when things go wrong, it is often much easier to look
elements in a web browser. CSS is beyond the scope of this at the code to find the problem and adjust accordingly. The
factsheet, but it helps to know that there are multiple ways leading web-editing programs, like Adobe Dreamweaver, let
to code a Web page. The current version, HTML5, includes you display both the code itself and the actual page at the
features for natively handling multimedia and graphical same time to make it easier to toggle between the code and
elements. page view. These programs can also generate CSS, which
include specialized code that allows you to define and
HTML codes are sometimes called tags because the actual
create the formatting and design of a web page with great
code must be placed inside a container tag or bracket (see
precision.
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,
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. Revised November 2021. Visit the EDIS website at [Link] for the currently supported version of this publication.
2. Ricky W. Telg, professor, Department of Agricultural Education and Communication; Laura M. Fischer, assistant professor, College of Agricultural
Sciences and Natural Resources, Texas Tech University; Kevin Kent, lecturer, Department of Agricultural Education and Communication; 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. Andra Johnson, dean for UF/IFAS Extension.
Reviewed: 09/2024
Using Web-Editing Programs 3. Create your home page and its navigation. Create your
home page and its navigation first. Spend time designing
Using web-editing programs, like Adobe Dreamweaver,
this page and then use it as a template for other pages on
can save time and produce attractive websites. With
your site. Again, please note that many online programs
web-editing software, you do not have the control that web
offer templates that create navigation buttons automati-
designers who know CSS (cascading style sheets) or HTML
cally. In naming your web pages, you should never use
coding have, but web-editing programs allow you to create
capital letters or use spaces between letters. You may use
web pages quickly. You can also find free editing programs
underscores if you want to put in two words, but never
on the web, sometimes called “shareware” because users
leave a space between letters. A space between two words
share the software for free.
in HTML is actually the code “20%,” so if you see this in
Web-editing programs let you make pages, insert images a web address, you will know that a space was included in
and text, create links and tables, add a background image the actual address.
or color, and publish or upload the site to a server so others
Most HTML editors have a publish or upload function,
can access it by typing the web address in their browser. The
also called FTP, or file transfer protocol. Once your pages
following steps explain how to make a basic site.
are all created and linked to each other, you can use this
1. Create a defined site. To create a defined site, first create function to upload your site to a server.
a folder somewhere on your hard drive. Then, within that
If you want to develop a website but do not want to learn
named file folder, create another folder. This one should
HTML code or use a Web-editing program, other options
be named “images.” Place all of your photographs and
include web-based drag-and-drop builders or no-code
graphics you want to use for the site in this folder. Once
platforms. A website template gives you an already coded
you have done this, you can then use the web-editing
design with appropriate images, links, and style into which
program to define the site so that all of the pages you
you can insert your own information. More sophisticated
create will be saved to the original file folder. You will
websites utilize content management systems, such as
insert images on your Web pages from the photographs
Wordpress, allowing you to manage content within a
that are saved to your images folder. Note that many
template and use tools like blogs, discussion forums, and
online programs allow you to create a site completely
mailing lists on your website. An advantage of using a
online, without creating a defined site on your computer.
template is that it will have built-in standards, such as what
However, for high-end programs, such as Adobe Dream-
is required to make a website useable by someone with a
weaver, maintaining a “defined site” on a local computer
disability. Usability refers to the general ease or difficulty
from which you can then upload is a good practice.
your users have in navigating your website and finding what
2. Establish a home page. After you have created a defined they need. Creating a website from an existing template like
site, you can start creating web pages in the software those offered by web-based builders and content manage-
program. Your main page is your home page. This is the ment systems helps ensure that your website meets usability
page your web viewers will access first. The file name that standards.
you use to save your home page should be “[Link]”or
“[Link].” It should not be “[Link]” or “first-
[Link]” or anything else like that. Only use “index.
html” or “[Link]” 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 “[Link]” portion of the address, so you do not
have to type it. For example, if you visited CNN’s website,
the actual address is “[Link]/[Link],” but
because the Web browser recognizes “[Link]” as the
home page, all you have to type is “[Link].” If you
save your home page as something other than “index.
html,” you will have to type the entire web address—like Figure 1. A WordPress blog page.
“[Link]/[Link]”—in order to Credits: UF/IFAS Blogs
access the home page.
The Basics of HTML 2
Figure 2. The HTML(highlighted) that generates the blog page in
Figure 1.
Credits: UF/IFAS Blogs
Reference
Telg, R. & Irani, T.A. (2012). Agricultural communications in
action: A hands-on approach. Delmar: Clifton Park, NY.
The Basics of HTML 3
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 <a href> stands for anchor hypertext reference.
and making your web pages Putquotation marks around the linked page
interactive file you are referencing. You also need a “close
anchor” </a> to close the hypertext link tag.
Example: <a href=”[Link]”>Gallery Images </
a> means that the words “Gallery Images” will be
hyperlinked to the page “[Link].”
Graphics/photos <img src> inserting graphics You have to use an image source <img src> tag to
insert graphics. Example: <img src=”[Link]”>
means that the image (graphic) “[Link]” will
be inserted on your web page.
Linking a graphic <a href> and <img src> linking an image to another Do not forget the </a> (close hyperlink) tag.)
page Example: <a href= “[Link]”><img src= “ballon.
gif”></a>
means that the image “[Link]” will be
hyperlinked to the page “[Link].”
Colors <body bgcolor=”#colorvalue”> setting the background color for You can have different colors for text and
the page as a whole backgrounds. Certain word colors or numeric
<body text=”#colorvalue”> setting the text color 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 link=”#colorvalue”> setting the unvisited link color
<body vlink=”#colorvalue”> setting the visited link color
The Basics of HTML 4
Tag Type Tag Used for... Notes
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)
The Basics of HTML 5