HTML/CSS Workshop @ Searchcamp


Published on

A HTML/CSS workshop presented as part of the Searchcamp accelerator in Middlesbrough on Saturday 8th June 2013

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Sorry… I am not a designer!
  • <title> is not the page title like a H1 its used in the browser and in SEOImportant. Unique.
  • <tr><th>
  • <p>I have split links into two categories</p>
  • assets/img/gallery/thumbs/assets/img/gallery/large/Other images….
  • Lets look at :last-child
  • HTML/CSS Workshop @ Searchcamp

    1. 1. HTML & CSSJames Mills - @jamesmillsSearchcamp - Saturday 8th June 2013
    2. 2. EXCITED TO BE HERE!Ohhhhh yer!
    3. 3. @jamesmills (Geoff)Teesside University - HND IT / BSc ITApplaud Web SolutionsKoodoo CreativeThapJames Mills Live - IFTTTMy Shopping Assistant – Tesco APIPHP North East – NE User groupRefresh Teesside – Founder
    4. 4. Refresh teesside is a free event forpeople in the creative industryaround teessidewhat
    5. 5. We meet on the second Thursday ofevery month between 6pm & 9pm atsassari’s in middlesbroughwhen
    6. 6. bring together the bestand brightest creatives inthe North East to share knowledge, promotetalent and encourage collaboration.goal
    7. 7. What we are going to do todayBuild a simple personal homepage• Your name• Image gallery• Short introduction• List of places visited• List of hobbies• Contact links (Twitter, LinkedIn, Facebook)
    8. 8. QuestionsPlease interrupt with questions
    9. 9. How the web works• Every connected device has an IP address• Each web server has a dedicated IP address• This IP address is like a postal address• You link a domain name to an IP address• Subdomains and mail for a domain can point to differentIP addresses (different servers/services)• When you set the DNS of a domain your telling thecomputer where to look for your website/service• Takes a while to propagate
    10. 10. Text Editors and IDE‟s• Text Editors• Notepad• TextMate• Sublime (We will use this)• Integrated Development Environment (IDE‟s)• Designed to maximize programmer productivity• IDEs are dedicated to a specific programming language• Examples (PHP Storm, Visual Studio)
    11. 11. Project structure• Try and keep all projects in one folder• Stick to a naming convention that your comfortable with• Only keep web files in your web project folder• Underscores not spaces
    12. 12. Different file types• index.html• index.php• index.aspx• HTML pages are static files - No dynamic content, serverside code or anything loaded from Database. Can beloaded in browser with no server.• PHP & ASPX pages have server side code in them whichrequire a server to run them which returns HTML to thebrowser.
    13. 13. Hypertext Markup LanguageWe will look at:• html / header / body / div• h1, h2, p, a, table, ul, li, img
    14. 14. HTML – 1Create a new page index.html<!DOCTYPE html><head><title>My Page Title</title></head><body><!-- page content goes here --></body></html>
    15. 15. HTML - 2h1, h2, h3 – Page headingsp – Paragraphtable - Tabular dataul, ol, li – Unordered & ordered lists. List items.a – Hyperlinks (used to link from one page to another)
    16. 16. HTML - 3<!DOCTYPE html><head><title>James Mills Online</title></head><body><h1>James Mills</h1></body></html>
    17. 17. HTML - 4<h2>Background<h2><h2>Image Gallery</h2><h2>Places visited</h2><h2>Hobbies</h2><h2>Links</h2><h3>Professional</h3><h3>Social</h3>
    18. 18. HTML - 5<h2>Background<h2><p>I am a web develop. I work at Thap.</p><p>You can force a new line within a paragraph.<br />By adding a line brake in it.</p>
    19. 19. HTML – 6<h2>Image Gallery</h2><p>I have created a gallery on a separate page forimages. Click the button below to view the gallery.<p><a href=“gallery.html” title=“James Mills Image Gallery”>Image Gallery</a>
    20. 20. HTML - 7<h2>Places visited</h2><table><tr><td>Dubai</td></tr><tr><td>Australia</td></tr><tr><td>Malta</td></tr></table>
    21. 21. HTML - 8<h2>Hobbies</h2><ol><li>Photography</li><li>Running</li></ol>
    22. 22. HTML - 9<h2>Links</h2><h3>Professional</h3><ul><li><a href=“‟>BBC</a></li></<ul><h3>Social</h3><ul><li><a href=“‟>Twitter</a></li></<ul>
    23. 23. HTML - 10Create a new file called gallery.htmlEnter the following in preparation for the gallery1. Html tags with doctype2. Head3. Title4. Body5. Your own heading, intro and anything else
    24. 24. HTML – 11<!DOCTYPE html><head><title>Gallery</title></head><body><h1>My Photo Gallery<h1><p>Introduction to my gallery</p><a href=“index.html”>Go Back</a></body></html>
    25. 25. HTML – 12• Find a couple of images to go in your gallery.• Create thumbnails (200x200px) -• Put all images together• /img/thumbs/• /img/large/
    26. 26. HTML -13<ul><li><a href=”img/large/image_one.jpg”><img src=”img/thumb/image_one.jpg”></a></li><li><a href=”/img/large/image_two.jpg”><img src=”/img/thumb/image_two.jpg”></a></li></ul>
    27. 27. Let‟s look at what we haveWe now have a html site!1. Open browser2. Open file in folder3. Drag html file into browser
    28. 28. Cascading Style SheetsLet‟s now look at adding some styles.Not just styles. CSS is also used for layout.Will explain the „Cascading‟ part later on.• Colors• Font• Background color• Size• Border• Positioning• Margin, Padding
    29. 29. CSS - 1Inline Styles<h1 style="color:red; border:1px solid #000; text-transform:capitalize; padding:8px; background-color:yellow;">testing</h1>• Dirty, but they work!• Messy codebase• Harder to manage• Cannot share the style across elements
    30. 30. CSS – 2Classes, ID‟s & In-page styles to the rescue!<head><style type="text/css”>/* styles go here */</styles></head>.class_name – use classes for CSS – can have many#id_name – use ID‟s for Javascript – must be unique
    31. 31. CSS - 3<style type="text/css">.title {color:red;border:1px solid #000;text-transform:capitalize;padding:8px;background-color:yellow;}</style><h1 class="title">testing</h1><h2 class="title">another title</h2><a href="#" class="title”>click me</a>
    32. 32. CSS - 4One class applied to many elementsBlock level elementsDefault styles
    33. 33. CSS - 5Better example – gallery itemsLet‟s move our styles to a separate file<link href=”styles.css" rel="stylesheet" media="screen">And reorganise our files into assets/…
    34. 34. CSS – 6<ul class="thumbnails"><li><a href="#" class="thumbnail"><img src="assets/img/gallery/thumbs/one.jpg”></a></li>
    35. 35. CSS - 7ul.thumbnails {list-style: none;}ul.thumbnails li a.thumbnail {float: left;margin-right: 8px;border: 4px solid #999;background-color: #ccc;padding: 12px;}
    36. 36. CSS – 8Now we have one main CSS fileReplace in-page styles for new CSS file in index.htmlLet‟s style some more content
    37. 37. CSS – 9Let‟s look at layouts<div class=“container”><div class="row"><div class=”col">...</div><div class=”col">...</div></div><!-- /.row </div><!-- /.container -->
    38. 38. CSS - 10CSS Selectors• :nth-child(2)• :last-childCheck browser support••
    39. 39. Browser debug/build
    40. 40. CSS FrameworksPure - http://purecss.ioTwitter Boostrap - Grid System - http://960.gsBlueprint - http://www.blueprintcss.orgFoundation -
    41. 41. Twitter BootstrapLet‟s freestyle some Bootstrap into our siteI am going to get shot for using this if anyone finds out!…however the idea is to introduce frameworks because:• Many people contributing• Well tested• Multiple browser support• Fast – good for prototyping• And much more…