El nostre lloc web 


 
llenguatge

KompoZer
formats
colors
imatges
dibuixos
 
 
enllaços

marcadors
taules
pàgina d'inici
el lloc web
fulls d'estils
 
 
multimèdia
marcs
flash
javascript
publicació
 
el nostre lloc
a internet
 



Cada equip crearà una sèrie de pàgines web, que allotjarem dins un website comú. 
Un lloc web (website) és un conjunt de pàgines web organitzades i relacionades entre si. InfoTecBell és un lloc web, aquesta és una de les pàgines web que el componen.
Per tal de donar unitat a tot el conjunt, hem decidit que cada grup farà les seves pàgines sobre el seu músic o grup musical preferit.

Per començar: 
1. Creeu al vostre pendrive USB una carpeta anomenada web_CognomNom
2. Dins d'aquesta carpeta creeu altres dues: NomDelMusicEscollit i activitats
3. Dins de cada una d'aquestes carpetes creeu una altra: imatges


Dins la carpeta activitats anireu guardant totes les activitats d'aprenentatge que anirem desenvolupant. Els arxius definitius per pujar al servidor els copiareu de la carpeta activitats a la carpeta homònima dins de NomDelMusicEscollit 

És molt important que, un cop hagueu començat l'elaboració de la web, mantingueu les rutes relatives de tots els fitxers, ja que podrien perdre's els links.
Una pàgina web:
  • És un document en format HTML (HyperText Markup Language) que sol contenir text i imatges.
  • Es pot crear amb qualsevol processador de text i es visualitza amb un navegador. 
  • Pot estar emmagatzemada en un equip local o en un servidor web remot.
  • Pot proporcionar navegació a altres pàgines web mitjançant enllaços d'hipertext.

El procés serà:
biografia
index, amb una estructura predefinida >>
crearem el lloc web
full d'estils
multimèdia
marc

Imatges

publicado a la‎(s)‎ 14 abr. 2012 11:23 por Carolina Crespo   [ actualizado el 29 abr. 2012 10:37 ]

Una página web sin imágenes que apoyen el texto es como un jardín sin flores. Nuestras páginas pueden contener todo tipo de recursos para reforzar el contenido o reemplazarlo, si es necesario.

Insertar una imágen

Para insertar una imagen, contamos con un elemento html denominado <img>, que se acompaña del parámetro src para indicar la ubicación de la imagen (source en inglés). El formato general es el siguiente:

<img src="nombredelaimagen.png" />

Es un elemento que no tiene etiqueta de cierre, por lo que el cierre va incluido en la propia etiqueta.


Observemos estos otros ejemplos:

  • <img src="recursos/calle.jpg" />: muestra una imagen que está contenida en una carpeta llamadaimagenes. Es una dirección relativa.
  • <img src="http://farm6.static.flickr.com/5178/5428759578_d6fb2288a4.jpg" />: Se muestra una imagen ubicada en una dirección de Internet, en este caso del portal Flickr. Es una dirección absoluta, que muestra una imagen que no está en nuestro ordenador ni en nuestro espacio web, sino directamente en Internet.

Descripción de la imagen

Por cuestiones de accesibilidad, cada imagen debe acompañarse siempre de un texto que será mostrado en el caso de que, por cualquier motivo, la imagen no esté disponible y que sirve también como descripción en aplicaciones lectoras para personas con discapacidad.

El texto alternativo se inserta con el atributo alt. Así, un par de imágenes correctas quedarían de la siguiente manera:

<img src="recursos/calle.jpg" alt="Una calle con coches y tiendas" />

<img src="http://farm6.static.flickr.com/5178/5428759578_d6fb2288a4.jpg" alt="Árbol con ramas" />


Modificar las dimensiones de la imagen

HTML incorpora dos atributos más a la etiqueta imgwidth (ancho) y height (alto); con ellos podemos indicar explícitamente la anchura y altura que tendrá una imagen.

