Du må være registrert og logget inn for å kunne legge ut innlegg på freak.no
X
LOGG INN
... eller du kan registrere deg nå
Dette nettstedet er avhengig av annonseinntekter for å holde driften og videre utvikling igang. Vi liker ikke reklame heller, men alternativene er ikke mange. Vær snill å vurder å slå av annonseblokkering, eller å abonnere på en reklamefri utgave av nettstedet.
  7 1679
Hei!

Skal lære meg basic HTML, og har kjøpt en bok hvor det er en rekke øvelser. Jeg har kommet over et problem, som går ut på at browseren automatisk viser teksten jeg skriver over to linjer (tekst: Ola Nordmann That's my name.), selv om det står at den skal vise den kun på én linje, pga at browseren visstnok ignorerer det som heter en carriage return.


Se koden:

<html>
xx<head>
xxxx<title>Practice</title>
xx</head>
xx<body>
xxxx<p>Ola Nordmann</p>
<p>That’s my name.</p>
xx</body>
</html>

Denne blir altså displayed automatisk over to linjer i Chrome, i stedet for kun én slik det står at den skal gjøre i boka. Når jeg prøver å skrive <p> og </p> for å lage to linjer, vises disse tegnene i browseren i stedet for å lage avsnitt.

Her er URLen jeg bruker: http://asmarterwaytolearn.com/htmlcss/practice-2-1.html

Jeg bruker Text Edit på Mac for å skrive koden.

Hva skyldes dette - hva gjør jeg feil?

På forhånd takk for hjelpen!
Sist endret av clandestine; 20. oktober 2018 kl. 14:49.
Hva heter boken din, og hvor gammel er den...?
Dette vil vises over en linje:

"<p>Ola Nordmann That's my name.</p>"

Dette vil vises over to linjer:

"<p>Ola Nordmann</p>
<p> That's my name.</p>"

Dette vil også vises over to linjer:

"<p>Ola Nordmann<br>That's my name.</p>"

Med andre ord kan du bruke <br> til linjeskift. Det blir forøvrig langt mer intressant med plassering av tekst og linjer når du begynner med CSS.
Sist endret av brennesle; 20. oktober 2018 kl. 14:59.
Tusen takk for gode svar, og takk til deg Brennesle. Det er denne boka: https://www.amazon.com/Smarter-Way-L.../dp/B00ULX5FT2

Den er fra 2015.

Er denne boka for gammel - bør jeg heller bruke Code Academy for å lære CSS/HTML?
Boken er jo ikke for gammel, Språket forandrer seg ike men CodeAcademy er en enkelt,rask og brukervennelig plass for å lære HTM,CSS og Javascript
Du kan bruke <span> istedet for <p>, <p> skal brukes for paragrafer, mao ny linje. Men det finnes en del løsninger på problemet ditt:

Løsning 1: Bruk av <span> i stedet for <p>

Kode

<html>
    <head>
        <title>Practice</title>
    </head>
    <body>
        <span>Ola Nordmann</span>
        <span>That’s my name.</span>
    </body>
</html>
Løsning 2: Bruk av CSS til å override "display" egenskapen i <p> taggen

Kode

<html>
    <head>
        <title>Practice</title>
        <style type="text/css">
            p {
                display: inline;
            }
        </style>
    </head>
    <body>
        <p>Ola Nordmann</p>
        <p>That’s my name.</p>
    </body>
</html>
Løsning 3: Bruk av inline CSS til å override "display" egenskapen i <p> taggen

Kode

<html>
    <head>
        <title>Practice</title>
    </head>
    <body>
        <p style="display: inline;">Ola Nordmann</p>
        <p style="display: inline;">That’s my name.</p>
    </body>
</html>
Alle disse tre løsningene vil gi deg teksten «Ola Nordmann That's my name» på en enkel linje. Men jeg ville ha valg løsning 1 fremfor de to andre, løsning 3 er nok den «dårligste».
▼ ... noen måneder senere ... ▼
Limited edition
Moff's Avatar
Sitat av 0xFF Vis innlegg
Du kan bruke <span> istedet for <p>
Vis hele sitatet...
Bør være litt forsiktig med å foreslå <span> som en erstattning for <p>; disse to har helt forskjellige bruksområder.

Det var litt vanskelig for meg å forstå nøyaktig hva det er problemet er. Slik du (TS) beskriver det, så sier boken din at denne koden:

Kode

<p>Ola Nordmann</p>
<p>That’s my name.</p>
... skal vises på én linje fordi nettleseren ignorerer linjeskift (carriage return).

Dette er feil, og hvis boken din faktisk sier dette, så bør du ikke bruke den for å lære HTML.

Nettleseren din skal vise dette som to linjer, slik:

Ola Nordmann

That’s my name.
Vis hele sitatet...
Legg merke til det ekstra mellomrommet mellom linjene; dette er også noe nettleseren din skal vise. Selv om det teknisk sett er to linjer med tekst, så skal det være et tydelig markert mellomrom mellom dem. Det er fordi <p> (paragraph) er en avsnitt-kode. Et avsnitt er en sammenhengende tekst som er adskilt fra andre elementer med et lite mellomrom (ikke et linjeskift, men en margin).

Jeg kan også utdype dette med at nettleseren "ignorerer" linjeskift i koden din. Dette er korrekt. I et HTML-dokument så har ikke linjeskift noen betydning. Hvis du skriver koden din slik:

Kode

Ola
Nordmann
... så vil nettleseren din vise det slik:
Ola Nordmann
Vis hele sitatet...
Om du derimot VIL ha et linjeskift på et bestemt sted - kun et linjeskift, ikke noe avsnitt eller annet ræl - så skal du bruke <br> ("break"), slik:

Kode

Ola<br>
Nordmann
Jeg sjekket linken din, og det ser ut som det er et problem med måten du lagrer nettsiden din på. Hvis du tar en kikk på kildekoden for nettsiden så vil du se at du har et HTML-dokument med <head> og <body>-tags som normalt, men inne i <body>-taggen din så har du enda et HTML-dokument. Et annet problem er at noen av <-tegnene er HTML-encoded, slik at de tolkes som symbolet "<" i stedet for koden "<". Alle symboler kan encodes på en måte som gjør at datamaskinen tolker dem som et symbol i stedet for en kode. "<" encodes som "&lt;", mens > encodes som "&gt;". LT står for "less than" og GT står for "greater than", som er matematiske operatorer.

Her er kildekoden til nettsiden din:

Kode

<html><head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-45123781-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-45123781-1');
</script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-114607373-1');
</script><title>Practice code</title><link rel="stylesheet" href="exercise-answers.css" media="screen"><style>
  .amzAd {
    width: 110px;
    height: auto;
    float:left;
    margin-right: 30px;
}
.clear {
    clear:both;
}

</style>
</head><body>&lt;html><br>&nbsp;&nbsp;&lt;head><br>&nbsp;&nbsp;&nbsp;&nbsp;&lt;title>Practice&lt;/title><br>&nbsp;&nbsp;&lt;/head><br>&nbsp;&nbsp;&lt;body><br>&nbsp;&nbsp;&nbsp;&nbsp;Mark&nbsp;Myers<br>&nbsp;&nbsp;&lt;/body><br>&lt;/html><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</body></html>
Alt ser bra ut helt til du kommer ned til <body>. Der ser du at du har begynnelsen på enda et HTML-dokument med encoding;

Kode

<body>&lt;html><br>&nbsp;&nbsp;&lt;head><br>...
Dette er grunnen til at ting ser ut som det gjør. Jeg kan ikke svare for hvorfor dette skjer, men noe sier meg at du må gjøre noe med måten du lagrer og publiserer nettsiden din på. Hvilken tjeneste er det du bruker?