Interaktionsudvikling, Multimediedesigneruddannelsen, Århus Erhvervsakademi

Dag 2

HTML og CSS

Plan

Hvad arbejdede vi med dag 1?

Løsningsforslag dag 1

Freehostia status

  1. Introduktion til Dreamweaver
  2. Grafik (jpg, gif, png)
  3. XHTML1.0 Strict , HTML historie, Webstandarter
  4. Validering af XHTML
  5. Søgmaskine optimering

Læsestof til disse lektioner

Head First – HTML with CSS & XHTML

Chapter 5 - 7

 

 

 

 

Øvelser/opgaver i ugens emner

 

Introduktion til Dreamweaver

Video introer til Dreamweaver CS3

How to create a website with Dreamweaver CS4 (text tutorial)

Diskussion om Notepad vs Dreamweaver vs Frontpage

 

Chapter 5. Meeting the Media

http://www.headfirstlabs.com/books/hfhtml/chapter5/completedmypod/

Vi kigger lidt på sourcefilerne i mappen HF_HTML_CSS_Code_win\chapter5\mypod-work

 

Chapter 6. Serious HTML

 HTML historie, W3C, doctypes, W3C Validator


Structure (Information) versus style (style, presentation)


Markup Language (ML) => Focus on the structure of the information

Some HTML history(p.228)


1986: SGML (Standart Generalised Markup Language)
1989: Tim Berners Lee invented the WWW in Cern.
1991: HTML1.0: <h1 >,<h6>, <p>, <li> : pure text structure
1993: <img>, <embed><object> : media elements
1994: Browser war: Netscape vs Explorer

Try some old browsers on http://www.dejavu.org/emulator.htm

<font> :Typografi = style
<background>,<frame>,<blink>, <bgsound>

Eksempel på HTML3.2


Platform independant ? Meaning of tags ? Standards ? Structure versus Style?

The guidelines from the World Wide Web Consortium (W3C)

 From HTML => HTML4.01 transitional =>  HTML 4.01 strict

The HTML 4.01 recomendation from W3C (24/12 1999)

Webvillle guide to Strict HTML4.01 (Worddok with scanned page from the textbook)

 

 

dtd

Start of a HTML4.01 strict document.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Head First Lounge</title>
</head>

Guidelines for a HTML4.01 strict document

charset = ISO-8859-1

 

Chapter 7. Moving to XHTML

There isn't so much difference between HTML4.01 strict and XHTML1.0 strict standard! Except:

 

The Most Important Differences:


<img src=”drinks.gif” alt=”Drinks” />remember the alt attribute in images

 

 

Start of a XHTML 1.0 Strict document

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>
</head>

<body>
</body>
</html>

xml:lang = "da" søger for at vi kan bruge danske tegn i indholdet dvs. øåæ i stedet for &oslash; &aring; &aelig;

Ved oprettelse af et standard XHTML 1.0 Strict skal man huske indsætte xml:lang = "da".

Utf-8 er en lidt nyere tegnsæt version af ISO-8859-1

The first 256 characters of Unicode character-sets correspond to the 256 characters of ISO-8859-1.

Læs evt. også

http://www.html.dk/tutorials/xhtml/lektion1.asp

http://en.wikipedia.org/wiki/XHTML

 

 

Validering af XHTML

 


W3C recommend that HTML documents are validated according to W3C doctype standards.

http://validator.w3.org/

Mulighed for 1. Test på uploadet site 2. Test af fil på harddisken 3. Paste html koden ind i et tekst felt.

 

Dreamweaver har også en indbygget validator som findes under file>validate>markup (shift+F6). Denne validering skal dog helst eftertjekkes i W3C's validator.

 

Søgmaskine optimering ( SEO - Search Engine Optimization )

 

Søgemaskineoptimering er en af de mest undervurderede emner inden for webudvikling. De fleste fokuserer på at lave en flot og funktionel hjemmeside, og lære de smarteste, og nyeste teknologier at kende. Men hvad er det sjove i, at have brugt flere arbejdsdage på at udvikle en flot hjemmeside, hvis ingen ser hvor godt et stykke arbejde du har lavet?

Kort intro til SEO på HTML.dk

Intro til SEO i forhold til Google (pdf)

 

Opgaver/Øvelser

 

Individuel:

1. Lav henholdsvis et HTML4.01 strict dokument og xhtml1.0 strict dokument.via Dreamweaver. Gem dokumenterne som henholdsvis html4_01S.html og xhtml1S.html. Test disse dokumenter via W3C's validator.

2. Be the validator and make ex_be.jpg (scanned picture) hint: Webvillle guide to Strict HTML4.01 (Worddok with scanned page from the textbook)

 

3. Change this  webpage (segway page) so that it validates to the XHTML1 Strict strandard. 

 

Gruppe:

4. Lav en xhtml1 strict version af jeres innovation i Århus site. Prøv også at tilføje nogle ekstra billeder eller grafik(logo) ved at finde nogle passende jpeg, gif og png på nettet. Lav f.eks. noget i stil med myPod i kapitel 5.

 

5. SEO: Prøv at søgemaskineoptimere sitet innovation i Århus. Beskriv i et dokument hvad I har gjort.

6. Upload jeres innovation i Århus site m.m. til jeres webhotel (f.eks. freehostian.com).

 

 

Extra øvelser:

 

What is XML used for ? Make an example of a XML document that is not XHTML. hint: google.com or w3schools.com