Topic #1 – How Search Engines Work

Throughout the semester, you’ve used search engines every single day, both in class and outside of class. We’ve talked about the power of Google and the challenges of maintaining your search privacy. You’ve even learned a few ways to conduct better research. But what you may not know is exactly HOW search engines work. For example, how can it answer so many of your questions so quickly? How can it possibly give you so many results so fast? What do you think?

Topic #2 – Why Even Care About Search Engines?

If search engines were created to help find information on the World Wide Web, then that means anything you put on the World Wide Web, like a website, could potentially be found. The only problem is that search engines also base their results on popularity and if you have a new website, the fact is, your site is the least popular thing on the Web. No one knows your new website exists other than you and a few people you tell. In order to make your website more popular and compete with all that other information on the Web, you have to design with a search engine in mind. This process is known as Search Engine Optimization, or SEO.

Topic #3 – The Search Engine Process

We’ll talk more about SEO in a few minutes, but for now, let’s take a look at how a website actually shows up on a search engine. Until we know how this happens, we can’t really do anything to improve our site’s popularity. In order for a search engine to show your website, or anyone else’s website, three things have to happen first.

1. The Search Engine Must Discover Your Website
   If you have a new website, a search engine will not automatically know that. With billions and billions of pages around the web, how would a search engine even know that you exist? The first thing a search engine must do is “discover” your website. Most of the time, this will happen naturally over time, especially if you have a few friends who visit your site. And the longer you have a domain with some pages on it, the more likely it is that Google (and other search engines) will eventually find you. That doesn’t mean you’ll be popular, but it does mean you’ll eventually be discovered. If you want to speed up the process immediately after you build a website, you can simply add your site to Webmaster Tools.
2. The Search Engine Must Crawl Your Website
   The only way for a search engine to “discover” your website is to “discover” your .HTML files (which you know as pages). Your HTML files contain all the important information from your page (elements, text, and images). So if you have been “discovered,” that also means a search engine has begun crawling through your coded HTML files looking for both common and unique keywords. This “crawler” or “spider” is a program designed to rank words on a page by their placement. For example, a keyword phrase like “George Washington” is more valuable to a crawler if the phrase is contained inside of an H1 element rather than just sitting among a bunch of other words inside a P/paragraph element. These crawlers are also looking for external hyperlinks because those hyperlinks point to other sites that can also be crawled. In other words, your new website will be investigated by a search engine whether you like it or not. So the more you prepare for these spiders, the better your chances of getting ranked on the search engine.
3. The Search Engine Must Index Your Website
   Once your website has been discovered and crawled, the next and most important step for a search engine is to take all those keywords and key phrases and add them to a constantly growing index (alphabetical) of other keywords and key phrases. This works just like the back of a textbook. Most of your textbooks have an index so that you can find specific keywords on specific pages. Search engine indexing works almost exactly the same way. The only difference is that your keywords and key phrases are being added to an index more than a million times bigger than any textbook. Your keywords and key phrases simply get added to all the other keywords and key phrases on the search engine index.

Topic #4 – Search Engine Optimization

By itself, optimization is the process of making something as perfect, functional, and effective as possible. So when web designers talk about search engine optimization (SEO), they are basically talking about making their websites more effective with a search engine. But this is no easy job. In fact, there are some people whose entire job is just SEO.

So let’s pretend you just built a website for a family member who is an amazing cook. You want the world to know how to cook like this person. You design a beautiful website and even get it discovered by Google. One of the best things on your website is a recipe for Chicken Noodle Soup that beats every other soup you’ve ever tasted. You included all the steps in the recipe and took a high resolution photograph of the soup. How will anyone find your recipe page when it seems like there are thousands upon thousands of pages about Chicken Noodle Soup?

Okay then. If Search Engine Optimization (SEO) is the process of trying to get a website more popular on search engines, then that means either you or someone else will have to do the work of improving your website’s popularity. There are many, many people who understand how HTML and CSS works, but they really don’t like to code. You might even be part of that group. But some of these people find another way to use their knowledge and make a lot of money. These people are called SEO Managers, SEO Consultants, and SEO Specialists. And believe it or not, many of these professionals can make up to $60,000 per year.

