Applicazioni Web per la biomedicina

IMMAGINI

Per inserire un immagine basta un singolo tag <img> che non va chiuso. Per poter visualizzare l’immagine però,

devo indicare al tag un attributo ed in questo caso è src=”” (che sta per source). L’immagine si deve trovare

nella stessa cartella del file HTML e a questo punto basta inserire il nome del file all’interno di src:

<img src="Ara_ararauna_-Singapore_BirdPark-6.jpg">

Bisogna considerare però le dimensioni dell’immagine (che non sia troppo grande); quindi useremo l’attributo

width (cioè larghezza) al cui interno indichiamo un valore in pixel:

<img src="Ara_ararauna_-Singapore_BirdPark-6.jpg" width="100px">

Il browser rimpicciolisce l’immagine in proporzione a quello che gli abbiamo indicato. Potrei indicare anche la

larghezza ed utilizzo l’attributo height:

<img src="Ara_ararauna_-Singapore_BirdPark-6.jpg" width="100px" height="200px">

Nel caso in cui l’immagine non si trovi nella stessa cartella del file HTML ma in un’altra cartella sempre del sito,

devo indicare la sottocartella, ovvero:

<img src="IMMAGINI/Ara_ararauna_-Singapore_BirdPark-6.jpg" width="100px">

IMMAGINI è il nome della sottocartella dove ho messo l’immagine che prima era nella stessa cartella del sito.

Infatti se noi non specifichiamo questo percorso e ricarichiamo la pagina avremo un errore. Io però potrei non

volergli dare un percorso relativo perché il mio file può trovarsi altrove, per esempio sul desktop. Quini in

