/ Forside / Teknologi / Udvikling / HTML / Nyhedsindlæg
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
HTML
#NavnPoint
molokyle 11184
Klaudi 5506
bentjuul 3377
severino 2040
smorch 1950
strarup 1525
natmaden 1396
scootergr.. 1320
e.c 1150
10  miritdk 1110
CSS: Styling af <H1>
Fra : Kurt Hansen


Dato : 29-09-10 15:59

Jeg har brug for at skrive nogle linier i H1 - dels for at fremhæve i
stor, fed størrelse og en farve på siden og dels for at optimere for
søgemaskiner. Eksempel:

<H1>Frode Stengaard</H1>, klaver

Som standard laver H-tags et linieskift, så hvordan får jeg det til at
stå på samme linie?

Jeg er klar over, at ", klaver" kommer til at stå med defaultværdien
for det sted hvor det optræder, f.eks. i BODY. I dette tilfælde er det
imidlertid placeret i en tabelcelle og så er det jo det der gælder.

Generel gælder for TD:
   {
   font-family: arial, helvetica, sans-serif;
   font-size: 10pt;
   }

Afhængigt af hvor stor størrelse jeg vælger for <H1>, er 10pt måske i
underkanten og det skal under alle omstændigheder være med sort
skrift, så det skal måske også styles særskilt?

En komplet tabelcelle kunne se således ud:

Joachim Andersen
Complete Recordings, vol. 7
Works for flute and piano
Thomas Jensen, flute - Frode Stengaard, piano

Personnavnene skal være med H1 og de to linier med værktitel m.m. skal
sættes med H2.

 
 
Jens Peter Karlsen (29-09-2010)
Kommentar
Fra : Jens Peter Karlsen


Dato : 29-09-10 16:44

display: inline

Regards Jens Peter Karlsen.

On Wed, 29 Sep 2010 16:59:09 +0200, Kurt Hansen <kurt@ugyldig.dk>
wrote:

>Som standard laver H-tags et linieskift, så hvordan får jeg det til at
>stå på samme linie?

Kurt Hansen (29-09-2010)
Kommentar
Fra : Kurt Hansen


Dato : 29-09-10 17:55

On Wed, 29 Sep 2010 17:43:47 +0200, Jens Peter Karlsen
<jpkarlsen@mvps.org> wrote:

>>Som standard laver H-tags et linieskift, så hvordan får jeg det til at
>>stå på samme linie?

>display: inline

Got it! Den leger jeg lidt med

Rune Jensen (29-09-2010)
Kommentar
Fra : Rune Jensen


Dato : 29-09-10 09:48

On 29 Sep., 16:59, Kurt Hansen <k...@ugyldig.dk> wrote:
> Jeg har brug for at skrive nogle linier i H1 - dels for at fremhæve i
> stor, fed størrelse og en farve på siden og dels for at optimere for
> søgemaskiner.

Man bruger ikke H-tags for at fremhæve noget. Det bruger man CSS til,
hvis ikke det har indholdsmæssig betydning. Altså hvis det bare er for
udseendet af teksten. Hvis man vil fremhæve en tekst, og den tekst
ændrer betydningen af teksten, bør bruges <strong> og <em> i stedet.

Eksempler:
<p>Du må <strong>ikke</strong> låne bilen</p>
<p>Du må ikke <strong>låne</strong> bilen</p>
<p>Du må ikke låne <srtong>bilen</strong></p>

Du må *ikke* låne bilen
Du må ikke *låne* bilen
Du må ikke låne *bilen*

Mht. vigtigheden af H-tags for søgemaskiner, her skal man nok tænke
omvendt. Brug H-tags til at inddele din side med overskrifter, sådan
det får en slags disposition. For nogle blinde med skærmlæsere, vil
det lette deres navigering. Du kan få din disposition ved at bruge Web
Developer for Firefox eller i Opera, som har den funktion indbygget.

> Eksempel:
>
> <H1>Frode Stengaard</H1>, klaver
>
> Som standard laver H-tags et linieskift, så hvordan får jeg det til at
> stå på samme linie?

H1 er et overskrift-tag, så hvis ikke det du vil lave er en
overskrift, bør ikke bruges H1. Eller andre H-tags.

Hvis du vil have noget til at stå på samme linje, f.eks. ved en person
og et telefon nummer, kan man bruge CSS på selve tagget eller bruge en
<span>.

Eksempel:
<p>Tekst tekst <span style="word-wrap: nowrap">telefon: 12 34 56 78</
span>, mere tekst mere tekst mere tekst.</p>

Så vil "telefon: 12 34 56 78" altid hænge sammen på samme linje.

> Jeg er klar over, at ", klaver" kommer til at stå med defaultværdien
> for det sted hvor det optræder, f.eks. i BODY. I dette tilfælde er det
> imidlertid placeret i en tabelcelle og så er det jo det der gælder.
>
> Generel gælder for TD:
>         {
>         font-family: arial, helvetica, sans-serif;
>         font-size: 10pt;
>         }

Du må bestemme, hvilken tags ", klaver" skal tilhøre. Det kan ikke stå
for sig selv. Er det en del af overkskriften, skal det ligge i et H-
tag. Er det en del af et afsnit, skal det lægges i en <p>. Hvis du vil
have forskellig størrelse, på teksten i en overskrift, kan du bruge en
<span> og så CSS. F.eks.:

<h1>Overskrift <span style="font-size: 12px">lille tekst som del af
overskriften</h1>

Teksten i span vil så stå med 12px font-størrelse, hvilket som regel
er mindre end størrelsen for H!, men for at være sikker, og for at få
ens størrelse i alle browsere, sætter man normal selv font-størrelse
for H-tags i sit CSS-ark:

h1{
font-size: 20px;
}

Jeg bruger så normalt em eller % til font-størrelse.

> Afhængigt af hvor stor størrelse jeg vælger for <H1>, er 10pt måske i
> underkanten og det skal under alle omstændigheder være med sort
> skrift, så det skal måske også styles særskilt?

Se ovenfor

> En komplet tabelcelle kunne se således ud:
>
> Joachim Andersen
> Complete Recordings, vol. 7
> Works for flute and piano
> Thomas Jensen, flute - Frode Stengaard, piano
>
> Personnavnene skal være med H1 og de to linier med værktitel m.m. skal
> sættes med H2.

Så er du nødt til at skikke en link til din side for man kan se, om
det er en god idé.


MVH
Rune Jensen

Kurt Hansen (29-09-2010)
Kommentar
Fra : Kurt Hansen


Dato : 29-09-10 17:54

On Wed, 29 Sep 2010 08:48:05 -0700 (PDT), Rune Jensen
<runeofdenmark@gmail.com> wrote:

>On 29 Sep., 16:59, Kurt Hansen <k...@ugyldig.dk> wrote:
>> Jeg har brug for at skrive nogle linier i H1 - dels for at fremhæve i
>> stor, fed størrelse og en farve på siden og dels for at optimere for
>> søgemaskiner.
>
>Man bruger ikke H-tags for at fremhæve noget. Det bruger man CSS til,
>hvis ikke det har indholdsmæssig betydning. Altså hvis det bare er for
>udseendet af teksten. Hvis man vil fremhæve en tekst, og den tekst
>ændrer betydningen af teksten, bør bruges <strong> og <em> i stedet.
>
>Eksempler:
><p>Du må <strong>ikke</strong> låne bilen</p>
><p>Du må ikke <strong>låne</strong> bilen</p>
><p>Du må ikke låne <srtong>bilen</strong></p>
>
>Du må *ikke* låne bilen
>Du må ikke *låne* bilen
>Du må ikke låne *bilen*

Yep, det er jeg med på.

>Mht. vigtigheden af H-tags for søgemaskiner, her skal man nok tænke
>omvendt. Brug H-tags til at inddele din side med overskrifter, sådan
>det får en slags disposition. For nogle blinde med skærmlæsere, vil
>det lette deres navigering. Du kan få din disposition ved at bruge Web
>Developer for Firefox eller i Opera, som har den funktion indbygget.

Hvori består "omvendt"?

