HTML & CSS for begyndere

Den, der ønsker at oprette hjemmesider, kommer før eller siden i kontakt med HTML. Derfor vil vi i de kommende video-træninger sammen erobre den smukke HTML-verden. Du vil trin for trin se, hvad der er op med dette sprog, og hvordan man kan oprette hjemmesider med det i kombination med stylesheets. I begyndelsen er der dog et spørgsmål: Hvad har det egentlig med HTML og stylesheets at gøre? Til sidst i dette video-træningsforløb vil I også finde ud af, hvilken software I har brug for at oprette og teste hjemmesider.

I modsætning til programmeringssprog som f.eks. Java kan man i HTML opnå de første resultater meget hurtigt uden større indlæring. Alt, hvad I har brug for i starten, er en editor og en browser. I denne video guide vil I oprette jeres første HTML-dokument og også straks få en output i browseren. Og sådan på siden vil I få at vide, hvordan HTML-dokumenter, altså websider, er opbygget, eller hvilken grundstruktur de følger.

Sammenhængen mellem begreberne element, tag og attribut kender I allerede fra første del af denne serie. Nu handler det om, hvordan disse ting praktisk talt kan anvendes i HTML-dokumenter. Til sidst i denne video-træning vil I så lære, hvordan I kan kontrollere jeres HTML-kode for syntaktisk korrekthed.

Jeres hjemmesider vil helt sikkert ikke kun bestå af billeder, men også af tekster. Og tekster bør, alene af hensyn til god læsbarhed, struktureres fornuftigt. Til dette formål har HTML mange elementer til rådighed. I denne video-træning præsenteres de vigtigste strukturelementer til tekster. Derudover vil I lære, hvordan I kan maskere HTML-egne tegn og hvordan man kan udskrive programoversigter.

For at opnå en god læsbarhed af tekster er en fornuftig formatering nødvendig. Og dette går ud over rene strukturelementer som overskrifter og tekstafsnit. På den måde kan man i HTML f.eks. markere citater og fremhæve enkelte passager fed eller kursiv. Det nødvendige værktøj hertil leverer denne video-træning.

Elementerne, som I vil støde på igen og igen i HTML, er lister. Dette gælder ikke kun for to-do-lister, kontaktoplysninger, men også for definitionen af menuer. Lister spiller derfor en central rolle i HTML. Det er grund nok til at se nærmere på dem. I denne video-træning lærer I alle listetyperne at kende, som HTML har at byde på. Det drejer sig om punktopstillede lister, nummererede lister, definitionslister og menu-lister. Derudover får I tips om, hvordan man kan tilpasse lister visuelt efter behov.

Tabeller spiller stadig en vigtig rolle på hjemmesider. Dette gælder dog kun med hensyn til præsentation af data. Da der endnu ikke var CSS, eller det ikke blev ordentligt understøttet af browsere, havde tabeller faktisk en helt anden funktion: Man brugte dem til at implementere layout. Inden i tabelcellerne placerede man de enkelte sideelementer. De resulterende layouttabeller-monstre tilhører dog heldigvis fortiden takket være CSS. I dag bruges tabeller i webdesign kun til det, de egentlig er beregnet til: til at vise data overskueligt.

Veludførte tabeller behøver ikke nødvendigvis at bestå af et identisk antal celler i en tabelrække. I denne video-træning vises det, hvordan I kan forbinde tabelceller med hinanden. I den anden del lærer I noget om tabeloverskrifter. Dette aspekt er vigtigt, da man på den måde straks kan vise besøgende, hvilke data der endelig er tale om. Video-træningen afsluttes med et detaljeret kig på design af tabeller i HTML. Især på dette område er der sket meget i forhold til de tidligere HTML-versioner.

Næsten ingen hjemmeside kommer uden grafik ud. Det er derfor ikke overraskende, at emnet grafik også har en vigtig placering i denne serie. I denne og de næste video-træninger vil det blive vist, hvordan I kan inkludere grafik på jeres hjemmesider. I starten er der dog en anden aspekt i fokus: Hvilke billedformater er overhovedet egnet til online-brug? I den anden del handler det så om, hvordan billedstier kan refereres.

Hvordan billeder i bund og grund kan henvises, blev vist i den tidligere del. Men det er slet ikke nået til afslutningen af billederne endnu. Faktisk kan man beskrive billeder nærmere ved hjælp af passende attributter. Dette er formålet med begyndelsen af denne video. I den anden del beskrives det, hvordan billedtekster kan implementeres ved brug af HTML5-syntaks.