Normalmente estos valores se emplean para establecer los valores reales de la imagen, lo que facilita el proceso de carga de la página, pero también se pueden emplear para que una imagen se muestre más pequeña, más grande o símplemente distorsionada en alguno de sus ejes.

Ambos atributos se acompañan de un valor entre comillas. Puede venir expresado en dos medidas diferentes:

  • Píxeles: si el valor indicado no lleva ningún tipo o las letras px, estamos indicando que la medida es en píxeles. Por ejemplo <img src="foto.jpg" width="40px" /> o <img src="foto.jpg" width="40" />
  • Porcentaje: el tamaño puede estar expresado en relación con su valor original, como un porcentaje. Lo indicamos con el signo %. Por ejemplo en <img src="foto.jpg" width="50%" /> la imagen tendría la mitad de su tamaño original.

Siguiendo con el ejemplo anterior, nuestra primera imagen completa con su dimensión real quedaría así:

<img alt="Calle con coches y tiendas" src="recursos/calle.jpg" width="483px" height="387px" />

La figura nos muestra el resultado que obtenemos, si modificamos sólo uno de los valores:

<img alt="Calle con coches y tiendas" src="recursos/calle.jpg" width="483px" height="150px" />


La modificación de un valor, mientras mantenemos el otro igual, produce ese tipo de deformaciones. Para evitarlo, intentaremos mantener la proporción o, lo que es más sencillo, indicar sólo la anchura o la altura y así el navegador se encargará de calcular el valor que no especificamos. Observa la diferencia con este otro ejemplo:

<img alt="Calle con coches y tiendas" src="recursos/calle.jpg" height="150px" />


Para insertar imaxes no noso documento web, temos que lembrar o concepto da rutas relativas, xa que imos empregalas decote. Normalmente, as imaxes dun sitio web atópanse todas nun cartafol situado no mesmo lugar que o documento html co que estexamos a traballar. 


Unha vez teño as imaxes gardadas, a etiqueta que debo introducir é:

 <img src="imaxes/nomeImaxe.extensión">

Observarás que non ten etiqueta de peche, así que abonda con incluíla despois do parágrafo que queiras. É moi importante ESCRIBIR O NOME DA EXTENSIÓN da imaxe, se non o fas non a atopará e non che funcionará.

Se queres que a imaxe apareza escalada a un determinado número de píxeles de ancho e alto, deberás engadir os atributos seguintes:

 <img src="imaxes/nomeImaxe.extensión" heigth=píxeles de altura width= pixeles de ancho>

Se queres que a imaxe insertada sexa unha imaxe aloxada nunha web, non tes máis que escreber a ligazón a esa imaxe dentro de src, deste xeito:

 <img src="url da imaxe">

Por último, se o que queres é que a imaxe faga de hipervínculo, é dicir, que o clicar sobre ela te leve a outra páxina, o que tes que insertar é:

 <a href="ligazón que queres que abra"> <img src="imaxes/nomeImaxe.extensión"> </a>
O que ven sendo insertar a imaxe na parte da etiqueta de ligazón na que normalmente poñeríamos o texto que faría de hipervínculo.

Text

publicado a la‎(s)‎ 14 abr. 2012 4:52 por Carolina Crespo   [ actualizado el 19 abr. 2012 11:38 ]

Encapçalaments

Una pàgina web ben dissenyada compta amb encapçalaments (títols) per definir els diferents apartats i subapartats del text.  

Les etiquetes que defineixen les capçaleres són de l'estil <Hnúm> (H: header (capçalera)), i es poden utilitzar, per exemple, per marcar el títol i/o els diferents subapartats que formen el document o simplement per a ressaltar qualsevol text. 

Existeixen sis tipus de capçaleres, van de la h1 (la més gran) a la h6 (la més petita), i és necessari utilitzar l'etiqueta de tancament per senyalar-ne el final:

<Hnúm>capçalera</Hnúm>


és el navegador el responsable de definir la mida de la font, més endavant podrà veure’s que un pot modificar la font, mida, color etc.

