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

Transkript

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

2 URL och webbsidor Uniform Resource Locator (URL) Exempel: Uppfanns av Tim Berners-Lee 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 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 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 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 och lätta för människor att minnas IP-nummer ( , 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

3 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) 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 host host ltu.se ping traceroute 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

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

5 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= > </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= 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

6 Live demo Momentbeskrivningen (uppgiften) HTML-kursen CSS-kursen Innehållet i de 3 givna filerna 21