TEACH YOURSELF HTML5 & CSS 3: Week 14 - Anchors...

Transcription

11 October 2014
Beginner Level HTML5 / CSS 3
Written by Gerry Kruyer
http://www.gerrykruyer.com
TEACH YOURSELF HTML5 & CSS 3: Week 14 - Anchors Part 5
In this task you will continue working on the website you have been working on for the last four weeks. As part of
this you will find out how to further style your graphic links section, find out how to add a link at the bottom of a
webpage that takes you back to the top of that webpage. If there is time there you will also get an introduction to
website hosting.
Before you start this task properly:
 Open index.html webpage from your SPAN student folder to make sure that you can navigate to all linked
webpages. These should be an image in every webpage except the homepage and each link should function
like a button. All images, links and general page formatting for all four webpages should look similar because
you removed all internal CSS code and instead applied an external style sheet to all four webpages. Your three
graphic links should become partially transparent when you hover over them.
 If you are missing any files including the finished webpages from last week then get them from the Week 14
Resources link in my website.
 Open classic-authors.css in Notepad++ to remind yourself of the CSS code used on your four website pages.
 As we are approaching the end of this course it is a good time for some CSS revision:
a. Change the background colour of the entire website to #C60
Note: #C60 is the shortcut code for #CC6600. If all three hexcode numbers are repeated you can use this
shortcut method.
b. Set H1 heading colour to #AA4D00 and the background colour to rgb(230, 206, 196)
c. Include a dark blue solid border that is one pixel thick on your horizontal lines.
d. Have the small background image that is shown on the right tile down the right side of each
webpage in your website:
(Download image from website: Week 13  resources  images  right-bkg.png)
e. Include CSS code for the thumbs-section of your home page so that when you hover over any part of this
section the border of the thumbs-section changes to gold inset and three pixels thick.
f. Also include CSS code for the thumbs-section of your home page so that when you hover over any part of
this section the squiggle image that you created in TYHTML5 & CSS 3 Week. 4 appears repeated over your
thumbnail section. When hovering in the thumbs block but not on any of your three thumbnail images you
should be able to see the squiggle image repeated around the thumbnails. When you are on a thumbnail
image you should be able to see the squiggle repeated under the image because it is 50% transparent.
g. Set the button text colour to always be set to lime no matter which pseudo-class code applies. (Hint: Take
the colour out of each pseudo-class and add the lime colour in the general anchor code section.)
h. Set the button padding to 6 pixels.
C:\Users\Kruyer\Documents\SPAN\HTML5-coding\beginner\learning-tasks\task14\TYHTML14.docx
Page 1
11 October 2014
i. Add a gradient background to your :link and :visited buttons. Add a flipped version of the gradient for
your :hover buttons. Add a solid background colour for the :active state. The screen shot below shows the
cursor hovering over the Emily Dickinson button. To create this effect follow these six steps and two extra
points:
Step 1. Open either Adobe Photoshop, Adobe Illustrator or PaintDotNet. You will be using
one of these to create the two gradients. Each will be a flipped version of the other
as shown on the right:
and
Step 2. Set your image size to 14 px x 50 px and use web resolution: 72 pixels per inch.
Step 3. Photoshop: Set Color Mode: RGB colour; Background Contents: Transparent.
Step 4. Set the primary/foreground to your chosen colour. Set the secondary/background to white
and then setting the alpha value to zero as shown (using PaintDotNet) on the right:
Step 5. Use a gradient tool to create one of the images. One end of your image should be solid colour and
the other end fully transparent.
Step 6. The other image is created by flipping the first image on the vertical.
The solid colour for the :active pseudo-class should not use a background image. Use RBGA code,
HSLA code or a colour name to optimise your transition time. The colour should match the colour in
your gradient.
You can use supplied backgrounds from my website if you like (btn-back1.png, btn-back2.png).
 Save your additions.
 View your three author webpages
to make sure that all of your
additions have been successfully
applied. Your homepage should
look like that shown on the right
when hovering your mouse
cursor over the Emily Dickinson
button.
When hovering over the Emily
Dickinson
thumbnail
the
homepage looks like that shown
on the bottom-right with the
thumbnail semi-transparent and
the squiggle showing through and
around the thumbnail.
When your cursor is inside the
thumbs-section block but not
over a thumbnail then you should
be able to see your squiggle
image inbetween your three
thumbnails.
When you scroll down in your
homepage the thumbnail graphic
links should not move.
Page 2
11 October 2014
In the advanced level web development course you may learn how CSS 3 code can be used to generate gradients
without having to use separate image/illustration software.
Applying Psuedo Class Styling on Tags other than Links
You have already applied pseudo-class styling to your links/buttons. If you are using an up-to-date version of a
web browser then you can also apply the CSS 3 :hover and :active pseudo-classes to other HTML5 elements.
 Try adding the following CSS code in your external style sheet just after the styling for your paragraph
