Ancoraggio Html di immagine

Ancoraggio Html di immagine

Il web è una giungla misteriosa, tutto ciò che noi guardiamo o clicchiamo è composto da un sotto strato capillare di codici, tag, e altre cose con paroloni strani che vanno a formare la struttura del web stesso…. Si potrebbe un po’ paragonare all’ interruttore della luce, lo guardiamo, può avere forma o colori differenti, se schiacciamo un bottone si accende una luce, se ne clicchiamo un altro apriamo il cancello, ma questo avviene grazie a ciò che c’è dietro… un reticolo di cavi, trasformatori ecc…. in un certo senso lo stesso vale per il web 
Andiamo a vedere in modo pratico cosa c’è sotto per avere un’idea di come è fatta questa struttura cercherò di spiegare alcune cose basilari nel modo più semplice possibile per cercare di far capire anche ai neofiti:

Immagini:
Ne esistono in diversi formati, i più usati sono: ‘’ .gif .jpg e .png’’
L'elemento <img> è necessario per richiamare una immagine, ma da solo non serve a nulla, necessita di diversi attributi uno è obbligatorio ovvero: src. Questo tag non necessita del tag di chiusura ma di solito i tag hanno bisogno di un tag di apertura e un altro di chiusura. (Vedremo come negli esempi)
L'attributo src (source) è indispensabile per l'elemento img, senza questo non funzionerebbe nulla. Permette di specificare il nome dell'immagine completo della sua estensione (.png , jpg ecc) E' possibile specificare anche percorsi (path) fatti da cartelle (directory) e/o sottocartelle (subdirectory) compresi gli URL (indirizzi internet di un elemento) richiamanti l'immagine da altri siti.
Ma come facciamo a dare una url ad una immagine?
Occorre caricarla nel web, ci sono vari siti gratuiti per poter fare ciò https://imageshack.us è uno dei più noti ma ce ne sono molti altri, una volta caricata la nostra immagine nel sito ci verra fornito l’indirizzo della nostra immagine ecco questo indirizzo sarà la nostra url da mettere nel codice, nel mio caso ho caricato la foto di un fiore il suo indirizzo (URL) è il seguente: https://imageshack.com/a/img922/3872/09DNlh.jpg

Vediamo un esempio pratico da scrivere in una pagina web: 
<img src="nome_immagine.jpg"> 

Al posto di "nome immagine" dovremo mettere l’URL (indirizzo) della foto
<img src=" https://imageshack.com/a/img922/3872/09DNlh.jpg ">  

Ecco come risulterà nell’editor:

Ed ecco come risulterà nella vostra pagina:

Ci sono molti attributi che possiamo aggiungere a questo codice servono per allineare l’immagine a sinistra piuttosto che a destra, altri che ci permettono di aggiungere un bordo, altri ancora per cambiare la grandezza dell’immagine, ma di questo parlerò in futuro per  non complicarvi troppo le idee, spero che questo articolo sia abbastanza chiaro anche per chi si sta avvicinando per la prima volta  alla costruzione di una pagina web. 
Alla prossima!

Gadget dei post random

Gadget dei post random

Gadget html post random da applicare su un gadget htlm/java script di blogger, vi basterà copiare e incollare il codice sottostante


