Shopping, template splinder, tutorial photoshop and graphic resources.

Archive for the ‘Tutorial HTML’ Category


garynock

Riporto una stupenda lista da Your Inspiration Web in cui sono raccolte idee per ispirazioni, textures, pennelli per photoshop, font da installare nel pc, icons, tutorial e bellissimi temi per wordpress: il tutto in stile grunge!

wordpress theme

icons grunge

Elementi block-level e inline

May 17, 2009 Author: Biondina | Filed under: Tutorial HTML, Webdesign

In breve un elemento può essere di livello block o inline. Un elemento block-level verrà sempre mostrato su una nuova riga, come un nuovo paragrafo in un libro, mentre un elemento inline verrà visualizzato sulla riga corrente come se si trattasse di una nuova parola all’interno di un paragrafo.

Gli elementi block-level sono le parti strutturali di una pagina web e pertanto possono contenere altri elementi block-level, inline e di testo. Gli elementi inline, invece, generalmente possono contenere esclusivamente altri elementi inline e di testo.

In una pagina web possono esserci anche elementi list, che vengono considerati distinti rispetto agli elementi block-level e inline, ma si tratta di una categoria molto ristretta.

HTML: Attributi e Valori

Apr 30, 2009 Author: Biondina | Filed under: (X)HTML e CSS, Tutorial HTML, Webdesign

Ti consiglio di leggere prima l’articolo sugli elementi di HTML.

Gli attributi contengono le informazioni relative ai dati del documento. Ad esempio:

<a href="http://www.google.it">Google</a>

o 

<img src="image.gif" width="75" />

HREF è un attributo di A e http://www.google.it è il valore di HREF -
SRC è un attributo di IMG, WIDTH è un altro attributo di IMG: image.gif è il valore di SRC, 75 è il valore di WIDTH.

In XHTML, il valore di un attributo deve essere necessariamente racchiuso tra virgolette, mentre in HTML possono essere omesse, anche se è buona pratica usarle sempre.

Alcuni attributi possono accettare valori di ogni tipo, per altri ci sono delle limitazioni. Gli attributi più comuni sono quelli che accettano valori predefiniti: si tratta cioè di scegliere un valore tra quelli di un elenco standard già predefinito. Ad esempio:

<link rel="stylesheet" type="text/css" media="screen" href="stle.css" />

Per l’attributo media dell’elemento link puoi inserire il valore screen, handled, print o altri ma non uno a piacere. Quando un attributo ha una lista fissa di valori, XHTML richiede che siano scritti in minuscolo mentre in HTML non ci sono limitazioni.

Molti attributi richiedono un valore numerico o percentuale: rientrano in questo gruppo gli attributi che descrivono una dimensione o una lunghezza. Quando si usa un valore numerico non si deve mai specificare l’unità di misura che è già sottointesa in pixel.

Gli attributi che invece controllano il colore possono avere come valore il nome del colore o il codice esadecimale che ne indica la componente rossa, verde e blu. (X)HTML non permette l’uso di valori numerici o di percentuale di colori al contrario dei css.

Altri attributi ancora, contengono invece un riferimento a file esterni e perciò i loro valori devono avere la struttra di un URL, ossia un riferimento univoco ad un file sul Web.

XHTML è un ingegnoso sistema per inserire in un documento di testo tutte le informazioni relative al contenuto. Queste informazioni sono definite markup e riguardano la formattazione e le relazioni fra le varie parti del documento.
XHTML fa uso di tre tipi principali di markup: elementi, attributi e valori.

Elementi

Puoi pensare agli elementi come a etichette che identificano e strutturano varie parti di una pagina Web, come se dicessi: “Questo è un titolo, questo è un paragrafo e questa è un’informazione importante“.
Alcuni elementi presentano uno o più attributi che completano e approfondiscono la descrizione della funzione dell’elemento stesso.

Gli elementi possono contenere testo, altri elementi o essere vuoti. Un elemento non vuoto è costituito da un tag di apertura, il contenuto ed un tag di chiusura; ad esempio:

Informazione <strong>importante</strong>

In questo caso <strong> è il tag di apertura racchiuso da parentesi angolari, poi c’è la parola da rendere in grassetto ed il tag di chiusura </strong> racchiuso anch’esso da parentesi angolari + la barra.

