BASIS: css of html?

Status
Niet open voor verdere reacties.

janyep

Gebruiker
Lid geworden
7 mei 2008
Berichten
261
Hallo beste,

mag ik eens vragen waar jullie voorkeur naar uit zou gaan?
Maakt het uit wat sneller wordt geladen / wat de website compacter houdt?

Ben benieuwd!
vr groet janyep

HTML:
<b> </b> ......of....... <span class="fwb"> </span>
<i> </i>    ......of....... <span class="fsi"> </span>
<small> </small>   ......of....... <span class="fss"> </span>
<u> </u>    ......of....... <span class="tdul"> </span>
 
stap 1. eerst HTML snappen
stap 2. dan pas CSS, hier gaat het puur om de lay-out, kleurgebruik etc etc
 
Benut de tags waarvoor ze gebruikt worden, en stijl deze eventueel met CSS.
 
Hallo joanne, hallo PHP4U

met het snappen van html en css zit het echt wel goed hoor
( had ik wellicht wat duidelijker in moeten zijn )

maar begrijp ik PHP4U goed, als je zegt: waar het kan de tags, en waar het nodig is natuurlijk de css?

... maar omdat de classes toch al voor diverse doeleinden beschikbaar zijn in het style-blad
HTML:
<div class="fotobox c069 fwb">
<span class="kantlijn cc00 fsi">
enz. enz.
... begon ik me af te vragen of alle tags beter zijn om te wisselen voor classes

HTML:
<small><i>
....of...
<span class="fss fsi">
 
Waarom zou je tags in willen wisselen voor classes? Je kan deze prima in CSS opmaken.
Ik zou <span> eerder gebruiken voor tekstopmaak waar geen goede tag voor te vinden is?

Code:
small {
font-size: 6px;
}
 
Hoi,

Vroeger stond de opmaak in de html, zoals je boven laat zien (<b> <big> <u> <font> enzovoort). Dit zie je nog wel in heeeeele oude boeken. Hierdoor werden HTML pagina's slecht leesbaar en moest er vaak een bepaalde opmaak meerdere keren ingezet worden. En achteraf was de pagina niet meer te onderhouden :(

CSS wordt gebruikt om deze nadelen weg te nemen. CSS kan in een extern bestand gezet worden en/of in de <head> en/of als een eigenschap van een html tag. HTML wordt dus gebruikt voor de structuur en CSS voor de opmaak. In vrijwel alle gevallen wordt een externe stylesheet (CSS bestand) gebruikt.

Je vroeg nog iets over de snelheid... bij het laden van een CSS bestand wordt gewacht totdat deze geheel is geladen (net als bij een <script>). Daarna wordt de HTML ingelezen en daarna wordt de pagina opgemaakt. Omdat je bij een gescheiden HTML en CSS efficienter werkt zal het performance verlies van 2 bestanden zeer gering zijn.

Je eerste vraag: het gaat niet om "voorkeur", het is een "must" dat HTML en CSS beide worden gebruikt, elk in een eigen bestand.

Suc6. Have fun.


*** nog een aanvulling: sinds XHTML en nu met HTML5 zullen steeds meer opmaak tags in de HTML vervallen!! In de praktijk echter zullen browsers ze wel ondersteunen maar het is dan geen W3C html.
 
Laatst bewerkt:
Maakt het uit wat sneller wordt geladen / wat de website compacter houdt?

Waarom zou je tags in willen wisselen voor classes? .....
Ik zou <span> eerder gebruiken voor .....

Helemaal prima!
Ik ga niet verder zoeken of er over piekeren

Bedankt voor de interesse en de tijd die jullie er in hebt gestoken :thumb:
vr groet janyep
 
<div> en <span> zijn belangrijke structuur tags.
<div> als block tag en <span> als inline tag. Deze "lege omhulsels" kun je overal toepassen en enthousiast van alle css voorzien die je kunt bedenken.

RE: Waarom zou je tags in willen wisselen voor classes?
Een class is een eigenschap van een tag. Je kunt ze niet verwisselen.

In wysiwyg editors zie je dat <em> en <strong> wel worden gebruikt omdat deze wat vaker worden gebruikt.
 
Laatst bewerkt:
Hallo Bron

Dank voor uw interessante reactie

Vroeger .... heeeeele oude boeken .... (<b> <u> enzovoort)

Begrijp ik dat uw voorkeur :) toch uitgaat naar <span class="fwb">dit is vette tekst </span> ?


