Gå til innhold

Guide: Hvordan få en skisse til å bli ferdig HTML

AnaXyd

Av AnaXyd
i Programmering og webutvikling

Anbefalte innlegg

Videoannonse

Videoannonse
Annonse
Drømmemannen

Drømmemannen

Skrevet
Skrevet (endret)
Skal headeren se slik ut da?

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="no" lang="no">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />

Se linken jeg ga deg over, dvs http://www.w3.org/QA/2002/04/valid-dtd-list.html. Du mangler <?xml... foran <!DOCTYPE, men da blir det som kjent problemer i IE6.

 

Lokaltog anbefaler å bruke HTML 4.01 i steden for XHTML, noe jeg er enig i.

Endret av balletryne
Lenke til kommentar
AnaXyd

AnaXyd

Skrevet
  • Forfatter
Skrevet
Hei dere..

Kunne dere hjulpet meg med pittelitte granne CSS koding?

 

Jeg har lagd meg et design, som jeg vil gjerne få brukt.

Så kunne noen hjulpet litt?

 

Mvh Henrik

 

post-122233-1196867727_thumb.jpg

Hei du! Har du et utsnitt av noe kode du har prøvd litt med?

 

Du må ihvertfall stable opp forskjellige diver, og sette på float på dem i CSS (right eller left, (eks: float:right)).

For å få dem til å passe, må du også bruke padding (eks: padding-right: 20px(du kan også bruke padding-top, padding-bottom, padding left eller padding 0 0 0 20px(?)))

 

Prøv litt selv, og post koden her, så skal jeg prøve å vise deg om du ikke skjønner.. :)

Lenke til kommentar
AnaXyd

AnaXyd

Skrevet
  • Forfatter
Skrevet
Skal headeren se slik ut da?

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="no" lang="no">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />

Se linken jeg ga deg over, dvs http://www.w3.org/QA/2002/04/valid-dtd-list.html. Du mangler <?xml... foran <!DOCTYPE, men da blir det som kjent problemer i IE6.

 

Lokaltog anbefaler å bruke HTML 4.01 i steden for XHTML, noe jeg er enig i.

Så det blir slik da:

 

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="no" lang="no">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />

Lenke til kommentar
Krom-stag

Krom-stag

Skrevet
Skrevet
Hei dere..

Kunne dere hjulpet meg med pittelitte granne CSS koding?

 

Jeg har lagd meg et design, som jeg vil gjerne få brukt.

Så kunne noen hjulpet litt?

 

Mvh Henrik

 

post-122233-1196867727_thumb.jpg

Hei du! Har du et utsnitt av noe kode du har prøvd litt med?

 

Du må ihvertfall stable opp forskjellige diver, og sette på float på dem i CSS (right eller left, (eks: float:right)).

For å få dem til å passe, må du også bruke padding (eks: padding-right: 20px(du kan også bruke padding-top, padding-bottom, padding left eller padding 0 0 0 20px(?)))

 

Prøv litt selv, og post koden her, så skal jeg prøve å vise deg om du ikke skjønner.. :)

Beklager å si det, men det du skrev når ser nesten ut som gresk for meg..

Lenke til kommentar
Vindstille

Vindstille

Skrevet
Skrevet (endret)
Så det blir slik da:
<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="no" lang="no">

<head>

<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />

Hvis du absolutt må bruke XHTML blir det slik:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nb-no" lang="nb-no">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 

Hvis du derimot går over til HTML blir det slik:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html lang="nb-no">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

Men da må du huske å gjøre om alle " />" endelsene til ">" på meta, link og br-elementene.

Endret av JonT
Lenke til kommentar
AnaXyd

AnaXyd

Skrevet
  • Forfatter
Skrevet (endret)
Beklager å si det, men det du skrev når ser nesten ut som gresk for meg..

 

Okay, bra du sier ifra. Ingen som skjønner alt fra første stund! :)

 

Hvis dette er HTML koden din:

 

Klikk for å se/fjerne innholdet nedenfor
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nb-no" lang="nb-no">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Div test</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>

