View
255
Download
0
Embed Size (px)
DESCRIPTION
BTEC IT Level 3 Unit 28 Week 4- introduction to HTML and CSS
Citation preview
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
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
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!
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
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
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
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
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
Your First WebpageType in the HTML box:My first webpageThen click “Run”
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
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>
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
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
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
Tags• Tags usually work like<tag>content</tag>
• Though there are a few exceptions
Opening tag Opening tag
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
Adding a Title• Add to your code:<!DOCTYPE html><html> <head> <title>My first web page</title> </head><body> My first webpage </body></html>
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
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
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
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?
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
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
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
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>
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
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
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
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)
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
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>
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
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
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
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
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
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>
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
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>
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
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>
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
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
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
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">
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
Challenge• Make a simple html page using the
skills you have developed so far• Create in JSFiddle.net – and save it!
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
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!
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
Most important fact (reminder):• HTML is for meaning or content • CSS is for presentation or looks
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
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
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
Try it out:• Make a simple HTML file (or use one
you already created)• In the CSS section add the code:p { color:red}
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
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
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
Selectors, Properties & Valuesbody { font-size: 14px; color: navy; }
Selector Properties Values
Curly Braces Colon between Property & Value
Semi-colon after value
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
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%;
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
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
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
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
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
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
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
Color and Background-color• Try thish1 { color: yellow; background-color: blue; }
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
Too harsh• If the colours are too harsh, try
softening them a bith1 { color: #ffffcc; background-color: #000099; }
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
Text Formatting• font-family: this chooses the
font itself, e.g. Arial or Times New Romanbody { font-family: “Times New Roman”;}
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
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
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
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; }
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
Margins and Padding• Try this:h2 { font-size: 1.5em; background-color: #ccc; margin: 20px; padding: 40px; }
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
Margin Box
Border Box
Padding Box
The Box ModelElement Box
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
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)
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
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
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
Try out Bordersh2 { border-style: dashed; border-width: 3px; border-left-width: 10px; border-right-width: 10px; border-color: red; }
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20
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.