Webbteknik En kort introduktion.

Webbteknik En kort introduktion

Innehåll Historisk återblick Teknisk beskrivning Märkspråk
Standardisering Trender

Historisk återblick -89 CERN
Tim Berners-Lee Ett plattformsoberoende sätt att sprida forskningsinformation -93 NCSA Mosaic National Center for Supercomputing Applications, University of Illinois CERN forskningsinstitut i Schweiz, Partikelfysik… gigantisk anläggning med muskler… NCSA Mosaic var inte den första webbläsaren, men det var denna som gjorde att allt detta med webben slog igenom!

Webbläsare (-93) Mosaic – 93
Utbrytargrupp ville komersialisera och startade då Netscape Microsoft la ett bud på Netscape men fick nobben, licensierade då koden från NCSA (Mosaic). Netscape la ner sin utveckling men släppte sin källkod Mozilla Organization/Mozilla Corporation/Mozilla Foundation utvecklade en produktsvit baserad på denna kod -98, allt för komplext och stort -03 ändrade de inriktning och fokuserade… detta ledde till Firefox (den idag näst största webbläsaren på marknaden)

Webbläsare (-93) (-94) Mosaic – 93

Webbläsare (-93) (-95) (-94) Mosaic – 93

Webbläsare (-93) (-95) (-94) Opera (-96) Mosaic – 93
Utbrytargrupp ville komersialisera och startade då Netscape Microsoft la ett bud på Netscape men fick nobben, licensierade då koden från NCSA (Mosaic). Netscape la ner sin utveckling men släppte sin källkod Mozilla Organization/Mozilla Corporation/Mozilla Foundation utvecklade en produktsvit baserad på denna kod -98, allt för komplext och stort -03 ändrade de inriktning och fokuserade… detta ledde till Firefox (den idag näst största webbläsaren på marknaden) Opera (-96)

Webbläsare (-93) Safari (-03) (-95) (-94) Firefox (-03) Opera (-96)
Mosaic – 93 Utbrytargrupp ville komersialisera och startade då Netscape Microsoft la ett bud på Netscape men fick nobben, licensierade då koden från NCSA (Mosaic). Netscape la ner sin utveckling men släppte sin källkod Opera (Telenor) en liten uppstickare som funnits med ett tag, har hyfsade marknadsandelar i mobila enheter… Mozilla Organization/Mozilla Corporation/Mozilla Foundation utvecklade en produktsvit baserad på denna kod -98, allt för komplext och stort -03 ändrade de inriktning och fokuserade… detta ledde till Firefox (den idag näst största webbläsaren på marknaden) Apple utvecklade sin egen webbläsare -03 Opera (-96)

Teknisk beskrivning Dator med webbläsare Webbserver Internet
Användaren skriver in en URL – en webbadress i webbläsaren. Ett HTTP Request (en HTTP förfrågan) skickas över Internet till den webbserver som har just den adressen Webbservern som får ett HTTP request tolkar detta, letar reda på efterfrågad fil och returnerar denna till webbläsaren som frågade. Sidan visas i webbläsaren. Servern har gjort sitt för denna gång.

Webbsida efterfrågas Användaren skriver in en URL – en webbadress i webbläsaren. Ett HTTP Request (en HTTP förfrågan) skickas över Internet till den webbserver som har just den adressen Webbservern som får ett HTTP request tolkar detta, letar reda på efterfrågad fil och returnerar denna till webbläsaren som frågade. Sidan visas i webbläsaren. Servern har gjort sitt för denna gång.

Webbsida efterfrågas HTTP Request Användaren skriver in en URL – en webbadress i webbläsaren. Ett HTTP Request (en HTTP förfrågan) skickas över Internet till den webbserver som har just den adressen Webbservern som får ett HTTP request tolkar detta, letar reda på efterfrågad fil och returnerar denna till webbläsaren som frågade. Sidan visas i webbläsaren. Servern har gjort sitt för denna gång.

Webbsida efterfrågas HTTP Request Förfrågan processas Användaren skriver in en URL – en webbadress i webbläsaren. Ett HTTP Request (en HTTP förfrågan) skickas över Internet till den webbserver som har just den adressen Webbservern som får ett HTTP request tolkar detta, letar reda på efterfrågad fil och returnerar denna till webbläsaren som frågade. Sidan visas i webbläsaren. Servern har gjort sitt för denna gång.

