Oregon State University

CS 101: Applications and Implications of Computers

Oregon State University, College of Engineering

Chapter 3 ~ How the Internet Works

⬆ Shiftrefresh Shift-Refresh this page to see the most up-to-date instructions.

In this chapter, you'll be synthesizing rather than simply summarizing from a set of movies provided by Code.org and other sources. Synthesis writing will prepare you for future BACC Synthesis courses.

This page will load slowly because it is serving several movies.

After the writing exercise, you'll hand-sketch a diagram of the internet's components (the way you think it works). Then, you'll use vector tools to create a diagram eletronically based on the actual components and the actual way they work together.

Research and write about Internet.

3.1 View movies from Code.org and write about how the Internet works.

What is the Internet and how does it work? ~ 3:44
The Internet: Wires, Cables, and Wifi ~ 6:40
The Internet: IP Addresses and DNS ~ 6:44
The Internet: Packets, Routing, and Reliability ~ 6:26
The Internet: HTTP and HTML ~ 7:06
HTML, CSS, JavaScript Explained ~ 4:00
The Internet: Encryption & Public Keys ~ 6:40
Images, Pixels, and RGB ~ 5:49
  1. Launch your word processor.
  2. Open the What I’ve learned about computing document that you created in the previous chapter. Save the file with a new name so it reads What I've Learned First and Last Name Ch3.
  3. Synthesize these key concepts related to how the Internet works:
    • In the first paragraph, write about Undersea Cables, Fiber Optic and Copper Cables, and Radio waves.
    • In the second paragraph, write about HTTP, HTTPS, SSL, and TLS.
    • In the third paragraph, write about Packets and Routers.
    • In the fourth paragraph, write about Internet protocol, Domain Name Servers, and Web Servers.
    • In the fifth paragraph, write about Hypertext Markup Language (HTML), Cascading Stylesheets (CSS), JavaScript, and Browsers.
    • In the sixth paragraph, write about Images on the Web.
  4. Write in complete sentences in the third-person style and include the movie title in the paragraph it relates to. Review Chapter 2's article about the Writing Requirements and Samples.
  5. To make the hyperlinked movie titles, right-click on the title below the movie and choose Copy link address, then, select the name of the article in your paragraph and Ctrlk or k to add a hyperlink. In the same way, hyperlink each of the movie titles in each of your paragraphs.
  6. Select important keywords in each paragraph and apply the Bold style.
  7. Check and correct grammar and spelling using the built-in functions, Grammarly plugin, or LanguageTool Chrome extension.
    • Click the Review tab on the ribbon. Click Spelling or Spelling & Grammar.
    • Click Tools > Check Spelling > Spell check. A box will open in the top right corner.
    • ; or choose Edit > Spelling and Grammar > Check Grammar With Spelling (a checkmark indicates it’s on), then choose Check Document Now.

Group Discussion

After listening to the videos in the previous lesson, you should have a basic understanding of how the components of the internet work together to provide us with internet service! Use that knowlege to create a diagram of how you think it works.

3.2 Sketch the connections between Internet technologies.

With a pen (or dark pencil) and plain sheet of paper in vertical position, sketch your own idea of how devices connect to create the Internet. Ask yourself:

  • How many shapes are needed to represent devices/technologies?
  • What are those devices called?
  • What kinds of lines can be used to note signals versus cables?
  • How should each shape be oriented on the canvas to avoid confusion?
  • How can color be used to reduce confusion?

3.3 Take a high-quality photo of the diagram.

  1. Adjust your phone's camera settings to use the lowest resolution image (not the highest; it will be too big for the discussion).
  2. Photograph the diagram using your phone.
    • Ensure the paper is well-lit and that no shadows are falling over it.
    • Ensure that the flash does not white-out parts of the image.
    Retake the photo if it has a dark shadow and/or white glare.
  3. Rotate the photo if it is sideways.
  4. Use the camera's built-in cropping tool to crop right up to the edges of the drawing (not the edges of the paper but the diagram's outer lines).
  5. Using the camera's Adjustment settings, revise the contrast so that the dark areas are lighter or the faint text is darker.
  6. Save the updated copy and move it to your CS 101 folder on the OSU Google Drive, iCloud, or SharePoint/OneDrive. Try one of these tutorials if you need assistance: Android phone or iPhone.

