Web Design


The World Wide Web | Types of Websites | Web Design | Webpage Creation

The World Wide Web

The World Wide Web is used every day by millions of people for everything from checking the weather to sharing dog videos to even reading this lesson on the World Wide Web. There are billions of webpages on the Internet that search engines know about, plus many more that search engines have not indexed yet. There are billions more webpages that cannot be indexed because they are access-restricted.

Birth of the World Wide Web
Birth of the World Wide Web
Click on the picture to watch the video

Review

Let's see what you learned from the presentations by answering the review questions below.

Assignment: Question for Thought 1

Directions: What is your first memory of the World Wide Web? Interview two people, at least one from a different generation than your own (like one of your parents), about their first experiences with the World Wide Web. Compose your interviews as an essay and post to itsLearning.


Types of Websites

webWebsites have many functions and can be used in various fashions; a website can be a personal website, a commercial website, a government website or a non-profit organization website. Websites can be the work of an individual, a business or other organization, and are typically dedicated to a particular topic or purpose. Any website can contain a hyperlink to any other website, so the distinction between individual sites, as perceived by the user, can be blurred. Some websites are informational or produced by enthusiasts or for personal use or entertainment. Many websites do aim to make money, using one or more business models.

Portal

A portal is a site that provides a starting point or a gateway to other resources on the Internet or an intranet. Portals offer a variety of Internet services, for example:

Examples of portals include AltaVista, AOL, Lycos, MSN, Netscape, Yahoo!

newsNews

News websites contain newsworthy material and contain stories and articles related to life, money, current events, and the weather. They are dedicated to dispensing news, politics, and commentary. You have probably visited WSB-TV or NBC.com when you were looking for news related information.

Informational

Informational websites contains factual information. Many of them are not necessarily for commercial purposes. Government agencies, for example, provide census data, tax codes, and the congressional budget which are all factual information. IRS.gov provides factual information on tax codes and other tax related information. Other websites that provide factual informational include MARTA and Medicare.

Business & Marketing

Business and marketing websites promote or sell a product or a number of products. Business and marketing websites are everywhere. Every time you see an ad whether during a Google search or in the middle of your Facebook feed, you are looking at a business and marketing website. Examples of business and marketing websites include Apple.com, BestBuy.com, AirTran.com, and Amazon.com. These types of websites will general have a .com or .net extension.

Educational

Educational websites offer exciting, challenging avenues for formal and informal teaching and learning. Educational websites may offer a new skill, a course, or an entire degree. These websites provide online training for a new skill. In fact, you are taking advantage of online learning right now. Some examples of online schools include iAchieve Virtual Academy and Georgia Virtual School. We are seeing more and more colleges offering courses and degrees online. Mrs. Rush just earned by Educational Specialist degree at Arkansas State University. I took every one of my courses virtually. Educational websites, especially higher education, often have a .edu extension although not all do as seen with Forsyth County Schools: http://www.forsyth.k12.ga.us but Lanier Technical College:http://www.laniertech.edu does.

Entertainment

You are probably very familiar with entertainment websites. These sites are interactive and engaging. They offer music, video, games, sports, chats, and sweepstakes. Some entertainment site letsusers play online games. Some enable people to gamble online.

Advocacy

Advocacy websites describes a cause, opinion, or idea. They present views of a group of people or organizations.

Blog

Blog is short for weblog. Blogs are time-stamped articles or posts, in a diary type format that reflect interest, opinions and personalities of the author. The blog was a feature in the 2009 film Julie & Julia. The film contrasts the life of Chef Julia Child in the early years of her culinary career with the life of young New Yorker Julie Powell, who aspires to cook all 524 recipes in Child's cookbook in 365 days, a challenge she described on her popular blog that would make her a published author.

Another form of the blog is the vblog which is a blog that contains video. Blogosphere is the worldwide collection of blogs. Vlogosphere is all vblogs worldwide.

Wiki

summer photosWiki is Hawaiian for “every fast” in case you are ever on Jeopardy. :-) Wikis allows user to create, add, modify, or delete website content. When Wikis first became popular they were not credible sources and your Language Arts teachers would not accept them as research citations. Modern Wikis collect recent edits on a webpage so someone (either an authority or a verifier) can review them for accuracy. The very first wiki software was “WikiWikiWeb” and the most popular Wiki is Wikipedia.

Online Social Networks

Social networking sites encourage members in the group to share interest, ideas, stories, photos, music, and videos with other users. Popular examples include:

