Om internett world wide web egen hjemmeside
Download
1 / 22

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


  • 99 Views
  • Uploaded on

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

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

PowerPoint Slideshow about ' Om Internett, World Wide Web, egen hjemmeside' - felcia


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.



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


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


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/


ad