unit 28 week 4

Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20

What is a web page made of?And how on earth can I make

one?!

Includes content adapted from htmldog.com


ObjectivesToday you will make a web page from scratch in HTML and CSSYou will learn how to change how a webpage looksYou 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 stands for Cascading Style Sheets


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 WebpageType in the HTML box:My first webpageThen 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>

• Though there are a few exceptions

Opening tag Opening tag


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 SeparateBetter:• We can put the styles in the <head>

sectionBest:• We can create a separate CSS file and

link it to our HTML file • JSFiddle does this automatically for us


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 & Valuesbody { font-size: 14px; color: navy; }

Selector Properties Values

Curly Braces Colon between Property & Value

Semi-colon 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 full-

on 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, olive, orange, purple, red, silver, teal, 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 thish1 { color: yellow; background-color: blue; }


Too harsh• If the colours are too harsh, try

softening them a bith1 { color: #ffffcc; background-color: #000099; }


Text Formatting• font-family: this chooses the

font itself, e.g. Arial or Times New Romanbody { 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 none


Try Text Formattingbody { 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; }


Margin Box

Border Box

Padding Box

The Box ModelElement 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, groove, ridge, inset and outset.• border-width sets the thickness,

usually in px• border-color sets the color


Try out Bordersh2 { 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

Education

start20most

start20text

content css

web page

start20adding

start20try

start20change

start20selectors