Om Internett, World Wide Web, egen hjemmeside Ole Christian Rynning

Læringsmål Kjennskap til Internett Kjennskap til World Wide Web Lære å lage en UiO hjemmeside

Internett Verdensomspennende nettverk Standardiserte protokoller Distribuert arkitektur (ikke sentralisert) Åpent og fritt*. Mange ulike tjenester E-post, World Wide Web, Instant Messaging, Internet Relay Chat, News, m. fl.

World Wide Web Informasjonsflyt og deling av informasjon Hjemmesider, nettaviser, forskningsportaler Navigeres med hyperlinker Innhold i HTML sider Bruker HTTP for å utveksle data mellom HTML-sider.

HyperText Markup Language Standard-tekstformat for å vise sider på WWW, kommer fra SGML XML, XHTML og HTML (4) Bruker tag baserte direktiver. Elementer, noder er synonymer til tagger.

tag En tag er en instruksjon til nettleseren om hvordan den skal vise siden. Tagger omsluttes av ’ ’ Innhold omsluttes av en start og stopp tag Start-tag Stopp-tag (ende-tag, slutt-tag)

tag attributter Tagger kan ha attributter id=”1” betyr her at attributtet ’id’ har verdien ’1’.

tag innhold Start-tag, med attributt class med verdi x Innhold her. Innholdet til div taggen Halvfet Halvfet; innhold til b taggen Stopp-tag

Nødvendige HTML tags Dokument-tag som omslutter hele tekstdokumentet. Inneholder direktiver og formatteringsbeskrivelser. Sidens tittel. Tag som omslutter alt det som skal være synlig på hjemmesiden.

Vanlige HTML tags - Overskrift. Paragraf/avsnitt. linebreak/ny linje. Horisontal linje halvfet tekst kursiv tekst Anker, hyperlink bilde Uordret liste Listeting gruppering inline (tekststrenger) gruppering blokker (flere tagger)

HTML grunnstruktur Sidens tittel Her kommer sidens innhold som vises i din nettleser.

Hyperlenker Hyperlenker, tag er en måte å skape navigasjon mellom sider på WWW. Siden som skal lenkes til legges i attributtet ’href’. Innholdet i taggen er det som vises i nettleseren Eks: oc uio Er pekere mellom forskjellige nettsteder eller nettsider.

CSS Cascading Style Sheet Standardteknologi for å pynte på nettsider Endre layout, form, størrelse, farge, kantlinjer, … Kan skrives inn i HTML dokumentet i taggen, eller i egen fil. Egen fil, legg til i sin body:

CSS CSS direktiver består av en identifikator og en blokk. Blokken inneholder instruksjoner for hvordan ”ting” skal vises og omsluttes av ’{’ og ’}’. identifikator { color: blue; background: yellow; }

CSS: Identifikatorer Element (#) Velg elementet med #id #abc { … } Klasse (.) Velg alle elementer av.klasse.klasse { … } Tag Velg alle (elementer) av taggen(e) p { … } bla bla bable bable

CSS blokker I blokkene kontrollerer man for eksempel størrelse, farge, posisjon. h1 { color: #ff0000; /* rød */ size: 36px; text-align: center; } En overskrift

HTML editors Det finnes mange måter å redigere sider på og mange verktøy for dette. Det enkleste verktøyet er Notepad, men det krever at du kan de grunnleggende HTML tags. For å hjelpe dere har jeg laget et enkelt oppsett som ser fint og stilriktig ut. Dere kan med dette lage deres egen hjemmeside.

Gjøre sidene tilgjengelige (SSH) Start ’putty’ Server: drakon.uio.no Protokoll: SSH $ mkdir www_docs $ chmod 755 www_docs

Egen hjemmeside 1. Gå til www_docs på ditt hjemmeområde. 2. Lag to nye filer; index.html style.css 3. Gå til min eksempelside: Høyreklikk, vis kildekode

HTML Demonstrasjon og interaktiv endring med forklaring på de enkelte tagger og elementer.

Veien videre? Introduksjon til CSS CSS eksempler W3C HTML School