Webben,HTMLochCSS
HåkanJonssonInstitutionenförsystem-ochrymdteknik
Luleåtekniskauniversitet
DatateknikochingenjörsvetenskapHåkanJonsson2019-09-19 1
Idag
• MomentFomwebben,HTMLochCSSstartarnu– Dead-line:fredag27sep(dvsomendrygvecka).– Uppgift:Skriv,medHTMLochCSS,enwebbsidadärmankan• spelaspeletHammurabi(ursprungligenkallatTheSumerGameochsenHamurabi)
• läsabakgrundsinformationomspeletochkungHammurabi
– Redovisasidatorlabbet(ingeninlämning)
DatateknikochingenjörsvetenskapHåkanJonsson2019-09-19 2
Livedemo
• Engrundversionavspeletdemonstreras• http://www.sm.luth.se/csee/courses/d0015e/f-webben
2019-09-19 DatateknikochingenjörsvetenskapHåkanJonsson 3
Webbensfunktion• Webbenärväsentligenfilöverföringmellandatorer
initieradviawebbläsareochviainternetuppkoppling
• Filernakallaswebbsidorochinnehållertext.– Filnamnenslutariregelpå.html(eller.htm)
• Datorernaharwebbservrar,speciellaserverprogramsompåuppmaningskickarutwebsidortilldesomberomdemövernätet
• Enwebbläsareärettprogrampåendatorsomsombegär,tolkarochvisaruppwebbsidor– Erbjuderanvändarenettgrafisktgränssnittivilketman
kanseochinteragera(klicka)medwebbsidor– Interaktionenkanresulteraiattandrawebsidorhämtas
ochvisas– Attgångefterannanklickasigmellanwebbsidorärvad
vitillvardagskallarattsurfapåwebben
2019-09-19 DatateknikochingenjörsvetenskapHåkanJonsson 4
URLochwebbsidor• UniformResourceLocator(URL)
– Exempel:
• UppfannsavTimBerners-Lee89-90närwebbenskapades.– Ståromdettaikursbokenochdetutdeladematerialet
• VarjewebbsidaidentifierasavenunikURL(ävenkalladadress)
2019-09-19 DatateknikochingenjörsvetenskapHåkanJonsson 5
http://www.dn.se
Livedemo• Demostrationavhurenwebbsidakanladdasner– http://www.sm.luth.se/csee/courses/d0015e/unix/front.html
• Ienvanligwebbläsare(det“vanligaste”)– VisawebbsidansHTML-manus(desskällkodellerbarakod)viamenyiwebbläsare
• HämtawebbsidansHTML-manusiUnix– curlhttp://www.sm.luth.se/csee/courses/d0015e/unix/front.html
• SkrivautwebbsidansHTML-manusgenominloggningpåwebbservern
2019-09-19 DatateknikochingenjörsvetenskapHåkanJonsson 6
URLochwebsidor
• AvenURLframgåralltidprotokoll,domänochfilnamngivnaidennaordning– Protokollbestämmeröverföringssätt.
• HTTP:menävenblaFTP:ellerFILE:finnsattväljapå
– Domänennamngerdendatoriinternetsomwebsidanskahämtasfrån
– Filnamnetidentifierarexaktwebsidan
2019-09-19 DatateknikochingenjörsvetenskapHåkanJonsson 7
http://www.sm.luth.se/csee/courses/d0015e/index.php
DNS• KommunikationenöverInternetbaseraspå
attdomänerharunikaochurskiljbaranamn(adresser)
• SomstödfördettafinnsDNS– DomainNameSystem– Enadressuppslagningsfunktion– Varjeinternetanslutendatortilldelasen
namnserversomsköterdessadressuppslagningar
• DNSöversätterframochtillbakamellan– domän[namn](texwww.ltu.se)och
• lättaförmänniskorattminnas– IP-nummer(130.240.43.25,omIPv4)
• Användsrentteknisktavdatoreriinternet• InternettekniklärsutikursenD0002E
Datorkommunikation(lp4,åk2)2019-09-19 Datateknikochingenjörsvetenskap
HåkanJonsson 8
Bilder:icann
.orgochope
n3w.com
ICANN• InternetCorporationforAssignedNamesandNumbers• AnsvararförDNS,adresserochendelavInternets
grundläggandefunktionalitet• DNSSEC,säkeradressuppslagning(2010)
– Sverigeredan2005• Kuriosa:
– Anne-MarieEklund-Löwinder• Säkerhetschefpå.se,
– Enav(endast)7personerivärldensomärsk"nyckelbärare"förDNSSEC• De(fysiska)nycklarnafrånbärarebehövsförattgenereranyaDNSSEC-kryptonycklar
– Googla"ICANNkeyceremony"förmerinfo• Finnsblaenyoutube-videofråndenförstagenereringenavkryptonycklar
2019-09-19 DatateknikochingenjörsvetenskapHåkanJonsson 9
DNS/InternetiUNIX• Exempel:– 1)host(ävennslookupochdig)
• www.dn.se• ltu.se• www.ltu.se
– 2)traceroute– 3)ping
• OBS!Tyvärrärdetintesäkertattdessafungeraridatorlabbet– DockfinnsdenormaltiUNIX-installationer
2019-09-19 DatateknikochingenjörsvetenskapHåkanJonsson 10
Livedemo
• hostwww.dn.se• hostwww.ltu.se• hostltu.se• pingwww.sunet.se• traceroutewww.sunet.se
2019-09-19 DatateknikochingenjörsvetenskapHåkanJonsson 11
Webbsidorsgrundstruktur• WebbsidorinnehållbeskrivsmedHyperTextMarkupLanguage
(HTML)– DerasutseendebeskrivsmedCSS(stilmallar)
• SpråketHTMLdefinierarHTML-tags(ellerbaratags)sombildarelement– Varjetagharuniktnamnochspeciellbetydelseför(delav)webbsidans
innehåll• GenerellasyntaxenförHTML-taggarär
<namn></namn>där– namnärtaggensnamn,– <namn>ärstarttaggenoch</namn>ärsluttaggenoch– starttagochsluttag,tillsammansmedvadsområkarfinnasmellandem,
bildarettelement• Starttagochsluttagbehöverintefinnaspåsammarad
– Deskrivsoftaundervarandrameddetmellandemnågotindenterat2019-09-19 Datateknikochingenjörsvetenskap
HåkanJonsson 12
EttvanligtHTML-element• Starttaggen<strong>märkerutnågotviktigtpåenwebbsidafram
tillsmotsvarandesluttag</strong>påträffas– Vanligawebbläsaregör,omingetannatbestämts,denviktigatexten
fet• Exempel:
…dåkomen<strong>storochfet</strong>kosom…vilketblir…dåkomenstorochfetkosom…
• OBS!“<strong>storochfet</strong>”ärettelement• ILaTeXskullesammasakkanskeskrivas
…dåkomen\textbf{storochfet}kosom…• LaTeXochHTMLärbådasidbeskrivningsspråk
– Dockmedolikasyntaxochuttrycksmöjligheter– HTMLärmycketenklareänLaTeX(!)
2019-09-19 DatateknikochingenjörsvetenskapHåkanJonsson 13
Enwebbsida• Webbsidorsinnehåll
beskrivsmedHTMLochharenkelstruktur
• DebeståravettendaHTML-element,vilketbeståravettHEAD-elementföljtavettBODY-element
• HEAD-elementetharinformationomhelawebbsidantextitel
• BODY-elementetbeskriver(innehåller)webbsidansinnehåll
2019-09-19 DatateknikochingenjörsvetenskapHåkanJonsson 14
<html><head><title>Sidtitel</title></head><body>…dåkomen<strong>storochfet</strong>kosom….</body></html>
OBS!Indenterat!Ejkravmenpraktiskt,
sågördet!
BODY-elementet• IBODY-elementetbeskrivswebbsidanstextochövrigtinnehåll• PrecissomiLaTeXfinnstextaggarför
– avsnittsrubrikerpåolikanivåer– märkningavtext(viktig,betonad,markerad,fet,kursiv,...)– listor(numrerade,onumrerade,…)– tabeller– speciellatecken(ågertexett”å”,såHåkanskrivsHåkani
HTML(!)– inkluderingavbilder
• Någraviktigaskillnader:– Taggarkanskrivasmedbådestoraochsmåbokstäver(smårekommenderas)– Svagtstödförmatematisktext– Ingenautomatisknumrering(saknasmotsvarighetertill\label{}och\ref{})– LänkargrundläggandeiHTML,endastsvagtstödiLaTeX– HTMLharstödförinteraktionmeddensomsurfar,extremtsvagtiLaTeX– BlankradharingenbetydelseiHTML!Använd<p>förattskapanyttstycke
2019-09-19 DatateknikochingenjörsvetenskapHåkanJonsson 15
Någravanligataggarochelement• <html></html>,<head></head>,<title></title>,<body></body>• <h1></h1>,<h2></h2>,<h3></h3>,<h4></h4>,<h5></h5>,<h6></h6>
föravsnittsrubriker(därh1ärstörst)
• <div></div>,<span></span>,<p></p>
• <strong></strong>markerarviktigtext(oftastmedfetstil)• <em></em>betonartext(oftastmedkursivstil)• <mark></mark>markerartext(oftastmedsvarttextmotgulbakgrund)
• <a></a>förhyperlänkar• <ol></ol>,<ul></ul>,<li></li>förlistor• <img>inkluderarenbild
– Till<img>(ochnågraandrastarttaggar)får,menbehöverinte,sluttaganges
2019-09-19 DatateknikochingenjörsvetenskapHåkanJonsson 16
HTML-argument• Starttaggarkanhaargumentsomvarierartaggensfunktion• Argumentradasuppefterstarttaggensnamn• Exempel:
– <a>…</a>stårföranchorochgerenlänkpåenwebbsida– EttviktigtargumentärURL:enditlänkenskaleda:
<ahref=“http://www.ltu.se”>…</a>
– Villmanattsidanlänkenledertillskaöppnasiettnyttfönsterkanmanläggatillargumentettarget=“_blank”
– Dåfårvi<ahref=“http://www.ltu.se”target=“_blank”>…</a>• Deflestastartaggarkanvarierasmedargument
– Menallaharintesammaargument
• OBS!Sedanbegynnelseninnehållermångastarttaggartyvärrävenspeciellaargumentsompåverkarutseendet
• DeskainteanvändasutanidaganvändsiställetCascadingStyleSheets(CSS,stilmallar)
2019-09-19 DatateknikochingenjörsvetenskapHåkanJonsson 17
CSS• CSS,CascadingStyleSheets,ärettspråkförattskrivastilmallar
• Stilmallarbestämmerutseendetpåwebbsidorsinnehåll(sombeskrivsmedHTML)
• Detfinnstresättattskapaenstilmall:– ArgumentetstyleändrarutseendethosettenskiltHTML-elementL
– MedCSS-regelmängder,sompåverkaralltavsammasortelleralltmärktpåsammasätt,antingen• interntiHTML-manusetmedHTML-elementet<style></style>Keller
• externtfrånenseparatfilmedHTML-elementet<link></link>JJJ!
2019-09-19 DatateknikochingenjörsvetenskapHåkanJonsson 18
CSS-regelmängder• EnCSS-regelmängdbeståravenselektorochettdeklarationsblock– EnselektorärenHTML-tag,ettidellerenklass
• Ettdeklarationsblockbeståravdeklarationersepareradeavsemikolon– (=Avslutarvarjedeklaration)
• Varjedeklarationbeståravenegenskapochettvärde
2019-09-19 DatateknikochingenjörsvetenskapHåkanJonsson 19
Webbdesign• NormaltskrivermaninteHTML-manusdirektien
texteditorutananvänderspeciellaWYSIWYG-designprogram– ”WhatYouSeeIsWhatYouGet”
• Viskadockskrivamanusitexteditor,förvårtmåläratt(fortsättaatt)läraossanvändaformellabeskrivningsspråk–dvsHTMLochCSS–frångrunden,intewebbdesign– JämförLaTeXiställetförtexMicrosoftWord– JämförUnixkommandoniställetförgrafiskskrivbordsmiljö
• WebbsidorkanävenprogrammerasmedJavaScript– Dennakursgårinteutpåattlärasigdetta– LärsutikursenM7011EDesignavdynamiskawebbsystem(≈åk4)
2019-09-19 DatateknikochingenjörsvetenskapHåkanJonsson 20
Livedemo
• Momentbeskrivningen(uppgiften)• HTML-kursen– https://www.w3schools.com/html/
• CSS-kursen– https://www.w3schools.com/css/
• Innehålletide3givnafilerna
2019-09-19 DatateknikochingenjörsvetenskapHåkanJonsson 21