COSA SONO E COME FUNZIONANO I CSS
Rielaborazione delle slide utilizzate nei miei vecchi seminari sui CSS.
Licenza Creative Commons < http://creativecommons.org/licenses/by-nc-nd/3.0/ >
Introduzione ai CSS by Gianluca Troiani is licensed under a Creative Commons Attribuzione - Non commerciale - Non opere derivate 3.0 Unported License.
Based on a work at www.constile.org.
Permissions beyond the scope of this license may be available at http://www.constile.org/res/introcss.html.
COSA SONO E COME FUNZIONANO I CSS
Rielaborazione delle slide utilizzate nei miei vecchi seminari sui CSS.
Licenza Creative Commons < http://creativecommons.org/licenses/by-nc-nd/3.0/ >
Introduzione ai CSS by Gianluca Troiani is licensed under a Creative Commons Attribuzione - Non commerciale - Non opere derivate 3.0 Unported License.
Based on a work at www.constile.org.
Permissions beyond the scope of this license may be available at http://www.constile.org/res/introcss.html.
Questo documento rappresenta parte delle slide del corso erogato dalla Web Agency ElaMedia Group. Per maggiori informazioni: http://www.elamedia.it/corso-html-roma.html
Una veloce corso sul linguaggio per la formattazione di pagine web con CSS
----------------------------
A quick course on language to format web pages with CSS
Questo documento rappresenta parte delle slide del corso erogato dalla Web Agency ElaMedia Group. Per maggiori informazioni: http://www.elamedia.it/corso-html-roma.html
Una veloce corso sul linguaggio per la formattazione di pagine web con CSS
----------------------------
A quick course on language to format web pages with CSS
La Semantica del Web con HTML5 e Schema.orgSkillsAndMore
Queste slide sono state utilizzate all'interno del nostro webinar "Scopri la nuova Semantica Web con HTML5" che puoi trovare a questo indirizzo: http://skillsandmore.org/semantica-web/
All'interno dell'intervento abbiamo approfondito il termine e le tecniche che portano a raggiungere una buona semantica, Eugenio ci ha parlato della gerarchia degli elementi HTML5 e successivamente siamo andati a scoprire la sintassi e l'utilizzo di Schema.org, i nuovi attributi che ci permettono di approfondire il significato del proprio contenuto.
Personalmente ti consiglio di venire a vedere la registrazione del webinar e se non vuoi perderne altri non ti resta che iscriverti alla nostra newsletter: http://skillsandmore.org/newsletter/
4. Elementi html
<tag di apertura
attributo=’valore’ >
CONTENUTO
</tag di chiusura>
<p
id=’par1’ >
Lorem ipsum
dolor sit amet ..
</p>
5. Tipologie di tag
<!DOCTYPE html>
<html>
<head>
<title>Titolo del documento</title>
</head>
<body>
Contenuti del documento
</body>
</html>
<html>
1) segnale al
browser che il
documento è di tipo
HTML
2) rappresenta da
radice del
documento.
2) è il contenitore di
tutti gli altri elementi
HTML, ad
esclusione del
<!DOCTYPE> tag.
La dichiarazione <!DOCTYPE> non è un tag HTML; è una istruzione che dice
al browser in quale versione di HTML è scritta la pagina
<head>
è il contenitore di tutti
gli elementi di tipo
head
<body>
è il contenitore di tutti
gli elementi di tipo body
6. Elementi di tipo head
<title> <style> <link><meta> <script>
Per inserire
informazioni
varie, quali la
codifica dei
caratteri:
<meta
charset="utf-8"
>
Per inserire
regole di stile
Per inserire
dei link a dei
file esterni, ad
esempio ad un
file css tramite
l’attributo href
Per inserire
istruzioni
javascript
oppure un
collegamento
ad un file
javascript
tramite
l’attributo src
Per inserire un
titolo che
identifica la
pagina
7. Elementi di tipo body - block
<div> <p> <ol><h1>..<h6> <ul>
Definiscono
titoli e sottotitoli.
Definisce un
paragrafo.
Generalmente
contiene solo
testo o
elementi
inline.
Lista ordinata.
può contenere
solo l'elementi
<li>
Lista non
ordinata. Può
contenere solo
elementi <li>
Definisce un
blocco di
contenuto
generico o una
sezione del
documento.
8. Elementi di tipo body - block - tabella
<table> <thead> <th><tbody> <tr>
Definisce il corpo
di una tabella.
Con <thead> e
<tfoot> serve a
raggruppare le
righe di una
tabella.
Definisce una
tabella per
l'inserimento di
dati tabulari.
Definisce
la testata
di una
tabella.
intestazione
di una cella
Definisce
una riga
<td>
definisce
la cella di
una
tabella
9. Elementi di tipo body - inline
<span> <i> <u><tt> <em>
Testo con
carattere
monospazio.
Definisce una
sezione di testo
inline generica
cui applicare
uno stile oppure
visualizzare in
funzione della
lingua
Testo in
corsivo
Testo
sottolineato
Testo
evidenziato
<br>
Inserisce
un'interru
zione di
riga
10. Posizionamento Contenuti
Elementi inline
Elementi che sono contenuti in
un paragrafo, quali <span>
<img>, ma anche i <link>. Non
considerano eventuali attributi
width o height
Elementi block
Paragrafi e titoli ed altri elementi
che possono incorporarli, quali
<div>. La loro dimensione può
essere governata dagli attributi
width o height
display:block
float:left
