Oltre al HTML di base

Source : http://www.iupui.edu/~webtrain/tutorials/beyond.html

Oltre al HTML di base

Tabella dei Contenuti

Informazioni di base

L’impostazione di una semplice home page è un compito relativamente facile. E’ anche abbastanza facile da ottenere alcune semplici grafici al posto sulle vostre pagine. Prima o poi, tuttavia, è possibile che si desideri andare oltre le nozioni di base.

I tre principali browser web sono Internet Explorer, Firefox e Netscape Navigator. Mentre ogni riconoscere i tag HTML standard, ogni browser ha sviluppato estensioni di HTML che vengono riconosciuti solo quando si utilizza uno specifico browser. Le informazioni contenute in questo documento è generalmente riconosciuta da ogni browser.

NOTA: Se si decide di provare alcune di queste tecniche HTML, non è necessario inserire interruzioni di riga che possono essere indicati in questi esempi di codifica in HTML; esempi di questo documento può mostrare le interruzioni di riga solo perché di formattazione del documento stesso.

Back to Top

Gli effetti di colore

Tutti i colori visualizzati sono di colore rosso-verde-blu (rgb) combinazioni. In questo modo gli sfondi colorati per quelle pagine dove si desidera un semplice, colore solido nella vostra home page. Questi stessi valori rgb anche specificare il colore del testo, collegamenti e “seguita” links (links che hai cliccato su poi restituita).

Quando si impostano i colori, essi sono per l’intera home page file. In generale, non “mix e match.”

Vedere samples of colors che sono utilizzabili da tutti i browser Web.

I colori caldi (rosso, giallo e arancio) sembrano “approccio”, il lettore mentre i colori freddi (blu e verdi) sembrano “allontanarsi” il lettore. Generalmente si consiglia di scegliere i colori freddi per gli sfondi in modo che lo sfondo non è in concorrenza con il primo piano e rendere più difficile la lettura.

“Browser-safe” i colori sono quelli che rimangono fedeli alle piattaforme informatiche e se visto in 256 colori, colore a 16 o 24 bit. Altri colori possono pixelata (apparire abitutini) o a nastro (nastri, piuttosto che miscelati, colore).  Colori “Browser-safe sono sempre combinazioni di 00, 33, 66, 99, cc, ff. Tutti i colori in tonalità e valore grafici di cui sopra sono colori “browser-safe.

Piuttosto che utilizzare il tag <body> da solo, è possibile aggiungere qualsiasi combinazione di opzioni per lo sfondo, testo, collegamenti e visitati (seguito) collega colore.

NOTA: Queste opzioni possono essere collocati in qualsiasi sequenza dopo il “corpo” all’interno del tag.

Il tag, con le opzioni, dovrebbe seguire questo formato: <body bgcolor = “#xxxxxx” text= “#xxxxxx” link= “#xxxxxx” vlink= “#xxxxxx”> dove “xxxxxx” è il valore RGB.

Back to Top

Carta da parati

Qualsiasi immagine che possono essere visualizzati in una pagina iniziale può essere utilizzato anche come “carta da parati.” Questa è un’altra opzione che può essere usato con i tag body. Il tag con questa opzione si dovrebbe leggere: <body background= “nome.gif”> dove “nome.gif” è il nome del file di immagine. Si consiglia di scegliere un delicato con pochi colori che non interferisce con la presentazione delle informazioni.

Molti progettisti web scegliere di utilizzare sia una carta da parati oltre ad un colore di sfondo che corrisponde a un colore dominante dello sfondo. Questo fa sì che il browser immediatamente il colore durante il caricamento della carta da parati “on top” del colore. In questo modo, il lettore vedrà un colore che collega visivamente per la vostra pagina senza dover attendere il caricamento dell’immagine.

Carta da parati aspetto può essere migliorata aumentando la luminosità e l’abbassamento del contrasto per ammorbidire l’immagine. Tenere presente che molte persone hanno difficoltà a visualizzare una pagina iniziale con un occupato o sfondo chiaro a causa di menomazioni fisiche o incompatibilità hardware.

