Embed Size (px)
DESCRIPTION
Barcamp Blackpool HTML Workshop slides by Samantha Bail @ Manchester Girl Geek Tea Party
Citation preview
Girl Geek Tea Party v5HTML Express Intro!
Saturday, 3 July 2010
Sooo...
Saturday, 3 July 2010
Sooo...
• What’s that Girl Geek thingy?
Saturday, 3 July 2010
Sooo...
• What’s that Girl Geek thingy?• What’s the plan for today?
Saturday, 3 July 2010
Sooo...
• What’s that Girl Geek thingy?• What’s the plan for today?
• Quick intro - view source
Saturday, 3 July 2010
Sooo...
• What’s that Girl Geek thingy?• What’s the plan for today?
• Quick intro - view source• HTML skeleton
Saturday, 3 July 2010
Sooo...
• What’s that Girl Geek thingy?• What’s the plan for today?
• Quick intro - view source• HTML skeleton• Some elements...
Saturday, 3 July 2010
Sooo...
• What’s that Girl Geek thingy?• What’s the plan for today?
• Quick intro - view source• HTML skeleton• Some elements...• ... and attributes
Saturday, 3 July 2010
HTML what!?
Saturday, 3 July 2010
Hyper Text Markup Language
Saturday, 3 July 2010
Hyper Text Markup Language
•Whatever.
Saturday, 3 July 2010
Hyper Text Markup Language
•Whatever.•View source!!
Saturday, 3 July 2010
HTML Tags
<h1>
</h1>
Saturday, 3 July 2010
HTML Tags
•Look like this<h1>
</h1>
Saturday, 3 July 2010
HTML Tags
•Look like this• Opening tag: <h1>
</h1>
Saturday, 3 July 2010
HTML Tags
•Look like this• Opening tag: • Closing tag:
<h1>
</h1>
Saturday, 3 July 2010
HTML Elements
<h1>This is a very large heading</h1>
Saturday, 3 July 2010
HTML Elements
•Have an opening & closing tag
<h1>This is a very large heading</h1>
Saturday, 3 July 2010
HTML Documents
<html><head>
<title>title in browser</title>other stuff that is not visible!
</head><body>
all the content goes here!</body>
</html>
Saturday, 3 July 2010
HTML Documents•Must have a certain structure:
<html><head>
<title>title in browser</title>other stuff that is not visible!
</head><body>
all the content goes here!</body>
</html>
Saturday, 3 July 2010
HTML Attributes
Saturday, 3 July 2010
HTML Attributes
•Can / must occur in a tag:
Saturday, 3 July 2010
HTML Attributes
•Can / must occur in a tag:
<img src=”mypic.jpg” />
Saturday, 3 July 2010
HTML Attributes
•Can / must occur in a tag:
<img src=”mypic.jpg” />
<img src=”mypic.jpg” alt=”lovely picture” />
Saturday, 3 July 2010
Most important tags
Browser interprets the style!
Saturday, 3 July 2010
Most important tags
<p> text </p> - Paragraph
<br /> - Line break
<h1> text </h1> - Heading (up to h6)
<img src=”filename.jpg” /> - Image
<a href=”http://twitter.com"> text </a> - Link
Browser interprets the style!
Saturday, 3 July 2010
It’s your turn now. Yay!
http://www.w3schools.com/html/html_intro.asp
http://www.w3schools.com/tags/default.asp
Saturday, 3 July 2010