FYI.
That’s pretty good money for someone who only has
to know a little bit about web design.

Topic #5 – Black Hat SEO

Most of the people who get involved with SEO professionally are looking for the best and most effective ways to do their job. Someone has hired them to be in charge of making a site more popular and if they can’t do that very well, then they might not be doing it for very long. Since there is so much competition for SEO providers, there are some who try to pull a few dirty tricks. And dirty tricks in SEO are known as Black Hat SEO.

When it becomes clear that a new website is trying too hard to get higher rankings on a search engine, Google puts these websites into a “sandbox effect,” which basically means your site will not be ranked at all until you change a few things on your pages. For example, some designers use “keyword stuffing” by overdoing keywords and key phrases on a page. This looks more like SPAM than it does natural writing, and the Google spiders don’t like that very much.

Below are just a few examples of Black Hat SEO.

1. Keyword Stuffing with Invisible Text
   Keyword stuffing includes writing keywords in the same color as the background or writing keywords in a part of the HTML that isn’t seen by the site visitors. These are techniques and schemes recognized by almost every search engine spider and treated like Spam. If you want to keep a good reputation as a web designer, don’t do it. Ever. This can and will get your site banned from a search engine.
2. Swapping Links
   Swapping links means that someone, like a friend, links their website to your website and then you link back to their website. The problem is that this is just a circle where no one really gains anything. You might even say it’s a waste of time if you want to be found on a search engine. One of the best ways to get popular is to have someone “like” or “link” to your site without you ever having to do the same for them. It’s not easy, but it’s better than having a loop that doesn’t go anywhere.
3. Duplicating Content
   Imagine there were two or three school websites with the exact same information on each site. You might think this would increase our chances of being found on the web, but it’s also sort of like cheating or spamming the Web. Search engine spiders will recognize that the information is exactly the same on multiple sites and once again, your site(s) might get banned from the search engine.

Topic #6 – White Hat SEO

But not everyone cheats. Good SEO managers already know that there are things they shouldn’t do. And they work really hard to avoid those bad habits and dirty tricks. Really good search engine optimization takes a lot of time and a lot of patience. The process of managing SEO the right way is called White Hat SEO.

Below are just a few examples of White Hat SEO.

1. Purposeful Page Content
   Page content is basically what people see when they visit a web page. It includes text and images, but should . Content should never be something used just to fill in the white space between images. Content defines the purpose or value of a website. Tips for writing good page content include thinking before you write, writing good information, proofreading, and spell-checking.
2. Keyword Styling
   Keyword styling is when you put the most important keywords into headings, titles, hyperlinks, and other important elements. If all of your important words are just sitting in long paragraphs, then they’ll just blend in with the rest of the text. Another way to make sure your most important keywords are recognized is to buy a domain that includes one or more of those words. For example, at the end of Topic #4, did you notice that “Web Design” and “good money” were both emphasized with red text and a larger font size? That’s because those words are super important to the page. And that’s good Search Engine Optimization.
3. Keyword Density
   In the world of search engine optimization (SEO), keyword density is a measurement (in percentage) of the number of times a particular keyword or phrase appears on a page compared to the total number of words on that same page. For example, let’s visit this page about Thomas Jefferson and then see how it works with the Keyword Density Analyzer. Let’s test it out with a page about Thomas Jefferson.
4. The ALT Attribute
   Whenever you include an image tag (< img >), the ALT Attribute (alt=”red apple”) is an alternative description of the image in case a browser fails to show the image for any reason. But the ALT attribute also gives a Search Spider another way to index images on your web page, since the spider cannot actually see or understand an image. All of the images on Google Images, for example, come from websites and the more often you use ALT attributes, the more likely your images are to get included in a Google image search.

Topic #7 – The Invisible Web and the Dark Web

