2. Me:
Austin Stroud, Instructional Designer at the
Monroe County Public Library
Adjunct Faculty, Ivy Tech Community College
Started building websites/learning the code behind
it at 13
You:
Do you have any experience working on a website?
Have you ever tried to use a free, online builder?
What are you hoping to learn in this course?
3. You can create your own website by typing out the
code (known as HTML) on your own. A popular
program that comes on every Windows computer is
Notepad, this is all you need to get started.
If you prefer to be stepped through this process, there
are a number of free website builders available on the
Internet that we will discuss later.
4. HTML stands for Hypertext Mark-up Language.
HTML is the code “behind” a website.
There are more advanced forms of coding that go into
websites, but HTML sets a good foundation for you to
learn the rest. We will just be covering HTML basics
today.
5. 1. Left click on Windows logo in bottom left corner of
your screen
2. Left click on “All Programs”
3. Scroll down to the “Accessories” folder and left click
4. Left click on “Notepad”
6. With HTML, almost everything in the code needs to
have a beginning and an end. This is done with HTML
tags.
In Notepad, type <html> at the beginning of your
document and </html> below this tag. This defines the
document as a website coded in HTML. Everything
else you type will be between these two HTML tags.
After the <html> tag you also will need a <head>
</head> section that contains information about the
website, such as the title.
7. So far, your Notepad document should look similar to
this:
<html>
<head>
</head>
</html>
8. Next, let’s add a title inside the header section as you see
below:
<html>
<head>
<title>Austin’s Website</title>
</head>
</html>
9. Now, we need a <body> </body> section that starts just
after the </head> tag. This is where the content of your
website will go.
<html>
<head>
<title>Austin’s Website</title>
</head>
<body> Your website’s content goes here!
</body>
</html>
10. <b> word </b> = bold text
<i> word </i> = italic text
<u> word </u> = underlined text
<br> = page break (drops your next text down a line)
<p> words </p> = paragraph
<hr> = horizontal line that can separate sections of your
website
Try some of these tags out in the body area of your code.
More tag examples are provided on some of your
handouts.
12. When you are finished, in Notepad, follow these
instructions to save your file:
1. Left click on “File”
2. Left click on “Save As…”
3. Change the “Save as type” from “Text documents” to
“All files”
4. Name your file something that ends in .html or .htm
5. For example, I am going to name mine
testwebsite.html and then click “Save”
6. You now can open your document to see what it looks
like.
14. http://www.godaddy.com – GoDaddy is what I use
Articles with further ideas and reviews:
http://lifehacker.com/5943452/five-best-domain-name-registrars
http://lifehacker.com/5911651/five-best-web-hosting-companies
15. Now, if you prefer to not mess with the HTML coding
yourself – there are a number of free options out there
for you (below are just a few examples):
1. Wordpress – blog/website combo
http://www.wordpress.com
2. Weebly – blog/website combo
http://www.weebly.com
3. Wix – websites built from editing templates
http://www.wix.com
4. Google Sites – wiki/website combo
https://sites.google.com/
