Ultima modifica da un moderatore:
Se come me, un giorno vi siete svegliati e avete deciso di seguire la strada del web designer siete capitati sul posto giusto.
Benvenuti alla guida introduttiva ai principali linguaggi del web.
Si avete capito bene, si sta parlando di HTML, CSS e JAVASCRIPT.
COSA SONO.
Immaginate una persona. Adesso caratterizziamo la persona in 3 categorie:
-Come è fatta
-Stile
-Comportamento
Ogni singola persona avrà le sue caratteristiche fisiche (Altezza, peso, ecc..), avrà il suo stile(modo di vestire) che lo rende diverso dagli altri e infine avrà un suo comportamento(carattere, modi di fare ecc..).
Queste tre cose possono essere messe in relazione ad una pagina web:
HTML - Come è fatta: Il linguaggio HTML definisce la struttura della nostra pagina.
Questo ci permetterà di inserire del testo, un titolo, un bottone e tutti gli elementi che vorremmo presenti.
Solo linguaggio HTML ci permette di creare una pagina web che possiamo, usando un francesismo, definire schifosa perché si, possiamo inserire tutti gli elementi che vogliamo, ma senza poter modificare alcuna parte grafica di essi. Ed è proprio qua che ci viene in aiuto il CSS.
CSS - Stile: Ognuno con il modo di vestire cerca di farsi riconoscere, ed è proprio così anche nel web. Con il css possiamo definire la “bellezza” di ogni piccolo particolare degli elementi presenti nella nostra pagina. E’ grazie al css che anche l’occhio ha la sua parte, così da non dover navigare in siti statici e brutti esteticamente.
JAVASCRIPT - Comportamento: Ovviamente come ogni persona ha il suo carattere ogni sito web ha le sue funzioni. Un esempio può essere il bottone “cerca” che deve a javascript il suo funzionamento. Ovviamente senza di esso sarebbe solo un inutile tasto messo li per bellezza. Il motore di tutto sta in javascript.
ATTENZIONE: Da non confondere con java, sono due cose completamente diverse nonostante il nome simile.
SINTASSI
L’HTML è costituito da tag. I tag sono parole racchiuse tra parentesi angolari “<tag>” che definiscono la presenza di un elemento di una pagina. Quasi sempre, eccetto alcuni speciali, i tag vanno chiusi “</tag>”. Sono troppi da ricordare a memoria, se volete una lista dei principali basta andare qua.
Tag obbligatori:
Questi sono i tag predefiniti per costruire una pagina web. Tutti i siti internet contengono questi tag.
Ma passiamo ai fatti, se ad esempio nel mio sito voglio un titolo, la sintassi sarà la seguente:
Cosa significa? Semplicemente che il mio browser appena arriva a leggere il tag “h1” capisce che la parola scritta all’interno deve essere un titolo e lo interpreterà come dovuto. Ogni tag ovviamente ha la sua funzione e basta avere un quadro generale di tutti i tag per esserne a cavallo.
Per avere chiarezza nel codice usiamo i commenti che ovviamente non verranno mostrati nella pagina:
Esempio pagina HTML:
Ecco il risultato:
Il CSS invece prende in considerazione l’aspetto dei tag dell’HTML andandolo a modificare in ogni particolare. Ogni dettaglio(dalla posizione, al colore, al bordo ecc..) del tag è contenuto dentro due parentesi graffe.
Ad esempio il titolo di prima voglio farlo ancora più grande, basterà fare:
Tranquilli non è aramaico, o almeno non dopo averci preso un po la mano. Semplicemente tutto questo significa che il tag “h1” nella pagina web deve avere il font grande 60px. E funziona così per tutti i tag, basterà trovare la caratteristica che si vuole modificare ed è fatta, ma anche qua è impossibile saperle a memoria essendo troppe quindi vi lascio un link che vi può essere di aiuto.
I commenti nel css:
Esempio CSS:
Ecco il risultato:
Il JAVASCRIPT essendo un vero e proprio linguaggio di programmazione è molto differente dai primi due e molto più complicato da comprendere. Vi consiglio prima di imparare HTML e CSS e solo dopo passare a questo. Non vi sto a spiegare essendo presente una guida qua su Inforge molto completa di cui vi lascio il link.
Spero di essere stato chiaro abbastanza per tutte le persone che vogliono avvicinarsi al meraviglioso mondo del web design.
Fatemi sapere se vi è piaciuta la guida e considerate che è la mia prima in assoluto ed è tutta di mano mia. Se avete consigli/dubbi/domande non esitate a mandarmi un mp.
Beeeeeeella!
Benvenuti alla guida introduttiva ai principali linguaggi del web.
Si avete capito bene, si sta parlando di HTML, CSS e JAVASCRIPT.
COSA SONO.
Immaginate una persona. Adesso caratterizziamo la persona in 3 categorie:
-Come è fatta
-Stile
-Comportamento
Ogni singola persona avrà le sue caratteristiche fisiche (Altezza, peso, ecc..), avrà il suo stile(modo di vestire) che lo rende diverso dagli altri e infine avrà un suo comportamento(carattere, modi di fare ecc..).
Queste tre cose possono essere messe in relazione ad una pagina web:
HTML - Come è fatta: Il linguaggio HTML definisce la struttura della nostra pagina.
Questo ci permetterà di inserire del testo, un titolo, un bottone e tutti gli elementi che vorremmo presenti.
Solo linguaggio HTML ci permette di creare una pagina web che possiamo, usando un francesismo, definire schifosa perché si, possiamo inserire tutti gli elementi che vogliamo, ma senza poter modificare alcuna parte grafica di essi. Ed è proprio qua che ci viene in aiuto il CSS.
CSS - Stile: Ognuno con il modo di vestire cerca di farsi riconoscere, ed è proprio così anche nel web. Con il css possiamo definire la “bellezza” di ogni piccolo particolare degli elementi presenti nella nostra pagina. E’ grazie al css che anche l’occhio ha la sua parte, così da non dover navigare in siti statici e brutti esteticamente.
JAVASCRIPT - Comportamento: Ovviamente come ogni persona ha il suo carattere ogni sito web ha le sue funzioni. Un esempio può essere il bottone “cerca” che deve a javascript il suo funzionamento. Ovviamente senza di esso sarebbe solo un inutile tasto messo li per bellezza. Il motore di tutto sta in javascript.
ATTENZIONE: Da non confondere con java, sono due cose completamente diverse nonostante il nome simile.
SINTASSI
L’HTML è costituito da tag. I tag sono parole racchiuse tra parentesi angolari “<tag>” che definiscono la presenza di un elemento di una pagina. Quasi sempre, eccetto alcuni speciali, i tag vanno chiusi “</tag>”. Sono troppi da ricordare a memoria, se volete una lista dei principali basta andare qua.
Tag obbligatori:
HTML:
<html> </html>
<head> </head>
<body> </body>Ma passiamo ai fatti, se ad esempio nel mio sito voglio un titolo, la sintassi sarà la seguente:
HTML:
<h1>Titolo che voglio</h1>Cosa significa? Semplicemente che il mio browser appena arriva a leggere il tag “h1” capisce che la parola scritta all’interno deve essere un titolo e lo interpreterà come dovuto. Ogni tag ovviamente ha la sua funzione e basta avere un quadro generale di tutti i tag per esserne a cavallo.
Per avere chiarezza nel codice usiamo i commenti che ovviamente non verranno mostrati nella pagina:
HTML:
<!– Questo è un commento html –>Esempio pagina HTML:
HTML:
<html>
<head>
<title>Titolo</title> <!– Titolo scheda browser –>
</head>
<body>
<h1>Titolo</h1> <!– Titolo pagina web –>
<h3>Sottotitolo</h3> <!– Sottotitolo –>
<img src=“prova.jpg”> <!– Immagine –>
</body>
</html>Ecco il risultato:
Il CSS invece prende in considerazione l’aspetto dei tag dell’HTML andandolo a modificare in ogni particolare. Ogni dettaglio(dalla posizione, al colore, al bordo ecc..) del tag è contenuto dentro due parentesi graffe.
Ad esempio il titolo di prima voglio farlo ancora più grande, basterà fare:
Codice:
h1{
font-size: 60px;
}Tranquilli non è aramaico, o almeno non dopo averci preso un po la mano. Semplicemente tutto questo significa che il tag “h1” nella pagina web deve avere il font grande 60px. E funziona così per tutti i tag, basterà trovare la caratteristica che si vuole modificare ed è fatta, ma anche qua è impossibile saperle a memoria essendo troppe quindi vi lascio un link che vi può essere di aiuto.
I commenti nel css:
Codice:
/* Questo è un commento css */Esempio CSS:
Codice:
/* Modifico la grandezza e il colore dei tag h1 */
h1{
font-size: 60px;
color: black;
}
h3{
font-size: 30px;
color: red;
}
/* Modifico la larghezza e l’altezza dell’immagine */
img{
width: 300px;
height: 300px;
}Ecco il risultato:
Il JAVASCRIPT essendo un vero e proprio linguaggio di programmazione è molto differente dai primi due e molto più complicato da comprendere. Vi consiglio prima di imparare HTML e CSS e solo dopo passare a questo. Non vi sto a spiegare essendo presente una guida qua su Inforge molto completa di cui vi lascio il link.
Spero di essere stato chiaro abbastanza per tutte le persone che vogliono avvicinarsi al meraviglioso mondo del web design.
Fatemi sapere se vi è piaciuta la guida e considerate che è la mia prima in assoluto ed è tutta di mano mia. Se avete consigli/dubbi/domande non esitate a mandarmi un mp.
Beeeeeeella!