SlideShare a Scribd company logo
DRIVE, BLOCS & WIKIS
i una mica d'HTML
Google Drive és un servei d'allotjament d'arxius introduït per
Google el 24 d'abril de 2012. A més a més, permet crear i editar
(reconeix molts formats) els teus propis documents. Posseeix tot un
paquet office:
Documents de Google
Fulls de càlcul de Google
Presentacions de Google
Dibuixos de Google
Formularis de Google
A més podem afegir aplicacions diverses (entre moltes...):
Pixrl (edició d'imatges)
Geogebra (matemàtiques dinàmiques)
HTML editer
PDF converter
GOOGLE DRIVE
Google Drive permet configurar: tant la forma de visualitzar els
documents com l'idioma. Et dóna informació de les últimes
modificacions i ofereix l'opció de gestionar les aplicacions.
El més interessant és que tot el que tenim penjat al nostre espai ho
podem compartir amb altres usuaris, directament enllaçant-los amb
els seu e-mail o convertint-lo en un enllaç que podem enviar.
GOOGLE DRIVE
Un bloc, també anomenat webblog o bitàcola, és un lloc web que
recopila cronològicament articles o textos d'un o més autors,
apareguent primer el més recent.
Un bloc està dissenyat per a què, com en un diari, cada article tingui
data de publicació, de tal forma que la persona que escriu (blocaire o
bloguista) i les que llegeixen poden seguir un camí de tot el que s'ha
publicat i editat.
En cada missatge o article d'un bloc els lectors poden escriure
comentaris (si l'autor ho permet) i aquest, al seu torn, donar-los
resposta. Cada bloc té el seu propi tema i n'hi ha de tipus personal,
econòmic, periodístic, tecnològic, educatiu, polític, etc.
Els més coneguts són:
BLOC O BITÀCOLES
Blogger
(Google)
Blogia
WordPress
Blocs - Xtec
Una wiki (del hawaià wikiwiki, «ràpid», és un lloc web col·laboratiu
que pot ser editat des del navegador pels usuaris. Els usuaris d'una
wiki poden d'aquesta manera crear, modificar, enllaçar i esborrar el
contingut d'una pàgina web, de forma interactiva, fàcil i ràpida. Una
de les wikis més conegudes és la Wikipèdia.
Per col·laborar amb una WIKI l'usuari s'ha de donar d'alta i després
crear seguint unes regles internes.
https://informatica4rts.wikispaces.com/
WIKIS
HTML (Hipertext Transfer Protocol) és un llenguatge de
programació d'etiquetatge d'hipertext. I està format per unes
etiquetes o marques que indiquen les diferents parts i el format d'un
document. És un llenguatge molt senzill, però a la vegada limitat, de
fet és va crear el XML (extensible markup languatge) per completar-
lo. Actualment, el XHTML (extensible Hypertext markup languatge)
els barreja tots dos i fa possible la comunicació entre mòbils i PDA.
Recordem que per visualitzar les pàgines en HTML, necessitem de
“browsers” o navegadors.
Existeixen també Editors que ens ajuden a fer els pàgines web, com
Dreamweaver o Frontpage, però amb un simple bloc de notes en
tenim més que suficient.
HTML
Les marques o etiquetes defineixen les diferents parts del
document. Així podem introduir “títol”, “tipus de lletra”, “color”, “inserir
imatge”, “posició”, “enllaç”,...
Les etiquetes estan formades pels símbols < /> entre els quals
s'escriuen les instruccions. La idea és que s'obren i es tanquen.
Estructura bàsica: Html, Head (capçalera), Body (cos del missatge)
<HTML>
<HEAD>
<TITLE>Títol de la pàgina</TITLE>
...
</HEAD>
<BODY>
<p>Aquí va el contingut de la pàgina</p>
</BODY>
</HTML>
HTML. Estructura bàsica
La capçalera o HEAD, aquí trobarem el títol de la nostra pàgina
web. Ha d’estar escrit correctament i en la llengua del document, ja
que habitualment apareix a la barra de títol de la finestra del
navegador i és una referència per als motors de cerca. A més, és
convenient que sigui igual que el títol del cos del document o que hi
tingui un lligam directe.
<HTML>
<HEAD>
<TITLE>La meva primera pàgina web</TITLE>
...
</HEAD>
<BODY>
Aquí va el contingut de la pàgina
</BODY>
</HTML>
HTML. Estructura bàsica
BODY és el cos del document on es troba el més important i on
s'inclouen la majoria d'etiquetes.
<HTML>
<HEAD>
<TITLE>La meva primera pàgina web</TITLE>
...
</HEAD>
<BODY bgcolor="#E6E6FA">
<p><b>Aquí va el contingut de la pàgina</b></p>
</BODY>
</HTML>
Etiquetes bàsiques:
Encapçalaments: <H1><H2>....<H6>
Paràgraf i Salt de línia: <P><BR>
Negreta: <B>
Cursiva: <i>
Subratllat: <U>
Línia horitzontal: <HR>
• Font: <Font>
• <Font Color=”#ffffff”; Font Size=”24”; Font align: “right”; font face= “Arial”></font>
HTML. Estructura bàsica
Etiquetes bàsiques:
Inserir un enllaç: <a href="http://www.google.com">
Inserir imatges: <IMG src=”path de la imatge”>
Inserir llistes: <ul> i <li>
Inserir taules: <tr> i <td>
És molt important tancar </> les etiquetes, si no no funcionaran.
Un cop tinguem ja tot el codi guardarem el fitxer com a “nom.htm”
Les CSS o fulles d'estil ens ajuden i simplifiquen la feina de fer
pàgines WEB ja que en una pàgina amb codi HTML es defineix tot
l'estil de la pàgina, i després es guarda com a .css i es crida des de
la nostra pàgina.
HTML. Estructura bàsica i CSS
La paleta Pantone és un sistema de control de color per a les arts
gràfiques.
Els colors van codificats de la següent manera: #FFFFFF (6
caràcters hexadecimals). Normalment, els editors d'imatges ens
diuen el codi dels colors que estem emprant.
HTML. Colors: Paleta pantone
L'administració i l'ordre dels arxius és fonamental perquè la pàgina
web funcioni correctament. La primera pàgina sempre s'anomenarà
index.htm. La resta d'arxius estaran tots en la mateixa carpeta, dins
de carpetes endreçades per la seva tipologia. Així les imatges, els
vídeos i la resta estaran degudament nomenats i indexats.
HTML. Com guardem les pàgines i la resta de fitxers

More Related Content

What's hot

Pàgines web amb HTML. Presentació Tema_9
Pàgines web amb HTML. Presentació Tema_9Pàgines web amb HTML. Presentació Tema_9
Pàgines web amb HTML. Presentació Tema_9
Iolanda Mallorques
 
Impress 3
Impress 3Impress 3
Impress 3
alteaferrando
 
Mozilla Firefox
Mozilla FirefoxMozilla Firefox
Mozilla Firefox
guest36f8d9
 
7.1 repte setè. publicar el document formats de sortida
7.1 repte setè. publicar el document   formats de sortida7.1 repte setè. publicar el document   formats de sortida
7.1 repte setè. publicar el document formats de sortidaAries Mars
 
Google documents
Google documentsGoogle documents
Google documents
La Borrassa rural lab
 
Impress3
Impress3Impress3
Impress3
helenamateu
 
AnàLisi Comparatiu
AnàLisi ComparatiuAnàLisi Comparatiu
AnàLisi Comparatiuguest690cc5
 
Com crear una botiga online Carlos tutuso
Com crear una botiga online Carlos tutusoCom crear una botiga online Carlos tutuso
Com crear una botiga online Carlos tutuso
Carlustutuso
 
Presentación google drive
Presentación google drivePresentación google drive
Presentación google drivealumnespdv
 
Com utilitzar slideshare
Com utilitzar slideshareCom utilitzar slideshare
Com utilitzar slidesharesantpauinterins
 

What's hot (13)

Pàgines web amb HTML. Presentació Tema_9
Pàgines web amb HTML. Presentació Tema_9Pàgines web amb HTML. Presentació Tema_9
Pàgines web amb HTML. Presentació Tema_9
 
Impress 3
Impress 3Impress 3
Impress 3
 
Mozilla Firefox
Mozilla FirefoxMozilla Firefox
Mozilla Firefox
 
7.1 repte setè. publicar el document formats de sortida
7.1 repte setè. publicar el document   formats de sortida7.1 repte setè. publicar el document   formats de sortida
7.1 repte setè. publicar el document formats de sortida
 
Google documents
Google documentsGoogle documents
Google documents
 
Impress3
Impress3Impress3
Impress3
 
AnàLisi Comparatiu
AnàLisi ComparatiuAnàLisi Comparatiu
AnàLisi Comparatiu
 
Quadre
QuadreQuadre
Quadre
 
Com crear una botiga online Carlos tutuso
Com crear una botiga online Carlos tutusoCom crear una botiga online Carlos tutuso
Com crear una botiga online Carlos tutuso
 
Presentació
PresentacióPresentació
Presentació
 
Google Docs
Google DocsGoogle Docs
Google Docs
 
Presentación google drive
Presentación google drivePresentación google drive
Presentación google drive
 
Com utilitzar slideshare
Com utilitzar slideshareCom utilitzar slideshare
Com utilitzar slideshare
 

Viewers also liked

Tema2infoxarxes 1516
Tema2infoxarxes 1516Tema2infoxarxes 1516
Tema2infoxarxes 1516
adieste
 
T5 edi img_1516
T5 edi img_1516T5 edi img_1516
T5 edi img_1516
adieste
 
Tema 1 info so_4a_eso_binari1516
Tema 1 info so_4a_eso_binari1516Tema 1 info so_4a_eso_binari1516
Tema 1 info so_4a_eso_binari1516
adieste
 
audioTema9 edicio audio
audioTema9  edicio audioaudioTema9  edicio audio
audioTema9 edicio audio
Txeli
 
T5 edi img_1516
T5 edi img_1516T5 edi img_1516
T5 edi img_1516
lourdescostaquera
 
Tema 4 drive blocs i wikis1516
Tema 4 drive blocs i wikis1516Tema 4 drive blocs i wikis1516
Tema 4 drive blocs i wikis1516
lourdescostaquera
 
Tema 1 info so_4a_eso_binari1516
Tema 1 info so_4a_eso_binari1516Tema 1 info so_4a_eso_binari1516
Tema 1 info so_4a_eso_binari1516
lourdescostaquera
 
Las mejores herramientas web 2
Las mejores herramientas web 2Las mejores herramientas web 2
Las mejores herramientas web 2
BVILLAV
 
Claves para poder interpretar un texto
Claves para poder interpretar un textoClaves para poder interpretar un texto
Claves para poder interpretar un texto
Diazlachos
 
Huella ecológica
Huella ecológicaHuella ecológica
Huella ecológica
Macarena Puig Aceituno
 
La contaminacion ambiental
La contaminacion ambientalLa contaminacion ambiental
La contaminacion ambiental
mayramoval
 
Riesgos laborales
Riesgos laboralesRiesgos laborales
Riesgos laborales
dalenica89
 
Comando D.O.S.
Comando D.O.S.Comando D.O.S.
Comando D.O.S.
Hernan Delgado Murcia
 
El único punto luminoso se produjo en la red social de adquisición whats app ...
El único punto luminoso se produjo en la red social de adquisición whats app ...El único punto luminoso se produjo en la red social de adquisición whats app ...
El único punto luminoso se produjo en la red social de adquisición whats app ...
Descargar Facebook
 
Reglas netiquette grupo esmeralda
Reglas netiquette   grupo esmeraldaReglas netiquette   grupo esmeralda
Reglas netiquette grupo esmeralda
Gustavo Vivas
 
Las paginas web
Las paginas webLas paginas web
Las paginas web
luciafdez5
 
Presentación2
Presentación2Presentación2
Presentación2
Betthiana Denkoff
 
DISCAPACIDAD DESDE LAS SALAS DE REDACCIÓN
DISCAPACIDAD DESDE LAS SALAS DE REDACCIÓNDISCAPACIDAD DESDE LAS SALAS DE REDACCIÓN
DISCAPACIDAD DESDE LAS SALAS DE REDACCIÓN
SAGASERICK
 
#11 ms dos
#11 ms dos#11 ms dos
#11 ms dos
Erika Nallely
 
Opinión pública
Opinión públicaOpinión pública
Opinión pública
Cathyciviero
 

Viewers also liked (20)

Tema2infoxarxes 1516
Tema2infoxarxes 1516Tema2infoxarxes 1516
Tema2infoxarxes 1516
 
T5 edi img_1516
T5 edi img_1516T5 edi img_1516
T5 edi img_1516
 
Tema 1 info so_4a_eso_binari1516
Tema 1 info so_4a_eso_binari1516Tema 1 info so_4a_eso_binari1516
Tema 1 info so_4a_eso_binari1516
 
audioTema9 edicio audio
audioTema9  edicio audioaudioTema9  edicio audio
audioTema9 edicio audio
 
T5 edi img_1516
T5 edi img_1516T5 edi img_1516
T5 edi img_1516
 
Tema 4 drive blocs i wikis1516
Tema 4 drive blocs i wikis1516Tema 4 drive blocs i wikis1516
Tema 4 drive blocs i wikis1516
 
Tema 1 info so_4a_eso_binari1516
Tema 1 info so_4a_eso_binari1516Tema 1 info so_4a_eso_binari1516
Tema 1 info so_4a_eso_binari1516
 
Las mejores herramientas web 2
Las mejores herramientas web 2Las mejores herramientas web 2
Las mejores herramientas web 2
 
Claves para poder interpretar un texto
Claves para poder interpretar un textoClaves para poder interpretar un texto
Claves para poder interpretar un texto
 
Huella ecológica
Huella ecológicaHuella ecológica
Huella ecológica
 
La contaminacion ambiental
La contaminacion ambientalLa contaminacion ambiental
La contaminacion ambiental
 
Riesgos laborales
Riesgos laboralesRiesgos laborales
Riesgos laborales
 
Comando D.O.S.
Comando D.O.S.Comando D.O.S.
Comando D.O.S.
 
El único punto luminoso se produjo en la red social de adquisición whats app ...
El único punto luminoso se produjo en la red social de adquisición whats app ...El único punto luminoso se produjo en la red social de adquisición whats app ...
El único punto luminoso se produjo en la red social de adquisición whats app ...
 
Reglas netiquette grupo esmeralda
Reglas netiquette   grupo esmeraldaReglas netiquette   grupo esmeralda
Reglas netiquette grupo esmeralda
 
Las paginas web
Las paginas webLas paginas web
Las paginas web
 
Presentación2
Presentación2Presentación2
Presentación2
 
DISCAPACIDAD DESDE LAS SALAS DE REDACCIÓN
DISCAPACIDAD DESDE LAS SALAS DE REDACCIÓNDISCAPACIDAD DESDE LAS SALAS DE REDACCIÓN
DISCAPACIDAD DESDE LAS SALAS DE REDACCIÓN
 
#11 ms dos
#11 ms dos#11 ms dos
#11 ms dos
 
Opinión pública
Opinión públicaOpinión pública
Opinión pública
 

Similar to Tema 4 drive blocs i wikis1516

4. Introducció a Joomla
4. Introducció a Joomla4. Introducció a Joomla
4. Introducció a Joomlamnicolau
 
Eines per disposar d'un web o un blog
Eines per disposar d'un web o un blogEines per disposar d'un web o un blog
Eines per disposar d'un web o un blogsantfeliuonline
 
Tutorial La Meva XTEC (2)
Tutorial La Meva XTEC (2)Tutorial La Meva XTEC (2)
Tutorial La Meva XTEC (2)
Marc Bellapart
 
Html, Xtml & Php
Html, Xtml & PhpHtml, Xtml & Php
Html, Xtml & Php
Kenneth Algarra Santos
 
Vull fer una web: per on començo?
Vull fer una web: per on començo?Vull fer una web: per on començo?
Vull fer una web: per on començo?
Ciberteka
 
Ies Estela Iberica
Ies Estela IbericaIes Estela Iberica
Ies Estela Ibericamguilla4
 
Index Blocs
Index BlocsIndex Blocs
Index Blocsstroobo
 
Practiquem amb eines ofimàtiques gratuïtes per la gestió bàsica del negoci
Practiquem amb eines ofimàtiques gratuïtes per la gestió bàsica del negociPractiquem amb eines ofimàtiques gratuïtes per la gestió bàsica del negoci
Practiquem amb eines ofimàtiques gratuïtes per la gestió bàsica del negociCiberteka
 
Llenguatges i Estàndards Web - PAC 1 - Multimedia (UOC) - Paquita Ribas
Llenguatges i Estàndards Web - PAC 1 - Multimedia (UOC) - Paquita RibasLlenguatges i Estàndards Web - PAC 1 - Multimedia (UOC) - Paquita Ribas
Llenguatges i Estàndards Web - PAC 1 - Multimedia (UOC) - Paquita Ribas
Paquita Ribas
 
Donar-se d'alta a Google docs
Donar-se d'alta a Google docsDonar-se d'alta a Google docs
Donar-se d'alta a Google docs
CT 1
 
Llenguatges de programació web
Llenguatges de programació webLlenguatges de programació web
Llenguatges de programació web
Toni Amengual
 
Curs Wordpress Ajuntament Platja d'Aro
Curs Wordpress Ajuntament Platja d'AroCurs Wordpress Ajuntament Platja d'Aro
Curs Wordpress Ajuntament Platja d'Aro
Gerard Encabo
 
Presentació de HTML 5
Presentació de HTML 5Presentació de HTML 5
Presentació de HTML 5
Roger Casadejús Pérez
 
Introducció al wiki - Antoni de la Torre
Introducció al wiki - Antoni de la TorreIntroducció al wiki - Antoni de la Torre
Introducció al wiki - Antoni de la TorreAntoni de la Torre
 
Firefox
FirefoxFirefox

Similar to Tema 4 drive blocs i wikis1516 (20)

UD4 Web
UD4 WebUD4 Web
UD4 Web
 
Html 5
Html 5Html 5
Html 5
 
4. Introducció a Joomla
4. Introducció a Joomla4. Introducció a Joomla
4. Introducció a Joomla
 
Eines per disposar d'un web o un blog
Eines per disposar d'un web o un blogEines per disposar d'un web o un blog
Eines per disposar d'un web o un blog
 
Tutorial La Meva XTEC (2)
Tutorial La Meva XTEC (2)Tutorial La Meva XTEC (2)
Tutorial La Meva XTEC (2)
 
Html
HtmlHtml
Html
 
Tac
TacTac
Tac
 
Html, Xtml & Php
Html, Xtml & PhpHtml, Xtml & Php
Html, Xtml & Php
 
Vull fer una web: per on començo?
Vull fer una web: per on començo?Vull fer una web: per on començo?
Vull fer una web: per on començo?
 
Ies Estela Iberica
Ies Estela IbericaIes Estela Iberica
Ies Estela Iberica
 
Index Blocs
Index BlocsIndex Blocs
Index Blocs
 
Practiquem amb eines ofimàtiques gratuïtes per la gestió bàsica del negoci
Practiquem amb eines ofimàtiques gratuïtes per la gestió bàsica del negociPractiquem amb eines ofimàtiques gratuïtes per la gestió bàsica del negoci
Practiquem amb eines ofimàtiques gratuïtes per la gestió bàsica del negoci
 
Llenguatges i Estàndards Web - PAC 1 - Multimedia (UOC) - Paquita Ribas
Llenguatges i Estàndards Web - PAC 1 - Multimedia (UOC) - Paquita RibasLlenguatges i Estàndards Web - PAC 1 - Multimedia (UOC) - Paquita Ribas
Llenguatges i Estàndards Web - PAC 1 - Multimedia (UOC) - Paquita Ribas
 
Donar-se d'alta a Google docs
Donar-se d'alta a Google docsDonar-se d'alta a Google docs
Donar-se d'alta a Google docs
 
Llenguatges de programació web
Llenguatges de programació webLlenguatges de programació web
Llenguatges de programació web
 
Curs Wordpress Ajuntament Platja d'Aro
Curs Wordpress Ajuntament Platja d'AroCurs Wordpress Ajuntament Platja d'Aro
Curs Wordpress Ajuntament Platja d'Aro
 
Presentació de HTML 5
Presentació de HTML 5Presentació de HTML 5
Presentació de HTML 5
 
Introducció al wiki - Antoni de la Torre
Introducció al wiki - Antoni de la TorreIntroducció al wiki - Antoni de la Torre
Introducció al wiki - Antoni de la Torre
 
Power point slideshare
Power point slidesharePower point slideshare
Power point slideshare
 
Firefox
FirefoxFirefox
Firefox
 

Recently uploaded

INFORME_OFERTA_OME_INFORME_OFERTA (1).pdf
INFORME_OFERTA_OME_INFORME_OFERTA (1).pdfINFORME_OFERTA_OME_INFORME_OFERTA (1).pdf
INFORME_OFERTA_OME_INFORME_OFERTA (1).pdf
Ernest Lluch
 
Oferta definitiva de places Curs 2024-25
Oferta definitiva de places Curs 2024-25Oferta definitiva de places Curs 2024-25
Oferta definitiva de places Curs 2024-25
SuperAdmin9
 
Viceverba_appdelmes_0624_joc per aprendre verbs llatins
Viceverba_appdelmes_0624_joc per aprendre verbs llatinsViceverba_appdelmes_0624_joc per aprendre verbs llatins
Viceverba_appdelmes_0624_joc per aprendre verbs llatins
Daniel Fernández
 
Implica't+ amb la Carta de la Terra i l'Agenda 2030
Implica't+ amb la Carta de la Terra i l'Agenda 2030Implica't+ amb la Carta de la Terra i l'Agenda 2030
Implica't+ amb la Carta de la Terra i l'Agenda 2030
LLuelles Perera Maria del Mar
 
INFORME_LLISTA_ESPERA_OME_LLISTA_ESPERA.pdf
INFORME_LLISTA_ESPERA_OME_LLISTA_ESPERA.pdfINFORME_LLISTA_ESPERA_OME_LLISTA_ESPERA.pdf
INFORME_LLISTA_ESPERA_OME_LLISTA_ESPERA.pdf
Ernest Lluch
 
INFORME_PREINSCRITES_OME_INFORME_PREINSCRITES_OME.pdf
INFORME_PREINSCRITES_OME_INFORME_PREINSCRITES_OME.pdfINFORME_PREINSCRITES_OME_INFORME_PREINSCRITES_OME.pdf
INFORME_PREINSCRITES_OME_INFORME_PREINSCRITES_OME.pdf
Ernest Lluch
 
Exhibició pública - Programa de mà - 2324 3T
Exhibició pública - Programa de mà - 2324 3TExhibició pública - Programa de mà - 2324 3T
Exhibició pública - Programa de mà - 2324 3T
Institut-Escola Les Vinyes
 

Recently uploaded (7)

INFORME_OFERTA_OME_INFORME_OFERTA (1).pdf
INFORME_OFERTA_OME_INFORME_OFERTA (1).pdfINFORME_OFERTA_OME_INFORME_OFERTA (1).pdf
INFORME_OFERTA_OME_INFORME_OFERTA (1).pdf
 
Oferta definitiva de places Curs 2024-25
Oferta definitiva de places Curs 2024-25Oferta definitiva de places Curs 2024-25
Oferta definitiva de places Curs 2024-25
 
Viceverba_appdelmes_0624_joc per aprendre verbs llatins
Viceverba_appdelmes_0624_joc per aprendre verbs llatinsViceverba_appdelmes_0624_joc per aprendre verbs llatins
Viceverba_appdelmes_0624_joc per aprendre verbs llatins
 
Implica't+ amb la Carta de la Terra i l'Agenda 2030
Implica't+ amb la Carta de la Terra i l'Agenda 2030Implica't+ amb la Carta de la Terra i l'Agenda 2030
Implica't+ amb la Carta de la Terra i l'Agenda 2030
 
INFORME_LLISTA_ESPERA_OME_LLISTA_ESPERA.pdf
INFORME_LLISTA_ESPERA_OME_LLISTA_ESPERA.pdfINFORME_LLISTA_ESPERA_OME_LLISTA_ESPERA.pdf
INFORME_LLISTA_ESPERA_OME_LLISTA_ESPERA.pdf
 
INFORME_PREINSCRITES_OME_INFORME_PREINSCRITES_OME.pdf
INFORME_PREINSCRITES_OME_INFORME_PREINSCRITES_OME.pdfINFORME_PREINSCRITES_OME_INFORME_PREINSCRITES_OME.pdf
INFORME_PREINSCRITES_OME_INFORME_PREINSCRITES_OME.pdf
 
Exhibició pública - Programa de mà - 2324 3T
Exhibició pública - Programa de mà - 2324 3TExhibició pública - Programa de mà - 2324 3T
Exhibició pública - Programa de mà - 2324 3T
 

Tema 4 drive blocs i wikis1516

  • 1. DRIVE, BLOCS & WIKIS i una mica d'HTML
  • 2. Google Drive és un servei d'allotjament d'arxius introduït per Google el 24 d'abril de 2012. A més a més, permet crear i editar (reconeix molts formats) els teus propis documents. Posseeix tot un paquet office: Documents de Google Fulls de càlcul de Google Presentacions de Google Dibuixos de Google Formularis de Google A més podem afegir aplicacions diverses (entre moltes...): Pixrl (edició d'imatges) Geogebra (matemàtiques dinàmiques) HTML editer PDF converter GOOGLE DRIVE
  • 3. Google Drive permet configurar: tant la forma de visualitzar els documents com l'idioma. Et dóna informació de les últimes modificacions i ofereix l'opció de gestionar les aplicacions. El més interessant és que tot el que tenim penjat al nostre espai ho podem compartir amb altres usuaris, directament enllaçant-los amb els seu e-mail o convertint-lo en un enllaç que podem enviar. GOOGLE DRIVE
  • 4. Un bloc, també anomenat webblog o bitàcola, és un lloc web que recopila cronològicament articles o textos d'un o més autors, apareguent primer el més recent. Un bloc està dissenyat per a què, com en un diari, cada article tingui data de publicació, de tal forma que la persona que escriu (blocaire o bloguista) i les que llegeixen poden seguir un camí de tot el que s'ha publicat i editat. En cada missatge o article d'un bloc els lectors poden escriure comentaris (si l'autor ho permet) i aquest, al seu torn, donar-los resposta. Cada bloc té el seu propi tema i n'hi ha de tipus personal, econòmic, periodístic, tecnològic, educatiu, polític, etc. Els més coneguts són: BLOC O BITÀCOLES Blogger (Google) Blogia WordPress Blocs - Xtec
  • 5. Una wiki (del hawaià wikiwiki, «ràpid», és un lloc web col·laboratiu que pot ser editat des del navegador pels usuaris. Els usuaris d'una wiki poden d'aquesta manera crear, modificar, enllaçar i esborrar el contingut d'una pàgina web, de forma interactiva, fàcil i ràpida. Una de les wikis més conegudes és la Wikipèdia. Per col·laborar amb una WIKI l'usuari s'ha de donar d'alta i després crear seguint unes regles internes. https://informatica4rts.wikispaces.com/ WIKIS
  • 6. HTML (Hipertext Transfer Protocol) és un llenguatge de programació d'etiquetatge d'hipertext. I està format per unes etiquetes o marques que indiquen les diferents parts i el format d'un document. És un llenguatge molt senzill, però a la vegada limitat, de fet és va crear el XML (extensible markup languatge) per completar- lo. Actualment, el XHTML (extensible Hypertext markup languatge) els barreja tots dos i fa possible la comunicació entre mòbils i PDA. Recordem que per visualitzar les pàgines en HTML, necessitem de “browsers” o navegadors. Existeixen també Editors que ens ajuden a fer els pàgines web, com Dreamweaver o Frontpage, però amb un simple bloc de notes en tenim més que suficient. HTML
  • 7. Les marques o etiquetes defineixen les diferents parts del document. Així podem introduir “títol”, “tipus de lletra”, “color”, “inserir imatge”, “posició”, “enllaç”,... Les etiquetes estan formades pels símbols < /> entre els quals s'escriuen les instruccions. La idea és que s'obren i es tanquen. Estructura bàsica: Html, Head (capçalera), Body (cos del missatge) <HTML> <HEAD> <TITLE>Títol de la pàgina</TITLE> ... </HEAD> <BODY> <p>Aquí va el contingut de la pàgina</p> </BODY> </HTML> HTML. Estructura bàsica
  • 8. La capçalera o HEAD, aquí trobarem el títol de la nostra pàgina web. Ha d’estar escrit correctament i en la llengua del document, ja que habitualment apareix a la barra de títol de la finestra del navegador i és una referència per als motors de cerca. A més, és convenient que sigui igual que el títol del cos del document o que hi tingui un lligam directe. <HTML> <HEAD> <TITLE>La meva primera pàgina web</TITLE> ... </HEAD> <BODY> Aquí va el contingut de la pàgina </BODY> </HTML> HTML. Estructura bàsica
  • 9. BODY és el cos del document on es troba el més important i on s'inclouen la majoria d'etiquetes. <HTML> <HEAD> <TITLE>La meva primera pàgina web</TITLE> ... </HEAD> <BODY bgcolor="#E6E6FA"> <p><b>Aquí va el contingut de la pàgina</b></p> </BODY> </HTML> Etiquetes bàsiques: Encapçalaments: <H1><H2>....<H6> Paràgraf i Salt de línia: <P><BR> Negreta: <B> Cursiva: <i> Subratllat: <U> Línia horitzontal: <HR> • Font: <Font> • <Font Color=”#ffffff”; Font Size=”24”; Font align: “right”; font face= “Arial”></font> HTML. Estructura bàsica
  • 10. Etiquetes bàsiques: Inserir un enllaç: <a href="http://www.google.com"> Inserir imatges: <IMG src=”path de la imatge”> Inserir llistes: <ul> i <li> Inserir taules: <tr> i <td> És molt important tancar </> les etiquetes, si no no funcionaran. Un cop tinguem ja tot el codi guardarem el fitxer com a “nom.htm” Les CSS o fulles d'estil ens ajuden i simplifiquen la feina de fer pàgines WEB ja que en una pàgina amb codi HTML es defineix tot l'estil de la pàgina, i després es guarda com a .css i es crida des de la nostra pàgina. HTML. Estructura bàsica i CSS
  • 11. La paleta Pantone és un sistema de control de color per a les arts gràfiques. Els colors van codificats de la següent manera: #FFFFFF (6 caràcters hexadecimals). Normalment, els editors d'imatges ens diuen el codi dels colors que estem emprant. HTML. Colors: Paleta pantone
  • 12. L'administració i l'ordre dels arxius és fonamental perquè la pàgina web funcioni correctament. La primera pàgina sempre s'anomenarà index.htm. La resta d'arxius estaran tots en la mateixa carpeta, dins de carpetes endreçades per la seva tipologia. Així les imatges, els vídeos i la resta estaran degudament nomenats i indexats. HTML. Com guardem les pàgines i la resta de fitxers