Weird Websites for a Post Social Media World

This content is all optional, if people are bringing questions we can deal with them first.

More about images

<img src="selfie.jpg" alt="A photograph of my own face">

PNG vs JPG

GIF and WEBP

SVG

Dialogs/popups

Ideal for a gallery-type format

<button popovertarget="bigcat">
    <img src="https://placecats.com/300/300">
</button>

<dialog id="bigcat" popover>
    <img src="https://placecats.com/700/400">
</dialog>

The popovertarget of the button and the id of the dialog must match.

dialog::backdrop {
    backdrop-filter: blur(20px);
}

Embedding content from other sites/platforms

Look for a button called “Share/Embed” or similar, follow the steps and find some code to copy and paste into your site. It’ll probably be an <iframe> tag.

Example 1: Bandcamp

Example 2: YouTube

DIY audio/video hosting

MP3 ia probably still your best choice, but others work too

<audio src="welcome.m4a" controls></audio>

Video: MP4 or WEBM

<video width="400" height="300" src="welcome.m4a" controls></video>

More on <head>

<meta> is for metadata

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<meta name="description" content="Short description to show in your page under search results">

<meta property="og:type" content="website" />
<meta property="og:title" content="David's super cool web page" />
<meta property="og:description" content="A concise description of the page content for social sharing." />
<meta property="og:url" content="https://www.example.com/page/" />
<meta property="og:image" content="https://www.example.com/assets/og-image.jpg" />
<meta property="og:site_name" content="Site Name" />

What is a HTTP