Jeg er, for så vidt, med på hvad du mener og hvis min side indeholdt
længere tekster/artikler, ville jeg anskue H-elementer på den måde.
Det gør den imidlertid ikke. Som det vil fremgå af den berømte
(berygtede?) side www.danacord.dk/index2.html, præsenteres der "data"
og jeg finder derfor ingen anvendelse for H-elementer i den form du
beskriver.

>> Eksempel:
>>
>> <H1>Frode Stengaard</H1>, klaver
>>
>> Som standard laver H-tags et linieskift, så hvordan får jeg det til at
>> stå på samme linie?
>
>H1 er et overskrift-tag, så hvis ikke det du vil lave er en
>overskrift, bør ikke bruges H1. Eller andre H-tags.

90% af alle de søgninger der rammer "min" side, er ved søgninger efter
komponist- eller kunstnernavne. Jeg finder det derfor relevant og
optimalt at bruge H-elementer til at fremhæve disse. Fremhæve = Læs:
for søgemaskiner.

[KLIP "word-wrap: nowrap"]

>h1{
> font-size: 20px;
>}
>
>Jeg bruger så normalt em eller % til font-størrelse.

Brugen af px og/eller pt er en af de ting jeg er i gang med at ændre.
En skrift på 10px er jo ikke ret stor på en skærm med høj opløsning,
så en relativ værdi må være passende.

'em' har jeg dog aldrig rigtig forstået. Den er jo relativ i forhold
til en given skriftstørrelse, men hvilken skriftstørrelse?

P.t. har jeg 10pt i BODY, men da det ikke gælder for f.eks. <TD> og
<P>, har jeg angive 10pt for disse også.

>> En komplet tabelcelle kunne se således ud:
>>
>> Joachim Andersen
>> Complete Recordings, vol. 7
>> Works for flute and piano
>> Thomas Jensen, flute - Frode Stengaard, piano
>>
>> Personnavnene skal være med H1 og de to linier med værktitel m.m. skal
>> sættes med H2.
>
>Så er du nødt til at skikke en link til din side for man kan se, om
>det er en god idé.

Det er netop problemet. Den eksisterende side, som blev grundlagt i
1996 og ikke siden har ændret sig nævneværdigt. Efterhånden som jeg er
blevet "klogere", har jeg skiftet metoder og siden fremstår i dag som
en syndig blanding af alle mulige "løsninger" på de samme ting.

Jeg har derfor opgivet at fejlrette i hver enkelt fil og er i stedet
begyndt at lave nogle faste skabeloner, som data efterhånden flyttes
over i.

Hvis du går ind på www.danacord.dk/index2.html og vælger en vilkårlig
CD, kan du prøve at browser lidt frem og tilbage (øverste højre
hjørne) og konstare, at ikke to sider er ens. At henvise til en
specifik, eksisterende side, vil være meningsløst så længe jeg ikke
har redigeret koden.

Rune Jensen (29-09-2010)
Kommentar
Fra : Rune Jensen


Dato : 29-09-10 13:21

On 29 Sep., 18:53, Kurt Hansen <k...@ugyldig.dk> wrote:

> >Mht. vigtigheden af H-tags for søgemaskiner, her skal man nok tænke
> >omvendt.
>
> Hvori består "omvendt"?

At de fleste tror, at SEO stopper ved Google, for så har folk jo
fundet siden....

God SEO kræver, man tænker brugeren først. ikke Google. Der er kun
nogle få undagelser, som f.eks. "Duplicate content", som er
søgemaskinespecifikt. Ellers er langt det meste af hvad man laver
ifbm. søøgeoptimering at stille tingene korrekt og overskueligt op,
lave gode tekster, gøre siden tilgængelig for alle brugere,
brugervenlig osv.

Men f.eks. har du en forrige og en næste knap. Det er jo ikke særligt
sigende for brugeren, i forhold til, hvis de knapper også indeholdt
titel på forrige og næste CD?

Man kunne også kigge på filnavnene, om de fortæller noget om
indholdet. Og så er det i frameset, så dér er visse ting, man lige
skal være opmærksom på ved bookmarking f.eks. Man kunne nok lave en
lille liste over ting, som kunne forbedres, og som alt i alt ville
forøge sidens chancer på søgemaskinerne. Har du sigende ALT på dine
billeder? Osv.

