Alfire world

Di tutto un po...

Appunti di HTML per i Css

Saturday, May 17, 2008 11:21:27 AM

, ,

Cos'è l'html? come già accennato è un linguaggio di markup, attraverso dei comandi interpretati dal browser, i tag, riusciamo a differenziare i contenuti.
Nei blog di opera è possibile inserire del codice html all'interno dei post, questo verrà interpretato dal browser, vediamo ecco cosa succede con questo esempio: 
<h1> Questo tag identifica il titolo</h1>
<p> Questo tag identifica il paragrafo</p>

Questo tag identifica il titolo

Questo tag identifica il paragrafo

Perfetto! La prima frase è formattata come titolo e la seconda come paragrafo. Ci sono pochi concetti che devono essere chiari per lavorare con i css. La pagina web è composta in questo modo: 
<html>
<head></head>
<body></body>
</html>
Il primo tag, html, racchiude tutto il codice, e serve a dire che tutto ciò che contiene è html. Al suo interno ci sono head, che specifica "informazioni di servizio", e il body , la pagina vera e propria. 
<html>
<head></head>
<body><h1> Questo tag identifica il titolo</h1>
<p> Questo tag identifica il paragrafo</p></body>
</html>
Come potete notare i tag al loro interno possono contenerne altri, così da formare una vera è propria gerarchia.
Guardate l'ultimo esempio e immaginate un albero genalogico, il padre di tutti è il tag html, questo a due figli, head e body, a sua volta head ha due figli p e h1...
Cosa serve tutto quello che vi ho detto?!
Per capire come si deve ragionare con i css tenetea mente questo concetti generali:
1: se applicate uno stile, ad esempio "testo di colore rosso" al tag "html", tutti i suoi tag figli, cioè quelli contenuti, erediteranno questa proprietà!
2: ma anche se applicate uno stile all'intera pagina, se ne potranno specificare altri stili più specifici per i sottoelementi così da sovrascrivere quelli più generici. Ad esempio potrete avere tutto il testo della pagina rosso e i titoli verdi se volete, ma lo sconsiglio vivamente come accostamento:D
3: provate a pensare di specificare diversi sfondi per i vari tag. E' come avere tante immagini. Se applichiamo un'immagine al tag html, questo sfondo verrà applicato a tutta la pagina. Quando definiamo un nuovo sfondo a un sottoelemento questo si sovrapporrà ai precedenti...

Tutorial per Blog opera: Titoli con CSS

Comments

Lorenzo CelsiLorenzoCelsi Friday, May 23, 2008 9:35:12 AM

A proposito, presumo che introdurrai le nozioni di ID e CLASS piu' avanti, intanto pero' ci sono due strumenti utili per capire meglio di cosa si parla e sono "Firefly" per Opera - nella build corrente che potete scaricare qui: http://my.opera.com/desktopteam/blog/ e "Firebug" per Firefox - che potete scaricare da https://addons.mozilla.org/en-US/firefox/.

Cosa sono? Degli strumenti che permettono di "ispezionare" il codice della pagina in modo da correlare a colpo d'occhio un elemento visibile con in suo codice HTML e i relativi parametri CSS, con tutta la struttura dell'albero soprastante. Si fa prima a provare che a spiegare.

In particolare questi strumenti sono utili per fare "reverse engeneering" di siti esistenti, per esempio quando si vuole cambiare qualcosa della grafica dei blog di MyOpera.

Alfire Friday, May 23, 2008 10:15:34 AM

Bravissimo!
Io uso in particolare FireBug e Web Developer...
Si appena posso incomincio a parlare di ID e CLASS ma volevo dare una minima idea di cosa era l'HTML e dei concetti che si legano ai CSS.

Cmq scaricate questi strumenti sono utilissimi!

Lorenzo CelsiLorenzoCelsi Friday, May 23, 2008 11:05:03 AM

Io aggiungerei anche un chiarimento: HTML+CSS e' un concetto che ha ormai parecchi anni, tuttavia e' ancora possibile trovare delle pagine e dei siti Web che sono scritti in toto o in parte con lo "HTML di una volta" e cioe' quello precedente alla introduzione de CSS. Esempio di codice attuale: 
<style> .saluti { font-family:arial; } </style>
<div class="saluti">ciao</div>
Esempio di codice "di una volta": 
<div><font face="arial">ciao</font></div>
La differenza chiarisce anche lo scopo per cui esistono i CSS e cioe' quello di separare le "proprieta' di rappresentazione" come colore, font, dimensione, ecc, dal corpo/codice della pagina. Nel primo caso il font e' una proprieta' del testo qualsiasi contenuto nel contenitore "div" (piu' precisamente di tutti i "div" della "classe" "saluti"), nel secondo caso e' semplicemente scritto come proprieta' della parola "ciao" scritta nella pagina. I tag "di una volta" si dicono "deprecati" cioe' non conformi agli standard introdotti successivamente e andrebbero evitati. Putroppo vengono inseriti spesso e volentieri anche in pagine "moderne", specie in associazione con le tabelle.

Unregistered user Tuesday, May 27, 2008 3:45:24 PM

Anonymous writes: Ale che blog pacco...è tutto "informatico"...!!!

Alfire Tuesday, May 27, 2008 6:12:39 PM

scrivo per un bene superiore! bigsmile
chi sei?!

Lorenzo CelsiLorenzoCelsi Tuesday, May 27, 2008 6:16:35 PM

Uno/a che e' interessato/a ad un bene inferiore, evidentemente... smile

