Unit 28 Week 4

What is a web page
made of?
And how on earth can I make
one?!
Includes content
adapted from
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
htmldog.com

Objectives
Today you will make a web page from
scratch in HTML and CSS
You will learn how to change how a
webpage looks
You will know more about webpages
than 90% of people!

Most important fact:
• HTML is for meaning or content
• CSS is for presentation or looks

(also, not so important fact)
• HTML stands for HyperText Markup
Language
• CSS http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
stands for Cascading Style Sheets
Image from:

Writing HTML/CSS
• I would normally get you to try in
notepad - but it’s not allowed in
school
• Instead, I want you to open

http://jsfiddle.net
• It runs in your browser and lets you
see what your code looks like


Your First Webpage
Type in the HTML
box:
My first webpage
Then click “Run”


Tags
• HTML documents are ‘markup’, meaning
‘tags’ are used to structure content and give
meaning to it.
• Add to your HTML so it is now:
<!DOCTYPE html>
<html>
<body>
My first webpage
</body>
</html>

What Happened?
• It looks the same!
• The tags add meaning not
presentation
• <!DOCTYPE html> tells the
brwowser what kind of HTML you
are using – this is HTML5
• The other tags tell the browser what
is in between the two parts

Tags
• Tags usually work like
<tag>content</tag>
Opening tag

Opening tag

• Though there are a few exceptions


Adding a Title
• Add to your code:
<!DOCTYPE html>
<html>
<head>
<title>My first web page</title>
</head>
<body>
My first webpage
</body>
</html>

Where’s the Title?
• Not on the page – it should come up
in the top bar of the browser (but
JSFiddle doesn’t work like
that, unfortunately)
• Anything inside the <head> tag is
about the page, not on the page

Paragraphs
<!DOCTYPE html>
<html>
<head>
<title>My first web page</title>
</head>
<body>
My first webpage.
How exciting.
</body>
</html>

Does it do what you expected?


Paragraphs
• Browsers ignore new lines and blank
spaces in your HTML code – try
putting in a bunch of spaces instead
of the new line
• To make new lines (or split your text
into two separate sections) you need
to explicitly tell the browser

Paragraphs
• The <p> tag is for paragraphs – change
your code to this:
<p>My first webpage.</p>
<p>How exciting.</p>

Try adding this, too:
<p>Yes, that really <em>is</em>
exciting.
<strong>Warning:</strong> level
of excitement may cause head to
explode.</p>

Adding more Tags
• <em> (for emphasis) displays in
italics and <strong> in bold
• You can also use <br> for a new line
– though it’s best not to use if very
much as you probably should
separate text into proper paragraphs
My first web page<br> How exciting

Headings
• <p> is just the start – if you need
headings and sub headings there are
lots of options!
• <h1>, <h2>, <h3>, <h4>, <h5
>, <h6> are different headings in
order of importance (and size)

Change your Code:
<h1>My first web page</h1>
<h2>What this is</h2>
<p>A simple page put
together using HTML</p>
<h2>Why this is</h2>
<p>To learn HTML</p>

Using Headings:
• Use <h1> just once per page – the
headline or main heading
• Use the others as many times as you
like to structure your work properly


Lists
• The two types of list you need to know
about in HTML are
– Unordered lists (or bullet points)
– Ordered lists (or numbered lists)

• <ul> is used to define unordered lists
• <ol> is used to define ordered lists
• <li> is used for list items in both types
of list

Add to your code
<ul>
<li>To learn HTML</li>
<li>To show off</li>
<li>Because I can.<li>
</ul>
See what happens when you change both
the <ul> tags to <ol>

Change your code:
<ul>
<li>To learn HTML</li>
<li> To show off
<ol>
<li>To my boss</li>
<li>To my friends</li>
<li>To my cat</li>
<li>To the little talking
duck in my brain</li>
</ol>
</li>
<li>Because I can</li>
</ul>

Links
• The Web is all about links – a
webpage without links is a dead end.
• Add this code:
<p><a href=“www.dectc.bham.
sch.uk”>Damo website!</a></p>


More about Links
• href is called an “attribute” – extra
information about the content for the
browser to use
• Links can be “absolute” like this one – to
the full web address
• They can also be “relative” – to a
webpage on the same server or folder
• Links don’t have to be to HTML pages, it
could be to other files