Webbsida efterfrågas HTTP Request Förfrågan processas Efterfrågad sida returneras Användaren skriver in en URL – en webbadress i webbläsaren. Ett HTTP Request (en HTTP förfrågan) skickas över Internet till den webbserver som har just den adressen Webbservern som får ett HTTP request tolkar detta, letar reda på efterfrågad fil och returnerar denna till webbläsaren som frågade. Sidan visas i webbläsaren. Servern har gjort sitt för denna gång.

Webbsida efterfrågas HTTP Request Förfrågan processas Efterfrågad sida returneras Användaren skriver in en URL – en webbadress i webbläsaren. Ett HTTP Request (en HTTP förfrågan) skickas över Internet till den webbserver som har just den adressen Webbservern som får ett HTTP request tolkar detta, letar reda på efterfrågad fil och returnerar denna till webbläsaren som frågade. Sidan visas i webbläsaren. Servern har gjort sitt för denna gång. HTTP Response

Webbsida efterfrågas Webbsida visas HTTP Request Förfrågan processas Efterfrågad sida returneras Användaren skriver in en URL – en webbadress i webbläsaren. Ett HTTP Request (en HTTP förfrågan) skickas över Internet till den webbserver som har just den adressen Webbservern som får ett HTTP request tolkar detta, letar reda på efterfrågad fil och returnerar denna till webbläsaren som frågade. Sidan visas i webbläsaren. Servern har gjort sitt för denna gång. HTTP Response

Begrepp URL – Uniform Resource Locator
Protokoll Domännamn Katalog Fil

Protokoll Domännamn Katalog Fil Toppdomän

Protokoll Domännamn Katalog Fil Huvuddomän Toppdomän

Protokoll Domännamn Katalog Fil Subdomäner Huvuddomän Toppdomän

begrepp HTTP – Hypertext Transfer Protocol
Datorer kommunicerar med varandra med hjälp av protokoll Detta protokoll är speciellt framtaget för webben Huvuduppgiften är att överföra webbsidor mellan server och datorer med webbläsare HTTP – GET Vanlig förfrågan efter en webbsida HTTP – POST Skickar data vid förfrågan (exempelvis data från formulär)

begrepp IP-nummer – Unikt nummer för varje dator
Domännamn – Unikt ”smeknamn” som kan användas istället för IP-numret DNS – Domain Name System – Kan jämföras med en telefonkatalog innehållande alla ”smeknamn” och tillhörande IP-nummer

Märkspråk SGML – Standard Generalized Markup Language
HTML – Hyperttext Markup Language XML – eXtensible Markup Language XHTML – Extensible Hypertext Markup Language SGML – standardiserat märkspråk (ISO 8879) som tidigare låg till grund för flertalet ordbehandlingsprogram vilket då möjliggjorde export och import… för krångligt så utvecklarna på CERN tog en delmängd av detta märkspråk som bas när man utvecklade HTML HTML utvecklades i CERN och är basen till hela webben. Ett HTML-dokument beskriver ett dokuments struktur och logik och innehåller information. Webbläsaren tolkar detta dokument och presenterar det på det sätt som dess utvecklare har bestämt. Den senaste version av standarden är HTML 4.01. Innehåller en uppsättning fördefinierade och standardiserade ”taggar” som man kan använda. XML är även den sprungen ur SGML (-98), ett universiellt och utbyggbart märkspråk. Här finns inga fördefinierade taggar utan man specificerar sina egna! XHTML började som en omformulering av HTML i XML, därför anser många att det är en senare version av HTML. Men enligt de som standardiserar så är XHTML ett eget märkspråk. Det är ett striktare märkspråk än HTML och enligt de flesta det bättre alternativet… HTML och XHTML lever nu sida vid sida och de större webbläsarna hanterar båda formaten.

Innehåll, funktion och utseende
HTML-kod – Kod som styr strukturen av en webbsidas innehåll Stilmallar – Kod som styr sidans utseende JavaScript – Kod som styr en webbsidas beteende HTML - Vad är rubrik, vad är löpande text. Vilka bilder ska finnas mm Stilmallar – Styr färg, font, placering etc JavaScript – används till menyer, pop-up-fönster och annan interaktivitet All denna kod kan blandas på en och samma sida, men vanligtvis placerar man Stilmallarna i en separat fil. På detta sätt kan en stilmalsfil påverka utseendet på samtliga webbsidor i en webbsite.

