WordPress senza segreti? Ora puoi! Mossa1: overview

Devi avere delle conescenze generiche di html, css, php e non necessariamente database per continuare oltre tutti gli strumenti idonei per mettere in piedi i tuoi progetti. Le risorse per alimentare un ambiente di sviluppo per wordpress o siti php sono le seguenti (alcune), le installazioni sono intuitive e le versioni si ponno trovare per vari sistemi operativi, sia 32 e 64 bit, tenendo presente che servono editor, server locali supportati da database e strumenti di trasferimento file come filezilla per gli ambienti di produzione:

https://filezilla-project.org/ (trasferimento file)
https://atom.io/ (editor)
https://code.visualstudio.com/ (editor)
https://notepad-plus-plus.org/ (editor)
https://www.mamp.info/en/ (anche per vers windows)
https://www.apachefriends.org/it/index.html (xampp)
https://getflywheel.com/ (wordpress in locale)
https://www.google.it/intl/it/chrome/ (strumenti per sviluppatori, tasto dx inspector)
https://wordpress.org/support/ (codex, documentazione WP)

E tutta la documentazione per sviluppare in wordpress dove la trovo? Quivi: https://codex.wordpress.org/Nuovo_su_Wordpress_-_Come_cominciare , vengono spiegate tutte le funzioni base in italiano.

E con l’html come siamo messi? Questo linguaggio di formattazione serve anche per avere una visione generale di wordpress, visto che l’acronimo hyper text markup language va a strutturare determinati contenuti delle nostre pagine. I documenti hanno una dichiarazione iniziale che affermano la versione 5, dopodiché abbiamo delle strutture annidate ciascuna con la propria funzione. I tag si aprono e si chiudono. I tag HEAD sono comprensivi delle informazioni di servizio mentre il BODY avvolge la parte visibile della pagina. Un esempio base della pagina potrebbe essere, comprensiva di titolo nell’ header:

/*
<!DOCTYPE html>
<html>
<head>
<title>Pagina html</title>
</head>
<body>
<h1>prova tag h1</h1>
<p>ciao sono una pagina html</p>
</body>
</html>
*/

E se volessimo integrare delle intestazioni diverse dall’ H1 che formattano il testo in base alla caratteristiche del tag che le contiene? In precedenza abbiamo già visto il tag paragrafo <p> e appunto il tag H1 e osservato quelle che sono le sezioni rappresentative come funzionalità (body é la più importante):

/*
<!DOCTYPE html>
<html>
<head>
<title>tag H1…H6 e paragrafo</title>
</head>
<body>
<h1>titolo in tag h1</h1>
<h2>titolo in tag h2</h2>
<h3>titolo in tag h3</h3>
<h4>titolo in tag h4</h4>
<h5>titolo in tag h5</h5>
<h6>titolo in tag h6</h6>
<p>paragrafo con tag applicato ‘P'</p>
</body>
</html>
*/

Naturalmente il testo si può modellare usando i fogli di stile. Ma a questo punto sorge spontanea una domanda, come faccio a inserire un collegamento ipertestuale?

/*
<!DOCTYPE html>
<html>
<head>
<title>esempio di link</title>
</head>
<body>
<a href=”http://www.umbriaway.eu&#8221; target=”_blank”>vai al sito web</a>
</body>
</html>
*/

E come faccio a inserire una immagine?

/*
<!DOCTYPE html>
<html>
<head>
<title>html esempi di tag img</title>
</head>
<body>
<img src=”img/esempio.png” align=”center” alt=”immagine di esempio” width=”500px” height=”300px” title=”titolo immagine di esempio”>Testo di prova e descrizione
</body>
</html>
*/

E se volessi abbellire il mio testo con i CSS in linea? No problema:

/*
<!DOCTYPE html>
<html>
<head>
<title>html esempi di attributo style</title>
</head>
<body>
<h1 style=”color:red”>esempio di titolo in h1</h1>
<h3 style=”color:green”>esempio di titolo in h3</h3>
<p style=”font-size:30px; color:orange”>esempio di paragrafo </p>
</body>
</html>
*/

Ma quali opzioni di modificare il testo mi consente html? Posso grassettare o sottolineare per esempio?

/*
<!DOCTYPE html>
<html>
<head>
<title>html esempi tag di formattazione testo</title>
</head>
<body>
<b>Visualizza il testo in Bold</b>
<!– esempi di formattazione testo –>
<p><i>testo corsivo<i></p>
<p><u>testo sottolineato<u></p>
<p><strong>testo con tag<b>strong</b></strong></p>
<p><mark>testo con tag applicato <b>mark</b></mark></p>
<p><small>testo con tag applicato <b>small</b></small></p>
<p><del>testo con tag applicato <b>del</b></del></p>
<p><ins>testo con tag applicato <b>ins</b></ins></p>
<p>test<sub>testo con tag applicato <b>sub</b></sub></p>
<p>test<sup>testo con tag applicato <b>sup</b></sup></p>
</body>
</html>
*/

Ma posso gestire anche delle liste ordinate e disordinate?! Certo!

/*
<!DOCTYPE html>
<html>
<head>
<title>html esempi di liste ordinate e non ordinate</title>
</head>
<body>
<h1>elenco non ordinato in HTML</h1>
<ul style=”list-style-type:circle”>
<li>pane</li>
<li>pasta</li>
<li>salumi</li>
<li>caffe</li>
</ul>
<ul style=”list-style-type:disc”>
<li>pane</li>
<li>pasta</li>
<li>salumi</li>
<li>caffe</li>
</ul>
<ul style=”list-style-type:square”>
<li>pane</li>
<li>pasta</li>
<li>salumi</li>
<li>caffe</li>
</ul>
<ul style=”list-style-type:none”>
<li>pane</li>
<li>pasta</li>
<li>salumi</li>
<li>caffe</li>
</ul>
<hr>
<h1>elenco ordinato in HTML</h1>
<ol type=”1″>
<li>pane</li>
<li>pasta</li>
<li>salumi</li>
<li>caffe</li>
</ol>
<ol type=”a”>
<li>pane</li>
<li>pasta</li>
<li>salumi</li>
<li>caffe</li>
</ol>
<ol type=”i”>
<li>pane</li>
<li>pasta</li>
<li>salumi</li>
<li>caffe</li>
</ol>
<ol type=”I”>
<li>pane</li>
<li>pasta</li>
<li>salumi</li>
<li>caffe</li>
</ol>
</body>
</html>
*/

E posso suddividere la pagina in blocchi e sezioni e modellare i contenuti? Si con i div e gli span!

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...

%d blogger hanno fatto clic su Mi Piace per questo:
close-alt close collapse comment ellipsis expand gallery heart lock menu next pinned previous reply search share star