font color in HTML5

Status
Niet open voor verdere reacties.

JohanDerks

Verenigingslid
Lid geworden
2 dec 2006
Berichten
82
Hoe moet ik <div font color: #3399FF><i>15a regulo</i></div> uit een XHTML 1.0 Transitional document omzetten naar HTML5?
Ik heb gezocht, maar nergens een tekstelement anders dan <p>, <div> of <span> gevonden. De laatste twee worden afgewezen in https://html5.validator.nu/?doc=............. en aangeraden wordt css te gebruiken.
Maar in hoeverre zijn <div> en <span> geschikt om in css te gebruiken? Als je veel tekst hebt, krijg je te veel classes.
 
Laatst bewerkt:
<div> en <span> gebruik je niet in CSS, maar het zijn HTML-elementen waaraan je kan refereren met CSS. Een groot verschil.

Met CSS kan je met het color-property de kleur van je tekst bepalen:

Code:
span {
    color: #00ff00;
}

Hiermee kan je dus de kleurcode #00ff00 (groen) aan al je span-elementen koppelen.
Het heeft niks met HTML5 te maken, want in HTML 4 was er al sprake van het verdwijnen van de font-tag, en font is daarna nooit een onderdeel geweest van HTML, omdat het overgedragen is naar CSS.
 
Laatst bewerkt:
Aanvulling:

<div> en <p> zijn block elementen, ze pakken de volledige breedte die beschikbaar is.
<span> is een inline element, vergelijkbaar met een woord in een zin, ze pakken niet meer breedte dan noodzakelijk.

Een ander verschil is dat je bij <span> niet met height of padding de hoogte kan veranderen, dit kan wel bij <div> en <p>

Gebruik bij voorkeur in html5 alleen nadruk <em> (cursief maken) en sterke nadruk <strong> (vet maken). Alle overige opmaak komt in de css stylesheet.
 
PHP4U of bron hebben in een eerdere discussie gewaarschuwd, dat de HTML-validering (op basis van html5) niets van php snapt en dat ik de code moet leveren, die de browser ziet. Daar begrijp ik uit, dat ik uit mijn volledige code de php-gedeelten moet schrappen of hoe die gedeelten van de server-side terugkomen naar de browser-side.
Nu gaat het om twee php-gedeelten, die alleen printen (onder een bepaalde voorwaarde weliswaar). Als volgt:

