Intro to HTML/CSS

Quiz Part 1

Which tag is used to create a paragraph?

<p>
<link>
<a>
<america>

Answer: <p>

Quiz Part 2

What are the two tags that nest directly within the <html> tags?

Answer: <head> and <body>

Element: Heading

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

* Heading number indicates hierarchy, not size. Think of outlines from high school papers

Example: Headings

Formatted text

<p>
    Here is a paragraph with <em>emphasized</em> text and <strong>important</strong> text.
</p>

Here is a paragraph with Emphasized text and Important text.

* Notice: em and strong are meant to indicate meaning through style. If you want to have italicized for appearance and not to communicate meaning, you should use CSS.

Enough Talk: Let's Code!

Let's add some content to our site!

Add one of each level of heading with 1-2 short paragraphs of text below each heading.

Use <strong> and <em> within a few paragraphs.

Anatomy of an HTML element

Attribute
- Provides additional information about the HTML element
- Class, ID, language, style, identity, source
- Placed inside an opening tag, before the right angle bracket.

Value

Value is the value assigned to a given attribute.
Values must be contained inside quotation marks.

<div id="copyright">©BizStream Academy logo 2016</div>
<img src="my_picture.jpg" />
<a href="http://www.bizstreamacademy.com">BizStream Academy</a>

Element: Link

Links have three components

Tag: <a></a>
Href attribute: "http://www.bizstreamacademy.com"
Title attribute: "BizStream Academy"

<a href="http://www.bizstreamacademy.com" title="BizStream Academy">BizStream Academy</a><

BizStream Academy

The <a> tag surrounds text or images to turn them into links

Link Attributes

Links can have attributes that tell the link to do different actions like open in a new tab, or launch your e-mail program.

<a href="home.html" target="_blank">Link Text</a>

Link opens in a new window/tab with target="_blank"

<a href="mailto:sponsorships@bizstream.com">E-mail us!</a>

Adding mailto: directly before the email address means the link will open in the default email program.

Relative vs. Absolute paths for links & images

Relative
Relative paths change depending upon the page the link is on.
- Links within the same directory need no path information. "filename.jpg"
- Subdirectories are listed without preceding slashes. "img/filename.jpg"
Absolute
- Absolute paths refer to a specific location of a file, including the domain. "http://www.bizstreamacademy.com/returning"
- Typically used when pointing to a link that is not within your own domain.

Enough Talk: Let's Code!

Let's add links to our site!

Add links that open in the same window, a new window and link to an e-mail address.

Element: Image

Images have three components

Tag: <img />
Src attribute: "https://raw.githubusercontent.com/misterhamm/bzsa-featured-html-css-intro/master/img/bzs-academy-logo-2015.png"
Alt attribute: "BizStream Academy logo"

<img src="https://raw.githubusercontent.com/misterhamm/bzsa-featured-html-css-intro/master/img/bzs-academy-logo-2015.png"
alt="BizStream Academy Logo"/>

* Notice: This tag is our first example of a stand-alone or "self-closing" element.

Enough Talk: Let's Code!

Let's add a few images to our page.

Be sure to upload your images to your site folder in Editey

We can even turn our images into links.

Element: Unordered and ordered lists

<ul>
<li>List Item</li>
<li>AnotherList Item</li>
</ul>

<ol>
<li>List Item</li>
<li>AnotherList Item</li>
</ol>

Unordered list (bullets)

List Item
Another List Item

Ordered list (sequence)

List Item
Another List Item

Lists: Examples

Lists can be used to organize any list of items.

You'd be surprised how often lists are used in web design.

Enough Talk: Let's Code!

Let's add one of each ordered and unordered lists to our page.

We can make a list of links or even a list of images!

Element: Div

Block level element. Each new div is rendered on a new line.
A division, or section of content within an HTML page.
Used to group elements to format them with CSS.
Apply IDs and Classes to divs to control their styles with CSS.

Div Examples

<div>
     <p>Content</p>
     <p>Content</p>
  </div>

