¡Descarga Apunts pràctics y más Apuntes en PDF de Biblioteconomía y Documentación solo en Docsity!
1. Algunes etiques HTML:
negreta
cursiva
Línia horitzontal
canvi de línia (return)
llista amb * F 0E 0 Llista no ordenada
llista amb números F 0E 0 Llista ordenada
(fins a h6) F 0E 0 Mida de la lletra. h1 mes gran h6 mes petit
2. Altres qüestions d’HTML: - La lletra per defecte que surt es “Times new Roman” - L’estendard sempre justifica el text cap a l’esquerra i estableix un fons de pantalla blanc. - Enllaç a l'Ajuntament de Barcelona - El que hi ha en Blau es el que sortirà com a nom de l’enllaç. - L’adreça s’ha d’escriure sencera (http://....) - parlarem F 0E 0Les etiquetes cal tancar-les en ordre (l’etiqueta mes propera al text, és la que 1r es tanca)
- Per veure un gràfic cal que estigui a la mateixa carpeta que la web (Bloc de notes).
- No hem de canviar l’extensió de les fotos perquè si no, no funcionaran.
- Codi de foto F 0E 0Envia'm un correu
Fitxes treballades: 1,2, 3, i 4 (punt 1: Enllaç a un recurs extern).
Enllaç a una pàgina pròpia: El primer que hem de fer si no tenim cap altra web, és crear una còpia de la que ja teníem.
- Quan enllacem amb una altre web pròpia no cal posar l’adreça completa (http://....), n’hi ha prou amb posar el nom del fitxer (Prova 2.html)
- Per fer l’enllaç de la pàgina 2 a la pàgina 1 s’ha de fer el mateix.
- Per fer un enllaç sobre un gràfic:
Enllaç dins d’una mateixa pàgina: Serveix per enllaçar parts d’un text llarg d’una web:
- Enllaç de dalt a baix:
- Per al punt que volem enllaçar:
- En el cas que tinguem una etiqueta
prop del text que volem enllaçar F 0E 0 - Si no tenim cap etiqueta a prop posarem
- Per al punt des d’on volem crear l’enllaç (ex: principi web)
- Enllaç de baix a dalt:
- S’ha de seguir el mateix procés d’abans però canviant els codis
Fitxa treballada: 4
3. Creació d’un Blog:
Adreça d’inici i d’edició: http://www.blogger.com/ Per canviar l’idioma a castellà: Anar a Language (l’enllaç és al final de la pàgina) Escollir Español Clicar a Save Settings Donar-se d’alta com a usuari: Cree su blog ahora [omplir les dades] Continuar [triar el nom del blog] Continuar [Elegir una plantilla] Continuar Empieza a publicar
El nom d’usuari no té perquè coincidir amb el nom del blog. Un nom d’usuari pot tenir més d’un blog.
Tema: Rodalies Renfe
Avís: Canvi de plantilla d’HTML
Plantilla 1:
- El primer que indica és de quin tipus de document es tracta i quines normes segueix el navegador.
- També indica en quin idioma es troba el web xml:lang="ca" lang="ca"> Útil també per a buscar webs en un idioma determinat.
- A més a més indica quins codis utilitza (ISO) charset=ISO-8859-1"
Elements del web:
- Títol
- 2-3 paràgrafs de text (una pantalla sencera=2 punts i a part)
- 2 fotografies de tamany mig-petit per incloure
- Firma o peu de pàgina
- Per fer la nostra plana web usarem un únic fitxer en el que inclourem totes les dades d’estil per tal que quan volguem modificar alguna cosa no haguem de fer-ho pàgina a pàgina si no que canviant-ho en aquesta pàgina principal (full d’estil) automàticament se’ns canviï a totes les planes.
- F 0E 0 Etiqueta per canviar el color de les lletres.
- F 0E 0 Etiqueta per canviar l’estil de la lletra.
- El que fan aquestes etiquetes és determinar el color de fons, la lletra i l’estil de la lletra en tots els paràgrafs.
Com controlar l’estil de d’una pàgina externa d’estil:
- cal crear el fitxer “renfe.css” i indicar-hi les dades d’estil que volem per al nostre web
Etiquetes menú:
.menu {font-size:11px; background-color:#66CCFF; padding:8px; width:180px; position:absolute; left:20px; top:170px;}
Color de fons del Quadre
Fitxa de treball núm. 11
Etiquetes per enllaços:
a {background-color:white; text-decoration:none; color:black; }
Color que envolta els links Etiqueta que serveix per treure el subratllat als links Color de les lletres en les que sortiran els links
Hem d’anar molt en compte amb els color que fem servir en els Hiperlinks per tal de no despistar als usuaris.
li {width:100px; margin-left:-5px; margin-bottom:12px; }
Aquesta etiqueta serveix perquè els links apareguin en un llistat amb un *
a:hover {font-weight:bold; background.color:#FFCCFF; }
Aquesta etiqueta és per tal que quan pasem el ratolí per damunt del link aquest ens aparegui amb lletra negreta.
a:visited {font-weight:bold;
FrontPage F 0E 0 programa pensat per a dissenyar planes web. Es pot usar de dues maneres diferents: a) com si fos un word (sense HTML) b) amb HTML
Si usem l’opció de FrontPage com a Word, hem de tenir en compte que el disseny no serà igual que amb HTML. No és tan perfeccionat.
Inconvenients:
- hi ha certes coses que no sap fer.
- a vegades inclou etiquetes que no són correctes.
FrontPage té una segona opció: Gestionar planes web senceres (menú de l’esquerra). Està pensat per ser utilitzat per diferents persones a la vegada (Aquesta opció no la utilitzarem)
Recomanacions:
- Guardar como F 0E 0per tal de poder guardar la web on vulguem i amb el nom de fitxer que vulguem. FrontPage guarda, per defecte, el fitxer amb el nom “pagina_nueva_1”
Pestanyes (a baix):
- Normal: vista normal del web (= word)
- HTML: vista del fitxer en html. Els codis blaus són els que no es veuran. Els codis en negre són els que apareixen en la web (= Bloc de notes)
- Vista prèvia: no podem escriure-hi res (=Internet explorer). És recomanable anar consultant el navegador de tant en tant.
La web està escrita en español F 0E 0 Si ho escribim en català, haurem de canviar-ho per “ca”. Aquesta eina és útil per als buscadors com Google.
Etiquetes d’auto-propaganda F 0E 0 Podem esborrar-les però sempre que les obrim tornaran a aparèixer.
La plantilla que usa FrontPage està antiquada (en aquesta versió, no podem canviar-la).
Frames (marc): Aquesta eina permet accedir a diferents webs des d’una principal sense perdre de vista el menú d’aquesta plana principal.
- Dividim la pantalla en dos meitats
- Podem fer que ens substitueixi la meitat dreta
- Podem fer que ens substitueixi la meitat esquerra
- Podem fer que ens aparegui una tercera finestra.
- Podem fer que ens substitueixi tota la pantalla.
És una eina molt útil i còmoda per fer grans webs de moltes planes. Tot i això, és un mètode que cada dia es deixa més d’utilitzar ja que les grans empreses estan convertint les seves webs a format CCS.
Realització:
Frontpage F 0E 0Nuevo Pagina web F 0E 0plantilla F 0E 0páginas de marcos F 0E 0contenido.
Establecer página inicial F 0E 0 Buscar la que tenim feta i establir-la coma web principal.
Nueva página F 0E 0 Començar a fer la web de 0.
Sin marcos F 0E 0Als navegadors antics que no usen “marcs” apareix aquest missatge.
HTML de página de marcos F 0E 0 Codi HTML del tercer fitxer. Aquest fitxer és el que controla els altres dos que farem nosaltres. Si aquest fitxer està malament la web no funcionarà.
Exemple:
Pagina nueva 1
Esta página usa marcos, pero su explorador no los admite.
Renfe
Amb les etiquetes: _self F 0E 0 l’obre en el marc actual (el que escollim: dreta o esquerra) _top F 0E 0 l’obre ocupant tota la finestra _blank F 0E 0 obre una nova finestra _parent F 0E 0 Aquesta opció s’usa quan tenim “marcs” dins d’altres “marcs”. F 0E 0És una opció que nosaltres no farem servir.
Podem escollir de quina forma volem que se’ns obrin les webs dels enllaços.
Fitxa treballada núm. 0
Identificador = Identificados UB Contrasenya = Contrasenya UB
Aquest programa permet penjar tres fitxers a la vegada.
És recomanable posar tots els fitxers que formen part d’un únic document en una mateixa carpeta per tal de no fer-nos un embolic si tenim diversos fitxers de treballs o assignatures diferents.
Aquests fitxers s’esborraran a final de curs.
Creació d’un directori (carpeta): Crear directori F 0E 0T.E. (Sigles de l’assignatura)
És important que existeixi un fitxer anomenat “default.htm” al directori que serveixi com a punt de partida, la resta de fitxers poden tenir els noms i les extensions que es vulgui.
Fitxa treballada núm. 7
Creació de formularis.
Hi ha dues formes diferents de crear formularis:
- Nom:
- DNI: Adreça electrònica.
- (...)
El que fa aquesta opció és enviar la informació a una adreça electrònica. La informació s’ha d’automatitzar manualment.
- Nom:
- DNI: Programa que revisa les dades.
- (...)
Aquesta segona opció envia la informació a un programa de l’ordinador central que revisa les dades per tal de que siguin correctes. Un cop finalitzat aquest procés, envia la informació a una BBDD que prèviament li hem assignat. Nosaltres usarem la primera opció, ja que per a utilitzar la segon necessitem tenir coneixements de programació. Els programes més utilitzats per a fer aquest tipus de formularis són, generalment, el CGI i el BIN perl.
Formulari: F 0 E 0Per fer els formularis necessitem el FrontPage F 0 E 0Pàgina nueva F 0 E 0Guardar como... F 0 E 0Insertar^ F 0 E 0 Formulario^ F 0 E 0Formulario F 0 E 0Escriure dins el quadre de Formulari
New Image: F 0 E 0Mida del gràfic y colors. F 0 E 0Barra de Herramientas.
04/05/
Canviar la franja de color de la bandera = 3 - 4KB Guardar la bandera en diferents models de grabació i observar els possibles canvis. 256 colors = la mida és la mateixa que en la foto anterior perquè originalment aquesta foto ja tenia 256 colors. 16 colors = el fitxer ocupa menys que l’anterior. Hem de guardar sempre els fitxers amb la mida de colors més pròxima a la real per tal que el fitxer ocupi el menys possible. 16 milions amb jpg = es triplica la mida del primer fitxer. Això es deu a que el format jpg no està preparat per a imatges geogràfiques si no per a fotografies. Canvis en la qualitat? à aparentment no hi ha cap canvi però si fem servir la lupa observem
Quan modifiquem imatges és important modificar tot allò de la imatge que vulguem abans de canviar-ne la mida o el format del fitxer.
Com fer que el fons d’una fotografia es vegi transparent en un web:
à Clicar aqui
à Clicar dos cops aqui per canviar la posició.
Guardar como à options à 3a opció à Ok!
Imatges Sensibles:
FrontPage à insertar imatge (ex: mapa)
à Botó per a crear les imatges sensibles
Exemple:
Fitxa treballada núm. 8
Metadades:
En el cas de les webs, les metadades donen informació sobre el títol, l’autor, etc. És informació precatalogadora. També són útils per a la recuperació de les webs en certs cercadors com Google.
No és obligatori que totes les planes web duguin metadades.
Les metadades s’usen molt en el camp de les biblioteques virtuals.
Exemple:
Contingut
