Apuntes del curso

ftp

 

 

 

Para realizar una conexión FTP necesitará tener la siguiente información:

1. Nombre del servidor FTP que es el nombre de su dominio sin ‘www’, ‘ftp’ ni ningún otro prefijo.
Por ejemplo, si el nombre de su dominio es http://www.1and1faqs.es, su nombre de servidor FTP es ‘1and1faqs.es’

2. Nombre de Usuario

3. Contraseña

Consulte su nombre de usuario de la siguiente forma:

1. Acceda al Panel de Control 1&1 en http://www.1and1.es
Si sólo dispone de un contrato, accederá directamente al área de Administración. Si dispone de múltiples contratos, seleccione el Pack para dirigirse al área de Administración.

2. Haga clic en Acceso FTP debajo de Espacio Web y acceso dentro de la pestaña Administración.

Las partes que componen cada caja y su orden de visualización desde el punto de vista del usuario son las siguientes:

cajas en css

. Contenido (content): se trata del contenido HTML del elemento (las palabras de un párrafo, una imagen, el texto de una lista de elementos, etc.)

. Relleno (padding): espacio libre opcional entre el contenido y el borde que lo encierra.

. Borde (border): línea que encierra completamente el contenido y su relleno.

. Imagen de fondo (background image): imagen que se muestra por detrás del contenido y el espacio de relleno.

. Color de fondo (background color): color que se muestra por detrás del contenido y el espacio de relleno.

. Margen (margin): espacio libre entre la caja y las posibles cajas adyacentes.

 

Unidades de Medida Relativas

 

medidas

.em, (no confundir con la etiqueta <em> de HTML) relativa respecto del tamaño de letra empleado. Aunque no es una definición exacta, el valor de 1em se puede aproximar por la anchura de la letra M (“eme mayúscula”) del tipo de letra que se esté utilizando.

. ex, relativa respecto de la altura de la letra x (“equis minúscula”) del tipo de letra que se esté utilizando.

.px, (píxel) relativa respecto de la pantalla del usuario.

 

Descripcion de algunas propiedades

 

propiedades

.Font-family: Familia de fuente.

.Font-color: Color.

.Font-face: Tipografia.

.Font-size: Tamaño.

.width: Anchura

.height: Altura

.margin-top: Margen superior

.margin-right: Margen derecho

.margin-bottom: Margen inferior

.margin-left: Margen izquierdo

padding-top: Relleno superior

padding-right: Relleno derecho

padding-bottom: Relleno inferior

padding-left: Relleno izquierdo

border-top-width: Anchura del borde superior

border-right-width: Anchura del borde derecho

border-bottom-width: Anchura del borde inferior

border-left-width: Anchura del borde izquierdo

border-top-color: Color del borde superior

border-right-color: Color del borde derecho

border-bottom-color: Color del borde inferior

border-left-color: Color del borde izquierdo

border-top-style: Estilo del borde superior

border-right-style: Estilo del borde derecho

border-bottom-style: Estilo del borde inferior

border-left-style: Estilo del borde izquierdo

 

Propiedades shorthand

shorthand

Como sucede con los márgenes y los rellenos, CSS define una serie de propiedades de tipo “shorthand” que permiten establecer todos los atributos de los bordes de forma directa. CSS ha definido una propiedad “shorthand” para cada uno de los cuatro bordes y una propiedad “shorthand” global.

Antes de presentar las propiedades, es conveniente definir los tres siguientes tipos de valores:

<medida_borde> = <medida> | thin | medium | thick
<color_borde> = <color> | transparent
<estilo_borde> = none | hidden | dotted | dashed | solid | double | groove | ridge |
inset | outset

border-top: Estilo completo del borde superior

border-right: Estilo completo del borde derecho

border-bottom: Estilo completo del borde inferior

border-left: Estilo completo del borde izquierdo

Las propiedades “shorthand” permiten establecer alguno o todos los atributos de cada borde. El siguiente ejemplo establece el color y el tipo del borde inferior, pero no su anchura:

h1 {

border-bottom: solid red;

}

En el ejemplo anterior, la anchura del borde será la correspondiente al valor por defecto (medium). Este otro ejemplo muestra la forma habitual utilizada para establecer el estilo de cada borde:

div {

border-top: 1px solid #369;

border-bottom: 3px double #369;

}

 