Confeccionarem una pàgina que contingui un títol de primer nivell <h1> i després dos títols de nivell <h2>. Definirem un paràgraf per a cada títol de segon nivell. 
Confeccionar el titular d'un diari amb un títol de nivell 1. Després definir dos títols de segon nivell amb els textos (Notícies polítiques i Notícies esportives), en cadascuna d'aquestes seccions definir dos titulars de tercer nivell amb un paràgraf cadascuna. Al final de la pàgina mostra un títol de quart nivell amb el nom de l'empresa propietària del diari.


Estil del text

Les etiquetes següents defineixen quin és l'estil del text que hi ha entre l'etiqueta d'obertura i la de tancament.

 Estil Estiqueta Exemple  Resultat 
 negreta (blod) <b> </b> <b> negreta></b> negreta 
 cursiva (italic) <i> </i>  <i> cursiva </i> cursiva 
 subratllat (underline) <u> </u>  <u> subratllat </u> subratllat
 tatxat <s> </s>  <s> tatxat </s> tatxat
 subíndex <sub> </sub>  normal <sub> subíndex </sub> normal subíndex
 superíndex <sup> </sup>  normal <sup> superíndex </sup> normal superíndex
    
 Com la majoria de les etiquetes HTML podem anidar-les per tal d'obtenir així un text doblement destacat. Per exemple:

<p>Aquesta frase és molt <b><i><u>important</u></i></b></p>
Es veurà ...
Aquesta frase és molt important

Nota: En anidar diferents etiquetes és important mantenir l'ordre en tancar-les. La darrera que haguem obert serà la primera en tancar-se, com a l'exemple anterior.

Us animeu amb el codi per aconseguir aquest text?



Tipus, mida i color de la lletra

Els atributs de la lletra es defineixen amb l'etiqueta <FONT> </FONT> Els seus paràmetres són:

face: defineix el tipus de lletra
size: defineix el tamany
color: defineix el color

Veieu uns exemples:

El codi
<FONT face="Arial Black" size="5" color="#FF0000">text Arial Black de mida 5 i en color vermell</FONT>
Es veuria ...
text Arial Black de mida 5 i en color vermell

El codi
<FONT face="Times New Roman" size="7" color="#000000">text <u>Times New Roman</u> de mida 7 i en color <b>negre</b> </FONT>
Es veuria . 
text Times New Roman de mida 7 i en color negre

NOMS DE TIPUS DE LLETRA

Cuando especifica el tipo de fuente con una etiqueta FONT FACE="" ha de saber que puede haber personas que no dispongan de ese tipo de letra. Afortunadamente, usted puede especificar varios tipos de letra alternativos.

  •         Arial
  • Arial Black
  • Comic Sans MS
  • Fixedsys
  • System
  • Times News Roman
  • Helvetica
  • Sans-Serif
  • Verdana
  • Terminal

Paràgrafs i salts de línia

publicado a la‎(s)‎ 14 abr. 2012 3:01 por Carolina Crespo   [ actualizado el 18 abr. 2012 23:27 ]

Accediu a Villaweb. Diari de l'escola i copieu al Bloc de Notes tres paràgrafs d'alguna notícia que us sembli interessant. Deseu el document com a 02.html dins la vostra carpeta. 
Visualitzeu la pàgina amb el navegador: tot el text apareix seguit, cal definir els paràgafs i els salts de línia. Les etiquetes següents ens permetran organitzar la informació:

<p> </p> per definir paràgrafs (p: paragraph)
<br> per definir salts de línia (br: break)
<hr> inserta un salt de línia mostrant una línia horitzontal (hr: horizontal rule)
<br> i <hr> són instruccions puntuals dins els paràgrafs, no cal tancar-les.

Ara, definiu els tres paràgrafs al vostre document i comproveu com apareix endreçat al navegador.
Després, definiu uns quants salts de línia dins de cada paràgraf. Observeu la diferència entre l'aparença del paràgraf i la del salt de línia.
Per acabar, al final de tot el text inseriu un nou paràgraf. En aquest, en dues línies separades per una línia horitzontal, escriviu els vostres noms i l'adreça web d'on heu copiat el text.

