- Comandi rapidi in Visual Studio Code
- Collegare foglio di stile – 3 modi
- Inserire favicon
- Video responsive
- Immagine centrata e responsive
- Esempi di menu
- Immagini webp inserimento
- Span style
- Link sintassi
comandi rapidi di Visual Studio Code
maiusc ! e poi TAB per avere la struttura base di una pagina html
oppure scrivo html (senza simbolo<) e scelgo dalla lista html5 e poi invio (questo se si ha estensione Emet attivata)
———————————————————————
DUPLICARE
ALT MAIUSC FRECCIA GIù
si può fare anche per più righe basta selezionare più righe
———————————————-
SPOSTARE
ALT E FRECCIA SU O GIù
in questo caso si sposta
———————————————
ctrl + Enter
da qualunque posizione in una riga mi porta ad una riga in basso vuota
(alternativa il tasto fine e poi invio)
———————————————–
ALT MAIUSC F (occorre prettier?)
per formattare html
———————————————
CTRL + S (ma ho verificato che si salvano lo stesso i file anche senza questo comando)
_________________________________________
CTRL + ù per trasformare un testo selezionato in un commento
——————————————————
<!– per scrivere un commento–>
⇑
___________________________________________
Ci sono 3 modi di incorporare il CSS all’interno della nostra pagina html: style in line, embedded, e link esterno.
FOGLIO DI STILE ESTERNO
<link rel="stylesheet" href="style.css">
FOGLIO DI STILE INTERNO
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Document</title>
<style>
.diverso{
color:red;
font-size: xx-large;
font-weight: 800;
}
</style>
</head>
STILE INLINE
<h3 style=”font-size: xx-large; color: red;”>questo testo lo voglio spostare su</h3>
<p>prova di <span class=”colorlive”>un testo in live </span> server colorato</p>
<p>prova di un testo in live server</p>
<p>questo <span style=”color: brown;”>testo lo voglio</span> spostare in mezzo</p>
inserire una favicon in html
https://www.ionos.it/digitalguide/siti-web/web-design/inserire-una-favicon/
VIDEO RESPONSIVE
css per rendere responsive video iframe:
in questo caso occorre mettere all’inizio un <div class=”respons-video”> iframe etc
e alla fine un div di chiusura</div>
css pre rendere responsive i video dal proprio Pc
mettere una immagine al centro e renderla responsive
ESEMPI DI MENU
<a href=”index.html”>HOME</a>
<a href=”seconda.html”>SECONDA</a>
<a href=”chi-siamo.html”>CHI SIAMO</a>
inserire immagine webp in html
span style Definition and Usage
The <span> tag is an inline container used to mark up a part of a text, or a part of a document.
The <span> tag is easily styled by CSS or manipulated with JavaScript using the class or id attribute.
The <span> tag is much like the <div> element, but <div> is a block-level element and <span> is an inline element.
<p>My mother has <span style=”color:blue”>blue</span> eyes.</p>
Link
https://www.w3schools.com/html/html_links.asp
<a href=”https://www.w3schools.com/”>Visit W3Schools.com!</a>
The target attribute can have one of the following values:
_self– Default. Opens the document in the same window/tab as it was clicked_blank– Opens the document in a new window or tab_parent– Opens the document in the parent frame_top– Opens the document in the full body of the window
Attributo _blank —————————————————————–
<a href=”https://www.w3schools.com/” target=”_blank”>Visit W3Schools!</a>
link nella stessa pagina
Si possono ottenere dei link interni nelle pagine web attraverso un utilizzo un po’ diverso del tag <a> (Ancora) normalmente utilizzato per i link ipertestuali.
Nel punto che desideriamo linkare (quello dove verremmo condotti dopo il clik) dovremmo inserire l’istruzione
Possiamo usare un ID nella destinazione <h3 id="titolo5">Titolo V</h3> (vedi statuto sito Passirio) <h2 id="titolodue">Qui il titolo due visibile</h2> link che porta al nostro ID titolo5 <a href="#titolo5">Titolo V – I libri sociali</a>
Il link che invece dovrebbe condurre al punto di cui sopra sarà formattato seguendo la seguente sintassi
QUESTA SINTASSI CON a name NON è PIù SUPPORTATA DA HTML 5
<a name="nomeancora">testo</a> link che porta al nostro name nomeancora <a href="#nomeancora">Vai a testo</a>