dit is mijn websiteje
Ombouwen van HTML4 naar HTML5 is vooralsnog een te grote klus
Bovenstaande materie kwam aan de orde nu ik toch al wel bezig ben de pagina's door te werken voor een alternatieve style t.b.v. touch-schermen

HTML:
<link rel="alternate stylesheet" type="text/css" href="scripts/styletouch.css" title="alternate touch">

<div class="fixed_toplinks">
<a href="#" onclick="setActiveStyleSheet('default'); return false;" target="_self"><img src="signs/tooltip.gif" alt="default style" width="1" height="1">Touch&nbsp;&nbsp;X</a></div>
<div class="fixed_toprechts">
<a href="#" onclick="setActiveStyleSheet('alternate touch'); return false;" target="_self"><img src="signs/tooltip.gif" alt="alternate style touch" width="1" height="1">Touch</a></div>
 
Handig is het gebruik van <strong> (vet) en <em> (cursief) en de rest oplossen met een class! <strong> en <em> vallen onder "This tag is not deprecated". Dan zit je safe voor de komende jaren.
HTML5 valt wel mee hoor. Wijzig je head in dit en je bent al flink op weg
Code:
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="HandheldFriendly" content="True">
<title>Autovakanties in Noorwegen: ruimtes, stiltes en een spectaculair landschap!</title>
<meta name="description" content="Online reisgids voor self-supported autovakanties in Noorwegen: reisbrochures, accommodaties, fiets- of wandeltochten, de mooiste plekjes en de leukste uitstapjes.">
<meta name="keywords" content="Noorwegen, autovakantie, reisgids, accommodatie, hytter, reisbrochure, route, fietsen, wandelen, Oost-Noorwegen, Austlandet, Zuid-Noorwegen, Sørlandet, West-Noorwegen, Vestlandet, Midden-Noorwegen, Midt-Norge, Noord-Noorwegen, Nord-Norge">
<meta name="revisit-after" content="14 days">
<meta http-equiv="Cache-control" content="public">
<meta name="Generator" content="Stone's WebWriter 3.5">
<meta name="robots" content="index, follow">
<meta name="msapplication-TileImage" content="signs/tile.png">
<meta name="msapplication-TileColor" content="#006699">
<meta name="application-name" content="Onze autovakanties in Noorwegen">
<meta name="msapplication-starturl" content="http://onzeautovakantiesinnoorwegen.nl/">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="stylesheet" href="scripts/style_index.css">
<link rel="stylesheet" href="scripts/smartphone.css" media="only screen and (max-width:736px)">
</head>
In de body gebruik je dan op de juiste plek in plaats van <div> de tags <nav>, <header>, <section>, <aside>, <footer>. Dit is het basic gebruik van html5.

Voor smartphones kun je beter een 2e stylesheet laden na de eerste met daarin
Code:
@media (max-width: 767px) {
   .fixed_toprechts {
      /* style... */
   }
}
Hiermee voorkom je dubbel laden of een dubbel-render van de pagina. Het werkt dan ook beter als mensen op een desktop het browser scherm smaller maken.

Suc6. Have fun.


*** edit: in de html4 specs (w3c) wordt al aanbevolen om de <style ...> tag te gebruiken voor de opmaak.
 
Laatst bewerkt:
Hallo Bron

Hier kan een mens mee vooruit! Hartelijk dank. Dit is wat ik zocht: wat heeft de voorkeur en dan ook nog enigszins toekomst-proof.
Ook dank voor de "HandheldFriendly"-metatag: heb het uitgezocht en is interessant.


Voor de smartphones wordt 90% van deze HTML (ook de keuze-knoppen fixed_toprechts en -_toplinks niet) niet geladen door middel van een extra box
HTML:
<div class="smartPhoneNot"><!-- eindigt voor div class="fixed_bottomlinks" -->
+ alternatieve tekst smartPhoneOnly
bla bla bla ... deze uitgebreide website is te uitgebreid voor uw smartphone

voor de smartphone.css heb ik staan een max-width:736px, maar dat lijkt heel logisch om deze te wijzigen in uw 767
van
HTML:
<link media="only screen and (max-width:736px)" href="scripts/smartphone.css" rel="stylesheet" type="text/css">
naar max-width 767
dan zit je net 1px onder de kleinste iPad
ik ga nu uit van de grootste iPhone6 met 736, maar zekerheidjes in de consumenten-markt bestaan niet, nietwaar?

Voor de touch's kon ik al wel de iPad targetten met
- niet zo netjes, maar ingebed in gewone style.css -
Code:
(min-device-width: 768px) and (max-device-width: 1024px)


