Intro to HTML5 & CSS3
- 1. Intro to HTML & CSS David Fisher July 2012 Sunday, July 8, 12
- 2. Requirements • Text Editor - Notepad, Textmate, vi, emacs, Komodo Edit • Web Browser - Chrome, Firefox, Safari, Opera, Internet Explorer Sunday, 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 Wordpress Sunday, 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 needed Sunday, 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 humans Sunday, 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 HTML Sunday, July 8, 12
- 8. HTML & CSS • HTML connects documents, and gives the data greater meaning • CSS changes how the document looks to the end user Sunday, July 8, 12
- 9. First Website, 1991 Sunday, July 8, 12
- 10. First Website Code, 1991 For historical reference only Don’t write code like this Sunday, 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 browser Sunday, 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 browser Sunday, 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 body Sunday, 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_HTML Sunday, 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 importance Sunday, 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 example Sunday, 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 CSS Sunday, 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 attributes Sunday, July 8, 12
- 28. Link Examples Sunday, 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 image Sunday, 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 navigation Sunday, July 8, 12
- 31. List Example Sunday, July 8, 12
- 32. Image examples Sunday, 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 hand Sunday, 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 example Sunday, July 8, 12
- 35. Table Example Sunday, 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 meaning Sunday, July 8, 12
- 38. Article & Section Example Sunday, 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 line Sunday, 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 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 Break Sunday, 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 CSS Sunday, July 8, 12
- 47. Modern CSS Output Sunday, 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 classes Sunday, July 8, 12
- 49. CSS Example 2 Sunday, July 8, 12
- 50. CSS Example 2 Output Sunday, 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 down Sunday, 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.com Sunday, July 8, 12
- 53. Positioning • Positioning can get complicated • Generally use relative positioning • Read up on margins, align, and width Sunday, 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 files for development • A bit tricky at first, 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 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 Yard Sunday, 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 master Sunday, 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/flickr-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 You Sunday, July 8, 12