Gå til innhold

Ustedalen trenger hjelp til HTML og CSS!

Ustedalen

Anbefalte innlegg

Ustedalen

Ustedalen

Skrevet
Skrevet

Hei alle sammen!

 

Jeg har nå begitt meg ut i HTML og CSS verden, i håp om at jeg en dag kan lage en ganske fin og funksjonable side. Men selvsagt støter jeg på problemer, som alle dere andre sikkert gjorde. Derfor tenker jeg at jeg kan like greit åpne opp en egen tråd, der jeg spør de spørsmålene jeg har, istedenfor å lage mangfoldige tråder.

 

Til å begynne med kan jeg si at jeg prøver å lære fra HTML Dog i starten av.

 

I allefall, jeg har sitti å lest og prøvd ut en del, og har til min store overraskelse synes dette har vært ganske så interessant. Akkurat nå har jeg kommet til hvordan man setter bilder inn i kodene, og har støtt på et problem.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Jon prøver seg på HTML-koding</title>
</head>
<body>
<h1>En hjemmeside</h1>
<h2>Er hva dette er</h2>
<p>Dette er riktig nok noe jeg bare lager for å lære meg HTML-koding</p>
<p>Ganske spennende faktisk</p>
<p>Litt artig å leke med <em>italic/kursiv</em> og <strong>bold/fet</strong>skrift</p>
<ul>
   <li>Lage lister lærer jeg også</li>
   <li>Det er ganske interessant</li>
   <li>
         Jeg prøver å lage lister av listen
         <ol>
            <li>Noe som jeg faktisk klarte</li>
            <li>Enda en gang</li>
         </ol>
   </li>
   <li>Artig dette</li>
<h2>Hva er min ekte hjemmeside?</h2>
<p><a href="http://www.ustedalen.com">ustedalen.com</a></p>
<h4>Si et bra forum!</h4>
<p><a href="http://www.hw.no">hw</a></p>
<h4>Også prøver vi å legge ut et bilde av brukeren Mr.Berg sin avantar:</h4><img scr="http://www.diskusjon.no/uploads/av-27757.jpg" width="80" hight="80" alt="Mr.Berg's logo" />
</body>
</html>

 

Det som er problemet er at jeg ikke får frem Mr.Berg sin logo. Hva har jeg gjort galt?

 

Og er det nødvendig å skrive ned width og hight for vært bilde? Hvis jeg da vil forandre størrelsen på et bilde, men ikke så betydelig at jeg gjør det i photoshop, kan jeg da bare forandre bildet her?

 

Og hvorfor er det 

/>

som end-tag på bilde, istedenfor 

</img>

? Er det noe godt svar på det, eller er det noe jeg bare må lære meg det, og godta at det er slik?

 

Takker for all hjelp! :)

Lenke til kommentar

Videoannonse

Videoannonse
Annonse
Arve Systad

Arve Systad

Skrevet
Skrevet (endret)
Det som er problemet er at jeg ikke får frem Mr.Berg sin logo. Hva har jeg gjort galt?

 

Og er det nødvendig å skrive ned width og hight for vært bilde? Hvis jeg da vil forandre størrelsen på et bilde, men ikke så betydelig at jeg gjør det i photoshop, kan jeg da bare forandre bildet her?

6255139[/snapback]

 

Akkurat kvifor du ikkje får vist Mr.Berg sin avatar kan eg faktisk ikkje svare sikkert på, det er mogleg at serverane her ikkje tillet at biletet opnast frå andre websider slik at dei kan "leeche" bandbreidde. Prøvd med andre bilder?

 

Det skal ikkje vere nødvendig med width og height på kvart bilete, nei. Bileta bør du endre størrelsesmessig i Photoshop, og ikkje "on the fly" i ein nettlesar.

 

Og hvorfor er det 
/>

som end-tag på bilde, istedenfor 

</img>

? Er det noe godt svar på det, eller er det noe jeg bare må lære meg det, og godta at det er slik?

 

