dochtml_base - WordPress.com
download 
Reclamo Transcript
html_base - WordPress.com
Emittente – server tcp-ip client-Ricevente Server http o demone Linguaggi e metalinguaggi html javascript asp cgi Annidamneto Tag Meta tag Picccolo manuale di html Appunti lezioni di davide polimanti <html> <html> <!-- creation date: 14/04/09 --> <head> <meta http-equiv="Content-Type" content="text/html; charset=ibm852"> <title></title> <meta name="Description" content=""> <meta name="Keywords" content=""> <meta name="Author" content="Polimanti davide"> <meta name="Generator" content="AceHTML e"> </head> <body > </body> </html> <HEAD> informazioni volte a identificare il contenuto del documento </HEAD> <TITLE> “titolo” </TITLE> <META> Il tag META prevede due attributi: NAME e CONTENT <META NAME=”keywords” CONTENT=”cane, gatto, topo, agenzie, internet, html”> Devono: essere tra loro divise da una virgola; le frasi dovranno essere delimitate da apici per esempio: “manuale di html”; è consigliabile inserire in diverse forme la stessa parola, se si usa, per esempio, manuale come parola chiave, è consigliabile usare anche il plurale: manuali, se il vostro sito contiene informazioni tradotte in lingue diverse dall’italiano può tornare utile inserire anche parole chiavi in tali lingue; Non esagerare inserendo la stessa parola troppe volte: potrebbe portare all’immediata esclusione della vostra pagina dal database del motore di ricerca. <Body> contenuto del documento: testo, immagini, etc… </BODY> MARGINI LEFTMARGIN TOPMARGIN per internet explorer MARGINWIDTH MARGINHEIGHT per netscape COLORE DEL TESTO TEXT=”colore” <BODY TEXT=”red”> COLORE DEI COLLEGAMENTI LINK=”colore” COLORE DEI COLLEGAMENTI VISITATI VLINK=”colore” COLORE DEI COLLEGAMENTI SELEZIONATI ALINK=”colore” COLORE DI SFONDO BGCOLOR=”colore” IMMAGINE DI SFONDO BACKGROUND=”percorso/nome_immagine” IL PERCORSO Relativo al documento : Relativo alla cartella base del sito : (root) Assoluto: ../home.html ../../home.html /home.html http:\www.tim.it/home Link Assoluti <IMG SRC=“file:///C|/documenti/pippo.gif”> Osserviamo meglio: file:/// rappresenta il protocollo (insieme di regole su come trattare un oggetto) che desideriamo utilizzare per gestire il file. C| rappresenta l’hard disk o disco rigido che conserva il file interessato, in questo esempio “C:”, i “:” sono sostituiti dal simbolo “|”. /documenti/ rappresenta il percorso partendo dalla “radice” del disco rigido (in questo caso “C:”), fino alla cartella che contiene il file “pippo.gif”. I caratteri “/” posti prima e dopo la cartella servono per separare tra di loro i nomi delle cartelle che compongono il percorso. pippo.gif è il nome del file che si desidera richiamare <IMG SRC=“http://nomedelsito/pippo.gif”> Dove http:// rappresenta il protocollo usato, e consente di prelevare dati tramite un indirizzo internet. nomedelsito è l’indirizzo internet della pagina iniziale, per esempio: www.tin.it. Rappresenta la cartella radice in locale, nell’esempio la cartella “documenti”. / serve sempre per dividere tra loro i nomi delle cartelle che compongono il percorso. pippo.gif nome del file che si desidera richiamare. Relativi <IMG SRC=”img/img2/img3/pippo.gif”> <IMG SRC=”../img/pippo.gif”> In dettaglio: ../ indica al browser di indietreggiare nella struttura di cartelle, quindi nell’esempio si sposterà dalla cartella personale, dove si trova a causa della lettura del file “curriculum.htm”, alla cartella “documenti”. img/pippo.gif è il percorso dalla cartella “documenti” fino al file “pippo.gif”. Posta elettronica Interno Destinazione <a href=" mailto:[email protected] ">scrivimi</a> <a href=" home.html#kkk ">LINK</a> <a NAME=" kkk "></a> Formattazione del testo RITORNO A CAPO <BR> BR sta per break, in italiano interruzione. PARAGRAFI <P> P sta per paragraph, in italiano paragrafo. ALIGN=”allineamento” <P ALIGN=”left”> allinea il paragrafo a sinistra (di default) <P ALIGN=”right”> allinea il paragrafo a destra <P ALIGN=”center”> allinea il paragrafo al centro <P ALIGN=”justify”> giustifica il paragrafo SEPARAZIONE <DIV> Usato assieme all’attributo ALIGN consente di marcare una parte del documento e di gestirne l’allineamento. <DIV ALIGN=”allineamento”> definisce un’area di testo all'interno di un blocco <SPAN> lascia una unita’ di spazio Intervenire sul testo <FONT> + 3 attributi FACE Modifica il tipo di carattere applicato al testo. <FONT FACE=”times new roman”>la casa – times new roman</FONT> SIZE Modifica la dimensione del testo <FONT SIZE=”valore”>la casa</FONT> COLOR <B> Modifica il colore del testo <FONT COLOR=”red”>la casa</FONT> Il testo compreso tra questi tag è trasformato in grassetto. <B>il giardino fiorito e’ grasso </B> <I> Il testo compreso tra questi tag è trasformato in corsivo. <I>iiiiiiiiiiiiiiiiiiiiiiiiiiiiii i i</I> <U> Il testo compreso tra questi tag è sottolineato. <U>sottolineami uuuuuuuuu</U> <SUP> Il testo compreso tra questi tag è trasformato in apice. 3<SUP>2</SUP> <SUB> Il testo compreso tra questi tag è trasformato in pedice. H<SUB>2</SUB>O <BLINK> <MARQUEE> Il testo compreso tra questi tag, in Netscape, lampeggia. Il testo compreso tra questi tag, in Internet Explorer, scorre. Elenchi ordinati <OL> <LI> Un elenco ordinato Precede ogni elemento OL sta per Ordered List (Lista Ordinata), LI sta per List Item (Oggetto della Lista). <OL> <LI>Primo TYPE <LI>Secondo <LI>Terzo </OL> Indicizzazione alfabetica: <OL TYPE=valore> <LI>Primo A START <LI>Etc… <LI>Secondo a </OL> I E’ possibile far iniziare il conteggio da un numero diverso da 1. START=valore <OL START=5> <LI>Primo <LI>Secondo </OL> Elenchi non ordinati <UL> Un elenco noN ordinato <LI> Precede ogni elemento UL sta per Unordered List (Lista Non Ordinata), LI sta per List Item (Oggetto della Lista). <UL> <LI>Primo Pallini vuoti: <LI>Secondo <UL TYPE=circle> <LI>Terzo Quadratini: <LI>Etc… </UL> <UL TYPE=square> ELENCHI STRUTTURATI <OL> <LI>Primo punto <br> <UL> <LI>secondo livello <LI>secondo livello </UL> <LI>Secondo punto <br> <OL> <LI>secondo livello <br> <UL> <LI>terzo livello <LI>terzo livello </UL> <LI>secondo livello </OL> <LI>Terzo punto </OL> Tag logici INDIRIZZO TITOLI <ADDRESS> = <I> <Hn> H sta per Header ovvero titolo. <H1>titolo 1</H1> <H2>titolo 2</H2> <H3>titolo 3</H3> <H4>titolo 4</H4> <H5>titolo 5</H5> <H6>titolo 6</H6> CITAZIONE <BLOCKQUOTE> è visualizzato come un blocco di testo rientrato. Tabelle <TABLE> <TR> delimita la tabella delimita una riga <TD> <TH> delimita una cella applica il grassetto e l’allineamento centrato. <CAPTION> <BORDER=”valore”> aggiunge un titolo (didascalia) alla tabella. Il bordo si annulla con il valore “0”, è reso visibile con “1” WIDTH=”valore” larghezza HEIGHT=”valore” altezza sia in pixel sia in percentuale (300 o 50%) CELLSPACING=”valore” spazio tra le cellein pixel. Se =0 le celle sono unite CELLPADDING=”valore” Margini nelle celle BGCOLOR=”colore” colore di sfondo della tabella BACKGROUND=”percorso/nome_file” immagine di sfondo BORDERCOLOR=”colore” colore di bordo BORDERCOLORDARK=”colore” colore ombra VALIGN= l’allineamento verticale a cella, le opzioni possibili sono: top, bottom, middle. COLSPAN=”numero di celle successive che faranno parte dell’unione” (orizzontalmente) ROWSPAN=”numero di celle successive che faranno parte dell’unione” (verticalmente) <table border="0" cellpadding="0" cellspacing="0"> <tr> <td> <table border="1"> <tr> <td>InoculateIT Personal Edition Version 5.2.5.0</td> </tr> <td>No file viruses detected.</td> </tr> <tr> <td> </td> </tr> </table> Immagini GIF (Graphics Interchange Format) JPEG (Joint Photographics Experts Group) <IMG SRC=”percorso/nome_file”> WIDTH Dimensione orizzontale dell’immagine(pixel o in percentuale). HEIGHT Dimensione verticale dell’immagine(pixel sia in percentuale). ALIGN Allineamento del testo attorno: Le opzioni disponibili sono: TOP - BOTTOM - MIDDLE - LEFT- RIGHT absbottom absmiddle baseline text op assolutamente su assolutamente mezzo lato inferiore sopra al testo SPAZIO PERIMETRALE La distanza tra i lati destro e sinistro dell’immagine e il testo. HSPACE HSPACE=”valore in pixel” La distanza tra i lati superiore e inferiore dell’immagine e il testo. VSPACE VSPACE=”valore in pixel” Applicare all’immagine un bordo: BORDER BORDER=”valore in pixel” ALTERNATIVA ALT = Testo alternativo <IMG SRC=”logo.gif” ALT=”il nostro logo”> LOWSRC immagine alternativa se + di 30 k <img src="immagini/10HP.jpg lowsrc="immagini/analisi.jpg"> Target <img src="immagini/HP.jpg" target="_parent"> senza Frame _top al posto della pagina precedente _blank nuova pagina con frame: _parent al posto del frame annidato _self al posto dello stesso frame main frame al posto del frame principale Rollover immagine nel corpo SCRIPT <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','immagini/servizi.jpg',1)"><img name="Image2" border="0" src="immagini/areaimg.jpg" width="150" height="116"></a> nel body DICHIARAZIONE javascript Mappa immagine map <img src="immagini/HP.jpg" width="2399" height="1799" usemap="#Map" border="0"><map name="Map"><area shape="rect" coords="1625,1296,1939,1429" href="index.htm" target="_parent"></map> Stili html /library/styles.xlm <mm:style name="Bold" type="char" apply="add" bold /> <mm:style name="Caption" format="p" align="center" apply="replace" font="Arial, Helvetica, sans-serif" size="2" color="#808080" bold italic /> <mm:style name="Copyright" format="p" align="center" apply="replace" font="Georgia, Times New Roman, Times, serif" size="1" italic /> <mm:style name="Emphasis, sans-serif" type="char" apply="replace" font="Verdana, Arial, Helvetica, sans-serif" bold /> <mm:style name="Fixed-width" type="char" apply="replace" font="Courier New, Courier, mono" /> <mm:style name="Headline" align="left" apply="replace" font="Verdana, Arial, Helvetica, sans-serif" size="+2" bold /> <mm:style name="Normal" apply="replace" font="Georgia, Times New Roman, Times, serif" size="+1" /> <mm:style name="Red" type="char" apply="add" color="#FF0000" /> Fogli di stile CSS .unnamed1 { font-family: Arial, Helvetica, sans-serif; font-size: 12pt; fontstyle: italic; line-height: normal; font-weight: 300; font-variant: small-caps; text-transform: lowercase; color: #CCCCCC; background-attachment: fixed; background-color: #999999; background-repeat: repeat; background-position: center center; list-style-image: none; list-style-type: circle}
Documenti analoghi
Appunti di HTML
Ciò che rende l'HTML particolarmente adatto al Web o comunque alla realizzazione di certi tipi di documenti facilmente consultabili e la possibilità di
descrivere degli ipertesti. Un ipertesto è ...