<body>

<div id="wrapper"> <!-- Starting of content wrapper-->

<div id="innholdwrapper">
 <p>Tekst tekst tekst</p>
</div>

<div id="left">
 <p>Left container</p>
</div>

<div id="right">
 <p>Right container</p>
</div>

</div> <!--Ending content wrapper -->
</body>
</html>

 

Ta og legg inn det der, og lagre den som index.html. Lag også en ny fil som heter style.css i samme mappe som du lagrer index fila. Åpne style.css fila, og lim inn dette:

 

* {margin: 0; padding: 0; list-style-type: none; border: none; } /* Nullstiller nettleserforskjeller */

* .hidden { display: none; } /* Denne skjuler skrift i header (h1). Ikke endre html eller css siden det er bedre for søkemototer */

div#wrapper {
maargin: 0 auto;
whidth: 900px;
}

 

Jeg har nå lagt inn to feil i den siste med vilje. Se om du kan finne dem, og rette dem og se hva som skjer når det blir riktig!

 

Kom tilbake når du har gjort det.. :)

Endret av AnaXyd
Lenke til kommentar
Krom-stag

Krom-stag

Skrevet
Skrevet
Beklager å si det, men det du skrev når ser nesten ut som gresk for meg..

 

Okay, bra du sier ifra. Ingen som skjønner alt fra første stund! :)

 

Hvis dette er HTML koden din:

 

Klikk for å se/fjerne innholdet nedenfor
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nb-no" lang="nb-no">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Div test</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>

<body>

<div id="wrapper"> <!-- Starting of content wrapper-->

<div id="innholdwrapper">
 <p>Tekst tekst tekst</p>
</div>

<div id="left">
 <p>Left container</p>
</div>

<div id="right">
 <p>Right container</p>
</div>

</div> <!--Ending content wrapper -->
</body>
</html>

 

Ta og legg inn det der, og lagre den som index.html. Lag også en ny fil som heter style.css i samme mappe som du lagrer index fila. Åpne style.css fila, og lim inn dette:

 

* {margin: 0; padding: 0; list-style-type: none; border: none; } /* Nullstiller nettleserforskjeller */

* .hidden { display: none; } /* Denne skjuler skrift i header (h1). Ikke endre html eller css siden det er bedre for søkemototer */

div#wrapper {
maargin: 0 auto;
whidth: 900px;
}

 

Jeg har nå lagt inn to feil i den siste med vilje. Se om du kan finne dem, og rette dem og se hva som skjer når det blir riktig!

 

Kom tilbake når du har gjort det.. :)

Yes, kom hjem nå, fikk gjort det.

Hva nå?

Lenke til kommentar
AnaXyd

AnaXyd

Skrevet
  • Forfatter
Skrevet

Du så også hva som skjedde eller? :)

 

Ta og legg til dette, og se hva som skjer: (Feil er lagt inn her også)

 

div#left {
flooat: left;
width: 150pi;
heigt: auto;
}

Prøv også å skriv inn mer i left diven i HTML koden, og se hva som skjer!

 

 

Og etter det, kan du prøve å lage din egen CSS til den andre diven (right), og få den til å floate på høyresiden.. :)

 

Kom tilbake når du har fått til det også, så hopper vi over på neste steg!

Lenke til kommentar
ThorB

ThorB

Skrevet
Skrevet (endret)
ahh akkurat. hmm..

jeg ser enkle manipulasjoner av dom som f.eks legg til nytt element, slett element..

men det jeg er mest interessert i er bytt ut innhold til et element. (siden det er det jeg utelukket bruker innerhtml til)

er det noen som vet en crossbrowser metode for det?

node.replaceChild()

http://www.w3schools.com/dom/dom_nodes_replace.asp

sånn som jeg bruker innerhtml i dag, så plasserer jeg en div tag med en spesiell ID, der jeg vil at innhold skal skiftes ut...

 

hmm okey. fikk det vist til. men du må nå innrømme at det ble adskillig mere ryddig med innerhtml :p

 

