7
Coding: XHTML and CSS

Coding: XHTML and CSS. Why code? Writers and editors are often asked to write and edit web copy. Although it is easy to create a web site without coding

Embed Size (px)

Citation preview

Page 1: Coding: XHTML and CSS. Why code? Writers and editors are often asked to write and edit web copy. Although it is easy to create a web site without coding

Coding: XHTML and CSS

Page 2: Coding: XHTML and CSS. Why code? Writers and editors are often asked to write and edit web copy. Although it is easy to create a web site without coding

Why code?

Writers and editors are often asked to write and edit web copy. Although it is easy to create a web site without coding using Content Management Systems (CMS) and pre-made web templates or page / blog generators like WordPress, technical writers and editors who can edit code are in high demand. In Digital Humanities, scholars program in XML and generate their pages in XHTML or higher. Journalists now generate a lot of digital content. So understand basic programming is quite useful.

Page 3: Coding: XHTML and CSS. Why code? Writers and editors are often asked to write and edit web copy. Although it is easy to create a web site without coding

What skills do I need?

A coder’s basic skills include the following:• XHTML or higher (Explorer can’t use

HTML5, the current standard). XHTML is used to generate the structure of your page.

• CSS (Explorer can’t use CSS3, so we use CSS2). Cascading Style Sheets (CSS) are used to manipulate the appearance of a page.

• Image creation/ manipulation• File transfer protocol• File organization

Page 4: Coding: XHTML and CSS. Why code? Writers and editors are often asked to write and edit web copy. Although it is easy to create a web site without coding

What tools do I need?A coder’s basic tools include the following:• An HTML / CSS editing program. You can

use a basic text editor like notepad, but better free tools include HTML toolkit (PC) and Textwrangler (Mac).

• An image creation program. The standards are Fireworks (web) and Photoshop (PC) but cheaper tools exist.

• FTP (File transfer protocol). Filezilla is one of many free FTP programs.

• Dreamweaver, the industry standard, has FTP and coding built in, as well as a WYSIWYG interface.

• Server space / domain space. You need a place to house your pages; many also purchase a domain name like “maryadams.net.”

Page 5: Coding: XHTML and CSS. Why code? Writers and editors are often asked to write and edit web copy. Although it is easy to create a web site without coding

We will use XHTML to create and structure text into “semantic” elements (paragraphs, divisions, headings, lists, etc.) We can use CSS to control layout, color, and appearance.

Before

After

Page 6: Coding: XHTML and CSS. Why code? Writers and editors are often asked to write and edit web copy. Although it is easy to create a web site without coding

What do web writers need to know?

Web writers need to conform to particular styles. The most common are the Web Style Guide and Yahoo Style Guide. • The Yahoo Style Guide deals with

number format, abbreviations, spellings, etc.

• The Web Style Guide creates best practices for page layout, design, usability, and composition.

• W3C (World Wide Web Consortium) publishes the latest standards and practices to make pages accessible to people with disabilities (WCAG), to internationalize them, and make them work on mobile devices. It has a useful tool, the W3 code validation service.

• W3 Schools is a good reference.

Page 7: Coding: XHTML and CSS. Why code? Writers and editors are often asked to write and edit web copy. Although it is easy to create a web site without coding

What are we doing today?We will start with a premade resume template that you can modify, using your revised resume and your own design ideas.

• We will use Dreamweaver to code and to FTP, but you can switch back and forth between Dreamweaver and free HTML programs.

• Your server will be an account on prowritewcu.com

• Your username will be your lastname, first initial, and 303 (ex: obamab303)

• Your password will be the same except with an underline (ex: obamab_303)

• You will define the desktop as your local site