Desarrollo Web: octubre 2016

miércoles, 26 de octubre de 2016

Color y Fondo en CSS

3 Formas de Insertar color en CSS

Nombre
Valor Hexadecimal
Valor RGB

Nombre

En la declaración se anota color:NombreDelColor. Se puede elegir entre:

red, blue, magenta.

Valor Hexadecimal

#000000

Valor RGB

rgb(255,0,0)

Fondo

El fondo de los elementos en HTML puede ser de distintos tipos:

color
imagen

Los principales atributos de una imagen son:

background-color
background-image
background-repeat
background-attachment
background-position

Se pueden usar por separado o todos los atributos juntos separados por un espacio.

Ejemplo de página usando Color y Fondo.

Código:

<DOCTYPE! html>
<html>
<head>
<title> Usando Color y Fondo</title>
<style>
body{
background-color: linen;
background-image: url("imagenFondoLibre.jpg");
background-repeat: repeat-y;
background-attachment: fixed;
background-position: right top;
}
header{
background-color: lightblue;
}
</style>
</head>
<body>
<header><h1>Encabezado de otro color</h1></header>
Aquí va un texto.
</body>

</html>

Resultado:

lunes, 24 de octubre de 2016

Cómo Insertar CSS

3 Maneras de usar CSS

Existen 3 maneras de insertar código CSS en HTML;

En línea
En el encabezado
A través de un archivo externo

En línea

Se utiliza para agregar estilo a un elemento, no es aconsejable ya que hace menos legible la estructura de la página. Se agrega el estilo style con su valor al elemento. Ejemplo:

<p style="color:blue;"> Hola a todos </p>

En el Encabezado

Dentro de las etiquetas <head></head> se insertan las etiquetas <style></style> y dentro de estas etiquetas se enlistan los elementos con su declaración. Este estilo tampoco es tan recomendable ya que hace más largo el archivo y por lo tanto el tiempo de carga. Ejemplo:

<head>

<style>

color:blue;

}

h1{

color:red;

}

</style>

</head>

Archivo Externo

En el encabezado se establece el/los archivos de los cuales se tomarán los estilos. Es la forma más recomendada ya que acelera el tiempo de carga de las páginas y además es más comprensible el código. Ejemplo:

Primero relacionar el archivo en el encabezado

<head>

</head>

Después en el archivo se escriben los selectores con sus declaraciones.

h1{

color:red;

}

#lateral{

margin-right: 20px;

}

.titulos{

color:blue;

}

CSS

CSS Por sus siglas en inglés Cascading Style Sheets es el encargado de darle estilo a las páginas web, es decir, como se va mostrar la información en la pantalla. Su objetivo principal es ahorrar tiempo, ya que permite dar estilo a múltiples páginas con un solo archivo.

CSS fue desarrollado por W3C.

Sintaxis

Un estilo CSS normalmente se compone de dos partes; selector y declaración.

Imagen tomada de http://www.w3schools.com/css

El selector es el elemento HTML al que se le quiere dar estilo(puede ser el nombre de una clase, de un elemento HTML o el id de un elemento), mientras que una declaración agrupa a su vez varias declaraciones separadas por punto y coma. Cada declaración se compone de una propiedad:valor.

Selectores CSS

Imagen tomada de http://www.c-sharpcorner.com

Selector Elemento: Selecciona los elementos basados en su nombre html. Para seleccionarlo basta con escribir su nombre seguido de las declaraciones encerradas entre corchetes. Ejemplo:

header {
color:red;
}

Selector Id: Selecciona un elemento en base a su atributo id. Para seleccionarlo en CSS se antepone a su nombre el símbolo #. Ejemplo:

#titulos{
font-size:16px;
}

Selector Clase: Selecciona uno o varios elementos en base a su atributo clase. Para seleccionarlo en CSS se antepone a su nombre el símbolo . Ejemplo:

.lateral{
text-align: right;
}

miércoles, 19 de octubre de 2016

HTML5 - Estructura

HTML5

La combinación entre la estructura, el estilo y la funcionalidad.

Estructura

<DOCTYPE!> - Tipo de documento

<html> </html> - Envuelve el resto del código puede utilizar el atributo lang.
<html lang = "es"> </html>
<head></head> - Encabezado, incluye título, juego de caracteres, incorporar archivos externos con estilos (CSS) o con funcionalidades (Javascript). La mayoría son etiquetas invisibles.
<body></body> - Cuerpo, Toda la parte visible del documento.

Estructura de la Encabezado <head></head>

<meta></meta> - Describe el juego de caracteres a utilizar en la página. Contiene los atributos charset, description, keywords.

<title></title> - Muestra el título del documento en la pestaña del navegador.
<link> - Esta etiqueta sirve para insertar archivos externos, pudiendo ser archivos CSS, Javascript, imágenes u otros archivos. Utiliza los atributos rel que especifica el tipo de archivo y href que es

Estructura del cuerpo <body></body>

<table> De las primeras etiquetas que se utilizaban para hacer el diseño del sitio.
<div> Aún se utiliza junto con las nuevas etiquetas de html5. La idea es que estas últimas se utilicen para diferenciar las secciones más importantes del sitio.

Las etiquetas principales en un sitio web son:

Cabecera
Barra de Navegación
Información Principal
Barra lateral
Pie

Imagen tomada del curso de desarrollo web de la Universidad de Alicante.

<header></header> - Provee información introductoria al sitio, logo, títulos etc.,
<nav></nav> - menús principales, bloques grandes.
<section></section> - Dividir partes de la Información Principal. Distingue de Aside.
<article></article> - Divide partes importantes de la Información Principal que comparten características.
<aside></aside> - La barra lateral contiene datos de la barra lateral pero de menor importancia.
<footer></footer> - Compartir información general del autor o de la organización.

Páginas