Presentasjon lastes. Vennligst vent

Presentasjon lastes. Vennligst vent

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

Liknende presentasjoner


Presentasjon om: "Om Internett, World Wide Web, egen hjemmeside Ole Christian Rynning"— Utskrift av presentasjonen:

1 Om Internett, World Wide Web, egen hjemmeside Ole Christian Rynning oc@rynning.no

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

3 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.

4 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.

5

6 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.

7 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)

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

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

10 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.

11 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)

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

13 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.

14 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:

15 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; }

16 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

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

18 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.

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

20 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: http://folk.uio.no/olecr/afin/index.html http://folk.uio.no/olecr/afin/style.css 4. Høyreklikk, vis kildekode

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

22 Veien videre? Introduksjon til CSS http://www.garshol.priv.no/download/text/css-intro.html http://www.garshol.priv.no/download/text/css-intro.html CSS eksempler http://www.intensivstation.ch/en/templates/ http://www.intensivstation.ch/en/templates/ W3C HTML School http://www.w3schools.com/html/ http://www.w3schools.com/html/


Laste ned ppt "Om Internett, World Wide Web, egen hjemmeside Ole Christian Rynning"

Liknende presentasjoner


Annonser fra Google