The Basics of HTML
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. The current version, HTML5, includes features for natively handling multimedia and graphical elements.
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.
- 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 allow you to create a site completely 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.
- 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.
- 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.
If you want to develop a website but do not want to learn HTML code or use a Web-editing program, other options include web-based drag-and-drop builders or no-code platforms. A website template gives you an already coded design with appropriate images, links, and style into which you can insert your own information. More sophisticated websites utilize content management systems, such as Wordpress, allowing you to manage content within a template and use tools like blogs, discussion forums, and mailing lists on your website. 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 web-based builders and content management systems helps ensure that your website meets usability standards.
Credit: UF/IFAS Blogs
Credit: UF/IFAS Blogs
Reference
Telg, R. & Irani, T.A. (2012). Agricultural communications in action: A hands-on approach. Delmar: Clifton Park, NY.
