Idag. Webben, HTML och CSS. Live demo. Webbens funktion

Relevanta dokument
Idag. Webben och HTML. Webbens funk3on. URL och websidor. Moment F om webben och HTML startar nu

Hur hänger det ihop? För att kunna kommunicera krävs ett protokoll tcp/ip, http, ftp För att veta var man skall skicka

Webbteknik. Innehåll. Historisk återblick Teknisk beskrivning Märkspråk Standardisering Trender. En kort introduktion

Olika slags datornätverk. Föreläsning 5 Internet ARPANET, Internet började med ARPANET

WEBBUTVECKLING Kursplanering

Repetition. Hypertext. Internet HTTP. Server och klient Text försedd med länkar till andra texter. Många sammankopplade nät

Repetition. Hypertext. Internet HTTP. Server och klient Föreläsning 2. Text försedd med länkar till andra texter. Många sammankopplade nät

ORDLISTA WEBBDESIGN 100P

Webbkurs för distriktsansvariga. Stockholm den 7 och 13 september 2011

Introduktion till programmering

Laboration 3 HTML och struktur samt frågorna A - C övningar/uppgifter

Föreläsning 4. CSS Stilmallar för webben

FrontPage Express. Ämne: Datorkunskap (Internet) Handledare: Thomas Granhäll

TNMK30 - Elektronisk publicering

Webbens grundbegrepp. Introduktion till programmering. Ytterligare exempel. Exempel på webbsida. Föreläsning 5

Språk för webben introduk4on 4ll HTML

Programmeringteknik. Planering MÅL LABB: MOMENT LAB4 HTML - EXEMPEL HTML. Webbdelen

Datakommunika,on på Internet

Du kan själv följa med i denna steg-för-steg guide i din texteditor.

Arbetsmaterial HTML pass 1 - Grunder

F02 En första sida. Dagens agenda

Hyperlänkar. I HTML skapar man en hyperlänk med taggen <a> </a>, som är en förkortning av ordet ankare, på (engelska anchor).

Mattias Wiggberg 1. Orientera på Internet. IP-adress. IP-adresserna räcker inte... Mer om IP-adresser

En grundkurs i hemsidor och hur de är uppbyggda

Att använda laget.se

Xhtml och CSS.Tillämpad fysik och elektronik Per Kvarnbrink (redigering Ulf Holmgren 2011)

Introducerande övningar i HTML

Webbserver och HTML-sidor i E1000 KI

HTML och CSS. Eric Elfving Institutionen för Datavetenskap (IDA)

Webbservrar, severskript & webbproduktion

Nätet. Uppgiften. Nivå

Labora&on 3 HTML och struktur övningar/uppgi:er

Internets historia Tillämpningar

Datakommunika,on på Internet

Kort om World Wide Web (webben)

HTML och CSS. Eric Elfving Institutionen för datavetenskap. 18 augusti 2015

Tillämpad fysik och elektronik Per Kvarnbrink m.fl. Laboration 2: HTML och CSS.

Guide. Webbsidor i Studentportalen. Innehåll. Uppdaterad:

Laboration 2: Xhtml och CSS.

Hur du gör ditt Gilles hemsida - en liten hjälp på vägen

Webbteknik för ingenjörer

Word Online Version 1.0 Skolkontoret

IT för personligt arbete F2

Lektion 2 - CSS. CSS - Fortsätt så här

12 Webb och kurshemsidor

Webbutveckling Laboration 1: HTML5 och CSS3.

F02 HTML. Föreläsning 2, HT2013 HTML. Kurser: Klientbaserad Webbutveckling 1DV435. Johan Leitet

HTML. Introduktion till HyperText Markup Language

Användarmanual för Content tool version 7.5

Labbrapport: HTML och CSS

21/01/2016. Stilmallar. styra utseendet av webbplatsen DEL 1. Karin Fahlquist. index.html. recept.html frukt.html grönsaker.html

ITK:P2 F1. Hemsidor med HTML HTML. FTP, HTTP, HTML, XML och XHTML

Webbteknik II. Föreläsning 4. Watching the river flow. John Häggerud, 2011

Labora&on 2 HTML och validering övningar/uppgi:er

Statistik från webbplatser

Litteratur. Nätverk, Internet och World Wide Web. Olika typer av nätverk. Varför nätverk? Anne Diedrichs Medieteknik Södertörns högskola