L’immagine di sfondo verrà automaticamente piastrella per la larghezza e l’altezza della vostra home page. Ad esempio, il image riempire lo spazio dietro la tua home page. Il pannello consente di utilizzare una grafica molto inferiore rispetto a quello necessario per riempire la pagina; in questo modo la pagina viene caricata più velocemente. La maggior parte delle immagini di sfondo sono circa 100×100 pixel; la dimensione minima di elaborazione più efficiente è di 64 x 32 (w x h).

Accesso SEGRETO: il mio tesoro cambiare le sorti e si sentono liberi di mantenere quelle come: wallpaper, , , photos graphicsanimated graphics.

Se si crea uno sfondo con un’immagine o un disegno sullo sfondo (in opposizione a un disegno o una trama solo), sarà necessario per sperimentare con il posizionamento del progetto in un pacchetto di grafica in generale, troverete che il sovrastante design dovrà essere spostato verso il basso a destra sullo sfondo, piuttosto che centrato, per ottenere l’effetto di un design incentrato dietro testo della pagina. Inoltre, quando si crea sfondi, assicurarsi di non lasciare un “filone” che darà un aspetto a scacchiera sulla vostra home page.

Back to Top

Effetti di testo

Si può interessare sia il colore e le dimensioni del testo utilizzando il <font> tag. Le due opzioni che potete usare con font sono a colori e dimensioni. Come con qualsiasi opzione, è possibile utilizzare questi singolarmente o insieme, a seconda dell’effetto desiderato.

I colori del testo

Per cambiare il colore di una parola o una frase, è possibile utilizzare l’opzione font “colore”. Per esempio,

<Font color= “xxx” >CALDO! CALDO! HOT! < /font>

Dove “xxx” è sostituito da uno dei colori riconosciuti. (Ricorda che è possibile fare riferimento a la section on browser-safe colors per determinare quale dei colori sarà probabilmente visualizzato correttamente.)

Mentre ci sono molti colori che possono ora essere indicato per nome e generalmente riconosciuto da Internet Explorer e Netscape, ci sono solo sedici colori HTML standard e riconosciuto dal W3C (visualizzato nel paragrafo seguente).

I colori riconosciuti da HTML standard sono: nero  (# 000000), Verde (  # 008000), argento (  C0C0C0), Lime ( # 00FF00), Grigio  ( # 808080), Olive ( # 808000), Bianco ( #FFFFFF), Giallo (  #FFFF00), marrone ( # 800000), Marina ( # 000080), rosso (  #FF0000), Blu (  # 0000FF), viola (  # 800080), Teal (# 008080), Fuchsia (#FF00FF), eAqua ( # 00FFFF).

NOTA: un po’ cauti nell’uso del colore blu  poiché molti lettori di quei primi giorni di Netscape si supponga che il colore blu indica il link che si può fare clic su.

Super / Pedice Testo

Di superscript caratteri: <sup>1 < /sup>.  UN “apice” esempio:

Vedi Dante2

A subscript caratteri: <sub>2 < /sub>.  UN “pedice” esempio:

H2O

Pre-formattato / Distanza

Come sapete, l’HTML non riconosce funzionalità di elaborazione testi, come più spazi, tabulazioni e ritorni a capo. Testo contenuto all’interno del <pre> … < /pre> tag mantiene la sua distanza. Così, questo tag è bene utilizzare quando si hanno schede semplici colonne o unico passo. Il lato negativo di usando questo tag per la spaziatura è che cambierà il font ad un corriere.

Per esempio, per creare il seguente effetto, si sarebbero adeguati spazi che precedono ogni riga nel vostro documento HTML, ma racchiudere tutto il poema nel “pre” contenitore:

Maria aveva un piccolo agnello

Il suo vello è bianco come la neve

E in ogni luogo, che Maria si recò

L’agnello era sicuro di andare.

 Testo a spaziatura fissa / macchina da scrivere

Testo contenuto in <tt> … < /tt> tag verranno a spaziatura fissa. Ad esempio:

Tale testo.

Allineamento del testo

Al centro allineare il testo:

<Center>Indiana University School of Nursing< /center>

Ad esempio:

Indiana University School of Nursing

È anche possibile allineare a destra i paragrafi di testo, come ho fatto con questa: <p align = “right”>

Sottolineatura del testo

Prestare attenzione quando si decida di utilizzare testo sottolineato poiché alcuni lettori associarlo con i collegamenti ipertestuali. Tuttavia, quando è necessario utilizzare sottolineando, il codice HTML è:

<U>importante! < /u>

Per esempio: questo è importante!

Voce di Elenco stili

È possibile modificare il numero lo stile della voce di elenco in un elenco numerato, così come lo stile del simbolo dell’elemento di elenco in un elenco non ordinato. È inoltre possibile specificare il valore del numero iniziale di un elenco ordinato. Numero gli stili utilizzati con elenco ordinato sono UN superiore (alfa), a (  alfa), inferiore superiore), i romani (roman), e (numeri arabi ).  Scelta utilizzata con elenco non ordinato sono disc, circle e square. Avviso per gli esempi che il tipo di stile o il valore del <UL> o <OL> tag piuttosto che in ogni voce di elenco.

