The idea of HTML tags is easy to understand. You mark the logical parts of your document. But, when you put a bunch of text and tags together to make a whole page, things start looking complicated!
To make things worse, tags often have more stuff in between the < and > than just the name of the tag. Sometimes there's a LOT more.
A simple case is the P tag (marking paragraphs). It often
includes a style for the paragraph, like:
Such extra parts are called attributes. They set various characteristics for the tag. Each attribute has two or more possible values.
General form for a tag with attributes is like:
In our example
<p style="text-align:justify">, the attribute is STYLE. There are a
huge number of values that you can use with the STYLE attribute to format that tag. The property TEXT-ALIGN has four different values: LEFT, RIGHT, CENTER, and JUSTIFY. These
make text in the tag line up on the left of the space, the right, centered,
or justified (left and right edges are even like in many books and
Next, you will look at a very simple web page and figure out what each part of the code is doing.
Step-by-Step: Look at the Code
|What you will learn:||to view source code
to identify HTML tags in use
to find attributes and values
to find special characters
how to code special characters
to use Character Map
If you are connected to the Internet, type or copy and paste the path http://www.jegsworks.com/Lessons/web-2/start/html.htm in the browser's Address box.
If you installed the resource files on your hard drive, you can navigate to Start folder in that location and double click the file html.htm.
This is a very simple page with one image at the left, a background image, three lines of text, and a footer.
browser will display the text "Welcome" exactly as it is shown on the
illustration above only if your computer has the font Brush
Script MT installed. Otherwise, the browser's default font is used,
which is usually Times New Roman on a Windows computer. In the illustration at
the right, Brush Script MT is used for the first Welcome and Times New
Roman is used for the second. When you look at the code, you will see
what the tag is doing to choose a font.
Right click on the page and select:
IE: View source . The source code shows in a pane below the page.
There is a button on the black bar at the far right that will open the page source in its own window.
Chrome: View page source. Opens in a new tab.
Firefox: View Page Source. Opens in a new tab.
The source code (the HTML code) opens in a new browser window or tab for most browsers. Wherever it opens, you can copy from this view but you cannot make changes and save them here! That's why you need your own text editor.
Text wrapping: The illustrations show the
viewers with text wrapping turned off.
Notice that each browser's viewer color-codes the HTML code a bit differently. These all show the comments in green. They all use three different colors for an HTML element (like H1), the attributes (like style), and the values (like text-align:center).
You will see many of the tags you learned about in the previous lesson. Some of them have a lot more between the angled brackets, < and >, than the we saw in the last lesson!
The key feature of HTML is what lies between the symbols < and >. These are the tags. Some tags give information to the browser but do not show anything on the screen.
Most tags come in pairs- an opening tag and a closing tag. Put
them together in your list. The closing tag includes a forward slash / before the name
of the tag. For example the opening tag
<html> has the
matching closing tag
</html> . This document
also has some unpaired tags.
In your table of tags, find the ones that do not match anything you see when you look at the page itself (not the source code) in your browser. Mark them in the Part column of your table as "hidden".
Every HTML document must
include the paired tags
The DOCTYPE tag allows your code to be validated, that is,
checked for errors by software. Some browsers change the way they
display the page based on the DOCTYPE tag.
Find in your table the tags that have more than just the tag name between the brackets, < and >.
These are the attributes of the tag. They set various characteristics for the tag. Each attribute has two or more possible values. For example, a heading or paragraph tag can have attributes that control the font, the font size, and the color of the text. For example, In this document you should see:
<p style="text-align:center;color: #FF0000; font-family: 'Brush Script MT'; font-size: xx-large;">Welcome</p>
List the attributes in column 3 for those tags in the page html.htm that have attributes.
Picking Fonts: If the font Brush Script MT is not installed on the computer, the browser will use its default font, which is Times New Roman for most Windows browsers. It is clearly not 'best practices' to name just one font like this! You will learn how to handle this issue in a later lesson.
There are more characters available to you than what you see on your keyboard. Each character has a special code. However, you must use a font that includes those characters.
You also need a special code to see more than one space. Your browser will only show 1 space no matter how much blank space is in the source code unless you use the code for a space.
All these special codes start with
& (an ampersand) and end with
; (a semi-colon).
used many times. This is the HTML code for a blank space - a non-breaking space.
Spaces in HTML: In word processing you
get a space in the document for each time you press the spacebar. In HTML you
must use the code
for each space you want to guarantee. A set of spaces in your source code will collapse to a
single space in the displayed page.
Keyboard characters by language: Most text fonts contain letters from several languages and also symbols, like . Your keyboard will only have keys for the special characters that are common in the language for which the keyboard was designed. English keyboards show the first 8 characters in the list of symbols on keys. You can make the browser display the characters that are not on your keyboard by typing special codes for them.
There are three different ways to code a special characters: HTML code, ASCII code, and Unicode.
HTML Code: The HTML codes for special characters use an abbreviation of an
English description of the character, like
í for í
ñ for ñ.
ASCII Code: You can also use number codes for the
special characters, like
í for í and
ñ for ñ.
Unicode: Unicode uses í for í and ñ for ñ. Unicode has a much larger set of characters, running into thousands and includes characters for languages like Chinese and Hindi and Arabic. Unicode actually lets you use either a decimal number like 合 or a hexadecimal number like 合. This example produces the Chinese character 合.
Not all fonts have symbols for all of the possible Unicode characters, of course.
Sources for problems with display with Unicode:
The META tag for the page that sets 'character encoding' does not support Unicode characters. Every HTML page should have a META tag that sets the character set. Your example page does not.
Example that works for Unicode:
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
To find the code for a special character, you can use Character Map, which is a program that comes with Windows. Once you select a character, click the Copy button to load it into the Windows Clipboard. Then you can paste it into your document.
Problem: Unexpected characters in a web page.
Cause: A special character was written with a font that your computer does not have. Your default font has a different character with that code. Curly quotation marks and curly apostrophes are common problem. The sample image shows odd characters when curly quotes and a curly apostrophe were used in the original document.
Solution: For the viewer: None
For the author: Be careful! Avoid special characters when possible. Use HTML codes or ASCII codes instead. If the character is not in those codes, use an image if the symbol or character is very important.
A larger view of the characters pops up.
At the bottom right of the Character Map dialog you can see the keyboard combo for the selected character: ALT + 0169. This shows the ASCII code for the character. In a word processing document you would hold down the ALT key while typing the numbers to get the character. In the source code for a web page, you would type © or © to show the copyright character, ©.
At the bottom left of the dialog is the Unicode for the selected character. In your web page you would type © to show this character, ©.
WinXP: To see the key combo to use, display the Advanced view by checking its box.
Problem: Some characters do not show a keystroke combination.
Cause: The characters that are actually on a standard keyboard do not need combos. The keys are already there! Other characters do have a keystroke number, even if it does not show in the dialog.
insert the character from Character Map:
Click the character, then click on Select, and then on Copy. Switch to your document and Paste.
This works in all kinds of programs, not just for HTML pages.
There are, however, situations where your character may not display as you planned.
Font in document: Your choice of font does make a difference. If you use a symbol font, like Wingdings, instead of a text font, the same number codes that made í and ñ produce instead little arrows: , and instead of the copyright symbol you get a 3-pointed star. How unexpected!
The abbreviations are easier to remember than all these numbers!
Problem: Character is too small to see in Character Map.
Solution: Left click on the character. A larger version of the character pops up.
Problem: Typing on the keypad does not insert characters.
Solution: Press the NumLock key.
When NumLock key is OFF, the keypad works as navigation keys instead of typing numbers.
HTML code uses some characters itself: ampersand &, quotes ", left angled bracket <, right angled bracket >. What if you want those characters to show in your text for some reason? (Like in the previous sentence!)
To use these coding characters in normal text in an HTML page, you must use one of the special codes for them. (Getting a bit crazy here!) If you do not, the browser may try to interpret them as HTML code instead of text, which will do unhappy things to your web page.
|Symbol||To show as normal text, use:||Description|
| ||non-breaking space|
'Less than' sign,
left angled bracket
'Greater than' sign,
right angled bracket
|"||"||Double quote sign|
Now you have seen tags in action. Some of the attributes and special codes may not make sense to you yet, but you should have an idea of the general way HTML documents work.