Week 2: Basics Part 2
20 January 2015
Written by Gerry Kruyer
Beginner Level HTML5 / CSS 3
http://www.gerrykruyer.com
Teach Yourself HTML5 & CSS 3: Week 2 – Basics Part 2
Last week we started with some HTML5 basics. This week we continue with these HTML5 basics and get an
introduction to CSS 3.
Last week you created a file called template.html and saved it in your HTML5 folder on the SPAN student
drive. If not, do that now.
Comments
When working for any company that produces websites (or any other type of software company) you will find that
your HTML code will go for quite a number of pages and can get quite complicated. There will often be a large
group of people working on the website with each person in that group working on a small section of it. Most often
one of these sections of code will interact in some way with other sections and the people working on these small
sections will need to communicate with the others so that they have some idea of what the other sections of code
do.
One way of communicating is by meeting with the other people involved however this is not always possible.
Perhaps people are working different shifts or perhaps people are not even working in the same building or even in
the same country! Perhaps you will be updating a website or some other software and the person that wrote the
original software does not even work with your software company anymore!
People that write software should always explain their code in a help manual so that other programmers can
easily understand their thinking. These people should also write a help manual for users of their software. On top of
this, they should also include explanations in between their actual lines of code whenever there is a section of code
that is hard to understand. These explanations are called comments and are also referred to as "in-line
comments". In-line comments are used in all types of programming languages. This means that if there is a
complicated section of code then you should use comments to explain your code to other programmers and even to
yourself for future reference. Comments are not seen when you run computer programs, you can only see
comments if you view the code.
HTML comments start with
Eg.
<!--
and end with
-->
<!-- This is an example of a comment -->
Comments can be used anywhere within a HTML document – even between an opening and corresponding closing
tag.
Question 1/
What is the difference between software and hardware?
Question 2/
Why should you include in-line comments within your webpages?
Question 3/
Name at least one type of help other than in-line comments that programmers often include with
their software programs?
Using Notepad++ open up task1-yi.html
Recall that yi was replaced with your initials.
Include a comment somewhere between the opening <body> tag and the closing </body> tag of your
HTML document that explains what the tag that follows the comment does.
C:\Users\Kruyer\Documents\TAFE\websiteDevelopment\HTML5\beginner\learning-tasks\task2\TYHTML2.docx
Page 1
20 January 2015
Beginner Level HTML5 / CSS 3
Written by Gerry Kruyer
Resave your HTML5 code with the same name as before.
Now refresh and view your document in your browser again.
Question 4/
Did you see your comment when viewing your webpage? Explain your answer.
Line Breaks
Sometimes it is necessary to place a break in a line such as when an organisation’s logo
which includes some text is set out over two lines as shown on the right:
If you need to start something on a new line without having the paragraph space between the lines and this line
break is considered to be part of the content, as demonstrated with the logo on the right, then use a <br> tag. This
is short for "break" (think of it as a break in the line).
As I said last week, with each opening tag you should include a closing tag but there were a few exceptions and
this is one of them. You could use <br></br> with nothing between them and this would work perfectly fine in
all browsers but save yourself a little bit of typing when using HTML5 by shortening <br></br> to <br>
Note: If you just want to have a line break because you think that it looks nicer there and this break is not how the
text is always set out then you should not be using the <br> tag. In this case the <br> tag is not part of the
content because it is not always set out this way. Instead you should be using CSS code to control how the
text appears in the webpage. You will get an introduction to CSS later in today’s lesson.
Exampled of where it would be appropriate to use a <br> tag are:
If a company’s policy states that your <h1> heading is always written over two lines then in this case it is
perfectly fine to use the <br> tag to set out the heading over two (or more) lines.
A poem that contains a number of stanzas would separate each stanza with a blank line however the lines
contained within each stanza do not have a blank line between them. In this case you would use a <br> tag
between each line within each stanza. To separate each stanza you would use a <p> … </p>.
The poem example would equally apply to the lyrics of a song where you have more than one verse.
A street address such as the one shown on the right:
As an exercise you will create a webpage for a poem:
Make a copy of your template.html saving the copy in your folder on the SPAN
student drive.
Rename this copy as task2-yi.html
Gerry Kruyer
c/- SPAN Community House
64 Clyde Street
Thornbury
Victoria 3071
Australia
replacing yi with your initials.
Open task2-yi.html in Notepad++
Using a browser navigate to:
http://etc.usf.edu/lit2go/114/the-poems-of-emily-dickinson-series-one/2398/love-poem-18-apotheosis/
Copy the two stanza poem including poem’s heading and author’s name from this copyright-free poem.
Replace “Your content here…” in task2-yi.html with the copied poem.
Above the poems “Come Slowly, Eden!” heading add a <h1> sized heading using the following text: Poems
by Emily Dickinson.
C:\Users\Kruyer\Documents\TAFE\websiteDevelopment\HTML5\beginner\learning-tasks\task2\TYHTML2.docx
Page 2
20 January 2015
Beginner Level HTML5 / CSS 3
Written by Gerry Kruyer
Ensure that the <title> section is filled in appropriately.
Use <h2> … </h2> around the heading of the poem. Delete the author’s name underneath this.
Use <p> … </p> around each stanza.
Use <br> to separate lines of each stanza.
Resave your document with the same name as before.
Refresh and view your document in a browser and make sure that the poem is set out as expected.
CSS Basics
If, in the near future, you are working as a website designer for some wiz-bang company with an internet presence,
you will most likely be required to ensure that all the webpages in the websites that you work on for your company
use a certain formatting standard. This is much the same as company secretaries that are expected to type letters
that use a certain styles for the headings and the text in their documents. Cascading Style Sheets (also known
as Style Sheets or CSS) are a powerful and flexible way of specifying formatting information for webpages.
CSS lets you define the font, size, background and foreground colour, background image, margin and other
characteristics for each standard HTML tag for every page in a website. For example, you can display all your
<h1> headings in a particular size, font and colour.
Style Sheets save you time because you only have to set a particular tag’s style once at the top of a webpage or in a
separate style sheet file and as if by magic all those tags in that webpage have that style. If you or your boss do not
like a certain characteristic of your headings or whatever, then it is easy to change those characteristics in just one
place. Imagine the hassle of going through a website that has a huge number of paragraphs in each webpage where
you have to change the font of each paragraph heading – yuck! Make changes in one centralised place and – hey
presto – all webpages are updated straight away.
Notes 1:
Although CSS works with HTML, it is not HTML. It is a completely separate coding language that is
used to enhance HTML pages although it is often included within your HTML code.
2:
You type CSS code in lower-case letters.
3:
Although you can type your HTML code in upper-case I discourage that you do this because:
a) If you ever have to code an XHTML webpage (which is very similar to HTML) then you must use
lower case tag elements so you may as well get used to that.
b) If you want to “code for the future”, then my guess is that you should use lower case tags.
There are three methods of applying CSS to webpages:
1/ Embedded Style Sheets (also known as Internal Style
Sheets)
2/ External Style Sheets
3/ In-line Styles
Embedded or Internal Style Sheets are ideal for individual pages with lots of text. If you have more than one page
in a website then you are better off using external style sheets. In-line styles are used when there is only one
occasion of a particular formatting style in an entire website.
In this task you will be looking at a number of style sheet tags and you will be using embedded style sheets. You
will look at external style sheets and in-line styles in later tasks.
C:\Users\Kruyer\Documents\TAFE\websiteDevelopment\HTML5\beginner\learning-tasks\task2\TYHTML2.docx
Page 3
20 January 2015
Beginner Level HTML5 / CSS 3
Written by Gerry Kruyer
Embedded (or Internal) Style Sheets
Setting up an Embedded Style Sheet is done in the <head> … </head> section of a webpage between
<style> … </style> tags as shown below:
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>Describe your webpage here in no more than 4 words</title>
<style type = "text/css">
</style>
</head>
<body>
Your content here...
</body>
</html>
Using Notepad++, open up your webpage template that you saved in your HTML5 folder and called
template.html that you created last week.
Alter this template to include the opening and closing style sheet tags shown above.
Save your template back into your HTML5 folder.
Remember to back this up to your USB stick as well.
Never ever save over template.html
*
*
unless I tell you to
A program called a CSS Interpreter reads the Cascading Style Sheet sections of your code. This CSS Interpreter
ignores the HTML sections of your code. Once the CSS interpreter has analysed your CSS code it then modifies
your HTML pages according to the definitions that you have used in your style sheet code.
To make your style definitions:
1. Type the HTML5 element name (leave out the < and the >).
2. Next type { and }.
3. Between the curly brackets type the attribute and value pairs with : between them.
4. Finally type ; after each value.
C:\Users\Kruyer\Documents\TAFE\websiteDevelopment\HTML5\beginner\learning-tasks\task2\TYHTML2.docx
Page 4
20 January 2015
Beginner Level HTML5 / CSS 3
Written by Gerry Kruyer
It is easier to understand your CSS code if the parts of the code are lined up neatly using tabs and placing each
attribute/value pair on a new line. I place the } underneath the {. This is shown in the following example:
<style type = "text/css">
h1
{
font-size: 50pt;
color: green;
font-weight: bolder;
}
</style>
In the previous example we are styling the look of all of the <h1> tags in a webpage. When viewed in a web
browser every single <h1> heading will be size 50 points big, will be coloured green and will be formatted in a
slightly bolder bold than a normal heading. (As you already know, all six headings are automatically set to a bold
font.)
Note: You do not need to place each style attribute on a separate line or spaced out using tabs or spaces as I have
done above however, I think that it is a good idea as it makes it easy to find things should you want to make
changes. It also makes it easier to understand your code. So the h1 section could be typed like this:
h1{font-size:50pt;color:green;font-weight:bolder;}
but I think that you would agree that this is not all that easy to read or understand as the code given in the
boxed section above.
You will next add some CSS code to your poem using embedded style sheet code:
In the CSS section of your code between the <style type = "text/css"> … </style> tags include the following
style definitions which are shown in bold:
<style type = "text/css">
h1
{
font-size: 50pt;
color: green;
font-weight: bolder;
}
</style>
Save your addition.
Refresh and view your webpage in a browser. The <h1> text should look different.
The heading looks way too big. Change the font size of the heading to 30 points and its colour to pink.
Save your change.
Refresh and view your webpage in a browser. The <h1> text should again look different.
Now see if you can change the font size of the heading to 25 points and its colour to hot pink.
Save your change.
C:\Users\Kruyer\Documents\TAFE\websiteDevelopment\HTML5\beginner\learning-tasks\task2\TYHTML2.docx
Page 5
20 January 2015
Written by Gerry Kruyer
Beginner Level HTML5 / CSS 3
Refresh and view your webpage in a browser. Did you get a hot pink coloured heading? If you didn’t then it is
because you typed hot pink rather than hotpink. If you look closely at my CSS colour names table then
you will notice that all colour names with two or more words have no spaces between the words! Words used
in colour names should not be separated by any character at all. For example darkolivegreen should be
typed just like that, and not as “dark olive green”.
There are numerous attribute/value combinations that can be applied to HTML5 tags. Below is a small selection:
Attribute:
font-size: 12pt;
font-family: Georgia, "Times New
Roman", serif;
font-weight: bold;
font-style: italic;
Used for:
Font size in points (pt) or pixels (px). There are other types of units.
Font (You should use a font preference list with a coma between each.
Most preferred font goes 1st. If a font name has spaces in it or you are
downloading a font then enclose it in quotes.
End a list with a generic font:
serif | sans-serif | cursive | fantasy | monospace)
Font weight (bold, bolder, light, lighter or normal)
line-height: 20pt;
Font style (italic, oblique or normal)
Font colour. Use a predefined colour, hex code, RGB colour code,
RGBA colour code, HSL code or HSLA code.
Background colour: Use a predefined colour, hex code, RGB colour
code, RGBA colour code, HSL code or HSLA code for a background
colour.
Background image: Use url(image.ext) where image.ext is the
image address. The image must be either a .gif, .jpg or .png image.
fixed for static background (watermark).
scroll to have a scrolling background.
Line height in pixels (px), points (pt) or centimetres (cm)
margin: 10px;
Margins in pixels (px) or centimetres (cm)
margin-left: 20px;
Left margin only in pixels (px) or centimetres (cm)
margin-right: 1cm;
Right margin only in pixels (px) or centimetres (cm)
margin-top: 2cm;
Top margin only in pixels (px) or centimetres (cm)
margin-bottom: 10px;
Bottom margin only in pixels (px) or centimetres (cm)
text-align: center;
text-decoration: box;
Text alignment (left, right, center, or justify)
Text indent for first line only in pixels (px) or centimetres (cm) or
percentage (%). For a hanging indent use a negative sign (-).
Text effect (underline, line-through, overline, box or none)
text-transform: uppercase;
To change the text case (uppercase, lowercase, capitalize or none)
word-spacing: 10px;
Space between words in pixels (px), points (pt) or centimetres (cm)
letter-spacing: 5px;
Spacing between letters in pixels (px), points (pt) or centimetres (cm)
color: green;
background-color: silver;
background-image: url(image.ext);
background-attachment: fixed;
text-indent: 15%;
Try to alter the spacing between each letter in the heading to 10 points. (Points are a measure of letter height).
Save your change.
Refresh and view your webpage in a browser. The letters in your <h1> heading should be spaced further apart.
C:\Users\Kruyer\Documents\TAFE\websiteDevelopment\HTML5\beginner\learning-tasks\task2\TYHTML2.docx
Page 6
20 January 2015
Beginner Level HTML5 / CSS 3
Written by Gerry Kruyer
Now try to alter the background colour of your heading to silver.
Save your change to task2-yi.html
remembering that yi was replaced with your initials.
Refresh and view your webpage in a browser. The hot pink heading should have a greyish background.
Now try to alter the background colour of your <h1> heading to a colour of your choice.
Save your change to task2-yi.html
Refresh and view your webpage in a browser.
Format your entire webpage so that the background is green. Hint: The HTML5 tag that you use to format the
entire webpage is <body> … </body>
Save your change to task2-yi.html
Refresh and view your webpage in a browser.
Back up everything that you have done in this class to your USB stick. 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 backed up all of your work at the end of this lesson to your USB thumb drive?
Have you been saving your work to the SPAN student drive every 10 minutes?
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 task2-yi.html should be completed by Thursday
31st July 2014.
C:\Users\Kruyer\Documents\TAFE\websiteDevelopment\HTML5\beginner\learning-tasks\task2\TYHTML2.docx
Page 7
© Copyright 2024