Dagens föreläsning. Ställa in Apache för Python. Skapa ett Pythonscript. Skapa en statisk sida. Lagerdesign för webbkommunikation
|
|
- Gösta Ekström
- för 5 år sedan
- Visningar:
Transkript
1 Dagens föreläsning Scriptprogrammering Sommaren 2007 Webbuppgift HTTP och hur kontakten sker mellan klient och server. Apache-servern HTML. Exekvera Pythonscript. Formulär. Model-View-Controller på webben. CSS. Presentation av uppgiften. ORM och Zope. Django. IT Uppsala universitet Lagerdesign för webbkommunikation Ställa in Apache för Python Tre lager (förenklat). Klient och server kommunicerar via protokollet HTTP, HyperText Transfer Protocol. HTTP är tillståndslöst, varje förfrågan behandlas separat. Klient Server Databas Då WAMP installeras väljs en mapp som är rotkatalog för servern. Standardinställningen är {sökväg till WAMP\www till exempel c:\program\wamp\www. För att testa servern anges adressen i en webbläsare Skapa en statisk sida. HTML-koden sparas som test01.html i mappen www\python. Adressen blir därmed Skapa ett Pythonscript Pythonkoden sparas som script01.py i mappen www\python. Adress: <head> <title>hello web world!</title> </head> Detta är ett första HTML-test. <head> <title>hello dynamic world!</title> </head> Klockan är. """
2 Exekvera Pythonscript Om vi inte talar om för Apache att Pythonscript ska exekveras kommer de att visas som vanliga textfiler. Steg 1: Lägg till exekvering av script för rotkatalogen. Steg 2: Tala om att py-filer är exekverbara script. <Directory "C:/Program/wamp/www"> Possible values for the Options directive are "None", "All", or any combination of: Indexes Includes FollowSymLinks SymLinksifOwnerMatch ExecCGI MultiViews Note that "MultiViews" must be named *explicitly* --- "Options All" doesn't give it to you. The Options directive is both complicated and important. Please see for more information. Options Indexes FollowSymLinks ExecCGI AllowOverride controls what directives may be placed in.htaccess files. It can be "All", "None", or any combination of the keywords: Options FileInfo AuthConfig Limit AllowOverride all Controls who can get stuff from this server. onlineoffline tag - don't remove Order Deny,Allow Deny from all Allow from </Directory> Steg 2: Lägg till py-filer AddHandler allows you to map certain file extensions to "handlers": actions unrelated to filetype. These can be either built into the server or added with the Action directive (see below) To use CGI scripts outside of ScriptAliased directories: (You will also need to add "ExecCGI" to the "Options" directive.) AddHandler cgi-script.cgi.py Därmed är Apache konfigurerat. Det finns andra (bättre) sätt att exekvera Pythonscript i Apache men detta är det enklaste. Felmeddelanden Studera följande kod som innehåller ett fel:!d:/program/python25/python.exe print "<p>hej</p>" pri print "Hej igen" Då detta exekveras visas allt som genererats fram till felet. Ingen information om felet visas Skriv ut information Lägg till raden.!d:/program/python25/python.exe print "<p>hej</p>" pri print "Hej igen" Uppmärkningsspråk. Uppmärkningsspråk används för att märka innehållet i en textfil. Märkningen är abstrakt. Man talar om att en text är en rubrik, inte hur rubriken ska se ut. SGML, Standard Generalized Markup Language, är ett metaspråk för uppmärkning. Används inte lika mycket som sina derivat. XML, extensible Markup Language, är en förenklad variant av SGML som förenklar arbetet att implementera en parser. XML används som bas för många olika standardformat såsom XHTML, SVG, RSS och SOAP. HTML, HyperText Markup Language, baserades från början på SGML men implementerar inte dess strikta krav på uppmärkningen
3 Introduktion till HTML Som vi redan sett består HTML av ett antal "taggar" som beskriver vad texten inuti taggarna är för typ av text. Taggar skrivs <tagnamn> </tagnamn> eller <tagnamn/>. Varje HTML-dokument bör börja med en <html/>tag. Därefter följer en <head/>-tag som innehåller metainformation om dokumentet. Sist kommer <body/>-taggen som innehåller själva innehållet. HTML skiljer inte på stora och små bokstäver men w3 rekommenderar användandet av små bokstäver. å ä ö Å Ä Ö Svenska tecken å ä ö Å Ä Ö <head></head> <h1></h1> <p></p> <b> <i></i> <a></a> <table></table> <tr></tr> <td></td> <form></form> <img/> Vanliga HTML-taggar HTML-dokument. Metainformation om dokumentet. Innehållet i dokumentet. Rubrik nivå 1, 2 o.s.v. Paragraf. Fet stil. Kursiv stil. Hyperlänk. Tabell. Rad i tabell. Kolumn i tabell. Formulär. Bild. Attribut för taggar Taggar kan ha attribut som anges med namn och värde.!d:/program/python25/python.exe <p title="denna text visas inte direkt."> Sätt muspekaren på texten. </p> """ Bilder Länkar!d:/program/python25/python.exe Ett litet bi:<br/> <img src="images/honeybee.jpg" """!d:/program/python25/python.exe <a href=" en sak.</a> """
4 Formulär Formulär används för att skicka information från klienten till servern. Eftersom HTTP är tillståndslöst måste kommunikationen ske i flera steg. Steg 1: Servern skickar ett formulär till klienten. Steg 2: Användaren fyller i formuläret och klickar på "Skicka in"-knappen. Steg 3: Servern tar emot informationen från formuläret och utför något beroende på innehållet. Steg 4: Oftast skickar servern tillbaka någon form av information som meddelar vad som hänt med informationen. Exempel med formulär Ett formulär innesluts av <form/>-taggen och kan innehålla valfritt antal <input/>-taggar. action-attributet anger vilket script som ska hantera formuläret. method-attributet styr hur informationen skickas till det mottagande scriptet. Varje <input/>-tag har en typ och ett namn. <h1>litet formulärexempel</h1> <p>fyll i vad du heter och vilket år du är född:</p> <form action="handleform01.py" method="get"> <input type="text" name="fullname" /><br/><br/> <input type="text" name="year" /><br/><br/> <input type="submit" value="behandla formulär" /> </form> Formuläret i webbläsaren <h1>litet formulärexempel</h1> <p>fyll i vad du heter och vilket år du är född:</p> <form action="handleform01.py" method="get"> <input type="text" name="fullname" /><br/><br/> <input type="text" name="year" /><br/><br/> <input type="submit" value="behandla formulär" /> </form> Hanteraren!d:/program/python25/python.exe import datetime import cgi form = cgi.fieldstorage() if form.has_key("fullname") and \ form.has_key("year"): body = """Hejsan %s. Du är %s år gammal.""" % \ (form["fullname"].value, datetime.date.today().year - int(form["year"].value)) else: body = """Felaktigt formulärdata.""" <head> <title>hello dynamic world!</title> </head> %s """ % body Särskilda tecken Andra uppmärkningsspråk Vissa tecken har särskilda betydelser i HTML och måste därför skrivas som "escapekoder". >>> import cgi >>> cgi.escape("<>åäöåäö%&?") '<>\x86\x84\x94\x8f\x8e\x99%&?' HTML:s "luddighet" gör det olämpligt som format för datalagring. Försök har gjorts och görs för att strama upp HTML, exempelvis XHTML-validering. Det är bättre att spara data i ett rigoröst definierat format, exempelvis XML, och sedan omvandla det till HTML när det ska skickas till en klient
5 Layout för strukturerade dokument HTML har taggar som styr innehållets utseende, exempelvis <b/> och <i/>. Typsnitt kan detaljstyras med <font/> och tabeller kan ges en specifik layout genom attributinställningar. Genom att blanda layout och innehåll bryter vi mot designmodellen Model-View-Controller (MVC). En bättre lösning är att ange layout separerat från HTML-dokumentet. CSS Cascading Style Sheets är ett sätt att definiera en design separat från ett HTMLdokument. Används ofta i kombination <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <head> <title>racing with rails</title> <meta http-equiv="content-type" content="text/html; charset=iso "> <style type="text/css"> url(styles.css); --> </style> </head> <!-- BaseWrapper --> <div id="basewrapper"> <!-- Header --> <div id="header"> <h1>racing with rails</h1> <!-- /Header --> HTML-koden <!-- ContentWrapper --> <div id="contentwrapper"> <!-- MainContent --> <div id="maincontent"> <h1>den fina hemsidan</h1> <p>text om vad som helst</p> <!-- /MainContent --> <!-- Menu --> <div id="menu"> <ul id="menulist"> <li><a href="">hem</a></li> <li><a href="">sida</a></li> </ul> <!-- /Menu --> <!-- /ContentWrapper --> <!-- /BaseWrapper --> /* Basic style sheet */ /* GENERAL */ * { padding: 0; margin: 0; /* POSITIONING */ body { padding: 10px; margin: 0; divbasewrapper { width: 500px; divheader { width: 500px; height: 70px; padding: 20px px; margin: 0; divmaincontent { width: 360px; float: right; padding: 10px 0 0 0; divmenu { width: 110px; float: left; padding: 10px px; CSS-koden /* TYPOGRAPHY */ body { font-size: 75%; font-family: Verdana, Arial, Helvetica, sans-serif; divheader h1 { font-size: 3.5em; font-family: "Times New Roman", Times, serif; divmaincontent p { divmaincontent h1 { font-size: 1.7em; /* COLOR */ body { background-color: ffffff; color: ; divheader { background-color: eeeeee; border-bottom: 3px solid 90b11f; divmaincontent h1 { color: FF3300; Utan CSS Med CSS
6 Inlämningsuppgiften Uppgiften består i att skapa ett bokningssystem för en tandläkarmottagning. Utförs i grupper om två personer. Inlämningsuppgiften lämnas in skriftligt enligt instruktionerna på nätet. En muntlig tentamen kommer att äga rum under vecka 34. Förutsättningar Mottagningen har öppet kl 8-17 måndag till fredag, förutom kl då den är lunchstängd. Varje behandling startar på hel timma och pågår 60 minuter. Det räcker om prototypen kan hantera en enda vecka. Det ska finnas en startsida där patienterna hittar länkar till sidor för olika ändamål. När en patient ska boka en tid bör det finnas en veckoöversikt, där det framgår vilka tider som är lediga. En patient bör kunna få upp en förteckning över sina bokade tider, där det är möjligt att avboka besök vid behov. Tandläkaren ska ha en egen vy av veckoöversikten, där hon kan se alla bokade tider och där patientens namn och typen av behandling (undersökning, lagning, rotfyllning med mera) framgår. Normalt skulle sådan funktionalitet hanteras av ett separat lösenordsskyddat program, men för att förenkla prototypen ska även denna veckoöversikt vara tillgänglig för alla via webben. I övrigt är uppgiften relativt fri. Tveka inte att experimentera. Det viktiga är att öva programmering, inte få till en optimal bokningstjänst Nivå 2 Ska utföras individuellt av de som inte kan närvara vid den muntliga tentamen. Den som lämnar in nivå 2 ska även göra nivå 1 individuellt eftersom det är betygsgrundande. Betygsättning Inlämningsuppgifter och den muntliga tentamen betygssätts på skalan Underkänd, Godkänd och Väl godkänd. Varje inlämningsuppgift (två av webb, beräkning och bio) betygssätts separat. Tentamen utgör 40% och inlämningsuppgiften 60% av slutbetyget. Minst godkänt krävs på alla ingående delar. Totalt kommer alltså fyra betyg ges till dem som gör nivå 1 och två till dem som gör nivå Val av språk Efter moget övervägande har jag kommit fram till att inlämningsuppgiften nivå 1, får skrivas i Python, PHP, Perl eller Ruby. Nivå 2 får skrivas i Django, Zope, Ruby on Rails eller motsvarande ramverk i något av ovanstående språk. Inga "färdiga" bokningssystem får användas. Tyvärr kan jag endast erbjuda begränsad handledning i Perl. Övriga språk likvärdiga. Val av lagringsmodell Valet är fritt: Relationsdatabas (MySQL, SQLite). Textfil. Binär fil. pickle/shelve ORM
7 Objektsdatabaser Relationsdatabaser är bra för stora mängder homogen data. Mindre bra för komplexa, heterogena datamängder. För dessa fall kan objektsdatabaser (ODBMS/OODBMS) vara en bra lösning. Objektsdatabaser Fördelar: Enkelt att spara objekt från exempelvis Python. Inga extra steg krävs för att spara dtaa från objektorienterade applikationer. Nackdelar: Få standarder. Få verktyg. Inbyggd motsättning mellan OOP:s inkapsling av data och databasers datacentrerade perspektiv. Sämre prestanda än relationsdatabaser Mappning En hybridlösning är att skapa en mappning mellan objekt i en applikation och tabeller i en relationsdatabas. Klasser motsvaras av tabeller och attribut av kolumner. Denna process kan enkelt automatiseras. Detta har gjorts med stor framgång i exempelvis Zope Object Database och Active Records i Ruby on Rails. Object publishing Alternativt sätt att hantera server-side scripting. CGI-programmering tenderar att resultera i stort fokus på generering av rätt text att skicka tillbaka till klienten. Object publishing innebär att steget från webbadresser till funktions- och metodanrop automatiseras Zope Zope är ett web publishing framework. Zope är skrivet i Python. Består av flera komponenter. De viktigaste är: Zope Object Request Broker (Zope ORB) HTML mallar. Separerar logik och layout. Object database. Bygger på samma teknik som shelve, men stöder även bland annat transaktioner och samtidig dataaccess. Zope ORB Agerar mellanhand mellan CGI-världen och Python objektvärld. Vanlig CGI-applikation: URL request Klient Server Zope ORB HTML response Zope: Vanliga URL request anrop Klient Server Zope ORB Pythonkod HTML response
8 Zope ORB översätter URL:er En URL (Uniform Resource Locator) anger hur ett objekt eller en tjänst lokaliseras på Internet. Zope ORB översätter en URL till metodanrop för objekt: Detta översätts av ZORB:en på server till ett Pythonanrop för ett objekt i sökvägen path: mod.obj1.obj2.met_name(arg1=val1,arg2=val2) Zope ORB fortsättning Svaret som skapas av Pythonkoden omformateras av Zope (mha HTML-mallar) till HTML och skickas tillbaka till klienten. Klienten märker ingen skillnad. HTML-kod från statiskt innehåll och dynamiskt innehåll, oavsett om det genereras av Pythonscript via CGI direkt eller via Zope, ser likadant ut då det når klienten Django och Rails Webbramverk som levereras med en egen webbserver för snabb och enkel utveckling. Kräver få andra programvaror vilket gör det lättinstallerat
Dagens föreläsningar
Webuppgift Dagens föreläsningar HTTP och hur kontakten sker mellan klient och server. Apache-servern HTML. Exekvera Pythonscript. Formulär. Model-View-Controller på webben. CSS. Presentation av uppgiften.
Läs merDagens föreläsningar
Webuppgift Dagens föreläsningar HTTP och hur kontakten sker mellan klient och server. Apache-servern HTML. Exekvera Pythonscript. Formulär. Model-View-Controller på webben. CSS. Presentation av uppgiften.
Läs merRepetition. Hypertext. Internet HTTP. Server och klient Text försedd med länkar till andra texter. Många sammankopplade nät
Repetition Internet Hypertext Server och klient Föreläsning 2 HTTP HTML Internet Hypertext Många sammankopplade nät Text försedd med länkar till andra texter Gemensamma adresser T ex 10.10.0.1 Gemensamma
Läs merRepetition. Hypertext. Internet HTTP. Server och klient Föreläsning 2. Text försedd med länkar till andra texter. Många sammankopplade nät
Repetition Föreläsning 2 Internet Hypertext Server och klient HTTP HTML Internet Många sammankopplade nät Gemensamma adresser T ex 10.10.0.1 Gemensamma protokoll Protokoll = regler och algoritmer för kommunikation
Läs merWebbteknik. Innehåll. Historisk återblick Teknisk beskrivning Märkspråk Standardisering Trender. En kort introduktion
Webbteknik En kort introduktion Innehåll Historisk återblick Teknisk beskrivning Märkspråk Standardisering Trender 1 Historisk återblick 89 CERN Tim Berners Lee Ett plattformsoberoende sätt att sprida
Läs merORDLISTA WEBBDESIGN 100P
ORDLISTA WEBBDESIGN 100P HTML- TAGGAR M.M. (DE BLÅFÄRGADE ORDEN ÄR OLIKA ATTRIBUT SOM HÖR TILL DE OLIKA TAGGARNA.) HTML Står för Hyper Text Markup Language och är en uppsättning markeringskoder.
Läs mer21/01/2016. Stilmallar. styra utseendet av webbplatsen DEL 1. Karin Fahlquist. index.html. recept.html frukt.html grönsaker.html
Stilmallar styra utseendet av webbplatsen DEL 1 Karin Fahlquist index.html recept.html frukt.html grönsaker.html 1 Samma kod olika utseende Olika exempel om layout: http://www.csszengarden.com/ Stilmallar
Läs merTentamen ITK:P2. Inga hjälpmedel tillåtna förutom penna och papper. Skriv tydligt och texta gärna. 14 st frågor, 70 poäng.
Tentamen ITK:P2 lördag 2007-04-14 Inga hjälpmedel tillåtna förutom penna och papper. Skriv tydligt och texta gärna. 14 st frågor, 70 poäng. 40 poäng ger betyget G, 55 ger VG Peter Mozelius DSV 1.) Ditt
Läs merWebbservrar, severskript & webbproduktion
Webbprogrammering Webbservrar, severskript & webbproduktion 1 Vad är en webbserver En webbserver är en tjänst som lyssnar på port 80. Den hanterar tillgång till filer och kataloger genom att kommunicera
Läs merHur 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
Webben som verktyg Idag: Hur hänger det ihop? Viktiga tekniker Stegen i ett webbprojekt Verktyg Dreamweaver Photoshop Joomla CMS Storyboard och flödesschema Fixa webbhotell Hur hänger det ihop? För att
Läs merOlika slags datornätverk. Föreläsning 5 Internet ARPANET, 1971. Internet började med ARPANET
Olika slags datornätverk Förberedelse inför laboration 4. Historik Protokoll, / Adressering, namnservrar WWW, HTML Föreläsning 5 Internet LAN Local Area Network student.lth.se (ganska stort LAN) MAN Metropolitan
Läs merHTML och CSS. Eric Elfving Institutionen för Datavetenskap (IDA)
HTML och CSS Eric Elfving Institutionen för Datavetenskap (IDA) Upplägg Introduktion Grundläggande HTML Ändra utseende med CSS 2 Introduktion HyperText Markup Language används för att strukturera text
Läs merEDA095 HTML. Per Andersson. April 26, Lund University Innehåll: HTML, CSS, DOM, JavaScript
EDA095 HTML Per Andersson Lund University http://cs.lth.se/pierre_nugues/ April 26, 2017 Innehåll: HTML, CSS, DOM, JavaScript Per Andersson EDA095 HTML April 26, 2017 1 / 23 Webben Webben byggs upp av
Läs merITK:P2 F1. Hemsidor med HTML HTML. FTP, HTTP, HTML, XML och XHTML
ITK:P2 F1 FTP, HTTP, HTML, XML och XHTML DSV Peter Mozelius 1 Hemsidor med HTML Hur många av er har provat på att bygga en egen hemsida med HTML eller XHTML? För hand eller med hjälpverktyg? Har ni lagt
Läs merWebbsidor och webbservrar
Webbsidor och webbservrar Server HTTP-protokollet Dokument (t.ex. HTML kod) Klient URL (t.ex. länk) Normal funktion hos webben: Användaren klickar på länk eller anger URL på annat sätt. Servern lokaliserar
Läs merF07 Stilmallar Dagens agenda
F07 Stilmallar Dagens agenda CSS, Stilmallar Lokala, interna, externa Selektorer - Taggselektorer - Klasselektorer - ID-selektorer Egenskapsarv Pseudo-klasser och element Kombinatorer Specificitet Stilmallar
Läs merHTML och CSS. Eric Elfving Institutionen för datavetenskap. 18 augusti 2015
. HTML och CSS Eric Elfving Institutionen för datavetenskap 18 augusti 2015 Översikt 2/17 Introduktion HTML Syntax Vanliga element CSS Syntax Selektorer Kombinera HTML och CSS Webserver Introduktion 3/17
Läs merLektion 2 - CSS. CSS - Fortsätt så här
Lektion 2 - CSS I den här lektionen behandlas HTML och CSS. Det förutsätts att lektion 1 är gjord, eller att du har tillräckliga kunskaper i grundläggande HTML för att klara den här lektionen. CSS - Fortsätt
Läs merFörkunskaper: Tim Berners Lees vision webbläsarkriget W3C strukturtagg <h1> layout-tagg <font size="6">
CSS { } Anne Diedrichs Medieteknik Södertörns Högskola Förkunskaper: Tim Berners Lees vision webbläsarkriget W3C strukturtagg layout-tagg Kurslitteratur: Niederst Robbins, Learning
Läs merFöreläsning 4. CSS Stilmallar för webben
Föreläsning 4 CSS Stilmallar för webben Innehåll 1. CSS, vad är det? 2. Repetition av HTML-element 3. CSS, hur, var, när? 4. CSS & arv? CSS Cascading Style Sheet Same, same, but different Samma innehåll
Läs merEn grundkurs i hemsidor och hur de är uppbyggda
En grundkurs i hemsidor och hur de är uppbyggda Den här artikeln tänkte väldigt grundligt gå igenom koncepten kring en hemsida och hur den är uppbyggt, för att ge dig grundkunskap att bygga vidare på och
Läs merAvancerade Webbteknologier
Projektledning, Business Knowledge Användbarhet & Layout Avancerade Webbteknologier Lkti Lektion 1 Kommunikation Tobias Landén tobias.landen@chas.se Avancerade webbteknologier del 1 (4 KY poäng) Syfte
Läs merWebbprogrammering. Sahand Sadjadee
Webbprogrammering Sahand Sadjadee Agenda Webb The World Wide Web (WWW) is a network of online content that is formatted in HTML and accessed via HTTP. The term refers to all the interlinked HTML pages
Läs merProgrammeringteknik. Planering 2014-05-12 MÅL LABB: MOMENT LAB4 HTML - EXEMPEL HTML. Webbdelen
MÅL Programmeringteknik Webbdelen Efter webbmomentet ska du: kunna använda ett tiotal kommandon i: HTML (göra webbsidor) CSS (webbsidans utseende) Javascript (programmering - klienten) PHP (programmering
Läs mer/*formatering för html och body elementen - elementens höjd sträcker sig över hela webbläsarfönstrets höjd*/ html, body { height: 100%; }
/*CSS document*/ /* nollställer margin för alla element*/ * { margin: 0; /*formatering för html och body elementen - elementens höjd sträcker sig över hela webbläsarfönstrets höjd*/ html, body { height:
Läs merInför prov 1 i webbdesign
Inför prov 1 i webbdesign Skapa ett grundläggande HTML-dokument sidtitel övriga instruktioner Grundläggande märken, samt hur de används startmärke
Läs merLektion 2 Del 1 Kapitel 6
Lektion 2 Del 1 Kapitel 6 Inlärningsmål Att kunna kontrollera och styra webbsidors utseende med hjälp av CSS mallar Att med hjälp av CSS mallar kunna ge en hel website ett gemensamt utseende Att med hjälp
Läs merLabora&on 7 Syfte med laborationen:
Labora&on 7 Syfte med laborationen: - att förstå enkel 7ilhantering i PHP - att repetera grundläggande PHP- begrepp såsom loopar, arrayer, stränghantering och formulär. VIKTIGT: uppgift 3-5 är repetitionsuppgifter
Läs merIntroducerande övningar i HTML
Introducerande övningar i HTML En webbsida består av en textfil som innehåller sidans text och koder i språket HTML, för att formatera innehållet. Har man bilder på sidan, så finns de som separata filer
Läs merTNMK30 - Elektronisk publicering
Webben TNMK30 - Elektronisk publicering Vad är internet? Vad är internet? Vad är internet? Internet: sammankoppling av datornätverk. Används för bl.a. epost, chat, filöverföring, webbsidor. Kommunikation
Läs merKarlstads Universitet, Datavetenskap 1
DAV B04 - Databasteknik KaU - Datavetenskap - DAV B04 - MGö 229 PHP Hypertext Preprocessor Scriptspråk på serversidan Innebär att webbservern översätter php-scripten innan sidan skickas till webbläsaren,
Läs mer12/9/2010 REGLER WEBBPRODUKTION WEBBDESIGN CASCADING STYLE SHEETS CSS LOKALA STILMALLAR GLOBALA STILMALLAR. Selektor. Deklaration
REGLER Selektor Deklaration Body { font-family:verdana WEBBPRODUKTION WEBBDESIGN CASCADING STYLE SHEETS CSS Ulrik Söderström Ulrik.soderstrom@tfe.umu.se h1,h2 { font-color:red; font-size:10pt; Egenskap
Läs merWebbens grundbegrepp. Introduktion till programmering. Ytterligare exempel. Exempel på webbsida. Föreläsning 5
Introduktion till programmering Föreläsning 5 Programmering av webbsidor. Webbens grundbegrepp HTML HTML (HyperText Markup Language) är det språk som används för att skriva webbsidor. HyperText: text med
Läs merÖvning (X)HTML 2. Sidan 1 av 7 2010-11-11
Sidan 1 av 7 2010-11-11 Övning (X)HTML 2 Innan du börjar med laborationen ska du se till så att du har öppnat din editor (till exempel Notepad++). I denna editor ska du skriva (X)HTML-kod som du sedan
Läs merF02 En första sida. Dagens agenda
F02 En första sida Dagens agenda doctype taggar, element, attribut, värden teckenkodning HTML/XHTML Indentering Block/inline-element Struktur Se demo #2
Läs merEn stiligare portal Laboration 3
Laborationsanvisning En stiligare portal Laboration 3 Författare: Johan Leitet Version: 1 Datum: 2011-09-09 Inledning Vi har hittills koncentrerat oss på att strukturera upp vår information på ett så semantiskt
Läs merIntroduktion till programmering
Introduktion till programmering Föreläsning 5 Programmering av webbsidor. Webbens grundbegrepp HTML HTML (HyperText Markup Language) är det språk som används för att skriva webbsidor. HyperText: text med
Läs merInternet A. HTML Grunder. 02-01-14 Maximilien Chiang 1
Internet A HTML Grunder 1 HTML Tags (Speciella markeringar) < Instruktion> De flesta instruktioner avslutas också med en 2 untitled Min
Läs merWebbteknik II. Föreläsning 4. Watching the river flow. John Häggerud, 2011
Webbteknik II Föreläsning 4 Watching the river flow Web Service XML-RPC, SOAP, WSDL, UDDI HTTP Request, Response, Headers, Cache, Persistant Connection REST Hype or the golden way? Web Service / Webbtjänst
Läs merLabora&on 8 Formulär övningar/uppgi6er
Labora&on 8 Formulär övningar/uppgi6er 1M321 Webbteknik 1, 7,5hp Medieteknik 2015 Rune Körnefors rune.kornefors@lnu.se 1a. Ladda ner arbetsdokument Till övningarna i denna labora&on finns det en par dokument
Läs merEn bortsprungen katt
Nivå 1 All Code Clubs must be registered. Registered clubs appear on the map at codeclubworld.org - if your club is not on the map then visit jumpto.cc/ccwreg to register your club. En bortsprungen katt
Läs merWebbutveckling Laboration 1: HTML5 och CSS3.
Institutionen för 2015-11-30 Tillämpad fysik och elektronik Karin Fahlquist Webbutveckling Laboration 1: HTML5 och CSS3. Målsättning Att skapa en webbplats genom att först skapa en Lo-fi prototyp och sedan
Läs merKlient/server. Översikt. Lektion 1: Webbtekniker från Microsoft. Webbteknik från Microsoft. Klient/server. Designmönster. Utrullning.
Klient/server Översikt Webbteknik från Microsoft. Klient/server. Designmönster. Utrullning. Lektion 1: Webbtekniker från Microsoft Microsoft webbtekniker. ASP.NET. Klientsidan. Internet Information Server.
Läs merWebbprogrammering 725G54
Webbprogrammering 725G54 Hej! Jakob Bandelin, gästadjunkt jakob.bandelin@liu.se Interaktionsdesign, webbdesign, apputveckling Agenda Kursmål och -upplägg HTML Teckenkodning Validering Lab 1. Kursmål exemplifiera
Läs merWebbprogrammering - 725G54 PHP. Foreläsning II
Webbprogrammering - 725G54 PHP Foreläsning II Agenda Serverskript PHP Validering av data med serverskript Säkerhet Lab 2. Live coding Serverskript Kör ett program på servern och resultatet skickas till
Läs mer2I1073 Föreläsning 1. HTML och XHTML XHTML
2I1073 Föreläsning 1 XHTML, stilmallar och Javascript 1 KTH-MI Peter Mozelius HTML och XHTML HyperText Markup Language Element = taggar + taggarnas innehåll innehåller lite text taggarna kan
Läs merLaboration 3 HTML och struktur samt frågorna A - C övningar/uppgifter
Laboration 3 HTML och struktur samt frågorna A - C övningar/uppgifter 1M321 Webbteknik 1, 7,5hp Medieteknik 2018 Rune Körnefors rune.kornefors@lnu.se 1. Skapa ett nytt HTML-dokument I denna laboration
Läs merDin egen webserver med Apache
Din egen webserver med Apache Att köra en egen webserver kan vara väldigt skojjigt. Jag själv har ett lokalt nätverk och har till exempel ett CGI script för att koppla upp på Internet och koppla ner igen.
Läs merKonstruktion av datorspråk
Konstruktion av datorspråk Fö3: Uppmärkningsspråk Peter Dalenius petda@ida.liu.se Institutionen för datavetenskap Linköpings universitet 2009-01-29 Översikt Uppmärkningsspråk Struktur och specifikation
Läs merDet här dokumentet är till för att ge en översikt över ASP.NET MVC samt hur WCF Services används från.net applikationer.
Informationsinfrastruktur 7.5 hp Mattias Nordlindh Inledning Det här dokumentet är till för att ge en översikt över ASP.NET MVC samt hur WCF Services används från.net applikationer. Dokumentet består av
Läs merNätet. Uppgiften. Nivå
Nivå 1 Nätet All Code Clubs must be registered. Registered clubs appear on the map at codeclubworld.org - if your club is not on the map then visit jumpto.cc/ccwreg to register your club. Uppgiften Har
Läs merUppmärkningsspråk. TDP007 Konstruktion av datorspråk Föreläsning 3. Peter Dalenius Institutionen för datavetenskap
Uppmärkningsspråk TDP007 Konstruktion av datorspråk Föreläsning 3 Peter Dalenius Institutionen för datavetenskap 2015-01-29 Vad handlar det andra seminaret om? Strukturerad text Uppgifter Hämta information
Läs merUppmärkningsspråk. TDP007 Konstruktion av datorspråk Föreläsning 3. Peter Dalenius Institutionen för datavetenskap
Uppmärkningsspråk TDP007 Konstruktion av datorspråk Föreläsning 3 Peter Dalenius Institutionen för datavetenskap 2017-01-26 2 Vad handlar det andra seminariet om? Strukturerad text Uppgifter Hämta information
Läs merWebbteknik II. Föreläsning 5. Restless farewell. John Häggerud, 2011
Webbteknik II Föreläsning 5 Restless farewell HTTP Request HTTP verbs (methods): GET, POST, HEAD, DELETE, PUT, OPTIONS, TRACE, CONNECT http://www.w3.org/protocols/rfc2616/rfc2616-sec9.html variable=value&variable2=value2
Läs merASP.NET MVC. Copyright Mahmud Al Hakim mahmud@dynamicos.se http://www.webbacademy.se. Innehåll
ASP.NET MVC Copyright Mahmud Al Hakim mahmud@dynamicos.se http://www.webbacademy.se Innehåll Introduktion till MVC Controller Action-metoder Views Arbeta med Layout-sidor och sektioner Route konfiguration
Läs merObjektorienterad Programkonstruktion. Föreläsning 10 7 dec 2015
Objektorienterad Programkonstruktion Föreläsning 10 7 dec 2015 Nätverksprotokoll - OSI Open Systems Interconnection model (ISO standard) definierar 7 lager för nätverkskommunikation: 1 - Physical Layer:
Läs merIntroduktion HTML och PHP 732G16 Databaser design och programmering
Introduktion HTML och PHP 732G16 Databaser design och programmering 08-04-22 Ingrid Alin Nilsson 1 Presentationen tar upp Lite grundläggande om HTML Grunderna i PHP Styrstrukturer Funktioner Filhantering
Läs merStatistik från webbplatser
Statistik från webbplatser problem och möjligheter Ulf Kronman Föredragets huvuddelar Frågorna och motfrågorna Vilka frågor ställer chefen, BIBSAM och ISO? Varför ställer webmastern krångliga motfrågor?
Läs merWEBBUTVECKLING Kursplanering
Kursplanering v 35-37: Struktur, mappar, google-skills, planering, html-grunder, bra/dåliga exempel, webbläsare, editorer v 38-43: HTML - länkar, färger, text, listor, bilder. v 44: Höstlov v 45: Repetition,
Läs merÖversikt. Installation av EasyPHP 1. Ladda ner från http://www.easyphp.org/ Jag använder Release 5.3.4.0 2. Installera EasyPHP.
Laboration 1 Översikt 1. Att komma igång med laborationsmiljön a. installera Aptana Studio 3 b. Installera EasyPHP 2. Testa lite programmering a. Testa enkla uppgifter b. Testa automatiskt 3. Skapa inloggningsformulär
Läs merÖvnings hemtentamen med förslag till lösning, webbprogrammering
Övnings hemtentamen med förslag till lösning, webbprogrammering Se detta som ett förslag efter som uppgifterna ofta går att lösa få flera sätt. Uppgift 1 CSS 4 poäng Alla css regler skall placeras i en
Läs merWebbpublicering. Teknikintroduktion 1 Jody Foo (jodfo@ida.liu.se)
Webbpublicering Teknikintroduktion 1 Jody Foo (jodfo@ida.liu.se) Föreläsningsöversikt Föreläsning 1 Vad är webbpublicering? Lite historia - Internet och webben Statiska webbplatser Grundkoncept: webbläsare,
Läs merWebbteknik för ingenjörer
Institutionen för 2015-01-22 Tillämpad fysik och elektronik Karin Fahlquist Webbteknik för ingenjörer HTML5 & CSS laboration Målsättning Att skapa en webbplats utifrån en Lo-fi prototyp och implementera
Läs merXML. Extensible Markup Language
XML Extensible Markup Language XML - 1969 Generalized Markup Language (GML) 1979-85 Standard Generalized Markup Language (SGML) 1990 HyperText Markup Language (HTML) 1996-98 Extensible Markup Language
Läs merElektronisk publicering TNMK30
Elektronisk publicering TNMK30 Förra gången Färger CSS - layout och styling Lite repetition (X)HTML och SEO Att separera innehåll från presentation. CSS, layoutproblem med float och boxar CSS, layoutproblem
Läs merFrontPage Express. Ämne: Datorkunskap (Internet) Handledare: Thomas Granhäll
FrontPage Express I programpaketet Internet Explorer 4.0 och 5.0 ingår också FrontPage Express som installeras vid en fullständig installation. Det är ett program som man kan använda för att skapa egna
Läs merF06 A table form Dagens agenda
F06 A table form Dagens agenda Länkar Tabeller Formulär Hyperlänkar index.html feed/news.html klickbar text hippo.png about.html Relativ länk till webbsida via klickbar länk: klickbar
Läs merLektion 3 HTML, CSS och JavaScript
Lektion 3 HTML, CSS och JavaScript I den här lektionen behandlas HTML, CSS och JavaScript (JS). Det förutsätts att lektion 1 och 2 är gjord, eller att du har tillräckliga kunskaper i grundläggande HTML
Läs merCSS- Cascading Stylesheets
CSS- Cascading Stylesheets 2D1525 Programmering för interaktiva medier http://www.nada.kth.se/kurser/kth/2d1525/ Cascading Stylesheets Ett språk för att definiera hur XML-dokument ska rendreras på web,
Läs merTDP003 Projekt: Egna datormiljön
. TDP003 Projekt: Egna datormiljön Egen utvecklingsmiljö Kursmaterial till kursen TDP003 Höstterminen 2017 Version 2.2 2017-06-30 2017-06-30 Egen utvecklingsmiljö INNEHÅLL Innehåll 1 Revisionshistorik
Läs merArbetsmaterial HTML pass 1 - Grunder
Arbetsmaterial HTML pass 1 - Grunder Det vi idag kallar Internet växte fram ur ett amerikanskt nätverk kallat ARPAnet som skapades i slutet av 60 talet. Ett topphemligt verktyg för att koppla ihop stordatorer
Läs merLite mer om CGI-programmering
Lite mer om CGI-programmering Innehåll Vad är CGI? Vad är Forms? Vad är Perl? Forms, CGI och Perl Läs också: Internetprogrammering F 14 Kursboken s s 48-51 Exemplen på på kursens sidor: sidor: http://www.nada.kth.se/kurser/kth/2d4334/98-99/contents/cgi/examples.html
Läs merKursplanering Utveckling av webbapplikationer
Kursplanering Utveckling av webbapplikationer Fakta Ämne Programmering Poäng 40 Yh-poäng Kurskod YSYS-WEB Klass Systemutvecklare.NET Syfte och koppling till yrkesrollen För att kunna arbeta som systemutvecklare
Läs merSpråk för webben introduk4on 4ll HTML
Föreläsning i webbdesign Språk för webben introduk4on 4ll HTML Rune Körnefors Medieteknik 1 2012 Rune Körnefors rune.kornefors@lnu.se En webbsidas beståndsdelar Text (formaterad, strukturerad) Länkar Inkluderade
Läs merProva på-laboration i PHP Johan Sjöholm johsj@ida.liu.se Institutionen för datavetenskap, Linköpings universitet 2009-08-09
Prova på-laboration i PHP Johan Sjöholm johsj@ida.liu.se Institutionen för datavetenskap, Linköpings universitet 2009-08-09 1. Introduktion till webbprogrammering Webbprogrammering består av ett antal
Läs merE12 "Evil is going on"
E12 "Evil is going on" Föreläsning 12, HT2014 AJAX Kurs: 1dv403 Webbteknik I Johan Leitet E12 Evil is going on Dagens agenda AJAX XMLHttpRequest-objektet JSON Vad är AJAX? Asynchronous JavaScript and XML
Läs merTentamen etjänster och webbprogrammering
Tentamen etjänster och webbprogrammering Institutionen för informatik och media, informattionssystem Datum 26/8 Tid 8.00 12.00 Lärare Owen Eriksson Fredrik Bengtsson Maxpoäng 65 För Godkänd krävs minst
Läs merStrukturering med XML och DTD
Föreläsning i webbdesign Strukturering med XML och DTD Rune Körnefors Medieteknik 1 2012 Rune Körnefors rune.kornefors@lnu.se PresentaCon SCl Layout OrganisaCon/struktur InformaConsobjekt Länkar Innehåll/data
Läs merFrågor och svar - Diagnostisk prov ht14 - Webbutveckling 1
Frågor och svar - Diagnostisk prov ht14 - Webbutveckling 1 Bilder och optimering --- Vilken upplösning är lämplig för bilder som ska användas på Internet? Sträva efter korta nedladdningstider. 72 ppi/dpi
Läs merF02 HTML. Föreläsning 2, HT2013 HTML. Kurser: Klientbaserad Webbutveckling 1DV435. Johan Leitet
Föreläsning 2, HT2013 HTML F02 HTML Kurser: Klientbaserad Webbutveckling 1DV435 Johan Leitet F02 HTML Dagens agenda doctype taggar, element, attribut, värden teckenkodning HTML/XHTML
Läs merTDDD52 CSS. Färger. Färger 1/3/13
Jag önskar göra det lä0are för användarna genom a0 markera vissa delar med en annan färg? HTML är bra, men det är inte så snyggt? TDDD52 - CSS CSS regler och selectors gör a0 jag kan styla min HTML precis
Läs merAtt bygga enkla webbsidor
Nivå 1 Att bygga enkla webbsidor All Code Clubs must be registered. Registered clubs appear on the map at codeclubworld.org - if your club is not on the map then visit jumpto.cc/18cplpy to find out what
Läs merInternets historia Tillämpningar
1 Internets historia Redan i slutet på 1960-talet utvecklade amerikanska försvaret, det program som ligger till grund för Internet. Syftet var att skapa ett decentraliserat kommunikationssystem som skulle
Läs merKommunikation. Dator med webbläsare Förfrågan: Webserver. Returnerar HTML-kod
html och css Kommunikation Dator med webbläsare Förfrågan: http://www.umu.se Webserver Returnerar HTML-kod Webbläsare Chrome Firefox Internet Explorer Safari Opera Källa : http://www.w3schools.com/browsers/
Läs merTENTAMEN I INTRODUKTION TILL MEDIEPRODUKTION, 5p
UMEÅ UNIVERSITET TFE SE/KF TENTAMEN 2004-09-29 TENTAMEN I INTRODUKTION TILL MEDIEPRODUKTION, 5p Tid: 2004-09-29 kl. 14.00-18.00 (-20.00 förlängd skrivtid) Plats: Östra paviljongen sal 8 Hjälpmedel: Presentation:
Läs merLabora&on 2 HTML och validering övningar/uppgi:er
Labora&on 2 HTML och validering övningar/uppgi:er 1M321 Webbteknik 1, 7,5hp Medieteknik 2016 Rune Körnefors rune.kornefors@lnu.se 1. Ladda ner arbetsdokument Till övningarna i denna labora&on finns det
Läs merUppmärkningsspråk. TDP007 Konstruktion av datorspråk Föreläsning 4. Peter Dalenius Institutionen för datavetenskap
Uppmärkningsspråk TDP007 Konstruktion av datorspråk Föreläsning 4 Peter Dalenius Institutionen för datavetenskap 2015-02-03 Från förra gången XML-dokument specificeras med t.ex. en DTD Två olika sätt att
Läs merbehövs för enhetlighet, tala samma språk, så att användaren kan lära sig och använda det vidare.
1 2 3 Grafisk profil reglerar grunddragen i utseendet (logga, färger, typsnitt) en helhet skapas Vi ska känna igen oss, vi ska förstå vad som avsändaren vill kommunicera. Kan vara svårt att direkt applicera
Läs merXhtml och CSS.Tillämpad fysik och elektronik Per Kvarnbrink (redigering Ulf Holmgren 2011)
Laboration 1: Xhtml och CSS.Tillämpad fysik och elektronik Per Kvarnbrink (redigering Ulf Holmgren 2011) Målsättning Att prova på grundläggande html samt att separera innehåll och utseende. Slutresultatet
Läs merHTML. Introduktion till HyperText Markup Language
HTML Introduktion till HyperText Markup Language 1 Frågor innan vi börjar? 2 Dagens föreläsning Snabb introduktion till webben Varför använder vi HTML? Ett första HTML-dokument Metadata Teckenkodning Validera
Läs merAlla filer som bearbetar PHP script ska avslutas med ändelsen.php, exempelvis ska en indexsida till en hemsida heta index.php
Introlektion PHP är ett av de enklare språken att lära sig just pga. dess dynamiska struktur. Det används för att bygga upp båda stora och mindre system. Några vanliga system som använder sig av PHP är
Läs merHTML, SGML, CSS, XML, XHTML, MIME, HTTP
Internets innehåll HTML, SGML, CSS, XML, XHTML, MIME, HTTP gruint06/ingint06, internets innehåll Föreläsning 2, bild 1 av 27 Vad ska vi lära? Vad HTML är, var det kommer från och var vi hittar information
Läs merWebbdesign vt. 2009. Innehållsförteckning
Webbdesign vt. 2009 Fysiska träffar onsdagkvällar: Kl. 18:00 21:00 28/1 11/2 11/3 25/3 1/4 22/4 6/5 Innehållsförteckning 2. FTP-hur gör man? 3. Vad ska jag göra? 4. Grundtaggar 6. Tabeller 7. Infoga bilder
Läs merF8 Webbteknologier 1. Dynamiska webbsidor
Dynamiska webbsidor F8 Webbteknologier 1 EDA095 Roger Henriksson Datavetenskap Lunds universitet HTML är statisk. En sida får sitt utseende bestämt när en webbdesigner skapar den. Ofta vill man ha mera
Läs merHyperlänkar. I HTML skapar man en hyperlänk med taggen <a> </a>, som är en förkortning av ordet ankare, på (engelska anchor).
Länkar, ankar och resurser En länk är en hänvisning från ett dokument till en resurs. En resurs kan nästan vara vad som helst. Det mesta på internet är resurser i någon form, som exempelvis HTLM-dokument,
Läs merLaboration 2: Xhtml och CSS.
Laboration 2: Xhtml och CSS. Målsättning Att prova på grundläggande html samt att separera innehåll och utseende. Slutresultatet kommer att bli en webbplats med layout, bakgrundsbilder, minst en meny och
Läs mer<Webbutvecklare lektion="02"> Kursledare: Mahmud Al Hakim
Kursledare: Mahmud Al Hakim Lektionstillfällets mål Introduktion till CSS CSS Regler och egenskaper Externa CSS-filer: Link-taggen Intern CSS: Style-taggen Inline CSS: Attributet
Läs merAtt styla webbsidor. Nivå. Uppgiften
Nivå 2 Att styla webbsidor All Code Clubs must be registered. Registered clubs appear on the map at codeclubworld.org - if your club is not on the map then visit jumpto.cc/ccwreg to register your club.
Läs merSwedbank Mobile Loadtesting. LoadRunner 11.04 Mobile App protocol
Swedbank Mobile Loadtesting LoadRunner 11.04 Mobile App protocol Bakgrund Mission: Prestandatesta mobilt backend Typ: RESTful tjänst Underlag: Dokumenterat URI och API (Uniform Resource Identifier, Application
Läs merContent Management System. Publiceringssystem
Content Management System Publiceringssystem Vad är ett Content Management System (CMS)? Ett verktyg för att separera innehåll från presentation Skapa webbsidor utan att kunna html Låt många skapa sidor
Läs mer