Front End Web Development

Spark Boulder, Summer 2017

Session 2: The Wrath of Session

HTML tags & attributes, the style attribute

Projects!

Over the course of the next 10 weeks, I'm going to have you complete 4 different projects.

You can present your project to the class, if you want! Definitely not required.

Just like all of the other assignments, these aren't formally "due" anytime.

These projects won't be formally graded at all, but they'll be included in your "report card" at the end of the class. They're also really cool to show off to potential clients and employers!

Assignment 4, Project 1: Portfolio Site

For your first project, I'd like you to create a simple portfolio site. Nothing too fancy!

You can put whatever you'd like on it! You can include things like:

Really, anything you want! I'm not "grading" these. You can submit them whenever you want.

If you'd like to see a couple examples of other portfolios, you can check them out on the readings for session 4. Some of these are pretty advanced! I just want you to create something simple that you're comfortable with.

A couple things:

More dumb fun web stuff:

http://ncase.me/polygons/

Attributes!

We learned a bit about attributes last time - they're things that we can attach to tags to change how they work.

To write an attribute, we include it in the opening tag of an element.

<a href="http://google.com">Google</a>

In this case, the value of the href attribute is http://google.com. Values (generally) need to be wrapped in quotation marks!

Element-specific attributes

Element-specific attributes only appear on certain tags.

For example, href is an element-specific attribute, because it only shows up on <a> tags.

src and alt are also element-specific attributes, because it only shows up on <img> tags.

Usually, you can find whatever attributes are available on a tag by googling html img tag attributes or similar.

Anchor tag attributes

We covered this a little bit last time, but the href attribute is the important bit of an <a> tag.

We can also include a target attribute to change the behavior a little bit:

<a href="contact.html" target="_self">Contact Me</a>
<a href="http://google.com" target="_blank">Google</a>

Image tag attributes

Also covered a bit last time - the src attribute is the URL of the image, and the alt attribute is displayed when we have a broken link.

What does the title attribute do in this case?

<img src="stupid.gif" alt="broken link :(" title="Let's always be stupid, forever!" />

Global attributes

Global attributes are attributes that can be placed on any tag - text, images, links, anything!

The most common global attributes we'll see are id, class, and style.

List of all global attributes: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes

The id attribute

Any element can have an id attribute.

Next session, we'll learn to use id as a CSS selector, but for the time being, we can use it with <a> tags!

This is also sometimes called a URL fragment.

<h1>
    table of contents
</h1>
<p>
    <a href="#section1">section 1</a>
    <a href="#section2">section 2</a>
</p>
<h1 id="section1">section 1</h1>
<p>
    Around the world around the world. Around the world, around the world around the world. Around the world. Around the world around the world. Around the world. Around the world around the world around the world, around the world. Around the world. Around
    the world around the world around the world.
</p>
<p>
    Around the world around the world. Around the world. Around the world around the world around the world, around the world, around the world, around the world. Around the world around the world, around the world around the world around the world, around
    the world around the world, around the world.
</p>
<p>
    Around the world around the world. Around the world around the world around the world, around the world, around the world around the world around the world around the world around the world, around the world. Around the world, around the world around
    the world, around the world around the world.
</p>
<p>
    Around the world. Around the world around the world around the world. Around the world, around the world around the world around the world around the world, around the world, around the world. Around the world around the world around the world, around
    the world around the world. Around the world.
</p>
<h1 id="section2">section 2</h1>
<p>
    Around the world. Around the world around the world around the world. Around the world, around the world around the world around the world around the world, around the world, around the world. Around the world around the world around the world, around
    the world around the world. Around the world.
</p>
<p>
    Around the world. Around the world around the world around the world. Around the world, around the world around the world around the world around the world, around the world, around the world. Around the world around the world around the world, around
    the world around the world. Around the world.
</p>
<p>
    Around the world. Around the world around the world around the world. Around the world, around the world around the world around the world around the world, around the world, around the world. Around the world around the world around the world, around
    the world around the world. Around the world.
</p>
<p>
    Around the world. Around the world around the world around the world. Around the world, around the world around the world around the world around the world, around the world, around the world. Around the world around the world around the world, around
    the world around the world. Around the world.
</p>

The class attribute

We'll learn more about the class attribute next session, when we talk about CSS selectors.

For the time being, you just need to know that it's another global attribute.

<div class="sidebar">
    <ul>
        <li>home</li>
        <li>about</li>
        <li>contact</li>
    </ul>
</div>
<div class="maincontent">
    <h1>article</h1>
    <p>lorem ipsum blah blah blah</p>
</div>

