Skip to main content
SimilarExport ZIP
100%

Hello HTML5

✓ Published1🌍 Public
RRussell Watson
Last edited Jan 23, 2020
Created on Jan 22, 2020
Forked from Hello HTML

This example demonstrates the fundamentals of HTML5, CSS, and external content embedding within a single web page. It prominently features the HTML5 logo as an external SVG image and showcases the ability to embed live Observable notebooks via the Observable Runtime API. The page explores link styling and behavior, using CSS selectors to add visual indicators for external links and different `target` attributes, such as opening in new tabs or parent frames. Styling rules define fonts, colors, and link states, while the embedded Observable notebook renders a graphic through the runtime’s `Inspector` module.

AI-generated description

An HTML page to get back up to speed with css, ... and which experiments with embedding external svgs and observablehq elements

MIT Licensed

Similar vizzes

Loading thumbnail…

embed test

This example demonstrates how to embed a complete Observable notebook within an external webpage. The visualization displays the content of a specific notebook module, rendering each of its exported variables inside its own container. The code uses the Observable runtime API to load the notebook and instantiate an `Inspector` for each variable, while fetching the notebook definition from a gist-hosted JavaScript file. The rendering approach relies on dynamically injecting HTML wrappers and then populating them through the runtime's loading mechanism.

MMbrownshoes
73% match
Loading thumbnail…

Gist b198922e4837fa3d96af13fb27d5c723

This example demonstrates how to embed an Observable notebook into a standalone HTML page using the Observable Runtime and Inspector APIs. The code loads a notebook, overrides its “subject” cell to output the string “Fred,” and renders the resulting “greeting” cell into a page element. It uses the `Runtime.load` method, `Library`, and `Inspector` classes from the `@observablehq/notebook-runtime` module, fetching the notebook from `api.observablehq.com`. The visualization shows dynamic text replacement within a live notebook module.

Mmbostock
71% match
Loading thumbnail…

Embedded Observablehq Minimal Cell

This example demonstrates embedding a single Observable notebook cell into a standalone HTML page. It loads a specific value named "calc" from an Observable notebook using the Observable Runtime API and renders it into a designated container via `Inspector.into`. The page retrieves the notebook definition from the Observable API URL, while the runtime is imported from the jsDelivr CDN. This approach minimizes the embedded footprint to roughly five kilobytes, compared to the full notebook’s larger size, showcasing a lightweight integration method.

RRussell Watson
70% match
Loading thumbnail…

hello

This example demonstrates HTML hyperlink behavior through four anchor tags, each using a different `target` attribute value (`_blank`, `_self`, `_parent`, `_top`) to control where the linked W3C site opens. The page also includes a JavaScript alert that fires on load, plus external styling from `info.css` and a separate `java.js` file that writes dynamic content to the document using `document.write`. The rendering relies on plain HTML, CSS, and vanilla JavaScript without any visualization libraries or frameworks, showing a basic interactive web page rather than a data-driven chart.

Kkimgooq
67% match
Loading thumbnail…

HTML Starter

This example displays the text “Hello HTML” centered on a plain page with a 13em font size, demonstrating the minimal structure required for a web-based visualization. It uses a standard HTML5 document with embedded CSS for styling, while a separate script tag logs “Hello JavaScript!” to the browser console. The page relies solely on native HTML, CSS, and JavaScript APIs, without any external libraries or data sources, serving as a baseline template for adding interactive elements.

Ooseanoneil
66% match
Loading thumbnail…

Hello HTML

A minimal HTML page demonstrates the foundational structure of web documents, containing only a DOCTYPE declaration, html, head, and empty body elements. The index.html file uses no external libraries or JavaScript APIs, relying solely on native HTML5 syntax. The accompanying README.md includes an embedded YouTube iframe, showing how multimedia content can be integrated into documentation pages. This example highlights the simplest possible starting point for any web-based visualization or application, with the body left intentionally blank for future content.

Eemmanueltr
66% match
Loading thumbnail…

HTML Starter

This example demonstrates a minimal HTML page that combines inline CSS for styling and JavaScript for console logging, displaying the text “Hello HTML” at a large font size. The code uses native browser technologies—no external frameworks—relying on the DOM’s `console.log` API to output “Hello JavaScript!” in developer tools. It serves as a bare-bones starting point for building more complex visualizations, highlighting how static markup, styling, and basic scripting integrate in a single file.

Ggurby123
66% match
Loading thumbnail…

Fork of Hello HTML

This example presents a bare-bones HTML page that contains only a YouTube embed and a link to a freeCodeCamp tutorial, with no data or visualization logic. It demonstrates how a minimal HTML document can host external media content directly in the body. The page relies solely on standard HTML tags—such as `<!DOCTYPE html>`, `<html>`, `<head>`, and `<body>`—and does not use any JavaScript libraries or visualization frameworks like D3 or Three.js. The rendering approach is plain HTML without any styling or interactive elements beyond the embedded iframe.

Vvictor.blaer@gmail.com
66% match