html Hypertext – text som via hyperlänkar är förbunden med andra texter Uppmärkning sker med ”taggar”

HTML 4.01 Tre versioner: Strict Transitional Frameset
Document Type Defenition Standardiseringsorgan

stilmallar CSS – Cascading Style Sheets – Styr utseendet på ett strukturerat dokument – Exempelvis font, färg, storlek och placering Tre versioner: Inline Lokalt Globalt

Standardisering W3C – World Wide Web Consortium – Över 500 medlemmar. – Industrier, forskningsinstitut, standardiseringsorgan, regeringar… Standardiserar bland annat: HTML XHTML XML CSS

trender Statiska webbplatser  Databasdrivna
JavaScript  RIA (Flash, AJAX, Flex, Silverlight…) Web 1.0  Web 2.0 Stationär webb  Mobil JavaScript -> RIA och Web 1.0 -> Web 2.0 återkommer jag om

javascript Ett standardiserat skriptspråk Körs i webbläsaren
Baserar sig på DOM (Document Object Model) Kan användas till ”multimediaeffekter” och vid validering av data i formulär En av grundstenarna i AJAX ECMA International

Javascript - Exempel

RIA Rich Internet Application - RIA
Finesser och funktionalitet som vanliga program Kräver ingen installation (körs i webbläsare eller annan spelare) Arbetsfördelning mellan dator och server

AJAX Asynchronous JavaScript and XML (AJAX)
Webbteknik för ökad: - interaktivitet, hastighet, funktionalitet och användbarhet Baserar sig på: - XHTML (eller HTML), CSS, DOM, JavaScript och XMLHttpRequest Asynkron i detta sammanhang är att extra eller uppdaterad data efterfrågas och laddas i bakgrunden utan att påverka gränssnitt och beteende i den existerande webbsidan.

Flash Flash 1.0 (-96) - Ett vektorbaserat animeringsverktyg
Flash CS3 (-07) - Fullfjädrat utvecklingsverktyg för multimedia på webben Inte XHTML, JavaScript etc Kräver plugin: ”Flash Player”

Web 2.0 Tim O´Reilly -04 Nästa generation av webbtjänster och affärsmodeller på webben Användare bidrar Användare har kontroll Användbar och interaktiv design System interagerar } Enligt O´Reilly

Web 2.0 - exempel Web 1.0 Web 2.0 Ofoto Flickr Akamai BitTorrent
mp3.com Napster Britannica Online Wikipedia personal websites blogging screen scraping web services publishing participation content management systems wikis directories (taxonomy) tagging ("folksonomy") stickiness syndication Ofoto = Ladda upp bilder Flickr = Photo sharing… men också communityplattform, används flitigt som bildbank av bloggare Britannica Online = Ett uppslagsverk på nätet Wikipedia = dito men här bidrar användarna med innehållet Screen scraping = ett program som läser exempelvis en webbsida, plockar delar av innehållet och publicerar det i en annan sida Web Services = TFEs vädersida Directories (taxonomy) = Historia hamnar i historiemappen, Ekonomi i ekonomimappen… Tagging (”folksonomy”) = använda taggarna även till annat, att tagga upp innehållet så att användare lättare att hitta… stickiness = man vill att användare ska återkomma till webbplatsen syndication = man låter användaren prenumerera på innehåll, exempelvis via web feeds (RSS-feeds)

Mobil webb Möjligheter och begränsningar! Web 2.0 och RIA
3G och stöd för WLAN Mognad hos användare… och utvecklare! Java 2 Mobile Edition – J2ME Adobe’s Flash Lite Google’s Android Flash Lite

Länktips http://en.wikipedia.org (Allt möjligt!)
(HTML, CSS…) (W3C, HTML, CSS…) (Web 2.0)

HTML – vad är det och varför ska vi använda det
Och vad är XHTML

HTML Markeringsspråk (MarkUp Language) - strukturerar dokument för Webben (World Wide Web) Dokumentet delas upp i komponenter med hjälp av ”element” eller taggar – starttaggar och sluttaggar <p>Detta är ett stycke text</p> <h1>Detta är en rubrik – troligen med stor font</h1>

