intro to html and css pt1


Ashley Williams

Monday, 13 May 2013

get to know me



The BEST way to get in touch with me is Twitter,
followed by email.

All of this info + more is available at:

what do i do?



I get excited about open source software, public data, and clever code.

I work (mostly) in ruby and javascript.

Who are you?


  • Name
  • Job/Hobby/Activity
  • Your background in Internet technologies
  • Do you have a web presence currently?
  • Your interest in learning HTML/CSS
  • You goals for this class

Class materials



Browsers:
Resources:

Class objectives


  • Explain the client/server relationship
  • Understand the roles of HTML, CSS, JS in creating a site
  • Write clean, semantic, HTML markup
  • Create DRY CSS styles
  • Properly format images for the web
  • Know what Web Standards are and how they affect web development
  • Incorporate web fonts 

Class overview

Part 1:
  • Class Introduction and Information
  • How the Web Works: Clients, Servers, and Browsers
  • HTML basics
  • CSS syntax
Part 2:
  • The Box Model
  • Positioning: Block vs Inline elements
Part 3:
  • D.R.Y. CSS and best practices
  • Web Typography

Class overview

Part 4:
Optimizing Images for the Web
Embedding Videos
Sprites

Part 5:
CSS3, Browser Flags and Web Standards
Boilerplates and Resets





how the web works

Clients, Servers, and Browsers! Oh My!

Clients and servers


  • A server is a computer where the files for a website are "hosted". 
  • A client requests information required to "visit" the website by sending a request to the server via HTTP from a browser. 

hosting and domains


  • Hosting is where the files for your website are stored
  • A domain is the named location for those files

You do not need to get hosting and a domain from the same place!

front-end? back-end?


Front end developers write code that is processed on the CLIENT, in the browser
  • HTML, CSS, JS

Back end developers write code that is processed on the SERVER
  • Ruby, Python, PHP... and sometimes JS!
  • Databases

Frameworks: Rails(Ruby), Django(Python), Wordpress(PHP)

Browsers


The code we are going to write is "front-end" and is processed on the client by the browser

  • Different browsers process code in different ways
  • Web standards exist to help browsers agree what they should process and in what way
  • One of the trickiest parts of writing good HTML and CSS is dealing with how different browsers work




html basics

Tag Syntax, Attributes, Nesting

what is html?


H yper   T ext   M arkup   L anguage

  • A markup language NOT a programming language
  • A set of tags that describes and organizes content


HTML is for CONTENT
CSS is for STYLES
JAVASCRIPT is for INTERACTION

creating an html file


  • You can make an html file in any simple text editor
  • We are going to use Sublime Text 2

TO-DO:
  1. Open a text editor and create a new file
  2. Save the file with the extension ".html"
  3. Open the file in a browser of your choice

html tags


  • Tags come in sets of 2, and opening tag and a closing tag (for the most part, some tags break this rule)
  • Each tag is enclosed in angle brackets (<keyword>)
  • A closing tag has a back slash (</keyword)

Examples:
<header> My Site </header>
<p> This is a paragraph about my site </p>
<a> Next page </a> 
<div> <h1> My heading </h1> </div>

nesting

  • Content or other tag sets go in between the tags. This is called nesting
  • We indent to help make this easier to read

Example:
<header>
   <h1> My Page </h1>
</header>
<div>
   <p>Hello world!</p>
   <a>Email me</a>
</div>

html tag attributes


  • Inside the opening tag, you can put attributes.
  • Attributes are used to give more information to the tag, as well as to help identify it.
  • Attributes are lowercase words followed by an equal-sign, followed by value(s) surrounded by quotes.
<keyword attribute="value">

Examples (attributes are in blue):
<a href="http://google.com"></a>
<img src="mypic.jpg"/>
<div class="panel" id="about_me"></div>

html elements


  • A tag, its attributes, and its content is called an element

anatomy of a website


<!DOCTYPE html>
<html>
   <head></head>
   <body></body>
</html>

  • Every site starts with a doctype declaration. This indicates what web standards you plan to use.
  • Then, inside an HTML tag you have a head and a body
  • The head is where info about your page goes
  • The body is where the content for your page goes

The <head> section


  • Contains the title of your page in <title></title> tags
  • Contains links to all external files
  • Could have internal stylesheets or javascript

Example:
<head>
   <title> My Website </title>
   <link href="styles.css" type="text/css" rel="stylesheet"/>
   <script src="scripts.js"/>
   <styles>
        h1 { font-size: 100px; }
   </styles>
</head>




beginning html tags

Headings, Divs, Lists, Links, and Images

headings

https://developer.mozilla.org/en-US/docs/HTML/Element/Heading_Elements
There are 6 heading tags available:
h1, h2, h3, h4, h5, and h6

  • Every browser default styles these elements to have a certain size and style. 
  • You want to use these tags to mark up the key titles that organize page's content
  • Generally they decrease in size and are styled bold.
  • You can override default browser styles with CSS.

Example:
<h2> A sub-heading </h2>

divs

https://developer.mozilla.org/en-US/docs/HTML/Element/div
  • A div should be used to contain a set of information or elements that is similar
Example: use a div to contain elements related to a header: 

<div class="header">
   <h1> My page </h1>
   <img src="logo".png/>
   <ul class="nav">
       <li>About</li>
       <li>Contact</li>
   </ul>
</div>

lists

https://developer.mozilla.org/en-US/docs/HTML/Element/ul
https://developer.mozilla.org/en-US/docs/HTML/Element/ol
  • Lists come in 2 types: ordered and unordered
  • Ordered lists use numbers, <ol></ol>
  • Unordered lists use bullets, <ul></ul>
  • Both list types contain list items, <li></li>

