HTML

What is it?

HyperText Markup Language. It's the language of the Web. It provides the structure of the content on a Web page. You will use elements or tags to "mark up" text on the page, so the browser knows how to display it. CSS (Cascading Stylesheets) provides consistent design techniques and JavaScript can add interactivity. But HTML is where it all begins.

Why should I learn it?

Knowing a little HTML can go a long way. Even if you aren't going to be coding websites by hand, you might need to tweak something in a content management system, like Wordpress, or resolve a simple coding issue in a project site you are managing. Plus, if you are going to learn programming, this is a good place to start.

What can I do with it?

You can start to make Web pages with HTML. You will learn the basic elements and their associated attributes. But your pages won't look that great. That's ok. We'll move into design with CSS next.

How long will it take?

If you buckle down, you could do this tutorial in a few hours. There are eight videos that clock in under an hour. But take your time. You'll want to follow along with the code on your own and spend some time modifying it until you understand all the elements and attributes.

Getting Started

HTML (HyperText Markup Language) files are text files that include tags that indicate the structure of a Web page. A Web browser reads the HTML file and interprets the elements, thus presenting the information in the way the Web designer intended.

An HTML file can be developed in a simple text editor like TextEdit, BBEdit or Notepad. Or you can use an HTML editor like Text Wrangler, Sublime Text, Komodo Edit or Notepad++. You simply save the file with the .html extension. Programs like Dreamweaver also create HTML, but it's good to learn how to hand-code from the start, so you can modify existing code or customize a template.

HTML5 is the current generation of html. It functions in the same manner as previous versions, but adds semantic tags, rich media and animation features and works with CSS3. XHTML (X is for extensible) was introduced in 2000, and it provided more structure and guidelines to HTML. Used in conjunction with stylesheets, XHTML separated document structure from formatting, thus allowing more flexibility in Web design.

An element (or tag) is a command written between angle brackets (the less-than and greater-than symbols).

<html>

Some elements have attributes that provide a variety of options. The attributes have associated values deemed by the designer.

<tag attribute="value"> <body bgcolor="blue" text="#A10010">

Values are surrounded by quotation marks. If you happen to be copying html from another document, always be sure you aren't copying rich text quotation marks or apostrophes. They will not render correctly in the browser and are likely to cause problems in the code.

Most tags must also be closed after inserting the contained text.

<strong>Cindy’s Page</strong>

This element bolded the text "Cindy's Page". The closing tag makes sure the rest of the text is not bolded in the document.

In HTML, elements could be written with uppercase or lowercase text and it made no difference to most major browsers. However, in XHTML, lower-cased tags were required, but code still renders regardless. It is considered consistent coding style to use lowercase for html elements in HTML5 and is the standard that most Web developers now use.

Another standard introduced by XHTML was the requirement that all elements must be closed. In most cases, you close the element after the text that you are marking up, as in the use of

</strong> above. In other cases, a standalone element applies the "/" within itself to conform to the standard. See the code for breaks and images below.

Basic Elements

Basic Elements

  • <html> - the opening tag on every html page. It tells the browser that this is an html file.
  • <head> - indicates the head section of the document. Nothing within the head tag actually shows up on page, but this is where designers can store information about the title or special search terms associated with the page.
  • <title> - indicates the title of the page. This title does not show up on the page itself, but in the top title bar or tab of the browser. The title should reside in the head section of the document.
  • <body> - indicates the beginning of the section with content in it. There should be no content between the <head> or <body> sections of the page. The attribute bgcolor can be used within the body tag to change the background color of the page. You can use the six-character hexidecimal code (see the websites that provide HTML Color Codes) or you can use a limited number of words to describe color, i.e. red, blue, lightblue, orange, etc.
    <body bgcolor="#AA11CC"> or <body bgcolor="red">
  • <strong> replaced <b> to create bold text;
  • <em> replaced <i> to create italic text;
  • <h1>, <h2>, <h3><h6> etc. – indicates a level of heading size. Use headings as you would an outline, giving the smallest number to the item of the top importance and so on. You will control the size and typeface later in CSS.
  • <p> - indicates the opening of a paragraph; puts space between it and the previous content creating a new block of text.
  • <br /> - provides a line break without the spacing of a paragraph; use the closing slash within the element to close it. This is an example of a standalone tag, because there is no text being surrounded by it, nothing to "mark up."

Format of an HTML file

Copy and paste all the code in the Code Sample to the right into a text editor like Text Wrangler (Mac) or Notepad++ (PC).

Note: All html files should be saved with .html extension. For the homepage of your site, name it index.html. This is the default filename for the home page when it is on the Web. When you upload the file to the Web, the user simply has to type the domain name into the browser to get to the home page of your site. Other pages on your site can be named anything you want, with the .html extension. For consistency and easy troubleshooting, filenames should be lowercase with no spaces.

