-
+1
.Formattazione testo e link
Introduzione
Questo argomento dovrebbe essere semplicissimo per chi è abituato a scrivere articoli su ForumFree, visto che i BBCode (quelli strani con le parentesi quadrate di FF) son abbastanza simili a quelli HTML.
In questa guida vi spiego solo un paio di modi per stilizzare del testo.
Per stilizzare il testo una volta si usava l'HTML, oggi invece è più usuale usare il CSS (Cascading STYLEsheet) che è un linguaggio "specializzato". Quindi vi mostrerò sempre entrambi i modi (così imparate anche già un po' di CSS, bei pampini).
Grassetto (di solito si usa strong)HTML<strong>grassetto</strong> <!--Di solito si usa questo, i motori di ricerca danno più importanza alle parole nel tag "strong"-->
<b>grassetto</b> <!--Come il BBCode rende il testo grassetto-->
<span style="font-weight:bold">Grassetto</span> <!--metodo CSS-->
<!--Il valore del attributo "style" è sempre CSS, poi quando faremo le basi del CSS imparerete meglio :)-->
Corsivo (di solito si usa em)HTML<em>corsivo</em> <!--Di solito si usa questo metodo qui-->
<i>corsivo</i> <!--Come il BBCode rende il testo corsivo-->
<span style="font-style:italic">corsivo</span> <!--metodo CSS-->
Sottolineato (di solito si usa u)HTML<u>sottolineato</u> <!--Come il BBCode rende il testo sottolineato-->
<span style="text-decoration:underline">sottolineato</span> <!--metodo CSS-->
Barrato (di solito si usa del)HTML<del>barrato</del> <!--Di solito si usa questo metodo qui-->
<span style="text-decoration: line-through;"> barrato </span> <!--metodo CSS-->
sup e subHTML<sup>sup</sup>
<sub>sub</sub>
Andare a capoHTML<br>
Linea divisoriaHTML<hr>
Poi arrivano le liste (ordinate e non ordinate)
il tag- significa "unordned list" mentre <ol> significa "ordned list".
- punto 1
- punto 2
per inserire i singoli punti si usa il tag "li", che sta per "list item".
Esempio per questa lista.
<ul>- punto 1
- punto 2
- punto 1
- punto 2
HTML<ul> <!--Lista di default-->
<li>punto 1</li>
<li>punto 2</li>
</ul>
<ul type="circle"> <!--lista con i cerchietti-->
<li>punto 1</li>
<li>punto 2</li>
</ul>
<ul type="square"> <!--Lista con i quadrati-->
<li>punto 1</li>
<li>punto 2</li>
</ul>
Poi c'è la contra parte la lista ordinata.- punto 1
- punto 2
- punto 3
- punto 1
- punto 2
- punto 3
- punto 1
- punto 2
- punto 3
Qui si ha la possibilità di scegliere come vengono mostrati i numeri e da quale numero partire.
Qui il codice di queste 3 liste ordinateHTML<ol> <!--Lista numerata-->
<li>punto 1</li>
<li>punto 2</li>
</ol>
<ol type="I"> <!--Lista con i numeri romani-->
<li>punto 1</li>
<li>punto 2</li>
</ol>
<ol start="100"> <!--Lista che parte da 100-->
<li>punto 1</li>
<li>punto 2</li>
</ol>
Font (oggi rimpiazzato dagli stili)
Il Tag font è deprecato, però per completezza ve lo illustro comunque.
con font si possono definire: dimensione, font e colore di un testo.
Testo di prova nel tag font
gli attributi sono:
face="NOME-FONT"
color="COLORE" (I colori possono essere scritti per nome, oppure essere definiti tramite rgb, esadecimale o hsl, vi mostrerò in futuro come funziona).
size="NUMMERO" (Non sò esattamente a che cosa corrisponde il numero)
Il codice per il mio bellissimo testo lì sopra è:HTML<font face="arial" color="#abcdef" size="7">Testo di prova nel tag font</font>
Inserire immagini
Qui non mi soffermo molto, è molto facile.
il tag si chiama img e gli attributi sono src (source) e alt (descrizione per motori di ricerca e testo visualizzato se il browser non riesce a caricare l'immagine).HTML<img src="URL-IMMAGINE" alt="TESTO-DESCRIZIONE">
LINK
Arriviamo all'argomento che scotta, al tag "a" (che sta per ancor, ovvero ancoraggio, che simboleggia come le pagina si "ancorano" a vicenda).
l'attributo importante è "href" (Hyperlink Reference) che indica appunto l'indirizzo al quale deve andare.
poi ci sono alcuni "attributi chicche" che sono "accesskey" e "title" che funzionano su tutti i tag, ma sono utili con i link.
E c'è anche "target" che funziona SOLO per i link.
Iniziamo con un esempio.HTML<a href="http://jsbin.com" target="_blank">LINK</a>
L'attributo href deve contenere un link completo se rimanda su un altro sito (quindi con http:// all'inizio).
Se invece rimaniamo sullo stesso sito, ma stiamo indirizzando ad un altra pagina di questo, allora il link inizia con "/" per esempio /?f=8666054 manda alla sezione web design sempre del MAW, senza che noi "diciamo" che sia sul maw.
Se invece abbiamo un server, vediamo che un sito ha cartelle e file come un computer. Di solito ogni pagina web che si rispetti ha una cartella "img", "scripts", "styles" e "index.html". Per prendere le cartelle o i file nella stessa cartelle, dobbiamo iniziare con un "./" che significa "parti da qui". Invece il "/" significa "parti dalla radice". Quindi il link per un' immagine potrebbe essere ./img/blurrick_pettinato.png.
E l'ultimo tipo di link è il hash-link, che fa scorrere la pagina ad un certo punto della pagina. Per esempio avrete sicuramente notato il "#lastpost" di forumcommunity.
Per definire il posto al quale deve saltare basta che si aggiunge l'attributo "name" ad un qualsiasi elemento e poi il rispettivo hash. Per esempio.HTML<a href="#SaltaFinoAQui">Salta fino al punto "saltafinoaqui"</a>
<!--Da un altra parte nella pagina-->
<a name="SaltaFinoAQui"></a>
<!--da notare che il tag può anche non avere contenuto-->
Poi ci sono gli attributi "accesskey" e "title" che son opzionali.
acceskey="LETTERA" << indica con quale lettera si "simula" il click sul link, per esempio accesskey="m" (simula il click con alt+m)
title="decsrizione" << apre una finestrella che descrive il link
E il tag target="_blank" fa sì che il link si apre in un nuovo tab (oppure una nuova finestra per i browser che non hanno le tab).
Esercizi
Come esercizio vorrei che modifichiate a vostro piacimento il lorem ipsum, cercando di usare tutti i tag imparati qui, in fondo al lorem ipsum inserite un link che rimanda al MangaAnimeWorld
Edited by flexlex - 15/2/2014, 11:07
. -
.
A poco farò gli esercizi, Bro. . -
.
Yeah! 
. -
.
size="NUMMERO" <--- Correggi, bro.
il link per unn immagine potrebbe essere ./img/blurrick_pettinato.png. <--- un'immagine
Per quanto riguarda l'hash link: cioè, come potrebbe funzionare? Ho capito ma mi fai ugualmente un esempio?. -
.
Correttissimo 
Ecco qui un esempio, il codice inserito qui sotto èHTML<a href="#RorySpacca">Vai al punto dove Rory spacca</a>(un paio di acapi)<a name="RorySpacca">la pagina "salta" fino a qui</a>
Vai al punto dove Rory spacca
la pagina "salta" fino a qui. -
.
Capitissimo! Grazie :3 . -
.:Milla:. .
User deleted
Okay, penso di aver fatto tutto tranne quella cosa che salta dove rory spacca, penso che in una pagina simile non avrebbe senso, o si? :v vabbè, comunque eccolo http://jsbin.com/xuzid/3/edit
Ho un paio di cose da chiedere però. Dunque, non è possibile fare il testo sia sottolineato che sbarrato contemporaneamente, giusto? E non si possono sbarrare i testi sub e sup, giusto?
E se volessi colorare l' hr e i link come devo fare? con il <font face="eccetera" > non mi esce, colora il testo normale, ma non il link. per l'hr non saprei proprio invece :v
con il target _blank hai detto che si apre una nuova scheda o finestra giusto? e se invece non voglio che si apra basta rimuoverlo o bisogna mettere un altro target?
okay penso sia tutto ouo com'è andata?. -
+1 .
Ottimo l'esercizio
La pagina che salta ha senso?
Si, può essere usato come indice in una guida. Il miglior esempio è wikipedia, che nel indice ha i hash-link ai vari "titoli".
è possibile fare il testo sottolineato e barrato?
Si, vi sono due metodi, uno bello e uno brutto.
Quello meno bello è con più tag, per esempioHTML<u><s>Testo sottolineato e barrato</s></u>
Il metodo più bello invece è con più valori in una proprietà.HTML<span style="text-decoration:line-through overline underline;">barrato, sottolineato e sopralineato</span>
per sub e sup?
Stessa storia
per colorare l'hr?
L'hr si colora con il css di solito usando la proprietà "color", ma per farlo in html si usaHTML<hr color="orange">
Per colorare il link?
Come per gli span si aggiunge l'attributo style. Per far aprire il link me scheda o finestra, basta non definire il targetHTML<a href="LINK" style="color:green">LINK</span>. -
.:Milla:. .
User deleted
okay ho capito grazie >w< quindi così ho fatto proprio tutto tutto *o* tranne la cosa della pagina che salta, ma comunque ho capito come funziona c:
un'ultima domanda...
Dato che mi confondo sempre, come faccio a capire quando devo mettere i due punti o l'= ? per esempio al color, ogni tanto me lo legge con color:#000 e ogni tanto devo fare color="black". -
+1 .
Ecco, questo è perché vorrei dividere le due cose..
Quello con i due punti proprietà:valore; è CSS. IL CSS può essere definito direttamente come attributo (attributo "style") ovveroin "style" ci va appunto lo stile, che va definito in CSS. ovvero quello con i due punti.CODICE<span style="color:#000;">testo nero</span>
Invece l'altro color="#000" è un attributo e va associato ad un tag HTML e NON è CSS e non fa parte degli stili. il color="black" dovrebbe funzionare solo con il tag font, tipoCODICE<font color="black">testo nero</font>
Il metodo migliore sarebbe quello con i due punti (col CSS). Dopo-domani posto la guida sui contenitori, poi la settimana dopo ancora le tabelle, poi facciamo un riassunto / feedback del HTML di base, poi si procede a palla con il CSS. E li poi ci divertiremo un mondo
. -
.
Già lo sai quello che penso di te, vero? <3 . -
.
Che sono brutto e cattivo? Seeeh xD
. -
.:Milla:. .
User deleted
okay, tutto chiaro capo *^* aspetto con ansia il resto . -
~YuYa .
User deleted
Metto anche questo~ http://jsbin.com/xuzid/6/edit SPOILER (clicca per visualizzare)Come già accennato, mi sta insegnando Milla, quindi tutto ciò che ho scritto/messo è "dedicato" a lei E non mi andava di cambiare XD
Ah! Le prime due liste sono miei esperimenti, perciò sono uscite strane. :v Mentre non ho capito quella cosa della pagina che salta. :v
Per il resto com'è, tralasciando le mie cose stupide? ouo. -
.
~YuYa direi nuovamente tutto apposto!
Qui c'è un esempio con i hashlink: click.
Comunque, sono felice di ripeterlo ancora una volta
Un link si crea con l'attributo "a". La "a" sta per "ancoraggio", ciò significa che ancora l'utente ad un altra cosa. Questa cosa può essere usata per portare l'utente su una altra pagina (esterna), una pagina interna (per esempio un topic), oppure un punto preciso sulla pagina stessa.
Per "segnare" il punto preciso al quale vogliamo portare il nostro utente, dobbiamo usare un elemento con attributo name.
Per esempio creiamo uno un punto di atterraggio con il seguente nome.CODICE<a name="NOME_PUNTO_ANCORAGGIO"></a>
Non deve essere per forza un "a", ma può esser eun elemento qualsiasi, anche una listaCODICE<ol name="NOME_PUNTO_ANCORAGGIO">
...
Poi per dire alla pagina a quale punto scorrere, creiamo un link con un "hash" (#) seguito dal nome del punto di ancoraggio, quindi così:CODICE<a href="#NOME_PUNTO_ANCORAGGIO">Vai al punto: NOME_PUNTO_ANCORAGGIO</a>
Nel esempio di prima ho creato un punto di atterraggio con attributo: name="RorySpacca".
Quindi se ora inseriamo un link con href="#RorySpacca", il tuo browser ti porterà automaticamente all'altezza del punto di atterraggio.CODICE<a href="#RorySpacca">Vai al punto: RorySpacca</a>
TryItOut:Vai al punto: RorySpacca.
Formattazione testo e link[HTML - Base] |
Offline
Web