<script>
function replacediv(){
var newText = document.createTextNode("min html!");
var mydiv = document.getElementById('mydivtag');
var mylastchild = mydiv.lastChild;

mydiv.replaceChild(newText,mylastchild);
};
</script>

<div id="mydivtag">test</div>

<a href="java script:replacediv()">replace</a>

løsningen over ser ut til å fungere i opera, IE og firefox.

 

da må jeg takke for alle tips.

kjekt å lære noe nytt såpass fort.

 

edit:

forresten hvordan får du til en node som interpreter html etter at texten er satt inn?

ser ut som man må opprette en ny node for å så velge hva slags html node dette er...

må si jeg liker bare å paste inn i fritekst altså.. litt tungvindt å drive å opprette noder i hytt og pine.

Endret av thor918
Lenke til kommentar
ThorB

ThorB

Skrevet
Skrevet
thor918: Hvis du leser noe av det jeg linket til (inkludert kommentarer) på forrige side ser du at innerHTML både er raskere og fører til mindre kode. Det er enkelt å la bruken av innerHTML bli et dilemma, om du vil.

;) ja ser.

men første kommentaren din var at innerHTML er en uting..

 

vil det si at du er nå blitt konvertert til en innerHTML-bruker?

jeg for min del føler at innerHTML forenkler koden som må til en god del.

hvis det blir en standard så blir nå jeg lykkelig i værtfall.

og at den er raskere i utførelse er jo en god ting for oss som benytter innerHTML.

 

egentlig er jeg mest nysgjerrig hvordan man kan erstatte innerHTML med

xml notasjonskodene som enkelte folk foreslår å benytte.

ser jo enkelt nok ut å legge inn tekst.. men å legge inn Html var ikke fult så enkelt. (ikke uten en masse kode i værtfall) så en post om at det ligger en html parser i javascript. men har ikke sjekket det ut.

 

jeg legger ballen død, hvis ingen har en luddig kode å dele som erstatter hele funksjonaliteten til innerHTML :p

Lenke til kommentar
AnaXyd

AnaXyd

Skrevet
  • Forfatter
Skrevet
Da var det også gjort..

Søren, nå glemte jeg jo hva jeg skulle vise deg.. :p

 

Men poenget med det jeg gjorde nå da, var å lære deg basicen med å sette opp diver osv. Du kan prøve å slenge på litt paddinger, og se hva som skjer da. Hvis du lar en floate til høyre, og vil at den skal stå litt inn mot siden, kjør en "padding-right: ?px;" (bytt ut ? med et tall)

 

Nå kan du prøve å sette opp designet ditt med dette, og samkjør det litt med førstesiden også. Skal oppdatere den med hva jeg har skrevet til deg nå, og skrive litt om å sette opp menyer osv.

Lenke til kommentar
Drømmemannen

Drømmemannen

Skrevet
Skrevet
thor918: Hvis du leser noe av det jeg linket til (inkludert kommentarer) på forrige side ser du at innerHTML både er raskere og fører til mindre kode. Det er enkelt å la bruken av innerHTML bli et dilemma, om du vil.

;) ja ser.

men første kommentaren din var at innerHTML er en uting..

 

vil det si at du er nå blitt konvertert til en innerHTML-bruker?

jeg for min del føler at innerHTML forenkler koden som må til en god del.

hvis det blir en standard så blir nå jeg lykkelig i værtfall.

og at den er raskere i utførelse er jo en god ting for oss som benytter innerHTML.

Jeg synes metoden er skitten og holder meg til standard kode så godt jeg kan. Skulle den bli standard vil den fortsatt være skitten i mine øyne, men i det minste standard :)

 

egentlig er jeg mest nysgjerrig hvordan man kan erstatte innerHTML med

xml notasjonskodene som enkelte folk foreslår å benytte.

ser jo enkelt nok ut å legge inn tekst.. men å legge inn Html var ikke fult så enkelt. (ikke uten en masse kode i værtfall) så en post om at det ligger en html parser i javascript. men har ikke sjekket det ut.

