Om Internett, World Wide Web, egen hjemmeside Ole Christian Rynning oc@rynning. no
Læringsmål l Kjennskap til Internett Kjennskap til World Wide Web Lære å lage en Ui. O hjemmeside
Internett l l l Verdensomspennende nettverk Standardiserte protokoller Distribuert arkitektur (ikke sentralisert) Åpent og fritt*. Mange ulike tjenester l E-post, World Wide Web, Instant Messaging, Internet Relay Chat, News, m. fl.
World Wide Web l l l 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> l l l Hyper. Text 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 l l l 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 l l Start-tag <h 1> Stopp-tag </h 1> (ende-tag, slutt-tag)
<html> tag attributter l l l Tagger kan ha attributter <div id=” 1”> id=” 1” betyr her at attributtet ’id’ har verdien ’ 1’.
<html> tag innhold <div class=”x”> Innhold her. <b>Halvfet</b> </div> Start-tag, med attributt class med verdi x Innholdet til div taggen Halvfet; innhold til b taggen Stopp-tag
Nødvendige HTML tags l l <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 l l l <h 1> - <h 6> Overskrift. <p> Paragraf/avsnitt. 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> l l 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 l l l 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 l 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 l Element (#) Velg elementet med #id #abc { … } l Klasse (. ) Velg alle elementer av. klasse { … } l <p id=”abc” /> <p class=”klasse” /> Tag Velg alle (elementer) av taggen(e) l p{…} <p>bla bla</p> <p>bable</p>
CSS blokker l I blokkene kontrollerer man for eksempel størrelse, farge, posisjon. h 1 { color: #ff 0000; /* rød */ size: 36 px; text-align: center; } <h 1>En overskrift</h 1> En overskrift
HTML editors l l l 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) l l l 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; 1. 2. • • Gå til min eksempelside: 3. • • 4. index. html style. css 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? l Introduksjon til CSS http: //www. garshol. priv. no/download/text/css-intro. html l CSS eksempler http: //www. intensivstation. ch/en/templates/ l W 3 C HTML School http: //www. w 3 schools. com/html/
Скачать презентацию Om Internett World Wide Web egen hjemmeside Ole
23cdd55d11d78501a74ed80dd4c7806d.ppt