Images
• If all we have is text our webpages
can be a bit boring
• <img> is the tag that adds images
• Add:
<img src="http://www.htmldog.
com/badge1.gif" width="120"
height="90" alt="HTML Dog">

Challenge
• Make a simple html page using the
skills you have developed so far
• Create in JSFiddle.net – and save it!


Making it Look Good!
• So far the HTML pages we’ve created
look duller than a basic Word file
• Let’s make it interesting!
• Styles can be added to any element
to change how they look
• Try:
<p style="color: red">text</p>
Blame the Americans!


Most important fact (reminder):
• HTML is for meaning or content
• CSS is for presentation or looks


Keep it Separate
Better:
• We can put the styles in the <head>
section
Best:
• We can create a separate CSS file and
link it to our HTML file
• JSFiddle does this automatically for
us http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
Image from:

Try it out:
• Make a simple HTML file (or use one
you already created)
• In the CSS section add the code:
p {
color:red
}

Selectors, Properties & Values
• A Selector is the name of the tag you
want to change
• A Property is what you want to
change
• A Value is what you want to set that
property to be

Selectors, Properties & Values
Selector

Properties

Values

body {
font-size: 14px;
color: navy;
}
Colon between
Semi-colon
Curly Braces
Property & Value after value

Units for Values
•
•
•
•

Some values are words
Others are numbers that need units
px (pixels) e.g. font-size:12px;
em (“Emms”) e.g. font-size:2em;
- calculated size of a font as a ratio
i.e. 1em = no change
• % (percent) e.g. width:80%;


Colours
• The following values, to specify fullon as red-as-red-can-be, all produce
the same result:
–red
–rgb(255,0,0)
–rgb(100%,0%,0%)
–#ff0000
–#f00

Colours
• Predefined names can be used, e.g.
aqua, black, blue, fuchsia, gray
, green, lime, maroon, navy, oliv
e, orange, purple, red, silver, t
eal, white, yellow, even
transparent

RGB Colours
• RGB means Red, Green, Blue
• Goes from 0 (e.g. no red) to 255
(e.g. fully red)
• Also done in Hexadecimal (values go
from 00 to FF for RGB)
• Hex is the most common way that
web designers do it

Color and Background-color
• Try this
h1 {
color: yellow;
background-color: blue;
}


Too harsh
• If the colours are too harsh, try
softening them a bit
h1 {
color: #ffffcc;
background-color: #000099;
}

Text Formatting
• font-family: this chooses the
font itself, e.g. Arial or Times New
Roman
body {
font-family: “Times New
Roman”;
}

Text Formatting
• font-size: usually in units of px or
em
• font-weight: makes text bold or
normal
• font-style: makes text italic or
normal
• text-transform: can change the
case of text – possible values are
capitalise, uppercase, lowercase
and http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
none
Image from:

Try Text Formatting
body {
font-family: arial, helvetica, sans-serif;
font-size: 14px;
}
h1 {
font-size: 2em;
}
a {
text-decoration: none;
}
strong {
font-style: italic;
text-transform: uppercase;
}

Margins and Padding
• Try this:
h2 {
font-size: 1.5em;
background-color: #ccc;
margin: 20px;
padding: 40px;
}

The Box Model
Margin Box
Border Box
Padding Box
Element Box


Margins & Padding
• Can be set to each side
independently
–margin-top: 12px;
–padding-left: 20px;
–margin: 12px 5px 0 12px;
Top, Left, Bottom, Right
(anti-clockwise)

Borders
• To add a border, just add a property
of border-style:
• Values can be
solid, dotted, dashed, double, g
roove, ridge, inset and outset.
• border-width sets the
thickness, usually in px
• border-color sets the color


Try out Borders
h2 {
border-style: dashed;
border-width: 3px;
border-left-width: 10px;
border-right-width: 10px;
border-color: red;
}

Try it all out!
• Open the CSS file from the VLE and
add it to the page you’ve been
working on
• Adapt it to suit your page – change
colours, sizes, borders etc.


Unit 28 Week 4

More Related Content

What's hot (17)

Similar to Unit 28 Week 4 (20)

More from MrJRogers (16)

Recently uploaded (20)

Unit 28 Week 4