Intro to HTML and CSS
This tutorial provides a general overview to HTML and CSS, no p5.js involved. If you'd like to use the p5.dom library to do some of these things, check out the beyond the canvas tutorial.
HTML is a markup language. It tells the web browser how to structure and display content. Every HTML file is just a text document. If you open it in a text editor you see words and markup, but if you open it in your browser you see formatted text with no markup symbols.
HTML uses a pre-defined set of elements to different types of content. Elements are enclosed by opening and closing tags (with a few exceptions). Tags are short pieces of text indicating the type of content enclosed, surrounded by angle brackets (<>). The closing tag looks just like the opening tag except it has a forward slash (/) after the first angle bracket.
For example, the line below contains a block of text surrounded by paragraph (p) tags, meant to tell the browser that the line should be interpreted as a paragraph.
<p>This is a paragraph.</p>Elements can also contain other elements within them. The tag <em> indicates that the content enclosed within should be italicized.
<p>This is a paragraph with <em>italicized text</em> in it.</p>When rendered (opened) in the browser, the line above will look like this:
This is a paragraph with some italicized text in it.
Elements contain other elements to create a hierarchal structure. This is how an html page is built. The chunk below represents a simple but complete html page.
<!DOCTYPE html>
<html>
<head>
<title>The page title</title>
</head>
<body>
<p>This is a basic page with a paragraph in it.</p>
</body>
</html>The first line tells the browser that it should interpret the text as HTML5.
All of the rest of the content on the page is surrounded by one set of tags. Within this, there are two sections - the head and the body.
The head contains metadata about the page that does not show up on the page itself, for example, the title (as shown above). This section might also include links to other files that are incorporated in the page (more on this later).
The body section is where all the content that shows up on the page goes, like the paragraph element we see above.
The hierarchical, nested structure of HTML is sometimes referred to as the Document Object Model, or DOM. You can think of the page (DOM) as a tree with parents and children — think of a family tree. Being able to access elements of the tree comes into play when we want to manipulate the HTML with CSS or JavaScript.
You can see all the possible tags in the MDN element reference, or see below for some of the most common ones.
-
<html>...</html>start and end HTML -
<head>...</head>head of page, not actual content -
<title>...</title>title of page -
<body>...</body>body of page, where the content goes -
<div>...</div>content section -
<p>...</p>paragraph -
<b>...</b>bold -
<em>...</em>italic -
<!-- ... -->comments
<h1>...</h1> (also h2, h3, h4, etc..) are used for various headings, in decreasing size. If you think of your page like an outline, h1 could be used for the top level section headings, h2 for the secondary headings, etc.
Your browser ignores line breaks in your html. So these two blocks would render the same:
<p>This is a paragraph with no line breaks.</p><p>This is a
paragraph
with no line
breaks.</p>However, you can specify line breaks by using the <br> tag. Note that you do not need a closing tag for the line break tag, since there is no content in between.
<p>This is a<br>
paragraph<br>
with line<br>
breaks.</p>Renders like this:
This is a
paragraph
with line
breaks.
The a tag indicates a link. It also has some extra information between the a and the > character, letting you designate the destination of the link. This extra href field is known as an attribute.
Click on <a href="http://p5js.org">this text</a>.The line above renders as:
Click on this text.
The img tag adds an image to the page. It also contains an attribute to specify the source of the image to display. The img element does not contain any text content or any other elements. Since it is an empty element, it doesn't need a closing tag. Instead, the forward slash from the closing tag is stuck just inside of the > character at the end of the opening tag.
<img src="bubbles.jpg" />The source can be relative to the html file you are working with (above), or it can be a full url (below). In the example above, the bubbles.jpg file would need to be located in the same directory as the html file.
<img src="https://raw.githubusercontent.com/lmccart/p5.js/master/examples/p5.Image/unicorn.jpg" />Attributes provide extra information necessary to a tag to work properly (such as the src attribute on the <img> tag or the href attribute on the <a> tag) or just provide some optional information. An attribute generally consists of an attribute name and an attribute value (usually surrounded by quotes), with an = sign between them.
You can see all the attributes and the tags they are associated with in the MDN attribute reference.
Two common attributes are "class" and "id", both of which are used to identify particular elements when adding CSS rules or manipulating the page using JS.
<p class="tomato">This paragraph has class tomato.</p>
<p id="main">This paragraph has id main.</p>
<div class="tomato" id="gooba">This div has class tomato and id gooba.</div>Class and id names can be anything you like, they have no particular meaning in themselves. The are used more like labels or selectors in CSS or JS code. Use a class when you have more than one element you want to share the same class (maybe you want to style them all the same, for example). Use an id when there is only one element on the page with that id (this could be useful for programmatically accessing this particular element in JS).
An element can have more than one class, but not more than one id. When there is more than one class, the class names are separated by spaces.
<div class="tomato bottom">This div has class tomato and class bottom.</div>Cascading Style Sheets, or CSS, is used to tell web browsers how to style and display HTML-structured text. While HTML defines the content, CSS supplies the presentation. Separating the content from the style makes the code easier to read and also allows us to more easily swap out one style for another.
You can set style properties inline using the style attribute. Inside the quotes, you place one or more property:value pairs, separated by semicolons.
<p style="width:400px; background:#FF0000; font-size: 18px;">This is some text.</p>You can find all css style attributes in this CSS reference.
Another alternative is to separate out the CSS into it's own file, getting us closer to the separate content and style goal mentioned above. In this case, you start by making a new file with file extension .css, and linking it into the <head> of your HTML file using the <link> tag.
<link rel="stylesheet" type="text/css" href="style.css">When using inline css, style properties are set per element, but when you use an external stylesheet you define "rules" that get applied more generally to elements. The format for a rule is like this:
selector {
property: value;
}The first part, the selector, tells the browser which elements in the page to apply the rule to. This selector is followed by a set of curly braces that enclose one or more property:value pairs. These pairs work just like the inline css, the property to be set and the value for that property, separated by a colon and followed by a semicolon.
The selector can be one of several different things:
- an HTML tag name, such as "p" or "h1"
- a class name, prefixed by ".", such as ".gargoyles" or ".detail"
- an id, prefixed by "#", such as "#main" or "#marshmallows"
p {
color: green;
font-size: 20px;
}
.donkeys {
background: pink;
}
#first-section {
font-family: monospace;
}<html>
<head>
<link href="style.css" type="text/css">
</head>
<body>
<div id="first-section">
I am in the first section.
</div>
<div id="second-section">
<p>I am a paragraph in the second section.</p>
<p class="donkeys">I am also a paragraph in the second section with class donkeys.</p>
</div>
</body>
</html>
In the example above, everything within a paragraph tag is green and has 20px font. The text within the div with id "first-section" has monospace font. Any text with class "donkeys" has a pink background.
The rules propagate inwards, so every element will have the styling of it's own properties and tags as well as those of any enclosing. In the example below, notice how the paragraph with class "donkeys" has all of the CSS properties for "p", ".donkeys", and "#first-section" applied.
p {
color: green;
font-size: 20px;
}
.donkeys {
background: pink;
}
#first-section {
font-family: monospace;
}<html>
<head>
<link href="style.css" type="text/css">
</head>
<body>
<div id="first-section">
I'm in the first section
<p>I'm a paragraph in the first section.</p>
<p class="donkeys">I'm a paragraph in the first section with class donkeys.</p>
</div>
<div id="second-section">
I'm in the second section
<p>I'm a paragraph in the second section.</p>
<p class="donkeys">I'm a paragraph in the second section with class donkeys.</p>
</div>
</body>
</html>
If there is a conflict of property values, the more immediate rule will be followed, overriding any enclosing parent rules. This is what is meant by the word "cascading" in Cascading Style Sheet (CSS).
Coming soon...