Mi primera web en html

jumarras

Dreamweaver = una mierda. Vale, esta bien que puedes ver el cambio del codigo y demas, pero tambien puedes ver los html abriendolos con el firefox o explorer.

Donde este el notepad++, que se quite todo editor de lenguaje.

Salu2

Salvatore

Vamos a hacer nuestra primera web básica, para conocer la estructura del código html. Nuestra web constará de una cabecera y un contenido. Nada más.
Empezamos. Lo primero, un editor html. Les hay de código simplemente, y les hay más sofisticados (y más caros normalmente). Los de código simplemente son un bloc de notas, que te colorea la sintaxis o te ayuda a escribir. Y los otros son más visuales. Técnicamente la "palabra" es WYSIWYG, que viene de "what you see is what you get" en inglés. En cristiano, que en vez de ver código, ves el resultado de ese código.
Esto es muy cómodo, pero para aprender, no lo recomiendo. Editores WYSIWYG el más famoso el Dreamweaver, de la familia adobe. Es de pago. Editores de código, el html-kit es bastante conocido: [http://www.htmlkit.com/download/][0]">[http://www.htmlkit.com/download/][1]
También sirve el notepad++, que vale para todo.

Bien, creamos un archivo, llamado "index.html". Se puede hacer en cualquier carpeta pinchando con el derecho -> nuevo -> documento de texto y le cambiáis la extensión (en vez de txt, html).
Vale, abrimos el archivo con notepad, html-kit, dreamweaver o lo que tengamos.

Lo mínimo que debe tener una web, es lo siguiente:

Es decir, etiqueta html, head y body. Todas con su inicio y su cierre (con la barra delante significa cierre de etiqueta).
Aunque a alguno se le haya ocurrido, la etiqueta head no es para poner la imagen de cabecera jeje. la etiqueta head sirve para definir estilos, scripts, título y descripción de la web, el iconito de la web (favicon para los entendidos)... Pero lo que es la web realmente va dentro todo del body.
Bien, vamos a poner en el head simplemente un título, así:

Dentro del head. Si has seguido el tutorial, puedes guardar tu archivo y abrirlo con tu navegador (firefox, chrome, opera... incluso explorer entenderá este sencillo ejemplo xD).
Vas a ver una página en blanco, pero verás ya el título!

Vale, vamos con algo más vistoso, nos metemos en el body que da mucho más juego. Vamos a poner un titular, con letra grande, que diga "Esta es mi primera web". Así:

## Esta es mi primera web!

Hemos usado la etiqueta h2, que se usa para estas cosas. Guarda y mira tu web de nuevo. Prueba a cambiar lo de h2 por h1 (acuérdate de cambiarlo en el cierre de etiqueta también), verás que la letra es más grande. Al contrario que si pones h3.
Bien, tenemos un titular, vamos con un texto:

## Esta es mi primera web!

Mi primera web, gracias al tutorial de universojuegos.es =)

Usamos la etiqueta p, que sirve para crear párrafos. Hora de ver el resultado, guarda y abre de nuevo el archivo, o F5 si lo tienes aun abierto desde antes.

Pero es muy soso verdad? Qué tal si ponemos el titular de un color diferente? Vamos a probar, esto ya entra en la parte de estilos CSS, no de html, pero como veréis, van muy unidos. Vamos a cambiar la línea del "h2", y quedará así:

## Esta es mi primera web!

Hemos añadido dentro de la etiqueta h2, una propiedad css. Con la palabra "style" hacemos referencia a css, y dentro, usamos la regla "color", que modifica el color del texto. Esa regla tiene como valor un color, el rojo, que en hexadecimal se escribe #F00. Ya que estamos, vamos a usar otra regla de estilo, una más curiosa, la línea quedará así:

## Esta es mi primera web!

Ahora, dentro del estilo, hay dos reglas. La del color de fuente, y una nueva "text-decoration", que tiene como valor "blink". Qué será esto? Prueba tu web, a qué esperas!!

Ojo, detrás de cada regla, hay un punto y coma. No los olvidéis.
Vale, pues ahora que sabemos cambiar el color de un texto, qué tal si se lo cambiamos al párrafo también? Se te ocurre como hacerlo?
Se hace igual claro, añadiendo un estilo a la etiqueta

, y en ese estilo poniendo la regla "color" con el color que nos guste. Por ejemplo un naranja. Puedes ver los códigos de los colores en esta web: [http://html-color-codes.info/codigos-de-colores-hexadecimales/][0]">[http://html-color-codes.info/codigos-de][2] ... decimales/
O bien puedes ser vago y hacer esto:

Mi primera web, gracias al tutorial de universojuegos.es =)

Sep, CSS sabe lo que significa "orange" jeje.

Bueno, más adelante veremos que los estilos CSS se pueden separar, para que no quede mezclado el código html con los estilos. Le daremos algo más de uso a la etiqueta "head", y probaremos otras etiquetas para el body, como las capas (div), tablas (table) etc.
De momento, con esto basta para que juguéis un poco

## Esta es mi primera web!

Mi primera web, gracias al tutorial de universojuegos.es =)

[0]: <a href=
[1]: http://www.htmlkit.com/download/
[2]: http://html-color-codes.info/codigos-de

Salvatore

en modo código es como cualquier otro editor no visual.
Si vas a comenzar con html y css, quédate con un buen editor de código. Más adelante, si te apetece puedes probar el dreamweaver, pero no es para tanto.