Introducción al HTML y CSS

La directiva DOCTYPE le indica al navegador las reglas que seguirá para interpretar las etiquetas HTML. Si no existe, el navegador las interpretará

Una práctica muy importante en cualquier lenguaje de programación es el de comentar nuestro código, ya que al transcurrir el tiempo, ni nosotros mismos sabemos lo que hicimos (creame, pasa muy seguido).

Apuntes de la sección 1

La etiqueta 
 se utiliza para representar un párrafo. La etiqueta p es soportada
por todos los navegadores (gracias a Dios).

El uso de las listas de difinición están cayendo en desuso. El funcionamiento de las listas de definición es similar al de un diccionario, por un lado el término y por el otro la definición de ese término o palabra. La etiqueta

<dl>
  <dt>Byte</dt>
  <dd>Conjunto de 8 bits con significado</dd>
 

Las tablas son un poderosa herramienta a la hora de mostrar y relacionar cierto tipo de información. Aún cuando muchos sitios son construidos (por su naturaleza) sin usar una simple tabla, existen algunas ocasiones en que el valor de las tablas se vuelve escencial.

En las próximas líneas intentaremos cubrir todas las características de las tablas para estar listos para utilizarlas cuando se necesite.

La etiqueta  se emplea para definir un bloque de contenido o sección de la página, para poder aplicarle diferentes estilos e incluso para realizar operaciones sobre ese bloque específico. El uso de la etiqueta div es sencillo. Observemos este ejemplo:

Índice Página principal Material multimedia Autores

Hemos empleado la etiqueta para crear un bloque, que hará las veces de índice de contenidos. Visualmente la etiqueta no provoca ningún cambio, pero en la estructura interna del documento hemos aplicado una división muy importante. La figura muestra el texto del ejemplo; no hay ninguna diferencia visible.

Las hojas de estilo en cascada (Cascading Style Sheets, o sus siglas CSS) hacen referencia a un lenguaje de hojas de estilos usado para describir la presentación semántica (el aspecto y formato) de un documento escrito en lenguaje de marcas. Su aplicación más común es dar estilo a páginas webs escritas en lenguaje HTML y XHTML, pero también puede ser aplicado a cualquier tipo de documentos XML, incluyendo SVG y XUL.

La información de estilo puede ser adjuntada como un documento separado o en el mismo documento HTML. En este último caso podrían definirse estilos generales en la cabecera del documento o en cada etiqueta particular mediante el atributo "

CSS funciona a base de reglas, es decir, declaraciones sobre el estilo de uno o más elementos. Las hojas de estilo están compuestas por una o más de esas reglas aplicadas a un documento HTML o XML. La regla tiene dos partes: un selector y la declaración. A su vez la declaración está compuesta por una propiedad y el valor que se le asigne.

h1 {color: red;}

h1 es el selector

{color: red;} es la declaración

El selector funciona como enlace entre el documento y el estilo, especificando los elementos que se van a ver afectados por esa declaración. La declaración es la parte de la regla que establece cuál será el efecto. En el ejemplo anterior, el selector h1 indica que todos los elementos h1 se verán afectados por la declaración donde se establece que la propiedad color va a tener el valor red (rojo) para todos los elementos h1 del documento o documentos que estén vinculados a esa hoja de estilos.

Los css nos da la flexibilidad de poder darle color, tamaño, grueso y otras propiedades que trataremos de explicarla las más importantes. Antes de la versión 5 de HTML, no se podía manejar más que las fuentes que el usuario tuviera instaladas en su computadora. Era por esto que utilizábamos al menos tres tipos de fuente por si una fallaba, el navegador buscaba la segunda, y asi, hasta encontrar una de las fuentes más básicas. Algunos de los conjuntos de fuente más comunes son:

Arial, Helvetica, sans-serif
“Times New Roman”, Times, serif
“Courier New”, Courier, monospace
Georgia, “Times New Roman”, Times, serif
Verdana, Arial, Helvetica, sans-serif
Geneva, Arial, Helvetica, sans-serif

Si el nombre de la fuente contenia espacios, es necesario utilizar las comillas, por ejemplo "Times New Roman"  

Otras reglas de estilo para las fuentes son:

• text-indent

• vertical-align

• word-spacing

• text-transformation

Otras reglas de estilo para las fuentes son:

• text-decoration

• text-shadow

• font-weight

• font-style

Cambiar el formato de los hipervínculos o "links" por medio de los estilos en cascada es fundamental en el desarrollo y diseño de páginas we. Podemos modificar los colores, el background o cambiar el clásico color azul, sin embargo, siempre es necesario que el usuario sepa cuál frase, palabra o imagen contiene un hipervínculo.

La ubicación de nuestras reglas de estilo es muy importante, porque depende del órden las reglas se irán ejecutando. Podemos localizar nuestro código en hojas externas, propiamente conocidas como stylesheets, podemos escribir el código dentro de la etiqueta.

Apuntes a la sección 3

El manejo de selectores es una de las habilidades más importantes cuando se intenta utilizar los estilos en cascada en forma profesional. hasta este punto hemos utilizado las reglas de cascada que inician con un selector. Este puede ser el nombre de una etiqueta, por ejemplo, h1, de una clase, por ejemplo .rojo o de una división #encabezado.

