E22 62581 Forelæsning - Lektion 01 Introduktion
Kommenteret af CHBU - Indføjet #NYT hvor der ændringer - Dette til basis for nyt kursus
Source: Google Slides,
https://docs.google.com/presentation/d/1vb_ZrRC0YAfk6bXH2EPZZp1q2RjRMzeqKfxZvY5mHyE
(exported as plain text; slide-break formatting from the original is lost, but
all text content is preserved).
Lektion 01 - Introduktion
Christian Budtz - chbu@dtu.dk
Underviserne på IT og Kommunikation
Christian Budtz (5 første web-lektioner) #NYT: Web delen
Henrik Tange (Netværkskommunikation 13 lektioner) #NYT: Rolf Nordahl 6 lektioner i Metode - Projekt, UML, UX.
Bo Holst-Christensen (X web-lektioner) #NYT: Birger Andersen
??? (Resterende web-lektioner)
IT og Kommunikation
1 Semester - En computer - et program
2Semester - En computer - flere programmer (Java + SQL)
3 Semester - Flere computere - flere programmer (HTML/CSS/JS/Java/SQL)
Nu bliver det kompliceret!
Hybridkursus
½ Netværksteknologi #NYT: 1/4 Netværk + 1/4 Metode (Projekter, UML, UX) + 1/2 Fullstack Web
Teoretisk og øvelser
½ Web og metode (Dynamiske hjemmesider og UML)
Øvelser og gennemgående projekt
Journalsystem med dataopsamling #NYT EHR er standard projekt - Jeg opfordrer til
Grupper af 4-5
Gruppedannelse færdig næste torsdag
Jeg skal oprette servere til hver gruppe #NYT: Uafklaret - Måske web deployment - Vercel, Render el. lign
Hybrideksamen (Indtil videre) #NYT: Web + NET/Metode
Kan ændre sig!
Teoretisk spørgsmål i Netværksteknologi
Spørgsmål i projektet
Web teknologi / Metode
Læringsmål #NYT - læringsmål er opdaterede! Træk fra nyt kursus
anvende fagtermer korrekt.
beskrive og forklare de mest almindeligt forekommende software arkitekturer.
beskrive og forklare de mest almindeligt forekommende distributionsteknikker samt lag-opdeling og abstraktions principper i en protokolstak.
beskrive og forklare tilstandsdiagrammer og sekvensdiagrammer, samt anvende disse til at fastlægge en protokol.
beskrive og forklare dataudveksling via XML, samt anvende XML til dataudveksling i Java programmer.
beskrive og forklare installation og konfiguration af et system, samt almindeligt forekommende sikkerhedsproblematikker i forbindelse med systemer og data netværk
beskrive og forklare netværkskomponenter og kommunikationen fra en computer til en anden over Internettet.
beskrive og forklare metoder og protokoller i Internetprotokolstakken, adressering i IP-baserede netværk samt et programs anvendelse af protokoller i applikationslag og transportlag.
anvende væsentlige værktøjer og metoder til analyse af trafik og fejl på et netværk.
udvikle konfigurerbare, lagdelte applikationer der anvender filer og kommunikerer over et netværk.
sammenligne metoder og services i de forskellige protokoller i TCP/IP protokolstakken samt vurdere protokollers anvendelse til bestemte formål.
deltage i en faglig diskussion indenfor fagområdet.
Læringsmål i dag #NYT: Opdateres
beskrive og forklare de mest almindeligt forekommende software arkitekturer.
beskrive og forklare de mest almindeligt forekommende distributionsteknikker samt lag-opdeling og abstraktions principper i en protokolstak.
udvikle konfigurerbare, lagdelte applikationer der anvender filer og kommunikerer over et netværk.
Min tolkning
Intro til distribuerede systemer
Planlægning: Milestone og Gantt diagrammer
UML: Robustness (BCE) - diagrammer. Sekvensdiagrammer.
HTML
Distribuerede systemer
"System in which components located on networked computers communicate and coordinate their actions by passing messages. The components interact with each other in order to achieve a common goal"
"A distributed system in its most simplest definition is a group of computers working together as to appear as a single computer to the end-user."
~ Flere samarbejdende computere
Din computer og en server
Servere der snakker sammen
P2P - Peer to Peer
Eksempler på distribuerede systemer
Database og Web-server (og klient)
Database og server kan skaleres individuelt
Eksempler på distribuerede systemer
Vertikal skalering - Større computer
Øvre teknisk mulig grænse
Horisontal skalering - Flere computere
The sky is the limit!
Horisontal skalering
Pro
Redundans og fejltolerance
Intet Single-point of failure
Billigere computere
Efter en vis grænse…
Lav latens
Computere kan stå tæt på klienterne
Horisontal skalering
Con
Inkonsistens
Risiko for forskel i data
Løsninger
Transaktionsstyring - kompliceret…
Sharding - del databasen op efter en nøgle
Typer af distribuerede systemer
Centraliseret
En ejer af systemet
En autoritet
Decentraliseret
Flere klienter skal aftale hvem der bestemmer
Hvad hvis en går "rogue"?
Krav til distribuerede systemer
Fault-Tolerant
Highly Available
Recoverable
Consistent
Scalable
Predictable Performance
Secure
Fejl i distribuerede systemer
Bohrbug - Konsekvent og reproducerbar fejl
Heisenbug - Kommer og går - Kan ikke reproduceres systematisk - Timing problem?
Fejl i distribuerede systemer
Halting failures
Noget stopper - ingen forklaring/advarsel
Fail-stop
Noget stopper - med forklaring/advarsel
Omission failures
Noget går tabt - en besked eks.
Network failures
Forbindelsen bliver tabt
Network partition failure
Flere dele af systemet bliver adskilt
Timing failures
En besked bliver forsinket og udløber/en login-session udløber, etc.
Byzantine failures
Fejl der præsenterer sig forskelligt for forskellige brugere
8 Fallacies - fejlagtige antagelser
The network is reliable.
Internettet er best-effort
Latency is zero.
Bandwidth is infinite.
The network is secure.
Topology doesn't change.
Internettet er altid under forandring. Mobiler skifter netværk eks.
There is one administrator.
Transport cost is zero.
The network is homogeneous.
Løsninger?
Redundans
Eks. Ekstra servere
Replication
Ekstra kopier af data
(også redundans)
Caching
Som replication, men kan blive 'stale'
Planlæg med fejl
Netværkskommunikation
Internettet er Best-effort
Data går tabt
Gensendes?
Anmodninger går galt
Server svarer ikke, gør noget uventet, svarer for sent…
Klienten går ned, svarer ikke, gør noget uventet...
Forvent fejl!
Gennemtænk fejlscenarier
Klient og Server skal kunne håndtere at modparten "går ned"
Minimér transmission af data
Tænk over forsinkelser
Forvent fejl i data
Brug redundans mod 'Single point of failure'
Internettet - at a glance
Application layer
(Applikations-protokol: FTP, HTTP, SMTP)
Transportlag
(Port: Hvilket program)
Netværk
(IP-addresse: Hvilket Computer-netværkskort)
Link
(MAC-addresse: Hvilken fysisk indgang på et netværks-device)
(Fysisk lag)
Kabler/Routers/Netværkskort
Pause
Quiz!
https://www.socrative.com/ DTUDIPLOM
Planlægning #NYT - rykkes til L2
Hvordan spiser man en elefant?
Planlægning #NYT - L2
Hvordan spiser man en elefant?
En bid af gangen
Milestoneplan #NYT - L2
Del projektet op i 'sprints'
Typisk 3 ugers arbejde pr. sprint
Stopklods for afsporet projekt
Tab max 3 ugers arbejde....
Work Breakdown Structure #NYT - L2
Nedbryd projektet i overskuelige bidder
Hvis bidden er svær at estimere er den måske for stor!
Meget store elefanter skal deles ud for ikke at blive rådne
5-40 timer
Metoder:
Mindmap
Post-its
Kanban
Scrum
Liste
Gantt Diagram #NYT - rykkes
Rækkefølge
Bindinger
Varighed
Ansvarsfordeling #NYT rykkes
Sæt ansvarlig på opgaver!
Senest når opgaven er planlagt til at starte
Kun én ansvarlig!
Hvis alle har ansvar - har INGEN ansvar
Måske skal opgaven deles i mindre?
UML - Robustness Diagram #NYT rykkes
Til at identificere
Grænseflader
Controllers
Dataobjekter
Simplificeret klasse-diagram med retning…
Sekvens diagram #Nyt rykkes
Til at beskrive forløbet i et system
Aktører
Klasser (evt. BCE)
Beskeder
Send
Call and return
Til at modellere adfærd på
Analyse-niveau
Design
Implementering
Sekvens diagram
Call and return
Loop
Sekvens diagram
Create
Destroy
Sekvens diagram
https://www.uml-diagrams.org/sequence-diagrams.html
Web teknologier #NYT lyttet rundt - Java udgår->JS MySQL udgår->PostGreSQL
Frontend
HTML (Lektion 1 +3)
CSS (Lektion 3)
JS (Lektion 7)
(WebAssembly)
Backend (Lektion 5)
Java (Lektion 7)
MySQL (Lektion 11)
Frontend Teknologier #NYT - lidt dvælen ved deklarative og Imperative sprog
HTML - HyperText Markup Language
Definerer sidens indhold og struktur (Deklarativt sprog)
CSS - Cascading Style Sheets
Definerer sidens udseende (uafhængigt af indhold) (Deklarativt)
JavaScript
Scripting sprog til browseren (Imperativt)
Backend Teknologier
Php, Java, C#, Python, JavaScript, Ruby, Dart, Go
Og mange flere
Klassisk teknologi: CGI #NYT: UD!
Scripting sprog til en webserver
Kan kalde Java Kode og returnere resultatet
Kompliceret og Rodet.
Implementeret i mange webservere som standard.
Mere moderne
Servlets - Framework implementeret i højniveausprog -eks. Java, der håndterer web-server ⇔ Java
Kræver Sprogspecifik server - Eks. Java Server, der kan køre servlets
Endnu mere moderne
Frameworks håndterer det hele
Backend teknologier på kurset
Vi laver en mini HTML server med Java-Socket programmering #NYT JS -
Tager noget tid, men giver indsigt i hvad en Web-server håndterer
Senere bruger vi servlets og frameworks
For at nå at lave et rigtigt system
HTML
HyperText Markup Language
En del af Markup Languages
Deklarativt sprog
Tillader at definere indhold og struktur
Med et énkelt dynamisk element:
Et eksempel
DTU Web Programmering
<title>
</head>
<body>
<h1><b> Lektioner</b></h1>
<h2><i> E21 </i></h2>
<p>Lektion1: Introduktion og HTML</p>
<p>Lektion2: Netværk </p>
<p>Lektion3: HTML 2 + CSS </p>
</body>
</html><p>Kan du se syntaks-fejlen? Hvad er konsekvensen?</p>
<p>Lad os prøve det selv!
Frem med IntelliJ #Nyt VsCode</p>
<p>HTML tags
Opening and closing tag:
<tag> </tag>
Hierarkisk</p>
<html>
<body>
Tekst
<body>
<html>
Attributter
<img src="someimage.png">
Indre html
<h1>Noget html</h1>
Value
<input value="halløj" type="button"></input><p>Vigtige tags
Headings</p>
<h1>,<h2>...
Division - opdeling i sektioner - Med line break
<div>
Span - Opdeling i blokke - Uden line break
<span>
Paragraph - Opdeling med - Med ekstra linje før og efter
<p>
Image
<img src="someimage.png" alt="Alternativ tekst">
Anchor
<a href="https://www.publicdomainpictures.net/">Tryk på mig!</a><p>Document Object Model - DOM
Træ-struktur
Elementer kan have et id</p>
<div id="divid"></div>
Man kan tage fat i et element
document.getElementById("divid");
Elementets attributes
value
innerText
innerHTML
attributter<p>Gruppedannelsen E22
Spørgeskema</p>
<p>Man lærer bedst HTML ved at prøve selv!
www.socrative.com
Øvelse 01</p>
<!----></article><!--]--><!--]--><!----></main><!--]--><!--]--> <!--[-1--><!--]--><!--]-->
<script>
{
__sveltekit_rczqvw = {
base: new URL("../../..", location).pathname.slice(0, -1)
};
const element = document.currentScript.parentElement;
Promise.all([
import("../../../_app/immutable/entry/start.CymgC5D-.js"),
import("../../../_app/immutable/entry/app.DQjbm1pV.js")
]).then(([kit, app]) => {
kit.start(app, element, {
node_ids: [0, 3],
data: [null,{type:"data",data:{page:{slug:"docs/background/lektion1/forelaesning",title:"E22 62581 Forelæsning - Lektion 01 Introduktion",html:"\u003Ch1>E22 62581 Forelæsning - Lektion 01 Introduktion\u003C/h1>\n\u003Cp>\u003Cstrong>Kommenteret af CHBU\u003C/strong> - Indføjet #NYT hvor der ændringer - Dette til basis for nyt kursus\nSource: Google Slides,\n\u003Ca href=\"https://docs.google.com/presentation/d/1vb_ZrRC0YAfk6bXH2EPZZp1q2RjRMzeqKfxZvY5mHyE\">https://docs.google.com/presentation/d/1vb_ZrRC0YAfk6bXH2EPZZp1q2RjRMzeqKfxZvY5mHyE\u003C/a>\n(exported as plain text; slide-break formatting from the original is lost, but\nall text content is preserved).\u003C/p>\n\u003Chr>\n\u003Cp>Lektion 01 - Introduktion\nChristian Budtz - \u003Ca href=\"mailto:chbu@dtu.dk\">chbu@dtu.dk\u003C/a>\u003C/p>\n\u003Cp>Underviserne på IT og Kommunikation\nChristian Budtz (5 første web-lektioner) #NYT: Web delen \nHenrik Tange (Netværkskommunikation 13 lektioner) #NYT: Rolf Nordahl 6 lektioner i Metode - Projekt, UML, UX.\nBo Holst-Christensen (X web-lektioner) #NYT: Birger Andersen\n??? (Resterende web-lektioner)\u003C/p>\n\u003Cp>IT og Kommunikation\n1 Semester - En computer - et program\n2Semester - En computer - flere programmer (Java + SQL)\n3 Semester - Flere computere - flere programmer (HTML/CSS/JS/Java/SQL)\u003C/p>\n\u003Cp>Nu bliver det kompliceret!\u003C/p>\n\u003Cp>Hybridkursus \n½ Netværksteknologi #NYT: 1/4 Netværk + 1/4 Metode (Projekter, UML, UX) + 1/2 Fullstack Web\nTeoretisk og øvelser\n½ Web og metode (Dynamiske hjemmesider og UML) \nØvelser og gennemgående projekt\nJournalsystem med dataopsamling #NYT EHR er standard projekt - Jeg opfordrer til \nGrupper af 4-5\nGruppedannelse færdig næste torsdag\nJeg skal oprette servere til hver gruppe #NYT: Uafklaret - Måske web deployment - Vercel, Render el. lign\u003C/p>\n\u003Cp>Hybrideksamen (Indtil videre) #NYT: Web + NET/Metode \nKan ændre sig!\nTeoretisk spørgsmål i Netværksteknologi\nSpørgsmål i projektet\nWeb teknologi / Metode\u003C/p>\n\u003Cp>Læringsmål #NYT - læringsmål er opdaterede! Træk fra nyt kursus\nanvende fagtermer korrekt.\nbeskrive og forklare de mest almindeligt forekommende software arkitekturer.\nbeskrive og forklare de mest almindeligt forekommende distributionsteknikker samt lag-opdeling og abstraktions principper i en protokolstak.\nbeskrive og forklare tilstandsdiagrammer og sekvensdiagrammer, samt anvende disse til at fastlægge en protokol.\nbeskrive og forklare dataudveksling via XML, samt anvende XML til dataudveksling i Java programmer.\nbeskrive og forklare installation og konfiguration af et system, samt almindeligt forekommende sikkerhedsproblematikker i forbindelse med systemer og data netværk\nbeskrive og forklare netværkskomponenter og kommunikationen fra en computer til en anden over Internettet.\nbeskrive og forklare metoder og protokoller i Internetprotokolstakken, adressering i IP-baserede netværk samt et programs anvendelse af protokoller i applikationslag og transportlag.\nanvende væsentlige værktøjer og metoder til analyse af trafik og fejl på et netværk.\nudvikle konfigurerbare, lagdelte applikationer der anvender filer og kommunikerer over et netværk.\nsammenligne metoder og services i de forskellige protokoller i TCP/IP protokolstakken samt vurdere protokollers anvendelse til bestemte formål.\ndeltage i en faglig diskussion indenfor fagområdet.\u003C/p>\n\u003Cp>Læringsmål i dag #NYT: Opdateres\nbeskrive og forklare de mest almindeligt forekommende software arkitekturer.\nbeskrive og forklare de mest almindeligt forekommende distributionsteknikker samt lag-opdeling og abstraktions principper i en protokolstak.\nudvikle konfigurerbare, lagdelte applikationer der anvender filer og kommunikerer over et netværk.\nMin tolkning\nIntro til distribuerede systemer\nPlanlægning: Milestone og Gantt diagrammer\nUML: Robustness (BCE) - diagrammer. Sekvensdiagrammer.\nHTML\u003C/p>\n\u003Cp>Distribuerede systemer\n"System in which components located on networked computers communicate and coordinate their actions by passing messages. The components interact with each other in order to achieve a common goal"\n"A distributed system in its most simplest definition is a group of computers working together as to appear as a single computer to the end-user."\n~ Flere samarbejdende computere\nDin computer og en server\nServere der snakker sammen\nP2P - Peer to Peer\u003C/p>\n\u003Cp>Eksempler på distribuerede systemer\nDatabase og Web-server (og klient)\nDatabase og server kan skaleres individuelt\u003C/p>\n\u003Cp>Eksempler på distribuerede systemer\nVertikal skalering - Større computer\nØvre teknisk mulig grænse\nHorisontal skalering - Flere computere\nThe sky is the limit!\u003C/p>\n\u003Cp>Horisontal skalering\nPro\nRedundans og fejltolerance\nIntet Single-point of failure\nBilligere computere\nEfter en vis grænse…\nLav latens\nComputere kan stå tæt på klienterne\u003C/p>\n\u003Cp>Horisontal skalering\nCon\nInkonsistens\nRisiko for forskel i data\nLøsninger\nTransaktionsstyring - kompliceret…\nSharding - del databasen op efter en nøgle\u003C/p>\n\u003Cp>Typer af distribuerede systemer\nCentraliseret\nEn ejer af systemet\nEn autoritet\nDecentraliseret\nFlere klienter skal aftale hvem der bestemmer\nHvad hvis en går "rogue"?\u003C/p>\n\u003Cp>Krav til distribuerede systemer\nFault-Tolerant\nHighly Available\nRecoverable\nConsistent\nScalable\nPredictable Performance\nSecure\u003C/p>\n\u003Cp>Fejl i distribuerede systemer\nBohrbug - Konsekvent og reproducerbar fejl\nHeisenbug - Kommer og går - Kan ikke reproduceres systematisk - Timing problem?\u003C/p>\n\u003Cp>Fejl i distribuerede systemer\nHalting failures\nNoget stopper - ingen forklaring/advarsel\nFail-stop\nNoget stopper - med forklaring/advarsel\nOmission failures\nNoget går tabt - en besked eks.\nNetwork failures\nForbindelsen bliver tabt\nNetwork partition failure\nFlere dele af systemet bliver adskilt\nTiming failures\nEn besked bliver forsinket og udløber/en login-session udløber, etc.\nByzantine failures\nFejl der præsenterer sig forskelligt for forskellige brugere\u003C/p>\n\u003Cp>8 Fallacies - fejlagtige antagelser\nThe network is reliable.\nInternettet er best-effort\nLatency is zero.\nBandwidth is infinite.\nThe network is secure.\nTopology doesn't change.\nInternettet er altid under forandring. Mobiler skifter netværk eks.\nThere is one administrator.\nTransport cost is zero.\nThe network is homogeneous.\u003C/p>\n\u003Cp>Løsninger?\nRedundans\nEks. Ekstra servere\nReplication\nEkstra kopier af data\n(også redundans)\nCaching\nSom replication, men kan blive 'stale'\nPlanlæg med fejl\u003C/p>\n\u003Cp>Netværkskommunikation\nInternettet er Best-effort\nData går tabt\nGensendes?\nAnmodninger går galt\nServer svarer ikke, gør noget uventet, svarer for sent…\nKlienten går ned, svarer ikke, gør noget uventet...\u003C/p>\n\u003Cp>Forvent fejl!\nGennemtænk fejlscenarier\nKlient og Server skal kunne håndtere at modparten "går ned"\nMinimér transmission af data\nTænk over forsinkelser\nForvent fejl i data\nBrug redundans mod 'Single point of failure'\u003C/p>\n\u003Cp>Internettet - at a glance\nApplication layer\n(Applikations-protokol: FTP, HTTP, SMTP)\nTransportlag\n(Port: Hvilket program)\nNetværk\n(IP-addresse: Hvilket Computer-netværkskort)\nLink\n(MAC-addresse: Hvilken fysisk indgang på et netværks-device)\n(Fysisk lag)\nKabler/Routers/Netværkskort\u003C/p>\n\u003Cp>Pause\u003C/p>\n\u003Cp>Quiz!\n\u003Ca href=\"https://www.socrative.com/\">https://www.socrative.com/\u003C/a> DTUDIPLOM\u003C/p>\n\u003Cp>Planlægning #NYT - rykkes til L2\nHvordan spiser man en elefant?\u003C/p>\n\u003Cp>Planlægning #NYT - L2\nHvordan spiser man en elefant?\nEn bid af gangen\u003C/p>\n\u003Cp>Milestoneplan #NYT - L2\nDel projektet op i 'sprints'\nTypisk 3 ugers arbejde pr. sprint\nStopklods for afsporet projekt\nTab max 3 ugers arbejde....\u003C/p>\n\u003Cp>Work Breakdown Structure #NYT - L2\nNedbryd projektet i overskuelige bidder\nHvis bidden er svær at estimere er den måske for stor!\nMeget store elefanter skal deles ud for ikke at blive rådne\n5-40 timer\nMetoder:\nMindmap\nPost-its\nKanban\nScrum\nListe\u003C/p>\n\u003Cp>Gantt Diagram #NYT - rykkes\nRækkefølge\nBindinger\nVarighed\u003C/p>\n\u003Cp>Ansvarsfordeling #NYT rykkes\nSæt ansvarlig på opgaver!\nSenest når opgaven er planlagt til at starte\nKun én ansvarlig!\nHvis alle har ansvar - har INGEN ansvar\nMåske skal opgaven deles i mindre?\u003C/p>\n\u003Cp>UML - Robustness Diagram #NYT rykkes\nTil at identificere\nGrænseflader\nControllers\nDataobjekter\nSimplificeret klasse-diagram med retning…\u003C/p>\n\u003Cp>Sekvens diagram #Nyt rykkes\nTil at beskrive forløbet i et system\nAktører\nKlasser (evt. BCE)\nBeskeder\nSend\nCall and return\nTil at modellere adfærd på\nAnalyse-niveau\nDesign\nImplementering\u003C/p>\n\u003Cp>Sekvens diagram\nCall and return\nLoop\u003C/p>\n\u003Cp>Sekvens diagram\nCreate\nDestroy\u003C/p>\n\u003Cp>Sekvens diagram\n\u003Ca href=\"https://www.uml-diagrams.org/sequence-diagrams.html\">https://www.uml-diagrams.org/sequence-diagrams.html\u003C/a>\u003C/p>\n\u003Cp>Web teknologier #NYT lyttet rundt - Java udgår->JS MySQL udgår->PostGreSQL\nFrontend\nHTML (Lektion 1 +3)\nCSS (Lektion 3)\nJS (Lektion 7)\n(WebAssembly)\nBackend (Lektion 5)\nJava (Lektion 7)\nMySQL (Lektion 11)\u003C/p>\n\u003Cp>Frontend Teknologier #NYT - lidt dvælen ved deklarative og Imperative sprog\nHTML - HyperText Markup Language\nDefinerer sidens indhold og struktur (Deklarativt sprog)\nCSS - Cascading Style Sheets\nDefinerer sidens udseende (uafhængigt af indhold) (Deklarativt)\nJavaScript\nScripting sprog til browseren (Imperativt)\u003C/p>\n\u003Cp>Backend Teknologier\nPhp, Java, C#, Python, JavaScript, Ruby, Dart, Go\nOg mange flere\nKlassisk teknologi: CGI #NYT: UD!\nScripting sprog til en webserver\nKan kalde Java Kode og returnere resultatet\nKompliceret og Rodet.\nImplementeret i mange webservere som standard.\nMere moderne\nServlets - Framework implementeret i højniveausprog -eks. Java, der håndterer web-server ⇔ Java\nKræver Sprogspecifik server - Eks. Java Server, der kan køre servlets\nEndnu mere moderne\nFrameworks håndterer det hele\u003C/p>\n\u003Cp>Backend teknologier på kurset\nVi laver en mini HTML server med Java-Socket programmering #NYT JS -\nTager noget tid, men giver indsigt i hvad en Web-server håndterer\nSenere bruger vi servlets og frameworks\nFor at nå at lave et rigtigt system\u003C/p>\n\u003Cp>HTML\nHyperText Markup Language\nEn del af Markup Languages\nDeklarativt sprog\nTillader at definere indhold og struktur\nMed et énkelt dynamisk element: \u003Ca href>\u003C/p>\n\u003Cp>Et eksempel\u003C/p>\n\u003Chtml>\n\u003Chead>\n \u003Ctitle> DTU Web Programmering\n \u003Ctitle>\n\u003C/head>\n\u003Cbody>\n\u003Ch1>\u003Cb> Lektioner\u003C/b>\u003C/h1>\n\u003Ch2>\u003Ci> E21 \u003C/i>\u003C/h2>\n\u003Cp>Lektion1: Introduktion og HTML\u003C/p>\n\u003Cp>Lektion2: Netværk \u003C/p>\n\u003Cp>Lektion3: HTML 2 + CSS \u003C/p>\n\u003C/body>\n\u003C/html>\u003Cp>Kan du se syntaks-fejlen? Hvad er konsekvensen?\u003C/p>\n\u003Cp>Lad os prøve det selv!\nFrem med IntelliJ #Nyt VsCode\u003C/p>\n\u003Cp>HTML tags\nOpening and closing tag:\n\u003Ctag> \u003C/tag>\nHierarkisk\u003C/p>\n\u003Chtml>\n\u003Cbody>\nTekst\n\u003Cbody>\n\u003Chtml>\nAttributter\n\u003Cimg src=\"someimage.png\">\nIndre html\n\u003Ch1>Noget html\u003C/h1>\nValue\n\u003Cinput value=\"halløj\" type=\"button\">\u003C/input>\u003Cp>Vigtige tags\nHeadings\u003C/p>\n\u003Ch1>,\u003Ch2>...\nDivision - opdeling i sektioner - Med line break\n\u003Cdiv>\nSpan - Opdeling i blokke - Uden line break\n\u003Cspan>\nParagraph - Opdeling med - Med ekstra linje før og efter\n\u003Cp>\nImage\n\u003Cimg src=\"someimage.png\" alt=\"Alternativ tekst\">\nAnchor\n\u003Ca href=\"https://www.publicdomainpictures.net/\">Tryk på mig!\u003C/a>\u003Cp>Document Object Model - DOM\nTræ-struktur\nElementer kan have et id\u003C/p>\n\u003Cdiv id=\"divid\">\u003C/div>\nMan kan tage fat i et element\ndocument.getElementById(\"divid\");\nElementets attributes\nvalue\ninnerText\ninnerHTML\nattributter\u003Cp>Gruppedannelsen E22\nSpørgeskema\u003C/p>\n\u003Cp>Man lærer bedst HTML ved at prøve selv!\nwww.socrative.com\nØvelse 01\u003C/p>\n",file:"docs/background/lektion1/forelaesning.md"}},uses:{params:["slug"]}}],
form: null,
error: null
});
});
}
</script>
</div>
</body>
</html>