Alfire Tuesday, May 27, 2008 6:32:49 PM

mi sa di si smile
ma preferisco raccontarmi dal vivo

Unregistered user Thursday, May 29, 2008 9:16:51 AM

Anonymous writes: Ale non ci possso credere...chi vuoi che sia?? Dai è semplice...w la becks!

Alfire Thursday, May 29, 2008 9:28:32 AM

avevo qlk sospetto... smile
puoi anche firmarti!
tutto bene con la nuova becks?!

Unregistered user Thursday, May 29, 2008 9:38:45 AM

Anonymous writes: lasciamo stare...cmq "l'originale" si è fatta sentire...

Alfire Thursday, May 29, 2008 10:10:55 AM

le becks arrivano sempre tutte assieme... smile

AzeveL Thursday, July 3, 2008 1:24:21 PM

ciao Alfire ti rompo ancora smile

non capisco proprio come si fa cambiare lo sfondo centrale su myopera?
come mi avevi detto tu cambia solo lo sfondo ai lati :frown:

Alfire Thursday, July 3, 2008 2:01:01 PM

Ciao!
hai un'immagine di come vorresti che uscisse?!
o conosci un blog su myopera che usa uno "sfondo centrale"?

Lorenzo CelsiLorenzoCelsi Thursday, July 3, 2008 2:16:14 PM

I blog di MyOpera sono fatti con dei wrapper annidati, quello piu' interno e':
<DIV id="wrap4">
Ovviamete perche' il background si veda occorre disabilitare i background eventuali dei div o altri oggetti contenuti all'interno di "wrap4".

Alfire Thursday, July 3, 2008 4:03:33 PM

esatto!
AzeveL quando sceglierai l'immagine di sfondo ricordati che il wrap4, ad esempio nel mio sito, comprende sia la parte centrale bianca che quella nera a destra.

Ti riporto il mio attuale wrap4, quello di default:
#wrap4 { background:transparent url(/community/graphics/themes/main2.gif) no-repeat scroll 100% 200px; }
Alcuni link utili con esempi per capire a cosa servono le proprietà:
http://www.morpheusweb.it/html/manuali/css/css_sfondo.asp
http://www.w3schools.com/css/css_background.asp

AzeveL Friday, July 4, 2008 11:09:52 AM

nei miei css ho scritto cosi':
ma lo sfondo ce l'ho solo ai lati...dove sbaglio? monkey

body {background-image: url(http://img118.imageshack.us/img118/3937/blgfx1.jpg);
background-repeat: repeat; }

top {background-image: url(http://img118.imageshack.us/img118/3937/blgfx1.jpg); }
top2 h1{ display:none; }
top2 p{ display:none; }

wrap4 {
background:transparent url(http://img118.imageshack.us/img118/3937/blgfx1.jpg) no-repeat scroll 100% 200px;
}

Lorenzo CelsiLorenzoCelsi Friday, July 4, 2008 11:23:43 AM

Mancano i punti per i CLASS e i cancelletti per gli ID. Cioe': 
<div id="mario"> corrisponde a div#mario { }
<div class="piero"> corrisponde a div.piero { }

Alfire Friday, July 4, 2008 11:25:29 AM

in realtà vedo questo:
#wrap4 {maincolors3.css (line 13)
background:#000000 none repeat scroll 0%;
}
se togli queste proprietà sotto si vede il tuo sfondo.

AzeveL Friday, July 4, 2008 5:17:24 PM

thanks!
ce l'ho fatta!headbang

AzeveL Friday, July 4, 2008 5:26:05 PM

Mistero!
nel bio blog funziona ma in quello di negazione414 no!

Micknegazione414 Friday, July 4, 2008 5:33:41 PM

ora va ;-D

Alfire Saturday, July 5, 2008 9:53:02 AM

Ottimo! bigsmile

Lorenzo CelsiLorenzoCelsi Saturday, July 5, 2008 10:00:49 AM

Ottimo mica tanto i suddetti blog sono illeggibili smile

Alfire Saturday, July 5, 2008 10:15:06 AM

sono un po criptici al momento smile
beh ora che ci hanno preso la mano affineranno la tecnica...

AzeveL Saturday, July 5, 2008 11:46:33 AM

si infatti devo cambiare il colore delle scritte altrimenti non si legge niente monkey

Micknegazione414 Saturday, July 5, 2008 11:54:53 AM

ora lo sfondo centrale e divero da quello ai lati,e le scritte si leggono


sherlock

Alfire Saturday, July 5, 2008 12:03:23 PM

Qua puoi trovare qlk esempio per creare il tuo testo...
http://www.w3schools.com/css/css_text.asp
http://www.w3schools.com/css/css_font.asp
se non sbaglio i css di riferimento nel blog sono:
.title {
metti qua le proprietà per modificare i titoli
}
.post {
metti qua le proprietà per modificare il corpo del testo
}

Anche altri posizioni vanno bene, dipende da chi vuoi fare ereditare le proprietà che aggiungi

Alfire Saturday, July 5, 2008 12:08:59 PM

bravo negoziazione! vedo che ci prendi la mano.
cmq i primi post con colore "color:darkred;" risaltano di + rispetto a quelli dopo...

Unregistered user Thursday, November 10, 2011 8:39:58 AM

Anonymous writes: vale la pena leggere. L'ho trovato molto istruttivo, come ho fatto ricerche molto ultimamente sulle questioni pratiche, come si parla di ...

Write a comment

New comments have been disabled for this post.