Eerste voorbeeld
Code:
<table class="dbl36em">↩
<?php ↩
if ((!isset($_POST['ZamSubmit'])) && (!isset($_POST['intereuropSubmit']))) {  ↩
    print '↩
        <tr>↩
            <td class="ctrkopje" colspan="2">↩
                <b>ĝermanaj lingvoj</b>↩
            </td>↩
        </tr>						↩
        <tr>↩ enzovoort
</table>
Laat ik dit toch in deze vorm valideren, dan krijg ik als foutmelding:
Error: td start tag in table body.

From line 271, column 13; to line 272, column 45

<tr>↩ <td class="ctrkopje" colspan="2">↩
De php-code, die aan regel 271 voorafgaat is:
Code:
<?php 
if ((!isset($_POST['ZamSubmit'])) && (!isset($_POST['intereuropSubmit']))) {  
    print '
Ik haal die weg en laat nu alleen valideren:
Code:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<table class="dbl36em">
        <tr>
            <td class="ctrkopje" colspan="2">
                <b>germaanse talen</b>
            </td>
        </tr>
</table>						
</body>
</html>
Dan krijg ik als foutmelding:
Code:
    Error: [B]Table column 2 established by element td has no cells beginning in it.[/B]

    From line 8, column 13; to line 9, column 45

          <tr>↩            <td class="ctrkopje" colspan="2">↩
Kennelijk stuurt colspan="2" de boel in de war. Geen nood.
Ik wijzig de code als volgt:
Code:
<table class="dbl36em">
<?php 
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<table class="dbl36em">
        <tr>
            <td>
            </td>
            <td class="ctrkopje">
                <b>germaanse talen</b>
            </td>
        </tr>
</table>						
</body>
(Daarvoor moet ik wel iets aan de style-klasse wijzigen, maar vooruit.)
Hoera! Goedgekeurd.
Ik probeer toch nog even de validering van de gewijzigde code ingebed in de php-code en krijg foutmelding:
Error: td start tag in table body.

From line 278, column 13; to line 279, column 16

<tr>↩ <td>↩
dezelfde foutmelding, waar ik mee begon.
Tussenvraag: Was dat weghalan van colspan'="2" dus wel nodig?

Tweede voorbeeld:
Foutmelding van het gedeekte inclusief php-code luidt
Error: Misplaced non-space characters inside a table.

From line 374, column 14; to line 381, column 16

</tr> ↩ ';↩}↩ ↩if ((isset($_POST['ZamSubmit'])) && (!isset($_POST['intereuropSubmit']))) { ↩ if ($pI=="pt") { // ↩ print '↩ <tr>↩
Ik haal de php-code weg en valideer:
Code:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<table>
            <tr>
                <td class="d">
				    <button type="button" onclick="style=\'background-color: \' + klor; kreuGTfenro(\'it\');">
                    Muspremu ĉi tie por la itala (it)</button >
				</td>
                <td class="ctr">
                    <input type="radio" name="it" value="1" onclick="marku(\'it\',\'jes\')" />jes 
                    <input type="radio" name="it" value="0" onclick="marku(\'it\',\'ne\')" />ne
                </td>
            </tr>
</table>						
</body>
</html>
Resultaat: drie foutmeldingen. Dat ligt natuurlijk aan die escape-tekens, die alleen binnen een php-code betekenis hebben. Opnieuw gevalideerd en verd..... het is goedgekeurd.
Vraag: Hoe krijg ik op een directe manier de code, die de browser te zien krijgt, want door de vele tussenliggende php-codes heb ik zo heel veel werk.
(Als ik in AceHTML de external browser start en dan naar de broncode kijk, zie ik nog alle PHP-code.)
Sorry voor de lengte van de inleiding.
 
Laatst bewerkt:
RE: de HTML-validering (op basis van html5) snapt niets van php
Dit klopt wat php4u zegt. Een html validator snapt geen php. Echter, de php code mag je overal in je html zetten als je het maar laat beginnen met <?php en laat eindigen met ?> . Ik ga er wel vanuit dat je de naam van het bestand op .php laat eindigen.
Voorbeeld: <td>Mijn naam is <?php echo $naam ?></td>

Zet alles wat je op het scherm wilt zien tussenb <body> en </body>
Zet <!doctype html> op de eerste regel, je mag er eventueel wel php code boven zetten.
Makkelijker is echo $mytext (in plaats van print $mytext) omdat je dan meerdere teksten en variabelen mag opgeven.
Gebruik echo $mytext (of print $mytext) als je het nodig hebt, dat is makkelijker. Zie voorbeeld code onder.
Als je php in je browser ziet dan klopt de geschreven code niet. Bij jouw code komt dit waarschijnlijk door het gebruik van print '...'

Een escape karakter is niet nodig bij onclick="marku(\'it\',\'jes\')"
Dit is wel nodig als je hetzelfde in php met print '...' wilt coderen maar dat is niet zo handig.
Gebruik in html onclick="marku('it', 'jes')"
De dubbele quotes zijn van html en de enkele quotes zijn van Javascript.

Bij colspan="2" is de rij twee kolommen breed.
Dit betekent dat je in andere rijen 2x een td moet opnemen, voorbeeld:
Code:
<table class="dbl36em">
    <?php if ( (!isset($_POST['ZamSubmit'])) && (!isset($_POST['intereuropSubmit'])) ) { ?>
        <tr>
            <td colspan="2">twee kolommen breed</td>
        </tr>
        <tr>
            <td>linker kolom</td>
            <td>rechter kolom</td>
        </tr>
    <?php } ?>
</table>
 
Laatst bewerkt:
Als je je HTML-code wilt valideren:
Open je browser, open je site. Rechtsklik op je site en kies: Bron weergeven.

En tadaah, zie hier. De HTML-code die je browser ontvangen heeft, terwijl PHP zijn werk inmiddels op de server al gedaan heeft.
Haal deze code door de validator en je ziet het resultaat.

Natuurlijk kan het zijn dat sommige fouten misschien bijvoorbeeld in een stuk HTML-code zitten die door PHP in een loop worden gebruikt. Da moet je dus even je de broncode vanuti de browser naast de PHP-code leggen, en kijken waar de aanpassingen moeten worden gedaan.

Enige ervaring met PHP is overigens wel zo handig als je je ermee bezig houdt. Het is een leuke taal, maar je moet wel weten hoe je ermee om moet gaan.
 
Ik snap je aanwijzingen. Bedankt, maar als ik print gebruik en de escape-backslashes weghaal, en het formulier submit, krijg ik een automatische PHP-foutmelding vanwege de apostrophes in
Code:
<button type="button" onclick="style='background-color: ' + klor; kreuGTfenro('af');">
(T-string).
Zet ik ze weer terug, dan krijg ik die automatische foutmelding niet, maar de validering geeft
Error: Bad value style=\'background-color: \' + klor; kreuGTfenro('af'); for attribute onclick on element button: illegal character

From line 505, column 9; to line 505, column 96

>↩ <button type="button" onclick="style=\'background-color: \' + klor; kreuGTfenro('af');">↩ Mus
.
Ik wil wel echo gebruiken, maar moet ik dan bijv. een heel PHP-gedeelte als $mytext definiëren, bijv.
<?php
$mytext = aanhalingstekens openen?
<tr>
<td class="dduon">
<button type="button" onclick="style='background-color: ' + klor; kreuGTfenro('de');">
Klik hier voor Duits</button >
</td>
<td class="ctr">
<input type="radio" name="de" value="1" onclick="marku('de','jes')" />jes
<input type="radio" name="de" value="0" onclick="marku('de','ne')" />ne
</td>
</tr>
aanhalingstekens sluiten?
?>
en dan verderop
<$php echo $mytext ?>
Het lijkt wel, of ik een hele cursus moet volgen, maar ook deze stap begrijp ik niet.

PS: Het zou kunnen zijn, dat de tegenspraak te maken heeft met het feit, dat een deel van de 80 behandelde talen via de server in het HTML-document is gekomen en het andere deel rechtstreeks aan de browser-side is ingevoerd. Dat moet ik nog gaan uitzoeken.
 
Laatst bewerkt:
Waarom zou je hele lappen HTML willen echo'en?
Je kan ook dit doen:
Code:
<?php
if($voorwaarde) {
?>
HIER JE LAP HTML-CODE
<?php
}
?>
Op die manier plaats je de HTML buiten je PHP-code en hoef je niet te frotten met escaping en quotes.
 
RE: Ik wil wel echo gebruiken, maar moet ik dan bijv. een heel PHP-gedeelte als $mytext definiëren?

a. Een groot html blok hoort buiten de php.
b. Een voorbeeld van echo is <?php echo "Mijn naam is ", $name, " en mijn leeftijd is ", $age; ?>

RE: als ik print gebruik en de escape-backslashes weghaal, en het formulier submit, krijg ik een automatische PHP-foutmelding

Dit komt omdat je html met print('....') wilt weergeven en dan moet je her-en-der escape karakters invoegen. Dus html buiten de php houden.
Code:
[B]onhandig[/B]
<?php
// hier staat wat php code
print ('button type="button" onclick="style=\'background-color: \' + klor; kreuGTfenro(\'af\');">
?>

[B]handig[/B]
<?php
// hier staat wat php code
?>
button type="button" onclick="style='background-color: ' + klor; kreuGTfenro('af');">

Zoals door php4u gezegd, gebruik grote blokken html buiten de php, jouw voorbeeld wordt dan
Code:
<?php
  // niet nodig --- $mytext = aanhalingstekens openen?
?>
<tr>
  <td class="dduon">
    <button type="button" onclick="style='background-color: ' + klor; kreuGTfenro('de');">
    Klik hier voor Duits
    </button>
  </td>
  <td class="ctr">
    <input type="radio" name="de" value="1" onclick="marku('de','jes')" />jes
    <input type="radio" name="de" value="0" onclick="marku('de','ne')" />ne
  </td>
</tr>
<?php
  // niet nodig --- aanhalingstekens sluiten?
?>
<?php
  // niet nodig --- echo $mytext;
?>

Aanvulling - soms kan dit handig zijn
Code:
<?php
$jsOnClick = "style='background-color: ' + klor; kreuGTfenro('de');";
?>
<button type="button" onclick="<?php echo $jsOnClick ?>">
 
Laatst bewerkt:
Het is moeilijk uit te leggen, waarom ik hele lappen html binnen PHP-code moet plaatsen:
Er zijn vijf documenten: laat ik ze noemen invoer.html, Zamenhof.php, europa.php, wereld.php en samenvatting.php.
De gebruiker begint met invoer.html en kan dan kiezen of hij door wil gaan naar Zamenhof.php, europa.php of wereld.php.
Als hij naar Zamenhof.php gaat, kan hij weer kiezen tussen europa.php of wereldphp. Als hij dan naar europa.php gaat, moet hij door naar wereld.php en tenslotte naar samenvatting.php.
In plaats van naar Zamenhof.php te gaan, kan hij ook direct naar europa.php (dan automatisch naar wereld.php en samenvatting.php) of direct naar wereld.php (automatisch door naar samenvatting.php).
Hij doorloopt dus vier, drie, twee of een formulier om uiteindelijk te belanden in samenvatting.php, die hij kan downloaden.
De deelresultaten van de tussen-documenten worden steeds doorgestuurd naar het volgende document, als hidden resultaat, om uiteindelijk verwerkt te worden in de samenvatting. Slaat hij Zamenhof.php over (waar de vertalingen naar Engels, Duits, Frans, Spaans, Pools, Russisch en Italiaans of Portugees door de user worden beoordeeld) dan krijgt hij die zeven (of acht) talen toch voorgeschoteld in europa.php of (als hij direct naar wereld.php gaat) in wereld.php. Dus moet ik de vertalingen naar die talen in PHP-vorm doorgeven. De europese talen die niet tot dat zevental (achttal) behoren, staan gewoon in HTML-vorm.
Ook staan de niet-europese talen in HTML-vorm in wereld.php.
Een zeer gecompliceerde structuur, maar dat is de consequentie van de vrijheid die ik aan de gebruiker geef.
De site staat onder http://www.esp-evoluo.org/fontsugesto5.html.
 
Laatst bewerkt:
Ik zie zelf geen reden die ik uit je uitleg kan opmaken.
Het kan altijd beide, dus je lappen tekst in PHP plaatsen. Of buiten PHP, wat ik overigens aanraad.

Waarom zou jij technisch gezien het laatste niet kunnen uitvoeren, denk je?

Als je het helemaal top wil doen zou ik een aparte laag aanmaken met templates, zodat je de programmacode (business-layer) kan scheiden van je lay-out, maar dat zou ik pas alleen doen als je echt goed bekend bent met PHP.
 
Laatst bewerkt:
In hetzelfde document (europa.php, wereld.php) moeten meerdere dezelfde (vanuit browser-standpunt bekeken) lappen tekst zowel ongezien als zichtbaar doorgegeven worden. Dus de onzichtbare moeten in PHP staan, de zichtbare in HTML.
Voor "top"-prestaties heb ik geen ambitie. Ik hoef geen programmeur te worden. Mijn programma is een middel voor verbetering van het gebruik van Esperanto. Als dat op een volgens jou minder elegante manier gebeuren moet, kun je dat accepteren of niet. In het laatste geval zijn wij uitgepraat.
Ik ben trouwens, moe van alle pedagogische druk, die je uitoefent, benieuwd naar wat de arbeidsvoorwaarden zijn, waaronder je werkt: Is het een onbetaalde hobbie, Is het om ervaring op te doen voor een latere baan, Bent u gepensioneerd, zoals ik, en houdt dit u bezig? Welke opleiding/training heeft u?
 
Geloof me, alle lappen tekst kunnen buiten PHP-blokken.
Voorafgaand zal vast een voorwaarde zijn die je in PHP kan uitvoeren, maar dan kan je het PHP-blok prima afsluiten. Als er eventjes PHP in moet worden gebruikt kan je die functie of variabel gewoon tussen de PHP-haakjes zetten.

Kijk maar naar Bron's voorbeeld.
Zelf houd ik niet van gekloot met quotes :).

Verder ben ik niet gepensioneerd, en houd ik me al sinds 1998 al met PHP bezig. Voornamelijk als hobby, maar heb er ook werk in gedaan.

Verder heb ik nooit gezegd dat je templates moet gebruiken, maar het was alleen maar een tip. De meeste mensen hechten namelijk waarde aan een makkelijk geschreven webapplicatie zonder herhalende code en vaak met scheiding in lagen. Dat is mijn ervaring.
 
Laatst bewerkt:
In hetzelfde document (europa.php, wereld.php) moeten meerdere dezelfde (vanuit browser-standpunt bekeken) lappen tekst zowel ongezien als zichtbaar doorgegeven worden. Dus de onzichtbare moeten in PHP staan, de zichtbare in HTML.
Zie voorbeeld hoe je dit in een "one page" formulier op één pagina kan maken. Als je bepaalde blokken tekst hebt die telkens hetzelfde zijn dan
voeg je deze in met <?php include("bestand-met-html-code.php") ?>
 

Bijlagen

  • form_tabs.zip
    1,6 KB · Weergaven: 59
En eigenlijk als je met includes werkt, zorg je al voor scheiding in je logica. Waardoor je layout gescheiden wordt van de 'motor'.
Het is best simpel!
 
Het zal wel.
Ik kan het allang niet meer volgen.
Alleen weet ik (vertrouw althans), dat mijn methode, die ik niet dieper kan uitleggen dan gisteren om 8u46, tot resultaat kan leiden.
Ik ben - af en toe, want ik heb ook andere (gezins)taken - bezig met kruimelwerk, om alle onnoemelijk vele variabelen en codes recht te zetten.
Daarnaast kan ik geen discussie voeren over iets op een niveau, dat ik niet heb.
 
Tja, dit komt een beetje over dat je een auto gekocht hebt en dat je niet weet hoe je ermee moet omgaan, waarbij je iemand meeneemt die alles moet uitleggen.

Jij hebt besloten om je bezig te houden met PHP, en dan kan je van ons niet verwachten dat we constant je handje beethouden. Zelf ervaring opdoen is dan zeker een must. Of je kan het laten uitbesteden, maar gezien de omvang van je project zal dit geen vrijwilligersklus zijn.

Zo is dat nu eenmaal. Of je wilt je vast blijven houden aan een onlogische en brak geschreven applicatie waarmee je jezelf in de voeten schiet.
 
Laatst bewerkt:
Een voorbeeld zegt meer dan 1000 woorden :d
Het idee erachter wordt in vrijwel elke programmeertaal toegepast. Javascript en PHP zijn er zeer geschikt voor. Ook CSS wordt op deze manier buiten de html gehouden. Het 'waarom' is simpel, je hebt een goede scheiding tussen de talen & gemeenschappelijke delen (tekst, html, js, php, enz.) kan je overal op elke pagina invoegen.

Stel dat er een menu item of een tabel uitbreiding of een css opmaak verandering (enz. enz.) verandert of wordt toegevoegd dan heb je 1 centrale plek waar de wijziging wordt gedaan. Je hoeft niet diverse bestanden te controleren of overal alles goed is gegaan.

Het bekijken waard. Suc6, have fun.
 

Bijlagen

  • include.zip
    3,3 KB · Weergaven: 51
Je hebt gelijk PHP4U. Ik zal proberen er, zoveel mogelijk alleen, uit te komen, want uitbesteden is geen optie.
En, ondanks een conflict-achtig begin, ben ik wel opgeschoten en dank jullie, ook Bron, voor de vele (pogingen tot) hulp.
De bijdrage van Bron kan ik nu niet lezen, want ik zit in een verhuisperiode.
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan