|
For printable PDF version of this tip sheet, please click here.
What is HTML?
The acronym HTML stands for HyperText Mark-up Language. HTML is used to structure text and multimedia documents for deliver on the web and to set up hypertext links between documents on the web. A single piece of HTML code is called a “tag”.
What are tags?
HTML tags contain the HTML instructions that are placed within pointed brackets (“<” and “>”).
Tags usually come in pairs and an end tag always includes the forward slash (“/”). For example, the italic tags look like this: <i> . . . </i> and the bold tags look like this: <b> . . . </b>
Tags will format the text placed within the tag pair according to the instruction placed within the pointed brackets.
Example of HTML tags
The letter “U” gives an instruction to create underlined text. The pair of HTML tags to create underlined text looks like this:
<U>This text will be underlined.</U>
The <U> tag means “start underline here.” The end tag, </U> , means “end underline here.” This is how the text will appear:
This text will be underlined.
Common HTML tags
Formatting Paragraph
Line break tag
The line break, <BR> tag is used to create a new line for the text entered after the line break tag. A line break does not insert a blank line between paragraphs.
Paragraph break tag
A paragraph break, <P> puts a single blank line between paragraphs. The <p> tag can be used alone at the end of a paragraph or as a pair. If you use it as a pair, you can include the align=left/center/right modifier in the beginning tag to control placement. For example: the html below would create a right-aligned paragraph.
<P ALIGN=”right”>
Fourscore and seven years ago, our founding fathers set forth upon this continent a new nation </P>
Bulleted or numbered point tag
Bulleted points can be added by using the <UL>…</UL> tag and numbered points can be added using the <OL>…</OL> tag. The text needs to be placed between the <LI>…</LI> tag and the <LI>…</LI> tag need to be placed between the bulleted or numbered points tag. For example:
<UL>
<LI>bullet number 1</LI>
<LI>bullet number 2</LI>
</UL>
This would create bulleted points as below:
- bullet number 1
- bullet number 2
Formatting Text
Text can be formatted using font tag:
<FONT FACE=”fontstyle” COLOR=”fontcolor” SIZE=”fontsize”>
Insert text here.</FONT>
The font tag requires that you use at least one of the modifiers (FACE, COLOR or SIZE), but you do not need to use all of them.
The FACE modifier can be set to any font, but the person viewing the page must also have that font installed on his or her computer. For that reason, it is best to stick to common fonts like Times New Roman, Arial, or Courier New.
The COLOR modifier will recognize basic colors, including black, white, grey, red, blue, yellow, green, purple, orange, cyan, magenta etc.
The SIZE modifier does not refer to typical font point sizes. In HTML fonts can be sizes 1 through 7. The default font size is 3.
Default font is the default font setting that the browser will display the text. The default font setting can be changed by the user and the font size is relative to this setting.
For example, one user set his browser’s default font to 12-point Arial and another user set his browser’s default font to 10-point Times. The HTML tag <font size=3> will create 12-point Arial on the former and 10-point Times on the latter.
You can use plus or minus signs to indicate sizes relative to the default.
For example: the html below would text that is two steps larger than the default font size.
<FONT SIZE=”+2”>Bigger, better, faster!</FONT>
Creating Links
Links are created using the anchor tag: <A HREF=”URL”>Text</A>
where URL is the Web address and Text is the text that will become the link.
For example: the html below will take the words “CMS” and turn them into a link that will direct the user to the CMS website.
<A HREF=”http://courses.northwestern.edu”>CMS</A>
The TARGET modifier can be added to the anchor tag to instruct the browser to open the link in the desired window. For example: the html below will open the Course Management System website in a new window.
<A HREF=”http://courses.northwestern.edu” target=”_blank”>
Course Management System </A>
Using HTML in Course Management System (CMS)
When adding or cutting and pasting HTML into the text field in a CMS posting, the default setting “Smart Text” should display your HTML accurately. If it does not, please select the HTML option beneath the text box as shown below:
By default, CMS will format text to 12-point, left-justified Arial.
Creating HTML with Other Tools
It is possible to use Web authoring tools to generate the HTML codes. There are many applications you could use for this purpose. Some of the most popular are:
Word Processors
Some contemporary word processors such as Microsoft Word, Corel WordPerfect, Apple AppleWorks, and Sun StarOffice have the ability to convert your word processing document to a web page coded in HTML. However, the conversion from a word processing document to an HTML web page is often far from perfect, especially for documents with complex formatting.
WYSIWYG (What You See is What You Get)
Some of the most popular softwares in this category are Macromedia Dreamweaver, Adobe GoLive, NetObjects Fusion, and Microsoft FrontPage. These web-authoring tools offer you an authoring environment tailored specifically to create web pages. The web page created may appear different depending on which browser the audience is using.
HTML Editors
Applications like BareBones Software’s BBEdit and Allaire HomeSite provide an editing environment for HTML documents. HTML editors usually have a “preview” mode that allows you to switch between viewing the raw HTML codes and previewing how these codes will look in your browser. These products will help you write HTML faster and easier, but they presume you already have knowledge about HTML.
|