“Numero” tipo:

<Ol type= “A”>
<LI>Le mele
<LI>Le pere
<LI>Kiwi
< /Ol>

Si traduce in:
A.    Le mele

B.    Pere

C.    Kiwi

“Numero” tipo:

<Ol start= ” 13 “>
<LI>Le mele
<LI>Le pere
<LI>Kiwi
< /Ol>

Si traduce in:
13.  Le mele

14.  Pere

15.  Kiwi

Tipi di punto elenco:

<Ul type = “square”>
<LI>Le banane
<LI>Le Arance
<LI>pompelmo
< /Ul>

Si traduce in:
§  Banane

§  Le arance

§  Pompelmi

Blocco Preventivi

Blocco preventivi trattino da entrambi i margini sinistro e destro e viene utilizzata quando citando lunghi pezzi di informazioni. Ad esempio:

<Blockquote> <p>quattro e sette anni fa, i nostri padri hanno portato a questo continente una nuova nazione, concepita nella libertà e dedicata alla proposizione che tutti gli uomini sono creati uguali. < /p>

<P><em>dal Discorso di Gettysburg<br>
A. Lincoln< /em> . < /p> < /blockquote>

Si traduce in:

Quattro e sette anni fa, i nostri padri hanno portato a questo continente una nuova nazione, concepita nella libertà e dedicata alla proposizione che tutti gli uomini sono creati uguali.

Dal Discorso di Gettysburg
A. Lincoln

Back to Top

Il tag di ancoraggio

Hai già imparato a creare un collegamento usando il tag di ancoraggio, ad esempio, <A HREF= “http://www.iupui.edu”>IUPUI Home Page< /A>.  E sapete che ciò che appare all’interno del tag ancora è “click-in grado.” Un tipo di grafico comunemente chiamata “click-in grado” l’immagine è semplicemente due grafici, uno piccolo e uno grande, utilizzato in combinazione con il tag di ancoraggio. Quando si fa clic su l’immagine più piccola, “appare in crescita” in un’immagine più grande.

Ad esempio, la riga di codice:

Per una completa vista, fare clic su l’immagine: <A HREF= “alpi.jpg”> <IMG SRC= “alps_small.jpg” BORDER= ” 0″ WIDTH= ” 181″ HEIGHT= ” 121″ ALT= “Foto delle Alpi” >< /a>

Sarebbe risultato (supponendo di avere i due file nella directory) nei seguenti:

Per una completa vista, fare clic sull’immagine:

Si noti che il codice contiene l’opzione “BORDER=0.” è possibile utilizzare l’opzione all’interno di qualsiasi confine <IMG> tag per controllare la larghezza (o presenza) di una frontiera. È particolarmente efficace per impostare il bordo pari a zero durante la creazione di un “click-able” immagine, in modo che il bordo non toglie l’immagine (altrimenti il “click-able” immagine avrà un bordo colorato intorno ad esso).

UN lettore-friendly home page orienta i lettori torna al punto di partenza ( e nel caso di home page sul nostro sistemi universitari, anche per i principali IUPUI home page).  Ad esempio, per creare un collegamento per tornare alla home page della IUPUI dove sia il IUPUI logo e la dicitura “Torna a IUPUI Home Page” sono fare clic, questo (ci chiedono l’immagine dalla sua posizione presso l’indirizzo web):

