201: Writing & Publishing, Web Design

Publishing for the Web: HTML and CSS

Here are some sample files you might want to reference.

Overview

Now that you have experimented with page layout for print publications, you will take one more step and consider how the content from your ‘zine could be presented on a website. Most print-based publications now showcase at least some of their content on the web, and some literary journals, including WSU’s online journal Blood Orange Review, are exclusively offered online.

The building blocks of any website are HTML and CSS. These are computer languages that tell internet browsers, such as Chrome, Safari, Firefox or Explorer, how to display and style content, including text and images. Your creative goal for this project is similar to the print publishing goal: You want to present your four assigned short stories and their accompanying images in a visually cohesive online publication that does justice to both the text of the stories (font choice, line-length, line-spacing, and margins for comfortable reading) as well as the digital comic strips that accompany them (image size, load time). Now that you are working in a web format, however, some of your concerns will be a bit different: For example, your table of contents will instead be adapted into a homepage and a navigation bar so your readers can click to the story they want to read in a logical way. Likewise, image citations should link directly to the relevant source webpages and creative commons or other licenses.

Instead of using Adobe software, you will write HTML and CSS from scratch to build your webpages. This is the best way to really learn how the web works. (So, no Dreamweaver.) Once you get the hang of HTML and CSS using some readings and copying a tutorial, you will be able to copy, paste, and edit some of what you have already written in order to expand on your first webpage. Here is some more information about HTML and CSS

 

What is HTML?

HTML – hypertext markup language – is the basis for everything on the internet. It’s not a programming language; it is simply a way of structuring different parts of plain text documents in a way that assigns meaning to them. This markup is accomplished through the use of tags, specific words inside of angle brackets that convey a particular meaning. All (almost all, at least) HTML tags require both a start and an end tag: <p>Paragraph Text</p> is how you make a paragraph. All HTML tags are always in lower case. HTML documents are displayed by a web browser (Chrome, Firefox, Safari, Internet Explorer, etc.) which use these tags to interpret how to display the document.

What is Semantic Markup?

The preferred way to create HTML is using a concept called semantic markup, which means striving to separate and name the content of your document (the ideas expressed, images, text) from the presentation (color, formatting, layout, typography). Presentation aspects such as formatting are accomplished through the use of Cascading Style Sheets (CSS). DO NOT apply any visual styling in the HTML. You will need to create five documents that contain valid HTML 5 markup to outline the structure of the document using various HTML tags to demarcate the page header, footer, navigation elements, main body content, and any subdivisions within the main content.

What is CSS?

Cascading Style Sheets control the presentation of your web documents, by assigning fonts, colors, and layout rules to your HTML document. Keeping this presentation separate from the content of your pages is a fundamental aspect of modern web design. It allows you to control the appearance of a website using a separate file containing CSS rules, and allows you to customize pages for different devices and platforms without needing to edit your HTML files.

– – – – –

Requirements

  1. Visually cohesive website with five valid, semantically-correct, well-formed HTML5 pages: one homepage and one page for each of your 4 short stories. These pages should be linked to one another.
  2. The homepage file should be called “index.html”. The other 4 pages should have concise but logical names, such as “saturday-biscuits.html” and “theres-no-place.html” or “story-1.html” and “story-2.html”. HTML and CSS filenames must have no capitalization and no spaces.
  3. The header, navigation bar (with links to each story), and footer for each HTML page should offer consistent content and stay in the same location as one clicks from page to page. These components should orient the reader at all times and let them know what the website is about.
  4. Use one CSS page, named “stylesheet.css”, to visually style and format the content on your pages. This includes everything from font choices to background colors to alignment. (In order for the CSS file to work, you will need to point to it from each of your HTML documents. This is done in the <head> element.)
  5. All images should be saved at a web-appropriate size and resolution. This is very different than images saved for print. Images saved for the web should be 72ppi, and less than 1000 pixels wide.
  6. All the additional content that was featured in your journal, such as the cover text and the citation lists, should be included on the web version of your journal in logical location. This includes:
  7. Cover text: “Arriving Late: Scenes from the Greatest Class I Never Saw, Edited by Bryan Fry, Short Stories from English 251: Introduction to Creative Writing at Washington State University” (some of this might go on the header, some might be more appropriate for the footer).
  8. Image citations should link directly to the relevant source webpages and creative commons or other licenses.

Make sure you use the following HTML tags correctly:

  • <a> – used with the href attribute to create a link
  • <img> – to display images
  • <p> – to mark paragraphs
  • <h1> through <h6> to indicate primary, secondary, and other headings within your document
  • <ul> to define an unordered list (customarily used for a list of navigation elements)
  • <ol> to define an ordered list (numbered)
  • <li> to define list items within the unordered or ordered lists
  • <em> and <strong> for emphasized (italic) or bold text (needs to be semantically appropriate, not only for visually reasons)
  • These HTML5 elements: <header>, <nav>, <main>, <section>, <figure>, and <footer> to declare sections with specific purposes

– – – – –

Readings & Tutorials

You will be provided with a tutorial file to copy in class on Thursday, 11/3. You will copy the HTML and CSS by re-typing it into a simple text editor, such as Text Wrangler, Brackets, or Notepad++ . (We use Text Wrangler in the AML. You cannot use Microsoft Word, which is a word processor, not a text editor. HTML files are plain text, which means you must avoid the formatting material inserted by word processors.) This tutorial will serve as the basis for all your HTML pages and your one CSS page for this project.

You must also read the following topics on the w3schools website (your instructor may give a quiz on some of these topics):

– – – – –

 Workflow

  1. Complete HTML tutorial
  2. Complete CSS tutorial
  3. Adapt and edit the files you created in the tutorials to make five linked HTML pages and one CSS page that styles all five pages.
  4. Make sure each HTML page validates at W3C Markup Validation Service
  5. Make sure your CSS file validates at CSS Validation Service

 – – – – –

What You Will Turn In

Printed:

  • Reflection Sheet
  • Each of your HTML and CSS files open in TextWrangler with Soft Wrap turned on (you may print on both sides of the paper: You can do this part in class on Thursday)

Digital Files (make sure you can hand-in your thumbdrive):

Saved at the top level of your thumbdrive so it is easy to find:

  • Folder called “yourlastname-yourfirstname-04” with the following file structure inside:
yourlastname-yourfirstname-04/
	|
	-----index.html
	|
	-----story-01.html
	|
	-----story-02.html
        |
        -----story-03.html
        |
        -----story-04.html
        |
        -----css/
                |------stylesheet.css
	|
	-----images/
		|
		--------image1.jpg
		|
		--------image2.jpg
                |
                --------(and so on...)

All image files need to be at 72dpi, and in JPG, PNG, or GIF format. Think about your image size as well – there’s no need to have a 4,000 pixel wide image in a web setting as this is generally too large for most browsers.

Your files/folders must be named, organized, and saved exactly as specified here. You will lose a point for each time you fail to follow these instructions. Capitalization and spaces count when naming files (No caps! No spaces!)