changing the colour if you like:
p:hover
{
color: green;
}
 Save the changes to classic-authors.css
 View your website pages in in a browser moving your cursor over the paragraphs. Your paragraphs should
change to a green text colour or what ever colour you chose when hovering over them provided you are using
an up-to-date browser. You could also use this technique on headings, spans, divs, blockquotes, anything to do
with the box model such as border and background colours and even horizontal lines.
 Try using :active instead of :hover on your paragraphs and add a dark blue background colour to your
paragraph attributes/value pairs.
 View your website in a browser. Move your cursor over a paragraphs and click your mouse-button down on it
to make sure your :active pseudo-class CSS attributes/value pairs are being applied.
 Give your homepage graphic links section an orange background colour and yellow inset border when you
hover your mouse over this section.
 View your homepage in a browser. Move your cursor over the graphic link section to make sure your :hover
pseudo-class works.
The :hover and :active pseudo-class effect can be a bit annoying when not used with links. This could even be
considered unprofessional! My advice is to use these cautiously when not used with text and graphic links.
Page 3
11 October 2014
Using Anchors to Name Spots, Words and Images
You can get a computer to remember spots, words or images in webpages. To do this you give each spot, word or
image a unique name. Once you have named a spot, word or image in a webpage then you can use a link to jump to
it using any of the four types of hyperlinks (text, graphic, image map or animated). To name a spot, word or image
we use the anchor point code that we have already seen in this task but this time use the attribute name = "…" as
shown in the following example:
<a name = "start">Point 1</a>
Here, the text “Point 1” has been given the name “start” and this data is stored in the computer’s RAM (RAM =
Random Access Memory). Until you shut down the computer, the computer’s RAM will hold this information.
With this data stored in RAM you could then create a hyperlink from some other point in a webpage to this point as
shown in the example below.
Note: When you use a hyperlink to surf to a named point you need to include the # symbol immediately before
the name as shown below:
<a href = "#start">Skip to first point. </a>
Notes: 1/ The eight rules for naming anchor points are exactly the same as the rules for naming your external style
sheets:
i.
Anchor names must begin with a letter of the alphabet.
ii.
Anchor names must only be made up of letters, numbers, dashes or the underscore symbol.
iii.
Do not include spaces in your anchor names!
iv.
For SEO ranking reasons avoid the use of the underscore symbol.
v.
Use the dash to separate words in an anchor name.
vi.
Only use lowercase letters - unless you do not care about your SEO ranking.
vii.
Anchor names should be no more than four or five words in length and no more than 50
characters.
viii. Anchor names should relate to the context that the anchor is used for, they should be brief and
specific to their use for SEO purposes. Use sensible anchor point names that make sense to you.
(Other webpage developers should also be able to understand the purpose of your anchor names
just by reading their names.)
2/ The opening and closing anchor tags do not need to have any text between them at all – this can be left
unfilled as follows: <a name = "start"></a>
3/ Named points are case sensitive. This means that you have to make sure that your uppercase and your
lowercase letters in the < a name = "…"> and < a href = "#…"> anchor tags exactly match
each other. (refer to point 1vi above)
 If you have closed index.html in Notepad++ then open it up again.
 Between the opening <body> tag and the <div class = "navigation"> section place:
<a name = "start"></a>
on a line on its own. This is the very top of your homepage and it makes this code easier to find if you need to
make changes later.
Page 4
11 October 2014
Next you will be creating a link that is placed using fixed positioning somewhere on the left of the homepage so
that if a user of your page scrolled to the bottom of the page then by clicking on your link they would be taken back
to the top of that webpage.
 At the very end of the <div class = "main"> … </div> section just before the </body> tag insert the
following code to make a new division section:
<div class = "up">
<p>
<a href = "#start">Top</a>
</p>
</div>
 Save your addition.
 Next add the following to your external style sheet to position the link you just added.
.up
{
position: fixed;
top: 400px;
left: 10px;
background-color: transparent;
}
 View index.html in a browser to make sure that everything looks fine. Scroll to the bottom of your homepage
to make sure that your new link is fixed on the left and when you click on it your are taken back to the top of
the homepage.
 There is an easy way to style this
new link so that it uses exactly
the same pseudo-class styling as
your other navigation buttons.
See if you can figure out how to
do this. (Speak to Mr Kruyer if
you want some help here.)
Your homepage should now look
like that shown on the right:
 Finally see if you can add your Top button to the other three webpages in your website.
