Costruire un sito Web 1 – HTML – Parte 1
HTML
Metterò i comandi (Tag) più usati per la costruzione di una pagina web. Per prima cosa ci vuole un buon editor. Io uso Notepad++.
L’HTML ha uno schema iniziale da rispettare.
Come si vede un tag è composto da < >. Se fate caso, quando si apre un tag es. <html> si deve chiudere con / es. </html>. Come vedete tutti hanno un’apertura e una chiusura. Perciò tutto il linguaggio html deve essere scritto tra <html> e </html>. Poi si mette <head>… </head> qui ci si mette prevalentemente il titolo. Invece in <body>..</body> tutto il resto del codice.
Adesso vediamo altri tag. Cominciamo col titolo. <title>La mia prima pagina Web</title>. Tutto quello che viene scritto tra il tag <title> sarà il titolo della scheda del Browser.
Qui a sinistra avete tre modi in cui si può scrivere del testo. Nel primo caso non ho utilizzato nessun tag e anche se vado a capo, il browser non l’ho riconosce. Perchè come vedete nella figura sopra mette le due righe a fianco. Per poter andare a capo ci sono due modi. Il primo è quello di utilizzare il tag <p></p> che sarebbe un paragrafo, e utilizzerei due paragrafi uno per ogni riga. Nel secondo caso utilizzo un solo tag <p></p> e dove voglio andare a capo utilizzo il tag <br> che come vedete non ha bisogno del tag di chiusura. Si chiama tag autochiudente. L’unica differenza tra le due modalità per andare a capo sono gli spazi tra una riga e l’altra.
Adesso vi metto degli esempi di formattazione del testo.
Infine abbiamo il tag <h1></h1> che viene utilizzato come titolo e per questo è utile per il SEO per il semplice fatto che viene indicizzato da Google. Da questo tag ne esistono 6 tipi.
Merita un discorso a parte la lista non ordinata e quella ordinata.
Per poter fare una lista non ordinata si utilizza il tag <ul></ul> e al suo interno per ogni lista si utilizza <li></li>
Mentre per le liste ordinate si usa il tag <ol></ol> e al suo interno per ogni lista si utilizza <li></li>
Volendo le liste si possono far partite da un numero prestabilito. Non necessariamente devono partire da 1. Se nel tag di apertura scrivo <ol start=10> ……. </ol> il primo numero della lista sarà 10 poi 11 ect. Inserendo nel tag reversed, cioè <ol reversed> ……… </ol> la numerazione sarà decrescente.
Utilizzando la lista type possiamo scegliere tra 5 modi diversi lista. Scrivendo <ol type=”a”>……</ol> la numerazione sarà alfabetica. Le altre numerazioni sono “1”,”i”,”I”,”a” e “A”.
Per quanto riguarda la formattazione del testo in HTML per il momento è tutto. Adesso vediamo come inserire delle immagine in un sito web. Prima di tutto consiglio di copiarsi le immagini nella cartella del sito web. Perchè si possono fare dei collegamenti con altri siti web, il problema è che non ne abbiamo il controllo, per il semplice fatto che gli potrebbero cambiare percorso e non li troveremo più.
Si scrive <img src=”nomefile.estensione”> anche questo è un tag autochiudente. In questo modo l’immagine appare nel suo formato originale. Se volessimo ridurre o ingrandire l’immagine si utilizza width per la larghezza height per l’altezza. Scrivendo ad es. <img src=”nomefile.estensione” width=”100″ height =”130″> i numeri corrispondono ai pixel. Per finire si può decidere se mettere l’immagine a destra (right) o a sinistra (left) col comando align. Scrivendo es. <img src=”nomefile.estensione” width=”100″ height =”130″ align=right>
Mentre per visualizzare un’immagine che si trova in un’altro sito web.
<img src=https://upload.wikimedia.org/wikipedia/it/thumb/3/37/Marge_Simpson_in_A_proposito_di_Margie.png/120px-Marge_Simpson_in_A_proposito_di_Margie.png width=”100″ height =”150″ align=left>
Per concludere questa Parte con HTML, se si volesse scrivere dei commenti del codice si utilizza il tag <!– Qui si puo scrivere tutto quello che si vuole. –> Vedo che non si capisce come si scrive. Dopo <! ci sono due – come nella chiusura del tag.
Se proverete a scrivere in HTML vi accorgerete che graficamente non è bello. Per questo si utilizza il CSS che si utilizza insieme HTML. Con questo codice si potrà abbellire il tutto.
Nella prossima parte vi parlerò dei Form e delle Tabelle.
Se volete approfondire meglio HTML potete cercare su internet.
Come creare un’App senza Java
Ti piacerebbe creare un’App per il tuo dispositivo? Stai cercando sul PlayStore o sull’Apple Store e non trovi niente di quello che cerchi?
Perché non farsi un’App come si vuole? Non sai programmare? Non sai come fare? Ti sembra un’impresa titanica? Non aver paura, ci sono io. Ti voglio raccontare la mia esperienza e condividerla con te, perché anch’io mi ponevo queste domande e non avrei mai immaginato che un giorno ci sarei riuscito.
Certo ho provato con Java, ho scaricato tutti i manuali e installato sul PC tutto quello che ci voleva, perché Google mette a disposizione tutto il materiale. Dopo qualche prova ho desistito, troppo complicato. Tutto questo è successo circa tre anni fa. Per un po’ non ci ho più pensato anche se ogni tanto mi ripetevo, ma perché non posso scrivere un’App come voglio, perché deve essere cosi difficile?
Un giorno, mentre navigavo su internet, dove stavo cercando tutt’altro, ho trovato un post che parlava di un nuovo linguaggio di programmazione basato su Visual Basic. Mi son detto, VISUAL BASIC???? Non ci potevo credere, io conosco VB. Mi sono piombato sul sito e ho cominciato a leggere e guardare. Il linguaggio si chiama Basic for Android (B4A) e Basic for iOS (B4i). Il sito è questo https://www.b4x.com/ . Era perfetto ho scaricato il tutto e ho cominciato a capire come funzionava. Per sfortuna i vari manuali che si trovano sono tutti in inglese e io non parlo inglese; comunque è presente un forum anche in lingua italiana dove si trovano persone fantastiche pronte ad aiutarti e cercando si possono trovare anche dei piccoli tutorial su YouTube. Ho cominciato ha scrivere un po’ di codice ma alla fine mi son reso conto che ci voleva veramente molto tempo per studiare e mettere in pratica il tutto. Lavorando e avendo famiglia il tempo è poco. “Cosa dovrei fare?, mi sono chiesto. Non volevo mollare, era un mio sogno. Ho cominciato a cercare qualcosa su Internet inerente B4A e dopo giorni su giorni senza trovare niente, come per magia trovo nelle ricerche, “Crea da zero e pubblica app per Android con B4A senza Java.” Vado subito a vedere il sito https://www.udemy.com/. Era un corso di 32 ore on line e ondemand. Perfetto era quello che cercavo. Il prezzo? Quando l’ho acquistato costava 9,99€. Anche adesso che sto scrivendo questo articolo costa 9,99€. Il prezzo può variare alla fine dell’offerta.
Cosa dire, sono rimasto entusiasta e finalmente ho coronato il mio sogno. Ho creato alcune App per Android, che con la pubblicità mi rendono qualcosa, tanto da avermi permesso di recuperare i soldi investiti. Eh si, i soldi; quelli purtroppo servono sempre, anzi parliamo di soldi. Il corso come detto adesso costa 9,99€, poi c’è la versione B4A che si può scaricare gratuitamente ma sinceramente non conosco i limiti che può avere. Puoi sempre provare, male che vada puoi sempre scaricare quella a pagamento, che è di tre tipi: la versione Standard, $59 per due mesi di aggiornamenti, la Enterprise $119, per due anni di aggiornamento e la versione Site License, per aziende. Considera, comunque, che la licenza è a vita. Infine, per pubblicare app Android sul PlayStore di Google, si devono spendere altri $25 per iscriversi, ma solo una volta per tutte.
Per le app iOS da pubblicare sull’Apple Store hai bisogno di un computer Mac connesso ad Internet. Un Mac è necessario poiché devi formattare la tua applicazione tramite il software Xcode in un file binario e questo programma è disponibile solo per macOS. Si può fare anche senza Mac, perché B4i funziona anche senza. Ma per compilarlo devi trovare Hosted Mac Builder. Questo servizio lo puoi trovare su B4X al prezzo di $26 l’anno. La pubblicazione sull’Apple Store costa $99 all’anno.
Come promesso all’inizio dell’articolo ti ho dato tutte le informazioni per poter iniziare a scrivere la tua App. Spero che ti sia stato utile. Se hai domande puoi scrivermi.
Aggiornamento del 12 Marzo 2020: B4A è diventato completamente open source perciò gratuito!!!!
