Creating Educational Websites Getting Started with HTML: Tips, tricks, and helpful guides Created by Rachel Gogan in partial fulfillment of the requirements

Creating Educational Creating Educational WebsitesWebsites

Getting Started with HTML: Tips, Getting Started with HTML: Tips, tricks, and helpful guidestricks, and helpful guides

Created by Rachel Gogan in Created by Rachel Gogan in partial fulfillment of the partial fulfillment of the

requirements of LSC 524requirements of LSC 524

What is HTML?What is HTML?

HTML stands for HTML stands for HHyper yper TText ext MMarkup arkup LLanguage anguage An HTML file is a text file containing small An HTML file is a text file containing small

markup tagsmarkup tags The markup tags tell the Web browser The markup tags tell the Web browser how to how to

displaydisplay the page the page An HTML file must have an An HTML file must have an htmhtm or or htmlhtml file file

extension extension An HTML file can be created using a An HTML file can be created using a simple simple

text editortext editor

Getting StartedGetting Started

This first thing you need to create a This first thing you need to create a website, before you even think about html website, before you even think about html tags and coding, is an outline or plan.tags and coding, is an outline or plan.

What pages do you need and what What pages do you need and what content will be on those pages?content will be on those pages?

You should write down a list of pages on a You should write down a list of pages on a piece of paper and then draw a diagram piece of paper and then draw a diagram on how they will be linked together.on how they will be linked together.

Diagramming Your SiteDiagramming Your Site

Flowcharts are ideal for planning websites.Flowcharts are ideal for planning websites.

Flow charts must indicate a hierarchy that the pages will be linked in. It is a good idea to arrange your files within folders that mirror the hierarchy of your flow chart.

Beginning to CodeBeginning to Code

You should use a plain text editor to create You should use a plain text editor to create your webpages. Using a program like your webpages. Using a program like Microsoft Word causes problems because Microsoft Word causes problems because of automatic formatting and the way that of automatic formatting and the way that most word processing software handles most word processing software handles quotation marks.quotation marks.

NotePad, WordPad, or Text Edit are NotePad, WordPad, or Text Edit are excellent programs to use.excellent programs to use.


Open your text editor and create a new Open your text editor and create a new document.document.

Start by saving your document to a folder Start by saving your document to a folder on your computer; name it index.html and on your computer; name it index.html and be sure that you select All Files from the be sure that you select All Files from the drop down menu. If you save it as a text drop down menu. If you save it as a text file it will not display correctly when file it will not display correctly when uploaded to a web server.uploaded to a web server.


This is how you should save your file. Be sure that it is named index.html and that it is saved NOT as a text file but with .html as the file extension and with “All Files” as the type in the drop down.

Saved Correctly?Saved Correctly?

If you save your file correctly it should If you save your file correctly it should appear as an internet file and not as a text appear as an internet file and not as a text file.file.

HTML TagsHTML Tags

Html tags are like directions. Web Html tags are like directions. Web browsers read html tags and display parts browsers read html tags and display parts of a website according to those of a website according to those instructions.instructions.

It is very important to type the tags exactly It is very important to type the tags exactly because a web browser cannot because a web browser cannot understand misspellings or incorrect understand misspellings or incorrect encodings.encodings.

Closing your html tagsClosing your html tags

When writing html it is very important to When writing html it is very important to remember to close your tags.remember to close your tags.

You close a tag by typing the tag with a You close a tag by typing the tag with a backslash in front of it.backslash in front of it.

For example: For example:

an open tag: <tag>an open tag: <tag>

a closed tag: </tag>a closed tag: </tag>

The <HTML> tagThe <HTML> tag

The first and last tag on any page you create The first and last tag on any page you create must be the <html> tag. This tells the browser must be the <html> tag. This tells the browser that it is looking at a webpage and not a picture that it is looking at a webpage and not a picture file, word document, or other file.file, word document, or other file.

<HTML> and </HTML> should wrap around all <HTML> and </HTML> should wrap around all other tags on your site.other tags on your site.

HTML tags may be written in upper or lower HTML tags may be written in upper or lower case; simply choose one and be consistent.case; simply choose one and be consistent.

The CodeThe Code

Our code so far:Our code so far:

<HTML><HTML>

</HTML></HTML>

How it looks in your fileHow it looks in your file

The <head> tagThe <head> tag

Using a head tag is very important Using a head tag is very important because it is what tells the browser what because it is what tells the browser what the page is about and tells search engines the page is about and tells search engines how to index the page.how to index the page.

It looks like this <head> </head>It looks like this <head> </head>

Our code so farOur code so far

<HTML><HTML><head><head>

</head></head></HTML></HTML>

<title> tags<title> tags

Title tags give the page a title which Title tags give the page a title which displays at the top of the browser and is displays at the top of the browser and is the title that shows up when someone the title that shows up when someone bookmarks a page.bookmarks a page.


<HTML><HTML><head><head><title>My Educational Site</title><title>My Educational Site</title></head></head>

</HTML></HTML>

The <body> tagThe <body> tag

The next basic tag is the body tag. This The next basic tag is the body tag. This tells the web browser which parts of the tells the web browser which parts of the website are to be displayed in the window website are to be displayed in the window and not in the top toolbar.and not in the top toolbar.

It looks like this. <body> </body>It looks like this. <body> </body>


<HTML><HTML><head><head><title>My Educational Site</title><title>My Educational Site</title></head></head><body><body>

Here is where our content will go.Here is where our content will go.

<body><body></HTML></HTML>

Color Properties in the Body TagColor Properties in the Body Tag

The body tag is also where you should locate The body tag is also where you should locate color properties for the page.color properties for the page.

You can enter background colors directly into You can enter background colors directly into the body tag in three ways: with a hexadecimal the body tag in three ways: with a hexadecimal code number, an rgb number, or the color name. code number, an rgb number, or the color name. The hex number and rgb number are the most The hex number and rgb number are the most exact way of choosing colors. However, bear in exact way of choosing colors. However, bear in mind when choosing colors that colors may mind when choosing colors that colors may display differently on different computers.display differently on different computers.

Body Background ColorBody Background Color

Three ways to code for background color in your Three ways to code for background color in your body tag:body tag:

<body bgcolor="#000000"> <body bgcolor="#000000">

<body bgcolor="rgb(0,0,0)"> <body bgcolor="rgb(0,0,0)">

<body bgcolor="black"> <body bgcolor="black">

I recommend using the hexadecimal code method.I recommend using the hexadecimal code method.

““Web-Safe Colors”Web-Safe Colors”

““Some years ago, when most computers only supported Some years ago, when most computers only supported 256 different colors, a list of 216 Web Safe Colors was 256 different colors, a list of 216 Web Safe Colors was suggested as a Web standard. The reason for this was suggested as a Web standard. The reason for this was that the Microsoft and Mac operating system used 40 that the Microsoft and Mac operating system used 40 different "reserved" fixed system colors (about 20 each). different "reserved" fixed system colors (about 20 each).

We are not sure how important this is now, since most We are not sure how important this is now, since most computers today have the ability to display millions of computers today have the ability to display millions of different colors, but the choice is left to you. different colors, but the choice is left to you.

The 216 cross-browser color palette was created to ensure The 216 cross-browser color palette was created to ensure that all computers would display the colors correctly that all computers would display the colors correctly when running a 256 color palette”when running a 256 color palette”

--W3schools.com websiteW3schools.com website

Websites with Color PalettesWebsites with Color Palettes

W3Schools Color PageW3Schools Color Page Color Picking WebsiteColor Picking Website – you can test out – you can test out

color schemes here (requires javascript)color schemes here (requires javascript) ColorzillaColorzilla: a Mozilla and Firefox extension : a Mozilla and Firefox extension