3.4 Post your revised diagram photo.

  1. Click on the Chapter 3 ~ Hand-sketched Diagram Photos group discussion in Canvas.
  2. Click the more_vert 3-dot More menu to see the Rubric.
  3. Compare your work to the Rubric to ensure you've edited the photo to meet requirements.
  4. Insert your revised photo of the diagram in your group discussion thread and save.
    • Click the Image Embed icon on the Discussion editing toolbar.
    • Choose the Canvas tab then the My Files folder.
    • Click the Upload File button to locate your file.
      Upload images to My Files to embed them in discussion threads.
  5. Once your groups' images are uploaded, use the Discussion Rating system to choose your favorite diagram sketch. Click the thumbs-up icon on your favorite submission.
  6. Reply to another student's thread with a message about one or more item that can be added to the drawing...what is missing?  

Vector diagram how the Internet works.

Print these instructions.

The following procedure has many steps, which are perhaps easier to follow when you print and check them off as you go. Hide/close + the previous section to avoid printing too many pages.

If you've manipulated photos on your phone (or "Photoshopped" a photo), then you were manipulating pixels in a red, green, and blue (RGB) environment (where mixing the three colors of light makes white). Those photographs (pixels in varying tints and shades of millions of colors combined together to make an image) can get blurry (or pixelated) when they are compressed so that they can load very quickly for display on a web page.

An alternative to pixel-based imagery is vector-drawn imagery, where the images are derived with mathematical Bezier curves. These 'line art' drawings scale to larger or smaller drawings without losing their clarity. We'll use this method of image creation in this lesson.

Using the knowledge you gained in steps 3.1, you will draw a rudimentary diagram which illustrates how the internet works. Using simple rectangles, circles, and triangles, and various lines, you'll show how a website in a browser on an electronic device has an address which points to a specific block of a web server, which is accessed via fiber optic, cellular, and satellite technologies. You'll label each item and show which way the transfer of data is moving.

3.5 Set up a Google Drawing file.

This lesson will help you gain experience drawing with vector tools, which is a skill often needed in the workplace to illustrate a concept, diagram an organizational system, or demonstrate a procedure.

Navigate to your OSU Google Account's Drawing application. You can launch the application by clicking the link in the previous sentence, or by typing drawings.google.com into the search bar.

  1. Rename the blank Google Drawing file as internet-diagram-username. Replace -username with your ONID username.
    Change the Google Drawings filename.
  2. Use the folderfolder icon at the right of the file name to move the file to your CS 101 folder.
  3. File > Page Setup to customize the default page size from 10 by 7.5 inches to 800 by 400 pixels. First, change the units from inches to pixels, then change the values. Inches are for printing and pixels are for viewing digital information (those tiny dots of light that render text, images, and video on a screen).
    Default Google Drawings page set up size in inches Customized Google Drawings page set up size in pixels
    If you use Chrome browser on Windows, you may not have the option of changing the page setup size, which is fine.
  4. Click OK

3.6 Draw shapes and text on the canvas.

