INIZIAMO IL CORSO

INIZIAMO IL CORSO

Questo si chiama secondo titolo

Paragrafi e tag

Per aprire un comando bisogna inserire il minore seguito dal tipo di comando che vogliamo dare, seguito dal maggiore.
Per chiudere il comando si procede allo stesso modo con uno slash subito dopo il minore. L'insieme di questo codice viene chiamato tag.

I testi HTML sono composti da due parti: head, con il titolo della pagina e body, con il corpo della pagina. Vanno entrambi aperti e chiusi come scritto sopra. Prima ancora bisogna aprire il comando HTML all'inizio del testo e chiuderlo alla fine.

Con la p si aprono i paragrafi.

I paragrafi che si possono inserire sono infiniti ma è sempre meglio non inserirne troppi per avere un SEO migliore.

Per inserire il grassetto basta inserire la b, a questo modo: Esempio.

Con la i abbiamo il corsivo, con il br interrompiamo la frase e andiamo a capo (utile per non aprire un altro paragrafo) e infine con hr inseriamo una linea di interruzione orizzontale.

Link

Per inserire link a contatti, sito, mail o altro all'interno di un titolo il comando da inserire é parentesi minore a seguito da href=. Abbiamo perciò href="800800800", href="[email protected]" e href="http://www.sito.it"l'importante è che ci siano le virgolette prima e dopo il link che vogliamo scrivere. Esempio nella stringa che segue: Visita il mio sito!

Immagini

Il tag img src= ha la funzione di inserire un immagine da un archivio specifico, il quale va specificato nelle virgolette (come abbiamo visto sopra con i link); il tag sarà perciò img src="/root/img/foto-gatto.jpg"

Se invece il file da inserire è nella stessa cartella in cui si trova il file HTML, ci basterà digitare img src="/nomedellafoto.png"
Nel caso l'immagine provenisse da uno specifico URL dovremmo specificare l'intero percorso all'interno del tag:img src="http://www.byte-post.com/immagini/esempio/ecc.png"

Regolare le altezze delle immagini

Se volessimo far vedere all'utente l'immagine in una determinata misura il codice da inserire è questo:img src="immagine.jpg" height="60" width="30"
Possiamo anche decidere di specificare solo uno dei deue valori tra height e width preservando così la qualità dell'immagine: Se volessimo far vedere all'utente l'immagine una determinata misura il codice da inserire è questo:img src="immagine.jpg" height="60" width="30"
Possiamo anche decidere di specificare solo uno dei deue valori tra height e width preservando così la qualità dell'immagine:img src="immagine100x100.jpg" height="60"

Ai fini di avere un SEO migliore è bene specificare sempre la descrizione dell'immagine così da renderlo "visibile" anche al motore di ricerca. Per farlo basta inserire alt= all'interno del tag, seguito dal titolo dell'immagine.
L'aspetto finale del tag sarà quindi: img src="/root/img/foto-gatto.jpg" alt="la foto di un gatto"

I tag div

Il tag div serve ad organizzare la pagina in sezioni e va inserito esclusivamente nella body del testo.
Inserendo il tag div creiamo una nuova sezione scollegata dalle altre nel quale possiamo mettere testi di colore diverso, di diverso font ecc.
Immaginiamolo come un cassetto di un armadio dove all'interno possiamo metterci ciò che preferiamo. Proprio come per noi è più utile cercare i calzini in un cassetto e le mutande in un altro, anche per il motore di ricerca sarà più facile cercare tra i vari div; torna perciò molto utile ai fini del SEO.
Se volessimo ad esempio fare una sezione con il testo di colore verde, magari per dar risalto ad un concetto, il comando che dovremmo inserire sarebbe: div style="color:green;"
E il risultato che otterremmo sarà questo qui sotto:

esempio.

I tag table

Per creare delle colonne dobbiamo usare i tag table digitando per l'appunto il comando table
All'interno del table troviamo altri tag: tr per creare le righe di una tabella, td per creare le celle e th con il quale diamo i nomi alle celle.
Esempio di una tabella:
Nome Età Città
Giovanni 35 Roma
Mario 47 Milano

Mancano infine i bordi della tabella i quali vanno inseriti utilizzando CSS:
Nome Età Città

Liste

Abbiamo due tag per creare le liste in HTML, ul unordered list e ol ordered list.
Con la prima creiamo la classica lista della spesa e avvalendoci di CSS possiamo farla con i puntini (disc), quadratini (square), cerchietti (circle) o libera (none).
Con la seconda invece assegniamo un numero o una lettera per ogni riga della lista:

  • type=”1″
  • type=”A”
  • type=”a”
  • type=”I”
  • type=”i”

  • Per entrambe le liste il tag da inserire ad ogni riga è ul mentre per lo stile la stringa è ul(nel caso di lista puntata)style="list-style-type:square;"