Page 5
11 October 2014
Question 1.
a) What does RAM stand for?
b) What does ROM stand for?
c) What is the difference between RAM and ROM?
Question 2.
When you read that something typed on computer is case sensitive what does this mean?
Question 3.
Of the five link based pseudo-classes that you have learnt so far, what order should they be placed
in your CSS 3 code if more than one is used?
 If you have got this going then give yourself a pat on the back, jump up from your seat and shout out “Yahoo, I
did it!” or nowadays perhaps “Google, I did it!”.
Comments
As a general rule you should be placing appropriate comments explaining throughout your your lines of HTML5
and CSS 3 code.
Generally
web
developers
place
HTML
comments
around
division
blocks.
The
comments give brief
details about what
they do. This is
shown in the code
shown on the right
for the navigation,
thumbnails and main
section:
Remember: If any code is difficult to understand then add comments that explains what it does and/or how it
works. Give as much detail as possible so that when in the future there is a need to make alterations to
the website then it is easier for you, or anyone else working on it, to follow your logic.
 Place some useful comments in your HTML5 code.
 Save your additions to index.html and your other webpages.
Page 6
11 October 2014
 Place comments
in your external
style sheet – you
left a few blank
lines
for
comments at the
top. Add your
name,
date
created and some
sort of copyright
notice. If you
worked for a
business then the
company name
would be added
to the comments
here too.
I like to organise my style sheet code into sections for particular types of CSS code such as text (paragraphs,
headings etc), navigation including navigation buttons, other types of links (page-up buttons, other links), image
code etc. I delineated these sections with comments detailing the purpose of each section. This is especially
important when you build long and involved style sheets. You should do this too!
 Your style sheet should be organised into sections that make sense to you. Add extra lines of comments at the
start of each section of your CSS code.
 Save your additions to classic-authors.css
 Using a browser view your changes to make sure you cannot see the comments within the webpage.
Page 7
11 October 2014
The Internet, Domain Names, IP addresses and Website Hosting
The internet is really a whole lot of smaller computer networks (LANs, MAN's and WAN's) across the world in
more than 140 countries linked together. World Wide Web exchange servers link these smaller networks together.
You get access to these WWW servers through Internet Service Providers or ISP’s and they will charge you a
monthly fee for access to the Internet.
Watch a video on how the internet works.
As you know, you need a browser on your computer (Maxthon, Explorer, Safari, Firefox, Chrome, Opera etc.) to
view pages sent to your computer from another computer connected to the internet elsewhere in the WWW.
In order to pass information between computers connected to the internet, each computer needs to have its own
unique address on the Internet; just as you have you have your own unique home address:
Eg
Mary Brownside,
54 Happy Street,
Preston,
Victoria,
Australia.
A computers address is called its Internet Protocol address or IP address and this is a group of numbers separated
by dots and the order of the numbers is a bit like writing your address in reverse order all on one line as shown
below:
Australia.Victoria.Thornbury.64_Clyde_Street.Kruyer.Gerry
Country
State
Suburb
Street
Surname F-Name
The Post Office probably would get a letter delivered to your home if it was addressed in this way and similarly
webpages are delivered to your computer over the Internet using IP addresses. A typical IP address looks like this:
210.11.182.15
To find out the IP address of a computer connected to the Internet go to:
http://www.whatismyip.com/
Question 4.
What is the IP address of the computer you are currently using?
Question 5.
What is the IP address of the person using a computer nearest you?
Notes: 1/ If the answer to the two previous questions was the same then it is because you are both using a proxy
server.
2/ Try this at home to see what your IP address is there. It will be different to the IP address here.
You can use IP addresses to navigate your way to particular computers on the internet but people find it difficult to
remember sets of numbers. People are much better at remembering words and for this reason domain names were
invented. A domain name is a unique name of a computer anywhere on the Internet that distinguishes it from all
other computers using the internet. Each unique IP address matches up with a unique domain name. When you
type in a website address, the domain name part of the address goes to a Domain Name Server or DNS. This
server matches the domain name with an IP address and returns this to your browser. Your browser then tries to
connect to this IP address. (It might not find that website address because the computer storing that webpage might
be down or the owner of that website might have taken it down temporarily!)
Page 8
11 October 2014
Some people think that domain names are website addresses but they are wrong! The domain name is only the bit
after the http://www. part of a website address. For example SPAN’s website address is
www.spanhouse.org/ however SPAN’s domain name is spanhouse.org and no other website in the world
has that domain name.
Question 6.
Why can’t two different websites have the same domain name?
Question 7.
What is the website address of Google Australia?
Question 8.
What is the domain name of Google Australia?
If you own a business and you want a website for it then you first need to get your own unique domain name.
 Go to www.google.com.au
 Search for “domain names” clicking on the
