HTML & CSS för nybörjare

Den som vill skapa webbsidor kommer förr eller senare i kontakt med HTML. Därför kommer vi tillsammans erövra den vackra HTML-världen i de kommande videoträningarna. Steg för steg kommer ni att se vad det är för något med detta språk och hur man kan skapa webbsidor med det i kombination med stylesheets. Men i början finns det en fråga: Vad är det egentligen med HTML och stylesheets? I slutet av denna videoträning kommer ni också att få reda på vilken programvara ni behöver för att skapa och testa webbsidor.

I motsats till programmeringsspråk som till exempel Java kan man snabbt få de första resultaten i HTML utan större förberedelser. Allt du behöver i början är en redigerare och en webbläsare. I den här videoundervisningen kommer du att skapa ditt första HTML-dokument och få en utmatning direkt i webbläsaren. Och på köpet kommer du att lära dig hur HTML-dokument, alltså webbsidor, är strukturerade och vilken grundstruktur de följer.

Sammanhanget mellan begreppen element, tagg och attribut känner ni redan från den första delen av denna serie. Nu handlar det om hur dessa saker praktiskt kan användas i HTML-dokument. För att avsluta denna video-träning kommer ni sedan att lära er hur ni kan kontrollera er HTML-kod för syntaktisk korrekthet.

Era webbplatser kommer säkert inte bara att bestå av bilder, utan även av texter. Och texter bör, enbart för läsbarhetens skull, struktureras på ett vettigt sätt. För detta har HTML många element tillgängliga. I denna videoundervisning presenteras de viktigaste strukturelementen för text. Dessutom kommer ni att lära er hur man maskerar HTML-specifika tecken och hur man kan skriva ut programlistningar.

För att uppnå en bra läsbarhet av texter krävs en förnuftig formatering. Och detta sträcker sig bortom ren struktureringselement som rubriker och textavsnitt. I HTML kan man till exempel markera citat och framhäva enskilda avsnitt fett eller kursivt. Den nödvändiga verktygen för detta tillhandahåller den här videoundervisningen.

Element som du kommer att stöta på igen och igen i HTML är listor. Detta gäller inte bara för att-göra-listor och kontaktuppgifter, utan även för att definiera menyer. Listor spelar alltså en mycket central roll i HTML. Tillräcklig anledning att titta närmare på dem. I denna videoinstruktion kommer du att lära dig alla listvarianter som HTML har att erbjuda. Det handlar om punktlistor, numrerade listor, definitionsligor och menyer. Dessutom får du tips om hur du optiskt anpassar listor vid behov.

Tabeller spelar fortfarande en viktig roll på webbplatser. Detta gäller dock endast när det gäller presentation av data. När det inte fanns något CSS eller när detta inte riktigt stöddes av webbläsarna användes tabeller även för ett helt annat ändamål: att implementera layouter. Man placerade de olika sidoelementen inuti tabellcellerna. Layouttabell-monstren som följde av detta tillhör nu lyckligtvis det förflutna tack vare CSS. Idag används tabeller inom webbdesign enbart för det de egentligen är avsedda för: att tydligt presentera data.

Stämningsfullt utformade tabeller behöver inte nödvändigtvis bestå av ett identiskt antal celler inom en tabellrad. I denna videoträning visas hur du kan koppla samman tabelceller. I den andra delen får du lära dig lite om tabellens beskrivning. Denna aspekt är viktig eftersom det så att säga genast kan visa besökarna vilka data det slutligen handlar om. Videoträningen avslutas med en detaljerad titt på utformningen av tabeller i HTML. Just på detta område har det hänt mycket jämfört med de tidigare HTML-versionerna.

Nästan ingen webbplats klarar sig utan grafik. Inte konstigt att ämnet grafik spelar en viktig roll i denna serie. I den här och kommande videoträningarna kommer vi att visa hur ni kan infoga grafik i era webbplatser. Men i början står en annan aspekt i fokus: Vilka bildformat är lämpliga för användning online? I den andra delen handlar det sedan om hur man kan referensbilda sökvägar.

Hur man i princip refererar till bilder visades i den föregående delen. Men det är långt ifrån slutet när det gäller bilder. Faktum är att bilder kan beskrivas närmare med hjälp av passande attribut. Det är vad det handlar om i början av den här videon. I den andra delen beskrivs hur bildtexter kan implementeras med hjälp av HTML5-syntax.

