Let’s Make a Slide Show HTML Primer

Web Introduction to web production
Let’s make a slide show

I want to set up a time to do an introduction to web production. Most of us learn best went project based. I have a slide show that I have to make and I thought you could all come along for the ride.

This project will result in a click through of images. This introduction will cover Basic HTML code and grooming images for the web using photoshop.

Class materials
A computer
8+ photos or images
Access to Photoshop to resize the images
Illustrator but not necessary.
Notepad for PCs and SimpleTextTextWrangler for Macs (no WISYWIGs yet)
A web browser.

First things first:
Make a thumbnail sketch of the layout for your slideshow. Consistency in where your navigation buttons (in this case next and previous buttons) and display areas are located is critical in good site design.


I then like to use Illustrator to layout my grid it allows me to make numeric widths and heights in pixels so I can make sure I can fit the elements in comfortably. (whitespace is the mantra)

Using Illustrator also allows me to get an idea of the tonality for the UI (User Interface). The images will draw the viewers attention the copy has to be next and the navigation as to be third in most cases. Other tweaks can me made using color and stroke in the final tests.

I also now know the image display area needs to be 720px wide and I can now calculate the margin to the description text.

Photoshop.

Open each image and make it 720px wide it would be excellent for each image to be the same Height and Width. This sometimes won’t happen but if it is possible crop each image to 720x480px 72dpi(screen resolution).

Save the images using PShop’s export to web feature as a JPG with Medium compression. A folder labeled “images” in a folder label “slideshow.”

We are now ready to “Web it Up!”

Basic elements to HTML

All web site have these tags in common:


<html>
<head>
<title>
</title>
</head>
<body>

</body>
</html>


It’s important to understand that HTML “tags” have open tags <body> and close tags </body>

When you get to a web site by typing in its URL you are presented with webpage. The Web Server is configured to display a Home Page or landing page. The most widely used name of this Home Page is index. Some Windows servers use default. Some Servers are configured to recognize either.

The extension we will be using today is .html. You have probably seen extensions of .php, .asp, .aspx,, .htm. These just indicate that the page can use some web services provided by the server that allow server site scripting. We’ll cover that in the next tutorial.

Open TextEdit TextWrangler (PCs use NotePad)
Type this

<html>
<head>
<title> Middlebury SlideShow </title>

</head>
<body>
<h1 id="title">Title</h1>

</body>
</html>

Save the file as index.html in a folder you created called slideshow.

Go to the finder and drag that file into your web browser

Lets add an image:
Add
<img src="images/(THE NAME OF the FILE)" />
Under “Title”

Go to your web browser and refresh the page. you should see you image and text on the same line. if the browser window width is less than the image and the text the image will appear under “Title.”

To a very basic level this demonstrates the fundamental difficulty of formatting websites for the myriad of browsers and user settings. “well it looks correct on my machine,” is the mantra of a poor web programmer.

Formatting the document.
Add a line brake after by typing “<br>” after “Title”.
Save the file, switch to the web browser and refresh the page. The Layout will be consistant reguardless of your browser’s window width.

HTML needs to know when to add line breaks. There will only ever be one space between rendered elements unless you tell the web browser what to do. Adding spaces(with the space bar) or Returns in HTML won’t do it.

Tables
Tables are similar to the columns and rows of excel:

An example of a table’s row

a table’s column:

One rudimentary and reliable way to format your layout is to use tables.
Create a table by typing:

<table>
</table>

Our table will have 2 table rows signified by <tr></tr>

<table>
<tr>
</tr>

<tr>
</tr>
</table>

Our table had 2 columns. Columns are create when you add table data signified by <td></td>

<table>
<tr>
<td>
</td>
<td>
</td>
</tr>

<tr>
<td>
</td>
<td>
</td>
</tr>
</table>

Now add the content:

<table>
<tr>
<td>
NEXT »
</td>
<td>
</td>
</tr>

<tr>
<td>
<img src="images/TheNameOfTheFILE.jpg" />
</td>
<td>
<h1>Title</h1>
<p>Duis vitae sem sit amet mauris posuere laoreet. Sed et enim et ligula congue commodo. Vivamus molestie tellus nec augue. Suspendisse sit amet magna. Phasellus pellentesque ipsum.</p>
</td>
</tr>
</table>

Styling the Table Cells

We’re now going to add style elements to the table Cells to make it look more like our Photoshop Composition.

<html>
<head>
<title> Middlebury SlideShow </title>

</head>
<body background="#b0b2b4">
<table>
<tr>
<td>
NEXT >>
</td>
<td>
</td>
</tr>

<tr>
<td bgcolor="#000000">
<img src="images/TheNameOfTheFILE.jpg" />
</td>
<td bgcolor="#ebecec">
<h1>Title</h1>
<p>Duis vitae sem sit amet mauris posuere laoreet. Sed et enim et ligula congue commodo. Vivamus molestie tellus nec augue. Suspendisse sit amet magna. Phasellus pellentesque ipsum.</p>
</td>
</tr>
</table>
</body>
</html>

Refresh your browser and see how the layout is looking

Refining the Table

We Know the overall width of the table is to be 950px, and that the image view panel is 720px wide. so we will set these as well as the text alignment of the different cells:

<html>
<head>
<title> Middlebury SlideShow </title>

</head>
<body background="#b0b2b4">

<table width="950">
<tr>
<td align="right" width="720">
NEXT >>
</td>
<td>
</td>
</tr>

<tr>
<td bgcolor="#000000" align="center">
<img src="images/1.jpg" />
</td>
<td bgcolor="#ebecec" valign="top" style="padding:20px;">
<h2>Title</h2>
<p>Duis vitae sem sit amet mauris posuere laoreet. Sed et enim et ligula congue commodo. Vivamus molestie tellus nec augue. Suspendisse sit amet magna. Phasellus pellentesque ipsum.</p>
</td>
</tr>
</table>
</body>
</html>

Making links and adding pages

Please copy your document and name the new html file index2.html. Open index.html and change the NEXT >> to read: <a href="index2.html">NEXT >></a>

The “href” tag is followed by the document to be linked in quotes.

Go to your browser and refresh the page. You will see Next >> in blue. Click on the link. Since index2.html is a duplicate of index.html nothing will appear different except for the URL.

Open index2.html in Text Wrangler.

Change the image source reference and change the navigation from:
<a href="index2.html">NEXT >></a>
to
<a href="index.html"><< PREV</a> <a href="index3.html">NEXT >></a>

The HTML for index2.html should look like this:

<html>
<head>
<title> Middlebury SlideShow </title>

</head>
<body background="#b0b2b4">

<table width="950">
<tr>
<td align="right" width="720">
<a href="index.html"><< PREV</a> <a href="index3.html">NEXT >></a>
</td>
<td>
</td>
</tr>

<tr>
<td bgcolor="#000000" align="center">
<img src="images/2.jpg" />
</td>
<td bgcolor="#ebecec" valign="top" style="padding:20px;">
<h2>Title</h2>
<p>Duis vitae sem sit amet mauris posuere laoreet. Sed et enim et ligula congue commodo. Vivamus molestie tellus nec augue. Suspendisse sit amet magna. Phasellus pellentesque ipsum.</p>
</td>
</tr>
</table>
</body>
</html>