these options: English, Australia, past year.
Question 9.
button, choosing “Advanced search” then choosing
Find out how much it costs to get an Australian domain name for a made-up business of your own
choosing. Eg plants-for-you.com.au
Note: I want the cheapest price you can come up with!
Once you have a domain name you then need to find a host server to store your website. This does not necessarily
have to be with the same company that found you your domain name.
 Go to www.google.com.au
 Search for “website hosting” with the same criteria as in the previous search.
Question 10. Find out how much it costs to get an Australian server to host your businesses website.
Notes: 1/
2/
I want the cheapest price you can come up with!
What features do they offer you? Eg How much server space? Do they offer you webbased e-mail?
How A Google Search Works
 Watch a Google video on how a Google search works.
Page 9
11 October 2014
Advertising Your Website
Before you begin to advertise your site, you must ensure that:
1.
Everything in your website looks and works perfectly. Testing is extremely important and should be
extensive. Test your pages on both Apple computers using Safari and PC’s using at least Google Chrome,
Mozilla Firefox and Microsoft Explorer.
2.
You have used comments throughout your HTML5, CSS 3, JavaScript, MySQL, PHP, Java and XML code.
(You will cover more of these webpage scripting languages if you take other web development courses at
SPAN.)
3.
You have included sensible and brief webpage titles in each webpage.
4.
You have only used the six heading tags <h1> size down to <h6> size for headings and not for the size of
text in paragraphs. Each webpage should include only one <h1> tag and then use subheadings. No matter
what size heading, all heading should be as succinct as possible.
5.
All of your <img> tags include appropriate alt = "…", width = "…" and height = "…"attributes.
6.
If you or your company requires a copyright on your page then you should get this organised first.
7.
You have added appropriate meta tags such as description. (This is part of the intermediate web
development course at SPAN.)
8.
Your webpage controls spiders appropriately. (This is part of the intermediate web development course at
SPAN.)
Question 11. List two ways in which you should test that your websites are working correctly when they are
stored on a server.
The next step to perform is to add your site to as many of the different search engines listings as possible. You do
this because you can never be sure when a spider from a particular search engine company might visit your site to
update their listings.
Note: There is occasionally a cost involved with listing your website with a search engine. Listing with Google is
free.
The URL’s for listing your website with Yahoo! is:
http://www.yahoo.com/docs/info/include.html
There are many search engine companies and the more of them that you list your website with the better for you
because more people will find out about what you have to say or sell.
 Find out how to list your websites with search engines.
 What is Google Data Centre? (Watch the video)
 Go to the Google Data Centre website: http://www.google.com/about/datacenters/ and explore for yourself.
Question 12. What is the URL for Google?
Question 13. Write down details about how you could list your website with Google.
Question 14. Where is the closest Google Data Centre to you?
Page 10
11 October 2014
Once you have set up a website you should send an e-mail to all of your friends, business partners and associates
letting them know about you and your business. You could pay a company to advertise your page. You should also
set up a Facebook/Google+ site etc.
Include your URL and any other details on all of your stationary such as letterheads and business cards.
There is a lot more for you to to learn concerning links, navigation, creating beautiful buttons and external style
sheets using HTML5 and CSS 3 but you are still covering just the basics. You will leave things here this week and
get back to these topics and much more in the intermediate and advanced HTML5 courses at SPAN.
 Back up everything that you have done in this class to your USB stick including any additions to your css and
images folders. You should do this at the end of every class that you take here at SPAN so that you have a
backup of your files and so that you can revise what you have covered at home over the coming week.

Have you been saving your work to the SPAN student drive every 10 minutes?

Have you backed up all of your work at the end of this lesson to your USB thumb drive including your
images folder and css folder?

Show your webpage to Mr Kruyer for assessment. Also hand in the answers to the questions next week.
Due Dates:
All questions from this task and your four page website should be completed by
Thursday 23rd October 2014.
Page 11

TEACH YOURSELF HTML5 & CSS 3: Week 14 - Anchors...

Transcription

Similar documents

Responsive Design Essentials

Week 2: Basics Part 2

codetalk - St. Joseph Center

Microsoft.Braindumps.70-480.v2014-04-14.by

HOW Interactive Design Conference 2011

Feb 2009 - William Blinn Communications

Intro Lect-Des 117

Copy protection

SandFlex - Surface Innovation

modern designs - Resene Paints

PERPUSTAKAAN SULTAN ABDUL SAMAD CUSTOMER

TEACH YOURSELF HTML5 &amp; CSS 3: Week 14 - Anchors...

Transcription

Similar documents

TEACH YOURSELF HTML5 & CSS 3: Week 14 - Anchors...