modelo de cajas cssEl modelo de cajas o “box model” es seguramente la característica más importante del lenguaje
de hojas de estilos CSS, ya que condiciona el diseño de todas las páginas web. El “box model” es el
comportamiento de CSS que hace que todos los elementos incluidos en una página HTML se
representen mediante cajas rectangulares. CSS permite controlar el aspecto de todas las cajas.
El diseño de cualquier página XHTML está compuesto por cajas rectangulares. CSS permite
definir la altura y anchura de cada caja, el margen existente entre cajas y el espacio de relleno
interior que muestra cada caja. Además, CSS permite controlar la forma en la que se visualizan
las cajas: se pueden ocultar, desplazar respecto de su posición original y fijarlas en una posición
específica dentro del documento.

unidades absolutas

Las unidades absolutas definen las medidas de forma completa, ya que sus valores reales no se calculan a partir de otro valor de referencia, sino que son directamente los valores indicados. A continuación se muestra la lista completa de unidades absolutas definidas por CSS y su significado:
▪ in, del inglés “inches”, pulgadas (1 pulgada son 2.54 centímetros)
▪ cm, centímetros
▪ mm, milímetros
▪ pt, puntos (1 punto equivale a 1 pulgada/72, es decir, unos 0.35 milímetros)
▪ pc, picas (1 pica equivale a 12 puntos, es decir, unos 4.23 milímetros)

A continuación se muestran ejemplos de utilización de unidades absolutas:
body { margin: 0.5in; }
h1 { line-height: 2cm; }
p { word-spacing: 4mm; }
a { font-size: 12pt }
span { font-size: 1pc }

CSS define otra unidad de medida relativa basada en los porcentajes. Un porcentaje está formado
por un valor numérico seguido del símbolo % y siempre está referenciado a otra medida. Cada
una de las propiedades de CSS que permiten indicar como valor un porcentaje, define el valor al
que hace referencia ese porcentaje.
Los porcentajes se pueden utilizar por ejemplo para establecer el valor del tamaño de letra de
los elementos:
body { font-size: 1em; }
h1 { font-size: 200%; }
h2 { font-size: 150%; }
Los tamaños establecidos para los elementos <h1> y <h2> mediante las reglas anteriores, son
equivalentes a 2em y 1.5em respectivamente, por lo que es más habitual definirlos mediante em.
Los porcentajes también se utilizan para establecer la anchura de los elementos:
Introducción a CSS Capítulo 3. Unidades de medida y colores
http://www.librosweb.es 35
div#contenido { width: 600px; }
div.principal { width: 80%; }
<div id=”contenido”>
<div>

</div>
</div>
En el ejemplo anterior, la referencia del valor 80% es la anchura de su elemento padre. Por tanto,
el elemento <div> cuyo atributo class vale principal tiene una anchura de 80% x 600px =
480px.

unidades de medida

 

Las medidas en CSS se emplean, entre otras, para definir la altura, anchura y márgenes de los elementos y para establecer el tamaño de letra del texto. Todas las medidas se indican como un valor numérico entero o decimal seguido de una unidad de medida (sin ningún espacio en blanco entre el número y la unidad de medida).
CSS divide todas las unidades de medida en dos grupos: absolutas y relativas. Las medidas relativas definen su valor en relación con otra medida, por  lo que para obtener su valor real, se debe realizar alguna operación con el valor indicado. Las unidades absolutas establecen de forma completa el valor de una medida, por lo que su valor real es directamente el valor indicado.

Si el valor es 0, la unidad de medida es opcional. Si el valor es distinto a 0 y no se indica ninguna unidad, la medida se ignora completamente, lo que suele ser una fuente habitual de errores para los diseñadores que empiezan con CSS. Algunas propiedades permiten indicar medidas negativas, aunque habitualmente sus valores son positivos.

Unidades Relativas

 

La unidades relativas son más flexibles que las unidades absolutas porque se adaptan más fácilmente a los diferentes medios. A continuación se muestra la lista de unidades de medida relativas y la referencia que se toma para determinar su valor real:
▪ em, (no confundir con la etiqueta <em> de HTML) relativa respecto del tamaño de letra empleado. Aunque no es una definición exacta, el valor de 1em se puede aproximar por la anchura de la letra M (“eme mayúscula”) del tipo de letra que se esté utilizando
▪ ex, relativa respecto de la altura de la letra x (“equis minúscula”) del tipo de letra que se
esté utilizando
▪ px, (píxel) relativa respecto de la pantalla del usuario.

Las unidades em y ex no han sido definidas por CSS, sino que llevan décadas utilizándose en el
campo de la tipografía. La unidad em hace referencia al tamaño en puntos de la letra que se está
utilizando. Si se utiliza una tipografía de 12 puntos, 1em equivale a 12 puntos. El valor de 1ex se
puede aproximar por 0.5 em.

Ver introducción completa a Css

 

estilo css

 

 

