Blackwattle Web template

The site is self contained with no references to libraries such as "Bootstrap"!

Note that the logo above does not have dimensions in the "img src"

All images should be optimised and on this template 940 px is the optimum width for mobile and PC

Home

1st heading - Tables, bullets & numbered lists

Home

Example of a 100% width table with colours overriding the CSS:

Orange fill

Green

Example of a "Bullet point list" (unordered list):

This is an "unordered List" <ul>
point 2
Each point is between list tags <li> point 3 </li>
point 4
This "unordered List" ends with </ul>

Example of a "Numbered list" (ordered list):

This is an "ordered list" <ol>
Point 2
Each point is between list tags <li> point 3 </li>
Point 4
This "ordered List" ends with </ol>

Example of a colour analysis - converting to Binary and Hex with the Blackwattle logo. This is also an example of a complex table with CSS to override the standard table font size and spans for the subscripts:

	Base 10 Base 2 Base 16	Base 10 Base 2 Base 16	Base 10 Base 2 Base 16	Hex Colour	Colour
	Red (R)	Green (G)	Blue (B)	Hex RGB	Swatch
Main1 - blue	6510 0100 0001 = 4116	6910 0100 0101 = 4516	19610 1100 0100 = C416	#4145C4
Main2 - orange	25310 1111 1101 = FD16	18910 1011 1101 = BD16	5310 0011 0101 = 3516	#FDBD35

Text to test the anchors

The header should stick to the top on most devices unless URL's are too long or images are too wide

If the header disappears on scrolling (usually on a mobile), delete sections until it works again.

Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.

Home

2nd heading - but anchor is 4 lines above

Text to test the anchors

The header should stick to the top on most devices unless URL's are too long or images are too wide

If the header disappears on scrolling (usually on a mobile), delete sections until it works again.

Home

3rd heading - image optimisation

This image is 660 x 440 JPG 73KB (JPG is lossy compression - combining areas of the same colour):

Stylised image of EV Jaguar of the future
Jaguar to become all-EV brand from 2025 - carsales.com.au
https://www.carsales.com.au/editorial/details/jaguar-to-switch-to-ev-brand-from-2025-128560/
Screen clipping taken: 15/06/2021

This image is 660 x 440 PNG 485KB (large because PNG is lossless compression) - no dimensions in "img src" tag:

This image is 880 x 1319 JPG 149KB (the width is almost maximum for mobile phones):

Image of a cat jumping
Page has no name
https://designbump.com/wp-content/uploads/2014/09/funny-jumping-cats-94__880.jpg
Screen clipping taken: 27/06/2021

Text to test the anchors

The header should stick to the top on most devices unless URL's are too long or images are too wide

If the header disappears on scrolling (usually on a mobile), delete sections until it works again.

Home

4th heading - Website editors (authoring tools)

Both editors described below allow a split screen, where typing in "design" view automatically creates "source" code on the other side. Both show the file structure - "Solution Explorer" in VS and "Local Files" in DW.

The preferred editor is Visual Studio (VS) community (free to anyone), but this doesn't work on Mac. It interacts well with GitHub and provides good support for formatting and error checking:

Adobe Dreamweaver (DW) is also a great editor and this free is under the DET licencing for Adobe. It works on Mac and PC, interacts well with GitHub, has a great "Live View" but has different error checking standards to VS:

Text to test the anchors

The header should stick to the top on most devices unless URL's are too long or images are too wide

If the header disappears on scrolling (usually on a mobile), delete sections until it works again.

End of page