MÓDULO 05: Construir un sitio Web
​
Herramienta a utilizar:
Adobe DreamWeaver CC 2015.
TAREA 3. HTML y CSS
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
Como con todas las cosas tecnológicas, HTML, el lenguaje web, evoluciona constantemente.
La versión actual de HTML es HTML5 que está poco a poco reemplazando al estándar más viejo HTML4. HTML5 introduce bastantes características nuevas, incluido el soporte para reproducción de vídeo y audio, así como para gráficos 2D y 3D, El Uso de HTML5 da lugar a páginas web más livianas que se cargan más rápido y significan menos saturación para los servidores web. Muchas características de HTMLS han sido hechas considerando que sean Capaces de ejecutarse en dispositivos de baja potencia como teléfonos inteligentes y tabletas. HTMLS está todavía en desarrollo, Sin embargo, los buscadores más importantes
ya respaldan la mayoría de las nuevas características de HTML5.
Para añadir vídeo a una
página web:
​
-
En la vista Diseño de haz clic donde quieres que aparezca el vídeo
-
Haz clic en la ficha Insertar/HTML y selecciona HTML5 Vídeo
-
Un nuevo elemento de vídeo aparece.
-
En el panel Propiedades, en el cuadro Origen, escribe la ruta relativa del vídeo.
-
Guarda tu página y pre visualiza en un navegador.​
​​
CONSEJO
​
Si el archivo de vídeo va a estar en la misma carpeta que la página web cuando vayas a subir todo al servidor web, solo necesitas escribir el nombre del archivo.
CSS
​
Las hojas de estilo en cascada o Cascading Style Sheets (CSS) es un lenguaje que nos permite cambiar la apariencia y la presentación de nuestras páginas web. CSS trabaja conjuntamente con HTML para la entrega del resultado final que vemos en todas las páginas web que visitamos hoy en día.
Ya hemos visto un poco del código CSS en nuestros ejemplos anteriores. ¿Recuerdas como cambiamos el color de fondo de nuestra página web? Una regla CSS se creó automáticamente en ese momento, que se puede ver en la Vista Código de nuestra página web.
Entre las etiquetas <head> ... </head> de nuestro código HTML, las etiquetas:
<style type=”text/css”»...</style> envuelven las reglas CSS aplicadas a nuestra página web.
La sintaxis general de las reglas CSS es la siguiente:
selector {
property: value;
}
Una regla CSS puede, por supuesto. contener muchas propiedades y pares de valores. Cada una ellas cumple una tarea especifica dentro de la estructura para mejorar la apariencia de tu página web
-
Selector:
La primera parte de la regla se llama selector. El selector representa una estructura que puede ser usada como una condición para definir cómo luce mejor los contenidos de nuestra página web en un navegador.
-
Propiedad:
La sección propiedad de la regla CSS define una característica especifica de la estructura, como una propiedad de color de fondo de la página web.
-
Valor:
La sección valor de una regla CSS define una medida en términos generales.
Vamos a añadir una nueva regla CSS, esta vez aplicada en a etiqueta HTML <p>, cambiando la apariencia de todos los párrafos de nuestra página web.
Cada elemento HTML está dentro de un rectángulo invisible. Al cambiar el color de fondo background-color del elemento del párrafo, este contenedor cambia de color y ahora podemos verlo. La propiedad color cambia el color de texto del elemento. Padding es la distancia entre los contenidos de un elemento y los márgenes internos del contenedor. Por último, width especifica un valor de anchura, establecemos el ancho exacto del contenedor de nuestro elemento.
Cuando estás escribiendo una nueva regla CSS en la vista Código, Dreamweaver muestra una lista muy útil de sugerencias que contiene los nombres de todas las propiedades disponibles que puedes cambiar.
​
Si eres un tipo más visual, puedes usar el panel Diseñador CSS para establecer las propiedades de las reglas CSS. Si el panel Diseñador CSS no está visible, asegúrate de que está habilitado en Ventana >Diseñador de CSS.
Cuando el selector de una regla CSS es un elemento estándar HTML como <p> o <h1>, esto significa que la regla se aplica en todas las instancias de ese elemento en la página web entera. Sin embargo, si quieres cambiar la apariencia de solo un elemento o un conjunto de elementos, puedes usar un id o class como selector. Toma por ejemplo las siguientes reglas CSS.
En la primera regla, creamos un id llamado vídeo. Un id es un identificador único que se puede aplicar a solo un elemento de la página web. Las reglas CSS de id comienzan con un signo numeral (#).
En la segunda regla, creamos una clase CSS llamada txtCenter. Una clase es un tipo de selector que se puede aplicar a tantos elementos como queramos. Las reglas de Clase CSS empiezan con un punto (.).
CONSEJO
​
Si te encuentras con una propiedad CSS cuya función no puedes entender, o si quieres explorarla y aprender más acerca de las muchas propiedades CSS, usa tu motor de búsqueda favorito y busca “propiedades css”.
Es muy fácil aplicar nuestras reglas a cualquier elemento que queramos en nuestra página web.
Para aplicar una
regla CSS:
​
-
Ve a la vista Diseño y selecciona un elemento.
-
En el panel Propiedades puedes indicar que el elemento seleccionado tenga un ID o CLASE que se haya creado previamente.
​​
Hojas de estilo externas
​
En el ejemplo anterior usamos una hoja de estilo interno. Esto significa que el código CSS está incluido dentro de la página misma. Esto está bien para proyectos más pequeños o en situaciones donde el estilo que estás definiendo será usado solo en una página. Muchas veces aplicarás los estilos a muchas páginas y sería un lío tener que copiar y pegar los códigos CSS en cada página. Además del hecho de que estarías llenando las páginas con el mismo código CSS, también tendrías que editar cada una de esas páginas si quieres hacer un cambio de estilo.
Puedes tener un archivo separado, llamado hoja de estilo externa, con todas las reglas y así
vincularlo a cualquier página web a la que quieras aplicarle las reglas.
Para hacer esto, simplemente escribe las reglas CSS en un archivo con una extensión .css, por ejemplo estilo.css y guárdalo en la misma carpeta de tu página web. No incluyas ninguna etiqueta HTML como <style» en el archivo, solo escribe las reglas directamente.
Después, borra cualquier definición de hoja de estilo interna del código de tu página web y coloca la siguiente línea en algún lugar entre las etiquetas de tu página <head> ... </head>.
<link href="style.css” rel="stylesheet” type="text/css”»>
Al final el código debe lucir así.
Las propiedades CSS son muchas y es muy difícil aprenderlas todas. Usa el panel Diseñador CSS para experimentar con varias propiedades de diferentes elementos y lograr dominarlo. Por suerte, la mayoría de los nombres de las propiedades se explican por si mismas y usualmente es fácil entender su función.