TDDD52. Internet & HTML. TDDD52 Internet & HTML. IP adress? TDDD52? HTML? Internet? Server? Klient?

Relevanta dokument
TDDD52 Internet & HTML

Webbprogrammering 725G54

Du kan själv följa med i denna steg-för-steg guide i din texteditor.

Projekt Foreläsning VI

F02 En första sida. Dagens agenda

F02 HTML. Föreläsning 2, HT2013 HTML. Kurser: Klientbaserad Webbutveckling 1DV435. Johan Leitet

TDP013. Kursens nyckelpersoner. Kursens design. Kursens litteratur Kursens kunskapsfilosofi. Examinator: Anders Fröberg. Kursansvarig: Anders Fröberg

TDP013. Webbprogrammering och interaktivitet. Introduktion, HTML5, CSS & Selenium. Anders Fröberg Institutionen för Datavetenskap (IDA)

TDDD52 CSS. Färger. Färger 1/3/13

Webbprogrammering. Sahand Sadjadee

Webbprogrammering TDDD52

Webbprogrammering, grundkurs 725G54

Avancerade Webbteknologier

TDDD80. Mobila och sociala applikationer Introduktion HTTP,SaaS. Anders Fröberg Institutionen för Datavetenskap (IDA)

Webbprogrammering - 725G54 PHP. Foreläsning II

Arbetsmaterial HTML pass 1 - Grunder

Språk för webben introduk4on 4ll HTML

Laboration 3 i kursen Produktion för tryckta medier och webb: Webbplatsproduktion med ett publiceringssystem

Laboration med Internet och HTML

Elektronisk publicering TNMK30

Hur hänger det ihop? För att kunna kommunicera krävs ett protokoll tcp/ip, http, ftp För att veta var man skall skicka

Projektanvisning. Webbsideprojekt. Författare: Johan Leitet Version: 2 Datum:

TDDD52 Databas. Databas. Databas 1/3/13

Elektronisk publicering TNMK30

Tillämpad programmering CASE 1: HTML. Ditt namn

Labora&on 2 HTML och validering övningar/uppgi:er

Kort om World Wide Web (webben)

On-line produktion TDDC61

Visma Proceedo. Att logga in - Manual. Version 1.3 /

TDP013. Webbprogrammering och interaktivitet. AJAX, CORS & jquery. Marcus Bendtsen Institutionen för Datavetenskap (IDA)

Remote Fix REMOTEFIXSS12

Labora&on 8 Formulär övningar/uppgi6er

Programmeringteknik. Planering MÅL LABB: MOMENT LAB4 HTML - EXEMPEL HTML. Webbdelen

Presentera dig själv Laboration 1

Steg 5 Webbsidor One.com och OpenOffice Writer Mac OS X

Visma Proceedo. Att logga in - Manual. Version 1.4. Version 1.4 /

Visma Proceedo. Att logga in - Manual. Version Version /

Att bygga enkla webbsidor

Visma Proceedo Att logga in - Manual

HTML. Introduktion till HyperText Markup Language

Xhtml och CSS.Tillämpad fysik och elektronik Per Kvarnbrink (redigering Ulf Holmgren 2011)

Webbteknik för ingenjörer

Handledning för installation och komma igång med Joomla

Det här dokumentet går kortfattat igenom registrerings- och ansökningsprocessen.

Del 1 och 2 HTML/CSS. Webbutveckling Laboration 1 Nicklas Bostedt

03/12/2015. Logga in på: b.socrative.com eller ladda ner appen

Laboration 2: Xhtml och CSS.

Förra gången. jquery Lab 4 Muddy Cards resultat.

Webbservrar, severskript & webbproduktion

Labora&on 3 HTML och struktur övningar/uppgi:er

WEBBUTVECKLING Kursplanering

F13 HTML5 Dagens agenda

Användarhandledning. edwise Webbläsarinställningar

Välkommen till CWT Profilverktyg & CWT Reseportal

Laboration 3 HTML och struktur samt frågorna A - C övningar/uppgifter

Sidan kommer inte läggas upp någonstans utan du redovisar den för mig på något handledningstillfälle.

