Intro to:

HTML & CSS

  • HTML

    • Tag syntax

    • ​Author/browse our first HTML page

    • References & Examples

    • HTML activity + sharing

  • CSS

    • 3 types

    • Rule syntax

    • References & Examples

    • Link our web page to a css doc

  • ​​Project + Homework

 

HTML and Tags

  • HyperText Markup Language
     
  • Tags in angle brackets surround content and give it meaning:

     
  • Tags can be nested inside each other:




     
  • Tags can have attributes to add further meaning:
<tag>Content</tag>

<pizza>
   <topping>pineapple</topping>
   <topping>ham</topping>
   <topping>cheese</topping>
</pizza>
<tag attribute="value">Content goes here</tag>

Anatomy of an html tag

<img src="path/to/image/file.jpg" alt="description" />

attribute

value

attribute

value

<h1>This is a Heading</h1>

opening tag     

closing tag

self closing

HTML page structure

  • Saved as text files (.html) readable by browser
  • Doctype - tells the browser which version of HTML to use
  • html - root element that starts & ends a page
  • head - instructions for browser (not visible except <title>)
  • body - all visible content goes here
<!DOCTYPE html>
<html>
  <head>
    <title>Page title goes here</title>
  </head>
  <body>
    Content goes here!
  </body>
</html>

Creating a home for our code

TTS / HTML

FIrst html page

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec metus justo. Aliquam erat volutpat.


<!DOCTYPE html>
<html>
  <head>
    <title>My first awesome web page</title>
  </head>
  <body>
    <h1>Jaime's Page</h1>
    <p>A simple page put together using HTML!</p>
  </body>
</html>

Save as: myfirstwebpage.html

* No spaces! Dashes or underscores are OK :)

HTML Tag

reference

HTML Examples

  • Headings
  • Paragraphs
  • Lists
  • Links
    • relative
    • absolute
    • anchor
  • Images
    • ​relative
    • absolute
  • divs & spans

Open up Sublime and let's play around with some HTML.

Create a brand new page called travel.html 

html activity (~15 min)

  • Open a new file in Sublime and save it as list.html

  • Create a basic html page with a heading + an unordered list of 5 of your favorite restaurants.

  • Open your page in Chrome and holler!

 

My awesome list

<!DOCTYPE html>
<html>
 <head>
   <title>My favorite restaurants</title>
 </head> 
 <body>
   <h1>My faves</h1>
   <ol>
     <li>2 Urban Licks</li>
     <li>Victory Sandwich</li>
     <li>JCT Kitchen</li>
     <li>Bar Taco</li>
     <li>Antico</li>
   </ol>
  </body>
</html>

10 minute break!

CSS

  • Cascading Style Sheet
  • Describes the look and formatting of HTML pages
  • 3 ways to apply: inline, internal and external

 

Inline stylesheets

  • dropped right into HTML code using "style" attribute
  • only styles current element on current page
  • good for troubleshooting
  • avoid whenever possible

<p style="color:red;">This is my snazzy red paragraph!</p>
<p>This paragraph will not be red.</p>

Anatomy of a css rule* 

h1 { color: gray; }

selector     

{      declaration block     }

  property   

    value

* Internal and external stylesheets

Internal stylesheets

  • added to <head> between <style> tags
  • only styles elements on current page
  • avoid whenever possible
<!DOCTYPE html>
<html>
  <head>
    <style>
      h1 {
          font-size:50px;
          text-align: center;
        }
    </style>
  </head>
  <body>
    <h1>This is my huge headline</h1>
    <p>Supporting paragraph. Very informative.</p>
  </body>
</html>

External stylesheets

  • completely separate file, linked to in <head> 
  • reusable styles contained in 1 document
  • best practice - use this one!
<!DOCTYPE html>
<html>
  <head>
     <link rel="stylesheet" href="assets/stylesheets/styles.css">
  </head>
  <body>
    <p>This is my snazzy red paragraph!</p>
  </body>
</html>
body {
  width: 1000px;
  margin: auto;
}

p {
  color: red;
  text-align: center;
}

HTML

CSS

  • HTML tags  such as p, h1, h2, body, etc.
     
  • No extra markup necessary
     

Types of CSS Rules

p {
  color: yellow;
  text-align: center;
}

element selector

<p>
  Something Awesome!
</p>

Types of CSS Rules

#top {
  background:gray;
  text-align:center;
}

id selector

  • can only use once per page
     
  • use id attribute in HTML tag
<div id="top">
  Something Awesome!
</div>
  • can be used many times per  page
     
  • use class attribute in HTML tag

Types of CSS Rules

.blue-text {
  color: blue;
  text-decoration: none;
}

class selector

<p class="blue-text">
  Something Awesome!
</p>

<p class="blue-text">
  Something else awesome!
</p>

CSS properties reference

 

CSS activity 

  • Open a new file in Sublime and save it as list-styles.css

  • Change the color of your unordered list of 5 restaurants with an element selector.

  • http://html-color-codes.info/

  • Change your favorite to a different color with a class selector.

  • Share with the class!

 

My Awesome list

<!DOCTYPE html>
<html>
  <head>
     <title>My favorite restaurants</title>
     <link rel="stylesheet" href="assets/stylesheets/list-styles.css">
  </head>
  <body>
    <ul>
      <li>2 Urban Licks</li>
      <li>Victory Sandwich</li>
      <li>JCT Kitchen</li>
      <li>Bar Taco</li>
      <li class="fave">Antico</li>
    </ul>
  </body>
</html>
li {
  color: blue;
}

.fave{
  color: red;
}

HTML

list.html

CSS

list-styles.css

10 MINUTE BREAK

The Browser

 

View Source - Allows you to see what html, css or javascript has been sent to the browser


Inspect Element - Identifies the markup that is presenting a specific element on the page
 

 

Download and install Chrome at chrome.com

Most developers use Chrome because it comes pre-installed with a set of developer tools that make debugging and troubleshooting easier.

Project + homework

Create a 2 page personal website


index.html

  • link to about.html
  • write a "blog post" about anything you like
  • include some images and heading tags
  • style it up! (styles.css)

 

about.html

  • link to index.html
  • write your bio
  • include at least 1 photo of yourself
  • style it up (styles.css)

OPTIONAL TOPICS

 

 

Made with Slides.com