Un elemento vuoto si presenta come una combinazione di tag di chiusura e d’apertura; non includono contenuti testuali ed il singolo tag apre e chiude l’elemento. In HTML la barra finale è opzionale, in XHTML è obbligatoria. Ad esempio:

<br />
<img src="image.jpg" width="100" />

Ultima parte dei miei brevi articoli sulla nascita del WWW e l’evolversi dei vari linguaggi conosciuti per scrivere pagine Web. La crescita dei browser e il loro supporto ai css, la nascita del W3C, discorsi sull’accessibilità. Da HTML a XML e CSS.

Cosa usare?

Html è stato grande, non richiede una attenzione maniacale alla punteggiatura e ha reso facile scrivere pagine web. Ora, milioni di pagine dopo, forse è tempo di cambiare i nostri metodi.
Ci sono persone che affermano che HTML è il male e che XHTML è l’unica soluzione. Il linguaggio XHTML, è più potente, più flessibile, più facilmente supportato nel futuro ed è ampliabile fino a ricoprire ogni necessità. Ma è anche vero che non occorre sempre andare incontro ad ogni necessità: alcune volte vorrete pubblicare una semplice pagina senza diventare matti appresso ad ogni virgola. Fortunatamente siste una via di mezzo. Ci sono tre tipi di standard di markup, sia per HTML sia per XHTML.
Il primo, chiamato transitional, consente l’uso di tag deprecated. Il secondo, chiamato frameset, permette l’impiego sia dei tag deprecated sia l’uso del frame. Il terzo, definito strict, proibisce l’uso di qualsiasi tag deprecated. Potete combinare questi sistemi standard in vari gradi con i CSS. La combinazione miliore dipende da diversi fattori.

Scegliere fra HTML, XHTML e i CSS.

Non si raccomanda l’uso di tag proprietari perchè escludono parte degli utenti, ma esistono molte opzioni.
Ecco alcuni riferimenti per decidere.

  • Più grande è il sito e più è importante usare i CSS e XHTML. I primi fanno sì che sia più facile l’applicazione, la modifica e l’aggiornamento della formattazione nell’intero sito, il secondo da alle pagine la struttura necessaria perchè duri nel futuro.
  • Molte società e agenzie governative, soprattutto negli USA, richiedono che una pagina web adempia alle specifiche di accessibilità per consentire l’accesso alle persone disabili (e purtroppo in Italia siamo troppo indietro). In questo caso dovrete aderire quanto più possibile al codice XHTML strict, usando i CSS per la formattazione.
  • I grandi siti commerciali, che ricercano una vasta utenza, potrebbero preferire il codice HTML transitional, prendendo vantaggi dal alcuni tag deprecated, mantenendo però la stabilità offerta da XHTML.
  • I siti piccoli o personali potrebbero usare la sintassi HTML unendola alla potenza di formattazione dei CSS e impiegare occasionalmente i tag deprecated, quando necessario.
  • Il consiglio è di usare XHTML e CSS e il minimo indispensabile di tag deprecated.

Per fonti e alcune delucidazioni per i post, ringrazio l’autrice del libro HTML per WWW, Elizabet Castro.

Flickr PhotoStream

    IMG00011Hello Kitty stickersCharming Kitty 3D Stickersin my cornerCoworker made Hello Kitty pops2007 Hello Kitty Sticker Sack #32007 Hello Kitty Sticker Sack #12007 Hello Kitty Sticker Sack #2Hello Kitty Halloween StickersHello Hato Bus, Hello Kitty

Elena <3

biondina brokendollie Elena. Una ragazza di 22 anni.
Ama e detesta molte cose. Una ragazza particolare, affascinante e sincera che può rivelarsi una vipera velenosa e bastarda a seconda delle occasioni. Scrive in un momento buio della sua vita. Innamorata senza amore.
Continue...


Archives


Link Me

banner brokendollie

« Others! »

Affies

« More! || Wannabe? »

Credits

Official Website of Biondina.
Brokendollie.com © 2008 / 2010 All Rights Reserved.
For any questions or problems, please contact me. All content used on this site is © to it's proper owner. Using any content without the permission of it's artist or author is not allowed.

eXTReMe Tracker