HTML beskriver bara strukturen hos dokumentet – inte hur det skall se ut på läsarens skärm.
Försök inte att layouta ditt HTML-dokument. Utseendet styrs i ett separat style-dokument – en .CSS-fil Det är browsern, skärmens upplösning och CSS-filen som slutligen bestämmer hur ditt dokument ser ut

HTML-dialekter Den HTML-standard som är aktuell idag är HTML 4 vilken publicerades Den finns i tre versioner HTML 4.0 strict – vilken enbart stödjer strukturella element – utseendet läggs helt och hållet i stilmallar (CSS) HTML 4.0 transitional eller ”loose” innehåller element som på sikt kommer att avvecklas HTML 4.0 frameset – tillåter layout genom att sidan delas upp i frames

XHTML XHTML - Extensible HyperText Markup Language I XHTML måste
man skriva alla elementnamn och attributnamn med gemener, man alltid använda sluttaggar, <hr></hr> eller <hr/> man sätta citationstecken eller apostrofer runt alla attributvärden. XHTML kan kombineras med CSS och JavaScript XHTML skapades genom att man översatte de tre DTD:erna i HTML 4.01 från SGML till XML. Man måste alltså inte kunna XML för att kunna använda XHTML

XHTML dialekter XHTML 1.0. publicerad januari 2000 och innehåller tre dialekter precis som HTML 4 - Transitional, Frameset och Strict XHTML Basic. publicerad december 2000 – avsedd som en minimal uppsättning av element för användning i exempelvis XHTML 1.1. publicerad i maj 2001 – är i stort sett samma sak som XHTML 1.0 Strict. Här finns alltså bara en variant - Strict

FILOSOFI I detta material kommer vi huvudsakligen att jobba med XHTML Basic och XHTML Strict Vi använder HTML-koden enbart för strukturering av dokumentet – inte för formgivning Vi skriver koden i generella editorer – undviker verktyg för utveckling av HTML-dokument Det är enkelt och kul med HTML

Notepad2 Gratis och bra

CoffeeCupHTML – en bland många

PINSAMT!

HTML-kod genererad av Word

Några HTML-skolor bland många
En fullständig beskrivning av standarden för HTML 4 (4.01) hittar du hos W3C Consortiet.

HTML – Lite kort om editorer
Word, Notepad eller Dreamweaver - Välj 2 och släng den tredje

Notepad2 Gratis och bra

CoffeeCupHTML – en bland många

PINSAMT!

HTML-kod genererad av Word

XHTML – Dokumentets grundstruktur
Body - head

Grundläggande dokument
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" <head> <title>Basdokument</title> </head> <body> <p>Hello world</p> </body> </html>

XML version Deklarationen
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="ISO "?> Skall alltid placeras överst i dokumentet före alla andra taggar

XHTML version <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " Anger vilken standard som dokumentet följer och var man kan hitta denna standard

HTML - taggen Sedan man angett DOCTYPE och XML standard så kommer det egentliga HTML – dokumentet omgivet av starttaggen <HTML> och sluttaggen </HTML> HTML – taggen innesluter taggarna <head>…</head och <body>…</body> <html xmlns=" xml:lang="en" lang="en”> HTML- taggen kan ha språkattribut XMLNS är referens till Extended Markup Language Name Space

HEAD Head-taggen markerar en sektion av dokumentet som innehåller overheadinformation – titel, sökord, författarnamn med mera Mellan body-taggarna finns det egentliga dokumentet

Ett mycket enkelt exempel

Validering

Lyckad validering ger en ikon som pris

En miss-lyckad vali-dering Samma fil – Vad är skillna-den?

HEAD – HUVUDET I huvudet hittar du information om dokumentets titel, sökord, referenser till stildokument och annan information som normalt inte visas av webbläsaren.

Head Ligger alltid under taggen <html>
Mellan starttaggen och sluttaggen kan elementen base link meta script style och title finnas

BASE Med elementet <base> kan man ange en basadress.
Bilden som finns på adress ” Kan enklare hittas med hjälp av basadressen ” och filnamnet ”bil.jpg”

Exempel - base <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" " <html xmlns=" <head> <base href=" ></base> <title>Elementet BASE</title> </head> <body> <p>Titta en bil</p> <p><img src="bil.jpg" alt="BIL"/> </p> <p> <a href=" src=" alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a> </p> </body> </html>

Link Elementet link används för att referera till externa resurser
Det kan finnas flera Link-element i ett html-dokument En vanlig användning är att ge en referens till .css filer d.v.s filer som information om hur dokumentet skall se ut på skärmen