Saltet i suppen af internettet er muligheden for at forbinde indhold med hinanden ved hjælp af hyperlinks. Hvis disse hyperlinks ikke eksisterede, ville internettet ikke være tænkeligt i sin nuværende form. I dette og næste video-træning vil I lære om de forskellige muligheder HTML tilbyder med hensyn til hyperlink-definitioner.

HTML tilbyder langt flere muligheder med hensyn til hyperlinks end hvad der blev vist i den foregående video-træning. For eksempel kan I definere e-mail-henvisninger og tilbyde filer til download. Disse og andre hyperlinkvarianter vil I lære at kende i denne video-træning.

For at komme direkte til sagen: Især i HTML5 har formularerne taget et kvantespring. Takket være adskillige nye feldområder kan der oprettes meget interessante formularer. Disse nye muligheder vil I naturligvis lære at kende. I denne videogennemgang starter vi imidlertid med det nødvendige værktøj, man har brug for til at definere formularer. I begyndelsen handler det om at oprette enkeltlinjede inputfelter. I vil se, hvordan disse kan defineres, hvordan man kan forududfylde dem med værdier og gøre dem ikke-redigerbare. I vil også komme til at lære definitionen af adgangskodefelter. Det er trods alt en feldområdetype, man kan få brug for fra tid til anden.

I denne video lærer I om flere felttyper, som I kan bruge til at udstyre jeres formularer. Konkret handler det om valgfelter, radioknapper og afkrydsningsfelter. Alt dette er vigtige elementer, som man ofte har brug for i formularer. Derfor er det en god idé at se nærmere på disse og andre elementer.

Med HTML5 er der sket en hel del, især med hensyn til formularer. Det er en god grund til at undersøge de mange nye formularfunktioner, der nu kan bruges. Slut er det med kedelige inputfelter. Endelig kan du også definere skydere, dato-felter osv. - og det helt uden brug af JavaScript.

Indgangen til verdenen af HTML5-formularer blev jævnet af den foregående video-træning. Men enden på flagstangen er dog langt fra nået endnu. Faktisk har HTML5 på dette område meget mere at byde på.

I HTML5 er der udover de præsenterede felttyper også mange andre interessante aspekter. På denne måde kan man f.eks. med meget lidt indsats implementere en autofuldførelsesfunktion for formularfelter efter Googles eksempel. Disse og andre ting vises i denne video-træning.

Hvis man beskæftiger sig med HTML5, kommer man ikke uden om emnet semantik. I denne og de næste video-træninger vil I lære de vigtigste elementer at kende, som HTML5 bringer med sig, så I kan strukturere dokumenter ordentligt. Faktisk er denne logiske strukturering uundværlig, hvis man vil sikre, at ens hjemmesider er fremtidssikrede.

HTML5 bringer flere nye struktureringslementer med sig. Hvad disse grundlæggende er, blev allerede vist i den forrige video-træning. Nu handler det om at anvende disse elementer i praksis. Disse elementer er nemlig dem, der sikrer en semantisk strukturering af dokumenterne. I denne video-træning vil I primært lære de to elementer article og section at kende. Disse sørger for den grundlæggende struktur af HTML-dokumenter. Til sidst i denne video vil der også blive kigget på forskellene mellem div, article og section.

I HTML5 kan dokumenter ikke kun opdeles i artikler og sektioner. Faktisk er der mange yderligere elementer som header, footer & Co. til en semantisk struktur. Disse er bestemt værd at få nærmere undersøgt.

I denne sidste video-træning af semantik-element-serien vil I lære yderligere struktureringselementer. Faktisk tilbyder HTML5 også elementer til navigationsområder, marginalier og opsummeringer.

I tidligere versioner af HTML var det en pine at indlejre multimedieindhold. Med en kombination af object- og embed-element blev der forsøgt at bringe videoer og lyd til hjemmesiden. Om den indlejrede video faktisk kunne afspilles, var tvivlsomt. Også på dette område er der sket en hel del i HTML5.

I har set, hvordan man kan integrere videoer. Nu er videoer selvfølgelig ikke alt, man kan præsentere for sine besøgende på hjemmesiden. I denne video-træning beskrives derfor, hvilke muligheder HTML5 tilbyder for at integrere lydfiler og Flash-film. For også disse ting må man af og til vise på sin side.

I HTML5 findes der ikke længere frames. Deres navnebrødre, iFrames, har dog også klaret sig ind i den nye HTML-tidsalder og er ombord i HTML5. Mens klassiske frames opdeler en side i uafhængige områder, kan iFrames indlejre vilkårlige ressourcer på hjemmesider.

