- Codici html - PDF

Preview

Summary

Codici per scrivere una pagina in html...

Description

URL es. https://www.miur.gov.it L’acronimo URL sta per “Uniform Resource Locator”, e viene utilizzato per identificare, individuare e raggiungere in modo univoco una risorsa web. Questo codice URL viene inserito nella barra del browser e consente di raggiungere la pagina web desiderata, salvata su un server ( di un ISP).

Ogni pagina web inizia con “http”. Oggi è diventato “https”, poiché vi è il protocollo sicurezza. Componenti dell'URL: 1. il Protocollo in uso. In questo caso: HTTP (“Hyper text Transfer Protocol”, Protocollo di Trasferimento di un Ipertesto). Può essere anche HTTPS, FTP e così via 2. L’ host o il nome host: www.youtube.com. 3. Il sottodominio: www. 4. Il nome del dominio (dominio): youtube.com 5. Il dominio di primo livello: (suffisso di un indirizzo web): .com Conosciuto anche con l'abbreviazione TLD. 6. Il Percorso: /watch: Un percorso fa di solito riferimento a un file o a una cartella (directory) presente nel server (per esempio “/folder/file.html”). 7. Parametro e valore: v (parametro), QhcwLyyEjOA (valore del parametro). I parametri iniziano sempre con il segno “?” all’interno dell’URL. Nel nostro esempio, il nome del parametro è “v” e il suo valore “QhcwLyyEjOA” (il nome e il valore del parametro hanno sempre la stessa struttura: Parametername = Parametervalue. Il nome della risorsa, della pagina vera e propria che stiamo cercando viene indicato dalla parte presente dopo lo slash (→ watch ? V (: identificativo) = QhcwLyyEj0A (:nome vero della pagina web, della risorsa che stiamo cercando). Potrebbe esserci anche un altro slash e un ulteriore stringa. L'URL è il modo più facile per provare a interpretare l'indirizzo IP. Solo che ricordarsi un indirizzo IP è impossibile, quindi è meglio utilizzare degli acronimi delle pagine web che mi consentono di individuare in maniera più rapida la risorsa a cui sono interessata. Tutta la parte dell'indirizzo IP è tutto ciò che corrisponde ad “http://www.youtube.com”. La composizione dell'URL compare in un Browser. Browser → applicativo che consente di aprire le pagine web. Ce ne sono di vario tipo, ma quelli più diffusi sono: Chrome, Firefox, IE & Edge. CHROME: gratuito, veloce e può essere ampliato con un gran numero di applicazioni (https://chrome.google.com/webstore/category/extensions?hl=it); sviluppato da Google, e anche se parlare di privacy riguardo ad un prodotto Google può sembrare ironico, esistono diverse opzioni per bloccare pubblicità, crawler (https://support.google.com/webmasters/answer/1061943?hl=it) e script di siti web. Volendo fare «lo storico» confronto con firefox, quest’ultimo è più leggero e poi https://www.navigaweb.net/2013/11/quale‐migliore‐tra‐firefox‐e‐chrome.html

SAFARI: browser free, è il browser di default per Mac e di Phone e di Pad. Il browser Safari è veloce, può generare e salvare le password;•Se paragonato a Chrome, alcuni svantaggi saltano subito all’occhio. Ad esempio, Safari non può essere personalizzato al livello di Chrome. FIREFOX: è un browser sviluppato da Microsoft,può essere installato sia su Windows che su Mac, risulta veloce, Anche Firefox può essere ampliato e personalizzato grazie ad un gran numero di applicazioni, ma, come Safari,non riesce a battere Chrome. BRAVE: browser relativamente nuovo sul mercato ed ancora in versione beta, anche se già in questa fase promette bene. Brave assicura una navigazione più veloce (fino a 8 volte più veloce di Chrome) e allo stesso tempo dà priorità alla privacy degli utenti. Blocca script,standard, crawler e pubblicità, i siti web si caricano più velocemente.

Codice HTML: modo di scrivere le pagine web. Non è un linguaggio di programmazione, in quanto non fa riferimento ad un algoritmo, cioè ad una sequenza di step logici necessari che vengono poi tradotti in un linguaggio che servono a risolvere i problemi. Il termine Html non è solo un codice di programmazione, ma protocollo della pila ISO/OSI e lo ritroviamo anche come estensione di file, perché molte pagine (dinamiche) possono essere scritte con altri codici di programmazione, ma il motore di ricerca, per poterli interpretare, le tradurrà tutte in html. HTML è l’acronimo di Hipertext Markup Language. Il linguaggio HTML definisce la struttura del contenuto che è visualizzato su una pagina WEB. Non è un linguaggio di programmazione, NON consente di rappresentare algoritmi per la soluzione di problemi pratici. Però il risultato delle elaborazioni dei programmi per il WEB,qualunque sia il linguaggio di programmazione usato è trasmesso in html. Il linguaggio html è un linguaggio di demarcazione (markup language) che avviene attraverso i tag. Ossia è un linguaggio la cui struttura è definita da elementi caratterizzanti (tag) che avvolgono righe di testo. I tag sono degli elementi caratteristici, scritti in un particolare modo, che servono per far capire al motore di ricerca cosa deve tradurre (es. image, text, title). Si trovano all’inizio ed alla fine di un elemento. I tag vengono inseriti definendo una struttura gerarchica, così da definire come disporre gli elementi all’interno di una pagina web I tag descrivono il tipo di contenuto del documento. Una pagina WEB è scritta in linguaggio html e contiene tags e testo. La versione in uso attuale è l’html 5, gli enti che cooperano e danno le linee guida per la creazione di pagine WEB sono: 1. Internet Engineering Task Force (IETF) 2. World Wide Web Consortium (W3C) 3. The Web Accessibility Initiative (WAI)

Si opera in modo che le pagine scritte in html 5 siano indipendenti dal dispositivo. STRUTTURA PAGINA WEB HTML Inizia sempre con un tag e si deve sempre chiudere con un . Lo slash è sempre usato per chiudere. Perché una pagine web funzioni, tutto ciò che deve contenere deve essere compreso tra questi due tag (ossia e la sua chiusura). Troviamo anche altri due elementi fondamentali: e . è una specie di contenitore in cui posso scrivere quali possono essere gli elementi di controllo della pagina. In questo caso: il titolo della pagina, che interpreterà solitamente il browser. Inoltre, tutto ciò che scriverò nell'head non verrà visualizzato, perché sono degli elementi di controllo. Sono degli elementi che potranno andare a colpire i caratteri, lo stile della pagina web e che quindi fungono da supporto alla struttura delle pagine (ossia, nel caso in cui volessi scrivere sempre, per tutto il testo, una determinata parola in rosso e di una certa grandezza, lo scriverò una sola volta e in questo head). Invece, tutto ciò che voglio che sia visto in una pagina web, deve essere compreso tra due tag: e la sua chiusura . Solo ciò che viene scritto entro questi due tag potrà essere visualizzato nella pagina web dal browser.

(lavoro su codewith.it) In qualunque editor e qualunque pagina web deve sempre iniziare con questa dichiarazione: . È una dichiarazione che fa capire al browser che si tratta di una pagina html. È proprio un tipo di documento. Inoltre, non viene visualizzato, in quanto questa informazione viene interpretata esclusivamente dal browser. Un pagina web deve sempre avere degli elementi fondamentali: tag ; tag ; tag e le chiusure rispettive.

Per evidenziare e dividere l'head dalla parte di contenuto (body), lascio un spazio, che però non è visualizzato dall'altra parte. Si tratta semplicemente di uno spazio logico che serve per visualizzare meglio quali sono i due settori. Quando vengono posti i tag e di chiusura, deve essere rispettata la gerarchia: quindi prima body e poi html, perché devono essere uno all'interno dell'altro per rispettare la sequenza di apertura e chiusura. Altra cosa che si è soliti fare per mettere in evidenza come sto lavorando, è che: – i tag si scrivono in corrispondenza del numero che indica la riga; – i tag sono scritti sotto forma di scala (sempre più distanziati dal bordo), per assicurarmi che siano mette tutte le aperture e tutte le chiusure. Per scrivere un titolo (Benvenuto in Codewith.it), si usano dei tag che partono con l'h (es. , oppure può anche essere ecc...). Quello più grande è h1, ossia quello che mi indica il carattere più grande (grandezza della scritta). Con questo tag si scrivono dei formati titoli standard: tutti con il “bold” incorporato, ossia il grassetto. Scriviamo altri titoli: Tra “benvenuto” e “porta quisque” vi è uno spazio nel testo riportato (pagina web), perché essendo questi dei default/tag per dei titoli, dà automaticamente lo spazio. Questa cosa non avviene nella parte di html dove sto creando questi titoli. Inoltre, potrei anche distanziare dal bordo per rendere più visibile i due tag diversi e sapere se li ho chiusi entrambi. Ora sta acquisendo l'aspetto di un testo vero e proprio con titolo (), sottotitolo () e testo vero e proprio (). => per la scrittura dei titoli, sottotitoli e paragrafi utilizzo il tag: , , a seconda di cosa voglio mettere in evidenza, poiché maggiore è il numero e minore è la grandezza del carattere. I contenuti veri e propri devono essere scritti tra il tag e la sua chiusura . Aspetto semplicemente di forma: – la chiusura, per facilità, viene posta a capo solo se sto chiudendo una frase/testo di più righe, in modo che mi sia più facile vedere la chiusura. Se si tratta di una frase o parola, che quindi non oltrepassa la riga, metto la chiusura subito di seguito. – Importante la gerarchia dei tag dal titolo-sottotitolo-testo, scrivendoli sempre più verso l'interno.

Cambiare colore: quindi aggiungere subito dopo l'apertura di un tag, ma sempre dentro la “parentesi” (es. ): style= “color : red;” (“red” come qualsiasi altro colore). Oppure avrei potuto mettere l'equivalente esadecimale: style= “color : #FF0000;” colore verde: #008000 Vi è anche l'annotazione RGB che troviamo nelle tavolozze di Paint, Word, dove si sceglie la composizione indicando quanto rosso deve esserci, quanto giallo, e quanto blu. es. 45, 78, 81. → sono i tre valori di composizione di colore che vogliamo ottenere. Il valore minimo è 0, mentre il valore massimo è 255. Quindi può anche essere scritto così: style= “color : rgb(48, 57, 93);” Mettere uno sfondo colorato a una scritta in particolare: la dicitura deve sempre essere posta all'interno del tag in questione, per esprimere come questo deve essere visualizzato sulla pagina web. Quindi,

Quindi, quando voglio definire il colore, tipicità, dimensione del carattere si usa sempre il tag style=”...;” seguito da background, color. Ora, invece , di uno sfondo colorato, proviamo a porre una casella, cornice colorata a una scritta:

style= “border : 2px solid tomato;”

Quindi “border” per indicare che voglio mettere il bordo; “2 px” per indicare lo spessore del bordo; “solid” per indicare il bordo con linea continua; “tomato” per colorare il bordo. Cambiare il font: in questo caso, ad esempio, vogliamo cambiare il font con cui è scritto il testo. style=”font-family : arial;” o “font-style”

Cambiare dimensione del carattere:

style= “font-family : arial; font-size : 38;” Allineare a sinistra-centro-destra una scritta: in questo caso voglio allineare al centro della pagina la scritta “benvenuto alla lezione”: la dicitura la trovo così → ora diventa → quindi:

style= “background-color: tomato; text-align : center;” Al posto di “center” avrei potuto mettere anche “right” o “left”. Creare un elenco: ne esistono di due tipi, ossia quello numerato e quello puntato. Vuol dire scegliere tra elenco ordinato (che utilizza numeri e lettere) ed elenco non ordinato (che utilizza i simboli). Elenco ordinato: tag → , che sta per “ordinary list” Al suo interno annidiamo un altro tag (“annidare” significa inserire un tag successivo, all'interno di uno già esistente. Quindi inserirlo prima della sua chiusura). es. …. (“li” sta per “list”) ecc...

Elenco non ordinato: tag → che sta per “unordinary list”

esercizio:

sta per “bold”, quindi il carattere grassetto. sta a precisare il fatto che io voglia in grassetto solo l'esponente. In questo caso, ho specificato di voler scrivere in nero, nel caso poi decidessi di scrivere anche in colori diversi. Altrimenti, se volessi tutto nero, è il colore già presente di default e quindi si può non specificare, in questo caso. Se supponiamo di avere l'esponente come pedice (contrario di apice), scriverei al posto di .

Nel caso in cui, nella creazione di un elenco non ordinato, al posto del pallino volessi mettere il quadrato:

type=”square” Al posto di “square”, se volessi mettere il cerchietto vuoto, sostituisco con “circle”. Inoltre, se voglio indicare che la scritta “Colosseo” sia in grassetto, subito successivamente a aggiungo . Perché voglio indicare che sto per mettere un carattere grassetto alla scritta in particolare. Corsivo: N.B.: appena faccio le modifiche a una scritta, subito dopo questa devo mettere la chiusura corrispondente alla modifica apposta. Sottolineato: che sta per “underlined”.

Costruzione di una TABELLA: tag → e in ogni tabella vi è la tipologia (es. nome, cognome, età) e i suoi elementi in colonna (es. nome → Luca, Anna, e così via..). Questa viene chiamata “tabella 3x3”, ossia che ha 3 righe e 3 colonne.

Quindi, se volessimo riprodurre questa tabella, dovremmo inserire i tag per dire che vogliamo mettere: – vogliamo una tabella – con 3 righe – 3 colonne – nella prima riga, dell'intestazione, vogliamo mettere “Nome”, “Cognome” ed “Età”. Tag per la riga → tag per elementi della riga di intestazione → (di conseguenza, dato che sono gli elementi della riga, una volta che ho finito, metterò la chiusura alla fine di tutto). Trattandosi della riga di intestazione, gli elementi saranno scritti in grassetto in automatico. Tag diverso per elementi della altre righe della tabella → È possibile notare che mentre per la riga di intestazione gli elementi sono in automatico in grassetto e centrati, gli elementi delle altre righe sono normali e allineati a sinistra.

Aggiungere il bordo alla tabella: siccome vogliamo precisare che è il bordo della tabella intera ad essere inserito, annido il tag del bordo all'interno del tag : Aggiungere il bordo alle celle: vado sul tag di una delle celle e annido il tag riguardante l'aggiunta del bordo.

N.B.: per il bordo, non è necessario aggiungere il punto e virgola dopo ogni modifica, perché riguardano tutte la modifica dello stesso. È un formato diverso rispetto a prima. Modificare dimensione delle celle: N.B.: qui è necessario aggiungere il punto e virgola.

Volessi aggiungere un colore di sfondo alla cella “Rossi”, devo aggiungere al tag: copio il link →> torno alla pagina di codice e inserisco prima del termine “siamese” il tag (che chiudo dopo siamese) →> all'interno del primo tag () inserisco href= “link copiato”

FORM → struttura in cui si chiedono dei dati. Quindi ci sono degli input di cui il sistema ha bisogno per poter procedere. Solitamente quando si inseriscono dei dati e, soprattutto, si inseriscono dei dati personali, c'è il trattamento dei dati, il consenso al trattamento degli stessi e c'è sempre un collegamento ipertestuale alla normativa o al regolamento della gestione dati e l'ente a cui vengono rilasciati. E poi vi è sempre un bottone “invia dati”. Nella struttura di compilazione di un form ci sono delle caselle in cui bisogna scrivere degli input sotto forma di testo (es. nome, cognome, mail), ci sono delle caselle di spunta (es. quella in corrispondenza del consenso sul trattamento dei dati) e dei bottoni (es. “invia dati”). Quando si raccolgono questi dati e finiscono in un file Excel, ci sarà un'intestazione “nome”, “cognome”, “mail” sotto alle quali verranno raccolti tutti i dati che saranno scritti. Inoltre, comparirà una colonna in cui sarà presente se la persona ha dato consenso o meno. Quindi, la costruzione del file Excel avviene in automatico a mano a mano che il destinatario riceve questi dati sotto forma di un invio mail.

Costruzione di un form su html: tag → (e ) elementi di intestazione:

id=contatti → form identificativo per contatti. method=”post” → metodo di raccolta. Action= “mailto: [email protected]” → quale sarà la mail a cui invierò tutto, ossia mail che raccoglierà questi dati. Non vogliamo che sia presente cifratura, ma vogliamo che il testo sia in chiaro, pertanto mettiamo → encty= “text/plain” Inoltre, indichiamo quali sono i campi che vogliamo nel form: nome, cognome e mail. Per indicare che a fianco a “nome” c'è una casella di testo in cui dovrei inserire l'informazione →...