Kodeeksempler i kategorien 'HTML' (66 totalt)

Vi har alle opplevd å benytte et bakgrunnsbilde som feks toppdesign på vår nettside, og samtidig hatt en ønske om å linke dette bildet til en side (feks til forsiden). Det er ikke mulig å lage en "a href" link på et bakgrunnsbilde, men løsningen er likevel enkel. Her viser vi hvordan man lager en link på en hel DIV tag, og for ordensskyld lister vi opp alle andre HTML tagger og JavaScript Objekter som også kan benytte en slik type linking!  

HEr viser vi et cross browser kompatibelt kodeeksempel på hvordan man kan stremae musikk på din webside. Husk å sette korrekt adresse til der mp3 låten ligger, og om ønskelig kan du endre volumet (-300) og autostart (true) i eksempelkoden.  

Dette kodeeksempelet viser hvordan du kan lage en side som benytter frames. Tanken bak eksempelet er at du skal lage en admin side. Den skal ha en fast topp (100% bredde), en vestre kolonne for meny og en høyre kolonne for visning av innhold. Venstre kolonne skal ha 150px bredde, men bredden skal kunne varieres av brukeren ved å dra i den. Når man klikker en link i menyen, skal innholdet åpnes i høyre kolonne!  

Dete kode-eksempelet viser hvordan man lager en optgroup for å presenetere data strukturerrt i en driopdownlist. Kopièr koden, lag et nytt htmp-dokument og lim koden inn. Åpne dokumentet.   

Her forklares hvordan du setter 100% høyde på en tabell som skal være XHTML kompatibel. Når du angir doctype vil ikke <table height="100%"> fungere fordi dette ikke er gyldig XHTML format. Vi må derfor sette høyden vhja CSS, og koden viser et slikt eksempel.  

Dette enkle kode-eksempelet viser hvordan du bør sette opp dine html-filer slik at det angis hvilken html versjon som benyttes. Vi bør velge en av følgende 4 standarder på vårt html-dokument: XHTML 1.0 Transitional, XHTML 1.0 Strict, XHTML 1.0 Frameset, eller XHTML 1.1.  

Man kan linke DIV elementer på samme måte som man linker bilder, tekst osv. Dette gjør man enkelt ved hjelp av OnClick metoden.  

Her vises hvordan du linker til en fil inne i en iframe. Dette er aktuellt når du ikke ønsker å åpne fila i iframe'n direkte, men kun linke til den med feks en parameter i url'en (for å få fila til å utføre en operasjon).  

Ved hjelp av hspace og vspace kan man direkte sette marger rundt et bilde. Se eksempel under, der er det 10px luft rundt hele bildet.  

Dette er en font som bør testes, standard både for PC og Mac.  

Ønsker du å "speile" en webside i ditt eget rammeverk kan det enkelt gjøres ved å benytte denne koden. Det eneste du behøver å gjøre er å bytte ut SRC-adressen. Lagre denne koden i en fil med navn feks index.html, ved å åpne den vil websiden du "speiler" vises i denne fila.  

Bruk denne enkle kodelinjen for å lage rollover effekt i feks en meny. Her byttes det mellom bilde 1 og bilde 2. Enklere kan det ikke gjøres!  

Det er meget lite som skal til for å legge på en lydfil på webside. Den lille kodesnutten under vil spille av lydfila "motorcycle.wav".  

Denne koden viser hvordan man kan lage en scroll / skroll inne i en webside. Dette er smart hvis du ønsker å presentere deler fra en annen side i en angitt rute på din webside. Sentrale elementer er DIV, Overflow, CSS.  

Her ser du malen for en standard webside tilpasset en oppløsning på 1024px bredde. malen besteår av topp, venstremeny, hodevfelt og bunn.  

Ønsker du å legge inn en video eller film på din nettside? Dette kodeeksemplet viser hvor enkelt det er å stream'e en videofil direkte i nettleseren din med Mediaplayer utseende. Kopier koden, endre på "Width" og "Height" etter behov og sett "SRC" til videofila du ønsker å vise på ditt nettsted. Vips så har du en lekker filmviser med Mediaplayer utseende på din nettside!  

Frames kan brukes til å vise en ekstern webside på denne måten:  

På denne måten vil URLen ikke forandre seg for brukeren.  

Velg hvilken rekkefølge tabulatoren skal hoppe i en form!  

Taggene under er absolutt verdt en test, en slik presentasjon av innhold er ikke annet enn meget stilig!!!  

Hvis du f.eks flytter dine websider til et annet område vil du kanskje trenge å endre på alle linkene dine. Dette gjør du ved å sette base href="adresse for filene" der de ligger. Legges i HEAD-taggen!   

Dette kan gjøres meget enkelt ved hjelp av atributten "dotted" som vist under:  

Dette gjøres ved å bruke "margin" som vist i eksempelet under:  

Denne lille snutten er grei for å skille opplistninger ol pent.  

For å legge inn en flashfil på din webside, bruk følgende mal:  

En enkel html-mail for en "standard" webside bestående av flere tabeller. Her ligger tabellene som skal inkluderes (topp og bunn) i selve hovedtabellen. Klar for copy->paste :)   

En enkel html-mail for en "standard" webside bestående av flere tabeller. Klar for copy->paste :)  