HTML er til strukturering af indholdet. Når det kommer til at designe siden, kommer Cascading Stylesheets (CSS) ind i billedet. Fordi det er først kombinationen af CSS og HTML, der gør det muligt at lave attraktive hjemmesider ud af en kedelig HTML-struktur. Så det er en god grund til at kaste et nærmere blik på CSS.

Et begreb, som I altid vil støde på i forbindelse med CSS, er "selectors". Via disse selectors definerer man endeligt de elementer, der skal formateres ved hjælp af CSS. I denne video-træning vil I lære de første selectors at kende. I vil her blive præsenteret for element-, ID- og universelle selectors. Disse vil I arbejde med dagligt, når I designer jeres hjemmesider med CSS.

Nogle selektorer blev præsenteret i den foregående video-træning. CSS har selvfølgelig mange andre selektorer at byde på.

I denne sidste video-undervisning om selektorer præsenterer jeg jer for en helt speciel form for selektorer. Disse er såkaldte pseudoklasser og pseudoelementer. De er selektorer, der ikke henviser til specifikke HTML-elementer, men genereres af outputenheden.

I dette og de kommende video-træninger vil jeg præsentere jer for de vigtigste CSS-egenskaber. Det handler ikke om at præsentere en CSS-referencen for jer. Derimod skal I få en fornemmelse af, hvad der er muligt med CSS. Nu starter vi med skriftstil. I dette video-træning vil der blive præsenteret alt det, der direkte har at gøre med de såkaldte skrifter. Bemærk, at der er flere egenskaber med hensyn til skriftstil, som vil blive vist i den næste video-træning.

De CSS-egenskaber, der præsenteres i denne video-træning, kan bruges til at tilpasse tekst og tegn visuelt. For eksempel kan afstandene mellem de enkelte bogstaver ændres, og tekstene kan justeres. Disse egenskaber hjælper dig også med at præsentere tekst på en tiltalende måde.

Selvfølgelig må farvedefinitioner og grafiske baggrunde heller ikke mangle i CSS. De tilsvarende egenskaber præsenteres i denne video-træning. Faktisk har CSS netop på dette område mange muligheder at byde på. Man kan ikke kun definere farver og billeder på en enkel måde. Der er også mulighed for gentagne baggrundsbilleder.

Især når det kommer til layout af hjemmesider, vil I have med definitionen af yderrammer og afstande at gøre. I de seneste videoer i denne serie vil der i øvrigt blive gennemført et omfattende eksempelprojekt, hvor brugen af disse og andre CSS-egenskaber også vil blive vist på en helt praktisk måde.

CSS har nogle interessante egenskaber til tekstafsnit og -blokke, som jeg ikke vil undlade at dele med jer. I kan for eksempel justere tekstafsnit til venstre og højre ved hjælp af CSS.

Når man taler om rammer, tænker de fleste sikkert først på tabeller. Og faktisk spiller rammer en vigtig rolle i forbindelse med tabeller. Ikke desto mindre kan man ved hjælp af CSS også tilføje rammer til andre elementer. Og hvordan disse rammer til sidst ser ud, kan også bestemmes eksplicit ved hjælp af CSS-definitioner.

Hvordan lister defineres, ved I formentlig allerede. Det blev trods alt grundigt vist i denne serie. Chic er lister dog ikke nødvendigvis fra start af. For at de også visuelt ser tiltalende ud, er der tilsvarende CSS-egenskaber. Hvilke disse er, og hvordan man bruger dem, kan I finde ud af i denne video-træning. I anden del handler det så om de såkaldte tællere, med hvilke man også kan implementere mere komplekse nummereringer.

Når det kommer til at layoute hjemmesider, vil det såkaldte boksmodel være jeres konstante følgesvend. For det er gennem dette, at man i sidste ende fastsætter, hvordan og hvor elementer placeres.

For at kunne positionere elementer inden for hjemmesiden på de ønskede steder, skal I ty til helt bestemte CSS-egenskaber.

I det tidligere video-træningsforløb blev det såkaldte "Floating-princip" allerede kort berørt. Emnet er imidlertid så komplekst, at der her vil blive kastet et mere detaljeret blik på det der flyder. For faktisk er dette et afgørende koncept i CSS. For kun hvis man forstår dette emne, kan man virkelig skabe hjemmesider.

I de tidligere video-træninger blev grundlaget for arbejdet med HTML og CSS lagt. Nu skal de første frugter naturligvis også høstes. I de kommende video-træninger vil en eksempel hjemmeside derfor blive opbygget trin for trin. I denne video-træning vil I dog først lære de forskellige layout-varianter at kende. For valget af den passende layoutform bør altid være starten på jeres overvejelser om udformningen af en hjemmeside.