Unordered lists are used for a lot of things you might not think of immediately, for example:
  • Gallery Carousels
  • Navigation Bars
  • Slideshows

links

https://developer.mozilla.org/en-US/docs/HTML/Element/a
  • Links are made using anchor elements, <a></a>
The href attribute tells the anchor what content it should load
  • Externally: any URL e.g. href="http://google.com"
  • Internally: any relative URL, e.g. href="about.html"
  • Internally: the id attribute of an element on the page, e.g. href="#gallery" href="about.html#gallery"

The target attribute tells an anchor where to show the new content.
   target="_blank"

options: "_self" (default), "_blank","_parent","_top"

images

https://developer.mozilla.org/en-US/docs/HTML/Element/img

  • Images are in an <img /> tag
  • This tag does NOT need a closing tag. It is a self-closing tag. This means you just put a / before the closing angle bracket to close it.
  • The src attribute holds the address of the image.

Example:
<img src="mypic.jpg" />




debugging tools

Browser Dev Tools, View Source, Inspect Element 

browser Developer tools


Safari:
  •  Safari > Preferences > Advanced
  • Check "Show Develop Menu in Menu Bar"

Chrome:

Firefox:

view source

Page source is the original code delivered to the browser from the server.

right click, "Page Source"

Safari/Chrome: 
  • View > Develop > Show Page Source
  • option + command + U 

Firefox:
  • Tools > Web Developer > View Page Source
  • command + U

inspect element


Inspect Element allows you to view elements from the page source as they have been rendered by the browser in real time.


right click, "Inspect Element"



exercise #1





CSS Basics

Declarations, Selectors, Attributes

What is css?

C ascading   S tyle   S heets

  • CSS is also NOT a programming language
  • CSS is a set of declarations
  • Declarations assign values to attributes of specific elements in your HTML

HTML is for CONTENT
CSS is for STYLES
JAVASCRIPT is for INTERACTION

where does css go?


There are 3 places that CSS can go:
  • Inline, e.g. <div styles="body { color: red; }"></div>
  • Internal, e.g
          <head>
                <styles>
                       body { 
                            color: red; 
                       }
               </styles>
          </head>
  • External,e.g. <link href="mystyles.css"/> **BEST

creating a css file


Just like our HTML documents, CSS documents can be made with any simple text editor.

TO-DO:
  1. Open your text editor and create a new document.
  2. Save it with the extension ".css"
  3. Link it to your HTML file by putting an element in the head: <link href="mystyles.css"/>
  4. Open your HTML file in a browser of your choice

css syntax

A CSS declaration has several parts:
  • First, a selector which tells the CSS which HTML elements you want to style
  • This is followed by an open and closed curly bracket {}
  • Inside the curly brackets, you put sets of attributes: First the attribute name, then a colon :, then the attribute value, then a semi colon ;

Example:
    h1 {
        background-color: #ffffff;
    }

selectors

There are three "types" of selector parts that you can mix and match to build a selector:

  • Element Selectors: written plainly, e.g. h2
  • Class Selectors: start with a period ., e.g. .bttn
  • Id Selectors: start with a hash #, e.g. #about


advanced selectors

You apply style to multiple selectors at once by separating them with a comma:
//this styles both h1 and h2 elements
    h1, h2 {
         padding: 10px;
    }

You can make compound selectors by simply separating with a space:
//this styles all p elements inside the element with id "about"
    #about p {
        color: #BEBEBE;
    }  



beginner css 

Text, Links, Border, and Background

STYLING TEXT

HTTPS://DEVELOPER.MOZILLA.ORG/EN-US/DOCS/CSS/GETTING_STARTED/TEXT_STYLES

  • color      color: #ffffff;
  • size         font-size: 100px;
  • font        font-family: "Helvetica", sans-serif;
  • style       font-style: italic;

STYLING LINKS

HTTPS://DEVELOPER.MOZILLA.ORG/EN-US/DOCS/USEFUL_CSS_TIPS/LINKS

  • a:link           an unvisited link
  • a:visited    a visited link
  • a:hover      link with cursor mouseover
  • a:active     link at moment when clicked


Browsers have default styles for links.
  • text-decoration: none //remove underline

BORDER AND BACKGROUND

HTTPS://DEVELOPER.MOZILLA.ORG/EN-US/DOCS/CSS/BORDER
HTTPS://DEVELOPER.MOZILLA.ORG/EN-US/DOCS/CSS/BACKGROUND

  • background: url("myimage.png") red no-repeat center;
  • border: 2px dashed black;

The above are examples of CSS shorthand

CSS shorthand is a way to assign several related attributes in a single declaration

LEARNING MORE!
There are a lot of attributes to use!
To explore more of them check out Mozilla Developer Network's great reference:

HTTPS://DEVELOPER.MOZILLA.ORG/EN-US/DOCS/CSS

A good way to learn CSS is to read CSS. 
Twitter Bootstrap is a UI framework that gives you pre-styled elements. Download it and read the CSS alongside the documentation to see how they achieve certain styles.

HTTP://TWITTER.GITHUB.IO/BOOTSTRAP/


homework

  1. Install Safari, Firefox, and Chrome on your home computer
  2. Install Sublime Text 2 on your home computer
  3. Create a page called index.html
  4. Create a page called styles.css and link it to your index.html
  5. Practice HTML and CSS basics by creating a profile for yourself using these two files
  6. You should create a header, some sort of navigation, a div with a picture and a paragraph, and a footer

Made with Slides.com