html and css workshop
DESCRIPTION
HTML and CSS workshop slides by Kat Reeve @ Manchester Girl Geek Tea PartyTRANSCRIPT
Girl Geek Afternoon Tea
HTML and
CSS Workshop
Girl Geek Afternoon TeaHTML & CSS Workshop
Who Am I?Kathryn “Kat” Reeve
a.k.a BinaryKitten
Who Are You?
• Girl Geek• PHP Web Developer (not Designer)
• Gamer (Console, PC and Tabletop)
• Book Reader (tooo many to list)
• Blogger (http://www.BinaryKitten.me.uk)
• Twitter user (@BinaryKitten)
Girl Geek Afternoon TeaHTML & CSS Workshop
HTML
Girl Geek Afternoon TeaHTML & CSS Workshop
What is HTML?HyperText Markup Language
Tags that define content.
Start with “<“
HTML is made up by a few different types of tag.1. Document Structure2. Head content3. Page content
<html></html>
<title>My Site’s Title</title><div></div> <h1></h1>
End with “>“
Usually paired with an opening and closing tag <tag></tag>
Unpaired tags self close - <tag />
• First Conceived by Tim Berners-Lee in 1990• First mentioned online in 1991• HTML 2.0 completed 1995
• Current Version 4.01 published 1999 and errorsacknowledge 2001.
• Became a standard 2000
• HTML 5 first drafted in January 2008 • HTML 5 is still a Work in Progress
Girl Geek Afternoon TeaHTML & CSS Workshop
HTML Document Structure<html>
<head><title>My
Webpage</title></head><body>
Hi from my Webpage
</body></html>
Start and end of the document
Start and end of the Head section.The Title TagStart and end of
body sectionWeb page Content goes here
DocTypes – What are they and how do you use them?
DOCTYPE HERE<html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://tinyurl.com/geekGirlTea-doctype
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML> HTML 5!
• Defines how browsers interpret the page • Allows for Validation
<ul>
<li>Item</li>
<li>Item</li>
<li>Item</li></ul>
• Item• Item• item
Girl Geek Afternoon TeaHTML & CSS Workshop
Tag ExamplesHeading Tags h1-h6 List Tags ul, li and ol, li
<ol>
<li>Item</li>
<li>Item</li>
<li>Item</li></ol>
1. Item2. Item3. item
Text Control Tags• P• br• em• strong• i• b• u• Many more
Form Tags• form• input• fieldset• label• textarea• button
Layout Tags• div• span• hr
Information Tags• abbr• dt, dd, dl• acronym• address
Many, many more
Girl Geek Afternoon TeaHTML & CSS Workshop
The Table Tag - <table></table>HTML Table
Rows - <tr></tr> Cells - <td></td> Headings - <th></th>
http://tinyurl.com/geekGirlTea-tables http://tinyurl.com/geekGirlTea-tables2
Table Section Tags • <thead></thead> - Headers• <tfoot></tfoot> - Footer• <tbody></tbody>- Body
<table><caption>Table’s Caption</caption><thead>
<tr><th>heading</th> <th>heading</th>
</tr></thead><tfoot>
<tr><td>footer</td><td>footer2</td></tr></tfoot><tbody>
<tr><td>content</td><td>content</td></tr><tr><td>content</td><td>content</td></tr><tr><td>content</td><td>content</td></tr><tr><td>content</td><td>content</td></tr>
</tbody></table>
Girl Geek Afternoon TeaHTML & CSS Workshop
Tag attributes <tag attribute=“value”></tag>
<th scope=“col”> - scope denotes what the th refers to
<label for=“item”>Name:</label><input type=“text” name=“item” id=“txt_item” />
<label for=“txt_item”>Name:</label><input type=“text” name=“item” id=“txt_item” />
<p id=“name”> - an id is a good thing to have on all unique items.<li class=“name”> - a class is way of grouping non similar items together.
• Used for grouping, identification and selection
• Used to show how items relate to each other or the document
<label for=“item”>Name:</label>• Used to provide needed functionality
<a rel=”friend” href=“website”>text</a>
• Used to hold information (html 5)
<input type=“text” name=“item” id=“txt_item” /> <a rel=”friend” href=“website”>text</a>
<span data-name=“peter” data-lastname=“pan” />
• Be careful in your knowledge of what refers to what.
Wrong
Correct
Girl Geek Afternoon TeaHTML & CSS Workshop
CSS
Girl Geek Afternoon TeaHTML & CSS Workshop
What is CSS?Cascading Style Sheets
• Uses tag names, id and class attributes • Defined in sections• Myriad of properties can be set • Rules can be overwritten or updated later on
<html><head>
<title>Site Title</title><link href="/style.css" media="screen" rel="stylesheet"
type="text/css" ><link href="/printStyle.css" media=“print" rel="stylesheet"
type="text/css" ></head>
<style type="text/css"> li { border-bottom: 5px solid green; } ul li {
border-bottom: 1px dashed red; } </style>
• Different styles can be used for screen and print – the media attribute
This can be in separate file
Girl Geek Afternoon TeaHTML & CSS Workshop
How Does CSS Work?• CSS divided up into Rules • Rules divided up into selector & property/value pairs
li { border-bottom: 5px solid
green; } ul li {
border-bottom: 1px dashed red;}
selectorRule
PropertyValue
How do the rules apply• Applied in order of listing • Each rule has a score • Higher score = applied first
How are the scores calculated• Tag names (ul / li) score 1 • class names score 10 • IDs score 100
What is a selector• Tag name like ul or li or table • A tag’s id attribute prefixed with # (#id)
• A tag’s class attribute prefixed with . (.class)
Girl Geek Afternoon TeaHTML & CSS Workshop
http://tinyurl.com/geekGirlTea-ictstudent
Notes Online
http://tinyurl.com/geekGirlTea-tables http://tinyurl.com/geekGirlTea-tables2
http://tinyurl.com/geekGirlTea-doctype http://tinyurl.com/geekGirlTea-wikiCSS
http://tinyurl.com/geekGirlTea-wikiHTML
http://tinyurl.com/geekGirlTea-wikiHTML5
http://www.w3schools.com/
http://www.w3schools.com/css/default.asp