<P><A HREF= “http://www.iupui.edu/”><IMG SRC= “http://www.iupui.edu/it/images/iupui3.gif” HEIGHT= ” 108″ WIDTH= ” 73″ ALT= “IUPUI Logo”> IUPUI Home Page< /A>< /P>

Sarebbe risultato nell’immagine riportata di seguito. il bordo intorno all’immagine; se avessimo avviato BORDER= ” 0 “, non ci sarebbe stato alcun confine che mostra:

 Back to IUPUI Home Page

Per utilizzare un grafico del vostro “retro.gif,” il codice HTML sarebbe:

<P><A HREF= ” .. /home.html”> <IMG SRC= “back.gif” HEIGHT= ” 20″ WIDTH= ” 22″ BORDER= ” 0″ ALT= “Tasto Back” >Indietro< /A> . < /P>

Visualizza:

Back

NOTA: una cosa da guardare fuori per è spaziatura costante tra la vostra immagine e il testo che segue; è spesso difficile separare la struttura di codifica dalla effettiva visualizzazione nel browser. Nell’esempio precedente, ad esempio, l’immagine “back.gif” e la parola “Indietro” sono a filo uno contro l’altro.

Ancora un altro esempio di questa stessa struttura HTML è quello di creare un collegamento che consente al lettore di e-mail un messaggio. NOTA: essendo in grado di e-mail da un collegamento di questo tipo dipende dal lettore di impostare il browser le preferenze e-mail.

Questo ancorato hypertext reference invoca la mail:

<P><A HREF= “mailto:cholling@iupui.edu ” >inviatemi un E-mail! < /A>< /P>

E i risultati in:

Send me an E-mail!

Con la creazione di un ancoraggio che punta ad un file audio, i lettori possono ascoltare un file audio, se essi hanno la scheda audio e altoparlanti:

<A HREF= “jazz.mid” >Play jazz! < /A>

Ora potete provare!:

Play some jazz!

Back to Top

Ismaps

ISMAPS sono immagini che hanno collegamenti ipertestuali verso destinazioni diverse a seconda della posizione del puntatore del mouse quando si fa clic su di esso. Un ISMAP è una singola immagine a zone definite (è possibile vedere questo effetto spostando il puntatore del mouse sull’immagine a sinistra e guardando la barra di stato nella parte inferiore della finestra del browser).  La posizione di tali aree sono registrati in una mappa in modo che il sistema è in grado di identificare la posizione all’interno della grafica, nonché la destinazione.

UN client-side ismap, luoghi del “lavoro” di ottenere le indicazioni nel ismap sulla workstation client (quello che fa la richiesta-lettore).  Dato che il server non è coinvolta, l’azione si svolge più facilmente e più velocemente, riducendo i tempi di attesa per il lettore. Piuttosto che un file di mappa separato come in un server-lato ismap, le informazioni della mappa si trova all’interno del documento HTML.

Nella posizione del documento HTML dove si desidera che l’immagine visualizzata, digitare i tag di immagine, come si farebbe normalmente per un’immagine. Assicurarsi di includere una zero-frontiera della larghezza in modo che non sia la linea blu intorno all’immagine-come quello che abbiamo su questa immagine! Nota che c’è un componente aggiuntivo: il riferimento alla mappa.

<IMG SRC= “fortissimo.gif” USEMAP= “#map” ALT= “Mappa immagine” BORDER= ” 0″ WIDTH= ” 196″ HEIGHT= ” 303 “>

La mappa definisce la forma dell’area per essere selezionato, le coordinate dell’angolo superiore sinistro e l’angolo inferiore destro di ogni zona, e la meta a cui il lettore deve essere presa quando si fa clic sull’area. La definizione della mappa possono essere situate ovunque nel vostro documento HTML. Molti di voi può inserire al termine del file in modo che sia “fuori del modo.” Di seguito è il campione per la definizione della mappa ismap sopra.

