Topic #1 – Before You Roll Your Eyes

One of the great challenges about teaching and learning technology is that teachers and students are usually coming from two very different points of view. In many cases, students already know more than their teachers. But not always. In some cases, students only think they know more than their teachers. So before your web design teacher gets into any of the details about this lesson, the time has come for students to share what they think they know about the topic. We’re going to turn off our screens and listen for students to answer the following questions.

Begin by turning to your team and seeing if anyone can answer these questions. You have three minutes to get through as many of them as you can.

• What is the Internet?
• What is the Web?
• What is a Web Site?
• What is a Browser?
• What is Social Media?

Topic #2 – The Internet

The Internet is a massive network of computers connected to each other all around the world. It began as a student research project that the government set up after World War II and then ignored. A group known as the Advanced Research Projects Agency (ARPA) connected a few college computers together and then figured out how to make those computers communicate with each other and pass information back and forth. Originally, the group called their project the ARPANET, but by 1982, they were already starting to call it the Internet.

Topic #3 – The Web

The Web, also known as the World Wide Web, or WWW, is a space on the Internet where people can go to share information by agreeing to use a certain kind of basic code known as HTML. After the Internet became official in the 1980s, the only people in the world who had access to it were people in the schools and the government and the military. One of these people was Tim Berners-Lee, an engineer who used the Internet to share ideas with other engineers. On August 6, 1991, he finished building an open space on the Internet that he called the World Wide Web (www) and then published an explanation of what he had just designed and how it worked. He shared his new creation, which he called “The Project,” with anyone who had access to the Internet. Here is the first website ever created.

Topic #4 – Web Pages

A web page is a hypertext document that offers a visual presentation of content and information. When Tim Berners Lee created the World Wide Web and shared his idea with everyone connected to the Internet, he was doing something that had never been done before. He was creating pages that could link back and forth to each other through clickable words. The language he used to created these pages was HTML, or Hypertext Markup Language. So any page written with HTML is considered a web page.

But as you already know, a web page, like the one you’re looking at right now, has everything from colors and shapes to images and videos. That means a web page requires more than just a coded language. It requires a few things to work together with that coded language. Consider the photographs you take on your phone or your personal camera. Every image and every video you take is a file that takes up space in a folder somewhere on your phone. The same is true of everything that you see on a web page. The only thing holding these images and colors and shapes together is a code written with HTML. Which means, basically, that when you look at a web page, you are looking at a bunch of files from a bunch of folders all tied together through a code.

You might even say that a website (below) is nothing more than a bunch of files and folders connected together through a code.

Topic #5 – Web Sites

A website is a central location for related web pages. For example, when you arrive at k12digitalcourses.com, you arrive at a page with a black bar across the top, an image in the background, some links across the middle, and a video near the bottom, but that page is also the central location for finding all the other related pages for K12 Digital Courses. If someone asked you to go to a place where you could find a bunch of six second videos, you would probably go to the “site” known as Vine. If someone asked you to go to a place where you could search for information or images, you would probably go to the “site” known as Google or Bing. These are “sites” because they are central locations for a specific purpose with other related web pages.

There are three main structures that determine how someone will experience or navigate through a website.

1. Linear Structure

   Any website that is designed for visitors to move logically from one page to the next is known as having a Linear Structure because there is an understood order for all of the information that is presented. Most of this course website could be classified as linear because students go from lesson to lesson, rather than jumping around to unpredictable pages. A small website with five or six pages would also be called linear because there isn’t much to it, but the information will probably be easy to find by moving from page to page. Here is an example of a local website with a Linear Structure.

2. Hierarchical Structure

   Any website with a Hierarchical Structure is usually a website that has a ton of pages and most of them are not visible from the Home Page. You have to dig down from one page to the next page to the next page to find the specific page you’re looking for. Think of a Hierarchical Structure as being the kind of website with sections and subsections and subsections below those. The kind of website with lots of information and most of it buried in the website under other pages. Big corporations usually have these kinds of sites. Here is an example of a familiar and local website with a Hierarchical Structure.

3. Random Structure

   Most websites have a combination of linear and hierarchical structures, but a website with a Random Structure means the content and the information on that site has no particular order. This might be true of a website that is trying to achieve many things and doesn’t necessarily have one central theme. It also means the creator of that site follows no particular rules and has no restrictions. Most users on those sites do not enjoy their experience because it’s difficult to follow the design and the information is a little chaotic, but it gives more freedom to the designer. Here is an example of a website with a Random Structure.

4. Other Structures

   While a lot of web designers focus on designing their sites using one of the main three structures above, the two most popular types of websites are social media sites (for sharing) and search engine sites (for searching). Almost always, these sites have their own type of design and their own type of structure that depends more on the user than the designer.

Topic #6 – Browsers

The only way to access web pages and web sites on the World Wide Web is to have a browser like Chrome, Firefox, Edge, or Safari. That’s because a browser is a web application used to access content on the web. There are a few other browsers outside these main four, and one that we’ll try in a moment, but for the most part, everyone accesses the Web using a browser that they are most comfortable.

Topic #7 – Four Quick Web Activities

1. Activity #1 – Managing Your Own Internet Connection
2. Activity #2 – Exploring a Source Code
3. Activity #3 – Saving our Lesson Page to the Desktop
4. Activity #4 – Trying out the Vivaldi Browser

Topic #3 – THE BASICS OF A WEB PAGE

