"7.4.1.1 Session history entries" doesn't mention whether focus is saved, only scroll has dedicated "attributes" in a history entry, but what this paragraph seems to allude to is that focus can be saved too (and indeed it can).

(See pushState.)

Autor wymienia 10 stron, przygotowanych w prostym języku HTML bez większego stylowania czy skryptowania.

Te 10 stron to: 1. First HTML Website(The WWW project) http://info.cern.ch/hypertext/WWW/TheProject.html 2. Berkshire Hathaway Inc. https://www.berkshirehathaway.com/ 3. X.COM http://x.com 4. The mother**website.com http://motherfuckingwebsite.com/ 5. Toad.com http://www.toad.com/ 6. Fluffbucket http://www.fluffbucket.co.uk/howto/htmlonlypg.htm 7.ACME Laboratories https://acme.com 8. Txti http://txti.es/ 9. Simplified Web Design https://jgthms.com/web-design-in-4-minutes/ 10. Personal Blog https://fatih-erikli.com

Nie wszystkie strony są aktywne czy warte uwagi. Według mnie warto zwrócić tylko na dwie z nich: - https://motherfuckingwebsite.com/ - https://jgthms.com/web-design-in-4-minutes/

HTML forms have an internal validation mechanism.

```css .accordion - body { display: grid; grid - template - rows: 0 fr; transition: 250 ms grid - template - rows ease; }

.accordion: hover.accordion - body { grid - template - rows: 1 fr; }

.accordion - body>div { overflow: hidden; } ```

Las acciones que se pueden realizar dentro de un formulario son definidas como form controls. El número de acciones es bastante grande y vale la pena revisar todas las posibilidades.

https://gregorlove.com/2023/11/joe-brought-css-battle/

Aún cuando se trata de un reseteo completo de estilo CSS, proponentes de este método como es the Meyer's Reset recomiendan sobreescribir partes del reseteo con las preferencias personales del diseñador. Esto quiere decir que un reseteo no debe ser un reseteo en blanco, sino un reseteo hacia el estándar o base que el diseñador prefiera.

Hay una serie de buenas prácticas en la fabricación de tablas que permiten una interacción más eficiente entre el usuario y la data que se busca comunicar. Una buena experiencia entre el usuario y las tablas dentro de una página web dependen en suma del diseño establecido. La fabricación de buenas tablas en la web solo requieren de conocimientos de HTML y CSS.

Las etiquetas <thead>, <tbody>, and <tfoot> proveen a las tablas HTML una fuerte capacidad de personalización a través de selectores CSS.

<div itemscope itemtype="http://schema.org/Code"> ```html <label for="major-select">Please select a major:</label> <br/> <select name="majors" id="major-select"> <option value="">Select a major</option>

---

<option value="arth">Art History</option> <option value="finearts">Fine Arts</option> <option value="gdes">Graphic Design</option> <option value="lit">Literature</option> <option value="music">Music</option>

---

<option value="aeroeng">Aerospace Engineering</option> <option value="biochemeng">Biochemical Engineering</option> <option value="civileng">Civil Engineering</option> <option value="compeng">Computer Engineering</option> <option value="eleng">Electrical Engineering</option> <option value="mecheng">Mechanical Engineering</option> </select> ``` </div>

Every property of an object returned by the load function can be a promise which itself can return an object that can have a promise as property, and so on.

Can build a tree of promises based on data delivery priority.

```js // CSP svelte.config.js

/* @type {import('@sveltejs/kit').Config} / const config = { kit: { csp: { directives: { 'script-src': ['self'] }, reportOnly: { 'script-src': ['self'] } } } };

export default config; ```