that allows you to sample colors right in that allows you to sample colors right in your browseryour browser

Our codeOur code

<HTML><HTML><head><head><title>My Educational Site</title><title>My Educational Site</title></head></head><body bgcolor=“#BFD6FF”><body bgcolor=“#BFD6FF”>


<body><body></HTML></HTML>

What our website looks like right nowWhat our website looks like right now

Adding Content to a pageAdding Content to a page

The previous tags have all been basic set The previous tags have all been basic set up tags which essentially allow us to build up tags which essentially allow us to build a framework that we can add our content a framework that we can add our content into. Think of them as a skeleton to which into. Think of them as a skeleton to which we will now begin to add flesh and blood.we will now begin to add flesh and blood.

We start with heading tags.We start with heading tags.

Heading TagsHeading Tags

Headings for your page are titles that Headings for your page are titles that show up at the top of your page which tell show up at the top of your page which tell a visitor what the page will be about.a visitor what the page will be about.

Headings come in six sizes from big to Headings come in six sizes from big to small. small.

<h1> </h1> is the largest size and <h1> </h1> is the largest size and

<h6> </h6> is the smallest<h6> </h6> is the smallest

Our code with a headingOur code with a heading

<HTML><HTML><head><head><title>My Educational Site</title><title>My Educational Site</title></head></head><body bgcolor=“#BFD6FF”><body bgcolor=“#BFD6FF”><h1>My Educational Site</h1><h1>My Educational Site</h1>


</body></body></HTML></HTML>

How our page looksHow our page looks

Adding TextAdding Text

The next step after titling a page is to add The next step after titling a page is to add some text to explain what the page is some text to explain what the page is about and what it will contain.about and what it will contain.

You should enclose your text within You should enclose your text within paragraph tags. paragraph tags.

This is a paragraph tag <p> </p> This is a paragraph tag <p> </p> (always remember to close your tags!)(always remember to close your tags!)

Our codeOur code

<HTML><HTML><head><head><title>My Educational Site</title><title>My Educational Site</title></head></head><body bgcolor=“#BFD6FF”><body bgcolor=“#BFD6FF”><h1>My Educational Site</h1><h1>My Educational Site</h1>

<p>This page will contain my assignments for class and will <p>This page will contain my assignments for class and will have links to projects that I create. </p>have links to projects that I create. </p>


Centering the HeadingCentering the Heading

Many times it is most visually appealing to Many times it is most visually appealing to make the title of your page appear in the make the title of your page appear in the center of your page. To do that you center of your page. To do that you should change the alignment. All tag should change the alignment. All tag alignment defaults to left. alignment defaults to left.

This is how to center: This is how to center:

<h1 align="center">My Educational Site</h1><h1 align="center">My Educational Site</h1>

Our codeOur code

<HTML><HTML><head><head><title>My Educational Site</title><title>My Educational Site</title></head></head><body bgcolor=“#BFD6FF”> <body bgcolor=“#BFD6FF”>


<p>This page will contain my assignments for class and will have links <p>This page will contain my assignments for class and will have links to projects that I create. </p>to projects that I create. </p>


Formatting textFormatting text

In addition to putting text within paragraphs you In addition to putting text within paragraphs you can also center your font, change its size, color, can also center your font, change its size, color, and face.and face.

You use different tags to create different effects. You use different tags to create different effects. However, use moderation in how much you alter However, use moderation in how much you alter your fonts. Coding italicized yellow text on a your fonts. Coding italicized yellow text on a white background is a huge mistake. Be sure white background is a huge mistake. Be sure that your alterations do not make it hard or that your alterations do not make it hard or impossible to read your text.impossible to read your text.

Text tagsText tags

<b> Creates Bold Text </b><b> Creates Bold Text </b>Creates Bold TextCreates Bold Text

<i> Creates Italicized Text </i><i> Creates Italicized Text </i>Creates Italicized TextCreates Italicized Text

