web design umbria

Fondamenti di web design 1: il codice di formattazione Hyper Text Markup Language, analisi dei primi TAG

Dopo aver scandagliato tutte le problematiche legate all’ iniziazione di un corso dedicato alla figura professionale di frontend developer con materie da sviscerare come html5, css3, bootstrap, sass etc, indirizzo https://umbriawaynoir.wordpress.com/2020/12/28/fondamenti-di-web-design-introduzione/ , adesso entriamo nel vivo delle mani da mettere in pasta con il codice html che abbiamo detto essere il modo in cui plasmiamo la struttura della pagina. La prima particolarità da mettere in evidenza é che utilizzando l’editor Visual Studio Code abbiamo la possibilità di generare codice automatico grazie al suggeritore semantico. Ad esempio doc e lorem sono parole chiave e anche html5 generano rispettivamente blocchi di codice già preimpostati per una singola pagina da riempire con dei contenuti. Nel codice moderno una istruzione come:

<!doctype html>

sta a indicare al browser che si avrà a che fare con un documento html per esempio. Vediamo più in dettaglio una pagina costruita in automatico persino sui contenuti:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos facere minima magnam laborum unde ratione quasi autem est nihil impedit quaerat, illum dolorum vero esse nesciunt animi ea, quod repudiandae.</p> 
</body>
</html>

A questo punto se volessi inserire delle intestazioni all’ interno del body come dovrei fare? Sappiamo che i tag si aprono e si chiudono e che le inestazioni vanno da

<h1> a <h6> 

sappiamo anche che essendo già caratterizzate da una marcatura del carattere non abbiamo necessità di usare al loro interno tag come

<b> o <strong>

che appunto servono a generare il grassetto, dove entrambi enfatizzano ma solo strong piace di più agli spider e alla seo perché sta ad indicare una maggiore rilevanza quando viene usato. In caso di errori e volessimo tornare indietro abbiamo sempre a disposizione un CTRL Z per annullare e un CTRL Y per ritornare all’ ultima operazione. Se volessimo creare un corsivo lo possiamo fare con i tag

<i> o <em> 

dove il primo non visto bene dai motori di ricerca e il secondo maggiormente enfatizzato sì. Si noterà che le le colonne portanti dei contenuti sono racchiuse nei tag

<doctype>, <html> e <body>

Nel tag HEAD abbiamo le famose metainformazione utili agli spider per l’indecizzazione e il posizionamento organico. Posso anche regolare l’ampiezza del testo dimostrativo digitando il comando lorem seguito dal numero di caratteri tipo “lorem500” per esempio. Per finire questo primo approccio con i tag, l’istruzione:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

fa riferimento alle modalità di visualizzazione del mondo mobile. Per sottolineare il testo il tag underline uso:

<u>testo</u>

Infine c’è la questione delle citazioni. Come vengono gestite con html? Con il TAG Q o BLOCKQUOTE dove nella seconda opzione ritroviamo anche l’attributo cite per dire agli spider che quella frade è stata carpita DA ALTRA FONTE:

<q>[testo]</q>
<blockquote cite="http//www.esempio.com">
  <p>la risposta è dentro di te</p>
</blockquote>

Se volessi fare un paragrafo (con il tag P) e ad esempio allineare il testo in modalità giustificato (con l’attributo align) procederei con:

<p align="justify">contenuti bla bla</p>

Le liste con il tag LI vanno racchiuse da uno dei due tag UL o OL , dove il primo definisce liste unorder senza numeri e OL invece metterà dei numeri in corrispondenza di ogni elemento LI. Per esempio se volessi fare una lista disordinata procederei con:

<ul><li>item 1</li><li>item2</li><li>item3</li></ul>

dove appunti gli elementi della lista sono catturati dal tag li. Per le immagini dobbiamo considerare che il tag IMG ha vari attributi oltre al più importante SRC che cattura l’immagine che sono altezza e lunghezza per regolare le dimensiuoni della nostra picture, poi abbiamo la possibilità di vedere un titolo sull’ immagine una volta che ci passiamo sopra con TITLE e molto importante per la SEO è l’attributo ALT che ci dà una descrizione pertinente dell’ argomento trattato e che compare quando l’immagine non viene caricata correttamente, vediamo un esempio:

<img src="city.jpg" alt="veduta spettacolare della mia city" height="200px" width="300px">

A questo punto parliamo di tabelle che sono sempre di meno utilizzate nel responsive design e che costituiscono un elemento di vecchia data, di estrema importanza quando fu inventato internet ma che oggi con il nuovo modo di fare lay out fluidi ha perso come argomento interesse. Tuttavia le tabelle che sono aviluppate dal tag TABLE che contiene tutto il resto ossia righe con il tag TR e colonne o celle con il tag TD, sono ancora lontane dall’ estinguersi e tag come CAPTION / TH / THEAD/ TBODY/TFOOT vengono usati all’ interno delle tabelle per migliorarne la leggibilità dove il caption mette un titolo in alto alla tabella, th consente la descrizione di ogni colonna sopra i dati, thead caratterizza l’area esterna dove i dati non ci sono ma sussitono le descrizioni, tbody invece caratterizza il contenuto totale dei dati e il tfoot infine può servire magari a inserire dei totali per esempio tratto da http://wwwcdf.pd.infn.it/AppuntiLinux/tabelle_complesse.htm:

<TABLE SUMMARY="operatori">
     23 <CAPTION>Operatori matematici comuni</CAPTION>
     24 <THEAD>
     25     <TR>
     26     <TH></TH>
     27     <TH ROWSPAN="2"><P>Operatore e operandi</P></TH>
     28     <TH COLSPAN="2"><P>Annotazioni</P></TH>
     29     </TR>
     30     <TR>
     31     <TH></TH>
     32     <TH><P>Operazione</P></TH>
     33     <TH><P>Descrizione</P></TH>
     34     </TR>
     35 </THEAD>
     36 <TBODY>
     37     <TR>
     38     <TH ROWSPAN="4"><P>le quattro operazioni</P></TH>
     39     <TD><P><CODE><VAR>op1</VAR>+<VAR>op2</VAR></CODE></P></TD>
     40     <TD><P>somma</P></TD>
     41     <TD><P>Somma i due operandi.</P></TD>
     42     </TR>
     43     <TR>
     44     <TD><P><CODE><VAR>op1</VAR>-<VAR>op2</VAR></CODE></P></TD>
     45     <TD><P>sottrazione</P></TD>
     46     <TD><P>Sottrae il valore del secondo operando
     47         da quello del primo.</P></TD>
     48     </TR>
     49     <TR>
     50     <TD><P><CODE><VAR>op1</VAR>*<VAR>op2</VAR></CODE></P></TD>
     51     <TD><P>moltiplicazione</P></TD>
     52     <TD><P>Moltiplica i due operandi.</P></TD>
     53     </TR>
     54     <TR>
     55     <TD><P><CODE><VAR>op1</VAR>/<VAR>op2</VAR></CODE></P></TD>
     56     <TD><P>divisione</P></TD>
     57     <TD><P>Divide il primo operando per il valore del secondo.</P></TD>
     58     </TR>
     59 </TBODY>
</table>

Prima di passare alle ancora chiariamoci con una immagine il mistero degli attributi colspan e rowspan:

A questo analizziamo il tag più importante dal punto di vista simbolico ossia il tag A, ancora, che serve per la vera essenza di Internet, il collegamento testuale:

<a href="https://www.umbriaway.eu" target="_blank">visita umbriaway consulting</a>

dove target=”_blank” indica l’attributo che mi consente di aprire il link in una nuova finestra. Se avessi una necessità di un ancora che non porta a nulla inserire un cancelletto # al posto dell’ url, in tal caso aggiungendo al cancelletto per esempio dei nomi di zona della pagina, potrei mettere in piedi anche un meccanismo di ancore interne che mi fanno saltare da una sezione all’ altra della pagina, espediente molto utile nel caso abbia a che fare con pagine molto lunghe per esempio.