With special guest teacher Sidney/Paolo San Martín
The “elements” of a web page
A web page is a structure, like a folder poem, but where a folder poem has folders and files, a web page has elements and text nodes. They’re different from folders and files in lots of ways, including:
| Files and folders | Elements and text nodes |
|---|---|
| All have unique (within their parent folder) names | Don’t have names |
| Only one “flavor” of folder | Elements have tag names, mostly with a big list that browsers know about, that make them look and work differently (title, p, script, img, video). |
| Not in any particular order(!) | In the order you write them; can be rearranged |
How a browser reads a web page
All web pages have an html element which contains a head and a body and nothing else. The head contains invisible things (like a title element that sets the title of the tab!) and the body contains everything else. A web browser reads a .html file as text and uses that to build the initial version of the web page, every time you load it:
hi |
hi |
hi |
<html>
<head></head>
<body>
hi
</body>
</html> |
Even when we just wrote “hi”, the browser built all of the basic structure and put “hi” in the body as a text node.
You write something like <div> to mark the beginning of an element and </div> to mark the end of an element (a div element is just a container):
<div></div> |
|
<div><div><div></div></div></div> |
When you don’t include end tags like </div>, the browser follows some rules to make a structure anyway:
hi there DLL! |
<p>hi
<p>there
<p>DLL! |
In this case the rule it’s following is “p elements can’t be inside other p elements, so let’s assume each one ends before the next one”.
One special rule to follow
Every .html file should start with “<!DOCTYPE html>” on a line by itself. This just tells the browser “hey, this web page isn’t super old, so you can follow current rules for how to interpret the rest of the HTML!”
now the browser can relax and assume the web page doesn’t need special treatment! 🏝️ |
<!DOCTYPE html>
now the browser can relax and assume the web page doesn’t need special treatment! 🏝️ |
Other languages in an .html file
Some elements, mainly style and script, aren’t visible but contain code in other languages that change how the page looks and works!
|
hello dll
from me to you
|
<!DOCTYPE html>
<style>
p { color: red; }
div { color: rgb(127, 0, 255); }
div.green { color: green; }
</style>
<p>hello</p>
<div>dll</div>
<div class="green">dll</div> |
hello, dll! |
<!DOCTYPE html>
<p id=yay>
hello, dll!
</p>
<script>
yay.textContent = "Hello from " + Date();
</script>
|
HTML ingredients
CSS ingredients
Getting philosophical
Over the next two classes, I’d like to explore three things:
| the web and boundaries between people | web browsers as the thresholds between our computers | web pages which cross the threshold |
Mentioned in class…
- The Chrome comic book:
https://www.google.com/googlebooks/chrome/
Homework
Create a website that fulfills one of the prompts in this channel as inspiration. Consider inventive ways of combining the building blocks of HTML and CSS. Share screenshots/recordings of your website to our homework sharing form. Please remember to sign up for office hours and ask your questions in the discord!
Next week we will be making our websites even more alive with javascript.
