CSS: texto

Sangría del texto [text-indent]

La propiedad text-indent permite añadir un toque de elegancia a los párrafos de texto al aplicar sangría a la primera línea de dicho párrafo. En el ejemplo siguiente se ha aplicado una sangía de 30px a todos los párrafos de texto marcados con la etiqueta <p>:

p {

text-indent: 30px;

}

CSS: las fuentes

Familia de fuentes [font-family]

La propiedad font-family se usa para establecer una lista ordenada de fuentes que se usarán para mostrar un elemento determinado o una página web. Si la primera fuente de la lista no está instalada en el ordenador desde el que se accede al sitio, se seguirá probando con la siguiente fuente hasta encontrar una fuente apropiada.

Para clasificar las fuentes se usan dos tipos de nombres: nombres de una familia y familias genéricas. Estos dos términos se explican a continuación.

CSS: colores

Color de primer plano: la propiedad 'color'

La propiedad color describe el color de primer plano de un elemento.

Por ejemplo, imagina que queremos que todos los títulos de un documento aparezcan con color rojo oscuro. Todos los títulos están marcados con el elemento <h1>. El código siguiente establece el color de los elementos <h1> como rojo.

CSS: comentarios y reglas básicas

Comentarios en CSS:

Podemos definir comentarios dentro de un fichero CSS haciendo uso de una sintaxis muy similar a la C/C++, es decir, se considerará un comentario cualquier sección del documento que comience con /* y termine con */.

Reglas básicas:

CSS: funcionamiento

Ahora veremos como crear tu primera hoja de estilo; conocerás el modelo básico de CSS y qué código es necesario para usar CSS en un documento HTML.

Muchas de las propiedades que se usan en las hojas de estilo en cascada (CSS) son parecidas a las de HTML. Así pues, si estás acostumbrado a usar HTML para cuestiones de presentación, lo más probable es que reconozcas gran parte del código usado. Examinemos un ejemplo concreto.

La sintaxis básica de CSS

Digamos que queremos un bonito color rojo como fondo de nuestra página web:

Usando HTML podríamos haberlo conseguido así:

CSS: ¿que es?

Las hojas de estilo en cascada (CSS, acrónimo de Cascading StyleSheets) son una herramienta fantástica para añadir presentación a los sitios web. Pueden ahorrarte mucho tiempo y te permitirán diseñar sitios web de un modo totalmente nuevo.

CSS es imprescindible para todos aquellos que trabajen en el campo del diseño web.

Seguridad wifi 2

Claves WEP

Vamos a ver como obtener la contraseña de una red wifi con una contraseña del tipo WEP, que es la mas fácil de romper, y la mas extendida...

Notas:

Este metodo solo es valido para redes con encriptacion WEP, nada de WPA.

No me hago responsable del uso de este manual, este manual es solo para probar la seguridad de tu red, nada de colarse en la red del vecino eh!!

Las partes que están tapadas es por privacidad o porque estaba probando modificadores.

Cuantos mas clientes tenga una red mejor, mas trafico generaran, y menos comandos harán falta (de estos que decía que eran para generar trafico).

Hay mas métodos para todo esto, como programas para redes WLAN_XX y WLAN_XXXX, de las de telefónica  que en apenas unos minutos te dan la clave, eso si, la por defecto. Así como scripts para hacer todo esto apenas marcando unos números.