By this time, you should know that the Internet is a network that connects computers together all around the world and that the World Wide Web is just a space on the Internet where people share information. Well, webpages and websites are one way of sharing information on the web. Whenever you open up Notepad and save a new page with HTML, you are creating a file that sits inside of a folder and takes up space. Even if that page has images or videos, those images and videos are ALSO just files sitting in a folder somewhere. So in the end, every single website in the world is just a collection of files and folders.

Topic #4 – LOCAL FILE PATHS

Files on the World Wide Web can be seen by anyone in the world. But most of the files we create (even Microsoft Word documents or PowerPoint Presentations or photographs) are just sitting somewhere in a folder on our computer all by themselves. In other words, the only people who can see those files are people on that computer. We call these local files and local folders because they are in a very specific area. In the same way, you might tell someone in another state that you live in a local area called Longwood, Florida or Seminole County.

But finding a local file means going through a series of local folders. For example, if you were told to go to your “misc” folder, you should know by now that this means you have to open your U:Drive, then open your WebDesign folder, then go into your “misc” folder. In other words, you could follow a simple path to find a specific file. This is what we call a “file path.” In fact, your File Path might look something like this.

Topic #5 – GLOBAL FILE PATHS

When you publish a page to the World Wide Web, remember that the page itself is still just a file. When you publish that file (or page), you are putting it into a folder on the web that others can see if they know where to go. And similar to local files in local folders, there is a path. Any file path on the web is known as a Uniform Resource Locator, or URL. Some people just call it a web address. The only thing YOU need to know is that a URL is about a file’s LOCATION. And a URL looks like the link at the top of our lesson today:

www.milweewebdesign.com/1-5

Topic #5 – THE URL DOMAIN

Remember when we said that the World Wide Web is just a big space on the Internet where people share information? If that’s true and someone wants to share information in that big space, then they have to claim a section of that space. This is what we call the web domain. Just think of it like a king who rules over a kingdom. In that world, the kingdom is a large space that belongs to the king just like milweewebdesign.com is a small section of space on the World Wide Web that belongs to your teacher.

When someone decides to claim a section of space on the World Wide Web, they purchase a web domain. And it’s usually not very expensive (between $7 and $12). Once they purchase a little bit of space to share information (a domain), that’s when they upload or transfer their files and folders onto the domain. Each of the pages are written with some kind of Hyper Text Markup Language (HTML), which is why you see HTTP:// at the beginning of most web addresses. The HTTP stands for Hyper Text Transfer Protocol, which is a fancy way of saying the browser can pull up and translate pages that were written with HTML.

Topic #6 – ORGANIZING DOMAINS

The World Wide Web organizes websites by their domain category. For example, domains that end in .edu belong to places of education like schools and colleges. Domains that end in .gov belong to the government. Domains that end in .org usually belong to an organization. And so on. Sometimes web designers call this last part of the domain an extension or a suffix because it comes at the end (.com, .ca, .mil, etc).

Topic #7 – BREAKING DOWN A URL

On the Milwee Middle School website, there is a page that shows directions to our school. If you look carefully near the top of that page, the browser shows this URL:

www.milwee.scps.k12.fl.us/Home/QuickLinks/AboutOurSchool/SchoolDirections.aspx

The page with the map and the mission statement and all those links is still just a single page on the school website, but it is also a file called “SchoolDirections.aspx” located inside of a folder called “AboutOurSchool.” And the “AboutOurSchool” folder is inside of another folder called “QuickLinks.” And the “QuickLinks” folder is inside of another folder called “Home.” And the “Home” folder is on a web domain called www.milwee.scps.k12.fl.us. Those forward slashes ( / ) are just like the little arrows in your local computer and they simply mean folder.

Challenge #1 – Folder Setup

Since the web is based on files inside of folders, then we have to create a few folders to work with throughout the semester. Follow the steps below with your teacher:

1. Step #1 – Go to your U:Drive
2. Step #2 – Create a New Folder called “webdesign1” (lowercase)
3. Step #3 – Go into your “webdesign1” folder
4. Step #4 – Inside of your “webdesign1” folder, Create a New Folder called “img” (for images)
5. Step #5 – Inside of your “webdesign1” folder, Create a New Folder called “pgs” (for pages)
6. Step #6 – Inside of your “webdesign1” folder, Create a New Folder called “msc” (for miscellaneous)
7. Step #7 – Inside of your “webdesign1” folder, Create a New Folder called “css” (for style sheets)
8. Step #8 – Click on “view” at the top of your folders, change the layout to “Extra Large Folders”

Challenge #2 – Text Editors: Notepad & Notepad++

In order to create a web page that you can look at on a browser, you have to use the right kind of program, known as a text editor or an HTML editor. On your computer, there are two of these programs: Notepad and Notepad++. For the first few weeks, we will be using Notepad to write all of our pages with HTML. Then, after you get used to Notepad, we will graduate up to the Notepad++ program. Go ahead and find Notepad, then open it up.

Challenge #3 – Notepad Settings

At the top of your Notepad program, we are going to change a few things. Follow the steps below with your teacher:

1. Step #1 – Type a long sentence into your Notepad so that it goes off the page.
2. Step #2 – Go to Format > Word Wrap
3. Step #3 – Go to Format > Font (Readable) and Size (20-26)
4. Step #4 – Go to File > Save As “2-1_firstpage.html” in your “pgs” subfolder
   (Follow the Teacher’s Instructions)
5. Step #5 – Type out the following code

Challenge #4 – Coding with the Teacher