HTML/CSS 101 for Journalists

An analogy that works for me:

Building a web site is like building a house.

Web Site = House Analogy

Land = web server

Server is online space where all files for a web site are stored and accessed.

Web Site = House Analogy

Address = domain name or URL

A web site address (i.e. http://philly.com)

Web Site = House Analogy

Foundation = database

MySQL – the most popular open source database

Web Site = House Analogy

Structure = HTML (HyperText Markup Language)

HTML is the markup language that controls the structure and format of the web site

Web Site = House Analogy

Appearance and Decor = CSS (Cascading Style Sheets)

CSS governs how the web site looks (fonts, colors, style)

Web Site = House Analogy

Content = people who live in the house

This is what journalists are most concerned about – content

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.

Content Management System

Common CMS include:

• WordPress

• Drupal

• Joomla

Some newsrooms build their own CMS to run a web site.

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

Understanding a web site’s structure and basic HTML and CSS is useful - and essential -

for journalists.

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

Basic HTML

• Looks like a basic text document

• Elements:

–Tags

–Attributes

–Comments

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

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

Creating a Link

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

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

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

CSS Style Information Placed in External Style Sheet