Presented by the Monroe County Public Library
Me:
Austin Stroud, Instructional Designer at the
Monroe County Public Library
Adjunct Faculty, Ivy Tech Community College
...
You can create your own website by typing out the
code (known as HTML) on your own. A popular
program that comes on every ...
HTML stands for Hypertext Mark-up Language.
HTML is the code “behind” a website.
There are more advanced forms of coding t...
1. Left click on Windows logo in bottom left corner of
your screen
2. Left click on “All Programs”
3. Scroll down to the “...
With HTML, almost everything in the code needs to
have a beginning and an end. This is done with HTML
tags.
In Notepad, ty...
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>
...
Now, we need a <body> </body> section that starts just
after the </head> tag. This is where the content of your
website wi...
<b> word </b> = bold text
<i> word </i> = italic text
<u> word </u> = underlined text
<br> = page break (drops your next t...
<html>
<head>
<title>Austin’s Website</title>
</head>
<body> Your website’s content goes here!<hr>
<p><b>My name is Austin...
When you are finished, in Notepad, follow these
instructions to save your file:
1. Left click on “File”
2. Left click on “...
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...
Now, if you prefer to not mess with the HTML coding
yourself – there are a number of free options out there
for you (below...
Austin Stroud
Instructional Designer
Monroe County Public Library
303 East Kirkwood Avenue
Bloomington, IN 47408
(812) 349...
Upcoming SlideShare
Loading in …5
×

Introduction to Web Design

321 views

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
321
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Introduction to Web Design

  1. 1. Presented by the Monroe County Public Library
  2. 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. 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. 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. 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. 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. 7. So far, your Notepad document should look similar to this: <html> <head> </head> </html>
  8. 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. 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. 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.
  11. 11. <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>
  12. 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.
  13. 13. My code turned out like this:
  14. 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. 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/
  16. 16. Austin Stroud Instructional Designer Monroe County Public Library 303 East Kirkwood Avenue Bloomington, IN 47408 (812) 349-3050 ext. 1666 astroud@mcpl.info

×