Sensible Content

Throughout the creation of our website, we had to make sure that everything was in order regarding the type of content, i.e. any text or images with a risk of offending or being inappropriate.

As my project was about something sensible (Birds of the UK), there would be no risk of unsuitable material being posted.

Advertisements

Table

Our next task was to create a table containing data and/or pictures. I thought listing each bird photographed in a table would be easy viewing and convenient for people visiting the website. Credit for the template goes to www.csstablegenerator.com/

Table

<br /><br /><br /><h1>S-Z</h1>
<br /><br /><div class=”CSSTableGenerator” >
<table>
<tr>
<td>
Bird
</td>
<td>
Picture
</td>
<td>
Description
</td>
</tr>
<tr>
<td>
Starling
</td>
<td>
<img src=”Bird Website Images\S-Z\Starling.jpg” />
</td>
<td>
<p>Habitat: Urban</p>
<p></br>Plumage Colours: Brown</p>
<p></br>Diet: Their beak penetrates the soil like the blackbird, it eats earthworms that rise after a period of rainfall.</p>
<p></br>Info: A small bird whose species is in a state of decline.</p>
</td>
</tr>
<tr>
<td>
Tufted Duck
</td>
<td>
<img src=”Bird Website Images\S-Z\Tufted-Duck.jpg” />
</td>
<td>
<p>Habitat: Water</p>
<p></br >Plumage Colours: Black and White</p>
<p></br >Diet: Molluscs and some plants.</p>
<p></br >Info: The back of its head has a little curl of hair, the beak is curved.</p>
</td>
</tr>
<tr>
<td>
Wood Pigeon
</td>
<td>
<img src=”Bird Website Images\S-Z\Wood-Pigeon.jpg” />
</td>
<td>
<p>Habitat: Urban and Woodland</p>
<p></br >Plumage Colours: Grey and Brown</p>
<p></br >Diet: It is known to eat crops and visit bird tables to feast on seeds. </p>
<p></br >Info: Often clumsy particularly when they are flying often startling passerbys and bumping into hedges.</p>
</td>
</tr>

</table>
</div>

Numbered, Bulleted or Definition List

Bulleted List

Above is a bulleted list, this is useful for categorising or organising a list of more than one item.

Below is the coding used to create a simple bulleted list.

<ul>
<li>Talktalk: stevenjason@tiscali.co.uk</li>
<li>Hotmail: stevenjason@hotmail.co.uk</li>
<li><a href=”https://www.facebook.com/steven.hall.585112″>Facebook</a></li&gt;
<li><a href=”https://www.linkedin.com/profile/preview?locale=en_US&trk=prof-0-sb-preview-primary-buttonLinkedin”>Linkedin</a></li&gt;

Unstyled Page via FTP

Filezilla

Filezilla is an FTP (File Transfer Protocol) where you can upload multiple webpages to a particular site, you will need details on the host, username and password options. The host for example always start of with ftp (ftp.minimise.org) for instance.

Filezilla stevenserver

This is my folder (stevenserver) where all files are uploaded. You have to open up your personal file before copying in a page.

Unstyled Page

Here is a simple page that I created in Coda, all of this code is HTML which found below has no CSS to link too.

<html>
<head>
<title>My first webpage</title>
</head>
<body>
<h1>A list of woodland animals</h1>
<p>Woodpecker</p>
<p>Squirrel</p>
<p>Beetle</p>
</body>
</html>

Images and Animated GIFS

Here is an animated GIF which I created in Photoshop, duplicate the main picture you want to work with, you can manipulate the image in any way you like. Next bring up the timeline and put the images on. You can change the number of seconds and loop forever so you don’t have to refresh the page.

I have also assembled a bunch of images for use on Coda, you have to match all the image files to the folder they are in otherwise you don’t get the desired result.

Here is an example:

<link rel=”stylesheet” type=”text/css” href=”shadowbox/shadowbox.css”>

<script type=”text/javascript” src=”shadowbox/shadowbox.js”></script>

<script type=”text/javascript”>

Animated-GIFimagesscreenshot