1. Intro to HTML & CSSDavid 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 Denitions 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-specic 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 Tags themselves are not visible when rendered in a browser Tags are most commonly in pairs around data, like This text is bold Some tags, called empty elements are unpaired, such as , 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, 1991For historical reference only Dont write code like thisSunday, July 8, 12 11. Lets get started! Create a le called hello-world.html Open this empty le in your text editor Open this empty le in your web browserSunday, July 8, 12 12. Hello, World! Text in EditorWeb 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 tags contains a , shown at top of browser output is rendered in your browserSunday, July 8, 12 14. HTML document structure Doctype declaration at the top of each page One set of tags surrounding everything One at the top, which contains a Other things will go in as well later One , 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: http://en.wikipedia.org/wiki/Semantic_HTMLSunday, 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: Babel FishSunday, July 8, 12 19. - Alternate Voice Used on transliterated foreign words, idiomatic phrases, alternate mood, technical terms, and typographically italicized text.Prior to Episode I, midi-chlorians were never discussed. If for foreign words, use the lang attributeThe unagi last night was wonderful! Only use if there is no better option semantically.Sunday, July 8, 12 20. 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 Twas the night before Christmas, when through the house, not a creature was stirring, not even a mouse.Sunday, July 8, 12 21. Used to linguistically stress the emphasis of the contentI dont think you should eat that.I dont think you should eat that.I dont think you should eat that.I dont think you should eat that.I dont think you should eat that.I dont think you should eat that.I dont think you should eat that.Sunday, July 8, 12 22. 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.

- Paragraphs Paragraphs, just as in standard writing, split up the document Have semantic meaning, just as in writing.Your rst 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.
- Line Break Splits up text on the page like a paragraph, but has no semantic meaning. Does not wrap around other text. Just use
where you want your break. Do not use
Sunday, July 8, 12 26. Other cool tags to lookup abbr - abbreviations code - computer code cite - citation dfn - dening 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 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 tag, and can be linked to with 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 & denition list Dene the type of list, then a series of list items 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 - Wraps the entire table - Title of the table - Table head. Contains titles of columns in tags - Denes individual column headings - Contains the primary table data - Single table row, contains many items - 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 ts 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: http://validator.w3.org/ You can also test any page, like Gizmodo.com 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 weve done are outright ugly After the break, well 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 les 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

This is a paragraph.

Do not do this!Sunday, July 8, 12 46. Modern CSS HTMLCSSSunday, 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 specic rules override more general ones If something isnt overridden, then it cascades downSunday, July 8, 12 52. CSS Reset Browser defaults arent consistent. Use a CSS Reset rst before anything else Can include as a separate CSS le, or at the top of your CSS le 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: http://browsershots.org/Sunday, July 8, 12 55. Version Control with Git Git is version control software, like cvs, subversion. Helps backup, store, and share les for development A bit tricky at rst, especially for Windows users Amazing getting started at: http://try.github.com/Sunday, 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 nd and contribute to FOSS projects Amazing place to view others code and learn from it.Sunday, July 8, 12 57. Site Hosting DedicatedManagedSharedVPS / CloudServer/RackCloud$$$Price$ $$$$ Ease of Use Multiple people per Also shared, but youre Youre in total control, Cloud hosting, with Descriptionserver. Like an fully in control of your but also on your own someone else worryingapartmentspace. Condo.for help.about the tech partsPay for what you need-The exact hardwareSuper easy to use, evenStrengthsCheap & Easynothing more. Great you need. for high demand sitesscaling. Uptime & performanceNot all services as More difcult. Managing Expensive upfront. Weaknessesissuesa Linux server Harder to scale quickly.exible as pure cloud Poor software support hosting.Slicehost, Amazon WebExample Dreamhost, Bluehost ServicesRackspace, Equinix Heroku, Engine YardSunday, July 8, 12 58. Deployment FTP- Most common with shared hosting. Use FTP software to drag/drop les SSH/SCP- Harder to setup, but more secure. Used more with VPS/Cloud hosting Git - Deploy using your version control software Used with Herokugit 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: http://www.fotopedia.com/items/ickr-4011885173 Some text reused from the HTML5 Working Draft spec from the W3C: http://www.w3.org/TR/html5/Sunday, July 8, 12 61. Thank YouSunday, July 8, 12