Here is the Web Master

WEB MASTER

RGBA Tutorial

RGBA Tutorial

Summary

What I learned in this lesson was the RGBA feature which was a feature that is just like the hexadecimal color lesson except in this lesson it has an extra feature which is the "A" and that is for the transparency. The purpose of this is for people who need to show there words in front of a pic this helps so the audience can see both. Web designers use this and is helpful to them.

The Color Words

In color words it is designed to be done with words instead of hexadecimal codes or RGBA codes. It is less specific but easier to use. It is a little bit sloppy because it shows carelessness but it is still very convenient. Here is an example:

The Hexadecimal Color Codes

The hexadecimal color codes serve the same purpose as RGB just in a different format. These color codes include six different digits in which the first two represent the amount of red, the next two represent the amount of green, and the last two represent the amount of blue. This is more complex than color words but it is about the same as RGB except in a few cases the Hexadecimal color codes can use letters as well. Above is an example of a greenish hexadecimal color code and what it looks like.

Process

This is how I started out with the code up and ready to make four rows with different transparencies. So I added my background, which is a cute koala, my favorite animal, then with the four rows, I used RGBA as the color type instead of hexadecimal.

RGB and RGBA

This is how I chose RGBA instead of the "six-digit hex". RGB is almost identical to RGBA except for one vital difference, which is the "A". The "A" is for transparency and the lower it is, the lower the transparency, you can see that in the examples.

Examples

Then when I applied the white background in RGBA form I changed the "A" which is the transparency, and I changed that to .2, .4, .6, and .8.
This gave each row a different transparency.

In Conclusion...

This is the finished product! Enjoy! Also here are some links to further help you with colors! I learned about the "A" in RGBA and all the different ways to use color in Dreamweaver and HTML in general.

Eyedropper Help

Extra Tutorials

My Two HTML Projects

HTML Projects

I did the Tim Berners-Lee HTML and the Hexadecimal Color Sample. For the Tim Berners-Lee project, I learned more about images overall such as floating the image and borders and padding as well. I also learned about the alt and how it is important to all images.

For the Hexadecimal Color Sample I learned a lot about color codes and colors in general, such as the differences in background color and color. I learned about the hexadecimal codes and how their are long and short versions, like how the long version has six digits and the short version can have as little as three.

Websites--Then and Now

Websites--Then and Now

By: Evan Kaloupek

2004

2015

2015

2004

The first website I decided to show was Arsenal.com. On the left hand side is the old website along with the old code, while the right hand side has the new website with the new code. The websites differ in appearance in the fact that the new site looks much more organized and modern with sharp font and sharp graphics while the the old website contains a lot of clutter and not it is not as user friendly with buttons that are not easy to read and easy to see where you need to go.

The code is different because the old arsenal.com contains td unlike the new arsenal website which holds ul. They both have id, classes, and a href which is the similarities of the two. Appearance wise, the old one is much more spaced out then the new one.

2005

2015

2005

2015

The second website I chose was club penguin. The differences in design are that the old one has a medium size animation displayed in the right side while the new version has a full screen image of penguins in different outfits. The old version also uses a lot of cold colors to display the snow aspect, while the new one displays the mountains but still shows a few bright colors to bring happiness to the screen. The old one also uses only a couple fonts while the new one uses a few more different fonts. The coding is different because the old one has a little bit more and is more tightly packed while the new one is more spaced out while still having a fair amount of code. The old code uses tables while the new one does not as well as the old one uses td's and the new one uses div's.

2015

2004

2004

2015

For my third website I chose ESPN's site. The differences are that the old version looks very old and cluttered with a confusing a long menu, while the new version looks fresh and not as cluttered with an easy-to-use menu. The old version also uses many different colors while the new version stays more neutral with only a few colors. The differences in code is that the old one uses td's and the new one uses div's. Also, they both look similar in the aspect of how much text is showing. Also, the newer version looks like it uses much more "class" then the old version in the code.

The purpose of the Wayback Machine and the Internet Archive is so that we can go back and see what the internet and history used to look like so we can see how we progressed. They are also archiving books, movies, software, and much more. I find it interesting how they didn't do it like every month but every day, and they showed how popular those days are.