LINK – ett exempel <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" " <html xmlns=" <head> <link rel="stylesheet" href="stajl.css" media="screen" type="text/css" /> <title>Elementet LINK</title> </head> <body> <h1>MIN BIL</h1> <p><img src="bil.jpg" alt="BIL"/> </p> <p>Titta en bil</p> </body> </html>

LINK – grundläggande Attribut
href – specificerar var resursen finns - href="stajl.css" Det finns ett antal typer av fördefinierade länkar Alternate, Stylesheet, Start, Next, Prev, Contents, Index, Glossary, Copyright, Chapter, Section, Subsection, Appendix, Help och Bookmark. Media – specificerar målmedium – screen är det som gäller om ingenting anges (default) - media="screen" andra media är tty, tv, projection, handheld, print, braille, aural and all. type anger mediatyp – type="text/css" Det kan exempelvis vara text/css eller text/javascript.

LINK – ett exempel <?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" " <html xmlns=" <head> <link rel="stylesheet" href="stajl.css" media="screen" type="text/css" /> <title>Elementet LINK</title> </head> <body> <h1>MIN BIL</h1> <p><img src="bil.jpg" alt="BIL"/> </p> <p>Titta en bil</p> </body> </html>

META Meta elementet används för att specificera data kring dokumentet – vem som är författare, nyckelord, övergripande beskrivningar av dokumentet med mera KEYWORDS – nyckelord som kan användas av sökmotorer AUTHOR - författarnamn DESCRIPTION – kort beskrivning – visas av sökmotorn som sammanfattning av dokumentet DISTRIBUTION - specificerar om dokumentet är globalt eller regionalt

Meta – exempel <meta name="description" content=”Grundkurs i hur man skriver XHTML-kod” /> <meta name="keywords" content="xhtml, css" /> <META name="author" content=”Ulf Holmgren”/> <META name="copyright" content="© 2007 TFE.”/> <META name="date" content=” ”/>

Meta - exempel <-- For speakers of US English -->
<META name="keywords" lang="en-us" content=”color, New York"> <-- For speakers of British English --> <META name="keywords" lang="en" content=”colour, London">

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" " <html xmlns=" <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>META-ELEMENT</title> <meta name="autor" content="Ulf Holmgren" /> <meta name="Keywords" content="HTML, CSS, easy" /> <meta name="Description" content="This is an easy course in XHTML" /> </head> <body> … </body> </html>

Script och Style Elementet Style används för att bädda in information om exempelvis fonter, färger, marginaler e.t.c. Denna information bör läggas i ett separat dokument .css Elementet Script används för att bädda in script som styr beteende om sidan – detta behandlas inte i detta sammanhang

Title Elementet Title används för att identifiera dokumentet – titeln brukar visas övers i det fönster där dokumentet visas <title>XHTML – Title Tag</title> Det får bara finnas en title-tag i dokumentet

TEXT – GRUNDERNA Det huvudsakliga innehållet i XHTML-dokument är text – brödtext, rubriker, avgränsande linjer

SAMMANfattning Det här avsnittet handlar om <p> brödtexten
<H1> till <H6> rubriker av olika dignitet <br> ny rad utan att skapa ett nytt stycke Speciella tecken % & Förstärkning <em> och <strong>

<p> P markerar ett stycke (paragraph) I stycket kan det finnas text och bilder samt inlinekod P används för att strukturera texten – att dela upp den i stycken – man skall inte användas för att formge dokumentet. Detta skall istället göra i ett separat style-dokument Webbläsarna brukar lämna en tom rad mellan dokumentets stycken Får finnas innuti exempelvis följande element: ADDRESS, BLOCKQUOTE, DD, DIV, TD, TH

<br> och Den text som skrivs in mellan starttaggen <p> och sluttaggen </p> betraktas som ett flöde av asciitecken – de radbrytningar som du skriver i editorn kommer inte att visas i webbläsaren. Extra mellanslag och radbrytningar måste markeras med taggen <br> för radbrytning eller

<br>, och ä
<body> <p>Alternativ 1: Titta en bil Den är jättefin </p> <p>Alternativ 2:<br/>Titta en bil <br/> den är jättefin</p> </body>