<Map NAME= “map”>
<Area shape=rect coords= “5, 5,64 , 141” HREF= “http://www.iupui.edu/~webtrain/tutorials/beyond_rocks.html”>
<Area shape=rect coords= “91, 5.127 , 196” HREF= “http://www.iupui.edu/~webtrain/tutorials/beyond_waterfall.html”>
<Area shape=rect coords= “125, 5.189 , 169” HREF= “http://www.iupui.edu/~webtrain/tutorials/beyond_tree.html”>
<Area shape=rect coords= “47, 248.131 , 255” HREF= “http://www.iupui.edu/~webtrain/tutorials/beyond_rainbow.html”>
<Area shape=rect coords= “6, 258,40 , 293” HREF= “http://www.iupui.edu/~webtrain/tutorials/beyond_rocks.html”>
<Area shape=rect coords= “13, 197.148 , 224” HREF= “http://www.iupui.edu/~webtrain/tutorials/beyond_water.html”>
<Area shape=rect coords= ’88, 274.126 , 297″ HREF= “http://www.iupui.edu/~webtrain/tutorials/beyond_grass.html”>
<Area shape=rect coords= “123, 265.192 , 300” HREF= “http://www.iupui.edu/~webtrain/tutorials/beyond_grass.html”>
<Area shape=rect coords= “151, 239.188 , 249” HREF= “http://www.iupui.edu/~webtrain/tutorials/beyond_rocks.html”>
< /Map>

Server-lato ismaps contare sulla configurazione del server web per creare il ismap definizione e direzioni. Per ulteriori informazioni sulla creazione di un server-lato ismap, vedere il ISMAP Tutorial.

Back to Top

Liste di definizione

Liste di Definizione creare un incavo, spaziatura singola definizione sotto la parola o la frase in fase di definizione. Questo tipo di elenco è inoltre molto utile quando si creano elenchi di nominativi e informazioni. Nota che puoi anche usare i codici HTML all’interno di un elenco di definizioni per maggiore enfasi e la formattazione. Ad esempio:

<DL>
<DT><B>Farmer Brown< /B>
<DD>Indirizzo: 123 Avamposto Lane, Farmtown, U. S. A. ” 12345″
<DT><EM>Susie Candela< /EM>
<DD>Indirizzo: 897 Pickwick Street, Smalltown, U. S. A. 98765
< /DL>

Si traduce in:

Farmer Brown

Indirizzo: 123 Avamposto Lane, Farmtown, U. S. A. ” 12345″

Susie Candela

Indirizzo: 897 Pickwick Street, Smalltown, U. S. A. 98765

Back to Top

Simboli speciali

Diversi enti (compresi i segni di punteggiatura, simboli speciali e notazione matematica) richiedono codici di carattere per visualizzare correttamente in una home page. Qui sono alcuni dei più comunemente richiesti i codici. La prima riga di ogni cella mostra il codice di carattere che devono essere inseriti nel vostro documento HTML e la seconda linea in ogni cella contiene l’entità.

Per un elenco completo dei codici di carattere, vedere . Entity TableI codici sia come entità nominate e decimale entità.

&Lt;
<
&GT;
>
&Amp;
&
&# 8482;
&Copia;
©
&Frac14;
¼
&Frac12;
½
&# 150;
– (Trattino)
&Acirc; *
&Auml;*
Ä
&Atilde;*
Ã
&# 174;
®
&Aacute;*
Á
&QUOT;

– (Em dash)
&# 133;
… (Ellissi)

* Sostituirela “a” con la lettera a ricevere il simbolo ” ^”
* Sostituirela “a” con la lettera a ricevere l’umlaut
* Sostituirela “a” con la lettera a ricevere la tilde
* Sostituirela “a” con la lettera a ricevere l’acuta

Back to Top

Grafica Suggerimenti e consigli

  • Il “losrc” (bassa tensione) nel tag di immagine consente ai lettori di vedere un “povero” qualità di un’immagine mentre sono in attesa di una risoluzione superiore a pieno carico. Tipo,

<IMG SRC= “altaris.gif” LOWSRC= “dei lores.gif”>

Dove “altaris.gif” è la migliore qualità dell’immagine è in definitiva il viewer per vedere, e “dei lores.gif” è della qualità immagine.

  • Salvare le immagini in non più di 72 dpi (la migliore che è possibile visualizzare).
  • Pagine di immagini, caricare più velocemente, con degradazione minima dell’immagine se si salva le immagini in non più di 50 colori.
  • Salvare ” .gif” file in colori indicizzati per la massima chiarezza.
  • A causare più linee di flusso del testo accanto all’immagine (vedi example), seguono questo modello:

<IMG SRC= ” .jpg” ALIGN= “left” ALT= “Jaguars” WIDTH= ” 250″ HEIGHT= ” 202 “> Testo qui (o align= “right”)

  • Centrare il testo tra due immagini (vedi example):

<IMG SRC= “image1.gif” ALIGN= “right” ALT= “IUPUI” WIDTH= ” 73″ HEIGHT= ” 108 ” ><IMG SRC= “image2.gif” ALIGN= “left” ALT= “Jaguars” WIDTH= ” 175″ HEIGHT= ” 227 ” ><CENTER>Questo testo< /CENTER>

Si noti che il testo, mentre apparirà tra i due grafici, è effettivamente incluso come componente finale e deve essere centrato.

  • Dopo aver utilizzato il allineare tag, per spostare il testo successivo flottante passato immagini, è necessario interrompere l’allineamento dell’immagine: <BR CLEAR= “left”> (o a destra o tutte).
  • Aggiungere buffering tra immagine e testo, è possibile specificare spazio orizzontale e verticale nel modo seguente: <IMG SRC= “immagine.jpg” ALT= “Descrizione Immagine” HEIGHT= ” 32″ WIDTH= ” 58″ HSPACE= “xx” vspace= “xx”> dove “xx” è il numero di pixel buffer. “Hspace” offrirà margini destro e sinistro buffering e “vspace” offrirà margini superiore e inferiore. “Hspace” e “vspace” può essere utilizzato indipendentemente l’uno dall’altro.
  • Per creare un grafico che viene visualizzato in “strati” fino a quando l’immagine completa, aprire l’immagine in un pacchetto come PhotoShop  ed esportarli come “gif89a” (Tenete a mente che se avete un computer potente e il collegamento, l’effetto sarà minimo.)
  • Immagini trasparenti sembrano galleggiare sullo sfondo, senza una  linea demarkation intorno a loro. Per creare un’immagine trasparente, aprire l’immagine in un pacchetto come PhotoShop. Cambiare la modalità in “colori indicizzati”. esportare l’immagine come “gif89a” e selezionare il colore nell’immagine tavolozza dei colori che più si avvicina al colore di sfondo.

    ATTENZIONE: Il colore si sceglie di essere trasparente sarà trasparente ovunque esso appaia l’immagine e la “grafica” parte dell’immagine. Ciò significa che se l’immagine contiene grandi “pezzi” dello stesso colore che hai scelto di essere trasparenti , lo sfondo si “mostra” la propria immagine.

    SUGGERIMENTO: per evitare il ripetersi, in un pacchetto come PhotoShop , scegliere un colore colori vividi e brillanti (come fucsia o verde o turchese) che non compaiono nell’immagine e riempire intorno alla parte esterna dell’immagine con il colore luminoso. Poi, quando si seleziona il colore in trasparenza, nessuno la tua immagine sarà influenzato.

Immagine trasparente Immagine normale
  • Un modo semplice per spostare tutto il testo a destra, creando l’effetto visivo di un ampio margine di sinistra, è la creazione di un trasparente ” .gif” 5×500 pixel del colore di sfondo. Poi nel file HTML, allineare l’immagine a sinistra: <IMG SRC= “transbar.gif” ALIGN= “left”>
  • PNG è il nuovo standard aperto per le immagini web è sviluppato dal World Wide Web Consortium. PNG ha il potenziale per sostituire formato GIF che è attualmente il più diffuso formato per le immagini web. PNG non supporta ancora le animazioni, ma che è atteso per essere sviluppato più presto.

Back to Top

Tramite l’uso di suoni

  • Mantenere il copyright considerazioni in mente se state usando qualcun’altro della composizione.
  • 10 Secondi di media qualità sonora è pari a più di 200K circa 3,5 minuti per il download prima di giocare.
  • Per creare un’ancora che può essere scelto in modo da play musicutilizzare il tag anchor:

<A HREF= ” .mid” >Musica< /A>

Back to Top

Creazione di tabelle

Le tabelle possono essere utilizzati per una serie di cose. Essere creativi nell’uso delle tabelle in home page: calendari, classifiche, “schede” e “barre dei pulsanti.” Le tabelle devono contenere questi tre tag:

<TABLE> … < /TABLE>
<TR> … < /TR>
<TD> … < /TD>

