Om internett world wide web egen hjemmeside
This presentation is the property of its rightful owner.
Sponsored Links
1 / 22

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


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

Om Internett, World Wide Web, egen hjemmeside. Ole Christian Rynning [email protected] Læringsmål. Kjennskap til Internett Kjennskap til World Wide Web Lære å lage en UiO hjemmeside. Internett. Verdensomspennende nettverk Standardiserte protokoller

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

Om Internett, World Wide Web, egen hjemmeside

Ole Christian Rynning

[email protected]


L ringsm l

Læringsmål

  • Kjennskap til Internett

  • Kjennskap til World Wide Web

  • Lære å lage en UiO hjemmeside


Internett

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

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.


Om internett world wide web egen hjemmeside

<html>


Om internett world wide web egen hjemmeside

<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

<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

<html> tag attributter

  • Tagger kan ha attributter

  • <div id=”1”>

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


Html tag innhold

<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

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

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 grunnstruktur

<html>

<head>

<title>Sidens tittel</title>

</head>

<body>

Her kommer sidens innhold som vises i din nettleser.

</body>

</html>


Hyperlenker a

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.


Om internett world wide web egen hjemmeside

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


Om internett world wide web egen hjemmeside

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

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

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

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

Gjøre sidene tilgjengelige (SSH)

  • Start ’putty’

  • Server: drakon.uio.no

  • Protokoll: SSH

    $ mkdir www_docs

    $ chmod 755 www_docs


Egen hjemmeside

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


Om internett world wide web egen hjemmeside

HTML

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


Veien videre

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/


  • Login