<style> #bo-random-posts img{background:#fff;height:50px;float:left;width:50px;margin:5px 5px 0px 0px;-webkit-border-radius:50%;border-radius:50%;-moz-border-radius:50%;padding:3px;} #bo-random-posts img:hover{opacity: 0.5;filter: alpha(opacity=50);} ul#bo-random-posts {list-style-type: none;background-image: url("#");background-repeat: no-repeat;} #bo-random-posts li {margin: 10px 0;} #bo-random-posts li a{padding: 5px 0;text-decoration: none;} .bo-random-summary {display: block;} </style> <ul id='bo-random-posts'> <script> var borp_number = 5; var borp_details = 'yes'; var borp_chars = 40; var borp_details2 = 'yes'; var borp_comments = ''; var borp_commentsd = ''; var borp_current = []; var total_randomposts = 0; var borp_current = new Array(borp_number); function randomposts(json) { total_randomposts = json.feed.openSearch$totalResults.$t} document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=randomposts\"><\/script>'); function getvalue(){for(var r=0;r<borp_number;r++){for(var n=!1,o=get_random(),t=0;t<borp_current.length;t++)if(borp_current[t]==o){n=!0;break}n?r--:borp_current[r]=o}}function get_random(){return 1+Math.round(Math.random()*(total_randomposts-1))} </script> <script>function random_posts(t){for(var e=0;e<borp_number;e++){var r=t.feed.entry[e],s=r.title.$t;if("content"in r)i=r.content.$t;else if("summary"in r)i=r.summary.$t;else var i="";if((i=i.replace(/<[^>]*>/g,"")).length<borp_chars)var a=i;else{var n=(i=i.substring(0,borp_chars)).lastIndexOf(" ");a=i.substring(0,n)+"…"}for(var o=0;o<r.link.length;o++){if("thr$total"in r)var l=r.thr$total.$t+" "+borp_comments;else l=borp_commentsd;if("alternate"==r.link[o].rel){var m=r.link[o].href,c=r.published.$t;if("media$thumbnail"in r)var u=r.media$thumbnail.url;else u="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdF2T1AOB95G7SHLlgYVIy_PhPJibDvSqPSvQWoMZhikklapZ4kUFpSVNVNCY1jMxMnW90lgD8ltjkH2Mx7qSfDjuxyScLxUOsmoARBSOpvpGvQIngYXmi5xVU8_lEn4N5Lc9gIFN9JaR2/s1600/no_thumb.png"}}document.write(" <li>"),document.write('<img alt="'+s+'" src="'+u+'"/>'),document.write('<div> <a href="'+m+'" rel="nofollow">'+s+"</a></div> "),"yes"==borp_details&&document.write("<span>"+c.substring(8,10)+"."+c.substring(5,7)+"."+c.substring(0,4)+" - "+l),"yes"==borp_details2&&document.write('<span class="random-summary">'+a),document.write('<div style="clear:both"> </div> </li> ')}}getvalue();for(var i=0;i<borp_number;i++)document.write('<script type="text/javascript" src="/feeds/posts/default?alt=json-in-script&start-index='+borp_current[i]+'&max-results=1&callback=random_posts"><\/script>');</script> </ul>

Menu orizzontale da applicare su layout semplice

Menu orizzontale da applicare su layout semplice

Menu orizzontale da aggiungere tramite widget htlm/java script nel layout del nostro blog, vi basterà aggiungere un nuovo widget al vostro blog e incollare il codice sottostante, al posto di ''indirizzohomemiosito'' metterete l'indirizzo della home page del vostro sito/blog e al posto dei vari # (simbolo cancelletto) per ogni riga metterete l indirizzo della vostra pagina e il nome che le vorrete dare nel menu, al post dei numeri ancora metterete il nome che vorrete fare apparire nel vostro menu


orizzontale <div id="mainNav"> <ul> <li class="page_item page-item current_page_item"><a href="http://indirizzohomesito" title="home">HOME</a></li> <li class="page_item page-item"><a href="#" title="#">1</a></li> <li class="page_item page-item"><a href="#" title="#">2</a></li> <li class="page_item page-item"><a href="#" title="planner">3</a></li> <li class="page_item page-item"><a href="#" title="#">4</a></li> <li class="page_item page-item"><a href="#" title="#">5</a></li> </ul> <noscript><a href='http://goo.gl/cdn3j' target='_blank'><span style='font-size: x-small;'>Simple Menu</span></a></noscript> </div>

HTML 

Cosa significa HTML??

Proviamo a dirlo in parole semplici:

HTML è un'abbreviazione di un termine inglese " Hyper Text Markup Language".

Che è un tipo di linguaggio di programmazione utilizzato per creare pagine e documenti su internet . Le pagine HTML sono dei file di testo composte da speciali marcatori (o tag) che posizionano testi ed immagini. Tutti i marcatori iniziano sempre con il simbolo " < " e finiscono con " > ".

Vediamo un esempio pratico che ho creato per voi:

Visibilmente si vede questo

Per crearla è stato scritto questo