From 661ffb7fb0e4161205c2fa8fa72eae767ebb41de Mon Sep 17 00:00:00 2001 From: Nathan Steel Date: Tue, 21 Feb 2023 09:13:31 -0500 Subject: [PATCH] Add a basic "test" page with additional CSS For testing elements without needing to visit each page. --- images/200px.png | Bin 0 -> 389 bytes images/200px.webp | Bin 0 -> 360 bytes main.css | 52 +++++++ test.html | 360 ++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 412 insertions(+) create mode 100755 images/200px.png create mode 100755 images/200px.webp create mode 100644 test.html diff --git a/images/200px.png b/images/200px.png new file mode 100755 index 0000000000000000000000000000000000000000..969cfa69479b4814d298b404a7a7ed5ea9a4ca9e GIT binary patch literal 389 zcmeAS@N?(olHy`uVBq!ia0vp^CqS5m8A!&LZC(qcqyv0HT+f_2Gi}_?ITEX8qnQqpjz9)84B;-}6SSyFz(wUVf6g^{hL`gttyAy>noR+PB2bJCEHeoPBd+ z#FL`1dRM)DQuB@&9v-s?yA3{BHZQA84cbACyP7Yaj{N$5gPAL9ri2uR# XNI=te_K6-fkY_zz{an^LB{Ts5f6S`~ literal 0 HcmV?d00001 diff --git a/images/200px.webp b/images/200px.webp new file mode 100755 index 0000000000000000000000000000000000000000..f8b95da1d7a47160fbad9a8d823a04408d14cd55 GIT binary patch literal 360 zcmWIYbaP8!WMBw)bqWXzuuupAvI_(l<}zxXU^u~GH_>B}&(bA}l@u*F1U3k9X68LC z+bF%s{RC%9?Vte26X?2NPBzRUn(7AsjLnQh_ z>ywj{e`Z}>9kw=VD|YJ21%`kB3mq7kHMZ)1^XhG}4T(ya5%zb}vXwer?!5IUM4y~J z)Z@1Ky7)gKXzs#HyYhFy&*k5wL*pmOn0-qzYNAAsdT%_W@W?o~} z^{+Ryd0(ty@T^y!ZNF6^Pqa+u+^hfJ)dVNa-r>!~CO)fay0(?|oQ`twux^>#k{|xI zH*YYm;dKyWJd=o%XBZaSHmY9A+^NCKUd&n>Nh + + + + + + + + + + + HTML element test page + + + +
+ Jump directly to main content +

HTML element test page (h1)

+ + +
+ +
+
+ +
+
+

HTML element test page (h1)

+

Welcome, you've found my testing page. A page with all HTML elements I could drop in (even if not used on site), that is used for testing my CSS to ensure it's works everywhere I can get it to.

+ +

heading 2 (h2)

+

heading 3 (h3)

+

heading 4 (h4)

+
heading 5 (h5)
+
heading 6 (h6)
+ +

Paragraphs

+

A simple little paragraph.

+

Followed by another with a link home

+ +

Lists

+

ul

+
    +
  • List item 1
    • +
  • List item 2
    • +
  • List item 3
    • +
+

ol

+
    +
  1. List item 1
    2. +
  2. List item 2
    3. +
  3. List item 3
    4. +
+

dl

+
+
Term
+
Description 1
+
Descripton 2
+
+

menu

+ +
    +
  • List item 1
    • +
  • List item 2
    • +
  • List item 3
    • +
+ + +

Code

+ 
<p>Example of code inside a pre.<p>
+ Code alone. +

And heres some code inside a tag, namely a paragraph.

+ +

Tables

+

Each of these are wrapped by an element with .tblcon class.

+
+ + + + + + + + + + + + +
Concern/VMServices1
Production Web ServerNginx
Production Web ServerNginx
+
+
+ + + + + + + + + + + + + + + + + + + + + + + +
Concern/VMServices2
Production Web ServerNginxNginxNginx
Production Web ServerNginxNginx
Production Web ServerNginxNginxNginxNginxNginx
+
+
+ + + + + + + + + + +
Concern/VMServices3
Production Web ServerNginx
Production Web ServerNginx
+
+

Table with all elements

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Here's a captioned table
NameEarnedProfit
Mr. Epic£15000£1000
Sludge£35000£19000
Smart fella£69420£50000
£119420£70000
+ +

Blockquotes

+
A section that is quoted from another source
+

Using q tag for inline (short) quotations, as you see. Nifty.

+ +

Form

+

Behold, the mega-form! If you want details check mozilla's form section

+ +

datalist, fieldset, input, legend, meter, output, select, textarea

+

input todo: datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url, week

+
+ + + + + + + + + + +
+ Answer these yes/nos + + + + + + +
+ + + 55% + + + + + + + + + + + +
+ +

Button

+ + Anchor! + +

Grid System

+

Not using one (curently at least) as it's un-needed. Perhaps if I make my own reset/base CSS file I'll add one for you guys.

+

Utilities

+ +

Tags

+
Tag
+

As a span within w another element.

+

Actual usage Tag 1 Tag 2

+ +

Notecards

+ +

Alerts

+ +

Modals

+ +

Example utils I may want

+ Bootstrap utilities + +

Headers

+ +

Menus

+

Maybe I'll do dropdowns soonish

+ +

Searchbars

+ +

Inline elements

+ +

Unplanned/Dumped for now

+

Address

+
testing
+

Article

+
testing
+ +

Aside

+ +

There's also the class .page-nav

+

Images

+

Webp. If it doesn't load your browser doesn't support it, but the picture below will work.

+ Placeholder image +

Picture

+ + + + Placeholder image + + +

Figure

+
+ + + + Placeholder image + +
+
+ + + + Placeholder image + +
figcaption
+
+ +

hr

+
+ +

misc

+

Here's some examples of inline elements I currently don't use (or didn't up to now).

+

The list consists of abbr for abbr abbreviations, bdi for bidirectional text, bdo (rtl) for changing text direction
Oh there was a br (line break), not a new paragraph tag.

+

If something has been removed, because it's wrong for any reason, the del and ins elements are here!

+ +

todo

+

cite, data, dfn, em, i, kbd, mark, s, samp, small, strong, sub, sup, time, u, var, wbr

+

rp, rt, ruby

+ +

Multimedia

+

area, audio, img(done elsehwere), map, track, video

+ +

Embedded content

+

embed, iframe, object, picture, portal, source

+ +

Svg

+ +

canvas

+

This allows for scripting, animations, games, fancier graphics, etc.

+ + +

Interactive elements

+

details

+
+ Gangnam style + OP OP OP OP, OPPA GANGNAM STYLE +
+

dialog

+

Non-suggested way

+ +

I am a dialog box! You cannot kill me!

+
+ +
+ +

It's recommended to use JS to toggle dialogs, but to still use dialog (without the open attribute) over a div for semantic reasoning. + +

Web components

+

slot, template

+

I've never used these, so I'm not sure 100% about their application, omitting for now.

+
+ +
+

Up to date

+

If you're looking for a complete (and up-to-date) list of HTML elements, look over at the mdn web docs.

+

I'm recommending this, as it's where I yoinked all the elements from on , and it's maintained regularly (unlike this page).

+

+ +
+ #TODO: +

Trivia

+

As of today thiss is the largest webpage on my site, with the HTML taking up ~13KB

+
+
+ + + + +