domenica 1 novembre 2015

Scrivere codici 2

Aggiungiamo altri tag.
Proviamo <i> e <small>.


<i>Oggi scrivo in corsivo.</i>
Oggi scrivo in corsivo. 

<small>Oggi scrivo più in piccolo.</small>
Oggi scrivo più in piccolo.

Se usi 2 tag chiudi prima il tag che hai aperto per ultimo:
<b><i>Oggi scrivo in grassetto e in corsivo</i></b>
Oggi scrivo in grassetto e in corsivo

Metti una linea orizzontale con <hr />:


Vuoi fare una lista? Per gli elementi delle liste devi usare il tag li (abbreviazione delle parole inglesi "list item") Hai due modi: ul è l'abbreviazione di "unordered list" (lista non ordinata) e inserisce un simbolo per ogni elemento della lista. Il codice:

<ul>
      <li>Cane</li>
      <li>Gatto</li>
</ul>
Produce:
  • Cane
  • Gatto
ol è l'abbreviazione di "ordered list" (lista ordinata) e numera ogni elemento della lista.

<ol>
       <li>Cane</li>
       <li>Gatto</li>
</ol>
Produce:
  1. Cane
  2. Gatto
Gli elementi forniscono la struttura di un documento HTML e dicono come il browser dovrà visualizzare il tuo sito web. In generale gli elementi sono formati da un tag iniziale, dal contenuto e da un tag finale. In alcuni elementi si possono inserire informazioni aggiuntive dette attributi. Con l'attributo di stile puoi aggiungere un colore di sfondo. Ogni colore ha un codice scritto con un numero esadecimale:

White: #ffffff

Black: #000000 (zero)

Red: #ff0000
Blue: #0000ff

Green: #00ff00

Yellow: #ffff00

<h2 style="background-color:#ff0000;">Un HTML colorato</h2>

Un HTML colorato

oppure prova:
<html>
       <head>
       </head>
       <body style="background-color:#ff0000;">
       </body>
</html>
Il web è fatto di link.
Impariamo a costruirli. L'elemento a è l'abbreviazione della parola inglese "anchor" (ancora), mentre l'attributo href sta per "hypertext reference" (riferimento ipertestuale), che specifica dove deve portare il link. Nell'esempio:

<a href="http://bredainrete.blogspot.com">Questo è il link al nostro blog di classe</a>

l'attributo href ha il valore " http://bredainrete.blogspot.com", che è l'indirizzo completo del blog e viene chiamato URL (Uniform Resource Locator).
Nota che "http://" deve essere sempre inclusa in una URL.
La frase "Questo è il link al nostro blog di classe" è il testo che viene mostrato sul browser come link. Ricordati di chiudere l'elemento con il tag di chiusura .

Ora scolleghiamoci dalla rete e costruiamo un ipertesto. Prepara una cartella e dalle un nome, per esempio PRIMO IPERTESTO. Prepara due file che chiameremo per semplicità pagina1.html e pagina2.html. Puoi usare anche la/le pagine della lezione precedente:


<html>
       <head>
       <title>Il mio primo sito web</title>
       </head>
       <body>
       <p> Il primo sito web di …… .</p>
       <p> la prima pagina web di …… .</p>

       </body>
</html>


e


<html>
       <head>
       <title>Il mio primo sito web</title>
       </head>
       <body>
       <p>La seconda pagina web pagina web di …… </p>
       </body>
</html>


Realizza un link da una pagina all'altra semplicemente digitando il nome del file nel link:

<a href="pagina2.htm">Clicca per andare alla pagina 2</a>

Se vuoi linkare un’immagine, inserisci un’immagine nella cartella (immagine.jpg). L'elemento img viene aperto e chiuso nello stesso tag; src sta per "source", cioè sorgente):  
<img src="immagine.jpg" />

con <img src=" immagine.jpg " width="32" height="32" /> cambi le dimensioni dell’immagine.

Nessun commento:

Posta un commento