Du må bruke document.createElement("elementNavn") for hvert eneste element. Det er i bunn og grunn slik man manipulerer DOM-trær uansett scripting-/programmeringsspråk. Det finnes biblioteker som kan hjelpe deg, uten at jeg kan anbefale et her og nå.

 

Det finnes en XML-parser, ja, som gir deg et slikt DOM-tre, som så kan hukes på nettsiden. Enkleste er å søke.

Lenke til kommentar
ThorB

ThorB

Skrevet
Skrevet
Du må bruke document.createElement("elementNavn") for hvert eneste element. Det er i bunn og grunn slik man manipulerer DOM-trær uansett scripting-/programmeringsspråk. Det finnes biblioteker som kan hjelpe deg, uten at jeg kan anbefale et her og nå.

 

Det finnes en XML-parser, ja, som gir deg et slikt DOM-tre, som så kan hukes på nettsiden. Enkleste er å søke.

 

Ja, jeg har erfaring med xml og manipulasjoner av slikt. Mulig jeg virker mer grønn på emne enn jeg er :p

Men synes ikke er nødvendig å gjøre ting vanskeligere enn det er.

Det vil si det går adskillig fortere å skrive noe i fritekst enn å drive å knote med createelement.

Så i html sammenheng synes jeg ikke innerHtml er så dumt.

(f.eks du skal presentere en html-kode dynamisk. det er ganske oversiktlig å skrive denne koden på samme måte som resten av html-dokumentet. i stedenfor en masse createelement)

 

Hvis man finner i en xml-parser som gjør html-koden i fritekst om til et DOM-tre så har man muligheter til å erstatte innerHTML, men er det virkelig verdt det og er det virkelig så mye renere enn å bruke innerHTML(bortsett fra det med at innerHTML ikke er en standard)? Dette er vel mer et retorisk spørsmål....

 

Vet at det er enkelt å søke. Vanligvis er det sånn jeg bruker å finne løsninger på egen hånd.

Men siden du sa innerHTML var til å unngå, lurte jeg selvsagt på om kanskje du hadde et alternativ.

Til nå virker det som alternativet er å legge inn ett element om gangen.

Å det er en grei nok fremgangsmetode i et vanlig xml-skjema.

Lenke til kommentar
ThorB

ThorB

Skrevet
Skrevet
Å det er en grei nok fremgangsmetode i et vanlig xml-skjema.

Og hva er en XHTML-side? Eller en HTML-side hvis man ser bort ifra "uvelformethet" og MIME-type? :p

 

OK. Nok off topic. Over og ut.

måtte bare sende en siste melding.

jeg er helt enig i det du skriver(mulig jeg ordlegger meg dårlig).

eneste jeg er uenig om, er metoden metoden som benyttes for å legge inn informasjon.

 

å legge inn xml-kode, html, xhtml, DOM, whathever, inn i et allerede eksisterende tre, burde gå an å gjøres kjapt via fritekst. Med kjapt menes, ikke mange linjer med kode.

 

over og ut fra meg å ;)

Lenke til kommentar
Krom-stag

Krom-stag

Skrevet
Skrevet
Da var det også gjort..

Søren, nå glemte jeg jo hva jeg skulle vise deg.. :p

 

Men poenget med det jeg gjorde nå da, var å lære deg basicen med å sette opp diver osv. Du kan prøve å slenge på litt paddinger, og se hva som skjer da. Hvis du lar en floate til høyre, og vil at den skal stå litt inn mot siden, kjør en "padding-right: ?px;" (bytt ut ? med et tall)

 

Nå kan du prøve å sette opp designet ditt med dette, og samkjør det litt med førstesiden også. Skal oppdatere den med hva jeg har skrevet til deg nå, og skrive litt om å sette opp menyer osv.

Beklager at jeg maser litt, men hva nå? :p

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste

  • Hvem er aktive   0 medlemmer

    • Ingen innloggede medlemmer aktive
×
×
  • Opprett ny...