Andra specialtecken <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" " <html xmlns=" <head> <title>P-ELEMENT</title> </head> <body> <p>¢ cent<br/> ± plus-minus<br/> © copy <br/> µ mikro<br/> £ pund</p> </body> </html> MER:

<h1> - <h6> Rubriker
Rubriker finns av sex ”storlekar” Normalt är <h1> störst och <h6> minst, men det styr du i ditt stylesheet <h1>Rubrik 1</h1> <h2>Rubrik 2</h2> <h3>Rubrik 3</h3> <h4>Rubrik 4</h4> <h5>Rubrik 5</h5> <h6>Rubrik 6</h6>

Att förstärka delar av texten med <em> och <strong>
… <body> <p>Detta är en himla rolig historia:<br/> - har du <strong>julgransfot</strong><br/> - ja de har jag<br/> - hur får du då på dig <em>byxorna</em></p> <p> </body>

Citat <blockquote> och <q>
Att markera citat i sin HTML-kod är att sätt att underlätt enhetlig formattering samt att underlätta för synskadade att rätt uppfatta texten De element som används är blockquote och q

Citat – ett exempel <body>
<p>Om man Googlar på <q>Roliga citat</q> så kan man hitta följande om Bill Gates</p> <blockquote cite=" 640 kB borde vara tillräckigt för vem som helst</p> </blockquote> <p>och det kan man ju tyckas vara roligt så här i efterhand</p> </body>

