From 78211f96953bc1a63570f2430cee4ad92c841ce4 Mon Sep 17 00:00:00 2001 From: Jasper Ras Date: Tue, 6 May 2025 23:09:23 +0200 Subject: vault backup: 2025-05-06 23:09:23 --- Base elements.md | 15 +++++++++++++++ CSS.md | 14 ++++++++++++++ Document structure.md | 30 +++++++++++++++++++++++++++++ HTML.md | 23 ++++++++++++++++++++++ Holy Grail Layout.md | 24 +++++++++++++++++++++++ Link elements.md | 20 ++++++++++++++++++++ Meta elements.md | 41 ++++++++++++++++++++++++++++++++++++++++ Pasted image 20250506224453.png | Bin 0 -> 57712 bytes Script elements.md | 15 +++++++++++++++ Semantic HTML.md | 20 ++++++++++++++++++++ 10 files changed, 202 insertions(+) create mode 100644 Base elements.md create mode 100644 CSS.md create mode 100644 Document structure.md create mode 100644 HTML.md create mode 100644 Holy Grail Layout.md create mode 100644 Link elements.md create mode 100644 Meta elements.md create mode 100644 Pasted image 20250506224453.png create mode 100644 Script elements.md create mode 100644 Semantic HTML.md 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 diff --git a/CSS.md b/CSS.md new file mode 100644 index 0000000..16cf2d5 --- /dev/null +++ b/CSS.md @@ -0,0 +1,14 @@ +--- +tags: + - css +--- +CSS is used to style [[HTML]]. + +Three ways to load: +- `` +- `` +- 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 `` 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** +``` + + + + + + + + + + +``` + +[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 diff --git a/HTML.md b/HTML.md new file mode 100644 index 0000000..85deafd --- /dev/null +++ b/HTML.md @@ -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 `

` or ``. +**Replaced Elements** they are replaced by objects such as a widget or image. Such as `` or ``. +- They have a default appearance +**Void Elements** cannot have nested elements. E.g ``. + +**Attributes** are key-value pairs on elements. Can also be boolean, then value not required: `` + +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]] + +``` + +

Header
+ +
+
First post
+
Second post
+
+ +
Footer
+ +``` + +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: +`` +[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: +``` + + + + +``` + +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 new file mode 100644 index 0000000..68d6d73 Binary files /dev/null and b/Pasted image 20250506224453.png differ 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 + +`