Du skal ikkje ha med </img> i img-elementet fordi elementet i seg sjølv ikkje har noko innhald (kun attributtar som gir nettlesaren den informasjonen den treng), og du kan difor ikkje lukke det heller. I XHTML (...til forskjell frå HTML) må alle element lukkast, og det er difor du i XHTML må skrive /> i staden for berre > til slutt i "sjølvlukkande" element som img,hr,br. Eg foreslår igrunn at du held deg til HTML 4.01 Strict inntil vidare, du har ingen grunn til å benytte XHTML. Gjer det enklast mogleg for deg sjølv - bruk HTML-doctype og ikkje avslutt element med /> :)

 

 

Flott å sjå måten du har komt i gang på ellers forresten, kodebiten du har i innlegget ditt er nesten perfekt :)

 

1. HTML-doctype i staden for XHTML-doctype, rett og slett fordi du er nøydd å sende MIME-type og tegnsetting med serverside-språk om du skal bruke XHTML, noko du kan vente litt med å tenke på.

 

2. Du har gløymt å lukke ul-elementet ditt ;)

 

3. Du hoppar rett frå h2 til h4 - det kan du ikkje gjere. Den overskrifta som i ditt tilfelle er h4 må vere h3 for at strukturen skal bli korrekt.

 

Like før du må begynne å lære deg CSS - og det er då det blir artig å holde på med! :)

Endret av Arve Systad
Lenke til kommentar
Ustedalen

Ustedalen

Skrevet
  • Forfatter
Skrevet (endret)

Takker for svar :)

 

Jeg prøvde å forandre koden til et annet bilde, utenfor diskusjon.no nettverket, men allikevel funket det ikke.

 

<h4>Også prøver vi å legge ut et bilde et bilde fra en eller annen nettside:</h4><img scr="http://www.hoppern.com/gfx/header.jpg alt="Bilde" />

Når jeg ser på egenskapene til bildet (høyreklikker på der bildet skal være i nettleseren), så står det Ikke tilgjengelig på alt (protokoll, type, adresse (URL), Størrelse osv..).

 

Jeg prøvde meg også på å lage en tabell, noe som ikke gikk fullt så bra som det ble vist i tutorialen.

 

<table>
  <tr>
     <td>Kollone 1, celle 1</td>
     <td>Kollone 1, celle 2</td>
     <td>Kollone 1, celle 3</td>
  </tr>
  <tr>
     <td>Kollone 2, celle 1</td>
     <td>Kollone 2, celle 2</td>
     <ts>Kollone 2, celle 3</td>
  </tr>
</table>

 

Det virker som tabellene bytter plasser med hverandre :ermm:

 

Noen som har en ide til hva som må gjøres?

 

Hvis vi også ser på tabellen en gang til, så ser vi at <table> står lenger inn enn <tr> som står igjen lenger inn enn <td>!

<table>
  <tr>
     <td>Kollone 1, celle 1</td>

Hva slags funksjon har det å si, ved at det står slik?

 

Edit: Leif!

Endret av Ustedalen
Lenke til kommentar
Blib

Blib

Skrevet
Skrevet (endret)

Skal vi se:

1: Du har glemt en " på den nye bilde-taggen din.

2: Tabellen din er helt rett. Men innholdet er feil. <tr> er ny linje, <td> er ny kolonne. <ts> finnes ikke :p

3: Hvor langt "inne" ting står er uvesentlig for utseendet, det bare øker lesbarheten.

Edit: 4: Kolonne :tease:

Endret av Blib
Lenke til kommentar
Haraldson

Haraldson

Skrevet
Skrevet (endret)

Prøv å laste opp et bilde til serveren du tester på, og kutt ut alle de eksterne bildelinkene! ;)

 

Angående den h4-en, den var vel muligens litt lang til å være en tittel?

 

 

Artig eksempel i førsteposten, forresten :p

Endret av Mr.Berg
Lenke til kommentar
hockey500

hockey500

Skrevet
Skrevet (endret)

sånn skal det gjøres:

<img src="link/til/bilde.png" alt="forklarende tekst" />

og ikke slik

<img src="link/til/bilde.png alt="forklarende tekst" />

eller 

<img scr="link/til/bilde.png" alt="forklarende tekst" />

 

skriv SRC (for source), ikke SCR. den med at du glemte en " antar jeg var en glippp.

 

