Matt Blake: Internet Newspapers and Magazines

Defining features

Before moving onto new elements, we first must understand two elements that allow the browser to properly display our document. First, designer or developers must include a document type that indicates which version of HTML is being used. In our case, we use the most simple and modern document type -- that for HTML5. In the first line of your HTML file (before the <html> tag), write the following:

<!DOCTYPE html>

This tells the browser to render the code in a manner consistent with modern HTML. Secondly, we need to indicate what character set is being used to display numbers and letters. The modern standard for character sets is eight-bit unicode, written like this within the head of the HTML document:

</title>
<meta charset="utf-8">
</head>

These two pieces of code should be included within every HTML document composed in this course or professionally. Without these specifications, documents or characters will be displayed incorrectly in some browsers or platforms.

Linking

While external linking connects to files or pages elsewhere on the Web, internal linking connects to files or pages within the same directory or site.

Both internal and external links refer to files; the distinction is where the files reside and how to reference the location.

When we create and save XHTML, CSS and image files the resulting data is stored locally (on the computer that is being used). We have been saving our XHTML files on the class directory, which cannot be accessed from outside the lab.

By contrast, when we refer to other files on the Web we are referring to a file stored remotely on a server accessible on the Web. To make a local file a remote file, one must upload the file to another directory (an activity we will explore in the couple weeks).

Relative v. absolute URLs

Despite the obvious drawback of being unable to access our local files anywhere besides our personal computer, using a local directory allows us to use relative URLs. While we used absolute URLs for external links, we will use relative URLs for internal links. Here are the distinctions:

URL (Uniform/universal resource locator): Indicates where documents or files reside on the Web

Example:

http://www.google.com/ -- refers to home directory of Google

Relative URLs indicate the location of a file relative to another location (usually current directory)

Examples:

index.html -- When linked to, this tells the browser to find a file named “index.html” within the directory the current file resides – if all your files reside in the same directory this is your method of referring to another file.

family.jpg -- Tells the browser to find a file named “family.jpg” within the directory the current file resides.

pictures/family.jpg -- Tells the browser to look for another directory (named “pictures”) within the present directory and find a file named “family.jpg”.

music/stairway_to_heaven.mp3 -- Tells the browser to look for a directory named “music” inside the current directory and find a file named “stairway_to_heaven.mp3”.

../family.jpg -- Tells the browser to look in the directory above the current directory for a file named “family.jpg”.

Absolute URLs explain the exact location of a file on the Web, without reference to another location.

Example:

http://mattblake.net/355/index.html -- tells the browser to look for a file named “index.html” within a directory named “355” in the mattblake.net domain.

Linking pages and files locally

All websites have two copies: A “local” copy that exists on the designer’s computer and a “remote” copy that exists on a server connected to the Web. The local site is the editable version. When uploaded, the local site becomes the remote site.

So prior to creating a live (or “remote”) website we must create a local version for testing. This is accomplished by creating many individual XHTML documents and linking the files.

The first step is to create a page, just as in day one (but use a DOCTYPE this time, found in the course online schedule).

<!DOCTYPE html>
<html>
<head>
<title>
John Doe: Second page
</title>
<meta charset="utf-8">
</head>
<body>
<h1>Page two</h1>
<h3>This page is an introduction to my photography</h3>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec egestas risus vitae felis. Curabitur quis augue. Sed in velit non metus tincidunt cursus. Mauris justo ipsum, semper at, rhoncus sit amet, ultricies in, leo. In nec urna. Pellentesque nonummy, dui eget iaculis elementum, dolor risus eleifend tortor, ut dictum sem nisl in nisl. Sed porta.</p>
<p> Curabitur blandit dolor non odio. Sed sagittis eleifend sem. Quisque non lorem. Praesent enim magna, convallis vel, tincidunt eu, accumsan id, sem. Fusce sed metus. Maecenas est. Pellentesque scelerisque facilisis nibh. Curabitur ut leo a dui lacinia varius. Donec ac nunc. Cras sit amet dolor. Nullam lectus diam, semper tincidunt, rutrum posuere, vehicula vel, tellus. Nunc purus nisi, ornare vel, sollicitudin non, sodales at, mi. Donec pharetra sodales erat.</p>
</body>
</html>