Notice that the blank file has a checkerboard pattern on it. This is referred to as the 'canvas'. The checkerboard represents a transparent surface.

  1. Select the toolbar's Shape > Shapes > Rectangle tool.
    Select the rounded rectangle tool.
  2. On the top left corner of the canvas, click and drag the rectangle tool on the canvas. Unclick when you have made a shape that is roughly half-an-inch tall and wide, like this:
    Draw an 8x8 rectangle.
    Click to select the shape. Changes to the shape's properties will only happen when the shape is selected. You'll know it is selected when you see the little square handles on the corners and sides. Use those handles to stretch the shape. Use the top handle to rotate a shape.
  3. Double-click in the middle of the shape to edit the text. Type Website URL.
  4. Choose properties from the Toolbar to change the background color to light purple 1, the line size and color to 3pt orange, and text font, size, and color to Tahoma 11pt white, like this:
    Color, line, and font changes of a shape. Choose Light Purple 1 from the color palette.
    If the Tahoma font is not listed in the dropdown fonts menu, then click on More Fonts menu to locate it from the longer list.
  5. Ctrlc or c to copy the rectangle, then Ctrlv or v to paste it 3 times.
  6. Move the new rectangles so you can edit the text. Update the name in each by double-clicking on the shape. Label the second shape as Browser or app, the third shape as Wifi-enabled device, the fourth shape as LG4 or LG5-enabled device.
  7. Choose properties from the Toolbar to change the URL text to bold cyan. The URL is the focus of the diagram, so highlighting it with a brighter color will help our eyes track its path.
  8. Adjust the rectangle sizes to fit the text. Move the selected rectangles to the top left edge of the canvas by dragging or with the arrow keys on your keyboard.
  9. Using either the Arrange > Order > Bring to the front menu, the Right-click, or CntlShift, order the shapes so that the Website shape is on top of the Browser shape which is on top of the Wifi shape. Move the LG4 shape to just below the group of three, like this:
    A ordered set of color rectangles.
  10. Ctrlc or c to copy one of the rectangles, then Ctrlv or v to paste it 2 times.
  11. Select both by dragging the cursor over both of them, or Shiftclicking on each. Move the rectangles to the right of the other four shapes. These rectangles represent the technologies that allow your devices to connect to the internet inside a building. Choose properties from the Toolbar to change the background of each to light blue 1. Label the first shape as Router and the second shape as Modem. Arrange them to the right of the first set of purple shapes, with the Router on top and the Modem on the bottom, like this:
    Router and Modem rectangles arranged vertically.
  12. Click and drag the circle shape on the canvas with the Shift key pressed. Unclick when you have made a shape that is roughly half-an-inch square, like this:
    Draw a 10x10 circle.
    This shape represents a satellite dish. Choose properties from the Toolbar to change the background color to light blue 1. Move the circle so it sits to the right of the modem rectangle. Double-click on the shape to change the label to Dish and Tahoma 11pt white.
  13. Click and drag the cross shape on the canvas. Unclick when you have made a shape that is roughly one-and-a-half inches wide and half-an-inch tall, like this:
    Draw and rotate a cross shape.
    This shape represents an orbiting satellite craft. Click on the rotating handle at the top and tilt the shape to the right a bit so it appears to be orbiting everything below it. Click to select the shape and change the background color to light blue 1. Move the cross so it sits snuggly in the top right corner of the canvas. Be sure the orange lines do not spill over the canvas or they will get cut off when saving the file later. Double-click in the shape to change the label to Satellite and Tahoma 11pt white.
  14. Click and drag the pentagon shape on the canvas. Unclick when you have made a shape that is roughly half-an-inch wide and tall, like this:
    Draw a 4x4 pentagon.
    This shape represents the building that receives the undersea cable and switches it to the local cable network. Click to select the shape and change the background color to light blue 1 and the line to 3pt orange. Move the pentagon so it sits below dish circle. Since the shape is too small to allow more than one character of text, click and drag the Textbox tool beside it. Click into the textbox and type Switching Station. Select all Ctrla or a the text and change it to Tahoma 11pt dark blue 1.
  15. Click and drag the equilateral triangle tool on the canvas. Unclick when you have made a shape that is roughly one-quarter-inch wide and an inch-and-a-half tall, like this:
    Draw a 3x10 triangle.
    This shape represents a cellphone tower. Choose properties from the Toolbar to change the background color to light blue 1 and the line to 3pt orange. Move the triangle so it sits to the between of the LG4 rectangle and the Switching Station pentagon. Leave lots of room between these shapes. Since the shape is too thin to allow more than one character of text, copy the dark blue Switching label and paste it beside the triangle. Change the text to Cellphone Tower
  16. Click and drag the can tool on the canvas. Let go of the click when you have made a shape that is roughly half-an-inch wide by an inch tall, like this:
    Draw a 6x8 can.
    This shape represents a web server computer provided by an Internet Service Provider (ISP).
    Click to select the shape and change the background color to dark blue 2, the line to 3pt orange, and the text to Tahoma 11pt white. Move the can so it sits under the Modem rectangle. Click into the shape and type ISP Web Server.
  17. Click and drag the cube tool on the canvas. Let go of the click when you have made a shape that is roughly one-quarter-inch square, like this:
    Draw a 4x4 cube.
    This shape represents the portion of the web server that hosts the website which points to the Internet Protocol number and Domain Name of the URL requested by the website in the first rectangle you made earlier. Click into the shape and type URL.
    Choose properties from the Toolbar to change the background color to dark blue 2, the line to 3pt orange, and the text to Tahoma 11pt cyan bold (to match the other URL label's color). Move the cube so it sits on top of the web server can's bottom left corner, like this:
    Order the cube so it sits on top of the can.
    Ctrlc or c one of the other blue textboxes, then Ctrlv or v paste it. Move it under the Can. Click into the textbox and type URL matches IP address and domain name.

3.7 Draw lines and text on the canvas.

  1. Click and drag the curved connector line tool on the canvas. Unclick when you have made a line that is roughly 10 checkerboard boxes wide.
    Draw a 10 unit curved connector line.
    This line represents Wireless Fidelity (wifi) radio frequency signals. Choose properties from the Toolbar to change the line to 2pt dotted orange and each end to an arrow.
    Line properties for color, size, style.
    Move the left endpoint/arrow to touch the right side handle of the Wifi rectangle. Move the right endpoint/arrow to touch the left side handle of the Router rectangle.
    A shape connected to another shape with a dotted line and label.
    Shape and line handles connect and stretch. Now, if you move either of those rectangles, the arrow should move along with it.
  2. Select, Ctrlc or c to copy the existing Cellphone Tower label, then Ctrlv or v to paste it onto the canvas. Move it to just above the new wifi line. Change the label to Wifi.
  3. Select, Ctrlc or c to copy the existing Wifi connector line and its label, then Ctrlv or v to paste them onto the canvas. Update the label text and arrow connections using the same procedure as the previous step for these shapes:
    • The right side of the LG4 rectangle to the top of the Cellphone Tower triangle and the top of the Cellphone Tower triangle to the side of the ISP can. The text for these two lines should read Radio Frequencies.
    • The right side of the ISP can to the bottom of the Satellite cross. The text should read Radio and Microwave frequencies.
    • The bottom of the Satellite cross to the right side of the Dish circle. This line's label can share the previous label.
  4. Select, Ctrlc or c to copy one of the existing connector lines and its label. Change the line's style from dotted to solid. Ctrlc or c to copy the solid line, then Ctrlv or v to paste it onto the canvas 5 times. Do the same for 5 new labels. Update the label text and arrow connections for the remaining shapes so they look like this:
    Connect solid curved lines to their corresponding shapes.:
    • The bottom side of the Router rectangle to the top of the Modem rectangle. The text should read LAN Ethernet, which refers to a Local Area Network (LAN).
    • The bottom side of the Modem rectangle to the top of the ISP can. This text should read Copper and fiber Optic Cable.
    • The right side of the Modem rectangle to the left side of the dish circle. This connection shares the previous label.
    • The top of the ISP can to the bottom of the Dish circle. This text can share the LAN Ethernet or Radio and Microwave Frequencies label.
    • The right side of the ISP can to the left side of the Switch pentagon. This line doesn't need a label.
    • The right of the Switch pentagon to the right edge of the canvas. This text should read Undersea cable connecting countries.
  5. The cube label, which you can create by copying another label, should read URL matches IP address and domain name.
  6. And, finally, use the Toolbar's Line > Scribble tool to draw a wavy diagonal line from the right side of the canvas to the bottom side to represent the seashore...where land meets the sea. Change it's thickness to 2pt or 3pt, the color to green and style to dashed, like this:
    Draw a scribbled line to represent the shoreline.

Doesn't your diagram look great!

When you are finished, the canvas should include all of these components with their corresponding colors, sizes, fonts, and styles arranged so they are legible and clear:
Finished diagram of how the Internet works.

3.8 Output the drawing file.

The drawing file has been automatically saving itself to your Google drive.

  1. To ensure it is saved in a folder for this course, click the folder icon next to the file name. Change its location to a folder called CS 101 on your drive. You may need to make a new folder if you don't already have this folder on the drive.
  2. In addition to this working file, you'll want to save it as a PNG File so we can add it to our word processing document later. Choose File > Download as PNG file.
  3. The file normally saves to the same folder as the Drawings file. But if it did not, use the Search bar to locate it. Move it to a CS 101 folder on your Google Drive.
  4. For convenience and to create a new backup, Download the .PNG file to your local hard drive, such as C: drive's Documents > CS 101 folder.
  5. If you double-click on the .PNG file, it may display with a black background, which means it is transparent, as it should be.

Need the Instructor's help?

If you have questions about completing the technical skills or the writing, you can share your file with the instructor.

  • Share a Google file:
    1. With your file open, click the Sharing button at the top right of the screen. Or, if the file is not open but listed in the Drive, right-click it to choose the Share menu.
    2. Click the Get Link box to update the OSU Settings and copy the link:
      Change settings so that only OSU people can view. Copy the link.
    3. Ignore the Share with People and Groups box for this course.
      Don't share your files this way for this course.
    4. Paste the URL into the Canvas Inbox message or Assignment Comment box, along with your questions. Note which step number you're stuck on.
  • Share a Microsoft file:
    1. Login to your OSU OneDrive account from the browser.
    2. Drag the file from your hard drive to the OSU OneDrive file list in the browser to transfer it there.
    3. Beside the file name in the list, click the Share icon:
      Click the Share icon for the file to change the settings.
    4. Choose the settings provided in the screenshot below:
      Change settings so that only OSU people can view it without editing or downloading.
    5. Copy the link so you can provide it to the instructor or in the Assignment Comment box.
      Click the Copy Link icon. Select and copy the link.
    6. Paste the URL into the Canvas Inbox message or Assignment Comment box, along with your questions. Note which step number you're stuck on.

Create a web page.

Print these instructions.

The following procedure has many steps, which are perhaps easier to follow when you print and check them off as you go. Hide/close + the previous section to avoid printing too many pages.

In this section, you'll use your word processor's built-in web page-making feature. (There are more elaborate ways to create web pages which you can learn by taking OSU's CS 195 Web Design class.) Then, you'll upload it to your OSU ONID web server...all students and faculty have a public server space where they can share files with the world.

3.9 Add the internet diagram to the word processing file.

  1. Launch your word processor.
  2. Open your Chapter 3 What I've Learned file.
  3. On the 3. How the Internet works page, place your cursor under the last paragraph of your section 3 writing, then:
    • Insert > Picture and navigate to your Google Drive's or C: CS 101 folder to choose it.
    • Insert > Image and navigate to your Google Drive's or C: CS 101 folder to choose it.
  4. The image should fit nicely under the text. If not, drag it underneath the text. Because it is large, do not stretch it or wrap the text.
  5. The light-gray background of your document should show through the diagram. If the image background appears black, then write the Instructor for assistance.
  6. Since visually impaired people cannot see the diagram, add an alternative description so a screen-reading application can describe it to them, like this:
    • Right-click on the diagram and choose Alt text. If your version of Word does not have this option, then in the Format Picture pane, click the Alternative Text tab and edit the field. Describe your diagram in the Title field. Click Close.
    • Right-click on the diagram and choose Alt text. Describe your diagram in the Title field.
  7. Save as the file with CtrlShifts or Shifts, and rename the file What I've Learned NAME Ch__. Replace NAME with your name. Replace __ with the chapter number. Next, create a PDF file:
    • From the File menu, choose Save As > PDF > Standard (for electronic and printing distribution).
      If you are using Word for Macintosh, then choose PDF > For Printing.
      Or, Ctrlp to Print a PDF file. Choose PDF from the list of printers.
    • From the File menu, choose Download as PDF.
    • From the File menu, choose Export to... and choose PDF.
      OR, p to Print a PDF file. Choose PDF from the list of printers.
  8. Check to confirm that hyperlinks work.
  9. Move all files to this course's folder in the Documents folder of your hard drive.

3.10 Save your word processing document as a web page.

Businesses often need documents to be readable in a universal format. Two common formats are Portable Document Format (PDF) and HyperText Markup Language (HTML). HTML is the universal language of the Internet's web pages. Most web pages use the .htm or .html file extension in addition to 'tags' or 'code' that are added to text, images, and movies in a document to help browsers understand and render those items.

When you look at a webpage, the browser address bar gives you clues to the web server, such as the favorites icon, the webpage title, the security protocol, the subdirectory, the domain name, the extension, the account name, folder names, and file names. http://people.oregonstate.edu/~username, notice the following components of the browser's address bar:
Components of the Tab and address bar of a browser.

So that your new document can easily be read by a browser, learn to export/save your word processing file to HTML:

  • In some versions of Word, File > Export > Change file type > Single File Website > Save As > Web Page Filtered.
    In other versions, try File > Save as > Web Page (html).
    Name the resulting file what-i-learned-about-computing.html. The hyphens are the best way to separate words in a file name. Choose to save it in your CS 101 folder.
    File and folder exported from Word.
  • File > Download as > Web Page. Choose Web page (.html and .zip) and save the .zip file to your CS 101 folder. Double-click on the .zip file to unarchive it and view the contents. You may have to move the .html file and images folder out of the .zip archive into the CS 101 folder.
    The contents of the web page zip file include an HTML file and images folder.

If you open the resulting .html file in a text editor, you'll see the HTML code. If you open that file in a browser, then you'll see the headlines, paragraphs, text, and images displaying nearly as perfectly as you typed it into your word processor.

3.11 Extra Credit: Transfer the file and folder to your web server.

So that people around the world can see your new .html file via the internet, learn to map your hard drive to your ONID web server. Once you transfer the file from the hard drive to the web server, everyone else will be able to see it! Businesses often need files transferred to the internet to share with their customers. The transfer can happen in many ways but mapping a drive is the easiest.

  1. If you are off campus, you must connect to the OSU Virtual Private Network (VPN) first, to improve security of the transfer.
  2. Map the web server drive to your hard drive:
      1. Launch a new Explorer window.
      2. Click on the This PC from the list at the left, choose the Computer Tab, choose Map Network Drive from the Map Network Drive menu.
        Map the ONID drive to your computer.
      3. From the Drive menu, choose the Y drive and type this in the folder field: \\onid-fs.onid.oregonstate.edu\USERNAME. * Change USERNAME to YOUR ONID username.
        Map the ONID drive to your computer.
      4. Click Finish.
      5. When prompted for your credentials, type your ONID email address: username@oregonstate.edu and password.
      6. Now, to view that drive and transfer files to it, look at the Explorer window again and scroll to This PC to see it listed. Click on it to view the public_html folder.
        Map the ONID drive to your computer.
        Map the ONID drive to your computer.
        Map the ONID drive to your computer.
      1. Click onto the Finder. From the Finder menu, choose Preferences and click the Connected Servers button to activate it.
      2. From the Desktop, click the Go menu and choose Connect to Server.
        Map the drive through the Desktop's Go menu.
      3. Type smb://onid-fs.onid.oregonstate.edu/public_html into the empty field. OR, instead of public_html, you may need to type your ONID username.
        Type the address correctly.
      4. Click Connect to view that drive. Type your ONID username and password when prompted.
      5. Locate the server in the list of drives on the left of the Finder window:
        The public mapped drive now shows in your Finder list. The drive will be empty until you add files to it (next step).
  3. Drag your new .htm (or .html) file and the folder that came with it into that public_html folder. (Don't transfer the .zipped folder if you're suing Google; unzip the .zip archive first.)
  4. When the file and folder have been transferred from your hard drive to your ONID web server, add a new Chrome browser tab and navigate to your ONID web server URL: http://people.oregonstate.edu/~username.
    • Click on the filename of the webpage listed in the directory.
    • Does the webpage launch?
    • You should see the .html page and the address will look something like this: people.oregonstate.edu/~username/What%20I%e2%80%99ve%20learned%20Username-ch3.html.
    • If the file does not show up, review the previous steps and check again. If you get an error message, skip to step 6 below.
  5. Do the images show up when you scroll through the document? The .html page will be looking for those images in that images, Images, or What I learned... folder.
    1. You may need to edit the .html file so that folder is properly included in the code. You may have to create an images folder on the ONID web server so you can upload the two .PNG files separately.
    2. If the image tag inside the code view does not properly source the image folder and file, then Edit the html file and search for <img src=". Type the path for src so it reads the folder and file name. Be mindful of upper and lowercase letters; they must match the exact folder and file name.
      Edit the html file to update the folder and file name of the image.
    3. If you have trouble getting the images to show up in the html file, write to the instructor to mention the problem. In your message, provide the platform and software/method you used. Also, provide your webpage URL.
  6. If you get an error message then use this tutorial to fix the problem:

3.12 Submit the assignment.

  1. Click on the Canvas Home button and scroll down to the Assignment.
  2. Click the Assignment link.
  3. Upload the What I've Learned... PDF file.
  4. Confirm that it uploaded.
  5. Check the TurnItIn Report for plagiarized phrases and sentences. Review how to use TurnItIn.
  6. Either edit or quote the TurnItIn Report's highlighted passages in your original file and resave the PDF file.
  7. Upload the newer version in the Canvas Assignment.
  8. If you did the Extra Credit web page assignment, copy the URL from step 3.11.3 and paste it into the Canvas Assignment Submission Details Commenting box.
    Submission details allows you to attach files in the Assignment screen in Canvas.

Back up to multiple sources

Earlier, you saved a copy of your work with a new name. Now, copy that backup to a different location, such as:

  1. Cloud drive such as Google Drive, Microsoft OneDrive, or Apple iCloud.
  2. A USB stick drive.
  3. Zip archive file.
  4. Turn on automatic backups.
    • Windows 10
      Learn to use the Windows File History feature to backup files to a new location.
    • MacOS
      Learn to use Time Machine for backup up automatically to external hard drive devices.

Because bad things happen to good people and their computers, you must back up every time you work on a project. Losing your work because of a technical glitch and lack of a backup will not provide you with a due date extension; it will only provide you with empathy.

Criteria to meet by the end of chapter 3

If you have questions about how to use any of the required technologies for this lesson or what the following criteria mean, please reread the relevant lessons, view the Zoom recordings, then ask the Instructor via the Canvas Inbox.

Check Canvas Home, Assignments, and Calendar for the most current Due date and time. The Available Until date and time constitutes a grace period, which can be used in an emergency, or if you are ill.

By the end of chapter 3, these items must be completed to earn full points:

Discussion

  1. Posted a legible, cropped, properly-oriented and optimized photo of a hand-sketched drawing of how internet technologies connect.
  2. Replied to another student's post with recommendations.

Writing

  1. First paragraph of Section 3 describes undersea cables, fiber optic and copper cables, and radio waves.
  2. Second paragraph of Section 3 describes HTTP, HTTPS, SSL, and TLS.
  3. Third paragraph of Section 3 describes packets and routers.
  4. Fourth paragraph of Section 3 describes internet protocol, Domain Name Servers, and web servers
  5. Fifth paragraph of Section 3 describes HTML, CSS, JavaScript, and browsers.
  6. Sixth paragraph of Section 3 describes images for the web.

Vector Diagram

  1. A diagram that illustrates how the internet works is under the sixth paragraph.
  2. Diagram is 800px wide and 400px tall.
  3. Diagram uses required font at size 11.
  4. Diagram uses blue and white labels for each shape and line.
  5. Diagram's URL label is the color cyan.
  6. Diagram uses purple, blue, and dark blue colors in the background of each shape.
  7. Diagram uses orange lines around each shape.
  8. Diagram uses dotted and solid curved connector lines between shapes.
  9. Diagram uses a green dashed line to represent the seashore.
  10. Diagram's components are well organized and easy to read.
  11. PDF file is free of plagiarism.
  12. PDF file is free of grammar and spelling errors.

Extra credit webpage file transfer and editing

  1. Extra Credit: The document's HTML file and image folder has been uploaded to the ONID web server.
  2. Extra Credit: The document's images display properly in the webpage.
  3. Extra Credit: The live ONID web address of the file was provided in Canvas.