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
HTML, CSS, and Javascript: The Languages that Power the Web
- 1,622