Your SlideShare is downloading. ×
  • Like
Intro to HTML5 & CSS3
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Intro to HTML5 & CSS3



Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads


Total Views
On SlideShare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. Intro to HTML & CSS David Fisher July 2012Sunday, July 8, 12
  • 2. Requirements • Text Editor - Notepad, Textmate, vi, emacs, Komodo Edit • Web Browser - Chrome, Firefox, Safari, Opera, Internet ExplorerSunday, July 8, 12
  • 3. What will you learn? • Intro to HTML • Intro to CSS • Brief to Github and Site Hosting • Definitions of Javascript, PHP and WordpressSunday, July 8, 12
  • 4. What you will NOT learn • Every HTML tag • Every CSS rule • In depth CSS positioning • Browser-specific hacks • Anything with a database • Javascript • More studying & practice will be neededSunday, July 8, 12
  • 5. What is HTML? • Hyper Text Markup Language • Provides structure and meaning to the data in a document • Links documents together • Rendered by a web browser for use by humansSunday, July 8, 12
  • 6. About HTML • Set of elements consisting of tags enclosed in angle brackets like <html> • Tags themselves are not visible when rendered in a browser • Tags are most commonly in pairs around data, like <b>This text is bold</b> • Some tags, called empty elements are unpaired, such as <img>, which is used for displaying images.Sunday, July 8, 12
  • 7. What is CSS? • Cascading Style Sheets • Manipulate the appearance (size, position, color, etc) of elements in the HTML • Has a different syntax than HTMLSunday, July 8, 12
  • 8. HTML & CSS • HTML connects documents, and gives the data greater meaning • CSS changes how the document looks to the end userSunday, July 8, 12
  • 9. First Website, 1991Sunday, July 8, 12
  • 10. First Website Code, 1991 For historical reference only Don’t write code like thisSunday, July 8, 12
  • 11. Let’s get started! • Create a file called hello-world.html • Open this empty file in your text editor • Open this empty file in your web browserSunday, July 8, 12
  • 12. Hello, World! Text in Editor Web Browser HTML in editor is rendered in browser. Refresh browser to see changes.Sunday, July 8, 12
  • 13. Deconstructing Hello, World! • Document type needed for proper rendering • Wrap all code in one set of <html> tags • <head> contains a <title>, shown at top of browser • <body> output is rendered in your browserSunday, July 8, 12
  • 14. HTML document structure • Doctype declaration at the top of each page • One set of <html> tags surrounding everything • One <head> at the top, which contains a <title> Other things will go in <head> as well later • One <body>, which contains everything you want in the document bodySunday, July 8, 12
  • 15. Semantic > Presentation • HTML is there to describe the data in the document, not the visual style. • What does your data mean? Is the number 10 an age, inventory count, price, navigation element, etc? • Not only sighted humans read your document; Search engines, screen readers, other programs & more! • More info:, July 8, 12
  • 16. Basic Text Formatting Remember, think about meaning over presentation!Sunday, July 8, 12
  • 17. Headings Headings provide names to sections of your page. They are H1 through H6, decreasing in importanceSunday, July 8, 12
  • 18. i, b, em, strong Historically, some of these i, b have been used for presentation. Do not do this. It is incorrect, and very 2003... Instead now they should have semantic meaning in the document instead of presentation. Any of the tags described can be wrapped around text in the body such as: <i>Babel Fish</i>Sunday, July 8, 12
  • 19. <i> - Alternate Voice Used on transliterated foreign words, idiomatic phrases, alternate mood, technical terms, and typographically italicized text. Prior to Episode I, <i>midi-chlorians</i> were never discussed. If for foreign words, use the lang attribute The <i lang=”ja-latn”>unagi</i> last night was wonderful! Only use if there is no better option semantically.Sunday, July 8, 12
  • 20. <b> • Draw attention to the word without conveying extra importance. • Not always styled as bold. • Think chapter intros where the text is different • Only use where no other more suitable elements <b>Twas the night</b> before Christmas, when through the house, not a creature was stirring, not even a mouse.Sunday, July 8, 12
  • 21. <em> • Used to linguistically stress the emphasis of the content I don’t think you should eat that. I don’t think you should eat that. I don’t think you should eat that. I don’t think you should eat that. I don’t think you should eat that. I don’t think you should eat that. I don’t think you should eat that.Sunday, July 8, 12
  • 22. <strong> • Represents strong importance of the text • Can be styled bold, italic, underlined, etc. • Remember, consider the meaning, not just presentation! Do not open that door!Sunday, July 8, 12
  • 23. Text styling exampleSunday, July 8, 12
  • 24. <p> - Paragraphs • Paragraphs, just as in standard writing, split up the document • Have semantic meaning, just as in writing.Your first paragraph might be your intro, and the last paragraph your summary. • By default, causes a line break, but can be overridden in CSSSunday, July 8, 12
  • 25. <br> - Line Break • Splits up text on the page like a paragraph, but has no semantic meaning. • Does not wrap around other text. Just use <br> where you want your break. Do not use <br />Sunday, July 8, 12
  • 26. Other cool tags to lookup abbr - abbreviations code - computer code cite - citation dfn - defining instance kbd - keyboard input (hit F5 to refresh) q - quote u - annotations wbr - suggested line break for long words var - variable All help give the document rich meaning!Sunday, July 8, 12
  • 27. Links • The glue of the web. Tie documents together • Use the <a> element • Most common usage is with the href attribute to a URL • Goes around the text you want to turn into a link • Can link to full URLs, or relative URLs on the same site • Have lots of other cool, and meaningful attributesSunday, July 8, 12
  • 28. Link ExamplesSunday, July 8, 12
  • 29. Images • Use the <img> tag, and can be linked to with <a href> wrapping it. • Use the src attribute to point to the image URL • Should always have the alt attribute describing the imageSunday, July 8, 12
  • 30. Lists • Lists data • 3 main types: unordered list, ordered list & definition list • Define the type of list, then a series of list items <li> • Sometimes used for navigationSunday, July 8, 12
  • 31. List ExampleSunday, July 8, 12
  • 32. Image examplesSunday, July 8, 12
  • 33. Tables • Hold sets of data (students in class, rainfall per month) • They should never be used to format a webpage • Can get messy to code large ones by handSunday, July 8, 12
  • 34. Table Elements <table> - Wraps the entire table <caption> - Title of the table <thead> - Table head. Contains titles of columns in <th> tags <th> - Defines individual column headings <tbody> - Contains the primary table data <tr> - Single table row, contains many <td> items <td> - Table Data. Yes, that was a lot at once... But it makes more sense in an exampleSunday, July 8, 12
  • 35. Table ExampleSunday, July 8, 12
  • 36. section & article • The article element represents a self-contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. • The section element represents a generic section of a document or application. • The section element is not a generic container element. When an element is needed only for styling purposes authors are encouraged to use the div element instead.Sunday, July 8, 12
  • 37. Why articles & sections? • Give greater meaning to the structure of the document • Visually the same could be accomplished with headers and paragraphs, but it would have less semantic meaningSunday, July 8, 12
  • 38. Article & Section ExampleSunday, July 8, 12
  • 39. Div & Span • Div and Span are used for parts of the page without semantic meaning, and for styling only • While they are used frequently, they are overused • Ask yourself if there is another element that fits better • Often use the class or id attribute so they can be selected for styling with CSS • Div creates a new line & area for itself Span is ‘inline’ for styling without breaking the lineSunday, July 8, 12
  • 40. Div & Span Example Huh? None of the divs do anything? All your style questions will soon be answered...Sunday, July 8, 12
  • 41. Validation • Use a HTML5 validator to double check your work: • You can also test any page, like • Many popular pages have errors! They might work ok now anyway, but on other browsers... what happens? • Aim for zero errors. If you must have errors, learn why you have them.Sunday, July 8, 12
  • 42. Making the Web Beautiful! • So far the pages we’ve done are outright ugly • After the break, we’ll use CSS to style our HTML document • Questions?Sunday, July 8, 12
  • 43. 10 Minute BreakSunday, July 8, 12
  • 44. CSS • Cascading Style Sheets • Separate files that you reference in your HTML head which give style & presentation to the page • Different syntax than HTML, but very easy to learn • Has no semantic meaning. Just visual.Sunday, July 8, 12
  • 45. Inline Styling- The Old Way <p style="color:sienna;margin-left:20px">This is a paragraph.</p> Do not do this!Sunday, July 8, 12
  • 46. Modern CSS HTML CSSSunday, July 8, 12
  • 47. Modern CSS OutputSunday, July 8, 12
  • 48. Targeting - element, id, class • You can target by element, id or class attributes • Each id should have only one instance per page • Classes can be used multiple times per page • Any element can have one id, and multiple classes • In CSS, classes use a . (period) and ids use a # • Prior example just used classesSunday, July 8, 12
  • 49. CSS Example 2Sunday, July 8, 12
  • 50. CSS Example 2 OutputSunday, July 8, 12
  • 51. CSS Inheritance • Some of this can get complex, but in general... • More specific rules override more general ones • If something isn’t overridden, then it cascades downSunday, July 8, 12
  • 52. CSS Reset • Browser defaults aren’t consistent. • Use a CSS Reset first before anything else • Can include as a separate CSS file, or at the top of your CSS file • http://www.cssreset.comSunday, July 8, 12
  • 53. Positioning • Positioning can get complicated • Generally use relative positioning • Read up on margins, align, and widthSunday, July 8, 12
  • 54. Browser Testing • Not all browsers output the same results • Internet Explorer is notorious for non-standard output • Use a browser testing service like:, July 8, 12
  • 55. Version Control with Git • Git is version control software, like cvs, subversion. • Helps backup, store, and share files for development • A bit tricky at first, especially for Windows users • Amazing getting started at:, July 8, 12
  • 56. Github • Most ubiquitous community git hosting • Free accounts available. Paid ones start at $7/month. Allow private repositories • One of the best places to find and contribute to FOSS projects • Amazing place to view other’s code and learn from it.Sunday, July 8, 12
  • 57. Site Hosting Dedicated Managed Shared VPS / Cloud Server/Rack Cloud $$$ Price $ $$ $$ Ease of Use ☆☆☆ ☆☆ ☆ ☆☆☆ Multiple people per Also shared, but you’re You’re in total control, Cloud hosting, with Description server. Like an fully in control of your but also on your own someone else worrying apartment space. Condo. for help. about the tech parts Pay for what you need- The exact hardware Super easy to use, even Strengths Cheap & Easy nothing more. Great you need. for high demand sites scaling. Uptime & performance Not all services as More difficult. Managing Expensive upfront. Weaknesses issues a Linux server Harder to scale quickly. flexible as pure cloud Poor software support hosting. Slicehost, Amazon Web Example Dreamhost, Bluehost Services Rackspace, Equinix Heroku, Engine YardSunday, July 8, 12
  • 58. Deployment • FTP- Most common with shared hosting. Use FTP software to drag/drop files • SSH/SCP- Harder to setup, but more secure. Used more with VPS/Cloud hosting • Git - Deploy using your version control software Used with Heroku git push origin masterSunday, July 8, 12
  • 59. Misc • Javascript - A programming language, often used for making things ‘move’ on the web. Facebook for example uses a ton of it! • PHP - Another programming language. Often used more ‘server-side’, whereas HTML is ‘client-side’. Can access databases, etc. • Wordpress- Content Management System, traditionally used for blogs. Written in PHP.Sunday, July 8, 12
  • 60. Credits • Gargoyle photo used via Creative Commons license. Originally found at: • Some text reused from the HTML5 Working Draft spec from the W3C:, July 8, 12
  • 61. Thank YouSunday, July 8, 12