This is our second to last Lab assignment, and we are working on our case study projects on the side for the rest of the semester. The pace of the course is picking up as well, and the Labs will reflect that. They will be structured a little differently, though graded the same. Instead of three "parts" that build upon each other from simple to more open-ended questions, the questions in these last two Labs will be primarily geared towards directing you in building certain components for your case study app. Although everyone's app is unique, the techniques that we'll be learning apply to everyone.
For example, in this Lab, we will be talking about how to use color and images to denote meaning and a "brand" for a business, as well as planning how to connect multiple pages on our website. I stress planning because before you go running off and create a bunch of HTML files, it's a good idea to know what kinds of pages you will need, how they fit together to create a "flow" for the user, and what specifically will be necessary content for each. This will help you then create these pages one at a time with focus, linking them together later.
HTML is used to encode the content of our website and the relationships between that content, such as which paragraphs should be contained inside of which containers, which should appear first on the page, and so on.
CSS is used to encode the look of our website, and is a very different language. Instead of tags and attributes, CSS uses selectors and rulesets. Selectors have the power to be very complex, but we shouldn't ever need to do anything like that during our course. Simple tag, id, and class selectors should work just fine for now:
img {
...
}
#header {
...
}
.call_to_action {
...
}
For example, the above three rulesets would apply respectively to (1) all image tags on the page, (2) whatever one tag on the page has id="header" as an attribute, and (3) all tags that have class="call_to_action" as an attribute. We typically use the second two types more often, as using a tag selector can lead to accidentally applying a style to more than we intend.
The id selector (the one with a hashtag) is used when we want to target one particular element on the page. The class selector (the one with the period) is used when we want to target multiples. Bootstrap, which Pingendo uses to help us code quickly, uses CSS classes extensively.
Inside of the curly braces we simply list the styles we want to change and the value to change them to. There is a long list of these on w3schools, but here are the common ones:
.example {
background: purple;
color: white;
border: 2px solid black;
margin: 10px;
padding: 10px;
width: 50px;
height: 20px;
font-family: "Roboto";
font-weight: bold;
font-size: 24pt;
text-decoration: underline;
}
This CSS would make any tag with class="example" have:
Now, to use CSS in your HTML file, there are two options: a <style> tag inside the <head> tag that contains your CSS code; or a <link> tag inside the <head> tag that references the file that contains your CSS code. The second option is more preferred, but notice that both go inside the <head>. This is because the <body> is for the content that actually appears on the page, and the <head> is for additional information about that content, style included.
To use that second option, your head tag might look like:
<head>
<title>My Website Title!</title>
<link rel="stylesheet" type="text/css" href="styles/theme.css">
</head>
Inside a file named theme.css (found inside a folder named styles), then, we would place our CSS code, keeping the two languages (CSS and HTML) separated into different files for our own sanity. The most important style to define, at this point, might be:
body {
background: blue;
}
This would set the background of our website to a blue color. However, the default color for blue is not appealing at all. So, we can be more specific with a color hex code, which allows more fine control over our colors:
body {
background: #C5C5FA;
}
In general, there are three types of logos: Names, Icons, and Combinations.
An example Name logo would be the Coke logo, which is literally the name of the company written in stylized font. Another example would be the Google logo.
An example Icon logo would be the Starbucks logo, which is a mermaid? Whatever it is, it is recognizable immediately by their loyal customers. Another example would be the Pepsi logo.
And a combination logo is an icon displayed next to the name of the company. An example would be the adidas logo.
For our class, we will be using a combination logo, since (1) they are easier to make visually appealing than a good stylized font (custom fonts have a lot of nuance to getting them just right), and (2) it is not a good idea for a new business to use a Icon-only logo, as no one knows your name yet.
When planning your logo (regardless of what tool you decide to use in the end), it is a good idea to start by defining your "brand." This is a list of three words that you would like people to think of when they think of your company. For example, McDonalds might have the brand, "Food", "Happiness", "Fast."
You can revise these three words as you go, but do come up with the list of them first. Then go to The Noun Project, a community for people to share "nouns" (simple black-on-transparent images that convey meaning), and search for your brand words there. This is a good technique I have found for getting ideas of what sort of images convey those words. For example, for the McDonalds brand I find these images:
Searching for "fast" I don't find any images that seem to convey what I'm thinking of, so I think of a new word for the brand, "quality," and I find:
Although "quality" is an abstract idea, I get the idea from this search that I can represent that concept with the image of a ribbon.
I might then copy/paste these images into GIMP, Canva, or mspaint, arrange them, change the color or add a background color to further reflect the brand, and add my company name next to it. (If this were the real world and not our class you'd need to check the copyright on these images carefully.)
In the end, I end up with my first (less than lovely) logo using mspaint:
The logo is very bad, but it's a necessary first step. From here we can see that what we have is too "busy" and tries to convey too many things at once, but it becomes easier at this point to visualize what is important and to generate ideas on how to convey those important concepts visually with less "going on" in the image.
Maybe I could use an image of a burger without the drink to represent food? Maybe the "happiness" could be conveyed with a better choice of font or color? Etc.
Once you have your logo, you can embed it into your website with something like:
<img alt="Logo" src="images/logo.png" height="32px" width="64px" />
When we talk about navigation, we aren't really interested in the links at the top of the page in the header, which you see on most sites today. Those links are important because they are accessible directly from any page at all on the website. And from a navigation standpoint, it is a good idea to put "ready" links at the top of your site for the most important things. But what about the rest of the pages?
When we start seeing the connections (navigation links) between the rest of the pages, we start to see the site's overall navigation scheme. Is it one page linking to another linking to another and so on in a "straight line" fashion? Are things linked seemingly at random like Wikipedia? Are they linked in a hierachy like folders on your computer? Etc.
When you are planning the pages for your website in this class and starting to create your files, it's a good idea to:
index.html, the conventional "starting point" on the webBankingForHorseFans.comscripts and styles respectively inside of that top-level folder (BankingForHorseFans.com).imagesFor example, the files for the above example might be:
BankingForHorseFans.com/
index.html
register.html
account_overview.html
deposit_money.html
withdraw_money.html
place_bets.html
scripts/
javascript files here
styles/
css files here
images/
images here
Keeping your files organized like this makes it easier to set the href attribute of your <a> tags properly, as you can make a link like this in any of your HTML files and it will still point to the right place:
<a href="place_bets.html">Place Your Bets Here!</a>
You can also easily find your scripts, styles, and images without them crowding the top of your main folder.
So apart from links in the navigation bar at the top of a page (or in the footer at the bottom), where else do we find links to other pages?
It is this "seeming everywhere" nature of links that makes it more compelling to plan our site "skeleton" (a literal drawing of how all of the pages connect, like bones in a human body)!
To submit, write your responses to the following questions in a Word document, then upload it to Blackboard under this week's folder in Current Assignments.
Labs are due two weeks from when they are assigned, on Sunday at 11:59pm eastern time.
Labs are each worth 5% of your final grade. Scoring on your submission will be based on the following rubric:
0% - Student does not submit on time or submits plagiarized or unacceptable work. Double check that you have attached the right file, as usually students get zeros because they upload a previous week's Lab by accident.
1% - Student answers less than half of the questions with sufficient or accurate responses. Make sure that you are leaving yourself enough time to complete the Lab each week, as usually students submit incomplete work because they were rushed at the last minute.
3% - Student answers almost all questions with sufficient and accurate responses. If you encounter a problem or have a question about one of the questions, be sure to post in Ask the Instructor well before 24 hours before the due date, then continue to attempt to resolve the issue on your own while you wait for a reply.
5% - Great job, maximum points! The student answers all questions accurately and sufficiently, demonstrating the best of their ability.
Note, because Labs span two weeks' worth of reading, it is recommended to go through the Lab twice, once after the first reading where you answer everything that you can, then again after the second reading where you answer everything else.
<a> tags) on your site. What CSS would you use to do this?#header as an example id selector because there is commonly only one "header" to the webpage. What are other common parts of websites like this that there are only one of at a time on a single page?<link> tag. In the HTML, create an image, a paragraph, and hyperlink. The content and placement of the image, paragraph, and hyperlink are up to you. In the CSS, give the page an attractive purple background color, set the width of the image to 500 pixels, set the font size of the paragraph to 16 points, and give a border and background color to the hyperlink. Demonstrate your answer with screenshots of your code and website running in your browser.<img> tag. Place a hyperlink around that tag so when it is clicked it navigates the user to the homepage (index.html). Demonstrate your answer with screenshots of your code and website running in your browser.