<u> Creates Underlined Text </u><u> Creates Underlined Text </u>Creates Underlined TextCreates Underlined Text

<strike>Creates Strikethrough Text</strike><strike>Creates Strikethrough Text</strike>

Coloring the fontColoring the font

You can also change the color of your font You can also change the color of your font by using the <font> </font> tags.by using the <font> </font> tags.

<font color=“#FF0000”>This font shows up <font color=“#FF0000”>This font shows up in that color.</font> - will display as:in that color.</font> - will display as:

This font shows up in that color.This font shows up in that color. Always be sure to close your font tags or Always be sure to close your font tags or

the entire rest of your page will take on the entire rest of your page will take on that color.that color.

Further Font CustomizationFurther Font Customization

To view more ways to format your font, To view more ways to format your font, visit the W3Schools website: visit the W3Schools website: http://www.w3schools.com/html/html_formhttp://www.w3schools.com/html/html_formatting.aspatting.asp

Inserting ImagesInserting Images

The next tag to learn is the image tag. The next tag to learn is the image tag. With this tag you can include pictures in With this tag you can include pictures in your websites. your websites.

When including pictures be sure that you When including pictures be sure that you are not infringing on copyrighted images are not infringing on copyrighted images and that you attribute ownership of any and that you attribute ownership of any images you did not create yourself.images you did not create yourself.

The <img> tagThe <img> tag

The image tag is one html tag that you do NOT The image tag is one html tag that you do NOT have to close. It is an exception to the rule.have to close. It is an exception to the rule.

You must upload the image that you wish to use You must upload the image that you wish to use to your own webserver. It is often helpful to to your own webserver. It is often helpful to save all images into a separate image folder. save all images into a separate image folder. When your webpage grows bigger than a few When your webpage grows bigger than a few pages it’s a good idea to keep html files and pages it’s a good idea to keep html files and images separate for organization.images separate for organization.

So, before we go into the image tag let’s create So, before we go into the image tag let’s create folders to organize our files.folders to organize our files.

Why Folders?Why Folders?Right now we have only two items in our website folder. The image folder and our index.html file.

However as we add pages to our website this area can become very cluttered.

This is why foldersThis is why folders

As you can see this folder is very cluttered with image files and html files and if it grows any larger it will be hard to locate files in it.

If you separate the images into a image folder it becomes simpler to manage.

SortedSorted

Back to the Image TagBack to the Image Tag

Once you have chosen the image you wish to Once you have chosen the image you wish to display and gotten the permission to use it you display and gotten the permission to use it you should save it into your images folder.should save it into your images folder.

Once it is saved you can then insert the image Once it is saved you can then insert the image code into your website to display the picture.code into your website to display the picture.

An image tag has two parts. The img part tells An image tag has two parts. The img part tells the browser that it should display an image. the browser that it should display an image.

The second part is src; src stands for source and The second part is src; src stands for source and is what tells the browser where to look to find the is what tells the browser where to look to find the picture.picture.

Image tag continuedImage tag continued

Your code will look like this: Your code will look like this:

<img src=“location of picture”><img src=“location of picture”>

The browser will look only inside the folder The browser will look only inside the folder on your web server for the picture, but on your web server for the picture, but we’ve placed our images inside a separate we’ve placed our images inside a separate folder, so we need to be sure we specify folder, so we need to be sure we specify that in the location.that in the location.

Image tagImage tag

Our code will then look like this:Our code will then look like this:

<img src=“images/picturename.jpg”><img src=“images/picturename.jpg”>

Be sure to include the image extension (.jpg Be sure to include the image extension (.jpg and .gif are the best types of images for and .gif are the best types of images for the web)the web)

We are using an image called stacks.jpg, so We are using an image called stacks.jpg, so this is how it will look in our code.this is how it will look in our code.

Our codeOur code




<img src=“images/stacks.jpg”><img src=“images/stacks.jpg”>