Media sharing websites allow members to share photos, music, and videos. ShutterFly and Flickr are popular sites for sharing digital photos and GoogleVideo and YouTube are example of video sharing sites.

Content Aggregator

Content aggregators gather and organize web content and then distribute or feed the content to subscribers for free or for a fee.

Personal

Private individuals or families create and publish personal websites for a variety of reasons, such as:

Assignment: Types of Websites worksheet

Directions: Websites are created to serve a variety of purposes. Review the different types of websites in the lesson. Use your detective skills to find a variety of websites on the Internet and completing the Types of Websites worksheet. Do not use the specific website examples (i.e. Amazon.com) presented in the lesson.


Web Design

Websites have three very important things: design, functionality, and content. You can have great content and functionality but the design may turn off the user and he doesn't take the time to discover the great content. Because anyone can post information to the World Wide Web, it is important that you evaluate websites prior to referencing or utilizing the information to ensure that the content is valid and accurate.  A couple of things to help you evaluate a website are to check for posted contact information and also a date of when the page was last updated (to indicate how current the information is). Something as simple as all of the links working on the website is a good indicator. Outdated links indicate that the website is not being maintained.

Web developers are responsible for the sleek fonts and clean layout you love on your favorite websites. According to U.S. News, the Labor Department considers this one of the fastest-growing jobs this decade and predicts employment should swell at a rate of about 20 percent by 2022.

bad designWhen it comes to design, you have probably seen really good webpages and others that can just be described as messy. "There is Yin and Yang, Black and White, Hot and Cold and unfortunately…Good Design and Bad Design. Since there must be a balance in the Universe, good design can`t exist alone." Bogdan blogs in 20 Examples of Bad Web Design for topdesignmag.

Other developments in computer technology affect web design. First consider the device. Tablet computers and smartphones have changed how user view and interact with webpages. On the software side, the Windows 8 operating system also changed how webpages are viewed. If you are not familiar with Windows 8, google it and you'll see what I mean. It is very different from previous versions of Windows.

The times...they are a changing and that includes the World Wide Web. Like most things, web design has trends. Read Jake Rocheleau's blog post Web Design: 20 Hottest Trends To Watch Out For In 2014. Some of the technical things may not make sense to you, I bet you know what you like. :-)

The World Wide Web began in 1989. Have you ever wondered what your favorite website looked like when it first launched on the World Wide Web? How about before you were even born? Internet Archive Way Back Machine has archived (saved) 415 billion webpages over time. It was launched in January 1996. The Wayback Machine is a digital archive of the World Wide Web and other information on the Internet created by the Internet Archive, a non-profit organization, based in San Francisco, California. It was set up by Brewster Kahle and Bruce Gilliat, and is maintained with content from Alexa Internet. The service enables users to see archived versions of webpages across time, which the Archive calls a "three dimensional index."

Take a look at the Forsyth County School's website. The Way Back Machine said it was from November 1998 but obviously this archive didn't go back any further than March 20, 2000. Interesting, the links work but it appears that the images did not archive (as demonstrated by the little x icons).

Forsyth County Schools 2000

I thought it would be interesting to compare Forsyth County's 2000 website with its current 2014 website.

Forsyth County Schools 2014

Assignment: Design Evaluation

Directions: Download the assignment from itsLearning and follow the step-by-step instructions.


Webpage Creation

There are many ways to make a webpage and you've probably already played around with some of the ways. First, you can turn a Word document or a Power Point into a webpage (messy but it does work although I don't recommend it). All you have to do is save as an .html file and it turns the document into a webpage. You might have also used web based programs such as Wix or Weebly. You might have used HTML editors such as Adobe's Dreamweaver or Microsoft's Expression Web. Even posting on Facebook is developing a Web page (although you have very little control over the design and are basically just building content, it is still a webpage). The best thing about the Web is that anyone with an idea can create a website for free (hosting is another thing). Behind all of these webpages, is the markup language.

You only need two programs to create a webpage:

What you don't need is the Internet. Your browser can view the webpages you create from your personal machine.

HTML iconWebpages are written or coded using some type of markup language. A "markup language" is a computer language that describes to a Web browser how a page should be formatted. The most popular markup language is Hypertext Markup Language, more commonly referred to as HTML. The reasons behind the success of HTML are:

There are several versions of HTML but the most current is HTML5. It was specially designed to deliver rich content without the need for additional plugins. The current version delivers everything from animation to graphics, music to movies, and can also be used to build complicated web applications. HTML5 is also cross-platform. It is designed to work whether you are using a PC, or a Tablet, a Smartphone, or a Smart TV.

