1 / 22

Om Internett, World Wide Web, egen hjemmeside

Om Internett, World Wide Web, egen hjemmeside. Ole Christian Rynning oc@rynning.no. Læringsmål. Kjennskap til Internett Kjennskap til World Wide Web Lære å lage en UiO hjemmeside. Internett. Verdensomspennende nettverk Standardiserte protokoller

felcia
Download Presentation

Om Internett, World Wide Web, egen hjemmeside

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  6. <html> • 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. <html> tag • En tag er en instruksjon til nettleseren om hvordan den skal vise siden. • Tagger omsluttes av ’<’ og ’>’ • Innhold omsluttes av en start og stopp tag • Start-tag <h1> • Stopp-tag </h1> (ende-tag, slutt-tag)

  8. <html> tag attributter • Tagger kan ha attributter • <div id=”1”> • id=”1” betyr her at attributtet ’id’ har verdien ’1’.

  9. <html> tag innhold <div class=”x”> Start-tag, med attributt class med verdi x Innhold her. Innholdet til div taggen <b>Halvfet</b> Halvfet; innhold til b taggen </div> Stopp-tag

  10. Nødvendige HTML tags • <html> Dokument-tag som omslutter hele tekstdokumentet. • <head> Inneholder direktiver og formatteringsbeskrivelser. • <title> Sidens tittel. • <body> Tag som omslutter alt det som skal være synlig på hjemmesiden.

  11. Vanlige HTML tags • <h1> - <h6> Overskrift. • <p> Paragraf/avsnitt. • <br> linebreak/ny linje. • <hr> Horisontal linje • <b> halvfet tekst • <em> kursiv tekst • <a> Anker, hyperlink • <img> bilde • <ul> Uordret liste • <li> Listeting • <span> gruppering inline (tekststrenger) • <div> gruppering blokker (flere tagger)

  12. HTML grunnstruktur <html> <head> <title>Sidens tittel</title> </head> <body> Her kommer sidens innhold som vises i din nettleser. </body> </html>

  13. Hyperlenker <a> • Hyperlenker, tag <a> 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: <a href=”http://folk.uio.no/olecr”>oc uio</a> 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 <style> taggen, eller i egen fil. • Egen fil, legg til i <head> sin body: <link rel="stylesheet" href=”style.css" type="text/css” />

  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 { … } <p id=”abc” /> • Klasse (.) Velg alle elementer av .klasse .klasse { … } <p class=”klasse” /> • Tag Velg alle (elementer) av taggen(e) • p { … } <p>bla bla</p> <p>bable bable</p>

  17. CSS blokker • I blokkene kontrollerer man for eksempel størrelse, farge, posisjon. h1 { color: #ff0000; /* rød */ size: 36px; text-align: center; } <h1>En overskrift</h1> 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 • Gå til www_docs på ditt hjemmeområde. • Lag to nye filer; • index.html • style.css • Gå til min eksempelside: • http://folk.uio.no/olecr/afin/index.html • http://folk.uio.no/olecr/afin/style.css • 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 • CSS eksempler http://www.intensivstation.ch/en/templates/ • W3C HTML School http://www.w3schools.com/html/

More Related