NHS Designs
Web Design
HTML

HTML 13: Character entities

how do you put a tag into the text of a web page?

You're right.

Because browsers use the < and > to begin and end tags, using them in the content of your HTML can cause problems.

But, HTML gives you an easy way to specify these and other special characters using a simple abbreviation called a character entity.

Here's how it works: for any character that is considered "special" or that you'd like to use in your Web page, but that may not be a typable character in Notepad (like a copyright symbol ©), you just look up the abbreviation and then type it into your HTML.

For example, the > character's abbreviation is &gt; and the < character's is &lt; .

So, say you wanted to type "The <html> element rocks." in your page. Using the character entities, you'd type this instead:

The &lt;html&gt; element rocks.

Another important special character you should know about is the & character. If you'd like to have an & ("ampersand") in your HTML content, use the character &amp; instead of the & character itself.

So what about the copyright symbol? And all those other symbols and foreign characters? You can look up common ones here:

http://www.w3schools.com/tags/ref_entities.asp

 

Exercise: Crack the Location

Dr Evel, in his quest for world domination, has put up a private Web page to be used by his evil henchmen.

You've just received a snippet of intercepted HTML that may contain a clue to his whereabouts. Given your expert knowledge of HTML, you've been asked to crack the code and discover his location.

Here's a bit of the text from his home page:

crack the location - character entities

  • Type in the HTML and see what your browser displays.
  • Save the file as lastnamefirstinitial-location.html in My Documents.
  • Turn in this file by itself.

 

Back to Tony

Tony is happy

We'll learn all about getting a Web site onto the Web in the next few lessons.

First, let's review the main concepts from HTML Lessons 1 - 13.

 

Review

Key Concepts from HTML 01 - HTML 07

  • HTML and CSSare the languages we use to create Web pages.
  • Web servers store and serve Web pages, which are created from HTML and CSS. Browsers retrieve pages and render their content based on the HTML and CSS.
  • HTML is an abbreviation for HyperText Markup language and is used to structure your Web page.
  • CSS is an abbreviation for Cascading Style Sheets, and is used to control the presentation of your HTML.
  • Using HTML we mark up content with tags to provide structure. We call matching tags, and their enclosed content, elements.
  • An element is composed of three parts: an opening tag, content and a closing tag. There are a few elements, like <img>, that are an exception to this rule.
  • Opening tags can have attributes. We've seen a couple: type and align.
  • Closing tags have a "/" after the left angle bracket and in front of the tag name, to distinguish them as closing tags.
  • Your pages should always have an <html> element along with a <head> element and a <body> element.
  • Information about the Web page goes into the <head> element.
  • What you put into the <body> element is what you see in the browser.
  • Most whitespace (tabs, retruns, spaces) are ignored by the browser, but you can use these to make your HTML more readable (to you).
  • CSS can be added to an HTML Web page by putting the CSS rules inside the <style> element. The <style> element should always be inside the <head> element.
  • You specify the style characteristics of the elements in your HTML using CSS.
  • When you want to link from one page to another, use the <a> element.
  • The href attribute of the <a> element specifies the destination of the link.
  • The content of the <a> element is the label for the link. The label is what you see on the Web page. By default, it's underlined to indicate that you can click on it.
  • You can use words or an image as the label for a link.
  • When you click on a link, the browser loads the Web page that's specified in the href attribute.
  • You can link to files in the same folder, or files in other folders.
  • A relative path is a link that points to otehr files on your Web site realtive to the Web page you're linking from. Just like on a map, the destination is realtive to the starting point.
  • Use ".." to link to a file that's one folder above the file you're linking from.
  • ".." means "parent folder".
  • Remember to separate the parts of your path with the "/" character.
  • When your path to an image is incorrect, you'll see a broken image on your Web page.
  • Don't use spaces in names when you're choosing names for files and folders on your Web site.
  • It's a good idea to organize your Web site files early on in the process of building your site, so you don't have to change a bunch of paths later when the Web site grows.
  • There are many ways to organize a Web site; how you do it is up to you.

 

Key Concepts from HTML 08 - HTML 13

  • Plan the structure of your Web pages before you start typing in the content. Start with a sketch, then create an outline, and finally write the HTML.
  • Plan your page starting with the large, block elements, and then refine with inline elements.
  • Remember, whenever possible, use elements to tell the browser what your content means.
  • Always use the element that most closely matches the meaning of your content. For example, never use a paragraph when you need a list.
  • <p>, <blockquote>, <ol>, <ul>, and <li> are all block elements. They stand on their own and are displayed with space above and below the content within them.
  • <q>, <em> and </a> are all inline elements. the content in these elements flows in line with the rest of the content in the containing element.
  • Use the <br> element when you need to insert your own linebreaks.
  • <br> is an "empty element".
  • Empty elements have no content.
  • An empty element consists of only one tag.
  • A nested element is an element contained completely within another element. If your elements are nested properly, all your tags will match correctly.
  • You make an HTML list using two elements in combination: use <ol> with <li> for an ordered list; use <ul> with <li> for an unordered list.
  • When the browser displays an ordered list, it creates the numbers for the list so you don't have to.
  • Use character entities for special characters in your HTML content.

 

Summary Outline

What you have learned so far:

  1. Relative Paths
    1. Linking Down into a Subfolder
    2. Linking Up
  2. Web Page Construction
    1. Rough Sketch
    2. Outline
    3. Basic Html
    4. Enhanced HTML
  3. Inline and Block Elements
    1. <q> Element
    2. <blockquote> Element
  4. Linebreaks
    1. Empty Elements
  5. Lists
    1. <li> Element
    2. <ol> Element
    3. <ul> Element
  6. Nesting
  7. Debugging HTML Code
  8. Character Entities

 

Source: "Head First HTML with CSS & XHTML" by Elisabeth Freeman and Eric Freeman

ABOUT MRS. PEDERSEN · EMAIL MRS. PEDERSEN
resources · copyright information · Website designed by
Order a Custom, Watercolor Pet Portrait at PetsByDawn.com>