diff options
| author | Jasper Ras <jras@hostnet.nl> | 2025-05-06 23:09:23 +0200 |
|---|---|---|
| committer | Jasper Ras <jras@hostnet.nl> | 2025-05-06 23:09:23 +0200 |
| commit | 78211f96953bc1a63570f2430cee4ad92c841ce4 (patch) | |
| tree | 614db0456636442c7ef250f106f9f8b1d04e01e6 | |
| parent | bb5c734d7445097e94c4a602f5ce066a836dbead (diff) | |
vault backup: 2025-05-06 23:09:23
| -rw-r--r-- | Base elements.md | 15 | ||||
| -rw-r--r-- | CSS.md | 14 | ||||
| -rw-r--r-- | Document structure.md | 30 | ||||
| -rw-r--r-- | HTML.md | 23 | ||||
| -rw-r--r-- | Holy Grail Layout.md | 24 | ||||
| -rw-r--r-- | Link elements.md | 20 | ||||
| -rw-r--r-- | Meta elements.md | 41 | ||||
| -rw-r--r-- | Pasted image 20250506224453.png | bin | 0 -> 57712 bytes | |||
| -rw-r--r-- | Script elements.md | 15 | ||||
| -rw-r--r-- | Semantic HTML.md | 20 |
10 files changed, 202 insertions, 0 deletions
diff --git a/Base elements.md b/Base elements.md new file mode 100644 index 0000000..7fade3c --- /dev/null +++ b/Base elements.md @@ -0,0 +1,15 @@ +--- +tags: + - html + - web +--- +Allows setting default link URL and target. `href` defines base url for all relative links. +`target` sets where links should open: +- `_self` (default) current window & context +- `_blank` new window +- `_parent`can be self if not iframe +- `_top`same browser tab, but pop out to take entire tab + +So `_top` link from an iframe will load our link in the entire tab. + +Anchor links resolve the base. So they might always reload the entire page.
\ No newline at end of file @@ -0,0 +1,14 @@ +--- +tags: + - css +--- +CSS is used to style [[HTML]]. + +Three ways to load: +- `<link rel="stylesheet" href="pathto.css">` +- `<style>css content</style>` +- or style attributes on elements + +Link is preferred: easier to work with everything in 1 place; browser can cache file. + +Both link and style blocks should go in the `<head>` to prevent repainting of elements.
\ No newline at end of file diff --git a/Document structure.md b/Document structure.md new file mode 100644 index 0000000..2674493 --- /dev/null +++ b/Document structure.md @@ -0,0 +1,30 @@ +--- +tags: + - html + - web +--- +This describes [[HTML]] document structure. + +**Mandatory** +``` +<!DOCTYPE html> +<html> +<head lang="nl"> + <meta charset="utf-8" /> + <meta name="viewport" content="width=device-width" /> + <title></title> +</head> +<body> +</body> +</html> +``` + +[lang attribute](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/lang#language_tag_syntax) region is option (e.g nl-NL), we can just say nl. The lang attribute can be used on any part that contains text, to denote a different locale from the main one. + +**Charset must come before title** and it makes sure the browser can render text correctly. + +The **head** element is the place to load [[CSS]] it contains: +- [[Link elements]] +- [[Script elements]] +- [[Base elements]] +- [[Meta elements]]
\ No newline at end of file @@ -0,0 +1,23 @@ +--- +tags: + - html + - web +--- +HyperText Markup Language. + +Describes structure of documents on the web. Consists of elements, which is denoted by tags. An element is everything from the start tag to the end tag and in between. An element can contain other elements. + +**Non-Replaced Elements** they contain and modify for example text, e.g `<p>` or `<em>`. +**Replaced Elements** they are replaced by objects such as a widget or image. Such as `<input>` or `<img>`. +- They have a default appearance +**Void Elements** cannot have nested elements. E.g `<input />`. + +**Attributes** are key-value pairs on elements. Can also be boolean, then value not required: `<img ismap>` + +Javascript object created for every element and section of text. **HTML DOM API** defines functionality to access and control each element. + +[[Document structure]] +[[Semantic HTML]] + +--- +https://web.dev/learn/html/welcome
\ No newline at end of file diff --git a/Holy Grail Layout.md b/Holy Grail Layout.md new file mode 100644 index 0000000..480556a --- /dev/null +++ b/Holy Grail Layout.md @@ -0,0 +1,24 @@ +--- +tags: + - html + - web +--- +![[Pasted image 20250506224453.png]] + +``` +<body> + <header>Header</header> + <nav>Nav</nav> + <main> + <article>First post</article> + <article>Second post</article> + </main> + <aside>Aside</aside> + <footer>Footer</footer> +</body> +``` + +Main: 1 per page; main contnet +Aside: tangentially related content; complementary +Article: represents a completely standalone piece of content, reusable. +Section: Used if no more specific element exists; should have a heading most of the time.
\ No newline at end of file diff --git a/Link elements.md b/Link elements.md new file mode 100644 index 0000000..0952096 --- /dev/null +++ b/Link elements.md @@ -0,0 +1,20 @@ +--- +tags: + - html + - web +--- +`rel` stands for relationship, all `link` elements must have a `href` attribute. + +`rel="stylesheet"` for css + +following links have `sizes` (e.g "16x16 32x32") and `type` (e.g "image/png"). + +`rel="icon"` for favicon +`rel="apple-touch-icon"` for iOS devices home-screen pins +`rel="mask-icon"` for pinned tabs on safari + +`rel="alternate"` for alternate versions of the site +- translations: `hreflang` must be present +- mime types: `type` + +`rel="canonical"` to use if you have alternates; `href` specifies the main website.
\ No newline at end of file diff --git a/Meta elements.md b/Meta elements.md new file mode 100644 index 0000000..695bc02 --- /dev/null +++ b/Meta elements.md @@ -0,0 +1,41 @@ +--- +tags: + - html + - web +--- +`content` attribute required + +Pragma directive: `http-equiv` attribute (its value is pragma directive) +Named: `name` attribute. + +# Pragma directive +[7 defined](https://html.spec.whatwg.org/multipage/semantics.html#pragma-directives) + +most useful: +`<meta http-equiv="content-security-policy" content="default-src https:" />` +[content values](https://developer.mozilla.org/docs/Web/HTTP/Headers/Content-Security-Policy) + +Specify allowed server origins and script endpoints, protecting against cross site scripting attacks. + +# Named +- keywords; obsolete due to snake-oil salespeople +- description; useful for SEO +- robots + - `content="noindex, nofollow"` + - `content="index, follow"` + +### OpenGraph +[Protocol](https://ogp.me/) + +Control how social media sites display links. +Have a `property` attr instead of `name`. + +Facebook media card: +``` +<meta property="og:title" content="Machine Learning Workshop" /> +<meta property="og:description" content="School for Machines Who Can't Learn Good and Want to Do Other Stuff Good Too" /> +<meta property="og:image" content="http://www.machinelearningworkshop.com/image/all.png" /> +<meta property="og:image:alt" content="Black and white line drawing of refrigerator, french door refrigerator, range, washer, fan, microwave, vaccuum, space heater and air conditioner" /> +``` + +Twitter uses something else: [Twitter card markup](https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/markup)
\ No newline at end of file diff --git a/Pasted image 20250506224453.png b/Pasted image 20250506224453.png Binary files differnew file mode 100644 index 0000000..68d6d73 --- /dev/null +++ b/Pasted image 20250506224453.png diff --git a/Script elements.md b/Script elements.md new file mode 100644 index 0000000..e220be5 --- /dev/null +++ b/Script elements.md @@ -0,0 +1,15 @@ +--- +tags: + - html + - web +--- +Default type: javascript. Can specify `type` with a mimetype of alternate script language. `type="module"` for javascript modules. + +Place scripts at the end rather than at the start, unless [DOMContentLoadedEvent](https://developer.mozilla.org/docs/Web/API/Document/DOMContentLoaded_event) is used. +- Javascript can't reference elements that don't yet exist +- Browser blocks rendering, and halts downloads etc until js finishes execution + +`<script defer>` dont block while downloading, execute js after rendering +`<script async>` dont block while downloading, execute js when download finished, pausing renderer until js completes + + diff --git a/Semantic HTML.md b/Semantic HTML.md new file mode 100644 index 0000000..cc4a892 --- /dev/null +++ b/Semantic HTML.md @@ -0,0 +1,20 @@ +--- +tags: + - html + - web +--- +Writing semantic HTML means using elements that convey the meaning of their content. So instead of using `<div>`, and `<span>` for example use `<header>` and `<h1>` etc, or `<nav>` for navigations. + +The browser builds an **AOM** (Accessibility Object Model); it uses semantic elements to build a map with meaning of the elements. Used for accessibility purposes. + +### Roles +Defined by [ARIA](https://w3c.github.io/aria/#dfn-role). All elements can have a `role` attribute, sementic elements have it implicitly. +For example used by screenreaders. + +`<header>` and `<nav>` are semantic landmarks. Landmarks are the main sections of a webpage. A `<header>` not in the top-level is no landmark; it is the header of a section. Same goes for the `<nav>`, it is only a landmark if it is inside the top-level `<header>` + +Don't use too many "landmark" roles; it creates noise for screenreaders and makes it difficult to understand the structure. + +Headings: `<h1>` go until h6. Site header if nested in top-level header element. Page header if nested in main element. Subsection header if nested in section or article. + +An example of using semantic HTML at [[Holy Grail Layout]]
\ No newline at end of file |