Jeg går ud fra et typisk kolonnelayout i vores praksisprojekt. Inden jeg dog præsenterer dette projekt live og i farver, vil jeg meget konkret vise jer, hvordan I selv kan implementere kolonnelayouts. Fokus vil her være på to- og trespaltede layouts, da disse stadig udgør grundlaget for flertallet af websider.

I de følgende video-træninger vil jeg vise jer, hvordan man trin for trin kan implementere et website layout. Der er mange forskellige tilgange til dette. Oftest bliver layoutene oprettet i Photoshop. De enkelte sideelementer skæres derefter ud og sættes sammen som en hjemmeside ved hjælp af CSS og HTML. På samme måde håndteres det også her. Dog bruger jeg det gratis tilgængelige GIMP i stedet for Photoshop. De beskrevne trin kan dog også følges i Photoshop.

De første skridt mod ens eget layout blev taget i den foregående video-træning. Selvfølgelig mangler der stadig en række elementer. Disse vil blive tilføjet i denne video-træning. Når layoutet er på plads, fortsætter vi med at skære ud, det såkaldte Slicen. For det er til sidst trinet, hvor det bliver muligt at implementere det oprettede design praktisk med HTML og CSS.

I har lavet layoutet. Nu går vi videre med dets praktiske implementering. I denne video-træning vil vi sammen oprette websidens HTML-grundstruktur.

Siderammens struktur er på plads, men den fremstår stadig ret spartansk. I denne video-gennemgang udbygges indholdet på siden. Fokus ligger først og fremmest på menuen, som ligger i øverste del af siden. Derefter følger den højre og den nedre menu.

Et afgørende aspekt for en visuelt tiltalende hjemmeside er naturligvis dens skrifttype. I løbet af denne serie har I allerede lært om de muligheder, som HTML og CSS tilbyder jer med hensyn til skrifttyper. I denne videoinstruktion vil de blive brugt til at forbedre siden. Vi vil også ikke kun fokusere på de klassiske varianter. Det magiske ord for brugen af "eksotiske" skrifttyper er @font-face.

Normalt bør man give sine besøgende mulighed for at kontakte en. I det enkleste tilfælde noterer man blot et telefonnummer og/eller en e-mailadresse. Det kan gøres på den måde, men det er ikke særlig behageligt for besøgende. Derfor vil vi i denne video-træning oprette en formular, som gør det meget nemt for besøgende at komme i kontakt med os. Og selvfølgelig vil vi udnytte de muligheder, som HTML5 og CSS3 giver os.

Rammen og den grundlæggende formgivning af formularen er defineret og afsluttet. Og faktisk ser formularen allerede ret tiltalende ud nu. Takket være CSS3 er der dog endnu mere potentiale til at pifte formularen visuelt op. I denne video-træning vil formularen derfor blive yderligere designet.

Allerede på dette tidspunkt har I sikkert lagt meget tid og arbejde i udviklingen af jeres hjemmeside. Fra konceptet til designet af layoutet til implementeringen i HTML og CSS. Der er god grund til at præsentere jeres hjemmeside for verden nu. Det er præcist, hvad dette video-kursus handler om. Jeg vil vise jer, hvordan I kan sætte hjemmesiden online. Først vil I lære, hvordan I får den rette udbyder og det passende webhosting-pakke. Derefter bliver dataene uploadet til serveren ved hjælp af det populære FileZilla. Og så, ja så er hjemmesiden faktisk online.

I denne video-træning vil jeg give jer et lille indblik i den rette udviklingsmiljø til oprettelse af hjemmesider. Dem, der allerede har skrevet komplette hjemmesider eller mindre enkeltsider, har normalt allerede disse redigeringsprogrammer og kan springe denne video over.

Vist vil blive:
DreamWeaver
Panic Coda
Panic Transmit: http://panic.com/transmit/
Filezilla: http://filezilla.de/

HTML5-Boilerpladen er et kraftfuldt skabelon for HTML5- og CSS3-websites; det gør HTML5 så crossbrowser-kompatibelt som muligt og indeholder nogle meget gode kode-skabeloner inden for JavaScript, CSS3 og selvfølgelig også HTML.

I denne video-træning vil jeg gerne præsentere jer for disse funktioner. Der er i øjeblikket ikke en bedre skabelon til at starte med HTML5 og CSS3.

I denne video-træning vil jeg gerne præsentere jer for nogle meget nyttige værktøjer, som man kan bruge til at udvikle HTML5 og CSS3.

Til dette formål inkluderer:
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