The style attribute

Now we're getting somewhere!

<p style="color: blue;">
    Dude!
</p>
<p style="background-color: red;">
    Sweet!
</p>

There are four parts to a "style" within the style attribute:

You can string multiple styles together in a single style tag!

<p style="color: blue; background-color: red;">
    No, really, what does it say?
</p>

What's a style?

A "style" (not the style attribute) is a bit of information attached to an element that tells the browser how to display that element.

<p style="color: blue; background-color: red;">
    No, really, what does it say?
</p>

Copy the <p> element above to your own page and open it in a browser (locally is fine, just double-click the .html file)

Then, pop open your browser's developer tools and Inspect the element. (right click the element on the page > Inspect). Look for the Styles tab.

You should be able to find something like this:

element.style {
    color: blue;
    background-color: red;
}

Great! This means that we've applied two styles directly to the element - the color style and the background-color style.

Seeing all the styles on the element

Find and click on the Computed section in the browser dev tools.

This shows us all the styles that are currently being applied to our element, including the ones inside the style attribute.

When we start writing CSS, and start making big sweeping style changes, we're going to have some styles conflicting with other styles.

For example, if we want all paragraphs to be dark text with a white background, but if we want all paragraphs in our navigation section to be white text with a dark background, then there's going to be some CSS overriding happening.

We can debug this using the Computed section in the browser dev tools. We'll revisit it during our CSS selector adventures.

In the meantime, this is called "specificity and the CSS cascade." Not something you really need to know in-depth, but it's good to at least know what it's called.

Inheritance

Some styles on parent elements get passed down to child elements!

It generally follows common sense which styles inherit (color, font stuff) and which don't (borders, background images).

If you need an explicit list, you can check out the "offical" list here. (if someone finds a better list, please let me know!)

The color style

Pretty straightforward.

<div style="color: red;">
    <h1>asdfasdfasdf</h1>
    <p>
        Where's my car?!
    </p>
</div>

the background-color style

<div style="background-color: chartreuse;">
    <h1 style="color: cornflowerblue;">Rhombus!</h1>
    <p>
        Shmow-zow!
    </p>
</div>

Technically, background-color does not get inherited from the parent element!

It just looks like it, because the default value of the background-color style is transparent.

(Check it out in the dev tools!)

The height and width styles

<p style='background-color: red; height: 100px;'>
    Mathematical!
</p>
<p style="background-color: blue; width: 50%;">
    Algebraic!
</p>
<p style='background-color: chartreuse; height: 200px; width: 200px;'>
    Rhombus!
</p>

This is generally really handy for images!

Can specify in pixels or percentages (or other units too!)

Remember, percentages are of the parent element.

More on CSS units: http://www.w3schools.com/cssref/css_units.asp

Why is everything on it's own line? because they're all "block" elements - more on that in the coming sessions on CSS layout.

The font-size style

Similar to widths and heights, font-sizes can be specified in pixels or percentages.

Note that font-size is inherited, so your percentages may look a little weird if they're nested!

<p style="font-size: 100px;">
    Mathematical!
</p>
<p style="font-size: 200%;">
    Algebraic!
</p>
<p style="font-size: 0.5em;">
    Rhombus!
</p>

You can also use em units, which are also relative to the current font-size, just like %.

The font-family style

Hey! Using different fonts!

Remember, "serif" fonts have the little squiggly bits on the letters, and "sans-serif" fonts don't. "Monospace" fonts mean that every letter takes up the exact same with (common for code display, text editors and consoles)

The font-family style is usually a comma-separated list of fonts or font families - if a browser doesn't have a specific font, it'll "fall back" to the next one in the list.

<p style='font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;'>
    Mathematical!
</p>
<p style="font-family: Impact, Charcoal, sans-serif;">
    Algebraic!
</p>
<p style='font-family: "Courier New", Courier, monospace;'>
    Rhombus!
</p>

Having issues with double quotes? The style attribute can be wrapped in 'single quotes' (apostrophes) (or vice versa) to allow you to use double quotes in attributes)

Here's a list of fonts that are commonly built into browsers: http://www.w3schools.com/cssref/css_websafe_fonts.asp

If you want to use fonts that aren't generally built into browsers, I'd recommend checking out Google Fonts.

The border styles

In order for you to apply a border to an element, you must set border-style to solid (or some other valid style).

From there, go nuts! Try all of these different styles:

More advanced:

What other styles do you want to learn about?

text-align?

Anything on here? http://www.w3schools.com/cssreF/

What questions are there?

Stuff for tonight:

How to be a Web Developer

Excelsior! 🚀