Coding Class

Miami Ad School

What we have learned so far ...

Block & Inline

In HTML, you’ll mainly come across 2 types of HTML elements:

• block elements like:
  • divs <div>
  • articles <article>
  • sections <section>
• inline elements like:
  • links <a>
  • emphasised words <em>
  • important words <strong>

Block elements are meant to structure the main parts of your page, by dividing your content in coherent blocks.

Inline elements are meant to differentiate part of a text, to give it a particular function or meaning. Inline elements usually comprise a single or few words.

Nesting & Depth

<p>Sir <strong>Alex Ferguson</strong> once said about Filipo Inzaghi:<q>"That lad must have been born offside."</q>. </p>

In this setup:

• the <strong> element gives the words “Alex Ferguson” more importance
• the <q> marks his quote about Inzaghi

The fact that <strong> is displayed in bold is only the browser’s default behavior. Remember that you have to choose HTML elements according to their meaning, not how they look like.

In this case:

• <p> is the parent element of <strong> and <q>
• <strong> and <q> are child elements of <p>
• <strong> and <q> are sibling elements

Structure

When writing HTML content like paragraphs, lists or links, you provide meaning to your text. But you might want to groupsome of these elements together.

For example, a blog’s webpage can be divided in 4 parts:

• a header that is similar on every page, and is the main navigation of the website
• a main content, that changes for every page: a list of articles, a single article with comments, an about page…
• a sidebar that links to monthly archives and categories
• a footer for additional links to less important pages

There are some structural HTML elements you can use as containers for other elements.

Header

  

    
      
    
    A cool website
  
  

    

      Home
      About
      Contact
    
  

Footer

Main

The main element contains, as its name suggests, the most important content of the page, the one that defines the purpose of the page.

While all webpages of a website contain common elements (like the header, the navigation, the footer…), the mainelement focuses on unique content.

Forms

While navigating the Web, a user’s interaction is mostly only to click on links in order to navigate through webpages.

But the Web understands that a user is sometimes required to provide his own input. These types of interaction include:

• signing up and logging in to websites
• performing a search
• uploading files

To accomodate for these needs, HTML provides interactive form controls:

• text inputs (for one or multiple lines)
• radio buttons
• checkboxes
• dropdowns
• upload widgets
• submit buttons

Definition by Attribute

These controls use different HTML tags, but most of them use the <input> tag. Because it is a self-closing element, thetype of input is defined by its type attribute:

Form

The <form> is a block-level element thats defines an interactive part of a webpage. As a result, all form controls (like<input>, <textarea> or <button>) must appear within a <form> element.

Two HTML attributes are required:

• action contains an address that defines where the form information will be sent
• method can be either GET or POST and defines how the form information will be sent

Usually, the form information is sent to a server. Think of a form as a collection of input controls that work together to perform a single operation. If you wrote a login form, you could have 3 controls:

• a email input <input type="email">
• a password input <input type="password">
• a submit button <input type="submit">

Inputs

Almost all forms require textual input from users, in order for them to enter their name, email, password, address… Text form controls come in different variations:

Although these inputs look very similar and allow users to enter any kind of text (even wrong input), their type provides specific semantics to the input, by defining what kind of information it is supposed to contain.

Browsers can subsequently slightly alter a control’s interface to increase its interactivity or hint at what kind of content isexpected.

Placeholders

Text inputs can display a placeholder text, that will disappear as soon as some text is entered.

Labels

Email

While placeholders already provide some hint at what content is expected, labels have the advantage of remaining visible at all times, and can be used alongside other types of form controls, like checkboxes or radio buttons.

Although you could use short paragraphs to describe form elements, using <label> is semantically more valid because they only exist within forms, and can be paired with a specific form control by using the for attribute and matching its value with the input’s id.

First name

Checkboxes

Checkboxes are form controls that only have 2 states: checked or unchecked. They basically allow the user to say “Yes” or “No” to something.

   I agree to the terms

Radio buttons

You can present the user a list of options to choose from by using radio buttons.

For this form control to work, your HTML code needs to group a list of radio buttons together. This is achieved by using thesame value for the name attribute:

Marital status

  
  Single


  
  Married


  
  Divorced

Because all radio buttons use the same value for their name attribute (in this case the value "status"), selecting one option will unselect all other ones. Radio buttons are said to be mutually exclusive.

While a checkbox exists on its own, radio buttons can only appear as a list (which means having at least 2 options).

Drop Downs

If the number of options to choose from takes up too much space, you can use <select> dropdown menus.

They work like radio buttons. Only their layout is different.

  January
  February
  March

If you add the multiple attribute, you can provide the ability to select multiple choices.

Which browsers do you have?

  Google Chrome
  Internet Explorer
  Mozilla Firefox
  Opera
  Safari

CSS

It is not really code, it is a design language. But anyway ...

CSS

stands for Cascading Style Sheets

While HTML is about defining the content of a webpage, CSS is about styling a webpage. It means setting colors, fonts, dimensions, margins, positions, of a webpage’s elements.

HTML is inert. CSS is fluid.

CSS brings a webpage to life, by applying a coat of paint on its static content, and elevates its purpose through color, space, emphasis and motion.

CSS

Syntax

Selector { Element-Property : Value; }

CSS

You can insert CSS into your HTML document

by linking an CSS file

<head>
   <link href="style.css" rel="stylesheet" type="text/css" />
</head>

using the style-Tag

