These are notes that were initially created by Smaranda Muresan to accompany an earlier version of the 550 Class on HTML.
These notes show you how to use HTML tags to build a simple Web page step by step.
In future lectures in this course, you will learn how to use standards-compliant XHTML and CSS to create web pages.
<h1> This is most important heading </h1>and you see
<h2> This is a less important heading </h2>and you see
<p> This is paragraph one </p>
<p> This is paragraph two </p>And you see:
This is paragraph one
This is paragraph two
<em>cat</em>renders cat
<strong>cat</strong>renders cat
<b>cat</b>renders cat
<i>cat</i>renders cat
HTML supports three kinds of lists. The first kind is a bulletted list, often called an unordered list. It uses the <ul> and <li> tags, for instance when you type:
<ul> <li>the first list item</li> <li>the second list item</li> <li>the third list item</li> </ul>you get:
Note that you always need to end the list with the </ul> end tag, but that the </li> is optional and can be left off. The second kind of list is a numbered list, often called an ordered list. It uses the <ol> and <li> tags. For instance when you type:
<ol> <li>the first list item</li> <li>the second list item</li> <li>the third list item</li> </ol>you get:
Like bulletted lists, you always need to end the list with the </ol> end tag, but the </li> end tag is optional and can be left off.
The third and final kind of list is the definition list. This allows you to list terms and their definitions. This kind of list starts with a <dl> tag and ends with </dl> Each term starts with a <dt> tag and each definition starts with a <dd>. For instance when you type:
<dl> <dt>the first term</dt> <dd>its definition</dd> <dt>the second term</dt> <dd>its definition</dd> <dt>the third term</dt> <dd>its definition</dd> </dl>you get:
The end tags </dt> and </dd> are optional and can be left off. Note that lists can be nested, one within another. For instance when you type:
<ol> <li>the first list item</li> <li> the second list item <ul> <li>first nested item</li> <li>second nested item</li> </ul> </li> <li>the third list item</li> </ol>you get:
What makes the Web so effective is the ability to define links from one page to another, and to follow links at the click of a button. A single click can take you right across the world!
Links are defined with the <a> tag, from "anchor".
Internal anchors: provide a link inside the same page. Similar to MS Word Cross-reference. For example if you want to add an internal anchor (cross-reference) here to the section about Lists you need to:
<a href=#lists>Example of internal anchor - Go back to Lists </a>
<a name="lists"><h2>Lists in HTML</h2></a>
External anchor . This provide a link to an external page. We can provide a link to a page which exists in the same folder as the HTML file you are editing. Let's say we want to add a link to the notes.html page you have saved in your own directory. For this you type:
This a link to <a href="notes.html">Today's notes on HTML</a>.and you get:
You can also have link to a page in a subdirectory. Let's assume we have created a directory "notes" and we saved the "notes.html" file in that subdirectory. In order to create a link to the notes.html page we type:
This a link to <a href="notes/notes.html">This week's notes on HTML</a>.
And last, there can be links to any page on the web. Let's create a link to the notes.html directory found on my web site. For this you type:
This a link to <a href="http://comminfo.rutgers.edu/~aspoerri/Teaching/InfoTech/Lectures/Lec4/Steps/notes.html">This week's notes on HTML from the class web page</a>.and you get
This a link to This weeks's notes on HTML from the class web page.
You can also combine external and internal anchors. For example you want to point to the section about lists in the notes.html page from the class web page. You type:
This a link to <a href="http://comminfo.rutgers.edu/~aspoerri/Teaching/InfoTech/Lectures/Lec4/Steps/notes.html#lists">Today's notes on List in HTML from the class web page</a>.and you get
This a link to Today's notes on List in HTML from the class web page.
<img src="images.jpg" width="112" height="109">you will get:
The src attribute names the image file. The width and height aren't strictly necessary but help to speed the display of your Web page. Something is still missing! People who can't see the image need a description they can read in its absence. You can add a short description as follows:
When you type:<img src="images.jpg" width="112" height="109" alt="An angry computer">you will get:
You can turn an image into a hypertext link, for example,you can click on a company logo to get to the home page of that company. In our example let's say that if you click on the images.jpg we want to go to the class web page. If you type:
<a href="http://comminfo.rutgers.edu/~aspoerri/Teaching/InfoTech/Home.html"><img src="images.jpg" alt="Info Tech Class web page"></a>you get:
Clicking on the above image will link you to the class web page.
With HTML, you can choose whether any given image is treated as part of the current text line or is floated to the left or right margins. You control this via the align attribute. If the align attribute is set to left the image floats to the left margin. If it is set to right the image floats to the right margin.For instance when you type:
<p><img src="images.jpg" alt="angry computer" width="55" height="50" align="left"> This text will be flowed around the right side of the graphic.</p>you will get
This text will be flowed around the right side of the graphic.
If you type:<p><img src="images.jpg" alt="angry computer" width="55" height="50" align="right"> This text will be flowed around the left side of the graphic.</p>you will get:
This text will be flowed around the left side of the graphic.
You can also position the text with respect to the top, center or bottom. If you type:<p><img src="images.jpg" alt="angry computer" width="55" height="50" align="top"> This text will be flowed around the top part of the graphic.</p>you will get the text aligned to the top of the image:
This text will be flowed around the top part of the graphic.
<p>The Willows<br> 21 Runnymede Avenue<br> Morton-in-the-marsh<br> Oxfordshire OX27 3BQ</p>
The Willows
21 Runnymede Avenue
Morton-in-the-marsh
Oxfordshire OX27 3BQ
Browsers automatically wrap text to fit within the margins. Line breaks can be introduced wherever space characters appear in the markup. Sometimes you will want to prevent the browser from wrapping text between two particular words. For instance between two words in a brand name such as "Coca Cola". The trick is to use in place of the space character, for example:
Sweetened carbonated beverages, such as Coca Cola, have attained world-wide popularity.will give:
Sweetened carbonated beverages, such as Coca Cola, have attained world-wide popularity.
It is bad practice to use repeated non-breaking spaces to indent text. Instead, you are advised to set the indent via style rules.One advantage of the Web is that text is automatically wrapped into lines fitting within the current window size. Sometimes though, you will want to disable this behavior. For example when including samples of program code. You do this using the pre element. For instance:
<pre> void Node::Remove() { if (prev) prev->next = next; else if (parent) parent->SetContent(null); if (next) next->prev = prev; parent = null; } </pre>
Which renders as:
void Node::Remove() { if (prev) prev->next = next; else if (parent) parent->SetContent(null); if (next) next->prev = prev; parent = null; }
In case you are not using CSS, you can set the color using the BODY tag. The following example sets the background color to white and the text color to black:
<body bgcolor="white" text="black">
The BODY element should be placed before the visible content of the Web page, e.g. before the first heading. You can also control the color of hypertext links. There are three attributes for this:
Here is an example that sets all three:
<body bgcolor="white" text="black" link="navy" vlink="maroon" alink="red">
You can also get the browser to tile the page background with an image using the background attribute to specify the Web address for the image, e.g.
<body bgcolor="white" background="image2.jpeg" text="black" link="navy" vlink="maroon" alink="red">
It is a good idea to specify a background color using the bgcolor attribute in case the browser is unable to render the image. You should check that the colors you have chosen don't cause legibility problems. As an extreme case consider the following:
<body bgcolor="black">
Most browsers will render text in black by default. The end result is that the page will be shown with black text on a black background! Lots of people suffer from one form of color blindness or another, for example olive green may appear brown to some people.
A separate problem appears when you try to print the Web page. Many browsers will ignore the background color, but will obey the text color. Setting the text to white will often result in a blank page when printed, so the following is not recommended:
<body bgcolor="black" text="white">
The FONT tag can be used to select the font, to set its size and the color (Note: keep in mind that CSS makes it possible to specify the font and other properties in a better way :). This example just sets the color:
This sentence has a <font color="red">word</font> in red.will render
This sentence has a word in red.
The face attribute is used to set the font. It takes a list of fonts in preference order, e.g.
<font face="Garamond, Times New Roman">some text ...</font>will render
some text ...
The size attribute can be used to select the font size as a number from 1 to 6. If you place a - or + sign before the number it is interpreted as a relative value. Use size="+1" when you want to use the next larger font size and size="-1" when you want to use the next smaller font size, e.g.
<font size="+1" color="maroon" face="Garamond, Times New Roman">some text ...</font>will render
some text ...
There are a couple of things you should avoid: Don't choose color combinations that make text hard to read for people who are color blind. Don't use font to make regular text into headings, which should always be marked up using the h1 to h6 tags as appropriate to the importance of the heading.