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(&aring;gertexett”å”,såHåkanskrivsH&aring;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