Download
1 / 67
680 likes | 824 Views
Web Design. The History, Coding, and Steps to Create Your Own Site. Want to See the World’s First Website?. One of My Favorite Modern Websites is…. Websites I USE Most Include:. Current Websites include:. Animations Videos Sounds Interactive elements E-Commerce (buying and selling)
E N D
Web Design The History, Coding, and Steps to Create Your Own Site
Current Websites include: • Animations • Videos • Sounds • Interactive elements • E-Commerce (buying and selling) • Advertising • Gaming • Social Networking • Live video • Online classes • What’s 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 History… • In 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 History… • In 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 websiteand shopping and banking online became a reality.
Yet More History… • In 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!
HTML • Before 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.
Let’s 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.
SAVING • We 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 isn’t published on the Internet. • What does it look like?
Opening “tag” /Closing “tag” 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 I’m coding. It does NOT change how it looks online. Save the .html file again.
Open the HTML file in your browser again. • Does it look different with the coding? • Why or why not?
Heading and Title Add a heading by typing the <head> </head> tags.Add a title by typing the <title> and </title> 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?
Did 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!
Paragraphs, 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?
Paragraphs • HTML doesn’t care about spaces between words like this • Or text on separate lineslike this. • So you have to TELL it to start a new paragraph with the <p> and </p> 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 <h1> </h1> tag.Add <h1> and </h1> as seen above. SAVE and VIEW!
H1, h2, h3, h4, h5, h6 • Experiment 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 <h1> </h1> tag and the second line the <h2> </h2> tag.
Lists Add the <ul> and </ul> tags to create an unordered list (<ol> is for ordered lists). Indent 10 spaces and add three <li> </li> lines (listed items). SAVE. VIEW.
Change the unordered list <ul> to an ordered list <ol> SAVE VIEW IT!
Links • Web 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 <a href> Tag What does this look like online??
“Broken” Link This is my web page in the browser. Why isn’t the link working? It should be BLUE and an active link!
The ( needs to be a < And I have one too many “w”s
Notice that the URL (Uniform Resource Locator), or web address, is not as simple as www.mycoolwebpage.com It is not published, so opens the file where it is saved. Mine is in certain folders and sub-folders on the “C” drive of my computer. Once published, a site has an online URL but you have to pay to “own” a true www.com address.
Your Name • Before we go any further, put your first and last name in one of the text lines of your Notepad file so I can grade it.
Text Colors • There are 140 color codes that can be used to change text colors. You can find the codes at this website: http://www.w3schools.com/tags/ref_colornames.asp(The link is on my website.) • The 17 standard colors are: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow.
Add the <font color=> and </font> tag Visit the text color website and copy and paste different color codes in.