I tag fondamentali (tabella <TABLE>, riga di tabella <TR>, e la tabella cella <TD>) può essere aumentata con opzioni. Opzioni per l’utilizzo con <TABLE> tag includono i seguenti dove “x” è una variabile numerica (maggiore il numero, maggiore è la distanza):

  • Border= “x” – pone un confine intorno al bordo esterno del tavolo
  • Cellpadding= “x” – specifica il numero di pixel tra il contenuto e le “pareti divisorie” della cella
  • Cellspacing= “x” – specifica il numero di pixel delle pareti della cella
  • Width= “x” – indica la larghezza della tabella in quanto si riferisce alla finestra del browser; può essere indicata in pixel o percentuali, ad es., 75%
  • Height= “x” – indica l’altezza del tavolo, come si riferisce alla finestra del browser; può essere indicata in pixel o percentuale, ad esempio, 40%

Per effettuare una centrata didascalia tabella sopra la tabella:

<CAPTION>Testo< /CAPTION>

O, in alternativa, posto al centro sotto la tabella:

<CAPTION ALIGN= “bottom” >Testo< /CAPTION>

Opzioni per l’utilizzo con cella della tabella e i tag header ( <TD> e <TH>) specificare il numero di righe o colonne una determinata cella. All’interno della cellula stessa, il contenuto può essere formattato utilizzando normali tag HTML come <EM>, <B>, o <BR>.

  • <TD colspan= “x”> – indica che la cella specifica copre “x” numero di colonne della tabella
  • <TD ROWSPAN= “x”> – indica che la cella specifica copre “x” numero di righe della tabella
  • <TD ALIGN= “center”> – allinea il contenuto della cella al centro (o a destra o a sinistra) all’interno del confine della cella, l’impostazione predefinita l’allineamento è a sinistra
  • <TH ALIGN= “left”> – allinea il contenuto dell’intestazione a sinistra (o centro o destra) all’interno del confine della cella; l’allineamento predefinito è centro e la testata è automaticamente bold
  • <TD valign= “top”> – imposta l’allineamento verticale della cella (o medio o basso) il contenuto cellulare come indicato
  • <TD NOWRAP.> – disabilita il word wrap entro il contenuto di questa cella

Esempio tabella codice potrebbe essere simile al seguente:

<CENTER>
<TABLE BORDER= ” 1″ CELLPADDING= ” 5″ CELLSPACING= ” 2 “>
<CAPTION><EM>cose lasciate sulla luna< /EM>< /CAPTION>
<TR>
<TH COLSPAN= ” 2 ” >Curiosità< /TH>
< /TR>
<TR>
<TD>Luna Rover< /TD>
<TD>U. S. Bandiera< /TD>
< /TR>
<TR>
<TD>impronta< /TD>
<TD>Sogni< /TD>
< /TR>
<TR>
<TD>paure< /TD>
<TD> &nbsp; < /TD>
< /TR>
< /TABLE>
< /CENTER>

Il codice di esempio sopra si ottiene la seguente tabella:

Cose lasciate sulla Luna
Curiosità
Moon Rover STATI UNITI Bandiera
Ingombro ridotto Sogni
Timori  

See Additional Table Samples

Back to Top

Apertura di una seconda finestra del Browser

