John Locklin logo - back to the homepage

HTML Showcase

Welcome to the workshop. This page is a demo of what I know, and everything on it is a real, working HTML feature. Press Ctrl+U (or view the source from your browser menu) and you can read exactly how each piece is built.

Skip to the main content

First, why not play some music?


Hello! I'm a pop-up. Click the button to close me.

A tiny browser

Click a link and the page loads in the frame below.


Two tiny websites written inside an attribute

These frames use srcdoc, which holds a complete page as text inside the tag itself. There's no separate file. sandbox="" locks the page down so it can't do anything risky.


FAQ (with dropdowns)

Why no CSS?

I haven't learned it yet, and I wanted to understand the structure first.

Why does everything look so plain?

Plain HTML looks like this. Consider it the foundation of the website. CSS, which comes next is the paint!

Is plain bad?

Not at all. It loads fast and it works everywhere.

What's next?

CSS, then JavaScript, then wherever the wind takes me.


A dropdown that offers choices


A basic image with a caption

A black square next to a black circle
Figure 1: a square and a circle.

An image map (click the shapes!)

Click the square to jump to the top, or the circle to jump to the bottom.

A square and a circle you can click Square: jump to the Header Circle: jump to the Footer
Click the square to jump to
the top of the page or the
circle to jump to the bottom.

A link is more than "go to another page".


Forms

Pick one

Pick any



Read-only and disabled fields


Small text tags