Save the file you are working as index.html. It is a good idea to start with a new folder on your computer when you save the file. Open index.html in a browser (File, Open File). You should see the file render with the title, background color and heading and paragraph formats. Notice the structure of the page, the opening html element, the head and body sections, the use of the bgcolor attribute and the way that all elements are closed around the content it modifies.

Play with some additional headings, like h3, h4, to see how they work and change the bgcolor value. Feel free to add or change content to make the page your own!

Code Sample - Basic Elements

Your page should look something like this when you open it in a browser. Don't worry that it's not that elaborate yet. Next you'll learn to add images, links, lists and tables, and in the next lesson you'll learn to apply styles with CSS.

Inserting Images

Images add visual interest to your pages. You have to have a digital image. Web browsers can read .jpg, .gif and png files. You can use images from a digital camera, create your own images in a graphic design program, scan photos or images or use images from other Web sites (but not copyrighted images). Images can be still or animated. This site doesn't cover graphic software packages, but there are many good tutorials across the Web on using Photoshop and Illustrator.

Once you have an image that you want to insert, the tag is as follows:

<img src= "imagename.jpg" />

This will insert an image into the file named “imagename.jpg” that exists in the same folder as the page you are working on. If the image is in or will be in a different folder than the page, the folder path will have to be included in the file reference.

<img src= "graphics/imagename.jpg" />

Notice the use of the closing slash. The img element is another standalone element, because it does not wrap around content to mark it up. It is simply a reference to a file.

IMG attributes

  • src - file source of image
  • border= "n", where n is the size in pixels of desired border
  • alt="text", where text is alternative text that shows when image is not available or when someone is using a text reader (as in visually challenged); alt tags are very important for accessibility standards
  • width="x", height="y" – where x and y are specific dimensions of the file. Be careful with this. If you do not use the proper proportions, your image will be distorted on the Web.
  • align="left" or align="right" – used to wrap text around an image

Many of the attributes above will be replaced with CSS for further styling.

Using a Background Image

Use the background attribute of the body element to use a background image for an entire page. If it is located in a different directory, then the directory path must be specified.

<body background="imagename.gif">

Small background images will be tiled to fit the screen.

You can make your own background images (in Photoshop, etc.) or you can find images to use as backgrounds all over the Web. To save an image from the Web, simply hold down the right click or ctrl-click on the image or background and use the Save command. But, you should never use images on your Web site that you do not have permission to use.

In the early days of the Web, designers used colorful backgrounds on their pages. As the novelty has worn off, most designers prefer to use black text on white backgrounds (easier to read). They use images and other elements to add color to the page. We'll be working with various methods for using background images in smaller sections of pages and developing interesting layouts with CSS.

Code Sample - Images

Modify the code from the file you started above and continue to save it as index.html. When you are typing, open and close tags as you go, rather than simply copying the code or typing the file in a linear manner from top to bottom. This will allow you to understand the things you are marking up.

Refresh the file in the browser. Refresh the page every time you make a change.

 

Your page should now look something like this. You should see your image rendering. Use the width attribute to adjust your image size, if it is too large, but don't try to make it larger than the original quality. That will create pixelation and your image will appear blurry.

Code Sample - Links

Your page should now have a link on it. You should be able to click on the external link. Does it open in a new window? For the internal link, you will have to make a page with that name to be able to see it working. Change the colors in the body element to see how it affects the links.

Lists

Lists provide ways to format collections of content. You can use an ordered list (numbered) or an unordered list (bulleted).

Ordered List- a numeric list; requires using nested tags <ol> and <li>

An ordered list will appear like this in browser:

  1. University of North Carolina at Chapel Hill
  2. University of Richmond
  3. University of Texas at Austin

Unordered List- a bulleted list

Use <ul> instead of <ol>

An unordered list will appear like this in browser:

  • University of North Carolina at Chapel Hill
  • University of Richmond
  • University of Texas at Austin

List Attributes:

  • TYPE - for unordered lists, numbers are the default, but you can use an A for Capital letters, a for lower case, I for Uppercase Roman Numerals and i for lowercase Roman.
  • START - insert the start value; 1 is default.
  • <ol type="i" start="10" >
  • Use the attribute TYPE to set bullet shape (disc, circle, square) for unordered lists
  • <ol type="square">

Code Sample - Lists

Add an ordered or unordered list to the html page you have been working on. Refer to the code format above.

Below is an example of an unordered list.

Tables

Tables provide formatting in rows and columns. Use tables for data, not layout. In the early days of Web design, designers used the table feature to establish a grid for layout. But now, with the use of CSS, we have much more powerful, consistent and responsive ways to create a Web page layout.

Like lists, tables also use nested elements. <table>, <tr> (table row), and <td> (table data).

Table attributes

  • border - sets size of border
  • bordercolor-for a solid border; bordercolorright and bordercolorleft-for a shaded border
  • width-sets amount of space it takes up on page, can use pixels for a fixed width or % for a width as a percent of screen size.
  • align-use align="center" to center table.

Code Sample - Tables