En enkel html-mail for en "standard" webside, klar for copy->paste :)  

Tabellen under kan du kopiere og lime rundt den informasjonen du vil ha en tynn ramme rundt. Husk å ha en mappe med navn "img" der transparent gif-bilde "pix.gif" er lagret (1*1px). Det er også mulig å gjøre dette uten bruk av bilder. Se 3 eksempler:  

Ønsker man å formatere feks en knapp kan dette gjerne gjøres enkelt uten å benytte et stylesheet:  

Ved å benytte <DIV STYLE="POSITION:ABSOLUTE"> med left og top verdier kan man nøyaktig posisjonere / plassere et element på en webside.  

Bruker Iframe / Ilayer til dette:  

Bruker DIV og Absolute Position.  

Hvis du ikke vil at infoen i en feks celle i en tabell skal bryte over flere linjer kan du benytte nobr-taggen <nobr>  

Ved å bruke style="table-layout:fixed;" på table-taggen vil tabellen beholde sin bredde selv om innholdet "tar for stor plass".  

Et lite eksempel på bruken av colspan og rowspan.  

Clear = "all" atributtet gjør at neste element kommer under alle andre lementer, uansett plassering / alignment. Veldig viktig å bruke ifm bla <div>-tagger.  

Enkel måte å sette farge på font og linker.  

Kan enkelt gjøres ved å sette attributene "link", "vlink" og "alink" til <body>-taggen.  

Linken lages enkelt ved å skrive "news:" foran adressen til nyhetsserveren.  

En epost-link kan inneholde info om Subject, CC osv. Se eksempel under.  

Anchor er linker innen en og samme webside / dokument.  

Skyggen kan fjernes ved å sette attributet "noshade" til HR-taggen.  

Det kan gjøres ved å sette verdier til <body>-attributene "bgcolor" og "text".  

Man kan legge link på kun en del av et bilde (MAP), ikke kun hele bildet. Dette gjøres ved å benytte taggen <MAP> sammen med koordinatene til hvor linken skal ligge.  

Når musa går over et bilde så skal det vises et annet bilde. Koden under er generert av Dreamweaver4.  

Ønsker du å legge lyd eller musikk på din webside? Det kan enkelt gjøres ved å legge inn en enkel kodelinje på din webside. I denne eksempelet viser vi hvordan du kan legge inn en .mp3 fil som automatisk starter å spille når nettsiden din vises. Vi viser også en liten mediespiller i størrelsen 25 x 100 pixels slik at brukeren kan starte, stoppe og pause musikken.  

Ved å legge inn info i toppen av websiden, kan du fortelle browseren hva slags html-versjon HTML siden er i. Det gjøres ved å legge inn denne (vanligvis) kode-snutten FØR <html>-taggen  

Sender en bruker til en annen webside etter 3 sekunder  

Det er ikke alltid ønskelig å benytte en submit-knapp når noe skal utføres. Her vises hvordan man kan benytte et bilde til dette  

Ønsker du å ha en scroll rundt kun en tekstbit, kan dette gjøres ved å kombinere Style og <SPAN> eller <DIV>  

Her vises verdien (HTML Equivalenten) for forskjellige spesialtegn. Det finnes mange slike tegn, dette er de vanligste  

Viser hvordan en OptionBox bygges opp med et enkelt eksempel  

I stedet for en vanlig tekstlink, kan man bruke en knapp i stedet. Her vises hvordan  

Et framset er en webside bestående av flere andre websider. Eksempelet viser oppbygningen av forskjellige typer freameset  

La serveren sette inn filer i HTML dokumentet ditt. Det er mange fordeler med dette, som bla enklere vedligehold. Hvis mange filer inneholder den samme informasjonen, kan denne informasjonen lagres i en egen fil og inkluderes i de filene der det er aktuellt. Da er det kun å oppdatere èn fil, og alle filer som inkluderer denne fila vil bli oppdatert! Filer som skal inkludere andre filer, må ha filnavnet "SHTML"  

Ved å legge inn denne koden vil browseren oppdateres hver minutt (60 sek)   

Hvis du ønsker å legge til en automatisk oppdatering av siden din kan du legge til denne meta tag i dokumentet. Kan også brukes til å videreroute en side.  

"alt" tekst er den teksten som kommer opp når du tar musepekeren over et bilde som er linket. For å få til dette på en tekstlink, bytter du bare ut "alt" med "title"  

Ønsker du å lage ditt eget icon som brukes når din webside legges til i favoritter? Det gjør du ved å skrive denne koden i <HEAD> på den aktuelle websiden (èn linje). For å lage et eget icon (16*16px) kan du bruke en icon-editor, feks "Microlangelo".  

Her vises koden bak en enkel mailform. Mailen sendes via en gratis tjenete fra PowerTech  

For å plassere margene på en webside, feks helt øverst til venstre, bruk denne koden (Legges i Body-tag)  

Viser 3 eksempler på bruk av iFrame / iLayer.  

Ved å legge denne koden inn i din html, vil det vises et felt på din side med innholdet angitt i "scr". Mer og mer brukt for integrering  

Ved å legge denne koden i <head> vil du automatisk bli overført til www.webressurs.no  

Metatags er viktig for at søkemotorer skal finne din webside, og få info om sidens innhold mm.