CSS es un lenguaje de hojas de estilos creado para controlar el aspecto o presentación de los documentos electrónicos definidos con HTML y XHTML. CSS es la mejor forma de separar los contenidos y su presentación y es imprescindible para crear páginas web complejas. Al crear una página web, se utiliza en primer lugar el lenguaje HTML/XHTML para marcar los contenidos, es decir, para designar la función de cada elemento dentro de la página: párrafo, titular, texto destacado, tabla, lista de elementos, etc.  Una vez creados los contenidos, se utiliza el lenguaje CSS para definir el aspecto de cada elemento: color, tamaño y tipo de letra del texto, separación horizontal y vertical entre elementos, posición de cada elemento dentro de la página, etc. Separar la definición de los contenidos y la definición de su aspecto presenta numerosas ventajas, ya que obliga a crear documentos HTML/XHTML bien definidos y con significado completo (también llamados “documentos semánticos”). Además, mejora la accesibilidad del documento, reduce la complejidad de su mantenimiento y permite visualizar el mismo documento en infinidad de dispositivos diferentes.

Una de las principales características de CSS es su flexibilidad y las diferentes opciones que ofrece para realizar una misma tarea. De hecho, existen tres opciones para incluir CSS en un documento HTML.

Incluir CSS En El Mismo Documento HTML

Los estilos se definen en una zona específica del propio documento HTML. Se emplea la etiqueta <style> de HTML y solamente se pueden incluir en la cabecera del documento (sólo dentro de la sección <head>).

Ejemplo:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Ejemplo de estilos CSS en el propio documento</title>
<style type=”text/css”>
p { color: black; font-family: Verdana; }
</style>
</head>
<body>
<p>Un párrafo de texto.</p>
</body>
</html>

Este método se emplea cuando se define un número pequeño de estilos o cuando se quieren incluir estilos específicos en una determinada página HTML que completen los estilos que se incluyen por defecto en todas las páginas del sitio web. El principal inconveniente es que si se quiere hacer una modificación en los estilos definidos, es necesario modificar todas las páginas que incluyen el estilo que se va a modificar.

 

Selector Universal

Se utiliza para seleccionar todos los elementos de la página. El siguiente ejemplo elimina el margen y el relleno de todos los elementos HTML (por ahora no es importante fijarse en la parte de la declaración de la regla CSS):
* {
margin: 0;
padding: 0;
}
El selector universal se indica mediante un asterisco (*). A pesar de su sencillez, no se utiliza habitualmente, ya que es difícil que un mismo estilo se pueda aplicar a todos los elementos de una página. No obstante, sí que se suele combinar con otros selectores y además, forma parte de algunos hacks muy utilizados (como se verá más adelante).

 

Selector de Tipo o Etiqueta

Selecciona todos los elementos de la página cuya etiqueta HTML coincide con el valor del selector. El siguiente ejemplo selecciona todos los párrafos de la página:
p {

}

 

Para utilizar este selector, solamente es necesario indicar el nombre de una etiqueta HTML (sin los caracteres < y >) correspondiente a los elementos que se quieren seleccionar. El siguiente ejemplo aplica diferentes estilos a los titulares y a los párrafos de una página HTML:

h1 {
color: red;
}
h2 {
color: blue;
}
p {
color: black;
}

Selector Descendente

Selecciona los elementos que se encuentran dentro de otros elementos. Un elemento es descendiente de otro cuando se encuentra entre las etiquetas de apertura y de cierre del otro elemento.

 

A continuación, se crea en el archivo CSS una nueva regla llamada destacado con todos los estilos que se van a aplicar al elemento. Para que el navegador no confunda este selector con los otros tipos de selectores, se prefija el valor del atributo class con un punto (.) tal y como muestra el siguiente ejemplo: .destacado { color: red; }

El selector .destacado se interpreta como “cualquier elemento de la página cuyo atributo class sea igual a destacado”, por lo que solamente el primer párrafo cumple esa condición.

 

Selectores de ID

 

La sintaxis de los selectores de ID es muy parecida a la de los selectores de clase, salvo que se utiliza el símbolo de la almohadilla (#) en vez del punto (.) como prefijo del nombre de la regla CSS:
#destacado { color: red; }
<p>Primer párrafo</p>
<p id=”destacado”>Segundo párrafo</p>
<p>Tercer párrafo</p>

 

 

<html>

<head></head>

<body>

<div id=”contenedor”>

<div id=”cabecero”>

<div id=”menu principal”></div>

</div>

<div id=”contenido”>

<div id=”lateral”></div>

<div id=”centro”></centro>

<div id=”pie”></div>

</div>

</div>

</body>

</html>

Nube de etiquetas

Seguir

Recibe cada nueva publicación en tu buzón de correo electrónico.