HTML Basics

Concept

HTML is Hyper Text Markup Language and can help you alter the appearance of text and many other aspects of your web pages. There are shelves of books and countless web pages dedicated to styling with HTML. This document is meant to serve as a basic reference.

HTML uses what are called "tags" to turn features on and off. These tags are noted by inserting the appropriate code between the < > symbols. Tags define special elements and attributes of text, lines, tables, and images. Two sets of tags are needed for each special element or attribute: an opening tag and a closing tag. For instance, <i> will turn on the italics, and </i> will turn it off. Whatever text you want in italics needs to be between the two tags.

HTML tags should be all lowercase. There is no priority of attributes when adding multiple tags to the same string of text, though good practice is to follow the “first one in, last one out” rule. Example: <b><i><u>this is the text</u></i></b>

HTML does not recognize the Enter key on your keyboard or multiple spaces. Use of line breaks <br> paragraphs <p> and non-breaking spaces &nbsp; can help achieve the same results.   

Examples

• Bold

  <b>Bold text</b>

  Result: Bold text

• Italics

  <i>Italicize text</i>

  Result: Italicize text

• Underline

  <u>Underline text</u>

  Result: Underline text

• Combining Elements

  <b><u><i>Multiple formats</i></u></b>

  Result: Multiple formats

• Heading 1

  Your Heading 1 text will be the largest text on the page. It should be used for your largest headings.

  <h1>Welcome to Our Museum</h1>

  Result:

  Welcome to Our Museum

• Headings 2 and 3

  Headings 2 and 3 will be used for additional headings, each one decreasing in size.

  <h2>Search Tips</h2> <h3>Next Level Down</h3>

  Result:

  Search Tips

  Next Level Down

• Paragraphs

  All paragraphs should be between an opening <p> tag and a closing </p> tag.

  <p>Paragraph 1</p><p>Paragraph 2</p>

  Result:

  Paragraph 1

  Paragraph 2

• Line Breaks

  Line Breaks <br>  (note: you don't need a closing tag for this one) simply go to the next line instead of creating a new paragraph. Notice the difference is spacing.

  I need a <br> break here.

  Result:

  I need a
  break here.

• Create a link to a website:

  Replace the text in italics with your website's URL. Replace the bolded text with the words you would like to be the link.

  <a href="https://museumsoftware.com">PastPerfect's Home Page</a>

  Result: PastPerfect’s Home Page

• Create a link to an email address:

  Replace the text in italics with your email address. Replace the bolded text with the words you would like to be the link.

  <a href="mailto:pposupport@museumsoftware.com">Email Me!</a>

  Result: Email Me!

References

• Interface Management Site - Header/Footer Tab
• Interface Management Site - Customizing Your Landing Page
• Interface Management Site - Enabling and Customizing the Feedback Form
• Interface Management Site - Enabling and Customizing the Image Request Form
• Interface Management Site - Enabling and Customizing the Email A Friend Form