```js // Create a portal with the wikipedia page, and embed it // (like an iframe). You can also use the <portal> tag instead. portal = document.createElement('portal'); portal.src = 'https://en.wikipedia.org/wiki/World_Wide_Web'; portal.style = '...'; document.body.appendChild(portal);

// When the user touches the preview (embedded portal): // do fancy animation, e.g. expand … // and finish by doing the actual transition. // For the sake of simplicity, this snippet will navigate // on the onload event of the Portals element. portal.addEventListener('load', (evt) => { portal.activate(); });

// Adding some styles with transitions const style = document.createElement('style'); style.innerHTML = portal { position:fixed; width: 100%; height: 100%; opacity: 0; box-shadow: 0 0 20px 10px #999; transform: scale(0.4); transform-origin: bottom left; bottom: 20px; left: 20px; animation-name: fade-in; animation-duration: 1s; animation-delay: 2s; animation-fill-mode: forwards; } .portal-transition { transition: transform 0.4s; } @media (prefers-reduced-motion: reduce) { .portal-transition { transition: transform 0.001s; } } .portal-reveal { transform: scale(1.0) translateX(-20px) translateY(20px); } @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } }; const portal = document.createElement('portal'); // Let's navigate into the WICG Portals spec page portal.src = 'https://wicg.github.io/portals/'; // Add a class that defines the transition. Consider using // prefers-reduced-motion media query to control the animation. // https://developers.google.com/web/updates/2019/03/prefers-reduced-motion portal.classList.add('portal-transition'); portal.addEventListener('click', (evt) => { // Animate the portal once user interacts portal.classList.add('portal-reveal'); }); portal.addEventListener('transitionend', (evt) => { if (evt.propertyName == 'transform') { // Activate the portal once the transition has completed portal.activate(); } }); document.body.append(style, portal); ```

```js // Feature detection

if ('HTMLPortalElement' in window) { // If this is a platform that have Portals... const portal = document.createElement('portal'); ... } ```

js // Detect whether this page is hosted in a portal if (window.portalHost) { // Customize the UI when being embedded as a portal }

```js // Send message to the portal element const portal = document.querySelector('portal'); portal.postMessage({someKey: someValue}, ORIGIN);

// Receive message via window.portalHost window.portalHost.addEventListener('message', (evt) => { const data = evt.data.someKey; // handle the event }); ```

```html

According to Mozilla's website, <q cite="https://www.mozilla.org/en-US/about/history/details/"> Firefox 1.0 was released in 2004 and became a big success. </q>

```

```html

<style> kbd { background-color: #eee; border-radius: 3px; border: 1px solid #b4b4b4; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 2px 0 0 rgba(255, 255, 255, 0.7) inset; color: #333; display: inline-block; font-size: 0.85em; font-weight: 700; line-height: 1; padding: 2px 4px; white-space: nowrap; } </style>

Please press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd> to re-render an MDN page.

```

```html

<title>HTML Standard</title>

<body> <hgroup id="document-title">

HTML: Living Standard

Last Updated 12 July 2022

</hgroup>

Some intro to the document.

Table of contents

…

First section

Some intro to the first section.

</body>

```

```html

<header>

Movie website

<search> <form action="./search/"> <label for="movie">Find a Movie</label> <input type="search" id="movie" name="q" /> <button type="submit">Search</button> </form> </search> </header>

```

```html <search> <label> Find and filter your query <input type="search" id="query" /> </label> <label> <input type="checkbox" id="exact-only" /> Exact matches only </label>

<section>

Results:

<output id="no-results"> </output> </section>

</search> ```

```html

<body style="visibility: hidden;"> <script>0</script> </body> <noscript> <style>body { visibility: visible; }</style> </noscript>

```

