La formazione di Umbriaway Consulting: PHP 2

HTMLWeb Design Umbria nell’ ottica di un rafforzamento del proprio skill affronta in questa seconda lezione su php una rapida panoramica sul linguaggio di marcatura ipertestuale HTML oggi evoluto in HTML5. Come detto HTML é un linguaggio di contrassegno ossia di descrizionedelle pagine web e non possiede di tutte quelle caratteristiche proiprie di un linguaggio di programmazione. E’ interpretabile unicamente dal browser. Nessuna variabile, ciclo, struttura o tipo di dati quindi. L’unica interazione con l’utente é quella offerta dai form o moduli che spedisce al server tramite request. Linguaggio di contrassegno per ipertesti é la traduzione dell’ acronimo. index2Essendo un linguaggio interpretato due browser diversi possono visualizzare in due modi diversi le stesse marcature. L’elemento caratterizzante é il <TAG> o targhetta di contrassegno. Gli elementi sono fondamentali nel testo, esempi sono testate, tabelle, paragrafi e liste. Un end tag si riconosce per la presenza dello slesh di chiusura <tag></tag>. Un documento HTML si compone di una intestazione o header con tag come head title e script di collegamento e il body il corpo del documento dove ci sono i contenuti visibili a schermo.

<html>

<head>

<title>Titolo della pagina…</title>

</head>

<body>

<!– Questo è un commento! –>

</body>

</html>

I tag in grassetto sono essenziali e caratterizzano l’identificazione della pagina HTML sui browser. Nell’ <head> si possono inserire tutte quelle info descrittive che servono anche a posizionare meglio la pagina sui motori di ricerca:

<head>

<meta charset=”utf-8″>

<meta name=”description” content=”Umbriaway il sito leader della formazione”>

<meta name=”keywords” content=”html wml xml smil javascript js dhtml xhtml vbscript coldfusion photoshop paint shop pro risorse webmaster webdesigner flash grafica css applet java asp cgi”> <title>Umbriaway Consulting the best</title>

</head>

indexLe keywords (a seconda del webmaster) compaiono separate da virgola, da punto e virgola, oppure senza alcun segno di interpunzione. Il body ha diversi attributi tipo background e bgcolor altri parametri sono link, vlink e text, ad esempio <BODY TEXT=”CYAN”>. Il testo si può foirmattare con tag di intestazione che vanno dal più grande <H1> al più piccolo <H6>. I paragrafi nel testo sono marcati con il tag <P> e </P> dove si possono decidere gli allineamenti del testo con l’attributo ALIGN. Con <BR> si va a capo. Per creare linee sulla pagina si utilizza <HR> e non necessità del tag di chiusura e si possono settare attributi come align, color, noshade, size, width. Il famoso testo a scorrimento oggi é deprecato ma ai tempi d’oro pioneristici il <marquee> era molto utilizzato. Il testo ha molti tag di formattazione tipo <B>, <I>, <U>. Face, size e color sono attributi del tag <FONT>. Il DIV é molto importante e serve a strutturare le pagine, al suo interno si può decidere l’allineamento del testo con il solito attributo ALIGN. Il <center> si spiega da solo. Per inserire uno spazio si usa un carattere di ESPACE, &nbsp; con il punto e virgola finale. Il carattere apice e pendice hanno rispettivamente i marcatori <SUB> e <SUP>. Con <PRE> si ottiene testo preformattato. Gli ancoraggi servono per saltare da una pagina all’ altra ma con le LABEL anche all’ interno dello stesso documento. Per i collegamenti multipli si possono usare anche le mappe ipertestuali. Per consentire il download si usa sempre il tag ancora del tipo <A href=”file.zip”>file</a>. Con l’HTML si possono creare elenchi numerati e puntati o non ordinati. Esistono poi le liste di definizione con i tag <DL> che incorporano <DT> e <DD>. Gli elenchi si possono anche nidificare. Un ampia personalizzazione avviene con le tabelle oggi in via di estinzione e i tag tipo <table><tr><td> dove gli attributi cellspacing, cellpadding, border definiscono gli ingombri. Rowspan e Colspan uniscono le celle adiacenti in celle più grandi. Il gruppo di attributi align, valign, nowrap. Con <IMG SRC=”immagine.gif”> incorporiamo immagini e all’ interno possiamo definire gli attributi ALT, WIDTH, HEIGHT, BORDER, HSPACE, VSPACE. w3cL’attributo ALIGN anche qui é gestibile con espressioni tipo top, middle, bottom, left, right. I frame stanno scomparendo ma si gestiscono con il tag <IFRAME> dentro i <FRAMESET> e vari attributi attivi come scrolling, noresize, name etc. Oggetti multimediali come suoni, filmati e plug-in si possono incorporare con varie modalità secondo web design umbria ma non solo, molto diffuse sono ad esempio le APPLET JAVA. Ma la vera forza interattiva alla fine di questo rapido riassunto consiste nei FORM, gestibili con PHP, dove l’utente invia le sue richieste client side al server per chiedere informazioni o iscriversi a un corso di uncinetto. La validazione dei dati é molto importante e controllabile tramite PHP. Nella prossima sessione vedremo come acquisire competenze per inserire FORM gestendone eventi e azioni, gli elementi essenziali dei form, come selezionare gli oggetti giusti e saper gestire il flusso del codice per la gestione degli errori nei form. Vedremo quindi, le caselle di testo e le aree di testo, opzioni esclusive con radio button, opzioni multiple con i check box, i menu con le select option, i pulsanti reset-button-image-password-submit e per finire i campi nascosti! Ed ora un rapido riassiunto. Per creare un documento HTML metterò un tag <HTML> e </HTML> alla fine. Le due strutture principali sono <HEAD> e <BODY>. Esistono due tipi di ancoraggio, interno ed esterno. Quale comando permette di richiamare una pagina al posto di quella attuale in una nuova window usando come link l’immagine a.jpg? Risposta: <a href=”nuovapagina.html” target=”_blank”><img src=”a.jpg”></a>. I frame sono finestre indipendenti che possono contenere file HTML indipendenti tra di loro. Per creare una etichetta per un ancoraggio interno si usa una marcatura tipo: <A Name=”#etichetta”>. E concludiamo con un quiaz che spingerà tutti a studiare l’HTML più approfonditamente magari tramite le ultime novità del W3C, cosa produce il seguente tag <a href=”f2.html#abc” target=”b”>???

Web Design Umbria affronterà nella prossima sessione di consolidamento un tema cruciale, quello dell’ interazione con l’utente tramite i FORM che rappresentano un ponte di collegamento tra parte statica e dinamica!

Annunci

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione /  Modifica )

Google photo

Stai commentando usando il tuo account Google. Chiudi sessione /  Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione /  Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione /  Modifica )

Connessione a %s...