Title: etiquetas y atributos
Course: Digitalización 4ESO

Los colores en el ordenador se consiguen mezclando luz roja, verde y azul. El sistema se llama rgb (red, green, blue). Para definir los colores como atributo de alguna propiedad se pueden usar diferentes maneras.
- con el nombre en inglés del color . De esta manera para definir el rojoescribiriamos red
- como código rgb seguido entre paréntesis del nivel de cada canal que es un número que va del 0 al 255. De esta forma el rojo sería rgb(255,0,0)
- También se puede indicar el porcentaje de cada canal. De esta manera el rojo sería rgb(100%,0,0).
- Con el símbolo# seguidoel número hexadecimal del color. De esta manera, el rojo se escribiría como #ff0000. Cuando los dos bytes del canal son idénticos en cada canal, se puede mostrar con un solo numero por canal. El rojo también sería #F00.

Observa en el navegador y el código de ejm5.1.html. Se han puesto una serie de contenedores genéricos (etiqueta <div>) con distintos colores de fondo (background-color) definidos de diferente manera.

Aunque uno puede usar el método que más le guste para definir el color en las páginas propias, es bueno conocerlas todas, para poder interpretar documentos diseñados por otros.

Las páginas web son documentos escritos en un lenguaje de programación llamado html. Las siglas HTML son las iniciales de la expresión en inglés HyperText Markup Language. Traducido al castellano sería Lenguaje de Etiquetas de Hipertexto.

El concepto de hipertexto significa que el documento puede tener partes activas que conducen a otras zonas del documento o a otros documento. Esto permite crear estructuras de información ramificadas, a diferencia de los textos en papel que tienen una estructura lineal.

Páginas web

Las páginas web son una forma de mostrar información.

Dependiendo de como se almacenen, esa información puede ser accesible a todas las personas que tengan conexión a internet. Ese es el motivo por el que se ha desarrollado tanto y hay tantas paginas con contenidos diferentes.

Por supuesto también puede haber páginas web privadas con acceso a un único usuario o a un conjunto restringido de usuarios.

Q: Unas etiquetas pueden contener a otras. Esto establece una jerarquía de las mismas. Cuando una etiqueta está dentro de otra se denomina hijo y la que lo contiene padre. Dos etiquetas que están en el mismo nivel se denominan hermanas. Cuando una etiqueta está dentro de otra pero no inmediatamente, se denomina descendiente y la que la contiene, ascendente.

En el siguiente conjunto.
<etiqueta1><etiqueta2><etiqueta3>texto</etiqueta 3><etiqueta4>texto</etiqueta4></etiqueta2></etiqueta1>
- etiqueta 1 es ... de etiqueta 2 | Padre
- Etiqueta 3 es.... de etiqueta 2 | hijo
- etiqueta 3 es ... de etiqueta 4 | hermano
- etiqueta 4 es ... de etiqueta 1 | Descendiente
- Etiqueta 1 es... de etiqueta 3 | Ascendiente
- etiqueta 2 es ...de etiqueta 1 | hijo

Q: Otros atributos de texto

Observa el documento ejm6.html. ¿Para qué sirven las diferentes etiquetas?
- etiqueta &ltstrong&gt | negrita
- etiqueta &ltem&gt | cursiva
- etiqueta &ltb&gt | negrita
- etiqueta &ltsub&gt | subíndice
- etiqueta &ltsu&gt | superíndice

