Html anatomy: Difference between revisions
From wikinotes
Line 1: | Line 1: | ||
= Sample File = | = Sample File = | ||
<blockquote> | <blockquote> | ||
{{ expand | |||
| ${PROJECT}/index.html | |||
| | |||
<source lang="html4strict"> | <source lang="html4strict"> | ||
<!-- ${PROJECT}/index.html --> | <!-- ${PROJECT}/index.html --> | ||
Line 20: | Line 24: | ||
</html> | </html> | ||
</source> | </source> | ||
}} | |||
{{ expand | |||
| ${PROJECT}/main.js | |||
| | |||
<syntaxhighlight lang="javascript"> | <syntaxhighlight lang="javascript"> | ||
Line 39: | Line 48: | ||
}); | }); | ||
</syntaxhighlight> | </syntaxhighlight> | ||
}} | |||
{{ expand | |||
| ${PROJECT}/stylesheet.css | |||
| | |||
<syntaxhighlight lang="css"> | <syntaxhighlight lang="css"> | ||
Line 53: | Line 67: | ||
} | } | ||
</syntaxhighlight> | </syntaxhighlight> | ||
}} | |||
</blockquote><!-- Sample File --> | </blockquote><!-- Sample File --> | ||
Revision as of 04:06, 17 December 2022
Sample File
${PROJECT}/index.html
<!-- ${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"/> <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
// ${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
/** ${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.