Ytterligare element för logisk formattering
<p>definition - <dfn>tjur=kopappa</dfn> </p> <p>kod - <code>u=sin(2*pi*200*t</code> </p> <p>exempel - <samp>exempel</samp></p> <p>tangentbord - <kbd>knatter knatter knatter</kbd> </p> <p>variabel - <var>svaret=5</var> </p> <p>citat - <cite>two bee or not two bee</cite> </p> <p>en förkortning - <abbr>t.ex.</abbr> </p> <p>akronym - <acronym>XHTML</acronym> </p>

Addresser <address>
Kontaktperson för XHTML-föreningen <br/> Eva Andersson<br/> Skogsstigen 8<br/> Umeå </address>

Preformatterad text <p> Detta stycke är oformatterat
och omgivet bara av p- taggarna. Läsaren kommer inte att bry sig om radbrytningar om det fungerar som jag tror att det fungerar, men det tror jag att jag tror att det gör</p> <pre width="20"> Detta block kommer att vara maximalt 20 tecken brett och radbrytningarna kommer att finnas kvarom det fungerar som jag tror att det fungerar, men det tror jag att jag tror att det gör </pre>

Div och span är Containrar som används tillsmmans med .CSS
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " <html xmlns=" xml:lang="en"> <head> <title>Div and span ELEMENT</title> <link rel="stylesheet" href="stajl2.css" media="screen" type="text/css" /> </head> <body> <div class="kontainer1"> asd ssdlk ss sfk jkk aj s </div> <div class="kontainer2"> <p> asd ssdlk <span>ss</span> sfk jkk aj s </p> <div class="kontainer3"> </body> </html> body { background-color: #def; margin-left: 30px; margin-top: 20px; } p span {color: green} .kontainer1 {font-family: verdana, arial, sans-serif; color: black;} .kontainer2 {margin-left: 20px;color: yellow;color: blue;} .kontainer3 {margin-left: 30px;color: green;}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
" <html xmlns=" xml:lang="en"> <head> <title>Employee Profile</title> <style type="text/css"> h1 span {color: red} p span {color: green} </style> </head> <body> <h1><span>John Smith</span> Is Employee Of The Month</h1> <p><span>John Smith</span> has been a Project Manager for 10 years.</p> </body> </html>

ATT STYRA UTSEENDE HOS TEXTEN
Det finns ett antal taggar som vi inte ska använda

HTML – används för logisk formatering inte för utseende
I HTML-dokumentet skall du formattera logiskt Dessa ord ska framhävas Detta är en tabell Detta är en länk Detta är en rubrik MEN du sak inte använda HTML för att styra utseendet hos sidan – du ska inte ange kursiv stil, stilstorlek eller font i HTML – Lämna detta till stilmallen – CSS-dokumentet

<h1>Formattering som vi inte ska använda</h1>
<h3>b (fet stil- andra raden)</h3> <p> ldf lsdfjk lf gslf slfk sfdl sfl slfkslfkslfslflskfslkfg<br/> <b>sdkl fjöglksdfjgsldfkjgöslgk</b> <h3>big - andra raden</h3> <big>sdkl fjöglksdfjgsldfkjgöslgk</big> <h3>i - kursiv stil - andra raden</h3> <i>sdkl fjöglksdfjgsldfkjgöslgk</i> <h3>small - andra raden</h3> <small>sdkl fjöglksdfjgsldfkjgöslgk</small> <h3>sub - delar av raden</h3> fjöglksdfjgs<sub>sdkl lgk</sub>ldfkjgös <h3>sup - delar av raden</h3> fjöglksdfjgs<sup>sdkl lgk</sup>ldfkjgös <h3>tt - tele type - andra halvan av raden</h3> ldf lsdfjk lf gslf slfk <tt>sdkl fjglksdfjgösldfkjgöslgk</tt>

LÄNKAR och ytterst lite om bilder
Hela idén med HTML är att kunna hoppa mellan dokument

En länk åstadkommer att exempelvis en ny fil öppnas i det aktuella fönstret eller (eventuellt) i något annat fönster Länken består av en startpunkt – ett ankare Ett mål – en target och En destination När du klickar på länken kommer du att flyttas till en annan plats –en annan fil, en annan plats i det aktuella dokumentet eller exempelvis till din mail-hanterare.

Tre varianter av länkar
<p> <a href="tfn_lista.html">Telefonlista i separat dokument</a> </p> <a onclick="window.open(this.href); return false;" href="tfn_lista.html">Telefonlista i nytt fönster</a> <p><a href="#tfnlista">Telefonlista i detta dokument</a></p> <p>lsd las dlakjs dlad las la lasjd laksj lask lj d flaks dlasj dlaskjd lasj la dlaj dlasd laksdj lksdjlksdjalksd jasklj dlk d</p> <div id="tfnlista"> <ul> <li> - Anders Andersson </li> <li> - Bertil Bertislsson </li> <li> - Caesar caesarsson </li> </ul></div>

Tre andra typer av länkar och här dyker det uppe en bild
<body> <p> <a href=" <a mail till Nisse</a> </p><br/> <a href=" SRC="bil6.jpg" ALT="bild på bil"></a><br/>  </body>

ATT SKAPA TABELLER Tabeller skall endast användas om man verkligen vill presentera något i tabellform Använd INTE tabeller för att strukturera hela sidor

Så här ser grundstrukturen ut för en tabell
<table> <caption>Tabellrubrik</caption> <tr> <th>kolumn <br/> rubrik 1</th> <th><h3>kolumn<br/>rubrik 2</h3></th> </tr> <td>cell 11</td> <td>cell 12</td> <td>cell 21</td> <td>cell 22</td> <td>cell 31</td> <td>cell 32</td> </table>

border cellpadding cellspacing summary width
Anger bredden på ramen runt varje element – angivet i pixlar. cellpadding Anger hur mycket ”luft” det skall vara mellan cellens innehåll och ramen cellspacing Anger hur mycket luft det ska vara mellan ramen och nästa cell. summary En text som beskriver tabellens innehåll – texten är inte synlig på skärmen, men kan ev. finnas med om sidan presenteras i talade medier. width Anger tabellens totala bredd i pixlar eller som procent av det fönster där den ligger.

Border

Cellpadding

Cellspacing

Frame void: Inga sidor. above: Övers. below: Nederst.
hsides: Uppe och nere. vsides: Höger och vänster. lhs: Vänster. rhs: Höger. box: Runt om. border: Runt om.

RULE none: default rows: cols: all:
<table border="1" frame="below" rules="rows" summary="Tabell"> none: default rows: cols: all:

Ibland kan det vara bra att strukturera sig lite
ATT SKAPA Listor Ibland kan det vara bra att strukturera sig lite

Ordnade listor, oordnade listor och definitionslistor
LISTANS UTSEENDE STYRS I CSS-filen

Webbteknik En kort introduktion.

Liknande presentationer

En presentation över ämnet: "Webbteknik En kort introduktion."— Presentationens avskrift:

Liknande presentationer

Om projektet

Kontakta oss

Logga in

Logga in via sociala nätverk:

Webbteknik En kort introduktion.

Liknande presentationer

En presentation över ämnet: "Webbteknik En kort introduktion."— Presentationens avskrift:

Liknande presentationer

Om projektet

Kontakta oss