Html anatomy: Difference between revisions
From wikinotes
| Line 2: | Line 2: | ||
<blockquote> | <blockquote> | ||
<source lang="html4strict"> | <source lang="html4strict"> | ||
<!-- ${PROJECT}/index.html --> | |||
<!doctype html public "-//W3C//DTD HTML 4.01 Frameset//EN" | <!doctype html public "-//W3C//DTD HTML 4.01 Frameset//EN" | ||
"http://www.w3.org/TR/html4/frameset.dtd"> | "http://www.w3.org/TR/html4/frameset.dtd"> | ||
| Line 13: | Line 15: | ||
<h1>My Title</h1> | <h1>My Title</h1> | ||
<p>Some paragraph</p> | <p>Some paragraph</p> | ||
<button id="log_hi_btn">Log Hi</button> | |||
</body> | </body> | ||
</html> | </html> | ||
</source> | </source> | ||
<syntaxhighlight lang="javascript"> | |||
// ${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()); | |||
} | |||
}); | |||
</syntaxhighlight> | |||
<syntaxhighlight lang="css"> | |||
/** ${PROJECT}/stylesheet.css */ | |||
body { | |||
background-color: lightblue; | |||
} | |||
h1, h2, h3, h4, h5, h6 { | |||
font-family: verdana; | |||
font-size: 20px; | |||
} | |||
</syntaxhighlight> | |||
</blockquote><!-- Sample File --> | </blockquote><!-- Sample File --> | ||
Revision as of 04:05, 17 December 2022
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"/> <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.
