JUNIOR

ACADEMY

8/6/2016

profile review!

html syntax

  • DOCTYPE declaration
  • Opening and closing tags
    • Every tag you open except a select few contain an opening and closing tag
      • ex. <title> (opening) </title> (closing)
      • closing tags contain the "/"
  • Comments
  • Layout
    • Head/body
      • ​What goes inside the head?
      • What goes inside the body?
    • <html> </html> tags

html skeleton

All HTML written should have this structure.

If we don't see it, you did something wrong.

<!DOCTYPE html>
<!-- Tells the browser that this is a HTML Doc.-->

<html> 
<!-- Start of the html Document-->
      <head>...</head> 
      <!-- All settings and link tags go here-->
      <body>...</body>
      <!--All content to be displayed on the page-->
</html>

html syntax

<div> ... </div>

<opening tag> ... </closing tag>

 

Every tag should have an opening and closing tag.

There are a few exceptions though, such as <!DOCTYPE>.

html attributes

<div  id="menu"> ... </div>

  • id is an attribute
  • menu is a value

 

For every attribute, there is always an associated value. Ex: attr="value"

All attributes should be inside of the open tag.

 

A tag can have multiple attributes.                             Separate them like so: <div class="header"  id="menu">

Target Attributes

<div class="menu_bar" id="menu01"> ... </div>

 

Target attributes allow us to select certain elements for styling with CSS or Manipulation with javascript. 

 

  • id: Defines an element that has a unique target value. 
  • class: Defines a series of elements that have the same target value. 
  • https://jsbin.com/wugahij/1/edit?html,css

html common tags

  • <head></head> Should be obvious
  • <body></body> Should be obvious
  • <p></p> Indicates we're beginning a paragraph
  • <h1></h1>, <h2></h2>, etc.
  • <div></div> Divides up the webpage into easier-to-manage divisions
  • <ul></ul> Indicates that the following items are in an unordered list.
  • <ol></ol> Indicates that the items are in an ordered list
  • <li></li> Used to surrounded each item in the ul or ol

example html

<!DOCTYPE html>
<html>
  <!--Settings-->
  <head>
    <meta charset="utf-8">
    <title>My Page</title>
  </head>
  <!--Content shown on page-->
  <body>
    <div class="content_wrapper">  
      <div class="header" id="menu"></div>
      <div class="main_content">
        <button type="button" name="button" id="cl1"> Click Me </button>
      </div>
      <div class="footer"></div>
    </div>
  </body>
</html>

online resource

w3schools

http://www.w3schools.com/

css

  • What is CSS?
    • Cascading Style Sheet
      •  CSS describes how elements must be rendered on screen, on paper, or in other media.
  • HTML tags are referenced in the stylesheet
  • Provides decoration and style to an otherwise dull page
    • Images
    • Backgrounds
    • Colors

css

  • CSS uses selectors and property-value pairs to style the corresponding sections/elements of the HTML page
  • You use different selectors for elements, ids, and classes
    • Let's say you have a div with <div id = "name"> In CSS, you'd reference that div with it's id using:
#name {
    color: blue;
}

#name is the selector, color is the property and blue is the value

css selectors

  • There are different types of selectors for elements, ids, and classes
  • ​Elements are just the plain tags themselves (non-attributes), such as <head>, <body>, <html>.
  • NOTE THE NEW STYLE OF COMMENTS
/*For elements, select with just the name of the element*/
p {
    color: red;
    text-align: center;
}

/*For ids, select using a hashtag*/
#idName {
    text-align: center;
    color: red;
}

/*For classes, select using a dot*/
.className {
    text-align: center;
    color: red;
}

css exercise

  • Now we will beautify your pages using CSS
    • Follow along with us
  • Later on, you will get to use more property/values from w3schools to make more elaborate styles
  • For now, PRACTICE THE SYNTAX AND NAIL PROPER SELECTOR USAGE.
Made with Slides.com