A markup language like LaTeX, Markdown, restructuredText, etc.
Used to describe the meaning of blocks of text to web browsers; i.e. describe and define the content of a web page
We'll focus on HTML5
A stylesheet language used to describe the presentation of a document written in HTML
Used to make web pages pretty (or incredibly ugly)
CSS2.1 is current, CSS3 is coming soon
A programming language that runs in web browsers
Used to change web pages on the fly, usually in response to user actions, without a (full) round-trip to the server to refresh the page
Not to be confused with Java which is almost entirely a different thing
ES5.1 is supported by modern browsers (since ~2012), ES6 was published in 2015
Not all versions of all browsers support all features of any of HTML, CSS, or JS :-(
Modern browsers include "Developer Tools" that let us inspect and change the presently loaded page
The zip file stored at https://eoas.ubc.ca/~dlatorne/swc/workouts/14jul16-html-css-js/14jul16-html-css-js.zip contains the source code of this notebook, and the files used below. The file names for each of the step appear in parenthesis after the file or file fragement in the cells below.
Use your editor to create a file called pg0.html
that contains:
<!DOCTYPE html>
<html>
Hello world!
</html>
(file: pg0.html
)
Open a new tab in your browser and use the File > Open File...
menu item in your browser to load pg0.html
.
Congratulations! You created a web page.
Notice that no servers were harmed in the creation of this web page.
It causes even browsers that don't presently support HTML5 to enter into standards mode, which means that they'll interpret the long-established parts of HTML in an HTML5-compliant way while ignoring the new features of HTML5 they don't support.
<html>
is called a tag<html>
, and a closing part: </html>
(though some tags are self-closing)
Tags tell the browser how to interprete the stuff between their opening and closing
Tags can be nested inside one another
Everything transmitted across a network is just a stream of bytes
Browsers us the tags that they find in the stream to decide what to do with the bytes that the tags contain
Use your editor to add a line of text after "Hello world!" in your pg0.html
file:
<!DOCTYPE html>
<html>
Hello world!
This is my web page.
</html>
(file: pg1.html
)
Refresh the browser tab that you loaded pg0.html
in.
What happened to the linebreak?
Browsers generally flow the contents of a tag across and down the page so that the text can change fluidly according to the size of the page.
Some (but not all) tags produce breaks between blocks of text.
Try making copies of your pg0.html
file with some new tags:
<!DOCTYPE html>
<html>
<pre>
Hello world!
This is my web page.
</pre>
</html>
(file: pg2.html
)
or
<!DOCTYPE html>
<html>
<p>Hello world!</p>
<p>This is my web page.</p>
</html>
(file: pg3.html
)
or
<!DOCTYPE html>
<html>
<h1>Hello world!</h1>
<p>This is my web page.</p>
</html>
(file: pg4.html
)
Notice that the names of the tags describe (sometime a little mysteriously) their content:
<pre>
means pre-formatted: the browser didn't ignore the linebreak, or the leading spaces<p>
means paragraph: the browser added vertical whitespace above and below the blocks of text<h1>
means heading level 1: the browser changed the appearance of the text to make it a headingThat's the basic idea of HTML: Text contained in tags that describe how the text should be interpreted.
There's lots more tags and lots more rules (see the HTML resources above), but that's the crux.
Open the about.html
file in your browser and your editor.
It is an edited version of some of the content from https://resilient-c.ubc.ca/about.
There's a bunch more tags in the file that define:
There also a <head>
tag and a <body>
tag.
The <head>
tag is where we tell the browser things about the page that we want it to render:
The <body>
tag contains the content that will actually appear on the page.
Some of the tags have extra stuff in the angle brackets like:
<link href="https://resilient-c.ubc.ca/static/img/favicon.ico" rel="shortcut icon">
The extra stuff are are called attributes.
Right-click somewhere on the about.html
page in your browser
and select Inspect Element
from the context menu.
The web developer toolbox should open at the bottom of the browser window.
If that doesn't work, try opening it from the Tools menu of your browser.
The browser's web developer tools let you inspect and change a lots of things about the page that is presently loaded in the browser.
The about.html
in your browser doesn't look much like https://resilient-c.ubc.ca/about,
does it?
It has the content, but not the presentation style.
The browser does provide some basic styling to make headings different from paragraph text, for example, but CSS gives us the power to control the styles in detail.
The simplest way is to add a style
attribute to a tag.
Got to the first <h3>
tag on line 19 in the about.html
file in your editor and change it to:
<h3 style="color: magenta;">What is the goal of the Resilient-C platform?</h3>
(file: about0.html
)
Save the file, and reload the page in your browser.
Use the web developers tools element inspector (right-click) to check out that heading.
Edit the value of the color
property in the style rules section of the tools frame.
If we want to change the text colour of all of the <h3>
tags
we could add a style
attribute to every one,
but that would be boring and brittle.
(What happens if you forget to add the style
attribute when you add
a new <h3>
heading to the page?
What happens if you want to change the colour of the <h3>
tags?)
Instead, we can add a style rule for the whole page in the <head>
section:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width initial-scale=1">
<title>
Resilient-C::About
</title>
<link href="https://resilient-c.ubc.ca/static/img/favicon.ico" rel="shortcut icon">
<style type="text/css">
h3 {
color: darkgreen;
}
</style>
</head>
(file: about1.html
)
Save the file, and reload the page in your browser.
Why didn't the first <h3>
heading change colour?
Inspect that heading and a different one. You should start to be able to see why CSS means Cascading Style Sheets.
So, we solved the problem of not having to write the style for every tag
by putting a style rule in the page <head>
.
What if our web site has 5, or 10, or 50, or 100, or more pages?
Wouldn't be nice to put the style rules in a separate file?
Use your editor to create a new style.css
file containing:
h3 {
color: darkgreen;
}
(file: style.css
)
Save that file, and change the <head>
section of your about.html
file to:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width initial-scale=1">
<title>
Resilient-C::About
</title>
<link href="https://resilient-c.ubc.ca/static/img/favicon.ico" rel="shortcut icon">
<link rel="stylesheet" media="screen" href="style.css">
</head>
(file: about2.html
)
Save the file, and reload the page in your browser.
We don't always want to apply styles to all of the tags on a page or across a site.
CSS has the context of selectors that allow us to hook styles to tags with specific attributes.
The simplest is the class
selector.
Add a new style rule to your style.css
file:
.highlight {
background-color: yellow;
}
(file: style1.css
)
The dot in front of highlight
is the CSS syntax to apply the style only to tags
that have a class
attribute with the value highlight
.
.highlight
is called a CSS selector.
Add a class
attribute with the value highlight
to one of the <p>
tags in about.html
:
<p class="hightlight">
(file: about3.html
)
Save both files, and reload the page in your browser.
We'll use CSS selectors again below in the context of JavaScript. Selectors can be used to access a variety of tag attributes and scopes. Check out the CSS cheat-sheets for more details of CSS selector syntax.
Now we know how to apply styles to tags, and how to separate the description of how web pages are styled (presented) from their content and description.
Separation of content and presentation is a key concept in web page design.
It's not a new concept though. Tools like TeX and LaTeX and others before them do it to.
JavaScript (js for short) is the programming language that is built into all web browsers. It can be used to change the page that is loaded in the browser without having to request an a new version of the page from the server. In-browser changes are often much faster than server requests. That makes the page feel faster and more dynamic.
The jQuery JavaScript library makes it very easy to write JavaScript code that applies to web page elements in the same way that CSS styles rules are applied to them, via CSS selectors syntax.
We'll use an HTML button tag, jQuery, and Javascript to add a button to our about.html
page that lets us turn the highlight
style we added above on and off.
Add a button somewhere near the top of your about page:
<h2>About the Resilient-C Project</h2>
<button id="highlighter">Show/Hide Highlights</button>
and change the highlight
class on the tags that you want to hightlight to highlight-this
:
<p class="highlight-this">
At the bottom of the file, just before the </body>
closing tag add:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
jQuery.noConflict();
jQuery(document).ready(function() {
jQuery("#highlighter").on("click", function() {
jQuery(".highlight-this").toggleClass("highlight")
});
});
</script>
(file: about-js.html
)
Note: You will usually see jQuery code written without the jQuery.noConflict();
statement
and $()
used instead of jQuery()
.
We can't do that here because Jupyter Notebook uses jQuery and using $()
in the example above conflicts
with that and doesn't render properly.
Save the file, and reload the page in your browser.
The outer function:
jQuery(document).ready(function() {
...
});
says, "When the browser tells us that the web page document is ready, do this stuff." By "ready" we mean, all of the content has been delivered by the server(s).
The next level function:
jQuery(document).ready(function() {
jQuery("#highlighter").on("click", function() {
...
});
});
says, "When the tag with the id
attribute highlighter
generates a click
event, do this stuff."
#
is the CSS selector syntax for id
attributes,
similar to how .
is the syntax for class
attributes.
Finally, the inner-most function:
jQuery(document).ready(function() {
jQuery("#highlighter").on("click", function() {
jQuery(".highlight-this").toggleClass("highlight")
});
});
says, "Toggle (i.e. add or remove) the highlight
class on all of the tags that have the highlight-this
class".
The example above is pretty trivial. JavaScript and CSS are at the heart of dynamic web sites that can sometimes almost feel like programs running on your computer; sites like Gmail, Google Maps, and Google Drive.
They are also at the heart of sites with incredibly bloated pages that take forever to load like the New Your Times, and all sorts of nefarious ad serving and tracking techniques.
It turns out that, for many of us, good visual design is hard. And even for those with good design eyes, creating a consistent, stable collection of CSS style rules is hard too.
Fortunately some people who know how to do those things well have shared their work as CSS frameworks. There are many. We'll take a quick look at Bootstrap. It provides a whole bunch of CSS classes, and some JavaScript functions that you can learn to use to make web pages look good and behave well.
The about-bootstrap.html
is part of the https://resilient-c.ubc.ca/about page that
shows Bootstrap markup in use.