HTML & CSS for nybegynnere

Den som ønsker å lage nettsider, vil før eller senere komme i kontakt med HTML. Derfor vil vi sammen erobre den vakre HTML-verdenen i de kommende videokursene. Dere vil steg for steg se hva denne språket dreier seg om, og hvordan man kan lage nettsider med det i kombinasjon med stiler. Men først står et spørsmål: Hva handler egentlig HTML og stiler om? På slutten av dette videokurset vil dere også få vite hvilken programvare dere trenger for å lage og teste nettsider.

I motsetning til programmeringsspråk som for eksempel Java, kan man i HTML oppnå de første resultatene veldig raskt uten større opplæring. Alt du trenger for å begynne, er en editor og en nettleser. I denne videoopplæringen vil du lage ditt første HTML-dokument og få umiddelbart en visning i nettleseren. Og ved siden av vil du lære hvordan HTML-dokumenter, og dermed nettsider, er strukturert og hvilken grunnstruktur de følger.

Sammenhengen mellom begrepene element, tag og attributt kjenner dere allerede fra første del av denne serien. Nå handler det om hvordan disse tingene praktisk kan brukes i HTML-dokumenter. Til slutt i denne videoundervisningen vil dere lære hvordan dere kan sjekke HTML-koden deres for syntaktisk korrekthet.

Nettsidene deres vil sannsynligvis ikke bare bestå av bilder, men også av tekster. Og tekstene bør, bare av hensyn til god lesbarhet, struktureres på en fornuftig måte. For dette har HTML mange elementer tilgjengelige. I denne video-opplæringen vil de viktigste strukturerings­elementene for tekster bli presentert. I tillegg vil dere lære hvordan HTML-egne tegn kan maskeres, og hvordan man kan vise programlistinger.

For god lesbarhet av tekst er en fornuftig formatering nødvendig. Og det går utover bare strukturelementer som overskrifter og tekstavsnitt. Så i HTML kan man for eksempel merke sitater og fremheve enkeltavsnitt i fet skrift eller kursiv. Den nødvendige verktøykassen for dette tilbyr denne videoopplæringen.

Elementer som du stadig vil støte på i HTML, er lister. Dette gjelder ikke bare for gjøremåls-lister, kontaktopplysninger, men også for definisjon av menyer. Lister spiller derfor en svært sentral rolle i HTML. Nok en grunn til å se nøye på dem. I denne videoopplæringen vil du lære om alle listevariantene som HTML har å tilby. Disse inkluderer punktlister, nummererte lister, definisjonslister og menylister. I tillegg vil du få tips om hvordan du justerer utseendet på lister etter behov.

Tabeller spiller fortsatt en viktig rolle på nettsider. Dette gjelder imidlertid bare når det gjelder presentasjon av data. Før CSS eksisterte, eller når det ikke ble støttet ordentlig av nettlesere, hadde tabeller en helt annen funksjon: man brukte dem til layout. Man plasserte de ulike elementene på siden inni tabellcellene. Layouttabell-monstrene som oppsto som følge av dette, tilhører heldigvis fortiden takket være CSS. I dag brukes tabeller i webdesign kun til det de egentlig er ment for: å vise data på en oversiktlig måte.

Sammenhengende tabeller trenger ikke nødvendigvis å bestå av et identisk antall celler i en tabellrad. I denne videoopplæringen vil det bli vist hvordan du kan koble tabellceller sammen. I den andre delen vil du lære noe om hvordan du kan beskrive tabeller. Dette aspektet er viktig fordi det lar besøkende umiddelbart se hva slags data det til slutt dreier seg om. Videoopplæringen avsluttes med et detaljert blikk på hvordan du designer tabeller i HTML. Det har skjedd mye på dette området sammenlignet med tidligere versjoner av HTML.

Nesten alle nettsider kommer ikke uten grafikk. Ikke rart at emnet grafikk også har en viktig plass i denne serien. I denne og de neste videoopplæringene vil det bli vist hvordan du kan integrere grafikk på nettsidene dine. I begynnelsen står imidlertid en annen aspekt i fokus: Hvilke bildeformater egner seg egentlig for bruk på nettet? I den andre delen handler det deretter om hvordan bildestier kan refereres.

Hvordan bilder i utgangspunktet kan refereres, ble vist i den forrige delen. Men slutten når det gjelder bilder er langt fra nådd. Faktisk kan man beskrive bilder nærmere ved hjelp av passende attributter. Dette er formålet med begynnelsen av denne videoen. I den andre delen beskrives det hvordan bildetekster kan implementeres ved hjelp av HTML5-syntax.

