This document provides an analogy comparing building a website to building a house. It explains some key components of websites using this analogy, such as the server being the land, the domain name being the address, databases being the foundation, HTML being the structure, and CSS being the appearance and decor. It also discusses content management systems (CMS) that allow users to upload and organize content on a site without building it from scratch.

1. HTML/CSS 101 for Journalists An analogy that works for me: Building a web site is like building a house.

2. Web Site = House Analogy Land = web server Server is online space where all files for a web site are stored and accessed.

3. Web Site = House Analogy Address = domain name or URL A web site address (i.e. http://philly.com)

4. Web Site = House Analogy Foundation = database MySQL – the most popular open source database

5. Web Site = House Analogy Structure = HTML (HyperText Markup Language) HTML is the markup language that controls the structure and format of the web site

6. Web Site = House Analogy Appearance and Decor = CSS (Cascading Style Sheets) CSS governs how the web site looks (fonts, colors, style)

7. Web Site = House Analogy Content = people who live in the house This is what journalists are most concerned about – content

8. Web Design Basics Most people do not build a web site from scratch. They use a Content Management System (CMS) to upload, organize, and publish online content.

9. Content Management System Common CMS include: WordPress Drupal Joomla Some newsrooms build their own CMS to run a web site.

10. Content Management System A CMS can: Organize content Standardize visual appearance Allow user to upload files (photos, audio, video) to web site Publish information to the web

11. Understanding a web site’s structure and basic HTML and CSS is useful - and essential - for journalists.

12. HTML Standards World Wide Web Consortium (W3C)—develops and maintains standards W3C adds, deletes or modifies HTML commands—called “tags” Current version HTML 4.01 – XHTML 1.0 HTML 5 –Next generation, embedded audio and video, and works across pc/tablets/mobile

13. Basic HTML Looks like a basic text document Elements: Tags Attributes Comments

14. Tags Use angle brackets < > to enclose basic HTML information Start tag—turns on the command <p> End tag—with a back slash, turns off the command </p> Standalone tag

15. More on Tags Structural tags — organize the basic structure of an HTML document Tags for graphics and links <img> tag displays an image file on the Web page Anchor tag <a> creates links to other HTML documents

16. Creating a Link <a href=“http://www.rowan.edu”>Rowan University</a>

17. Cascading Style Sheets (CSS) Separate content from style Preferred method for formatting text, fonts, colors, and overall appearance External style sheet—allows any number of individual pages to link to the same style sheet

18. Cascading Style Sheets (CSS) Each CSS rule consists of a: Selector – the HTML tag outside of curly braces Declaration – property and value inside of the curly braces

19. CSS Style Information Placed in External Style Sheet