1. BASIC HTML TRAINING
1. HTML Intro
HTML stands for HyperText Markup Language made of tags that web browsers
interpret in order to know what to display. HTML is not necessary in order to create a
fantastic webpage, but your knowledge of it will give you more options to customize and
control your library’s web presence.
2. Planning out a site
Use this time to plan the library website. Remember that most students do not look
beyond the first page, so consider what essential elements you want to include: Links
(to other pages or content located elsewhere on the page), image(s), text, widgets
(Surveys, request forms, calendar, messages, presentations, news feeds, etc.)
Destiny Examples
http://library.nycenet.edu/common/welcome.jsp?site=4554
http://library.nycenet.edu/common/welcome.jsp?site=4246
http://library.nycenet.edu/common/welcome.jsp?site=4561
Other New York City High Schools
http://spclibrary.org/
http://hillcrestlibrary.org/
http://aeseclibrary.org/
https://sites.google.com/site/mlkjrcampuslibrary/
Other Library sites
http://pbshslibrary.wordpress.com/teen-read-week/
http://wellesleyhighschoollibrary.wikispaces.com/
http://www.wix.com/mamquam/mamquam-library
1
2. Free web creation sites:
www.wordpress.com
www.weebly.com
www.wikispaces.com
http://sites.google.com
http://www.wix.com
3. Tag structure
You create most HTML tags by enclosing words or abbreviations in brackets: <b>
Example</b>. The majority of tags include opening and closing ones that surround
text.
Opening: <p> (paragraph)
Closing </p>
The closing tag must always include the slash: /
Other command tags stand alone such as a line break <br> or a horizontal line <hr>
Attributes and values
You can also add attributes to text to customize the text, image, link, etc. held between
them.
<p align=”left”>My left-leaning text</p>
Attributes must always be enclosed between tags, must have the equal sign before it
and be
surrounded by quotes: =“center”
4. Document structure (Start, save, view)
Open a document in Notepad, Wordpad or TextEdit (Mac)
2
3. Typical start formation”
<html>
<head>
<title>PS 10,000’s Library Site</title>
<body>
Text
</body>
</html>
Saving
Save your document as .html.
5. Viewing in browsers
Open any browser. Go to File=>Open=>Click on the .html file you have saved to
preview your work
In Destiny, click on Edit Page=>Introductory Page=>Edit Text to insert the html code
6. Adding text
Paragraph=<p></p>
Note: Remember that web browsers do not read line breaks like Enter or Return, so the
<p> tags indicate new paragraphs. To align the text, add “left”, “center’, “right”
<p align=”center”>Blah Blah</p>
• Blank space (to indent or add emphasis) :  
• Line break: <br>
• To inset text (tab equivalent), use : <blockquote></blockquote> around the
text.
• Wrapping text: <marquee></marquee>
• Add quotes to text; <q></q> In Mozilla
3
4. • Creates typewriter text: <tt></tt>
Heading: This allows you to change the Font size, ranges 1-6, with 1 being the largest.
<h1>Title</h1>
<h2>Point 1</h2>
<h3>Point 2</h3>
Preformatted text: If you have text from another document in which you want to keep
the spacing format, etc. type: <pre> </pre>
Note: Remember the metadata feature about information on the webpage you do not
want publicly seen. You may want to add notes to yourself about items you want to
insert/add later. To do so, type in <!- - Add an image here - ->
7. Lists
Create a Numbered List
Type <ol> above the text you want to turn into a numbered list.
Type <li> in front of each item on the list
Type</li> after each list item
Type </ol> after the list text
<h3>NOVEL Databases in the Library</h3>
<ol>
<li>Ebsco</li>
<li>Gale</li>
<li>Grolier</li>
</ol>
Note: By default, the list will start with one. If you want to start at a different number
add: <ol start="5" type="1">
Bulleted List
Type <ul> above the text you want to turn into a list.
Type <li> in front of each item on the list
Type</li> after each list item
Type </ul> after the list text
Note: If you want to set a bullet style, type in “circle” “disc” or “square”
<ul type=”square”>
4
5. Note: You can add a break to the list by adding a line break <br> and some text:
<br> and last but not least
You need to add text for the break to happen, the <br> tag is not enough
Example:
<ul>
<li>First</li>
<li>second</li>
<br> and certainly not last!
<li>Third</li>
</ul>
Nested List
You can add a list within a list to create a list hierarchy. Add the tag <ol> for numbers or
the <ul> for unordered lists in the place where you want to insert the subtopic. Add the
new list text, including the <li> and </li> tags. Finally, close it out with the </ol> or </ul>
tag. See bolded example:
<ol>
<li>Ebsco</li>
<ul>
<li>Ask your librarian for the password</li>
</ul>
<li>Gale</li>
<li>Grolier</li>
</ol>
Definition List
This creates a list in the form of a dictionary or glossary.
Type <dl> above the text you want to set as a definition list
Type <di> in front of each term
Type</di> after each term
Type <dd> in front of each definition
Type </dd> after each definition
Type </dl> after the definition list text
Note: Inserting Special characters (See attached sheet)
5
6. 8. Formatting text
<b></b> Bold
<i></i> Italic
<u></u> Underline
<br> Line Break
If you want to change your font, type in <font face=”arial”> </font> around the text you
want to change.
Example: <p> <font face="Arial">This is the conclusion</p></font>
Note: It is best to use a common font name so that each web browser will recognize it.
As a precaution, you can list more than one font, so that if the first font is not read, the
second one will be:
<p> <font face="Arial, Helvetica”>This is the conclusion</p></font>
Font Size
You can change it with the following tag: <font size=”1”>Hello</font>
Size attribute Font Size equivalent
1 7 points
2 10
3 12
4 14
5 18
6 24
7 36
Type <basefont size=”3”> if you want to set all the text for the page or change it all.
6
7. Note: If you type a plus + or minus – sign before a size number, <font size=”+3’></font>,
it will display that text at a size relative to the surrounding text (in the above example,
three times larger).
Text Color
You can change the text color by typing <font color=”#0000FF”>Library Book
Recommendations</font>
You can add these tags in front of any bit of text whose color you want to change. (See
the chart for some color examples). You can also search online under html color tags
to see the listing of all the color possibilities.
Note: If you want to change or set the text color for the whole page, type the text color
within the body tag: <body text=”#8000000”>
Note: You can also type the name of a color: <font color=”red”> but the numbers can
help you be more specific or give you the name to type in.
Background Color
Within the body tag, type bgcolor=
Example: <body bgcolor=”#00FFFF”> (aqua)
Margins
By default, the html margins are 10 pixels. In the body tag, you can adjust the margins:
<body leftmargin=”60” rightmargin=”100” topmargin=”20” bottommargin=”20”
marginwidth=”30’ marginheight=”40”>
<hr> Horizontal Rule
Note: You can change the size by typing <hr size=”10”> or <hr width=”75%”> if you
don’t want it to cover the whole page. You can also add color by typing <hr
color=”#FFFFFF”>
7
8. 9. Inserting images
You can upload many different types of images to your website or webpage. They need
to be on the desktop of your computer. Different image types:
JPEG: Joint Photographic Experts Group allows for millions of colors, commonly used
with complex images such as photos—not good choice with artwork
GIF: Graphics Interchange Format, supports up to 256 colors, good for simple images
like logos. A single gif file can also store multiple images and display them as animation
PNG: Portable Network Graphics, rich color support and advanced compression
schemes so good choice for variety of image types
Image Sites Fine Art:
http://commons.wikimedia.org http://www.artcyclopedia.com/
http://images.google.com http://www2.si.umich.edu/History_of_
http://images.yahoo.com Art/
http://images.bing.com
Note: For best results, make sure your image file does not exceed 60K; with GIFs and
PNGs, you can reduce the number of colors in the image to reduce the file size. You
may also want to use an image editor program (Photoshop, Google’s Picassa, etc.) to
compress the size for display purposes. This will allow you to maintain the quality as
opposed to reducing it using html code.
Type <img src=”photo.jpg”>The file name of your image or graphic.
To specify a size, type <img src=”photo.jpg” width=”750” height=”400’>
Note: Browsers can display images at 750 width and 400 height without requiring users
to scroll, so use those measurements as standards for display. Most monitors are set
as 800 pixels in width and 600 in height.
Alternate text: This allows you to label what the image is in case it cannot be displayed
by a browser: <img src=”photo.jpg” alt=”Happy cat”>
Image label: This will appear when the mouse pointer hovers over the image: <img
src=”photo.jpg” title=”happy cat’>
Copyright: <img src=”photo.jpg”> Add the <br> tag to put this symbol on the next line:
8
10. <img src=”photo.jpg” border=”10”>
Space around an image
<img src=”photo.jpg” align=”left” hspace or vspace=”25”> The number is in pixels as is
the border.
Background Border
You can turn an image into a background for your webpage by adding it to the body tag.
Keep in mind how the image will appear. You may need to adjust the text color, etc.
<body background=”kitties.jpg”>
Create an image banner
Use these tags to add a title banner with an image. Type this at the top before any
body text:
<img src=”photo.jpg” width=”468” height=”60”><br>
10. Inserting links
Type: <a href=http://www.yahoo.com>Yahoo</a>
You must add the http:// to any link you add, plus make certain it is in quotes and have
the closing bracket after the address. To write a title for a link, type if after the address.
Inserting an image link
1. Add the image you want to use as a link using the <img> tag.
2. Type <a href=”?”> in front of the image code, replacing the URL of the page to
which you want to link.
3. Type </a> after the image code.
Example: <a href=http://www.paristravels.com><image src=”paris.jpg”></a>
Note: You can link to another page on your website by specifying the filename <a
href=”photos.html”>
10
11. If the page is in a subdirectory, specify that as well: <a href=”media/photos.html”>
Open a linked page in a new window
Click within the <a> tag for the link you want to edit and type target=”_blank”
Example: <a href=http://www.yahoo.com target=”_blank”>Yahoo</a>
Note: To make all links open in new windows, at the top of your page, click between the
<head> <base target=”_blank”></head>
Link to a same area on the same page or website
1. Name an area. Click in front of the section of text to which you want to create a
link and type <a name=”?”> Keep the names short and simple. Type </a> at the
end of the section.
2. In front of the text or image you want to turn into a link, type <a href=”#?”>
replacing ? with the name of the section to which you want to link. Do not leave
out the # sign!
3. Type </a> after the link text
Example
1. <a name="kitty"><img src="furry-cat.jpg" width="320" height="300"></a>
2. <a href="#kitty">Go to the kitty picture!</a>
Note: Follow the above steps to create a link at the top or bottom of the page. You can
also do this for another page on the site by naming the area to link to, and then add the
number of the link such as <a href=”page.html#section1”>
Note: You can also add links to non-html resources such as word document files,
spreadsheet, etc. Type in the text for the link and then add <a href=”?”> replacing
the ? with the full path and name of the file. Type </a>b at the end of the text.
Link to an email address
11
12. <a href=mailto:lellis3@schools.nyc.gov>lellis3@schools.nyc.gov</a>
Change Link Color
In the body tag, type <body link=”FF0000” alink=”000000” vlink=”0000FF”>
Link=Unclicked link
Alink=Active link (color when link is being clicked
Vlink=Change of color, if desired, of previously clicked link
11. Tables
Before you create a table—just as with the website—it is a good idea to sketch out the
format, layout, size and information to be included in it.
Basic Elements
<table></table> to start the tags
<tr></tr> Table Rows
<td></td> Tag data or cell content
Height=”400”
Width=”750”
Align=”right” “center” “left”
Type <table>
<tr> Start the first row of the table
<td> The First cell
<th> column label (Bold)
Note: If you want your first row to include bold column labels, you can use the <th> tag
instead of <td>
Table Border
12
13. In the table tag, add border=”?” to determine the size. Type bordercolor=”Red” to add
color. Remember you can type the name or color number.
Cell Padding and Spacing
You can use padding to add space between the border and the contents of a cell. You
can use spacing to increase the border size or distance between cells measured in
pixels.
Example:
<table border="10" bordercolor="000000"cellpadding="20" cellspacing="40">
<tr>
<th>What is this all about</th>
<td>This is the next one</td></tr>
<tr><td>This is another example</td>
</tr>
</table>
Adjust cell width and height
Enter this in the first <td> tag, width and height. This affects all the cells in the table.
13
14. Example: <td height=”20” width=”30’>
Note: You can extend the cell or row to be different from the default height and width
you select. (This would be the equivalent of merging cells or expanding them in Excel)
Click inside the tag <td> or <th> to extend the column: colspan or row: rowspan
Example:
<table border="10" bordercolor="000000" cellpadding="10" cellspacing="10">
<tr>
<td colspan="6">x</td>
<td>x</td>
<td>x</td></tr>
<tr>
<td>This is another example</td>
<td>This is another example</td>
<td>This is another example</td>
</tr>
</table>
Creating Newspaper Like Column
You may want to organize your text into two or three columns. Within the <tr> </tr>tag,
type <td valign=”top” width=”33%”> You can also do the width in pixels, but percent is
probably easier.
14
15. Repeat the above tags for however many columns and size you want.
Example:
<table border="10" bordercolor="000000" cellpadding="10" cellspacing="10">
<tr>
<td valign="top" width="50%">This is just some stuff that I am writing as an example.
What do you think of html so far?</td>
<td valign="top" width="50%">This is just some stuff that I am writing as an example.
What do you think of html so far?</td></tr>
</tr>
</table>
Note: You may want to adjust the left-side column if you wanted to create a site
navigation box.
Adding a table caption
Below the <table> tag, but before the <tr> one, type in:
<caption>This table is about</caption>
Note: You can add align=”bottom” within the capture tag to locate it below the table.
The default will be above.
Adding a background color to cells and tables
In the <td> tag for the cell you want, type <bgcolor=”?”>
If you want the whole table instead, type in the <table> tag <bgcolor=”?”>
Inserting an image into a cell or table
After the <td> tag, type <img src=”?”>
<td> <img src="books.gif"></td>
If you want the image for the whole table, type bgcolor=”?” in the <table> tag
15