Saltet i suppen av internett er muligheten til å koble innhold sammen med hyperkoblinger. Hvis disse hyperkoblingene ikke eksisterte, ville ikke internettet slik vi kjenner det i dag være mulig. Hvem av dere som lurer på hvilke alternativer HTML tilbyr når det gjelder hyperkoblingsdefinisjoner, vil finne ut av det i denne og neste videoinstruksjonen.

HTML tilbyr langt flere muligheter når det gjelder hyperkoblinger enn det som ble vist i den forrige videoopplæringen. For eksempel kan du definere e-postreferanser og tilby filer for nedlasting. Disse og andre hyperkoblingsvarianter vil du lære om i denne videoopplæringen.

For å ta det på forhånd: Akkurat i HTML5 har skjemaene tatt et kvantesprang. Takket være en rekke nye felttyper kan man lage veldig interessante skjemaer. Disse nye mulighetene vil dere selvfølgelig lære mer om. Men i denne videoopplæringen starter vi med verktøyene som er nødvendige for å definere skjemaer. Først og fremst handler det om å opprette enlinjers inndatafelter. Dere vil se hvordan disse kan defineres, hvordan man kan forhåndsinnstille dem med verdier og angi dem som ikke-redigerbare. Dere vil også lære å definere passordfelt. Dette er tross alt en felttype som man kan ha nytte av fra tid til annen.

I denne videoen lærer dere om flere felttyper som dere kan bruke til å utstyre skjemaene deres med. Konkret handler det om valgfelter, radioknapper, og avmerkingsbokser. Alt dette er viktige elementer som man stadig trenger i skjemaer. Det er derfor grunn nok til å ta en nærmere titt på disse og andre elementer.

Med HTML5 har det også skjedd mye, spesielt med tanke på skjemaene. Nok en grunn til å ta en grundig titt på de mange nye skjemafunksjonene som nå kan brukes. Det er slutt på de grunnleggende inndatafeltene. Endelig kan også skyveknapper, datofelter osv. defineres - og det helt uten bruk av JavaScript.

Inngangen til verden av HTML5-skjemaer har blitt banet av den forrige videoopplæringen. Men slutten på stangen er på langt nær nådd. Faktisk har HTML5 mye mer å tilby på dette feltet.

I HTML5 finnes det, i tillegg til de presenterte felttypene, også mange andre interessante aspekter. Nå kan man for eksempel med veldig lite innsats implementere en automatisk utfyllingsfunksjon for skjemafelt etter modell av Google. Disse og andre ting vises i denne videoopplæringen.

Den som jobber med HTML5, kommer ikke unna temaet semantikk. I dette og de neste videokursene vil dere lære de viktigste elementene som HTML5 bringer med seg, slik at dere kan strukturere dokumentene deres skikkelig. Faktisk er denne logiske struktureringen uunngåelig hvis man vil sikre at nettsidene deres er fremtidsrettede.

HTML5 bringer med seg en rekke nye strukturelementer. Hvilke dette grunnleggende er, ble vist i den forrige videotreningen. Nå handler det om å bruke disse elementene i praksis. For det er disse elementene som sørger for en semantisk strukturering av dokumentene. I denne videotreningen vil dere først og fremst lære om de to elementene article og section. Disse sørger for den grunnleggende strukturen av HTML-dokumenter. På slutten av denne videoen vil det også bli sett nærmere på forskjellene som eksisterer mellom div, article og section.

I HTML5 kan dokumenter ikke bare deles inn i artikler og seksjoner. Faktisk finnes det mange ekstra elementer som header, footer & Co. for en semantisk struktur. Disse er absolutt verdt å se nærmere på.

I dette siste videokurset i Semantikkelemtserien vil du lære om flere strukturelementer. Faktisk tilbyr HTML5 også elementer for navigasjonsområder, marginnotater og sammendrag.

I tidligere HTML-versjoner var inkludering av multimedieinnhold en pine. Med en kombinasjon av object- og embed-elementer ble det forsøkt å bringe videoer og lyd til nettstedet. Det var tvilsomt om den innlemmede videoen faktisk kunne spilles av. Også på dette området har det blitt gjort mye i HTML5.

Hvordan man kan integrere videoer, har dere sett. Nå er videoer selvfølgelig ikke alt man kan presentere for besøkende på nettsiden sin. I denne videoopplæringen vil det derfor bli beskrevet hvilke alternativer HTML5 tilbyr for innlemming av lydfiler og Flash-filmer. For også disse tingene må man av og til vise på siden sin.

Frames finnes ikke lenger i HTML5. Deres navnebrødre, iFrames, har imidlertid også klart seg inn i den nye HTML-æraen og er med i HTML5. Mens klassiske frames deler en side inn i uavhengige områder, tillater iFrames at ulike ressurser kan legges inn i nettsider.

