ITS

Information Technology Services
Information Technology Services

HTML Basics

The WebPublish WYSIWYG is designed to make it easy to create a clean and professional site without getting into the details of HTML. There are times, however, when you may need to go into the source code for your pages to add layouts, icons, etc. IT Services offers the HTML markup for many of these additions, available throughout the Site Enhancements tutorials. This tutorial is designed to provide you with a general overview of how HTML is structured to help with understanding how the markup fits into your content.

IMPORTANT: Please note that IT Services does not support HTML. This tutorial is not intended to give guidance on writing HTML for your site. If you'd like to learn more about HTML, here are some useful resources:

  • lynda.com is a training website that is available to all staff, students and faculty at Queen's. Sign in with your netID and check out their HTML Essential Training course.
  • W3Schools is a free online resource for web development languages, such as HTML. Their HTML Tutorial is a great place to start.

About HTML

Elements:

An element is generally comprised of an opening tag, content that will appear on the site and a closing tag. The tags are the same with the exception that the closing tag begins with a “/”. An opening tag can contain attributes.

Diagram of the components of an HTML Element
Examples:
 
  This HTML... Creates this in WebPublish
1

<h1>This is My Title</h1>

This is My Title

2

<p>Here is some generic text in my publication.</p>

Here is some generic text in my publication.

3

<p><strong>Here is some bold text.</strong></p>

Here is some bold text.

4

<p><em>Here is some italic text.</em></p>

Here is some italic text.

5 <p>This is an unordered list:</p>

<ul>

     <li>unordered list item</li>

     <li>unordered list item</li>

     <li>unordered list item</li>

</ul>

This is an unordered list:

  • unordered list item
  • unordered list item
  • unordered list item
6 <p>This is an ordered list:</p>

<ol>

     <li>first item</li>

     <li>second item</li>

     <li>third item</li>

</ol>

This is an ordered list:

  1. first item
  2. second item
  3. third item

Attributes:

Attributes provide additional information about the element and how its content should appear or be interpreted. They use the format attribute name=”value” and are added to the opening tag. An element can contain multiple attributes that are separated by a space, as shown in Example 3 of the table below.

Diagram of an element containing a single attribute

The "Style" attribute specifically, can contain multiple values. Each of these values appear within the quotations and are separated by a semi-colon, as shown in the diagram below:

Diagram of a style attribute containing multiple values

Examples: 

Example This HTML... Creates this in WebPublish
1

<div style="font-size:120%">

<p>This entire paragraph's font is 20% larger than normal.</p>

</div>

This entire paragraph's font is 120% larger than normal.

2 <a href="http://www.google.ca">This is a link to Google.</a> This is a link to Google.
3 <img alt="a crawling inch worm" src="/its/sites/webpublish.queensu.ca
/its/files/images/caterpillar.jpg" style="width: 100px; height: 75px;" />
a crawling inch worm

 

 

Nesting:

Elements can contain other elements. This is referred to as nesting. Attributes that are defined in the outer element will be applied to all inner elements. Attributes defined in the inner element will only be applied to the content in that specific element.

Diagram of an element containing two nested elements

Examples:

Example This HTML... Creates this in WebPublish
1

<p>Inside this paragraph<strong><span style="color:#FF0000;">is some bold, red text.
</span></strong></p>

Inside this paragraph is some bold, red text.

Self-Closing Tags: 

There are some exceptional elements that don’t require both opening and closing tags. A couple of examples of self-closing tags that you may encounter in WebPublish are shown in the table below, including the "horizontal rule" (hr) tag and the "break" (br) tag.

Examples:

Example This HTML... Creates this in WebPublish
1

<p>The horizontal rule makes a line.</p>
<hr />

The horizontal rule makes a line.


 
2
<p>The break <strong>tag<br />
makes</strong> a single line<br />
break that <span style="color:#FF0000;">doesn't
<br />
affect<br />
formatting.</span></p>

The break tag
makes
a single line
break that doesn't
affect
formatting.