Om internett world wide web egen hjemmeside
Download
1 / 22

Om Internett, World Wide Web, egen hjemmeside - PowerPoint PPT Presentation


  • 86 Views
  • Uploaded on
  • Presentation posted in: General

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


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

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


<html>


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


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


<html> tag attributter

  • Tagger kan ha attributter

  • <div id=”1”>

  • id=”1” betyr her at attributtet ’id’ har verdien ’1’.


<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


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.


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)


HTML grunnstruktur

<html>

<head>

<title>Sidens tittel</title>

</head>

<body>

Her kommer sidens innhold som vises i din nettleser.

</body>

</html>


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.


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” />


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 { … }<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>


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


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

  • 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


HTML

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


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/


ad
  • Login