html and css workshop

12
Girl Geek Afternoon Tea HTML and CSS Workshop

Upload: manchester-girl-geeks-geeks

Post on 19-May-2015

438 views

Category:

Technology


2 download

DESCRIPTION

HTML and CSS workshop slides by Kat Reeve @ Manchester Girl Geek Tea Party

TRANSCRIPT

Page 1: HTML and CSS workshop

Girl Geek Afternoon Tea

HTML and

CSS Workshop

Page 2: 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)

Page 3: HTML and CSS workshop

Girl Geek Afternoon TeaHTML & CSS Workshop

HTML

Page 4: HTML and CSS workshop

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

Page 5: HTML and CSS workshop

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

Page 6: HTML and CSS workshop

<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

Page 7: HTML and CSS workshop

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>

Page 8: HTML and CSS workshop

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

Page 9: HTML and CSS workshop

Girl Geek Afternoon TeaHTML & CSS Workshop

CSS

Page 10: HTML and CSS workshop

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

Page 11: HTML and CSS workshop

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)

Page 12: HTML and CSS workshop

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