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"

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:


web standards project


Developers revolted and lobbied hard for standardization


world wide web consortium
(W3)


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

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)

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

CSS Resets


Browsers interpret specifications, so there are discrepancies with rendering


CSS methodologies




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


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?


http://xiw.cx/WEB-LANG

HTML, CSS, and Javascript: The Languages that Power the Web

By welch canavan

Made with Slides.com

HTML, CSS, and Javascript: The Languages that Power the Web

  • 1,606

More from welch canavan