FrontPage Express. Ämne: Datorkunskap (Internet) Handledare: Thomas Granhäll

Webbutveckling Laboration 1: HTML5 och CSS3.

Installationsanvisningar VisiWeb. Ansvarig: Visi Closetalk AB Version: 2.3 Datum: Mottagare: Visi Web kund

Sammanfattning av hantering av redovisning av uppgift U1

Webbteknik. Innehåll. Historisk återblick Teknisk beskrivning Märkspråk Standardisering Trender. En kort introduktion

Labora&on 1 Introduk&on &ll utvecklingsmiljön övningar/uppgi<er

Labbrapport: HTML och CSS

Bevaka vetenskapliga tidskrifter med hjälp av RSS

Medieteknologi Webbprogrammering och databaser MEB725, 5p (7,5 ECTS) Klientprogrammering JavaScript Program på flera sidor

version 2.5 CONTENTO SVENSKA AB Introduktion till Kursbyggarverktyg

Övning (X)HTML 2. Sidan 1 av

CMS. - Content management system

Statistiska centralbyrån

Allmän information ITS Fjärrskrivbord

Skriva utbildningsbeskrivningar

Olika slags datornätverk. Föreläsning 5 Internet ARPANET, Internet började med ARPANET

Optimering av webbsidor

Evaluation Summary - CDT104 Grundläggande Webbdesign HT07 Dan Levin

Labora&on 4 CSS och validering samt fråga D övningar/uppgi?er

Användarmanual för webbapplikationen Fejjan för alla. Manualens version:1.0. Datum: 5 februari 2014

1. Hur öppnar jag Polisens blanketter / formulär, trycksaker och annat som är i PDF-format?

Nätet. Uppgiften. Nivå

Introducerande övningar i HTML

Skapa din egen MediaWiki

Biometria Violweb. Kom-igång-guide. Mars Sammanfattning Den här anvisningen är till för dig som ska börja använda dig av Biometrias tjänster.

Snabbguide för publicering i Drupal för ki.se

Startguide för Administratör Kom igång med Microsoft Office 365

Labora&on 4 CSS och validering övningar/uppgi9er

Webbserver och HTML-sidor i E1000 KI

Webbprogrammering, grundkurs 725G54

Handbok för Google Cloud Print

VAD GÖR DU / VEM ÄR DU?

O365- Konfigurering av SmartPhone efter flytt till Office 365 alt ny installation

TENTAMEN I INTRODUKTION TILL MEDIEPRODUKTION, 5p

Under Kurser visas dina kurser som kort och om där finns nya uppgifter eller anslag visas antalet i kurskortet.

Introduktion till programmering

Office 365 Windows 10

Visuell design Bilder & färger

Denna handbok behandlar ett standard konfigurerat Office Web 2007 system.

Statistiska centralbyrån

Handledning till FC 12 på webben

Introduktion Till WordPress

För dig som lärare har vi placerat nya inkomna svar från elever under Följ upp uppgifter medan elev på samma ställer ser alla sina aktiva Uppgifter.

Transkript:

IP adress? TDDD52? Internet? Server? Klient? HTML? Webbläsare? Chrome? Firefox? IE? Opera? Safari? Webbsida, Webbplast, WebbapplikaGon, Hemsida, Site, Sajt...? TDDD52 TDDD52 Internet & HTML Internet Grundläggande förståelse om Internet och HTML Förståelse för hur TDDD52 är uppbyggd och vad som krävs av examinagonen & HTML

Kontaktpersoner Examinator Jalal Maleki jalal.maleki@liu.se Kursassistenter Torbjörn Lönnemark torbjorn.lonnemark@liu.se Kursansvarig Marcus Bendtsen marcus.bendtsen@liu.se Jakob Pogulis jakpo779@student.liu.se Robin Keskisärkkä robin.keskisarkka@liu.se