<div id="header">
     <h1>Main Heading</h1>
  </div>

<div class="sub-content">
     <p>Some more content</p>
  </div>

Grouping elements with div

The div tag is used everywhere to group elements together into sections.
You can wrap groups of elements in a div to style them differently.

Comments

You can add comments to your code that will not be seen by the browser, but only visible when viewing the code.

<!-- Comment goes here -->

Comments can be used to organize your code into sections so you (or someone else) can easily understand your code. It can also be used to 'comment out' large chunks of code to hide it from the browser.

<!-- Beginning of header -->
<div> Header Content </div>
<!-- End of header -->
<!--
<ol>
<li>List Item</li>
<li>Another List Item</li>
</ol>
-->

Enough Talk: Let's Code!

Let's add some divs your site to separate content into different sections based off of your wireframe drawings.

Then add comments to organize your divs content.

Character codes

There are character codes for many different characters in many different languages

Delta: δ δ
Copyright symbol: © ©
Grave: &grave; `
An grave a: à à
A full list is available at htmlandcssbook.com

CSS: What is it?

CSS = Cascading Style Sheets

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

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

CSS: What can it do?

All colored text, position, and size

The CSS Rule

selector {
   property: value;
}

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

CSS Syntax

Declarations: Property and value of style you plan to use on HTML element.

Declarations end with a semicolon

Declaration groups are surrounded by curly brackets.

selector {
    property: value;
    property: value;
    property: value;
}

Connecting CSS to HTML

3 ways

"Inline"

"Embedded"

"External"

Connecting CSS to HTML: Inline

<p style="color:red">Some text.</p>

Uses the HTML attribute style.

Difficult to use in large projects

Not preferred.

Connecting CSS to HTML: Embedded

<head>
<style type="text/css">
p {
    color: blue;
    font-size: 12px;
}
</style>
</head>

Inside <head> element.

Uses <style> tag.

Can only be used in one html file

Connecting CSS to HTML: Linked

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

Shared resource for several pages.
Reduced file size & bandwidth
Easy to maintain in larger projects.
Preferred by nerds everywhere!

Enough Talk: Let's Code!

In Editey, create a new CSS file called style.css
Add a link to the file in the head of your HTML file
Add the CSS rule below to the CSS file:

body {
    background-color: yellow;
}

Selector: Element

p {
    property: value;
}

Selects all paragraph elements.

img {
    property: value;
}

Selects all image elements.

CSS Color Values

Your browser can accept colors in many different ways:

Color name (ex. red)
Hexadecimal value (ex. #FF0000)
RGB value (ex. rgb(255, 0, 0))
HSL value (ex. hsl(0, 100%, 100%))

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

Property: Color

The color property changes the color of the text.

p {
    color: red;
    color: #ff0000;
    color: rgb(255, 0, 0);
}

Property: Background-color

The background-color property changes the color of the background.

p {
    background-color: black;
    background-color: #000000;
    background-color: rgb(0,0,0);
}

Enough Talk: Let's Code!

Add some rules to your css file
Change the font color and background color of different types of elements
Try selecting links, paragraphs, and lists

Property: Font-family

The font-family property defines which font is used. Each property can have one or more comma separated values.

p {
    font-family: "Times New Roman";
    font-family: serif;
    font-family: "Arial", sans-serif;
}

Specific font name

Generic name

Comma-separated list

Property: Font-size

The font-size property specifies the size of the font.

p {
    font-size: 12px;
    font-size: 1.5em;
    font-size: 2rem;
    font-size: 100%;
}

Pixels

"em"

"rem"

Percentage

Property: Fonts (shorthand)

p {
    font-style: italic;
    font-weight: bold;
    font-size: 10px;
    font-family: sans-serif;
}

p {
    font: italic bold 10px sans-serif;
}

Enough Talk: Let's Code!

Change the fonts of your page
Try changing the font sizes and styles for different elements
Also try using Google Fonts to add a new font to your site

Questions?

Don't forget your homework!