Embed Size (px)
DESCRIPTION
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.
Citation preview
Presented by the Monroe County Public Library
Me: Austin Stroud, Instructional Designer at the Monroe County Public LibraryAdjunct Faculty, Ivy Tech Community CollegeStarted 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?
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.
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.
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”
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.
So far, your Notepad document should look similar to this:
<html><head></head> </html>
Next, let’s add a title inside the header section as you see below:
<html><head><title>Austin’s Website</title> </head> </html>
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>
<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.
<html><head><title>Austin’s Website</title> </head> <body> Your website’s content goes here!<hr><p><b>My name is Austin Stroud.</b> I work at the <i>Monroe County Public Library.</i></p></body> </html>
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.
My code turned out like this:
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
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 combohttp://www.wordpress.com 2.Weebly – blog/website combo http://www.weebly.com 3.Wix – websites built from editing templateshttp://www.wix.com 4.Google Sites – wiki/website combo https://sites.google.com/