HTML er for strukturering av innholdet. Så snart det kommer til design av siden, kommer Cascading Stylesheets (CSS) inn i bildet. For bare kombinasjonen av CSS og HTML gjør det mulig å lage tiltalende nettsider fra en kjedelig HTML-struktur. God grunn til å ta en nærmere titt på CSS.

Et begrep som du vil støte på gang på gang i forbindelse med CSS, er "selektorer". Gjennom disse selektorene definerer man til slutt elementene som skal formateres ved hjelp av CSS. I denne video-opplæringen vil du bli kjent med de første selektorene. Her vil element-, ID- og universelle selektorer bli presentert for deg. Disse vil du jobbe med daglig når du designer websidene dine med CSS.

Noen selektorer ble presentert i den forrige videoopplæringen. Selvfølgelig har CSS imidlertid mange andre selektorer å tilby.

I denne siste videoopplæringen om selektorer presenterer jeg en helt spesiell form for selektorer. Disse er såkalte pseudoklasser og pseudoelementer. Dette er selektorer som ikke refererer til spesifikke HTML-elementer, men genereres av utdataenheten.

I dette og de kommende videotreningene vil jeg presentere de viktigste CSS-egenskapene for dere. Her handler det forresten ikke om å presentere en CSS-referanse for dere. Tvert imot, dere skal få en følelse av hva som er mulig med CSS. Vi starter her med skriftstil. I denne video-treningen vil alle tingene som har direkte med såkalte skrifter å gjøre bli presentert. Legg merke til at det er flere egenskaper når det gjelder skriftstil, som vil bli vist i neste video-trening.

Gjennom de CSS-egenskapene som er presentert i denne videoopplæringen, kan tekst og tegn tilpasses visuelt. For eksempel kan avstandene mellom bokstavene endres, og tekstene kan justeres. Disse egenskapene hjelper deg også med å presentere tekster tiltalende.

Selvfølgelig kan man ikke glemme farge definisjoner og grafiske bakgrunner i CSS heller. De tilsvarende egenskapene presenteres i denne videoopplæringen. For faktisk har CSS også mange muligheter på dette området. Man kan ikke bare definere farger og bilder, men også gjentakende bakgrunnsgrafikk er mulig.

Spesielt når det gjelder layout av nettsider, vil du få å gjøre med definisjonen av yttermarginer og avstander. I de siste videoopplæringene i denne serien vil det for øvrig bli gjennomført et omfattende eksempelprosjekt, der bruken av disse og andre CSS-egenskaper også praktisk vil bli vist.

CSS har noen interessante egenskaper for tekstavsnitt og -blokker som jeg ikke vil holde tilbake for dere. For eksempel kan dere justere tekstavsnitt til venstre og høyre.

Når det kommer til rammer, tenker de fleste sikkert først på tabeller. Og faktisk spiller rammer en viktig rolle i forbindelse med tabeller. Imidlertid kan også andre elementer utstyres med rammer ved hjelp av CSS. Og hvordan disse rammene til slutt ser ut, kan også spesifikt bestemmes ved hjelp av CSS-definisjoner.

Hvordan man definerer lister, vet dere sannsynligvis allerede. Dette ble tross alt grundig vist i løpet av denne serien. Stilige er imidlertid ikke listene i utgangspunktet nødvendigvis. For at de også skal se estetisk tiltalende ut, finnes det tilhørende CSS-egenskaper. Hvilke disse er og hvordan man bruker dem, vil dere få vite i denne videoopplæringen. I den andre delen handler det om de såkalte Counter, med hvilke også mer komplekse nummereringer kan settes opp.

Når det gjelder utforming av nettsider, vil det såkalte boksmodellen være deres trofaste følgesvenn. For gjennom denne vil man til slutt bestemme hvordan og hvor elementer blir plassert.

For å kunne plassere elementer innenfor nettsiden på ønskede steder, må dere bruke helt spesifikke CSS-egenskaper.

I den forrige videoopplæringen ble det såkalte flytende prinsippet allerede nevnt kort. Emnet er imidlertid så komplekst at vi nå tar en grundigere titt på dette flytende elementet. For faktisk er dette et avgjørende konsept i CSS. For bare hvis man forstår denne tematikken, kan man faktisk lage nettsider.

I de tidligere videoopplæringene ble grunnleggende prinsipper for å jobbe med HTML og CSS forklart. Nå skal selvfølgelig også de første fruktene høstes. I de kommende videoopplæringene vil derfor en eksempel nettside bli bygget opp trinn for trinn. I denne videoopplæringen vil dere imidlertid først lære om de ulike layoutvariantene. For valg av riktig layoutform bør alltid være startpunktet i deres overveielser for utformingen av en nettside.