Q: La cabecera de una página (zona entre las etiquetas <head> y </head> no está pensada para ser mostrada en el navegador, excepto el título que se ve en un sitio concreto. En ella se da información como el lenguaje de la página, su autor, palabras clave sobre el contenido, juego de caracteres,, estilos, etc.

La información propiamente para ser visualizada se encuentra dentro de la etiqueta body.

Observa la página ejm3.html tanto con el navegador como con el editor bluefish.

¿Se visualiza lo que se escribe dentro de la etiqueta head?
- Sí. (Efectivamente, aunque no está pensado para ser visualizado, si escribimos algo dentro de esa etiqueta, se verá. La página web del ejem3.html está mal construida)
- No
A: Sí.

Q: En el documento ejm1.html no había contenido. En la página ejm2.html sí se ha añadido algo de texto.
¿Dónde se observa el texto marcado con la etiqueta <title>
- en la pestaña del navegador (Bien)
- En la ventana del navegador
- No se visualiza
A: en la pestaña del navegador

Q: Atributos

Observa la página ejm4.html tanto con el navegador de texto como el código fuente. Lo que se ha escrito dentro de la etiqueta body  (dentro de los símbolos<>, no entre <body> y </body>) no se visualiza. En esa zona se describen atributos, esto es propiedades que van a afectar a la visualización del contenido entre las etiquetas de apretura y cierre.
En el ejm4.html se ha puesto un texto incorrecto que no afecta a las propiedades. El navegador simplemente lo ha ignorado. Sin embargo, en la documento ejm5.html sí se ha definido un atributo correcto.

Escribe el texto que afecta a la propiedad del fondo de la página
A: bgcolor="#789"

Q: Usando el sistema de numeración hexadecimal define el color amarillo (mezcla de rojo y verde)
A: #ff0 / #ffff00

Q: Etiquetas

Dentro del texto de la página tenemos dos partes; por un lado el texto que se mostrará y por otro instrucciones para el navegador (programa que muestra la página al usuario) sobre el modo en que debe mostrar esa información. Estas instrucciones que no visualiza el usuario es lo que se denominan etiquetas.

Las etiquetas se escriben entre los símbolos <>. Cuando el navegador se encuentra con algo como <texto dentro de la etiqueta> lo interpreta como etiqueta y no visualiza el texto dentro de la etiqueta sino que sabe que se trata de instrucciones sobre como visualizar la página.

El documento que escribiste antes, ejercicio1.html, no es una página web bien construida. las etiquetas mínimas que debe contener una página web se muestran en el ejm1.html. Visualizala con el navegador. Si pinchas con el botón derecho y ver código fuente, podrás ver las etiquetas.

La primera de las etiquetas es la declaración del documento e indica al navegador la versión del lenguaje usada. El html no es algo estático, va evolucionando. En el momento de escribir esto, vamos por la versión 5.

Escribe el texto completo de la declaración del documento en html 5. Búscalo en internet. Son solo dos palabras y los símbolos <!>
A: <!DOCTYPE html>

Q: Hay etiquetas únicas como por ejemplo el salto de línea que se construye con la etiqueta <br>. Otras se aplican a un conjunto de texto. Hace falta una etiqueta antes de ese texto que se llama etiqueta de apertura y otra después, que se llama etiqueta de cierre. La etiqueta de cierre empieza con </.

Escribe la etiqueta de cierre de <body>
A: </body>

Q: La extensión de un archivo es un conjunto de unos pocos caracteres (normalmente 3) que indican al ordenador el programa que debe usar para abrir el documento.

¿Cuál es la extensión del documento del ejercicio anterior?
A: html / .html

Q: Familia de fuente

La fuente del texto se define en la propiedad font-family. En ejm5.3.html se han definido textos.

Escribe el texto completo incluyendo las etiquetas de apertura y cierre para que se observeeste texto con fuente arial
A: Texto arial

Q: Abre el editor de texto plano y escribe un documento con un poco de texto. Guardárdalo con el nombre ejercicio1.html y haz doble clic sobre él para abrirlo.

¿Qué tipo de programa abre el documento? Escribe una sola palabra
A: Navegador
Feedback ("mozilla"): mozilla es un programa de este tipo, pero cómo se llaman de manera general
Feedback ("iceweasel"): Icewasel es un programa de este tipo, pero cómo se llaman de manera general
Feedback ("chromium"): chromium es un programa de este tipo, pero cómo se llaman de manera general
Feedback ("midori"): Midori es un programa de este tipo, pero cómo se llaman de manera general

Q: Otros atributos de texto

- Escribir en mayúsculas->text-transform: uppercase
- Alineación->Text-align puede ser left, right,  center o justified
- Sangría de primera línea->text-indent
- Subrayado->text-decoration: underline

Visualiza la página ejm5.4.html y estudia su código.
Escribe el código completo para que este texto se observe subrayado y con alineación derecha. Cuando hay varias propiedades se separan con ;.
A: este texto / este texto / este texto

Q: Usando el sistema rgb escribe el color verde
A: rgb(0,255,0) / rgb(0,100%,0)

Q: Tamaño de texto

El tamaño se define dentro del atributo font-size seguido del tamaño y las unidades. Las unidades pueden ser pt (puntos), px (pixeles), % (porcentaje del tamaño de referencia), em (tamaño de la m), mm (milímetros).Las unidades no se separan del valor numérico.

Observa el ejemplo ejm5.2.html y estudia su código.

Escribe el código completo de la etiqueta de apertura de un contenedor div con un tamaño de letra de 15 puntos.
A: <div style="font-size: 15pt; "> / <div style="font-size: 15pt;">