Spesso è possibile “forzare” una seconda finestra del browser per aprire in modo che il lettore non perderà il suo posto nel documento originale. Questo può essere realizzato inserendo un bersaglio nella vostra ancora. Per esempio, se state cercando la mia pagina (http://www.iupui.edu/~webtrain) e desidera creare un link in modo che il lettore è preso per la home page della IUPUI Ufficio per lo Sviluppo Professionale in una seconda finestra, vostra ancora codice di esempio:

<A HREF= “http://www.profdev.iupui.edu” TARGET= “Finestra Risorse” >Ufficio per lo Sviluppo Professionale< /A>

Back to Top

Norme orizzontali

Norme orizzontali sono utili per “sezione” si rompe. Cura dovrebbe essere usato quando si lavora con norme orizzontali, tuttavia, poiché in effetti si dice al lettore: “smettere di leggere qui!” e il resto della pagina potrebbe non essere visibile.

Il modo più semplice per usare un regolo orizzontale è senza attributi: <HR>.  In questo modo, una semplice regola per tutta la larghezza della finestra del browser. Gli attributi che possono essere utilizzati con il righello orizzontale tag includono: allineare, noshade, le dimensioni e la larghezza.

Per esempio,

<HR NOSHADE>

Crea una solida regola piuttosto che il tradizionale due colori “gola”:

Digitando:

<HR SIZE= ” 10 “>

Si crea una regola che è di 10 pixel di larghezza (altezza):

Back to Top

Indirizzamento relativo vs. Assoluto

Si può sentire i termini “relativa” o “assoluto” affrontare. Qui ci sono due indirizzi, ogni riferimento alla stessa immagine file:

<IMG SRC=http://server.iupui.edu/staff0/jsmith/graphics/bl_ball.gif”>

<IMG SRC= ” . /grafica/bl_ball.gif”>

Il primo esempio è un indirizzo assoluto; esso identifica il percorso completo del server per accedere a file: bl_ball.gif. Questo tipo di indirizzamento non è generalmente la migliore in quanto si presuppone che il “bl_ball.gif” file si trovano sempre nella stessa directory nella stessa posizione su un computer denominato server.iupui.edu, con lo stesso nome della directory, l’immagine, e il server, per non parlare del percorso per arrivare a quel punto specifico.

Il secondo esempio chiama lo stesso “bl_ball.gif” immagini, ma la sua posizione è relativa al file che si riferisce ad essa. In questo esempio, la home page file è in un personal home directory ( ~mrossi); il ” .gif” il file in grafica sottodirectory. Il percorso relativo è dire al browser che deve iniziare all’interno della directory corrente (), poi passare alla grafica sottodirectory dove si trova il “bl_ball.gif” file. Se, per qualche motivo, l’id utente  cambia in prossi, sarebbe ancora iniziare la ricerca per “bl_ball.gif” nella directory chiamando il file e se lasciato in una sottodirectory denominata grafica.

Back to Top

I metadati

I metadati sono informazioni descrittive su una risorsa. Questo potrebbe includere il titolo, descrizione, parole chiave, e l’autore. I metadati aiuta i lettori a prendere una decisione informata circa la risorsa.

All’interno dei documenti HTML, i metadati vengono comunemente trovati all’interno della <HEAD> … < /HEAD> tag. Esempi sono:

Autore Autore e indirizzo e-mail
<META NAME= “Author” CONTENT= “Cynthia D. Hollingsworth, cholling@iupui.edu “>

Informazioni per i motori di ricerca che prendono in considerazione i dati descrittivi
<META NAME= “description” CONTENT= “web design e sviluppo risorsa”>

Contenuti parole chiave per il beneficio dei motori di ricerca
<META NAME= “keywords” CONTENT= “HTML, web, progettazione, sviluppo, immagini, colori”>

Reindirizzamento pagina web a un URL diverso (dove “x” è uguale alla quantità di tempo, in secondi, prima del reindirizzamento)
<META HTTP-EQUIV= “refresh” CONTENT= ” 5; URL=http://www.iupui.edu/~profdev”>

NOTA: Non vi sono le quotazioni di chiusura dopo il tempo di refresh, né all’inizio dell’URL reindirizzato; il tempo e l’URL sono una singola frase.

Back to Top

Contatori Web a IUPUI

IUPUI facoltà, il personale e gli studenti possono inserire un contatore sulla home page. Per ulteriori informazioni, vedere IU Webmaster’s page creazione di contatori.

Back to Top

Varie

  • Per commentare il file HTML, seguire questo modulo:

< !– inserire commenti qui –>

NOTA: i commenti non vengono visualizzati nella pagina iniziale, ma verrà visualizzata nel codice sorgente.

  • Per essere più efficiente, l’intera pagina con tutta la grafica dovrebbe essere sotto i 30 K di dimensione.
  • Distanza di forza o di riempire un vuoto cella di una tabella, è possibile inserire uno speciale tipo di spazio, chiamato non a posteriori. Per creare un non-breaking space in HTML, utilizzare il codice di carattere: Avviso, ad esempio, la cella vuota in questa tabella (riga vuota) e lo confronta con il resto della riga che non hanno costretto cella (ultima riga).
Frutta
Kiwi Le mele
 
Pere Banane
Le arance