HTML 13: Character entities
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 > and the < character's is < .
So, say you wanted to type "The <html> element rocks." in your page. Using the character entities, you'd type this instead:
The <html> 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 & 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:
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:
- 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
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.
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.
What you have learned so far:
- Relative Paths
- Linking Down into a Subfolder
- Linking Up
- Web Page Construction
- Rough Sketch
- Basic Html
- Enhanced HTML
- Inline and Block Elements
- <q> Element
- <blockquote> Element
- Empty Elements
- <li> Element
- <ol> Element
- <ul> Element
- Debugging HTML Code
- Character Entities
Source: "Head First HTML with CSS & XHTML" by Elisabeth Freeman and Eric Freeman