Scarica modulo 1 html abilità informatiche e più Appunti in PDF di Elementi di Informatica solo su Docsity!
BENVENUTI NEL WEB
WEB network di computer collegati tra loro che possiedono siti web SERVER quando un pc è collegato ad un sito web ed emette un sito web Dal 2014 oltre 1 miliardo di siti Inizialmente usato per condividere ricerche, ora viene usato x tutto. 3 Linguaggi x il sito:
- HTML (per elaborare il contenuto del sito)
- CSS (per dargli un certo aspetto)
- JAVASCRIPT (per renderlo interattivo) BROSWERapplicazioni come Firefox, chrome, explorer… CLIENTS sono computer, tablet, telefoni ecc…
1. NOZIONI DI BASE DI HTML Ogni scheletro di una pagina web comincia con la scritta **** ciò segnala al broswer che la pagina è scritta in un html moderno *Linguaggio di tipo mark-up è basato quindi tutto sui tag. TAG < > **** primo tag di ogni pagina, deve contenere tutti i tag che costituiscono la pagina mentre quello finale è **** Sotto questo tag si trova sempre **** il quale contiene i tag attraverso i quali il broswer riesce a creare la pagina ma non contiene niente di visibile x l’utente. **** Per chiudere con head Segue poi **** che fornisce al broswer info su come creare la pagina (Utf- 8 x caratteri comuni come lingua inglese) **** NOME DEL TITOLO **** per il titolo della pagina **** per tutto ciò che voglio scrivere
**** NOME DEL TITOLO **** Per inserire il titolo + importante ** All’interno del corpo possiamo riportare il titolo o più titoli **Ci sono 6 tag per i titoli, **da fino ad **. TESTO
Per inserire un paragrafo **in html bisogna segnalare esplicitamente spazi e a capo
(senza un tag conclusivo) Il tag di chiusura viene sempre dopo il contenuto del tag - è il modo per dire al browser che vuoi che il tag finisca. Il contenuto di un tag HTML è ciò che sta tra il tag di apertura e il tag di chiusura - questo è ciò che intendiamo quando diciamo "dentro" un tag. Il contenuto di un tag può essere testo normale o un mix di altri tag.
DOVE DOVREBBERO STARE I TUOI TAG? Qualsiasi contenuto visibile sulla tua pagina web deve stare tra il tag di apertura e il tag di chiusura, come nello screenshot qui sotto: I tag **** e
sono i contenuti del tag **** , quindi diciamo che stanno "
dentro " al tag ****. In effetti, questi tag
devono stare dentro il tag ****. **Per segnalare dove mettere l’enfasi e mettere
in corsivo la parola ****
PAROLA **** **Per mettere
in grassetto
TESTO ## PER RIDIMENSIONARE L’IMMAGINE:
LARGHEZZA
WIDTH = “NUMERO”
ALTEZZA
HEIGHT = “NUMERO”
2. CSS
(Cascading Style Sheets) = FOGLI DI STILE Modo di definire gli stili del nostro sito IL COLORE *del testo:
Tutto ciò che è inserito qui è css. Al suo interno useremo una regola di stile la quale ha un selezionatore che comunica al broswer la parte della pagina web di cui va modificato lo stile. Contiene anche delle dichiarazioni che comunicano al broswer come intervenire sullo stile di tale parte. h2 {color: green;} x altri colori h2 {color: rgb ();} *dello sfondo: body {background-color: rgb ();}
SUGGERIMENTO RAPIDO:
SELEZIONE IN BASE AL NOME DEL TAG
Per dire alla nostra regola CSS a quali elementi HTML cambiare lo stile usiamo i selettori. Ci sono moltissimi tipi di selettori che scopriremo più avanti, ma qui vogliamo ripassare quello che abbiamo visto nella spiegazione interattiva: il selettore di elemento. l selettore di elemento seleziona gli elementi HTML in base al nome del tag. Ciascun elemento HTML—,
, , —e qualunque altro elemento HTML può essere selezionato con CSS usando il nome del tag senza le parentesi ad angolo (< e >). Per esempio, puoi selezionare tutti i tag
della tua pagina web usando il selettore di elemento p. Ecco una regola CSS che cambia il colore di ogni paragrafo della pagina web: p { color: rgb(255, 0, 0); } *selezione solo di alcune precise parti da personalizzare: SELEZIONE PER IDENTITA’ ID= “…” Tra le virgole non ci vanno spazi ma solo – o _ Poi si va nello spazio tra i tag
URL= indirizzo url assoluto url relativo inizia con una barra
/ , ciò vuol dire che si rimane nel dominio corrente ma cercando un percorso diverso.
+ Target= “_blank” x dire al broswer di aprire il link in una nuova finestra LINK INTERNI CON IDENTITA’:
testo I link collegano due pagine differenti ma possono collegare due parti anche della stessa pagina. Bisogna aggiungere un attributo id al tag Si scorre fino al punto dove si vuole agganciare il link e si aggiunge
id= “…” Per collegare due parti bisogna inserire una identità alla parte che vuole essere collegata.
Dove si vuole creare il link si aggiunge “#...” Le identità devono essere uniche!!!
CREAZIONE DI TABELLE:
** ** = tabella **** = intestazione di ciascuna colonna **** = x inserire una riga nella tabella **** =x una singola cella nella tabella **** =x inserire alcuni dati **** =tabular data Tutti i tag dentro sono quelli che stanno in cima alla tabella mentre i tag body è tutto quello che sta sotto. PER CREARE COMMENTI:
I browser ignorano completamente i commenti.
X METTERE LE PAROLE IN GRASSETTO:
font-weight: bold; X METTERE LE PAROLE IN CORSIVO: font-style: italic; per riassumere tutte le proprietà in un’unica riga: (Questa proprietà e chiamata short hand) X CAMBIARE AMPIEZZA DELL’INTERLINEA: line-height: 11px o 11em; X ALLINEARE AL CENTRO IL TESTO: text-align: center X SOTTOLINEARE: text-decoration: underline;
X TOGLIERE LA SOTTOLINEATURA AI LINK:
text-decoration:none; EREDITARIETÀ alcune proprietà sono ereditabili cioè si trasmettono ai tag “figli” sottostanti. Font-family, color…= proprietà ereditate. Solo inserendola nel tag body verrà scelta per i tag “figli”. Questo succede finché non si inserisce una regola che cambia il meccanismo come ad esempio, inserendo una proprietà che cambia gli h2. Alcune proprietà ereditabili sono: font-family, font-size, font-style, font-height, font-align.
5. LAYOUT DELLA PAGINA I CSS sono utilizzabili anche per cambiare i layout della pagina. Ma quali solo gli elementi che si cambiano all’interno della pagina? A volte sono singoli elementi come un paragrafo o un titolo talvolta sono gruppi di elementi come una selezione di un testo o un titolo con alcuni paragrafi. Per modificarli insieme servono due tag html. Il primo da usare per la selezione di un testo è ** ** che va scritto prima e dopo la parola selezionata.
BORDO:
Per aggiungere un bordo basta usare la funzione border: 1px solid rgb(red); (spessore stile e colore) border-top: per avere un bordo in alto RIEMPIMENTO: Il riempimento crea spazio e per aggiungerlo basta usare la funzione: padding:15px; POSIZIONE CSS Le posizioni degli elementi sono definiti di default di solito. Il posizionamento relativo sposta gli elementi in base alle misure indicate. position: relative; top:20px; left:10px; Con il posizionamento assoluto un elemento può essere messo ovunque sullo schermo position:absolute; top:20px; left:10px; La proprietà css z-index definisce il modo in cui distribuire gli elementi uno sopra all’altro. z-index:1; z-index:2; z-index:3; Il posizionamento fisso fa sì che le cose sembrino non muoversi position:fixed; CSS ELEMENTI flOAT La proprietà float fa fluttuare gli elementi dentro e intorno ad altri elementi float:left; e poi va attribuita una grandezza. La proprietà clear si usa per fare in modo che gli elementi fluttuanti non si restringano clear:both; per tutti gli elementi clear:left; per gli elementi a destra clear:right; per gli elementi a sinistra