You will notice Latin text where English paragraphs would usually reside. This is Lorem Ipsum, an ancient dummy text that is still used in web design when no original content is available. A Lorem Ipsum generator is available at Lipsum.org.

Save this new file as “pagetwo.html” into the same class directory that has “index.html” created last week. Now you have two files that can be linked.

Returning to the above code, we will add an internal link to the index.html file. This link can exist anywhere between the opening and closing body tags (it needs to be displayed in the browser window). For now, let’s put it after the subhead but before the first paragraph:

<h3>This site is an introduction to my photography</h3>
<a href=”index.html”>Homepage</a>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec egestas risus vitae felis. Curabitur quis augue.

Save this file. Open a browser window and the file named “pagetwo.html”. With the page open click on the link with the text “homepage” -- you will be taken to your original index.html page created last week.

If this does not work:

Open your Finder (in Mac) or Windows Explorer (in PC) and find the directory where your files are being saved. There should be both an “index.html” and “pagetwo.html” (with the exact file name -- no spaces or caps). If one is missing, create it and save it to this directory. If both files are in the same directory, double check your link code (see above).

Adding pages and more internal links

To create a four-page website with all pages linked it is critical to understand which HTML corresponds with which page. Right now, your pages and HTML relationship appears something like this:

index.html: Has no link, header reads “Welcome”, an image and list is present

pagetwo.html: Has a link to index.html, header reads “Page two”, long lorem ipsum paragraphs are present

pagethree.html: not yet created

pagefour.html: not yet created

To create a complete four-page site, the following steps must be followed:

Create another unique HTML document with paragraphs and other dummy content. Name it “pagethree.html”. You are welcome to copy and paste code from other pages you have created. Be sure to change headers, page titles and other content though.

Create another unique XHTML document with content. Name it “pagefour.html”.

Now we have four unique XHTML documents. Let’s revisit what is needed on each page:

index.html: needs links to pagetwo.html, pagethree.html, pagefour.html

pagetwo.html: needs links to pagethree.html, pagefour.html

pagethree.html: needs links to index.html, pagetwo.html, pagefour.html

pagefour.html: needs links to index.html, pagetwo.html, pagethree.html
Create the necessary links. Usually links to other pages on the site are grouped together for logical navigation. This is a good idea on this assignment, as well as others in this class. Grouping the tags in the same area within the XHTML document accomplishes this.

Let’s start with our pagetwo.html file. After opening it, we add more link tags after our first link:

<h3>This site is an introduction to my reporting, writing and photography</h3>
<a href=”index.html”>Homepage</a>
<a href=”pagethree.html”>Page three</a>
<a href=”pagefour.html”>Page four</a>
<p> Lorem ipsum dolor sit amet,

Notice that we did not add a pagetwo.html link since we are already on the page. You are welcome to include original link text instead of “Page three”, “Page four”.

Save the file, open it in browser and check its links.

Now we open the other three XHTML files (index.html, pagethree.html, pagefour.html) and add appropriate links. On each page there should be three links on one line -- one for each other page.

One important consideration: Do not group external links with internal links. This can confuse the visitor when they are suddenly taken to another site. For this exercise it is best to include external links in a paragraph or list elsewhere on the page.

Tables

The table element is useful for display of data and organizing information in a digestable manner. While it might take a paragraph or two to explain a dataset, it can be more quickly and easily understand as a table. Let's say we want to provide Chico crime statistics, the table below is an ideal format.

Quarter 1 Crime, 2006-2011

	Rape	Robbery	Assault	Larceny	Homicide
2011	5	16	37	317	2
2010	13	25	34	321	1
2009	17	16	48	348	0
2008	6	19	52	333	0
2007	14	23	81	355	0

Prior to applying CSS, the table may not appear attractive but elements are basic:

<table> Establishes table
<tr> Begins table row
<td> Begins table data cell
</td> Ends table data cell
</tr> Ends table row
</table> Ends table

Each row requires a new tr tag and each cell requires a new td tag. Each newly introduced row appears below the previous row and each new data cell appears to the right of the previous cell. For clarity, lets look at the HTML required to create the above table. Tables should never be used for layout.

Other tags

Two text formatting tags concern us:

<em>Emphasizes (italicizes) text</em>
<strong>Makes text bold</strong>

Lastly, a manual line break is sometimes necessary in the middle of a line of text.

Puts a line break <br />
where the tag is placed.