Intro to

HTML & CSS

Objectives!

  • Describe the purpose of HTML and identify common tags
  • Give HTML elements more description with attributes
  • Introduce CSS & common styling properties
  • Use HTML & CSS to create a basic page from scratch with basic styling

What is HTML?

HyperText Markup Language

What is HTML?

CONTENT!

STRUCTURE!

What is HTML?

Tell your neighbor in your own words the purpose of HTML

HTML Syntax

HTML Syntax

<p> The p tags plus this content is an element. </p>

Opening tag

Closing tag

Element

HTML Syntax

<img src="../img/stuff.jpg" alt="img is a self-closing tag" >
  • br
  • hr
  • img
  • input
  • link

Common Self-closing Tags

Is this an element?

HTML Syntax

Resources

Exercise!

  • Start a new Codepen pen. 
  • Make an unordered list all of the cities you've lived in.
  • Make an ordered list of the top three cities you would like to visit.
  • Add a heading before each list that says what the list is.
  • Add a description under the items of each list explaining how you came to live in each of those cities, and why you would like to visit those cities respectively.

HTML Attributes

Additional information attached to an element.

"id" and "class" attributes are typically used to generate content or to act as a reference for other technologies like CSS & JS.

<img src="./resources/stuff.jpg" alt="Write something descriptive">
<p class="lead">Content content content</p>
<h1 id="brand">Apple</h1>
<input type="password"
       required
       minlength="8"
       >

HTML Attributes

Now add appropriate attributes to 3 elements on your codepen

HTML Structure

<ul>
    <li>List item #1</li>
    <li>List item #2</li>
    <li>List item #3</li>
</ul>

Nesting Elements

<nav>
    <ul>
        <li><a href="http://slides.com">Home</a></li>
        <li><a href="http://google.com">About</a></li>
        <li><a href="https://developer.mozilla.org">Contact</a></li>
    </ul>
</nav>

Semantic HTML

Don't be like this guy.

Semantic HTML

Which of these is more intuitive?

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Stuff and Things</title>
    </head>
    <body>
        <div>
            <h1>Big Header</h1>
        </div>
        <div>
            <p>
                <b>Middle Content!!</b>
            </p>
        </div>
        <div>
            <p>
                © 2016
            </p>
        </div>
    </body>
</html>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Stuff and Things</title>
    </head>
    <body>
        <header>
            <h1>Big Header</h1>
        </header>
        <main>
            <p>
                <strong>Middle Content!!</strong>
            </p>
        </main>
        <footer>
            <p>
                © 2016
            </p>
        </footer>
    </body>
</html>

Semantic HTML

Why use semantic HTML?

  • Readability
  • Accessibility
  • SEO 

Semantic HTML

Examples of structural semantic HTML

<header>

<nav>

<main>

<aside>

<section>

<footer>

<figure>

More here!

Semantic HTML

Examples of text markdown semantic HTML

<strong>

<em>

<figcaption>

<summary>

<date>

<time>

 

<details>

<pre>

More here!

Block-level vs. Inline elements

Elements are usually either "block-level" elements or "inline" elements.

Block-level

  • occupies an entire row space of its parent element (container), thereby creating a "block."

Inline

CSS

CSS

p {
    color: red;
}

p {
    color: blue;
}

Cascading Style Sheets (CSS) is a language that add style to the HTML. 

 

Cascading is key here. The file is read top to bottom. 

If you style one element twice, it will accept the second styling as the truth.

CSS

p {
    color: red;
}

p {
    color: blue;
}

Syntax

Targeted Element

Property

Value

CSS

Targetting IDs and Classes

Classes

IDs

.red-text {
    color: red;
}

#intro {
    color: red;
}

CSS

Common Properties

  • color: color of text
  • background-color: background of an element
  • text-align: easily center, left or right justify text
  • margin: space outside the element
  • padding: space inside the elements container before getting to content

CSS

Resources

CSS

EXERCISE

Review!

What is the purpose of HTML?

<p>

Tag or element?

Example of a self-closing tag.

What is the primary difference between an id and a class?

Why do we use semantic HTML?

What is the difference between block-level and inline elements?

How do you know your HTML is valid? 

Run it through a validator!

vALERIE kRAUCUNAS

valeriekraucunas@gmail.com

vkraucunas.com

Made with Slides.com