The visible web includes all those pages that can be easily found on a search engine. They usually show up in the first page or two of results. But the invisible web includes all those pages that cannot be found very easily. For example, if you search for “science” on Google, you’ll get a lot of random information about science, but imagine that a scientist just discovered something really important and only wanted to share it with a few other scientists until she could verify that her discovery was legit. Chances are, she might put her discovery on the web, but only on a page or a website that a few of her fellow scientists use (like a website that they created for themselves and no one else). In other words, information about her discovery is out there, but you won’t see it because the information isn’t popular and it is definitely not on a popular website source.

Sometimes that invisible web is also known as the deep web because information seekers only look at the first 10-20 results out of millions. But this can often be confused with something entirely different known as the dark web. The dark web is an encrypted network where some go to avoid being watched. The worst members of the dark web are criminals, terrorists, and predators because they’re looking for a place to communicate where no one will be able to track their location or their activities. Not everyone in the dark web is bad, but you can be sure that a very large number of the people who use it are quite dangerous. This is the one and only time that you will hear about the dark web in this class because it’s important, for security reasons, to know that it exists. But all you need to know from here forward is that the dark web can be extremely dangerous and that you’d be smart to avoid everything about it.

Topic #8 – The Keyword Seminole

Over the last few months, you’ve heard a lot of stories about real world web design. You’ve heard about the time your teacher lost a bunch of domains because of a poorly secured web host that got hacked. And you’ve heard about some of the projects your teacher has built for various people and businesses over time. But you may not have heard about the time your teacher went to visit Google Headquarters. Or the time he went to meet the owner of DuckDuckGo. These are the stories that led to the Keyword Seminole.

Over the last few months, most of you have done an incredible amount of work. Some of you have struggled to keep up with the teacher, but we’ve been coding almost every day. And trying to memorize the most important information from each lesson is lot, especially when you have other classes. Right about now, your minds are full and they need a break. So it’s a good time to unwind and decompress. Below are a few interesting websites that you’ll enjoy exploring on your own. Let’s take a quiet, 5-minute recess to ourselves. No talking. No sharing. No hanging out. Just quietly explore, draw, and relax without worrying about your partner or anyone else in the room.

• Relaxing Website Option #1 – Neon
• Relaxing Website Option #2 – Weave
• Relaxing Website Option #3 – Stickman

Overview – Portfolio Websites

During the last lesson, you set up a portfolio website with five pages. The purpose of this five-page website is to show off who you are and what you’ve learned throughout the semester. For example, you have an “about” page where you will share some information about your experience and your interests. You also have a “portfolio” page that will provide links to various pages and demos that you’ve coded in this class. And part of what you’re doing with this five-page website is making it personal. That means adding a couple of images and bringing in your own colors. In the end, you will have a complete website that you can show off as a way of demonstrating what you know.

If you were not here for the setup of your Portfolio Website, go back to Lesson 4.1 and go through the ten steps of the Daily Design. Otherwise, you may simply look below.

This is your last graded web design assignment before the final project begins. In order to get a good grade, you need to have the following five things.

Grading – Portfolio Websites

In order to get a good grade on this final assignment, you need to have the following six things:

1. Color Palette & Site Identification
   Your design must have three unique colors (part of a color palette) that you have chosen to use and cannot have the same colors that were there when you started. You must also change the name on your website in the TITLE elements and the FOOTER elements of ALL pages so that they reflect your actual name.
2. Two Unique Images
   You must add a logo to the header of all pages as well as a single image on the Home Page (index.html). You must build a logo with CoolText and figure out how to get it onto your website. You must also find an image that represents you and add it to the Home Page (index.html), as instructed in the code.
3. Three Unique Paragraphs
   You must complete three paragraphs for the “about.html” page as instructed in the code, each one with 4-5 sentences. Paragraph 1 is about you as a person. Paragraph 2 is about you as a web designer. Paragraph 3 is about you as an individual with other skills.
4. Links to Pages and Demos
   You must provide internal links to at least 10 of your pages and at least 2 of your demos. More is better, but the links have been started for you.
5. JavaScript Demos
   Don’t worry about this right now. We will do this as a class (Lesson 4.3).
6. Accountability Essay
   Don’t worry about this right now. We will do this as a class (Lesson 4.4).