Intro to HTML & CSS

The web is waiting.

Brought to you by Girls in Tech Milwaukee and Dev Bootcamp

Hi everyone!

Some "rules" for today:

• We are here to support your learning!
• Ask every single question you have.
• Take advantage of the amazing person next to you!
• If you want to do it, do it. Have fun with this.

Welcome!

Let's get to know each other!

• What's your name, and who are you?
• What do you want to get out of this session?
• What's something quirky about you?

Outline

• What are HTML and CSS?
• Exploration of an HTML element
• Common HTML elements
• Breakout - Build a site
• Explanation of CSS
• Breakout - Improve your site
• Positioning with CSS
• Breakout - Make your site truly awesome

Disclaimer!

HTML and CSS: Together at Last

What is HTML?

HTML is the coding language that lets us build websites and create its content.

What is HTML?

You can right-click and press View Source on any webpage to see this code.

Why use HTML?

It was invented as a language to share scientific papers between universities.

Primarily used in academic papers for layout and providing links to other papers.

Why use HTML?

This method of describing a bunch of information linked to other bunches of information clearly proved useful, as it shaped the Internet into what it is today.

Why use HTML?

HyperText Markup Language is a format for describing your document and links to other documents available on the web.

It provides the structure for your website's content.

My website?

A website is a way to present your content to the world, using HTML and CSS to present that content & make it look good.

Breaking It Down

• You can use a paragraph tag (<p>) for your content.
• By putting your content into a HTML tag, you are giving your website structure.

Your content will go here.

Breaking it down

An element is one individual component of HTML.

It could be a paragraph, a heading, a table, a link, an image, or more.

Your content will go here.

Breaking it down

A tag marks the beginning and end of an element.

              
This is stuff in the tags.
            

Tags always travel in pairs -an opening tag, and a complimentary closing tag.

Breaking it down

Inside the tag, we can put attributes to provide additional information about the element.

We can specify class, ID, the target of a link, the source location of an image and more.

              
Google


            

Attributes go inside the opening tag, just before the right angle bracket.

Values are assigned to an element, and must be contained in quotes.

The structure

The whole structure of an HTML document is elements nested inside each other.

I really enjoyed my mum's Chicken Pot Pie recipe!

Whichever element opens first, closes last.

Common elements: paragraph

We've seen the paragraph (<p>) tag, but here's how it looks in the browser:

Common elements: headings

There are also numbered heading tags, starting from <h1> up to <h6>.

These are used for creating big document headings, and present relative to their numbers:

Common elements: images

<img> tags are used for embedding images into a page.

Because images are cool.

Aside: browser styling

Browsers provide a default styling to HTML elements.

We talked about HTML being a document language before; think of the default styles as Microsoft Word-esque styling.

omg lets build.

http://bit.ly/GITMKEclass

Common elements: links

A link has three main elements:

• <a> - tag.
• href - attribute. (http://devbootcamp.com)
• value - text. (Dev Bootcamp)

            
  Dev Bootcamp
            
          

Common elements: line breaks

Using <br /> lets you add manual newlines into text content.

This is the part when I say I don't want ya I'm stronger than I've been before.

Common elements: unordered and ordered lists

<ul> and <ol> allow you to create lists with bullets or numbers respectively.

<li> adds list items to either. This is where your content lives.

• List item one
• List item two
• List item three

List examples

omg lets build.

What is CSS for?

Cascading Style Sheets.

CSS is a style sheet language that lets you style elements on the page.

CSS works in conjunction with HTML, but is not HTML itself.

What can CSS do?

All colors, positioning, and size.

What does CSS look like?

A CSS Rule

A CSS Rule

• A block of code is a CSS rule
• The rule starts with a selector
• It has sets of properties and values
• A property-value pair is a declaration

            
  p {
    background-color: lime;
  }
            
          

Selectors

            
  p { property: value; }
            
          

Selects all paragraph elements.

            
  img { property: value; }
            
          

Selects all img elements.

Declaration

A declaration lets you modify a characteristic of an HTML element.

            
  p {
    color: white;
    background-color: green;
    font-family: Helvetica;
  }
            
          

Color properties

The 17 standard colors are: aqua, black, blue, fuchsia, gray, grey, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.

omg lets build.

Resources to learn more

• Code Academy
• CodeSchool
• Treehouse

Thanks for having us!