<head>
   <style type="text/css">
      p { background: #336699; }
   </style>
</head>

using the style-Attribute

<p style="background: #335599;">
   this paragraph has an background color
</p>

CSS

Why not style directly in the HTML?

Because we want to separate the content (HTML) from its presentation (CSS).

If you want to visualize the purpose of this distinction, head towards the wonderful CSS Zen Garden: each design uses theexact same HTML but a different CSS each time.

It makes maintenance easier as well: the same CSS file can be used for a whole website. It provides flexiblity: focus on the content on one side, the styling on the other. SEO purposes, different concerns.

CSS

/* A CSS rule */
selector{ property: value;}

You could read it like:

who{ what: how;}

CSS is a 3-part process:

• the selector defines who is targeted, which HTML element(s)
• the property defines what charateristic to alter
• the value defines how to alter that charateristic

This whole block (selector/property/value) is a CSS rule.

Selecting elements

Element selector

p { font : red; }
/* selects all p-Elements within the given HTML */
<p>red font</p>

class selector

.redfont { font : red; }
/* selects all elements with class attribute matching classname */
<div class="redfont">red font</div>
<p class="redfont">red font</p>

id selector

#itemone { font : red; }
/* selects the one element with matching id attribute */
<div id="itemone" class="some numbers">red font</div>

Direct combined Selectors

em.date {
  color: blue;
}

Hierarchy selectors

A space in a selector defines a ancestor/descendant relationship. Let’s say we want the links in our header to be in red:

header a {
  color: red;
}

This can be read from right to left as: “Select all a elements that are within a header element”. This will prevent all other links (that aren’t in the header) to remain unaffected.

Pseudo-class selectors

HTML elements can have different states. The most common case is when you hover over a link. It’s possible in CSS to apply a different style when such an event occurs.

Pseudo-class selectors are attached to usual selectors and start with a colon ::

a {
  color: blue;
}

a:hover {
  color: red;
}

Rule Hierarchy

An HTML element can be targeted by multiple CSS rules. Example:

  Here is some text!

What if we have such CSS rules ?

p{ color: blue;}
.message{ color: green;}
#introduction{ color: red;}

ID- Selectors are more important than Class- Selectors are more important than Tag- Selectors.

Colors

CSS provides 145 colors names, from the most basic (black, white, orange, yellow, blue…) to the more specific (lawngreen, orchid, crimson…).

body{ color: black;}
a{ color: orange;}

Because the RGB model is directly related to how colors are physically rendered, it has become a CSS color unit.

a{ color: rgb(219, 78, 68);}

The rgba color unit is rgb to which we add an alpha value (ranging from 0 to 1, in decimal values), which defines how transparent the color is:

body{ color: rgba(0, 0, 0, 0.8);}

Colors

The most common system within CSS are the hexadecimal values, like #db4e44.

In hexadecimal, we have 16 symbols to form numbers. Because 0-9 are not enough symbols, we also use A-F. And it starts at zero. So:

• the number 4 in hexadecimal is 3
• the number 12 in hexadecimal is B
• the number 16 in hexadecimal is 10 because after you’ve run out of symbols (the last one being F), you add a second symbol to the left and increment (0 becomes 1) and the right one starts over (from F to 0)

body{ color: #000000; }

Sizes

There many CSS properties that require size units:

• font-size defines the size of the text
• border-width defines the weight of element borders
• margin defines the spacing between elements
• left/right/top/bottom allows to position and move elements

The most used units are:

• px for pixels
• % for percentage
• em for sizing relative to the parent’s font-size value.

Sizes - Pixels

Because computer screens use pixels to display the content, it is the most common size unit in CSS.

It can be used to fix the width of an element:

body{ width: 400px;}

Or set the text size:

body{ font-size: 20px;}

Pixels in CSS are straightforward because they define absolute values: they are not affected by other inherited CSS properties.

They are also widely used for positioning and spacing purposes.

Sizes - Percentages

Percentages are relative units: they rely upon the element’s parent and/or ancestor.

For example, block-level elements like paragraphs naturally take up the whole width available. The following CSS rule will resize them to half of the width available.

p{ width: 50%;}

Percentages can help set other CSS properties, like text size:

strong{ font-size: 150%;}

There are important challenges ahead of us.

Sizes - EM

em is a relative unit: it depends upon the value of the element’s font-size.

For example, if the parent has a font-size of 20px and you apply font-size: 0.8em to a child element, this child element will render a font-size of 16px.

The em unit is interesting as you define font sizes of HTML elements relative to one another. To design a pleasing and easy to read webpage, you need consistent visual depth. For example, you want your <h1> to be twice as big as your body text, your <h2> only 1.5 times as big, and your sidebar slightly smaller. This could easily be achieved in CSS:

body{ font-size: 16px;}
h1{ font-size: 2em;}        /* = 32px */
h2{ font-size: 1.5em;}      /* = 24px */
aside{ font-size: 0.75em;}  /* = 12px */

If you decide to change the size of your body text, the relative sizes of your headings and sidebar will change accordingly, and your webpage will remain visually balanced.

Sizes - rEM

The rem unit is similar to em, but instead of depending upon the parent’s value, it relies upon the root element’s value, which is the <html> element.

html{ font-size: 18px;}
body{ font-size: 1rem;}     /* = 18px */
h1{ font-size: 2rem;}       /* = 36px */
h2{ font-size: 1.5rem;}     /* = 27px */

The difference between rem and em is that rem values are fixed while em values can multiply between each other.

If you set your html{ font-size: 18px;}:

• 2rem will always be equal to 36px, no matter where you use in your CSS
• 2em will always be equal to double the parent’s font-size, so not necessarily 36px

Homework

Extend you existing website by the following elements:

• rework xour last code and remove any errors
• structure your website in header, footer and main area
• Write an user friendly formular for selecting and register for and event
• write an CSS rules for the header, footer and main content to give them different background colors

Thanks !