Datos necesarios para realizar una conexión 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
Referencia de CSS
Definición completa y ejemplos de uso de todas las propiedades del estándar CSS
Ordenadas por tipo
Box model o modelo de cajas
Anchura y altura
height, maxheight ,maxwidth, minheight, minwidth, width
Margen
margin, marginbottom, marginleft, marginright, margintop
Relleno
padding, paddingbottom, paddingleft, paddingright, paddingtop
Borde
border, borderbottom, borderbottomcolor, borderbottomstyle,
borderbottomwidth, bordercolor, borderleft, borderleftcolor,
borderleftstyle, borderleftwidth, borderright, borderrightcolor,
borderrightstyle, borderrightwidth, borderstyle, bordertop, bordertopcolor,
bordertopstyle, bordertopwidth, borderwidth
Perfil
outline, outlinecolor, outlinestyle, outlinewidth
Fondo
background, backgroundattachment, backgroundcolor, backgroundimage,
backgroundposition, backgroundrepeat
Texto y tipografía
Tipografía
color, font, fontfamily, fontsize, fontstyle, fontvariant, fontweight, letterspacing
Texto
direction, lineheight, textalign, textdecoration, textindent, texttransform, unicodebidi,
wordspacing
Posicionamiento y visualización
Posicionamiento
bottom, clear, float, left, position, right, top
Visualización
clip, display, overflow, visibility, whitespace, zindex
Tablas
bordercollapse,
borderspacing,
captionside,
emptycells,
tablelayout
Listas
liststyle,
liststyleimage,
liststyleposition,
list-style-type
Contenido generado
content, counterincrement,
counterreset, quotes
Medios impresos
orphans, pagebreakafter,
pagebreakbefore,
pagebreakinside,
widows
Introducción al CSS
Antes de que se generalizara el uso de CSS, los diseñadores de páginas web utilizaban etiquetas HTML especiales para modificar el aspecto de los elementos de la página. El siguiente ejemplo muestra una página HTML con estilos definidos sin utilizar CSS:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Ejemplo de estilos sin CSS</title> </head> <body> <h1><font color="red" face="Arial" size="5">Titular de la página</font></h1> <p><font color="gray" face="Verdana" size="2">Un párrafo de texto no muy largo.</font></p> </body> </html>
El ejemplo anterior utiliza la etiqueta <font> con sus atributos color, face y size para definir el color, el tipo y el tamaño de letra de cada elemento de la página.
El problema de utilizar este método para definir el aspecto de los elementos se puede ver claramente con el siguiente ejemplo: si la página tuviera 50 elementos diferentes, habría que insertar 50 etiquetas <font>. Si el sitio web entero se compone de 10.000 páginas diferentes, habría que definir 500.000 etiquetas <font>. Como cada etiqueta <font> tiene tres atributos, habría que definir 1.5 millones de atributos.
Como el diseño de los sitios web está en constante evolución, es habitual modificar cada cierto tiempo el aspecto de las páginas del sitio. Siguiendo con el ejemplo anterior, cambiar el aspecto del sitio requeriría modificar 500.000 etiquetas y 1.5 millones de atributos.
La solución que propone CSS es mucho mejor, como se puede ver en el siguiente ejemplo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo de estilos con CSS</title>
<style type="text/css">
h1 { color: red; font-family: Arial; font-size: large; }
p { color: gray; font-family: Verdana; font-size: medium; }
</style>
</head>
<body>
<h1>Titular de la página</h1>
<p>Un párrafo de texto no muy largo.</p>
</body>
</html>
CSS permite separar los contenidos de la página y la información sobre su aspecto. En el ejemplo anterior, dentro de la propia página HTML se crea una zona especial en la que se incluye toda la información relacionada con los estilos de la página.
Utilizando CSS, se pueden establecer los mismos estilos con menos esfuerzo y sin ensuciar el código HTML de los contenidos con etiquetas <font>. Como se verá más adelante, la etiqueta <style> crea una zona especial donde se incluyen todas las reglas CSS que se aplican en la página.
En el ejemplo anterior, dentro de la zona de CSS se indica que todas las etiquetas <h1> de la página se deben ver de color rojo, con un tipo de letra Arial y con un tamaño de letra grande. Además, las etiquetas <p> de la página se deben ver de color gris, con un tipo de letra Verdana y con un tamaño de letra medio.
Definir los estilos de esta forma ahorra miles de etiquetas y millones de atributos respecto a la solución anterior, pero sigue sin ser una solución ideal. Como los estilos CSS sólo se aplican en la página que los incluye, si queremos que las 10.000 páginas diferentes del sitio tengan el mismo aspecto, se deberían copiar 10.000 veces esas mismas reglas CSS. Más adelante se explica la solución que propone CSS para evitar este problema.
CSS define una serie de términos que permiten describir cada una de las partes que componen los estilos CSS. El siguiente esquema muestra las partes que forman un estilo CSS muy básico:
Figura 1.1. Componentes de un estilo CSS básico
Los diferentes términos se definen a continuación:
{), otra parte denominada «declaración» y por último, un símbolo de «llave de cierre» (}).Un archivo CSS puede contener infinitas reglas CSS, cada regla puede contener infinitos selectores y cada declaración puede estar formada por un número infinito de pares propiedad/valor.
El estándar CSS 2.1 define 115 propiedades, cada una con su propia lista de valores permitidos. Por su parte, los últimos borradores del estándar CSS 3 ya incluyen 239 propiedades.
<html>
<head><title>EJERCICIO DE BLOG</title>
</head>
<body>
<table border=»3px»>
<tr>
<th colspan=»5″>MIS BLOGS</th>
</tr>
<tr>
<td rowspan=»3″>
<ul>
<li><a href=»https://useche.wordpress.com/pensamiento-positivo/»>Pensamiento
Positivo</a></li>
<li><a href=»http://webymultimedia2010.wordpress.com/magazine-
dwm/»>Magazine DWM</a></li>
<li><a href=»https://useche.wordpress.com/2011/01/30/enlaces-en-
html/»>Apuntes</a></li>
<li><a href=»https://useche.wordpress.com/camino-a-la-felicidad/sony-
dsc/»>Felicidad</a></li>
</ul>
<td>Personal</td>
<td>Magazin</td>
<td>Apuntes</td>
<td>Camino a la felicidad</td>
</tr>
<tr>
<td><img src=»imagenes/blogs/personal_blog.jpg»></td>
<td><img src=»imagenes/blogs/diseño.jpg»></td>
<td><img src=»imagenes/blogs/apuntes.jpg»></td>
<td><img src=»imagenes/blogs/camino.jpg»></td>
</tr>
<tr>
<td>Este blog es sobre el pensamiento positivo,piensa positivamente y solo
cosas buenas se te daran,atraeras para ti dicha,felicidad,abundancia y
prosperidad.</Td>
<td>Este blog de Magazin a todos los del curso nos toca una seccion
diferente.</td>
<td>Este blog esta relacionado con todos los apuntes del curso de Diseño
Web y Multimedia.</td>
<td>Este blog se llama camino a la felicidad por que son fotos que yo misma
he realizado.</td>
</tr>
<tr>
<th colspan=»5″>Patricia Selene Useche mas informacion en correo
paseus28@hotmail.com</th>
</tr>
</table>
</body>
</html>
Desde sus primeras versiones, HTML incluyó el soporte para crear tablas de datos en las páginas web. Además de ser sencillo, el modelo definido por HTML es muy flexible y bastante completo.
Las tablas en HTML utilizan los mismos conceptos de filas, columnas, cabeceras y títulos que los que se utilizan en cualquier otro entorno de publicación de documentos:
Figura 7.1. Partes que componen una tabla compleja
Las tablas de HTML puede contener elementos simples, agrupaciones de filas y de columnas, cabeceras y pies de tabla, subdivisiones, cabeceras múltiples y otros elementos complejos.
A pesar de que las tablas HTML son fáciles de comprender y utilizar, son uno de los elementos más polémicos de HTML. El problema de las tablas es que no siempre se utilizan adecuadamente. Aunque parezca obvio, las tablas se deben utilizar para mostrar información tabular.
El lenguaje de marcado HTML se definió teniendo en cuenta algunas de las características que existían en ese momento para la publicación digital de contenidos. Entre los conceptos utilizados en su creación, se encuentra el mecanismo de «hipertexto».
De hecho, las letras «HT» de la sigla HTML significan «hipertexto» (hypertext en inglés), por lo que el significado completo de HTML podría traducirse como «lenguaje de marcado para hipertexto».
La incorporación del hipertexto fue una de las claves del éxito del lenguaje HTML, ya que permitió crear documentos interactivos que proporcionan información adicional cuando se solicita. El elemento principal del hipertexto es el «hiperenlace», también llamado «enlace web» o simplemente «enlace».
Los enlaces se utilizan para establecer relaciones entre dos recursos. Aunque la mayoría de enlaces relacionan páginas web, también es posible enlazar otros recursos como imágenes, documentos y archivos.
Una característica que no se suele tener en cuenta en los enlaces es que están formados por dos extremos y un sentido. En otras palabras, el enlace comienza en un recurso y apunta hacia otro recurso. Cada uno de los dos extremos se llaman «anchors» en inglés, que se puede traducir literalmente como «anclas».
Antes de empezar a crear enlaces, es necesario comprender y dominar el concepto de URL. El acrónimo URL (del inglés Uniform Resource Locator) hace referencia al identificador único de cada recurso disponible en Internet. Las URL son esenciales para crear los enlaces, pero también se utilizan en otros elementos HTML como las imágenes y los formularios.
La URL de un recurso tiene dos objetivos principales:
En primer lugar, las URL permiten que cada página HTML publicada en Internet tenga un nombre único que permita diferenciarla de las demás. De esta forma es posible crear enlaces que apunten de forma inequívoca a una determinada página.
Si se accede a la página principal de Google, la dirección que muestra el navegador es:
http://www.google.com
La cadena de texto http://www.google.com es la URL completa de la página principal de Google. La URL de las páginas es imprescindible para crear los enlaces, ya que permite distinguir una página de otra.
El segundo objetivo de las URL es el de permitir la localización eficiente de cada recurso de Internet. Para ello es necesario comprender las diferentes partes que forman las URL. Una URL sencilla siempre está formada por las mismas tres partes. Si por ejemplo se considera la siguiente URL:http:www.librosweb.es/xhtml/capitulo4.html
Las páginas web habituales suelen contener decenas de enlaces de diferentes tipos. La siguiente imagen muestra algunos de los tipos de enlaces de la página principal del sitio web : http://www.thinkvitamin.com:
Figura 4.1. Ejemplo de diferentes tipos de enlaces en la página 456BereaStreet.com
En esa página, cuando se pincha sobre algunos enlaces, el navegador abandona el sitio web para acceder a páginas que se encuentran en otros sitios. Estos enlaces se conocen como «enlaces externos». Sin embargo, la mayoría de enlaces de un sitio web apuntan a páginas del propio sitio web, por lo que se denominan «enlaces internos».
Además de internos/externos, la otra característica que diferencia a los enlaces (y por tanto, también a las URL) es si el enlace es absoluto o relativo. Las URL absolutas incluyen todas las partes de la URL (protocolo, servidor y ruta) por lo que no se necesita más información para obtener el recurso enlazado.
Las URL relativas prescinden de algunas partes de las URL para hacerlas más breves. Como se trata de URL incompletas, es necesario disponer de información adicional para obtener el recurso enlazado. En concreto, para que una URL relativa sea útil es imprescindible conocer la URL del origen del enlace.
Las URL relativas se construyen a partir de las URL absolutas y prescinden de la parte del protocolo, del nombre del servidor e incluso de parte o toda la ruta del recurso enlazado. Aunque las URL relativas pueden ser difíciles de entender para los que comienzan con HTML, son tan útiles que todos los sitios web las utilizan.
<a href="/">Inicio</a>
Al pulsar el enlace anterior desde cualquier página web, se vuelve directamente a la página de inicio, home o página principal del sitio web.
<a href="mailto:nombre@direccion.com" title="Dirección de email para solicitar más información"> Solicita más información </a>
Al pinchar sobre el enlace anterior, se abre automáticamente el programa de correo electrónico del ordenador del usuario y se establece la dirección de envío al valor indicado después de mailto: La sintaxis es la misma que la de un enlace normal, salvo que se cambia el prefijo http:// por mailto.
Una consideración importante directamente relacionada con el texto de las páginas HTML es la codificación de los caracteres y la inserción de caracteres especiales. Algunos de los caracteres que se utilizan habitualmente en los textos no se pueden incluir directamente en las páginas web:
<, > y ") no se pueden utilizar libremente.ñ, á, ç, ¿, ¡, etc.) pueden ser problemáticos dependiendo de la codificación de caracteres utilizada.La solución a la primera limitación consiste en sustituir los caracteres reservados de HTML por unas expresiones llamadas entidades HTML y que representan a cada carácter:
| Entidad | Carácter | Descripción | Traducción |
|---|---|---|---|
< |
< |
less than | signo de menor que |
> |
> |
more than | signo de mayor que |
& |
& |
ampersand | ampersand |
" |
" |
quotation mark | comillas |
|
(espacio en blanco) |
non-breaking space | espacio en blanco |
' |
‘ | apostrophe | apóstrofo |
De esta forma, si se considera el siguiente texto:
Los caracteres <, >, " y & pueden dar problemas con los textos en HTML
Para mostrar correctamente el texto anterior en una página HTML, se debe sustituir cada carácter especial por su entidad HTML:
<p>Los caracteres <, >, " y & pueden dar problemas con los textos en HTML</p>
< este simbolo es menor que.
> este simbolo es mayor que
Árbol
& ampersand
» comillas
espacio en blanco
‘ apostrofe
ñapa
lópez
método
último
prácticas
señalar
Os pongo el código de XHTML
que me gustaría que empezaraís a utilizar en una pestaña de esta página.
Espacios en blanco
Códigos para codificaciones especiales:
< < less than signo de menor que
> > more than signo de mayor que
& & ampersand ampersand
" » quotation mark comillas
(espacio en blanco) non-breaking space espacio en blanco
' ‘ apostrophe apóstrofo
Hoy por hoy, los metatags no sirven de mucho. Debido al abuso que se ha hecho de ellos, cada vez son mas los buscadores que los ignoran, sobretodo el metatag «keywords» -de los principales buscadores solo Inktomi aún lo usa, y aún así le da muy poca importancia-.
Utiliza el siguiente script para generar los metatags. El primero todavía puede ser algo útil, pero poco. El segundo –meta tag keywords- nos atrevemos a afirmar que no sirve de nada y que en estos momentos ya ha muerto. Los otros dos (3 y 4), que en ocasiones son útiles, lo mejor es no utilizarlos, ya que pueden perjudicar el trabajo de promoción. El tercero es respetado por la mayoría de buscadores, pero debes fijarte bien que le dices y el cuarto es específico para Google -permite o no que google guarde una copia de tu web en su cache-.
Repetir palabras clave puede suponer la expulsión del buscador. En esta página se podría poner:
<meta name=»KEYWORDS» content=»METATAGS PROMOCION WEB GENERADOR SCRIPT»><meta name=»DESCRIPTION» content=»Generador de metatags, promoción de páginas web»>
Si tenemos en cuenta que las primeras lineas de código de cada página son fundamentales para el posicionamiento de la web, recomendamos no poner ningún otro metatag; no sirven de nada y ocupan un lugar de primer orden dentro de la página.
Recordamos que es mejor no hacer meta tags que hacerlo mal. Esta página no lleva ningún metatag y en cambio tiene un buen posicionamiento en los buscadores.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html;
charset=utf-8″ />
<title>Título de la web</title>
</head>
<body>
<p>Aquí va el contenido</p>
</body>
</html>
Definiéndolo de forma sencilla, «HTML es lo que se utiliza para crear todas las páginas web de Internet». Más concretamente, HTML es el lenguaje con el que se «escriben» la mayoría de páginas web.
Los diseñadores utilizan el lenguaje HTML para crear sus páginas web, los programas que utilizan los diseñadores generan páginas escritas en HTML y los navegadores que utilizamos los usuarios muestran las páginas web después de leer su contenido HTML.
Aunque HTML es un lenguaje que utilizan los ordenadores y los programas de diseño, es muy fácil de aprender y escribir por parte de las personas. En realidad, HTML son las siglas de HyperText Markup Language y más adelante se verá el significado de cada una de estas palabras.
head: cabecero
body: cuerpo contenido
title : titulo
font : fuente, tipo de letra, tipografia.
size : tamaño
color : color
file : carpeta
useche 