questo caso andiamo a prendere l’indirizzo assoluto (detto anche path assoluto) del desktop (cioè che parte

dall’origine del mio hardisk, e lo inseriamo nel src:

img src="C:\Users\leand\Desktop\Ara_ararauna_-Singapore_BirdPark-6.jpg" width="100px">

E se questo file si trova su un indirizzo internet? Andiamo su google e scriviamo per esempio pappagallo e

copiamo l’indirizzo di un’altra immagine (in questo caso un altro pappagallo). L’indirizzo che copiamo è il luogo

su internet dove si trova quell’immagine:

<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/41/Cacatua_alba_-

Bali_Bird_Park_-crest-8.jpg/1200px-Cacatua_alba_-Bali_Bird_Park_-crest-8.jpg"

width="100px">

Il tag img è inline. All’interno del tag se aggiungiamo la dicitura vertical-align:middle, la scittura a destra e a

sinistra dell’immagine si troverà perpendicolare all’immagine

VIDEO

Se vogliamo visualizzare un video nella nostra pagina HTML. Il video da inserire va posto all’interno della

cartella dove si trova il file HTML (esattamente come visto prima per l’immagine). In questo caso l’elemento di

cui abbiamo bisogno si chiama <video> che necessita anche del tag di chiusura:

<video></video>

Prima di inserire il contenuto (l’elemento) andiamo ad inserire la larghezza desiderata (in modo che l’latezza si

adatti di conseguenza):

<video width="200px"

In questo caso, poi, scriviamo una frase nel caso in cui il browser che qualsiasi utente utilizzi, non supporti il file

del video:

<video width="200px">

il tuo browser non supporta i video. Sorry!

</video>

Questa frase la scriviamo proprio se ciò accade. Come possiamo notare dopo 200px abbiamo chiuso con >.

Dentro l’elemento poi devo aggiungere un altro elemento che si chiama <source> (diverso da src) che a sua

volta avrà l’attributo src e all’interno delle virgolette scriveremo il nome del file, esattamente come fatto prima

per le immagini:

<video width="200px">

<source src="Leandro-Bruno-fdown.net(2).mp4">

il tuo browser non supporta i video. Sorry!

</video>

Noterete che non si vede niente perché mancano i controlli per vedere il video (come il tasto play, avanti,

pausa ecc.). Possiamo apportare questa modifica all’interno dell’elemento video aggiungendo l’attributo

controls senza mettere = e le virgolette:

<video width="200px" controls>

<source src="Leandro-Bruno-fdown.net(2).mp4">

il tuo browser non supporta i video. Sorry!

</video>

Come sempre ad ogni modifica ricaricate la pagina del browser per vedere se è andato tutto bene. Ovviamente

il video non è andato a capo perché manca <br>.

Nell’elemento source è buona norma specificare l’attributo type per specificare la tipologia di video:

<video width="200px" controls>

<source src="Leandro-Bruno-fdown.net(2).mp4" type="video/mp4">

il tuo browser non supporta i video. Sorry!

</video>

Molto spesso si usano più elementi source perché magari abbiamo lo stesso video in più formati in modo tale

che il browser utilizzi il formato più idoneo. Con l’attributo autoplay poi possiamo far partire il video in

automatico. Attenzione perché non tutti i browser supportano l’autoplay allora possiamo mettere il video in

muto (con l’attributo muted) in modo che parta con più probabilità. Se poi togliamo controls e lasciamo

autoplay e muted, il video parte ma gli utenti non potranno interagire col video:

<video width="200px" controls autoplay muted>

<source src="Leandro-Bruno-fdown.net(2).mp4" type="video/mp4">

<source src="Leandro-Bruno-fdown.net(2).mp4" type="video/ogg">

il tuo browser non supporta i video. Sorry!

</video>

ELENCHI NUMERATI E PUNTATI

Per creare delle liste si usa il tag <ul> ( che va chuiso) che significa “lisa non ordinata” , cioè una lisa senza

numeri e al posto dei quali vi sono dei punti. All’interno del tag <ul> vanno inseriti gli elementi lista che

prendono il nome di <li> che anch’esso si apre e si chiude e all’interno scriveremo quello che vogliamo:

<p> Lista della spesa:<br>

<ul>

<li>latte</li>

<li>biscotti</li>

<li>verdure</li>

<li>succhi di frutta</li>

</ul>

</p>

Il tutto contenuto in un paragrafo e quello che vedremo nel browser sarà questo:

Se invece vogliamo un elenco numerato il tag da usare sarà <ol> (cioè lista ordinata):

<p> Classifica degli alimenti che fanno bene:<br>

<ol>

<li>patatine fritte</li>

<li>kebab</li>

<li>pizza wustel e patatine</li>

</ol>

</p>

E vedremo:

Se vogliamo cambiare lo stile dei puntini la faremo col CSS che vedremo successivamente.

EMBED

Una cosa che ci permette di fare HTML è incorporare elementi esterni nella nostra pagina web. L’elemento che

ci permette di fare questo è <iframe> (che va chiuso). Esso è un contenitore all’interno del quale possiamo

mettere qualsiasi cosa. Se noi vogliamo caricare un video di YouTube basterà andare sul video e cliccare su

incorpora; questo ci darà il codice da inserire nel nostro sito. Copiamo e incolliamo nell’editor:

<iframe width="400" height="315"

src="https://www.youtube.com/embed/3xIbyWfUIHw?si=77JlYQJEGPVTTXNs"

title="YouTube video player"

frameborder="0"

allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-

in-picture; web-share"

allowfullscreen>

</iframe>

NUOVI TAG DI HTML5:

- Tag <article>: è un elemento utilizzato per definire un contenuto indipendente e autosufficiente

all'interno di una pagina web. Questo elemento viene impiegato per identificare una sezione di

contenuto che può essere considerata un articolo, una storia, un post di blog o qualsiasi altra unità di

contenuto che abbia senso essere presentata come un'entità distinta e autosufficiente.

- Tag <section> in HTML è un elemento utilizzato per raggruppare contenuti tematicamente correlati

all'interno di una pagina web. Questo elemento è utilizzato per dividere il contenuto della pagina in

sezioni logiche e significative.

- Tag <aside> in HTML è un elemento utilizzato per definire contenuti correlati al contenuto principale

della pagina, ma che sono considerati separati da esso. L'elemento <aside> è spesso utilizzato per

contenuti aggiuntivi, come barre laterali, pubblicità, note di margine o altri contenuti accessori che

sono collegati al contenuto principale della pagina ma non sono essenziali per la comprensione di

quest'ultimo.

Qui di seguito ecco mostrato il sito tradotto da HTML

I

tag

article, section, aside e nav sono noti come elementi di sezionamento (header e footer non appartengono a

questa categoria). Ognuno di loro può avere il suo h1 seguito da h2 ecc. Ad essi è possibile applicare anche i

padding, i margin, ol,ul,li,p.

FONTS

I font sono elementi cruciali per la presentazione del testo su una pagina web. Essi determinano l'aspetto e la

leggibilità del testo stesso. In HTML e CSS, ci sono diverse modalità per definire e utilizzare i font. Ecco alcuni

concetti importanti relativi ai font:

1. Font Family (Famiglia di Font): La famiglia di font è un insieme di font simili che condividono

caratteristiche stilistiche comuni. Quando si definisce una famiglia di font in CSS, si specifica un elenco

di font preferiti che il browser utilizzerà per visualizzare il testo. Ad esempio:

In questo esempio, se Arial non è disponibile, il

browser utilizzerà un font sans-serif come fallback.

Il termine "serife" si riferisce a un tipo di carattere

caratterizzato dalla presenza di "serif", che sono piccoli

tratti aggiuntivi o estensioni che decorano le estremità

dei tratti delle lettere. Queste estensioni possono

essere angolari, curvate o sottili, e sono comunemente

trovate nei caratteri tradizionali utilizzati nella stampa

e nella tipografia classica.

I font mono space, cioè tutti i caratteri occupano la

stessa larghezza.

I font monospace sono estremamente utili in bioinformatica per diversi motivi:

1. Allineamento del Codice: In bioinformatica, si lavora spesso con sequenze di DNA, RNA e proteine che

richiedono allineamenti per identificare regioni simili o conservate. I font monospace assicurano che

ogni base o amminoacido sia allineato verticalmente, rendendo più facile leggere e interpretare gli

allineamenti.

2. Leggibilità dei Formati di File: I file di output generati da software e strumenti bioinformatici spesso

contengono dati tabellari o testuali formattati in modo strutturato. L'uso di font monospace facilita la

lettura e l&