Images come in many shapes and sizes. Every time you take a picture with your phone, the camera saves it as an image with a very specific size in a very specific way in a very specific place. That’s because images take up space. Depending on the kind of image, the size of the image, and location of that image, the way it looks might be very different. Your phone gathers all these files into thumbnails which are basically just little versions of the bigger photos. Kind of like Google Images and Bing Images and Yahoo Images.
Now that we know about copyright, the question is how we deal with all these available images on the web. Google and Bing and Yahoo make them seem so easy to grab. That’s a blessing and a curse. Grabbing images, or “image scraping,” is too easy. But even Google has started to change its rules about images. During this lesson, you’ll learn more about images on the web and how you can put them on a web page.
LEARNING GOAL #2: The Basics of HTML
Students will be able to design multiple web pages with HTML through the use of simple Text Editors.
Below is a list of codes that you are required to type out. When you finish typing them out, your job is to save the work, open the page with Chrome, and see if it matches the “Looks Like” image in the table below. If it does not, you need to go back through your code and fix your mistakes. If it looks right, simply raise your hand and ask to be checked.
Between Lesson 2.4 and Lesson 2.9, you are responsible for getting 4 out of 6 source codes completed for an A (3/6 = B, 2/6 = C, 1/6 = D, 0/6 = F). However, if you finish any of these codes early, just keep going because the more pages you build, the more prepared you’ll be for the opening project. Source Codes will be due by the end of Lesson 2.9.
Your first quiz of the semester will be on February 11. Below is a list of questions that could show up on your first web design exam. The teacher will give you a few moments to look over the questions and prepare yourself for a quick review. But everyone should be ready to be called.
After doing so many awful things during World War II, how did Germany recover?
Explain the difference between the Internet and the Web.
What was the name of the German coding machine that Alan Turing had to crack during World War II?
HTML is written with what three main things?
Can you identify Pearl Harbor, Japan, and the Soviet Union on a map?
Name three self-closing tags in HTML.
What is copyright?
Topic #2 – Raster Graphics
When you look at almost any image on the web and start to zoom in, it won’t take long to notice the squares and pixels that make up the color in that image. That’s because these images are known as Raster Graphics. Close up, you can see that they’re just made of little bits of color that some people refer to as a bitmap.
Raster Graphics come in many different forms, but there are only three main types of Raster Graphics that you’ll need to know about for this class. In fact, unless you plan on becoming a photographer or working with digital graphics, there are only three types of Raster Graphics that you’ll probably ever use: .JPG, .PNG, and .GIF. These are all called image file extensions.
JPG files are the most popular raster graphics because they can handle the most color per pixel space (about 16,000,000 colors). PNG files can almost handle the same number of colors as a JPG, but they allow for a certain level of transparency often found in logos and images that blend into the background. GIF files have become incredibly popular because of animation, but they hold the least amount of color (only 256 color options). Think about that for a moment. JPG and PNG files can use 16 million color options, but GIF files can only use 256 color options. Let’s talk about where you might find these images on a web page.
Students in Web Design II are given the opportunity to work with something called Vector Graphics, which basically means a graphic that isn’t made up of pixels. That means you can zoom in or out and not lose any quality from the image design. But you don’t need to know Vector Graphics. Because 99.9% of what you will use in this class and, outside of this class, what you will use at home and on your phone, are simply known as Raster Graphics.
Topic #3 – Experimenting with Images on a Web Page
Go into your “img” folder and create a new subfolder called “cfat”
The activity we just did is known as Image Scraping. But we did it slowly. And we only gathered up the images from a single page. That’s precisely what Image Scraping is. When someone wants to grab all of the images from a website, they scrape. They pull. And you might even argue that by doing this, they are stealing. The only reason we might say this isn’t stealing is because a person might only wish to experiment with the images they scraped. But if they were to gather them up and reuse them for their own purposes, that would begin to cross a line of copyright. Below is a video that shows how easy it is to scrape images from a web site.
Topic #5 – Experimenting with an Image Search
Go into your “img” folder and create a new subfolder called “abs”
Open up Google Images and Bing Images
Search for the words “Abstract Green” on both search engines
Wait for further instructions
Topic #6 – Coding Images on a Page
Open a new Notepad document and save it as “2-6_images.html”
Open the page with Chrome (it will be blank)
Create a split screen between Notepad and Chrome (both will be blank)
Images come in many shapes and sizes. Every time you take a picture with your phone, the camera saves it as an image with a very specific size in a very specific way in a very specific place. That’s because images take up space. Depending on the kind of image, the size of the image, and location of that image, the way it looks might be very different. Your phone gathers all these files into thumbnails which are basically just little versions of the bigger photos. Kind of like Google Images and Bing Images and Yahoo Images.
Students in Web Design II are given the opportunity to work with something called Vector Graphics, which basically means a graphic that isn’t made up of pixels. That means you can zoom in or out and not lose any quality from the image design. But you don’t need to know Vector Graphics. Because 99.9% of what you will use in this class and, outside of this class, what you will use at home and on your phone, are simply known as Raster Graphics.