Internet A. HTML Grunder Maximilien Chiang 1

Manual till publiceringsverktyg

I den här labben ska vi använda oss av en trevlig nyhet i HTML5: Local Storage, för att implementera en sorts lokal gästbok.

Laboration med Internet och HTML

Att arbeta med. Müfit Kiper

Steg 5 Webbsidor One.com och OpenOffice Writer Mac OS X

WEBDESIGN A - DTR 1210

Övning (X)HTML 2. Sidan 1 av

Presentera dig själv Laboration 1

TNMK30. Elektronisk publicering

Labora&on 8 Formulär övningar/uppgi6er

CSS-övningar. 1. Grunder

TNMK30. Elektronisk publicering

Övning 1 Vi börjar med en vanlig html-fil där html används för både innehåll och utseende:

! Katerina Vrotsou! Medieteknik. 2004! Informationsvisualisering, visuell data analys

Webbprogrammering. Sahand Sadjadee

Att styla webbsidor. Nivå. Uppgiften

Användarmanual WebNailer. 19 januari 2004

Användbarhet för webben MDI, Webb och speciella behov 1

Att bygga enkla webbsidor

Manual för din hemsida

Kort-kort om utdelade användarkonton och datormiljön på NADA

Webbpublicering. Teknikintroduktion 1 Jody Foo (jodfo@ida.liu.se)

Internet. Internet hur kom det till? Internets framväxt. Ett hierarkiskt uppbyggt telenät Kretskopplat/circuit switching

ÖvningsProv Internet att skapa hemsidor vt-2006 Webbsideskapande

Webbdesign vt Innehållsförteckning

Alla filer som bearbetar PHP script ska avslutas med ändelsen.php, exempelvis ska en indexsida till en hemsida heta index.php

För att skriva CSS-kod använder man sig av olika kommandon. Ett exempel på hur man kan skriva kod för att ändra textfärg kan vara:

F07 Stilmallar Dagens agenda

Grundläggande funktioner i CMS ifrån Argonova Systems, 2011.

<Webbutvecklare lektion="02"> Kursledare: Mahmud Al Hakim

03/12/2015. Logga in på: b.socrative.com eller ladda ner appen

Publicera material i Learn

Kursplanering Utveckling av webbapplikationer

Ikon Menyalternativ Funktion och beskrivning Sök och ersätt text i arbetsfältet. Ramformatering

Webbdesign vt Innehållsförteckning

Guide för att skapa & ändra Sidor och Statiska block - Speedcom E-Handel

ATT GÖRA WEBBSIDOR. Frivillig labb

Undervisningen i ämnet webbutveckling ska ge eleverna förutsättningar att utveckla följande:

Avancerade Webbteknologier

JAVASCRIPT. Beteende

Utseende. Lauri Watts Översättare: Stefan Asserhäll

provlektion bonnierförlagen lära Jaaa! En... från

Del 1 och 2 HTML/CSS. Webbutveckling Laboration 1 Nicklas Bostedt

Transkript:

Idag Webben, HTML och CSS Institutionen för system- och rymdteknik Luleå tekniska universitet Moment F om webben, HTML och CSS startar nu Dead-line: fredag 28 sep (dvs om en dryg vecka). Uppgift: Skriv, med HTML och CSS, en webbsida där man kan spela spelet Hammurabi (ursprungligen kallat The Sumer Game och sen Hamurabi) läsa bakgrundsinformation om spelet och kung Hammurabi Redovisas i datorlabbet (ingen inlämning) 1 2 Live demo En grundversion av spelet demonstreras http://www.sm.luth.se/csee/courses/d0015e/ f-webben Webbens funktion Webben är väsentligen filöverföring mellan datorer initierad via webbläsare och via internetuppkoppling Filerna kallas webbsidor och innehåller text. Filnamnen slutar i regel på.html (eller.htm) Datorerna har webbservrar, speciella serverprogram som på uppmaning skickar ut websidor till de som ber om dem över nätet En webbläsare är ett program på en dator som som begär, tolkar och visar upp webbsidor Erbjuder användaren ett grafiskt gränssnitt i vilket man kan se och interagera (klicka) med webbsidor Interaktionen kan resultera i att andra websidor hämtas och visas Att gång efter annan klicka sig mellan webbsidor är vad vi till vardags kallar att surfa på webben 3 4