Saltet i internets soppa är möjligheten att koppla samman innehåll med varandra med hjälp av hyperlänkar. Om dessa hyperlänkar inte fanns, skulle internet i sin nuvarande form vara otänkbart. Vilka alternativ HTML erbjuder dig när det gäller hyperlänksdefinitioner kommer du att få reda på i denna och nästa videoutbildning.

HTML erbjuder betydligt fler möjligheter när det gäller hyperlänkar än vad som visades i den tidigare videoundervisningen. Till exempel kan du definiera e-postreferenser och erbjuda filer för nedladdning. Dessa och andra hyperlänkvarianter kommer du att lära dig i denna videoundervisning.

För att förutse det: Särskilt i HTML5 har formulären tagit ett kvantdop. Tack vare det stora antalet nya fälttyper kan mycket intressanta formulär skapas. Dessa nya möjligheter kommer ni naturligtvis att få lära er. Men i denna videoserie börjar vi med de nödvändiga verktygen som behövs för att definiera formulär. I början handlar det om att skapa enradiga inmatningsfält. Ni kommer att se hur dessa kan definieras, hur man kan förbelägga dem med värden och ställa in dem som obeskivbara. Likaså kommer ni att få lära er att definiera lösenordsfält. Det är trots allt en fälttyp som man kan ha nytta av då och då.

I den här videon lär ni er att känna till fler fälttyper, med vilka ni kan utrusta era formulär. Mer specifikt handlar det om rullgardinsfält, radioknappar och kryssrutor. Alla dessa är viktiga element som man ofta behöver i formulär. Tillräckligt skäl alltså att ta en närmare titt på dessa och andra element.

Med HTML5 har det också och särskilt med avseende på formulär hänt en hel del. Tillräckligt skäl att ta en noggrann titt på de många nya formulärfunktionerna som nu går att använda. För det är nog med tråkiga inmatningsfält. Äntligen går det också att definiera skjutreglage, datumfält osv. - och det helt utan att använda JavaScript.

Insteg in die Welt der HTML5-formulärer har träningsvideon banat väg för. Men slutet på tunneln har ännu inte nåtts. Faktum är att HTML5 har mycket mer att erbjuda på detta område.

I HTML5 finns förutom de presenterade fältyperna även många andra intressanta aspekter. På ett mycket enkelt sätt kan man nu till exempel implementera en autofyllningsfunktion för formulärfält i stil med Google. Dessa och andra saker visas i denna videohandledning.

Den som sysslar med HTML5 kommer inte ifrån ämnet semantik. Ni kommer att lära er de viktigaste elementen som HTML5 erbjuder i denna och kommande videokurser, med vilka ni kan strukturera dokument på ett ordentligt sätt. Faktum är att denna logiska struktur är ovärderlig om man vill framtidssäkra sina webbplatser.

HTML5 introducerar många nya strukturelement. Vilka dessa är i grund och botten har redan visats i den föregående videoträningen. Nu handlar det om att praktiskt använda dessa element. För det är dessa element som ansvarar för den semantiska strukturen av dokumenten. I denna videoträning kommer ni främst att lära er de två elementen article och section. Dessa element skapar den grundläggande strukturen för HTML-dokument. I slutet av denna video kommer vi också att ta en titt på skillnaderna som finns mellan div, article och section.

I HTML5 kan dokument inte bara delas upp i artiklar och sektioner. Faktum är att det finns många ytterligare element som header, footer & Co. för en semantisk strukturering. Dessa är definitivt värda att granskas noggrannare.

I den här sista videoutbildningen i semantik-element-serien kommer ni att lära er ytterligare strukturelement. Faktiskt erbjuder HTML5 också element för navigationsområden, marginaler och för sammanfattningar.

I tidigare versioner av HTML var det en mardröm att bädda in multimedia. Med en kombination av object- och embed-element försökte man få in videor och ljud på webbplatsen. Det var tveksamt om den inbäddade videon verkligen gick att spela upp. Även inom detta område har det skett en hel del förändringar i HTML5.

Hur man inkluderar videor har ni sett. Nu är videor naturligtvis inte allt man kan presentera för sina besökare på webbplatsen. I denna videoträning beskrivs därför vilka alternativ HTML5 erbjuder dig när det gäller att inkludera ljudfiler och Flash-filmer. För även dessa saker måste man ibland visa på sin sida.

Ramar finns inte längre i HTML5. Deras namne, iFrames, har dock lyckats ta sig in i den nya HTML-eran och finns med i HTML5. Medan klassiska ramar delar upp en sida i oberoende områden, kan olika resurser bäddas in i webbsidor med hjälp av iFrames.

HTML är till för att strukturera innehållet. När det gäller att designa sidan, är det Cascading Stylesheets (CSS) som gäller. Först med kombinationen av CSS och HTML är det möjligt att skapa attraktiva webbsidor från en tråkig HTML-struktur. Det är därför tillräckligt att ta en närmare titt på CSS.

Ett begrepp som du kommer att stöta på gång på gång i samband med CSS är "selektorer". Med dessa selektorer definieras till slut de element som ska formateras med hjälp av CSS. I denna videohandledning kommer du att få lära dig de första selektorerna. Du kommer att introduceras till element-, ID- och universalselektorer. Dessa kommer du att använda varje dag när du designar dina webbsidor med CSS.

Några selektorer presenterades i den föregående videoundervisningen. Css har naturligtvis många andra selektorer att erbjuda.

I den här sista selektorröstutbildningen presenterar jag en mycket speciell form av selektorer för er. Dessa är så kallade pseudoklasser och pseudoelement. Det är sådana selektorer som inte refererar till specifika HTML-element, utan skapas av utdataenheten.

I detta och de kommande video-träningarna kommer jag att introducera de viktigaste CSS-egenskaperna för er. Det handlar inte om att ge er en CSS-referens här, utan snarare att ge er en känsla för vad som är möjligt med CSS. Vi börjar här med textformatering. I den här video-träningen kommer jag att presentera alla de saker som direkt har att göra med så kallade teckensnitt. Observera att det finns ytterligare egenskaper när det gäller textformatering som kommer att visas i nästa video-träning.

Genom de CSS-egenskaper som presenteras i denna videohandledning kan texter och tecken justeras optiskt. På så sätt kan till exempel avstånden mellan enskilda bokstäver ändras och texter kan justeras. Även dessa egenskaper hjälper er att presentera texter på ett tilltalande sätt.

Naturligtvis får vi inte heller sakna färgdefinitioner och grafiska bakgrunder i CSS. De motsvarande egenskaperna presenteras i denna videoträning. För faktum är att CSS har många möjligheter att erbjuda, särskilt på detta område. Det går inte bara att definiera färger och bilder. Det är också möjligt att använda sig av upprepande bakgrundsbilder.

Speciellt när det gäller att formge webbsidor kommer du att stöta på definitionen av yttermarginaler och avstånd. I de senaste videoträningarna i denna serie kommer för övrigt ett omfattande exempelprojekt att genomföras, där användningen av dessa och andra CSS-egenskaper praktiskt visas.

CSS har några intressanta egenskaper för stycken och block av text som jag inte vill undanhålla er. På så sätt kan ni till exempel justera stycken av text till vänster och höger.

När det gäller ram, tänker de flesta förmodligen först på tabeller. Och faktiskt spelar ramar en viktig roll i samband med tabeller. Men genom CSS kan även andra element utrustas med ramar. Och hur dessa ramar till slut ser ut kan också explicit bestämmas genom CSS-definitioner.

Hur man definierar listor vet ni förmodligen redan. Det visades utförligt i ramen för denna serie. Snygga listor är dock inte alltid särskilt chic från början. För att de ska se tilltalande ut finns det motsvarande CSS-egenskaper. Vilka dessa är och hur man använder dem får ni reda på i denna video-träning. I den andra delen handlar det sedan om så kallade räknare, med vilka även mer komplexa numreringar kan genomföras.

När det handlar om att designa webbsidor kommer det s.k. boxmodellen att vara er ständiga följeslagare. För det är över detta som man i slutändan bestämmer hur och var element placeras.

För att kunna positionera element på önskade platser inuti webbsidan måste ni använda specifika CSS-egenskaper.

I den föregående videoutbildningen nämndes principen om floating kort. Ämnet är emellertid så komplext att vi här ska ta en närmare titt på detta floatande. Det är faktiskt ett avgörande koncept inom CSS. Endast om man förstår detta ämne kan man faktiskt skapa webbsidor.

I de tidigare videoträningarna har grunderna för att arbeta med HTML och CSS presenterats. Nu ska naturligtvis de första frukterna skördas. I de kommande videoträningarna kommer en exempelwebbplats därför att byggas upp steg för steg. I denna videoträning får ni dock först lära er de olika layoutvarianterna. Valet av lämplig layoutform bör alltid vara det första ni tänker på när ni designar en webbplats.

Jag utgår från en typisk kolumnlayout i vårt praxisprojekt. Innan jag presenterar detta projekt live och i färg vill jag visa er konkret hur ni själva kan implementera kolumnlayouter. Fokus kommer att ligga på två- och tresidiga layouter, eftersom dessa fortfarande utgör grunden för de flesta webbsidor.

