web som medie
Internet vs WWW Internettet er IKKE det samme som www. Internettet Er et netværk af computere Gør det muligt af dele information Internet protokoller (forskellige måder at udveksle information over internettet) E-mail FTP: File transfer Protokol HTTP: HyperText Transfer Protocol
World Wide Web: Er en internet-teknologi, der bruger HTTP-protokollen
Historisk rids 1960 erne: Internettet udvikles 1989-1991: World Wide Web udvikles og offentliggøres af Tim Bernes-Lee i Schweiz Ideen bag www: at dele information gennem et netværk, der linker dokumenter sammen vha. hypertekst De første browsere er tekstbaserede 1992: kun 50 web serves 1992: den første grafiske browser NCSA Mosaic
Hypertekst I Hypertext is a computer-based structure for organizing information that makes possible to connect text units (different sizes, categories and natures) electronically (links) within the same document or to external documents. It requires active manipulation by the reader in order to be read/wread/used, apart from the cognitive activity common to all reading. (Susana Tosca, 1999)
Hypertekst II WWW er kendetegnet ved at være Hypertext Hypertekst = tekst + links Dokumenter, der er forbundet i et netværk - Brugeren navigerer vha links Pga links kan man på websider skabe multilinaritet Leksikon vs wikipedia
Hvordan virker www? I De computere, der udgør www kaldes web-servere eller HTTPservere Computere skal køre en speciel software, som tillader dem at håndtere HTTP-transaktioner, for at blive en del af www Server - Klient
Hvordan virker www? II
Hvordan virker www? III
Web-side-adresser: URL Uniform Ressource Locator
XHTML XHTML er en web standard XHTML definerer strukturen i et dokument XHTML dokumenter indeholder kun tekst Det er et markup language, fordi det indeholder selve teksten + tags Eksempler: <h1>dette er en overskift</h1> <p>dette er et afsnit, som sikkert indeholder flere linier</p> View Source: www.dr.dk/nyheder/index.html
Hvorfor overholde standarderne? Det gør en webside kompatibel med forskellige browsere Gør websider lettere tilgængelige for søgemaskiner Tjek om din side lever op til standarden på: http://validator.w3.org/
FTP File Transfer Protocol Hvis et dokument skal på nettet, skal den ligge på en web-server For at få den på webserveren kan man bruge et FTP-program som fx Filezilla. http://filezilla-project.org/
print vs Web I Print er primært et lineært medium >< www er et netværk/multilineært Forfatteren kan forudsige læserens rute >< Læserens rute er uforudsigelig Læseren bladrer fra side ét og frem >< Læseren skal tage beslutninger
print vs Web Ii Lang distribueringstid > < Hurtig distribuering Forsider som beskyttelse > < forside som information/kommunikation Ens for alle læsere > < Varierer pga. forskellige computere, skærmstørrelser, skærmopløsninger, browsere osv Hovedfokus på indhold. Man ser gennem teksten > < Større fokus på interface. Man ser på teksten
øvelser
DAgens øvelser 1. 2. 3. 4. 5. Oprette index side Indsætte billeder Lave links Oprette undersider + lave menu Forberedelse til styling i CSS
websider Oprettelse af hjemmeside, dvs. dit websites forside. Denne side kalder man altid for index.html. En webside er bygget op af to lag: Strukturelt lag (i dag) (X)HTML, extensible HyperText Markup Language Beskriver strukturen i dokumentet Præsentationslag (næste gang) CSS, Cascading style sheets Giver information om, hvordan dokumentet skal se ud
Strukturelementer Declaration: <!DOCTYPE> (version af (x)html) Selve html dokumentet: <html> </html> (indrammer resten af din kode) Sideinformation <head></head> (metainformation) fx sidens titel, encoding (fx utf-8), dvs det format, vi har brug for i forhold til vores alfabet Indholdet : <body></body> (dvs. det, der bliver vist i browservinduet)
Indholdselementer Overskrifter Brødtekst Lister
Overskrifter (rubrikker) Overskrifter skrives i et heading tag: <h1>her skrives overskriften</h1> mellemrubrikker (h2-6) fx : <h2>her skrives en mellemrubrik</h2> Nøgleord skal indgå helst som første ord Overskriften må gerne bekræfte et link fra en anden side Skal beskrive sidens indhold præcist
Brødtekst Brødtekst skrives i et paragraph tag: <p>her skrives brødteksten</p> Korte afsnit få linier Start med afsnittets nøgleord Ingen overgange som fx dette... el. endvidere... Del afsnittene op med linieafstand, hvis de er for lange Lav beskrivende mellemrubrikker (h2-6) Scanbare links Skriv tal som tal ikke tekst (1,2, 3...) Lister
Lister Lister skal helst introduceres af en sigende overskrift. Listernes syntaks Unummererede lister: <ul>...</ul> Nummererede lister: <ol>...</ol> Listeelement <li>...</li> <ul> <li> Første element </li> <li> Andet element </li> <li> Tredje element </li> </ul>
Kommentarer Kommentarer bruges til at skrive noter til dig selv, eller andre, der evt. Skal arbejde med dit document. Kommentarer vises ikke I browseren <!-- kommentar eller note til dig selv -->
Billeder Billed-elementet: <img /> Billed-elementet med attributter <img src= alt= />
root folder kunst.dk <html> <html> undersider </html> </html> billeder style.css index.html <html> </html> <html> </html> <html> </html> 0100011 1001000 11010111 0010100 0100011 1001000 11010111 0010100 kunstner.html kunstvaerk.html kontakt.html kunstner.jpg kunstvaerk.gif
At angive stier til filer I mappen under: <img src= billeder/kunstner.jpg alt= logo /> I en mappe over: <img src=../billeder/kunstner.jpg alt= logo />
links Link-elementet <a> </a> Skaber et hypertekst-link til et andet dokument eller del af dokumentet Link-element med attribut <a href= URL >Det_der_skal_klikkes_på</a> <p>du kan læse de seneste nyheder, hvis du klikker<a href= http://www.dr.dk/nyheder >her</a></p>
Mail links <a href= mailto:din_email_adresse > Det_der_skal_klikkes_på</a> <p>send mig en<a href= mailto:ribr@itu.dk >mail</a></ p> Billedlinks <a href= http://www.dr.dk/nyheder ><img src= drlogo. jpg /></a>
Menu Eksterne links Absolut URL <a href= http://www.itu.dk >ITU</a> Interne links Relativ URL Linker til et dokument på den samme web-side relativt til det dokument, man er på I samme mappe: I mappen under: I mappen over: Relativt til root-site: <a href kontakt.html >Kontakt</a> <a href= undersider/kontakt.html >Kontakt</a> <a href=../index.html>forside</a> <a href= /undersider/kontakt.html >Kontakt</a>
root folder kunst.dk <html> <html> undersider </html> </html> billeder style.css index.html <html> </html> <html> </html> <html> </html> 0100011 1001000 11010111 0010100 0100011 1001000 11010111 0010100 kunstner.html kunstvaerk.html kontakt.html kunstner.jpg kunstvaerk.gif
Div og Span <div> </div> Identificerer en blok af tekst Meget brugebart i forbindelse med CSS <div id= menu >...<div> <span> </span> Identificerer inline elementer Rikke: <span class= mail >ribr@itu.dk</span>
Class og ID class Grupperer mange elementer Alle elementer vil få tilført samme style id Giver et unikt navn til et specifikt element Vi kan knytte vores stylesheet til ethvert identificeret element
Links HTML http://htmldog.com/ Design og struktur http://webstyleguide.com/wsg3/index.html Usability http://usability.gov/pdfs/guidelines.html nettekst http://skrivtil.net/index.html
litteratur HTML og CSS Learning Webdesign af: Jennifer Niederst Robbins brugervenlighed Don t Make Me Think af: Steve Krug Brugervenligt webdesign af: Rolf Molich