Add a table to the html page have been working on. Notice how the table elements work together to create rows and columns. Additional rows and columns of content to the table on your page. If any of your elements aren't displaying properly in the file you have created, troubleshoot them by checking each element carefully, making sure you used proper spelling, used angle brackets and quotation marks properly and closed any tag you opened.

Your table should look something like this.

HTML Navigation

Now that you know the basic html elements, you can start developing an entire website. To do that, you have to consider how the user is going to navigate through the pages of your site. You already know how to make links, so you will use internal links - links to pages on your own site - to provide a way for users to get around your site.

Some things to consider:

  • Location: Consider where navigation is most useful to your users. Most navigation bars are located near the top of the page, so it is the first thing that a user sees. Navigation can be horizontal or vertical.
  • Consistency: Navigation needs to look exactly the same on each page. That means you also need a link to the current page you are on.
  • Titles: Every page should have a consistent, yet unique, title. The home page title should be the name of your site. The other pages should include the name of the site and the name of the page - for example, Cindy Royal - About, Cindy Royal - Links, etc.
  • Ease of use: Navigation should be simple and make sense to the user. The text on the navigation links should be short and meaningful.
  • Functionality: Of course, links have to work. Pay careful attention to filenames and folder locations. For consistency, name files without spaces or capital letters, and this will help in troubleshooting. Reminder: the home page of your site should always be named index.html.

You can create navigation on a template page (your first page), before you even create the other pages. Simply decide on what you will name the pages in advance. Then you can change the content in the template page, give it a new name, and you quickly have your second, third, fourth... pages.

Right now, your site looks pretty plain. But it should all work properly! We are laying the foundation for correct syntax and code structuring, and we'll move on to CSS in the next series of lessons.

Code Sample - Navigation

Add navigation to your site using the unordered list method and make at least two additional pages, with content. Navigation should be in the same place on each page and have all the same elements.

The code above includes everything we have covered in this tutorial - Basic Elements, Image, Links, Lists, Tables and Navigation. Use this code as a basis for making your own first website. Make sure all images and links work and that your content displays properly on all pages. Test Everything!

Your page should look something like the example below.

Other Elements

Comments

Web developers will often put comments in their code. These do not affect the appearance of the site, but provide code delineation or instructions for the designer or others who may be working on the page. See the code sample to the right.

<!--This is the education section-->

Deprecated Elements

When a tag is no longer used or supported in HTML, it is considered deprecated. So, you should avoid using them. You should pay attention to developments in HTML to know which tags are deprecated and what replaces their functionality.

Text Formatting - Early versions of HTML did not allow the author the control to specify a particular font. Font selection was at the mercy of users' preferences. Recent versions of HTML now allow the designer to specify font sizes and styles, given that the user has those fonts installed on their machine. If the user does not have the designated font, the default is shown.

<font size="4" face="Arial" color="red">

The font tag is considered deprecated. Most Web designers now use CSS to control text formatting on Web pages. This allows the designer to create a style and have it apply globally to all pages on a Web site.

Another deprecated element is <center>. We will use CSS to align elements.

Code Sample - Comments

The code above is fully commented to make it helpful to find sections of the site or for other coders who will work on it later.

FTP

You have made this wonderful page, but for now it just lives on your computer. To get it on the Web, you have to have space on a Web server. You can do this by going through a Web host and getting a domain. There are many Web hosts that all have different features and pricing models, so review a few before you purchase one. Most hosts provide both the Web hosting (server space) and domain registration, although these are separate processes. Some hosts to consider include Bluehost, Reclaim Hosting, HostGator and Dreamhost. See a comparison at PCMag.com.

You might also have server space via other means, a school or work account, so check out your options.

Once you have a way to host your files, you will need to transfer them to the Web. There are several methods, but the general process is called File Transfer Protocol (FTP). You can use an FTP client like Fetch or Filezilla or you can try a browser plugin like Fire-FTP for Firefox. And some Web hosts, like Bluehost, have file management tools as part of their control panel.

On most hosts, you have to upload files to the "public" folder. This is the public-facing folder on your site. Anything not under the public folder will not be able to be seen by the public. It is a place where you can store files in the cloud to access later. Sometimes the public folder is called "public_html" but this may vary based on your host.

In your FTP program, change to your public_html folder. This is where you will upload files associated with your domain. You will use the upload or "put" feature to transfer copies of your files to the server. The folder on the server should resemble the file structure you are used to seeing in the Finder on your computer. You are simply creating a copy on the server. Once the files are transferred, they can be accessed via a browser by anyone on the Web!

Later, you will learn about creating folders and subdomains on your site. For now, just keep your files very organized for each Web project. The location of a file matters when it is being accessed by another file, so this will assure that your links and images function properly.

Moving On

That's a pretty good introduction to HTML. You should now have an understanding of the basic elements and attributes and how to use them on a page. We'll have a few more HTML elements to add after we learn a little about about styling with CSS in the next tutorial.