I de följande videokurserna kommer jag att visa er hur man steg för steg implementerar en webbdesign-layout. Det finns olika tillvägagångssätt för detta. Ofta skapas layouterna i Photoshop. De olika sidoelementen klipps sedan ut och sätts ihop som en webbsida med hjälp av CSS och HTML. Samma metod används även här. Dock använder jag det gratis tillgängliga programmet GIMP istället för Photoshop. De beskrivna stegen kan dock även följas i Photoshop.

De första stegen mot det egna layoutet togs i den föregående video-träningen. Självklart saknas fortfarande många element. Dessa kommer att läggas till i den här video-träningen. När layouten sedan är klar, fortsätter man med att skära ut, den så kallade "slicen". Detta är slutligen det steg genom vilket det blir möjligt att praktiskt implementera den skapade designen med hjälp av HTML och CSS.

Ni du har skapat layoutet. Nu går vi vidare med dess praktiska implementering. I denna videohandledning kommer vi tillsammans skapa webbplatsens HTML-grundstruktur.

Grundstrukturen av sidan är på plats, men den är ännu ganska spartansk. I denna videouppbildning kommer innehållet på sidan att utökas ytterligare. Fokus ligger för närvarande på menyn som ligger högst upp på sidan. Efter det kommer höger- och undermenyn.

En avgörande aspekt för en visuellt tilltalande webbplats är naturligtvis dess skriftbild. Under den här serien har ni redan lärt er vilka möjligheter HTML och CSS ger er när det gäller att designa texter. I den här videoupplevelsen kommer dessa att användas för att göra sidan mer attraktiv. Vi kommer för övrigt inte bara ägna oss åt de klassiska varianterna. Nyckelordet för att använda "exotiska" typsnitt är @font-face.

Vanligtvis bör man ge sina besökare möjligheten att kontakta en. I det enklaste fallet antecknar man ett telefonnummer och/eller e-postadress. Det kan man göra på det sättet, men det är inte särskilt bekvämt för besökarna. Därför kommer vi i den här videoutbildningen att skapa ett formulär genom vilket besökarna lätt kan komma i kontakt med oss. Självklart kommer vi att utnyttja de möjligheter som HTML5 och CSS3 erbjuder oss.

Grundstrukturen och den grundläggande designen av formuläret är definierade och avslutade. Och faktiskt ser formuläret redan ganska tilltalande ut. Tack vare CSS3 finns det dock mycket mer möjligheter när det gäller att förbättra formulärets visuella utseende. I denna videohandledning kommer formuläret därför att designas lite mer.

Redan vid denna tidpunkt har ni säkert lagt ner mycket tid och arbete på utvecklingen av er hemsida. Från konceptet till designen av layouten, och sedan till dess implementering i HTML och CSS. Det är verkligen dags att äntligen presentera er hemsida för världen. Det är precis vad detta videoträningsprogram handlar om. Jag kommer att visa er hur ni kan publicera er hemsida på nätet. Först kommer ni att få lära er hur man väljer rätt leverantör och det passande webbutrymmespaketet. Därefter kommer data att laddas upp på servern med den populära FileZilla. Och sedan, ja sedan är hemsidan faktiskt online.

I denna videoutbildning vill jag ge er en liten inblick i den rätta utvecklingsmiljön för att skapa webbplatser. De som redan har skrivit kompletta webbplatser eller mindre enskilda sidor har vanligtvis redan dessa redigerare och kan hoppa över den här videon.

Visas:
DreamWeaver
Panic Coda
Panic Transmit: http://panic.com/transmit/
Filezilla: http://filezilla.de/

HTML5-Boilerplate är en kraftfull mall för HTML5- och CSS3-webbplatser; den gör HTML5 så korswebbläsarkompatibel som möjligt och innehåller några mycket bra kodmallar för JavaScript, CSS3 och naturligtvis också HTML.

I denna videoutbildning vill jag introducera er till dessa funktioner. För en start inom HTML5 och CSS3 finns för närvarande ingen bättre mall.

I den här videoundervisningen vill jag presentera för er några mycket användbara verktyg med vilka man kan utveckla HTML5 och CSS3.

Till dessa hör:
html5css3box.com
kuler.adobe.com (nu https://color.adobe.com/de/create/color-wheel)
css3generator.com
typetester.org
google.com/webfonts
cufon.shoqolate.com
videojs.com