Si teniu dubtes, mireu l'exemple. El codi:                                                                          es visualitza:
.


Posem color

publicado a la‎(s)‎ 13 abr. 2012 12:16 por Carolina Crespo   [ actualizado el 18 abr. 2012 22:28 ]

Per especificar el valor d'un atribut de color podem utilitzar el seu nom estàndard o el seu codi de color (precedit pel símbol #).
El codi de color es defineix amb tres parelles de valors hexadecimals: 
la primera parella de valors indica la quantitat de vermell (Red), la segona indica la quantitat de verd (Green) i la tercera la de blau (Blue).

Tingueu present:
Moltes etiquetes no funcionen per si soles, hem d'incorporar-hi paràmetres, com el color i el valor d'aquests paràmetres:
<ETIQUETA paràmetre = "valor"> xxxxxxx </ETIQUETA>

Definir el color de fons de la pàgina web

La instrucció BGCOLOR permet definir el color de fons de la pàgina web (dins l'etiqueta <BODY>)

<BODY bgcolor="#FFFF00" >
<BODY bgcolor="yellow" >

Recordeu tancar la instrucció amb </BODY>

Definir el color del text

L'etiqueta <FONT> permet definir els atributs del text. Per tal que funcioni hem d'incorporar-hi la instrucció COLOR i el seu valor:

Un exemple. El codi:                                                                                                             es visualitzarà:
.


Exercici:

Poseu un color de fons a la vostra pàgina web. Haurà de ser claret per tal que el text destaqui.
Poseu color al text: deixeu els noms en negre (color per defecte) i poseu cada cognom amb un color diferent. Per exemple:

Carolina Crespo López i Pepito Pérez Martinez




Estructura d'una pàgina web

publicado a la‎(s)‎ 4 mar. 2012 10:09 por Carolina Crespo   [ actualizado el 18 abr. 2012 22:26 ]

Una pàgina web és un document de text escrit en llenguatge HTML (Hyper Text Markup Language: Llenguatge Marcador d'HiperText), amb etiquetes (text concret entre <>) que defineixen atributs.

Quan visualitzem un document HTML amb un programa navegador, veiem el resultat final però no el seu codi font. Per veure'l hem de fer-ho amb l'opció Codi Font del menu Veure del navegador.

Encara que existeixen programes dissenyats especialment per a la construcció de pàgines web, que generen el codi font automàticament, val la pena entendre i controlar aquest codi. Per aquest motiu, començarem estudiant i creant el codi HTML nosaltres mateixos.

Utilitzarem:
Un editor de text (Bloc de Notes) per escriure el codi font del document i un programa navegador per veure'n el resultat.

Els documents o fitxers d'HTML es guarden amb les extensions .html o .htm.
Generalment, el primer fitxer d'un lloc web rep el nom de index.htm o index.html. 

Estructura bàsica d'un document HTML

<HTML> 

 <HEAD>

Capçalera: conté informació sobre el document

<TITLE>

Títol de la pàgina web

        </TITLE>

</HEAD>

<BODY> 

Cos: contingut de la pàgina, el que es veurà en el navegador

 </ BODY> 

</ HTML> 


Exercici:


Confecciona una pàgina amb les marques mínimes que ha de tenir, i en el cos de la mateixa escriviu els vostres noms i cognoms en dues línies diferents.

Si tot ha anat bé, veurem una pàgina web al nostre navegador. Fixem-nos en:


<>  El navegador no mostra tot el text que he escrit, només el que hem escrit entre <body> i </body> però el text que hem escrit en dues línies apareix tot seguit.
<>  A la pestanya del navegador on es veu el títol de la pàgina, aquest coincideix amb el què hem escrit entre <title> i </title>
<>  Fixeu-vos en la URL de la vostra pàgina: com que l'arxiu no està penjat a Internet o a un servidor, l'adreça no comença amb http://, sino que mostra la ruta de l'arxiu a l'ordinador.

 << índex  següent >>: posem color

1-5 of 5