LaboraGoner Två studenter per grupp Anmäl via webreg (se instrukgoner för laboragon 0) InstrukGoner för laboragonerna finns på kurshemsidan. Läs instrukgonerna noga, det kommer ad underläda för er. Kurshemsidan har all informagon om kursen och laboragoner: hdps://www.ida.liu.se/~tddd52/ Labora&oner Förberedelser (Lab 0) HTML & CSS (Lab 1) JavaScript (Lab 2) PHP (Lab 3) MySQL (Lab 4) Muntlig redovisning AdministraGvt Verktyg (Betyg 4) Profil (Betyg 5)

LaboraGoner Assistenter rädar måndag förmiddag (innan klockan 12:00) Alla laboragoner som lämnats in i föregående vecka rädas då (ibland kanske Gdigare om det finns Gd) Vid hård deadline (fredag vecka 10) måste allt vara inlämnat. Assistenterna har då två veckor på sig ad räda och studenterna har max en kompledering på sig ad få godkänt. (Assistenterna har egna kurser som de skriver tenta för i vecka 11, därav den längre rädningsperioden) Om man lämnar in tomma dokument bara för ad skjuta på deadline kommer inte labben ad rädas När man är klar med labb 4 (dvs minimum för betyg 3) så ska man redovisa sid arbete muntligt för sin assistent. Boka en Gd med assistenten under ed labbpass för ad visa vad ni gjort. Under redovisningen kommer assistenten ställa frågor Gll er individuellt, och be den andra personen vara tyst. Tänk på ad ni ska förstå hela era system ni byggt för ad kunna svara på frågorna. Tyvärr har vi inte Gd ad lära känna er personligen under en så pass kort kurs, så ni måste ta med er era LiU- ID vid den muntliga redovisningen.

LaboraGon 0 Regler och Policy LaboraGonsmaterial Grupper Kodskeled MySQL och phpmyadmin Redovisas genom ad man registrerar sig i WebReg. Deadline för labb 0 är denna vecka, studenter som är registrerade och vill läsa kursen måste registrera sig i WebReg. Deda för ad Gllåta andra studenter ad få plats i kursen. OBS: Man måste vara registrerad på kursen för ad anmäla sig i WebReg, det kan ibland ta 24 Gmmar från ad man registrerat sig på kursen Glls man får skriva in sig i WebReg.

Sen anmälan För Gllfället är kursen full, men det är vanligt ad inte alla som anmält sig kommer ad registrera sig och läsa kursen. Det finns därför ola några lediga platser, men vi kan inte avgöra deda Gll dess alla som vill läsa kursen har skrivit in sig i WebReg. Om man vill göra en sen anmälan måste man: Hida räd dokument ad fylla i från LiTH. Få den signerad av Marcus. När man har signatur från Marcus så lägger man den vid studierektorns (Jalal Maleki) kontor. SamGdigt skickar man ed mejl Gll Jalal Maleki där man säger ad man vill senanmäla sig, ad man fåd Marcus signatur och ad dokumentet ligger utanför hans kontor. Sedan kommer vi processa ansökningarna enligt först Gll kvarn beroende på hur många platser det finns i kursen.

Föreläsningar & Deadlines Måndag Fredag V 3 Fö Intro & HTML Deadline Lab 0 V 4 Fö CSS Deadline Lab 1 V 5 Fö JavaScript Deadline Lab 2 V 6 Fö PHP Deadline Lab 3 V 7 Fö MySQL V 8 Fö MySQL + PHP (+ Bootstrap, jquery) Deadline Lab 4 V 9 Extra labbgllfälle Deadline Lab 5 V 10 Extra labbgllfälle Deadline Lab 6 Kolla TimeEdit för exakta Gder och salar. Där finns också Gder för handledda laboragoner, utnydja dessa Gllfällen ad ställa frågor Gll assistenterna. Vecka 9 och 10 är fokuserade på laboragoner för högre betyg och muntliga redovisningar för laboragon 1-4, därför finns extra labbgllfällen.

Förändringar Önskemål från kursvärderingar Snabbare rädningar. Mer nyd material i laboragoner för högre betyg. Förändringar Kodskeled för snabba på rädningen. (Och visa på ed ingenjörsmässigt säd ad arbeta) SamGda rädning på måndagar av assistenter. Sammanslagning av förra årets laboragon 1 och 2 Gll laboragon 1. AutomaGsk rädning av laboragon 1 för ad snabba på rädningar. För betyg 5 finns två val, komplexitet eller volym.