```js / * twitter-entities.js * This function converts a tweet with "entity" metadata * from plain text to linkified HTML. * * See the documentation here: http://dev.twitter.com/pages/tweet_entities * Basically, add ?include_entities=true to your timeline call * * Copyright 2010, Wade Simmons * Licensed under the MIT license * http://wades.im/mons * * Requires jQuery /

function escapeHTML(text) { return $('<div/>').text(text).html() }

function linkify_entities(tweet) { if (!(tweet.entities)) { return escapeHTML(tweet.text) }

// This is very naive, should find a better way to parse this
var index_map = {}

$.each(tweet.entities.urls, function(i,entry) {
    index_map[entry.indices[0]] = [entry.indices[1], function(text) {return "<a href='"+escapeHTML(entry.url)+"'>"+escapeHTML(text)+"</a>"}]
})

$.each(tweet.entities.hashtags, function(i,entry) {
    index_map[entry.indices[0]] = [entry.indices[1], function(text) {return "<a href='http://twitter.com/search?q="+escape("#"+entry.text)+"'>"+escapeHTML(text)+"</a>"}]
})

$.each(tweet.entities.user_mentions, function(i,entry) {
    index_map[entry.indices[0]] = [entry.indices[1], function(text) {return "<a title='"+escapeHTML(entry.name)+"' href='http://twitter.com/"+escapeHTML(entry.screen_name)+"'>"+escapeHTML(text)+"</a>"}]
})

var result = ""
var last_i = 0
var i = 0

// iterate through the string looking for matches in the index_map
for (i=0; i < tweet.text.length; ++i) {
    var ind = index_map[i]
    if (ind) {
        var end = ind[0]
        var func = ind[1]
        if (i > last_i) {
            result += escapeHTML(tweet.text.substring(last_i, i))
        }
        result += func(tweet.text.substring(i, end))
        i = end - 1
        last_i = end
    }
}

if (i > last_i) {
    result += escapeHTML(tweet.text.substring(last_i, i))
}

return result

} ```

```html <img src="invalid_link" onerror="this.onerror=null;this.src='https://placeimg.com/200/300/animals';"

```

```html

<body> <div> {% for chat in chats %} <div>{{ chat.contents }}</div> <button id={{chat.id}} ✅ onClick=getId(id) ✅ > print this chat_id out </button> {% endfor %} </div> ... <script> function getId(id){ console.log(id) } </script> </body>

```

```html <select id="position"> <br /> <option>beforebegin</option>

<option>afterbegin</option> <option>beforeend</option> <option>afterend</option>

</select>

<button id="insert">Insert HTML</button> <button id="reset">Reset</button>

Some text, with a code-formatted element inside it.

```

```js const insert = document.querySelector("#insert"); insert.addEventListener("click", () => { const subject = document.querySelector("#subject"); const positionSelect = document.querySelector("#position"); subject.insertAdjacentHTML( positionSelect.value, "inserted text" ); });

const reset = document.querySelector("#reset"); reset.addEventListener("click", () => { document.location.reload(); });

```

js var mylist = document.getElementById('mylist'); mylist.insertAdjacentHTML('beforeend', '<li>third</li>');

```html

• first
• second

```

```js /* * @param {String} HTML representing a single element * @return {Element} / function htmlToElement(html) { var template = document.createElement('template'); html = html.trim(); // Never return a text node of whitespace as the result template.innerHTML = html; return template.content.firstChild; }

var td = htmlToElement('<td>foo</td>'), div = htmlToElement('<div><span>nested</span> <span>stuff</span></div>');

/* * @param {String} HTML representing any number of sibling elements * @return {NodeList} / function htmlToElements(html) { var template = document.createElement('template'); template.innerHTML = html; return template.content.childNodes; }

var rows = htmlToElements('<tr><td>foo</td></tr><tr><td>bar</td></tr>'); ```

js function handleRequest(event: FetchEvent) { return new HTMLResponse(pageLayout('Hello World!', html` <h1>Hello World!</h1> ${async () => { const timeStamp = new Date( await fetch('https://time.api/now').then(r => r.text()) ); return html`<p>The current time is ${timeEl(timeStamp)}.</p>` }} `)); }

```js function makeDocument() { let frame = document.getElementById("theFrame");

let doc = document.implementation.createHTMLDocument("New Document"); let p = doc.createElement("p"); p.textContent = "This is a new paragraph.";

try { doc.body.appendChild(p); } catch (e) { console.log(e); }

// Copy the new HTML document into the frame

let destDocument = frame.contentDocument; let srcNode = doc.documentElement; let newNode = destDocument.importNode(srcNode, true);

destDocument.replaceChild(newNode, destDocument.documentElement); } ```