PDA

View Full Version : [HTML-CSS-Python-PHP] I miei dubbi

pako80
19-12-2013, 09:38
Ragazzi raccolgo qui i dubbi che mi dovessero venire nell'apprendimento di questi nuovi, per me,linguaggi.

Vorrei iniziare con l'HTML:
1) non ho capito la differenza tra, ad esempio, <h1> ed <h6> impostando un font-size più grande, o anche un semplice <p> con un font-size modificato. Cosa cambia?

2)Nel tutorial che sto seguendo mi dice di iniziare un paragrafo con <p>, ma poi riporta un esempio tipo il seguente in cui non c'è (per "big title")...è comunque corretto o è un errore?

<!DOCTYPE html>
<html>
<head>
<title>Loving the font changes</title>
</head>
<body>
<h1>Big title</h1>
<ol>
<li>This item is big Garamond.</li>
<li>This item is medium Verdana.</li>
<li>This item is small Impact.</li>
</ol>
</body>
</html>
Tuvok-LuR-
19-12-2013, 10:17
Devi capire che un documento ha un valore semantico, non necessariamente legato a quello visivo.
Ogni tag identifica il valore e la funzione del proprio contenuto, proprio per questo i tag utilizzati soltanto per la formattazione (es. <font>) sono deprecati, mentre html5 introduce nuovi tag che non sono altro che <div> con uno specifico livello semantico (es. <menu>).

L'html fornisce il livello semantico ed il CSS quello stilistico. Il fatto che alcuni tag abbiano un certo stile di default non ci preclude di cambiarlo liberamente.
Quando costruisci una pagina devi pensare "cosa rappresenta questo dato?", è una lista? un titolo? un corpo di testo? questo deve guidarti nella scelta del tag, non il fatto che tu voglia farlo apparire in un modo o in un altro.

Ad esempio se prendi un qualsiasi documento html e ne sostituisci il CSS puoi ottenere una pagina con un aspetto completamente diverso: il livello stilistico è completamente cambiato mentre quello semantico è sempre lo stesso.
Inoltre in certi casi il livello stilistico verrà sempre ignorato: ad esempio quando google eseguirà il parsing della pagina vedrà un tag H1, capirà che ciò che esso racchiude è una delle cose più importanti della pagina, e le parole che contiene avranno piu peso come indicizzazione come keyword.
Quindi i tag h1,h2... hanno una gerarchia di importanza decrescente (si consiglia addirittura spesso di avere un solo H1 per pagina per una migliore indicizzazione.

Altro esempio è l'accessibilità, pensa ad un non vedente che accede al sito con uno screen reader: il livello stilistico viene completamente bypassato e ciò che conta è solo il livello semantico. Lo screen reader sarà guidato soltanto dalla semantica .


2)Nel tutorial che sto seguendo mi dice di iniziare un paragrafo con <p>, ma poi riporta un esempio tipo il seguente in cui non c'è (per "big title")...è comunque corretto o è un errore?
un titolo è, appunto, un titolo, non un paragrafo, quindi viene usato un tag titolo (h1) ;).

<p> ed <h1> sono entrambi block-level elements, ma coesistono allo stesso livello, non vanno mai inseriti l'uno nell'altro.

un articolo con altre info:
http://blog.meetweb.it/index.php/2010/03/19/limportanza-del-codice-semantico-e-i-passi-avanti-dellhtml5/
pako80
20-12-2013, 11:54
ok grazie.

Un altro dubbio, il pezzo di codice seguente è una lista non ordinata con una sottolista ordinata:
<li>Pizza:
<ol style="background-color:red">
<li>Margherita</li>
<li>Messicana
<ul>
<li>Con salame piccante</li>
<li>Con salsiccia</li>
</ul>
</li>
</ol>
</li>

se volessi scrivere in rosso solo la voce pizza è corretto aggiungere il paragrafo per farlo? Come mostrato di seguito funziona, ma non so se è il modo giusto.

<li><p style="font-family:Verdana;color:red">Pizza:</p>
<ol style="background-color:red">
<li>Margherita</li>
<li>Messicana
<ul>
<li>Con salame piccante</li>
<li>Con salsiccia</li>
</ul>
</li>
</ol>
</li>

se lo mettessi direttamente in <li style="font-family:Verdana;color:red">Pizza: diventano rosse tutte le voci.