Kurslideratur Det finns förslag på böcker, men ingen officiell kurslideratur. Kursen är bred snarare än djup, och därför blir de flesta böcker överflödiga. Böckerna är bra för de som vill fördjupa sig på egen hand. Sök på nätet, det finns otroligt mycket informagon när det gäller de tekniker och verktyg som vi använder. Dessa resurer är också mer up to date än vad böcker ibland är. Ad själv hida informagon är en av de vikggaste kunskaper som man bör förvärva sig under studiegden.

Varför jobba i par? En av Universitetets huvuduppgiler är ad ge ut examina. För ad få en examina måste studenter klara ed visst antal kurser (poäng). Men hur lär man sig då kursens material? Tyvärr är inte kunskap något man kan ge eller byta bort. Vi kan inte (ännu) överföra informagon så som Trinity i Matrix när hon lär sig flyga helikopter. För ad få poäng måste studenter klara examinagonen i en kurs. För ad klara examinagonen måste studenten lära sig materialet i kursen.

Varför jobba i par? Forts. Ivan Pavlov Det finns många teorier om hur man lär sig, ed klassiskt exempel är Ivan Pavlovs hundar (begngat lärande). Men Pavlovs teorier funkar inte så bra när man ska lära sig webbprogrammering. Lev Vygotsky var med och utvecklade något som kallas det sociokulturella perspekgvet på lärande. Lev Vygotsky En del av denna teori beskriver något som vi kallar den närmaste utvecklingszonen.

Den närmaste utvecklingszonen Vi vill omvandla den grå rutan Gll grönt och den gula Gll gråd, vi vill expandera den närmaste utvecklingszonen Uppgifter som studenten kan lösa på egen hand Uppgifter som studenten kan lösa tillsammans med andra studenter och med handledning Uppgiler som studenten inte kan lösa Studenterna kommer Gll laboragonssalen och löser uppgiler Gllsammans med andra studenter och ibland med hjälp av assistenten. Logiken som använts för ad lösa uppgilerna Gllsammans kan studenten sedan använda själv, dvs det gråa har omvandlats Gll grönt (kunskap har förvärvats). Sedan kan man acceptera in nya uppgiler från det gula fältet in i det grå osv, osv Det finns andra vikgga komponenter i det sociokulturella perspekgvet på lärandet inte bara närmaste utvecklingszonen.

Kursplan & Kursinnehåll Kursplan Exemplifiera problem och möjligheter med ad använda en webbaserad applikagon Förklara fördelarna med ad separera strukturbeskrivning (HTML) och layout (CSS) för dokument vid publicering på WWW Implementera en fungerande webbplats genom ad använda HTML, CSS samt grundläggande funkgoner i PHP och SQL (MySQL) Utveckla och dokumentera ed PHP- program Kursinnehåll Allmänt om Internet och webben HTML, CSS, layout och formulär Grundläggande programmering i PHP: datatyper, funkgoner, filer, databaskoppling Grundläggande JavaScript Koppling mellan databaser och webbapplikagoner Utveckla och dokumentera ed Javascript- program Förklara de grundläggande begreppen gällande Internet, såsom Client- Server struktur, TCP/IP, IP- adresses, skillnaderna mellan Client- side och Server- side applikagoner, mm

Kursplan & Kursinnehåll - Tolkning Många studenter har förkunskaper inom området. Kursen avser ad säkerställa ad alla studenter har samma kunskaper för vidare studier. Grundläggande kurs. Studenter kommer ad behöva ta med sig olika kunskaper från kursen beroende på förkunskaper. Javascript, PHP & MySQL CSS HTML PHP & MySQL Javascript CSS HTML

Internet, Klient, Server, IP- adress, TCP/ IP, DNS, webbapplikagoner

Internet Ed nätverk av nätverk

Klient Server IP En server är en vanlig dator som har speciell mjukvara installerad som kan dela med sig av sidor. En klient hämtar resurser från en server. Med IP adresser hidar klienter och servrar räd på Internet Man kan inte hämta resurser från en dator som inte är en server.

Vad kan man hämta från en server? En server kan dela med sig av vilka filer som helst. Det är upp Gll klienten ad ha räd programvara för ad tolka den modagna filen.

Jag vill hämta en sida från google.com, jag vet inte vilken IP- adress de har? www.google.com DNS Domain Name System servrar (DNS) Gllhandahåller en katalogtjänst, du behöver inte kunna några IP- adresser. Du behöver inte i den här kursen veta hur deda fungerar, men det är bra ad veta ad det finns något som heter DNS och ad det är ed katalogtjänst som mappar IP- adresser Gll domän namn. DNS Internet Utan DNS hade det inte varit så läd ad branda på nätet. Inte så många som tänker på ad de måste uppdatera sin: 69.63.181.15 status?

Varför utvecklar vi webbapplikagoner? Skrivbords applika&on Mr Gates Outlook 2003 släpps Användare köper och installerar. Outlook 2007 släpps Nu krävs ny marknadsföring och skeppning av produkter Gll bugker Mr Gates Användare behåller det gamla office paketet, tycker inte det behöver uppdateras, eller vet kanske inte ens om ad man kan uppdatera.

Varför utvecklar vi webbapplikagoner? Skrivbords applika&on Webbapplika&on Mr Gates Outlook 2003 släpps Office 365 lanseras Mr Gates Användare köper och installerar. Användare skapar konto på nätet och betalar en liten summa varje månad. Outlook 2007 släpps Nya uppdateringar görs av sidan Nu krävs ny marknadsföring och skeppning av produkter Gll bugker Nästa gång användaren loggar in syns dessa nya ändringar Mr Gates Användare behåller det gamla office paketet, tycker inte det behöver uppdateras, eller vet kanske inte ens om ad man kan uppdatera. Användare får direkt Gllgång Gll nya uppdateringar utan ad man behöver marknadsföra dessa Gll existerande kunder eller skeppa Gll bugker. Inkomsterna är kongnuerliga varje månad, så länge man håller kunden nöjd med utbudet av tjänsten. Mr Gates

Varför använder vi webbapplikagoner Inga installagoner (om datorn har en webbläsare). Om man sider hemma hos någon eller på internetcafé spelar ingen roll, så länge man har en webbläsare och internet. Samma filer på alla datorer man loggar in från. Kan logga in från hela världen och t ex läsa sin mejl. En av de bästa saker med Facebook är ad personer kan använda det på t ex semestern, från vilken dator som helst. Tänk om Facebook varit en skrivbords applikagon som skulle installeras på datorn, hade företaget blivit värderat Gll $50 miljarder under 2011?

Webbplatser, sidor, hemsidor, sajter... I den här kursen lär vi oss ad utveckla mer tradigonella webbplatser med informa<on framför funk<on. T ex kurshemsidor eller produkthemsidor. Vi kallar ola dessa för sidor, hemsidor, webbplatser, webbsidor, sajter mm... MEN: De tekniker som vi lär oss i denna kurs är fullt Gllräckliga för ad utveckla mer avancerade webbapplikagoner; man kan redan eeer denna kurs börja snickra på fram<da ekonomiska oberoenden.

HTML TDDD52

Server 1. Hämtar ed rent text dokument, användaren kan läsa med viss svårighet. Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnid 1 VesGbulum venenags, velit sed cursus ultricies, sem nisi fringilla erat.

Server 1. Hämtar ed rent text dokument, användaren kan läsa med viss svårighet. 2. Hämtar ed HTML dokument, hjälper inte användaren ad läsa, blir bara värre. <h1>kapitel 1</h1> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> <h2>avsnid 1</h2> <p>vesgbulum venenags, velit sed cursus ultricies, sem nisi fringilla erat.</p> Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnid 1 VesGbulum venenags, velit sed cursus ultricies, sem nisi fringilla erat.

Server 1. Hämtar ed rent text dokument, användaren kan läsa med viss svårighet. 2. Hämtar ed HTML dokument, hjälper inte användaren ad läsa, blir bara värre. <h1>kapitel 1</h1> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. </p> <h2>avsnid 1</h2> <p>vesgbulum venenags, velit sed cursus ultricies, sem nisi fringilla erat.</p> 3. Om vi låter vår webbläsare få ta hand om HTML dokumentet, så visar den upp ed läsbart och indelat dokument. Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Avsnid 1 VesGbulum venenags, velit sed cursus ultricies, sem nisi fringilla erat. Kapitel 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. AvsniT 1 VesGbulum venenags, velit sed cursus ultricies, sem nisi fringilla erat.

HTML Indelning och semangk Delar upp text på ed logiskt säd i dokumentet. Ger textstycken en semangsk betydelse, t ex rubriker. Ger webbläsaren en chans ad tolka dokumentet innan visning. Ger sökmotorer möjlighet ad bädre förstå innehållet på webbplatsen. Formulär Ger ed dokument komponenter som ingår i formulär. Knappar, textbox, radiobudon, checkbox etc. Dessa formulär är en vikggt del i kommunikagonen mellan användare och ägare av en webbplats. T ex kontokortstransakgoner, kommentarfält... Länkar Kan länka dokument Gll andra dokument. Skapar ed nätverk av dokument som kan ses av användaren som en sida. Länkarna kan också ge en hint Gll sökmotorer om innehåll och relevans.

Det finns många webbläsare på marknaden, och de är inte alla lika. Därför kan man ibland bli lite förvånad över hur en webbplats ser ut på olika webbläsare. Elersom webbläsare kan rendera HTML lite olika är det vikggt ad testa sin webbplats på flera läsare under utvecklingens gång.

HTML Taggar exempel HTML <h1>rubrik</h1> <h2>rubrik</h2> <p>stycke text</p> <ul> <li>punkt 1</li> <li>punkt 2</li> </ul> <table> <tr> <td>cell 1</td> <td>cell 2</td> </tr> <tr> <td>cell 3</td> <td>cell 4</td> </tr> </table> Rendering exempel Rubrik Rubrik Stycke text Punkt 1 Punkt 2 Cell 1 Cell 2 Cell 3 Cell 4 <a href= http://www.google.com >Google</a> Google (här har vi ed exempel på HTML adribut, i form av href )

Taggar och Adribut Under the microscope En tagg börjar allgd med en hake: <

Taggar och Adribut Under the microscope Sedan följer namnet på taggen, t ex a om vi vill ha en länk. <a

Taggar och Adribut Under the microscope Sedan kan man ha adribut, olika taggar har Gllgång Gll olika adribut, man måste själv ta reda på vilka adribut som finns Gllgängliga för en viss tagg. För taggen a finns adributet href som gör det möjligt ad välja vilket dokument som vi vill länka Gll. (Observera mellanrummet mellan a och href ). <a href

Taggar och Adribut Under the microscope Adribut behöver också Glldelas ed värde, deda görs med = och ed värde på högersidan. I deda fallet skriver vi dokumentet som vi vill gå Gll när man klickar på länken. (Observera användandet av runt värdet). <a href= index.html

Taggar och Adribut Under the microscope När man är klar med sina adribut (en tagg får gärna ha flera adribut) så avslutar man med en ny hake. <a href= index.html >

Taggar och Adribut Under the microscope Sedan följer det som användaren fakgskt ser, i deda fal den text som skall klickas på. <a href= index.html >Klicka här

Taggar och Adribut Under the microscope När man är klar med sin tagg så stänger man taggen med en ny hake < en slash /, namnet på taggen a och en Gll hake > <a href= index.html >Klicka här</a>

Taggar och Adribut Under the microscope Om en webbläsare ser denna tagg så kommer det ad renderas som deda: <a href= index.html >Klicka här</a> Klicka här Och om vi klickar på den blå texten kommer vi förflydas Gll dokumentet index.html

Taggar och Adribut Under the microscope Ibland blir det mer komplex då man har taggar inne i taggar, som t ex när man gör en lista. Men det vikgga är ad komma ihåg ad öppna och stänga sina taggar korrekt, och ad använda korrekt adribut. <ul> <li>punkt 1</li> <li>punkt 2</li> </ul> Punkt 1 Punkt 2

Taggar och Adribut Under the microscope Ibland blir man lite förvånad när man ser deda. Här stänger vi taggen direkt, utan ad ha en extra </img> eleråt. Deda är Gllåtet för vissa typer av taggar, tyvärr är HTML specifikagonen full av undantag! <img src= bild1.png />

HTML Formulär <form> Name: <input type= text /><br /> <input type="radio" name="sex" value="female" /> Female<br /> <input type="radio" name="sex" value="male" /> Male<br /> <button type= submit >Send</button> </form> Flera exempel på HTML adribut <form> <input type="checkbox" value="cc" />Send CC<br/> Message: <textarea rows="3"></textarea><br /> <button type="submit">send</button> </form>

HTML Formulär Under the microscope När man skapar formulär är det många taggar och adribut ad hålla reda på, det lämnas som en övning ad ta reda på dessa. Två adribut som har lite speciell betydelse är id och name. Det är lite för Gdigt ad förklara varför de är speciella, men det kommer bli tydligt senare. Det är dock vanligt ad det ser ut ungefär som nedan på ed fält som är tänkt ad t ex fyllas i med en mejladress: <input type= text name= email id= email />

Specialtecken HTML EnGGes Om man vill göra ed < eller > tecken i sin text tolkar webbläsaren deda som början eller slutet på en tag, och allt blir fel. Använd då: < eller > Om man vill göra ed tecken som inte finns på tangentbordet t ex copyright symbolen. Använd då: För en kompled lista av alla s k html engges kolla länkarna på laboragon 1

DemonstraGon av HTML TDDD52

Validering av HTML kod hdp://validator.w3.org Korrekt skriven HTML kod gör ad webbläsaren inte behöver gissa hur den skall tolka koden Deda leder Gll ad din webbplats har större chans ad se ut som du tänkt dig i alla webbläsare I laboragonsserien skall koden valideras som HTML5 Om du har fel, räda ed i taget Glls du får grönt DemonstraGon

AutomaGsk rädning av LaboraGon 1 Väldigt (väldigt!) nyd system, och innehåller säkert massor av buggar. Men jag vill gärna testa deda på laboragon 1 för ad få en uppfadning om det är värt ad fortsäda utvecklingen utav det. Tanken är ad snabba upp rädningen, men också slippa massor med små- komplederingar fram och Gllbaka mellan student och assistent för små detaljer. Om rädningen säger ad ni har fel någonstans men ni inte håller med, så har ni säkert räd. Kolla med er assistent. Hur man använder systemet framgår av laboragonsinstrukgonerna.

HTML Head unika taggar <html> <head> <title>tddd52 > Hemsida</title> </head> <body> </body> </html> <html> <head> <title> Amazon.com: Online Shopping for Electronics, Apparel, Computers, DVDs & more</title> <meta name= description content= Online retailer of books, movies, music and games along with electronics, toys, apparel, sports, tools, groceries and general home and garden items. /> </head> <body> </body> </html>

SökmotorsopGmering TDDD52

SökmotorsopGmiering En stor branch, med många företag som endast livnär sig på ad opgmera sidor för sökmotorer så som Google. Det finns mycket man kan göra och läsa, och sökmotorerna ändrar sina algoritmer kongnuerligt. Ad ligga på de första 10 sökresultaten på de större sökmotorerna för vikgga nyckelord är avgörande för många företag. Antag ad 40% av alla klick görs på det första resultatet. (Deda beror mycket på typ av produkt man söker, men en bra utgångspunkt) På bara Google görs 400 miljoner sökningar varje dag.

SökmotorsopGmieringar - Nyckelord En stor del av jobbet när man sökmotorsopgmerar är ad hida räd nyckelord ad opgmera för. Nyckelord relaterar Gll det som användaren skriver när den söker eler din webbplats. Antag ad du har en hemsida som säljer mador. Nyckelord kan vara: maia, maior, golv, inredning, feng- shui Allt beror på vilken profil dina mador har, och vad man tror ad ens kunder kommer ad söka eler. Kanske passar nyckelordet modern- feng- shui- maia egentligen bäst för din produkt, men söker personer verkligen eler deda? Om du opgmerar för golv kanske du lägger Gd och pengar på kunder som inte alls var ute eler en mada. Använd t ex Googles verktyg Keyword Tool för ad ta reda på om vilka nyckelord som är mest använda. golv eller inredning?

SökmotorsopGmeringar En mycket bra sida för ad komma igång med sökmotorsopgmering. (kolla länkar under LaboraGon 1) Grundläggande op&meringar Länkar Gll din webbplats är avgörande. Om många bra sidor länkar Gll dig ökar din status. Se Gll ad <Gtle>, <h1>, <h2> innehåller de sökord du vill opgmera för. Gärna Gdigt på sidan. Undvik ad upprepa nyckelord för många gånger, sk keyword spamming. Läs och Gllämpa Google Search Engine OpGmizaGon Starter Guide (kolla länkar för LaboraGon 1) Unik <Gtle> och meta descripgon för varje sida.

HTML5 vs HTML4 vs XHTML TDDD52

HTML, XHTML, HTML5 Igår HTML 4 Hyper Text Markup Language XHTML - Extensible Hyper Text Markup Language Två olika specifikagoner för hur man märker vanlig text med taggar Idag HTML5 - FramGden för HTML HTML5 är inte bara Gll för semangk, formulär och länkar men även för avancerade tekniker så som: lokala databaser, video, sockets etc Idag är vi i början av denna utveckling, och alla funkgoner för HTML5 är inte implementerade i alla webbläsare. En vikggt del utav framgdens applikagoner, inte bara för webben, men för mobila enheter (Android och ios) samt för desktop (Windows 8 etc) I denna kurs använder vi HTML5, men kallar det bara HTML. Vi använder dock inga funkgoner från HTML5 som inte skulle kunna göras i HTML4 eller XHTML.

De första stegen när man skapar ed HTML dokument... XHTML HTML 5 <!DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Strict//EN" "hdp://www.w3.org/tr/xhtml1/dtd/xhtml1- strict.dtd"> <html xmlns="hdp://www.w3.org/1999/xhtml"> <head> <meta hdp- equiv="content- type content="text/html;charset=u - 8" /> <Gtle>An XHTML 1.0 Strict standard template</gtle> </head> <body> <p> Your HTML goes here </p> </body> </html> <!DOCTYPE html> <html> <head> <meta hdp- equiv="content- type content="text/html;charset=u - 8" /> <Gtle>Title of the document</gtle> </head> <body> The content of the document... </body> </html> HTML 4 <!DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 TransiGonal//EN" "hdp://www.w3.org/tr/xhtml1/dtd/xhtml1- transigonal.dtd"> <html> <head> <meta hdp- equiv="content- type content="text/html;charset=u - 8" /> <Gtle>Title of the document</gtle> </head> <body> <p> Your HTML goes here </p> </body> </html> I den här kursen använder vi HTML5 definigonen, men när man söker på nätet eler informagon kommer man ola stöta på XHTML och HTML4 versionerna, så det är bra ad förstå ad det finns skillnader.

LaboraGon 1 Steg 1 HTML Skapa en webbplats för ed fikgvt företag som har tre produkter En webbplats med endast HTML. Det finns strikta krav på koden och u örandet, kolla instrukgonerna noga. (Använd autorädningen för ad kolla ad allt är ok innan ni skickar för rädning) Det fikgva företagets webbplats kommer ad utvecklas vidare i de kommande laboragonerna. Se Gll ad ha installerat kodskeledet från laboragon 0 innan ni börjar med laboragon 1.

Inför nästa föreläsning Se Gll ad ni får klart laboragon 0 så fort som möjligt, deadline är redan denna vecka. Nästa vecka handlar det om CSS och layout av webbplatser. Steg två i laboragon 1 kräver CSS kunskap, men det rekommenderas ad börja med steg ed redan denna vecka. Tack!