HTML, CSS, and Javascript

THE LANGUAGES THAT POWER THE WEB

http://xiw.cx/WEB-LANG

HTML — structure/meaning

CSS — presentation

Javascript — interaction

WORLD WIDe web

"a system of interlinked hypertext documents that are accessed via the Internet"

- wikipedia

SERVER

Any computer with software that allows it to serve files according to the standards defined by the internet protocol suite

servers are really boring

browsers

Software that allows you to browse the world wide web

by interpreting files served by servers

hypertext markup language
(html)

A simple, declarative language that provides

structure and semantic meaning for content

Originally built by scientists,
used by military

Invented by CERN, funded by DARPA

A flexible format for sharing information

<html>
  <head>
    <!-- Document meta information -->
  </head>

  <body>
    <!-- Document content -->
  </body>
</html>

Books impart meaning with visual cues

html provides meaning for computers

<h1>Recipe Name</h1>
<h2>Recipe Description</h2>

<section>
  <h1>Recipe Ingredients</h1>

  <ul>
    <li>Ingredient 1</li>
    <li>Ingredient 2</li>
    <li>Ingredient 3</li>
  </ul>
</section>

<section>
  <h1>Recipe Instructions</h1>

  <ol>
    <li>First instruction</li>
    <li>Second instruction</li>
  </ol>
</section>

<section>
  <h1>Recipe Notes</h1>
  
  <p>Additional instruction</p>
</section>

HTML PROVIDES MEANING FOR COMPUTERS

<h1>Recipe Name</h1><h2>Recipe Description</h2><section><h1>Recipe Ingredients</h1><ul><li>Ingredient 1</li><li>Ingredient 2</li><li>Ingredient 3</li></ul></section><section><h1>Recipe Instructions</h1><ol><li>First instruction</li><li>Second instruction</li></ol></section><section><h1>Recipe Notes</h1><p>Additional instruction</p></section>

browser wars

Early on browser vendors thought the way to succeed was to build

proprietary features. This lead to stupid things like this:

<blink>

web standards project

Developers revolted and lobbied hard for standardization

http://www.webstandards.org/

http://5by5.tv/webahead/41

world wide web consortium
(W3)

The official, open, horizontal organization that creates web standards.

http://www.w3.org/

divitis

<div><div><div>A thing</div></div></div>
<div>  <div>
    <div>
      <div>
        Another thing      </div>
    </div>
  </div>
</div>

html5 html

Even more semantic power


    <header>
    <nav>
    <main>
    <article>
    <aside>
    <footer>

good html helps accessibility

The blind, sight impaired, and dyslexic can use screen readers to browse the web

good html helps with distributed content

(Flipboard, RSS, Pocket)

http://alistapart.com/column/the-future-is-unevenly-superdistributed

good html helps with search engine optimization
(SEO)

It can helps web crawlers prioritize content

<body>  <article>
    <h1>The title of the article</h1>
    
    <p>The content of the article</p>
  </article>
  <aside>
    <p>Something not as relevant</p>
  </aside>
</body>

html resources

Jen simmon's "love letter to html"

cascading style sheets

(css)

A declarative language that gives unique presentation to content

CSS Inline

 <h1 style="color: red">Headline</h1>

Internal css

<html>
  <head>
    <style>
    
      h1 {
        color: red;
      }

      h2 {
        color: blue;
      }

    </style>
  </head>

  <body>
  </body>
</html>

External css

<html>
  <head>

    <link rel="stylesheet" href="style.css">

  </head>
  
  <body>
  </body>
</html>

CSS Selectors

HTML

<h1 id="title">Title</h1>

<h2 class="subtitle">Subtitle</h2>

<p>Something else</p>

CSS

#title {
  color: red;
}

.subtitle {
  color: blue;
}

p {
  color: green;
}

css specificity

different selectors and combinations or selectors have different weights

http://cssspecificity.com/

CSS Resets

Browsers interpret specifications, so there are discrepancies with rendering

Eric Meyer Reset

Normalize.css

CSS methodologies

Object Oriented CSS (OOCSS)

Scalable Modular Architecture for CSS (SMACSS)

Block Element Modifier (BEM)

CSS Preprocessors

(the only ones that matters)

Sass can help with the practical and the impractical

Autoprefixer, handles "vendor prefixes"

javascript

aka Ecmascript

The single functional programming language supported by all web browsers

to allow interaction with content

javascript can use logic

if/then
if/else
while
for each

javascript is used for...

...submitting form information in to databases

...communicating between systems

...loading content dynamically

...making changes to content after the initial load

...MUCH, MUCH more

including javascript

<script src="/path/to/lib/javascript.js"></script>

document object model
(dom)

the browser's interpretation of your initial

HTML that can be augmented by Javascript

http://css-tricks.com/dom/

jquery

jquery makes dom manipulation
with javascript easier

adding a class with Javascript

if (el.classList)
  el.classList.add(className);
else
  el.className += ' ' + className;

adding a class with jQuery

 $(el).addClass(className);

QUESTIONS?