Html anatomy
From wikinotes
Sample File
${PROJECT}/index.html
<!doctype html public "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html lang="en"> <head> <title>My Website</title> <script src="main.js"></script> <link rel="stylesheet" href="stylesheet.css" /> </head> <body> <h1>My Title</h1> <p>Some paragraph</p> <button id="log_hi_btn">Log Hi</button> </body> </html>${PROJECT}/main.js
function log_hello(name) { console.log(`hello ${name}`); } function current_user() { return "foo"; } document.addEventListener("click", function (event) { if (target.matches("#log_hi_btn")) { log_hello(current_user()); } });${PROJECT}/stylesheet.css
body { background-color: lightblue; } h1, h2, h3, h4, h5, h6 { font-family: verdana; font-size: 20px; }
Components
Tags/Elements
HTML is expressed using html elements expressed in tags (ex:
<div>).
Tags are opened/closed<div>...</div>.
Some tags may have attributes.
<img src="foo.png">Some attributes are applicable to all elements, and are primarily intended for styling/dynamic manipulation.
- id must uniquely identify a single element per document
- class may refer to several elements in a document
<div id="unique-name-within-document"> <div class="employee-list">DOM/APIs
The body of a website is composed of html elements. It is primarily composed of elements, but APIs expose access to the document, window, history etc.
The Document Object Model (DOM) is a tree of all of the elements in a page.
CSS
The layout of html documents is usually defined in css.
javascript
Sometimes javascript is used to modify the website more dynamically.
