BASIS HTML

Workshop week 2

In deze workshop gaan we met HTML een kleine informatieve website maken, waarbij we het aangeleverde bronmateriaal als uitgangspunt nemen.

Voor deze workshop kan je gebruik maken van de lesbrief.
Maak gebruik van geldige XHTML tags. (zie http://htmldog.com/reference/htmltags/)

Elementen moeten goed genest worden
niet: Deze tekst vet en cursief
wel:  Deze tekst vet en cursief 
Elementen moeten altijd afgesloten worden
 of  
Elementen moeten met kleine letters geschreven worden
dus niet: <BODY></BODY>
Documenten moeten een root element hebben
<html> <head></head> <body></body> </html>
Attributes moeten in kleine letters en de waardes moeten tussen aanhalingstekens
<img src=”Logo.jpg” alt=”Logo Rotown”>

Opdracht

De ‘New Cool Collective’ treed op in Rotown. Aan jou de taak om dit, op een geode manier, online kenbaar te maken.

Overzicht van de beschikbare bronmaterialen:

Info.doc – alle tekstuele informatie
NNC.jpg – promotie foto
cd_new_cool_collective_out_of_office.jpg – foto nieuwe album
rotown.jpg – kleedkamer Rotown
Rotown-logo.gif – logo Rotown

De beschikbare tijd zal als volgt worden ingedeeld:

±20min – Ordenen, selecteren en bewerken van de content
±20min – Document structuur en HTML bestanden aanmaken
±20min – Elementen benoemen
±20min – Werk bespreken

1. Ordenen, selecteren en bewerken

Denk eraan dat de basis functie van HTML, het data(informatie) structureren en het plaatsen van hyperlinks is. Hiervoor moet dus eerst bepaald worden welke informatie het meest belangrijk, welke minder relevant of zelfs helemaal overbodig is.
De tekst moet opgedeeld worden, zodat de informatie verdeeld kan worden over minimaal 2 verschillende pagina’s.

De beelden die je wilt gebruiken (minimaal 1) moeten op de juiste manier bewerkt worden met bv. Photoshop. Let o.a. op de afmeting, resolutie, bestands grote, kleur/transparantie, uitsnede.

2. HTML bestanden aanmaken

Je kunt hiervoor allerlei programma´s gebruiken, van een simpele tekst editor als notepad of simpletext tot een speciaal hiervoor ontwikkelde dreamweaver. Ook zijn er diverse (X)HTML editors te downloaden van het internet.
Gebruik geen Word of andere geavanceerde tekst verwerkers!
Maak de mappen structuur en de naamgeving helder en duidelijk.

3. Elementen benoemen

Er word nog vaak gebruik gemaakt van de br tag wanneer er eigenlijk een p gebruikt zou moeten worden voor een paragraaf. Ondanks is het toch algemeen geaccepteerd dat de p staat voor een paragraaf. Volgens dezelfde logica zouden er nog een aantal tags gebruikt moeten worden, om een bepaald stuk tekst te definiëren. Zoals bv. cite, address en em.

Denk eraan dat, ondanks dat verschillende browsers sommige elementen anders weergeven, belangrijk is wat ieder element betekend en niet hoe het eruit ziet. De opmaak is nu nog niet belangrijk, het gaat hier dus om een heldere structuur. (vormgeving en CSS komt later deze periode aan de orde)

4. Werk bespreken

Om het werk klassikaal te kunnen bespreken moet het op de server staan.
http://student.cmd.hro.nl/0123456/jaar1/herfst/mme/workshop2/...
Upload alle mappen en documenten die van belang zijn en test online of alles werkt!