Idag Webben och HTML Ins3tu3onen för system- och rymdteknik Luleå tekniska universitet Moment F om webben och HTML startar nu Dead-line: torsdag 22 sep (dvs om en vecka). UppgiQ: Skriv en enkel websida som en rapport, med HTML-kod, som beskriver LTU, dess organisa3on, delar och huvuduppgiqer HTML 4.01 (eller XHTML), inte HTML5 eller andra varianter Redovisas i datorlabbet (ingen inlämning) 1 2 Webbens funk3on URL och websidor Webben är väsentligen filöverföring mellan datorer ini3erad via webläsare och via internetuppkoppling Filerna kallas websidor och innehåller text. Filnamnen slutar i regel på.html (eller.htm) Datorerna har webservrar, speciella serverprogram som på uppmaning skickar ut websidor 3ll de som ber om dem över nätet En webläsare är e[ program på en dator som som begär, tolkar och visar upp websidor Erbjuder användaren e[ grafiskt gränssni[ i vilket man kan se och interagera (klicka) med websidor Interak3onen kan resultera i a[ andra websidor hämtas och visas A[ gång eqer annan klicka sig mellan websidor är vad vi 3ll vardags kallar a[ surfa på webben Uniform Resource Locator (URL) Exempel: h[p://www.dn.se Uppfanns av Tim Berners-Lee 89-90 när webben skapades. Står om de[a i kursboken och det utdelade materialet Varje websida iden3fieras av en unik URL (även kallad adress) 3 4
URL och websidor Av en URL framgår all3d protokoll, domän och filnamn givna i denna ordning Protokoll bestämmer överföringssä[. HTTP: men även bl a FTP: eller FILE: finns a[ välja på Domänen namnger den dator i internet som websidan ska hämtas från Filnamnet iden3fierar exakt websidan h[p://www.sm.luth.se/csee/courses/d0015e/index.php 5 DNS Kommunika3onen över Internet baseras på a[ domäner har unika och urskiljbara namn (adresser) Som stöd för de[a finns DNS Domain Name System En adressuppslagningsfunk3on Varje internetansluten dator 3lldelas en namnserver som sköter dess adressuppslagningar DNS översä[er fram och 3llbaka mellan domän[namn] (t ex www.ltu.se) och lä[a för människor a[ minnas IP-nummer (130.240.43.25, om IPv4) Används rent tekniskt av datorer i internet Interne[eknik lärs ut i kursen D0002E DatorkommunikaHon Åk 2, lp 4, på D/DI 6 Bilder: icann.org och open3w.com ICANN DNS/Internet i UNIX Internet CorporaHon for Assigned Names and Numbers Ansvarar för DNS, adresser och en del av Internets grundläggande funk3onalitet 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 a[ generera nya DNSSEC-kryptonycklar Googla "ICANN key ceremony" för mer info Finns bl a en video från den första genereringen av kryptonyckeln 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 a[ dessa fungerar i datorlabbet Dock finns de normalt i UNIX-installa3oner 7 8
Websidors grundstruktur Websidor skrivs med HyperText Markup Language (HTML) Språket HTML definierar HTML-tags (eller bara tags) som bildar element Varje tag har unikt namn och speciell betydelse för websidans design och funk3on Generella syntaxen för HTML-taggar är <NAMN> </NAMN> där NAMN är taggens namn, <NAMN> är star[aggen och </NAMN> är slu[aggen och de två taggarna 3llsammans med vad som råkar finnas mellan dem bildar e[ element (Taggarna behöver inte finnas på samma rad) E[ vanligt element Taggen <b> ger i text på en websida fets3l fram 3lls motsvarande slu[ag </b> påträffas då kom en <b>stor och fet</b> ko som vilket blir då kom en stor och fet ko som OBS! <b>stor och fet</b> är e[ element E[ fets3lselement I LaTeX skulle samma sak skrivas då kom en \textbf{stor och fet} ko som LaTeX och HTML är båda sidbeskrivningsspråk Dock med olika syntax och u[rycksmöjligheter HTML är mycket enklare än LaTeX! 9 10 En websida BODY-elementet Websidor har enkel struktur De består av e[ enda HTML-element, vilket består av e[ HEADelement följt av e[ BODYelement HEAD-elementet har informa3on om hela websidan t ex 3tel BODY-elementet innehåller själva websidan <html> <head> <3tle>Sid3tel</3tle> </head> <body> då kom en <b>stor och fet</b> ko som. </body> </html> I BODY-elementet (mellan BODY-taggarna) beskrivs websidans text och övrigt innehåll Precis som i LaTeX finns t ex taggar för avsni[srubriker på olika nivåer olika s3lar (fet, kursiv, centrerad, liten, ) listor (numrerade, onumrerade, ) tabeller speciella tecken (å ger t ex e[ å ) inkludering av bilder Några vik3ga skillnader: Taggar kan skrivas med både stora och små bokstäver (små rekommenderas) Nästan inget stöd för matema3sk text Ingen automa3sk numrering (saknas motsvarigheter 3ll \label{} och \ref{}) Länkar grundläggande i HTML, endast svagt stöd i LaTeX HTML har stöd för interak3on med den som surfar, extremt svagt i LaTeX Blankrad har ingen betydelse i HTML! Använd <p> för a[ skapa ny[ stycke 11 12
Vanliga taggar och element <b></b> fet s3l <i></i> kursiv s3l <u></u> understruken text <[></[> maskinskriven text <hx></hx>, där x är en siffra 1-6, ger rubrik (1 är störst rubrik, högst nivå) <a></a> en länk <center></center> centrerar text <pre></pre> helt stycke maskinskrivet utan radbrytningarn Star[aggar: <p> gör ny[ stycke <img> inkludera bild <hr> horizontellt streck (Sedan 2000 finns t ex XHTML, en utökning av HTML, med striktare syntaxregler, men HTML är det ursprungliga) Argument Star[aggar kan ha argument som varierar taggens funk3on Argument skrivs eqer taggens namn <A> </A> står för anchor och ger en länk på en websida E[ vik3gt argument är URL:en dit länken ska leda: <A HREF= h[p://www.ltu.se > </A> Vill man a[ sidan länken leder 3ll ska öppnas i e[ ny[ fönster kan man lägga 3ll argumentet target= _blank Då får vi <A HREF= h[p://www.ltu.se target= _blank > </A> På motsvarande sä[ kan argument ändra färg, typsni[, storlek mm Idag använder man istället Cascading Style Sheets (CSS, s3lmallar) 13 14 Exempel Webdesign Normalt skriver man inte HTML (XHTML, HTML5 etc) direkt utan använder speciella designprogram OBS! Websidor kan även uyormas på andra sä[, få olika slags funk3onalitet, innehålla programkod; de[a utvecklas hela 3den Denna kurs går inte ut på a[ lära sig allt de[a (Finns andra kurser för a[ t ex skapa dynamiska websidor med JavaScript/AJAX) Här ligger fokus på grunderna. Mål: Träna på a[ använda formella beskrivningsspråk, och (givetvis) indirekt få kunskap om LTU 15 16
På webben Lokalt på datorn Exempel 17