In addition to HTML5, styling is accomplished through Cascading Style Sheets (CSS). The current standard for CSS is CSS3. HTML5 and CSS3 are still being developed and are not fully supported by all browsers but most of the latest versions of browsers will support most tags and attributes. The W3C (World Wide Web Consortium which oversees the development of webpages) expects HTML5 to be fully supported by the end of 2014. You can read more about HTML5 and CSS3 by visiting w3schools.com.

Tags and attributes are the building blocks of HTML. They are the instructions to the browser on how to display the content. An HTML tag is a code element that tells the Web browser what to do with your text. Each tag will appear as letters or words between a < (less than sign) and a > (greater than sign) referred to as a "wicket". It is the wicket that notifies the Web browser that this is code and not document content. Here is a sample of HTML code:

HTML sample code

Notice that all of the code is typed lowercase except for the DOCTYPE. The case is important. HTML itself is not case sensitive, however the current industry standard is that code is typed lowercase. Case also matters to some Web servers. For example, the picture file RUSH.png is not the same as rush.png.

When you save your file, you must save it with the file extension .html. By default, your text editor program will save as a .txt (or another extension in the case of a Mac). You must physically type the .html. To open the webpage, use your file management program such as Windows Explorer to find the file and double click to open in your computer's default Web browser.

In the browser, you should see the text contained between the title tags on the browser's title bar. Using my sample code, My First Page will appear on the browser’s title bar.

On the webpage itself, you should see all text (not tags inside of wickets) between the open body tag and the close body tag. Using my sample code, Hello there. This is my first page! appears on the webpage. The background of the page is white and the text is black.

Sample webpage

The best way to learn HTML is for me to show you how it is done. Watch the videos on how to make a webpage. Be sure you have your sound turned on because I explain a lot of the what and why of Web design.



Assignment: First Page

Directions: Download the assignment from itsLearning and follow the step-by-step instructions.

Assignment: Second Page

Directions: Download the assignment from itsLearning and follow the step-by-step instructions.

Assignment: Web Design Project

Directions: Build a small website on a topic of your choice using HTML5 and inline CSS. The website will include 3 linked pages, formatted text, a list, heading levels, externals links, images, color, and a horizontal line. Download the assignment for itsLearning. When you are finished, upload all of the .html files along with your picture files.

Certified Internet Web Professional logoIf you enjoyed this unit, especially creating Web pages, consider joining me for the rest of the Digital and Web Design pathway. Introduction to Digital Technology is the first course. The second course is Digital Design followed by Web Design. This pathway leads to certificate in Site Development Associate through Certificated Internet Web (CIW) Professional.


Web Design Skills

Having great web design skills is a requirement for more than just getting a job as a web designer. Try and think of a company that doesn't have a web presence? Well maybe the mom and pop shop in a small town but most businesses from small entrepreneurs to big business have websites and using social media and Web 2.0 to create and maintain their electronic brand and attract customers.

You may also need web design skills to brand yourself. Even if your career choice is not web design, you will probably want to create an electronic portfolio to showcase your skills or market yourself.

Assignment: Question for Thought 2

Directions: Describe the impact of having web design skills to build skills for your chosen profession (i.e. Chef or Nurse). Your essay should be about 100 words. Post your essay directly in the itsLearning textbox. Do not attach a separate document and be sure to proofread.


Resources

If you are having problems viewing this page, opening videos, or accessing the URLs, the direct links are posted below. All assignments are submitted in itsLearning. If you have having problems, contact Mrs. Rush through the itsLearning email client.

The World Wide Web video: http://shows.howstuffworks.com/stuff-of-genius/40358-the-stuff-of-genius-world-wide-web-video.htm

Birth of the World Wide Web: http://www.computerhistory.org/revolution/the-web/20/385/2221

What is the World Wide Web: http://www.youtube.com/watch?v=J8hzJxb0rpc

What is the WWW? review: https://www.examtime.com/p/1003652-What-is-the-WWW--quizzes

Review: https://www.examtime.com/en-US/p/913126

Web Design: 20 Hottest Trends To Watch Out For In 2014: http://www.hongkiat.com/blog/web-design-trends-2014/

20 Examples of Bad Web Design: http://www.topdesignmag.com/20-examples-of-bad-web-design/

Way Back Machine: https://archive.org/web/web.php

Transcript: http://mrsrush.net/web/index.pdf


Credits

Transcript of this lesson