So You Want to be a Web Designer?

Web DesignThe History, Coding, and Steps to Create Your Own Site

Want to See the Worlds First Website?

One of My Favorite Modern Websites is

Websites I USE Most Include:

Current Websites include:AnimationsVideosSoundsInteractive elementsE-Commerce (buying and selling)AdvertisingGamingSocial NetworkingLive videoOnline classesWhats next?

Where Did the Internet Come From?The concept of connecting computers together to share information came about in 1962.In 1965 one computer in Massachusetts was connected to one computer in California by using a low-speed dial-up telephone line. By the end of 1969, four computers were networked together and were called the Arpanet and the speed was better.More HistoryIn 1972 electronic mail, or e-mail was introduced and was the top application on the Arpanet for over ten years.Also in 1972 the term Internet replaced the Arpanet after multiple networks were connected to each other. Interconnected networks.In 1984 there were 1,000 computer hosts on the Internet.In 1987 there were 10,000 hosts.In 1989 there were 100,000 hosts.Still More Internet HistoryIn 1991 the Internet added included graphics for the very first time!Also in 1991, the Internet came to Idaho. Connecting to the Internet means using your home phone line to call a host computer! It took forever!In 1992, there were over 1 million hosts.In 1994 the White House posted its own website and shopping and banking online became a reality. Yet More HistoryIn 2002, creating your own blog became popular.In 2006 cloud computing becomes all the rage and thumb drives and installed software is less in demand.In 2008, NASA sends images over their own deep space network from earth up to a spaceship orbiting 20 million miles away.In 2010 there were over 100 million registered domain names (Like www.mrjohns.org).In 2012, Facebook reaches 1 BILLION active users each month. Also, Gangnam Style became the first YouTube video to get over 1 billion views.In 2013, 50% of all Internet traffic was either YouTube or Netflix!

How Do You Make a Web Site?

HTMLBefore programs did all the coding for you, websites had to be created by typing coding called Hyper Text Markup Language, or HTML.One typing or spelling error and the entire site or elements of it - would not work.Lets Do Some Coding!

Click the START icon and type Notepad into thesearch box (Or select it if it is on the start menu).

Type Check out my cool webpage! (or something like that) in Notepad.SAVINGWe want to save this file twice.Once as a Notepad file, so we can keep working on it.And once as an html file, which we can view as a webpage.Save your file as First Webpage last name and keep it as a notepad file.

Secondly, save the file again but save it bytyping .html at the end of the file name.Check it Out!Go find the html file you just saved.Double click to open it.Because it is an html file, it will open in a browser even though it isnt published on the Internet.What does it look like?

Now add some html CODE right onto the Notepad page as seen above.It is the HTML coding that gives you the power and control that you want on your webpages.

I indent my text just so it stands out while Im coding. It does NOT change how it looks online.

Save the .html file again.Opening tag/Closing tagOpen the HTML file in your browser again.Does it look different with the coding?Why or why not?

Add a heading by typing the tags.Add a title by typing the and tags between the heading tags.Give your webpage a title. This WILL BE visible. Choose wisely. Search engines willuse these words to find your site.Save your html file again and look at it in your browser. What is different now?Heading and TitleDid You Catch My Error on the Previous Page?Checking for errors is called de-bugging

See it?I do not want the > at the end of the sentence!

This is what it looks like onlineParagraphs, Emphasis, & Line Breaks

Add the line, How amazing (or something like it) on a second line beneath your first line of text.

Save it.

Open it in your browser again.

Are there two lines of text?ParagraphsHTML doesnt care about spaces between words like thisOr text on separate lineslike this.So you have to TELL it to start a new paragraph with the and code.

Add the paragraph coding for both lines of test between BODY tags (codes).

SAVE and VIEW it in your browser again.

Emphasis & Strong Tags

Add the two new lines above.SAVE and VIEW it again.Line Break

Add a line break.SAVE and VIEW it.Headings

You can change text size by using the tag.Add and as seen above.

SAVE and VIEW!H1, h2, h3, h4, h5, h6Experiment by adding additional heading (text size) tags to other lines of text.Changing text size randomly is not recommended. Use heading sizes carefully. Typically there will only be one or two text sizes on a website. For this assignment, give your first line the tag and the second line the tag.

EXAMPLELists

Add the

and

tags to create an unordered list (

1. is for ordered lists).Indent 10 spaces and add three

2. lines (listed items).

   SAVE.VIEW.

   Change the unordered list

to an ordered list

1. SAVEVIEW IT!LinksWeb pages are great for sharing or getting information but the power of the Internet is the HYPER TEXT part of HTML. Hyper text, or hyperlinks are the real power of linked computers. We can link to other sites, pages, or even places on the same web page with the correct CODING!The Tag

   What does this look like online??Broken Link

   This is my web page in the browser. Why isnt the link working? It should be BLUE and an active link!

   This is the html file. Where are my TWO errors?

   The ( needs to be a