> Jeg er, for så vidt, med på hvad du mener og hvis min side indeholdt
> længere tekster/artikler, ville jeg anskue H-elementer på den måde.
> Det gør den imidlertid ikke. Som det vil fremgå af den berømte
> (berygtede?) sidewww.danacord.dk/index2.html, præsenteres der "data"
> og jeg finder derfor ingen anvendelse for H-elementer i den form du
> beskriver.
>
> >> Eksempel:
>
> >> <H1>Frode Stengaard</H1>, klaver
>
> >> Som standard laver H-tags et linieskift, så hvordan får jeg det til at
> >> stå på samme linie?

OK, nu forstår jeg hvad du mente, for nu tog jeg lige et kig på
siden ;)

Og du er ikke den eneste, som er frustreret over de begrænsninger, som
sættes med HTML i dag. Egentlig bør man kunne bruge H-tags ikke kun på
overskrifter til artikler, men til alt, som er selvstændige dele af
siden også - det kan man i HTML5, hvor der også vil være en del
udvidede tags, men ikke i HTML4. Så der må man leve med det lidt
endnu.

Men jeg har kigget på http://www.danacord.dk/frmsets/records/697-98-r.html

Som har:

Scandinavian Classics, Vol. 3
Recorded 1949-1953
Danish Radio Symphony Orchestra
Erik Tuxen / Thomas Jensen
incl. Emil Telmányi, violin

Jeg tror umiddelbart, jeg ville sætte det op som:

<h1>Scandinavian Classics, Vol. 3</h1>
<p>Recorded 1949-1953</p>
<h2>Danish Radio Symphony Orchestra</h2>
<h3>Erik Tuxen / Thomas Jensen</h3>
<h3>incl. Emil Telmányi, violin</h3>

....men den er ikke nem. Normalt ville jeg nemlig sætte sådan noget på
definition lists, fordi det reelt er en beskrivelse af produktet i
"faktatermer". F.eks.:

<h1>Scandinavian Classics, Vol. 3</h1>
<p>Recorded 1949-1953</p>
<dl>
<dt>Scandinavian Classics, Vol. 3</dt>
<dd>Danish Radio Symphony Orchestra
<ul>
<li>Erik Tuxen / Thomas Jensen</li>
<li>incl. Emil Telmányi, violin</li>
</ul>
</dd>
</dt>
<dl>

....hvilket så giver redundans i listen og overskriften, plus det er
meget kode for én definition.

Men man er nødt til at tænke lidt over, hvordan de forskellige
(vigtige) "ting" er forbundet, og så forsøge at få det med i sin HTML..
Om ovenstående er korrekt kodet, er jeg ikke helt sikker på, men du
har da ret i, at instrumentet (her violin) for så vidt ikke er
interessant på den måde. Med mindre det også er søgeord. Hovedsagen
her vil jeg mene er, at det vil give mening for en bruger, hvis du gør
det på samme måde hver gang på alle sider.

> >H1 er et overskrift-tag, så hvis ikke det du vil lave er en
> >overskrift, bør ikke bruges H1. Eller andre H-tags.
>
> 90% af alle de søgninger der rammer "min" side, er ved søgninger efter
> komponist- eller kunstnernavne. Jeg finder det derfor relevant og
> optimalt at bruge H-elementer til at fremhæve disse. Fremhæve = Læs:
> for søgemaskiner.

Klart nok ;)

Derfor ville jeg også kigge på, hvad der giver mest mening for
brugeren. I sidste ende, er særligt Google optimeret udfra hvordan en
bruger vil opfatte siden. Så det er ikke nok, bare at bruge tagsne,
som (man tror) giver bedre resultater i søgemaskinerne, de skal også
bruges i den sammenhæng, de er tiltænkt.


MVH
Rune Jensen

Søg
Reklame
Statistik
Spørgsmål : 177438
Tips : 31962
Nyheder : 719565
Indlæg : 6408042
Brugere : 218879

Månedens bedste
Årets bedste
Sidste års bedste