Advanced HTML & CSS Tools

Gradient Fills

How to use gradient fills

Find the colour you want on one side: ##FF0000
Find the colour you want on the other side: #000FF
Find the direction you want Red Bottom Top Blue
Program to that direction:
/* A gradient tilted 45 degrees, starting blue and finishing red */
background-image: linear-gradient(45deg, #FF0000, #0000FF);

More information on gradient fills are here:
https://www.w3schools.com/css/css3_gradients.asp

Task: Create a new website and experiment with three different types of gradient fill.

Gradient fills are pretty.

Accessibility - Relevant Implications

Believe it or not Blind people actually use websites

In order to help assist the blind we need to use to use alt properties.

It looks like this

<img src="gorilla.jpg" alt="Giant Black Gorilla">

It is a standard that all pictures have alt text.
Task: Create alt tags for all of your waluigi pictures.
Not all links need to be opened on the same page

use target="_blank" in order to tell a link to open in a new tab

<a href="sockpuppet.html" target="_blank">

Creating a Navigation Bar - Getting Started

Over these next two sections we will be focusing on getting your webpage to look more professional. This will be important for the upcoming assessment.

One very important feature is to have a very professional looking navigation bar

​
Task 1: Create 4 web pages for a photographer.
1.) Create them named index.html, landscape.html, weddings.html, events.html
2.) Find a picture of a smarmy photographer and put it on the index page
3.) Find a landscape, wedding and event picture and put it on the other pages




​
​
Task 3: Create an external CSS sheet that removes the underline and the dots
CSS rules are list-style-type: none; (remove margin and padding also).
Also make  the display for any list items in the header inline;
​
Your CSS should look like this:
This navigation bar, highlights when you mouse over a link

It also tells you which page is the currently active one.


​
​
​

​

Task 2: Add navigation links inside of an unordered list inside header tags
For Example
<header>
    <ul>
       <li><a href="index.html">Home</a></li>
​       <li><a href="landscape.html">Landscape</a></li>
...

Making the links look nice

Task: Make the heading look good.

Now we need to start using some of our CSS skills to make the links look more interesting. Below are some of the CSS rules that you'll need to use/edit:

Text-decoration
overflow: hidden
background colour
margin
padding

header li a:hover (background colour on hover)

Task 2: Make a separate "About" page and "right align" it

Task 3: Make an active page colour

If you get stuck and need more help, go here:
https://www.w3schools.com/css/css_navbar_horizontal.asp

Creating different sections

Task: Use w3 schools to update the website with columns as per specifications:

The photographer wants to display his different price range for each section:
Landscape:
Basic - $500
Standard - $700
Premium - $1100
Weddings
Basic - $1500
Standard - $2100
Premium - $3000
Events
Basic - $4000
Standard - $6000
Premium - $7000

Display each price range in a separate column with separate pictures and borders.

W3 Schools Template link
Change the fonts and colours to make it look better then this.

Website Validation

In order to get an excellence or merit grade you will need to show evidence of using validators...

It is easy simply copy and paste your code into:

Either this HTML editor
https://validator.w3.org/#validate_by_input

Or this CSS editor
https://jigsaw.w3.org/css-validator/#validate_by_input