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, Prov 1 v 46-50: CSS - formatering av text och bild, dreamweaver v 51: Repetition, Prov 2 v 52-1: Jullov v 2-8: HTML & CSS - praktiskt arbete v 9: Sportlov v 10: HTML & CSS - praktiskt arbete v 11-15: APL v 16: Påsklov v 17-18: HTML & CSS - praktiskt arbete v 19-22: CMS-hantering, MAMP, Wordpress
Struktur Innan vi börjar prata om kodning: Planering och struktur. Sjukt viktigt.
Struktur Något som är extremt viktigt är att ha en bra struktur på alla mappar och dokument. Vid arbete med stora webbsajter blir det helt omöjligt att arbeta om det inte finns en vettig struktur. Dessutom är det väldigt lätt att få stora problem med länkning mellan olika dokument, bilder etc. om man inte har en bra struktur redan från början.
Struktur - namngivning av dokument När man arbetar med webb måste man komma ihåg några saker vid namngivning av filer man arbetar med. En fil som heter "Index.htm" inte är samma sak som filen "index.htm". Använd *inte* mellanslag i filnamnen. Använd inte siffror eller åäö i filnamnen. Döp filerna ordentligt så blir det lätt att hitta dom, vilket förenklar vid felsökning. Exempel på ett bra filnamn: "stockholmsbilder.htm" Exempel på ett dåligt filnamn: "Mina Läckra Bilder Från Stan den 12:e augusti.htm"
Struktur - namngivning av dokument Hur många fel hittar du i filnamnet? "Mina Läckra Bilder Från Stan den 12:e augusti.htm"
Struktur - namngivning av dokument Jag hittar 15: "Mina Läckra Bilder Från Stan den 12:e augusti.htm"
Google skills
Google skills Att webbutveckla är att skriva kod, bildbehandla och hantera filer. Men minst lika viktigt är att kunna hitta information om hur man gör det ena eller andra. Det mest färska informationen finns alltid på webben - långt innan den kommer i en tidning eller bok. Därför är det viktigt att kunna använda Google. Google svarar snällt på det mesta, men det viktigaste är att ställa "rätt fråga" annars kommer svaren bara bli förvirrande. Att skriva "lägga text på rätt ställe" kommer att ge mycket sämre resultat än att skriva "positionera text in css-fil" som i sin tur kommer ge sämre resultat än att skriva "position text in css" (dvs på engelska).
Google skills Engelska! Engelska! Engelska! Trist nog är den bästa, mest färska informationen på engelska. Alltså: Plugga engelska. Och en sak till: Plugga mer engelska.
Google skills One more thing. Study english.
Planering
Planering Innan man överhuvudtaget börjar tänka på att skriva kod så ska man planera hur webbsajtens olika sidor ska sitta ihop. En bra idé är att använda ett träddiagram för att få en vettig överblick. Det enklaste sättet att göra sånt diagram är med papper och penna. En annan bra idé är att göra en grovskiss av sidans layout. Det är mycket enklare att sudda bort en felaktigt placerad bild/knapp från ett papper än att göra det i kod. Alltså; innan kodning ska du alltid jobba med papper och penna.
Planering Ett diagram och en skiss behöver inte vara något märkvärdigt alls. Det viktiga är att man själv förstår vad man ska göra. Men: Det ska alltid finnas en skiss och ett diagram.
HTML - Webbsidor En webbsida är skriven i HTML. HTML betyder "HyperText Markup Language". Hypertext är text med hyperlänkar, alltså länkar som tar dig till andra sidor när du klickar på dem. Markup innebär att man tar vanlig text och märker upp denna så att webbläsaren ska förstå vad det för text. Man märker upp vad som är rubrik, underrubrik, stycke, var bilder ska sitta och så vidare. Language betyder som bekant språk. :)
HTML - Webbsidor De stora fördelen med HTML är att det inte ställer några speciella krav på maskinen det ska visas på. En webbsida kan visas lika bra på en mobiltelefon som på en Windows-PC med 30"-skärm (nästan i alla fall - vi kommer prata mer om det...).
HTML - Taggar HTML-kod består av taggar som sitter före och efter en text, bild eller liknande. Taggar beskriver för webbläsaren vad det som är "uppmärkt" är för något. Vi tar taggen "p" som exempel: <p>textstycke. Mer eller mindre långt.</p> Här berättar vi för webbläsaren att den ska visa ett stycke text, helt enkelt. P i taggen betyder "Paragraph", alltså engelska för "Stycke".
HTML - Taggar Taggar är alltid i par. En innan och en efter det man märker upp. Det ska alltid finnas en starttagg och en sluttagg. Det som ligger mellan start- och sluttagg är det som kommer påverkas av taggen. Man ser enkelt skillnad på start- och sluttagg; Sluttaggen innehåller ett slash-tecken: / Alltså: <p> </p> Starttagg Sluttagg
HTML - Taggar Här är väldigt enkel sida, som den ser ut i kod och som den ser ut i en webbläsare: Den ser väl inte helt obegripligt ut, eller hur?
HTML - Grundkod Grunden i ett html-dokument ser alltid ut på följande sätt: <html> <head> <title> </title> </head> <body> </body> </html>
HTML - Grundkod Vad betyder då dessa taggar? Vi går igenom: <html> <head> <title> </title> </head> <body> </body> </html> Överst hittar vi taggen <html> Den berättar helt enkelt att det som följer är ett htmldokument. Sist i dokumentet ligger avslutningstaggen</html> som berättar att dokumentet tar slut.
HTML - Grundkod Vad betyder då dessa taggar? Vi går igenom: <html> <head> <title> </title> </head> <body> </body> </html> Nästa tagg är <head>. Den innehåller vanligtvis inte så mycket, men vanligtvis finns det alltid en annan tagg i <head>, nämligen <title>taggen. När en tagg ligger inuti en annan tagg såhär, brukar man prata om nästlade taggar.
HTML - Grundkod Vad betyder då dessa taggar? Vi går igenom: <html> <head> <title> </title> </head> <body> </body> </html> Taggen <title>är såklart dokumentets titel. Titeln är det som syns i fönsterlisten på webbläsaren.
HTML - Grundkod Vad betyder då dessa taggar? Vi går igenom: <html> <head> <title> </title> </head> <body> </body> </html> Efter <head>-taggen kommer <body>-taggen. I <body> finns i princip allt innehåll på webbsidan, som bilder, text och filmer.
HTML - Grundkod Lägg märke till indragen i texten. Detta kallas "indentering". Poängen med att strukturera texten på det här sättet är att Det blir mycket enklare att felsöka koden. Ta för vana att alltid indentera din kod. Indentering av kod gör man genom att trycka på tabbtangenten. I många editorer sker detta automatiskt. <html> <head> <title> </title> </head> <body> </body> </html>
HTML - Grundkod De flesta taggar kan ha något som kallas attribut - tillbehör till taggen, skulle man kunna säga. Exempel: Taggen <a> </a> (som betyder anchor) har vanligtvis attributet href, som betyder hypertextreferens, det vill säja själva målet för länken - vanligtvis en annan webbsida. Ett attribut skrivs i själva taggen, mellan klamrarna. I det här exemplet blir det alltså <a href></a> tagg attribut Attribut brukar vanligtvis innehålla någon form av värde. I exemplet <a href> så skulle värdet kunna vara tex. facebook.com och då skulle hela starttaggen se ut såhär: <a href= http://facebook.com >
HTML - Grundkod För att göra en komplett länk till facebook använder man följande kod: <a href= https://www.facebook.com >Gå till Facebook</a> Alltså först starttagg: <a href= https://www.facebook.com > Sedan det som ska bli själva länken: Gå till Facebook Sen stänger man man taggen med: </a> Svårare än så är det inte!
HTML - Grundkod En bra idé är att börja med en grundsida eller mall som man sedan kopierar till alla sidor man ska göra. Den bör se ut så här: <!doctype html> <html> <head> <title> </title> <meta charset= utf-8 /> </head> <body> </body> </html> Lägg märke till att koden är indenterad. Det gör att det blir rätt enkelt att snabbt se att tex taggen <head> innehåller taggarna <title> och <meta>. Det är en del taggar vi inte talat om än, men lugn, vi kommer dit.
HTML - Grundkod Dags att läsa! Läs igenom sid 9-50. Svara på frågorna på sid 18-19 och på sid 49. Skriv svaren i ett Word-dokument och lämna in via på thomaslundberg.se. Gör sedan övningarna på sid 49 och 50. Du behöver inte göra övningarna på sid 19.