URL och webbsidor Uniform Resource Locator (URL) Exempel: http://www.dn.se Uppfanns av Tim Berners-Lee 89-90 när webben skapades. Står om detta i kursboken och det utdelade materialet Varje webbsida identifieras av en unik URL (även kallad adress) Live demo Demostration av hur en webbsida kan laddas ner http://www.sm.luth.se/csee/courses/d0015e/unix/ front.html I en vanlig webbläsare (det vanligaste ) Visa webbsidans HTML-manus (dess källkod eller bara kod) via meny i webbläsare Hämta webbsidans HTML-manus i Unix curl http://www.sm.luth.se/csee/courses/d0015e/ unix/front.html Skriva ut webbsidans HTML-manus genom inloggning på webbservern 5 6 URL och websidor Av en URL framgår alltid protokoll, domän och filnamn givna i denna ordning Protokoll bestämmer överföringssätt. HTTP: men även bl a FTP: eller FILE: finns att välja på Domänen namnger den dator i internet som websidan ska hämtas från Filnamnet identifierar exakt websidan http://www.sm.luth.se/csee/courses/d0015e/index.php DNS Kommunikationen över Internet baseras på att domäner har unika och urskiljbara namn (adresser) Som stöd för detta finns DNS Domain Name System En adressuppslagningsfunktion Varje internetansluten dator tilldelas en namnserver som sköter dess adressuppslagningar DNS översätter fram och tillbaka mellan domän[namn] (t ex www.ltu.se) och lätta för människor att minnas IP-nummer (130.240.43.25, om IPv4) Används rent tekniskt av datorer i internet Internetteknik lärs ut i kursen D0002E Datorkommunikation (lp4, åk2) Bilder: icann.org och open3w.com 7 8

ICANN Internet Corporation for Assigned Names and Numbers Ansvarar för DNS, adresser och en del av Internets grundläggande funktionalitet DNSSEC, säker adressuppslagning (2010) Kuriosa: Anne-Marie Eklund-Löwinder Säkerhetschef på.se, En av (endast) 7 personer i världen som är s k "nyckelbärare" för DNSSEC De (fysiska) nycklarna från bärare behövs för att generera nya DNSSEC-kryptonycklar Googla "ICANN key ceremony" för mer info Finns bl a en youtube-video från den första genereringen av kryptonycklar 9 DNS/Internet i UNIX Exempel: 1) host (även nslookup och dig) www.dn.se ltu.se www.ltu.se 2) traceroute 3) ping OBS! Tyvärr är det inte säkert att dessa fungerar i datorlabbet Dock finns de normalt i UNIX-installationer 10 Live demo Webbsidors grundstruktur host www.dn.se host www.ltu.se host ltu.se ping www.sunet.se traceroute www.sunet.se 11 Webbsidor innehåll beskrivs med HyperText Markup Language (HTML) Deras utseende beskrivs med CSS (stilmallar) Språket HTML definierar HTML-tags (eller bara tags) som bildar element Varje tag har unikt namn och speciell betydelse för (del av) webbsidans innehåll Generella syntaxen för HTML-taggar är <namn> </namn> där namn är taggens namn, <namn> är starttaggen och </namn> är sluttaggen och starttag och sluttag, tillsammans med vad som råkar finnas mellan dem, bildar ett element Starttag och sluttag behöver inte finnas på samma rad De skrivs ofta under varandra med det mellan dem något indenterat 12