Here is what our site looks like with the image on it.

Centering an ImageCentering an Image

To make the site look a little bit nicer we To make the site look a little bit nicer we might want to center the image on the might want to center the image on the page.page.

You can also center text or other elements You can also center text or other elements with this tag.with this tag.

In order to center something, simply put In order to center something, simply put <center> </center> around it. <center> </center> around it.

Our codeOur code




<center> <img src=“images/stacks.jpg”> </center><center> <img src=“images/stacks.jpg”> </center>


Our website so farOur website so far

Horizontal Break TagsHorizontal Break Tags

In order to ensure that your information In order to ensure that your information doesn’t end up in huge lumps of text you doesn’t end up in huge lumps of text you should use break tags.should use break tags.

A break tag is coded as <br> and this, like A break tag is coded as <br> and this, like image (<img>) tags, is one that does not image (<img>) tags, is one that does not need to be closed.need to be closed.

Use this tag to provide spacing.Use this tag to provide spacing.

Our code with break tagsOur code with break tags<HTML><HTML><head><head><title>My Educational Site</title><title>My Educational Site</title></head></head><body bgcolor="#BFD6FF"><body bgcolor="#BFD6FF">


<p>This page will contain my assignments for class and will have links to projects that I <p>This page will contain my assignments for class and will have links to projects that I create. </p>create. </p>

<center><img src="images/stacks.jpg"></center><center><img src="images/stacks.jpg"></center>

<br><br><br><br>

<center>Here would be a good place for some links.</center><center>Here would be a good place for some links.</center>


Our site so farOur site so far

Adding LinksAdding Links

The next step to creating websites is to The next step to creating websites is to add links to them. There are two kinds of add links to them. There are two kinds of links, relative and absolute.links, relative and absolute.

Absolute LinksAbsolute Links

An Absolute link is a link that contains an An Absolute link is a link that contains an entire url or website address. It begins entire url or website address. It begins with http://with http://

These are examples of absolute links: These are examples of absolute links: http://www.google.comhttp://www.google.com

http://www.ala.orghttp://www.ala.org http://comcast.nethttp://comcast.net

Relative LinksRelative Links

A relative link is a link that directs the A relative link is a link that directs the visitor to a page that is hosted on the visitor to a page that is hosted on the same webserver and is part of the main same webserver and is part of the main site. It does not include “http://” because it site. It does not include “http://” because it is part of the website. The http is only is part of the website. The http is only required in an absolute link.required in an absolute link.

These are relative links:These are relative links:assign01.htmlassign01.htmlimages/stacks.jpgimages/stacks.jpg

Coding LinksCoding Links Links use the <a> </a> tag and is accompanied by ‘href’. ‘Href’ Links use the <a> </a> tag and is accompanied by ‘href’. ‘Href’

refers to hypertext reference, recall that HTML stands for hypertext refers to hypertext reference, recall that HTML stands for hypertext markup language.markup language.

An absolute link codes like this:An absolute link codes like this:<a href=“http://www.ala.org”>Ala.org</a><a href=“http://www.ala.org”>Ala.org</a>

This link will display on a website like this:This link will display on a website like this:

Ala.orgAla.org

The quotation marks are The quotation marks are requiredrequired and the link will not work without and the link will not work without them.them.

Coding relative linksCoding relative links

Relative links are coded the same way, only they Relative links are coded the same way, only they don’t require as much information.don’t require as much information.

<a href=“assign01.html”>Assignment 1</a><a href=“assign01.html”>Assignment 1</a>

<a href=“images/stacks.jpg”>Picture of stacks</a><a href=“images/stacks.jpg”>Picture of stacks</a>

Note that in the first link we are directing the user Note that in the first link we are directing the user to a page, and in the second link we are to a page, and in the second link we are directing them to a file that they can view or directing them to a file that they can view or download.download.

Adding LinksAdding Links