Jeg går ut fra et typisk spalteleie i vårt praksisprosjekt. Før jeg imidlertid presenterer dette prosjektet live og i farger, vil jeg vise dere konkret hvordan dere selv kan implementere spalteoppsett. Fokuset her vil være på to- og trespaltige oppsett, da disse fortsatt utgjør grunnlaget for de fleste nettsider.

I de følgende videoopplæringene vil jeg vise dere hvordan man trinn for trinn kan implementere et nettsideoppsett. Det finnes mange forskjellige tilnærminger til dette. Ofte blir oppsettene opprettet i Photoshop. Deretter klipper man ut de enkelte sideelementene og setter dem sammen som en nettside ved hjelp av CSS og HTML. Dette er også tilfelle her. Imidlertid bruker jeg det gratis tilgjengelige GIMP i stedet for Photoshop. De beskrevne trinnene kan imidlertid følges i Photoshop også.

De første stegene mot ens eget oppsett ble tatt i den forrige videoopplæringen. Selvfølgelig mangler det fremdeles mange elementer. Disse vil bli lagt til i denne videoopplæringen. Når layouten er klar, fortsetter man med utskjæring, det såkalte "slicing". Dette er til syvende og sist trinnet som gjør det mulig å implementere det opprettede designet praktisk ved hjelp av HTML og CSS.

Dere har laget layoutet. Nå går vi videre til den praktiske gjennomføringen av det. I denne videoopplæringen vil vi sammen opprette det grunnleggende HTML-rammeverket for nettsiden.

Rammeverket for siden er på plass, men ser fortsatt ganske spartansk ut. I denne videoopplæringen blir innholdet på siden utvidet. Fokuset er først og fremst på menyen, som ligger i den øverste delen av siden. Deretter følger den høyre og den nedre menyen.

En viktig aspekt for en visuelt tiltalende nettside er selvfølgelig skriftbildet. I løpet av denne serien har dere allerede blitt kjent med mulighetene som HTML og CSS har å tilby når det gjelder skriftutforming. I denne videoopplæringen vil disse bli brukt til å forbedre nettsiden. Vi vil for øvrig ikke bare vie oppmerksomhet til de klassiske variantene. Det magiske ordet for å bruke "eksotiske" skrifttyper er @font-face.

Vanligvis bør man gi besøkende muligheten til å ta kontakt. I enkle tilfeller noterer man bare et telefonnummer og/eller e-postadresse. Man kan gjøre det på den måten, men det er ikke spesielt behagelig for besøkende. Derfor vil vi i denne videoopplæringen opprette et skjema gjennom hvilket besøkende enkelt kan kontakte oss. Og selvfølgelig vil vi benytte mulighetene som HTML5 og CSS3 gir oss.

Grundstrukturen og den grunnleggende utformingen av skjemaet er definert og fullført. Og faktisk ser skjemaet allerede ganske tiltalende ut nå. Takk være CSS3 er det imidlertid mye mer som kan gjøres når det gjelder å forbedre utseendet på skjemaet. I denne videoopplæringen vil skjemaet derfor bli litt mer utformet.

Allerede på nåværende tidspunkt har dere sikkert investert mye tid og arbeid i utviklingen av nettsiden deres. Fra konseptualiseringen til design av layoutet og til implementeringen i HTML og CSS. Derfor er det på tide å endelig presentere nettsiden deres for verden. Dette handler nøyaktig om i denne videoopplæringen. Jeg vil vise dere hvordan dere kan publisere nettsiden. Først vil dere lære hvordan man finner riktig leverandør og riktig webhotellpakke. Deretter lastes dataene opp til serveren ved hjelp av det populære FileZilla-programmet. Og så, ja da er nettsiden faktisk online.

I denne videoopplæringen vil jeg gi dere et lite innblikk i riktig utviklingsmiljø for å lage nettsider. De som allerede har skrevet komplette nettsider eller mindre enkeltsider, har vanligvis allerede disse redaktørene og kan hoppe over denne videoen.

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

HTML5-Boilerplate er et kraftfullt mal for HTML5- og CSS3-nettsider; det gjør HTML5 så krysskompatibelt som mulig og inneholder noen svært gode kode-maler innen JavaScript, CSS3 og selvfølgelig også HTML.

I denne videoopplæringen ønsker jeg å presentere dere disse funksjonene. For en start innen HTML5 og CSS3 finnes det for øyeblikket ingen bedre mal.

I denne videoopplæringen vil jeg presentere noen svært nyttige verktøy som kan brukes til å utvikle HTML5 og CSS3.

Dette inkluderer:
html5css3box.com
kuler.adobe.com (nå https://color.adobe.com/de/create/color-wheel)
css3generator.com
typetester.org
google.com/webfonts
cufon.shoqolate.com
videojs.com