Maar voor de touch's iPad Pro en overige lijkt toch de enige optie keuze-knoppen d.m.v. "alternate stylesheet".
Een touch-screen targetten met java-script gaat boven m'n pet
" ken uw beperkingen "
 
Nog 2 meta tags waar G##gle sinds enige tijd veel waarde aan hecht.
Code:
<meta name="author" content="Organisatie Naam, Voornaam Achternaam">
<meta name="contact" content="Website Naam, +31 79 1234567, MijnStraat 12, 1234 AB Lutjebroek">

De performance wordt niet door de html maar door de hoeveelheid css en scripts bepaald. En natuurlijk door de grootte van de afbeeldingen maar die kan je comprimeren als jpg 80% (in plaats van gebruikelijke 900-95%).

Scripts worden vaak vlak boven </body> gepaalts als het script dit toelaat zodat het laden hiervan minder invloed heeft op de tijd van de pagina opmaak. De css staat echter in de <head> en daar wordt gewacht totdat alle benodigde css bestanden zijn geladen.

Je kunt beter niet uitgaan van een aantal iPhones. Beter is het om in de breedte van de layout alleen te werken met percentages zodat de opmaak op elke smartphone goed werkt (responsive layout). De resolutie van het fysieke scherm op een smartphone is anders dan de resolutie die de software opgeeft aan de browser.

Ik werk zelf met mobile-first, d.w.z. eerst de css maken voor de smartphone, dan met min-width:768px deze css aanpassen voor tablet en dan aanpassen met min-width:992px voor de pc. Zie een voorbeeld van een website die ik heb gemaakt en maak je browser op de pc eens smaller om het effect te zien. Deze 2 breakpoints werken ook goed op bijvoorbeeld een smartphone 1920x1080px.

Ik gebruik in principe geen min-device-widt maar alleen min-width omdat de browser smaller kan zijn dan het apparaat. Een alternate stylesheet wordt niet meer gebruikt. Althans, ik zie het nergens bij andere websites.

Misschien kun je iets met deze info.

Have fun :d
 
Hallo Bron
suggesties geplaatst in het 'to-do-mapje'
ik weet dat het er nodig eens van zou moeten komen, zeker het responsive-gebeuren.

van HTML4 naar 5 ben ik al eens eerder aan begonnen,
maar de huidige oude vertrouwde webeditor Stones Webwriter 3.5 heeft een mooie ingebouwde tool die automatisch de laatste update-datum op de website weergeeft, ook met style-opmaak aan te passen.
Kon destijds nog geen HTML5-editor vinden die dat ook deed.

Nog genoeg te doen: Have fun zal wel lukken!

Hartelijk dank voor uw zeer uitgebreide suggesties,
vriendelijke groet janyep
 
haha, een todo mapje is leuk als er weinig in zit :p

ik kijk altijd even naar software die andere mensen gebruiken maar Stones Webwriter kon ik niet op veilige sites vinden. De browser gaf bij sommige sites de melding "geblokkeerd, onveilig programma". Ik kon alleen een deens YouTube filmpje zien :(

Zou dit moment misschien een goede tijd zijn om naar een ander programma te gaan kijken? (waarin je logisch weer tijd nodig hebt om het je eigen te maken). De nieuwere programma's bieden ook veel features. Ik zag dit bijvoorbeeld, ik ken het niet maar het lijkt een programma wat makkelijk te gebruiken is.

Suc6 met de website.
 
Maar het sub-mapje 'suggesties' is echt goud waard hoor :thumb:

Inderdaad, de nieuwste Stone's weer gedeïnstalleerd want de div.malware-programma's gaven een alarm af, maar van Stone's Webwriter de oude versie 3.5 uit 1996 is nog prima te doen. Had ook de html-entiteiten voor scandinavische leestekens.

TOWeb: nog nooit gezien, maar mooie templates, jammer van die 49€ ... maar als het heel goed is zou dat mogen.
Neem het t.z.t zeker mee in de overstap-overweging.

Kom t.z.t zeker nog eens terug op het forum of iemand raad weet met die auto-update-datum.

http://www.coffeecup.com/free-editor/ leek + compleet + html5, maar ben afgehaakt toen ik die auto-update-datum kwijt leek te raken.
Om na elke wijziging / aanvulling een nieuwe datum op de website handmatig in te vullen: dat ging hem niet worden.

Eerst het huidige project afmaken ( touchvriendelijker door grotere regelhoogtes en al die groene blokken met verwijzingen naar andere websites worden wat netter omgezet dmv ul's en li's )
Wordt best mooi, maar duurt nog wel even, wordt wel tot na de kerstdagen.

'Have fun' zal best lukken :)
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan