Visible to members of this folder

Rutgers Design 2B: W2

HTML Quiz

Instructions

Create a new directory in your projects folder named html-quiz.

Inside this directory create a file named index.html. Make sure this is a valid HTML5 document.

Complete the quiz by adding your answers to the index.html file.

At the end of the quiz, link back to it on your class portfolio.

You have 30 minutes to complete the quiz. You may use the internet to help answer the questions if necessary, but don’t share or copy code between students. Feel free to pick and choose which questions you answer first. Try to answer as many as possible, and move on if you get stuck.

Questions

Using all of the HTML heading tags, list your 6 favorite months in order of your preference.

Create a link to your favorite website, and add a paragraph describing why you like it so much.

Insert an image of your choosing to the page. Make sure the image includes ALT text that describes the image.

Nest the following series of HTML tags inside each other, where each >represents a new level. Make sure to maintain proper indentation.

main > section > div > p > span

Create an ordered list of the top 3 countries you’d like to visit. Within each country, create another ordered list of the top cities you’d like to visit in that country. Maintain proper indentation and make sure you nest your ordered lists properly.

Write an HTML comment that is hidden from the browser, but displays in the code.

Create an unordered list of at least 6 musical artists you like to listen to.

What do all HTML documents have in common? Answer in a paragraph.

Create a relative link that links to your repository’s home page.

Check Your Work

You can always check your work by pasting your HTML file into an online HTML validator.

https://validator.w3.org/#validate_by_input

View the source of this website and see how you did!

https://artfiles.rutgers.edu/~fisher@art.rutgers.edu/projects/html-quiz/

Did you remember to indent properly? In case you didn’t, you can use an online tool to reformat your code quickly.

https://htmlformatter.com/

CSS Introduction

HTML	CSS	Javascript
Content	Style	Behavior
What it says	What it looks like	What it does

CSS stands for Cascading Style Sheets. CSS is used to give style and change the appearance of your structured HTML. CSS can be added to HTML in 3 ways:

Inline - by using the style attribute in HTML elements

Internal - by using a <style> element in the <head> section

External - by using an external CSS file, which is what we’re doing in our Student Survey

It’s best practice to store your styles in an external stylesheet, linked to from your HTML document’s head. For the purpose of this class, all your styles will be stored using the external method.

This is how you link to an external style sheet:

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="assets/css/main.css">

</head>

<body>

<h1>My structure</h1>

</body>

</html>

This is what CSS looks like:

body {

background-color: lavender;

}

h1 {

color: blue;

}

Let’s create the missing css file. First, create a “css” folder within the “assets” folder. then paste the above into a new text editor window and save it as “main.css”

Couldn’t load preview

The file may have been moved or deleted, or is temporarily unavailable.

https://paper-attachments.dropboxusercontent.com/s_42856A8BAEF2A01DCAEF2C79701219E93C97297642FB1F017EC87AB3B150D1D6_1548292487916_Screen+Shot+2019-01-23+at+8.14.26+PM.png

Folder structure should look like this

see what happens ✨

So, what’s going on? In CSS, you target something by using a selector. In our example, we used body and H1 as our selectors. Then, you write code following it.

Couldn’t load preview

The file may have been moved or deleted, or is temporarily unavailable.

http://ci18.nikasimovich.com/assets/lectures/lab/html-css-part-1/css_selector.gif

CSS Selector Example

In addition to selectors, which are inherent to HTML, you can also create your own targets using IDs and classes.

IDs can only be used once and are represented by the #.

#title {

color: blue;

}

Classes can be repeated. It’s better practice to use classes, since you can re-use them and don’t have to create a series of endless IDs. Classes are represented with a . For this class, aim to use classes only.

.title {

color: blue;

}

Both of these are ways of targeting individual elements in HTML. You can target the HTML elements in the HTML. This is what that looks like:

<h1 class="title">Hello</h1>

Take a look at the syntax in both the above example and in our code snippet. Most of the problems you’ll ever run into are syntax issues. Here are some tips for CSS syntax:

use all lowercase

do not use spaces in class names

write the name of your selector followed by the curly brackets {}

your code goes inside of the curly brackets

each new item gets its own line and is ended with a semicolon ;

Let’s open up our Class Survey (the index file) from last week’s class.

If you look at the HTML, you should see that I added some classes to the document.

<div class="question-container">

<div class="question">What is your name?</div>

<div class="answer">Your answer goes here!</div>

What are the three classes?

Let’s create a CSS file for this exercise and save it in the correct place. In the head of the document, I’ve already advised on what it should be called, do you see it?

<link rel="stylesheet" type="text/css" href="assets/css/main.css">

In the CSS, you use a period to indicate it and then the CSS syntax after it:

.question-container {}

.question{}

.answer {}

Practice

Add a background color to the question-container

Add some padding to each question container

Make the question a different font

Make the answer a larger font-size

Now let’s try something else. Comment out the styling you have and add this:

div {

color: gray;

}

.question {

color: pink;

}

In the above CSS, the div with the question class becomes pink, even though we colored all div tags gray in the line before. This is because of two reasons. First, CSS cascades. That is, styles that are defined later take precedence over the styles that are defined before. Second, CSS properties have different levels of specificity. Type selectors (like the <p> tag) are least specific. Class selectors are more specific, and ID selectors are most specific. For now, just remember that it’s best practice to be less specific in your CSS. That means, only use type selectors or class selectors to style your HTML. Don’t use ID’s to style HTML.

Now go into your HTML and add the following before your questions begin:

<p>Not so special. Mostly gray and sad.</p>

<p id="most-special-paragraph" class="special-paragraph">This paragraph is special, that's why it's blue.</p>

<p>Also not so special.</p>

and this in the CSS:

p {

color: gray;

}

#most-special-paragraph {

color: red;

}

.special-paragraph {

color: blue;

}

What’s happening?

In this example, even though we define the special-paragraph style lower in the CSS cascade, the most-special-paragraph ID selector is so specific it overrides the blue color, and the paragraph becomes red.

Additionally, there can be many attributes with the same class on a page, but there can only ever be one element with the same ID on a page. If you really wanted the special-paragraph to be blue, you can use a special !important rule to force this attribute’s specificity to the maximum, which will override all other rules, except for !important rules that come after (cascade) after this one.

try that this way:

p {

color: gray;

}

#most-special-paragraph {

color: red;

}

.special-paragraph {

color: blue !important;

}

Please note, however, that using !important is not good practice and should be avoided at all costs unless you fully understand why you are using it. It’s better to be as unspecific as possible, and apply specificity only as necessary.

CSS Properties

You can control how an element looks using a large number of different CSS properties. Some common ones include:

color

background

border

outline

margin

padding

width/height

text

font-family

position

display

float

These properties can be mixed and matched in any combination when styling an element. For example, to make our special-paragraph even more special, we can apply many CSS properties to it using this syntax. (Remove #most-special-paragraph)

.special-paragraph {

color: blue;

background: pink;

border: 1px solid red;

margin: 10px;

padding: 5px;

font-family: monospace;

font-size: 24px;

}

Each property has a unique set of values that you may use to add style. For example, the color property accepts a valid color format, such as the web safe color word pink. You can also pass color as a hexcode, such as #ffc0cb, or any other valid css color format. However, the values that are available to the margin property are different than those of the color property. It wouldn’t make sense to pass the color pink to a margin. Each CSS property is unique, and it’s important to become familiar with the values that are available to each property.

Web Typography

Download this reference file and open the index in chrome, as well as the index and CSS in your text editor. Let’s go through different options for loading typefaces