Los paquetes(#DATA) necesarios para una contraseña no son nunca exactos, una vez puede pedirte 5.000 como 10.000, o 25.000, depende de la complejidad de la contraseña.

¿Que necesitamos?

-Lo primero un adaptador wifi, en mi caso tengo uno usb de marca CROTALUS, no sirve cualquiera, tiene que ser uno que permita auditorias wifi:

Seguridad wifi 1

Seguridad wifi: asegurar nuestra red

Lo mas seguro para nuestra red wifi, es tener siempre una contraseña, una contraseña difícil a ser posible, nada de palabras simples, o números, mezclar números, letras mayúsculas y minúsculas y algún símbolo.

Lo siguiente seria también hacer un filtrado de direcciones MAC que tendrán acceso a nuestra red, con esto conseguimos que aunque alguien de fuera consiga nuestra clave, no podría entrar ni conectarse...o si?

Ocultar la red, es decir, que no sea visible la red públicamente, que solo se encuentre si conocemos el nombre de dicha red.

HTML: multimedia 2

Películas Flash <object> ...

Las películas Flash son animaciones con la extensión SWF. Suelen incluirse en las páginas iniciales de los sitios web, y se utilizan a modo de presentación hacia los usuarios.

También pueden utilizarse como botones de las barras de navegación.

Estas películas pueden crearse mediante el programa Flash de Macromedia, y necesitan que el usuario tenga instalado el plug-in para poder ser visualizadas.

HTML: multimedia 1

En este tema vamos a ver cómo insertar elementos multimedia.

Sonido de fondo <bgsound>

Añadir una música de fondo a una página tiene pros y contras, si el sonido es apropiado al contenido de la página, puede hacerla más atractiva en contrapartida la descarga del archivo de sonido supone una carga que puede ralentizar la visualización de la página y además muchos usuarios suelen estar escuchando otro tipo de música cuando navega en Internet, por lo que el escuchar también sonido en cada página que visita puede resultar algo molesto.

HTML: formularios 3

Campos de selección <select> ...

Los campos de selección se utilizan para insertar menús y listas desplegables.

Para insertar uno de estos menús o listas es necesario insertar las etiquetas <select> y </select> en un formulario.

El atributo name indica el nombre del menú o lista será el nombre de la variable que contendrá el valor seleccionado.

HTML: formularios 2

Elementos de entrada <input>

Para insertar un elemento de entrada es necesario incluir la etiqueta <input> entre las etiquetas <form> y </form> del formulario.

El atributo name indica el nombre que se desea dar al elemento de entrada, mediante el cual será evaluado, y el atributo type indica el tipo de elemento de entrada.

HTML: formularios 1

En este tema vamos a ver qué son los formularios, para qué se utilizan, y qué elementos pueden contener.

Formulario <form>

Un formulario es un elemento que permite recoger datos introducidos por el usuario.

Los formularios se utilizan para conocer las opiniones, dudas, y otra serie de datos sobre los usuarios, para introducir pedidos a través de la red, tienen multitud de aplicaciones.

HTML: marcos 3

Destino del enlace

Como recordarás, en el tema de hipervínculos vimos los posibles destinos de los enlaces.

Estos destinos podían ser _blank, _parent, _self, y _top. Vamos a recordar para qué servía cada uno de ellos, ya que ahora que sabes trabajar con marcos te serán más fáciles de entender.

_blank: Abre el documento vinculado en una ventana nueva del navegador.

HTML: Marcos 2

Marco <frame>

Ya hemos visto cómo dividir un documento en varias subventanas o marcos, pero no hemos visto cómo hacer que se carguen las distintas páginas en cada uno de los marcos.

Para indicar qué documento se cargará en cada uno de los marcos habrá que insertar la etiqueta <frame> por cada uno de los marcos de la ventana. Estas etiquetas estarán entre las etiquetas <frameset> y </frameset>, y no necesitan etiqueta de cierre.

HTML: Marcos 1

En este tema vamos a ver qué son los marcos, para qué se utilizan, y cómo insertarlos.

Conjunto de marcos <frameset>

Los marcos o frames sirven para distribuir mejor los datos de las páginas, ya que permiten mantener fijas algunas partes, como pueden ser el logotipo y la barra de navegación, mientras que otras sí pueden cambiar. Además de mejorar la funcionalidad,  pueden mejorar también la apariencia.

HTML: tablas 4

Combinar celdas

Para las etiquetas <td> y <th> existen los atributos colspan y rowspan, que se utilizan para combinar celdas.

A través del atributo colspan se especifica el número de columnas por las que se extenderá la celda, y a través del atributo rowspan se especifica el número de filas por las que se extenderá la celda.

HTML: tablas 3

Encabezado de columna <th>

Las etiquetas <td> y </td> se utilizan para definir las celdas de cada una de las filas, pero podemos poner en su lugar las etiquetas <th> y </th>.
Para la etiqueta <th> es posible especificar los mismos atributos que para la etiqueta <td>, pero esta nueva etiqueta hace que el texto de la celda aparezca centrado y en negrita, por lo que se utiliza para definir los encabezados o títulos de las columnas.

Por ejemplo, si escribiéramos el siguiente código:

HTML: tablas 2

Formato de la tabla

Es posible modificar los siguientes atributos de una tabla:

HTML: Tablas 1

En este tema vamos a ver cómo trabajar con tablas. Podremos insertar tablas, filas y columnas, y modificar sus propiedades.

Hoy en día, la mayoría de las páginas web se basan en tablas, ya que resultan de gran utilidad al mejorar notablemente las opciones de diseño.

Todos los objetos se alinean por defecto a la izquierda de las páginas web, pero gracias a las tablas es posible distribuir el texto en columnas, colocar imágenes al lado de un bloque de texto, y otra serie de cosas que sin las tablas serían imposibles de realizarse.

HTML: Imágenes 2

Alineación de una imagen

La alineación de las imágenes se establece a través del atributo align. Este atributo indica la alineación de las imágenes con respecto a la línea de texto en la que se encuentran.

Los valores del atributo align pueden ser los siguientes:

El resultado de aplicar uno u otro valor puede tener el mismo resultado, como ocurre con
los valores baseline y bottom, o con los valores texttop y top.

Para insertar el texto y la imagen siguientes:

Hay que escribir:

PerrosGatos<img scr="imagenes/animales.gif" align="middle">Una web de animales

Este tipo de alineación la recomendamos cuando es una imagen pequeña que queremos fundir con la línea de texto sin que por ello cree una separación demasiado grande entre la línea donde se encuentra la imagen y las líneas superior y inferior. Por ejemplo para la imagen de un icono de cualquier programa, de un botón, etc.

Si la imagen es muy grande, conviene dejarla aislada del texto (no ajustarla a la derecha ni a la izquierda sino colocarla en un bloque aparte).

HTML: Imágenes 1

Vamos a ver cómo insertar imágenes, y cómo modificar algunas de sus propiedades.

Imagen <img>

Todas las páginas web acostumbran a tener un cierto número de imágenes, que permiten mejorar su apariencia, o dotarla de una mayor información visual.

Para insertar una imagen es necesario insertar la etiqueta <img>. Dicha etiqueta no necesita etiqueta de cierre.

El nombre de la imagen ha de especificarse a través del atributo src.

HTML: Hiperenlaces 2

Puntos de fijación. Anclas

Cuando se tienen documentos extensos, divididos en varios apartados, es preferible poder ir directamente al apartado deseado, en lugar de ir al comienzo del documento.

Para ello se utilizan las anclas, o puntos de fijación, muy útiles a la hora de crear índices.

Un ancla necesita que se inserten las <a> y </a>, con el atributo name, que puede tomar cualquier valor inventado por el usuario, se recomienda no utilizar caracteres especiales.

Por ejemplo, para insertar un punto de fijación delante del siguiente texto:

Texto con ancla

Hay que escribir:

<a name="miancla1"></a>Texto con ancla

Como puedes ver, no es necesario insertar nada entre las etiquetas <a> y </a>, y que sin mirar el código no hay nada que indique que delante del texto haya un ancla.

HTML: Hiperenlaces 1

Hiperenlaces en HTML

Vamos a ver qué son los hiperenlaces, para qué sirven y cómo crearlos, ya que son un elemento esencial para cualquier página web.

Hiperenlace <a>

Un hiperenlace, hipervínculo, o vínculo, no es más que un enlace, que al ser pulsado lleva de una página o archivo.

Aquellos elementos (texto, imágenes, etc.) sobre los que se desee insertar un enlace han de encontrarse entre las etiquetas <a> y </a>.

A través del atributo href se especifica la página a la que está asociado el enlace, la página que se visualizará cuando el usuario haga clic en el enlace.

La sintaxis para establecer un enlace es: <a href="destino">texto</a>.

HTML: Introduccion de texto 5

Las listas <li> ...

A menudo hay que hacer listas de objetos, de conceptos, de definiciones, etc.

Las listas pueden ser no numeradas (el orden no importa), numeradas, anidadas (listas dentro de otras) o de definiciones.

Listas no numeradas <ul> ...

Comienza el listado con la etiqueta <ul> (unordered list) y su final con la etiqueta de cierre </ul>. Cada objeto que forma la lista debe insertarse entre la etiqueta <li> (list item) y la etiqueta de cierre </li>.

A través del atributo type es posible elegir el tipo de viñeta, que puede ser circle (círculo), disc (disco) o square (cuadrado).

HTML: Introduccion de texto 4

Párrafos <p> ...

El texto de una página puede agruparse en párrafos. Para ello, el texto de cada uno de los párrafos debe insertarse entre las etiquetas <p> y </p>.

No es necesario insertar la etiqueta <br> para que un nuevo párrafo aparezca debajo del anterior, ya que las etiquetas <p> y </p> hacen que se cambie de línea automáticamente. También es posible cambiar la alineación del texto de cada párrafo. Para ello se modifica el valor del atributo align, cuyos valores pueden ser left (izquierda), right (derecha), center (centrado) o justify (justificado).

Por ejemplo, para insertar el texto:

Bienvenidos a mi página.

Aquí encontraréis cosas muy interesantes.

Habría que escribir:

<p align="center">Bienvenidos a mi p&aacutegina.</p>

<p>Aqu&iacute encontrar&eacuteis cosas muy interesantes.</p>

HTML: Introducción de texto 3

Formatear el texto <font> ...

Las propiedades del texto pueden modificarse a través de la etiqueta <font>. Para ello,
podemos insertar el texto entre las etiquetas <font> y </font>, especificando algunos de los
atributos de la etiqueta:

Por ejemplo, para insertar el texto:

Bienvenidos a mi página web particular

Habría que escribir:

<font color="#993366" size="4" face="Comic Sans MS, Arial, MS Sans Serif">Bienvenidos a mi página web particular</font>

También es posible definir una fuente para todo el documento. Para ello, hay que insertar la etiqueta <basefont> después de la etiqueta <body>. La etiqueta <basefont> no necesita una etiqueta de cierre, y permite modificar los mismos atributos del texto que la etiqueta <font>.

Por ejemplo:

HTML: Introducción de texto 2

Texto preformateado <pre>

Una forma de asegurarnos de que el texto aparezca en el navegador tal cual ha sido insertado dentro del código, es utilizando las etiquetas <pre> y </pre>.

Utilizando estas etiquetas podemos tener la seguridad de que en el navegador se mostrarán todos los espacios en blanco que se inserten en el texto, así como todos los saltos de línea resultantes de pulsar la tecla INTRO, sin la necesidad de utilizar la etiqueta <br>.

Por ejemplo, para insertar el texto:

Hola, BIENVENIDOS

esta ES MI PÁGINA WEB

y esto un texto preformateado

Habría que escribir:

HTML: Introducción de texto

Introducción de texto

A lo largo de este tema vamos a aprender a cambiar las propiedades del texto, así como a insertar caracteres especiales o separadores.

Caracteres especiales y espacios en blanco

Los caracteres < y > son dos caracteres especiales que indican inicio y fin de etiqueta. Si se desea insertar estos caracteres como texto hay que escribir el nombre que los representa:

< Se representa con &lt; > Se representa con &gt;

HTML: estructuras

En esta tercera parte del manual sobre HTML veremos la estructura básica de una pagina web.

La estructura básica de una página seria algo así como esta:

<html>
<head>
...
</head>
<body>
...
</body>
</html>

Ahora veamos cómo funcionan estas etiquetas.

Identificador del tipo de documento <html>

HTML: introducción 2

Segunda parte de este manual en el que explicaremos todo lo relacionado con el lenguaje HTML

Etiquetas

Las etiquetas o marcas delimitan cada uno de los elementos que componen un documento HTML. Existen dos tipos de etiquetas, la de comienzo de elemento y la de fin o cierre de elemento.

La etiqueta de comienzo está delimitada por los caracteres < y >. Está compuesta por el identificador o nombre de la etiqueta, y puede contener una serie de atributos opcionales que permiten añadir ciertas propiedades. Su sintaxis es: <identificador atributo1 atributo2 ...>

HTML: introducción 1

Primera parte de este manual en el que explicaremos todo lo relacionado con el lenguaje HTML

Qué es HTML