Blackwattle Web Samples

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 900 px is the optimum width for mobile and PC

Add more ..

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

JPG or PNG - both compressed image formats - save as both and choose keep the smaller (for the logo below, the JPG is smaller):

Image of Window Explorer showing JPG and PNG file sizes

Dreamweaver (DW) is a great editor for HTML and JavaScript. It is free for students under the DET licencing for Adobe Creative Cloud and works well on both Mac and PC. It interacts well with GitHub, has a great "Live View" but has different error checking standards to VS: Image of the Dreamweaver split interface

Image of the Dreamweaver split interface

It is essential to set up the "Site" when using Dreamweaver. More information in class.

To enhance this template further, you could use "Collapsible" sections with buttons. See: https://www.w3schools.com/howto/howto_js_collapsible.asp

Note that the images above are a maximum of 940 pixels wide.

Text to test the links and anchors.

On mobile phones, the header should stick to the top unless the page is zoomed or elements such as URL's or images are too wide.

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

End of page