Ett vanligt HTML-element En webbsida Starttaggen <strong> märker ut något viktigt på en webbsida fram tills motsvarande sluttag </strong> påträffas Vanliga webbläsare gör, om inget annat bestämts, den viktiga texten fet Exempel: då kom en <strong>stor och fet</strong> ko som vilket blir då kom en stor och fet ko som OBS! <strong>stor och fet</strong> är ett element I LaTeX skulle samma sak kanske skrivas då kom en \textbf{stor och fet} ko som LaTeX och HTML är båda sidbeskrivningsspråk Dock med olika syntax och uttrycksmöjligheter HTML är mycket enklare än LaTeX(!) Webbsidors innehåll beskrivs med HTML och har enkel struktur De består av ett enda HTML-element, vilket består av ett HEAD-element följt av ett BODY-element HEAD-elementet har information om hela webbsidan t ex titel BODY-elementet beskriver (innehåller) webbsidans innehåll <html> <head> OBS! Indenterat! Ej krav men praktiskt, så gör det! <title>sidtitel</title> </head> <body> då kom en <strong>stor och fet</strong> ko som. </body> </html> 13 14 BODY-elementet I BODY-elementet beskrivs webbsidans text och övrigt innehåll Precis som i LaTeX finns t ex taggar för avsnittsrubriker på olika nivåer märkning av text (viktig, betonad, markerad, fet, kursiv,...) listor (numrerade, onumrerade, ) tabeller speciella tecken (å ger t ex ett å, så Håkan skrivs Håkan i HTML(!) inkludering av bilder Några viktiga skillnader: Taggar kan skrivas med både stora och små bokstäver (små rekommenderas) Svagt stöd för matematisk text Ingen automatisk numrering (saknas motsvarigheter till \label{} och \ref{}) Länkar grundläggande i HTML, endast svagt stöd i LaTeX HTML har stöd för interaktion med den som surfar, extremt svagt i LaTeX Blankrad har ingen betydelse i HTML! Använd <p> för att skapa nytt stycke Några vanliga taggar och element <html></html>, <head></head>, <title></title>, <body></body> <h1></h1>, <h2></h2>, <h3></h3>, <h4></h4>, <h5></h5>, <h6></h6> för avsnittsrubriker (där h1 är störst) <div></div>, <span></span>, <p></p> <strong></strong> markerar viktig text (oftast med fet stil) <em></em> betonar text (oftast med kursiv stil) <mark></mark> markerar text (oftast med svart text mot gul bakgrund) <a></a> för hyperlänkar <ol></ol>, <ul></ul>, <li></li> för listor <img> inkluderar en bild Till <img> (och några andra starttaggar) får, men behöver inte, sluttag anges 15 16

HTML-argument Starttaggar kan ha argument som varierar taggens funktion Argument radas upp efter starttaggens namn Exempel: <a> </a> står för anchor och ger en länk på en webbsida Ett viktigt argument är URL:en dit länken ska leda: <a href= http://www.ltu.se > </a> Vill man att sidan länken leder till ska öppnas i ett nytt fönster kan man lägga till argumentet target= _blank Då får vi <a href= http://www.ltu.se target= _blank > </a> De flesta startaggar kan varieras med argument Men alla har inte samma argument OBS! Sedan begynnelsen innehåller många starttaggar tyvärr även speciella argument som påverkar utseendet De ska inte användas utan idag används istället Cascading Style Sheets (CSS, stilmallar) 17 CSS CSS, Cascading Style Sheets, är ett språk för att skriva stilmallar Stilmallar bestämmer utseendet på webbsidors innehåll (som beskrivs med HTML) Det finns tre sätt att skapa en stilmall: Argumentet style ändrar utseendet hos ett enskilt HTML-element L Med CSS-regelmängder, som påverkar allt av samma sort eller allt märkt på samma sätt, antingen internt i HTML-manuset med HTML-elementet <style></style> K eller externt från en separat fil med HTML-elementet <link></link> JJJ! 18 CSS-regelmängder En CSS-regelmängd består av en selektor och ett deklarationsblock En selektor är en HTMLtag, ett id eller en klass Ett deklarationsblock består av deklarationer separerade av semikolon (=Avslutar varje deklaration) Varje deklaration består av en egenskap och ett värde Webbdesign Normalt skriver man inte HTML-manus direkt i en texteditor utan använder speciella WYSIWYGdesignprogram What You See Is What You Get Vi ska dock skriva manus i texteditor, för vårt mål är att (fortsätta att) lära oss använda formella beskrivningsspråk dvs HTML och CSS från grunden, inte webbdesign Jämför LaTeX istället för t ex Microsoft Word Jämför Unixkommandon istället för grafisk skrivbordsmiljö Webbsidor kan även programmeras med JavaScript Denna kurs går inte ut på att lära sig detta Lärs ut i kursen M7011E Design av dynamiska webbsystem ( åk4) 19 20

Live demo Momentbeskrivningen (uppgiften) HTML-kursen https://www.w3schools.com/html/ CSS-kursen https://www.w3schools.com/css/ Innehållet i de 3 givna filerna 21