Cuando utilizamos por selector un nombre de etiqueta, todas las etiquetas de esa clase srán modificadas. En cambio, los identificadores sólo podemos tener uno en todo el documennto. Las clases pueden aplicarse varias veces, pero hay que aplicarlas en forma manual.

Podemos aplicar a varios selectores las mismas reglas de estilo por medio de las comas, por ejemplo:

h1, h2, h3, h4{ color:white; }

Muchas veces los selectores simples, como la etiqueta, la clase y los identificadores no son suficientes para realizar el diseño de nuestra página web, por lo que nos será importante hacer "excepciones". En un buen diseño web, las excepciones no deberán de ser la regla. Para ello necesitamos escribir los selectores principales a la izquierda y los particulares a la derecha, por ejemplo:

#menu a { color:red; }

Por lo general leeremos estos selectores de derecha a izquierda, es decir: "todas las etiquetas 'a' que se encuentren dentro de la división 'menu' su texto será de color rojo.

• El selector element.class se usa para seleccionar el elemento especificado con la clase especificada.

p.urgente{color:red;}

span.urgente{color:orange;}

• [attr] Selecciona los elementos que tienen el atributo attr.

• [attr=value] Selecciona los elementos cuyo atributo attr tenga exactamente el valor value.

• Podemos seleccionar elementos a partir de la estructura del documento.

• Un documento HTML se puede entender como un árbol genealógico.

• elemento:nth-child()

• elemento:nth-child(even)

• elemento:nth-child(odd)

• elemento:last-child

• elemento:first-child

• elemento:first-letter()

• Selectores de tipo (p.e., h1) y pseudo-elementos (p.e., ::before): cero.

• Selectores de clase (p.e., .example), selectores de atributos (p.e., [type="radio"]) y pseudo-clases (p.e., :hover): uno

Apuntes a la sección 4

El modelo de caja es uno de los conceptos más importantes al momento de formatear nuestra página, y puede resultar un verdadero dolor de cabeza si no poseemos los conocimientos adecuados para ello. Asi que resulta fundamental conocer bien los términos de margen, padding, border y área de contenido, para no pasar noches en vela porque nuestro modelo se "mueve", y culpar de ellos al HTML y a los CSS.Otro problema es que algunos navegadores no "hablan" muy bien CSS y hacen las cosas algo diferentes, y en el caso de Internet Explorer, puede hacer las cosas muy diferentes, si de CSS se trata.

Una propiedad fundamental para modificar el color de nuestra página web, asi como su diseño, será la propiedad background, la cual la tendrá cualquier etiqueta que posea el modelo de caja. Podremos cambiar el color o colocar una imagen que se repita o se adapte a su contenido. El color de fondo del área se extiende hasta debajo de la línea del borde. Asi, si la línea del borde muestra espacios, por ejemplo, dashed, dotted o double el color de fondo del elemento se muestra a través de ellos.

Los bordes y los contornos son muy similares. Sin embargo, los contornos difieren de los bordes de la siguiente manera:

• Los contornos no ocupan espacio, son dibujados por encima del elemento. Por lo tanto, su aparición u ocultamiento no causa un redibujado de las cajas. No suma en el tamaño de la caja y no hay movimiento o desplazamiento de los elementos como con border.

• La propiedad display especifica el comportamiento de visualización de un elemento.

• En HTML, el valor de propiedad de visualización predeterminado se toma de las especificaciones HTML o de la hoja de estilo predeterminada del navegador / usuario.

border-box le dice al navegador tomar en cuenta para cualquier valor que se especifique de borde o de relleno para el ancho o alto de un elemento. Es decir, si se define un elemento con un ancho de 100 pixeles. Esos 100 pixeles incluíran cualquier borde o relleno que se añadan, y la caja de contenido se encogerá para absorber ese ancho extra. Esto típicamente hace mucho más fácil dimensionar elementos.

• La propiedad CSS background-attachment determina si la posición de la imagen de fondo será fija dentro de la pantalla o se desplazará con su bloque contenedor.

Apuntes a la sección 5

Añadir el favicon a la página web.

Apuntes a la sección 6

Apuntes a la sección 7

Los formatos flexibles pueden llegar a ser más complejos que los formatos fijos, pues no tenemos el cálculo de las alturas de las cajas, y estas pueden llegar a descuadrarse, lo cual arruina nuestro diseño. Necesitamos una gran tolerancia a la frustración cuando desarrollamos formatos flexibles, pero con un poco de cuidado y paciencia dominaremos este estilo de maquetación.

Apuntes a la sección 8

Los formularios HTML se utilizan para pasar datos del usuario la un servidor.

Los elementos principales para introducir datos están controlados por la etiqueta <input>

<input type = "radio">

Permite hacer selecciones entre varias opciones que son excluyentes.

Las casillas de verificación permiten al usuario seleccionar cero o más opciones de un número limitado de opciones .

Por medio de las etiquetas <select></select> y de <option></option> podemos hacer listas desplegables o dropbox.

Cómo crear un control de entrada de texto de varias líneas .

En un “textarea” el usuario puede escribir un número ilimitado de caracteres.

Un botón de enviar se utiliza para enviar datos del formulario a un servidor.

Crea un borde alrededor de los elementos en un formulario.

Por medio de los estilos en cascada para modificar los formuarios en HTML.