Html power point


Published on

Published in: Technology
1 Like
  • Be the first to comment

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

No notes for slide

Html power point

  1. 1. HTML/CSS 101 for Journalists <ul><li>An analogy that works for me: </li></ul><ul><li>Building a web site is like building a house. </li></ul>
  2. 2. Web Site = House Analogy <ul><li>Land = web server </li></ul><ul><li>Server is online space where all files for a web site are stored and accessed. </li></ul>
  3. 3. Web Site = House Analogy <ul><li>Address = domain name or URL </li></ul><ul><li>A web site address (i.e. </li></ul>
  4. 4. Web Site = House Analogy <ul><li>Foundation = database </li></ul><ul><li>MySQL – the most popular open source database </li></ul>
  5. 5. Web Site = House Analogy <ul><li>Structure = HTML (HyperText Markup Language) </li></ul><ul><li>HTML is the markup language that controls the structure and format of the web site </li></ul>
  6. 6. Web Site = House Analogy <ul><li>Appearance and Decor = CSS (Cascading Style Sheets) </li></ul><ul><li>CSS governs how the web site looks (fonts, colors, style) </li></ul>
  7. 7. Web Site = House Analogy <ul><li>Content = people who live in the house </li></ul><ul><li>This is what journalists are most concerned about – content </li></ul>
  8. 8. Web Design Basics <ul><li>Most people do not build a web site from scratch. </li></ul><ul><li>They use a Content Management System (CMS) to upload, organize, and publish online content. </li></ul>
  9. 9. Content Management System <ul><li>Common CMS include: </li></ul><ul><li>WordPress </li></ul><ul><li>Drupal </li></ul><ul><li>Joomla </li></ul><ul><li>Some newsrooms build their own CMS to run a web site. </li></ul>
  10. 10. Content Management System <ul><li>A CMS can: </li></ul><ul><li>Organize content </li></ul><ul><li>Standardize visual appearance </li></ul><ul><li>Allow user to upload files (photos, audio, video) to web site </li></ul><ul><li>Publish information to the web </li></ul>
  11. 11. <ul><li>Understanding a web site’s structure and basic HTML and CSS is useful - and essential - for journalists. </li></ul>
  12. 12. HTML Standards <ul><li>World Wide Web Consortium (W3C)—develops and maintains standards </li></ul><ul><li>W3C adds, deletes or modifies HTML commands—called “tags” </li></ul><ul><li>Current version HTML 4.01 – XHTML 1.0 </li></ul><ul><li>HTML 5 –Next generation, embedded audio and video, and works across pc/tablets/mobile </li></ul>
  13. 13. Basic HTML <ul><li>Looks like a basic text document </li></ul><ul><li>Elements: </li></ul><ul><ul><li>Tags </li></ul></ul><ul><ul><li>Attributes </li></ul></ul><ul><ul><li>Comments </li></ul></ul>
  14. 14. Tags <ul><li>Use angle brackets < > to enclose basic HTML information </li></ul><ul><li>Start tag—turns on the command <p> </li></ul><ul><li>End tag—with a back slash, turns off the command </p> </li></ul><ul><li>Standalone tag </li></ul>
  15. 15. More on Tags <ul><li>Structural tags — organize the basic structure of an HTML document </li></ul><ul><li>Tags for graphics and links </li></ul><ul><ul><li><img> tag displays an image file on the Web page </li></ul></ul><ul><ul><li>Anchor tag <a> creates links to other HTML documents </li></ul></ul>
  16. 16. Creating a Link <ul><li><a href=“”>Rowan University</a> </li></ul>
  17. 17. Cascading Style Sheets (CSS) <ul><li>Separate content from style </li></ul><ul><li>Preferred method for formatting text, fonts, colors, and overall appearance </li></ul><ul><li>External style sheet—allows any number of individual pages to link to the same style sheet </li></ul>
  18. 18. Cascading Style Sheets (CSS) <ul><li>Each CSS rule consists of a: </li></ul><ul><li>Selector – the HTML tag outside of curly braces </li></ul><ul><li>Declaration – property and value inside of the curly braces </li></ul>
  19. 19. CSS Style Information Placed in External Style Sheet