Scarica HTML tutorial corso di abilità informatiche e più Appunti in PDF di Fondamenti di informatica solo su Docsity!
- html entrato nel campo dell’editoria. si costruiscono le pagine web e poi con una marcatura XLM si marcano i testi per gli archivi. html linguaggio con cui la pagina è scritta. creazione di una pagina web per un catalogo.
- DOCX formato precedente di word.
- TXT formato di puro testo, molto vecchio. formato molto compatibile, non ha formattazione
quindi non ha margini ecc.. Liber liber.it —> biblioteca digitale che consente di scaricare libri ed audiolibri di autori che non hanno più il copyright control+f … il formato ODT è un formato che troviamo su libreoffice, openoffice. è un formato aperto, con buona compatibilità con word. altro tipo di formato su liberliber è audiolibro che fino a pochi anni fa era dedicato solo ai non vedenti. ——- per strutturare il catalogo c’è bisogno d un editor, un programma che consente di creare un linguaggio di marcatura ( nel nostro caso brackets). [ brackets segna in rosso gli errori. prima di iniziare a lavorare va salvato un file vuoto come index.html vanno messi i tag. <… poi chiusi > tra il primo tag e quello di chiusura bisogna premere invio. per far scendere il tag di chiusura. va poi inserito testa (head) e corpo ( body) con gli stessi modi di prima utilizzando però per spaziare il tasto con la freccia a lato —>| … poi inseriamo un titolo ovvero un metadato poi dentro il corpo vanno messi i contenuti che l’utente vedrà. ( ciò che c’è dentro head l’utente non lo vede, lo vede solo il motore di ricerca). inserito h1 come titolo di primo livello. inserito h2 come sottotitolo
poi inseriamo p per il paragrafo. poi si va su Lorem ipsum.io e si copia il testo che va incollato nel paragrafo (p). man mano con control + s salva i file poi salva il file sostituendo quello precedente vuoto. mentre il file è aperto clicca sul nuovo file e ti apre una pagina web, il tuo sito web. per creare caratteri speciali poiché spesso il web non li legge es. gli accenti creiamo sopra la head, poi scrivo h2 download poi + il testo ( es. scarica il Pdf del Fermo e Lucia )
adesso salvando nuovamente e cliccando sull’icona sul desktop si potrà visualizzare la pagina web col file scaricabile. ———————
—————————-recupera lezioni precedenti. ora lezione 9 parte 1 creiamo ) che andrà inserita prima e dopo il titolo del nostro elenco, e dopo e prima di un id=“”> qui daremo un nome univoco, un attributo della section. L’attributo id ha come caratteristica quella di essere utilizzabile con lo stesso valore una sola volta per pagina. ad es. scriviamo uno come nome id.
Ora non ci resta che distanziare queste voci che adesso sono in linea. Torno su css e sempre nella stringa di comando : nav ul li { } inserirò una nuova proprietà sotto display. Scrivo che queste scritte hanno un margine (margin) —> qui andremo a scrivere quanto lo vogliamo distante in verticale e in orizzontale aggiungendo alla fine del numero scritto px. ad es. qui scriviamo N.B. quando nella riga mettiamo due valori, il primo valore lavora in alto e in basso , mentre il secondo a destra e a sinistra quindi distanziando le voci. Per migliorare l’estetica torno su css. Proviamo a togliere l’underline nella parte alta della pagina, in quello che costituisce per noi una sorta di menù della pagina. Non volevo togliere la linea su tutto il testo ma solo in quel settore vado su css e creo una stringa più precisa. Dico al programma di andare su nav, ul, li, a. Praticamente gli andiamo a chiedere di lavorare sulle ancore che si trovano all’interno di li che sta sotto ul che sta in nav. Apriamo le parentesi e andiamo a scrivere un colore (se vogliamo) e soprattutto text-decoration : qui scriviamo none. —-> si intende la colorazione dell’underline. —> facoltativo —> importante per il colore dell’underline. —> la sottolineatura è sparita. Per rendere il tutto più carino sempre in css scrivo che le ancore devono avere un bordo (border) spesso tot (valore a scelta + px) e scriviamo solid ( perché altrimenti il bordo non si vedrebbe, sarebbe trasparente) e poi mettiamo un colore per questo bordo. —> Questo è il risultato.
Se voglio dare più respiro al testo all’interno di questo riquadro basta scrivere sempre su css, padding e poi inserisco il numero di px che voglio lo distanzino dal testo. —> Questo è il risultato. Il margine è più distante dal testo rispetto a prima. N.B. padding lavora all’interno del margine; margin invece lavora esternamente. ———————————————————————————————————————————- Adesso voglio creare un altro ‘bottoncino’ con la scritta biografia da aggiungere a quelli sopraelencati e voglio collegarlo con la biografia che ho scritto e inserito nella pagina web. Vado quindi su html e apro una nuova section da inserire prima del blocco con le immagini e i link delle rime di Michelangelo. Quando scrivo section aggiungo id=“” (per dare un titolo al paragrafo) e poi chiudo con >. All’intento del campo che si viene a creare tra il section di apertura e chiusura inserisco h2 e dò un titolo. poi inserisco il testo che voglio inserire ( in questo caso il testo della biografia che sto andando a creare—-> qui prendo la biografia presente su liberliber.it e prendo anche i crediti del testo per questioni di correttezza di copyright). Sotto inserisco il testo. Per mantenere le spaziature che c’erano nella biografia e per non far si che si crei un blocco unico di testo dovrei scrivere all’inizio e alla fine di ogni paragrafetto p<, p>. Essendo piuttosto lunga come operazione utilizzo un sito che si chiama word2cleanhtml.com. Qui inserisco nel campo di testo il testo che ho scelto di inserire su html; quando ciccherò su ‘converti in html’ il programma lo rielaborerà in modalità html. Poi seleziono tutto il testo rielaborato, lo copio e lo vado a sostituire a quello che avevo già inserito in html di brackets.
Cambio ora il colore del testo. Ora vorrei rendere maiuscole tutte le voci del menù, dove ci sono questi riquadri. Quindi vado su css e sotto padding scrivo text-transform, (per trasformare il testo) e scrivo uppercase per far diventare il testo maiuscolo. Cambiamo il colore dell’ancora, quel colore che compare quando col cursore ‘tocchiamo’ la scritta; per intenderci questo —> Per cambiarla scrivo un nuovo comando, scrivo sempre in css , nav, ul, li, a aggiungo :hover { } e all’interno delle parentesi graffe scrivo color e andrò a inserire il colore che voglio per sostituire quell’arancione. risultato ora è questo —> Per enfatizzare il colore di visualizzazione dell’ancora decido di dare un colore di background quando ci vado sopra col cursore quindi sempre in css, sempre nel punto già menzionato, sotto color vado a scrivere background: e dò un # colore. —> per dare più contrasto durante la visualizzazione. Volendo dare ora un riquadro alla sezione dei download a fine pagina aggiungo delle section all’inizio e alla fine del punto che voglio includervi. Ora voglio modificare anche qui il colore dell’ancora visualizzato quindi vado su css, vado su hover { sotto color: dove c’era il nostro colore e lo vado a sostituire.
—> Volendo gli aggiungo anche un background. Per dare a questi download un effetto ‘bottone’ vado a lavorare sull’ancora normale, quella generica. Quindi dico che voglio che tutte le ancore del mio sito abbiamo un border di un certo spessore e colore, e che abbiamo un padding, un’imbottitura interna di tot pixel. Questo è il risultato —-> (avendo lavorato su tutte le ancore saranno tutte fatte allo stesso modo, non solo all’interno dell’area download. Dato che qui si viene a creare una —> sovrapposizione , volendo cambiare anche la disposizione di questi download, scrivo su html e nella section dei download evito di dare una seconda