EDIT: og nei, ikke bruk store bokstaver slik jeg gjorde ovenfor, det var bare for å fremheve poenget. tagger med store bokstaver er ugyldig xhtml.

 

EDIT: slått av spock

Endret av hockey500
Lenke til kommentar
Ustedalen

Ustedalen

Skrevet
  • Forfatter
Skrevet

Setter igang med flere spørsmål, og håper dere ikke hater meg for at jeg er dum innen koding :blush:

 

Prøver nå å lage et skjema, og jeg får til der du skal skrive inn navnet og tekstfeltet, men ikke knappene og "radioene".

 

<form action="contactus.php" method="post">
<p>Navn:</p>
<p><input type="text" name="navn" value="Ditt navn" /></p>
<p>Kommentarer:</p>
<p><textarea name="kommentarer" rows="5" cols="20">Din kommentar her</textarea></p>
<p>Er du:</p>
<p>input type="radio" name="erdu" value="mann" /> Mann</p>
<p>input type="radio" name="erdu" value="kvinne" /> Kvinne</p>
<p>input type="radio" name="erdu" value="kjønnsforvirra" /> Kjønnsforvirra</p>
<p>input type="submit" value="Godta" /></p>
<p>input type="reset" value="Fjern alt" /></p>
</form>

 

Ser dere noe feil nsom jeg må rette på? Mener jeg har fulgt alt etter skjema!

Lenke til kommentar
Ustedalen

Ustedalen

Skrevet
  • Forfatter
Skrevet

Takk hockey500, det hadde jeg ikke oppdaget!

 

Hva er egentlig forskjellen mellom <p> og <br>?

 

Dere må unnskylde meg for at jeg kommer med så mange dumme spørsmål her. Håper dere tilgir meg, og svarer meg på det jeg spør om, selv om det er til tider veldig dumme spørsmål og logiske svar på det jeg spør om. For jeg må virkelig si at jeg føler jeg har lært en god del i dag. Takk :)

Lenke til kommentar
Haraldson

Haraldson

Skrevet
Skrevet (endret)

<p> er i denne sammenhengen ganske unødvendig.

 

spock84: Ikke si det og få det til og høres så generelt ut. Avsnitt skal merkes med <p>, altfor mange misbruker linjeskift.

 

 

Edit@Ustedalen: <p> markerer avsnitt, <br> linjeskift.

 

To avsnitt etter hverandre skal markeres slik:

 

<p>Blabla</p>
<p>Blabla mer blabla</p>

Linjeskift er totalt unødvendig og feil i denne sammenhengen, avstanden mellom avsnittene skal defineres i CSS.

Endret av Mr.Berg
Lenke til kommentar
AlecTBM

AlecTBM

Skrevet
Skrevet (endret)

Jeg synes det er feil at dere lærer han å skrive lukkete img koder når dette er html og ikke xhtml.

 

f.eks

<img src="link/til/bilde.png" alt="forklarende tekst" />

som hockey500 skrev er xhtml ikke html, lettest å være litt fri i starten og leke seg litt før man starter med å lære seg alle de strenge reglene innen xhtml.

skriv koden slik:

<img src="link/til/bilde.png" alt="forklarende tekst">

img trenger ikke å lukkes.

 

Lykke til videre med programeringa.

 

Edit: Html skrivinga, ikke programeinga siden html ikke er et programerings språk i føge noen smarte hoder på forumet.

 

MVH: AlecTBM :tease:

Endret av AlecTBM
Lenke til kommentar
hockey500

hockey500

Skrevet
Skrevet

hva er poenget med å gå veien via html? å kalle reglene strenge er vel en overdrivelse, det er enkelte strengere krav, men å lære seg forskjellen på html og xhtml tar jo 10 min.

 

noen regler:

ikke store bokstaver i tagger og attributter

alle tagger må avsluttes

alle tagger må avsluttes i riktig rekkefølge

må bruke "" rundt verdier

noen elementer er påkrevd, f.eks. <title>

 

det var det jeg kom på i hodet. ikke store forskjellen mao

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
×
×
  • Opprett ny...