According to our site design we planned to According to our site design we planned to create several subpages: two for assignments, create several subpages: two for assignments, one as a contact page, and a few that would be one as a contact page, and a few that would be for assignment two. for assignment two.

All of these pages that we’re going to link will be All of these pages that we’re going to link will be relative links because we will have created all of relative links because we will have created all of them. However, if on the contact page we them. However, if on the contact page we choose to add a link to a personal site, that choose to add a link to a personal site, that would use an absolute link.would use an absolute link.

Our code now with linksOur code now with links<HTML><HTML><head><head><title>My Educational Site</title><title>My Educational Site</title></head></head><body bgcolor="#BFD6FF"><body bgcolor="#BFD6FF">


<p>This page will contain my assignments for class and will have links to projects that I create. </p><p>This page will contain my assignments for class and will have links to projects that I create. </p>

<center><img src="images/stacks.jpg"></center><center><img src="images/stacks.jpg"></center>

<br><br><br><br>

<center> <a href=“assign01.html”>Assignment 1</a> | <a href=“assign02.html”>Assignment 2</a> | <center> <a href=“assign01.html”>Assignment 1</a> | <a href=“assign02.html”>Assignment 2</a> | <a href=“contact.html”>Contact Me</a> </center><a href=“contact.html”>Contact Me</a> </center>


Our site with linksOur site with links

Creating Additional PagesCreating Additional Pages

Creating additional pages is just the same as creating Creating additional pages is just the same as creating our home page. You may name these pages anything our home page. You may name these pages anything that you like. However, bear in mind that you should that you like. However, bear in mind that you should choose short but identifiable page names.choose short but identifiable page names.

For example, assign01.html is a good file name, it tells For example, assign01.html is a good file name, it tells you quickly that you can expect to find the first you quickly that you can expect to find the first assignment on that page and makes it easier for you to assignment on that page and makes it easier for you to later remember the content of that page and where it later remember the content of that page and where it should go when browsing a long list of file names.should go when browsing a long list of file names.

File names like page01.html or site.html, make poor file File names like page01.html or site.html, make poor file name choices for the reasons listed above. Be brief but name choices for the reasons listed above. Be brief but descriptive with page names.descriptive with page names.

Website Design: some tips to Website Design: some tips to rememberremember

Always be sure to choose a good color scheme Always be sure to choose a good color scheme that is easy on the eye, not only will people have that is easy on the eye, not only will people have to look at this site later on, you’re going to spend to look at this site later on, you’re going to spend a long time looking at it while coding it. a long time looking at it while coding it.

Images take time to load, especially on slow Images take time to load, especially on slow connections. Be wary of using too many images connections. Be wary of using too many images in your pages as that can slow down a browser in your pages as that can slow down a browser on a slow connection.on a slow connection.

Further ResourcesFurther Resources

For more help on basic website design For more help on basic website design here are some websites to check out.here are some websites to check out.

DaveDave Raggett’s Raggett’s Introduction to HTML Introduction to HTML WebmonkeyWebmonkey

: the web developers’ resource: the web developers’ resource

More Advanced Web DesignMore Advanced Web Design

Mastered the basics? Try these web Mastered the basics? Try these web design elements.design elements.

Tables: Tables: http://www.w3schools.com/html/html_tablehttp://www.w3schools.com/html/html_tables.asps.asp

CSS (Cascading Style Sheets): CSS (Cascading Style Sheets): http://www.w3schools.com/http://www.w3schools.com/csscss/default.asp/default.asp

The EndThe End

Happy coding!Happy coding! Questions? Comments? Concerns?Questions? Comments? Concerns?

Contact meContact me and I’d be glad to answer your and I’d be glad to answer your questions!questions!

-Rachel Gogan-Rachel Gogan

Documents

Creating Educational Websites Getting Started with HTML: Tips, tricks, and helpful guides Created by Rachel Gogan in partial fulfillment of the requirements